/* ════════════════════════════════════════════════════════════════
   STRIDE · Direction A — "Editorial Grotesque"
   Swiss grid · oversized display type · mono index labels · hairlines.
   No glows, no grain blobs, no gradient slop. Honey is one precise accent.
   ════════════════════════════════════════════════════════════════ */
:root{
  --edge:#E4D8BF;          /* hairline */
  --edge-soft:#EFE6D2;
  --paper:var(--cream-75);
  --ink:var(--bark-400);
  --ink-2:var(--bark-200);
  --ink-3:var(--grey-400);
  --acc:var(--honey-400);
  --max:1280px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
.disp{font-family:var(--font-display); letter-spacing:-.022em; line-height:1.0;}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
a{color:inherit; text-decoration:none;}
/* .wrap + --max are defined once in stride-nav.css (shared across all pages). */

/* ── full-bleed ruled grid backdrop (12 columns, faint) ── */
.gridlines{position:fixed; inset:0; z-index:0; pointer-events:none; display:flex; justify-content:center;}
.gridlines .inner{width:100%; max-width:var(--max); margin:0 40px; display:grid; grid-template-columns:repeat(12,1fr);}
.gridlines i{border-left:1px solid var(--edge); opacity:.5;}
.gridlines i:last-child{border-right:1px solid var(--edge); opacity:.5;}
@media (max-width:880px){.gridlines{display:none;}}
.stage{position:relative; z-index:1;}

/* ── mono kicker ── */
.kick{font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);}
.kick .n{color:var(--acc);}

/* ── hero ── */
.hero{padding:16px 0 clamp(48px,7vh,84px);}
.hero-top{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--edge); padding-bottom:18px;}
.hero-badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);}
.hero-badge .live{width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 24%,transparent);}
.hero h1{font-family:var(--font-display); font-weight:800; letter-spacing:-.04em; line-height:.92; margin:34px 0 0; font-size:clamp(64px,12.6vw,184px); color:var(--ink);}
.hero h1 .accent{color:var(--acc); font-style:italic;}
.lineMask{display:block; overflow:hidden;}
.lineMask > span{display:block;}
@media (prefers-reduced-motion:no-preference){
  .lineMask > span{transform:translateY(106%); transition:transform .9s var(--e-out);}
}

.hero-foot{display:grid; grid-template-columns:1.3fr 1fr; gap:48px; margin-top:46px; padding-top:30px; border-top:1px solid var(--edge); align-items:start;}
.hero-lede{font-family:var(--font-display); font-weight:600; font-size:clamp(21px,2.3vw,27px); line-height:1.24; letter-spacing:-.018em; max-width:18ch;}
.hero-col p{font-size:16.5px; line-height:1.6; color:var(--ink-2); margin:0 0 22px; max-width:42ch;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px;}
.hero-trust{display:flex; align-items:center; gap:8px; margin-top:18px; font-size:13px; color:var(--ink-3);}
.hero-trust i{color:var(--brand-secondary); font-size:15px;}

