/* AI Shield shared styles */


/* Light theme. Every text colour below meets WCAG AA on every surface it is
   used on; body and heading text meet AAA (7:1).
   Colour has one meaning each: teal = act / safe / verified,
   orange = scam warning sign. Orange is never used for buttons. */
:root{
  --base:#FBF8F3;        /* page: warm off-white, less glare than pure white */
  --base-2:#F3EEE6;      /* bands and footer */
  --surface:#FFFFFF;     /* cards and panels */
  --surface-2:#F1ECE3;   /* insets inside cards: message bubble, voicemail */
  --line:#DDD5C8;        /* dividers and card borders */
  --line-soft:#E8E2D8;
  --line-strong:#8E8578; /* borders that mark a control (3:1) */
  --text:#2E3F45;        /* body, 10:1 */
  --bright:#14252B;      /* headings and emphasis, 15:1 */
  --muted:#56676C;       /* small print, 5:1 */
  --action:#0F6B5C;      /* buttons, links, focus */
  --action-hover:#0B574B;
  --action-tint:#E2F0EB;
  --hot:#B23B0A;         /* warning signs only */
  --hot-dim:#FCE6DA;
  --hot-mark:#FBD5C0;    /* highlighter behind a warning phrase */
  --verify:#0F6B5C;
  --verify-icon:#13896E; /* checkmarks and the logo tick */
  --verify-dim:#E2F0EB;
  --shadow-sm:0 1px 2px rgba(20,37,43,.06);
  --shadow:0 1px 2px rgba(20,37,43,.05), 0 8px 24px rgba(20,37,43,.07);
  --shadow-lg:0 2px 4px rgba(20,37,43,.04), 0 18px 48px rgba(20,37,43,.10);
  --r:11px;
  --shell:1140px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001s !important}
}

body{
  margin:0;
  background:var(--base);
  color:var(--text);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:19px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:600;
  line-height:1.03;
  letter-spacing:-.03em;
  color:var(--bright);
  margin:0 0 .5em;
}
h1{font-size:clamp(3rem,7.4vw,5.6rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h3{font-size:1.3rem;line-height:1.22;letter-spacing:-.015em}

p{margin:0 0 1.15em;max-width:60ch}
a{color:inherit}
img{max-width:100%}

.shell{max-width:var(--shell);margin:0 auto;padding:0 26px;position:relative}
.section{padding:96px 0}
.section-tight{padding:60px 0}
.lede{font-size:1.24rem;color:var(--text);max-width:44ch}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.95rem;font-weight:600;color:var(--verify);margin-bottom:26px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--verify)}

::selection{background:var(--action-tint);color:var(--bright)}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:4px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:inherit;font-weight:700;font-size:1.05rem;
  padding:17px 30px;
  border-radius:var(--r);
  border:1.5px solid var(--action);
  background:var(--action);
  color:#FFFFFF;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--shadow-sm), 0 4px 12px rgba(15,107,92,.18);
  transition:background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:hover{
  background:var(--action-hover);border-color:var(--action-hover);
  box-shadow:var(--shadow-sm), 0 6px 16px rgba(15,107,92,.24);
  transform:translateY(-1px);
}
.btn-line{
  background:var(--surface);color:var(--action);
  border:1.5px solid var(--action);
  box-shadow:var(--shadow-sm);
}
.btn-line:hover{
  background:var(--action-tint);color:var(--action-hover);
  border-color:var(--action-hover);
  box-shadow:var(--shadow-sm);
  transform:none;
}
.btn-sm{padding:11px 20px;font-size:.97rem}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:70;
  background:rgba(251,248,243,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0}
.wordmark{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--bright);text-decoration:none;line-height:1;
}
.wordmark svg{flex:none}
.wordmark .wm{display:block;height:23px;width:auto}
.site-foot .wordmark .wm{height:19px}
@media(max-width:520px){.wordmark .wm{height:19px}}
.site-foot .wordmark{font-size:1.14rem}
@media(max-width:520px){.wordmark{font-size:1.1rem;letter-spacing:.045em}}
.site-nav{display:flex;align-items:center;gap:26px}
.site-nav a{font-size:.99rem;font-weight:500;color:var(--muted);text-decoration:none}
.site-nav a:hover,.site-nav a.here{color:var(--bright)}
.site-nav a.here{text-decoration:underline;text-decoration-color:var(--action);text-decoration-thickness:2px;text-underline-offset:8px}
/* buttons in the nav must beat the grey link rule above */
.site-nav a.btn,.site-nav a.btn:hover{color:#FFFFFF}
.site-nav a.btn-guide,.site-nav a.btn-guide:hover{color:var(--action)}
@media(max-width:820px){.site-nav .nav-link{display:none}}

.section{position:relative}

/* ---------- hero ---------- */
/* a soft wash of the action colour gives the top of the page some depth
   without the glow and line-art of the old dark design */
.hero{
  padding:84px 0 96px;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 70% at 85% 30%, rgba(15,107,92,.07), rgba(15,107,92,0) 70%),
    var(--base);
  border-bottom:1px solid var(--line-soft);
}
.hero-grid{
  display:grid;grid-template-columns:1.04fr .96fr;gap:64px;align-items:center;
  position:relative;z-index:2;
}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:52px}}
.hero h1{margin-bottom:.32em}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-note{margin-top:22px;font-size:1rem;color:var(--muted)}

