/* Cleanform site styles. One file for every page: the home page links it, and scripts/build.mjs
   and site-tools/build_about.py pick the link up from there. Tokens first, then components in
   page order. Paper pages with two ink zones (the hero and the closing call to action). */
/* ---------- tokens: paper pages, two ink zones (hero, final CTA). Single deliberate theme. ---------- */
:root{
  color-scheme:light;
  --bg:#F3F4F1; --surface:#FFFFFF; --ink:#15171B; --muted:#5F6570; --line:#D9DBD6;
  --accent:#00B3A1; --accent-text:#00796D; --accent-soft:#E3F7F4; --problem:#E67A63;
  --sans:Onest,"Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono","SF Mono",Menlo,Consolas,monospace;
  --r-ctl:8px; --r-card:12px; --r-panel:16px; --wrap:1120px; --gutter:20px;
}
.ink-zone{color-scheme:dark;--bg:#15171B;--surface:#20232A;--ink:#F3F4F1;--muted:#A3AAB4;--line:#2C3038;--accent:#19D3BE;--accent-text:#19D3BE;--accent-soft:rgba(25,211,190,.10)}
*{box-sizing:border-box}
[hidden]{display:none!important}   /* the menu sheet, demo views, form states and the phone teaser all rely on this */
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
h1{font-size:clamp(44px,6vw,76px);line-height:1;letter-spacing:-.035em}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.08;letter-spacing:-.025em;max-width:20ch}
h3{font-size:20px;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
section{padding-block:96px;background:var(--bg);color:var(--ink)}
.sub{color:var(--muted);font-size:18px;line-height:1.55;max-width:60ch;margin-top:14px}
.head{display:grid;gap:0;margin-bottom:48px}
.mono{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent-text);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:2.5px;background:var(--accent);flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-ctl);font:600 16px var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s;white-space:nowrap}
.btn.primary{background:var(--accent);color:#15171B;border-color:var(--accent)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 92%,#000)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--surface)}
.ink-zone .btn.ghost:hover{background:var(--surface)}
.btn.small{height:40px;padding:0 16px;font-size:15px}
.link{font-weight:600;text-decoration:none;color:var(--accent-text)}
.link:hover{text-decoration:underline}

/* ---------- nav ---------- */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--bg);transition:background-color .2s,box-shadow .2s;color:var(--ink)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;transition:height .2s}
nav.compact{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 -1px 0 var(--line)}
nav.compact .wrap{height:56px}
.logo{display:flex;align-items:center;gap:7px;font-weight:700;letter-spacing:-.04em;font-size:22px;line-height:1;text-decoration:none}
.mark{width:22px;height:22px;flex:none;fill:var(--ink)}
.mark .new{fill:var(--accent)}
nav .links{display:flex;gap:28px;align-items:center;font-size:15px;color:var(--muted)}
nav .links a:not(.btn){text-decoration:none}
nav .links a:not(.btn):hover{color:var(--ink)}
nav .links .btn{height:40px;padding:0 16px;font-size:15px}
.menu-btn{display:none;height:40px;padding:0 14px;border-radius:var(--r-ctl);border:1px solid var(--line);background:transparent;color:inherit;font:600 15px var(--sans);cursor:pointer}
.sheet{position:fixed;inset:0;z-index:50;background:var(--bg);color:var(--ink);padding:calc(24px + env(safe-area-inset-top,0px)) 20px 24px;display:grid;grid-template-rows:auto 1fr auto;gap:24px}
.sheet .top{display:flex;justify-content:space-between;align-items:center}
.sheet .list{display:grid;gap:4px;align-content:start;font-size:24px;font-weight:700;letter-spacing:-.02em}
.sheet .list a{text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.sheet .list a.minor{font-size:17px;font-weight:600;color:var(--muted)}
.sheet .foot{display:grid;gap:12px}
@media (max-width:760px){nav .links a:not(.btn){display:none}nav .links{gap:10px}.menu-btn{display:inline-flex;align-items:center}}
@media (max-width:480px){nav .links .btn{display:none}}

/* ---------- hero ---------- */
.hero{padding-block:72px 96px;overflow:clip;position:relative}
.hero{background:var(--bg);color:var(--ink)}   /* the hero is a <header> here (a <section> in the artifact), so it needs the section's paint */
.hero .wrap{position:relative;z-index:1}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.3) 42%,rgba(0,0,0,.75) 60%,#000 100%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.3) 42%,rgba(0,0,0,.75) 60%,#000 100%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero .eyebrow{margin-bottom:22px}
.hero h1{margin-bottom:24px}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.55;color:var(--muted);max-width:52ch;margin-bottom:30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.promise{display:flex;gap:8px 22px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.promise span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:9px;vertical-align:1px}
.diagram{position:relative}
.cap{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:14px;min-height:20px}
.cap b{font-weight:500;color:var(--ink)}
.cap b.problem{color:var(--problem)}
.stage{position:relative;aspect-ratio:10/8;width:100%}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:14px;padding:8px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 14px 12px;display:flex;flex-direction:column;justify-content:space-between;font-weight:600;font-size:15px;line-height:1.2;will-change:transform,opacity}
.tile small{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:6px}
.tile small::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--problem)}
.tile.plain small::before{background:var(--line)}
.links-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.links-svg path{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.85}
.links-svg circle{fill:var(--accent)}
.core{position:absolute;left:50%;top:50%;width:150px;height:150px;translate:-50% -50%;scale:0;opacity:0;border-radius:var(--r-panel);background:var(--surface);border:1px solid var(--accent);display:grid;place-items:center}
.core .blocks{display:grid;grid-template-columns:repeat(3,18px);gap:5px}
.core .blocks i{width:18px;height:18px;border-radius:5px;background:var(--ink)}
.core .blocks i.new{background:var(--accent)}
.core .blocks i.gap{background:transparent}
/* ---------- the hero demo: a small, finished product (Ridgeline Saunas, fictional) ----------
   Its own type scale: 11 meta · 12 secondary · 13 body · 15 titles · 20 figures. Light UI on the ink hero. */
