/* Hunt Board styles.
   Direction: premium tech product (think Linear, Vercel, Raycast). Near-black canvas,
   one orange accent, thin hairline borders, compact type in Geist, numbers in Geist Mono.
   Dark is the default; light mode via data-theme="light" on <html>.
   Rule: nothing scrolls sideways. Everything stacks or wraps. */
:root{
  color-scheme: dark;
  --bg:#08080a;
  --surface:#0f0f12;
  --surface-2:#141418;
  --surface-3:#1c1c21;
  --line:#1f1f25;
  --line-strong:#2b2b33;
  --ink:#ededef;
  --strong:#ffffff;
  --soft:#b4b4bd;
  --muted:#8a8a95;
  --faint:#5d5d68;
  --accent:#ff6b1a;
  --accent-hi:#ff8a45;
  --on-accent:#0b0704;
  --link:#ff8a45;
  --accent-ink:#ffb48a;
  --accent-soft:rgba(255,107,26,.10);
  --accent-line:rgba(255,107,26,.36);
  --grad:linear-gradient(135deg, #ff6b1a 0%, #ff9b45 100%);
  --glow:rgba(255,107,26,.10);
  --glass:rgba(8,8,10,.82);
  --scrim:rgba(0,0,0,.62);
  --shadow:rgba(0,0,0,.6);
  --pop:0 24px 60px -20px rgba(0,0,0,.75), 0 0 0 1px var(--line-strong);
  --hl:inset 0 1px 0 rgba(255,255,255,.03);

  --s-found:#8a8a95; --s-sent:#a78bfa; --s-replied:#f43f5e; --s-talking:#38bdf8;
  --s-call:#facc15; --s-won:#22c55e; --s-lost:#55555f;
  --late:#f43f5e; --today:#facc15; --ok:#22c55e;

  --f-body:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-head:var(--f-body);
  --f-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r:12px; --r-sm:8px;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#fafafa;
  --surface:#ffffff;
  --surface-2:#f6f6f7;
  --surface-3:#ededf0;
  --line:#e8e8ec;
  --line-strong:#d8d8de;
  --ink:#1a1a1f;
  --strong:#0a0a0c;
  --soft:#3f3f47;
  --muted:#6b6b76;
  --faint:#a0a0aa;
  --accent:#f25f0f;
  --accent-hi:#ff7a2e;
  --on-accent:#0b0704;
  --link:#c2410c;
  --accent-ink:#9a3412;
  --accent-soft:rgba(242,95,15,.08);
  --accent-line:rgba(242,95,15,.32);
  --grad:linear-gradient(135deg, #f25f0f 0%, #ff8f3a 100%);
  --glow:rgba(242,95,15,.07);
  --glass:rgba(250,250,250,.86);
  --scrim:rgba(10,10,14,.32);
  --shadow:rgba(20,20,30,.16);
  --pop:0 24px 60px -24px rgba(20,20,30,.28), 0 0 0 1px var(--line-strong);
  --hl:0 1px 2px rgba(20,20,30,.04);
  --s-found:#71717a; --s-sent:#7c3aed; --s-replied:#e11d48; --s-talking:#0284c7;
  --s-call:#ca8a04; --s-won:#16a34a; --s-lost:#a1a1aa;
  --late:#e11d48; --today:#b45309; --ok:#16a34a;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:14px/1.55 var(--f-body); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"ss01","cv11";
  background-image:radial-gradient(900px 380px at 70% -12%, var(--glow), transparent 65%); background-attachment:fixed; min-height:100vh; overflow-x:hidden}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit; color:inherit}
h1,h2,h3{font-family:var(--f-head); margin:0; font-weight:600; letter-spacing:-.015em; line-height:1.25; text-wrap:balance; color:var(--strong)}
h2{font-size:14.5px} h3{font-size:14px}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.small{font-size:12.5px}
::selection{background:var(--accent); color:var(--on-accent)}
svg.i{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; flex:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
select,input,textarea{font:inherit; color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; height:32px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); border-radius:var(--r-sm); padding:0 12px; font:500 13px var(--f-body); cursor:pointer; white-space:nowrap; text-decoration:none; transition:background .12s, border-color .12s, color .12s}
.btn:hover{background:var(--surface-3); border-color:var(--faint); text-decoration:none}
.btn:disabled{opacity:.45; cursor:default}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:transparent; font-weight:600; box-shadow:0 0 0 1px rgba(255,140,70,.25) inset, 0 6px 18px -8px rgba(255,107,26,.6)}
.btn.primary:hover{background:var(--accent-hi)}
.btn.sm{height:28px; padding:0 10px; font-size:12.5px; border-radius:7px}
.btn.sm svg.i{width:14px; height:14px}
.btn.lg{height:40px; padding:0 18px; font-size:14px; border-radius:9px}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{color:var(--ink); background:var(--surface-2)}
.btn.danger{background:transparent; border-color:color-mix(in srgb, var(--late) 40%, transparent); color:var(--late)}
.btn.danger:hover{background:color-mix(in srgb, var(--late) 10%, transparent)}
.btn.block{width:100%; height:38px; font-size:14px}
.link{border:0; background:none; padding:0; color:var(--muted); font:500 12.5px var(--f-body); cursor:pointer}
.link:hover{color:var(--ink)}
.link-sm{border:0; background:none; padding:0; color:var(--muted); font:500 12.5px var(--f-body); cursor:pointer; text-decoration:none}
.link-sm:hover{color:var(--ink); text-decoration:none}
.link-sm.center{align-self:center}

/* ---------- shell ---------- */
.shell{display:grid; grid-template-columns:232px minmax(0,1fr); min-height:100vh}
.side{position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:1px; padding:14px 10px; background:var(--bg); border-right:1px solid var(--line)}
.side-logo{display:flex; align-items:center; gap:9px; margin:2px 8px 16px}
.brand{display:flex; align-items:center; gap:9px; min-width:0}
.mark{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--grad); flex:none; box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.mark svg{width:15px; height:15px; stroke:var(--on-accent)}
.brand-name{font:600 15px var(--f-head); letter-spacing:-.01em; color:var(--strong); white-space:nowrap}
.tag{font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line-strong); padding:3px 5px; border-radius:5px; flex:none}
.navlink{display:flex; align-items:center; gap:10px; width:100%; height:32px; border:0; background:transparent; color:var(--soft); font:500 13px var(--f-body); padding:0 10px; border-radius:7px; cursor:pointer; text-align:left; position:relative}
.navlink svg.i{color:var(--muted)}
.navlink:hover{background:var(--surface-2); color:var(--strong)}
.navlink.active{background:var(--surface-3); color:var(--strong)}
.navlink.active svg.i{color:var(--accent)}
.navlink .nb{margin-left:auto; font:600 10.5px/1 var(--f-mono); padding:3px 6px; border-radius:6px; background:var(--accent-soft); color:var(--link)}
.navlink .nt{margin-left:auto; font:500 10.5px/1 var(--f-mono); padding:3px 6px; border-radius:6px; background:color-mix(in srgb, var(--today) 14%, transparent); color:var(--today)}
.navlink .nt.over{background:var(--late); color:#fff}
.navlink .lock{margin-left:auto; opacity:.5; width:13px; height:13px}
.navsep{display:flex; align-items:center; gap:7px; font:500 11px var(--f-body); color:var(--faint); margin:14px 10px 4px}
.navsep .sn{font:500 10px/1 var(--f-mono); color:var(--faint)}
.navsep .sn svg{width:11px; height:11px}
.side .spacer{flex:1; min-height:12px}
.me{display:flex; gap:9px; align-items:center; border:1px solid var(--line); border-radius:9px; padding:8px 9px; margin-bottom:4px}
.av{width:28px; height:28px; border-radius:50%; background:var(--grad); color:var(--on-accent); display:grid; place-items:center; font:600 11.5px var(--f-body); flex:none}
.me b{display:block; color:var(--strong); font:500 12.5px var(--f-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.me span{display:block; font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.me > div{min-width:0}

.main{padding:16px 32px 56px; min-width:0; max-width:1180px; width:100%; position:relative}
.deskbar{display:flex; justify-content:flex-end; margin-bottom:22px}
.qbar{display:flex; align-items:center; gap:6px}
.qb-g{display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--surface); border:1px solid var(--line)}
.qb{display:inline-flex; align-items:center; gap:7px; height:28px; border:0; background:transparent; color:var(--soft); font:500 12.5px var(--f-body); padding:0 10px; border-radius:7px; cursor:pointer; position:relative; white-space:nowrap}
.qb:hover{background:var(--surface-3); color:var(--strong)}
.qb.active{background:var(--surface-3); color:var(--strong)}
.qb-g .qb[data-add]{background:var(--accent); color:var(--on-accent); font-weight:600}
.qb-g .qb[data-add]:hover{background:var(--accent-hi)}
.qb.hunting{color:var(--today); font-family:var(--f-mono)}
.qb.over{color:#fff; background:var(--late)}
.qb-bell,.qb-theme{width:36px; height:36px; justify-content:center; padding:0; border-radius:9px; background:var(--surface); border:1px solid var(--line)}
.bell-n{position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--accent); color:var(--on-accent); font:600 9.5px/16px var(--f-mono); text-align:center; box-shadow:0 0 0 2px var(--bg)}
.notif{position:absolute; right:32px; top:60px; z-index:35; width:min(380px, calc(100vw - 32px)); max-height:70vh; overflow-y:auto; background:var(--surface); border-radius:12px; box-shadow:var(--pop)}
.notif-h{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 16px 10px; border-bottom:1px solid var(--line)}
.notif-h b{display:block; font:600 14px var(--f-head); color:var(--strong)}
.notif-h span{font-size:12px; color:var(--muted)}
.nf-g{font:500 11px var(--f-body); color:var(--faint); padding:12px 16px 4px}
.nf{display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; border:0; background:transparent; padding:9px 16px; cursor:pointer}
.nf:hover{background:var(--surface-2)}
.nf .ic{width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:var(--surface-3); color:var(--muted); flex:none}
.nf.hot .ic{background:color-mix(in srgb, var(--late) 14%, transparent); color:var(--late)}
.nf b{display:block; font:500 13px var(--f-body); color:var(--strong)}
.nf small{display:block; color:var(--muted); font-size:12px; line-height:1.45}
.nf.new b::after{content:"New"; margin-left:6px; font:600 9.5px var(--f-mono); padding:2px 5px; border-radius:4px; background:var(--accent-soft); color:var(--link); vertical-align:1px}

.mtop,.bnav{display:none}

/* ---------- page parts ---------- */
.page-h{margin-bottom:20px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px}
.page-h > div{min-width:0}
.page-h h1{font-size:22px; letter-spacing:-.02em; font-weight:600}
.page-h p{margin:4px 0 0; max-width:620px; color:var(--muted); font-size:13.5px}
.eyebrow-g{display:inline-flex; align-items:center; gap:7px; font:500 11px var(--f-mono); letter-spacing:.02em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}
.eyebrow-g::before{content:""; width:6px; height:6px; border-radius:2px; background:var(--accent)}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px; min-width:0; box-shadow:var(--hl)}
.card-h{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 10px; margin-bottom:12px}
.card-h h2{display:flex; align-items:center; gap:8px}
.cnt{font:500 11px/1 var(--f-mono); padding:3px 6px; border-radius:5px; background:var(--surface-3); color:var(--muted)}
.empty{margin:0; color:var(--muted); font-size:13px}
.dash{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:14px; align-items:start}
.col{display:flex; flex-direction:column; gap:14px; min-width:0}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); overflow:hidden; box-shadow:var(--hl)}
.kpi{padding:12px 16px; min-width:0; border-right:1px solid var(--line)}
.kpi:last-child{border-right:0}
.kpi .k{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted)}
.kpi .k svg{display:none}
.kpi .v{font:500 20px/1.2 var(--f-mono); margin-top:4px; letter-spacing:-.02em; color:var(--strong)}
.kpi .s{font-size:11.5px; color:var(--faint); margin-top:2px}
.kpi.hero-k .v{color:var(--accent)}
.coach{display:flex; gap:10px; align-items:flex-start; font-size:13px; padding:11px 14px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--soft); margin-bottom:14px}
.coach b{color:var(--strong); font-weight:500}
.coach svg{color:var(--accent); margin-top:2px}
.banner{display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; padding:12px 14px; border-radius:10px; border:1px solid color-mix(in srgb, var(--late) 32%, transparent); background:color-mix(in srgb, var(--late) 7%, var(--surface)); margin-bottom:14px}
.banner div{flex:1 1 300px; min-width:0; color:var(--soft); font-size:13px}
.banner b{display:block; color:var(--strong); font:600 13.5px var(--f-head); margin-bottom:1px}
.name-ask{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:6px 6px 6px 12px; border:1px solid var(--line-strong); background:var(--surface); border-radius:10px; font-size:13px}
.name-ask input{font-size:13px; height:28px; padding:0 9px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface-2); width:180px; min-width:0}

/* rows */
.rows{display:flex; flex-direction:column}
.row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:9px 8px; border-radius:8px; border-top:1px solid var(--line)}
.rows .row:first-child{border-top-color:transparent}
.row:hover{background:var(--surface-2)}
.row-main{flex:1 1 260px; min-width:0; display:flex; align-items:center; gap:10px; border:0; background:transparent; text-align:left; cursor:pointer; padding:0}
.dot{width:7px; height:7px; border-radius:50%; background:var(--c); flex:none}
.who{display:flex; flex-direction:column; min-width:0; flex:1}
.nm{font:500 13.5px var(--f-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--strong)}
.bz{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.nx{display:flex; flex-direction:column; align-items:flex-end; font-size:12px; gap:3px; text-align:right; flex:none; color:var(--muted)}
.row-act{display:flex; gap:5px; flex-wrap:wrap; align-items:center}
.due{font:500 10.5px/1 var(--f-mono); padding:3px 6px; border-radius:5px; background:var(--surface-3); color:var(--muted); white-space:nowrap}
.due.late{background:color-mix(in srgb, var(--late) 13%, transparent); color:var(--late)}
.due.today{background:color-mix(in srgb, var(--today) 13%, transparent); color:var(--today)}
.showall{align-self:flex-start; margin-top:6px}
.pill{display:inline-flex; align-items:center; gap:5px; font:500 10.5px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.03em; padding:4px 6px; border-radius:5px; background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c); white-space:nowrap}

/* ---------- timers ---------- */
.ring{--p:0; --ring:var(--accent); position:relative; width:92px; height:92px; border-radius:50%; flex:none; background:conic-gradient(var(--ring) calc(var(--p) * 1%), var(--surface-3) 0); display:grid; place-items:center}
.ring-in{position:relative; z-index:1; width:calc(100% - 10px); height:calc(100% - 10px); border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.ring-in b{font:500 18px/1 var(--f-mono); color:var(--strong); letter-spacing:-.02em}
.ring-in small{font:500 10px/1.2 var(--f-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-top:4px}
.tmr.over{border-color:color-mix(in srgb, var(--late) 45%, transparent)}
.tmr.over .ring{--ring:var(--late)}
.tmr.over .ring-in b{color:var(--late)}
.tmr.run .ring{--ring:var(--accent)}
.tmr.run .ring::after{content:""; position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg, transparent 0 300deg, color-mix(in srgb, var(--accent) 55%, transparent) 360deg); -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 6px), #000 calc(50% - 5px)); mask:radial-gradient(circle, transparent 0 calc(50% - 6px), #000 calc(50% - 5px)); animation:sweep 2.6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.hunt-top{display:flex; gap:14px; align-items:center}
.t-msg{margin:0; font-size:13px; color:var(--soft)}
.tmr.over .t-msg{color:var(--late)}
.hunt-ctl{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:12px}
.sel{font-size:12.5px; height:28px; padding:0 8px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface-2)}

/* Hunt mode page */
.huntpg{display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:14px; align-items:start}
.hunt-side{position:sticky; top:16px; display:flex; flex-direction:column; gap:14px; min-width:0}
.bigt{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding:22px 18px}
.bigt .ring{width:min(210px, 62vw); height:min(210px, 62vw)}
.bigt .ring-in{width:calc(100% - 14px); height:calc(100% - 14px)}
.bigt .ring::before{content:""; position:absolute; inset:-8px; border-radius:50%; background:repeating-conic-gradient(var(--line-strong) 0 .8deg, transparent .8deg 6deg); -webkit-mask:radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px)); mask:radial-gradient(circle, transparent 0 calc(50% - 3px), #000 calc(50% - 2px))}
.bigt .ring-in b{font-size:clamp(34px, 9vw, 44px)}
.bigt .ring-in small{font-size:10.5px}
.bigt .t-msg{max-width:34ch; color:var(--muted)}
.bigt .acts{justify-content:center}
.limits{display:flex; flex-wrap:wrap; gap:4px; justify-content:center}
.tstats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.tstats div{padding:9px 10px; text-align:left; border-right:1px solid var(--line)}
.tstats div:last-child{border-right:0}
.tstats b{display:block; font:500 16px/1.2 var(--f-mono); color:var(--strong)}
.tstats span{font-size:11px; color:var(--muted)}
.sound{display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; width:100%; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.warn-line{font-size:12px; color:var(--today); margin:0}

/* floating timer pill */
.fpill{position:fixed; right:max(20px, env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:38; display:flex; align-items:center; gap:9px; border:0; background:var(--surface); color:var(--strong); padding:7px 14px 7px 8px; border-radius:40px; box-shadow:var(--pop); cursor:pointer; font:500 14px var(--f-mono)}
.fpill .pd{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent)}
.fpill .pd svg{width:14px; height:14px}
.fpill small{display:block; font:400 10.5px var(--f-body); color:var(--muted)}
.fpill.over{background:var(--late); color:#fff; animation:pulse 1.2s ease-in-out infinite}
.fpill.over .pd{background:rgba(255,255,255,.2); color:#fff}
.fpill.over small{color:#ffe1e4}
body.on-hunt .fpill{display:none}
@keyframes pulse{50%{transform:scale(1.04)}}

/* time's up screen */
.alarm{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:16px; background:radial-gradient(circle at 50% 40%, rgba(244,63,94,.45), rgba(10,0,4,.92) 70%)}
.alarm-b{width:min(440px,100%); text-align:center; background:var(--surface); border:1px solid var(--late); border-radius:16px; padding:28px 22px; display:flex; flex-direction:column; gap:12px; align-items:center; box-shadow:0 40px 90px -20px rgba(244,63,94,.55)}
.alarm-ic{width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--late); color:#fff; animation:pulse 1s ease-in-out infinite}
.alarm-ic svg{width:32px; height:32px}
.alarm-b h2{font-size:26px; color:var(--strong)}
.alarm-b p{margin:0; color:var(--soft)}
.alarm-b .acts{justify-content:center}

/* meters, minis, book */
.meter{display:flex; flex-direction:column; gap:6px}
.meter + .meter{margin-top:12px}
.meter-l{display:flex; justify-content:space-between; font-size:13px; color:var(--soft)}
.meter-l b{font:500 13px var(--f-mono); color:var(--strong)}
.bar{height:5px; border-radius:5px; background:var(--surface-3); overflow:hidden}
.bar i{display:block; height:100%; background:var(--accent); border-radius:5px}
.mini{display:flex; flex-direction:column; gap:2px}
.mini button{display:flex; justify-content:space-between; gap:10px; border:0; background:transparent; padding:7px 8px; border-radius:7px; cursor:pointer; text-align:left; font-size:13px}
.mini button:hover{background:var(--surface-2)}
.mini button > span:first-child{display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mini .muted{font-family:var(--f-mono); font-size:11.5px}
.mini-r{display:flex; gap:4px; align-items:center}
.mini-r > button:first-child{flex:1; min-width:0}
.bookmini{display:flex; gap:12px; align-items:flex-start}
.bookmini p{margin:3px 0 0; font-size:12.5px; color:var(--muted)}
.cover{width:48px; height:68px; border-radius:4px 7px 7px 4px; flex:none; background:linear-gradient(150deg, #1c1c21, #2a1a10 70%, #ff6b1a 160%); border:1px solid var(--line-strong); display:grid; place-items:center; color:#ffd2b3; font:600 9.5px/1.15 var(--f-body); text-align:center; padding:5px}
.lockline{display:flex; gap:7px; align-items:center; font-size:12.5px; color:var(--muted); margin-top:8px}

/* ---------- pick controls (selection-first) ---------- */
.seg{display:inline-grid; grid-auto-flow:column; gap:2px; padding:3px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line)}
.seg-b{border:0; background:transparent; color:var(--muted); font:500 13px var(--f-body); height:28px; padding:0 12px; border-radius:6px; cursor:pointer}
.seg-b[aria-selected="true"]{background:var(--surface); color:var(--strong); box-shadow:0 0 0 1px var(--line-strong)}
.opts{display:flex; flex-wrap:wrap; gap:5px}
.opt{position:relative; display:inline-flex; cursor:pointer}
.opt input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.opt span{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 10px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface); color:var(--soft); font:500 12.5px/1.3 var(--f-body); transition:border-color .12s, background .12s}
.opt:hover span{border-color:var(--faint); color:var(--strong)}
.opt input:checked + span{background:var(--accent-soft); border-color:var(--accent); color:var(--strong)}
.opt input:checked + span::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent)}
.opt input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.opt span em{font:500 10.5px var(--f-mono); font-style:normal; padding:1px 5px; border-radius:4px; background:var(--surface-3); color:var(--muted)}
.opt.rk .rkn{display:none}
.opt.rk[data-rank] .rkn{display:inline-grid; place-items:center; width:16px; height:16px; border-radius:4px; background:var(--accent); color:var(--on-accent); font:600 10px/1 var(--f-mono); font-style:normal}
.opt.rk input:checked + span::before{display:none}
.msgbox{background:var(--surface-2); border:1px solid var(--line-strong); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:10px}
.msgbox textarea{width:100%; border:0; background:transparent; resize:vertical; min-height:140px; font-size:13.5px; line-height:1.6; padding:0; color:var(--ink)}
.msgbox textarea:focus{outline:none; box-shadow:none}
.msgbar{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.cc{font:500 12px var(--f-mono); color:var(--ok)}
.cc.near{color:var(--today)} .cc.bad{color:var(--late)}

/* step-by-step form */
.pick{display:flex; flex-direction:column; gap:8px}
.psec{border:1px solid var(--line); border-radius:10px; background:var(--surface)}
.psec.open{border-color:var(--line-strong)}
.psec-h{display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:10px 12px; cursor:pointer; text-align:left; border-radius:10px}
.psec-h:hover{background:var(--surface-2)}
.psec-n{width:20px; height:20px; flex:none; border-radius:5px; display:grid; place-items:center; background:var(--surface-3); color:var(--muted); font:500 10.5px var(--f-mono)}
.psec.done .psec-n{background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok); font-size:0}
.psec.done .psec-n::after{content:""; width:11px; height:11px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.psec-t{flex:1; min-width:0; display:flex; align-items:baseline; gap:10px}
.psec-t b{font:500 13.5px var(--f-body); color:var(--strong); flex:none}
.psec-t small{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.psec.open .psec-t small{display:none}
.psec-hint{font-size:11.5px; color:var(--faint); flex:none}
.psec-h .chev{width:15px; height:15px; color:var(--faint); transition:transform .2s}
.psec.open .chev{transform:rotate(180deg)}
.psec-b{display:none; flex-direction:column; gap:10px; padding:2px 12px 12px}
.psec.open .psec-b{display:flex}
.psec-f{display:flex; justify-content:flex-end}
.psec-f .btn svg{width:13px; height:13px}
.psec[data-sec="msg"]{border-color:var(--accent-line)}
.offg{display:flex; flex-direction:column; gap:6px; margin-top:2px}
.offg-h{display:inline-flex; align-items:center; gap:6px; font:500 11px var(--f-body); color:var(--muted)}
.offg-h::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--muted)}
.offg-free::before{background:var(--ok)}
.offg-beta::before{background:var(--today)}
.offg-paid::before{background:var(--accent)}

/* ---------- forms ---------- */
.fld{display:flex; flex-direction:column; gap:5px; min-width:0}
.fld + .fld{margin-top:12px}
.pick .fld + .fld,.two .fld + .fld{margin-top:0}
.fld-l{font:500 12px/1.4 var(--f-body); color:var(--muted)}
.fld input,.fld select,.fld textarea,textarea.tx,.inp{font-size:13.5px; height:34px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--surface-2); width:100%; min-width:0}
.fld textarea,textarea.tx{height:auto; padding:8px 10px; resize:vertical; min-height:64px; line-height:1.5}
input[type=checkbox],input[type=radio]{height:auto}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.fld small,.hint{color:var(--muted); font-size:12px; line-height:1.45}
.fld small.over{color:var(--late)}
.fld-row{display:flex; justify-content:space-between; align-items:center; gap:10px}
.two{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
.checks{list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:5px; font-size:12.5px}
.checks li{display:flex; gap:8px; align-items:center; color:var(--muted)}
.checks li.ok{color:var(--soft)}
.checks li::before{content:""; width:12px; height:12px; border-radius:50%; border:1.5px solid var(--line-strong); flex:none}
.checks li.ok::before{background:var(--ok); border-color:var(--ok); box-shadow:inset 0 0 0 2px var(--surface-2)}
.acts{display:flex; gap:6px; flex-wrap:wrap}
.togg{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); font-size:13px; cursor:pointer}
.togg input{width:16px; height:16px; accent-color:var(--accent)}
.qual{display:flex; flex-direction:column; gap:8px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:8px}
.qual label{display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--soft)}
.qual input{width:15px; height:15px; margin-top:2px; accent-color:var(--accent); flex:none}

/* ---------- prospects ---------- */
.pros{display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px; align-items:start}
.stlist{display:flex; flex-direction:column; gap:1px; padding:6px; position:sticky; top:16px}
.stb{display:flex; align-items:center; gap:9px; width:100%; height:32px; border:0; background:transparent; padding:0 9px; border-radius:7px; cursor:pointer; text-align:left; font:500 13px var(--f-body); color:var(--soft)}
.stb:hover{background:var(--surface-2); color:var(--strong)}
.stb[aria-pressed="true"]{background:var(--surface-3); color:var(--strong)}
.stb .cnt{margin-left:auto}
.st-hint{margin:0 0 10px; font-size:12.5px; color:var(--muted)}
.tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.search{flex:1 1 220px; min-width:0; height:32px; padding:0 11px; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--surface-2); font-size:13px}
.tagline{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.tg{font-size:11px; padding:1px 6px; border-radius:4px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis}

/* ---------- calendar ---------- */
.cal-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.cal-h h2{min-width:160px; font-size:15px}
.icon-btn{border:1px solid var(--line-strong); background:var(--surface-2); width:32px; height:32px; border-radius:var(--r-sm); cursor:pointer; font-size:17px; line-height:1; flex:none; display:grid; place-items:center; color:var(--soft)}
.icon-btn:hover{background:var(--surface-3); color:var(--strong)}
.icon-btn svg{width:15px; height:15px}
.icon-btn.sm-ic{width:28px; height:28px; border-radius:7px; background:transparent; border-color:transparent; color:var(--faint)}
.icon-btn.sm-ic:hover{color:var(--late); background:var(--surface-3)}
.icon-btn.sm-ic svg{width:14px; height:14px}
.cal-note{margin:0 0 12px; font-size:13px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grid7{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.wd{font:500 11px/1 var(--f-body); color:var(--faint); padding:4px 6px}
.cell{min-height:92px; border:1px solid var(--line); background:var(--surface); border-radius:8px; padding:6px; display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer; min-width:0}
.cell:hover{border-color:var(--line-strong); background:var(--surface-2)}
.cell.blank{background:transparent; border-color:transparent; cursor:default}
.cell.is-today{border-color:var(--accent-line)}
.cell.is-sel{background:var(--surface-3); border-color:var(--line-strong)}
.dn{font:500 11.5px/1 var(--f-mono); color:var(--muted)}
.is-today .dn{color:var(--accent)}
.chips{display:flex; flex-direction:column; gap:2px; min-width:0}
.chip{font-size:10.5px; line-height:1.4; padding:1px 5px; border-radius:4px; background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500}
.more{font-size:10.5px; color:var(--muted)}
.count{display:none}
.sync{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.sync-i{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line)}
.sync-i .ic{width:28px; height:28px; border-radius:7px; display:grid; place-items:center; background:var(--surface-3); color:var(--muted); flex:none}
.sync-i b{display:block; font:500 13px var(--f-body); color:var(--strong)}
.sync-i p{margin:2px 0 8px; font-size:12px; color:var(--muted)}
.sync-i.on .ic{background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok)}

/* ---------- reply helper ---------- */
.helper{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px}
.hcard{display:flex; flex-direction:column; gap:8px}
.hcard h2{font-size:14px}
.hcard .when{font-size:12.5px; color:var(--muted); margin:0}
.hcard .do{font-size:12px; padding:7px 10px; border-radius:7px; background:var(--accent-soft); color:var(--accent-ink); margin:0}
.hc-top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.hc-cat{font:500 10.5px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--muted)}
.script-t{white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.6; background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:10px 12px; margin:0; color:var(--soft)}
.rbar{display:flex; flex-direction:column; gap:12px; margin-bottom:14px}
.rcats .opt span{min-height:26px; font-size:12px}
code{font:500 11.5px var(--f-mono); padding:1px 5px; border-radius:4px; background:var(--surface-3); color:var(--soft)}

/* ---------- insights ---------- */
.funnel{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px}
.fstep{background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px}
.fstep b{display:block; font:500 22px var(--f-mono); color:var(--strong)}
.fstep span{font-size:12px; color:var(--muted)}
.fstep em{display:block; font:500 10.5px var(--f-mono); font-style:normal; margin-top:6px; color:var(--ok)}
.fstep em.lowc{color:var(--late)}
.split2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.money{font:500 24px var(--f-mono); color:var(--strong)}
.money small{display:block; font:400 12.5px var(--f-body); color:var(--muted); margin-top:2px}
.gr{display:flex; flex-direction:column; gap:11px}
.gr-i{display:flex; flex-direction:column; gap:5px}
.gr-t{display:flex; justify-content:space-between; gap:10px; font-size:13px}
.gr-t b{font:500 13px var(--f-body); color:var(--strong); min-width:0; overflow-wrap:anywhere}
.gr-t span{flex:none; color:var(--muted); font:400 11.5px var(--f-mono)}
.gr-t em{font-style:normal; color:var(--accent)}

/* ---------- learn ---------- */
.book{display:grid; grid-template-columns:120px minmax(0,1fr); gap:20px; align-items:start}
.book .cover{width:120px; height:168px; font-size:13px; padding:12px; border-radius:6px 10px 10px 6px}
.book h2{font-size:20px}
.lesson{margin:10px 0 0; padding:12px 14px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line)}
.lesson b{font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--accent); display:block; margin-bottom:4px}
.lesson p{margin:0; color:var(--soft); font-size:13.5px}
.shelf{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.shelf div{display:flex; gap:10px; align-items:center; padding:10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line)}
.shelf .cover{width:34px; height:48px; font-size:7px}
.shelf b{display:block; font:500 12.5px var(--f-body); color:var(--strong)}
.shelf span{font-size:11.5px; color:var(--muted)}