/* ---------- selector ---------- */
.selector{
  display:flex;gap:6px;padding:5px;margin-bottom:18px;
  background:var(--base-2);border:1px solid var(--line);border-radius:10px;
}
.seg{
  flex:1;padding:11px 8px;
  background:transparent;border:1px solid transparent;border-radius:7px;
  font-family:inherit;font-size:.95rem;font-weight:600;
  color:var(--muted);cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease;
}
.seg:hover{color:var(--bright)}
.seg[aria-selected="true"]{
  background:var(--surface);color:var(--bright);
  border-color:var(--line);box-shadow:var(--shadow-sm);
}

/* ---------- hero object ---------- */
.object-wrap{position:relative}
.object{
  position:relative;z-index:1;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  box-shadow:var(--shadow-lg);
}
.object-label{
  display:flex;align-items:center;gap:9px;
  font-size:.86rem;color:var(--muted);margin-bottom:15px;
}
.object-label .dot{width:7px;height:7px;border-radius:50%;background:var(--hot)}

.panel{display:none}
.panel.active{display:block}

/* message bubble */
.bubble{
  background:var(--surface-2);
  border-radius:4px 14px 14px 14px;
  padding:21px 22px;
  font-size:1.06rem;line-height:1.8;
  color:var(--bright);
}
.tell{
  padding:2px 3px;border-radius:3px;
  border-bottom:2px solid transparent;
  transition:background .3s ease,border-color .3s ease;
}
.object.lit .tell{background:var(--hot-mark);border-bottom-color:var(--hot)}
.pin{
  display:inline-block;min-width:19px;height:19px;line-height:19px;
  text-align:center;border-radius:50%;
  background:var(--hot);color:#FFFFFF;
  font-size:.72rem;font-weight:700;margin-left:4px;
  transform:translateY(-3px);
  opacity:0;transition:opacity .28s ease;
}
.object.lit .pin{opacity:1}

/* voicemail */
.vm{background:var(--surface-2);border-radius:10px;padding:24px 22px}
.vm-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.vm-from{color:var(--bright);font-weight:600;font-size:1.02rem}
.vm-len{color:var(--muted);font-size:.9rem}
.wave{display:flex;align-items:flex-end;gap:3px;height:66px;margin-bottom:6px}
.wave span{
  flex:1;background:#C9C0B2;border-radius:2px;
  transition:background .3s ease;
}
.object.lit .wave span.hit{background:var(--hot)}
.wave-axis{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted)}
.vm-quote{
  margin:18px 0 0;padding:16px 18px;
  background:var(--surface-2);border-left:3px solid var(--line-strong);border-radius:4px;
  font-size:1.01rem;line-height:1.65;color:var(--bright);max-width:none;
}
.object.lit .vm-quote{border-left-color:var(--hot);background:var(--hot-dim)}

/* video call: the frame stays dark because it depicts a video feed,
   so its warning rings use a brighter orange that holds 5:1 on it */
