/* =====================================================================
   bevicefree.com, the "Human" direction (operator pick, 2026-09-25), reskinned light blue, white and sky blue for ViceFree (2026-10-26).

   Warm and story-led. A sand ground with soft panels, navy type, gold as the
   one warm accent and a green-gray for calm. Inter for display (italic
   section labels; Fraunces until 2026-09-26), Nunito Sans for reading. Large radii, soft borders.

   Every themed colour goes through the tokens below. The dark theme is a deep
   navy ground with sand type and the same gold and green accents.

   The CSP is style-src 'self' + Google Fonts, so inline style="" attributes
   are refused in production. Every rule the site needs lives in this file.
   ===================================================================== */

:root{
  color-scheme:light;

  --sand:#EEF5FC;            /* the ground */
  --panel:#FFFFFF;           /* cards */
  --surface:#FFFFFF;         /* drawn product UI: windows, boxes */
  --field:#FFFFFF;           /* form fields */
  --line:#CFE0F2;            /* soft borders */
  --line-strong:#5F7F9F;     /* form-control borders, 3:1 against fields */
  --foot:#E3EEF9;
  --foot-line:#C6DAEE;

  --ink:#0B1F33;             /* navy: headings, primary text */
  --body:#334A62;            /* reading text, 8:1 on sand */
  --muted:#48678A;           /* green-gray: captions, meta. 5.6:1 on sand */

  --gold:#4FB3F6;            /* fills only, never text */
  --gold-ink:#0B6DB5;        /* gold that reads as text, 5.1:1 on sand */
  --gold-tint:#DDEFFC;
  --gold-line:#B5DAF5;
  --gold-chip:#C9E5FA;

  --green-tint:#E2ECF5;
  --green-line:#C6D8EA;
  --green-chip:#D2E2F1;
  --green-ink:#35526E;
  --green-dot:#7E9BB8;

  --red:#E5484D;             /* product UI warning */
  --red-tint:#FDECEC;
  --red-line:#EFD3D4;
  --curtain:#2E2F33;

  --btn:#1479C9;
  --btn-ink:#FFFFFF;
  --btn-hover:#0F62A3;
  --btn-soft:#DCEBF8;
  --btn-soft-ink:#2E4A66;
  --focus:#0B6DB5;

  --mark-bg:#1479C9;
  --mark-lock:#FFFFFF;

  /* drawn illustrations */
  --ill-a:#D5E6F6; --ill-b:#C3DAF0; --ill-c:#E3EEF9; --ill-d:#B4CFE9;
  --ill-img:#CFE0F2; --ill-img2:#B9D1EA; --ill-chrome:#F2F7FC;
  --ill-line:#0B1F33; --ill-soft:#8FAAC6; --ill-dim:#7C93AB;
  --rail:#C9DCEF; --rail-dot:#9EB8D3; --ring-track:#E3EEF9;

  --shadow-lg:0 40px 70px -50px rgba(11,31,51,.45);
  --shadow-md:0 22px 44px -22px rgba(11,31,51,.45), 0 2px 6px rgba(11,31,51,.06);
  --shadow-tile:0 18px 34px -24px rgba(11,31,51,.55);
  --shadow-sm:0 12px 26px -18px rgba(11,31,51,.4);
  --shadow-wl:0 40px 80px -60px rgba(11,31,51,.35);

  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;

  --gutter:32px;             /* 16px at phone width */
  --sec:clamp(72px, 4rem + 4.4vw, 128px);
}

/* ================================================================= base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:16px; overflow-x:hidden}
body{
  margin:0; background:var(--sand); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display); font-weight:500; color:var(--ink); margin:0; text-wrap:balance}
h1{font-size:clamp(2.4rem, 1.5rem + 3.4vw, 4rem); line-height:1.05; letter-spacing:-.025em}
h2{font-size:clamp(2rem, 1.3rem + 2.6vw, 3.5rem); line-height:1.08; letter-spacing:-.015em}
h3{font-size:clamp(1.3rem, 1.15rem + .55vw, 1.75rem); line-height:1.22; letter-spacing:-.005em}
p{margin:0}
a{color:inherit; text-underline-offset:.22em; text-decoration-thickness:.075em}
a:hover{color:var(--gold-ink)}
strong{font-weight:700; color:var(--ink)}
em{font-style:italic}
svg{flex:none}
code{font-family:var(--mono)}

.wrap{width:100%; max-width:calc(1200px + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter)}
.skip{
  position:absolute; left:-9999px; top:0; z-index:99; background:var(--btn); color:var(--btn-ink);
  padding:12px 20px; border-radius:999px; text-decoration:none; font-weight:800; font-size:16px;
}
.skip:focus{left:16px; top:12px}
.skip:hover{color:var(--btn-ink)}

/* labels and reading helpers used by every page */
.eyebrow{
  font-family:var(--display); font-style:italic; font-weight:400; letter-spacing:0; text-transform:none;
  font-size:clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height:1.4; color:var(--gold-ink); margin:0;
}
.kicker{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; color:var(--muted)}
.lede{font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height:1.6; color:var(--body); max-width:35em}
.lede strong{color:var(--ink)}
.lede a{color:var(--gold-ink)}
.lede a:hover{color:var(--ink)}
.col{max-width:880px}
.stack{display:flex; flex-direction:column}
.g10{gap:10px}.g14{gap:14px}.g18{gap:18px}.g22{gap:22px}
.stack.g14 > .eyebrow + h2{margin-top:0}
.mt30{margin-top:30px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ================================================================= mark + header */
.mark{display:block}
.mark .mk-bg{fill:var(--mark-bg)}
.mark .mk-shackle{stroke:var(--mark-lock)}
.mark .mk-lock{fill:var(--mark-lock)}
.mark .mk-hole{fill:var(--mark-bg)}

.site-head{padding-block:clamp(12px, 1rem + 1vw, 28px)}
.head-in{display:flex; align-items:center; gap:clamp(16px, 2.6vw, 36px)}
.brand{display:inline-flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .mark{width:38px; height:38px}
.brand-word{font-family:var(--display); font-size:30px; font-weight:600; line-height:1; letter-spacing:-.01em}
.nav{display:flex; align-items:center; gap:clamp(18px, 2.6vw, 36px); margin-left:auto}
.nav a,.nav .nav-off{display:inline-flex; align-items:center; min-height:44px; font-size:17px; font-weight:700; line-height:1.3; text-decoration:none; color:var(--ink)}
.nav a:hover{color:var(--gold-ink)}
.nav a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:3px; text-underline-offset:9px}
.nav-toggle{
  display:none; place-items:center; width:44px; height:44px; padding:0; border-radius:12px;
  border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle .ic-close,.nav-toggle[aria-expanded="true"] .ic-open{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}
.nav-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px;
  border-radius:999px; background:var(--btn); color:var(--btn-ink); font-size:17px; font-weight:700;
  line-height:1.2; text-decoration:none; white-space:nowrap;
}
.nav-cta:hover{background:var(--btn-hover); color:var(--btn-ink)}
.nav-cta[aria-current="page"]{box-shadow:0 0 0 3px var(--sand), 0 0 0 5px var(--gold)}

/* ================================================================= buttons, chips */
.btn,.btn-dark{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 28px; border-radius:999px;
  background:var(--btn); color:var(--btn-ink); border:2px solid var(--btn);
  font-family:var(--sans); font-size:17px; font-weight:800; line-height:1.2;
  text-decoration:none; text-align:center; cursor:pointer;
}
.btn:hover,.btn-dark:hover{background:var(--btn-hover); border-color:var(--btn-hover); color:var(--btn-ink)}
.btn-dark{align-self:flex-start}
.btn-dark:disabled{opacity:.6; cursor:progress}
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:56px; padding:0 26px; border-radius:999px;
  background:transparent; color:var(--ink); border:2px solid var(--ink);
  font-family:var(--sans); font-size:17px; font-weight:800; line-height:1.2; text-decoration:none; text-align:center;
}
.btn-ghost:hover{background:var(--ink); color:var(--sand)}
.text-link{display:inline-flex; align-items:center; min-height:44px; font-weight:700; font-size:17px; line-height:1.4; text-underline-offset:5px; color:var(--ink)}

.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 14px;
  font-size:14px; font-weight:700; line-height:1.4; background:var(--green-tint); color:var(--green-ink);
}
.tag{flex:none; font-size:13px; font-weight:800; padding:4px 12px; border-radius:999px; line-height:1.4; background:var(--green-chip); color:var(--green-ink); white-space:nowrap}
.tag.gold{background:var(--gold-chip); color:var(--gold-ink)}
.ic-circle{width:56px; height:56px; border-radius:50%; background:var(--panel); display:grid; place-items:center; flex:none}
.ic-circle.sm{width:44px; height:44px}

/* ================================================================= homepage */
.section{padding-top:var(--sec)}
.sec-head{display:flex; flex-direction:column; gap:14px}
.sec-head h2{max-width:880px}
.sec-head .lede{margin-top:6px; max-width:700px}
.sec-head h2 em,.hero h1 em,.hero h2 em{font-style:italic; font-weight:400; color:var(--gold-ink)}

/* hero */
.hero{padding-top:clamp(12px, 3vw, 48px)}
.lx-hero + .hero{padding-top:0}
.hero-in{display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:clamp(36px, 4.4vw, 64px); align-items:center}
.hero h1,.hero h2{margin-top:0; font-size:clamp(2.75rem, 1.4rem + 4.6vw, 5rem); line-height:1.02; letter-spacing:-.025em; max-width:12ch}
.hero-sub{margin-top:28px; font-size:clamp(1.125rem, 1rem + .45vw, 1.3125rem); line-height:1.55; color:var(--body); max-width:31em}
.hero-actions{margin-top:36px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}
.hero-note{margin-top:22px; display:flex; align-items:flex-start; gap:10px; font-size:15px; line-height:1.45; color:var(--muted)}
.hero-note svg{margin-top:1px}

