/*
  Warm Desk site styles. Concept C, "The live desk" (Conor's pick, 22 Oct 2026).
  One dark world by choice, one face (Bricolage Grotesque, self-hosted), one accent (yellow).
  Every colour, face and size is a token in :root. No third-party requests, no inline styles.
*/
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-200-800.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --bg: #1b1d21;
  --panel: #22252a;
  --panel-2: #2a2e34;
  --panel-3: #31353c;
  --fg: #f1f2f4;
  --muted: #b3b9c2;      /* 8.5:1 on bg, 6.9:1 on panel-2 (the prototype's #aab0ba fell to 6.3:1 there) */
  --line: #3a3f47;
  --vis: #ffd60a;        /* the accent: dark text on it */
  --vis-ink: #1b1d21;
  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --wrap: 84rem;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.6 var(--font); font-variation-settings: "opsz" 14, "wdth" 100; }
::selection { background: var(--vis); color: var(--vis-ink); }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--vis); }
:focus-visible { outline: 3px solid var(--vis); outline-offset: 3px; }
h1, h2, h3 { margin: 0; line-height: 1.02; text-wrap: balance; font-weight: 700; letter-spacing: -.03em; font-variation-settings: "opsz" 96, "wdth" 92; }
p { margin: 0; }
ul, ol { margin: 0; padding-left: 1.25em; }
li + li { margin-top: .35em; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }
.skip { position: absolute; left: -999px; top: 0; background: var(--panel); padding: 8px 12px; }
.skip:focus { left: 16px; }
.sys { font-size: .8rem; color: var(--muted); font-variation-settings: "opsz" 12, "wdth" 100; font-variant-numeric: tabular-nums; }
.lab, .eyebrow { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.small { font-size: .9rem; color: var(--muted); }

/* Header */
.head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 18px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.mark { font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 85; letter-spacing: -.02em; font-size: 1.25rem; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.mark i { width: 12px; height: 12px; background: var(--vis); transform: rotate(45deg); }
.nav { display: flex; gap: 4px 26px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav li + li { margin-top: 0; }
.nav a { text-decoration: none; font-weight: 500; padding-block: 6px; display: inline-block; color: var(--muted); }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); text-decoration: underline; text-decoration-color: var(--vis); text-decoration-thickness: 2px; text-underline-offset: .3em; }

/* Hero: plain pages, and the live desk on the home page */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); }
.hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); max-width: 16ch; }
.hero.live h1 { font-size: clamp(2.5rem, 5.2vw, 4.8rem); max-width: 12ch; }
.hero.live .wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 40px 48px; align-items: start; }
@media (max-width: 1060px) { .hero.live .wrap { grid-template-columns: 1fr; } }
.hero.live .copy { gap: 22px; }
.hero h1 mark { background: var(--vis); color: var(--vis-ink); padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.copy { display: grid; gap: 26px; }
.lede { font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.5; max-width: 40ch; color: var(--muted); }
.lede b { color: var(--fg); font-weight: 600; }
.stack { display: grid; gap: 16px; max-width: 66ch; }
.stack-lg { display: grid; gap: 28px; }
.stack-lg .lede { max-width: 60ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn, .button { display: inline-flex; align-items: center; min-height: 50px; padding: 0 22px; background: var(--vis); color: var(--vis-ink); text-decoration: none; font: 700 1rem var(--font); letter-spacing: -.01em; border: 1px solid var(--vis); cursor: pointer; }
.btn:hover, .button:hover { background: #fff; border-color: #fff; }
.btn.alt, .button.secondary { background: transparent; color: var(--fg); border-color: var(--line); }
.btn.alt:hover, .button.secondary:hover { border-color: var(--fg); background: transparent; }

/* Hero: eyebrow, price chips, the assistants row */
.hero.live .eyebrow { font-size: .8rem; letter-spacing: .06em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); padding: 6px 12px; font-size: .88rem; font-weight: 600; background: var(--panel); }
.chip span { color: var(--vis); }
.works { display: grid; gap: 10px; margin-top: 4px; }
.works .row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.works .lg { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; }
.works .logo { width: 18px; height: 18px; fill: var(--c, var(--fg)); }

/* Tool brand colours (on-dark adjustments from the prototype). Grey at rest, brand colour when connected. */
.logo { fill: currentColor; flex: none; }
.b-openai { --c: #fff; } .b-claude { --c: #D97757; } .b-gemini { --c: #8AB4F8; } .b-gmail { --c: #EA4335; }
.b-outlook { --c: #2D9BF0; } .b-gcal { --c: #4285F4; } .b-teams { --c: #7B83EB; } .b-hubspot { --c: #FF7A59; }
.b-salesforce { --c: #00A1E0; } .b-zoho { --c: #F0483E; } .b-aircall { --c: #00B388; } .b-zoom { --c: #4A8CFF; }
.b-meet { --c: #00AC47; } .b-whatsapp { --c: #25D366; } .b-intercom { --c: #6AFDEF; } .b-crm { --c: var(--vis); }

/* Gone quiet: tabs and the product window. The markup is the finished state; site.js replays it. */
.tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs button { font: 600 .85rem var(--font); color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 0 14px; min-height: 40px; cursor: pointer; }
.tabs button:hover { color: var(--fg); border-color: var(--muted); }
.tabs button[aria-selected="true"] { color: var(--vis-ink); background: var(--vis); border-color: var(--vis); }
.app { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); font-size: .86rem; line-height: 1.45; font-variation-settings: "opsz" 12, "wdth" 100; }
.app .bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2); }
.app .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; }
.app .brand svg { width: 20px; height: 20px; }
.app .ws { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.app .sp { flex: 1; }
.srcs { display: flex; gap: 6px; align-items: center; }
.srcs .s { width: 24px; height: 24px; display: grid; place-items: center; background: var(--panel-3); border: 1px solid var(--line); }
.srcs .logo { width: 13px; height: 13px; fill: var(--muted); }
.srcs .s.on { border-color: var(--c); }
.srcs .s.on .logo { fill: var(--c); }
.av { width: 26px; height: 26px; border-radius: 50%; background: var(--vis); color: var(--vis-ink); display: grid; place-items: center; font-weight: 800; font-size: .72rem; flex: none; }
.abody { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.35fr); min-height: 470px; }
.q { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.qh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.qh b { font-weight: 700; }
.qr { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); position: relative; }
.qr .ini { width: 30px; height: 30px; border-radius: 50%; background: var(--panel-3); display: grid; place-items: center; font-weight: 700; font-size: .72rem; grid-row: span 2; }
.qr .ini.org { border-radius: 4px; }
.qr .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr .d { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .78rem; text-align: right; white-space: nowrap; }
.qr .who { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr .sig { font-size: .7rem; font-weight: 700; padding: 1px 6px; border: 1px solid var(--line); white-space: nowrap; justify-self: end; }
.qr .sig.hot { border-color: var(--vis); color: var(--vis); }
.qr .meter { grid-column: 2 / 4; height: 3px; background: var(--panel-3); margin-top: 2px; }
.qr .meter i { display: block; height: 100%; background: var(--muted); }
.qr.sel { background: var(--panel-2); }
.qr.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--vis); }
.qr.sel .meter i { background: var(--vis); }
.w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w35 { width: 35%; } .w40 { width: 40%; } .w45 { width: 45%; }
.w50 { width: 50%; } .w55 { width: 55%; } .w60 { width: 60%; } .w65 { width: 65%; } .w70 { width: 70%; } .w75 { width: 75%; }
.w80 { width: 80%; } .w85 { width: 85%; } .w90 { width: 90%; } .w95 { width: 95%; } .w100 { width: 100%; }
.qfoot { margin-top: auto; padding: 10px 12px; color: var(--muted); font-size: .76rem; border-top: 1px solid var(--line); }
.det { display: flex; flex-direction: column; min-width: 0; }
.app .dh { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.app .dh .top { display: flex; justify-content: space-between; gap: 4px 10px; align-items: baseline; flex-wrap: wrap; }
.app .dh h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.app .dh .val { font-weight: 700; color: var(--vis); font-size: .82rem; font-variant-numeric: tabular-nums; }
.app .dh .sub { color: var(--muted); font-size: .8rem; }
.why { padding: 12px 16px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.ins { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.ins .ic { width: 22px; height: 22px; display: grid; place-items: center; background: var(--panel-3); margin-top: 1px; }
.ins .logo { width: 12px; height: 12px; fill: var(--c); }
.ins small { display: block; color: var(--muted); font-size: .74rem; }
.ins.gap .ic { background: transparent; border: 1px dashed var(--muted); }
.ins.gap p { color: var(--muted); }
.app .dr { padding: 12px 16px; display: grid; gap: 6px; flex: 1; align-content: start; }
.app .dr .txt { background: var(--panel-2); border: 1px solid var(--line); padding: 10px 12px; min-height: 7.5em; }
.dtx.cur::after { content: ""; display: inline-block; width: .45em; height: 1em; background: var(--vis); vertical-align: -.15em; margin-left: 2px; }
:root[data-motion="full"] .dtx.cur::after { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.app .uses { color: var(--muted); font-size: .74rem; }
.ft { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ft .b { font: 600 .82rem var(--font); padding: 8px 12px; border: 1px solid var(--line); }
.ft .b.ok { background: var(--vis); color: var(--vis-ink); border-color: var(--vis); display: inline-flex; gap: 6px; align-items: center; }
.ft .b.ok svg { width: 13px; height: 13px; }
.ft .fu { margin-left: auto; color: var(--muted); font-size: .74rem; }
.toast { position: absolute; right: 14px; bottom: 60px; background: var(--fg); color: var(--bg); padding: 10px 14px; font-weight: 600; font-size: .82rem; display: flex; gap: 8px; align-items: center; opacity: 0; transform: translateY(8px); max-width: calc(100% - 28px); pointer-events: none; }
.toast.on { opacity: 1; transform: none; }
.toast svg { width: 14px; height: 14px; flex: none; }
.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; z-index: 5; opacity: 0; transform: translate(var(--x, 0px), var(--y, 0px)); }
.cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); }
:root[data-motion="full"] .cursor { transition: transform .7s cubic-bezier(.16, 1, .3, 1), opacity .3s; }
:root[data-motion="full"] .cursor.show { opacity: 1; }
:root[data-motion="full"] .srcs .s, :root[data-motion="full"] .srcs .logo { transition: border-color .3s, fill .3s; }
:root[data-motion="full"] .app .fade { transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1); }
:root[data-motion="full"] .app .hide { opacity: 0; transform: translateY(6px); }
:root[data-motion="full"] .toast { transition: opacity .35s, transform .35s; }
:root[data-motion="full"] .ft .b.ok { transition: transform .12s; }
:root[data-motion="full"] .ft .b.ok.press { transform: scale(.95); }
.cap { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; font-size: .8rem; color: var(--muted); }
@media (max-width: 640px) {
  .abody { grid-template-columns: 1fr; min-height: 0; }
  .app .ws { display: none; }
  .q { border-right: 0; border-bottom: 1px solid var(--line); }
  .qr:nth-of-type(n+5) { display: none; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sections */
.sec { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.sec h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); margin-bottom: clamp(22px, 3vw, 36px); max-width: 16ch; }
.section { padding-block: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); }
.section h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 20ch; }
.section h3 { font-size: 1.2rem; letter-spacing: -.01em; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px 64px; align-items: start; }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.prose { display: grid; gap: 16px; max-width: 60ch; }
.prose.lead { margin-bottom: 28px; }
.sec .prose p { color: var(--muted); }
.prose .src { font-size: .8rem; }

/* Ledger */
.ledger { border-top: 1px solid var(--line); font-variation-settings: "opsz" 12, "wdth" 100; }
.ledger div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--line); align-items: baseline; }
.ledger b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger .tot { color: var(--vis); }
.ledger .tot b { font-size: 1.7rem; letter-spacing: -.02em; }
.ledger small { display: block; color: var(--muted); font-size: .8rem; }