/* ── hero data panel (editorial chart, replaces glowy phone) ── */
.rhythm{margin:64px 0 0; border:1px solid var(--edge); background:var(--bg-surface);}
.rhythm-head{display:flex; justify-content:space-between; align-items:center; padding:16px 22px; border-bottom:1px solid var(--edge);}
.rhythm-head .t{font-family:var(--font-display); font-weight:700; font-size:16px;}
.rhythm-head .meta{font-family:var(--font-mono); font-size:11.5px; color:var(--ink-3); letter-spacing:.04em; text-transform:uppercase;}
.rhythm-body{display:grid; grid-template-columns:1fr 230px; gap:0;}
.rhythm-chart{position:relative; padding:26px 22px 18px; border-right:1px solid var(--edge);}
.rhythm-chart svg{width:100%; height:170px; display:block; overflow:visible;}
.rhythm-axis{display:flex; justify-content:space-between; margin-top:10px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.04em;}
.peakband{position:absolute; top:26px; bottom:38px; border-left:1px dashed var(--acc); border-right:1px dashed var(--acc); background:color-mix(in srgb,var(--acc) 8%,transparent);}
.peaktag{position:absolute; top:-2px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--honey-700); background:var(--honey-50); border:1px solid var(--honey-200); padding:2px 7px; white-space:nowrap;}
.hw-line{stroke:var(--acc); stroke-width:2.5; fill:none; stroke-linecap:round; stroke-linejoin:round;}
@media (prefers-reduced-motion:no-preference){
  .hw-line{stroke-dasharray:620; stroke-dashoffset:620; transition:stroke-dashoffset 1.6s var(--e-out) .3s;}
  .rhythm.in .hw-line{stroke-dashoffset:0;}
  .hw-dot{opacity:0; transition:opacity .4s 1.5s;}
  .rhythm.in .hw-dot{opacity:1;}
}
.rhythm-side{padding:22px; display:flex; flex-direction:column; gap:16px;}
.stat{}
.stat .v{font-family:var(--font-display); font-weight:800; font-size:34px; letter-spacing:-.03em; line-height:1;}
.stat .v small{font-size:16px; color:var(--ink-3); font-weight:600;}
.stat .l{font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:6px;}
.stat.acc .v{color:var(--acc);}
.stat-rule{height:1px; background:var(--edge);}