.hero-card{
  justify-self:end; width:100%; max-width:520px; background:var(--panel); border:3px solid var(--gold);
  border-radius:clamp(28px, 3vw, 40px); padding:clamp(22px, 2.6vw, 36px);
  /* Gold trim like the Paid '24 hour lock' tile (operator 2026-09-29): a gold border, a soft gold halo, then the usual shadow. */
  box-shadow:0 0 0 6px var(--gold-tint), var(--shadow-lg);
}
.hc-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.hc-app{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:var(--body); line-height:1.3}
.hc-app .mark{width:28px; height:28px}
.hc-time{display:inline-flex; align-items:center; gap:8px; background:var(--sand); border-radius:999px; padding:6px 14px; font-size:14px; font-weight:700; color:var(--muted); line-height:1.3}
.hc-kicker{margin-top:28px}
.hc-title{margin-top:4px; font-family:var(--display); font-size:clamp(1.75rem, 1.4rem + 1vw, 2.125rem); font-weight:500; line-height:1.15; color:var(--ink)}
.hc-body{margin-top:24px; display:flex; align-items:center; gap:clamp(18px, 2.4vw, 28px); flex-wrap:wrap}
.ring{position:relative; width:150px; height:150px; flex:none}
.ring svg{display:block; width:100%; height:100%}
.ring-track{fill:none; stroke:var(--ring-track)}
.ring-fill{fill:none; stroke:var(--gold)}
.ring-tip{fill:var(--ink)}
.ring-text{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.clock{font-family:var(--display); font-size:22px; font-weight:500; line-height:1.1; font-variant-numeric:lining-nums tabular-nums; color:var(--ink)}
.ring-sub{margin-top:3px; font-size:13px; font-weight:700; line-height:1.2; color:var(--muted)}
.hc-facts{margin:0; display:flex; flex-direction:column; gap:14px; min-width:0}
.hc-facts dt{font-size:14px; font-weight:700; line-height:1.3; color:var(--muted)}
.hc-facts dd{margin:2px 0 0; font-size:17px; font-weight:700; line-height:1.35; color:var(--ink)}
.hc-btns{margin-top:28px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.hc-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 12px;
  border-radius:999px; background:var(--btn); color:var(--btn-ink); font-size:16px; font-weight:800; line-height:1.2; text-align:center;
}
.hc-btn.soft{background:var(--btn-soft); color:var(--btn-soft-ink); font-weight:700}
.hc-foot{margin-top:18px; font-size:14px; line-height:1.5; color:var(--muted); text-align:center}

/* what ViceFree does: a Free / Paid comparison table. On phones the "What you get" column folds
   under the feature name (a second copy, shown only there), so the table never overflows. */
.cmp-wrap{margin-top:clamp(28px, 3.4vw, 48px); background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 3.2vw, 40px); padding:clamp(6px, 1.2vw, 14px) clamp(12px, 2.4vw, 28px) clamp(12px, 1.6vw, 20px)}
.cmp{width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed}
.cmp th,.cmp td{padding:16px 14px; border-top:1px solid var(--line); vertical-align:middle; text-align:left}
.cmp thead th{border-top:0; padding-top:18px; padding-bottom:14px; vertical-align:bottom}
.cmp-h-feat{width:27%}
.cmp-h-get{width:37%}
.cmp thead .cmp-plan{width:16%}
.cmp thead .cmp-plan.paid{width:20%}
.cmp-h-feat,.cmp-h-get{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; color:var(--muted)}
.cmp-plan{text-align:center; font-family:var(--display); font-weight:500; font-size:clamp(1.05rem, .95rem + .45vw, 1.35rem); line-height:1.2; color:var(--ink)}
.cmp thead .cmp-plan{text-align:center}
.cmp-sub{display:block; margin-top:2px; font-family:var(--sans); font-size:13px; font-weight:700; color:var(--gold-ink)}
.cmp .paid{background:var(--gold-tint); border-top-color:var(--gold-line)}
.cmp thead .paid{border-radius:18px 18px 0 0}
.cmp tbody tr:last-child .paid{border-radius:0 0 18px 18px}
.cmp tbody th{font-weight:400}
.cmp-feat{display:flex; align-items:center; gap:12px}
.cmp-ic{width:36px; height:36px; border-radius:50%; background:var(--green-tint); color:var(--green-ink); display:grid; place-items:center; flex:none}
.cmp-name{font-family:var(--display); font-weight:500; font-size:clamp(1.05rem, 1rem + .25vw, 1.2rem); line-height:1.25; color:var(--ink)}
.cmp tbody th .ftag{margin:8px 0 0 48px}
.cmp-get{font-size:16px; line-height:1.5; color:var(--body)}
.cmp-get-m{display:none}
.cmp-c{text-align:center; font-size:15px; font-weight:700; line-height:1.35}
.cmp .cmp-c{text-align:center}
.cmp-c.cmp-yes{color:var(--green-ink)}
.cmp-c.cmp-yes.paid{color:var(--gold-ink)}
/* The two Lock only rows (Time Locked, Next morning email): one gold edged box around their Lock cells,
   like the hero card's border (operator 2026-10-01). */
.cmp td.lock-only{border-left:3px solid var(--gold); border-right:3px solid var(--gold)}
.cmp td.lock-only-first{border-top:3px solid var(--gold); border-radius:14px 14px 0 0}
.cmp td.lock-only-last{border-bottom:3px solid var(--gold); border-radius:0 0 14px 14px}
.cmp tbody tr:last-child td.lock-only-last{border-radius:0 0 18px 18px}
.cmp-c.cmp-no{color:var(--muted)}
.cmp-c.cmp-word{color:var(--ink)}
.cmp-c.cmp-word.paid{color:var(--gold-ink)}
.cmp-c svg{display:inline-block; vertical-align:middle}
.cmp-foot{margin-top:18px; padding:0 12px; font-size:15px; line-height:1.55; color:var(--muted); max-width:62em}
.ftag{display:inline-flex; margin-top:8px; font-size:13px; font-weight:800; line-height:1.4; padding:3px 11px; border-radius:999px}
.ftag.on{background:var(--green-chip); color:var(--green-ink)}
.ftag.off{background:transparent; color:var(--body); box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.ftag.lock{background:var(--gold-chip); color:var(--gold-ink)}
.ftag.both{background:var(--sand); color:var(--body); box-shadow:inset 0 0 0 1px var(--line)}
.feat-more{margin-top:20px; padding:0 12px; font-size:17px; font-weight:700}
.feat-more a{color:var(--gold-ink)}
.feat-more a:hover{color:var(--ink)}

/* a night with ViceFree: the timeline */
.tl-card{
  margin-top:clamp(32px, 4vw, 56px); background:var(--panel); border:1px solid var(--line);
  border-radius:clamp(28px, 3.4vw, 44px); padding:clamp(28px, 4.4vw, 64px) clamp(18px, 5vw, 72px) clamp(20px, 3vw, 44px);
}
.timeline{list-style:none; margin:0; padding:0}
.tl-row{display:grid; grid-template-columns:clamp(120px, 13.6vw, 196px) 88px minmax(0, 1fr); grid-template-areas:"time rail body"}
.tl-time{grid-area:time; text-align:right}
.tl-clock{font-family:var(--display); font-size:clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); line-height:1.1; font-weight:400; font-variant-numeric:lining-nums tabular-nums; color:var(--ink)}
.tl-when{margin-top:6px; display:flex; justify-content:flex-end; align-items:center; gap:6px; font-size:14px; font-weight:700; line-height:1.3; color:var(--muted)}
.tl-rail{grid-area:rail; position:relative}
.tl-rail::before{content:""; position:absolute; left:50%; margin-left:-1px; top:0; bottom:0; width:2px; background:var(--rail)}
.tl-row:first-child .tl-rail::before{top:34px}
.tl-row:last-child .tl-rail::before{bottom:auto; height:20px}
.tl-dot{position:absolute; left:50%; top:14px; width:18px; height:18px; margin-left:-9px; border-radius:50%; border:2px solid var(--rail-dot); background:var(--panel)}
.tl-row.key .tl-dot{top:11px; width:24px; height:24px; margin-left:-12px; border:5px solid var(--panel); background:var(--gold); box-shadow:0 0 0 2px var(--gold)}
.tl-body{grid-area:body; min-width:0; padding:4px 0 52px}
.tl-row.key .tl-body{padding-top:0}
.tl-row:last-child .tl-body{padding-bottom:20px}
.tl-body h3{font-size:clamp(1.35rem, 1.15rem + .7vw, 1.75rem); line-height:1.25}
.tl-row.key .tl-body h3{font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.375rem); line-height:1.15; letter-spacing:-.01em}
.tl-text{margin-top:10px; max-width:620px; color:var(--body)}
.tl-body .chip{margin-top:14px}
.info-line{margin-top:24px; display:flex; align-items:flex-start; gap:14px; padding:0 8px; font-size:17px; line-height:1.5; color:var(--body)}
.info-line svg{color:var(--muted); margin-top:1px}

/* small drawn product UI, used in the timeline */
.mini-warn{
  margin-top:16px; display:inline-flex; align-items:center; gap:14px; max-width:100%;
  background:var(--surface); border:1px solid var(--red-line); border-radius:14px; padding:10px 18px 10px 10px; box-shadow:var(--shadow-sm);
}
.warn-ic{width:30px; height:30px; border-radius:50%; background:var(--red-tint); color:var(--red); display:grid; place-items:center; flex:none}
.mw-text{font-size:15px; font-weight:800; line-height:1.3; color:var(--ink); min-width:0}
.mw-sep{width:1px; height:22px; background:var(--red-line); flex:none}
.mw-num{font-size:16px; font-weight:800; line-height:1.3; font-variant-numeric:tabular-nums; color:var(--ink)}
.mini-req{
  margin-top:18px; display:inline-flex; align-items:center; gap:12px 16px; flex-wrap:wrap; max-width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:12px 12px 12px 18px; box-shadow:var(--shadow-sm);
}
.mini-req > svg{color:var(--gold-ink)}
.mr-t{display:flex; flex-direction:column; line-height:1.3}
.mr-1{font-size:16px; font-weight:800; color:var(--ink)}
.mr-2{font-size:14px; color:var(--body)}
.mr-btn{background:var(--btn); color:var(--btn-ink); font-size:14px; font-weight:700; padding:10px 18px; border-radius:999px; line-height:1.2}
.mini-pair{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.mini-pair span{border:2px solid var(--ink); color:var(--ink); font-size:15px; font-weight:800; padding:10px 22px; border-radius:999px; line-height:1.2}

/* the one rule: two cards */
.duo{margin-top:clamp(32px, 4vw, 56px); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 32px)}
.duo-card{border-radius:clamp(28px, 3vw, 36px); padding:clamp(26px, 3.2vw, 44px) clamp(22px, 3.4vw, 48px); display:flex; flex-direction:column}
.duo-card.now{background:var(--green-tint)}
.duo-card.wait{background:var(--gold-tint)}
.duo-head{display:flex; align-items:center; gap:18px}
.duo-card.now .ic-circle{color:var(--green-ink)}
.duo-card.wait .ic-circle{color:var(--gold-ink)}
.duo-card.wait .kicker{color:var(--gold-ink)}
.duo-head h3{margin-top:4px; font-size:clamp(1.5rem, 1.25rem + .8vw, 2rem); line-height:1.15}
.rows{list-style:none; margin:32px 0 0; padding:0}
.rows li{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-top:1px solid var(--green-line); font-size:18px; line-height:1.5; color:var(--ink)}
.rows li:last-child{border-bottom:1px solid var(--green-line)}
.duo-card.wait .rows li{border-color:var(--gold-line)}
.duo-foot{margin-top:auto; padding-top:24px; font-size:16px; line-height:1.55; color:var(--body)}