/* Stages */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); list-style: none; margin: 0; padding: 0; }
.stage { display: grid; gap: 12px; align-content: start; padding: 26px 24px 30px 0; border-bottom: 1px solid var(--line); margin: 0; }
.stage + .stage { padding-left: 24px; border-left: 1px solid var(--line); }
.stage .k { display: flex; gap: 8px; align-items: center; }
.stage .k::before { content: ""; width: 8px; height: 8px; background: var(--vis); transform: rotate(45deg); }
.stage h3 { font-size: 1.5rem; }
.stage p { color: var(--muted); max-width: 34ch; }
.stage .price { color: var(--fg); font-weight: 600; font-size: .95rem; }
@media (max-width: 760px) { .stages { grid-template-columns: 1fr; } .stage { padding: 24px 0; } .stage + .stage { padding-left: 0; border-left: 0; } }

/* What runs on your desk */
.leaves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 800px) { .leaves { grid-template-columns: 1fr; } }
.lv { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 18px; align-content: start; }
.lv .lab { display: flex; gap: 8px; align-items: center; }
.lv .lab i { width: 8px; height: 8px; background: var(--vis); transform: rotate(45deg); }
.lv .lab.b i { background: var(--muted); }
.lv h3 { font-size: 1.25rem; }
.lv p { color: var(--muted); max-width: 50ch; }
.demo { border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; font-size: .8rem; color: var(--muted); overflow: hidden; min-height: 116px; font-variation-settings: "opsz" 12, "wdth" 100; font-variant-numeric: tabular-nums; }
.demo b { color: var(--fg); font-weight: 600; }
.rows { display: grid; gap: 6px; }
.rows div { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 5px 8px; border: 1px solid var(--line); background: var(--panel-2); }
.rows div span:last-child { color: var(--vis); }
:root[data-motion="full"] .rows div { opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.16, 1, .3, 1), transform .5s cubic-bezier(.16, 1, .3, 1); }
:root[data-motion="full"] .demo.in .rows div { opacity: 1; transform: none; }
:root[data-motion="full"] .rows div:nth-child(2) { transition-delay: .15s; }
:root[data-motion="full"] .rows div:nth-child(3) { transition-delay: .3s; }
:root[data-motion="full"] .rows div:nth-child(4) { transition-delay: .45s; }
.rep { display: grid; gap: 4px; }
.rep div { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.rep div span:last-child { color: var(--vis); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.mini div { border-bottom: 1px solid var(--line); padding-bottom: 3px; color: var(--fg); }
.mini div i { display: block; font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pulse { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.pulse i { display: block; height: 8px; background: var(--line); width: var(--w); }
.pulse i:nth-of-type(1) { --w: 72%; }
.pulse i:nth-of-type(2) { --w: 60%; }
.pulse i:nth-of-type(3) { --w: 14%; }
.pulse i.now { background: var(--vis); }
:root[data-motion="full"] .pulse i { transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
:root[data-motion="full"] .demo.in .pulse i { transform: none; }

/* Your tools: the logo wall wired into the assistant. Links are drawn by site.js at 900px and up; without it the groups stack above the hub. */
.sec .intro { color: var(--muted); max-width: 60ch; margin-top: calc(-1 * clamp(8px, 1.5vw, 18px)); }
.wire { margin-top: 36px; display: grid; gap: 16px; }
.wire.js { grid-template-columns: minmax(0, 1.3fr) 90px minmax(0, 1fr); gap: 0; align-items: center; }
.links { display: none; }
.wire.js .links { display: block; height: 100%; min-height: 300px; }
@media (max-width: 899px) { .wire.js { grid-template-columns: 1fr; gap: 16px; } .wire.js .links { display: none; } }
.links svg { width: 100%; height: 100%; overflow: visible; }
.links path { fill: none; stroke: var(--line); stroke-width: 2; }
.links path.on { stroke: var(--vis); }
.links path.flow { stroke: var(--vis); stroke-dasharray: 6 10; opacity: 0; }
:root[data-motion="full"] .links path.flow.on { opacity: 1; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -32; } }
.groups { display: grid; gap: 12px; }
.grp { border: 1px solid var(--line); background: var(--panel); padding: 12px 14px; display: grid; gap: 10px; }
.grp .lab { display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.lab .note, .lab.plain { text-transform: none; letter-spacing: 0; }
.logos { display: flex; flex-wrap: wrap; gap: 8px; }
.lg2 { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 600; font-size: .86rem; }
.lg2 .logo { width: 18px; height: 18px; fill: var(--muted); }
.lg2.txt { color: var(--muted); font-weight: 500; }
.grp.on .lg2:not(.txt) { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }
.grp.on .lg2 .logo { fill: var(--c); }
:root[data-motion="full"] .lg2, :root[data-motion="full"] .lg2 .logo { transition: border-color .35s, fill .35s; }
.hub { display: grid; gap: 12px; }
.ai { border: 1px solid var(--line); background: var(--panel); padding: 16px; display: grid; gap: 12px; }
.ai.on { border-color: var(--vis); }
.ai .who { display: flex; align-items: center; gap: 12px; }
.ai .slot { width: 44px; height: 44px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); }
.ai .slot .logo { width: 24px; height: 24px; fill: var(--c, var(--fg)); }
.ai .nm { font-weight: 700; font-size: 1.1rem; }
.ai .pick { display: flex; gap: 6px; flex-wrap: wrap; }
.ai .pick span { font-size: .75rem; padding: 2px 8px; border: 1px solid var(--line); color: var(--muted); }
.ai .pick span.on { border-color: var(--vis); color: var(--fg); }
.outc { border: 1px solid var(--line); background: var(--panel-2); padding: 12px 14px; display: grid; gap: 6px; font-size: .88rem; }
.outc .appr { justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: var(--vis); color: var(--vis-ink); font-weight: 700; font-size: .8rem; padding: 6px 10px; }
.outc .appr svg { width: 12px; height: 12px; }
:root[data-motion="full"] .ai { transition: border-color .4s; }
:root[data-motion="full"] .outc { transition: opacity .5s, transform .5s; }
:root[data-motion="full"] .outc.hide { opacity: 0; transform: translateY(8px); }
.legal { margin-top: 18px; font-size: .8rem; color: var(--muted); }

/* Sound familiar, proof, the comparison table, the closing call */
.sec .prose .big { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.35; color: var(--fg); font-weight: 600; letter-spacing: -.01em; }
.pains { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.pains li { margin: 0; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--line); position: relative; }
.pains li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 8px; background: var(--vis); transform: rotate(45deg); }
.proof .parts { display: grid; gap: 8px; }
.proof .parts p { color: var(--muted); max-width: 60ch; }
.proof .parts .lab { display: block; margin-bottom: 2px; }
.proof .parts .won { color: var(--fg); }
.proof .parts .won .lab { color: var(--vis); }
.founding { margin-top: 22px; max-width: 60ch; border-left: 4px solid var(--vis); padding: 4px 0 4px 16px; }
.compare-wrap { border: 1px solid var(--line); background: var(--panel); }
.compare { min-width: 40rem; }
.compare th, .compare td { padding: 12px 16px; vertical-align: middle; }
.compare tbody th { font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--fg); font-weight: 600; }
.compare td { color: var(--muted); }
.compare tr:last-child > * { border-bottom: 0; }
.compare .us { color: var(--fg); border-left: 2px solid var(--vis); border-right: 2px solid var(--vis); }
.compare thead .us { color: var(--vis); border-top: 2px solid var(--vis); }
.compare tbody tr:last-child > .us { border-bottom: 2px solid var(--vis); }
.faq details { max-width: 70ch; }
.call h2 { max-width: 22ch; }
.call .say { color: var(--muted); max-width: 56ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); margin-bottom: 24px; }
.call .small, .about .small { user-select: text; }

/* Which desk is yours */
.desks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.dk { display: grid; gap: 10px; align-content: start; padding: 26px 24px 30px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.dk + .dk { padding-left: 24px; border-left: 1px solid var(--line); }
.dk h3 { font-size: 1.5rem; }
.dk p { color: var(--muted); max-width: 34ch; }
.dk em, .dk .em { font-style: normal; color: var(--vis); font-weight: 600; }
.dk .em { text-decoration: none; }
.dk .em:hover { text-decoration: underline; text-underline-offset: .15em; }
a.dk:hover h3 { text-decoration: underline; text-decoration-color: var(--vis); text-underline-offset: .15em; }
@media (max-width: 760px) { .desks { grid-template-columns: 1fr; } .dk { padding: 24px 0; } .dk + .dk { padding-left: 0; border-left: 0; } }

/* Rules: the home and recruitment lists carry a tick; plain pages get the diamond */
.rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 70ch; }
.rules li { display: grid; grid-template-columns: 20px 1fr; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--line); line-height: 1.5; margin: 0; }
.rules svg { width: 18px; height: 18px; margin-top: .3em; }
.rules svg path { stroke: var(--vis); }
.rules li:not(:has(svg))::before { content: ""; width: 8px; height: 8px; margin: .55em auto 0; background: var(--vis); transform: rotate(45deg); }