/* ---------- settings, guide, help ---------- */
.offers{display:flex; flex-direction:column; gap:8px}
.offer-row{display:grid; grid-template-columns:minmax(0,1.3fr) 110px minmax(0,1.5fr) 32px; gap:6px; align-items:center}
.offer-row input{height:32px; padding:0 9px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:13px; width:100%; min-width:0}
.statement{font:500 14px/1.5 var(--f-body); color:var(--strong); padding:12px 14px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--accent-line)}
.guide,.faq{display:flex; flex-direction:column; gap:8px}
details.gstep,.faq details{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:0 14px}
details.gstep summary,.faq summary{cursor:pointer; list-style:none; padding:12px 0; display:flex; gap:12px; align-items:center; font:500 13.5px var(--f-body); color:var(--strong)}
details.gstep summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.gn{width:22px; height:22px; border-radius:6px; display:grid; place-items:center; background:var(--surface-3); color:var(--muted); font:500 11px var(--f-mono); flex:none}
details.gstep summary span span{display:block; font:400 12px var(--f-body); color:var(--muted)}
details.gstep ol{margin:0 0 14px; padding-left:52px; color:var(--soft); display:flex; flex-direction:column; gap:5px; font-size:13.5px}
.faq p{margin:0 0 14px; color:var(--soft); font-size:13.5px}
.danger-zone{border-color:color-mix(in srgb, var(--late) 30%, transparent)}
.danger-zone h2{color:var(--late)}

/* ---------- drawer ---------- */
.drawer-wrap{position:fixed; inset:0; z-index:40; display:flex; justify-content:flex-end}
.scrim{position:absolute; inset:0; background:var(--scrim); backdrop-filter:blur(2px)}
.drawer{position:relative; width:min(500px,100%); height:100%; background:var(--surface); border-left:1px solid var(--line-strong); overflow-y:auto; overflow-x:hidden; padding:calc(18px + env(safe-area-inset-top,0px)) max(18px, env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) 18px; display:flex; flex-direction:column; gap:14px}
.dr-head{display:flex; gap:10px; align-items:flex-start}
.dr-head > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:5px}
.dr-head h2{font-size:19px}
.dr-head p{margin:0; font-size:13px}
.dr-head .pill{align-self:flex-start}
.dr-tools{display:flex; gap:6px}
.dr-tools .icon-btn:first-child:hover{color:var(--late)}
.dtabs{display:flex; flex-wrap:wrap; gap:2px; border-bottom:1px solid var(--line)}
.dtab{border:0; background:transparent; color:var(--muted); font:500 12.5px var(--f-body); padding:8px 10px; cursor:pointer; border-bottom:1.5px solid transparent; margin-bottom:-1px; white-space:nowrap}
.dtab:hover{color:var(--strong)}
.dtab[aria-selected="true"]{color:var(--strong); border-bottom-color:var(--accent)}
.links{display:flex; gap:6px; flex-wrap:wrap}
.chip-link{display:inline-flex; align-items:center; gap:5px; font:500 12px var(--f-body); color:var(--soft); text-decoration:none; height:26px; padding:0 9px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer}
.chip-link:hover{color:var(--strong); border-color:var(--faint); text-decoration:none}
.chip-link svg{width:13px; height:13px}
.lk{display:inline-flex; align-items:center; gap:1px}
.lk-x{width:22px; height:22px; border:0; border-radius:5px; background:transparent; color:var(--faint); cursor:pointer; display:grid; place-items:center}
.lk-x:hover{color:var(--late); background:var(--surface-3)}
.lk-x svg{width:12px; height:12px}
.linkadd{display:grid; grid-template-columns:130px minmax(0,1fr) auto; gap:6px; margin-top:6px}
.linkadd select,.linkadd input{font-size:13px; height:28px; padding:0 8px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface-2); min-width:0}
.facts{margin:0; display:grid; gap:2px 0}
.facts dt{font:500 11.5px/1.4 var(--f-body); color:var(--faint); margin-top:8px}
.facts dd{margin:0; color:var(--soft); overflow-wrap:anywhere; font-size:13.5px}
.next-box{padding:12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:8px}
.next-line{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between}
.next-line b{font-weight:500!important; font-size:13.5px}
.next-line input,.next-line select{font-size:13px; height:28px; padding:0 8px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface)}
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px}
.step{font-size:11.5px; text-align:center; display:flex; flex-direction:column; gap:6px; align-items:center; color:var(--faint)}
.step i{width:100%; height:3px; border-radius:3px; background:var(--line-strong)}
.step.done i{background:var(--accent)} .step.done{color:var(--muted)}
.step.now i{background:var(--today)} .step.now{color:var(--strong)}
.hist{list-style:none; margin:0; padding:0 0 0 10px; display:flex; flex-direction:column; gap:7px; border-left:1px solid var(--line)}
.hist li{display:flex; gap:10px; font-size:13px; color:var(--soft)}
.hist time{font:500 11px/1.75 var(--f-mono); color:var(--faint); flex:none; width:48px}

/* ---------- modal, toast ---------- */
.modal-wrap{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px}
.modal{position:relative; width:min(620px,100%); max-height:92vh; overflow-y:auto; overflow-x:hidden; background:var(--surface); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--pop)}
.modal h2{font-size:17px}
.form-err{margin:0; color:var(--late); font-size:13px}
.modal-acts{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap}
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; background:var(--strong); color:var(--bg); padding:9px 14px; border-radius:9px; font-size:13px; font-weight:500; z-index:80; max-width:calc(100% - 32px); box-shadow:0 16px 40px -12px var(--shadow)}
.toast button{display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--accent); font:600 13px var(--f-body); cursor:pointer; padding:2px; white-space:nowrap}
.toast button svg{width:14px; height:14px}
.loading{min-height:60vh; display:grid; place-items:center; color:var(--muted)}
.foot-note{margin-top:28px; font-size:12px; color:var(--faint)}
.upg-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:12px 14px; margin-bottom:18px; border-radius:10px; border:1px solid var(--accent-line); background:color-mix(in srgb, var(--accent) 7%, var(--surface))}
.upg-bar > div{flex:1 1 280px; min-width:0; font-size:13px; color:var(--soft)}
.upg-bar b{display:block; color:var(--strong); font:600 13.5px var(--f-body)}
.upg-ic{width:32px; height:32px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent)}
.upg-steps{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; color:var(--soft); font-size:13.5px}
.upg-steps b{color:var(--strong); font-weight:600}

/* ---------- today: 4-step flow ---------- */
.flow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px}
.fl{position:relative; display:flex; flex-direction:column; gap:4px; text-align:left; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); cursor:pointer; min-width:0; box-shadow:var(--hl); transition:border-color .12s, background .12s}
.fl:hover{border-color:var(--line-strong); background:var(--surface-2)}
.fl-top{display:flex; align-items:center; gap:8px}
.fl-n{width:20px; height:20px; border-radius:5px; display:grid; place-items:center; background:var(--surface-3); color:var(--muted); font:500 10.5px var(--f-mono)}
.fl-n svg{width:12px; height:12px}
.fl-t{font:500 12.5px var(--f-body); color:var(--soft)}
.fl b{font:500 18px/1.2 var(--f-mono); color:var(--strong); letter-spacing:-.02em; margin-top:4px}
.fl small{font-size:11.5px; color:var(--muted)}
.fl.done .fl-n{background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok)}
.fl.done b{color:var(--muted)}
.fl.next{border-color:var(--accent-line); background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface))}
.fl.next .fl-n{background:var(--accent); color:var(--on-accent)}
.fl-tag{margin-left:auto; font:500 10px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.04em; padding:3px 5px; border-radius:4px; background:var(--accent-soft); color:var(--link)}

/* ---------- price calculator ---------- */
.mks{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.mk{display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); min-width:0}
.mk-l{font:500 11.5px var(--f-body); color:var(--muted)}
.mk b{font:500 17px/1.3 var(--f-mono); color:var(--strong)}
.mk small{font-size:12px; color:var(--soft)}
.mk .src{margin:6px 0 0; font-size:11.5px; color:var(--muted); line-height:1.5}
.price-card{border-color:var(--accent-line)}
.floor{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:10px 12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); margin-bottom:12px}
.floor span{font:500 11.5px var(--f-body); color:var(--late)}
.floor b{font:500 17px var(--f-mono); color:var(--strong)}
.floor small{color:var(--muted); font-size:12px}
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
.tier{position:relative; display:flex; flex-direction:column; gap:2px; padding:14px 10px 10px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); text-align:center; min-width:0}
.tier span{font:500 11px var(--f-body); color:var(--muted)}
.tier b{font:500 18px/1.2 var(--f-mono); color:var(--strong); overflow-wrap:anywhere}
.tier small{font:400 11px var(--f-mono); color:var(--muted); overflow-wrap:anywhere}
.tier.hot{background:var(--accent-soft); border-color:var(--accent)}
.tier.hot b{color:var(--strong)}
.tier i{position:absolute; top:-8px; left:50%; transform:translateX(-50%); font:500 9.5px/1 var(--f-mono); font-style:normal; text-transform:uppercase; letter-spacing:.03em; padding:3px 6px; border-radius:4px; background:var(--accent); color:var(--on-accent); white-space:nowrap}
.retainer{display:flex; flex-direction:column; gap:2px; margin-top:12px; padding:12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line)}
.retainer span{font:500 11.5px var(--f-body); color:var(--muted)}
.retainer b{font:500 18px var(--f-mono); color:var(--strong)}
.retainer b small{font:400 12px var(--f-body); color:var(--muted)}
.retainer > small{font:400 11.5px var(--f-mono); color:var(--muted)}
.beta-tip{display:flex; gap:9px; align-items:flex-start; margin:12px 0; padding:10px 12px; border-radius:9px; background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; color:var(--soft)}
.beta-tip svg{color:var(--today); flex:none; margin-top:1px}
.beta-tip b{color:var(--strong); font-weight:600}