/* ── hero 2-col + product mockup ── */
.hero-grid2{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,64px); align-items:center; margin-top:34px;}
.hero-grid2 h1{font-family:var(--font-display); font-weight:800; letter-spacing:-.038em; line-height:.94; margin:6px 0 0; font-size:clamp(48px,6.2vw,104px); color:var(--ink);}
.hero-grid2 h1 .accent{color:var(--acc); font-style:italic;}
.hero-copy .hero-lede{font-family:var(--font-display); font-weight:600; font-size:clamp(20px,2vw,25px); line-height:1.26; letter-spacing:-.018em; margin:26px 0 0; max-width:24ch; color:var(--ink);}
.hero-copy .hero-body{font-size:clamp(16px,1.4vw,17.5px); line-height:1.6; color:var(--ink-2); margin:18px 0 0; max-width:46ch;}
.hero-copy .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0;}
.hero-copy .hero-trust{display:flex; align-items:center; gap:8px; margin:18px 0 0; font-size:13px; color:var(--ink-3);}
.hero-copy .hero-trust i{color:var(--brand-secondary); font-size:15px;}
.hero-fig{display:flex; justify-content:center;}
.fig-stack{position:relative; width:296px; max-width:84vw; transform:translateX(26px);}
.fig-stack .phone.front{position:relative; z-index:3;}
.fig-stack .phone.mid{position:absolute; top:-22px; left:-96px; z-index:2; transform:rotate(-7deg) scale(.9); transform-origin:bottom right; filter:saturate(.98);}
.fig-stack .phone.back{position:absolute; top:-48px; left:-168px; z-index:1; transform:rotate(-13deg) scale(.8); transform-origin:bottom right; filter:saturate(.95);}
.fig-stack .phone.mid::after,.fig-stack .phone.back::after{content:""; position:absolute; inset:9px; border-radius:38px; background:color-mix(in srgb,var(--cream-75) 22%, transparent); z-index:9; pointer-events:none;}
.fig-stack .phone.back::after{background:color-mix(in srgb,var(--cream-75) 40%, transparent);}
@media (max-width:1180px){.fig-stack{transform:translateX(14px);} .fig-stack .phone.mid{left:-72px; top:-18px; transform:rotate(-6deg) scale(.87);} .fig-stack .phone.back{left:-128px; top:-38px; transform:rotate(-11deg) scale(.78);}}
@media (max-width:820px){.fig-stack{transform:none;}}
@media (max-width:620px){.fig-stack .phone.back{display:none;}}
@media (max-width:520px){.fig-stack .phone.mid{display:none;}}
.phone{position:relative; width:296px; max-width:84vw; aspect-ratio:296/606; background:linear-gradient(160deg,#2A2218,#15100A); border-radius:46px; padding:9px; box-shadow:0 3px 3px rgba(58,47,35,.16), 0 44px 80px -34px rgba(58,47,35,.5);}
.phone .island{position:absolute; top:12px; left:50%; transform:translateX(-50%); width:80px; height:22px; background:#0a0703; border-radius:12px; z-index:8;}
.phone .pscr{position:relative; width:100%; height:100%; background:var(--bg-surface); border-radius:38px; overflow:hidden;}
.hp-sb{display:flex; align-items:center; justify-content:space-between; padding:14px 22px 0; font-size:12.5px; font-weight:600; color:var(--ink);}
.hp-sb .ic{display:flex; gap:5px;}
.hp-pad{padding:8px 16px;}
.hp-top{display:flex; align-items:flex-start; justify-content:space-between; margin-top:6px;}
.hp-date{font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
.hp-h{font-family:var(--font-display); font-weight:800; font-size:23px; color:var(--ink); margin-top:2px;}
.hp-av{width:32px; height:32px; border-radius:50%; background:var(--olive-100); border:1px solid var(--edge); color:var(--olive-600); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:13px;}
.hp-ring{display:flex; align-items:center; gap:14px; margin:16px 0 4px;}
.hp-rwrap{position:relative; width:84px; height:84px; flex-shrink:0;}
.hp-rwrap .v{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:25px; color:var(--ink);}
.hp-chip{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-full); background:#EAF5EF; color:var(--mint-600); font-size:11px; font-weight:700;}
.hp-note{font-size:12px; line-height:1.4; color:var(--ink-2); margin:8px 0 0;}
.hp-lbl{font-family:var(--font-mono); font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:16px 0 8px;}
.hp-ev{display:flex; flex-direction:column; gap:7px;}
.hp-evb{display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-radius:11px; border-left:3px solid; font-family:var(--font-display); font-weight:700; font-size:13.5px;}
.hp-evb .tm{font-family:var(--font-mono); font-size:10px; font-weight:500; opacity:.7;}
.hp-evb.h{background:var(--ev-honey-bg); border-color:var(--ev-honey-mid); color:var(--ev-honey-tx);}
.hp-evb.s{background:var(--ev-sky-bg); border-color:var(--ev-sky-mid); color:var(--ev-sky-tx);}
.hp-coach{margin-top:11px; display:flex; align-items:center; gap:11px; padding:12px; border-radius:13px; background:var(--olive-600); color:var(--cream-50);}
.hp-coach .ci{width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.16); color:var(--honey-300); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
.hp-coach .m{font-size:9px; letter-spacing:.1em; text-transform:uppercase; opacity:.78;}
.hp-coach .tt{font-family:var(--font-display); font-weight:700; font-size:13.5px;}
.hp-evb.o{background:var(--ev-olive-bg); border-color:var(--ev-olive-mid); color:var(--ev-olive-tx);}
/* back-phone chart + stats */
.hp-chart{position:relative; margin-top:6px;}
.hp-chart svg{width:100%; height:96px; display:block; overflow:visible;}
.hp-band{position:absolute; top:0; bottom:18px; left:50%; width:24%; transform:translateX(-30%); border-left:1px dashed var(--acc); border-right:1px dashed var(--acc); background:color-mix(in srgb,var(--acc) 9%,transparent);}
.hp-band span{position:absolute; top:-3px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--honey-700);}
.hp-axis{display:flex; justify-content:space-between; margin-top:6px; font-family:var(--font-mono); font-size:9px; color:var(--ink-3);}
.hp-stats{display:flex; gap:10px; margin-top:16px;}
.hp-stat{flex:1; border:1px solid var(--edge); border-radius:12px; padding:11px 12px;}
.hp-stat .v{font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.02em; color:var(--ink);}
.hp-stat .v small{font-size:11px; color:var(--ink-3); font-weight:600;}
.hp-stat .l{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-top:3px;}
/* insights phone: share, mini-stats, heatmap */
.hp-share{width:32px; height:32px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--edge); display:flex; align-items:center; justify-content:center; color:var(--ink-2); font-size:15px;}
.hp-mstats{display:flex; gap:7px;}
.hp-ms{flex:1; border:1px solid var(--edge); border-radius:11px; padding:9px 9px 8px;}
.hp-ms .v{font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-.02em; color:var(--ink); line-height:1;}
.hp-ms .v small{font-size:10px; color:var(--ink-3); font-weight:600;}
.hp-ms .l{font-family:var(--font-mono); font-size:7.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-top:5px;}
.hp-ms .d{display:inline-flex; align-items:center; gap:2px; font-size:9px; font-weight:700; color:var(--mint-600); margin-top:5px;}
.hm{display:flex; flex-direction:column; gap:4px;}
.hm-row{display:grid; grid-template-columns:16px repeat(7,1fr); gap:4px; align-items:center;}
.hm-row i{aspect-ratio:1; border-radius:4px; background:var(--cream-200);}
.hm-head span{font-family:var(--font-mono); font-size:8px; color:var(--ink-3); text-align:center;}
.hm-row .hh{font-family:var(--font-mono); font-size:8px; color:var(--ink-3); text-align:right; padding-right:1px;}
.hm i.l0{background:var(--cream-200);}
.hm i.l1{background:var(--mint-200);}
.hm i.l2{background:var(--honey-200);}
.hm i.l3{background:var(--coral-400);}
.hm-legend{display:flex; gap:10px; margin-top:10px;}
.hm-legend span{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-size:8px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3);}
.hm-legend i{width:9px; height:9px; border-radius:3px;}
.hm-legend i.l0{background:var(--cream-200);} .hm-legend i.l1{background:var(--mint-200);} .hm-legend i.l2{background:var(--honey-200);} .hm-legend i.l3{background:var(--coral-400);}
/* floating log card */
.fig-log{position:absolute; z-index:4; left:-58px; bottom:74px; width:210px; background:var(--bg-elevated); border:1px solid var(--edge); border-radius:16px; padding:14px; box-shadow:0 22px 44px -20px rgba(58,47,35,.45);}
.fl-head{display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink);}
.fl-m{width:21px; height:21px; border-radius:6px; background:linear-gradient(155deg,#F2C374,#E59A2E 46%,#C7831F); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .fl-m svg{transform:skewX(-7deg);}
.fl-taps{display:flex; gap:8px; margin-top:11px;}
.fl-tap{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:9px 0; border:1px solid var(--edge); border-radius:11px; font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:var(--bg-surface);}
.fl-tap i{font-size:18px;}
.fl-tap.pk{color:var(--coral-600);} .fl-tap.cr{color:var(--olive-600);}
@media (max-width:1120px){.fig-log{left:-30px; bottom:60px;}}
@media (max-width:520px){.fig-log{left:auto; right:-10px; bottom:50px; width:188px;}}
@media (max-width:820px){.hero-grid2{grid-template-columns:1fr; gap:46px; text-align:left;} .hero-fig{order:-1; padding-left:120px;} .hero-grid2 h1{font-size:clamp(56px,13vw,96px);}}
@media (max-width:520px){.hero-fig{padding-left:0;}}

/* ── reveal ── */
.rv.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0; transform:translateY(26px); transition:opacity .8s var(--e-out), transform .8s var(--e-out); transition-delay:var(--d,0s);}
}