.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list li { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 6px 32px; padding-block: 18px; border-bottom: 1px solid var(--line); margin: 0; }
.list h3 { font-size: 1.1rem; letter-spacing: -.01em; }
.list p { color: var(--muted); max-width: 56ch; }
.list .meta { display: block; margin-top: 6px; color: var(--vis); font-size: .9rem; font-weight: 500; }
@media (max-width: 620px) { .list li { grid-template-columns: 1fr; } }

.about .cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.about .prose p { max-width: 60ch; }
.about .prose p:first-child { color: var(--fg); font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; }
.about .side { display: grid; gap: 18px; align-self: end; }
.about .small { font-size: .9rem; color: var(--muted); }
@media (max-width: 860px) { .about .cols { grid-template-columns: 1fr; } }

/* Plain pages: cards, steps, tables, details, forms, notices */
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid > * { min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 20px; display: grid; gap: 10px; align-content: start; }
.card p, .card li { color: var(--muted); }
.card h3, .card .price { color: var(--fg); }
.card .meta { font-size: .9rem; color: var(--vis); font-weight: 500; }
.card ul { padding-left: 1.1em; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: step; border-top: 1px solid var(--line); }
.steps li { margin: 0; counter-increment: step; display: grid; gap: 8px; align-content: start; padding: 22px 24px 26px 0; border-bottom: 1px solid var(--line); }
.steps li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.steps li::before { content: "Step " counter(step); font-size: .7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
.steps p { color: var(--muted); }
@media (max-width: 760px) { .steps li { padding: 20px 0; } .steps li + li { padding-left: 0; border-left: 0; } }
.price { font-variant-numeric: tabular-nums; font-weight: 700; }
.price.big { font-size: 2.2rem; letter-spacing: -.02em; line-height: 1.1; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .7rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }
details { border-top: 1px solid var(--line); padding-block: 14px; max-width: 66ch; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-weight: 600; }
summary:hover { color: var(--vis); }
details > div { padding-top: 10px; display: grid; gap: 10px; color: var(--muted); }
.section .prose { max-width: 66ch; gap: 14px; }
.section .prose h2 { margin-top: 28px; font-size: 1.5rem; }
.section .prose h3 { margin-top: 12px; font-size: 1.1rem; }
.prose blockquote { margin: 0; background: var(--panel); border-left: 4px solid var(--vis); padding: 14px 18px; color: var(--fg); }
.toc { background: var(--panel); border: 1px solid var(--line); padding: 16px 20px; max-width: 66ch; }
.toc ol { columns: 2 14rem; }
.toc-list { margin-top: 10px; }
form { display: grid; gap: 16px; max-width: 34rem; }
label { font-weight: 600; display: block; margin-bottom: 4px; }
.hint { font-size: .9rem; color: var(--muted); font-weight: 400; }
input[type="email"], input[type="text"], select, textarea { width: 100%; font: inherit; color: var(--fg); background: var(--panel-2); border: 1px solid var(--muted); padding: 10px 12px; min-height: 44px; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--vis); }
textarea { min-height: 9rem; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
legend { font-weight: 600; margin-bottom: 4px; }
.choice { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.choice input { margin-top: .35em; width: 18px; height: 18px; accent-color: var(--vis); }
.notice { border: 1px solid var(--line); border-left: 4px solid var(--vis); background: var(--panel); padding: 14px 16px; max-width: 34rem; }
.notice.error { border-left-color: #ff7b7b; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.foot { padding-block: 28px 40px; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); margin-top: 24px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.foot li + li { margin-top: 0; }


/* Flow and motion (Handoff 11 prototype, 23 Oct 2026). Appended to site.css. Same tokens, one face, one accent.
   Every effect starts from the finished, readable state; motion only runs under :root[data-motion="full"]. */
:root { --hh: 64px; --ease: cubic-bezier(.16, 1, .3, 1); }

/* Header: sticky, and compact once the hero has scrolled away. The compact bar names the chapter you are in,
   carries the booking button and fills a yellow progress line along its bottom edge. */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--bg); }
.head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.head .wrap { position: relative; }
.head .here { display: none; font-size: .78rem; font-weight: 600; color: var(--muted); align-items: center; gap: 10px; min-width: 0; }
.head .here::before { content: ""; width: 1px; height: 16px; background: var(--line); }
.head .here span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.head .bk { display: none; min-height: 38px; padding: 0 14px; font-size: .88rem; }
.head .prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--vis); opacity: 0; }
.head.compact .prog { opacity: 1; }
.head.compact .here { display: inline-flex; }
.head .lft { display: flex; align-items: center; gap: 14px; min-width: 0; }
@media (max-width: 760px) {
  .head.compact .wrap { flex-wrap: nowrap; padding-block: 10px; }
  .head.compact .nav { display: none; }
  .head.compact .bk { display: inline-flex; flex: none; }
}
@media (min-width: 761px) { .head.compact .wrap { padding-block: 12px; } }
:root[data-motion="full"] .head .wrap { transition: padding .3s var(--ease); }
:root[data-motion="full"] .head .here span { animation: chin .35s var(--ease); }
@keyframes chin { from { opacity: 0; transform: translateY(6px); } }
main [id] { scroll-margin-top: var(--hh); }
.head.fx { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); }