.call{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.call-frame{
  position:relative;aspect-ratio:4/3;
  background:linear-gradient(170deg,#1D373E 0%,#132428 100%);
}
.call-face{position:absolute;inset:0}
.call-ring{
  position:absolute;border:2px solid #FB8B4B;border-radius:50%;
  opacity:0;transition:opacity .32s ease;
}
.object.lit .call-ring{opacity:1}
.call-ring b{
  position:absolute;top:-11px;right:-11px;
  width:21px;height:21px;border-radius:50%;
  background:#FB8B4B;color:var(--bright);
  font-size:.72rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.call-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;font-size:.92rem;color:var(--muted);
}
.call-live{display:inline-flex;align-items:center;gap:8px;color:var(--bright)}
.call-live i{width:8px;height:8px;border-radius:50%;background:#D92D20;display:inline-block}

/* reveal control */
.object-btn{
  width:100%;margin-top:18px;
  background:var(--surface);border:1.5px solid var(--action);border-radius:var(--r);
  color:var(--action);font-family:inherit;font-weight:700;font-size:1rem;
  padding:15px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.object-btn:hover{background:var(--action-tint);border-color:var(--action-hover);color:var(--action-hover)}
.tell-list{list-style:none;margin:16px 0 0;padding:0;display:none}
.object.lit .tell-list{display:block}
.tell-list li{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 0;border-top:1px solid var(--line-soft);
  font-size:.98rem;line-height:1.55;color:var(--text);
}
.tell-list b{
  flex:none;width:21px;height:21px;border-radius:50%;
  background:var(--hot);color:#FFFFFF;
  font-size:.72rem;display:flex;align-items:center;justify-content:center;margin-top:3px;
}

/* ---------- doors ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:880px){.doors{grid-template-columns:1fr}}
.door{
  display:block;text-decoration:none;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:32px 28px 28px;
  box-shadow:var(--shadow-sm);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
a.door:hover{border-color:var(--action);box-shadow:var(--shadow);transform:translateY(-3px)}
.door h3{margin-bottom:.42em}
.door p{font-size:1rem;color:var(--text);margin:0}
.door-mark{margin-bottom:20px;display:block}
.door-go{
  display:inline-flex;align-items:center;gap:6px;margin-top:18px;
  font-weight:700;font-size:.97rem;color:var(--action);
}
.door-go::after{content:"\2192";transition:transform .16s ease}
a.door:hover .door-go::after{transform:translateX(3px)}

/* ---------- bands ---------- */
.band{background:var(--base-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}

/* ---------- steps ---------- */
.steps{border-top:1px solid var(--line-soft);margin-top:44px}
.step{border-bottom:1px solid var(--line-soft)}
.step-btn{
  width:100%;display:flex;align-items:center;gap:22px;
  background:none;border:none;padding:26px 2px;
  text-align:left;cursor:pointer;color:var(--bright);font-family:inherit;
}
.step-btn:hover{color:var(--action)}
.step-num{
  flex:none;width:36px;height:36px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  font-size:.94rem;font-weight:700;color:var(--text);
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.step[data-open="true"] .step-num{background:var(--verify);border-color:var(--verify);color:#FFFFFF}
.step-word{
  flex:1;
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:1.7rem;font-weight:600;letter-spacing:-.03em;
}
.step-chev{flex:none;color:var(--muted);transition:transform .2s ease}
.step[data-open="true"] .step-chev{transform:rotate(180deg)}
.step-body{display:none;padding:0 2px 30px 80px}
.step[data-open="true"] .step-body{display:block}
.step-body p{margin:0;color:var(--text)}
@media(max-width:620px){.step-body{padding-left:2px}}

/* ---------- tiles ---------- */
.tiles{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:44px;
  box-shadow:var(--shadow-sm);
}
@media(max-width:880px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);padding:30px 26px}
.tile h3{font-size:1.14rem;margin-bottom:.42em}
.tile p{font-size:.98rem;color:var(--text);margin:0}

/* ---------- practice ---------- */
.practice{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:34px;max-width:760px;
  box-shadow:var(--shadow);
}
.practice-msg{
  background:var(--surface-2);border-left:3px solid var(--line-strong);
  padding:21px 23px;border-radius:5px;
  font-size:1.05rem;line-height:1.64;color:var(--bright);margin:0 0 26px;max-width:none;
}
.choices{display:flex;gap:12px;flex-wrap:wrap}
.choice{
  flex:1;min-width:200px;padding:16px 18px;
  background:var(--surface);border:1.5px solid var(--line-strong);border-radius:var(--r);
  color:var(--bright);font-family:inherit;font-weight:600;font-size:1rem;
  cursor:pointer;transition:border-color .15s ease,background .15s ease;
}
.choice:hover:not(:disabled){border-color:var(--action);background:var(--action-tint)}
/* answered: dimmed but still readable (no opacity, which would drop contrast) */
.choice:disabled{cursor:default;color:var(--muted);border-color:var(--line);background:var(--base)}
.verdict{display:none;margin-top:24px;padding:20px 22px;border-radius:7px;font-size:1rem;line-height:1.6;color:var(--text)}
.verdict.show{display:block}
.verdict.ok{background:var(--verify-dim);border-left:4px solid var(--verify)}
.verdict.no{background:var(--hot-dim);border-left:4px solid var(--hot)}
.verdict strong{display:block;margin-bottom:6px;color:var(--bright)}
.practice-foot{display:flex;align-items:center;gap:18px;margin-top:26px;flex-wrap:wrap}
.counter{font-size:.95rem;color:var(--muted)}

/* ---------- contents ---------- */
.contents{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow)}
.contents li{
  padding:17px 23px;border-top:1px solid var(--line-soft);
  font-size:1.01rem;display:flex;gap:15px;align-items:baseline;color:var(--bright);
}
.contents li:first-child{border-top:none}
.contents .part{color:var(--action);font-size:.85rem;font-weight:700;letter-spacing:.02em;flex:none;min-width:48px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:36px}}

.fine{font-size:.93rem;color:var(--muted);margin-top:14px}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{font-size:1.5rem;margin-top:2em}
.prose h2:first-of-type{margin-top:1em}
.prose p,.prose li{color:var(--text);font-size:1.02rem}
.prose ul{padding-left:22px}
.prose li{margin-bottom:.5em}
.updated{color:var(--muted);font-size:.95rem}

/* ---------- footer ---------- */
.site-foot{background:var(--base-2);border-top:1px solid var(--line);padding:58px 0 42px;font-size:.97rem}
.foot-grid{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap}
.foot-col h4{
  font-family:inherit;font-size:.86rem;font-weight:700;letter-spacing:.04em;
  color:var(--bright);margin:0 0 12px;
}
.foot-col a{display:block;color:var(--text);text-decoration:none;padding:4px 0}
.foot-col a:hover{color:var(--action);text-decoration:underline;text-underline-offset:3px}
.socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.social{
  width:44px;height:44px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:var(--bright);transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.social:hover{border-color:var(--action);color:var(--action);background:var(--action-tint)}
.foot-col a.social:hover{text-decoration:none}
/* the general footer link rule (block + padding) must not override the centred box */
.foot-col a.social{display:flex;padding:0}
.social svg{width:22px;height:22px;flex:none}
.foot-note{
  margin-top:40px;padding-top:24px;border-top:1px solid var(--line-soft);
  font-size:.9rem;line-height:1.6;color:var(--muted);max-width:74ch;
}

/* ---------- mobile sticky cta ---------- */
.mobile-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(251,248,243,.96);
  backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -4px 16px rgba(20,37,43,.06);
}
.mobile-cta .btn{width:100%}
@media(max-width:820px){
  .mobile-cta{display:block}
  body{padding-bottom:84px}
}



/* ---------- header carries both offers ---------- */
.head-ctas{display:flex;align-items:center;gap:9px}
.btn-guide{
  background:var(--surface);
  color:var(--action);
  border:1.5px solid var(--action);
  box-shadow:var(--shadow-sm);
}
.btn-guide:hover{
  background:var(--action-tint);
  color:var(--action-hover);
  border-color:var(--action-hover);
  box-shadow:var(--shadow-sm);
  transform:none;
}
@media(max-width:560px){.head-ctas .btn-guide{display:none}}

/* ---------- product panel ---------- */
/* a teal rule along the top marks it as the product without tinting the text background */
.product-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-top:4px solid var(--action);
  border-radius:14px;
  padding:46px 44px;
  box-shadow:var(--shadow-lg);
}
@media(max-width:620px){.product-panel{padding:32px 24px}}

.panel-tag{
  display:inline-block;
  background:var(--action-tint);color:var(--action);
  font-size:.82rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:6px 12px;border-radius:7px;margin-bottom:22px;
}
.product-panel h2{margin-bottom:.35em}
.product-panel > p{color:var(--bright);font-size:1.1rem}

.panel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:860px){.panel-grid{grid-template-columns:1fr;gap:32px}}

.panel-list{list-style:none;margin:0;padding:0}
.panel-list li{
  display:flex;gap:13px;align-items:flex-start;
  padding:10px 0;font-size:1.03rem;color:var(--bright);
}
.panel-list svg{flex:none;margin-top:5px}

.panel-actions{display:flex;flex-direction:column;gap:12px}
.panel-actions .btn{width:100%;padding:19px 26px;font-size:1.08rem}
.panel-note{font-size:.93rem;color:var(--muted);margin:4px 0 0;text-align:center}

/* guide door reads as the product without tinting the text background */
.door-product{border-color:var(--line);border-top:4px solid var(--action);padding-top:29px}
.door-product:hover{border-color:var(--action)}

/* ---------- pricing ---------- */
.price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;
  margin:0 0 6px;
}
.price-now{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:2.6rem;font-weight:700;letter-spacing:-.03em;
  color:var(--bright);line-height:1;
}
.price-was{
  font-size:1.18rem;color:var(--muted);
  text-decoration:line-through;text-decoration-thickness:1.5px;
}
.price-save{
  font-size:.86rem;font-weight:700;letter-spacing:.03em;
  color:var(--verify);background:var(--verify-dim);
  border-radius:7px;padding:4px 9px;
}
.price-note{font-size:.95rem;color:var(--muted);margin:0 0 20px}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--action);color:#FFFFFF;
  padding:13px 20px;border-radius:0 0 var(--r) 0;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0}