/* ── section scaffold ── */
.sec{padding:clamp(80px,11vh,140px) 0;}
.sec-head{display:grid; grid-template-columns:auto 1fr; gap:0 40px; align-items:end; border-bottom:1px solid var(--edge); padding-bottom:26px;}
.sec-head .idx{font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; color:var(--acc);}
.sec-head h2{font-family:var(--font-display); font-weight:700; font-size:clamp(34px,5vw,60px); letter-spacing:-.03em; line-height:1.0; margin:0; grid-column:2;}
.sec-head .lead{grid-column:2; font-size:18px; line-height:1.55; color:var(--ink-2); margin:18px 0 0; max-width:52ch;}

/* ── proof strip ── */
.proof{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--edge); border-bottom:1px solid var(--edge);}
.proof .p{padding:26px 24px; border-left:1px solid var(--edge);}
.proof .p:first-child{border-left:0;}
.proof .p .ic{font-size:22px; color:var(--brand-secondary);}
.proof .p .t{font-family:var(--font-display); font-weight:700; font-size:16px; margin-top:14px;}
.proof .p .s{font-size:13px; color:var(--ink-3); margin-top:4px;}
@media (max-width:760px){.proof{grid-template-columns:1fr 1fr;} .proof .p:nth-child(3){border-left:0;}}