/* how it blocks: three cards */
.tri{margin-top:clamp(32px, 4vw, 56px); display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 2vw, 28px)}
.layer-card{background:var(--panel); border:1px solid var(--line); border-radius:clamp(28px, 3vw, 36px); padding:clamp(20px, 2.4vw, 32px) clamp(20px, 2.4vw, 32px) 34px; display:flex; flex-direction:column}
.layer-art{background:var(--sand); border-radius:24px; height:160px; display:flex; align-items:center; justify-content:center; padding:0 8px; overflow:hidden}
.layer-art svg{width:100%; max-width:300px; height:auto}
.layer-card .kicker{margin-top:28px; font-size:14px; letter-spacing:.06em; color:var(--gold-ink)}
.layer-card h3{margin-top:6px; font-size:clamp(1.5rem, 1.25rem + .7vw, 1.875rem); line-height:1.2}
.ltext{margin-top:12px; font-size:17px; line-height:1.6; color:var(--body)}
.chip-row{margin-top:auto; padding-top:22px}
.fine{margin-top:28px; max-width:760px; font-size:17px; line-height:1.6; color:var(--body)}

/* illustration strokes and fills (SVG presentation attributes are the fallback) */
.ill .s-line{stroke:var(--ill-line)}
.ill .s-soft{stroke:var(--ill-soft)}
.ill .s-bar{stroke:var(--ill-d)}
.ill .s-gold-ink{stroke:var(--gold-ink)}
.ill .s-red{stroke:var(--red)}
.ill .f-panel{fill:var(--panel)}
.ill .f-surface{fill:var(--surface)}
.ill .f-a{fill:var(--ill-a)}
.ill .f-c{fill:var(--ill-c)}
.ill .f-d{fill:var(--ill-d)}
.ill .f-dim{fill:var(--ill-dim)}
.ill .f-gold{fill:var(--gold)}
.ill .f-line{fill:var(--ill-line)}
.ill .f-img2{fill:var(--ill-img2)}

/* when it catches something */
.catch{margin-top:clamp(32px, 4vw, 56px); display:grid; grid-template-columns:minmax(0, 700px) minmax(0, 1fr); gap:clamp(28px, 4vw, 56px); align-items:start}
.catch-fig{margin:0; min-width:0}
.catch-card{background:var(--panel); border:1px solid var(--line); border-radius:clamp(28px, 3vw, 40px); padding:clamp(14px, 2.4vw, 32px)}
.browser{background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden}
.browser-bar{height:48px; background:var(--ill-chrome); border-bottom:1px solid var(--foot); display:flex; align-items:center; gap:8px; padding:0 18px}
.bdot{width:11px; height:11px; border-radius:50%; background:var(--ill-b); flex:none}
.burl{margin-left:14px; flex:0 1 300px; min-width:0; height:24px; border-radius:12px; background:var(--surface); border:1px solid var(--line)}
.browser-body{display:flex; gap:22px; padding:24px}
.feed{flex:0 1 312px; min-width:0; display:flex; flex-direction:column; gap:20px}
.post{display:flex; gap:12px; align-items:flex-start}
.av{width:36px; height:36px; border-radius:50%; background:var(--ill-a); flex:none}
.lines{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px; padding-top:4px}
.ln{display:block; height:8px; border-radius:4px; background:var(--ill-c)}
.ln.hd{height:10px; border-radius:5px; background:var(--ill-b)}
.w34{width:34%}.w40{width:40%}.w46{width:46%}.w60{width:60%}.w70{width:70%}.w84{width:84%}.w92{width:92%}
.post-img{margin-top:16px; position:relative; aspect-ratio:312 / 220; border-radius:14px; background:var(--ill-img)}
.post-img svg{display:block; width:100%; height:100%; border-radius:14px}
.post-img .dim{position:absolute; inset:0; border-radius:14px; background:rgba(11,31,51,.55)}
.post-img .outline{position:absolute; inset:-4px; border:2px solid var(--gold); border-radius:17px}
.warn-col{flex:1 1 0; min-width:0; padding-top:88px}
.warn-box{background:var(--surface); border:1px solid var(--red-line); border-radius:16px; padding:16px; box-shadow:var(--shadow-md)}
.warn-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.warn-box .warn-ic{width:34px; height:34px}
.warn-time{font-size:36px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; color:var(--ink)}
.warn-text{margin-top:14px; font-size:15px; line-height:1.35; font-weight:800; color:var(--ink)}
.warn-bar{margin-top:12px; height:6px; border-radius:3px; background:var(--red-tint)}
.warn-bar span{display:block; width:80%; height:6px; border-radius:3px; background:var(--red)}
.warn-btns{margin-top:14px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.wb{text-align:center; padding:8px 4px; border-radius:10px; border:1.5px solid var(--ill-d); color:var(--ink); font-size:14px; font-weight:700; line-height:1.2}
.wb.solid{background:var(--btn); border-color:var(--btn); color:var(--btn-ink)}
.catch-fig figcaption{margin-top:16px; padding:0 12px; font-size:15px; line-height:1.5; color:var(--muted)}
.catch-steps{list-style:none; margin:0; padding:12px 0 0; display:flex; flex-direction:column; gap:36px}
.catch-steps li{display:flex; gap:20px}
.num{flex:none; width:46px; height:46px; border-radius:50%; background:var(--panel); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--display); font-size:21px; line-height:1; color:var(--ink)}
.catch-steps .cs-body{min-width:0}
.catch-steps h3{margin-top:6px; font-size:clamp(1.4rem, 1.2rem + .6vw, 1.7rem); line-height:1.2}
.cs-text{margin-top:8px; font-size:17px; line-height:1.6; color:var(--body)}
.mini-curtain{margin-top:14px; width:210px; max-width:100%; border-radius:12px; overflow:hidden; border:1px solid var(--ill-b); background:var(--surface)}
.mini-curtain .bar{height:22px; background:var(--ill-chrome); border-bottom:1px solid var(--foot); display:flex; align-items:center; gap:5px; padding:0 10px}
.mini-curtain .bar span{width:7px; height:7px; border-radius:50%; background:var(--ill-b)}
.mini-curtain .cur{height:96px; background:var(--curtain)}
.strikes{margin-top:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.strike{width:30px; height:30px; border-radius:50%; border:2px solid var(--red); background:var(--red-tint); display:grid; place-items:center; font-size:13px; font-weight:800; line-height:1; color:var(--ink)}
.strikes > svg{color:var(--muted)}
.tab-x{display:flex; align-items:center; gap:8px; height:30px; padding:0 12px; border:1px solid var(--ill-b); border-bottom:0; border-radius:10px 10px 0 0; background:var(--ill-chrome); color:var(--ink)}
.tab-x .ln{width:44px; height:7px; background:var(--ill-b)}
.notes3{margin-top:44px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px)}
.note-card{background:var(--green-tint); border-radius:26px; padding:22px 26px; display:flex; align-items:center; gap:16px; color:var(--green-ink)}
.note-card p{font-size:17px; line-height:1.5; color:var(--ink)}

/* privacy: what leaves */
.priv{
  margin-top:clamp(32px, 4vw, 56px); background:var(--green-tint); border-radius:clamp(28px, 3.4vw, 44px);
  padding:clamp(22px, 4vw, 56px); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3.4vw, 48px);
}
.priv-left{padding:8px 0 0 8px; min-width:0}
.priv h3{font-size:clamp(1.5rem, 1.25rem + .7vw, 2rem); line-height:1.2}
.leave-rows{list-style:none; margin:24px 0 0; padding:0}
.leave-rows li{display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--green-line); font-size:17px; line-height:1.45; color:var(--ink)}
.leave-rows li:last-child{border-bottom:1px solid var(--green-line)}
.leave-rows .lr-t{flex:1; min-width:0}
.leave-rows li > svg{color:var(--green-ink)}
.priv-note{margin-top:18px; font-size:15px; line-height:1.55; color:var(--body)}
.priv-right{background:var(--panel); border-radius:clamp(24px, 2.6vw, 32px); padding:clamp(24px, 3.2vw, 44px); min-width:0; align-self:start}
.never-list{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:16px}
.never-list li{display:flex; align-items:center; gap:16px; font-family:var(--display); font-size:clamp(1.5rem, 1.2rem + .9vw, 1.875rem); line-height:1.2; color:var(--ink)}
.never-list li > svg{color:var(--gold-ink)}
.ptext{margin-top:28px; font-size:17px; line-height:1.6; color:var(--body)}
.plink{margin-top:14px; font-size:17px; font-weight:700}
.plink a{color:var(--gold-ink)}
.plink a:hover{color:var(--ink)}

/* limits */
.limits-grid{margin-top:clamp(32px, 4vw, 56px); display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px)}
.limit{background:var(--panel); border:1px solid var(--line); border-radius:30px; padding:clamp(24px, 2.6vw, 32px) clamp(22px, 2.6vw, 34px) clamp(26px, 2.8vw, 36px)}
.limit .kicker{display:flex; align-items:center; gap:8px; color:var(--gold-ink)}
.limit h3{margin-top:16px; font-size:clamp(1.35rem, 1.2rem + .5vw, 1.625rem); line-height:1.2}

/* pricing */
.plans{margin-top:clamp(32px, 4vw, 56px); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 32px)}
.plan{background:var(--panel); border:1px solid var(--line); border-radius:clamp(28px, 3vw, 40px); padding:clamp(26px, 3.4vw, 48px); display:flex; flex-direction:column}
.plan.lock{background:var(--gold-tint); border-color:var(--gold-line)}
.plan-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.plan-head h3{font-size:clamp(1.6rem, 1.3rem + .8vw, 2rem); line-height:1.2}
.badge{font-size:14px; font-weight:800; padding:6px 14px; border-radius:999px; line-height:1.4; background:var(--green-tint); color:var(--green-ink)}
.plan.lock .badge{background:var(--panel); color:var(--gold-ink)}
.price{margin-top:22px; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px}
.price .amt{font-family:var(--display); font-size:clamp(3.25rem, 2.2rem + 3vw, 5rem); font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--ink)}
.price .per{font-size:19px; font-weight:700; color:var(--body)}
.pdesc{margin-top:18px; font-size:18px; line-height:1.6; color:var(--body)}
.checks{list-style:none; margin:28px 0 0; padding:0}
.checks li{position:relative; padding:13px 0 13px 34px; border-top:1px solid var(--line); font-size:17px; line-height:1.55; color:var(--ink)}
.checks li:last-child{border-bottom:1px solid var(--line)}
.plan.lock .checks li{border-color:var(--gold-line)}
.checks li::before,.tier li::before{
  content:""; position:absolute; left:4px; top:19px; width:13px; height:7px;
  border-left:2.5px solid var(--muted); border-bottom:2.5px solid var(--muted); transform:rotate(-45deg);
}
.plan.lock .checks li::before,.tier.lock li::before{border-color:var(--gold-ink)}
.plan-cta{margin-top:auto; padding-top:32px; display:flex; flex-direction:column}
.plan-cta .btn,.plan-cta .btn-ghost{width:100%}
.pnote{margin-top:14px; font-size:15px; line-height:1.5; color:var(--muted); text-align:center}
.plan.lock .pnote{color:var(--body)}
.price-notes{margin-top:36px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px 32px; padding:0 12px}
.price-notes > div{display:flex; align-items:flex-start; gap:12px; font-size:16px; line-height:1.55; color:var(--body)}
.price-notes svg{color:var(--muted); margin-top:2px}
.price-more{margin-top:28px; padding:0 12px; font-size:17px; font-weight:700}
.price-more a{color:var(--gold-ink)}
.price-more a:hover{color:var(--ink)}

