/* Spectrum IT — spectrumit.eu */

@font-face { font-family:"Archivo"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:600; font-display:swap; src:url("fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family:"Archivo"; font-style:normal; font-weight:700; font-display:swap; src:url("fonts/archivo-700.woff2") format("woff2"); }
@font-face { font-family:"Archivo Fallback Display"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans"); size-adjust:95.3%; line-gap-override:0%; }
@font-face { font-family:"Archivo Fallback Text"; src:local("Arial"),local("Helvetica Neue"),local("Liberation Sans"); size-adjust:97.8%; line-gap-override:0%; }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url("fonts/plex-mono-500.woff2") format("woff2"); }

:root{
  --paper:#F6F8FA; --card:#FFFFFF; --sunk:#EDF1F4;
  --ink:#1E2E3C; --ink-2:#2A3E51; --muted:#5F6E79; --faint:#8B96A0;
  --line:#E1E7EB; --line-2:#CDD6DD;
  --coral:#F04956; --coral-ink:#D6333F; --coral-wash:#FEF0F1;
  --navy:#1E2E3C; --navy-2:#16232E;
  --on-navy:#EAF0F4; --on-navy-muted:#93A6B4; --on-navy-line:#33475A;
  --shadow:0 14px 34px -16px rgba(22,38,54,.28);
  --shadow-lg:0 30px 70px -30px rgba(22,38,54,.45);
  --shell:1200px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0D171E; --card:#15222C; --sunk:#101B23;
    --ink:#EAF0F4; --ink-2:#DDE6EC; --muted:#9BADBA; --faint:#7A8D9B;
    --line:#22343F; --line-2:#2F4552;
    --coral:#FF5D69; --coral-ink:#FF7A84; --coral-wash:#2A171B;
    --navy:#0A1219; --navy-2:#070E13; --on-navy-line:#25373F;
    --shadow:0 14px 34px -16px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0D171E; --card:#15222C; --sunk:#101B23;
  --ink:#EAF0F4; --ink-2:#DDE6EC; --muted:#9BADBA; --faint:#7A8D9B;
  --line:#22343F; --line-2:#2F4552;
  --coral:#FF5D69; --coral-ink:#FF7A84; --coral-wash:#2A171B;
  --navy:#0A1219; --navy-2:#070E13; --on-navy-line:#25373F;
  --shadow:0 14px 34px -16px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.8);
}

*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink-2);
  font-family:"Archivo","Archivo Fallback Text",Arial,sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3{font-family:"Archivo","Archivo Fallback Display",Arial,sans-serif; color:var(--ink);}
img{max-width:100%;}
[hidden]{display:none!important;}
.shell{max-width:var(--shell); margin:0 auto; padding:0 32px;}
.mono{font-family:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;}
.skip{position:absolute; left:-9999px; top:0; background:var(--card); color:var(--ink); padding:10px 16px; z-index:60;}
.skip:focus{left:12px; top:12px;}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
[data-reveal].is-in{opacity:1; transform:none;}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid transparent; transition:border-color 200ms ease;}
.site-head.stuck{border-bottom-color:var(--line);}
.head-in{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:18px 0;}
.logo{display:block; text-decoration:none; color:var(--ink);}
.logo .lockup{display:block; height:27px; width:auto;}
.logo:focus-visible{outline:2px solid var(--coral); outline-offset:8px;}
.nav{display:flex; align-items:center; gap:30px;}
.nav a{color:var(--muted); text-decoration:none; font-size:14.5px;}
.nav a:hover{color:var(--ink);}
.nav a:focus-visible{outline:2px solid var(--coral); outline-offset:4px; border-radius:2px;}
.nav .cta{background:var(--coral); color:#fff; padding:10px 18px; border-radius:3px; font-weight:600;}
.nav .cta:hover{background:var(--coral-ink); color:#fff;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:3px; text-decoration:none; font-size:15px; font-weight:600; border:1px solid transparent; cursor:pointer;}
.btn-coral{background:var(--coral); color:#fff;}
.btn-coral:hover{background:var(--coral-ink);}
.btn-line{border-color:var(--line-2); color:var(--ink);}
.btn-line:hover{border-color:var(--ink); }
.btn:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}

/* ---------- browser frame ---------- */
.frame{border-radius:9px; overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);}
.frame .bar{height:24px; display:flex; align-items:center; gap:5px; padding:0 10px; background:var(--sunk); border-bottom:1px solid var(--line);}
.frame .bar i{width:6px; height:6px; border-radius:50%; background:var(--line-2); display:block;}
.frame img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top center;}

/* ---------- hero ---------- */
.hero{position:relative; padding:78px 0 96px;}
.hero .shell{position:relative; z-index:2;}
.hero-copy{max-width:560px;}
.hero h1{font-size:clamp(40px,5.2vw,64px); line-height:1.03; letter-spacing:-.032em; font-weight:600; margin:0; text-wrap:balance;}
.hero h1 em{font-style:normal; color:var(--coral-ink);}
.hero .lede{margin:26px 0 0; font-size:18.5px; line-height:1.6; color:var(--muted); max-width:50ch;}
.hero .actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;}
.hero .pricenote{margin:22px 0 0; font-size:14.5px; color:var(--faint);}
.hero .pricenote b{color:var(--ink); font-weight:600;}

.wall{position:absolute; top:0; right:0; bottom:0; width:52vw; overflow:hidden; z-index:1;}
.wall .cols{display:flex; align-items:flex-start; gap:22px; height:100%; padding:0 0 0 30px; transform:rotate(-8deg) scale(1.34); transform-origin:50% 50%;}
.wall-col{display:flex; flex-direction:column; width:320px; flex:none;}
.wall-col .frame{margin-bottom:22px; flex:none;}
.wall-col .frame img{height:240px; aspect-ratio:auto;}
.wall-col.up{animation:driftUp 60s linear infinite;}
.wall-col.down{animation:driftDown 72s linear infinite;}
@keyframes driftUp{from{transform:translateY(0)} to{transform:translateY(calc(-1 * var(--shift,50%)))}}
@keyframes driftDown{from{transform:translateY(calc(-1 * var(--shift,50%)))} to{transform:translateY(0)}}
.wall::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, var(--paper) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 14%, transparent 34%),
    linear-gradient(to bottom, var(--paper) 0%, transparent 16%),
    linear-gradient(to top, var(--paper) 0%, transparent 16%);}

/* ---------- sections ---------- */
section{padding:104px 0;}
section.sunk{background:var(--sunk);}
.sec-head{max-width:660px; margin:0 0 52px;}
.sec-head.mid{margin-left:auto; margin-right:auto; text-align:center;}
.sec-head .eyebrow{color:var(--coral-ink); margin:0 0 14px;}
.sec-head h2{font-size:clamp(28px,3.3vw,40px); line-height:1.1; letter-spacing:-.026em; font-weight:600; margin:0; text-wrap:balance;}
.sec-head p{margin:18px 0 0; color:var(--muted); font-size:17px; max-width:56ch;}
.sec-head.mid p{margin-left:auto; margin-right:auto;}