/* ---------- phone sheet tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:4px}
.tile{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:11px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); text-align:left; cursor:pointer; min-width:0}
.tile.active{border-color:var(--accent-line); background:var(--accent-soft)}
.tile-ic{width:26px; height:26px; border-radius:7px; display:grid; place-items:center; background:var(--surface-3); color:var(--accent); margin-bottom:5px}
.tile b{font:500 13px var(--f-body); color:var(--strong)}
.tile small{font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}

/* ---------- landing + auth ---------- */
.land{max-width:1160px; margin:0 auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)); padding-block:14px 0}
.land-top{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.land-top .acts{align-items:center}
.hero{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,400px); gap:56px; align-items:start; padding-block:56px 64px}
.hero-copy{display:flex; flex-direction:column; gap:18px; min-width:0}
.eyebrow{display:inline-flex; align-self:flex-start; align-items:center; gap:8px; font:500 11.5px/1 var(--f-mono); color:var(--soft); border:1px solid var(--line-strong); background:var(--surface); padding:6px 10px; border-radius:20px}
.eyebrow::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--accent)}
.hero h1{font-size:clamp(38px, 5vw, 64px); line-height:1.02; font-weight:600; letter-spacing:-.045em; max-width:16ch}
.hero h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:0; font-size:16px; line-height:1.6; color:var(--muted); max-width:52ch}
.for-who{display:flex; flex-wrap:wrap; gap:6px}
.for-who span{font:500 12px var(--f-body); padding:4px 10px; border-radius:20px; border:1px solid var(--line); color:var(--muted)}
.perks{list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 22px}
.perks li{display:flex; gap:12px; align-items:flex-start; color:var(--muted); font-size:13.5px}
.perks b{display:block; color:var(--strong); font:500 14px var(--f-body); margin-bottom:2px}
.perk-ic{flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line-strong); background:var(--surface)}
.perk-ic svg{width:15px; height:15px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.preview{margin-top:8px; max-width:520px; border:1px solid var(--line-strong); border-radius:14px; background:var(--surface); padding:14px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; box-shadow:0 40px 80px -40px rgba(255,107,26,.25)}
.preview .ring{width:104px; height:104px; --ring:var(--accent); --p:74}
.pv-r{display:flex; flex-direction:column; gap:8px; min-width:0}
.pv-h{display:flex; justify-content:space-between; align-items:center; font:500 12.5px var(--f-body); color:var(--strong)}
.pv-tag{font:500 10.5px/1 var(--f-mono); color:var(--link); background:var(--accent-soft); padding:3px 6px; border-radius:4px}
.pv-chips{display:flex; flex-wrap:wrap; gap:4px}
.pv-chips i{font-style:normal; font-size:11px; padding:2px 7px; border-radius:5px; border:1px solid var(--line-strong); color:var(--soft)}
.pv-msg{font-size:12px; line-height:1.5; color:var(--soft); background:var(--surface-2); border:1px solid var(--line); border-radius:8px; padding:8px 10px}
.pv-msg b{display:block; font:500 10px var(--f-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--ok); margin-bottom:3px}
.pv-note{grid-column:1 / -1; margin:0; font:500 10px/1 var(--f-mono); text-transform:uppercase; color:var(--faint); text-align:right}
.form-col{position:sticky; top:20px}
.auth-card{background:var(--surface); border:1px solid var(--line-strong); border-radius:14px; padding:22px; display:flex; flex-direction:column; gap:14px; box-shadow:0 40px 90px -40px rgba(255,107,26,.22), var(--hl)}
.auth-card .seg{display:grid; grid-template-columns:1fr 1fr}
.auth-card .fld + .fld{margin-top:0}
.auth-head{display:flex; flex-direction:column; gap:3px}
.auth-head h2{font-size:20px; letter-spacing:-.02em}
.auth-head p{margin:0; font-size:13px}
.auth-why{list-style:none; margin:0; padding:12px; display:flex; flex-direction:column; gap:8px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line)}
.auth-why li{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:var(--muted)}
.auth-why li::before{content:""; flex:none; width:15px; height:15px; margin-top:1px; border-radius:50%; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/10px no-repeat}
.auth-why b{color:var(--strong); font-weight:500}
.pass{position:relative; display:flex}
.pass input{flex:1; padding-right:40px}
.eye{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; border-radius:6px; background:transparent; cursor:pointer; display:grid; place-items:center; color:var(--muted)}
.eye:hover{color:var(--strong); background:var(--surface-3)}
.eye svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.strength{display:flex; align-items:center; gap:4px}
.strength i{flex:1; height:3px; border-radius:3px; background:var(--line-strong)}
.strength span{font:500 10.5px/1 var(--f-mono); color:var(--muted); margin-left:6px; min-width:56px; text-align:right}
.strength[data-s="1"] i:nth-child(1){background:var(--late)}
.strength[data-s="2"] i:nth-child(-n+2){background:var(--today)}
.strength[data-s="3"] i{background:var(--ok)}
.check{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.45}
.check input{width:15px; height:15px; margin-top:2px; accent-color:var(--accent); flex:none}
.fine{margin:0; text-align:center; font-size:12px; color:var(--faint)}
.auth-msg{margin:0; font-size:13px; padding:9px 11px; border-radius:8px; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent-ink)}
.auth-msg.err{background:color-mix(in srgb, var(--late) 9%, transparent); border-color:color-mix(in srgb, var(--late) 35%, transparent); color:var(--late)}
.auth-msg button{border:0; background:none; padding:0; color:inherit; font:inherit; text-decoration:underline; cursor:pointer}
.lp{border-top:1px solid var(--line); padding-block:52px}
.lp-in{display:flex; flex-direction:column; gap:12px}
.lp-h{font-size:clamp(22px, 2.6vw, 30px); letter-spacing:-.03em; margin-bottom:8px}
.steps-3{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
.steps-3 li{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:6px}
.steps-3 .n{width:22px; height:22px; border-radius:6px; display:grid; place-items:center; font:500 11px var(--f-mono); color:var(--accent); background:var(--accent-soft)}
.steps-3 b{font:500 15px var(--f-body); color:var(--strong)}
.steps-3 p{margin:0; color:var(--muted); font-size:13.5px}
.faq2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.obj{border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:16px 18px}
.obj b{font:500 14px var(--f-body); color:var(--strong)}
.obj p{margin:5px 0 0; color:var(--muted); font-size:13.5px}
.lp-cta{margin-top:14px}
.land-foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding-block:20px 30px; font-size:12.5px; color:var(--faint)}
.land-foot a{color:var(--muted)}
.legal{max-width:680px; margin:0 auto; padding:40px max(20px, env(safe-area-inset-right,0px)) 60px max(20px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:10px}
.legal h1{font-size:30px; margin-top:16px}
.legal h2{font-size:16px; margin-top:16px}
.legal p{margin:0; color:var(--soft)}

/* ---------- responsive ---------- */
@media (max-width: 1240px){ .qb-g .qb .ql{display:none} .qb-g .qb[data-add] .ql{display:inline} }
@media (max-width: 1100px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(2){border-right:0}
  .kpi:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .dash,.huntpg{grid-template-columns:minmax(0,1fr)}
  .hunt-side{position:static}
  .funnel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sync,.shelf{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.on-hunt .fpill{display:flex}
}
@media (max-width: 900px){
  .shell{display:block}
  .side,.deskbar{display:none}
  .mtop{display:flex; position:sticky; top:env(safe-area-inset-top,0px); z-index:30; align-items:center; justify-content:space-between; gap:10px; height:52px; padding:0 max(14px, env(safe-area-inset-right,0px)) 0 max(14px, env(safe-area-inset-left,0px)); background:var(--glass); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line)}
  .mtop .qb{width:34px; height:34px; justify-content:center; padding:0; border-radius:8px; background:var(--surface); border:1px solid var(--line)}
  .mtop .qb[data-add]{background:var(--accent); color:var(--on-accent); border-color:transparent}
  .mtop .brand-name{font-size:15px}
  body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:31; background:var(--bg)}
  .main{padding:16px max(14px, env(safe-area-inset-right,0px)) calc(100px + env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px))}
  .notif{position:fixed; right:max(14px, env(safe-area-inset-right,0px)); top:calc(58px + env(safe-area-inset-top,0px))}
  .bnav{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--glass); backdrop-filter:saturate(1.4) blur(14px); border-top:1px solid var(--line); padding:4px max(6px, env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(6px, env(safe-area-inset-left,0px))}
  .bnav button{display:flex; flex-direction:column; align-items:center; gap:2px; border:0; background:transparent; color:var(--faint); font:500 10.5px var(--f-body); padding:6px 2px; border-radius:8px; cursor:pointer; min-width:0}
  .bnav button svg.i{width:19px; height:19px}
  .bnav button.active{color:var(--strong)}
  .bnav button.active svg.i{color:var(--accent)}
  .bnav button.fab{position:relative; padding-top:0; color:var(--muted)}
  .bnav .fab-c{width:50px; height:50px; margin-top:-20px; border-radius:15px; display:grid; place-items:center; align-content:center; background:var(--accent); color:var(--on-accent); box-shadow:0 10px 24px -8px rgba(255,107,26,.6), 0 0 0 4px var(--bg)}
  .bnav .fab-c svg.i{width:21px; height:21px; color:var(--on-accent)}
  .bnav .fab-c b{display:block; font:600 9.5px/1 var(--f-mono); margin-top:2px}
  .bnav .fab-c b:empty{display:none}
  .bnav button.fab.active svg.i{color:var(--on-accent)}
  .bnav button.fab.hunting .fab-c{background:var(--strong); color:var(--bg)}
  .bnav button.fab.hunting .fab-c svg.i{color:var(--bg)}
  .bnav button.fab.over .fab-c{background:var(--late); animation:pulse 1.2s ease-in-out infinite}
  .fpill,body.on-hunt .fpill{display:none}
  .sheet{position:fixed; inset:0; z-index:45; background:var(--scrim); display:flex; align-items:flex-end}
  .sheet-b{width:100%; max-height:82vh; overflow-y:auto; background:var(--surface); border-top:1px solid var(--line-strong); border-radius:16px 16px 0 0; padding:14px max(14px, env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px))}
  .sheet-h{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font:600 15px var(--f-body); color:var(--strong)}
  .sheet .navsep{margin:12px 2px 6px}
  .pros{grid-template-columns:minmax(0,1fr)}
  .stlist{position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr))}
  .stlist .stb:first-child{grid-column:1 / -1}
  .hero{grid-template-columns:minmax(0,1fr); gap:32px; padding-block:32px 44px}
  .form-col{position:static}
  .steps-3,.faq2,.helper,.split2,.perks,.mks{grid-template-columns:minmax(0,1fr)}
  .book{grid-template-columns:minmax(0,1fr)}
  .page-h p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .psec-hint{display:none}
}
@media (min-width: 901px){ .sheet{display:none!important} }
@media (max-width: 600px){
  .page-h{margin-bottom:16px}
  .page-h h1{font-size:20px}
  .card{padding:14px}
  .flow{gap:8px}
  .fl{padding:10px 12px}
  .fl b{font-size:16px}
  .fl-tag{display:none}
  .kpi{padding:10px 12px}
  .kpi .v{font-size:17px}
  .nx{align-items:flex-start; text-align:left; flex-direction:row; gap:8px; flex-wrap:wrap}
  .row-main{flex-wrap:wrap}
  .row-main .who{flex:1 1 calc(100% - 20px)}
  .row-main .nx{margin-left:17px}
  .cell{min-height:48px; padding:5px}
  .chips{display:none}
  .count{display:block; font:500 11px/1 var(--f-mono); color:var(--accent); margin-top:auto}
  .cell.has-late .count{color:var(--late)}
  .grid7{gap:3px}
  .funnel{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .offer-row{grid-template-columns:minmax(0,1fr) 96px 32px}
  .offer-row .inc{grid-column:1 / -1; order:4}
  .two{grid-template-columns:minmax(0,1fr)}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .tier{flex-direction:row; justify-content:space-between; align-items:center; text-align:left; padding:12px}
  .tier i{left:auto; right:10px; transform:none}
  .linkadd{grid-template-columns:minmax(0,1fr) auto}
  .linkadd select{grid-column:1 / -1}
  .tstats b{font-size:14px}
  .psec-t{flex-direction:column; align-items:flex-start; gap:0}
  .psec-t small{max-width:100%}
  .upg-modal .acts .btn{width:100%}
  .auth-card{padding:18px}
  .lead{font-size:15px}
  .modal{padding:16px}
  .preview{grid-template-columns:minmax(0,1fr)}
  .preview .ring{justify-self:center}
  .hunt-top{flex-wrap:wrap}
  .stlist{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }

/* initials inside the avatar (the .me span rule must not hide them) */
.me .av{display:grid; font:600 11.5px var(--f-body); color:var(--on-accent); overflow:visible}
/* in lists, actions stay quiet: soft orange instead of solid */
.row .btn.primary,.mini-r .btn.primary{background:var(--accent-soft); color:var(--link); border-color:var(--accent-line); box-shadow:none; font-weight:500}
.row .btn.primary:hover{background:color-mix(in srgb, var(--accent) 18%, transparent)}

/* ================= calendar: legend, chips, drag, week view ================= */
.legend{display:inline-flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-left:auto; font-size:11.5px; color:var(--muted)}
.legend i{display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--c); margin-right:-6px}
.legend i.hm{width:10px; height:10px; margin-right:-6px}
.bd{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:5px; vertical-align:middle; box-shadow:0 0 0 2px var(--accent-soft)}
.legend .bd{margin:0 -6px 0 0}
.chip{cursor:pointer}
.chip i{font:500 9.5px var(--f-mono); font-style:normal; opacity:.75; margin-right:4px}
.chip[draggable="true"]{cursor:grab}
.chip.k-google{--c:var(--muted)}
.chip.k-block{background:transparent; border:1px dashed var(--accent-line); color:var(--accent-ink)}
.dragging [data-drop]{outline:1px dashed var(--line-strong); outline-offset:-1px}
.dropping{background:var(--accent-soft)!important; outline:1px solid var(--accent)!important; outline-offset:-1px}

.wk{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface)}
.wk-h,.wk-all,.wk-body{display:grid; grid-template-columns:52px repeat(7,minmax(0,1fr))}
.wk-h{border-bottom:1px solid var(--line)}
.wk-d{border:0; background:transparent; padding:8px 4px; display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; color:var(--muted); border-left:1px solid var(--line)}
.wk-d b{font:500 11px var(--f-body)}
.wk-d span{font:500 15px var(--f-mono); color:var(--strong)}
.wk-d.is-today span{color:var(--accent)}
.wk-d:hover{background:var(--surface-2)}
.wk-all{border-bottom:1px solid var(--line); min-height:34px}
.wk-l{font-size:10.5px; color:var(--faint); padding:8px 6px; text-align:right}
.wk-ad{border-left:1px solid var(--line); padding:4px; display:flex; flex-direction:column; gap:2px; min-width:0}
.wk-body{max-height:560px; overflow-y:auto; position:relative}
.wk-hours{display:grid; grid-template-rows:repeat(var(--rows), var(--px))}
.wk-hours span{font:500 10.5px var(--f-mono); color:var(--faint); text-align:right; padding:0 6px; transform:translateY(-6px)}
.wk-hours span:first-child{transform:none}
.wk-col{position:relative; border-left:1px solid var(--line); display:grid; grid-template-rows:repeat(calc(var(--rows) * 2), calc(var(--px) / 2)); min-width:0}
.wk-col.is-today{background:color-mix(in srgb, var(--accent) 3%, transparent)}
.wk-slot{border:0; border-top:1px solid var(--line); background:transparent; cursor:pointer; padding:0}
.wk-slot:nth-child(even){border-top-color:color-mix(in srgb, var(--line) 45%, transparent)}
.wk-slot:hover{background:var(--surface-2)}
.wk-ev{position:absolute; left:2px; right:2px; border-radius:6px; padding:2px 6px; background:color-mix(in srgb, var(--c) 16%, var(--surface)); border-left:2px solid var(--c); overflow:hidden; cursor:pointer; display:flex; flex-wrap:wrap; align-content:flex-start; column-gap:6px; z-index:1; line-height:16px}
.wk-ev b{font:500 11px/16px var(--f-body); min-width:0; color:var(--strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wk-ev span{font:500 10px/16px var(--f-mono); color:var(--muted); white-space:nowrap}
.wk-ev[draggable="true"]{cursor:grab}
.wk-ev.k-block{background:repeating-linear-gradient(135deg, var(--accent-soft) 0 6px, transparent 6px 12px); border-left-color:var(--accent)}
.agenda{display:none; flex-direction:column; gap:14px}
.ag-h{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px}
.ag-h b{font:500 13px var(--f-body); color:var(--strong)}
.ag-d.is-today .ag-h b{color:var(--accent)}
.ag-d .empty{margin:0; padding:6px 0}
.mv{position:relative; display:inline-grid; place-items:center; width:28px; height:26px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--soft); cursor:pointer; overflow:hidden}
.mv svg{width:13px; height:13px; pointer-events:none}
.mv input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.mv:hover{color:var(--strong); border-color:var(--faint)}

/* sync card */
.sync-card{margin-bottom:14px}
.sync-i b .live,.sync-i b .warn{display:inline-block; margin-left:6px; font:500 10.5px var(--f-body); padding:1px 6px; border-radius:4px; vertical-align:1px}
.sync-i b .live{background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok)}
.sync-i b .warn{background:color-mix(in srgb, var(--today) 14%, transparent); color:var(--today)}
.sync-i .acts{display:flex; gap:6px; flex-wrap:wrap}
.mini-togg{display:flex; align-items:center; gap:6px; margin-top:8px; font-size:12px; color:var(--muted); cursor:pointer}
.mini-togg input{accent-color:var(--accent)}
.bookings{margin-bottom:14px; border-color:color-mix(in srgb, var(--s-call) 40%, var(--line))}

/* Today: outreach pill + next block */
.opill{display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); color:var(--soft); font:500 12.5px var(--f-body); cursor:pointer; white-space:nowrap}
.opill svg{width:14px; height:14px; color:var(--accent)}
.opill b{font:600 12.5px var(--f-mono); color:var(--strong)}
.opill span{color:var(--faint); padding-left:7px; border-left:1px solid var(--line-strong)}
.opill:hover{border-color:var(--accent-line)}
.nb-line{display:flex; align-items:center; gap:6px; margin:10px 0 0}
.nb-line svg{width:13px; height:13px; color:var(--accent)}
.nb-line .link-sm{display:inline-flex; align-items:center; gap:5px}
.nb-line .link-sm svg{width:12px; height:12px}

/* ================= scorecard ================= */
.ob{display:flex; gap:18px; align-items:center}
.ob-n{display:flex; flex-direction:column; align-items:flex-start; flex:none}
.ob-n b{font:600 40px/1 var(--f-mono); color:var(--strong); letter-spacing:-.03em}
.ob-n span{font-size:12px; color:var(--muted); margin-top:4px}
.ob-r{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px}
.ob-r .acts{display:flex; gap:6px; flex-wrap:wrap}
.bar.big{height:8px}
.streak{display:flex; align-items:center; gap:12px; margin-top:14px; padding:10px 12px; border-radius:10px; background:var(--accent-soft); border:1px solid var(--accent-line)}
.streak .fire{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; background:var(--grad); color:var(--on-accent); flex:none}
.streak .fire svg{width:16px; height:16px}
.streak b{display:block; font:600 15px var(--f-mono); color:var(--strong)}
.streak span{font-size:12px; color:var(--muted)}
.heat{display:flex; gap:6px; overflow-x:auto}
.heat-d{display:grid; grid-template-rows:repeat(7,14px); gap:3px; font-size:9.5px; color:var(--faint); line-height:14px}
.heat-g{display:grid; grid-template-rows:repeat(7,14px); grid-template-columns:repeat(12,14px); grid-auto-flow:row; gap:3px}
.hm{display:block; width:14px; height:14px; border-radius:3px; background:var(--surface-3)}
.hm.l0{background:var(--surface-3)}
.hm.l1{background:color-mix(in srgb, var(--accent) 22%, var(--surface-3))}
.hm.l2{background:color-mix(in srgb, var(--accent) 45%, var(--surface-3))}
.hm.l3{background:color-mix(in srgb, var(--accent) 70%, var(--surface-3))}
.hm.l4{background:var(--accent)}
.hm.f{background:transparent; border:1px dashed var(--line)}
.hm.now{outline:1.5px solid var(--strong); outline-offset:1px}
.sc-g{display:flex; flex-direction:column; gap:2px; margin-bottom:14px}
.sc-g > .fld-l{margin-bottom:6px}
.sc-r{display:grid; grid-template-columns:10px minmax(0,1fr) auto auto; grid-template-areas:"d l v p" ". b b b"; align-items:center; gap:4px 10px; padding:6px 0; border-bottom:1px solid var(--line)}
.sc-r:last-child{border-bottom:0}
.sc-dot{grid-area:d; width:7px; height:7px; border-radius:50%; background:var(--faint)}
.sc-dot.ok{background:var(--ok)}
.sc-dot.no{background:var(--accent)}
.sc-l{grid-area:l; font-size:13px; color:var(--ink); min-width:0}
.sc-v{grid-area:v; font:600 13px var(--f-mono); color:var(--strong); white-space:nowrap}
.sc-v small{font-weight:500; color:var(--faint)}
.sc-p{grid-area:p; font:500 11px var(--f-mono); color:var(--faint); white-space:nowrap}
.sc-r .bar{grid-area:b; height:3px}
.sc-set summary{cursor:pointer; font-size:12.5px; color:var(--link); list-style:none}
.sc-set summary::-webkit-details-marker{display:none}
.sc-set[open] summary{margin-bottom:10px}
.sc-set .fld{margin-top:10px}
.core{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
.core-i{padding:12px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); display:flex; flex-direction:column; gap:3px; min-width:0}
.core-i b{font:500 13px var(--f-body); color:var(--strong)}
.core-i small{font-size:11.5px; color:var(--muted)}
.core-n{font-size:11.5px; color:var(--muted); margin-top:6px}
.core-n em{font:600 12.5px var(--f-mono); font-style:normal; color:var(--strong)}
.core-i.win{border-color:var(--accent-line); background:var(--accent-soft)}
.bb{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px}
.bb > div{padding:12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); display:flex; flex-direction:column; gap:2px; min-width:0}
.bb span{font-size:11.5px; color:var(--muted)}
.bb b{font:600 18px var(--f-mono); color:var(--strong); letter-spacing:-.02em}
.bb small{font:500 11px var(--f-mono); color:var(--faint)}
.bb > div:nth-child(2){border-color:var(--accent-line); background:var(--accent-soft)}

/* ================= niche finder ================= */
.nfind{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.nf-c{display:flex; flex-direction:column; gap:10px}
.nf-c h2{font-size:15px}
.nf-c > p{margin:0; font-size:13px; color:var(--soft)}
.nf-c.mine{border-color:var(--accent-line)}
.nf-top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.nf-g{font:500 10.5px var(--f-body); text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.nf-m{font:600 13px var(--f-mono); color:var(--ok); letter-spacing:.05em}
.nf-m i{font-style:normal; color:var(--line-strong)}
.nf-row{display:flex; flex-direction:column; gap:4px}
.nf-row small{font-size:12.5px; color:var(--ink)}
.nf-c .acts{display:flex; gap:6px; flex-wrap:wrap; align-items:center}

/* their exact words (voice of customer) */
.voc{display:flex; flex-direction:column; gap:8px}
.voc textarea{min-height:84px}
.voc .acts{display:flex; gap:6px; flex-wrap:wrap}
.voc .opts .opt span{max-width:100%; white-space:normal; text-align:left}

@media (max-width: 700px){
  .wk{display:none}
  .agenda{display:flex}
  .hide-sm{display:none!important}
  .legend{margin-left:0; width:100%}
}
@media (max-width: 600px){
  .ob{flex-direction:column; align-items:stretch; gap:12px}
  .ob-n{flex-direction:row; align-items:baseline; gap:8px}
  .ob-n b{font-size:34px}
  .core{grid-template-columns:minmax(0,1fr)}
  .bb{grid-template-columns:minmax(0,1fr)}
  .bb > div{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 10px}
  .bb span{flex:1 1 100%}
  .sync{grid-template-columns:minmax(0,1fr); gap:6px}
  .sync-card .sync-i{padding:10px; align-items:center}
  .sync-card .sync-i p{display:none}
  .sync-card .sync-i > div{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; flex:1; min-width:0}
  .opill span{display:none}
  .sc-p{display:none}
  .sc-r{grid-template-columns:10px minmax(0,1fr) auto; grid-template-areas:"d l v" ". b b"}
}

/* =====================================================================
   MISSION CONTROL LAYER
   Thin glowing lines, a faint grid, corner brackets on panels, mono labels,
   numbers that tick, a slow scan light. Light mode = blueprint paper.
   ===================================================================== */
:root{
  --grid:rgba(255,255,255,.028); --grid-2:rgba(255,107,26,.05);
  --hud:rgba(255,107,26,.55); --hud-dim:rgba(255,107,26,.22);
  --panel:linear-gradient(180deg, rgba(20,20,24,.92), rgba(13,13,16,.94));
  --scan:rgba(255,107,26,.07);
  --glowtxt:0 0 18px rgba(255,107,26,.35);
}
:root[data-theme="light"]{
  --grid:rgba(20,40,80,.045); --grid-2:rgba(242,95,15,.06);
  --hud:rgba(242,95,15,.7); --hud-dim:rgba(242,95,15,.28);
  --panel:linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,252,253,.96));
  --scan:rgba(242,95,15,.05);
  --glowtxt:none;
}
body{background-color:var(--bg);
  background-image:
    radial-gradient(1000px 420px at 72% -14%, var(--glow), transparent 64%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:auto, 32px 32px, 32px 32px; background-attachment:fixed}
/* slow scan light */
.shell::after{content:""; position:fixed; left:0; right:0; top:-30vh; height:30vh; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, transparent, var(--scan) 75%, rgba(255,107,26,.10) 99%, transparent); animation:scan 11s linear infinite; opacity:.55}
@keyframes scan{0%{transform:translateY(0)} 100%{transform:translateY(160vh)}}

/* panels with corner brackets */
.card{background:var(--panel); border-radius:6px; position:relative; backdrop-filter:blur(6px)}
.card::before{content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:6px;
  background:
    linear-gradient(var(--hud),var(--hud)) top left/12px 1.5px no-repeat,
    linear-gradient(var(--hud),var(--hud)) top left/1.5px 12px no-repeat,
    linear-gradient(var(--hud),var(--hud)) top right/12px 1.5px no-repeat,
    linear-gradient(var(--hud),var(--hud)) top right/1.5px 12px no-repeat,
    linear-gradient(var(--hud-dim),var(--hud-dim)) bottom left/12px 1.5px no-repeat,
    linear-gradient(var(--hud-dim),var(--hud-dim)) bottom left/1.5px 12px no-repeat,
    linear-gradient(var(--hud-dim),var(--hud-dim)) bottom right/12px 1.5px no-repeat,
    linear-gradient(var(--hud-dim),var(--hud-dim)) bottom right/1.5px 12px no-repeat}
.card-h h2,.fold-s h2{font:600 11.5px/1.3 var(--f-mono); text-transform:uppercase; letter-spacing:.07em; color:var(--strong)}
.card-h h2::before,.fold-s h2::before{content:"//"; color:var(--accent); margin-right:2px; font-weight:500}
.kpis{border-radius:6px; background:var(--panel)}
.kpi .k{font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.06em}
.kpi .v{color:var(--strong); text-shadow:var(--glowtxt)}
.page-h h1{font-size:24px; letter-spacing:-.025em}
.eyebrow-g::after{content:""; width:7px; height:12px; background:var(--accent); margin-left:2px; animation:blink 1.1s steps(1) infinite; opacity:.85}
.eyebrow-g::before{border-radius:50%; box-shadow:0 0 8px var(--accent)}
@keyframes blink{50%{opacity:0}}

/* buttons: notched corners on the main action */
.btn{border-radius:6px}
.btn.primary{clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); border-radius:2px; box-shadow:none; background:var(--accent); text-shadow:none}
.btn.primary:hover{background:var(--accent-hi); filter:drop-shadow(0 0 10px var(--hud-dim))}
.opt span{border-radius:5px}
.opt input:checked + span{box-shadow:0 0 0 1px var(--accent) inset, 0 0 14px -4px var(--accent)}

/* sidebar */
.side{background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px)}
.navsep{font:500 10px var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--faint); margin:16px 10px 5px}
.navsep::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line-strong), transparent)}
.navlink{border-radius:4px}
.navlink.active{background:linear-gradient(90deg, var(--accent-soft), transparent 80%)}
.navlink.active::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--accent); box-shadow:0 0 10px var(--accent); border-radius:2px}
.mark{border-radius:5px; box-shadow:0 0 16px -2px var(--hud-dim)}
.qb-g{border-radius:6px; background:var(--panel)}
.qb{border-radius:4px}
.qb-bell,.qb-theme{border-radius:6px; background:var(--panel)}
.sys{display:inline-flex; align-items:center; gap:7px; margin-right:auto; font:500 10.5px var(--f-mono); letter-spacing:.1em; color:var(--faint); text-transform:uppercase}
.sys b{color:var(--soft); font-weight:500; letter-spacing:.04em}
.deskbar{justify-content:space-between; align-items:center}

/* status LEDs */
.led{display:inline-flex; align-items:center; gap:6px; font:500 10.5px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:4px 7px; border-radius:4px; border:1px solid var(--line-strong); white-space:nowrap}
.led::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor}
.led:empty{padding:0; border:0; width:7px; height:7px}
.led:empty::before{width:7px; height:7px}
.led.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, transparent)}
.led.warn{color:var(--today); border-color:color-mix(in srgb, var(--today) 35%, transparent)}
.led.hot{color:var(--accent); border-color:var(--accent-line)}
.led.won{color:var(--ok)}
.led.off{color:var(--faint)}
.led.pulse::before{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25; box-shadow:0 0 0 currentColor}}
span.bar{display:block}
.bar.seg{height:6px; border-radius:1px; background:repeating-linear-gradient(90deg, var(--surface-3) 0 6px, transparent 6px 8px)}
.bar.seg i{border-radius:0; background:repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 8px); box-shadow:0 0 10px -2px var(--accent)}