/* the free browser extension, an aside */
.ext-card{
  background:var(--panel); border:1px solid var(--line); border-radius:clamp(28px, 3vw, 40px);
  padding:clamp(24px, 3.4vw, 44px) clamp(22px, 3.8vw, 52px); display:flex; align-items:center; gap:clamp(24px, 3.4vw, 48px);
}
.ext-art{width:180px; height:150px; flex:none; background:var(--sand); border-radius:28px; display:grid; place-items:center}
.ext-art svg{width:140px; height:auto}
.ext-body{flex:1; min-width:0}
.ext-body .eyebrow{font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem)}
.ext-body h2{margin-top:8px; font-size:clamp(1.75rem, 1.4rem + 1.1vw, 2.25rem); line-height:1.15; letter-spacing:-.01em}
.etext{margin-top:14px; font-size:18px; line-height:1.6; color:var(--body)}
.ext-cta{flex:none; display:flex; flex-direction:column; align-items:center; gap:10px}
.ext-cta .small{font-size:14px; font-weight:700; line-height:1.4; color:var(--muted)}

/* waitlist, homepage version */
.wl-card{
  background:var(--panel); border:1px solid var(--line); border-radius:clamp(28px, 3.6vw, 48px);
  padding:clamp(26px, 5vw, 72px) clamp(20px, 5.6vw, 80px); display:grid;
  grid-template-columns:minmax(0, 420px) minmax(0, 1fr); gap:clamp(32px, 5vw, 72px); box-shadow:var(--shadow-wl);
}
.wl-intro .eyebrow{margin-bottom:14px}
.wtext{margin-top:20px; font-size:18px; line-height:1.6; color:var(--body)}
.wl-facts{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:16px; line-height:1.5; color:var(--body)}
.wl-facts li{display:flex; align-items:flex-start; gap:10px}
.wl-facts svg{color:var(--muted); margin-top:3px}
.wl-facts a{color:var(--gold-ink); font-weight:700}
.wl-facts a:hover{color:var(--ink)}
.wl.wl-home{margin:0; max-width:none; min-width:0}
.wl-home .wl-fields{display:flex; flex-direction:column}
.wl-home .wl-label{font-size:16px; font-weight:800; line-height:1.4; color:var(--ink); margin:0}
.wl-input.lg{margin-top:10px; width:100%; height:62px; border-radius:18px; padding:0 22px; font-size:18px; flex:none}
.wl-plan{margin:30px 0 0; padding:0; border:0; min-width:0}
.wl-plan legend{padding:0}
.wl-cards{margin-top:12px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px}
.wl-choice{display:flex; align-items:flex-start; gap:14px; background:var(--field); border:1.5px solid var(--line-strong); border-radius:22px; padding:20px 20px 22px; cursor:pointer}
.wl-choice:has(input:checked){border-color:var(--ink); box-shadow:0 0 0 1.5px var(--ink)}
.wl-choice input{margin:4px 0 0; width:20px; height:20px; accent-color:var(--ink); flex:none; cursor:pointer}
.wl-choice .o1{display:block; font-family:var(--display); font-size:clamp(1.25rem, 1.1rem + .4vw, 1.5rem); font-weight:500; line-height:1.2; color:var(--ink)}
.wl-choice .o2{display:block; margin-top:2px; font-size:15px; line-height:1.45; color:var(--body)}
.wl-home .wl-submit{margin-top:30px; align-self:stretch; min-height:62px; font-size:18px}
.wl-home .wl-note{margin-top:18px}

/* the homepage waitlist as a compact band under the hero */
.section.wl-sec{padding-top:clamp(28px, 1.2rem + 2vw, 52px)}
.wl-card.wl-band{grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr); gap:clamp(24px, 4vw, 56px); align-items:center; padding:clamp(22px, 3vw, 40px) clamp(20px, 3.6vw, 48px)}
.wl-band h2{font-size:clamp(1.9rem, 1.35rem + 1.7vw, 2.75rem)}
.wl-band .wl-intro .eyebrow{margin-bottom:8px}
.wl-fact{margin-top:14px; display:flex; align-items:center; gap:10px; font-size:15px; line-height:1.45; color:var(--muted)}
.wl-band .wl-plan{margin:0}
.wl-band .wl-cards{margin-top:8px; gap:10px}
.wl-band .wl-choice{align-items:center; min-height:56px; padding:10px 16px; border-radius:18px}
.wl-band .wl-choice input{margin:0}
.wl-band .wl-choice .o1{font-size:clamp(1.1rem, 1rem + .3vw, 1.25rem)}
.wl-band .wl-choice .o2{font-size:14px; margin-top:0}
.wl-band .wl-email-label{margin:16px 0 8px}
.wl-row-home{flex-wrap:nowrap}
.wl-row-home .wl-input{flex:1 1 auto; min-height:56px}
.wl-band .wl-submit{margin:0; min-height:56px; font-size:17px; flex:none; align-self:auto}
.wl-band .wl-note{margin-top:12px; font-size:14px}
/* Half-height band (operator, 2026-09-25): tighter padding and type, plan and email labels
   kept for screen readers only, radio cards and the email row at the 48px minimum. */
.wl-vh,.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.wl-card.wl-band{padding:clamp(16px, 1.6vw, 22px) clamp(20px, 2.6vw, 34px); gap:clamp(18px, 3vw, 40px); border-radius:clamp(22px, 2.4vw, 32px)}
.wl-band h2{font-size:clamp(1.55rem, 1.2rem + 1vw, 2.1rem)}
.wl-band .wl-intro .eyebrow{margin-bottom:4px}
.wl-band .wl-fact{margin-top:8px; font-size:14px}
.wl-band .wl-cards{margin-top:0; gap:8px}
.wl-band .wl-choice{min-height:48px; padding:6px 14px; border-radius:14px}
.wl-band .wl-choice .o1{font-size:1.05rem}
.wl-band .wl-choice .o2{font-size:13px}
.wl-band .wl-row-home{margin-top:8px}
.wl-row-home .wl-input{min-height:48px}
.wl-band .wl-submit{min-height:48px; font-size:16px}
.wl-band .wl-msg:empty{display:none}
main > section.section.wl-sec{padding-block:clamp(8px, 1vw, 14px)}
main > section.wl-sec > .wrap:not(.prose){padding-block:0}
main > section.section.feat-sec{padding-top:clamp(16px, 2vw, 28px)}
main > section.section.feat-sec > .wrap:not(.prose){padding-top:0}
.feat-lead{max-width:880px; margin:0 0 clamp(20px, 2.4vw, 32px); font-size:clamp(1.7rem, 1.2rem + 1.9vw, 2.75rem)}
/* The homepage's top line, centred under the header (operator, 2026-09-25). */

/* pill illustrations on the pricing cards */
.plan-art{display:block; width:100%; height:auto; border-radius:clamp(16px, 2vw, 24px); border:1px solid var(--line); margin-bottom:clamp(22px, 2.6vw, 32px)}

/* ================================================================= case study (and its homepage teaser) */
:root{--cs-block:#8C3A2E; --cs-soft:#C98B7F}
.cs-svg{display:block; width:100%; height:auto}
.cs-svg .cf-panel{fill:var(--panel)}
.cs-svg .cf-sand{fill:var(--sand)}
.cs-svg .cf-line{fill:var(--line)}
.cs-svg .cf-ink{fill:var(--ink)}
.cs-svg .cf-body{fill:var(--body)}
.cs-svg .cf-muted{fill:var(--muted)}
.cs-svg .cf-block{fill:var(--cs-block)}
.cs-svg .cf-soft{fill:var(--cs-soft)}
.cs-svg .cf-gold{fill:var(--gold)}
.cs-svg .cf-goldink{fill:var(--gold-ink)}
/* A pause for a ViceFree update on a Lock day (case study calendar): a quiet grey on the gold bar. */
.cs-svg .cf-update{fill:#9C938B}
.cs-svg .cf-night{fill:var(--ink)}
.cs-svg .cs-line{stroke:var(--line)}
.cs-svg .cs-block{stroke:var(--cs-block)}
.cs-svg .cs-gold{stroke:var(--gold)}
.cs-svg .cs-panel{stroke:var(--panel)}

.cs-teaser{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 460px); gap:clamp(28px, 4.4vw, 64px); align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:clamp(28px, 3.4vw, 44px); padding:clamp(24px, 4.4vw, 64px);
}
.cs-teaser-copy{display:flex; flex-direction:column; gap:14px}
.cs-teaser-copy h2{font-size:clamp(2rem, 1.3rem + 2.4vw, 3.25rem)}
.cs-teaser-link{margin-top:14px}
.cs-teaser-fig{margin:0; min-width:0}
.cs-teaser-fig .cs-svg{border:1px solid var(--line); border-radius:18px}
.cs-teaser-fig figcaption{margin-top:12px; font-size:14px; line-height:1.5; color:var(--muted)}

.cs-top{display:flex; flex-direction:column; gap:22px}
main > section > .wrap.cs-top{padding-top:0}
.cs-stats{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:clamp(10px, 1.4vw, 16px)}
.cs-stat{background:var(--panel); border:1px solid var(--line); border-radius:24px; padding:18px 20px}
.cs-stat b{display:block; font-family:var(--display); font-weight:500; font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); line-height:1.1; color:var(--cs-block)}
.cs-stat span{display:block; margin-top:6px; font-size:15px; line-height:1.4; color:var(--body)}
.cs-note{background:var(--green-tint); border-radius:24px; padding:18px 22px; color:var(--body); font-size:16px; line-height:1.55; max-width:900px}
.cs-note p + p{margin-top:8px}
.cs-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 24px; font-size:15px; line-height:1.4; color:var(--body)}
.cs-legend li{display:flex; align-items:center; gap:8px}
.lg{display:inline-block; width:22px; height:14px; border-radius:4px; flex:none}
.lg-rec{background:var(--cs-block)}
.lg-inf{background:var(--cs-soft)}
.lg-est{background:repeating-linear-gradient(45deg, var(--cs-block) 0 2px, var(--cs-soft) 2px 6px)}
.lg-lock{background:var(--gold)}
.cs-block h2{font-size:clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem)}
.cs-n{color:var(--gold-ink)}
.cs-block .lede{margin-top:10px}
.cs-fig{margin:clamp(20px, 2.4vw, 28px) 0 0; background:var(--panel); border:1px solid var(--line); border-radius:clamp(22px, 2.6vw, 32px); padding:clamp(8px, 1.4vw, 16px)}
.cs-fig .v-compact{display:none}
.cs-foot{margin-top:10px; font-size:14px; line-height:1.5; color:var(--muted)}
.cs-cta{
  background:var(--gold-tint); border:1px solid var(--gold-line); border-radius:clamp(28px, 3.4vw, 44px);
  padding:clamp(26px, 4.4vw, 64px); display:flex; flex-direction:column; gap:14px;
}
.cs-cta h2{max-width:30ch}
.cs-cta .lede{max-width:none}
.cs-cta-actions{margin-top:14px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px}