/* ---------- materials → site ---------- */
.transform{display:grid; grid-template-columns:1fr auto 1.15fr; gap:38px; align-items:center;}
.materials{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.mat{border-radius:6px; overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.mat img{display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;}
.mat:nth-child(1){transform:rotate(-2.5deg);}
.mat:nth-child(2){transform:rotate(1.8deg);}
.mat:nth-child(3){transform:rotate(1.2deg);}
.mat.note{display:flex; flex-direction:column; justify-content:center; gap:6px; padding:18px; transform:rotate(-1.4deg); aspect-ratio:4/3;}
.mat.note .mono{color:var(--faint);}
.mat.note strong{font-size:15.5px; color:var(--ink); font-weight:600; line-height:1.35;}
.arrowcol{display:flex; flex-direction:column; align-items:center; gap:12px; color:var(--coral-ink);}
.arrowcol svg{width:34px; height:34px;}
.arrowcol .mono{color:var(--faint); writing-mode:vertical-rl; letter-spacing:.2em;}
.transform figcaption{margin:20px 0 0; color:var(--muted); font-size:14.5px;}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:78px; border-top:1px solid var(--line);}
.step{padding:30px 26px 6px 0; position:relative;}
.step + .step{padding-left:26px; border-left:1px solid var(--line);}
.step .ic{width:44px; height:44px; border-radius:50%; background:var(--coral-wash); color:var(--coral-ink); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.step .ic svg{width:22px; height:22px;}
.step h3{font-size:16.5px; font-weight:600; margin:0 0 9px; letter-spacing:-.012em;}
.step p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6;}

/* ---------- work ---------- */
.caserow{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; padding:64px 0; border-top:1px solid var(--line);}
.caserow:first-of-type{border-top:0; padding-top:8px;}
.caserow.flip .casemedia{order:2;}
.casebody h3{font-size:26px; font-weight:600; letter-spacing:-.022em; margin:0 0 6px;}
.casebody .kind{color:var(--faint); margin:0 0 22px;}
.startedwith{color:var(--faint); margin:0 0 10px;}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; padding:0; list-style:none;}
.tags li{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:11.5px; color:var(--ink-2); background:var(--card); border:1px solid var(--line); border-radius:3px; padding:5px 10px;}
.casebody p.txt{margin:0 0 24px; color:var(--muted); font-size:15.5px; line-height:1.65;}
.golink{display:inline-flex; align-items:center; gap:8px; color:var(--coral-ink); text-decoration:none; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:12.5px; border-bottom:1px solid transparent;}
.golink:hover{border-bottom-color:var(--coral);}
.golink svg{transition:transform 160ms ease;}
.golink:hover svg{transform:translateX(3px);}
.soon{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--faint);}
.casemedia .frame{transition:transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease;}
.casemedia a:hover .frame{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.casemedia a{display:block; text-decoration:none;}

/* ---------- compare ---------- */
.compare{position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:9px; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--card); cursor:ew-resize; touch-action:none; user-select:none;}
.compare img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; pointer-events:none;}
.compare .over{position:absolute; top:0; left:0; bottom:0; width:var(--pos,38%); overflow:hidden;}
.compare .over .inner{position:absolute; top:0; left:0; height:100%; aspect-ratio:4/3;}
.compare .handle{position:absolute; top:0; bottom:0; left:var(--pos,38%); width:2px; background:var(--coral); transform:translateX(-1px); pointer-events:none;}
.compare .handle span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%; background:var(--coral); box-shadow:0 4px 14px rgba(0,0,0,.28); display:flex; align-items:center; justify-content:center;}
.compare .handle span svg{width:20px; height:20px; color:#fff;}
.compare .lbl{position:absolute; bottom:12px; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; background:rgba(20,32,44,.72); color:#fff; padding:5px 10px; border-radius:3px; pointer-events:none;}
.compare .lbl.l{left:12px;} .compare .lbl.r{right:12px;}
.compare:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}

/* ---------- panels ---------- */
.cols2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.panel{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:34px;}
.panel > .mono{color:var(--coral-ink); margin:0 0 8px;}
.panel h3{font-size:21px; font-weight:600; margin:0 0 22px; letter-spacing:-.018em;}
.panel ul{list-style:none; margin:0; padding:0;}
.panel li{display:flex; gap:13px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14.5px; line-height:1.55;}
.panel li:first-child{border-top:0; padding-top:0;}
.panel li svg{flex:none; width:17px; height:17px; margin-top:2px; color:var(--coral-ink);}
.panel .note{margin:22px 0 0; font-size:13.5px; color:var(--faint); line-height:1.55;}

/* ---------- pricing ---------- */
.prices{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.price{background:var(--card); border:1px solid var(--line); border-radius:6px; padding:38px 34px;}
.price.lead{border-color:var(--coral); box-shadow:0 0 0 1px var(--coral) inset, var(--shadow);}
.price .mono{color:var(--faint); margin:0 0 16px;}
.price .fig{display:flex; align-items:baseline; gap:10px; margin-bottom:16px;}
.price .amt{font-size:clamp(38px,4.4vw,52px); font-weight:600; letter-spacing:-.035em; line-height:1; color:var(--ink);}
.price .per{color:var(--muted); font-size:15px;}
.price p{margin:0; color:var(--muted); font-size:15px; line-height:1.62;}
.ownership{margin:24px 0 0; padding:24px 28px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--coral); border-radius:6px; color:var(--ink-2); font-size:15.5px; line-height:1.6;}

/* ---------- faq ---------- */
.faq{max-width:840px; border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative; font-weight:600; font-size:17px; letter-spacing:-.012em; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:10px; top:50%; width:9px; height:9px; margin-top:-6px; border-right:1.7px solid var(--coral-ink); border-bottom:1.7px solid var(--coral-ink); transform:rotate(45deg); transition:transform 180ms ease;}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.faq summary:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
.faq p{margin:0 0 22px; color:var(--muted); max-width:70ch; font-size:15.5px;}

/* ---------- start / form ---------- */
.start{background:var(--navy); color:var(--on-navy); padding:100px 0;}
.start .sec-head{margin-left:auto; margin-right:auto; text-align:center;}
.start .sec-head .eyebrow{color:var(--coral);}
.start .sec-head h2{color:var(--on-navy);}
.start .sec-head p{color:var(--on-navy-muted); margin-left:auto; margin-right:auto;}
.form{max-width:780px; margin:0 auto; background:var(--navy-2); border:1px solid var(--on-navy-line); border-radius:6px; padding:36px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;}
.field label{font-size:13.5px; color:var(--on-navy-muted);}
.field input,.field textarea{font:inherit; font-size:15px; color:var(--on-navy); background:rgba(255,255,255,.05); border:1px solid var(--on-navy-line); border-radius:3px; padding:12px 13px; width:100%;}
.field textarea{min-height:100px; resize:vertical;}
.field input:focus,.field textarea:focus{outline:2px solid var(--coral); outline-offset:1px; border-color:transparent;}
.field input::placeholder,.field textarea::placeholder{color:#6E8494;}
fieldset{border:0; margin:0 0 20px; padding:0;}
fieldset legend{font-size:13.5px; color:var(--on-navy-muted); padding:0; margin-bottom:11px;}
.checks{display:flex; flex-wrap:wrap; gap:9px;}
.check input{position:absolute; opacity:0; width:1px; height:1px;}
.check span{display:inline-block; padding:9px 15px; border:1px solid var(--on-navy-line); border-radius:3px; font-size:14px; color:var(--on-navy-muted); cursor:pointer;}
.check input:checked + span{border-color:var(--coral); color:#fff; background:rgba(240,73,86,.18);}
.check input:focus-visible + span{outline:2px solid var(--coral); outline-offset:2px;}
.form .submit{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:4px;}
.form button{font:inherit; font-weight:600; font-size:15px; cursor:pointer; background:var(--coral); color:#fff; border:0; border-radius:3px; padding:14px 28px;}
.form button:hover{background:var(--coral-ink);}
.form button:focus-visible{outline:2px solid #fff; outline-offset:3px;}
.form .alt{font-size:14px; color:var(--on-navy-muted); margin:0;}
.form .alt a{color:var(--on-navy); text-decoration:none; border-bottom:1px solid var(--coral);}
.formnote{margin:16px 0 0; font-size:14px; line-height:1.55;}
.formnote.ok{color:#8FE0B0;} .formnote.err{color:#FFAAB0;}

/* ---------- prose (legal) ---------- */
.pagehead{padding:64px 0 10px; border-bottom:1px solid var(--line);}
.pagehead h1{font-size:clamp(30px,4vw,44px); letter-spacing:-.026em; font-weight:600; margin:0 0 30px;}
.prose{max-width:68ch; padding:56px 0 96px;}
.prose h2{font-size:21px; font-weight:600; letter-spacing:-.01em; margin:48px 0 14px; padding-top:26px; border-top:1px solid var(--line);}
.prose h2:first-of-type{margin-top:0; padding-top:0; border-top:0;}
.prose p{margin:0 0 16px; color:var(--muted);}
.prose ul{margin:0 0 16px; padding-left:20px; color:var(--muted);}
.prose a{color:var(--coral-ink); text-decoration:none; border-bottom:1px solid var(--line-2);}
.prose a:hover{border-bottom-color:var(--coral);}
.prose .updated{color:var(--faint); margin-bottom:36px;}
.facts{display:grid; grid-template-columns:minmax(180px,max-content) 1fr; gap:10px 32px;}
.facts dt{color:var(--faint); font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:12px; padding-top:3px;}
.facts dd{margin:0; color:var(--ink-2);}

/* ---------- footer ---------- */
footer{background:var(--navy-2); color:var(--on-navy-muted); border-top:1px solid var(--on-navy-line); padding:36px 0 44px;}
.foot{display:flex; justify-content:space-between; gap:14px 40px; flex-wrap:wrap; font-size:14px;}
.foot .legal{display:flex; flex-direction:column; gap:6px;}
.foot .links{display:flex; gap:22px; align-items:flex-start;}
.foot a{color:var(--on-navy-muted); text-decoration:none; border-bottom:1px solid transparent;}
.foot a:hover{color:var(--on-navy); border-bottom-color:var(--on-navy-line);}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .wall{width:46vw;}
  .caserow{gap:40px;}
}
@media (max-width:980px){
  .hero{padding:44px 0 68px; display:flex; flex-direction:column;}
  .hero .shell{order:1;}
  .hero-copy{max-width:none;}
  .wall{order:2; position:static; width:auto; height:300px; margin:46px 0 0; border-radius:8px;}
  .wall .cols{transform:rotate(-3deg) scale(1.08); padding-left:0; justify-content:center;}
  .wall-col{width:212px;}
  .wall-col .frame{margin-bottom:16px;}
  .wall-col .frame img{height:160px;}
  .transform{grid-template-columns:1fr; gap:26px;}
  .arrowcol{flex-direction:row;}
  .arrowcol svg{transform:rotate(90deg);}
  .arrowcol .mono{writing-mode:horizontal-tb;}
  .steps{grid-template-columns:repeat(2,1fr); margin-top:56px;}
  .step:nth-child(3){border-left:0; padding-left:0;}
  .step:nth-child(3),.step:nth-child(4){border-top:1px solid var(--line); margin-top:8px;}
  .caserow{grid-template-columns:1fr; gap:28px; padding:48px 0;}
  .caserow.flip .casemedia{order:0;}
  .cols2,.prices,.grid2{grid-template-columns:1fr;}
  section{padding:72px 0;}
  .nav a:not(.cta){display:none;}
}
@media (max-width:560px){
  .shell{padding:0 20px;}
  .steps{grid-template-columns:1fr;}
  .step,.step + .step{padding-left:0; border-left:0;}
  .step + .step{border-top:1px solid var(--line); margin-top:6px; padding-top:26px;}
  .materials{grid-template-columns:1fr 1fr;}
  .logo .lockup{height:22px;}
  .form{padding:24px 20px;}
  .facts{grid-template-columns:1fr; gap:2px;}
  .facts dd{margin-bottom:14px;}
  .wall{height:270px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important;}
  [data-reveal]{opacity:1; transform:none;}
}

.ownership.wide{margin-top:60px;}

/* =========================================================
   v2: story chapters, offer, tools, case pages
   ========================================================= */

/* ---------- hero offer ---------- */
.hero .offer{display:flex; flex-wrap:wrap; gap:10px 28px; margin:24px 0 0; padding:0; list-style:none;}
.hero .offer li{display:flex; align-items:baseline; gap:8px; font-size:15px; color:var(--muted);}
.hero .offer b{font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink);}

@font-face{font-family:"Bebas Neue"; font-style:normal; font-weight:400; font-display:swap; src:url("fonts/bebas-neue.woff2") format("woff2");}
.bl-lock{display:inline-flex; align-items:center; gap:9px; background:#0d0d0d; border-radius:6px; padding:7px 15px 7px 10px;}
.s-brand .bl-lock img,.bl-lock img{display:block; width:30px; height:30px;}
.bl-lock span{font-family:"Bebas Neue","Oswald","Arial Narrow",sans-serif; font-size:25px; letter-spacing:.03em; line-height:1; color:#fff; padding-top:2px;}
.bl-lock em{font-style:normal; color:#F5000B;}

/* ---------- story chapter (shared) ---------- */
.story{--s-bg:var(--card); --s-ink:var(--ink); --s-body:var(--muted); --s-line:var(--line); --s-vis:var(--sunk); --s-accent:var(--coral-ink);
  position:relative; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  background:var(--s-bg); color:var(--s-body); border:1px solid var(--line); border-radius:12px; padding:56px; margin:0 0 32px; overflow:hidden;}
.story.flip .s-copy{order:2;}
.story.dark{--s-bg:var(--navy); --s-ink:#fff; --s-body:var(--on-navy-muted); --s-line:var(--on-navy-line); --s-vis:color-mix(in srgb,#fff 4%,transparent); --s-accent:#3CC4FF;
  border-color:transparent; box-shadow:var(--shadow-lg);}
.story.dark::before{content:""; position:absolute; right:-160px; top:-180px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(3,191,253,.16), transparent 70%); pointer-events:none;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .story.dark{--s-bg:#132330; border-color:var(--line);} }
:root[data-theme="dark"] .story.dark{--s-bg:#132330; border-color:var(--line);}

.s-copy{position:relative; min-width:0;}
.s-vis{min-width:0;}
.s-brand svg{max-width:100%;}
.s-brand{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:0 0 28px;}
.s-brand svg,.s-brand img{display:block; height:28px; width:auto;}
.story.dark .s-brand svg{color:#fff;}
.s-brand .pill{background:#0c0c0c; border-radius:4px; padding:5px 9px;}
.s-brand .pill img{height:22px;}
.s-kind{color:var(--s-body); opacity:.9;}
.story h3{font-size:clamp(28px,3.1vw,40px); line-height:1.1; letter-spacing:-.03em; font-weight:600; margin:0; color:var(--s-ink); text-wrap:balance;}
.story h3 em{font-style:normal; color:var(--s-accent);}
.s-line{margin:18px 0 0; color:var(--s-body); font-size:17px; line-height:1.6; max-width:46ch;}
.s-stats{display:grid; grid-template-columns:repeat(var(--n,3),1fr); margin:32px 0 0; border-top:1px solid var(--s-line);}
.s-stats div{padding:18px 16px 0 0;}
.s-stats div + div{padding-left:16px; border-left:1px solid var(--s-line);}
.s-stats dt{font-size:26px; font-weight:600; letter-spacing:-.03em; color:var(--s-ink); line-height:1.1;}
.s-stats dd{margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--s-body);}
.s-note{margin:26px 0 0; font-size:14.5px; color:var(--s-body);}
.s-go{margin-top:16px;}
.story.dark .s-go{color:#FF7A84;}

.s-vis{position:relative; background:var(--s-vis); border:1px solid var(--s-line); border-radius:10px; padding:20px 22px 22px;}
.s-vis.bare{background:none; border:0; padding:0;}

/* toggle */
.s-toggle{display:inline-flex; background:color-mix(in srgb, var(--ink) 9%, transparent); border-radius:999px; padding:4px; margin:0 0 18px;}
.story.dark .s-toggle{background:rgba(0,0,0,.22);}
.s-toggle button{font:500 12px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--s-body);
  background:none; border:0; padding:9px 16px; border-radius:999px; cursor:pointer; transition:background .25s,color .25s;}
.s-toggle button[aria-pressed="true"]{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12);}
.story.dark .s-toggle button[aria-pressed="true"]{background:#fff; color:var(--navy);}
.s-toggle button:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
.s-stage{position:relative;}

/* --- STACKED MARKETER: bills --- */
.bills-stage{height:380px;}
.bills{list-style:none; margin:0; padding:0; position:absolute; inset:0;}
.bills li{position:absolute; left:0; right:0; top:calc(var(--i) * 66px); height:56px; display:flex; align-items:center; gap:14px; padding:0 18px;
  background:var(--card); color:var(--ink); border-radius:7px; box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
  transform:rotate(calc((var(--i) - 2) * .6deg));
  transition:transform .6s cubic-bezier(.5,0,.2,1) calc(var(--i) * 110ms), opacity .5s ease calc(var(--i) * 110ms + 120ms);}
.bills li::after{content:""; position:absolute; left:14px; right:14px; top:50%; height:2px; background:var(--coral); transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease calc(var(--i) * 110ms);}
.b-ic{flex:none; width:32px; height:32px; border-radius:50%; background:var(--sunk); color:var(--muted); display:flex; align-items:center; justify-content:center;}
.b-ic svg{width:17px; height:17px;}
.b-name{flex:1; font-size:15px; font-weight:500; line-height:1.25;}
.b-amt{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap; text-align:right;}
.b-amt small{font-size:11.5px; color:var(--faint); font-weight:400;}
.newsite{position:absolute; top:0; left:0; right:0; opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.3,1); box-shadow:0 30px 60px -24px rgba(0,0,0,.7); border-color:transparent;}
.frame .bar .url{margin-left:10px; font:500 10.5px/1 "IBM Plex Mono",ui-monospace,Menlo,monospace; color:var(--faint); letter-spacing:.02em;}
.newsite img{aspect-ratio:4/3;}
.after{position:absolute; right:-10px; width:60%; bottom:0; background:var(--card); color:var(--ink); border-radius:10px; padding:20px 20px 18px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7); opacity:0; transform:translateY(26px) scale(.94); pointer-events:none;
  transition:opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1.15);}
.a-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.a-head svg{display:block; height:20px; width:auto; color:#1E2E3C;}
.a-tag{font-size:10.5px; color:#0A7F4F; background:#E3F6EC; padding:6px 10px; border-radius:3px; white-space:nowrap;}
.a-title{white-space:nowrap; margin:16px 0 12px; font-size:21px; font-weight:600; letter-spacing:-.022em; color:var(--ink);}
.a-cost{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0; padding-top:12px; border-top:1px solid var(--line);}
.a-cost .mono{font-size:10px; color:var(--faint); white-space:nowrap;}
.a-cost > span:last-child{white-space:nowrap; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; font-size:14px; font-weight:500; color:var(--ink);}
.a-cost small{font-size:11px; color:var(--faint); font-weight:400;}
.saved{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:18px; padding-top:16px; border-top:1px solid var(--s-line);}
.saved .mono{color:var(--s-body);}
.s-num{font-size:34px; font-weight:600; letter-spacing:-.03em; color:var(--s-accent); font-variant-numeric:tabular-nums; line-height:1;}
.is-after .bills li{transform:translateY(calc((2 - var(--i)) * 66px + 30px)) scale(.9) rotate(0deg); opacity:0;}
.is-after .bills li::after{transform:scaleX(1);}
.is-after .newsite{opacity:1; transform:none; transition-delay:.6s;}
.is-after .after{opacity:1; transform:none; transition-delay:1.05s;}

/* --- Burger Lab: materials -> site --- */
.mat-stage{height:360px;}
.mats{position:absolute; inset:0;}
.mats .m{position:absolute; width:52%; border-radius:6px; overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);
  transition:transform .7s cubic-bezier(.5,0,.2,1) calc(var(--i) * 90ms), opacity .5s ease calc(var(--i) * 90ms + 150ms);}
.mats .m img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover;}
.mats .m:nth-child(1){left:0; top:6px; transform:rotate(-4deg);}
.mats .m:nth-child(2){right:0; top:0; transform:rotate(3deg);}
.mats .m:nth-child(3){left:6%; bottom:0; transform:rotate(2deg);}
.mats .m.note{right:3%; bottom:22px; width:44%; padding:16px 16px 18px; transform:rotate(-2.5deg);}
.mats .m.note .mono{color:var(--faint); display:block; margin-bottom:6px;}
.mats .m.note strong{font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.35;}
.mats .m.note .wa{display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:12px; color:#128C4B;}
.site-out{position:absolute; inset:0; display:flex; align-items:center;}
.site-out .frame{width:100%; opacity:0; transform:translateY(16px) scale(.97); transition:opacity .5s ease .45s, transform .7s cubic-bezier(.2,.8,.3,1) .45s;}
.is-after .mats .m{transform:translate(0,30px) scale(.85) rotate(0deg); opacity:0;}
.is-after .site-out .frame{opacity:1; transform:none;}

/* --- 90 Percent: site + email --- */
.duo{position:relative; padding:0 0 46px;}
.duo .frame{width:84%;}
.duo .email{position:absolute; right:0; bottom:0; width:38%; border-radius:12px; overflow:hidden; border:6px solid #1E2E3C; background:#F4F1EA; box-shadow:var(--shadow-lg);}
.duo .email img{display:block; width:100%; height:auto;}
.duo .tagl{position:absolute; left:10px; bottom:6px; color:var(--faint);}

/* compare inside story */
.story .compare{box-shadow:var(--shadow);}

/* ---------- tools ---------- */
.tools-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin:72px 0 26px;}
.tools-head h3{font-size:clamp(24px,2.6vw,32px); line-height:1.15; letter-spacing:-.025em; font-weight:600; margin:0; max-width:24ch;}
.tools-head p{margin:10px 0 0; color:var(--muted); font-size:16px; max-width:52ch;}
.tools{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tool{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:26px 24px 24px; transition:transform .2s ease, box-shadow .2s ease;}
.tool:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.tool .ti{width:44px; height:44px; border-radius:9px; overflow:hidden; margin-bottom:18px;}
.tool .ti svg{display:block; width:100%; height:100%;}
.tool h4{margin:0 0 4px; font-size:18px; font-weight:600; color:var(--ink); letter-spacing:-.015em;}
.tool .for{margin:0 0 12px; color:var(--faint);}
.tool p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6;}
.tools-cta{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:20px; padding:22px 26px; border-radius:10px; background:var(--coral-wash);}
.tools-cta p{margin:0; color:var(--ink); font-size:16px; font-weight:500;}

/* ---------- offer ---------- */
.offer-card{display:grid; grid-template-columns:1fr 1fr; background:var(--card); border:1px solid var(--coral); box-shadow:0 0 0 1px var(--coral) inset, var(--shadow); border-radius:10px; overflow:hidden; margin:0 0 28px;}
.offer-card > div{padding:38px 36px;}
.offer-card > div + div{border-left:1px solid var(--line);}
.offer-card .mono{color:var(--faint); margin:0 0 14px;}
.offer-card .fig{display:flex; align-items:baseline; gap:10px; margin:0 0 12px;}
.offer-card .amt{font-size:clamp(40px,4.6vw,56px); font-weight:600; letter-spacing:-.035em; line-height:1; color:var(--ink);}
.offer-card .amt.zero{color:var(--coral-ink);}
.offer-card .per{color:var(--muted); font-size:15px;}
.offer-card p{margin:0; color:var(--muted); font-size:15px; line-height:1.6;}
.terms{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px;}
.term{display:flex; gap:14px; align-items:flex-start;}
.term .ic{flex:none; width:38px; height:38px; border-radius:50%; background:var(--coral-wash); color:var(--coral-ink); display:flex; align-items:center; justify-content:center;}
.term .ic svg{width:19px; height:19px;}
.term b{display:block; color:var(--ink); font-weight:600; font-size:15px; margin:2px 0 3px;}
.term span{color:var(--muted); font-size:14px; line-height:1.55;}

/* ---------- case pages ---------- */
.crumb{margin:0 0 26px;}
.crumb a{color:var(--muted); text-decoration:none;}
.crumb a:hover{color:var(--ink);}
.case-hero{padding:64px 0 40px;}
.case-hero .s-brand{margin-bottom:22px;}
.case-hero h1{font-size:clamp(34px,4.6vw,56px); line-height:1.05; letter-spacing:-.033em; font-weight:600; margin:0; max-width:20ch; text-wrap:balance;}
.case-hero h1 em{font-style:normal; color:var(--coral-ink);}
.case-hero .lede{margin:22px 0 0; font-size:18.5px; color:var(--muted); max-width:56ch; line-height:1.6;}
.case-shot{padding:12px 0 72px;}
.case-shot .frame img{aspect-ratio:auto; height:auto;}
.chapters{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.chap{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:28px 26px;}
.chap .mono{color:var(--coral-ink); margin:0 0 12px; display:block;}
.chap h3{margin:0 0 10px; font-size:19px; font-weight:600; letter-spacing:-.018em; line-height:1.3;}
.chap p{margin:0; color:var(--muted); font-size:15px; line-height:1.6;}
.did{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:0; padding:0; list-style:none;}
.did.three{grid-template-columns:repeat(3,1fr);}
.did li{display:flex; gap:14px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 22px;}
.did .ic{flex:none; width:40px; height:40px; border-radius:50%; background:var(--coral-wash); color:var(--coral-ink); display:flex; align-items:center; justify-content:center;}
.did .ic svg{width:20px; height:20px;}
.did b{display:block; color:var(--ink); font-size:15.5px; font-weight:600; margin:2px 0 4px;}
.did span{color:var(--muted); font-size:14.5px; line-height:1.55;}
.costs{width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:15px;}
.costs th,.costs td{text-align:left; padding:14px 20px; border-top:1px solid var(--line);}
.costs thead th{border-top:0; background:var(--sunk); font:500 11px/1.4 "IBM Plex Mono",ui-monospace,Menlo,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}
.costs td:last-child,.costs th:last-child{text-align:right; font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; white-space:nowrap;}
.costs tr.gone td:first-child{color:var(--muted);}
.costs tr.total td{font-weight:600; color:var(--ink); background:var(--sunk);}
.costs tr.now td{color:var(--ink);}
.costs tr.save td{font-weight:600; color:#0A7F4F; font-size:17px;}
.next-case{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:30px 0; border-top:1px solid var(--line);}
.big-stats{display:grid; grid-template-columns:repeat(var(--n,3),1fr); gap:20px;}
.big-stats div{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:26px 24px;}
.big-stats dt{font-size:clamp(30px,3.4vw,42px); font-weight:600; letter-spacing:-.035em; color:var(--ink); line-height:1;}
.big-stats dd{margin:10px 0 0; color:var(--muted); font-size:14.5px;}

/* ---------- motion & responsive ---------- */
@media (prefers-reduced-motion:reduce){ .bills li,.bills li::after,.after,.newsite,.mats .m,.site-out .frame{transition:none!important;} }
@media (max-width:980px){
  .story{grid-template-columns:1fr; gap:40px; padding:40px 26px 30px;}
  .story.flip .s-copy{order:0;}
  .tools{grid-template-columns:1fr;}
  .offer-card{grid-template-columns:1fr;}
  .offer-card > div + div{border-left:0; border-top:1px solid var(--line);}
  .terms{grid-template-columns:1fr;}
  .chapters{grid-template-columns:1fr;}
  .did,.did.three{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .story{padding:32px 18px 22px; border-radius:10px;}
  .s-stats div{padding-right:10px;}
  .s-stats div + div{padding-left:10px;}
  .s-stats dt{font-size:21px;}
  .s-stats dd{font-size:12px;}
  .s-vis{padding:16px 14px 16px;}
  .bills-stage{height:330px;}
  .bills li{gap:10px; padding:0 12px;}
  .b-ic{display:none;}
  .b-name{font-size:13.5px;}
  .b-amt{font-size:12px;}
  .b-amt small{font-size:10.5px; display:block;}
  .after{width:88%; right:-6px; padding:16px 16px 14px;}
  .a-title{font-size:19px;}
  .a-tag{letter-spacing:.05em; font-size:9.5px;}
  .mat-stage{height:260px;}
  .mats .m.note{padding:10px 10px 12px;}
  .mats .m.note strong{font-size:12.5px;}
  .duo .email{width:42%; border-width:4px;}
  .costs th,.costs td{padding:12px 12px; font-size:13.5px;}
  .big-stats{grid-template-columns:1fr;}
  .hero .offer b{font-size:19px;}
}

/* ---------- live-site links on frames ---------- */
a.frame.live{display:block; position:relative; text-decoration:none; color:inherit;}
a.frame.live .bar .url{display:inline-flex; align-items:center; gap:5px;}
a.frame.live:hover .bar .url{color:var(--coral-ink);}
a.frame.live .open{position:absolute; left:0; right:0; top:24px; bottom:0; display:flex; align-items:center; justify-content:center;
  background:rgba(14,24,33,.42); opacity:0; transition:opacity .2s ease;}
a.frame.live .open span{display:inline-flex; align-items:center; gap:8px; background:var(--coral); color:#fff; font:600 14px/1 "Archivo",Arial,sans-serif; padding:14px 22px; border-radius:999px; box-shadow:0 8px 24px -8px rgba(0,0,0,.5);}
a.newsite.live .open{align-items:flex-start; justify-content:flex-start; padding:9% 0 0 7%;}
a.frame.live:hover .open,a.frame.live:focus-visible .open{opacity:1;}
a.frame.live:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}
.case-shot a.frame.live,.duo a.frame.live,.transform a.frame.live{transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;}
.case-shot a.frame.live:hover,.duo a.frame.live:hover,.transform a.frame.live:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.newsite,.site-out .frame{pointer-events:none;}
.is-after .newsite,.is-after .site-out .frame{pointer-events:auto;}
.s-links{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:16px;}
.story.dark .s-links .golink{color:#FF7A84;}

/* ---------- compare page ---------- */
.cmp-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); -webkit-overflow-scrolling:touch;}
.cmp{width:100%; min-width:860px; border-collapse:separate; border-spacing:0; font-size:14.5px;}
.cmp th,.cmp td{padding:15px 18px; text-align:left; vertical-align:top; border-top:1px solid var(--line); color:var(--muted); line-height:1.5;}
.cmp thead th{border-top:0; padding:20px 18px; font-size:15.5px; font-weight:600; color:var(--ink);}
.cmp tbody th{font-weight:600; color:var(--ink); width:18%; position:sticky; left:0; background:var(--card); z-index:1;}
.cmp thead th:first-child{position:sticky; left:0; background:var(--card); z-index:1;}
.cmp .us{background:var(--coral-wash); color:var(--ink);}
.cmp thead th.us{color:var(--coral-ink); border-radius:0;}
.cmp b{color:var(--ink); font-weight:600;}
.cmp-yes,.cmp-no{display:inline-flex; width:22px; height:22px;}
.cmp-yes svg{width:20px; height:20px; color:#0A9F5F;}
.cmp-no svg{width:20px; height:20px; color:var(--faint);}
.cmp-hint{display:none; margin:0 0 10px; font-size:13px; color:var(--faint);}
.cmp-note{margin:16px 0 0; font-size:13px; color:var(--faint); max-width:none; line-height:1.55;}
@media (max-width:860px){ .cmp-hint{display:block;} }
@media (max-width:560px){ .cmp tbody th{width:auto; min-width:120px;} }
.cmp td.us .cmp-yes{float:left; margin:0 8px 0 0; width:18px; height:18px;}
.cmp td.us .cmp-yes svg{width:18px; height:18px;}
.cmp td.us{font-weight:500;}
.three-yr{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ty{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px 26px;}
.ty .mono{color:var(--faint); display:block; margin:0 0 14px;}
.ty b{display:block; font-size:clamp(26px,2.8vw,34px); font-weight:600; letter-spacing:-.03em; color:var(--muted); line-height:1.1;}
.ty p{margin:12px 0 0; color:var(--muted); font-size:14.5px; line-height:1.55;}
.ty.us{border-color:var(--coral); box-shadow:0 0 0 1px var(--coral) inset, var(--shadow);}
.ty.us .mono{color:var(--coral-ink);}
.ty.us b{color:var(--ink); font-size:clamp(34px,3.6vw,46px);}
.one-tradeoff{display:flex; gap:20px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px 30px; max-width:820px;}
.one-tradeoff .ic{flex:none; width:46px; height:46px; border-radius:50%; background:var(--coral-wash); color:var(--coral-ink); display:flex; align-items:center; justify-content:center;}
.one-tradeoff .ic svg{width:22px; height:22px;}
.one-tradeoff p{margin:0; color:var(--ink-2); font-size:16.5px; line-height:1.65;}
@media (max-width:860px){ .three-yr{grid-template-columns:1fr;} .one-tradeoff{flex-direction:column;} }

/* ---------- money + time calculator ---------- */
.calc{--money:#2a78d6; --time:#eb6834; position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:28px 30px 18px;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .calc{--money:#3987e5; --time:#d95926;} }
:root[data-theme="dark"] .calc{--money:#3987e5; --time:#d95926;}
.calc-top{display:grid; grid-template-columns:auto 1fr; gap:10px 28px; align-items:center; padding-bottom:22px; border-bottom:1px solid var(--line);}
.calc-rate{display:flex; align-items:baseline; gap:14px; color:var(--ink); font-weight:600; font-size:16px;}
.calc-rate output{font-size:28px; letter-spacing:-.03em; color:var(--coral-ink); font-variant-numeric:tabular-nums; min-width:70px;}
.calc input[type=range]{width:100%; accent-color:var(--coral); height:28px; cursor:pointer;}
.calc-legend{grid-column:1/-1; display:flex; gap:22px; margin:0; font-size:13.5px; color:var(--muted);}
.calc-legend span{display:inline-flex; align-items:center; gap:8px;}
.k{display:inline-block; width:12px; height:12px; border-radius:3px;}
.k.money{background:var(--money);} .k.time{background:var(--time);}
.crow{display:grid; grid-template-columns:200px 1fr; gap:6px 24px; align-items:center; padding:18px 6px; border-top:1px solid var(--line); border-radius:8px; outline:none;}
.crow:first-child{border-top:0;}
.crow:hover,.crow:focus-visible{background:var(--sunk);}
.crow:focus-visible{box-shadow:0 0 0 2px var(--coral) inset;}
.cname b{display:block; color:var(--ink); font-size:15.5px; font-weight:600;}
.cname span{display:block; color:var(--muted); font-size:13.5px;}
.crow.us .cname b{color:var(--coral-ink);}
.cbar{display:flex; align-items:center; gap:2px; height:22px; min-width:0;}
.seg{display:block; height:100%; transition:width .35s cubic-bezier(.2,.7,.3,1); min-width:2px;}
.seg.money{background:var(--money); border-radius:4px 0 0 4px;}
.seg.time{background:var(--time); border-radius:0 4px 4px 0;}
.ctot{margin-left:10px; white-space:nowrap; font-weight:600; color:var(--ink); font-size:16px; font-variant-numeric:tabular-nums;}
.crow.us .ctot{font-size:18px;}
.cdet{grid-column:2; color:var(--muted); font-size:13px;}
.calc-tip{position:absolute; z-index:5; pointer-events:none; background:var(--ink); color:var(--paper); padding:10px 12px; border-radius:6px; font-size:13px; line-height:1.5; box-shadow:var(--shadow); max-width:280px;}
.diy{margin-top:26px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px 30px;}
.diy h3{margin:0 0 16px; font-size:18px; font-weight:600; color:var(--ink);}
.diy-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px 24px;}
.diy-list li{display:flex; gap:10px; align-items:baseline; font-size:14.5px; color:var(--muted);}
.diy-list b{color:var(--ink); font-weight:600; min-width:40px;}
.diy-list li.sum{grid-column:1/-1; padding-top:12px; border-top:1px solid var(--line); margin-top:4px;}
.diy-list li.sum b{color:var(--time, #eb6834);}
@media (max-width:760px){
  .calc{padding:22px 16px 10px;}
  .calc-top{grid-template-columns:1fr;}
  .crow{grid-template-columns:1fr; padding:14px 6px;}
  .cdet{grid-column:1;}
  .diy{padding:22px 18px;}
  .diy-list{grid-template-columns:1fr;}
}

/* compare table: stacked cards on phones */
@media (max-width:760px){
  .cmp-wrap{overflow:visible; border:0; background:none; border-radius:0;}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block; width:auto; min-width:0;}
  .cmp{min-width:0;}
  .cmp thead{display:none;}
  .cmp tbody tr{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:0 0 14px;}
  .cmp tbody th{position:static; border-top:0; padding:14px 16px 10px; font-size:15px; background:var(--card);}
  .cmp td{display:grid; grid-template-columns:118px 1fr; gap:10px; padding:10px 16px; font-size:14px; border-top:1px solid var(--line);}
  .cmp td::before{content:attr(data-label); font-weight:600; color:var(--faint); font-size:12.5px; line-height:1.5;}
  .cmp td.us{background:var(--coral-wash); color:var(--ink);}
  .cmp td.us::before{color:var(--coral-ink);}
  .cmp td.us .cmp-yes{display:none;}
}

/* =========================================================
   Audit fixes (Oct 2026)
   ========================================================= */
/* readable greys and reds in light mode (dark mode keeps its own values) */
:root{--muted:#56636E; --faint:#64717C; --coral-ink:#C42E3A;}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* content stays visible if JavaScript never runs */
[data-reveal]{opacity:1; transform:none;}
.js [data-reveal]{opacity:0; transform:translateY(20px);}
.js [data-reveal].is-in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){ .js [data-reveal]{opacity:1; transform:none;} }

/* buttons: white text needs a deeper red to stay readable, in both modes */
.btn-coral,.nav .cta,.form button{background:#D6333F; color:#fff;}
.btn-coral:hover,.nav .cta:hover,.form button:hover{background:#B92A35; color:#fff;}

/* header: solid enough that the menu text never sits on a busy image */
.site-head{background:color-mix(in srgb, var(--paper) 96%, transparent);}

/* small labels: bigger and darker */
.mono{font-size:12px;}
.s-kind{font-size:12px;}
.crumb{font-size:13px;}
.frame .bar .url{font-size:11px; color:var(--muted);}
.a-tag{font-size:11px;}
.a-cost .mono{font-size:11px;}
.b-amt small{font-size:12px;}
.costs thead th{font-size:12px;}
.cmp-note{font-size:13.5px; color:var(--muted);}
.facts dt{font-size:13px;}

/* mobile menu */
.menu-btn{display:none;}
.mnav{border-top:1px solid var(--line); background:var(--paper); padding:6px 0 10px;}
.mnav a{display:block; padding:14px 24px; font-size:17px; font-weight:500; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
.mnav a:last-child{border-bottom:0; color:var(--coral-ink); font-weight:600;}
.mnav a:focus-visible{outline:2px solid var(--coral); outline-offset:-4px;}
@media (max-width:980px){
  .nav{gap:10px;}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; background:none; border:1px solid var(--line-2); border-radius:6px; color:var(--ink); cursor:pointer;}
  .menu-btn:focus-visible{outline:2px solid var(--coral); outline-offset:2px;}
  .site-head.open .menu-btn .l1{transform:translate(0,5px) rotate(45deg); transform-origin:12px 7px;}
  .site-head.open .menu-btn .l2{opacity:0;}
  .site-head.open .menu-btn .l3{transform:translate(0,-5px) rotate(-45deg); transform-origin:12px 17px;}
  .menu-btn path{transition:transform .2s ease, opacity .2s ease;}
}
@media (min-width:981px){ .mnav{display:none!important;} }

/* laptop widths: headline and intro stay clear of the screenshot wall */
@media (min-width:981px) and (max-width:1180px){
  .hero-copy{max-width:calc(54vw - 80px);}
  .hero h1{font-size:clamp(36px,4.4vw,52px);}
}

/* "One setup. Run by us." may wrap instead of being cut off */
.a-title{white-space:normal;}

/* bigger tap targets for text links on phones */
@media (max-width:760px){
  .s-links .golink,.crumb a,.next-case .golink,.case-hero .golink,.foot .links a{display:inline-flex; align-items:center; min-height:44px;}
  .s-links{gap:0 24px;}
  .foot .links{flex-wrap:wrap; gap:0 20px;}
}

/* dark mode details */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .s-brand img.mark90,
  :root:not([data-theme="light"]) .mark90{filter:brightness(0) invert(.92);}
  :root:not([data-theme="light"]) .cmp .us{background:#1B2C39;}
  :root:not([data-theme="light"]) .costs tr.save td{color:#34C98A;}
}
:root[data-theme="dark"] .mark90{filter:brightness(0) invert(.92);}
:root[data-theme="dark"] .cmp .us{background:#1B2C39;}
:root[data-theme="dark"] .costs tr.save td{color:#34C98A;}
:root{--faint:#5F6E79;}
.start .sec-head .eyebrow,.start .golink{color:#FF7A84;}
.diy-list li.sum b{color:#B5481F;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .diy-list li.sum b{color:#F08A5D;} }
:root[data-theme="dark"] .diy-list li.sum b{color:#F08A5D;}
@media (max-width:560px){
  .nav .cta{white-space:nowrap; padding:10px 14px; font-size:14px;}
}
.mats .m img{height:auto;}

/* ---- VAT / businesses-only fine print ---- */
.hero .offer-fine{margin:12px 0 0; font-size:13.5px; color:var(--muted);}
.price-fine{margin:-12px 0 28px; font-size:14px; color:var(--muted);}
.formnote a{color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:2px;}

/* ==== Readability pass (Oct 2026): running text in the dark text colour, bigger sizes, a bit more air.
   Grey (--muted / --faint) stays only for labels, captions and fine print. ==== */
:root{--on-navy-muted:#B4C3CE;}
body{font-size:17px; line-height:1.65;}
.nav a{font-size:15.5px;}
/* leads and section intros */
.hero .lede,.case-hero .lede{font-size:20px; line-height:1.6; color:var(--ink-2);}
.sec-head p{font-size:18.5px; line-height:1.6; color:var(--ink-2);}
.start .sec-head p{color:var(--on-navy-muted);}
.hero .offer li{font-size:16px;}
.hero .offer-fine,.price-fine{font-size:15px;}
/* homepage blocks */
.step p,.tool p,.tools-head p{font-size:16.5px; line-height:1.65; color:var(--ink-2);}
.transform figcaption{font-size:15.5px;}
.s-line{font-size:18px; line-height:1.65;}
.s-note{font-size:15.5px;}
.s-stats dd{font-size:15px;}
.offer-card p{font-size:16.5px; line-height:1.65; color:var(--ink-2);}
.offer-card .per{font-size:16px;}
.term b{font-size:16.5px;}
.term span{font-size:15.5px; line-height:1.6; color:var(--ink-2);}
.panel li{font-size:16px; line-height:1.6; color:var(--ink-2); padding:13px 0;}
.panel .note{font-size:15px; color:var(--muted);}
.faq summary{font-size:18px;}
.faq p{font-size:17px; line-height:1.7; color:var(--ink-2);}
.tools-cta p{font-size:17.5px;}
.golink{font-size:13.5px;}
/* form (navy) */
.field label,fieldset legend{font-size:15px;}
.field input,.field textarea{font-size:16px;}
.check span{font-size:15px;}
.form .alt,.formnote{font-size:15px;}
/* case pages */
.chap p{font-size:16.5px; line-height:1.65; color:var(--ink-2);}
.did b{font-size:17px;}
.did span{font-size:16px; line-height:1.6; color:var(--ink-2);}
.big-stats dd{font-size:15.5px;}
.costs{font-size:16px;}
.costs th,.costs td{font-size:15.5px;}
/* compare page */
.cmp{font-size:15.5px;}
.cmp td{font-size:15.5px; line-height:1.55;}
.cmp td .v{color:var(--ink-2);}
.cmp tbody th{font-size:16px;}
.cmp thead th{font-size:16.5px;}
.cmp-note{font-size:15px; line-height:1.6;}
.one-tradeoff p{font-size:18px;}
.diy-list li{font-size:16px; color:var(--ink-2);}
.cname span,.cdet,.calc-legend{font-size:15px;}
.ty p{font-size:16px; color:var(--ink-2);}
/* legal pages */
.prose p,.prose ul{color:var(--ink-2);}
.foot{font-size:15px;}
@media (max-width:760px){
  .hero .lede,.case-hero .lede{font-size:18.5px;}
  .sec-head p{font-size:17.5px;}
  .s-line{font-size:17px;}
  .s-stats dd{font-size:14px;}
}
/* no single-word last lines in running text */
p,li,dd,.term span,.did span{text-wrap:pretty;}

/* ==== "What counts as a small change" page ==== */
.panel .note a,.faq p a{color:var(--coral-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
.cx-rules{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.cx-rule{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:30px 32px 22px;}
.cx-rule .mono{margin:0 0 8px;}
.cx-rule.in .mono{color:#0A7F4F;} .cx-rule.out .mono{color:var(--coral-ink);}
.cx-rule h2{font-size:clamp(22px,2.4vw,26px); letter-spacing:-.02em; margin:0 0 14px;}
.cx-rule ul{list-style:none; margin:0; padding:0;}
.cx-rule li{display:flex; gap:13px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line); font-size:16.5px; line-height:1.55; color:var(--ink-2);}
.cx-rule li:first-child{border-top:0; padding-top:0;}
.cx-rule li svg{flex:none; width:17px; height:17px; margin-top:3px;}
.cx-rule.in li svg{color:#0A7F4F;} .cx-rule.out li svg{color:var(--coral-ink);}
.cx-small{margin:22px 0 0; font-size:17px; color:var(--ink-2); max-width:70ch;}
.cx-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;}
.cx{--s-body:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column;}
.cx-top{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:18px 22px 0;}
.cx-site{color:var(--muted);}
.cx-tag{font-size:13px; font-weight:600; padding:5px 11px; border-radius:999px; white-space:nowrap;}
.cx-tag.in{background:#E2F4EA; color:#08643E;} .cx-tag.out{background:var(--coral-wash); color:var(--coral-ink);}
.cx-vis{padding:16px 22px 0;}
.cx-vis .s-toggle{margin:0 0 12px;}
.cx-shot{position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--sunk);}
.cx-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; transition:opacity .55s ease;}
.cx-shot .a{opacity:0;}
.is-after .cx-shot .a{opacity:1;}
.cx-body{padding:18px 22px 24px;}
.cx-body h3{font-size:19px; letter-spacing:-.012em; margin:0 0 8px;}
.cx-body p{margin:0; font-size:16px; line-height:1.6; color:var(--ink-2);}
.cx-body .cx-ask{margin:0 0 8px; color:var(--muted); font-style:italic;}
.cx-note{color:var(--muted);}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .cx-tag.in{background:rgba(52,201,138,.14); color:#34C98A;} :root:not([data-theme="light"]) .cx-rule.in .mono,:root:not([data-theme="light"]) .cx-rule.in li svg{color:#34C98A;} }
:root[data-theme="dark"] .cx-tag.in{background:rgba(52,201,138,.14); color:#34C98A;}
:root[data-theme="dark"] .cx-rule.in .mono,:root[data-theme="dark"] .cx-rule.in li svg{color:#34C98A;}
@media (prefers-reduced-motion:reduce){ .cx-shot img{transition:none;} }
@media (max-width:860px){ .cx-rules,.cx-grid{grid-template-columns:1fr;} .cx-rule{padding:24px 22px 16px;} }

/* ==== Width system (Oct 2026): three widths only, so edges line up across the site.
   1. full:  the container (1136px) for cards, grids, tables, footnotes, CTA bars
   2. --col: one text column (two thirds) for every block of text that stands on its own
   3. half:  only where a layout is split in two (homepage hero, story text beside its visual) ==== */
:root{--col:760px;}
.sec-head,.case-hero h1,.case-hero .lede,.faq,.prose,.one-tradeoff,.cx-small,.form,.tools-head{max-width:var(--col);}
.sec-head p,.sec-head h2,.faq p,.tools-head h3,.tools-head p,.one-tradeoff p{max-width:none;}
.tools-head{display:block;}
.tools-head p{margin-top:14px;}
.sec-head.mid,.start .sec-head,.form{margin-left:auto; margin-right:auto;}
.hero .lede{max-width:none;}
.s-line{max-width:none;}

/* Header fit on narrow phones: logo + "Get started" + menu button must fit inside 360px */
@media (max-width:400px){
  .head-in{gap:12px;}
  .logo .lockup{height:16px;}
  .nav{gap:8px;}
  .nav .cta{padding:10px 12px;}
}
@media (max-width:340px){
  .shell{padding:0 16px;}
  .logo .lockup{height:13px;}
}

/* FAQ answers: several short paragraphs and bullet lists instead of one block of text */
.faq details p{margin:0 0 12px;}
.faq details > :last-child{margin-bottom:24px;}
.faq ul{list-style:none; margin:0 0 12px; padding:0;}
.faq li{position:relative; padding-left:22px; margin:0 0 6px; font-size:17px; line-height:1.6; color:var(--ink-2);}
.faq li::before{content:""; position:absolute; left:3px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--coral);}

/* FAQ on wide screens: heading on the left (stays in view while scrolling), questions on the right.
   Uses the full width of the page while the answers keep the readable line length of the text column. */
@media (min-width:960px){
  #faq .faq-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:56px; align-items:start;}
  #faq .sec-head{position:sticky; top:112px; margin:0;}
  #faq .faq{max-width:none;}
}

/* Case studies: a label saying whether the case is the standard website or a bigger project quoted separately */
.s-scope{display:inline-flex; align-items:center; gap:8px; padding:5px 11px 5px 9px; border:1px solid var(--s-line); border-radius:999px; font-size:13px; font-weight:600; line-height:1.2; color:var(--s-ink);}
.s-scope::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--coral); flex:none;}
.s-scope.big::before{background:var(--s-accent);}

/* ---- /draft: free homepage draft page ---- */
.draft-hero{padding:72px 0 64px;}
.draft-hero h1{max-width:18ch;}
.draft-hero .actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:32px;}
.draft-hero .offer{display:flex; flex-wrap:wrap; gap:10px 28px; margin:28px 0 0; padding:0; list-style:none;}
.draft-hero .offer li{display:flex; align-items:baseline; gap:8px; font-size:15px; color:var(--muted);}
.draft-hero .offer b{font-size:22px; font-weight:600; letter-spacing:-.02em; color:var(--ink);}
.draft-hero .offer-fine{margin:12px 0 0; font-size:14px; color:var(--faint);}
.draft-hero .shell{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center;}
.dh-vis{position:relative; padding:26px 18px 96px 10px;}
.dh-site{transform:rotate(1.5deg); box-shadow:var(--shadow-lg);}
.dh-site img{display:block; width:100%; height:auto;}
.dh-bills{position:absolute; left:-8px; bottom:0; z-index:2; width:max-content; max-width:78%; transform:rotate(-3deg); background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); padding:12px 14px 8px;}
.dh-bills .mono{display:block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:0 0 6px;}
.dh-bills ul{list-style:none; margin:0; padding:0;}
.dh-bills li{display:flex; justify-content:space-between; gap:18px; padding:5px 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); white-space:nowrap;}
.dh-bills li:first-child{border-top:0;}
.dh-bills s{color:#B92A35; white-space:nowrap; text-decoration-thickness:1.5px;}
.dh-save{position:absolute; right:0; top:0; z-index:3; display:flex; flex-direction:column; padding:12px 18px; border-radius:8px; background:#D6333F; color:#fff; box-shadow:var(--shadow-lg); transform:rotate(2deg);}
.dh-save b{font-size:28px; font-weight:700; letter-spacing:-.02em; line-height:1;}
.dh-save span{font-size:13px; margin-top:4px; opacity:.92;}
.steps.three{grid-template-columns:repeat(3,1fr);}
.flabel{font-size:15px; color:var(--on-navy-muted);}
.drop{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:112px; padding:20px; text-align:center; cursor:pointer;
  border:1.5px dashed var(--on-navy-line); border-radius:6px; background:rgba(255,255,255,.03); color:var(--on-navy-muted); font-size:15px; transition:border-color .15s, background .15s;}
.drop:hover,.drop.over{border-color:#FF7A84; background:rgba(240,73,86,.08);}
.drop b{color:var(--on-navy); font-weight:600;}
.drop input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;}
.drop:focus-within{outline:2px solid var(--coral); outline-offset:2px;}
.files{list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:8px;}
.files:empty{display:none;}
.files li{position:relative; aspect-ratio:1; border-radius:4px; overflow:hidden; background:rgba(255,255,255,.06); border:1px solid var(--on-navy-line);}
.files img{width:100%; height:100%; object-fit:cover; display:block;}
.files .ph{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 14px/1 var(--mono, monospace); color:var(--on-navy-muted);}
.files .fn{position:absolute; left:0; right:0; bottom:0; padding:4px 6px; background:rgba(0,0,0,.6); color:#fff; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.form .files button.rm{position:absolute; top:4px; right:4px; width:28px; height:28px; padding:0; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:18px; line-height:28px; font-weight:400;}
.form .files button.rm:hover{background:#B92A35;}
.form .consent{font-size:14px; color:var(--on-navy-muted); margin:0 0 18px; line-height:1.55;}
.form .consent a{color:var(--on-navy); text-decoration:none; border-bottom:1px solid var(--coral);}
.form button:disabled{opacity:.75; cursor:default;}
@media (max-width:980px){
  .steps.three{grid-template-columns:1fr;}
  .steps.three .step,.steps.three .step + .step{padding-left:0; border-left:0; margin-top:0;}
  .steps.three .step + .step{border-top:1px solid var(--line); margin-top:6px; padding-top:26px;}
  .draft-hero{padding:48px 0 48px;}
  .draft-hero .shell{grid-template-columns:1fr; gap:8px;}
  .dh-vis{padding:22px 10px 78px 4px; max-width:560px;}
  .dh-bills{left:-4px; padding:9px 11px 5px;}
  .dh-bills li{font-size:11.5px; padding:3px 0; gap:14px;}
  .dh-bills li:nth-child(n+4){display:none;}
  .dh-save{padding:8px 12px;}
  .dh-save b{font-size:20px;}
  .dh-save span{font-size:11px;}
}

/* offer page: shorter header button on phones, so it sits next to the logo like "Get started" does */
.cta-short{display:none;}
@media (max-width:560px){ .cta-long{display:none;} .cta-short{display:inline;} }

/* Phones and tablets: the header row had no vertical padding (.shell resets it), so the button and the menu
   button filled the bar edge to edge. Give the bar room and make both controls the same, smaller height. */
@media (max-width:980px){
  .site-head .head-in{padding-top:10px; padding-bottom:10px;}
  .nav .cta{padding:0 14px; height:38px; display:inline-flex; align-items:center; line-height:1;}
  .menu-btn{width:38px; height:38px;}
}

/* offer page form: messages next to what they are about, invalid fields marked, no "drop" hint on touch screens */
.form .formtop{margin:0 0 18px; padding:12px 14px; border-radius:4px; background:rgba(255,122,132,.1); border:1px solid rgba(255,122,132,.35);}
.form #filenote{margin:8px 0 0;}
.field [aria-invalid="true"]{border-color:#FF7A84;}
@media (hover:none){ .drop-desk{display:none;} }
.dh-bills s{color:#B92A35;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .dh-bills s{color:#FF7A84;} }
:root[data-theme="dark"] .dh-bills s{color:#FF7A84;}

/* Case pages: a short honest note under the results (e.g. Burger Lab's AI photos) */
.case-note{max-width:var(--col); margin:40px 0 0; padding:14px 18px; border-left:3px solid var(--coral); background:var(--card); border-radius:0 8px 8px 0; font-size:16px; line-height:1.6; color:var(--ink-2);}
.case-note b{color:var(--ink); font-weight:600;}

/* offer page: open vs full wording, switched by the spot counter */
.v-full{display:none;}
.round-full .v-open{display:none;}
.round-full .v-full{display:inline;}