/* pages slide in */
.pg-in .main > section:not([hidden]) > *{animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
.pg-in .main > section:not([hidden]) > *:nth-child(2){animation-delay:.04s}
.pg-in .main > section:not([hidden]) > *:nth-child(3){animation-delay:.08s}
.pg-in .main > section:not([hidden]) > *:nth-child(4){animation-delay:.12s}
.pg-in .main > section:not([hidden]) > *:nth-child(n+5){animation-delay:.16s}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .shell::after,.eyebrow-g::after{animation:none; display:none} .pg-in .main > section > *{animation:none!important} .led.pulse::before{animation:none} }

/* fold-out card (This week vs your targets) */
.fold > summary{list-style:none; cursor:pointer; display:flex; gap:12px; align-items:flex-start; justify-content:space-between}
.fold > summary::-webkit-details-marker{display:none}
.fold-s p{margin:6px 0 0; font-size:12.5px; line-height:1.55; max-width:62ch}
.fold-i{flex:none; width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line-strong); border-radius:5px; color:var(--muted); transition:transform .2s}
.fold-i svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2}
.fold[open] .fold-i{transform:rotate(180deg); color:var(--accent); border-color:var(--accent-line)}
.fold[open] > summary{margin-bottom:14px}

/* ================= Today's plan ================= */
.plan{margin-bottom:14px}
.plan .card-h h2{gap:8px}
.plan > .bar{margin-bottom:10px}
.plan-l{display:flex; flex-direction:column}
.plan-i{display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding:4px 0}
.plan-i:first-child{border-top:0}
.pchk{position:relative; flex:none; width:20px; height:20px; cursor:pointer}
.pchk input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.pchk span{position:absolute; inset:0; border:1.5px solid var(--line-strong); border-radius:4px; transition:all .15s}
.pchk input:checked + span{background:var(--accent); border-color:var(--accent); box-shadow:0 0 10px -2px var(--accent)}
.pchk input:checked + span::after{content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--on-accent); border-width:0 2px 2px 0; transform:rotate(45deg)}
.pchk input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.plan-b{flex:1; min-width:0; display:flex; align-items:center; gap:10px; border:0; background:transparent; text-align:left; padding:8px 6px; border-radius:5px; cursor:pointer}
.plan-b:hover{background:var(--surface-2)}
.plan-b > span:nth-child(2){flex:1; min-width:0}
.plan-b b{display:block; font:500 13.5px var(--f-body); color:var(--strong)}
.plan-b small{display:block; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.plan-ic{width:28px; height:28px; display:grid; place-items:center; border-radius:5px; background:var(--surface-3); color:var(--accent); flex:none}
.plan-ic svg{width:15px; height:15px}
.plan-b > svg{color:var(--faint)}
.plan-i.done .plan-b b{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--faint)}
.plan-i.done .plan-ic{color:var(--faint)}

/* ================= Money map ================= */
.grid2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:start}
.mm-rates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.mm-rate{padding:12px; border:1px solid var(--line); border-radius:5px; background:var(--surface-2); display:flex; flex-wrap:wrap; align-items:baseline; gap:0 2px; min-width:0}
.mm-rate span{flex:1 1 100%; font-size:12px; color:var(--muted); line-height:1.35; min-height:32px}
.mm-rate b{font:600 26px/1.1 var(--f-mono); color:var(--strong); text-shadow:var(--glowtxt); margin-top:4px}
.mm-rate em{font:500 14px var(--f-mono); font-style:normal; color:var(--muted)}
.mm-rate small{flex:1 1 100%; font-size:11px; color:var(--faint); margin-top:4px; line-height:1.4}
.mm-path{display:flex; flex-direction:column; gap:6px}
.mm-s{position:relative; display:flex; align-items:baseline; gap:8px; padding:10px 12px; border-radius:4px; overflow:hidden; border:1px solid var(--line)}
.mm-s::before{content:""; position:absolute; left:0; top:0; bottom:0; width:var(--w); background:linear-gradient(90deg, var(--accent-soft), color-mix(in srgb, var(--accent) 22%, transparent)); border-right:1px solid var(--hud); z-index:0}
.mm-s > *{position:relative; z-index:1}
.mm-s b{font:600 20px var(--f-mono); color:var(--strong); min-width:52px}
.mm-s span{font-size:13px; color:var(--ink)}
.mm-s small{margin-left:auto; font:500 11px var(--f-mono); color:var(--muted); text-align:right}
.mm-day{margin-top:14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; padding:16px; border:1px solid var(--accent-line); border-radius:5px; background:var(--accent-soft)}
.mm-day .lbl{flex:1 1 100%; font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-ink)}
.mm-day b{font:600 48px/1 var(--f-mono); color:var(--strong); letter-spacing:-.04em; text-shadow:var(--glowtxt)}
.mm-day > span:not(.lbl){font-size:13px; color:var(--soft); flex:1}
.mm-day .btn{flex:1 1 100%; margin-top:8px}
.mm-month{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.mm-month > div{display:flex; flex-direction:column; gap:3px}
.mm-month span{font-size:12px; color:var(--muted)}
.mm-month b{font:600 22px var(--f-mono); color:var(--strong)}
.mm-month small{font-size:11.5px; color:var(--faint); margin-bottom:6px}
.mm-lev{display:grid; gap:10px}
.mm-lev > div{padding:12px; border:1px solid var(--line); border-radius:5px; background:var(--surface-2)}
.mm-lev span{display:flex; align-items:center; gap:7px; font:600 11px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink)}
.mm-lev span svg{width:14px; height:14px}
.mm-lev p{margin:6px 0 0; font-size:13px; color:var(--soft)}
.mm-lev b{color:var(--strong); font-family:var(--f-mono)}