/* Reveals: a short rise as each block enters. Blocks already on screen at load are shown straight away. */
:root[data-motion="full"] .r { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
:root[data-motion="full"] .r.wait { opacity: 0; transform: translateY(18px); }

/* Hero: the highlight sweeps on under "A person approves it." */
.hero h1 mark { background: linear-gradient(var(--vis), var(--vis)) no-repeat 0 0 / 100% 100%; background-color: transparent; }
:root[data-motion="full"] .hero h1 mark { animation: sweep .9s .35s var(--ease) both; }
@keyframes sweep { from { background-size: 0 100%; color: var(--fg); } }

/* Sections are tighter than before: one rhythm, less dead space */
.sec { padding-block: clamp(44px, 6vw, 84px); }
.sec h2 { margin-bottom: clamp(18px, 2.4vw, 30px); }
.h2s { font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; }
.pin { display: grid; gap: 24px; align-content: start; }
@media (min-width: 861px) { .pin { position: sticky; top: calc(var(--hh) + 28px); } }

/* The problem: the big number counts up once, the pain lines light as they cross the middle of the screen */
.stat { display: grid; gap: 4px; border-top: 1px solid var(--line); padding-top: 16px; max-width: 22rem; }
.stat b { font-size: clamp(3.4rem, 8vw, 6.4rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; color: var(--vis); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 96, "wdth" 80; }
.stat span { color: var(--muted); font-size: .95rem; }
@media (max-width: 860px) { .stat { grid-template-columns: auto 1fr; align-items: end; gap: 14px; max-width: none; } .stat b { font-size: 3.2rem; } }
:root[data-motion="full"] .pains li { color: var(--muted); transition: color .5s var(--ease); }
:root[data-motion="full"] .pains li::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vis); transition: background .5s var(--ease), transform .5s var(--ease); }
:root[data-motion="full"] .pains li.lit { color: var(--fg); }
:root[data-motion="full"] .pains li.lit::before { background: var(--vis); transform: rotate(45deg) scale(1.15); }