.dash{position:absolute;inset:0;opacity:0;translate:0 24px;border-radius:var(--r-panel);background:#fff;color:#15171B;border:1px solid #D9DBD6;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);overflow:hidden;display:grid;grid-template-rows:34px 1fr;font:13px/1.4 var(--sans);text-align:left;
  --d-line:#E6E8E3;--d-soft:#F4F5F2;--d-muted:#6B7078;--d-accent:#00B3A1;--d-accent-text:#00796D;--d-accent-soft:#E3F7F4}
.dash:not(.live){pointer-events:none}
.dash button{font:inherit;color:inherit;cursor:pointer}
.dash b{font-weight:600}
.dash small{font-size:11px;color:var(--d-muted)}
.dash .n,.dash .kpi b,.dash .badge{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dash .bar{display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--d-line);background:#FAFAF8}
.dash .bar i{width:9px;height:9px;border-radius:50%;background:#DCDED9}
.dash .bar span{margin:0 auto;font:500 11px var(--mono);color:var(--d-muted);background:var(--d-soft);padding:3px 10px;border-radius:6px}
.dash .body{display:grid;grid-template-columns:128px 1fr;min-height:0}

/* sidebar */
.dash .side{border-right:1px solid var(--d-line);background:#FAFAF8;padding:10px 8px;display:flex;flex-direction:column;gap:2px;min-height:0}
.dash .org{display:flex;align-items:center;gap:8px;padding:2px 6px 10px;margin-bottom:4px;border-bottom:1px solid var(--d-line)}
.dash .org > b{width:24px;height:24px;border-radius:6px;background:#15171B;color:#fff;display:grid;place-items:center;font-size:12px}
.dash .org span{font-size:12px;font-weight:600;line-height:1.15}
.dash .org small{display:block;font-weight:400}
.dash .side button{display:flex;align-items:center;gap:8px;width:100%;height:30px;padding:0 8px;border:0;border-radius:6px;background:transparent;text-align:left;font-size:13px;font-weight:500;color:#3A3F46;transition:background-color .12s,color .12s}
.dash .side button:hover{background:#EEF0EC;color:#15171B}
.dash .side button[aria-current=true]{background:var(--d-accent-soft);color:var(--d-accent-text);font-weight:600}
.dash .side svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dash .badge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--d-accent);color:#15171B;font-size:10.5px;font-weight:600;font-style:normal;display:grid;place-items:center}
.dash .badge.warn{background:#FBE5DF;color:#B4432F}
.dash .badge[hidden]{display:none}

/* views */
.dash .main{position:relative;min-height:0;overflow:hidden}
.dash .view{position:absolute;inset:0;padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px;overflow:auto;scrollbar-width:thin}
.dash .vh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.dash .vh h4{margin:0;font-size:15px;font-weight:700;letter-spacing:-.01em}
.dash .rep{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--d-muted)}
.dash .rep i{font:500 10.5px var(--mono);font-style:normal;background:var(--d-soft);padding:2px 6px;border-radius:4px;text-decoration:line-through;text-decoration-color:#E67A63;text-decoration-thickness:1.5px}
.dash .d-note{margin:0;font-size:12px;color:var(--d-muted)}
.dash .ghost{height:28px;padding:0 10px;border:1px solid var(--d-line);border-radius:6px;background:#fff;font-size:12px;font-weight:600;white-space:nowrap;transition:border-color .12s,background-color .12s}
.dash .ghost:hover:not(:disabled){border-color:var(--d-accent);color:var(--d-accent-text)}
.dash .ghost:disabled{background:var(--d-accent-soft);border-color:transparent;color:var(--d-accent-text);cursor:default}

/* today */
.dash .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dash .kpi{display:grid;gap:1px;text-align:left;border:1px solid var(--d-line);border-radius:8px;padding:9px 10px;background:#fff;transition:border-color .12s,box-shadow .12s}
.dash .kpi:hover{border-color:var(--d-accent);box-shadow:0 4px 12px -8px rgba(0,121,109,.5)}
.dash .kpi b{font-size:20px;font-weight:500;letter-spacing:-.03em;line-height:1.2}
.dash .kpi em{font-style:normal;font-size:11px;color:var(--d-accent-text)}
.dash .chart{border:1px solid var(--d-line);border-radius:8px;padding:9px 10px 8px;display:grid;gap:6px}
.dash .ch{display:flex;justify-content:space-between}
.dash .ch .val{color:#15171B;font:500 11px var(--mono)}
.dash .bars{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;align-items:end;height:52px}
.dash .bars i{display:block;height:var(--h);border-radius:3px 3px 1px 1px;background:#D3EFEB;transition:background-color .12s}
.dash .bars i:hover,.dash .bars i.on{background:var(--d-accent)}
.dash .feed{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--d-line);border-radius:8px;overflow:hidden}
.dash .feed li + li{border-top:1px solid var(--d-line)}
.dash .feed button{width:100%;display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;padding:8px 10px;border:0;background:#fff;text-align:left;font-size:12px;transition:background-color .12s}
.dash .feed span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .feed button:hover{background:var(--d-soft)}
.dash .feed em{font-style:normal;font:500 11px var(--mono);color:var(--d-muted);white-space:nowrap}
.dash .dot{width:7px;height:7px;border-radius:2px;background:var(--d-accent)}
.dash .dot.warn{background:#E67A63}

/* tables (ads, inventory, team) */
.dash .table{border:1px solid var(--d-line);border-radius:8px;overflow:hidden}
.dash .tr{display:grid;grid-template-columns:1fr 50px 38px 52px 30px;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--d-line);transition:opacity .15s,background-color .12s}
.dash .tr:first-child{border-top:0}
.dash .tr:hover:not(.th):not(.tf){background:#FAFAF8}
.dash .tr > span{min-width:0}
.dash .tr b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .tr small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .tr .n{text-align:right;font-size:12px}
.dash .th{background:var(--d-soft);padding-block:6px;font:500 10.5px var(--mono);color:var(--d-muted)}
.dash .th span:not(:first-child){text-align:right}
.dash .tf{background:var(--d-soft);font-weight:600;font-size:12px}
.dash .tr.off{opacity:.45}
.dash .tog{justify-self:end;width:30px;height:18px;border-radius:99px;background:#D9DBD6;border:0;position:relative;flex:none;transition:background-color .15s}
.dash .tog::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:left .15s}
.dash .tog[aria-checked=true]{background:var(--d-accent)}
.dash .tog[aria-checked=true]::after{left:14px}

/* texts */
.dash .convos{display:flex;gap:6px}
.dash .convos button{height:28px;padding:0 10px;border:1px solid var(--d-line);border-radius:99px;background:#fff;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.dash .convos button:hover{border-color:var(--d-accent)}
.dash .convos button[aria-current=true]{background:#15171B;border-color:#15171B;color:#fff}
.dash .convos .u{width:6px;height:6px;border-radius:50%;background:var(--d-accent)}
.dash .convos .u[hidden]{display:none}
.dash .thread{flex:1;min-height:0;border:1px solid var(--d-line);border-radius:8px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.dash .tt{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 10px;border-bottom:1px solid var(--d-line)}
.dash .tt b{display:block;font-size:13px}
.dash .tt small{display:block}
.dash .tt small.human{color:#B4432F}
.dash .msgs{padding:10px;display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0;scrollbar-width:thin}
.dash .msg{max-width:82%;padding:7px 10px;border-radius:10px 10px 10px 3px;background:var(--d-soft);font-size:12.5px;line-height:1.4}
.dash .msg.us{align-self:flex-end;border-radius:10px 10px 3px 10px;background:var(--d-accent-soft)}
.dash .msg.sys{align-self:center;max-width:none;background:none;padding:0;font:500 10.5px var(--mono);color:var(--d-muted)}
.dash .msg small{display:block;font-size:10.5px;margin-bottom:2px}
.dash .compose{display:grid;grid-template-columns:1fr auto;gap:6px;padding:8px;border-top:1px solid var(--d-line);margin:0}
.dash .compose input{height:30px;border:1px solid var(--d-line);border-radius:6px;padding:0 10px;font:13px var(--sans);color:#15171B;background:#fff}
.dash .compose input:focus{outline:2px solid var(--d-accent);outline-offset:-1px}
.dash .compose button{height:30px;padding:0 12px;border:0;border-radius:6px;background:var(--d-accent);color:#15171B;font-size:12px;font-weight:600}

/* agents */
.dash .alist{display:grid;gap:8px}
.dash .acard{position:relative;border:1px solid var(--d-line);border-radius:8px;padding:10px 12px;display:grid;gap:2px;padding-right:56px;transition:opacity .15s}
.dash .acard > div{display:flex;align-items:center;gap:8px}
.dash .acard b{font-size:13px}
.dash .acard p{margin:0;font-size:12px;color:#3A3F46}
.dash .acard .tog{position:absolute;right:12px;top:50%;translate:0 -50%}
.dash .acard.off{opacity:.6}
.dash .st{font:500 10.5px var(--mono);padding:1px 6px;border-radius:4px;background:#F0F1EE;color:var(--d-muted)}
.dash .st.on{background:var(--d-accent-soft);color:var(--d-accent-text)}

/* inventory */
.dash .seg{display:inline-flex;align-self:flex-start;padding:2px;border-radius:8px;background:var(--d-soft);gap:2px}
.dash .seg button{height:26px;padding:0 10px;border:0;border-radius:6px;background:transparent;font-size:12px;font-weight:600;color:#3A3F46}
.dash .seg button small{font-family:var(--mono);margin-left:4px}
.dash .seg button[aria-pressed=true]{background:#fff;color:#15171B;box-shadow:0 1px 2px rgba(21,23,27,.12)}
.dash .inv .tr{grid-template-columns:1fr 104px auto}
.dash .stock{display:grid;grid-template-columns:1fr;gap:1px}
.dash .stock i{display:block;height:4px;border-radius:2px;background:#EDEFEB;position:relative;overflow:hidden;margin-bottom:3px}
.dash .stock i::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--p) * 100%);background:var(--d-accent);border-radius:2px}
.dash .stock i.low::after{background:#E67A63}
.dash .stock em{font-style:normal;font-family:var(--sans);font-size:12px;font-weight:600}
.dash .stock em.low{color:#B4432F}
.dash .tr[hidden]{display:none}

/* team */
.dash .people .tr{grid-template-columns:28px 1fr auto}
.dash .av{width:28px;height:28px;border-radius:50%;background:var(--d-soft);display:grid;place-items:center;font:600 11px var(--sans);color:#3A3F46}
.dash .tfoot{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--d-muted)}
.dash .tfoot b{color:var(--d-accent-text)}

/* toast */
.dash .toast{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;padding:9px 12px;border-radius:8px;background:#15171B;color:#fff;font-size:12px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);opacity:0;translate:0 8px;pointer-events:none;transition:opacity .18s,translate .18s}
.dash .toast.show{opacity:1;translate:0 0}
/* the demo, bigger and fuller on desktop. On wide screens it reaches into the right margin; once it is 540px wide
   the "xl" detail appears (a fourth number, lead sources, booked revenue, a lead card, agent activity, what is on the
   way, access). Below that, phones and small laptops, it is exactly the compact demo. */
.diagram{container:demo / inline-size}
.dash .xl{display:none}
.dash .row2,.dash .row3,.dash .tx-row{display:contents}
.dash .side .xl{display:none}
@media (min-width:1100px){
  .hero .diagram{width:max(100%, min(calc(100% + (100vw - var(--wrap)) / 2 - 24px), 800px))}
}
@media (min-width:1100px) and (max-width:1399px){   /* laptops: a little more room for the demo, headline 72px so it stays on two lines */
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:44px}
  .hero h1{font-size:min(72px,6vw)}
}
@container demo (min-width:580px){
  .dash .body{grid-template-columns:136px 1fr}
  .dash .view > *{flex-shrink:0}   /* nothing squeezes: the view scrolls instead */
  .dash .side .me{display:flex;align-items:center;gap:8px;margin-top:auto;padding:10px 6px 2px;border-top:1px solid var(--d-line)}
  .dash .me .av{width:24px;height:24px;font-size:10px;background:#15171B;color:#fff}
  .dash .me span:last-child{font-size:12px;line-height:1.2}
  .dash .me b{display:block}.dash .me small{display:block}
  .dash .view{padding:14px 16px 16px;gap:12px}

  /* today */
  .dash .kpis{grid-template-columns:repeat(4,1fr)}
  .dash .kpi.xl{display:grid}
  .dash .kpi b{font-size:clamp(18px,3.4cqw,24px)}
  .dash .row2{display:grid;grid-template-columns:1.55fr 1fr;gap:8px;flex:1;min-height:0}
  .dash .row2 .chart{display:flex;flex-direction:column;min-height:0}
  .dash .row2 .bars{flex:1;height:auto;min-height:52px;grid-template-rows:1fr}
  .dash .sources{display:flex;flex-direction:column;gap:7px;border:1px solid var(--d-line);border-radius:8px;padding:9px 10px;background:#fff;text-align:left;transition:border-color .12s,box-shadow .12s}
  .dash .sources:hover{border-color:var(--d-accent);box-shadow:0 4px 12px -8px rgba(0,121,109,.5)}
  .dash .src{display:grid;grid-template-columns:1fr 26px;align-items:center;column-gap:8px;row-gap:3px;font-size:12px}
  .dash .src b{font-weight:500;grid-column:1 / -1;grid-row:1;color:#3A3F46}
  .dash .src i{grid-row:2;display:block;height:6px;width:var(--w);border-radius:3px;background:var(--d-accent)}
  .dash .src em{grid-row:2;font:500 11px var(--mono);font-style:normal;text-align:right}
  .dash .feed li.xl{display:block}

  /* ads */
  .dash .tr{grid-template-columns:1fr 48px 34px 48px 64px 30px;gap:6px}
  .dash .tr > .xl.bk{display:none}
  .dash .th > span{white-space:nowrap}
  .dash .feed li.xl:last-child{display:none}   /* one event fewer until there is room */
  .dash .tr > .xl{display:block}
  .dash .th span.xl{text-align:right}
  .dash .pace{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:12px}
  .dash .pace em{font:500 11px var(--mono);font-style:normal;color:#3A3F46}
  .dash .pbar{height:6px;border-radius:3px;background:#EDEFEB;overflow:hidden}
  .dash .pbar i{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--d-accent);border-radius:3px;transition:width .3s}
  .dash .trend{display:flex;flex-direction:column;gap:6px;flex:1;min-height:70px;border:1px solid var(--d-line);border-radius:8px;padding:9px 10px 10px}
  .dash .trend svg{flex:1;width:100%;min-height:0;overflow:visible}
  .dash .trend .ln{fill:none;stroke:var(--d-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .dash .trend .ar{fill:var(--d-accent-soft)}

  /* texts */
  .dash .tx-row{display:grid;grid-template-columns:1fr 172px;gap:8px;flex:1;min-height:0}
  .dash .lead{display:flex;flex-direction:column;gap:2px;border:1px solid var(--d-line);border-radius:8px;padding:10px 12px;min-height:0;overflow:auto}
  .dash .lead > b{font-size:14px}
  .dash .lead > span{font-size:12px;color:var(--d-muted)}
  .dash .lead dl{margin:10px 0 8px;display:grid;font-size:12px}
  .dash .lead dt{color:var(--d-muted);font-size:10.5px}
  .dash .lead dd{margin:0 0 5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash .stages{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
  .dash .stages i{height:5px;border-radius:3px;background:#EDEFEB}
  .dash .stages i.on{background:var(--d-accent)}
  .dash .lead > em{font-style:normal;font-size:11.5px;color:var(--d-accent-text);margin-top:6px}

  /* agents */
  .dash .alist{grid-template-columns:1fr 1fr}
  .dash .acard.xl{display:grid}
  .dash .alog{display:grid;list-style:none;margin:0;padding:0;border:1px solid var(--d-line);border-radius:8px;overflow:hidden;align-content:start}
  .dash .alog li{display:grid;grid-template-columns:8px 1fr auto;gap:9px;align-items:center;padding:8px 10px;font-size:12px}
  .dash .alog li + li{border-top:1px solid var(--d-line)}
  .dash .alog span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash .alog em{font:500 11px var(--mono);font-style:normal;color:var(--d-muted)}

  /* inventory */
  .dash .inv .tr{grid-template-columns:1fr 58px 104px auto}
  .dash .inv .th.xl{display:grid}
  .dash .inv .th span:nth-child(3){text-align:left}
  .dash .inv .th span:nth-child(3),.dash .inv .tr > .stock{padding-left:12px}
  .dash .tr > .sold{text-align:right;font:500 12px var(--mono)}
  .dash .arriving{display:grid;gap:6px;font-size:12px}
  .dash .arriving ul{list-style:none;margin:0;padding:0;display:grid;border:1px solid var(--d-line);border-radius:8px;overflow:hidden}
  .dash .arriving li{display:grid;grid-template-columns:1fr auto 60px;gap:10px;padding:7px 10px;align-items:center}
  .dash .arriving li + li{border-top:1px solid var(--d-line)}
  .dash .arriving li span{color:var(--d-muted);font-family:var(--mono);font-size:11px}
  .dash .arriving li em{font-style:normal;font:500 11px var(--mono);text-align:right;color:var(--d-accent-text)}

  /* team */
  .dash .people .tr{grid-template-columns:28px 1fr 110px 64px auto}
  .dash .acc{font-size:12px;color:#3A3F46}
  .dash .last{font:500 11px var(--mono);color:var(--d-muted);text-align:right}
}
@container demo (min-width:680px){   /* roomier still: the booked column and a wider lead card */
  .dash .body{grid-template-columns:148px 1fr}
  .dash .tr{grid-template-columns:1fr 54px 40px 54px 50px 66px 30px;gap:8px}
  .dash .tr > .xl.bk{display:block}
  .dash .feed li.xl:last-child{display:block}
  .dash .inv .tr{grid-template-columns:1fr 64px 116px auto}
  .dash .people .tr{grid-template-columns:28px 1fr 110px 64px auto}
  .dash .tx-row{grid-template-columns:1fr 196px}
}
@container demo (min-width:580px){   /* round 2: reads like the full product */
  .dash .side{gap:1px;padding:10px 8px}
  .dash .side button{height:28px;font-size:12.5px}
  .dash .side button.xl{display:flex}
  .dash .side .find{display:flex;align-items:center;gap:6px;height:26px;padding:0 8px;margin:0 0 4px;border:1px solid var(--d-line);border-radius:6px;background:#fff;color:var(--d-muted);font-size:11.5px}
  .dash .find svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
  .dash .find kbd{margin-left:auto;font:500 10px var(--mono);color:var(--d-muted)}
  .dash .side .grp{display:block;padding:7px 8px 2px;font-size:10.5px;font-weight:600;color:var(--d-muted)}

  /* today: sparklines, bookings over the leads, the day's schedule, a P&L snapshot */
  .dash .kpi .spk{display:block;width:100%;height:14px;margin-top:4px;overflow:visible}
  .dash .spk path{fill:none;stroke:var(--d-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .dash .ch{align-items:center;gap:8px}
  .dash .lg{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:10.5px;color:var(--d-muted)}
  .dash .row2 .ch small{white-space:nowrap}
  .dash .lg i{width:8px;height:8px;border-radius:2px;background:#BFE9E3}
  .dash .lg i.l2{width:10px;height:2px;border-radius:1px;background:#15171B;margin-left:6px}
  .dash .bars{position:relative}
  .dash .bars svg.bk{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .dash .bars svg.bk path{fill:none;stroke:#15171B;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .dash .xax{display:grid;grid-template-columns:repeat(14,1fr);gap:4px;font:500 9.5px var(--mono);color:var(--d-muted);text-align:center}
  .dash .row2{grid-template-columns:1.5fr 1fr}
  .dash .agenda{display:flex;flex-direction:column;gap:7px;border:1px solid var(--d-line);border-radius:8px;padding:9px 10px;cursor:pointer;min-height:0;overflow:hidden;transition:border-color .12s,box-shadow .12s}
  .dash .agenda:hover,.dash .plmini:hover{border-color:var(--d-accent);box-shadow:0 4px 12px -8px rgba(0,121,109,.5)}
  .dash .agenda ol{list-style:none;margin:0;padding:0;display:grid;gap:5px}
  .dash .agenda li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px;align-items:center;padding:4px 6px;border-left:3px solid var(--c);border-radius:4px;background:var(--b);font-size:11.5px;line-height:1.3}
  .dash .agenda time{font:500 10px var(--mono);color:var(--d-muted)}
  .dash .agenda li div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash .agenda li b{font-size:11.5px;margin-right:5px}
  .dash .agenda li span{color:#3A3F46}
  .dash .row3{display:grid;grid-template-columns:1.5fr 1fr;gap:8px}
  .dash .plmini{display:flex;flex-direction:column;gap:6px;border:1px solid var(--d-line);border-radius:8px;padding:9px 10px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
  .dash .plmini dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:2px 8px;font-size:11.5px}
  .dash .plmini dt{color:var(--d-muted)}
  .dash .plmini dd{margin:0;font:500 12px var(--mono);text-align:right}
  .dash .plmini dd.ok{color:var(--d-accent-text)}
  .dash .mbars{flex:1;min-height:26px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr;gap:4px;align-items:end}
  .dash .mbars i{height:var(--h);background:#D3EFEB;border-radius:2px 2px 1px 1px}
  .dash .mbars i.on{background:var(--d-accent)}
  .dash .mlab{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;text-align:center;font:500 9.5px var(--mono);color:var(--d-muted)}
  .dash .inst{--c:#00B3A1;--b:#E3F7F4}.dash .del{--c:#15171B;--b:#EEF0EC}.dash .visit{--c:#00796D;--b:#fff}.dash .call{--c:#A3AAB4;--b:#F4F5F2}
  .dash .agenda li.visit,.dash .ev.visit{box-shadow:inset 0 0 0 1px #CFEFEA}

  /* ads: the sources beside the chart */
  .dash .adrow{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;flex:1 0 auto;min-height:120px}
  .dash .adrow .trend{min-height:0}

  /* texts: a timeline and the next step on the lead card */
  .dash .tl{list-style:none;margin:12px 0 10px;padding:0 0 0 12px;border-left:1px solid var(--d-line);display:grid;gap:7px;font-size:11px;line-height:1.3}
  .dash .tl li{position:relative;display:flex;justify-content:space-between;gap:6px}
  .dash .tl li::before{content:"";position:absolute;left:-15.5px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--d-accent);box-shadow:0 0 0 2px #fff}
  .dash .tl em{font:500 10px var(--mono);font-style:normal;color:var(--d-muted);white-space:nowrap}
  .dash .lead .next{margin-top:auto;width:100%;flex:none}

  /* calendar: a week you can book into */
  .dash .view.xl{display:flex}
  .dash .cal-top{display:flex;align-items:center;gap:10px;font-size:12px}
  .dash .cal-top b{font-size:13px;white-space:nowrap;margin-right:auto}
  .dash .legend{display:flex;align-items:center;gap:4px;font-size:10.5px;color:var(--d-muted);white-space:nowrap}
  .dash .legend i{width:8px;height:8px;border-radius:2px;margin-left:8px}
  .dash .legend i:first-child{margin-left:0}
  .dash .legend span{margin-left:auto}
  .dash .legend .t-inst{background:#00B3A1}.dash .legend .t-del{background:#15171B}.dash .legend .t-visit{background:#fff;box-shadow:inset 0 0 0 1.5px #00796D}.dash .legend .t-call{background:#C4C8CE}
  .dash .wk{flex:1;min-height:0;display:flex;flex-direction:column;border:1px solid var(--d-line);border-radius:8px;overflow:hidden}
  .dash .wk-h,.dash .wk-b{display:grid;grid-template-columns:32px repeat(5,minmax(0,1fr))}
  .dash .wk-h{border-bottom:1px solid var(--d-line);background:var(--d-soft)}
  .dash .wk-h span{padding:5px 7px;font-size:11px;color:var(--d-muted);border-left:1px solid var(--d-line);white-space:nowrap}
  .dash .wk-h span:first-child{border-left:0}
  .dash .wk-h b{font-size:12px;color:#15171B;margin-left:4px}
  .dash .wk-h .now{color:var(--d-accent-text);font-weight:600}
  .dash .wk-h .now b{color:#fff;background:var(--d-accent);border-radius:99px;padding:0 6px}
  .dash .wk-b{flex:1;min-height:0}
  .dash .wk-t{position:relative}
  .dash .wk-t span{position:absolute;right:5px;translate:0 -50%;font:500 9.5px var(--mono);color:var(--d-muted)}
  .dash .wk-d{position:relative;border-left:1px solid var(--d-line);background-image:linear-gradient(#EFF0ED 1px,transparent 1px);background-size:100% calc(100% / 9);cursor:copy}
  .dash .wk-d.today{background-color:#F6FCFB}
  .dash .ev{position:absolute;left:2px;right:3px;display:block;padding:3px 5px;border:0;border-left:3px solid var(--c);border-radius:5px;background:var(--b);font-size:10.5px;line-height:1.25;text-align:left;overflow:hidden;cursor:pointer;transition:box-shadow .12s}
  .dash .ev:hover{box-shadow:0 6px 14px -8px rgba(21,23,27,.5);z-index:2}
  .dash .ev.visit:hover{box-shadow:inset 0 0 0 1px #CFEFEA,0 6px 14px -8px rgba(21,23,27,.5)}
  .dash .ev b{display:block;font-size:10.5px}
  .dash .ev span{display:block;color:#3A3F46;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash .ev.new{animation:ev-in .35s cubic-bezier(.2,.8,.2,1)}
  .dash .nowl{position:absolute;left:0;right:0;height:2px;margin-top:-1px;background:var(--d-accent);z-index:3;pointer-events:none}
  .dash .nowl::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--d-accent)}

  /* P&L */
  .dash .pl-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .dash .pl-kpis > div{display:grid;gap:1px;padding:8px 10px;border:1px solid var(--d-line);border-radius:8px}
  .dash .pl-kpis b{font:500 clamp(14px,2.6cqw,18px) var(--mono);letter-spacing:-.03em;white-space:nowrap}
  .dash .pl-kpis em{font-style:normal;font-size:11px;color:var(--d-muted)}
  .dash .pl-kpis .net{background:var(--d-accent-soft);border-color:transparent}
  .dash .pl-kpis .net em{color:var(--d-accent-text)}
  .dash .pl-row{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;flex:1;min-height:0}
  .dash .pl-lines{border:1px solid var(--d-line);border-radius:8px;overflow:auto;font-size:11.5px;scrollbar-width:thin}
  .dash .pl-l{display:grid;grid-template-columns:minmax(0,1fr) 76px 40px;gap:6px;align-items:center;padding:3.5px 10px}
  .dash .pl-l span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dash .pl-l .v{font:500 11px var(--mono);text-align:right}
  .dash .pl-l .pc{font:500 10.5px var(--mono);text-align:right;color:var(--d-muted)}
  .dash .pl-l.in{padding-left:20px;color:#3A3F46}
  .dash .pl-l.hd{font-weight:600;background:var(--d-soft)}
  .dash .pl-l.tot{font-weight:600;border-top:1px solid var(--d-line);border-bottom:1px solid var(--d-line)}
  .dash .pl-l.net{background:var(--d-accent-soft);color:var(--d-accent-text);font-weight:700}
  .dash .pl-l.net .pc{color:var(--d-accent-text)}
  .dash .pl-l:not(.hd):not(.net):hover{background:#FAFAF8}
  .dash .pl-chart{display:flex;flex-direction:column;gap:6px;min-height:0;padding:9px 10px;border:1px solid var(--d-line);border-radius:8px}
  .dash .pl-bars{flex:1;min-height:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr auto;gap:4px 6px}
  .dash .pl-bars .c{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-height:0}
  .dash .pl-bars .c i{display:block;width:100%;height:var(--h);border-radius:3px 3px 1px 1px;background:#D3EFEB;transition:background-color .2s}
  .dash .pl-bars .c.on i{background:var(--d-accent)}
  .dash .pl-bars .c em{font:500 9.5px var(--mono);font-style:normal;color:var(--d-muted)}
  .dash .pl-bars .c.on em{color:var(--d-accent-text)}
  .dash .pl-bars .m{font:500 10px var(--mono);color:var(--d-muted);text-align:center}
}
@keyframes ev-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
/* round 3: chart pop-ups, search results, the inventory sales breakdown */
.dash .dtip{position:absolute;z-index:7;left:0;top:0;min-width:160px;max-width:236px;padding:8px 10px 9px;border-radius:8px;background:#15171B;color:#F3F4F1;font-size:11.5px;line-height:1.4;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);pointer-events:none;opacity:0;translate:0 4px;transition:opacity .12s,translate .12s}
.dash .dtip.on{opacity:1;translate:0 0}
.dash .dtip .tt{font:500 10.5px var(--mono);color:#A3AAB4;margin-bottom:6px}
.dash .dtip .r{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.dash .dtip .r span{color:#D5D8DC}
.dash .dtip .r b{font:500 11.5px var(--mono);color:#fff;white-space:nowrap}
.dash .dtip .k{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px;background:var(--c)}
.dash .dtip .ft{margin-top:7px;padding-top:6px;border-top:1px solid #2C3038;color:#19D3BE;font-size:11px}
.dash .bars i.hov{background:#7FD9CD}
.dash .bars i.on.hov{background:var(--d-accent)}
.dash .pl-bars .c.hov i,.dash .mbars i.hov,.dash .idet .wk8 i.hov{background:#7FD9CD}
.dash .pl-bars .c.on.hov i,.dash .mbars i.on.hov,.dash .idet .wk8 i.last.hov{background:#00796D}
.dash .trend{position:relative}
.dash .trend svg{cursor:crosshair}
.dash .tg{position:absolute;width:1px;background:rgba(21,23,27,.22);pointer-events:none;opacity:0;transition:opacity .12s}
.dash .tdot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#00B3A1;box-shadow:0 0 0 3px rgba(0,179,161,.22);pointer-events:none;opacity:0;transition:opacity .12s}
.dash .trend.hov .tg,.dash .trend.hov .tdot{opacity:1}
.dash .adrow .src{border-radius:4px;transition:background-color .12s}
.dash .adrow .src.hov{background:var(--d-soft);box-shadow:0 0 0 4px var(--d-soft)}
.dash .pace{cursor:default}
.dash .side .find{cursor:pointer;text-align:left}
.dash .side .find span{flex:1}
.dash .side .find kbd{white-space:nowrap}
.dash .side .find:hover{border-color:#C9CCC6;background:#fff;color:#3A3F46}
.dash .pal{position:absolute;inset:34px 0 0;z-index:8;display:flex;justify-content:center;align-items:flex-start;padding:36px 16px 16px;background:rgba(21,23,27,.26);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:pal-bg .15s ease-out}
.dash .pal-box{width:min(460px,100%);max-height:100%;display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 30px 60px -20px rgba(21,23,27,.6),0 0 0 1px rgba(21,23,27,.06);overflow:hidden;animation:pal-in .18s cubic-bezier(.2,.8,.2,1)}
.dash .pal-in{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px;border-bottom:1px solid var(--d-line);flex:none}
.dash .pal-in svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--d-muted);stroke-width:1.5;stroke-linecap:round}
.dash .pal-in input{flex:1;min-width:0;height:100%;padding:0;border:0;background:transparent;font:15px var(--sans);color:#15171B;outline:0}
.dash .pal-in input::placeholder{color:var(--d-muted)}
.dash .pal-in input::-webkit-search-cancel-button{display:none}
.dash .pal-in kbd{flex:none;padding:2px 6px;border:1px solid var(--d-line);border-radius:4px;font:500 10px var(--mono);color:var(--d-muted)}
.dash .pal-res{flex:1;min-height:0;overflow:auto;padding:6px;scrollbar-width:thin}
.dash .pal-res .sh{padding:6px 10px 5px;font:500 10px var(--mono);color:var(--d-muted)}
.dash .pal-res button{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;align-items:center;width:100%;padding:8px 10px;border:0;border-radius:7px;background:none;text-align:left;font-size:12.5px}
.dash .pal-res button.on{background:var(--d-accent-soft)}
.dash .pal-res .ty{font:500 10px var(--mono);color:var(--d-muted)}
.dash .pal-res b,.dash .pal-res small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .pal-res mark{background:none;color:var(--d-accent-text);font-weight:700}
.dash .pal-res .none{padding:14px 10px;font-size:12.5px;color:var(--d-muted)}
.dash .pal-ft{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--d-line);background:var(--d-soft);font:500 10px var(--mono);color:var(--d-muted);flex:none}
@keyframes pal-in{from{opacity:0;translate:0 -6px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes pal-bg{from{opacity:0}to{opacity:1}}
.dash .hit{animation:d-hit 1.6s ease-out}
@keyframes d-hit{0%,40%{outline:2px solid #00B3A1;outline-offset:-2px;background-color:#E3F7F4}100%{outline:2px solid rgba(0,179,161,0);outline-offset:-2px}}
@container demo (min-width:580px){.dash .inv .tr:not(.th){cursor:pointer}}
.dash .inv .tr.open{background:#F4FBFA}
.dash .inv .tr > span:first-child:focus-visible{outline:2px solid var(--d-accent);outline-offset:2px;border-radius:4px}
.dash .idet{display:grid;gap:10px;padding:10px 12px 12px;border-top:1px solid var(--d-line);background:#FAFCFB;animation:idet-in .2s ease-out}
.dash .idet .ks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.dash .idet .ks > div{display:grid;gap:1px;padding:6px 8px;border:1px solid var(--d-line);border-radius:6px;background:#fff;min-width:0}
.dash .idet .ks small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash .idet .ks b{font:500 13px var(--mono);letter-spacing:-.02em}
.dash .idet .ich{display:grid;gap:5px}
.dash .idet .wk8{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:52px;gap:4px;align-items:end}
.dash .idet .wk8 i{display:block;height:var(--h);border-radius:2px 2px 1px 1px;background:#BFE9E3;transition:background-color .12s}
.dash .idet .wk8 i.last{background:var(--d-accent)}
.dash .idet .wx{display:flex;justify-content:space-between;font:500 9.5px var(--mono);color:var(--d-muted)}
.dash .idet .idn{margin:0;font-size:12px;color:#3A3F46;line-height:1.45}
@keyframes idet-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media (max-width:480px){.dash .idet .ks{grid-template-columns:1fr 1fr}}
@media (max-width:920px){.hero .wrap{grid-template-columns:1fr;gap:44px}.hero{padding-block:44px 80px}.stage{max-width:520px;margin:0 auto}.diagram{max-width:520px;margin:0 auto;width:100%}}
@media (max-width:480px){.tiles{gap:8px;padding:4px}.tile{padding:10px;font-size:13px;border-radius:10px}.tile small{font-size:11px}.stage{aspect-ratio:4/5}.dash .body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.dash .side{flex-direction:row;gap:2px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--d-line);padding:6px;scrollbar-width:none}.dash .org{display:none}.dash .side button{width:auto;flex:none;white-space:nowrap}.dash .side svg{display:none}.dash .kpi b{font-size:16px}.dash .tr{grid-template-columns:1fr 54px 34px 30px}#camps .tr > :nth-child(4){display:none}}

/* ---------- problem: the junk drawer ---------- */
.drawer{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);aspect-ratio:16/7.5;overflow:hidden}
.drawer .grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 40px;opacity:.35;mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 100%)}
.obj{position:absolute;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;width:min(240px,32%);cursor:pointer;transition:border-color .15s,box-shadow .15s,translate .15s;rotate:var(--rot,0deg)}
.obj:hover,.obj.on{border-color:var(--problem);box-shadow:0 12px 28px -18px rgba(21,23,27,.5);translate:0 -2px;z-index:2}
.obj b{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.25}
.obj b::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--problem);flex:none}
.obj span{display:block;color:var(--muted);font-size:14px;line-height:1.4;margin-top:4px}
.obj .art{display:block;margin-bottom:10px;height:22px}
.obj .art svg{height:22px;width:auto;display:block}
.obj .art .p{fill:var(--problem)}.obj .art .l{stroke:var(--muted);fill:none;stroke-width:1.5}.obj .art .f{fill:var(--line)}
.drawer .glue{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.drawer .glue path{fill:none;stroke:var(--line);stroke-width:1.5;stroke-dasharray:5 6}
.drawer .glue .x{stroke:var(--problem);stroke-width:2;stroke-dasharray:none}
.pain-cta{margin-top:24px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--r-panel);padding:22px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pain-cta p{font-size:16px;max-width:60ch}
@media (max-width:760px){
  .drawer{aspect-ratio:auto;padding:12px;display:grid;gap:8px;background:transparent;border:0;border-radius:0;padding:0}
  .drawer .grid,.drawer .glue{display:none}
  .obj{position:static;width:auto;rotate:0deg;background:var(--surface)}
  .obj .art{display:none}
  .obj:nth-child(n+7){display:none}
  .drawer.more .obj{display:block}
  .obj span{display:none}
}
.more-btn{display:none;margin-top:12px}
@media (max-width:760px){.more-btn{display:inline-flex}}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:24px}
.tools{display:grid;gap:8px}
.tool{border:1px solid var(--line);border-radius:var(--r-card);transition:border-color .15s,background-color .15s}
.tool .row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;user-select:none}
.tool .box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;background:var(--surface)}
.tool .box svg{width:12px;height:12px;opacity:0;stroke:#15171B;fill:none;stroke-width:2.5}
.tool.on{border-color:var(--accent);background:var(--accent-soft)}
.tool.on .box{background:var(--accent);border-color:var(--accent)}
.tool.on .box svg{opacity:1}
.tool .name{font-weight:600;font-size:16px}
.tool .amt{font-family:var(--mono);font-size:13px;color:var(--muted)}
.tool.on .amt{color:var(--accent-text)}
.tool .detail{display:none;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 14px 48px}
.tool.on .detail{display:grid}
label.f{display:grid;gap:5px;font-family:var(--mono);font-size:12px;color:var(--muted)}
input[type=text],input[type=number],input[type=email],select,textarea{width:100%;height:44px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);padding:0 12px;font:15px var(--sans)}
input[type=number]{font-family:var(--mono);font-size:14px}
.ink-zone input,.ink-zone select,.ink-zone textarea{background:var(--surface)}
.extra{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.add{margin-top:10px;width:100%;height:44px;border:1px dashed var(--line);border-radius:var(--r-ctl);background:transparent;color:var(--muted);font:600 15px var(--sans);cursor:pointer}
.add:hover{border-color:var(--accent);color:var(--accent-text)}
.summary{position:sticky;top:80px}
.summary .lbl{font-family:var(--mono);font-size:13px;color:var(--muted)}
.summary .big{font:500 clamp(40px,4.4vw,56px)/1.05 var(--mono);letter-spacing:-.03em;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.summary .big small{font-size:15px;color:var(--muted);letter-spacing:0;margin-left:6px}
.bars{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;height:90px;align-items:end;margin-top:18px}
.bars i{display:block;background:var(--line);border-radius:4px 4px 0 0;transition:height .3s}
.bars i:last-child{background:var(--accent)}
.bars-l{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px;text-align:center}
.mini{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.mini b{font:500 15px var(--mono)}
.mini.hl b{font-size:18px}
.minis{margin-top:18px}
.cf{margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
.cf .cf-lbl{margin-top:14px;color:var(--accent-text)}
.cf .cf-lbl span{margin-left:6px;padding:2px 6px;border-radius:4px;background:var(--accent-soft);font-size:11px}
.cf .mini b{color:var(--ink)}
.cf-cap{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;margin-top:12px;padding:14px 16px;border-radius:var(--r-card);background:var(--accent-soft)}
.cf-cap span{font-size:15px;font-weight:600}
.cf-cap b{font:500 26px/1.1 var(--mono);letter-spacing:-.03em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.cf-cap small{grid-column:1/-1;font-size:13px;color:var(--muted)}
.cf-cap.no{background:var(--bg)}
.cf-cap.no b{color:var(--ink)}
.cf-points{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.cf-points li{position:relative;padding-left:18px;font-size:14px;line-height:1.45;color:var(--muted)}
.cf-points li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--accent)}
.cf-points b{color:var(--ink);font-weight:600}
.cf-save{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:2px 10px;margin-top:14px;padding:14px 16px;border-radius:var(--r-card);background:var(--accent-soft)}
.cf-save span{font-size:15px;font-weight:600}
.cf-save b{justify-self:end;font:500 26px/1.1 var(--mono);letter-spacing:-.03em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.cf-save small{grid-column:1/-1;font-size:13px;color:var(--muted)}
.cf-save.no{background:var(--bg)}
.cf-save.no b{color:var(--ink)}
.cf-note{font-size:12px;color:var(--muted);margin:10px 0 16px}
.moment{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:22px 0 8px}
.bridge{color:var(--muted);font-size:15px;margin-bottom:16px}
@media (max-width:900px){.calc{grid-template-columns:1fr}.summary{position:static}}
@media (max-width:480px){.tool .detail{grid-template-columns:1fr;padding-left:14px}.extra{grid-template-columns:1fr}.card{padding:18px}}

/* ---------- work ---------- */
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:clamp(22px,3.5vw,40px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:center}
.tag{font-family:var(--mono);font-size:13px;color:var(--accent-text);font-weight:500}
.feat h3{font-size:clamp(26px,3vw,34px);line-height:1.1;letter-spacing:-.025em;margin:12px 0 12px;max-width:20ch}
.feat p.d{color:var(--muted);font-size:17px;max-width:44ch}
.swap{display:inline-flex;gap:12px;align-items:center;margin:20px 0 22px;padding:10px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-ctl);font:500 14px var(--mono)}
.swap .from{color:var(--problem);text-decoration:line-through}
.swap .to{color:var(--accent-text)}
.stats{display:flex;gap:10px 32px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line);margin-bottom:22px}
.stats div{font-size:14px;color:var(--muted)}
.stats b{display:block;font:500 28px/1.2 var(--mono);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.stack{position:relative;aspect-ratio:1.28;width:100%;isolation:isolate}
.shot{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;contain:paint;box-shadow:0 24px 48px -24px rgba(21,23,27,.45);aspect-ratio:1400/897}
.shot img{position:absolute;left:0;right:0;top:22px;width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top left}
.shot .chrome{position:relative;z-index:1;height:22px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1px solid #E6E8E3;background:#FAFAF8}
.shot .chrome i{width:7px;height:7px;border-radius:50%;background:#D9DBD6}
.shot.main{left:0;top:6%;width:78%;z-index:2}
.shot.b1{right:0;top:0;width:44%;z-index:1;opacity:.95}
.shot.b2{right:3%;bottom:0;width:48%;z-index:3}
.note{position:absolute;z-index:4;font:500 12px var(--mono);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 8px;box-shadow:0 6px 16px -10px rgba(21,23,27,.5);white-space:nowrap}
.note::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);left:-16px;top:50%;translate:0 -50%;box-shadow:0 0 0 3px var(--accent-soft)}
.note::after{content:"";position:absolute;left:-10px;top:50%;width:10px;height:1px;background:var(--accent)}
.cap-note{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:14px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.cs{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:20px;display:grid;gap:12px;grid-template-rows:auto auto auto 1fr auto;text-decoration:none;transition:border-color .15s}
.cs:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.cs h3{font-size:19px;max-width:22ch}
.cs .num{font:500 26px/1.1 var(--mono);letter-spacing:-.03em}
.cs .num small{display:block;font:14px var(--sans);color:var(--muted);letter-spacing:0;margin-top:3px}
.cs .thumb{border:1px solid var(--line);border-radius:8px;overflow:hidden;aspect-ratio:16/9;background:var(--bg);align-self:end}
.cs .thumb img{width:100%;height:100%;object-fit:cover;object-position:top left}
.cs .thumb.phone img{object-position:center 12%}
.cs .link{font-size:15px}
@media (max-width:900px){.feat{grid-template-columns:1fr}.cards{grid-template-columns:1fr}.stack{max-width:560px}.note{display:none}}

/* ---------- process ---------- */
.motif{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px;min-height:44px}
.motif i{display:block;width:44px;height:44px;border-radius:10px;background:var(--surface);border:1px solid var(--line);position:relative}
.motif i::after{content:"";position:absolute;left:10px;right:10px;top:12px;height:5px;border-radius:2px;background:var(--line)}
.motif i.last::after{display:none}
.motif i.last{background:var(--accent);border-color:var(--accent)}
/* the process mark: six rented tools and one new piece line up, then snap into the Cleanform C */
.proc-top{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:end;margin-bottom:48px}
.proc-top .head{margin-bottom:0}
.assemble{background:none;border:0;padding:22px 10px 16px;display:grid;gap:14px}   /* sits on the page, no panel */
.asm-stage{position:relative;height:108px}
.asm-stage i{position:absolute;left:0;top:0;width:32px;height:32px;border-radius:8px;background:var(--bg);border:1px solid var(--line);translate:var(--x,0) var(--y,0);
  transition:translate 1s cubic-bezier(.65,0,.35,1),background-color .6s ease,border-color .6s ease}
.asm-stage i::after{content:"";position:absolute;left:7px;right:7px;top:9px;height:3px;border-radius:2px;background:var(--line);transition:opacity .3s}
.asm-stage i.new{background:var(--accent);border-color:var(--accent)}
.asm-stage i.new::after{display:none}
.assemble.built .asm-stage i{background:var(--ink);border-color:var(--ink)}
.assemble.built .asm-stage i::after{opacity:0}
.assemble.built .asm-stage i.new{background:var(--accent);border-color:var(--accent)}
.asm-cap{text-align:center;font:500 13px var(--mono);color:var(--muted);transition:color .3s}
.assemble.asm-done .asm-cap{color:var(--accent-text)}
.timeline.seq .step{opacity:.35;transition:opacity .45s}
.timeline.seq .step.lit{opacity:1}
@media (max-width:900px){.proc-top{grid-template-columns:1fr;gap:28px}}
@media (max-width:760px){.assemble{display:none}}
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line)}
.step{padding-top:26px;position:relative}
.step::before{content:"";position:absolute;top:0;left:0;width:13px;height:13px;border-radius:4px;background:var(--accent);border:3px solid var(--bg);box-sizing:content-box;translate:0 -6px}
.step .n{font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:10px}
.step h3{margin-bottom:8px}
.step p{color:var(--muted);font-size:15px;max-width:34ch}
.step .when{display:inline-block;margin-top:14px;font:500 12px var(--mono);color:var(--accent-text);background:var(--accent-soft);padding:5px 10px;border-radius:99px}
@media (max-width:760px){.timeline{grid-template-columns:1fr;gap:28px}.timeline::before{top:0;bottom:0;left:6px;width:1px;height:auto;right:auto}.step{padding:0 0 0 30px}.step::before{left:0;top:6px;translate:0 0}}

/* ---------- comparison ---------- */
.compare{display:grid;grid-template-columns:200px 1fr 1fr;border-top:1px solid var(--line)}
.compare > div{padding:26px 22px 26px 0;border-bottom:1px solid var(--line);font-size:18px;line-height:1.45}
.compare .lab{font-weight:700;letter-spacing:-.01em;font-size:16px;padding-top:28px}
.compare .rent{color:var(--muted)}
.compare .own{background:var(--accent-soft);padding-left:22px;padding-right:22px;font-weight:600}
.compare .h{font-family:var(--mono);font-size:13px;color:var(--muted);padding:14px 0;font-weight:500}
.compare .h.own{color:var(--accent-text)}
@media (max-width:760px){.compare{grid-template-columns:1fr}.compare .lab{padding-bottom:4px;border-bottom:0;padding-top:22px}.compare .rent{border-bottom:0;padding:0 0 10px}.compare .own{padding:14px 16px;border-radius:8px;border-bottom:0;margin-bottom:10px}.compare .h{display:none}}

/* ---------- faq ---------- */
.faq{max-width:800px}
.faq details{border-bottom:1px solid var(--line);padding:22px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--muted);font-weight:400;font-size:24px;line-height:1;transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--muted);margin-top:12px;font-size:17px;max-width:62ch}

/* ---------- final CTA ---------- */
.final .box{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.final h2{margin-bottom:14px}
.final .p{color:var(--muted);font-size:17px;max-width:40ch}
.final ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px;font-size:15px}
.final li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--accent);margin-right:10px;vertical-align:1px}
.final .fine{font-size:13px;color:var(--muted);margin-top:14px}
.lockup{position:relative;width:260px;height:44px;margin-bottom:26px}
.lockup i{position:absolute;display:block;transform-origin:0 0}
.lockup .dot{top:9px;width:26px;height:26px;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.lockup .mk{width:12px;height:12px;border-radius:3.5px;background:var(--ink)}
.lockup .mk.new{background:var(--accent)}
.lockup .word{position:absolute;left:56px;top:0;font:700 36px/42px var(--sans);letter-spacing:-.04em;color:var(--ink);clip-path:inset(0 100% 0 0)}
.lockup.lk-done .dot{opacity:0}
.lockup.lk-done .word{clip-path:inset(0 0 0 0)}
/* retired */ .motif2-old i{display:block;width:26px;height:26px;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.motif2-old i.last{background:var(--accent);border-color:var(--accent)}
form.lead{display:grid;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:22px}
form.lead .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form.lead textarea{height:88px;padding:10px 12px;resize:vertical}
form.lead .stackline{font:500 12px var(--mono);color:var(--accent-text);background:var(--accent-soft);padding:8px 10px;border-radius:6px}
form.lead .err{font-size:13px;color:var(--problem)}
.done{background:var(--surface);border:1px solid var(--accent);border-radius:var(--r-panel);padding:26px;display:grid;gap:8px}
.done b{font-size:20px}
.done p{color:var(--muted)}
@media (max-width:800px){.final .box{grid-template-columns:1fr;gap:28px}form.lead .two{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--bg);color:var(--ink);border-top:1px solid var(--line);padding-block:48px 32px;font-size:14px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer .cols p{color:var(--muted);max-width:30ch;margin-top:10px}
footer h4{margin:0 0 10px;font-size:13px;font-family:var(--mono);font-weight:500;color:var(--muted)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer a{text-decoration:none;color:var(--ink)}
footer a:hover{color:var(--accent-text)}
footer .bottom{margin-top:36px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-family:var(--mono);font-size:12px}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

/* the one stacked transition: Problem holds still while the calculator slides up over it (desktop only) */
.pair{position:relative}
#compare,#faq,#contact,footer{position:relative;z-index:5}
@media (min-width:761px){
  /* three stacks: Problem, the calculator and Proof each hold still while the next section slides up over them */
  .pair > section.pin::after{content:"";position:absolute;inset:0;background:#15171B;opacity:calc(var(--cover,0) * .4);pointer-events:none}
  .pair > section.over{position:relative;border-radius:28px 28px 0 0;box-shadow:0 -20px 40px -28px rgba(21,23,27,.5)}
  .pair > section.pin{position:sticky;top:var(--stick,0px)}   /* after .over: the middle sections are both */
}
/* fades: one 200ms opacity, only for elements below the first viewport on load */
.rv{opacity:0;transition:opacity .2s ease-out}
.rv.in{opacity:1}

/* ---------- pieces the About page and the generated pages reuse ---------- */
.pains{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:10px}
.pain{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px}
.pain b{display:flex;align-items:center;gap:9px;font-size:16px}
.pain b::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--problem);flex:none}
.pain span{display:block;color:var(--muted);font-size:15px;margin-top:4px}
.stats{display:flex;gap:10px 32px;flex-wrap:wrap}
.stats div{font-size:14px;color:var(--muted)}
.stats b{display:block;font:500 28px/1.2 var(--mono);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- phones: the calculator becomes a card that links to its own page ---------- */
.calc-teaser{display:none}
@media (max-width:760px){
  #stack:not(.subpage #stack) .calc{display:none}
  #stack:not(.subpage #stack) .calc-teaser{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);padding:20px}
  .calc-teaser p{color:var(--muted);font-size:15px}
  .calc-teaser .big{font:500 44px/1.1 var(--mono);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
  .calc-teaser .big small{font:15px var(--sans);color:var(--muted);letter-spacing:0;margin-left:6px}
  .calc-teaser .btn{justify-self:start}
}

/* ---------- phones: one idea per screen ----------
   Targets on a 375×812 phone: about 7 screens in total, tap targets 44px or more, text 12px or more,
   and only the hero moves. The desktop is unchanged; everything below applies at 760px and under. */
.m-only{display:none}
.opt{display:grid;gap:12px}
@media (max-width:760px){
  .d-only{display:none}
  .m-only{display:revert}
  section{padding-block:56px}
  .head{margin-bottom:24px}
  .sub{font-size:16px}

  /* hero: short, so the demo starts on the first screen */
  .hero{padding-block:28px 56px}
  .hero .wrap{gap:28px}
  .hero .eyebrow{margin-bottom:14px}
  .hero h1{margin-bottom:14px}
  .lede{margin-bottom:20px}
  .cta-row{flex-wrap:nowrap;gap:10px;margin-bottom:16px}
  .cta-row .btn{flex:1;padding:0 10px;font-size:15px}
  .promise{gap:6px 14px;font-size:13px}

  /* sound familiar: the four cards, closer together */
  .drawer{gap:6px}
  .obj{padding:12px 14px}
  .more-btn{margin-top:10px}
  .pain-cta{margin-top:16px;padding:18px}

  /* proof: headline, before and after, one number; the screens live on each study's page */
  .feat{padding:20px;gap:0}
  .feat p.d,.feat .stats > div:nth-child(n+2),.feat .stack,.feat + .cap-note,.cap-note{display:none}
  .feat .swap{margin:14px 0 16px;flex-wrap:wrap}
  .feat .stats{margin-bottom:14px;padding-top:14px}
  .cards{gap:10px;margin-top:10px}
  .cs{padding:16px 18px;gap:6px;grid-template-rows:none}
  .cs .thumb{display:none}
  .cs h3{font-size:17px}
  .cs .num{font-size:22px}

  /* how it works: titles and tags */
  .motif{display:none}
  .step p{display:none}
  .timeline{gap:18px}
  .step .when{margin-top:8px}

  /* renting vs owning: the three rows that matter most, the rest behind a button */
  .compare:not(.all) > :nth-child(n+10):nth-child(-n+18){display:none}
  .compare > div{font-size:16px}
  .cmp-all{margin-top:14px}
  .cmp-all[hidden]{display:none}

  /* form: name, company, email up front; details behind a tap */
  .opt:not(.open){display:none}
  .opt-btn{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--accent-text);font:600 15px var(--sans);cursor:pointer}
  .opt-btn[hidden]{display:none}

  /* thumbs: 44px targets */
  nav .logo{min-height:44px}
  .menu-btn{height:44px}
  .link{display:inline-flex;align-items:center;min-height:44px}
  footer ul{gap:0}
  footer ul a{display:flex;align-items:center;min-height:44px}
  .btn.small{height:44px}
  .dash .side button{height:36px}
  .dash .ghost,.dash .convos button,.dash .seg button{min-height:34px}
  .dash .compose input,.dash .compose button{height:36px}

  /* last trims: the whole card is the link; the footer's site links in two columns; the audit list lives on desktop */
  .cs .link{display:none}
  footer .cols > div:nth-child(2) ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
  .final ul{display:none}
  .tile small{font-size:12px}
}

/* ---------- renting vs owning: Keyline-style comparison in Cleanform colours, on every screen ----------
   Three columns: the row label, Rent (gray minus icons) and Own, which sits on one raised dark card with the
   Cleanform mark and aqua checks, from its header to its last row. Phones show three rows, then "See all six". */
.compare{grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);grid-template-rows:repeat(7,auto);border-top:0;position:relative;isolation:isolate}
.compare > div{position:relative;z-index:1;display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45;padding:20px 22px;border-bottom:1px solid var(--line)}
.compare .h{flex-direction:column;align-items:flex-start;gap:4px;padding:24px 22px 18px;font-family:inherit;font-size:15px;font-weight:400}
.compare .h b{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.compare .h small{display:block;font-size:13px;line-height:1.3;color:var(--muted)}
.compare .lab{padding:20px 12px 20px 0;font-size:16px;font-weight:700;align-items:center}
.compare .rent{color:var(--muted);padding-left:8px}
.compare .rent::before,.compare .own::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px}
.compare .rent::before{background:color-mix(in srgb,var(--line) 70%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6h6' stroke='%235A606B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/13px no-repeat}
.compare .own{background:none;border-radius:0;margin:0;color:#F3F4F1;font-weight:600;border-bottom-color:rgba(255,255,255,.08)}
.compare .own::before{background:#19D3BE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3 5 8.6l4.4-5' fill='none' stroke='%2315171B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;box-shadow:0 0 14px -2px rgba(25,211,190,.55)}
.compare .h.own::before{display:none}
.compare .h.own b{color:#F3F4F1}
.compare .h.own small{color:#A3AAB4}
.compare .cmp-mark{display:block;width:24px;height:24px;margin-bottom:8px;fill:#F3F4F1}
.compare .cmp-mark .new{fill:#19D3BE}
.compare .own-card{display:block;position:absolute;inset:-8px -6px 0;z-index:0;grid-column:3;grid-row:1 / -1;margin:0;padding:0;border:0;border-radius:18px;
  background:linear-gradient(180deg,#20242B,#15171B 42%);box-shadow:0 26px 50px -22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.compare .h b{font-weight:700}
@media (max-width:760px){
  .compare{grid-template-columns:minmax(0,.74fr) minmax(0,1.12fr) minmax(0,1.14fr)}
  .compare > div{gap:8px;font-size:14px;line-height:1.4;padding:14px 10px}
  .compare .h{gap:3px;padding:16px 10px 14px;font-size:14px}
  .compare .h b{font-size:15px;letter-spacing:-.01em}
  .compare .h small{font-size:12px}
  .compare .lab{padding:14px 10px 14px 0;font-size:14px}
  .compare .rent{padding:14px 10px 14px 4px}
  .compare .rent::before,.compare .own::before{width:18px;height:18px;background-size:11px}
  .compare .own{padding:14px 12px}
  .compare .h.own{padding:16px 12px 14px}
  .compare .cmp-mark{width:20px;height:20px;margin-bottom:6px}
  .compare .own-card{inset:-6px -4px 0;border-radius:16px}
  .compare:not(.all) > :nth-child(n+10):nth-child(-n+18){display:none}
}