main:focus{outline:none}

/* ---------- printable checklist sheet ---------- */
.sheet{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:44px;
  max-width:840px;
  box-shadow:var(--shadow);
}
@media(max-width:620px){.sheet{padding:28px 22px}}

.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap}
.sheet-head h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:.3em}
.sheet-head .lede{font-size:1.06rem}

.sheet-body{margin-top:34px}
.sheet-block{
  padding:26px 0;
  border-top:1px solid var(--line);
}
.sheet-block h2{font-size:1.24rem;margin-bottom:.6em;color:var(--bright)}
.sheet-note{font-size:.97rem;color:var(--muted);margin:0 0 14px}

.checks{list-style:none;margin:0;padding:0}
.checks li{
  display:flex;gap:14px;align-items:flex-start;
  padding:9px 0;font-size:1.02rem;color:var(--bright);line-height:1.55;
}
.checks .box{
  flex:none;width:18px;height:18px;margin-top:4px;
  border:2px solid var(--verify);border-radius:4px;background:var(--surface);
}

.fill-row{display:flex;align-items:baseline;gap:14px;padding:11px 0;flex-wrap:wrap}
.fill-row label{font-size:1rem;color:var(--bright);min-width:210px}
.fill-row .rule{flex:1;min-width:150px;border-bottom:1px solid var(--line-strong)}