/* Three steps: a rail fills left to right as the steps arrive. On phones the steps become a swipe row. */
.stages { position: relative; }
:root[data-motion="full"] .stages::after { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--vis); transform-origin: left; transform: scaleX(0); transition: transform 1.6s var(--ease) .2s; }
:root[data-motion="full"] .stages.in::after { transform: scaleX(1); }
:root[data-motion="full"] .stage .k::before { transition: transform .5s var(--ease); }
:root[data-motion="full"] .stages:not(.in) .stage .k::before { transform: rotate(45deg) scale(0); }
:root[data-motion="full"] .stages.in .stage:nth-child(2) .k::before { transition-delay: .6s; }
:root[data-motion="full"] .stages.in .stage:nth-child(3) .k::before { transition-delay: 1.1s; }

.dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; }
.dots i { width: 22px; height: 3px; background: var(--line); }
.dots i.on { background: var(--vis); }
:root[data-motion="full"] .dots i { transition: background .3s; }
/* Swipe rows only while motion is on: with JavaScript off or reduced motion the cards stack as before */
@media (max-width: 760px) {
  :root[data-motion="full"] .snap { display: grid !important; grid-auto-flow: column; grid-auto-columns: 86%; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-top: 0 !important; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding-inline: var(--gl) var(--gr); scroll-padding-inline: var(--gl); }
  :root[data-motion="full"] .snap::-webkit-scrollbar { display: none; }
  :root[data-motion="full"] .snap > * { scroll-snap-align: start; border: 1px solid var(--line) !important; background: var(--panel); padding: 20px 18px 22px !important; }
  .stages::after { display: none; }
}