/* ================================================================= interior pages */
.page-head{padding-block:clamp(32px, 2rem + 3.4vw, 80px) clamp(28px, 1.4rem + 2vw, 56px); display:flex; flex-direction:column; gap:16px}
.page-head h1{max-width:21ch}
.page-head .sub{font-size:clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height:1.55; color:var(--body); max-width:40em}
/* /download: the heading and the waitlist almost touch (operator 2026-10-01). */
.page-head.dl-head{padding-bottom:6px}
main > section.dl-wl{padding-block:0}
main > section.dl-wl > .wrap:not(.prose){padding-block:0}
/* /download: the beta line in its own area under the waitlist, in the page head's type (operator 2026-10-01). */
.page-head.beta-note{padding-top:20px}
/* My Privacy: the first section sits closer to the page title */
.page-head + .section.mp-first{padding-top:clamp(8px, 1vw + 4px, 20px)}
.page-head .stamp{font-size:15px; font-weight:700; line-height:1.5; color:var(--muted)}

main > section{padding-block:clamp(10px, 1.4vw, 18px)}
main > section > .wrap:not(.prose){padding-block:clamp(22px, 3.4vw, 48px)}
/* Case studies (operator 2026-09-28): the page's blocks sit much closer together. */
.cs-page .page-head{padding-bottom:clamp(12px, .6rem + 1vw, 24px)}
.cs-page main > section{padding-block:0}
.cs-page main > section > .wrap:not(.prose){padding-block:clamp(12px, 1.6vw, 22px)}

/* running prose sits on a warm panel. The panel lines up with the page's
   content edge; its children keep a reading measure. */
.wrap.prose{
  width:calc(100% - 2 * var(--gutter)); max-width:1200px;
  padding:clamp(26px, 4.4vw, 64px) clamp(20px, 5vw, 80px);
  background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 3.4vw, 44px);
}
.wrap.prose > *{max-width:68ch}
.wrap.prose > .tbl-wrap{max-width:none}
.prose > *:first-child{margin-top:0}
.prose h2{margin:1.5em 0 .45em; font-size:clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); line-height:1.15; letter-spacing:-.01em}
.prose h2 a{overflow-wrap:anywhere}
.prose h3{margin:1.4em 0 .35em; font-size:clamp(1.25rem, 1.12rem + .45vw, 1.5rem); line-height:1.25}
.prose p{color:var(--body); margin:.8em 0}
.prose ul,.prose ol{color:var(--body); margin:.9em 0; padding-left:1.35em}
.prose li{margin:.45em 0}
.prose li::marker{color:var(--gold-ink)}
.prose strong{color:var(--ink)}
.prose a{color:var(--gold-ink); text-decoration:underline}
.prose a:hover{color:var(--ink)}
.prose code{font-size:.84em; background:var(--sand); border:1px solid var(--line); padding:2px 7px; border-radius:8px; color:var(--ink); overflow-wrap:anywhere}
.prose hr{border:0; border-top:1px solid var(--line); margin:2.2em 0}

.prose .note,.note{background:var(--green-tint); border-radius:24px; padding:20px 24px; margin:0 0 26px; color:var(--body); font-size:.95em}
.prose .note.warn,.note.warn{background:var(--gold-tint)}
.prose .note p,.note p{margin:0; color:inherit}
.prose .note p + p,.note p + p{margin-top:10px}
.prose .note + h2{margin-top:1em}
.prose .verbatim,.verbatim{
  font-family:var(--display); font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); line-height:1.4; color:var(--ink);
  background:var(--gold-tint); border-radius:24px; padding:22px 26px; margin:26px 0; max-width:34em;
}

/* tables */
.tbl-wrap{margin-top:clamp(28px, 3.4vw, 48px); overflow-x:auto; background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 3vw, 36px); -webkit-overflow-scrolling:touch}
.tbl{width:100%; min-width:540px; border-collapse:collapse; font-size:16px; line-height:1.5}
.tbl th,.tbl td{text-align:left; padding:15px 20px; border-top:1px solid var(--line); vertical-align:top; color:var(--body)}
.tbl th:first-child,.tbl td:first-child{padding-left:clamp(20px, 3vw, 36px)}
.tbl thead th{border-top:0; padding-top:22px; font-family:var(--display); font-weight:500; font-size:20px; color:var(--ink)}
.tbl tbody th{color:var(--ink); font-weight:700}
.tbl td strong{color:var(--gold-ink)}
.tbl-wrap + .lede{margin-top:28px}

/* pricing page tiers */
.tiers{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(16px, 2.4vw, 32px); margin-top:clamp(28px, 4vw, 56px)}
.tier{background:var(--panel); border:1px solid var(--line); border-radius:clamp(28px, 3vw, 40px); padding:clamp(26px, 3.4vw, 48px); display:flex; flex-direction:column; gap:18px}
.tier.lock{background:var(--gold-tint); border-color:var(--gold-line)}
.tier-head{display:flex; align-items:baseline; justify-content:space-between; gap:6px 16px; flex-wrap:wrap}
.tier-name{font-family:var(--display); font-size:clamp(1.6rem, 1.3rem + .8vw, 2rem); font-weight:500; line-height:1.2; color:var(--ink)}
.tier-price{font-family:var(--display); font-size:clamp(2.5rem, 1.9rem + 2vw, 3.5rem); font-weight:500; line-height:1; letter-spacing:-.02em; color:var(--ink)}
.tier-price .per{font-family:var(--sans); font-size:18px; font-weight:700; letter-spacing:0; color:var(--body); margin-left:6px}
.tier p{color:var(--body)}
.tier ul{list-style:none; margin:0; padding:0}
.tier li{position:relative; padding:12px 0 12px 34px; border-top:1px solid var(--line); font-size:17px; line-height:1.5; color:var(--ink)}
.tier li:last-child{border-bottom:1px solid var(--line)}
.tier.lock li{border-color:var(--gold-line)}
.tier .btn-dark{align-self:stretch; margin-top:auto}
.tier-note{font-size:15px; line-height:1.5; color:var(--muted)}
.tier.lock .tier-note{color:var(--body)}

/* waitlist form (pricing, early access) and its relatives (unblock, goodbye) */
.wl{margin-top:26px; max-width:52ch}
.wrap:not(.prose) > .wl{
  max-width:720px; margin-top:clamp(28px, 3.4vw, 44px); background:var(--panel); border:1px solid var(--line);
  border-radius:clamp(24px, 3vw, 36px); padding:clamp(22px, 3.4vw, 40px); box-shadow:var(--shadow-wl);
}
.wl-label{display:block; font-size:16px; font-weight:800; line-height:1.4; color:var(--ink); margin:0 0 10px}
.wl-tier{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.wl-opt{
  display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:10px 18px;
  background:var(--field); border:1.5px solid var(--line-strong); border-radius:18px;
  font-size:17px; font-weight:700; line-height:1.3; color:var(--ink); cursor:pointer;
}
.wl-opt:has(input:checked){border-color:var(--ink); box-shadow:0 0 0 1.5px var(--ink)}
.wl-opt input{accent-color:var(--ink); width:20px; height:20px; margin:0; flex:none; cursor:pointer}
.wl-row{display:flex; gap:12px; flex-wrap:wrap}
.wl-input{
  flex:1 1 240px; min-width:0; min-height:56px; font:inherit; font-size:17px; color:var(--ink);
  background:var(--field); border:1.5px solid var(--line-strong); border-radius:16px; padding:12px 18px;
}
.wl-input::placeholder{color:var(--muted); opacity:1}
.wl-input:focus{border-color:var(--ink)}
.wl-note{margin-top:14px; font-size:15px; line-height:1.55; color:var(--muted)}
.wl-note a{color:var(--gold-ink)}
.wl-note a:hover{color:var(--ink)}
.wl-msg{margin-top:12px; font-size:16px; font-weight:700; line-height:1.5; color:var(--ink)}
.wl-msg:empty{margin-top:0}
.wl-msg a{color:var(--gold-ink)}
.prose .wl-note{color:var(--muted)}

/* unblock request form (/unblock) and exit survey (/goodbye) */
.wrap.prose > .wl{max-width:52ch; margin-top:0}
.ub-gap{margin-top:22px}
.ub-opt{font-weight:600; color:var(--muted)}
.ub-text{display:block; width:100%; resize:vertical; min-height:96px; line-height:1.5}
.gb-set{border:0; margin:0; padding:0; min-width:0}
.gb-set legend{padding:0}
.wl-opt.gb-opt{display:flex; width:100%; margin:10px 0; min-height:52px}

/* steps, used on the early-access page */
.steps{list-style:none; margin:28px 0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:18px}
.prose .steps{padding-left:0}
.steps li{counter-increment:step; display:grid; grid-template-columns:46px minmax(0, 1fr); column-gap:18px; row-gap:0; align-items:start; margin:0}
.steps li > *{grid-column:2}
.steps li::before{
  grid-column:1; grid-row:1 / span 6;
  content:counter(step); width:46px; height:46px; border-radius:50%; background:var(--sand); border:1px solid var(--line);
  display:grid; place-items:center; font-family:var(--display); font-size:21px; line-height:1; color:var(--ink);
}
.steps strong{display:block; color:var(--ink); font-weight:800; font-size:18px; margin:9px 0 4px}
.steps p{color:var(--body); margin:0}
.steps p + p{margin-top:8px}

/* faq */
.qa{display:grid; gap:16px; margin:0}
.qa.col{max-width:900px}
.qa > div{background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 2.6vw, 30px); padding:clamp(22px, 3vw, 34px) clamp(20px, 3.4vw, 40px)}
.qa h3{margin-bottom:12px}
.qa p,.qa ul{color:var(--body)}
.qa p + p{margin-top:12px}
.qa ul{padding-left:1.35em; margin:10px 0 14px}
.qa li{margin:6px 0}
.qa li::marker{color:var(--gold-ink)}
.qa a{color:var(--gold-ink)}
.qa a:hover{color:var(--ink)}
.qa code{font-size:.84em; background:var(--sand); border:1px solid var(--line); padding:2px 7px; border-radius:8px; color:var(--ink); overflow-wrap:anywhere}