/* ================= AI X-ray ================= */
.xr-in textarea,#xrMsg{width:100%; min-height:150px; resize:vertical; padding:12px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font:13px/1.55 var(--f-body)}
#xrMsg{min-height:96px}
.xr-img{margin:10px 0}
.xr-img img{max-height:200px; border-radius:5px; border:1px solid var(--line-strong); display:block}
.xr-img{position:relative}
.xr-img .icon-btn{position:absolute; top:6px; left:6px; background:var(--surface)}
.drop{display:flex; align-items:center; gap:12px; padding:14px; border:1px dashed var(--line-strong); border-radius:5px; cursor:pointer; color:var(--muted)}
.drop:hover{border-color:var(--accent); color:var(--ink)}
.drop b{display:block; color:var(--strong); font-weight:500; font-size:13px}
.drop small{font-size:12px}
.spin{width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scanbox{position:relative; height:160px; border:1px solid var(--line); border-radius:5px; overflow:hidden; margin-bottom:12px;
  background:linear-gradient(var(--grid-2) 1px, transparent 1px) 0 0/16px 16px, linear-gradient(90deg, var(--grid-2) 1px, transparent 1px) 0 0/16px 16px}
.scanbox i{position:absolute; left:0; right:0; height:2px; background:var(--accent); box-shadow:0 0 18px 4px var(--hud-dim); animation:sweep 1.4s ease-in-out infinite alternate}
.scanbox.idle i{animation-duration:3.5s; opacity:.5}
@keyframes sweep{from{top:6%} to{top:94%}}
.xr-top{display:flex; gap:16px; align-items:flex-start}
.xr-top h2{font-size:16px; text-transform:none; letter-spacing:-.01em; font-family:var(--f-body)}
.xr-top p{margin:3px 0 8px; font-size:13px}
.gauge{--v:0; flex:none; width:88px; height:88px; border-radius:50%; display:grid; place-items:center; align-content:center;
  background:radial-gradient(closest-side, var(--surface) 78%, transparent 80%), conic-gradient(var(--gc) calc(var(--v)*1%), var(--surface-3) 0); box-shadow:0 0 22px -6px var(--gc)}
.gauge b{font:600 26px/1 var(--f-mono); color:var(--strong)}
.gauge small{font:500 10px var(--f-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--muted)}
.xr-sig{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0}
.xr-sig span{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:4px 8px; border-radius:4px; border:1px solid var(--line-strong)}
.xr-sig span svg{width:12px; height:12px}
.xr-sig .g{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 30%, transparent)}
.xr-sig .b{color:var(--late); border-color:color-mix(in srgb, var(--late) 30%, transparent)}
.xr-p{padding:9px 11px; border-left:2px solid var(--accent); background:var(--surface-2); border-radius:0 4px 4px 0; margin-bottom:6px}
.xr-p b{display:flex; gap:8px; font-weight:500; color:var(--strong); font-size:13.5px}
.xr-p b i{font:600 11px var(--f-mono); font-style:normal; color:var(--accent); padding-top:2px}
.xr-p small{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.xr-voc{display:flex; flex-wrap:wrap; gap:6px}
.xr-voc span{font-size:12.5px; padding:5px 9px; border-radius:4px; background:var(--accent-soft); color:var(--ink); border:1px solid var(--accent-line)}
.xr-next{display:flex; gap:8px; align-items:flex-start; font-size:13px; color:var(--soft); padding:10px 12px; border:1px dashed var(--line-strong); border-radius:5px}
.xr-next svg{color:var(--accent); margin-top:2px}
.fld-l .cnt{margin-left:6px}

/* ================= Lead page + Offer rooms ================= */
.warn-card{border-color:var(--accent-line); margin-bottom:14px}
.warn-card p{margin:6px 0 12px}
.slug{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:5px; background:var(--surface-2); overflow:hidden; min-width:0}
.slug span{font:500 11.5px var(--f-mono); color:var(--faint); padding:0 0 0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%}
.slug input{flex:1; min-width:0; border:0; background:transparent; height:36px; padding:0 10px 0 2px; font:500 13px var(--f-mono); color:var(--strong)}
.slug input:focus{outline:none}
.slug:focus-within{border-color:var(--accent)}
.lp-other{margin-top:6px}
.lp-prev{border:1px solid var(--line); border-radius:5px; padding:18px; background:var(--bg)}
.lpv{display:flex; flex-direction:column; gap:6px}
.lpv-by{font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.lpv b{font-size:19px; line-height:1.2; color:var(--strong); letter-spacing:-.02em}
.lpv p{margin:0; font-size:13px; color:var(--soft)}
.lpv ul{margin:4px 0 6px; padding-left:18px; font-size:12.5px; color:var(--soft)}
.lpv-f{height:30px; border:1px solid var(--line-strong); border-radius:5px; font-size:11.5px; color:var(--faint); padding:7px 10px}
.lpv-f.tall{height:auto; min-height:44px}
.lpv-b{margin-top:4px; text-align:center; padding:9px; border-radius:5px; background:var(--accent); color:var(--on-accent); font-weight:600; font-size:13px}
.bz.q{white-space:normal; font-style:italic}
.tips{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--soft)}
.hot-card{border-color:var(--accent-line); margin-bottom:14px}
.of-row .row-act .led{min-width:52px; justify-content:center}
.of-stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:14px}
.of-stats > div{padding:12px; border:1px solid var(--line); border-radius:5px; background:var(--surface-2); min-width:0}
.of-stats b{display:block; font:600 20px var(--f-mono); color:var(--strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.of-stats span{font-size:11.5px; color:var(--muted)}
.tl{display:flex; flex-direction:column; border-left:1px solid var(--line-strong); margin-left:4px}
.tl p{margin:0; position:relative; padding:6px 0 6px 16px; display:flex; flex-direction:column}
.tl b{font-weight:500; font-size:13px; color:var(--ink)}
.tl span{font:500 11px var(--f-mono); color:var(--faint)}
.tl-d{position:absolute; left:-4.5px; top:11px; width:8px; height:8px; border-radius:50%; background:var(--faint)}
.tl-d.open{background:var(--s-talking)} .tl-d.tier{background:var(--accent)} .tl-d.cta{background:var(--s-call)} .tl-d.accept{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.tier-ed.best{border-color:var(--accent-line)}
.inl{display:flex; gap:6px; margin-top:6px}
.inl input,.inl textarea{flex:1; min-width:0}
.inl.col{flex-direction:column; align-items:flex-start}
.inl.col textarea{width:100%}
.script-t{margin:0 0 10px; padding:10px 12px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); font-size:13px; white-space:pre-wrap}

/* ================= Boards: full screen, same tab ================= */
body.focus .side,body.focus .mtop,body.focus .bnav,body.focus .deskbar,body.focus .upg-bar{display:none!important}
body.focus .shell{grid-template-columns:minmax(0,1fr)}
body.focus .main{max-width:none; padding:0 0 40px}
.bfocus-h{position:sticky; top:env(safe-area-inset-top,0px); z-index:20; display:flex; align-items:center; gap:14px; padding:12px max(24px, env(safe-area-inset-right,0px)) 12px max(24px, env(safe-area-inset-left,0px)); background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bfocus-h::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg, transparent, var(--b, var(--accent)), transparent); opacity:.7}
.back{display:inline-flex; align-items:center; gap:4px; height:34px; padding:0 12px 0 8px; border:1px solid var(--line-strong); border-radius:5px; background:var(--panel); color:var(--ink); font:500 13px var(--f-body); cursor:pointer; flex:none}
.back:hover{border-color:var(--accent); color:var(--strong)}
.bfh-t{flex:1; min-width:0}
.bfh-t .eyebrow-g{margin-bottom:2px}
.bfh-t .eyebrow-g::after{display:none}
.bfh-t h1{font-size:19px; letter-spacing:-.02em}
.bdot{display:inline-block; width:8px; height:8px; border-radius:2px; background:var(--b); box-shadow:0 0 8px var(--b)}
.bfh-t .eyebrow-g:has(.bdot)::before{display:none}
.bt{border:0; background:transparent; padding:0; font:inherit; color:inherit; cursor:text; text-align:left; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
.bt:hover{text-decoration:underline dotted var(--faint)}
.bt-in{font:600 19px var(--f-body); letter-spacing:-.02em; background:var(--surface-2); border:1px solid var(--accent); border-radius:5px; padding:2px 8px; width:min(480px,100%); color:var(--strong)}
.bfh-r{display:flex; align-items:center; gap:6px; flex:none}
.bfh-r .icon-btn.on{color:var(--s-call)}
.bsave{display:inline-flex; align-items:center; gap:5px; font:500 11px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint)}
.bsave svg{width:12px; height:12px; color:var(--ok)}
.bsave.busy{color:var(--muted)}
.bsave.busy i{width:6px; height:6px; border-radius:50%; background:var(--today); animation:pulse 1s infinite}
.bsave.err{color:var(--late)} .bsave.err svg{color:var(--late)}
.bwrap{padding:18px max(24px, env(safe-area-inset-right,0px)) 0 max(24px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:14px}
.btpl{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px}
.btpl-i{display:flex; flex-direction:column; gap:3px; text-align:left; padding:12px 14px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); cursor:pointer; border-left:3px solid var(--b); min-width:0}
.btpl-i:hover{border-color:var(--b); box-shadow:0 0 18px -8px var(--b)}
.btpl-i b{font-weight:600; font-size:13.5px; color:var(--strong)}
.btpl-i small{font-size:11.5px; color:var(--muted); line-height:1.4}
.bgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.btile{position:relative; border-radius:6px; overflow:hidden; border:1px solid var(--line-strong); background:var(--panel); min-width:0; transition:transform .15s, box-shadow .15s}
.btile:hover{transform:translateY(-2px); box-shadow:0 14px 30px -18px var(--b)}
.btile-m{display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; border:0; background:transparent; padding:0 14px 14px; cursor:pointer; min-height:120px}
.btile-c{display:block; height:46px; margin:0 -14px 10px; background:linear-gradient(135deg, var(--b), color-mix(in srgb, var(--b) 40%, transparent)), repeating-linear-gradient(90deg, transparent 0 15px, rgba(255,255,255,.08) 15px 16px)}
.btile-m b{font-size:14.5px; color:var(--strong); font-weight:600; padding-right:28px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.btile-m small{font:500 11px var(--f-mono); color:var(--muted)}
.btile-m em{font-style:normal; color:var(--today)} .btile-m em.late{color:var(--late)}
.btile-s{position:absolute; top:10px; right:10px; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:5px; background:rgba(0,0,0,.28); color:#fff; cursor:pointer}
.btile-s.on{color:#facc15}
.btile-s svg{width:14px; height:14px}
.btile-s.on svg{fill:currentColor}
.btools{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.bsearch{display:flex; align-items:center; gap:7px; flex:1 1 220px; min-width:0; max-width:360px; height:32px; padding:0 10px; border:1px solid var(--line-strong); border-radius:5px; background:var(--surface-2); color:var(--muted)}
.bsearch input{flex:1; min-width:0; border:0; background:transparent; height:30px; font-size:13px}
.bsearch input:focus{outline:none}
.bsearch:focus-within{border-color:var(--accent)}
.btn.on{border-color:var(--accent); color:var(--strong)}
.fn{font:600 10px var(--f-mono); background:var(--accent); color:var(--on-accent); padding:1px 5px; border-radius:3px}
.bpanel,.bfilter{display:flex; flex-direction:column; gap:4px}
.sw{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.sw-i{position:relative; width:30px; height:30px; border-radius:5px; border:2px solid transparent; background:var(--s); cursor:pointer; padding:0; display:grid; place-items:center; color:var(--muted)}
.sw-i.sm{width:24px; height:24px}
.sw-i.on{border-color:var(--strong); box-shadow:0 0 0 2px var(--bg) inset}
.sw-i.none{background:var(--surface-3)}
.sw-i.none svg{width:12px; height:12px}
.sw-own{background:conic-gradient(#f87168, #f5cd47, #4bce97, #579dff, #9f8fef, #f87168); overflow:hidden}
.sw-own.sm{background:var(--s)}
.sw-own input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.lab-ed{display:flex; flex-direction:column; gap:6px}
.lab-r{display:flex; align-items:center; gap:8px}
.lab-r input:not([type="color"]){flex:1; min-width:0; height:30px; padding:0 9px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:13px}
.lab-opt span i{width:10px; height:10px; border-radius:2px; background:var(--l)}
.lab-opt input:checked + span{border-color:var(--l); background:color-mix(in srgb, var(--l) 16%, var(--surface)); box-shadow:none}
.lab-opt input:checked + span::before{display:none}
.fold-in{border-top:1px solid var(--line); padding-top:10px; margin-top:8px}
.fold-in summary{cursor:pointer; font:500 12.5px var(--f-body); color:var(--soft)}
.bact{display:flex; flex-direction:column; gap:6px; margin-top:8px; max-height:260px; overflow-y:auto}
.bact p{margin:0; display:flex; flex-direction:column; font-size:12.5px; padding-left:10px; border-left:1px solid var(--line-strong)}
.bact b{font-weight:500; color:var(--ink)}
.bact span{font:500 10.5px var(--f-mono); color:var(--faint)}
.bl-new{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.bl-new input{flex:1 1 220px; min-width:0; height:34px; padding:0 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2)}
.ltabs{display:none}
.blists{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:12px; align-items:start}
.bl{background:color-mix(in srgb, var(--surface) 94%, transparent); border:1px solid var(--line); border-radius:6px; display:flex; flex-direction:column; min-width:0; position:relative}
.bl-h{display:flex; align-items:center; gap:4px; padding:8px 8px 6px; position:relative}
.bl-grip{display:grid; place-items:center; width:20px; height:26px; color:var(--faint); cursor:grab; touch-action:none; flex:none}
.bl-grip:hover{color:var(--accent)}
.bl-t{flex:1; min-width:0; border:1px solid transparent; background:transparent; font:600 11.5px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--strong); height:28px; padding:0 6px; border-radius:4px}
.bl-t:hover{border-color:var(--line-strong)}
.bl-t:focus{outline:none; border-color:var(--accent); background:var(--surface-2); text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:13px}
.bl-n{font:500 10.5px var(--f-mono); color:var(--faint); padding:2px 5px; border:1px solid var(--line); border-radius:3px}
.bmenu{position:absolute; top:40px; right:8px; z-index:15; width:240px; display:flex; flex-direction:column; padding:5px; background:var(--surface); border:1px solid var(--line-strong); border-radius:6px; box-shadow:var(--pop)}
.bmenu button{display:flex; align-items:center; gap:8px; border:0; background:transparent; text-align:left; padding:8px 10px; border-radius:4px; font-size:13px; cursor:pointer; color:var(--ink)}
.bmenu button:hover{background:var(--surface-2)}
.bmenu button.danger{color:var(--late)}
.bmenu svg{width:14px; height:14px; color:var(--muted)}
.bl-cards{display:flex; flex-direction:column; gap:7px; padding:2px 8px 8px; min-height:44px}
.bl-empty{margin:0; padding:12px; text-align:center; font-size:12px; color:var(--faint); border:1px dashed var(--line); border-radius:5px}
.bc{position:relative; display:flex; flex-direction:column; gap:6px; padding:9px 11px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line-strong); cursor:pointer; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; overflow:hidden; transition:border-color .12s, transform .12s}
.bc:hover{border-color:var(--faint)}
.bc:focus-visible{outline:2px solid var(--accent)}
.bc.has-cover{padding-top:0}
.bc-cover{display:block; height:26px; margin:0 -11px 2px}
.bc-labs{display:flex; flex-wrap:wrap; gap:4px}
.bc-labs i{font:600 10px/1 var(--f-body); font-style:normal; padding:4px 7px; border-radius:3px; background:color-mix(in srgb, var(--l) 22%, transparent); color:var(--strong); border-left:3px solid var(--l)}
.bc-t{font-size:13.5px; color:var(--strong); line-height:1.4; word-break:break-word}
.bc-b{display:flex; flex-wrap:wrap; gap:5px}
.bc-b:empty{display:none}
.bdg{display:inline-flex; align-items:center; gap:4px; font:500 10.5px/1 var(--f-mono); color:var(--muted); padding:3px 5px; border-radius:3px; background:var(--surface-3)}
.bdg svg{width:11px; height:11px}
.bdg.ok{color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent)}
.bdg.soon{color:var(--today); background:color-mix(in srgb, var(--today) 12%, transparent)}
.bdg.late{color:#fff; background:var(--late)}
.bdg.pr{color:var(--accent-ink)}
.bl-add{padding:0 8px 8px; display:flex; flex-direction:column; gap:6px}
.bl-add textarea{width:100%; resize:none; padding:9px 11px; border-radius:5px; border:1px solid var(--accent); background:var(--surface-2); font-size:13.5px}
.bl-add .acts{display:flex; gap:6px}
.bl-addb{display:flex; align-items:center; gap:6px; margin:0 8px 8px; padding:8px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:13px; cursor:pointer; text-align:left}
.bl-addb:hover{background:var(--surface-2); color:var(--strong)}
.bc-ph{border:1.5px dashed var(--accent); border-radius:5px; background:var(--accent-soft)}
.bl-ph{border:1.5px dashed var(--accent); border-radius:6px; background:var(--accent-soft); min-height:120px}
.dragsrc{display:none!important}
.dragghost{position:fixed; top:0; left:0; z-index:100; pointer-events:none; box-shadow:0 24px 44px -16px rgba(0,0,0,.6), 0 0 0 1px var(--accent); opacity:.96}
body.bdragging{cursor:grabbing; user-select:none; -webkit-user-select:none}
.bhint{display:flex; gap:7px; align-items:center; margin:4px 0 0}
.bhint svg{color:var(--accent)}
/* card detail */
.bcm{width:min(860px,100%); padding:0 20px 20px; gap:0}
.bcm .dr-head{padding-top:18px; margin-bottom:10px; align-items:flex-start}
.bcd-cover{height:64px; margin:0 -20px}
.bcd-t{width:100%; border:1px solid transparent; background:transparent; resize:none; overflow:hidden; font:600 18px/1.35 var(--f-body); color:var(--strong); padding:4px 6px; margin-left:-6px; border-radius:5px}
.bcd-t:focus{outline:none; border-color:var(--accent); background:var(--surface-2)}
.inline-sel{border:1px solid var(--line-strong); background:var(--surface-2); border-radius:4px; padding:2px 6px; font-size:12.5px}
.arch{font:600 10px var(--f-mono); text-transform:uppercase; color:var(--today); margin-left:6px}
.bcd{display:grid; grid-template-columns:minmax(0,1fr) 220px; gap:20px}
.bcd-main,.bcd-side{display:flex; flex-direction:column; gap:14px; min-width:0}
.bcd .fld textarea{width:100%; padding:10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); resize:vertical}
.bcd .fld select,.bcd .fld input[type="date"]{width:100%; height:34px; padding:0 8px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2)}
.bcd-dates{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.bcd-dates label{display:flex; flex-direction:column; gap:3px}
.bcd-dates small{font-size:11px; color:var(--muted)}
.bcd-dates select{width:100%; height:34px; padding:0 8px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2)}
.check-l{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; cursor:pointer}
.check-l input{accent-color:var(--ok); width:16px; height:16px}
.ckn{font:500 11px var(--f-mono); color:var(--muted); margin-left:6px}
.cklist{display:flex; flex-direction:column; gap:2px; margin:6px 0}
.ck-r{display:flex; align-items:center; gap:8px}
.ck-r input[type="checkbox"]{accent-color:var(--accent); width:16px; height:16px; flex:none}
.ck-t{flex:1; min-width:0; border:1px solid transparent; background:transparent; padding:5px 6px; border-radius:4px; font-size:13px}
.ck-t:focus{outline:none; border-color:var(--line-strong); background:var(--surface-2)}
.ck-r.done .ck-t{text-decoration:line-through; color:var(--muted)}
.inl input{height:32px; padding:0 9px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:13px}
.lk-r{display:flex; align-items:center; gap:6px; justify-content:space-between}
.lk-r a{display:inline-flex; align-items:center; gap:6px; font-size:13px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cm{padding:9px 11px; border-radius:5px; background:var(--surface-2); margin-top:6px}
.cm p{margin:0 0 4px; font-size:13px; white-space:pre-wrap}
.cm span{font:500 10.5px var(--f-mono); color:var(--faint)}
.bcd-acts{display:flex; flex-direction:column; gap:6px}
.bcd-acts .btn{justify-content:flex-start}
.chip.k-card{border-left:2px solid var(--c)}
.chip.done{opacity:.55; text-decoration:line-through}
.wk-ev.k-card{border-left-color:var(--c)}

@media (max-width: 900px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .bcd{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 700px){
  .bfocus-h{padding:10px 16px; gap:10px}
  .bwrap{padding:14px 16px 0}
  .ltabs{display:flex; flex-wrap:wrap; gap:6px}
  .ltab{display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 11px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface); font:500 12.5px var(--f-body); color:var(--soft); cursor:pointer}
  .ltab b{font:500 10.5px var(--f-mono); color:var(--faint)}
  .ltab.on{border-color:var(--accent); color:var(--strong); background:var(--accent-soft)}
  .ltab.drop{border-color:var(--accent); background:var(--accent); color:var(--on-accent); transform:scale(1.06)}
  .ltab.drop b{color:var(--on-accent)}
  .blists{grid-template-columns:minmax(0,1fr)}
  .bl{display:none}
  .bl.tab-on{display:flex}
  .bl-grip{display:none}
  .bsave{display:none}
  .bfh-t h1{font-size:17px}
  .mm-rates{grid-template-columns:minmax(0,1fr)}
  .mm-rate span{min-height:0}
  .mm-month,.of-stats{grid-template-columns:minmax(0,1fr)}
  .bcd-dates{grid-template-columns:1fr 1fr}
  .bcm{padding:0 16px 16px}
  .bcd-cover{margin:0 -16px}
  .xr-top{flex-direction:column}
  .sys{display:none}
}

/* ================= sign-up page: field notes, not a template ================= */
.land{position:relative}
.kicker{display:flex; align-items:center; gap:9px; margin:0; font:500 11px/1.4 var(--f-mono); text-transform:uppercase; letter-spacing:.09em; color:var(--muted)}
.hero h1{font-size:clamp(40px, 5.4vw, 70px); letter-spacing:-.05em; line-height:.98}
.hero h1 em{background:none; color:var(--accent); -webkit-text-fill-color:currentColor; text-shadow:var(--glowtxt)}
.log{position:relative; max-width:560px; border:1px solid var(--line-strong); border-radius:6px; background:var(--panel); overflow:hidden; margin-top:6px}
.log::after{content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px)}
.log-h{display:flex; justify-content:space-between; align-items:center; padding:9px 14px; border-bottom:1px solid var(--line); font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.log-live{display:inline-flex; align-items:center; gap:6px; color:var(--ok)}
.log-live i{width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; animation:pulse 1.6s infinite}
.log-l{list-style:none; margin:0; padding:8px 0}
.log-l li{display:grid; grid-template-columns:48px 108px minmax(0,1fr); gap:10px; align-items:baseline; padding:6px 14px; font-size:13px; opacity:0; animation:logIn .4s ease forwards}
.log-l li:nth-child(1){animation-delay:.3s}.log-l li:nth-child(2){animation-delay:.9s}.log-l li:nth-child(3){animation-delay:1.4s}.log-l li:nth-child(4){animation-delay:2.1s}.log-l li:nth-child(5){animation-delay:2.6s}.log-l li:nth-child(6){animation-delay:3.3s}.log-l li:nth-child(7){animation-delay:4s}
.log-l li:last-child{background:linear-gradient(90deg, color-mix(in srgb, var(--ok) 10%, transparent), transparent)}
@keyframes logIn{from{opacity:0; transform:translateX(-6px)} to{opacity:1; transform:none}}
.log-l time{font:500 11.5px var(--f-mono); color:var(--faint)}
.log-l b{font:600 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--accent-ink)}
.log-l b.hot{color:var(--accent)} .log-l b.ok{color:var(--ok)}
.log-l span{color:var(--soft); min-width:0}
.auth-card{border-radius:6px; background:var(--panel); box-shadow:0 40px 90px -50px var(--hud)}
p.auth-why{display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:8px; padding:0; background:none; border:0; font:500 11.5px var(--f-mono); color:var(--muted)}
.ledger{border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; background:var(--panel)}
.ld-h,.ld-r{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.ld-h span{padding:10px 18px; font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--faint); border-bottom:1px solid var(--line-strong)}
.ld-h span:last-child{color:var(--accent)}
.ld-r span{padding:14px 18px; font-size:14px; border-top:1px solid var(--line)}
.ld-r span:first-child{color:var(--muted); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--late) 55%, transparent); text-decoration-thickness:1px}
.ld-r span:last-child{color:var(--strong); border-left:1px solid var(--line); background:linear-gradient(90deg, var(--accent-soft), transparent 70%)}
.ld-r:first-of-type span{border-top:0}
.spec-wrap{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; align-items:start}
.note{margin:18px 0 0; padding:18px 20px; border-left:2px solid var(--accent); background:var(--panel); border-radius:0 6px 6px 0}
.note blockquote{margin:0; font-size:15px; line-height:1.65; color:var(--ink)}
.note figcaption{display:flex; align-items:center; gap:10px; margin-top:14px}
.note figcaption b{display:block; color:var(--strong); font-size:13.5px}
.note figcaption span:last-child{font-size:12px; color:var(--muted)}
.spec{margin:0; border-top:1px solid var(--line-strong)}
.spec > div{display:grid; grid-template-columns:130px minmax(0,1fr); gap:16px; padding:13px 0; border-bottom:1px solid var(--line)}
.spec dt{font:600 11px/1.6 var(--f-mono); text-transform:uppercase; letter-spacing:.07em; color:var(--accent-ink)}
.spec dd{margin:0; font-size:14px; color:var(--soft)}
.obj{border-radius:6px; background:var(--panel)}
.deskbar .qbar{width:100%}
@media (max-width: 860px){
  .spec-wrap{grid-template-columns:minmax(0,1fr); gap:24px}
}
@media (max-width: 600px){
  .log-l li{grid-template-columns:42px minmax(0,1fr); gap:2px 10px}
  .log-l li span{grid-column:2}
  .ld-h{display:none}
  .ld-r{grid-template-columns:minmax(0,1fr)}
  .ld-r span:last-child{border-left:0; border-top:0; padding-top:0}
  .ld-r span:first-child{padding-bottom:6px}
  .spec > div{grid-template-columns:minmax(0,1fr); gap:3px}
}

.bcd .link-sm{align-self:flex-start; margin-top:6px}
body.focus .foot-note{padding:0 max(24px, env(safe-area-inset-left,0px))}

/* ================= logo ================= */
.logo{display:inline-flex; align-items:center; height:30px}
.logo img{height:100%; width:auto; display:block}
.logo-l{display:none!important}
:root[data-theme="light"] .logo-d{display:none!important}
:root[data-theme="light"] .logo-l{display:block!important}
.side-logo .logo{height:30px}
.land-top .logo{height:34px}
.mtop .logo{height:28px}

/* ================= level picker (sign-up) ================= */
.lvl-pick{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.lvl{position:relative; cursor:pointer}
.lvl input{position:absolute; opacity:0; pointer-events:none}
.lvl span{position:relative; display:flex; flex-direction:column; gap:1px; padding:9px 11px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); transition:border-color .15s, box-shadow .15s, transform .15s; overflow:hidden}
.lvl b{font:600 13px var(--f-body); color:var(--strong)}
.lvl small{font-size:11.5px; color:var(--muted)}
.lvl:hover span{border-color:var(--faint)}
.lvl input:checked + span{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset, 0 0 22px -8px var(--accent)}
.lvl input:checked + span::after{content:""; position:absolute; top:9px; right:9px; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent)}
.lvl input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
#levelWrap .hint{display:block; margin-top:6px; font-size:11.5px}

/* ================= sign-up photo ================= */
.hero-shot{position:relative; margin:4px 0 0; max-width:620px; border-radius:8px; overflow:hidden; border:1px solid var(--line-strong); box-shadow:0 40px 80px -40px var(--hud), 0 0 0 1px rgba(255,107,26,.08); transition:transform .25s ease; transform-style:preserve-3d}
.hero-shot img{display:block; width:100%; height:auto}
.hero-shot::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%); background-size:250% 100%; animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,60%{background-position:120% 0} 100%{background-position:-120% 0}}
.hs-tag{position:absolute; left:12px; bottom:12px; display:inline-flex; align-items:center; gap:7px; padding:5px 9px; border-radius:5px; background:rgba(8,8,10,.72); backdrop-filter:blur(8px); color:#e9e9ee; font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.08em}

/* ================= Today: daily message on the left ================= */
.top2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:14px; align-items:start; margin-bottom:14px}
.top2 .plan{margin-bottom:0}
.daily{display:flex; flex-direction:column; gap:12px}
.daily .card-h{margin-bottom:0}
.dm-top{display:flex; gap:14px; align-items:center}
.dm-day{display:flex; flex-direction:column; align-items:center; justify-content:center; width:64px; height:64px; flex:none; border-radius:6px; border:1px solid var(--accent-line); background:var(--accent-soft)}
.dm-day small{font:500 9.5px var(--f-mono); text-transform:uppercase; letter-spacing:.12em; color:var(--accent-ink)}
.dm-day b{font:600 26px/1 var(--f-mono); color:var(--strong); text-shadow:var(--glowtxt)}
.dm-meta{display:flex; flex-direction:column; gap:3px; min-width:0}
.dm-p{align-self:flex-start; font:600 10px var(--f-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--pc); padding:3px 7px; border-radius:3px; border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); background:color-mix(in srgb, var(--pc) 10%, transparent)}
.dm-e{font-size:12.5px; color:var(--soft)}
.dm-m{font-size:11.5px; color:var(--faint)}
.dm-t{margin:0; font-size:17px; line-height:1.6; color:var(--strong); letter-spacing:-.005em; text-wrap:pretty}
.fx .dm-t[data-reveal]{animation:blurIn .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes blurIn{from{opacity:0; filter:blur(8px); transform:translateY(6px)} to{opacity:1; filter:none; transform:none}}
.dm-acts{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between}
.dm-tick{display:inline-flex; align-items:center; gap:9px; font:500 13px var(--f-body); color:var(--soft); cursor:pointer; position:relative}
.dm-tick input{position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer}
.dm-tick span{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-strong); transition:all .2s; position:relative}
.dm-tick.on{color:var(--ok)}
.dm-tick.on span{background:var(--ok); border-color:var(--ok); box-shadow:0 0 12px -2px var(--ok)}
.dm-tick.on span::after{content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #04110a; border-width:0 2px 2px 0; transform:rotate(45deg)}
.dm-tick input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.dm-nav{display:flex; align-items:center; gap:6px}
.dm-nav .btn svg{width:13px; height:13px}
.dm-ahead{display:flex; gap:6px; align-items:center; margin:0}
.dm-up{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; border-radius:5px; border:1px solid color-mix(in srgb, var(--ok) 40%, transparent); background:color-mix(in srgb, var(--ok) 8%, transparent); font-size:13px; color:var(--ink)}
.dm-up svg{color:var(--ok)} .dm-up span{flex:1; min-width:160px}
.dm-all{display:inline-flex; align-items:center; gap:4px; align-self:flex-start}
.dm-all svg{width:13px; height:13px}
.sk{display:flex; flex-direction:column; gap:8px; padding:6px 0}
.sk i{display:block; height:12px; border-radius:3px; background:linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size:200% 100%; animation:shim 1.2s linear infinite}
.sk i:nth-child(2){width:86%} .sk i:nth-child(3){width:62%}
@keyframes shim{to{background-position:-200% 0}}
/* daily page */
.dm-head{display:flex; gap:18px; align-items:center; margin-bottom:14px}
.dm-hi{flex:1; min-width:0}
.dm-months{display:flex; flex-direction:column; gap:10px}
.dm-mo.now{border-color:var(--accent-line)}
.dm-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.dm-list li{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.dm-list li.today{background:linear-gradient(90deg, var(--accent-soft), transparent 70%); margin:0 -16px; padding:12px 16px; border-top-color:var(--accent-line)}
.dm-list li.ahead p{color:var(--soft)}
.dm-list li.done p{color:var(--muted)}
.dm-c{position:relative; flex:none; width:22px; height:22px; margin-top:2px; cursor:pointer}
.dm-c input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.dm-c span{position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--line-strong); transition:all .15s}
.dm-c input:checked + span{background:var(--ok); border-color:var(--ok)}
.dm-c input:checked + span::after{content:""; position:absolute; left:7px; top:3px; width:5px; height:10px; border:solid #04110a; border-width:0 2px 2px 0; transform:rotate(45deg)}
.dm-c input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.dm-l{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-bottom:3px}
.dm-l b{font:600 11.5px var(--f-mono); color:var(--strong)}
.dm-l i{font:600 9.5px var(--f-mono); font-style:normal; text-transform:uppercase; letter-spacing:.08em; color:var(--pc)}
.dm-l em{font-size:11.5px; font-style:normal; color:var(--muted)}
.dm-l u{text-decoration:none; font:600 9.5px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--on-accent); background:var(--accent); padding:2px 6px; border-radius:3px}
.dm-list p{margin:0; font-size:14px; line-height:1.55; color:var(--ink)}

/* ================= Book shop ================= */
.bcov{position:relative; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; width:92px; aspect-ratio:2/3; max-width:100%; flex:none; padding:8px; border-radius:3px 6px 6px 3px; overflow:hidden; background:linear-gradient(160deg, #1d1d22, #2b1a0f 70%, #ff6b1a 170%); border:1px solid var(--line-strong); box-shadow:0 14px 26px -14px rgba(0,0,0,.7), inset 3px 0 0 rgba(255,255,255,.06)}
.bcov img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.bcov b{font:600 10px/1.2 var(--f-body); color:#ffe2cf} .bcov small{font-size:8.5px; color:#d9b9a3}
.bcov.lg{width:150px}
.bcov.lg b{font-size:14px} .bcov.lg small{font-size:11px}
.bom{display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:start; margin-bottom:14px}
.bom-in{transition:transform .25s ease; transform-style:preserve-3d}
.bom-t h2{font-size:20px; letter-spacing:-.02em; text-transform:none; font-family:var(--f-body)}
.bom-t h2::before{display:none}
.bom-t .muted{margin:4px 0 0}
.bshelf{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px}
.bsh{display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-areas:"c t" "c a"; gap:6px 12px; padding:12px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); min-width:0}
.bsh .bcov{grid-area:c; width:72px}
.bsh-t{grid-area:t; display:flex; flex-direction:column; gap:2px; min-width:0}
.bsh-t b{font-size:13.5px; color:var(--strong)} .bsh-t small{font-size:12px; color:var(--muted)} .bsh-t span{font-size:12px; color:var(--soft)}
.bsh-a{grid-area:a; display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap}
.bsh.off{opacity:.5}
.soon{font-style:italic}
.aff{margin:12px 0 0}
.shop-ed{margin-top:14px}
.shop-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px}
.shop-grid .wide{grid-column:1/-1}
.shop-grid input:not([type="checkbox"]),.shop-grid textarea{width:100%; padding:8px 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:13px}

/* ================= Price calculator ================= */
.prs{list-style:none; margin:0 0 14px; padding:0; display:flex; gap:6px; flex-wrap:wrap}
.prs li{display:flex; align-items:center; gap:8px; padding:7px 12px 7px 8px; border-radius:5px; border:1px solid var(--line-strong); background:var(--panel); font:500 12.5px var(--f-body); color:var(--muted)}
.prs b{width:20px; height:20px; display:grid; place-items:center; border-radius:4px; background:var(--surface-3); font:600 11px var(--f-mono); color:var(--muted)}
.prs li.ok{color:var(--strong); border-color:var(--accent-line)}
.prs li.ok b{background:var(--accent); color:var(--on-accent)}
.pr-q{max-width:none; margin-bottom:10px}
.pr-opts{max-height:340px; overflow-y:auto; padding:2px}
.shy{display:flex; gap:10px; align-items:flex-start; margin:12px 0 0; padding:12px; border-radius:6px; border:1px solid color-mix(in srgb, var(--s-talking) 40%, transparent); background:color-mix(in srgb, var(--s-talking) 8%, transparent)}
.shy svg{color:var(--s-talking); margin-top:2px}
.shy b{display:block; color:var(--strong); font-size:13.5px}
.shy p{margin:3px 0 0; font-size:13px; color:var(--soft)}
.price-card .fold-in .mks{grid-template-columns:minmax(0,1fr); margin-top:8px}

/* ================= Calls: call tools ================= */
.conn{margin-bottom:14px}
.conn-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.conn-i{position:relative; display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:6px; border:1px solid var(--line); background:var(--surface-2); min-width:0; overflow:hidden}
.conn-i b{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13.5px; color:var(--strong)}
.conn-i small{display:block; font-size:12px; color:var(--muted); margin-top:3px; overflow-wrap:anywhere}
.conn-i .btn{align-self:flex-start}
.conn-ic{width:30px; height:30px; display:grid; place-items:center; border-radius:6px}
.conn-ic.g{background:color-mix(in srgb, #22c55e 15%, transparent); color:#22c55e}
.conn-ic.z{background:color-mix(in srgb, #3b82f6 15%, transparent); color:#3b82f6}
.conn-ic.c{background:color-mix(in srgb, #38bdf8 15%, transparent); color:#38bdf8}
.conn-b{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; font-size:13px}

/* ================= Boards: colors and tile menus ================= */
.bl.has-lc{border-top:3px solid var(--lc); background:linear-gradient(180deg, color-mix(in srgb, var(--lc) 10%, var(--surface)), var(--surface) 120px)}
.bl.has-lc .bl-t{color:color-mix(in srgb, var(--lc) 70%, var(--strong))}
.bm-col{padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px}
.bm-col > span{display:block; font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:6px}
.btile-x{position:absolute; top:10px; right:44px; z-index:2; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:5px; background:rgba(0,0,0,.28); color:#fff; cursor:pointer}
.btile-x svg{width:14px; height:14px}
.btile{overflow:visible; touch-action:manipulation; -webkit-user-select:none; user-select:none}
.btile-m{border-radius:6px; overflow:hidden}
.btile-c{border-radius:6px 6px 0 0}
.tmenu{top:44px; right:10px; z-index:30}
.bt-ph{border:1.5px dashed var(--accent); border-radius:6px; background:var(--accent-soft); min-height:120px}

/* ================= premium motion ================= */
.fx .card::after,.fx .btile::after,.fx .kpi::after,.fx .conn-i::after,.fx .tier::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,107,26,.09), transparent 45%)}
.fx .card:hover::after,.fx .btile:hover::after,.fx .kpi:hover::after,.fx .conn-i:hover::after,.fx .tier:hover::after{opacity:1}
.kpi,.tier{position:relative}
:root[data-theme="light"] .fx .card::after{background:radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(242,95,15,.07), transparent 45%)}
@property --ba{syntax:"<angle>"; initial-value:0deg; inherits:false}
.beam{position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:0;
  background:conic-gradient(from var(--ba), transparent 0 72%, var(--accent) 86%, #ffd2b0 90%, transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:beam 6s linear infinite; opacity:.85}
@keyframes beam{to{--ba:360deg}}
.btn,.qb,.navlink,.plan-b,.back,.ltab{overflow:hidden}
.rip{position:absolute; border-radius:50%; background:currentColor; opacity:.18; transform:scale(0); animation:rip .6s ease-out forwards; pointer-events:none}
@keyframes rip{to{transform:scale(1); opacity:0}}
.fx .btn.primary,.fx .back{transition:transform .18s cubic-bezier(.2,.7,.2,1), background .12s, filter .2s}
.fx .btile{transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s}
.fx [data-tilt]{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.rv{opacity:0; transform:translateY(14px); filter:blur(6px); transition:opacity .55s ease var(--d,0ms), transform .55s cubic-bezier(.2,.7,.2,1) var(--d,0ms), filter .55s ease var(--d,0ms)}
.rv.in{opacity:1; transform:none; filter:none}
.fx .kpi .v,.fx .card-h h2{font-variant-numeric:tabular-nums}
.fx .navlink svg.i{transition:transform .2s}
.fx .navlink:hover svg.i{transform:translateX(2px) scale(1.08)}
.fx .opt span{transition:border-color .12s, background .12s, transform .12s, box-shadow .2s}
.fx .opt:active span{transform:scale(.97)}
/* landing: light beams falling through the grid */
.land{overflow:hidden}
.beams{position:absolute; inset:0; height:900px; pointer-events:none; z-index:-1; overflow:hidden}
.beams i{position:absolute; top:-200px; width:1px; height:160px; background:linear-gradient(180deg, transparent, var(--accent)); opacity:.5; animation:fall 7s linear infinite}
.beams i:nth-child(1){left:12%; animation-delay:0s} .beams i:nth-child(2){left:31%; animation-delay:2.4s; animation-duration:9s}
.beams i:nth-child(3){left:54%; animation-delay:1.1s} .beams i:nth-child(4){left:73%; animation-delay:3.7s; animation-duration:8s}
.beams i:nth-child(5){left:91%; animation-delay:5.2s}
@keyframes fall{to{transform:translateY(1200px)}}
@media (prefers-reduced-motion: reduce){ .beam,.beams,.hero-shot::after{display:none} .rv{opacity:1; transform:none; filter:none} }

@media (max-width: 1000px){
  .top2{grid-template-columns:minmax(0,1fr)}
  .conn-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 600px){
  .lvl-pick{grid-template-columns:1fr 1fr}
  .dm-t{font-size:16px}
  .dm-head{flex-direction:column; align-items:flex-start}
  .bom{grid-template-columns:minmax(0,1fr)}
  .bom-in{justify-self:center}
  .shop-grid{grid-template-columns:minmax(0,1fr)}
  .bshelf{grid-template-columns:minmax(0,1fr)}
  .dm-list li.today{margin:0 -16px}
  .btile-x{right:44px}
}
.shop-grid .fld{margin:0!important}

/* ================= round 9 ================= */
/* colors inside menus: swatches were hidden by the menu button style */
.bmenu .sw{gap:5px}
.bmenu .sw-i{display:grid; place-items:center; width:22px; height:22px; padding:0; border-radius:4px; background:var(--s)}
.bmenu .sw-i:hover{background:var(--s); transform:scale(1.12)}
.bmenu .sw-i.none{background:var(--surface-3)}
.bmenu .sw-i.on{border-color:var(--strong)}
.sw-own,.sw-own.sm,.bmenu .sw-own{background:conic-gradient(#e2445c, #fdab3d, #f5cd47, #00c875, #22d3ee, #579dff, #a25ddd, #ff158a, #e2445c)!important}
.lab-ed{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px 12px}
.bc-labs i:empty{width:34px; height:8px; padding:0; border-left:0; background:var(--l)}
.noname{font-style:normal; color:var(--faint)}
/* prospects how-to */
.howto{list-style:none; margin:0 0 14px; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
.howto li{display:flex; gap:10px; align-items:flex-start; padding:11px 12px; border-radius:6px; border:1px solid var(--line); background:var(--panel); font-size:12.5px; color:var(--soft); line-height:1.45}
.howto b{flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:4px; background:var(--accent-soft); color:var(--accent); font:600 11px var(--f-mono); border:1px solid var(--accent-line)}
/* top right log out */
.qb-out:hover{color:var(--late)}
.mtop .qb-out{width:36px; height:36px; justify-content:center; padding:0; border-radius:9px; background:var(--surface); border:1px solid var(--line)}
.side{padding-bottom:18px}
.side .navlink{height:30px}
.side .navsep{margin:12px 10px 4px}
/* lead page builder */
.lp-step{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.lp-step:first-of-type{border-top:0; padding-top:0}
.lp-step > b{flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:5px; background:var(--surface-3); color:var(--muted); font:600 11px var(--f-mono); margin-top:1px}
.lp-step .fld{flex:1; min-width:0; margin:0}
.lp-step select,.lp-step input:not([type]){width:100%; height:36px; padding:0 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:13px}
.lp-step .two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
/* reply helper */
.sbox{display:flex; gap:6px}
.sbox input{flex:1; min-width:0}
.rgrp{margin-bottom:18px}
.rg-h{display:flex; align-items:center; gap:8px; margin:0 0 10px}
.rg-h h3{font:600 11.5px var(--f-mono); text-transform:uppercase; letter-spacing:.07em; color:var(--strong)}
.rg-h h3::before{content:"// "; color:var(--accent)}
.rmore{margin-top:10px}
/* niche check */
.dx{margin-bottom:14px}
.dx-q{display:flex; gap:12px; padding:12px 0; border-top:1px solid var(--line)}
.dx-q:first-of-type{border-top:0; padding-top:0}
.dx-q > b{flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:5px; background:var(--accent-soft); color:var(--accent); font:600 11px var(--f-mono); border:1px solid var(--accent-line)}
.dx-q .fld{flex:1; min-width:0; margin:0}
.dx-q select{width:100%; max-width:420px; height:36px; padding:0 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2)}
.dx-res{display:flex; flex-direction:column}
.dx-r{display:grid; grid-template-columns:34px minmax(0,1fr) 58px auto; gap:12px; align-items:center; padding:12px 0; border-top:1px solid var(--line)}
.dx-r:first-child{border-top:0}
.dx-n{font:600 13px var(--f-mono); color:var(--accent)}
.dx-t b{display:block; font-size:14.5px; color:var(--strong)}
.dx-t small{display:block; font-size:11.5px; color:var(--muted); margin-bottom:6px}
.dx-fit{display:flex; flex-direction:column; align-items:center}
.dx-fit b{font:600 16px var(--f-mono); color:var(--ok)} .dx-fit small{font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:.08em}
.dx-a{display:flex; gap:6px; flex-wrap:wrap}
.nf-sep{display:flex; align-items:center; gap:10px; margin:6px 0 14px; font:500 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--faint)}
.nf-sep::after{content:""; flex:1; height:1px; background:var(--line)}
/* book shelves */
.shelf-tabs{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px}
.stab{display:flex; flex-direction:column; gap:2px; text-align:left; padding:12px 14px; border-radius:6px; border:1px solid var(--line-strong); background:var(--panel); cursor:pointer; color:var(--ink)}
.stab b{font-size:14px; color:var(--strong)} .stab small{font-size:12px; color:var(--muted)}
.stab.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 1px var(--accent) inset}
.bk-g{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.bk-g .lesson{margin:10px 0 0}
.bshelf2{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:12px}
.bk{display:flex; flex-direction:column; gap:8px; padding:8px; border:1px solid transparent; border-radius:6px; background:transparent; cursor:pointer; text-align:left; min-width:0; color:var(--ink)}
.bk .bcov{width:100%}
.bk:hover{border-color:var(--line-strong); background:var(--surface-2)}
.bk.on{border-color:var(--accent); background:var(--accent-soft)}
.bk-t b{display:block; font-size:12.5px; color:var(--strong); line-height:1.3}
.bk-t small{font-size:11px; color:var(--muted)}
.btn.locked{opacity:.7; cursor:not-allowed}
.shop-links{display:grid; grid-template-columns:1fr 1fr; gap:8px 14px}
.sl{display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--soft)}
.sl input{height:34px; padding:0 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:12.5px}
@media (max-width: 1000px){
  .howto{grid-template-columns:1fr 1fr}
  .bshelf2{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width: 600px){
  .howto{grid-template-columns:minmax(0,1fr)}
  .lp-step .two{grid-template-columns:minmax(0,1fr)}
  .dx-r{grid-template-columns:28px minmax(0,1fr) 48px; }
  .dx-a{grid-column:2 / -1}
  .shelf-tabs,.bk-g,.shop-links,.lab-ed{grid-template-columns:minmax(0,1fr)}
  .bshelf2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .sbox{flex-direction:column}
}

/* ================= round 10 ================= */
/* sign-up page: tight, aligned hero */
.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,420px); gap:56px; align-items:center; padding-block:48px 56px}
.form-col{position:static}
.hero-copy{gap:20px}
.hero .lead{font-size:18px; color:var(--soft); max-width:46ch}
.wins{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.wins li{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; color:var(--muted); line-height:1.5}
.wins b{color:var(--strong); font-weight:600}
.wck{flex:none; width:20px; height:20px; margin-top:1px; border-radius:5px; background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0704' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; box-shadow:0 0 14px -3px var(--accent)}
.trust{display:flex; flex-wrap:wrap; gap:6px 16px; font:500 11.5px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--faint)}
.trust span{display:inline-flex; align-items:center; gap:7px}
.trust span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--ok)}
.lp-day .lp-h{margin-bottom:18px}
.day-g{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; align-items:center}
.day-g .hero-shot{max-width:none; margin:0}
.day-g .log{max-width:none; margin:0}
.pains{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px}
.pains > div{padding:18px; border-radius:6px; border:1px solid var(--line); background:var(--panel)}
.pains b{display:block; font-size:15.5px; line-height:1.4; color:var(--strong); letter-spacing:-.01em}
.pains p{margin:8px 0 0; font-size:13.5px; color:var(--muted)}
.cta-band .lp-in{align-items:center; text-align:center; padding:44px 20px; border-radius:8px; border:1px solid var(--accent-line); background:radial-gradient(600px 200px at 50% 0%, var(--accent-soft), transparent 70%), var(--panel)}
.cta-band .lp-h{font-size:clamp(26px, 3.4vw, 40px); margin:0}
.cta-band .lead{margin:6px 0 14px}
/* boards */
.bmk{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.bmk input{flex:1 1 260px; min-width:0; height:38px; padding:0 12px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:14px}
.sw30 .sw-i{width:26px; height:26px}
.bhow-g{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.bhow-g b{display:block; font:600 11px var(--f-mono); text-transform:uppercase; letter-spacing:.07em; color:var(--accent-ink); margin-bottom:6px}
.bhow-g ul,.bhow-g ol{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; font-size:13.5px; color:var(--soft)}
/* master tracker */
.tools{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tools .search{flex:1 1 220px; min-width:0}
.pview{flex:none}
.mt-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:10px}
.mt-bar .btn{margin-left:auto}
.mt-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:6px}
.mt{width:100%; border-collapse:collapse; font-size:13px; min-width:860px}
.mt th{text-align:left; padding:0; background:var(--surface-2); border-bottom:1px solid var(--line-strong); position:sticky; top:0}
.mt-s{width:100%; text-align:left; border:0; background:transparent; padding:9px 10px; font:600 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); cursor:pointer; white-space:nowrap}
.mt th:not(:has(button)){padding:9px 10px; font:600 10.5px var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.mt-s.on{color:var(--accent)}
.mt td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink)}
.mt td b{display:block; color:var(--strong); font-weight:500}
.mt td small{display:block; font-size:11.5px; color:var(--muted)}
.mt tbody tr{cursor:pointer}
.mt tbody tr:hover td{background:var(--surface-2)}
.mt-st{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.mt-st i{width:7px; height:7px; border-radius:50%; background:var(--c)}
/* niche finder */
.pay{display:inline-flex; align-items:center; gap:7px; font:500 11px var(--f-body); color:var(--muted)}
.pay-b{display:inline-flex; gap:2px; align-items:flex-end}
.pay-b i{width:4px; border-radius:1px; background:var(--surface-3)}
.pay-b i:nth-child(1){height:6px} .pay-b i:nth-child(2){height:9px} .pay-b i:nth-child(3){height:12px}
.pay-b i.on{background:var(--ok)}
.ncoach{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin-bottom:14px; border-radius:6px; border:1px solid color-mix(in srgb, var(--s-talking) 40%, transparent); background:color-mix(in srgb, var(--s-talking) 7%, var(--surface))}
.ncoach.warn{border-color:var(--accent-line); background:var(--accent-soft)}
.ncoach-ic{flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:6px; background:var(--surface-3); color:var(--s-talking)}
.ncoach.warn .ncoach-ic{color:var(--accent)}
.ncoach > div{flex:1; min-width:0}
.ncoach b{display:block; color:var(--strong); font-size:14px}
.ncoach p{margin:4px 0 0; font-size:13px; color:var(--soft)}
.ncoach small{display:block; margin-top:6px; font-size:12px; color:var(--muted)}
.nsaved{margin-bottom:14px}
.nchip{display:inline-flex; align-items:center; border:1px solid var(--accent-line); border-radius:5px; background:var(--accent-soft); overflow:hidden}
.nchip button{border:0; background:transparent; padding:5px 9px; font:500 12.5px var(--f-body); color:var(--strong); cursor:pointer}
.nchip .x{padding:5px 7px; color:var(--muted); border-left:1px solid var(--accent-line)}
.nchip .x svg{width:12px; height:12px}
.nf-more{margin-top:12px}
.dx-o{margin-top:8px; width:100%; max-width:420px; height:34px; padding:0 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2)}
.dx-a .icon-btn.on{color:#facc15}
/* reply helper */
.rtabs{display:flex; gap:6px; margin:0 0 14px}
.rtab{display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:6px; border:1px solid var(--line-strong); background:var(--panel); font:500 13px var(--f-body); color:var(--soft); cursor:pointer}
.rtab em{font:500 11px var(--f-mono); font-style:normal; color:var(--faint)}
.rtab.on{border-color:var(--accent); color:var(--strong); background:var(--accent-soft)}
.rtab svg{width:14px; height:14px}
.myr-top{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content:space-between; margin-bottom:12px}
.myr-ed{margin-bottom:14px}
.myr-ed input,.myr-ed select,.myr-ed textarea{width:100%; padding:8px 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:13px}
.myr-ed select,.myr-ed input{height:36px}
#myFn{margin-top:6px}
.hcard.mine{border-color:var(--accent-line)}
.hc-top .acts{display:flex; gap:4px; align-items:center}
.rmore{margin-top:4px}
/* lead page */
.danger-l{display:inline-flex; align-items:center; gap:5px; margin-top:10px; color:var(--late)!important}
.danger-l svg{width:13px; height:13px}
/* notifications: clear one */
.nfw{position:relative}
.nfw .nf{padding-right:40px}
.nf-x{position:absolute; top:10px; right:10px; width:24px; height:24px; display:grid; place-items:center; border:0; border-radius:5px; background:transparent; color:var(--faint); cursor:pointer}
.nf-x:hover{background:var(--surface-3); color:var(--strong)}
.nf-x svg{width:13px; height:13px}
/* plan: remove for today */
.plan-x{opacity:.5}
.plan-i:hover .plan-x{opacity:1}
/* log out under your name */
.me{flex-wrap:wrap}
.me-out{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:8px; height:30px; border:1px solid var(--line-strong); border-radius:5px; background:transparent; color:var(--soft); font:500 12.5px var(--f-body); cursor:pointer}
.me-out:hover{border-color:color-mix(in srgb, var(--late) 50%, transparent); color:var(--late)}
.me-out svg{width:14px; height:14px}
.side > .navlink[data-logout]{display:none}
@media (max-width: 900px){
  .hero{grid-template-columns:minmax(0,1fr); gap:28px; padding-block:28px 40px}
  .day-g,.pains,.bhow-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 600px){
  .hero .lead{font-size:16px}
  .mt-bar .btn{margin-left:0}
}
.src-line{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:8px 0 0; font-size:12px; color:var(--muted)}
.src-line svg{width:12px; height:12px}
#prNiche{width:100%; height:36px; padding:0 10px; border-radius:5px; border:1px solid var(--line-strong); background:var(--surface-2)}

/* ================= round 12: cinematic sign-up page ================= */
.land{max-width:none; margin:0; padding:0; overflow:visible; overflow-x:clip; position:relative;
  --gl:max(20px, env(safe-area-inset-left,0px)); --gr:max(20px, env(safe-area-inset-right,0px));
  --fl:color-mix(in srgb, var(--accent) 42%, transparent); --sun:color-mix(in srgb, var(--accent) 34%, transparent); --grain:.06}
:root[data-theme="light"] .land{--fl:color-mix(in srgb, var(--accent) 28%, transparent); --sun:color-mix(in srgb, var(--accent) 20%, transparent); --grain:.035}
.lt-in,.x-hero .hero,.land .lp-in,.cine-in,.ba-sticky,.land-foot{max-width:1160px; margin-inline:auto; padding-left:var(--gl); padding-right:var(--gr)}
.land-foot{border-top:1px solid var(--line)}
.lp-prog{position:fixed; inset:0 0 auto; height:2px; z-index:60; pointer-events:none}
.lp-prog i{display:block; height:100%; background:linear-gradient(90deg, var(--accent), #ffc59a); transform-origin:0 50%; transform:scaleX(0); box-shadow:0 0 12px var(--accent)}

/* header: glass once you scroll */
.land-top{display:block; position:sticky; top:0; z-index:50; padding:0; border:0; border-bottom:1px solid transparent; transition:background .35s, border-color .35s, backdrop-filter .35s}
.lt-in{display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block:14px}
.land-top.scrolled{background:color-mix(in srgb, var(--bg) 72%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.4); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line)}

/* hero stage: light, a moving floor, grain */
.x-hero{position:relative; isolation:isolate; margin-top:-62px; padding-top:62px}
.x-stage{position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.x-stage::after{content:""; position:absolute; inset:-50%; opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay}
.x-glow{position:absolute; left:var(--gx, 72%); top:var(--gy, 34%); width:900px; height:900px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); transition:left 1.2s cubic-bezier(.16,1,.3,1), top 1.2s cubic-bezier(.16,1,.3,1)}
.x-sun{position:absolute; left:50%; bottom:28%; width:min(1100px, 140vw); height:260px; transform:translate(-50%, 50%); background:radial-gradient(50% 50% at 50% 50%, var(--sun), transparent 70%); filter:blur(10px)}
.x-sun::after{content:""; position:absolute; left:8%; right:8%; top:50%; height:1px; background:linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow:0 0 18px 2px var(--sun)}
.x-floor{position:absolute; left:0; right:0; bottom:0; height:28%; perspective:300px; perspective-origin:50% 0; -webkit-mask:linear-gradient(180deg, transparent, #000 30%, #000 75%, transparent); mask:linear-gradient(180deg, transparent, #000 30%, #000 75%, transparent); transform:translateY(calc(var(--hy, 0) * 60px))}
.x-floor i{position:absolute; left:-60%; right:-60%; top:0; height:260%; transform-origin:50% 0; transform:rotateX(64deg);
  background-image:linear-gradient(var(--fl) 1px, transparent 1px), linear-gradient(90deg, var(--fl) 1px, transparent 1px); background-size:72px 72px}
.lfx .x-floor i{animation:floor 2.6s linear infinite}
@keyframes floor{to{background-position:0 72px}}
.x-hero .beams{z-index:0; height:100%; opacity:.45}
.x-hero .hero{display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,420px); gap:64px; align-items:center; padding-block:84px 128px; min-height:min(860px, calc(100svh - 10px))}
.x-hero .hero h1{font-size:clamp(42px, 6vw, 82px); line-height:.96; letter-spacing:-.055em; max-width:12ch; margin:0}
.x-hero .hero h1 em{color:var(--accent); text-shadow:none}
.x-scroll{position:absolute; left:50%; bottom:26px; width:24px; height:38px; margin-left:-12px; border-radius:14px; border:1.5px solid var(--line-strong); display:grid; justify-items:center; padding-top:7px}
.x-scroll i{width:3px; height:8px; border-radius:2px; background:var(--accent); box-shadow:0 0 8px var(--accent)}
.lfx .x-scroll i{animation:wheel 1.8s cubic-bezier(.6,0,.3,1) infinite}
@keyframes wheel{0%{transform:none; opacity:1} 70%{transform:translateY(12px); opacity:0} 100%{opacity:0}}

/* entrance: words rise out of a mask, blocks focus in */
.xw{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em}
.xw > span{display:inline-block}
.lfx .x-split .xw > span{transform:translateY(108%) rotate(4deg); animation:wdUp 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(var(--base, 0s) + var(--i) * 75ms)}
@keyframes wdUp{to{transform:none}}
.lfx .x-split em .xw > span{background:linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #ffd6b8 50%, var(--accent) 62%, var(--accent) 100%); background-size:260% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:wdUp 1s cubic-bezier(.16,1,.3,1) forwards, glint 5.5s ease-in-out 1.6s infinite; animation-delay:calc(var(--base, 0s) + var(--i) * 75ms), calc(1.6s + var(--i) * 120ms)}
:root[data-theme="light"] .lfx .x-split em .xw > span{background-image:linear-gradient(100deg, var(--accent) 0%, var(--accent) 38%, #ffb27a 50%, var(--accent) 62%, var(--accent) 100%)}
@keyframes glint{0%,55%{background-position:100% 0} 85%,100%{background-position:0 0}}
.lfx .x-words .xw > span{transform:translateY(108%); transition:transform .95s cubic-bezier(.16,1,.3,1); transition-delay:calc(var(--i) * 55ms)}
.lfx .x-words.in .xw > span{transform:none}
.lfx .x-in{opacity:0; transform:translateY(18px); filter:blur(10px); animation:xIn 1s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d, 0s)}
@keyframes xIn{to{opacity:1; transform:none; filter:none}}
.lfx .lr{opacity:0; transform:translateY(26px); filter:blur(8px); transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0ms), transform .9s cubic-bezier(.16,1,.3,1) var(--d,0ms), filter .9s ease var(--d,0ms)}
.lfx .lr.in{opacity:1; transform:none; filter:none}

/* the form: glass with a light running around its edge */
.land .auth-card{position:relative; isolation:isolate; background:color-mix(in srgb, var(--surface) 78%, transparent); -webkit-backdrop-filter:blur(20px) saturate(1.3); backdrop-filter:blur(20px) saturate(1.3); border-radius:12px; border-color:var(--line-strong);
  box-shadow:0 60px 120px -60px var(--hud), 0 30px 60px -40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06)}
.land .auth-card > .beam{opacity:.95}
.land .auth-card > :not(.beam){position:relative; z-index:1}
.land .auth-card::after,.land .spec > div::after,.land .pains > div::after,.land .obj::after,.land .log::before,.land .note::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%); z-index:0}
.land .auth-card:hover::after,.land .spec > div:hover::after,.land .pains > div:hover::after,.land .obj:hover::after,.land .log:hover::before,.land .note:hover::after{opacity:1}
.land .spec > div,.land .pains > div,.land .obj,.land .note{position:relative}

/* cinematic photo band (stays dark in both themes, on purpose) */
.cine{position:relative; isolation:isolate; overflow:hidden; background:#050506; color:#ededef; border-top:1px solid var(--line);
  --panel:linear-gradient(180deg, rgba(18,18,22,.72), rgba(10,10,12,.82)); --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --strong:#fff; --ink:#ededef; --soft:#c4c4cc; --muted:#9a9aa5; --faint:#6e6e7a; --accent:#ff6b1a; --accent-ink:#ffb48a; --ok:#22c55e}
.cine-media{position:absolute; inset:0; z-index:-1; overflow:hidden}
.cine-bg,.cine-bg img{display:block; width:100%; height:100%}
.cine-bg img{object-fit:cover; object-position:28% 50%; transform:scale(1.1); will-change:transform}
.cine-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,5,6,0) 26%, rgba(5,5,6,.6) 50%, rgba(5,5,6,.94) 66%), linear-gradient(180deg, rgba(5,5,6,.55), transparent 22%, transparent 78%, rgba(5,5,6,.75))}
.cine-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px); align-items:center; min-height:min(92vh, 860px); padding-block:110px}
.cine-copy{grid-column:2; display:flex; flex-direction:column; gap:12px; min-width:0}
.cine .lp-h{font-size:clamp(28px, 3.4vw, 44px); line-height:1.04; letter-spacing:-.04em; color:#fff; margin:0 0 14px}
.cine .kicker{color:var(--accent-ink)}
.cine .log{max-width:none; margin:0; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:0 40px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,107,26,.12)}
.cine .log-l li{opacity:0; animation:none}
.lfx .cine .log.in .log-l li{animation:logIn .55s cubic-bezier(.16,1,.3,1) forwards}
.cine .log.in .log-l li:nth-child(1){animation-delay:.25s}.cine .log.in .log-l li:nth-child(2){animation-delay:.7s}.cine .log.in .log-l li:nth-child(3){animation-delay:1.1s}.cine .log.in .log-l li:nth-child(4){animation-delay:1.7s}.cine .log.in .log-l li:nth-child(5){animation-delay:2.1s}.cine .log.in .log-l li:nth-child(6){animation-delay:2.7s}.cine .log.in .log-l li:nth-child(7){animation-delay:3.3s}
.land:not(.lfx) .cine .log-l li{opacity:1}
.xchips{position:absolute; inset:0; pointer-events:none; z-index:1}
.xchip{position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px 10px 10px; border-radius:12px; background:rgba(14,14,17,.62); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4); border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 50px -24px #000, 0 0 0 1px rgba(255,107,26,.1); font-size:12.5px; color:#c4c4cc; white-space:nowrap}
.xchip b{display:block; font-size:12.5px; color:#fff; font-weight:600}
.xchip span{line-height:1.3}
.ci{flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:rgba(255,255,255,.07); color:#ffb48a}
.ci svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ci.hot{background:rgba(255,107,26,.18); color:#ff8a45; box-shadow:0 0 18px -4px #ff6b1a}
.ci.ok{background:rgba(34,197,94,.16); color:#4ade80}
.c1{left:40%; top:11%} .c2{left:5%; top:58%} .c3{left:38%; top:66%}
.lfx .xchip{opacity:0; transform:translateY(18px) scale(.92); filter:blur(8px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s}
.lfx .cine.in .xchip{opacity:1; transform:none; filter:none}
.lfx .cine.in .c1{transition-delay:.9s} .lfx .cine.in .c2{transition-delay:2.1s} .lfx .cine.in .c3{transition-delay:3.5s}
.lfx .cine.in .xchip > *{animation:bob 6s ease-in-out infinite}
.lfx .cine.in .c2 > *{animation-delay:-2s} .lfx .cine.in .c3 > *{animation-delay:-4s}
@keyframes bob{50%{transform:translateY(-5px)}}

/* before and after, revealed as you scroll down */
.ba{border-top:0; padding-block:0 64px}
.ba-track{position:relative; height:250vh}
.ba-sticky{position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; gap:16px; padding-top:64px; padding-bottom:20px}
.ba-head{display:flex; flex-direction:column; gap:6px}
.ba-head .lp-h{margin:0; font-size:clamp(26px, 3.4vw, 44px); letter-spacing:-.04em; line-height:1.04; max-width:20ch}
.ba-frame{position:relative; width:min(100%, calc((100svh - 300px) * 16 / 9)); aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong); background:#050506; box-shadow:0 60px 120px -60px var(--hud), 0 0 0 1px rgba(255,107,26,.06); --p:0; --R:0px}
.ba-img{position:absolute; inset:0}
.ba-img img{display:block; width:100%; height:100%; object-fit:cover}
.ba-before img{transform:scale(calc(1 + var(--p) * .08)); filter:saturate(calc(1 - var(--p) * .7)) brightness(calc(1 - var(--p) * .35))}
.ba-after{clip-path:circle(var(--R) at 47% 88%)}
.ba-after img{transform:scale(calc(1.12 - var(--p) * .12))}
.ba-ring{position:absolute; left:47%; top:88%; width:calc(var(--R) * 2); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1.5px rgba(255,170,110,.9), 0 0 40px 8px rgba(255,107,26,.45), inset 0 0 40px 4px rgba(255,107,26,.25); opacity:clamp(0, min(var(--p) * 20, (1 - var(--p)) * 6), 1); pointer-events:none}
.ba-cap{position:absolute; left:16px; bottom:16px; right:16px; margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:520px; padding:10px 14px; border-radius:10px; background:rgba(10,10,12,.66); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.12); color:#e4e4ea; font-size:14px; line-height:1.4; transition:opacity .3s, transform .4s cubic-bezier(.16,1,.3,1)}
.ba-cap-b{opacity:clamp(0, (.42 - var(--p)) * 8, 1); transform:translateY(calc(clamp(0, var(--p) - .3, .2) * 60px))}
.ba-cap-a{opacity:clamp(0, (var(--p) - .62) * 8, 1); transform:translateY(calc(clamp(0, .8 - var(--p), .2) * 60px))}
.ba-tag{font:600 10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:5px; background:rgba(244,63,94,.18); color:#fda4af}
.ba-tag.ok{background:rgba(34,197,94,.18); color:#86efac}
.ba-bar{display:flex; align-items:center; gap:12px; width:min(100%, calc((100svh - 300px) * 16 / 9)); font:500 10.5px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint)}
.ba-bar b{flex:1; height:2px; border-radius:2px; background:var(--line-strong); overflow:hidden}
.ba-bar i{display:block; height:100%; background:linear-gradient(90deg, #f43f5e, var(--accent), var(--ok)); transform-origin:0 50%; transform:scaleX(var(--p, 0))}
.ba-hint{margin:0; font:500 11px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); opacity:clamp(0, 1 - var(--p) * 6, 1)}
.ba .pains{margin-top:8px}

/* what changes: the old way gets crossed out */
.ld-r > span:first-child{text-decoration:line-through; text-decoration-thickness:1.5px; text-decoration-color:transparent; transition:text-decoration-color .7s ease .45s, color .7s ease .45s}
.lfx .ld-r.in > span:first-child{text-decoration-color:color-mix(in srgb, var(--late) 75%, transparent); color:var(--faint)}
.land:not(.lfx) .ld-r > span:first-child{color:var(--faint)}

/* closing band on the grid image */
.cta-x{position:relative; isolation:isolate; overflow:hidden; background:#030303; color:#fff; border-top:1px solid var(--line); --accent:#ff6b1a}
.cta-bg{position:absolute; inset:0; z-index:-1}
.cta-bg img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 80%; transform-origin:50% 80%}
.lfx .cta-bg img{animation:kb 22s ease-in-out infinite alternate}
@keyframes kb{to{transform:scale(1.14)}}
.cta-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 42%, rgba(3,3,3,.35), rgba(3,3,3,.82))}
.cta-in{max-width:760px; margin-inline:auto; padding:clamp(96px, 16vh, 160px) var(--gr) clamp(110px, 20vh, 190px) var(--gl); display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px}
.cta-x .lp-h{font-size:clamp(32px, 5vw, 64px); line-height:1; letter-spacing:-.05em; color:#fff; margin:0; text-wrap:balance}
.cta-x .lead{color:#c4c4cc; margin:0 0 12px; font-size:17px}
.x-shine{position:relative; overflow:hidden; box-shadow:0 0 0 1px rgba(255,107,26,.5), 0 18px 50px -12px rgba(255,107,26,.7)}
.x-shine::before{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:translateX(-120%)}
.lfx .x-shine::before{animation:shine 3.8s cubic-bezier(.6,0,.2,1) 1.2s infinite}
@keyframes shine{0%{transform:translateX(-120%)} 45%,100%{transform:translateX(120%)}}
.lfx .x-shine::after{content:""; position:absolute; inset:-1px; border-radius:inherit; box-shadow:0 0 0 0 rgba(255,107,26,.55); animation:ping 2.6s cubic-bezier(.16,1,.3,1) infinite; pointer-events:none}
@keyframes ping{70%,100%{box-shadow:0 0 0 16px rgba(255,107,26,0)}}

@media (max-width: 900px){
  .x-hero .hero{grid-template-columns:minmax(0,1fr); gap:36px; padding-block:40px 96px; min-height:0}
  .x-hero .hero h1{font-size:clamp(40px, 11vw, 60px); max-width:none}
  .x-floor{height:22%}
  .x-sun{bottom:22%}
  .x-scroll{display:none}
  .cine{display:flex; flex-direction:column}
  .cine-media{position:relative; inset:auto; height:clamp(260px, 62vw, 460px); z-index:0}
  .cine-bg img{object-position:24% 50%}
  .cine-media::after{background:linear-gradient(180deg, rgba(5,5,6,.35), transparent 28%, transparent 52%, #050506 92%)}
  .cine-in{grid-template-columns:minmax(0,1fr); min-height:0; padding-block:0 64px; margin-top:-12px; position:relative; z-index:1}
  .cine-copy{grid-column:1}
  .c1{left:auto; right:4%; top:10%} .c2{display:none} .c3{left:auto; right:4%; top:44%}
  .xchip{font-size:11.5px; padding:8px 11px 8px 8px} .xchip b{font-size:11.5px} .ci{width:26px; height:26px}
  .ba-track{height:200vh}
  .ba-sticky{padding-top:72px}
  .ba-frame{width:min(100%, calc((100svh - 300px) * 4 / 5)); aspect-ratio:4 / 5; align-self:center}
  .ba-bar{width:100%}
  .ba-img img{object-position:50% 50%}
  .ba-cap{left:10px; right:10px; bottom:10px; font-size:12.5px; padding:8px 10px}
}
@media (prefers-reduced-motion: reduce){
  .x-floor i,.x-scroll i,.cta-bg img,.x-shine::before,.x-shine::after,.xchip > *{animation:none!important}
}
#authAnchor{scroll-margin-top:80px}

/* ================= round 13: product-first sign-up page ================= */
.th-l{display:none!important}
:root[data-theme="light"] .th-d{display:none!important}
:root[data-theme="light"] .th-l{display:block!important}
.lt-in,.hero2,.land .lp-in,.cine-in,.ba-sticky,.land-foot,.shot-wrap{max-width:1200px}
.land .lp-h{font-size:48px; line-height:1.05; letter-spacing:-.04em; font-weight:600; color:var(--strong); text-wrap:balance; margin:0}
.land .kicker{font:500 11.5px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0}
.land .sec{padding-block:112px; border-top:1px solid var(--line)}
.sec-h{display:flex; flex-direction:column; gap:14px; max-width:760px; margin-bottom:64px}
.sec-p{margin:0; font-size:18px; line-height:1.6; color:var(--soft); max-width:60ch}
.land .btn.lg{height:52px; padding:0 24px; font-size:15px; font-weight:600; border-radius:10px; gap:10px}
.land .btn.ghost{border:1px solid var(--line-strong); color:var(--ink); background:color-mix(in srgb, var(--surface) 50%, transparent)}
.land .btn.ghost:hover{border-color:var(--faint); background:var(--surface-2)}
.land .btn.sm.ghost{border-color:transparent; background:transparent}
.arr{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s cubic-bezier(.16,1,.3,1)}
.btn:hover .arr{transform:translateX(4px)}

/* header */
.lt-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
.lt-in .acts{justify-self:end; display:flex; gap:6px; align-items:center}
.lt-nav{display:flex; gap:28px}
.lt-nav a{font-size:14px; color:var(--muted); text-decoration:none; transition:color .2s}
.lt-nav a:hover{color:var(--strong); text-decoration:none}
html{scroll-behavior:smooth}
.land section[id]{scroll-margin-top:64px}

/* hero: headline, one line, one button, then the product */
.x-stage{bottom:auto; height:980px}
.x-floor{height:34%}
.x-sun{bottom:34%}
.hero2{margin-inline:auto; padding-left:var(--gl); padding-right:var(--gr); padding-block:104px 64px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:24px}
.hero2 h1{font-size:clamp(44px, 7.4vw, 92px); line-height:.95; letter-spacing:-.055em; font-weight:600; max-width:12ch; margin:0; color:var(--strong)}
.hero2 h1 em{font-style:normal; color:var(--accent)}
.hero2 .lead{margin:0; font-size:18px; line-height:1.6; color:var(--soft); max-width:54ch}
.hpill{display:inline-flex; align-items:center; gap:8px; margin:0; padding:7px 14px; border-radius:999px; border:1px solid var(--line-strong); background:color-mix(in srgb, var(--surface) 60%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font:500 11.5px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.h-cta{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px}
.hero2 .trust{justify-content:center}
.shot-wrap{position:relative; margin-inline:auto; padding-left:var(--gl); padding-right:var(--gr); padding-bottom:96px; perspective:2200px}
.shot-wrap::before{content:""; position:absolute; left:10%; right:10%; top:12%; height:70%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent); filter:blur(40px); z-index:-1}
.shot{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong); background:var(--surface); transform-origin:50% 0; transform:rotateX(calc((1 - var(--sp, 0)) * 16deg)) scale(calc(.92 + var(--sp, 0) * .08)); will-change:transform;
  box-shadow:0 80px 160px -60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,107,26,.08), 0 -1px 0 rgba(255,255,255,.08) inset}
.shot-bar{display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--surface-2)}
.shot-bar i{width:10px; height:10px; border-radius:50%; background:var(--line-strong)}
.shot-bar i:first-child{background:#f43f5e} .shot-bar i:nth-child(2){background:#facc15} .shot-bar i:nth-child(3){background:#22c55e}
.shot-bar span{margin-inline:auto; padding:4px 14px; border-radius:6px; background:var(--surface-3); font:500 11.5px var(--f-mono); color:var(--muted); transform:translateX(-24px)}
.shot img{display:block; width:100%; height:auto}
.phone{position:absolute; right:calc(var(--gr) - 8px); bottom:40px; width:clamp(130px, 17vw, 228px); border-radius:34px; padding:7px; background:#0c0c0e; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 50px 90px -30px rgba(0,0,0,.85), 0 0 60px -20px rgba(255,107,26,.5); transform:translateY(calc((1 - var(--sp, 0)) * 70px))}
.phone img{display:block; width:100%; height:auto; border-radius:28px}
.shot-wrap .xchip{z-index:2}
.f1{left:calc(var(--gl) - 24px); top:28%} .f2{left:calc(var(--gl) + 40px); bottom:22%}
.lfx .shot-wrap .xchip{opacity:0; transform:translateY(16px) scale(.94); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
.lfx .shot-wrap.live .xchip{opacity:1; transform:none}
.lfx .shot-wrap.live .f1{transition-delay:1.6s} .lfx .shot-wrap.live .f2{transition-delay:2.6s}
.lfx .shot-wrap.live .xchip > *{animation:bob 6s ease-in-out infinite} .lfx .shot-wrap.live .f2 > *{animation-delay:-3s}

/* made for */
.roles{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 28px; max-width:1200px; margin-inline:auto; padding:40px var(--gr) 40px var(--gl); border-top:1px solid var(--line)}
.roles p{margin:0; font:500 11px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--faint)}
.roles ul{display:contents; list-style:none}
.roles li{font-size:15px; font-weight:500; color:var(--muted); letter-spacing:-.01em}
.lfx .roles li{animation:roleGlow 9s ease-in-out infinite; animation-delay:calc(var(--i, 0) * .45s)}
@keyframes roleGlow{0%,12%,100%{color:var(--muted); text-shadow:none} 5%{color:var(--strong); text-shadow:0 0 18px color-mix(in srgb, var(--accent) 60%, transparent)}}

/* how it works */
.hsteps{display:flex; flex-direction:column; gap:128px}
.hstep{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:center}
.hstep.rev .hstep-t{order:2}
.hstep-t{display:flex; flex-direction:column; gap:16px; min-width:0}
.step-n{display:flex; align-items:center; gap:12px; margin:0; font:500 12px var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.step-n b{font:600 13px var(--f-mono); color:var(--accent); padding:5px 9px; border-radius:6px; border:1px solid var(--accent-line)}
.step-n::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line-strong), transparent)}
.hstep h3{margin:0; font-size:32px; line-height:1.12; letter-spacing:-.035em; font-weight:600; color:var(--strong); text-wrap:balance}
.hstep-t > p{margin:0; font-size:18px; line-height:1.6; color:var(--soft)}
.ticks{list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:10px}
.ticks li{display:flex; gap:10px; align-items:flex-start; font-size:15.5px; color:var(--ink)}
.ticks svg{flex:none; width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; margin-top:1px}
.frame{position:relative; margin:0; border-radius:18px; border:1px solid var(--line); padding:40px; display:grid; place-items:center; overflow:hidden; min-width:0;
  background:radial-gradient(70% 70% at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--panel)}
.frame::before{content:""; position:absolute; inset:0; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:32px 32px; -webkit-mask:radial-gradient(closest-side, #000, transparent); mask:radial-gradient(closest-side, #000, transparent); opacity:.6}
.frame img{position:relative; display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line-strong); box-shadow:0 40px 80px -40px rgba(0,0,0,.7), 0 0 0 1px rgba(255,107,26,.06)}
.hstep.tall .frame img{width:auto; max-width:100%; height:460px; object-fit:contain}

/* photo band, tighter */
.cine-in{min-height:min(80vh, 720px); padding-block:96px}

/* before and after, side by side on wide screens */
.ba{padding-block:0}
.ba-track{height:230vh}
.ba-sticky{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:56px; align-items:center; padding-top:64px; padding-bottom:0}
.ba-side{display:flex; flex-direction:column; gap:16px; min-width:0}
.ba-side .lp-h{margin-bottom:8px}
.ba-pains{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.ba-pains li{display:flex; flex-direction:column; gap:4px; padding:14px 16px; border-left:2px solid var(--line-strong); border-radius:0 8px 8px 0; opacity:.42; transition:opacity .4s, border-color .4s, background .4s}
.ba-pains li.on{opacity:1; border-left-color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent)}
.ba-pains b{font-size:16px; line-height:1.4; color:var(--strong); font-weight:600}
.ba-pains span{font-size:14.5px; color:var(--muted)}
.ba-frame{width:100%; max-height:calc(100svh - 120px)}
.ba-bar{width:100%; margin-top:8px}

/* bento */
.bento{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px}
.btl{position:relative; display:flex; flex-direction:column; gap:8px; padding:28px; border-radius:18px; border:1px solid var(--line); background:var(--panel); overflow:hidden; min-width:0; transition:border-color .3s, transform .4s cubic-bezier(.16,1,.3,1)}
.btl:hover{border-color:var(--accent-line); transform:translateY(-4px)}
.btl::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%)}
.btl:hover::after{opacity:1}
.btl h3{margin:0; font-size:20px; letter-spacing:-.02em; font-weight:600; color:var(--strong)}
.btl p{margin:0; font-size:15px; line-height:1.55; color:var(--muted); max-width:46ch}
.t-wide{grid-column:span 4} .t-sq{grid-column:span 2} .t-full{grid-column:span 6} .btl.t-ic{grid-column:span 2}
.t-img{margin-top:auto; padding-top:24px; margin-right:-28px; margin-bottom:-28px}
.t-full .t-img{margin-left:-28px}
.t-img img{display:block; width:100%; height:auto; border-radius:12px 0 0 0; border:1px solid var(--line-strong); border-right:0; border-bottom:0; box-shadow:0 -20px 60px -30px rgba(0,0,0,.6)}
.t-full .t-img img{border-radius:12px 12px 0 0; border-right:1px solid var(--line-strong)}
.t-sq .t-img img{border-radius:12px 0 0 0}
.t-ic svg{width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px; filter:drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 45%, transparent))}
.t-ic .t-ic{display:block}

/* questions */
.faq-g{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:start}
.faq-l{display:flex; flex-direction:column; gap:14px; position:sticky; top:96px}
.faq-l .note{margin-top:24px}
.faq-acc{border-top:1px solid var(--line)}
.faq-acc details{border-bottom:1px solid var(--line)}
.faq-acc summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 0; font-size:18px; font-weight:600; color:var(--strong); letter-spacing:-.01em}
.faq-acc summary::-webkit-details-marker{display:none}
.faq-acc summary::after{content:"+"; flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-strong); font:400 18px var(--f-body); color:var(--accent); transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s}
.faq-acc details[open] summary::after{transform:rotate(45deg); background:var(--accent-soft)}
.faq-acc details p{margin:0; padding:0 48px 24px 0; font-size:16px; line-height:1.65; color:var(--muted)}
.faq-acc details[open] p{animation:faqIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes faqIn{from{opacity:0; transform:translateY(-6px)}}

/* closing and footer */
.cta-x .lp-h{font-size:56px; line-height:1}
.land-foot{display:flex; align-items:center; gap:12px 24px; flex-wrap:wrap; padding-block:32px 40px; font-size:13px; color:var(--faint)}
.land-foot .logo{height:28px; display:inline-flex}
.land-foot .logo img{height:100%; width:auto}
.land-foot nav{margin-left:auto; display:flex; gap:20px}
.land-foot a{color:var(--muted); text-decoration:none} .land-foot a:hover{color:var(--strong)}

/* sign-up opens in a window */
.auth-modal{position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none}
.auth-modal.open{visibility:visible; pointer-events:auto}
.am-scrim{position:absolute; inset:0; background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); opacity:0; transition:opacity .35s}
.auth-modal.open .am-scrim{opacity:1}
.am-sheet{position:absolute; left:50%; top:50%; width:min(460px, calc(100% - 32px)); max-height:calc(100svh - 32px); overflow-y:auto; overscroll-behavior:contain; border-radius:14px; transform:translate(-50%, -46%) scale(.96); opacity:0; transition:transform .5s cubic-bezier(.16,1,.3,1), opacity .3s}
.auth-modal.open .am-sheet{transform:translate(-50%, -50%); opacity:1}
.am-sheet .auth-card{background:var(--surface); -webkit-backdrop-filter:none; backdrop-filter:none; padding:24px; padding-top:20px}
.am-x{position:absolute; top:12px; right:12px; z-index:3; width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--muted); font-size:20px; line-height:1; cursor:pointer; display:grid; place-items:center}
.am-x:hover{color:var(--strong)}
.am-sheet .seg{margin-right:40px}
#authAnchor{scroll-margin-top:0}

@media (max-width: 1100px){
  .lt-nav{display:none}
  .lt-in{grid-template-columns:1fr auto}
}
@media (max-width: 900px){
  .land .sec{padding-block:72px}
  .land .lp-h,.cta-x .lp-h{font-size:28px}
  .sec-h{margin-bottom:40px}
  .sec-p,.hero2 .lead,.hstep-t > p{font-size:14px}
  .hero2{padding-block:56px 40px; gap:20px}
  .hero2 h1{font-size:clamp(40px, 12vw, 56px)}
  .h-cta{width:100%; flex-direction:column}
  .h-cta .btn{width:100%; justify-content:center}
  .shot-wrap{padding-bottom:56px}
  .shot{border-radius:10px}
  .shot-bar{height:26px} .shot-bar i{width:7px; height:7px} .shot-bar span{display:none}
  .phone{width:31%; right:calc(var(--gr) - 6px); bottom:20px; border-radius:22px; padding:4px} .phone img{border-radius:18px}
  .f1{left:var(--gl); top:auto; bottom:6px} .f2{display:none}
  .roles{gap:8px 18px; padding-block:28px} .roles p{width:100%; text-align:center} .roles li{font-size:13.5px}
  .hsteps{gap:72px}
  .hstep{grid-template-columns:minmax(0,1fr); gap:28px}
  .hstep.rev .hstep-t{order:0}
  .hstep h3{font-size:24px}
  .ticks li{font-size:14px}
  .frame{padding:20px}
  .hstep.tall .frame img{height:360px}
  .ba-track{height:200vh}
  .ba-sticky{grid-template-columns:minmax(0,1fr); gap:14px; align-content:center; padding-top:68px}
  .ba-pains li:not(.on){display:none}
  .ba-pains li{padding:10px 12px}
  .ba-pains b{font-size:14.5px} .ba-pains span{font-size:13px}
  .ba-side{gap:10px} .ba-side .lp-h{margin-bottom:2px}
  .ba-frame{order:2; width:min(100%, calc((100svh - 330px) * 4 / 5)); aspect-ratio:4 / 5; justify-self:center}
  .ba-side .ba-bar{order:3}
  .bento{grid-template-columns:minmax(0,1fr); gap:12px}
  .t-wide,.t-sq,.t-full,.btl.t-ic{grid-column:auto}
  .btl{padding:22px} .t-img{margin-right:-22px; margin-bottom:-22px} .t-full .t-img{margin-left:-22px}
  .btl p{font-size:14px}
  .faq-g{grid-template-columns:minmax(0,1fr); gap:32px}
  .faq-l{position:static}
  .faq-acc summary{font-size:16px; padding:18px 0}
  .faq-acc details p{font-size:14px; padding-right:0}
  .land-foot nav{margin-left:0; width:100%}
  .am-sheet{left:0; right:0; top:auto; bottom:0; width:100%; max-height:92svh; border-radius:20px 20px 0 0; transform:translateY(100%); opacity:1}
  .auth-modal.open .am-sheet{transform:none}
  .am-sheet .auth-card{border-radius:20px 20px 0 0; padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width: 420px){
  .lt-cta{display:none}
}
@media (prefers-reduced-motion: reduce){ .roles li{animation:none!important} html{scroll-behavior:auto} }
.t-wide .t-img img{max-height:340px; object-fit:cover; object-position:top left}
.t-sq .t-img img{max-height:340px; object-fit:cover; object-position:top left}
@media (max-width: 900px){ .t-wide .t-img img,.t-sq .t-img img{max-height:260px} }
.lfx .shot-wrap.live .xchip{filter:none}

/* ================= round 14: calendar picks and follow-up timing ================= */
.calpick{display:flex; flex-direction:column; gap:8px; margin-top:16px; padding:14px; border-radius:8px; border:1px dashed var(--accent-line); background:color-mix(in srgb, var(--accent) 5%, transparent)}
.calpick .fld-l{display:inline-flex; align-items:center; gap:6px; color:var(--strong)}
.calpick .fld-l svg{width:14px; height:14px; color:var(--accent)}
.calpick .cp-date{display:none; max-width:220px}
.calpick:has(input[value="pick"]:checked) .cp-date{display:block}
.calpick:has(input[data-calpk]:not([value=""]):checked){border-style:solid; border-color:var(--accent-line)}
.rhy{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted)}
.rhy select{height:30px; padding:0 8px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); font-size:12.5px; max-width:240px}
.caltodo .card-h h2{display:inline-flex; align-items:center; gap:8px}
.caltodo .card-h h2 svg{width:16px; height:16px; color:var(--accent)}
.caltodo .missed{display:flex; flex-direction:column; gap:8px; padding:12px; margin-bottom:12px; border-radius:8px; border:1px solid color-mix(in srgb, var(--late) 35%, transparent); background:color-mix(in srgb, var(--late) 6%, transparent)}
.caltodo .row-act{flex-wrap:wrap}
.nmove{align-items:center; gap:6px}
.nmove .muted{font-size:12px; margin-right:2px}
.next-box.sched{border-style:dashed}
.next-box.sched .fld-l{display:inline-flex; align-items:center; gap:6px}
.next-box.sched .fld-l svg{width:14px; height:14px; color:var(--accent)}
.next-box.sched .opts{gap:6px}
@media (max-width: 600px){ .rhy span{display:none} .rhy select{max-width:200px} .caltodo .card-h{flex-wrap:wrap; gap:8px} }
/* three questions: calendar, follow-ups, bell */
.calpick{gap:14px}
.cq{display:flex; flex-direction:column; gap:8px}
.cq .fld-l{display:inline-flex; align-items:center; gap:7px; color:var(--strong); font-weight:600}
.cq .fld-l svg{width:14px; height:14px; color:var(--accent)}
.cq-n{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--on-accent); font:600 11px var(--f-mono)}
.calpick .cq-2,.calpick .cq-3{display:none; padding-top:14px; border-top:1px dashed var(--accent-line)}
.calpick:has([data-calpk]:not([value=""]):checked) .cq-2,.calpick:has([data-calpk]:not([value=""]):checked) .cq-3{display:flex; animation:cqIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes cqIn{from{opacity:0; transform:translateY(-6px)}}
.cq-prev{list-style:none; margin:2px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.cq-prev:empty{display:none}
.cq-prev li{display:flex; flex-direction:column; gap:1px; padding:7px 10px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface-2); font-size:12px; color:var(--muted); position:relative}
.cq-prev li b{font-size:12.5px; color:var(--strong); font-weight:600}
.cq-prev li:first-child{border-color:var(--accent-line); background:var(--accent-soft)}
.bellrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; color:var(--ink)}
.bellrow svg{width:14px; height:14px; color:var(--accent); vertical-align:-2px}
.bellrow select{height:32px; padding:0 8px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink)}
.switch{position:relative; display:inline-block; width:40px; height:22px; flex:none; cursor:pointer}
.switch input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.switch span{position:absolute; inset:0; border-radius:999px; background:var(--surface-3); border:1px solid var(--line-strong); transition:background .2s, border-color .2s}
.switch span::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--muted); transition:transform .25s cubic-bezier(.16,1,.3,1), background .2s}
.switch input:checked + span{background:var(--accent); border-color:var(--accent)}
.switch input:checked + span::after{transform:translateX(18px); background:#fff}
.switch input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.plan-box{display:flex; flex-direction:column; gap:10px}
.plan-box .opts{gap:6px}
.row.plan{opacity:.75}
.row.plan .dot{background:transparent!important; border:1.5px dashed var(--c)}
.chip.k-plan{background:transparent; border:1px dashed color-mix(in srgb, var(--c) 60%, transparent)}
.row .bz svg{width:12px; height:12px; vertical-align:-1px; color:var(--accent)}
/* hunt time you control */
.tset{display:flex; flex-direction:column; gap:10px; width:100%; padding:14px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface-2)}
.tset-h{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.tset-h b{font:600 22px var(--f-mono); color:var(--strong); letter-spacing:-.02em; display:inline-block}
.tset-h b.bump{animation:bump .35s cubic-bezier(.16,1,.3,1)}
@keyframes bump{40%{transform:scale(1.18); color:var(--accent)}}
.tset-adj{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px}
.tset-adj .btn{justify-content:center; font-family:var(--f-mono); font-weight:600}
.tset .limits{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-start}
.tset-o{display:none; gap:6px}
.tset:has([data-hlimother]:checked) .tset-o{display:flex}
.tset-o .inp{flex:1; min-width:0; height:34px}
.tset.nudge{animation:nudge .5s}
@keyframes nudge{30%,70%{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent)}}
.tmr.nolim .tset{border-color:var(--accent-line); box-shadow:0 0 0 3px var(--accent-soft)}
.btn.dim{opacity:.55}