/* Your tools: on phones each group's logos run in one swipeable row instead of wrapping into a wall */
@media (max-width: 760px) {
  .grp .logos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -14px; padding-inline: 14px; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .grp .logos::-webkit-scrollbar { display: none; }
  .lg2 { flex: none; }
}

/* What runs on your desk: one explorer instead of seven stacked cards. Tabs on the left (a swipe row on phones),
   one panel on the right. While it is on screen and untouched it steps through on its own, with a fill on the tab. */
.explore.js { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: 0 40px; align-items: start; }
.xtabs { display: grid; gap: 0; border-top: 1px solid var(--line); }
.xtabs button { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--muted); font: 600 1.05rem var(--font); padding: 14px 4px 14px 0; cursor: pointer; letter-spacing: -.01em; }
.xtabs button .k { font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; padding: 2px 7px; border: 1px solid var(--line); color: var(--muted); flex: none; }
.xtabs :not(.bld) + .bld { margin-top: 18px; border-top: 1px solid var(--line); }
.xtabs button:hover { color: var(--fg); }
.xtabs button[aria-selected="true"] { color: var(--fg); }
.xtabs button[aria-selected="true"] .k { border-color: var(--vis); color: var(--vis); }
.xtabs button i { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--vis); transform-origin: left; transform: scaleX(0); }
.xtabs button[aria-selected="true"] i { transform: scaleX(1); }
:root[data-motion="full"] .explore.auto .xtabs button[aria-selected="true"] i { animation: fill var(--step, 6s) linear both; }
@keyframes fill { from { transform: scaleX(0); } }
.explore.js .leaves { display: block; }
.explore.js .lv { border-top: 0; padding: 22px 24px 24px; background: var(--panel); border: 1px solid var(--line); min-height: 22rem; gap: 14px; }
.explore.js .lv h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.explore.js .demo { min-height: 150px; font-size: .86rem; padding: 18px; background: var(--panel-2); }
:root[data-motion="full"] .explore.js .lv:not([hidden]) { animation: pane .5s var(--ease); }
@keyframes pane { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 860px) {
  .explore.js { grid-template-columns: 1fr; gap: 12px; }
  .xtabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; border-top: 0; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding-inline: var(--gl) var(--gr); scroll-snap-type: x proximity; }
  .xtabs::-webkit-scrollbar { display: none; }
  .xtabs button, .xtabs :not(.bld) + .bld { flex: none; margin-top: 0; border: 1px solid var(--line); padding: 0 12px; min-height: 42px; font-size: .9rem; gap: 8px; scroll-snap-align: start; }
  .xtabs button[aria-selected="true"] { border-color: var(--vis); }
  .explore.js .lv { min-height: 0; padding: 18px 16px 20px; }
}