/* ── how / steps editorial list ── */
.steps{margin-top:8px;}
.step{display:grid; grid-template-columns:96px 1fr 360px; gap:40px; align-items:center; padding:40px 0; border-bottom:1px solid var(--edge);}
.step .num{font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5vw,68px); color:var(--ink); line-height:.8; letter-spacing:-.04em;}
.step.in .num{color:var(--acc);}
.step .num{transition:color .6s var(--e-out) .15s;}
.step .txt h3{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,30px); letter-spacing:-.02em; margin:0;}
.step .txt p{font-size:16.5px; line-height:1.55; color:var(--ink-2); margin:12px 0 0; max-width:48ch;}
.step .vis{height:150px; border:1px solid var(--edge); background:var(--bg-surface); display:flex; align-items:center; justify-content:center; overflow:hidden;}
@media (max-width:880px){.step{grid-template-columns:64px 1fr; gap:20px 24px;} .step .vis{grid-column:1/-1; width:100%;}}

/* mini visuals inside steps/features */
.taps{display:flex; gap:10px;}
.tap{width:88px; height:74px; border:1px solid var(--edge); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--bg-elevated);}
.tap .g{font-size:22px;} .tap .l{font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase;}
.tap.pk{color:var(--coral-600);} .tap.cr{color:var(--olive-600);}
.miniwave{width:90%;}
.cal-mini{width:88%; display:flex; flex-direction:column; gap:7px;}
.cal-mini .band{height:24px; border:1px dashed var(--acc); background:color-mix(in srgb,var(--acc) 9%,transparent); display:flex; align-items:center; padding:0 10px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--honey-700);}
.cal-mini .e{border-left:3px solid; padding:7px 10px; font-family:var(--font-display); font-weight:600; font-size:12.5px;}
.e.honey{background:var(--ev-honey-bg); border-color:var(--ev-honey-mid); color:var(--ev-honey-tx);}
.e.olive{background:var(--ev-olive-bg); border-color:var(--ev-olive-mid); color:var(--ev-olive-tx);}

/* ── features (editorial rows w/ big borders) ── */
.feat{display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--edge); background:var(--bg-surface); margin-top:30px;}
.feat .ft{padding:clamp(34px,4vw,56px);}
.feat .fv{padding:clamp(34px,4vw,56px); border-left:1px solid var(--edge); display:flex; align-items:center; justify-content:center; min-height:340px; position:relative; background:var(--paper);}
.feat.flip .ft{order:2; border-left:1px solid var(--edge);}
.feat.flip .fv{order:1; border-left:0;}
.feat .feyebrow{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-secondary); display:flex; align-items:center; gap:9px;}
.feat .feyebrow i{color:var(--acc); font-size:16px;}
.feat h3{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3vw,38px); letter-spacing:-.025em; line-height:1.08; margin:18px 0 0;}
.feat .ft p{font-size:16.5px; line-height:1.6; color:var(--ink-2); margin:16px 0 0; max-width:42ch;}
.feat .fnote{display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding-top:18px; border-top:1px solid var(--edge); font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--ink-3); text-transform:uppercase;}
.feat .fnote i{color:var(--brand-secondary); font-size:15px;}
@media (max-width:880px){.feat{grid-template-columns:1fr;} .feat .fv,.feat.flip .ft{border-left:0; border-top:1px solid var(--edge);} .feat.flip .ft{order:0;} .feat.flip .fv{order:1;}}