/* changelog */
.rel{display:grid; gap:16px; margin-top:clamp(28px, 3.4vw, 48px)}
.rel.col{max-width:960px}
.rel > div{display:grid; grid-template-columns:150px minmax(0, 1fr); gap:24px; background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 2.6vw, 30px); padding:clamp(22px, 3vw, 32px) clamp(20px, 3.4vw, 40px)}
.rel .v{display:block; font-family:var(--display); font-size:28px; font-weight:500; line-height:1.1; color:var(--ink)}
.rel .d{display:inline-block; margin-top:10px; font-size:14px; font-weight:700; line-height:1.4; color:var(--green-ink); background:var(--green-tint); padding:3px 12px; border-radius:999px}
.rel p{color:var(--body)}
.rel p + p{margin-top:10px}
.rel ul{margin:10px 0 0; padding-left:1.35em; color:var(--body)}

/* privacy page: the numbered list of what leaves */
.leaves{list-style:none; margin:28px 0 0; padding:4px clamp(20px, 3vw, 36px); background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 3vw, 36px)}
.leaves.col{max-width:960px}
.leaves li{display:grid; grid-template-columns:40px minmax(0, 1fr); column-gap:16px; row-gap:0; align-items:start; padding:18px 0; border-top:1px solid var(--line)}
.leaves li > *{grid-column:2}
.leaves li > .n{grid-column:1; grid-row:1 / span 4}
.leaves li:first-child{border-top:0}
.leaves .n{width:36px; height:36px; border-radius:50%; background:var(--green-tint); color:var(--green-ink); display:grid; place-items:center; font-family:var(--sans); font-size:14px; font-weight:800}
.leaves p{color:var(--body)}
.leaves p + p{margin-top:8px}
.leaves strong{color:var(--ink)}
.never{margin-top:26px; font-family:var(--display); font-size:clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height:1.35; color:var(--ink)}
.never a{color:var(--gold-ink)}

/* 404 */
.gone .links{display:flex; gap:12px; flex-wrap:wrap; margin-top:24px}
.gone .links a{display:inline-flex; align-items:center; min-height:48px; padding:0 22px; border-radius:999px; border:2px solid var(--ink); font-weight:800; font-size:16px; text-decoration:none; color:var(--ink)}
.gone .links a:hover{background:var(--ink); color:var(--sand)}

/* status page (its inline fallback block is refused by the CSP in production, so the real styles live here) */
.st-card{background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 3vw, 36px); padding:clamp(22px, 3vw, 36px); max-width:720px; box-shadow:var(--shadow-wl)}
.st-state{display:flex; align-items:center; gap:12px; font-family:var(--display); font-weight:500; font-size:clamp(1.4rem, 1.2rem + .6vw, 1.75rem); line-height:1.2; color:var(--ink)}
.st-dot{width:14px; height:14px; border-radius:50%; background:var(--green-ink); flex:none; box-shadow:0 0 0 5px var(--green-chip)}
.st-note{margin:14px 0 0; color:var(--body); max-width:62ch}
.st-checked{margin:18px 0 0; font-size:15px; font-weight:700; color:var(--muted)}
.st-body{margin-top:clamp(24px, 3vw, 40px)}
.st-body p{margin:0 0 16px}
.st-body p:last-child{margin-bottom:0}

/* ================================================================= footer */
.site-foot{
  margin-top:clamp(72px, 8vw, 120px); background:var(--foot); color:var(--body);
  border-radius:clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  padding-block:clamp(40px, 5vw, 64px) clamp(28px, 4vw, 56px);
}
.foot-top{display:flex; justify-content:space-between; align-items:flex-start; gap:24px 48px; flex-wrap:wrap}
.foot-about{max-width:440px}
.foot-about .brand .mark{width:34px; height:34px}
.foot-about .brand-word{font-size:28px}
.foot-blurb{margin-top:12px; font-size:16px; line-height:1.6; color:var(--body)}
.foot-links{display:flex; flex-wrap:wrap; align-items:center; gap:0 28px}
.foot-links a,.foot-links .nav-off{display:inline-flex; align-items:center; min-height:44px; font-size:16px; font-weight:700; text-decoration:none; color:var(--ink)}
.foot-links a:hover{color:var(--gold-ink)}
/* menu items whose pages are hidden for review (site/HIDDEN-PAGES.md): shown, not linked */
.nav-off{cursor:default}
.foot-base{margin-top:clamp(24px, 3.4vw, 48px); padding-top:20px; border-top:1px solid var(--foot-line); display:flex; justify-content:space-between; align-items:center; gap:4px 24px; flex-wrap:wrap; font-size:15px; line-height:1.5; color:var(--muted)}
.foot-base:first-child{margin-top:0; padding-top:0; border-top:0}
.foot-base a{color:inherit; display:inline-flex; align-items:center; min-height:44px}
.foot-base a:hover{color:var(--ink)}
.tbtn{
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px;
  border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); border-radius:999px;
  cursor:pointer; font:inherit; font-size:15px; font-weight:700;
}
.tbtn:hover{border-color:var(--ink)}
/* "Cookie settings" (added by assets/analytics.js): a button that reads as a footer link */
.foot-btn{display:inline-flex; align-items:center; min-height:44px; border:0; background:none; padding:0; margin:0; font:inherit; font-size:16px; font-weight:700; color:var(--ink); cursor:pointer}
.foot-btn:hover{color:var(--gold-ink)}

/* ================================================================= consent banner (assets/analytics.js)
   Non-modal, pinned to the bottom, never more than a strip. Accept and Decline share one style. */
.consent{position:fixed; left:0; right:0; bottom:0; z-index:50; padding:0 var(--gutter) var(--gutter); pointer-events:none}
.consent-in{
  pointer-events:auto; max-width:760px; margin:0 auto; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow-lg), 0 6px 20px rgba(11,31,51,.12);
  padding:20px 24px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px;
}
.consent-title{margin:0; flex-basis:100%; font-family:var(--display); font-weight:500; font-size:20px}
.consent-text{margin:0; flex:1 1 320px; font-size:15px; color:var(--body); line-height:1.5}
.consent-text a{color:var(--gold-ink)}
.consent-btns{display:flex; gap:10px}
.consent-btn{
  border:2px solid var(--ink); background:transparent; color:var(--ink); border-radius:999px;
  min-height:44px; min-width:104px; padding:0 20px; font:inherit; font-size:15px; font-weight:800; cursor:pointer;
}
.consent-btn:hover{background:var(--ink); color:var(--sand)}

/* hidden has to beat the display rules above, or hiding the form after a
   successful submit does nothing (.wl-row and .wl-fields are flex). */
[hidden]{display:none !important}

:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.wl-input:focus-visible{outline-offset:2px}
/* ============================================================ the hero graphic
   Top of the homepage since 2026-09-26: the question, five panels in a row
   (triggers, comfort, shame, guilt, life back) and the CTA. Built in
   site/lab/hero-v3.html. */
.lx-hero{padding-top:clamp(18px, 3vw, 44px); padding-bottom:clamp(20px, 3vw, 40px)}
.lx-copy{max-width:1020px; margin-inline:auto; text-align:center}
.lx-hero h1{
  font-size:clamp(1.9rem, 1.1rem + 2.4vw, 3.5rem); line-height:1.06; letter-spacing:-.022em;
}
.lx-hero h1 em{font-style:italic; font-weight:400; color:var(--gold-ink)}
.lx-sub{
  margin-top:clamp(12px, 1.4vw, 20px); max-width:34ch; margin-inline:auto;
  font-size:clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  line-height:1.5; color:var(--body);
}

/* the row: five panels, four arrows. Nine grid tracks on wide screens. */
.lx-row{
  margin-top:clamp(26px, 3.4vw, 48px);
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr) auto) minmax(0, 1fr);
  align-items:start;
  gap:clamp(6px, 1vw, 14px);
}
.lx-panel{margin:0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center}
.lx-label{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1rem, .92rem + .38vw, 1.3rem); line-height:1.3; color:var(--ink);
  margin-bottom:10px; white-space:nowrap;
}
.lx-panel.turn .lx-label{color:var(--gold-ink); font-weight:500}
.lx-art{
  width:100%; border-radius:18px; overflow:hidden; display:block;
  box-shadow:var(--shadow-tile);
}
.lx-art svg{display:block; width:100%; height:auto}
.lx-panel.turn .lx-art{box-shadow:0 18px 34px -24px rgba(138,106,42,.7), 0 0 0 1px var(--gold-line)}
.lx-arrow{
  align-self:center; margin-top:clamp(20px, 3vw, 40px); color:var(--muted);
  display:grid; place-items:center;
}
.lx-arrow svg{width:clamp(18px, 1.8vw, 26px); height:auto}
.lx-arrow.warm{color:var(--gold-ink)}

.lx-actions{
  margin-top:clamp(28px, 3.4vw, 44px); display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center; gap:14px 26px;
}
.lx-note{
  margin-top:16px; text-align:center; font-size:15px; line-height:1.5; color:var(--muted);
}

/* ============================================================ entrance
   Panels appear left to right, 150 ms apart, on a light spring. The arrows
   ride between them. Turned off wholesale under prefers-reduced-motion. */
@keyframes lx-rise{
  from{opacity:0; transform:translateY(16px) scale(.975)}
  to{opacity:1; transform:none}
}
.lx-row > *{animation:lx-rise .62s cubic-bezier(.2,1.16,.34,1) both}
.lx-row > *:nth-child(1){animation-delay:.10s}
.lx-row > *:nth-child(2){animation-delay:.175s}
.lx-row > *:nth-child(3){animation-delay:.25s}
.lx-row > *:nth-child(4){animation-delay:.325s}
.lx-row > *:nth-child(5){animation-delay:.40s}
.lx-row > *:nth-child(6){animation-delay:.475s}
.lx-row > *:nth-child(7){animation-delay:.55s}
.lx-row > *:nth-child(8){animation-delay:.625s}
.lx-row > *:nth-child(9){animation-delay:.70s}
.lx-actions{animation:lx-rise .6s cubic-bezier(.2,1.16,.34,1) .86s both}

/* the clock in panel 3: time going. The second hand sweeps, the minute hand
   turns a full circle every six seconds, the hour hand crawls. Each keyframe
   starts at the hand's own still angle so nothing jumps when it begins. The
   prefers-reduced-motion rule at the foot of this file kills all three, and
   the hands fall back to their rotate() attributes: a still clock. */