/* Who you get: the story stays pinned while the three proof cards stack over each other */
.about .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.about .side { align-self: start; }
.stack { border-top: 0; display: grid; gap: 14px; }
.stack li { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 20px 22px 22px; background: var(--panel); border: 1px solid var(--line); }
:root[data-motion="full"] .stack li { position: sticky; top: calc(var(--hh) + 20px + var(--i, 0) * 14px); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .7); }
.stack li:nth-child(2) { --i: 1; } .stack li:nth-child(3) { --i: 2; }
.stack h3 { font-size: 1.25rem; }
.stack .parts { gap: 10px; }
@media (max-width: 860px) { .about .cols { grid-template-columns: 1fr; } :root[data-motion="full"] .stack li { top: calc(var(--hh) + 12px + var(--i, 0) * 10px); } }

/* Why not a course: on phones a two-way switch shows Warm Desk against one alternative, so the table fits */
.vs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.vs .lab { width: 100%; }
.vs button { font: 600 .88rem var(--font); background: transparent; color: var(--muted); border: 1px solid var(--line); min-height: 40px; padding: 0 12px; cursor: pointer; }
.vs button[aria-pressed="true"] { color: var(--vis-ink); background: var(--vis); border-color: var(--vis); }
@media (min-width: 701px) { .vs { display: none !important; } }
@media (max-width: 700px) {
  .compare-wrap.js .compare { min-width: 0; }
  .compare-wrap.js .compare th, .compare-wrap.js .compare td { padding: 10px 10px; font-size: .9rem; }
  .compare-wrap.js[data-vs="course"] .compare tr > :nth-child(3), .compare-wrap.js[data-vs="firm"] .compare tr > :nth-child(2) { display: none; }
}
:root[data-motion="full"] .compare-wrap.js td:not(.us) { transition: opacity .3s; }
.rulesbox { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 48px; align-items: start; }
.rulesbox .rules { max-width: none; }
@media (max-width: 860px) { .rulesbox { grid-template-columns: 1fr; } }