/* feature visual blocks */
.card{background:var(--bg-elevated); border:1px solid var(--edge); width:260px; padding:20px;}
.card .ctop{display:flex; align-items:center; gap:8px; margin-bottom:14px;}
.card .cm{width:22px; height:22px; border-radius:6px; background:linear-gradient(155deg,#F2C374,#E59A2E 46%,#C7831F); display:flex; align-items:center; justify-content:center;}
.card .cm svg{transform:skewX(-7deg);} .card .cmt{font-family:var(--font-display); font-weight:700; font-size:13px;}
.card .cq{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-3);}
.card .cprompt{font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:14px;}
.card .cfoot{display:flex; align-items:center; gap:6px; justify-content:center; margin-top:14px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3);}
.chat{width:290px; display:flex; flex-direction:column; gap:11px;}
.bub{max-width:88%; padding:13px 15px; font-size:14px; line-height:1.45; border:1px solid var(--edge);}
.bub.co{align-self:flex-start; background:var(--bg-elevated);}
.bub.me{align-self:flex-end; background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:500;}
.bub .who{display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-secondary); margin-bottom:6px;}
.bub .who .ci{width:16px; height:16px; border-radius:50%; background:var(--olive-500); color:var(--honey-300); display:flex; align-items:center; justify-content:center; font-size:10px;}
.locks{width:268px; display:flex; flex-direction:column; gap:9px;}
.lock{display:flex; align-items:center; gap:11px; border:1px solid var(--edge); background:var(--bg-elevated); padding:13px; font-size:13px; font-weight:600; color:var(--ink-2);}
.lock i{color:var(--brand-secondary); font-size:17px;} .lock .ck{margin-left:auto; color:var(--success); font-size:17px;}

/* ── compare ── */
.cmp{display:grid; grid-template-columns:1fr 1fr; margin-top:30px; border:1px solid var(--edge);}
.cmp .col{padding:clamp(28px,3.5vw,44px);}
.cmp .col.a{border-right:1px solid var(--edge);}
.cmp .col.b{background:var(--bark-500); color:var(--cream-100);}
.cmp .col h4{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 22px; display:flex; align-items:center; gap:9px;}
.cmp .col.a h4{color:var(--ink-3);} .cmp .col.b h4{color:var(--honey-300);}
.cmp ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:15px;}
.cmp li{display:flex; gap:11px; font-size:16px; line-height:1.45;}
.cmp .col.a li{color:var(--ink-3);} .cmp .col.a li .x{color:var(--ink-3); opacity:.7;}
.cmp .col.a li .t{text-decoration:line-through; text-decoration-color:color-mix(in srgb,var(--ink-3) 50%,transparent);}
.cmp .col.b li .c{color:var(--honey-300);}
@media (max-width:760px){.cmp{grid-template-columns:1fr;} .cmp .col.a{border-right:0; border-bottom:1px solid var(--edge);}}

/* ── CTA ── */
.cta{border-top:2px solid var(--ink); margin-top:30px; padding:clamp(64px,9vw,120px) 0; text-align:center;}
.cta h2{font-family:var(--font-display); font-weight:800; font-size:clamp(40px,7vw,100px); letter-spacing:-.04em; line-height:.94; margin:0;}
.cta h2 .accent{color:var(--acc); font-style:italic;}
.cta p{font-size:18px; line-height:1.55; color:var(--ink-2); margin:24px auto 0; max-width:50ch;}
.cta .hero-cta{justify-content:center; margin-top:32px;}

/* ── footer ── */
.foot{border-top:1px solid var(--edge); padding:60px 0 36px;}
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.foot .brand{margin-bottom:14px;}
.foot-tag{font-size:14px; line-height:1.55; color:var(--ink-3); max-width:30ch;}
.foot-col h5{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px;}
.foot-col a{display:block; font-size:14.5px; color:var(--ink-2); padding:6px 0; transition:color .2s;}
.foot-col a:hover{color:var(--acc);}
.foot-bar{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:48px; padding-top:24px; border-top:1px solid var(--edge); font-family:var(--font-mono); font-size:12px; color:var(--ink-3); letter-spacing:.03em;}
.foot-bar .made i{color:var(--coral-400);}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}


/* ── language switcher (footer) ── */
.lang-switch{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--edge); border-radius:var(--r-full); padding:3px; font-family:var(--font-mono);}
.lang-switch a{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:5px 11px; border-radius:var(--r-full); transition:background .2s,color .2s;}
.lang-switch a:hover{color:var(--ink);}
.lang-switch a.on{background:var(--ink); color:var(--paper);}