.clk-hr,.clk-min,.clk-sec{transform-box:view-box; transform-origin:110px 80px; animation-timing-function:linear; animation-iteration-count:infinite}
.clk-hr{animation-name:clk-hr; animation-duration:72s}
.clk-min{animation-name:clk-min; animation-duration:6s}
.clk-sec{animation-name:clk-sec; animation-duration:1.2s}
@keyframes clk-hr{from{transform:rotate(300deg)} to{transform:rotate(660deg)}}
@keyframes clk-min{from{transform:rotate(50deg)} to{transform:rotate(410deg)}}
@keyframes clk-sec{from{transform:rotate(170deg)} to{transform:rotate(530deg)}}

@media (max-width:1100px){
  .lx-label{font-size:.98rem}
}
/* Under 900 px the row becomes a vertical sequence with down arrows. */
@media (max-width:900px){
  .lx-row{grid-template-columns:minmax(0, 1fr); justify-items:center; gap:0; max-width:440px; margin-inline:auto}
  .lx-panel{width:100%}
  .lx-arrow{margin-top:0; padding-block:10px}
  .lx-arrow svg{transform:rotate(90deg)} /* on the svg: the entrance animation owns the wrapper's transform */
  .lx-label{white-space:normal; margin-bottom:8px}
  .lx-art{max-width:100%}
}
@media (max-width:560px){
  /* phones (operator, 2026-09-26): the question on two lines, the answer on one, bigger labels.
     The subline's size tracks the screen: its one-line width is about 17.8x its font size. */
  .lx-copy{max-width:none}
  .lx-sub{max-width:none; font-size:min(1.09375rem, calc((100vw - 32px) / 18.4))}
  .lx-label{font-size:1.125rem}
}

@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important}}