/* Desks become a swipe row on phones (the .snap rules above) */
.dk { transition: background .3s; }

/* Questions and the call sit side by side; the call card stays in view while the answers open */
.close .cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 56px; }
.close .call { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--vis); padding: 26px 24px 28px; }
.close .call h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
@media (min-width: 861px) { .close .call { position: sticky; top: calc(var(--hh) + 28px); } }
@media (max-width: 860px) { .close .cols { grid-template-columns: 1fr; } }
details > div { overflow: hidden; }
:root[data-motion="full"] details[open] > div { animation: pane .4s var(--ease); }

/* Hero app on phones: three rows of the queue are enough to read the idea */
@media (max-width: 640px) { .qr:nth-of-type(n+4) { display: none; } .qfoot { display: none; } }

/* Phones: one-line header, a shorter hero window, proof as a swipe row (the stack needs the height a laptop has) */
.mark { white-space: nowrap; }
.head .lft { flex: 1 1 auto; }
@media (max-width: 760px) {
  .head .wrap { padding-block: 12px; gap: 8px 16px; }
  .head:not(.compact) nav { flex: 1 1 100%; min-width: 0; } /* lets the link row scroll inside the header instead of widening the page */
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; gap: 4px 20px; }
  .nav::-webkit-scrollbar { display: none; }
  .head.compact .here { font-size: .74rem; }
  :root[data-motion="full"] .stack li { position: static; box-shadow: none; }
  .stack.snap { align-items: start; }
}
@media (max-width: 640px) { .why .ins:nth-of-type(3), .app .uses { display: none; } }
.cols > *, #proof { min-width: 0; }

/* Recruitment, Where the hours go: the ledger rows light one by one like the pain lines. Lit without motion. */
:root[data-motion="full"] .ledger > div { transition: color .5s var(--ease); }
:root[data-motion="full"] .ledger > div:not(.lit) { color: var(--muted); }
:root[data-motion="full"] .ledger > div b { display: inline-block; transition: transform .5s var(--ease); }
:root[data-motion="full"] .ledger > div:not(.lit) b { transform: translateX(-6px); }