/* Breakaway Ops site look (2026-09-30 overhaul): the shared stylesheet every
   page loads. Copied from the approved homepage mockup (its shared styles and
   option C's own styles) and trimmed for the live site:
   the mockup banner and the on-page look-switch are gone, since neither
   belongs on a real page. Class names are kept identical to the mockup so its
   markup works here unchanged. */

/* ---------- the two typefaces ----------
   Served from our own address since 2026-10-01 (the same files Google Fonts
   serves, both under the SIL Open Font License; see fonts/LICENSE.txt).
   Fetching them from Google meant two extra connections before the headline
   could draw, which cost about two seconds on a phone. Each file is a
   variable font, so one file covers every weight the site uses. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:100%;font-display:swap;
  src:url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/fonts/inter-latin.woff2) format("woff2")}

/* ---------- the desk ---------- */
.desk{
  background:var(--d-bg);color:var(--d-ink);border:1px solid var(--d-line);
  border-radius:var(--d-radius,14px);overflow:hidden;
  font-feature-settings:"tnum" 1;box-shadow:var(--d-shadow,none);
  text-align:left;
}
.desk-bar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--d-line);font-size:13px;color:var(--d-soft);
}
.desk-dots{display:flex;gap:6px}
.desk-dots i{width:10px;height:10px;border-radius:50%;background:var(--d-line)}
.desk-title{color:var(--d-ink);font-weight:600}
.desk-live{margin-left:auto;display:flex;align-items:center;gap:7px}
.desk-live b{width:7px;height:7px;border-radius:50%;background:var(--d-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--d-accent) 25%,transparent)}
.desk-body{padding:18px}
.desk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.desk-kpis div{background:var(--d-cell);border:1px solid var(--d-line);border-radius:10px;padding:12px 14px}
.desk-kpis span{display:block;font-size:12px;color:var(--d-soft)}
.desk-kpis strong{display:block;font-size:clamp(17px,2vw,24px);font-weight:650;letter-spacing:-.02em;color:var(--d-ink);margin-top:2px}
.desk-row{
  display:grid;grid-template-columns:2.2fr 1fr .9fr 1.4fr;gap:10px;align-items:center;
  padding:9px 10px;border-radius:8px;font-size:14px;transition:background .6s;
}
.desk-row + .desk-row,[data-rows] .desk-row:first-child{border-top:1px solid var(--d-line)}
.desk-head{font-size:12px;color:var(--d-soft);padding-top:0}
.desk-row.flash{background:color-mix(in srgb,var(--d-accent) 14%,transparent)}
.desk-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.num{font-variant-numeric:tabular-nums}
.pill{
  font-style:normal;font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;
  white-space:nowrap;display:inline-block;
}
.pill.ok{background:color-mix(in srgb,var(--d-soft) 16%,transparent);color:var(--d-soft)}
.pill.late{background:rgba(255,122,102,.16);color:#FF9A88}
.pill.wait{background:rgba(255,200,87,.15);color:#FFCF6B}
.pill.done{background:color-mix(in srgb,var(--d-accent) 18%,transparent);color:var(--d-accent)}
.desk-ask{
  margin-top:14px;padding:12px 14px;border-radius:10px;border:1px dashed var(--d-line);
  font-size:13.5px;display:grid;gap:4px;
}
.desk-ask-q{color:var(--d-soft)}
.desk-ask-a{color:var(--d-ink)}

@media (max-width:620px){
  .desk-body{padding:12px}
  .desk-row{grid-template-columns:1.8fr 1fr 1.3fr;font-size:13px}
  .desk-row > span:nth-child(3){display:none}
  .desk-kpis{grid-template-columns:1fr 1fr}
  .desk-kpis div:nth-child(3){display:none}
}

/* ---------- small pictures of each build ---------- */
.mini{
  background:var(--d-bg);border:1px solid var(--d-line);border-radius:10px;
  padding:14px;font-size:12.5px;color:var(--d-ink);display:grid;gap:8px;align-content:start;
  min-height:150px;
}
.mini-kpi b{font-size:20px;letter-spacing:-.02em}
.mini-kpi span{color:var(--d-soft);margin-left:6px}
.mini-line{display:flex;align-items:center;gap:8px}
.mini-line span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-pay .mini-line i{width:6px;height:6px;border-radius:50%;background:var(--d-accent)}
.mini-reorder em{font-style:normal;color:var(--d-accent);font-weight:650}
.mini-draft{margin-top:2px;padding:7px 10px;border-radius:7px;background:var(--d-cell);color:var(--d-soft)}
.bubble{padding:8px 11px;border-radius:12px;max-width:88%;line-height:1.4}
.bubble.q{justify-self:end;background:var(--d-cell);color:var(--d-soft)}
.bubble.a{background:color-mix(in srgb,var(--d-accent) 16%,transparent)}
.mini-ats .grid{display:grid;grid-template-columns:14px 1.6fr 1fr 1fr;gap:7px 8px;align-items:center}
.mini-ats .grid > span:nth-child(-n+4){color:var(--d-soft);font-size:11.5px}
.sw{width:14px;height:14px;border-radius:3px}
.sw.a{background:#C9A77C}.sw.b{background:#7C5B46}.sw.c{background:#2B2B2B;border:1px solid var(--d-line)}

/* ---------- the voice-memo recorder ----------
   Shared visual shell for demo-request.js's real recorder. The mockup's own
   copy of this rule pretended to record; the real button lives in
   demo-request.js and actually asks for the microphone. */
.rec{display:flex;align-items:center;gap:16px}
.rec-btn{
  flex:0 0 auto;width:var(--rec-size,64px);height:var(--rec-size,64px);border-radius:50%;
  border:0;cursor:pointer;background:var(--d-accent);display:grid;place-items:center;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--d-accent) 18%,transparent);
  transition:transform .15s,box-shadow .3s;
}
.rec-btn:active{transform:scale(.95)}
.rec-btn::before{content:"";width:34%;height:34%;border-radius:50%;background:var(--rec-dot,#062019);transition:border-radius .2s}
.rec.is-rec .rec-btn{animation:pulse 1.4s infinite}
.rec.is-rec .rec-btn::before{border-radius:4px}
.rec.is-done .rec-btn::before{content:"✓";background:none;color:var(--rec-dot,#062019);font:800 22px/1 system-ui;width:auto;height:auto;display:grid;place-items:center}
@keyframes pulse{50%{box-shadow:0 0 0 14px color-mix(in srgb,var(--d-accent) 8%,transparent)}}
.rec-meta{display:grid;gap:2px}
.rec-label{font-weight:600;color:var(--ink)}
.rec-time{font-variant-numeric:tabular-nums;color:var(--soft);font-size:14px}
@media (prefers-reduced-motion:reduce){.rec.is-rec .rec-btn{animation:none}}

/* =====================================================================
   BASE — reset, type, layout primitives (from option C's own <style>)
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--soft);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.steps-list span,.price p,.price li,.card p,.way-line,.sec-head p,.faq-list details p,.guarantee,.bubble,.hero .sub,.call-strip p{text-wrap:balance}
.h1a,.h1b{display:inline-block;text-wrap:balance}
h2 .s{display:block}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(100% - 32px,var(--max,1180px));margin-inline:auto}
section{padding:clamp(64px,8vw,120px) 0}

.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:28px;height:68px}
.logo img{height:26px;width:auto}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px}
.nav-links a{color:var(--soft);text-decoration:none}
.nav-links a:hover{color:var(--ink)}

.sec-head{display:grid;gap:10px;margin-bottom:40px;max-width:640px}
.sec-head h2,.steps-title,.closing h2{font-size:var(--h2);line-height:1.08;letter-spacing:var(--h2-track,-.02em);font-family:var(--display);font-weight:var(--h2-w,650)}

.way-line{font-size:clamp(19px,1.8vw,23px);line-height:1.45;color:var(--ink);font-weight:500;max-width:34ch}

.work-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{border:1px solid var(--line);border-radius:var(--r,16px);background:var(--panel);padding:12px;display:grid;grid-template-rows:auto 1fr}
.card-body{padding:16px 8px 8px;display:grid;gap:8px;align-content:start}
.card .who{font-size:13.5px;color:var(--soft)}
.card h3{font-size:20px;letter-spacing:-.015em}
.card p:not(.who){font-size:15.5px}
.watch{font-size:15px;font-weight:600;text-decoration:none;margin-top:6px}
.watch::before{content:"▶";font-size:10px;margin-right:8px;vertical-align:2px}

.steps-title{margin-bottom:36px}
.steps-list{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
.steps-list li{counter-increment:s;display:grid;gap:6px;padding-top:20px;border-top:2px solid var(--line)}
.steps-list li::before{content:counter(s);font-family:var(--display);font-size:15px;font-weight:700;color:var(--accent)}
.steps-list b{color:var(--ink);font-size:19px}
.steps-list span{font-size:16px}

.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.price{border:1px solid var(--line);border-radius:var(--r,16px);padding:clamp(24px,3vw,40px);display:grid;gap:14px;align-content:start;background:var(--panel)}
.price h3{font-size:22px}
.amount{font-size:17px}
.amount strong{font-family:var(--display);font-size:clamp(40px,5vw,60px);letter-spacing:-.03em;color:var(--ink);font-weight:var(--num-w,650);margin-left:4px}
.amount small{font-size:17px}
.price ul{display:grid;gap:8px;margin-top:6px}
.price li{padding-left:22px;position:relative;font-size:16px}
.price li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--accent)}
.price-feature{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.guarantee{margin-top:28px;max-width:62ch;font-size:17px}
.guarantee strong{color:var(--ink)}

.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:20px}
.team figure{margin:0;display:grid;gap:14px}
.team img{border-radius:var(--r,16px);aspect-ratio:1;object-fit:cover;filter:var(--photo-filter,none)}
.team figcaption{display:grid}
.team figcaption b{color:var(--ink);font-size:18px}
.team figcaption span{font-size:15px}


.closing{text-align:center}
.closing h2{max-width:18ch;margin:0 auto 32px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.foot{border-top:1px solid var(--line);padding:32px 0 48px;font-size:14.5px}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.foot-in img{height:20px;width:auto;margin-right:auto}
.foot a{color:var(--soft);text-decoration:none}
.foot a:hover{color:var(--ink)}

@media (max-width:1000px){
  .work-grid{grid-template-columns:1fr 1fr}
  .steps-list{grid-template-columns:1fr 1fr;row-gap:28px}
}
@media (max-width:760px){
  .price-grid{grid-template-columns:1fr}
  .team-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  body{font-size:17px}
  .hero h1{font-size:31px !important}
  .work-grid,.steps-list{grid-template-columns:1fr}
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;
  border-radius:var(--btn-r,10px);font-weight:650;font-size:16px;text-decoration:none;border:1px solid transparent;
  transition:background .2s,border-color .2s,color .2s}
.btn-sm{min-height:40px;padding:0 16px;font-size:14px}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* =====================================================================
   TOKENS + OPTION C's HERO (the picked look)
   ===================================================================== */
:root{
  --bg:#0A120F;--panel:#101C18;--line:#1D2E28;--line-strong:#32483F;
  --ink:#F1F6F3;--soft:#93A69E;--accent:#3EE0A6;--accent-hover:#6BEBBD;--on-accent:#03140E;
  --display:"Bricolage Grotesque",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;
  --h2:clamp(34px,4.4vw,58px);--h2-track:-.035em;--h2-w:800;--num-w:800;--r:22px;--btn-r:14px;--max:1200px;
  --d-bg:#0C1814;--d-cell:#12211C;--d-line:#1F332C;--d-ink:#EEF5F1;--d-soft:#8AA197;--d-accent:#3EE0A6;--d-radius:18px;
  --rec-size:92px;
}
.hero{padding:clamp(48px,6vw,88px) 0 clamp(56px,6vw,96px);position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:auto -10% -40% -10%;height:80%;z-index:-2;
  background:radial-gradient(60% 60% at 60% 40%,rgba(10,95,75,.55),transparent 70%);pointer-events:none}
.metal{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-1}
.hero[data-look="still"] .metal{display:none}
.hero .call-strip{background:color-mix(in srgb,var(--panel) 82%,transparent);backdrop-filter:blur(10px)}
.hero h1{font-family:var(--display);font-size:clamp(38px,4.8vw,68px);line-height:1;letter-spacing:-.04em;font-weight:800;max-width:none}
.hero .sub{margin-top:18px;font-size:clamp(17px,1.4vw,20px);max-width:48ch}
.hero .where{margin-top:10px;font-size:14.5px}
.hero-grid{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;align-items:stretch}
.offer{background:#0A5F4B;border-radius:22px;padding:clamp(26px,3vw,40px);display:grid;gap:26px;align-content:space-between;color:#E4F3EC}
.offer .tag{font-family:var(--display);font-weight:700;font-size:15px;color:#9FF3D0}
.offer .way-line{color:#fff;font-size:clamp(21px,2vw,27px);line-height:1.35;font-family:var(--display);font-weight:500;letter-spacing:-.01em}
.offer .rec-label{color:#fff}.offer .rec-time{color:#B9DDCF}
.offer .alt{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px}
.offer .alt a{color:#CFF7E6}

.call-strip{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border:1px solid var(--line);border-radius:18px;padding:16px 16px 16px 26px;background:var(--panel)}
.call-strip p{color:var(--ink);font-weight:600;font-size:17px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.card{border-radius:22px}
.steps-list li{border-top:0;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.steps-list li::before{font-size:30px;line-height:1}
.closing h2{max-width:20ch}

/* Homepage green card: content starts at the top, not the middle. */
.offer{align-content:start}
.offer > [data-demo-request],.offer .dr-step-1{display:grid;gap:22px;align-content:start}
.offer .tag,.offer .way-line{margin:0}

/* "Watch it Work" is a button that opens the video; it looks like a link. */
button.watch{background:none;border:0;padding:0;margin-top:6px;color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer;justify-self:start;text-align:left}
button.watch:hover{text-decoration:underline}
/* The nav button never wraps onto two lines. */
.nav .btn-sm{white-space:nowrap}
/* Buttons styled as ghost buttons: no browser-default white fill. */
button.btn-ghost{background:transparent;cursor:pointer;font-family:inherit}
button.btn-primary{cursor:pointer;font-family:inherit}
/* The file picker's button matches the site's ghost buttons, not the browser's white default. */
input[type="file"]{color:var(--soft);font:inherit;font-size:15px}
input[type="file"]::file-selector-button{margin-right:12px;padding:8px 16px;border-radius:10px;border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
input[type="file"]::file-selector-button:hover{border-color:var(--ink)}

/* =====================================================================
   THE DEMO REQUEST FORM (demo-request.js), on the start page and in the
   homepage's green card. Moved here from start.html on 2026-10-01: the
   homepage card had none of it, so once a visitor chose to type, every box
   showed in the browser's plain white default.
   ===================================================================== */
.dr{max-width:640px}
.dr-step{border-top:1px solid var(--line);padding:28px 0}
.dr-step:first-child{border-top:0;padding-top:0}
.dr-step h2,.dr > h2.dr-done{font-family:var(--display);font-size:22px;font-weight:700;margin-bottom:8px}
.dr-step > p{margin-bottom:18px}
.dr-sub{margin-top:14px;font-size:15px;color:var(--soft)}
.dr-sub a{color:var(--accent)}
.dr-message{width:100%;margin-top:14px;padding:14px 16px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:12px;resize:vertical;min-height:100px}
.dr input[type="file"]{margin-top:4px;color:var(--soft);font-size:15px}
.dr-files{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.dr-files li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink)}
.dr-files button{background:none;border:1px solid var(--line-strong);color:var(--soft);border-radius:999px;
  width:24px;height:24px;line-height:1;cursor:pointer}
.dr-field{margin-bottom:18px}
.dr-field label{display:block;font-weight:650;color:var(--ink);margin-bottom:6px;font-size:15px}
.dr-field input{width:100%;min-height:52px;padding:12px 14px;font:inherit;font-size:16px;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:10px}
.dr-field input:focus{outline:3px solid var(--accent);outline-offset:2px}
.dr-turnstile{margin:6px 0 18px}
.dr-fine{margin-top:12px;font-size:14px;color:var(--soft)}
.dr-note{margin-top:16px;font-size:15px;color:var(--ink);background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:12px 16px}
.dr-note a{color:var(--accent)}
.dr .btn{margin-top:4px}
.dr-field input::placeholder,.dr-message::placeholder{color:var(--soft)}
.dr-message:focus{outline:3px solid var(--accent);outline-offset:2px}
.dr-done:focus{outline:none}

/* The same form inside the green card: boxes in a deeper green, white text. */
.offer .dr{max-width:none}
.offer .dr-contact{display:grid;gap:0;margin-top:4px}
.offer .dr-contact[hidden]{display:none}
.offer .dr-field{margin-bottom:14px}
.offer .dr-field label{color:#E4F3EC;font-size:14.5px}
.offer .dr-field input,.offer .dr-message{background:rgba(3,20,14,.38);border-color:rgba(228,243,236,.22);color:#fff}
.offer .dr-field input:focus,.offer .dr-message:focus{outline-color:#9FF3D0}
.offer .dr-message{margin-top:0}
.offer .dr-fine{color:#B9DDCF}
.offer .dr-note{background:rgba(3,20,14,.38);border-color:rgba(228,243,236,.22);color:#fff}
.offer .dr-note a:not(.btn){color:#CFF7E6}
.offer .dr-files li{color:#fff}
.offer .dr-files button{color:#E4F3EC;border-color:rgba(228,243,236,.4)}
.offer input[type="file"]{color:#B9DDCF}
.offer input[type="file"]::file-selector-button{color:#fff;border-color:rgba(228,243,236,.4)}
.offer .dr .btn-primary{justify-self:start}
.offer .dr-done{color:#fff;font-family:var(--display);font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.offer .dr-done + p{color:#E4F3EC;font-size:18px;margin-top:10px}

/* =====================================================================
   INNER PAGES (2026-10-01 polish). One layout for Our Work, Custom Builds,
   AI Concierge, FAQ, Get a FREE Demo and the three service pages, so they
   read as one site with the homepage: the same big display headline, the
   same green light at the top, the same panels.
   ===================================================================== */
.page{position:relative;isolation:isolate;padding:clamp(56px,7vw,104px) 0 clamp(72px,8vw,120px)}
.page::before{content:"";position:absolute;left:0;right:0;top:0;height:min(720px,90vh);z-index:-1;pointer-events:none;
  background:radial-gradient(46% 72% at 82% 0%,rgba(10,95,75,.46),transparent 72%),radial-gradient(34% 52% at 4% 0%,rgba(10,95,75,.16),transparent 70%)}
.page-head{max-width:820px;margin-bottom:clamp(40px,5vw,72px)}
.page-head h1{font-family:var(--display);font-size:clamp(42px,5.6vw,76px);line-height:1;letter-spacing:-.04em;font-weight:800}
.page-head-long{max-width:1000px}
.page-head-long h1{font-size:clamp(38px,4.8vw,64px)}
.page-head > p{margin-top:22px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;max-width:58ch}
.page-head .price-line{margin-top:18px;display:inline-flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:15.5px;color:var(--ink);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:999px;padding:8px 16px}
.panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:clamp(24px,3vw,36px)}
.block{margin-top:clamp(56px,7vw,96px)}
.block-title{font-family:var(--display);font-size:clamp(28px,3vw,40px);line-height:1.05;font-weight:800;letter-spacing:-.03em;margin-bottom:24px}

/* the three kinds of build, side by side */
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.kind-card{display:grid;gap:12px;grid-template-rows:auto 1fr auto;align-content:start}
.kind-card h2{font-size:22px;letter-spacing:-.015em}
.kind-card h2 a{color:inherit;text-decoration:none}
.kind-card h2 a:hover{color:var(--accent)}
.kind-card > p:not(.kind-price){font-size:16px}
.kind-price{font-size:15px;color:var(--ink);border-top:1px solid var(--line);padding-top:14px;margin-top:4px}

/* "How a Build Goes": five numbered steps */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;counter-reset:f}
.flow li{counter-increment:f;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;font-size:16px;color:var(--ink);line-height:1.45}
.flow li::before{content:counter(f);display:block;font-family:var(--display);font-weight:800;font-size:28px;line-height:1;color:var(--accent);margin-bottom:14px}

/* two panels side by side: the guarantee and who owns it */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pair h2{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.pair p{font-size:16.5px}

/* the FAQ list, wherever it appears */
.faq-list details{border-top:1px solid var(--line);padding:18px 0}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{cursor:pointer;color:var(--ink);font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:0 0 auto;width:12px;height:12px;margin-top:7px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(225deg);margin-top:11px}
.faq-list summary:hover{color:#fff}
.faq-list details p{margin-top:10px;font-size:16.5px;max-width:64ch}

/* the Ask box, wherever it appears */
.ask-box{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:clamp(24px,3vw,36px)}
.ask-box form{display:flex;gap:10px;flex-wrap:wrap}
.ask-box input[type="text"]{flex:1;min-width:220px;min-height:52px;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line-strong);border-radius:12px}
.ask-box input[type="text"]::placeholder{color:var(--soft)}
.ask-box input[type="text"]:focus{outline:3px solid var(--accent);outline-offset:2px}
.ask-box .btn{cursor:pointer}
[data-ask-answer]{margin-top:18px;font-size:16.5px;color:var(--ink)}
[data-ask-answer] .ask-note{margin-top:10px;font-size:14px;color:var(--soft)}

/* the Concierge price switch, wherever it appears */
.switch{display:inline-flex;gap:4px;border:1px solid var(--line-strong);border-radius:999px;padding:4px}
.switch-btn{font:inherit;font-size:14px;font-weight:650;border:0;background:transparent;color:var(--soft);border-radius:999px;padding:7px 15px;cursor:pointer;transition:background .2s,color .2s}
.switch-btn:hover{color:var(--ink)}
.switch-btn[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

/* the video windows */
.video-dialog{border:0;border-radius:18px;padding:0;background:var(--panel);color:var(--ink);max-width:min(92vw,960px);width:100%;overflow:hidden}
.video-dialog::backdrop{background:rgba(4,10,8,.78);backdrop-filter:blur(4px)}
.video-dialog video{display:block;width:100%;height:auto;aspect-ratio:16/10;background:#000}
.video-dialog-foot{display:flex;justify-content:flex-end;padding:12px 14px}
.video-dialog-foot button{background:none;border:1px solid var(--line-strong);color:var(--ink);border-radius:999px;padding:8px 18px;font:inherit;font-size:15px;font-weight:650;cursor:pointer}
.video-dialog-foot button:hover{border-color:var(--ink)}

@media (max-width:1000px){
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kinds{grid-template-columns:1fr}
}
@media (max-width:760px){
  .pair{grid-template-columns:1fr}
}
@media (max-width:520px){
  .flow{grid-template-columns:1fr}
  .page-head h1{font-size:40px}
  .page-head-long h1{font-size:33px}
}

/* =====================================================================
   HOMEPAGE POLISH (2026-10-01)
   ===================================================================== */
/* The liquid metal fades into the page instead of stopping at a hard edge. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(80px,12vw,180px);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg))}
/* Sections breathe, but not so far apart that the page feels empty. */
section{padding:clamp(64px,7vw,104px) 0}
/* Step cards: title and line start at the same height in every card. */
.steps-list li{align-content:start}
/* Build cards: "Watch it Work" sits on the same line in all four. */
.card-body{grid-template-rows:auto auto 1fr auto;height:100%}
.card-body button.watch{align-self:end;margin-top:10px}
.card{transition:border-color .2s}
.card:hover{border-color:var(--line-strong)}
.seats{font-size:15px;color:var(--soft)}
.price-feature .btn{justify-self:start}
/* The bios open with a quiet chevron, matching the FAQ. */
.bio summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--accent);margin-top:6px}
.bio summary::-webkit-details-marker{display:none}
.bio summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.bio[open] summary::after{transform:rotate(225deg) translate(-2px,-1px)}
.bio p{margin-top:12px;font-size:15.5px;line-height:1.6}
.team figcaption > span{color:var(--soft)}
.team-grid{grid-template-columns:repeat(2,minmax(0,340px));gap:24px}
@media (max-width:760px){.team-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}

/* The demo form's steps are <section>s: their own spacing, not a page section's. */
section.dr-step{padding:28px 0}
section.dr-step-1{border-top:0;padding-top:0}
section.dr-step:last-child{padding-bottom:0}
.offer section.dr-step{padding:0;border:0}
.panel .dr-field input,.panel .dr-message{background:var(--bg);border-color:var(--line-strong)}
.start-form .dr{max-width:none}
.faq-grid .ask-box form{flex-direction:column;align-items:stretch}
.faq-grid .ask-box .btn{align-self:flex-start}
/* Consecutive homepage sections share one gap instead of two. */
main > section + section{padding-top:0}
/* Who You'll Work With: the heading beside the two photos on wide screens. */
@media (min-width:1000px){
  .team .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:56px;align-items:start}
  .team .sec-head{position:sticky;top:110px}
}

/* The menu on phones and tablets (900px and under): the links fold behind a
   button beside Get a FREE Demo, instead of disappearing (before 2026-10-01 a
   phone had no way to reach Our Work, Custom Builds or AI Concierge from the
   top of the page) or wrapping onto two lines at tablet width. */
.nav-toggle{display:none}
.nav-links a{white-space:nowrap}
@media (max-width:900px){
  .nav-in{gap:10px}
  .nav-links{display:none}
  .nav .btn-sm{margin-left:auto}
  .nav-toggle{display:inline-grid;place-items:center;flex:0 0 auto;width:42px;height:40px;border:1px solid var(--line-strong);border-radius:12px;background:transparent;cursor:pointer;padding:0}
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,background .2s}
  .nav-toggle span{position:relative}
  .nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
  .nav-toggle span::before{top:-6px}
  .nav-toggle span::after{top:6px}
  .nav.open .nav-toggle span{background:transparent}
  .nav.open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
  .nav.open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
  .nav.open .nav-links{display:grid;position:absolute;left:0;right:0;top:100%;margin:0;padding:4px 16px 12px;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -24px rgba(0,0,0,.7)}
  .nav.open .nav-links a{padding:15px 0;font-size:17px;color:var(--ink);border-top:1px solid var(--line)}
  .nav.open .nav-links a:first-child{border-top:0}
}
@media (max-width:380px){.logo img{height:22px}}
@media (prefers-reduced-motion:reduce){.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{transition:none}}

/* =====================================================================
   THE PICKS FROM THE 2026-10-01 REVIEW (notes 1-17)
   ===================================================================== */
/* 3C: the second sentence of the offer is its own, brighter paragraph. */
.offer .way{display:grid;gap:0}
.offer .way-line2{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);color:#9FF3D0;
  font-family:var(--display);font-weight:700;font-size:clamp(18px,1.6vw,22px);line-height:1.35;letter-spacing:-.01em;text-wrap:balance}
.page-head .lead2{margin-top:12px;color:var(--accent);font-weight:600}

/* 2A: "Type it Instead" and "Attach a File" as pill buttons with an icon. */
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:10px 16px;font:600 15px var(--body);cursor:pointer;
  color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);transition:background .2s,transform .2s,border-color .2s}
.chip:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)}
.chip-ico{display:inline-grid;place-items:center}
.offer .alt{display:flex;flex-wrap:wrap;gap:10px}
.dr-sub{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}

/* 1A: the form is white. On the Get a FREE Demo page the whole form is one
   white sheet; in the homepage's green card, the part you fill in is. */
.start-form.panel{background:#fff;border-color:#fff;color:#4B5A54}
.start-form .dr-step{border-top-color:#E6ECE9}
.start-form .dr-step h2{color:#11201A}
.start-form .dr-step > p,.start-form .dr-sub,.start-form .dr-fine{color:#4B5A54}
.start-form .rec-label{color:#11201A}.start-form .rec-time{color:#6B7B75}
.start-form .dr-field label{color:#11201A}
.start-form .dr-field input,.start-form .dr-message{background:#fff;border:1px solid #C9D3CF;color:#11201A}
.start-form .dr-field input:focus,.start-form .dr-message:focus{outline-color:var(--brand);border-color:var(--brand)}
.start-form .dr-files li{color:#11201A}
.start-form .dr-files button{color:#4B5A54;border-color:#C9D3CF}
.start-form input[type="file"]{color:#4B5A54}
.start-form input[type="file"]::file-selector-button{color:#11201A;border-color:#C9D3CF}
.start-form .chip{color:#11201A;background:#F1F5F3;border-color:#D6DFDB}
.start-form .chip:hover{background:#E6EEEA}
.start-form .dr-note{background:#F4F7F6;border-color:#E1E8E5;color:#11201A}
.start-form .dr-note a:not(.btn){color:var(--brand)}
.start-form .dr-done{color:#11201A}
.offer .dr-contact:not([hidden]){display:grid;background:#fff;border-radius:18px;padding:20px 18px 18px;margin-top:6px;color:#4B5A54}
.offer .dr-contact .dr-field label{color:#11201A}
.offer .dr-contact .dr-field input{background:#fff;border:1px solid #C9D3CF;color:#11201A}
.offer .dr-contact .dr-field input:focus{outline-color:var(--brand)}
.offer .dr-contact .dr-fine{color:#4B5A54}
.offer .dr-contact .dr-note{background:#F4F7F6;border-color:#E1E8E5;color:#11201A}
.offer .dr-message{background:#fff;border:1px solid #fff;color:#11201A}
.offer .dr-message:focus{outline-color:#9FF3D0}
/* 4A: the hero's desk rotates through three tools; dots underneath. */
.desk{display:flex;flex-direction:column}
.desk-body{flex:1}
.desk-fade{animation:deskIn .5s ease both}
@keyframes deskIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.desk-ask{min-height:64px;align-content:start}
.desk-pager{display:flex;gap:2px;justify-content:center;padding:0 0 8px}
.desk-pager button{display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border:0;background:transparent;cursor:pointer}
.desk-pager button::before{content:"";width:8px;height:8px;border-radius:99px;background:#2A4239;transition:width .3s,background .3s}
.desk-pager button[aria-current="true"]::before{width:22px;background:var(--accent)}
.desk-pager button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.desk-fade{animation:none}}

/* 5C + 5B: the personalized demo bar, with your two faces, inside a slow
   chrome-green light that runs around its edge. */
@property --edge-a{syntax:'<angle>';initial-value:0deg;inherits:false}
.hero .call-strip{margin-top:16px;display:block;padding:2px;border:0;border-radius:20px;background:conic-gradient(from var(--edge-a),#3EE0A6,#0A5F4B 25%,#E8F7F0 50%,#0A5F4B 75%,#3EE0A6);animation:edgeSpin 6s linear infinite;backdrop-filter:none}
@keyframes edgeSpin{to{--edge-a:360deg}}
.call-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;border-radius:18px;padding:16px 18px 16px 20px;background:color-mix(in srgb,#0B1814 92%,transparent);backdrop-filter:blur(10px)}
.call-in .faces{display:flex;flex:none}
.call-in .faces img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #0B1814}
.call-in .faces img + img{margin-left:-14px}
.call-in p{flex:1;min-width:200px;color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.5vw,20px);line-height:1.3;letter-spacing:-.01em}
.call-in p small{display:block;font-family:var(--body);font-weight:500;font-size:14px;color:var(--soft);margin-top:3px;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.hero .call-strip{animation:none}}

/* 8A: each build type with a one-line description. */
.kinds-list{display:grid;margin-top:4px}
.kinds-list > div{padding:14px 0;border-top:1px solid var(--line)}
.kinds-list h4{display:flex;justify-content:space-between;gap:12px;font-family:var(--body);font-size:16.5px;font-weight:650;color:var(--ink)}
.kinds-list h4 span{color:var(--accent);white-space:nowrap}
.kinds-list p{margin-top:4px;font-size:15px}

/* 9C: Annual first, the monthly price struck through, the saving in dollars. */
.amount-annual{display:grid;gap:8px}
.amount .was{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);color:var(--soft);text-decoration:line-through;text-decoration-color:#FF8A7A;text-decoration-thickness:2px;margin:0 2px 0 4px;vertical-align:middle}
.save{justify-self:start;font-weight:700;font-size:14px;color:var(--accent);background:rgba(62,224,166,.12);border:1px solid rgba(62,224,166,.35);border-radius:999px;padding:4px 12px}
.price-btns{display:flex;flex-wrap:wrap;gap:10px}
.price-feature .btn{justify-self:auto}

/* 11B + A: the guarantee, one full-width line under both price cards. */
.guarantee-bar{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;border-radius:18px;padding:16px 20px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:linear-gradient(90deg,rgba(62,224,166,.12),rgba(62,224,166,.02))}
.g-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.04em;color:var(--on-accent);background:var(--accent);border-radius:12px;padding:9px 14px;white-space:nowrap}
.guarantee-bar p{color:var(--ink);font-size:16px;text-wrap:balance}
@media (max-width:640px){.guarantee-bar{grid-template-columns:1fr;gap:12px}.g-lab{justify-self:start}}

/* 12A: Who You'll Work With across the page; one partner above the other, bios open. */
@media (min-width:1000px){.team .wrap{display:block}.team .sec-head{position:static}}
.team-rows{display:grid;gap:0}
.person{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start;padding:28px 0;border-top:1px solid var(--line)}
.person:first-child{border-top:0;padding-top:8px}
.person img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:20px}
.person h3{font-size:24px;letter-spacing:-.02em}
.person .role{display:block;color:var(--accent);font-weight:600;font-size:14.5px;margin:2px 0 10px}
.person-text p{font-size:17px;line-height:1.7;color:#C9D6D0;max-width:72ch}
.person-text p + p{margin-top:12px}
@media (max-width:640px){.person{grid-template-columns:96px minmax(0,1fr);gap:16px}.person-text p{font-size:16px}}

/* 13C (lighter green): FAQs centered, numbered bars with a soft green tint. */
.sec-head.center{margin-inline:auto;text-align:center}
.ask .ask-box,.ask .faq-list{max-width:820px;margin-inline:auto}
.faq-bars{counter-reset:q;display:grid;gap:10px}
.faq-bars details{border:1px solid rgba(62,224,166,.2);background:rgba(62,224,166,.06);border-radius:16px;padding:0 20px;transition:background .2s,border-color .2s}
.faq-bars details:last-child{border-bottom:1px solid rgba(62,224,166,.2)}
.faq-bars details:hover{background:rgba(62,224,166,.09)}
.faq-bars details[open]{background:rgba(62,224,166,.12);border-color:rgba(62,224,166,.5)}
.faq-bars summary{counter-increment:q;padding:18px 0;font-family:var(--display);font-weight:700;font-size:18px;align-items:center}
.faq-bars summary::before{content:counter(q,decimal-leading-zero);color:var(--accent);font-weight:800;min-width:30px;flex:none}
.faq-bars details p{margin:0;padding:0 0 18px 30px}

/* 14B + A: every card is frosted glass with a glowing green edge, and the
   ones you can act on lift when hovered. */
.card,.price,.steps-list li,.kind-card,.pair .panel,.panel.included-panel,.ask-box,.portfolio-card{
  background:linear-gradient(rgba(16,28,24,.88),rgba(16,28,24,.88)) padding-box,
             linear-gradient(160deg,rgba(62,224,166,.55),rgba(62,224,166,.08) 38%,rgba(255,255,255,.07)) border-box;
  border:1px solid transparent;backdrop-filter:blur(8px);
  box-shadow:0 30px 60px -42px rgba(62,224,166,.5)}
.price-feature{background:linear-gradient(rgba(16,28,24,.9),rgba(16,28,24,.9)) padding-box,linear-gradient(160deg,var(--accent),rgba(62,224,166,.25) 45%,rgba(62,224,166,.5)) border-box}
.card,.price,.steps-list li,.kind-card,.portfolio-card{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.card:hover,.price:hover,.steps-list li:hover,.kind-card:hover,.portfolio-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(0,0,0,.85),0 30px 60px -42px rgba(62,224,166,.7)}
.card:hover{border-color:transparent}
@media (prefers-reduced-motion:reduce){.card,.price,.steps-list li,.kind-card,.portfolio-card{transition:none}.card:hover,.price:hover,.steps-list li:hover,.kind-card:hover,.portfolio-card:hover{transform:none}}

/* 10A: buttons in polished chrome; a streak of light slides across on hover. */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s,box-shadow .25s,border-color .2s}
.btn::after{content:"";position:absolute;top:-30%;bottom:-30%;width:45%;left:-70%;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);transform:skewX(-20deg);transition:left .75s cubic-bezier(.3,.7,.2,1)}
.btn:hover::after{left:125%}
.btn:hover{transform:translateY(-2px)}
.btn-primary{color:#04140E;background:linear-gradient(180deg,#E9FFF6 0%,#8CF2CC 22%,#3EE0A6 50%,#19A77A 80%,#BFF9E2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -2px 0 rgba(0,0,0,.18),0 8px 24px -12px rgba(62,224,166,.65)}
.btn-primary:hover{background:linear-gradient(180deg,#F2FFF9 0%,#9FF5D5 22%,#4EE6B0 50%,#1FB083 80%,#CFFBEA 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(0,0,0,.18),0 14px 30px -12px rgba(62,224,166,.85)}
.btn-ghost,button.btn-ghost{color:var(--ink);background:linear-gradient(180deg,#2C3E37,#12201B);border:1px solid #4A6A5D;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn-ghost:hover{border-color:#7FA596}
.btn-ghost::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent)}
.btn:disabled{transform:none;opacity:.55;cursor:not-allowed}
.btn:disabled::after{display:none}
@media (prefers-reduced-motion:reduce){.btn::after{display:none}.btn:hover{transform:none}}

/* 15C: the closing line sits on a band of green light rising from below,
   one line on laptops and wider. */
.closing{position:relative;isolation:isolate;padding:clamp(72px,8vw,120px) 0;margin-top:clamp(24px,4vw,48px);overflow:hidden}
.closing::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(55% 90% at 50% 115%,rgba(62,224,166,.32),rgba(10,95,75,.25) 45%,transparent 75%)}
.closing h2{max-width:none}
@media (min-width:900px){.closing h2{white-space:nowrap;font-size:clamp(28px,3.8vw,54px)}}

/* 17A: Custom Builds without the empty stretches. The closing call to action
   moves up under the three builds, where interest peaks. */
.cta-band{position:relative;isolation:isolate;overflow:hidden;margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;
  border-radius:22px;padding:clamp(22px,3vw,32px) clamp(22px,3vw,36px);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));
  background:radial-gradient(60% 140% at 100% 50%,rgba(62,224,166,.22),transparent 70%),linear-gradient(90deg,#0A5F4B,#0C3A2F)}
.cta-band h2{font-size:clamp(24px,2.8vw,36px);letter-spacing:-.03em;font-weight:800;color:#fff}
.cta-band .cta-row{justify-content:flex-start}
.build-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(48px,6vw,80px)}
.pair-stack{display:grid;gap:16px}
.pair-stack h2{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.pair-stack p{font-size:16.5px}
.pair-stack .panel{background:linear-gradient(rgba(16,28,24,.88),rgba(16,28,24,.88)) padding-box,linear-gradient(160deg,rgba(62,224,166,.55),rgba(62,224,166,.08) 38%,rgba(255,255,255,.07)) border-box;border:1px solid transparent}
.page-head{margin-bottom:clamp(32px,4vw,52px)}
@media (max-width:900px){.build-grid{grid-template-columns:1fr}}

/* 16C (four steps): a green line runs down through glowing dots, ending in gold. */
.path{position:relative;display:grid;gap:0;padding-left:44px;counter-reset:p}
.path::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;border-radius:2px;background:linear-gradient(var(--accent),rgba(62,224,166,.12))}
.path li{position:relative;counter-increment:p;padding:0 0 26px;color:var(--ink);font-size:18px;line-height:1.45}
.path li:last-child{padding-bottom:0}
.path li::before{content:counter(p);position:absolute;left:-44px;top:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font:800 14px var(--display);color:var(--on-accent);background:var(--accent);box-shadow:0 0 0 6px rgba(62,224,166,.14),0 0 22px rgba(62,224,166,.45)}
.path li:last-child::before{background:var(--gold,#FFC94A);box-shadow:0 0 0 6px rgba(255,201,74,.16),0 0 22px rgba(255,201,74,.4)}

/* 7A + search: Our Work as a portfolio you can filter by what a tool helps
   with, or search. New tools join as cards. */
.pf-tools{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;margin-bottom:22px}
.pf-search{flex:1 1 280px;max-width:420px;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;color:var(--soft);
  background:var(--panel);border:1px solid var(--line-strong)}
.pf-search:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.pf-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;outline:0}
.pf-search input::placeholder{color:var(--soft)}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chips button{font:600 14.5px var(--body);color:var(--ink);background:transparent;border:1px solid var(--line-strong);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.pf-chips button:hover{border-color:var(--accent)}
.pf-chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.portfolio-card{border-radius:22px;overflow:hidden;display:flex;flex-direction:column}
.portfolio-card[hidden]{display:none}
.pf-shot{display:block;position:relative;padding:0;border:0;background:#0C1814;cursor:pointer}
.pf-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.pf-shot::after{content:"";position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%2303140E'/%3E%3C/svg%3E") center/26px no-repeat;
  box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent);transition:transform .2s}
.pf-shot:hover::after{transform:scale(1.07)}
.pf-body{padding:20px 22px 22px;display:grid;gap:10px;flex:1;grid-template-rows:auto auto auto 1fr auto}
.pf-body .who{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.pf-tag{font-size:12px;font-weight:700;color:var(--accent);background:rgba(62,224,166,.12);border-radius:999px;padding:3px 10px}
.pf-body h2{font-size:clamp(22px,2.2vw,28px);letter-spacing:-.02em;font-weight:800}
.pf-lead{color:var(--ink);font-size:16.5px}
.pf-body ul{display:grid;gap:7px;align-content:start}
.pf-body li{padding-left:20px;position:relative;font-size:15px}
.pf-body li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--accent)}
.pf-body .btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.pf-empty{margin-top:12px;color:var(--soft)}
@media (max-width:860px){.pf-grid{grid-template-columns:1fr}}
/* Fixes after the first look at the picks. */
.kinds-list h4{margin:0}
.faq-bars summary{justify-content:flex-start;text-align:left}
.faq-bars summary::after{margin-left:auto}
.faq-bars details{background:rgba(62,224,166,.1);border-color:rgba(62,224,166,.28)}
.faq-bars details:last-child{border-bottom-color:rgba(62,224,166,.28)}
.faq-bars details:hover{background:rgba(62,224,166,.14)}
.faq-bars details[open]{background:rgba(62,224,166,.16);border-color:rgba(62,224,166,.6)}
/* every desk keeps one line per row, so rotating never changes its height */
.desk-row > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Inner-page sections set their own spacing; the homepage's section padding does not apply. */
main.page section{padding:0}
.pf-shot img{object-position:left top}
.desk-row > span:last-child{overflow:visible;text-overflow:clip}
@media (max-width:620px){.desk-row .pill{font-size:11px;padding:2px 7px}}

/* 6B: chapters under each video. */
.video-dialog{max-width:min(94vw,1040px)}
.chapters{list-style:none;margin:0;padding:12px 14px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.chapters button{width:100%;display:flex;gap:10px;align-items:flex-start;text-align:left;padding:9px 12px;border-radius:12px;cursor:pointer;
  font:500 14px/1.4 var(--body);color:var(--soft);background:rgba(62,224,166,.05);border:1px solid var(--line);transition:background .2s,border-color .2s,color .2s}
.chapters button:hover{border-color:var(--line-strong);color:var(--ink)}
.chapters button.on{background:rgba(62,224,166,.12);border-color:rgba(62,224,166,.5);color:var(--ink)}
.chapters .ch-t{flex:none;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;min-width:32px}
@media (max-width:640px){.chapters{grid-template-columns:1fr}}
.video-dialog{max-width:min(94vw,1040px,calc((100vh - 240px) * 1.6))}

/* Round of notes, 2026-10-01 afternoon. */
/* A [hidden] element stays hidden even where a rule gives it a display (the annual price showed under Monthly). */
[hidden]{display:none!important}
/* the price switch: two buttons the same size */
.switch{display:inline-grid;grid-template-columns:1fr 1fr;justify-self:start;width:max-content}
.switch-btn{text-align:center;padding:8px 18px}
/* "Watch it Work" reads as a button */
button.watch{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:999px;background:rgba(62,224,166,.08);color:var(--ink);transition:background .2s,border-color .2s}
button.watch::before{margin:0;color:var(--accent);vertical-align:0}
button.watch:hover{text-decoration:none;background:rgba(62,224,166,.16);border-color:var(--accent)}
/* a bar under the four cards into Our Work */
.work-more{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:18px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));background:linear-gradient(90deg,rgba(62,224,166,.12),rgba(62,224,166,.04));
  color:var(--ink);font-family:var(--display);font-weight:700;font-size:17px;text-decoration:none;transition:background .2s,border-color .2s}
.work-more svg{color:var(--accent);transition:transform .2s}
.work-more:hover{border-color:var(--accent);background:linear-gradient(90deg,rgba(62,224,166,.18),rgba(62,224,166,.08))}
.work-more:hover svg{transform:translateX(3px)}
/* the demo card fills its full height beside the desk: words at the top, the recorder and buttons at the bottom */
@media (min-width:901px){
  .offer{align-content:stretch;grid-template-rows:1fr}
  .offer > [data-demo-request]{display:flex;flex-direction:column}
  .offer form{flex:1;display:grid;grid-template-rows:1fr auto auto}
  .offer .dr-step-1{align-content:space-between}
}
/* FAQ answers start under the question, not under the number */
.faq-bars details p{padding:0 44px 20px 46px}
@media (max-width:640px){.faq-bars details p{padding:0 4px 18px 0}}

/* 1B: the main buttons and the GUARANTEE label in liquid chrome. One small
   picture of rippled metal (rendered once) slides slowly inside each button,
   with a mirrored copy drifting the other way on top, so the ripples seem to
   move like the hero. Only position and transform animate, which is cheap. */
.btn-primary,.g-lab{position:relative;overflow:hidden;isolation:isolate;color:#04140E;
  background:#6FEBC0 url(/assets/liquid-chrome.webp) 0 50%/auto 150% repeat-x;animation:lqA 16s ease-in-out infinite alternate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(0,0,0,.2),0 10px 26px -12px rgba(62,224,166,.75)}
.btn-primary::before,.g-lab::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:300%;z-index:-1;pointer-events:none;
  background:url(/assets/liquid-chrome.webp) 0 50%/auto 100% repeat-x;transform:scaleX(-1) translateX(0);opacity:.55;mix-blend-mode:soft-light;
  animation:lqB 11s ease-in-out infinite alternate}
.btn-primary::after{z-index:1}
.btn-primary:hover{background:#7FEFC8 url(/assets/liquid-chrome.webp) 0 50%/auto 150% repeat-x;filter:brightness(1.06)}
@keyframes lqA{from{background-position:0 50%}to{background-position:-420px 50%}}
@keyframes lqB{from{transform:scaleX(-1) translateX(0)}to{transform:scaleX(-1) translateX(-38%)}}
.g-lab{border-radius:12px}
@media (prefers-reduced-motion:reduce){.btn-primary,.g-lab,.btn-primary::before,.g-lab::before{animation:none}}

/* 4B: the two partners side by side, photo beside the name, the full bio underneath. */
@media (min-width:900px){
  .team-rows{grid-template-columns:1fr 1fr;gap:16px}
  .person,.person:first-child{grid-template-columns:96px minmax(0,1fr);grid-auto-rows:auto;column-gap:18px;row-gap:0;align-items:end;align-content:start;
    padding:24px;border:1px solid var(--line);border-radius:var(--r,22px);background:var(--panel)}
  .person picture{grid-column:1;grid-row:1 / span 2}
  .person img{border-radius:16px}
  .person-text{display:contents}
  .person-text h3{grid-column:2;grid-row:1;align-self:end}
  .person-text .role{grid-column:2;grid-row:2;align-self:start;margin-bottom:0}
  .person-text p{grid-column:1 / -1}
  .person-text .role + p{margin-top:18px}
  .person-text p{font-size:16.5px;line-height:1.65}
}

/* 3A: beside the demo card, a made-up example of how a FREE demo goes
   (a voice memo, our demo the next day, the finished tool). It plays in on a
   loop; with motion turned off, or if the animation never runs, it simply shows
   the whole story. */
.hero-story{background:var(--d-bg);color:var(--d-ink);border:1px solid var(--d-line);border-radius:var(--d-radius,18px);overflow:hidden;display:flex;flex-direction:column}
.story{list-style:none;margin:0;padding:clamp(18px,2.2vw,28px);display:flex;flex-direction:column;justify-content:space-between;gap:14px;flex:1}
.st-who{font-size:13px;color:var(--d-soft);margin-bottom:8px}
.st-bubble{display:inline-flex;align-items:center;gap:12px;background:var(--d-cell);border:1px solid var(--d-line);border-radius:18px 18px 18px 6px;padding:10px 16px 10px 10px}
.st-play{width:34px;height:34px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.st-play::before{content:"";border-left:11px solid #062019;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.st-wave{display:flex;align-items:center;gap:3px;height:26px}
.st-wave i{width:3px;height:calc(var(--h) * 1.5px);border-radius:2px;background:var(--accent);opacity:.85;transform-origin:center}
.st-len{font-size:13px;color:var(--d-soft);font-variant-numeric:tabular-nums}
.st-quote{margin-top:10px;font-family:var(--display);font-size:clamp(17px,1.5vw,20px);font-weight:500;color:var(--d-ink);max-width:30ch}
.st-time{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.st-time::before,.st-time::after{content:"";height:1px;flex:1;background:var(--d-line)}
.st-card{margin-left:auto;width:min(100%,460px);border:1px solid color-mix(in srgb,var(--accent) 55%,var(--d-line));border-radius:18px 18px 6px 18px;overflow:hidden;background:var(--d-cell)}
.st-card img{display:block;width:100%;height:auto;aspect-ratio:16/6;object-fit:cover;object-position:left top}
.st-card p{padding:12px 16px;font-size:15px;color:var(--d-ink)}
.st-card b{color:var(--accent)}
.st-done{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;color:var(--d-ink);background:rgba(62,224,166,.1);border:1px solid rgba(62,224,166,.45);border-radius:14px;padding:12px 16px}
.st-check{width:26px;height:26px;border-radius:50%;background:var(--accent);flex:none;display:grid;place-items:center}
.st-check::before{content:"";width:10px;height:5px;border-left:2.5px solid #062019;border-bottom:2.5px solid #062019;transform:translateY(-1px) rotate(-45deg)}
/* the loop: each step arrives in turn, all stay up, then the story starts again */
@media (prefers-reduced-motion:no-preference){
  .st{animation:stIn 15s cubic-bezier(.2,.7,.2,1) infinite both}
  .st:nth-child(1){--a:0%;animation-name:st1}.st:nth-child(2){animation-name:st2}.st:nth-child(3){animation-name:st3}.st:nth-child(4){animation-name:st4}.st:nth-child(5){animation-name:st5}
  .st-wave i{animation:stWave 1.1s ease-in-out infinite alternate}
  .st-wave i:nth-child(3n){animation-delay:-.3s}.st-wave i:nth-child(3n+1){animation-delay:-.7s}.st-wave i:nth-child(4n){animation-duration:.8s}
}
@keyframes st1{0%,2%{opacity:0;transform:translateY(12px)}6%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st2{0%,20%{opacity:0;transform:translateY(12px)}24%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st3{0%,28%{opacity:0;transform:translateY(12px) scale(.98)}33%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st4{0%,52%{opacity:0;transform:translateY(12px)}56%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes st5{0%,62%{opacity:0;transform:translateY(12px)}67%,94%{opacity:1;transform:none}100%{opacity:0}}
@keyframes stWave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

/* 2F: FAQs as an open Q&A. Question on the left, answer beside it, nothing to
   click. Soft glass panel, outlined numbers that fill in on hover, lines that
   fade at both ends. On phones each answer sits under its question. */
.ask .faq-ed,.ask .ask-box{max-width:1040px;margin-inline:auto}
.faq-ed{position:relative;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:var(--r,22px);
  background:radial-gradient(120% 70% at 0% 0%,rgba(62,224,166,.09),transparent 60%),linear-gradient(180deg,rgba(16,28,24,.92),rgba(12,22,19,.92));
  padding:8px clamp(18px,3.4vw,44px);box-shadow:0 30px 80px -50px rgba(62,224,166,.45)}
.faq-row{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.2fr);gap:clamp(18px,4vw,56px);align-items:start;padding:clamp(22px,2.6vw,30px) 0}
.faq-row + .faq-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 38%,transparent) 25%,color-mix(in srgb,var(--accent) 38%,transparent) 75%,transparent)}
.faq-row h3{display:flex;align-items:baseline;gap:16px;margin:0;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.9vw,23px);line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.faq-n{flex:none;min-width:1.6em;font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1.2px color-mix(in srgb,var(--accent) 75%,transparent);transition:color .25s}
.faq-row:hover .faq-n{color:var(--accent)}
.faq-row p{margin:0;font-size:17px;line-height:1.65;color:#C9D6D0;max-width:58ch;padding-top:2px}
.ask .faq-ed{margin-top:22px}
@media (max-width:760px){
  .faq-row{grid-template-columns:1fr;gap:10px}
  .faq-row p{font-size:16px}
}
/* 5C: each answer opens with one big green line, then the full answer smaller. */
.faq-a{max-width:58ch;padding-top:1px}
.faq-a .faq-short{font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.2;letter-spacing:-.015em;color:var(--accent);margin:0 0 8px;padding:0;max-width:none}
.faq-a p:not(.faq-short){font-size:16px;line-height:1.65;color:#B6C6BF;padding:0}
@media (max-width:760px){.faq-a .faq-short{font-size:20px}.faq-a p:not(.faq-short){font-size:15.5px}}
/* Prices are off the site: the big number becomes a short line in the same place. */
.amount-word strong{font-size:clamp(30px,3.2vw,42px);margin-left:0;letter-spacing:-.025em;line-height:1.1}
.conc-amount.amount-word strong{font-size:clamp(30px,3.2vw,42px);margin-left:0}

/* Cards in What We've Built line up across the row: preview, label, title,
   description and button each share one row height (subgrid). */
.work-grid{align-items:stretch}
.work-grid .card{grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:8px}
.work-grid .card-body{display:contents}
.work-grid .card .mini{margin-bottom:8px;min-height:0}
.work-grid .card .who,.work-grid .card h3,.work-grid .card p:not(.who),.work-grid .card .watch{margin-inline:8px}
.work-grid .card .who{align-self:end}
.work-grid .card .watch{align-self:end;justify-self:start;margin-top:6px;margin-bottom:8px}
/* Bios: first paragraph, then Read more */
.team-rows{align-items:stretch}
.bio-more p:first-child{margin-top:12px}
.bio-toggle{margin-top:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;cursor:pointer;
  font:600 15px var(--body);color:var(--ink);background:rgba(62,224,166,.08);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));transition:background .2s,border-color .2s}
.bio-toggle::after{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.bio-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}
.bio-toggle:hover{background:rgba(62,224,166,.16);border-color:var(--accent)}
@media (min-width:900px){.person-text .bio-toggle{grid-column:1 / -1;justify-self:start}.person-text .bio-more{grid-column:1 / -1}}

/* Picks 1A and 2B (2026-10-01): the demo form after recording, and the receipt. */
.dr-contact-h{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:#11201A;margin:0 0 14px}
.dr-pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 12px}
.offer .dr-contact .btn-primary,.start-form .dr-step-3 .btn-primary{width:100%;justify-self:stretch;min-height:54px;font-size:17px}
.offer .dr-contact .dr-fine,.start-form .dr-step-3 .dr-fine{text-align:center}
.start-form .dr-contact-h{display:none}   /* the start page already heads this step itself */
/* once a memo is recorded, the big headline steps aside on the homepage card */
.offer .dr.has-memo .way{display:none}
/* the memo player */
.memo{display:grid;gap:10px;justify-items:start}
.memo-row{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px 10px 10px;border-radius:16px;background:rgba(3,20,14,.35);border:1px solid rgba(228,243,236,.22)}
.memo-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;background:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(62,224,166,.18)}
.memo-play::before{content:"";border-left:13px solid #062019;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.memo.is-playing .memo-play::before{border:0;margin:0;width:12px;height:14px;background:linear-gradient(90deg,#062019 0 4px,transparent 4px 8px,#062019 8px 12px)}
.memo-play:focus-visible{outline:3px solid #9FF3D0;outline-offset:3px}
.memo-wave{flex:1;display:flex;align-items:center;justify-content:space-between;gap:2px;height:26px;min-width:0;overflow:hidden}
.memo-wave i{flex:1;max-width:4px;border-radius:2px;background:rgba(159,243,208,.45);transition:background .15s}
.memo-wave i.on{background:var(--accent)}
.memo-time{flex:none;font-size:14px;color:#B9DDCF;font-variant-numeric:tabular-nums}
.memo-redo{background:none;border:0;padding:2px 0;cursor:pointer;font:600 14.5px var(--body);color:#CFF7E6;text-decoration:underline;text-underline-offset:4px}
.memo-redo:hover{color:#fff}
.start-form .memo-row{background:#F1F6F3;border-color:#DDE6E2}
.start-form .memo-wave i{background:rgba(10,95,75,.3)}.start-form .memo-wave i.on{background:var(--brand)}
.start-form .memo-time{color:#4B5A54}.start-form .memo-redo{color:var(--brand)}
/* the receipt */
.dr-receipt{display:grid;gap:16px;align-content:start;justify-items:start}
.done-check{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 10px rgba(62,224,166,.18),0 0 44px rgba(62,224,166,.45);animation:doneIn .5s cubic-bezier(.2,.8,.2,1) both}
.done-check::before{content:"";width:24px;height:12px;border-left:4px solid #062019;border-bottom:4px solid #062019;transform:translateY(-3px) rotate(-45deg)}
@keyframes doneIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.done-check{animation:none}}
.dr-receipt .dr-done{margin:0}
.done-got{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.done-got li{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;border-radius:999px;padding:6px 12px;color:#fff;background:rgba(3,20,14,.35);border:1px solid rgba(228,243,236,.22)}
.done-got li::before{content:"✓";color:var(--accent);font-weight:800}
.done-when{justify-self:stretch;background:#fff;border-radius:18px;padding:18px 20px;text-align:center;color:#11201A;display:grid;gap:4px}
.done-when small{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#4B5A54}
.done-when b{font-family:var(--display);font-weight:800;font-size:clamp(26px,2.6vw,32px);letter-spacing:-.02em;line-height:1.1}
.done-when span{font-size:14px;color:#4B5A54}
.done-btns{justify-self:stretch;display:grid;gap:10px}
.done-btns .btn{width:100%}
.offer .dr-receipt .btn-ghost{background:transparent;border-color:rgba(228,243,236,.5);color:#fff}
.start-form .done-got li{color:#11201A;background:#F1F6F3;border-color:#DDE6E2}
.start-form .done-when{background:#F1F6F3}
.start-form .dr-receipt .dr-done{color:#11201A}
.start-form .dr-receipt .btn-ghost{color:#11201A;background:#fff;border-color:#C9D3CF}
.dr-pair{align-items:end}
.dr-receipt h2.dr-done{font-family:var(--display);font-weight:800;font-size:clamp(32px,3vw,42px);line-height:1;letter-spacing:-.03em;color:#fff}
.start-form .dr-receipt h2.dr-done{color:#11201A}
.memo-wave{height:34px}
.memo-wave i{max-width:5px;min-width:3px;transform:scaleY(1.6)}
.dr-contact-h + .dr-pair{grid-template-columns:1fr 1fr}   /* first and last name side by side, even on a phone */

/* ---------- UX pass, 2026-10-04: plain fixes from the live-site audit ---------- */
/* The start page's form lost the space between its steps: "main.page section{padding:0}"
   outranks "section.dr-step", so each divider line sat right on the next heading. */
main.page .start-form section.dr-step{padding:28px 0}
main.page .start-form section.dr-step-1{padding-top:0}
main.page .start-form section.dr-step:last-child{padding-bottom:0}
/* The full page's file box is the same chip as the homepage card, not the browser's own
   grey "Choose Files" button. */
.dr-step-2 .chip{margin-top:2px}
/* Phones and tablets: every control a thumb can hit is at least 44px tall (Apple's and
   Google's minimum), and running text is at least 16px. */
@media (max-width:900px){
  .btn-sm{min-height:44px}
  .nav-toggle{width:44px;height:44px}
  .chip,.bio-toggle,.pf-chips button{min-height:44px}
  .logo{display:inline-flex;align-items:center;min-height:44px}
  .kind-card h2 a{display:inline-block;padding-block:9px;margin-block:-9px}
  .foot-in{gap:4px 22px}
  .foot a{display:inline-flex;align-items:center;min-height:44px}
}
@media (max-width:600px){
  .card p,.work-grid .card p,.st-card p,.kind-price,.page-head .price-line,.kinds-list p,.portfolio-card li,.portfolio-card p:not(.who),.faq-a p:not(.faq-short){font-size:16px}
}
.nowrap{white-space:nowrap}
/* 3A: the two ways out under a refused Send */
.dr-note-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.dr-note-btns .btn{min-height:44px}
/* 4A: the 5-minute limit sits under the timer on the full page */
.rec-limit{display:block;font-size:14px;color:#4B5A54}
.start-form .dr-sub{margin-top:6px}