.sheet-foot{
  margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.88rem;color:var(--muted);
}

.after-sheet{max-width:840px;margin-top:56px}
.after-sheet h2{font-size:1.8rem}

/* ---------- print ---------- */
@media print{
  .no-print{display:none !important}
  body{background:#fff;color:#000;font-size:11.5pt;padding-bottom:0}
  .section{padding:0}
  .shell{padding:0;max-width:none}
  .sheet{
    background:#fff;border:none;border-radius:0;padding:0;max-width:none;
    box-shadow:none;
  }
  .sheet h1{color:#000;font-size:22pt;margin-bottom:6pt}
  .sheet h2{color:#000;font-size:12.5pt;margin-bottom:4pt}
  .sheet .lede{color:#333;font-size:11pt;margin-bottom:0}
  .sheet-body{margin-top:10pt}
  .sheet-block{padding:9pt 0;border-top:0.5pt solid #bbb;break-inside:avoid}
  .checks li{color:#000;font-size:10.5pt;padding:2.5pt 0}
  .checks .box{border:1pt solid #444;width:11pt;height:11pt;margin-top:2pt}
  .sheet-note{color:#444;font-size:9.5pt;margin-bottom:5pt}
  .fill-row{padding:5pt 0}
  .fill-row label{color:#000;font-size:10.5pt}
  .fill-row .rule{border-bottom:0.5pt solid #777}
  .sheet-foot{color:#555;font-size:8pt;border-top:0.5pt solid #bbb;margin-top:12pt;padding-top:7pt}
  a{text-decoration:none;color:#000}
}

/* ---------- home button ---------- */
.home-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:none;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);
  color:var(--bright);text-decoration:none;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.home-btn:hover{border-color:var(--action);color:var(--action);background:var(--action-tint)}
.site-nav a.home-btn,.site-nav a.home-btn:hover{color:var(--bright)}
.site-nav a.home-btn:hover{color:var(--action)}

/* ======================================================================
   PHONE LAYER
   Everything below sits inside media queries, so the desktop layout
   is not affected by any of it.
   ====================================================================== */

@media(max-width:720px){

  /* type comes down a step: 19px reads large on a hand-held screen */
  body{font-size:17px;line-height:1.6}
  h1{font-size:clamp(2.1rem,8.4vw,2.9rem);line-height:1.08}
  h2{font-size:clamp(1.55rem,6.2vw,2.1rem);line-height:1.12}
  h3{font-size:1.08rem}
  .lede{font-size:1.05rem;max-width:none}
  p{max-width:none}

  /* vertical rhythm tightens so less scrolling is needed */
  .section{padding:54px 0}
  .section-tight{padding:38px 0}
  .hero{padding:38px 0 54px}
  .eyebrow{margin-bottom:18px;font-size:.9rem}

  /* controls stay thumb-sized but stop dominating */
  .btn{padding:15px 22px;font-size:1rem}
  .btn-sm{padding:10px 15px;font-size:.92rem}
  .hero-actions{gap:10px;margin-top:26px}
  .hero-actions .btn{flex:1;min-width:150px}

  /* header */
  .head-in{padding:11px 0}
  .site-nav{gap:10px}
  .home-btn{width:38px;height:38px}

  /* hero demo */
  .object{padding:18px}
  .object-label{font-size:.82rem;margin-bottom:12px}
  .bubble{font-size:.99rem;line-height:1.68;padding:17px 18px}
  .tell-list li{font-size:.92rem;padding:9px 0}
  .selector{gap:4px;padding:4px;margin-bottom:14px}
  .seg{font-size:.86rem;padding:10px 4px}
  .object-btn{padding:13px;font-size:.96rem}
  .vm-quote{font-size:.96rem}

  /* cards and panels */
  .doors{gap:12px}
  .door{padding:24px 20px;border-radius:10px}
  .door p{font-size:.96rem}
  .door-mark{margin-bottom:14px}
  .tile{padding:22px 18px}
  .tile p{font-size:.94rem}
  .tiles{margin-top:30px}

  /* five steps */
  .steps{margin-top:30px}
  .step-btn{padding:19px 2px;gap:14px}
  .step-word{font-size:1.3rem}
  .step-num{width:30px;height:30px;font-size:.86rem}
  .step-body{padding-bottom:22px}

  /* practice */
  .practice{padding:24px 20px}
  .practice-msg{font-size:.99rem;padding:17px 18px;margin-bottom:20px}
  .choice{min-width:0;font-size:.95rem;padding:14px 12px}
  .verdict{font-size:.95rem;padding:16px 17px}

  /* product panel and price */
  .product-panel{padding:28px 22px;border-radius:10px}
  .product-panel > p{font-size:1.02rem}
  .panel-list li{font-size:.97rem;padding:8px 0}
  .panel-grid{gap:26px}
  .price-now{font-size:2.2rem}
  .price-was{font-size:1.05rem}

  /* checklist sheet */
  .sheet{padding:26px 20px;border-radius:10px}
  .sheet-head{gap:18px}
  .sheet-block{padding:20px 0}
  .sheet-block h2{font-size:1.12rem}
  .checks li{font-size:.97rem;padding:7px 0}
  .fill-row label{min-width:0;width:100%}
  .fill-row .rule{min-width:100%}

  /* footer */
  .site-foot{padding:42px 0 30px}
  .foot-grid{gap:24px}
  .foot-note{margin-top:28px;font-size:.85rem}

  /* sticky bar */
  .mobile-cta{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}
  .mobile-cta .btn{padding:14px}
  body{padding-bottom:78px}
}

/* very narrow phones */
@media(max-width:400px){
  .section{padding:46px 0}
  .seg{font-size:.8rem;letter-spacing:-.01em}
  .hero-actions .btn{flex:1 1 100%}
  .wordmark .wm{height:17px}
}

/* ======================================================================
   PHONE REFINEMENT
   Lighter shadows, tighter boxes. Phone only.
   ====================================================================== */

@media(max-width:720px){

  /* shadows come down so cards do not float on a small screen */
  .btn:hover,.btn:focus{transform:none}
  .product-panel{box-shadow:var(--shadow)}
  .practice{box-shadow:var(--shadow-sm)}
  .object{box-shadow:var(--shadow)}
  .door:hover{transform:none}

  /* boxes hug their content more closely, so lines run wider and read easier */
  .product-panel{padding:22px 18px}
  .practice{padding:20px 16px}
  .sheet{padding:22px 17px}
  .door{padding:20px 17px}
  .tile{padding:19px 16px}
  .object{padding:15px}
  .bubble{padding:15px 16px}
  .practice-msg{padding:16px 16px;margin-bottom:18px}
  .verdict{padding:15px 16px}
  .contents li{padding:14px 17px}

  .panel-tag{padding:5px 10px;margin-bottom:18px}

  /* line length and spacing, the two things that actually make phone text
     comfortable */
  body{line-height:1.62}
  .checks li,.panel-list li,.tell-list li{line-height:1.5}
  p{margin-bottom:1em}
}

/* kill sticky hover states on touch screens */
@media(hover:none){
  .btn:hover{transform:none}
  .door:hover{transform:none}
}

/* ======================================================================
   MOBILE PLATFORM BEHAVIOUR
   The details that separate a site that works on a phone from one that
   feels native on a phone.
   ====================================================================== */

html{
  /* stops iOS inflating body text when the phone is turned sideways */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* anchor jumps must clear the sticky header */
  scroll-padding-top:84px;
}

body{
  /* no rubber-band bounce revealing a white strip behind the page */
  overscroll-behavior-y:none;
}

/* the grey flash on tap looks unfinished; we supply our own press state */
a,button,.door,.seg,.choice,.social,.home-btn,.step-btn{
  -webkit-tap-highlight-color:transparent;
}

[id]{scroll-margin-top:84px}

/* sticky header clears the notch on edge-to-edge screens */
.site-head{padding-top:env(safe-area-inset-top,0px)}

/* the three hero panels differ in height; reserving space stops the page
   jumping when you switch between them */
.object{min-height:324px}

@media(max-width:720px){

  /* Apple's minimum touch target is 44px. these were under it. */
  .seg{min-height:44px;display:flex;align-items:center;justify-content:center}
  .btn-sm{min-height:44px;padding:11px 16px}
  .home-btn{width:44px;height:44px}
  .social{width:46px;height:46px}
  .step-btn{min-height:56px}
  .object-btn{min-height:48px}
  .foot-col a{padding:7px 0}

  .object{min-height:300px}

  /* press feedback, since there is no hover on a touch screen */
  .btn:active{transform:scale(.975);box-shadow:var(--shadow-sm)}
  a.door:active{background:var(--action-tint);border-color:var(--action)}
  .choice:active:not(:disabled){background:var(--action-tint);border-color:var(--action)}
  .seg:active{background:var(--surface)}
  .social:active,.home-btn:active{background:var(--action-tint);border-color:var(--action)}
  .object-btn:active{background:var(--action-tint)}

  /* two long labels side by side wrap badly; stack them */
  .choices{flex-direction:column}
  .choice{width:100%}

  /* sticky bar sits above the home indicator */
  .mobile-cta{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}

  html{scroll-padding-top:72px}
  [id]{scroll-margin-top:72px}
}

/* a phone held sideways has very little height, so trim vertical space */
@media(max-height:480px) and (orientation:landscape){
  .hero{padding:26px 0 34px}
  .section{padding:34px 0}
  .mobile-cta{display:none}
  body{padding-bottom:0}
}

/* two offers side by side in the sticky bar */
.mobile-cta .bar-two{display:flex;gap:9px}
.mobile-cta .bar-two .btn{
  flex:1;
  padding:15px 10px;
  font-size:.99rem;
  min-height:48px;
  border-radius:13px;
}
@media(max-width:380px){
  .mobile-cta .bar-two .btn{font-size:.93rem;padding:14px 6px}
}

/* ======================================================================
   STICKY BAR AND HEADER SPACING, PHONE
   ====================================================================== */

@media(max-width:720px){

  /* the bar was eating too much of the screen. the buttons keep their text
     size and their 44px tap target, but lose the padding above and below,
     and the bar itself is tighter around them */
  .mobile-cta{padding:7px 14px calc(7px + env(safe-area-inset-bottom,0px))}
  .mobile-cta .bar-two{gap:8px}
  .mobile-cta .bar-two .btn{
    padding:0 10px;
    min-height:44px;
    height:44px;
    line-height:1;
    font-size:.97rem;
    border-radius:12px;
  }

  /* reserved space matches the shorter bar: 7 + 44 + 7 = 58 */
  body{padding-bottom:62px}

  /* the landing page has no bar, so it needs no reserved space */
  body.is-home{padding-bottom:0}

  /* the logo and header buttons were too close to the screen edge. widening
     the page margin rather than the header alone keeps the logo aligned with
     the text below it. */
  .shell{padding:0 22px}
}

@media(max-width:400px){
  .shell{padding:0 18px}
  .mobile-cta{padding-left:16px;padding-right:16px}
  .mobile-cta .bar-two .btn{font-size:.92rem;padding:0 6px}
}

/* ======================================================================
   HEADER BREATHING ROOM, PHONE
   ====================================================================== */

@media(max-width:720px){
  /* the buttons grew to a 44px tap target but the header padding stayed at
     11px, so they sat tight against the top edge and the bottom border */
  .head-in{padding:15px 0}

  /* the sticky header is now about 74px tall, so anchor jumps need to clear
     a little more */
  html{scroll-padding-top:90px}
  [id]{scroll-margin-top:90px}
}

/* ======================================================================
   HEADER SIDE SPACING, PHONE
   The logo and the buttons sit further in from the screen edges than the
   rest of the page.
   ====================================================================== */

@media(max-width:720px){
  .site-head .shell{padding-left:32px;padding-right:32px}
}

@media(max-width:400px){
  .site-head .shell{padding-left:26px;padding-right:26px}
}

/* ======================================================================
   HEADER FIT ON SUB-PAGES
   The home button takes 44px, which pushed "Free checklist" past its
   space and broke the label onto two lines.
   ====================================================================== */

@media(max-width:720px){
  /* a button label must never wrap, whatever the space */
  .head-ctas .btn,.site-nav .btn{white-space:nowrap;flex:none}

  /* reclaim width from the gaps rather than from the text */
  .head-in{gap:12px}
  .site-nav{gap:8px}
  .head-ctas{gap:8px}

  /* the logo must give way before the button does */
  .wordmark{min-width:0;flex-shrink:1}
  .wordmark .wm{flex-shrink:1;min-width:0}
}

/* On sub-pages the home button takes 44px, so below 420px the wordmark steps
   aside and the shield carries the brand on its own, which is what it was
   drawn to do. The landing page has no home button, so it keeps the wordmark
   much further down, which is where first impressions are made. */
@media(max-width:420px){
  .wordmark .wm{display:none}
  body.is-home .wordmark .wm{display:block}
}
@media(max-width:340px){
  body.is-home .wordmark .wm{display:none}
}

/* ======================================================================
   PRINTING THE CHECKLIST
   Hide everything, then reopen only the path down to the sheet.
   Every step uses a direct-child combinator from body. An earlier version
   used "section > *", which also matched the five <section class="sheet-block">
   elements inside the sheet and blanked their contents.
   ====================================================================== */

@page{margin:12mm}

@media print{
  body.is-sheet > *{display:none !important}
  body.is-sheet > main{display:block !important}
  body.is-sheet > main > *{display:none !important}
  body.is-sheet > main > .section{display:block !important}
  body.is-sheet > main > .section > *{display:none !important}
  body.is-sheet > main > .section > .shell{display:block !important}
  body.is-sheet > main > .section > .shell > *{display:none !important}
  body.is-sheet > main > .section > .shell > .sheet{display:block !important}

  /* the print button and the eyebrow live inside the sheet */
  body.is-sheet .sheet .no-print{display:none !important}

  body.is-sheet{padding:0 !important;margin:0 !important}
}

/* ======================================================================
   PRINTED SHEET REFINEMENTS
   ====================================================================== */

@media print{
  /* the intro tells the reader to print the page, which is nonsense once
     they are holding it */
  body.is-sheet .sheet-head .lede{display:none !important}

  /* the fill-in rows used flex, which print engines handle inconsistently.
     a label above its own writing line is also easier to write on. */
  .fill-row{display:block;padding:6pt 0 0}
  .fill-row label{display:block;margin-bottom:1pt;font-size:10pt}
  .fill-row .rule{
    display:block;width:100%;min-width:0;
    height:15pt;border-bottom:0.5pt solid #777;
  }

  /* tighten enough to land on fewer sheets */
  .sheet h1{font-size:19pt;margin-bottom:4pt}
  .sheet-body{margin-top:6pt}
  .sheet-block{padding:7pt 0}
  .sheet-block h2{font-size:11.5pt;margin-bottom:3pt}
  .checks li{font-size:10pt;padding:1.8pt 0}
  .sheet-note{font-size:9pt;margin-bottom:3pt}
  .sheet-foot{margin-top:9pt;padding-top:5pt}
}

@media print{
  /* a fridge checklist that runs to two sheets, the second almost empty,
     looks unfinished. tighten until it lands on one. */
  .sheet h1{font-size:17.5pt}
  .sheet-block{padding:5.5pt 0}
  .checks li{padding:1.4pt 0}
  .checks .box{width:10pt;height:10pt}
  .fill-row{padding:4pt 0 0}
  .fill-row .rule{height:13pt}
  .sheet-foot{margin-top:7pt;padding-top:4pt;font-size:7.5pt}
}

@media print{
  /* allowing the family plan to start on page one rather than jumping whole */
  .sheet-block{break-inside:auto}
  .sheet-block h2{break-after:avoid}
  .checks li{break-inside:avoid}
}

@media print{
  /* only the footer was spilling onto a second sheet */
  .sheet-block{padding:5pt 0}
  .checks li{padding:1.2pt 0}
  .sheet-foot{margin-top:6pt;padding-top:4pt;font-size:7pt;break-inside:avoid}
}