/* ================= round 17: client time zones ================= */
.loc3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px}
.loc3 select{width:100%; min-width:0; height:36px; padding:0 8px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink); font-size:13px}
.loc3 select[hidden]{display:none}
.calpick .cq-loc{display:none; padding-top:14px; border-top:1px dashed var(--accent-line)}
.calpick:has([data-calpk]:not([value=""]):checked) .cq-loc{display:flex; animation:cqIn .45s cubic-bezier(.16,1,.3,1)}
.cq-loc .fld-l svg,.plan-box .fld-l svg{width:14px; height:14px; color:var(--accent)}
.besttime{display:flex; flex-direction:column; gap:6px; margin-top:4px; padding:12px; border-radius:8px; border:1px solid var(--accent-line); background:var(--accent-soft)}
.besttime > b{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--strong)}
.besttime > b svg{width:14px; height:14px; color:var(--accent)}
.besttime p{margin:0; font-size:13px; color:var(--ink)}
.besttime small{font-size:11.5px; line-height:1.45}
.bt-pick{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:13px}
.bt-pick b{color:var(--accent)}
.bt-warn{padding:8px 10px; border-radius:6px; background:color-mix(in srgb, var(--late) 10%, transparent); color:var(--ink)!important}
.bt-warn.soft{background:color-mix(in srgb, var(--today) 10%, transparent)}
.bt-none{margin:0; display:flex; align-items:center; gap:6px} .bt-none svg{width:14px; height:14px}
.tzl{font:500 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent); padding:3px 7px; border-radius:5px; border:1px solid var(--accent-line)}
.cq-prev li small{font:500 10.5px var(--f-mono); color:var(--muted)}
/* converter page */
.tzgrid{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:end}
.tzside{display:flex; flex-direction:column; gap:8px; min-width:0}
.tzside .loc3{grid-template-columns:minmax(0,1fr)}
.tzside .two{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.tzside .inp{height:36px}
.tzswap{width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--accent); display:grid; place-items:center; cursor:pointer; margin-bottom:2px; transition:transform .35s cubic-bezier(.16,1,.3,1)}
.tzswap:hover{transform:rotate(180deg)}
.tzswap svg{width:18px; height:18px}
.tzres{display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:center; margin-top:18px; padding:18px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface-2)}
.tzres > div{display:flex; flex-direction:column; gap:2px; min-width:0}
.tzres small{font:500 11px var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.tzres b{font:600 clamp(26px, 4vw, 40px) var(--f-mono); letter-spacing:-.03em; color:var(--strong)}
.tzr-b b{color:var(--accent)}
.tzres span{font-size:13px; color:var(--soft)}
.tzr-eq{font:500 24px var(--f-mono); color:var(--faint)!important}
.tzr-f{display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; margin:12px 0}
.tzst{display:inline-flex; align-items:center; font:500 11px var(--f-mono); letter-spacing:.04em; padding:4px 8px; border-radius:5px; border:1px solid var(--line-strong); color:var(--muted)}
.tzst.k-best{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft)}
.tzst.k-work{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent)}
.tzst.k-eve{color:var(--today)}
.tzst.k-wk{color:var(--s-sent)}
.wcg{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:10px}
.wc{display:flex; flex-direction:column; gap:4px; padding:14px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); min-width:0}
.wc.me{border-color:var(--accent-line); background:var(--accent-soft)}
.wc.k-sleep{opacity:.8}
.wc-h{display:flex; justify-content:space-between; gap:6px}
.wc-h b{display:block; color:var(--strong); font-size:14px}
.wc-h small{font-size:11.5px; color:var(--muted)}
.wc-t{font:600 28px var(--f-mono); letter-spacing:-.03em; color:var(--strong)}
.wc-d{font-size:12px; color:var(--muted)}
.wc .tzst{align-self:flex-start; margin-top:4px}
.wc-best{margin:4px 0 0; font-size:12px; color:var(--soft); display:flex; gap:5px; align-items:flex-start}
.wc-best svg{width:12px; height:12px; color:var(--accent); flex:none; margin-top:2px}
/* left panel clock */
.sclock{display:flex; align-items:center; gap:10px; width:calc(100% - 8px); margin:14px 4px 4px; padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface-2); color:var(--muted); cursor:pointer; text-align:left}
.sclock:hover{border-color:var(--accent-line)}
.sclock > svg{width:15px; height:15px; color:var(--accent); flex:none}
.sclock span{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.sclock b{font:600 12px var(--f-mono); color:var(--strong)}
.sclock small{font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media (max-width: 760px){
  .loc3{grid-template-columns:minmax(0,1fr)}
  .tzgrid{grid-template-columns:minmax(0,1fr)}
  .tzswap{justify-self:center; transform:rotate(0)}
  .tzres{grid-template-columns:minmax(0,1fr); text-align:center}
  .tzres > div{align-items:center}
}

/* ================= round 18: where to hunt ================= */
.where-set .two{gap:12px}
.where-set .loc3{grid-template-columns:repeat(3, minmax(0,1fr))}
.where-set select{width:100%; min-width:0; height:36px; padding:0 8px; border-radius:6px; border:1px solid var(--line-strong); background:var(--surface-2); color:var(--ink)}
.wtabs{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px}
.wtab{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:7px; border:1px solid var(--line-strong); background:var(--surface); color:var(--soft); font:500 13px var(--f-body); cursor:pointer}
.wtab .cnt{font:500 11px var(--f-mono); color:var(--faint)}
.wtab.on{border-color:var(--accent); color:var(--strong); background:var(--accent-soft)}
.spots{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-bottom:12px}
.spot{display:flex; flex-direction:column; gap:12px; padding:18px; border-radius:12px; border:1px solid var(--line); background:var(--panel); min-width:0}
.spot-h{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.spot-h b{display:block; font-size:16px; color:var(--strong); letter-spacing:-.01em}
.spot-h small{display:block; margin-top:3px; font-size:12.5px; color:var(--muted); line-height:1.45}
.spot-b{flex:none; font:500 10.5px var(--f-mono); letter-spacing:.03em; padding:4px 7px; border-radius:5px; border:1px solid var(--line-strong); color:var(--muted); max-width:46%; text-align:right}
.spot-b.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent)}
.spot-q{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.spot-q .fld-l{width:100%}
.spot-q .chip-link{height:auto; min-height:26px; padding:4px 9px; white-space:normal; text-align:left; font-family:var(--f-mono); font-size:11.5px}
.spot-q .chip-link svg{width:11px; height:11px; flex:none}
.spot-d{border-top:1px solid var(--line); padding-top:10px}
.spot-d summary{cursor:pointer; font-weight:600; font-size:13.5px; color:var(--accent); list-style:none}
.spot-d summary::-webkit-details-marker{display:none}
.spot-d summary::after{content:" +"} .spot-d[open] summary::after{content:" −"}
.spot-g{margin-top:10px}
.spot-g ul{margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--ink); display:flex; flex-direction:column; gap:4px}
.spot-g p{margin:6px 0 0; font-size:13px; color:var(--ink)}
.spot-g.avoid p{color:color-mix(in srgb, var(--late) 80%, var(--ink))}
.rules{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:8px; font-size:14px; color:var(--ink)}
.rules b{color:var(--strong)}
.where-cta{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; border:1px dashed var(--accent-line); background:var(--accent-soft)}
.where-cta .ic{width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:var(--accent); color:var(--on-accent); flex:none}
.where-cta .ic svg{width:18px; height:18px}
.where-cta b{display:block; color:var(--strong)} .where-cta small{display:block; color:var(--muted); font-size:12.5px}
.where-cta > svg{margin-left:auto; width:16px; height:16px; color:var(--accent); flex:none}
@media (max-width: 1100px){ .spots{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 700px){ .spots{grid-template-columns:minmax(0,1fr)} .where-set .loc3{grid-template-columns:minmax(0,1fr)} .where-set .two{grid-template-columns:minmax(0,1fr)} }
.spots{align-items:start}
/* sign-up page: where to hunt + more feature tiles */
.wh-g{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-bottom:24px}
.wh-c{padding:22px; border-radius:16px; border:1px solid var(--line); background:var(--panel); min-width:0}
.wh-t{display:inline-block; font:500 11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; padding:4px 8px; border-radius:5px; border:1px solid var(--line-strong); color:var(--muted); margin-bottom:12px}
.wh-t.ok{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent)}
.wh-c ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.wh-c li{display:flex; flex-direction:column; gap:2px}
.wh-c li b{font-size:15px; color:var(--strong)} .wh-c li span{font-size:13.5px; color:var(--muted)}
.frame.wide{padding:28px}
.t-half{grid-column:span 3}
.t-half .t-img img{max-height:300px; object-fit:cover; object-position:top left}
.t-sq .t-img img{max-height:420px}
@media (max-width: 900px){ .wh-g{grid-template-columns:minmax(0,1fr)} .btl.t-half{grid-column:auto} .t-half .t-img img{max-height:240px} .frame.wide{padding:14px} }

/* ================= round 19: money message up top, premium motion ================= */
.c1{left:5%; top:22%} .c2{left:5%; top:60%}
@media (max-width: 900px){ .c1{left:auto; right:4%; top:10%} }
/* headline underline that draws itself */
.hero2 h1 em{display:inline-block; position:relative}
.hero2 h1 em::after{content:""; position:absolute; left:2%; right:2%; bottom:-.06em; height:.07em; border-radius:99px; background:linear-gradient(90deg, transparent, var(--accent) 15%, #ffc59a 50%, var(--accent) 85%, transparent); box-shadow:0 0 24px color-mix(in srgb, var(--accent) 70%, transparent); transform:scaleX(0); transform-origin:0 50%}
.lfx .hero2 h1 em::after{animation:uline 1.1s cubic-bezier(.65,0,.35,1) 1.05s forwards}
.land:not(.lfx) .hero2 h1 em::after{transform:none}
@keyframes uline{to{transform:scaleX(1)}}
/* stats under the headline */
.hstats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; width:min(860px, 100%); margin-top:10px; border-radius:14px; overflow:hidden; border:1px solid var(--line-strong); background:var(--line-strong)}
.hst{display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); text-align:left; min-width:0; position:relative}
.hst b{font:600 30px var(--f-mono); letter-spacing:-.04em; color:var(--accent); font-variant-numeric:tabular-nums; line-height:1.05}
.hst span{font-size:13.5px; color:var(--ink); line-height:1.4}
.hst small{font:500 10.5px var(--f-mono); letter-spacing:.04em; color:var(--faint); margin-top:auto}
/* soft moving light in the hero */
.x-aur{position:absolute; inset:0; overflow:hidden; filter:blur(70px); opacity:.55}
.x-aur i{position:absolute; width:46vw; height:46vw; max-width:720px; max-height:720px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 38%, transparent), transparent)}
.x-aur i:first-child{left:-8%; top:-18%}
.x-aur i:last-child{right:-10%; top:8%; background:radial-gradient(closest-side, color-mix(in srgb, #ff9b45 30%, transparent), transparent)}
.lfx .x-aur i:first-child{animation:aur1 22s ease-in-out infinite alternate} .lfx .x-aur i:last-child{animation:aur2 26s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(18vw, 14vh) scale(1.2)}}
@keyframes aur2{to{transform:translate(-16vw, 18vh) scale(.85)}}
:root[data-theme="light"] .x-aur{opacity:.35}
/* product shot leans toward the pointer */
.shot{transform:rotateX(calc((1 - var(--sp, 0)) * 16deg + var(--ry, 0deg))) rotateY(var(--rx, 0deg)) scale(calc(.92 + var(--sp, 0) * .08))}
.phone{transform:translate3d(var(--px, 0px), calc((1 - var(--sp, 0)) * 70px + var(--py, 0px)), 0)}
.shot-wrap .xchip{translate:calc(var(--px, 0px) * -1.4) calc(var(--py, 0px) * -1.4)}
/* cost calculator */
.cost-g{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:20px; align-items:stretch}
.cost-in,.cost-out{position:relative; padding:28px; border-radius:18px; border:1px solid var(--line); background:var(--panel); min-width:0}
.cost-in{display:flex; flex-direction:column; gap:20px}
.cq-f{display:flex; flex-direction:column; gap:8px}
.cq-f .fld-l{color:var(--strong); font-weight:600}
.cost-in .opts{gap:6px}
.cost-in .opt span{min-width:52px; justify-content:center; font-family:var(--f-mono)}
.cost-out{display:flex; flex-direction:column; gap:22px; overflow:hidden; background:radial-gradient(80% 90% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%), var(--panel); border-color:var(--accent-line)}
.co-big > span,.co-row > div > span{display:block; font:500 11px var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.co-big b{display:block; font:600 clamp(64px, 9vw, 112px)/1 var(--f-mono); letter-spacing:-.05em; color:var(--strong); margin-top:6px; text-shadow:0 0 40px color-mix(in srgb, var(--accent) 35%, transparent)}
.co-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding-top:18px; border-top:1px solid var(--line)}
.co-row b{display:block; font:600 28px/1.1 var(--f-mono); letter-spacing:-.03em; color:var(--accent); margin-top:6px}
.co-row div:not(:first-child) b{color:var(--strong)}
.co-row small{font-size:12px; color:var(--faint)}
.co-fu{display:flex; gap:10px; align-items:center; font-size:15px; color:var(--ink)}
.co-fu svg{width:20px; height:20px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.co-fu b{font:600 17px var(--f-mono); color:var(--strong)}
.cost-out .btn{align-self:flex-start; margin-top:auto}
/* rolling digits */
.odo{white-space:nowrap}
.od{display:inline-block; height:1em; line-height:1; overflow:hidden; vertical-align:-.12em}
.od-s{display:flex; flex-direction:column; transition:transform 1s cubic-bezier(.16,1,.3,1)}
.od-s i{font-style:normal; height:1em; line-height:1; display:block}
.od-c{display:inline-block}
/* glowing border that follows the pointer */
.land .btl::before,.land .mb::before,.land .cost-in::before,.land .cost-out::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s; z-index:2;
  background:radial-gradient(260px circle at var(--mx, -300px) var(--my, -300px), color-mix(in srgb, var(--accent) 90%, #fff 10%), transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0)}
.land .btl:hover::before,.land .mb:hover::before,.land .cost-in:hover::before,.land .cost-out:hover::before{opacity:1}
/* screenshots open like a shutter with a scan line */
.lfx .frame.lr{opacity:1; filter:none; transform:none}
.lfx .frame.lr img{clip-path:inset(0 0 100% 0); transform:scale(1.06); transition:clip-path 1.3s cubic-bezier(.77,0,.18,1) var(--d,0ms), transform 1.8s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.lfx .frame.lr.in img{clip-path:inset(0 0 0 0); transform:none}
.frame::after{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent), #ffd2b0, var(--accent), transparent); box-shadow:0 0 24px 4px color-mix(in srgb, var(--accent) 60%, transparent); opacity:0; pointer-events:none; z-index:3}
.lfx .frame.lr.in::after{animation:scan 1.3s cubic-bezier(.77,0,.18,1) var(--d,0ms) forwards}
@keyframes scan{0%{top:0; opacity:1} 92%{opacity:1} 100%{top:100%; opacity:0}}
.lfx .btl.lr .t-img{clip-path:inset(100% 0 0 0); transition:clip-path 1.1s cubic-bezier(.77,0,.18,1) calc(var(--d,0ms) + 200ms)}
.lfx .btl.lr.in .t-img{clip-path:inset(0 0 0 0)}
.t-img{overflow:hidden}
.t-img img{will-change:transform}
@media (max-width: 900px){
  .hstats{grid-template-columns:minmax(0,1fr)}
  .hst{flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:12px 14px}
  .hst b{font-size:22px} .hst span{flex:1; min-width:150px; font-size:13px} .hst small{width:100%}
  .cost-g{grid-template-columns:minmax(0,1fr)}
  .cost-in,.cost-out{padding:20px}
  .co-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .co-row div:first-child{grid-column:1 / -1}
  .cost-out .btn{align-self:stretch; justify-content:center}
}
@media (prefers-reduced-motion: reduce){ .x-aur i{animation:none!important} .frame::after{display:none} }

/* ===== proposal helper ===== */
.prop-info{margin-top:14px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); font-size:14px}
.prop-info p{margin:0}
.tx.prop-ta,.tx.prop-out{height:auto; padding:10px 12px; line-height:1.55; resize:vertical; min-height:60px; display:block}
.tx.prop-out{font-size:12.5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; min-height:260px}
.pc-first{padding:12px 14px; border-radius:12px; border:1px dashed var(--line-strong); background:var(--surface-2); margin-bottom:12px}
.pc-first p{margin:6px 0 0; font-size:14px; line-height:1.55}
.pc-first i{color:var(--muted)}
.pc-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.pc-list li{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.pc-list li>span{flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center}
.pc-list li>span .i{width:13px; height:13px}
.pc-list li.ok>span{background:rgba(52,199,89,.16); color:#2fa84f}
.pc-list li.no>span{background:rgba(255,90,60,.16); color:#e5502f}
.pc-list small{display:block; color:var(--muted); font-size:12.5px; margin-top:2px}
.prop-run{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px}
.prop-run .hint{margin:0; flex:1 1 220px}
.prop-run .btn:disabled{opacity:.45; cursor:not-allowed}
.prop-new{animation:propIn .6s cubic-bezier(.2,.8,.2,1) both}
@keyframes propIn{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}
.pc-score{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; margin-bottom:12px; font-size:14px}
.pc-score.ok{background:rgba(52,199,89,.14); color:var(--ink)}
.pc-score.no{background:rgba(255,140,40,.14); color:var(--ink)}
.pc-score span{color:var(--muted); font-size:12.5px}
.pc-list em{font-style:normal; font-weight:600; color:var(--ink)}
.pc-fix{margin-top:14px; padding:14px 16px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); font-size:14px}
.pc-fix p{margin:4px 0 10px; color:var(--muted); font-size:13px}
@media (prefers-reduced-motion: reduce){.prop-new{animation:none}}

/* ===== why the small voice ===== */
.why-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:32px}
.why-c{position:relative; padding:28px 26px 30px; border-radius:16px; border:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; gap:10px; min-width:0; overflow:hidden}
.why-c::before{content:""; position:absolute; left:0; top:0; height:2px; width:42%; background:linear-gradient(90deg,var(--accent),transparent)}
.why-n{font:500 11.5px var(--f-mono); letter-spacing:.12em; color:var(--accent)}
.why-c h3{font-size:26px; letter-spacing:-.02em; margin:0}
.why-c p{margin:0; font-size:16px; line-height:1.6; color:var(--soft)}
.why-goal{margin:0; font-size:18px; line-height:1.6; color:var(--soft); max-width:62ch}
.why-goal b{color:var(--strong)}
@media (max-width:860px){ .why-grid{grid-template-columns:minmax(0,1fr)} .why-c h3{font-size:22px} .why-c p,.why-goal{font-size:14px} }