/* =========================================================
   Concept kit: review bar, phone view, slide-out menu, skip link,
   toast and reduced motion, shared by the three Health 419 designs.
   Each design sets --ck-accent, --ck-tint and --ck-on-accent.
   ========================================================= */

/* Review chrome stays neutral; designs override accent/tint */
:root{--ck-ink:#15171f;--ck-paper:#f6f4ef;--ck-line:#e3e0d8;--ck-muted:#5b5e6a;--ck-note:#b9bccb;--ck-accent:#2f4b3f;--ck-tint:#eef2ee;--ck-on-accent:#fff}
/* Balanced headline wrapping (avoids "No heat? No / AC?") */
h1, h2, h3 { text-wrap: balance; }

/* Keep section headings clear of the sticky header when jumping to them */
section[id], main{scroll-margin-top:110px}

/* Skip link */
.ck-skip{position:absolute;left:12px;top:-100px;z-index:200;background:var(--ck-ink);color:var(--ck-paper);
  padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none}
.ck-skip:focus{top:12px}

/* Slide-out menu */
.ck-scrim{position:fixed;inset:0;background:rgba(20,22,30,.55);z-index:150;opacity:0;pointer-events:none;transition:opacity .2s}
.ck-scrim.open{opacity:1;pointer-events:auto}
.ck-menu{position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);z-index:160;background:var(--ck-paper);color:var(--ck-ink);
  transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column;box-shadow:-20px 0 40px -20px rgba(0,0,0,.4);
  visibility:hidden}
.ck-menu.open{transform:none;visibility:visible}
.ck-menu-head{display:flex;align-items:center;justify-content:space-between;background:var(--ck-accent);padding:14px 16px}
.ck-menu-head b{color:var(--ck-on-accent);font:700 1.2rem system-ui,sans-serif}
.ck-close{background:none;border:2px solid currentColor;color:var(--ck-on-accent);width:46px;height:46px;border-radius:10px;font-size:24px;cursor:pointer}
.ck-menu nav{flex:1;overflow:auto;padding:8px 0}
.ck-menu nav a{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;font:700 1.1rem/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ck-ink);text-decoration:none;border-bottom:1px solid var(--ck-line)}
.ck-menu nav a:hover{background:var(--ck-tint);color:var(--ck-accent)}
.ck-menu nav a::after{content:"→";color:var(--ck-accent)}
.ck-menu-foot{padding:16px;display:grid;gap:10px;border-top:1px solid var(--ck-line)}
.ck-menu-foot a{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:10px;font:700 1.05rem system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none}
.ck-menu-foot .ck-call{background:var(--ck-accent);color:var(--ck-on-accent)}
.ck-menu-foot .ck-req{border:2px solid var(--ck-accent);color:var(--ck-accent)}
.ck-menu-foot small{text-align:center;color:var(--ck-muted);font:400 .9rem system-ui,sans-serif}
body.ck-locked{overflow:hidden}

/* "Coming soon" toast */
.ck-toast{position:fixed;left:50%;bottom:100px;transform:translate(-50%,20px);z-index:170;background:var(--ck-ink);color:var(--ck-paper);
  padding:12px 18px;border-radius:10px;font:600 15px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;max-width:min(420px,90vw);text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.ck-toast.show{opacity:1;transform:translate(-50%,0)}
a[data-soon]{cursor:help}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important}
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
  a:hover,button:hover,.btn:hover,[class*="card"]:hover,.q:hover,.svc:hover,.help-card:hover,.pick:hover{transform:none !important}
}

/* Review bar (full-size view only) */
:root{--ck-bar-h:48px}
body.ck-has-bar{padding-top:var(--ck-bar-h)}
body.ck-has-bar .header{top:var(--ck-bar-h)}
body.ck-has-bar section[id], body.ck-has-bar main{scroll-margin-top:160px}
.ck-bar{position:fixed;top:0;left:0;right:0;height:var(--ck-bar-h);z-index:140;display:flex;align-items:center;gap:10px;padding:0 10px;
  background:var(--ck-ink);color:var(--ck-paper);font:600 14px/1 system-ui,-apple-system,"Segoe UI",sans-serif;box-shadow:0 2px 12px rgba(0,0,0,.28)}
.ck-bar a,.ck-bar button{color:inherit;text-decoration:none;border:0;background:none;font:inherit;cursor:pointer;border-radius:8px;
  min-height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;white-space:nowrap}
.ck-bar a:hover,.ck-bar button:hover{background:rgba(245,240,224,.12)}
.ck-note{color:var(--ck-note);font-weight:500;white-space:nowrap}
.ck-seg{display:flex;gap:2px;margin:0 auto;background:rgba(245,240,224,.1);border-radius:10px;padding:3px}
.ck-seg a{min-height:32px}
.ck-seg a b{font-weight:800}
.ck-seg a[aria-current="page"]{background:var(--ck-paper);color:var(--ck-ink)}
.ck-tools{display:flex;gap:2px}
.ck-sm{display:none}
@media (max-width:1180px){.ck-note{display:none}}
@media (max-width:900px){.ck-wide{display:none !important}}
@media (max-width:700px){
  .ck-lg{display:none}.ck-sm{display:inline}.ck-phone{display:none !important}
  .ck-seg a{min-width:48px;justify-content:center}
}
/* Phone view overlay */
.ck-pv{position:fixed;inset:0;z-index:180;background:rgba(20,22,30,.82);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ck-pv.open{display:flex}
.ck-pv-head{display:flex;align-items:center;gap:16px;color:var(--ck-paper);font:600 15px system-ui,-apple-system,"Segoe UI",sans-serif}
.ck-pv-close{background:var(--ck-paper);color:var(--ck-ink);border:0;border-radius:999px;padding:8px 16px;font:700 14px system-ui,sans-serif;cursor:pointer}
.ck-pv-frame{background:#111;border-radius:42px;padding:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.ck-pv-screen{position:relative;overflow:hidden;border-radius:32px;background:#fff}
.ck-pv iframe{position:absolute;top:0;left:0;width:390px;height:844px;border:0;transform-origin:0 0}
.ck-seg.ck-pages{margin:0}
.ck-bar .ck-phone{border:1px solid rgba(255,255,255,.25)}

/* Council round 1: menu follows each design (font, corner shape), stays readable, chat bubble hides while it's open */
.ck-menu,.ck-menu nav a,.ck-menu-foot a,.ck-menu-foot small{font-family:inherit}
.ck-menu-foot a,.ck-close{border-radius:var(--ck-radius,10px)}
.ck-menu-head :focus-visible{outline:3px solid var(--ck-on-accent);outline-offset:2px}
body.ck-locked .mangomint-chat-bubble,body.ck-locked .mangomint-chat-container{display:none!important}