/* ================================================================= responsive */
@media (max-width:1100px){
  .hero-in{grid-template-columns:minmax(0, 1fr)}
  .hero-card{justify-self:start}
  .catch{grid-template-columns:minmax(0, 1fr)}
  .catch-fig{max-width:700px}
  .wl-card{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:1000px){
  .cs-teaser{grid-template-columns:minmax(0, 1fr)}
  .cs-teaser-fig{max-width:520px}
  .cs-stats{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .limits-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .notes3{grid-template-columns:minmax(0, 1fr)}
  .price-notes{grid-template-columns:minmax(0, 1fr)}
}
@media (max-width:900px){
  .wl-card.wl-band{grid-template-columns:minmax(0, 1fr); gap:18px}
  .feat-more{padding:0}
  .duo,.tri,.priv,.plans,.tiers{grid-template-columns:minmax(0, 1fr)}
  .priv-left{padding:0}
  .layer-art{height:150px}
  .ext-card{flex-direction:column; align-items:flex-start}
  .ext-art{width:150px; height:124px; border-radius:24px}
  .ext-art svg{width:116px}
  .ext-cta{align-items:flex-start}
  .rel > div{grid-template-columns:minmax(0, 1fr); gap:12px}
  .rel .d{margin-top:6px; margin-left:10px}
  .rel .v{display:inline-block}
}
@media (max-width:640px){
  .wl-row-home{flex-wrap:wrap}
  .wl-row-home .wl-input,.wl-band .wl-submit{flex:1 1 100%}
}
@media (max-width:720px){
  .cmp-wrap{padding:4px 10px 10px}
  .cmp th,.cmp td{padding:12px 6px}
  .cmp .cmp-get{display:none}
  .cmp-get-m{display:block; margin-top:6px; font-size:14px; line-height:1.45; color:var(--body)}
  .cmp-h-feat{width:auto}
  .cmp thead .cmp-plan{width:66px}
  .cmp thead .cmp-plan.paid{width:84px}
  .cmp-plan{font-size:14px}
  .cmp-sub{font-size:11px}
  .cmp-ic{display:none}
  .cmp tbody th .ftag{margin-left:0; font-size:12px}
  .cmp-c{font-size:13px; line-height:1.3}
  .cmp-foot{padding:0}
}
/* Phones and tablets up to 860 px: the tabs sit behind the menu button. Six tabs plus Early
   access do not fit one row below about 820 px. */
@media (max-width:860px){
  .head-in{display:grid; grid-template-columns:minmax(0, 1fr) auto auto; column-gap:10px; row-gap:0}
  .brand{grid-column:1; grid-row:1}
  .nav-cta{grid-column:2; grid-row:1; min-height:44px; padding:0 18px; font-size:16px}
  /* the tabs sit behind the menu button (site.js toggles .nav-open); Home is the logo */
  .nav-toggle{display:inline-grid; grid-column:3; grid-row:1}
  .nav{display:none; grid-column:1 / -1; grid-row:2; margin:10px 0 0; flex-direction:column; align-items:stretch; gap:0; border-top:1px solid var(--line)}
  .site-head.nav-open .nav{display:flex}
  .nav > *{min-height:50px; border-bottom:1px solid var(--line)}
  .nav a[href="/"]{display:none}
  .nav a,.nav .nav-off{font-size:16px}
}
@media (max-width:720px){
  .tl-row{grid-template-columns:30px minmax(0, 1fr); grid-template-areas:"rail time" "rail body"; column-gap:12px}
  .tl-time{text-align:left; display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 12px}
  .tl-clock{font-size:1.75rem}
  .tl-when{justify-content:flex-start; margin-top:0}
  .tl-row:first-child .tl-rail::before{top:30px}
  .tl-row:last-child .tl-rail::before{height:16px}
  .tl-dot{top:12px}
  .tl-row.key .tl-dot{top:9px}
  .tl-body,.tl-row.key .tl-body{padding:6px 0 36px}
  .limits-grid{grid-template-columns:minmax(0, 1fr)}
  .rows li{font-size:17px}
  .cs-fig .v-wide{display:none}
  .cs-fig .v-compact{display:block}
  .cs-stats{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width:560px){
  :root{--gutter:16px}
  body{font-size:17px}
  .brand .mark{width:34px; height:34px}
  .brand-word{font-size:27px}
  .browser-bar{height:40px; padding:0 14px}
  .browser-body{flex-direction:column; gap:16px; padding:16px}
  .feed{flex-basis:auto}
  .warn-col{padding-top:0}
  .hc-body{gap:16px}
  .ring{width:132px; height:132px}
  .clock{font-size:20px}
  .hc-btn{font-size:15px}
  .mini-warn{gap:10px; padding-right:14px}
  .mw-text{font-size:14px}
  .wl-cards{grid-template-columns:minmax(0, 1fr)}
  .catch-steps li{gap:14px}
  .num{width:40px; height:40px; font-size:19px}
  .steps li{grid-template-columns:40px minmax(0, 1fr); column-gap:14px}
  .steps li::before{width:40px; height:40px; font-size:19px}
  .steps strong{margin-top:6px}
  .price-notes,.price-more{padding:0}
  .consent-in{padding:18px}
  .consent-btns{flex:1 1 100%}
  .consent-btn{flex:1}
}
@media (max-width:420px){
  .nav{gap:0 13px; flex-wrap:wrap}
  .nav a,.nav .nav-off{font-size:15px}
}
@media (max-width:380px){
  .hc-btns{grid-template-columns:minmax(0, 1fr)}
}

/* Phones (operator, 2026-09-25): the homepage ends at the waitlist band, so "Join the waitlist" is
   the last thing before the footer. Everything after it stays in the page for wider screens. */
/* The phone homepage (operator, 2026-09-26) is the hero graphic and nothing else: the "sleep on it"
   section and everything after it in <main> is hidden, and so is the extension link. The footer stays
   for the Privacy/Terms/Support links. */
@media (max-width:720px){
  main > .hero, main > .hero ~ *{display:none}
  .lx-actions .text-link{display:none}
  .lx-hero{padding-bottom:clamp(36px, 9vw, 56px)}
}

/* Very narrow phones (320-380 px): logo, Early access and the menu button share one row. */
@media (max-width:380px){
  .head-in{column-gap:8px}
  .brand{gap:8px}
  .brand .mark{width:30px; height:30px}
  .brand-word{font-size:23px}
  .nav-cta{padding:0 12px; font-size:15px}
  .nav-toggle{width:42px}
}

/* ================================================================= accounts (2026-09-26)
   The header's "Log in" / "Account" item, which the accounts block in site.js adds to the
   end of the main menu only while accounts are live, and the /account page (account.html,
   assets/account.js). Going live: site/ACCOUNTS-LAUNCH.md. */
.nav .nav-acct{font-size:15px; color:var(--body); white-space:nowrap}
/* Just above the phone menu the row is full: with the extra item, the gaps give a little. */
@media (min-width:861px) and (max-width:980px){
  .head-in:has(.nav-acct),.nav:has(.nav-acct){gap:14px}
}
.nav .nav-acct:hover{color:var(--gold-ink)}
.nav .nav-acct[aria-current="page"]{color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:3px; text-underline-offset:9px}

.acct{max-width:760px; display:flex; flex-direction:column; gap:clamp(16px, 2vw, 24px)}
.acct-in{display:flex; flex-direction:column; gap:clamp(16px, 2vw, 24px)}
.acct-card{display:flex; flex-direction:column; align-items:flex-start; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:clamp(24px, 3vw, 36px); padding:clamp(22px, 3.4vw, 40px)}
.acct-card > *,.acct-form{align-self:stretch}
.acct-card > .btn-dark,.acct-card > .text-link{align-self:flex-start}
.acct-form{display:flex; flex-direction:column; gap:10px}
.acct [tabindex="-1"]:focus{outline:none}
.acct-h{font-size:clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); line-height:1.15; letter-spacing:-.01em; overflow-wrap:anywhere}
.acct-h2{font-size:clamp(1.3rem, 1.15rem + .55vw, 1.75rem); line-height:1.22}
.acct-p{color:var(--body); max-width:60ch}
.acct-note{font-size:15px; line-height:1.55; color:var(--muted)}
.acct-msg{font-size:16px; font-weight:700; line-height:1.5; color:var(--ink)}
.acct-msg:empty{position:absolute} /* out of the layout, still a live region */
.acct-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.acct-btn-strong{background:var(--btn); border-color:var(--btn); color:var(--btn-ink)}
.acct-btn-strong:hover{background:var(--btn-hover); border-color:var(--btn-hover)}
.acct-btn:disabled{opacity:.6; cursor:progress}
.acct-form .wl-label{margin-bottom:0}
.acct-form .wl-input{min-height:48px}

.acct-who{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px}
.acct-email{margin-top:4px; color:var(--body); overflow-wrap:anywhere}
.acct-facts{margin:0; display:flex; flex-wrap:wrap; gap:10px 48px}
.acct-facts dt{font-size:14px; font-weight:700; line-height:1.3; color:var(--muted)}
.acct-facts dd{margin:2px 0 0; font-size:17px; font-weight:700; line-height:1.35; color:var(--ink)}

.acct-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.acct-list:empty{display:none}
.acct-row{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 16px; padding:14px 0; border-bottom:1px solid var(--line)}
.acct-row-info{flex:1 1 160px; min-width:0}
.acct-row-title{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-weight:700; line-height:1.4; color:var(--ink)}
.acct-row-meta{margin-top:2px; font-size:15px; line-height:1.5; color:var(--muted)}
.acct-unlink{flex:1 1 100%; padding-top:4px}
.acct-unlink .acct-actions{margin-top:4px}

@media (max-width:860px){
  .nav .nav-acct{font-size:16px; color:var(--ink)}
}

/* What is free and what you pay for (operator 2026-09-28): under the hero's note, on first view.
   A short line (.fp-link) joins the Free box to the paid lock box, with a small gap at each end
   (operator 2026-09-28: the diagonals went). */
.fp-tiers{display:grid; grid-template-columns:auto clamp(44px, 6vw, 88px) auto; justify-content:center; align-items:stretch; margin:clamp(18px, 2vw, 28px) auto 0; animation:lx-rise .6s cubic-bezier(.2,1.16,.34,1) .95s both}
.fp-tier{position:relative; display:flex; align-items:center; gap:clamp(16px, 2.4vw, 34px); padding:24px clamp(22px, 2.8vw, 38px) 20px; border-radius:18px}
.fp-free{border:2px solid var(--ink)}
.fp-lock{border:2px solid var(--gold); background:var(--gold-tint)}
.fp-tag{position:absolute; top:-14px; left:18px; padding:2px 13px; border-radius:99px; font-size:16px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; line-height:20px; background:var(--sand); color:var(--ink); border:2px solid var(--ink)}
.fp-lock .fp-tag{background:var(--gold); border-color:var(--gold); color:var(--ink)}
.fp-item{display:flex; align-items:center; gap:10px; font-weight:700; font-size:clamp(1.28rem, 1.1rem + .5vw, 1.6rem); color:var(--ink); white-space:nowrap}
.fp-ic{width:40px; height:40px; flex:none; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.fp-lock .fp-ic{stroke:var(--gold-ink)}
/* Green dot after "24 hour Lock" on the home page tiers (operator 2026-10-01): the Lock is on. */
.fp-dot{flex:none; width:.5em; height:.5em; border-radius:50%; background:#3E9B5C}
.fp-link{width:100%; height:100%; overflow:visible}
.fp-link path{fill:none; stroke:var(--ink); stroke-width:2; vector-effect:non-scaling-stroke}
@media (max-width:760px){
  /* on phones the five pictures stack; the Free/Paid row sits right under them, before the buttons (operator 2026-09-29) */
  .lx-hero > .wrap{display:flex; flex-direction:column}
  .lx-hero .lx-copy{order:-2}
  .lx-hero .fp-tiers{order:0; margin:26px auto 22px}
  .lx-hero .lx-actions, .lx-hero .lx-note{order:1}
  .fp-tiers{grid-template-columns:minmax(0, 1fr); justify-items:center; max-width:440px; width:100%}
  .fp-free{flex-direction:column; align-items:flex-start; gap:12px; width:100%}
  .fp-lock{width:100%}
  .fp-link{width:2px; height:16px; margin:6px 0; background:var(--ink)}
  .fp-link path{display:none}
}
@media (prefers-reduced-motion:reduce){ .fp-tiers{animation:none} }
/* Screen monitoring jumps to the Trigger detection demo (operator 2026-09-28). */
a.fp-link-item{text-decoration:underline; text-decoration-color:var(--gold-line); text-decoration-thickness:2px; text-underline-offset:5px}
a.fp-link-item:hover, a.fp-link-item:focus-visible{color:var(--gold-ink); text-decoration-color:var(--gold)}
a.fp-link-item:hover .fp-ic{stroke:var(--gold-ink)}
#trigger-detection{scroll-margin-top:calc(0px - clamp(28px, 1.2rem + 2vw, 56px))} /* How It Works lands with the heading just under the top (operator 09-30) */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
/* Website guarding (operator 2026-09-28): three plain cards under Trigger detection. */
.wg-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(14px, 2vw, 24px); margin-top:clamp(20px, 2.6vw, 34px)}
.wg-card{background:var(--panel); border:1px solid var(--line); border-radius:clamp(20px, 2vw, 28px); padding:clamp(20px, 2.2vw, 30px)}
.wg-card h3{font-size:clamp(1.2rem, 1.05rem + .5vw, 1.5rem); line-height:1.2; margin:0 0 10px}
.wg-card p{margin:0; color:var(--body)}
.wg-note{margin-top:18px; color:var(--muted); font-size:15px}
#website-guarding{scroll-margin-top:24px}
#sleep-on-it{scroll-margin-top:24px}
@media (max-width:860px){ .wg-grid{grid-template-columns:minmax(0, 1fr)} }

/* Trust strip under the hero (operator 2026-09-28): a thin band of plain facts, then Trigger
   detection a little higher than a normal section. */
.trust-strip{display:flex; flex-wrap:wrap; justify-content:center; gap:10px clamp(14px, 2vw, 30px); width:calc(100% - 2 * var(--gutter)); max-width:1200px; margin:clamp(6px, 1vw, 14px) auto 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14.5px; line-height:1.4; color:var(--body)}
.ts-item{display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.ts-ic{width:18px; height:18px; flex:none; fill:none; stroke:var(--gold-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ts-win{width:16px; height:16px; fill:var(--gold-ink); stroke:none}
#trigger-detection.section{padding-top:clamp(28px, 1.2rem + 2vw, 56px)}
/* Half the space between the demo's last caption and Website guarding (operator 2026-09-28). */
#trigger-detection.sd{padding-bottom:0}
#website-guarding.section{padding-top:calc(var(--sec) * .25)}
/* The strip sits close under the hero's note. */
main > section.lx-hero{padding-bottom:0}
main > section.lx-hero > .wrap:not(.prose){padding-bottom:clamp(6px, 1vw, 14px)}
@media (max-width:640px){
  .trust-strip{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px; font-size:14px; padding:12px 2px}
  .ts-item{white-space:normal; align-items:flex-start}
  .ts-ic{margin-top:1px}
}

/* Case study "Time back" counter (operator 2026-09-28): days : hours : minutes in ViceFree gold. */
.tb{margin-top:clamp(18px, 2.2vw, 26px); background:var(--gold-tint); border:1px solid var(--gold-line); border-radius:clamp(22px, 2.6vw, 32px); padding:clamp(22px, 3.4vw, 44px) clamp(18px, 3vw, 40px); text-align:center}
.tb-clock{display:flex; justify-content:center; align-items:flex-start; gap:clamp(6px, 1.4vw, 18px); font-variant-numeric:tabular-nums}
.tb-unit{display:flex; flex-direction:column; align-items:center; min-width:2.2ch}
.tb-unit b{font-family:var(--display); font-weight:500; font-size:clamp(2.3rem, 1.1rem + 5.4vw, 6.2rem); line-height:1; color:var(--gold-ink); letter-spacing:-.02em}
.tb-unit i{font-style:normal; margin-top:8px; font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tb-sep{font-family:var(--display); font-size:clamp(1.9rem, 1rem + 4.4vw, 5.3rem); line-height:1; color:var(--gold); padding-top:.04em}
.tb-text{margin-top:18px; font-size:clamp(1.05rem, 1rem + .3vw, 1.25rem); color:var(--ink); font-weight:600}
.tb-note{margin-top:8px; font-size:14px; line-height:1.5; color:var(--muted)}

/* Pricing: the two cards share their rows (subgrid), so the paired features sit at the same height
   and a line joins them across the gap, with a small gap at each end (operator 2026-09-28). */
.tiers{--tp:clamp(26px, 3.4vw, 48px); --tg:clamp(16px, 2.4vw, 32px); column-gap:var(--tg); grid-template-rows:repeat(7, auto); row-gap:0}
.tiers > .tier{grid-row:span 7; display:grid; grid-template-rows:subgrid; row-gap:18px; padding:var(--tp)}
.tier ul.tier-first li{border-bottom:1px solid var(--line)}
.tier.lock ul.tier-first li{border-color:var(--gold-line)}
.tier-pair{position:relative; border:2px solid var(--ink); border-radius:14px; padding:10px 16px; font-size:17px; font-weight:700; line-height:1.4; color:var(--ink); background:var(--sand)}
.tier.lock .tier-pair{border-color:var(--gold); background:var(--panel)}
.tier:not(.lock) .tier-pair::after{content:""; position:absolute; top:50%; left:calc(100% + 2px + 10px); width:calc(2 * var(--tp) + var(--tg) + 2px - 20px); border-top:2px solid var(--ink); transform:translateY(-1px)}
@media (max-width:900px){
  .tiers{grid-template-rows:none}
  .tiers > .tier{grid-row:auto; display:flex; flex-direction:column}
  .tier:not(.lock) .tier-pair::after{display:none}
}

/* Emphasis underline in body text (operator 2026-09-29, your-privacy). Ink, not gold, so it never reads as a link. */
u.em-u{text-decoration:underline; text-decoration-color:currentColor; text-decoration-thickness:2px; text-underline-offset:3px}

/* Your Privacy: half the gap above "What leaves your computer" (operator 2026-09-29). */
#what-leaves.section{padding-top:calc(var(--sec) * .25)}

/* Keep a lone last word off its own line (operator 2026-09-29, your-privacy 'never leave your PC.'). The HTML also glues the last three words with no-break spaces for browsers without text-wrap:pretty. */
.no-orphan{text-wrap:pretty}

/* ================================================================= launch pricing: Lock is free for now (2026-10-26) */
.tier-price-free{display:flex; flex-direction:column; align-items:flex-end; gap:6px; line-height:1}
.tier-price-free .free-now{font-weight:600; letter-spacing:-.01em; color:var(--gold-ink)}
.tier-price-free .free-mark{color:var(--gold-ink); text-decoration:none; font-size:.7em; vertical-align:top; margin-left:2px}
.tier-price-free .free-mark:hover{color:var(--ink)}
.tier-price-free .was{font-size:.5em; font-weight:500; color:var(--muted)}
.tier-price-free .was s{text-decoration-line:line-through; text-decoration-thickness:2px; text-decoration-color:var(--red)}
.tier-price-free .was .per{font-size:15px; color:var(--muted)}
.free-note{margin-top:clamp(18px, 2vw, 26px); max-width:62ch; font-size:16px; line-height:1.55; color:var(--body)}
.free-note strong{color:var(--ink)}
@media (max-width:900px){ .tier-price-free{align-items:flex-start} }