/* website.css — Co-Intelligent homepage (v2 UX pass). Tension model:
   bold plainspoken hero + commercial moments; editorial-calm long-form.
   v2 adds: paper grain, word-rise statements, scrub-fill conviction line,
   portrait wipes, hero drift, reading progress, scrollspy nav.
   All motion respects prefers-reduced-motion. No gradients, no shadows-as-decoration. */

:root{
  --paper:#F6F0E4; --paper-soft:#EEE7D7; --paper-warm:#FAF5EC;
  --ink:#1E1A14; --ink-soft:#2A241C; --terra:#C2682E; --terra-deep:#A4521F;
  --stone:#9B8B76; --stone-soft:#C2B6A2; --sand:#E2D7C2; --white:#fff;
  --news:'Newsreader',serif; --plex:'IBM Plex Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  --maxw:1080px; --pad:clamp(24px,6vw,96px);
  /* density — locked from the Tweaks studio (Balanced baseline) */
  --type-scale:0.94; --rhythm:1.12; --head-gap:22px;
  --ease-out:cubic-bezier(.22,.61,.21,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* NOTE: intentionally NOT forcing -webkit-font-smoothing:antialiased.
   That property is Mac/iOS-only and *thins* type on those devices while doing
   nothing on Windows, which made the Newsreader headings look lighter on phones
   than on the desktop. Letting the browser default (subpixel) render keeps
   weight consistent across devices. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--plex);text-rendering:optimizeLegibility;}
::selection{background:var(--terra);color:var(--paper);}
a{color:inherit;text-decoration:none;}
a:focus-visible,button:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:2px;}

/* ---- paper grain: quality paper, not a screen ---- */
body::after{content:"";position:fixed;inset:0;z-index:400;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:300px 300px;}

/* ---- reading progress hairline ---- */
#progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--terra);z-index:300;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;}

/* ---- type helpers ---- */
.mono{font-family:var(--mono);}
.kicker{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;}

/* ---- loader (ll assembling) ---- */
#loader{position:fixed;inset:0;background:var(--ink);z-index:1000;display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s;}
#loader.done{opacity:0;visibility:hidden;}
#loader .halves{display:flex;align-items:center;gap:10px;}
#loader .half{display:block;}
#loader .half.right{transform:rotate(180deg);opacity:0;transform-origin:center;animation:assemble .85s cubic-bezier(.7,0,.2,1) .2s forwards;}
#loader .half.left{opacity:0;animation:fadein .45s ease .1s forwards;}
@keyframes assemble{0%{transform:rotate(180deg);opacity:0;}100%{transform:rotate(0deg);opacity:1;}}
@keyframes fadein{to{opacity:1;}}

/* ---- nav ---- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--pad);transition:background .35s ease,padding .35s ease,box-shadow .35s;}
nav.scrolled{background:rgba(246,240,228,.88);backdrop-filter:blur(12px);padding:14px var(--pad);box-shadow:0 1px 0 rgba(30,26,20,.08);}
nav.on-dark:not(.scrolled){--navfg:var(--paper);}
nav .brand{display:flex;align-items:center;line-height:0;}
nav .brand svg{height:26px;width:auto;display:block;}
nav .links{display:flex;align-items:center;gap:34px;}
nav .links a{font-size:14px;letter-spacing:-.01em;color:var(--navfg,var(--ink));opacity:.78;transition:opacity .2s;position:relative;}
nav .links a:hover{opacity:1;}
/* scrollspy: quiet terracotta dot under the active section link */
nav .links a:not(.nav-cta)::after{content:"";position:absolute;left:50%;bottom:-9px;width:4px;height:4px;border-radius:50%;
  background:var(--terra);transform:translateX(-50%) scale(0);transition:transform .3s var(--ease-out);}
nav .links a.active:not(.nav-cta){opacity:1;}
nav .links a.active:not(.nav-cta)::after{transform:translateX(-50%) scale(1);}
nav .links a.nav-cta{opacity:1;font-family:var(--plex);font-weight:500;background:var(--terra);color:var(--paper);
  padding:11px 18px;border-radius:2px;transition:background .2s,transform .12s;}
nav .links a.nav-cta:hover{background:var(--terra-deep);}
nav .links a.nav-cta:active{transform:translateY(1px);}
/* subtle CTA reminder — a quiet amber bloom every ~13s, never bouncy */
@keyframes ctaPulse{0%,82%,100%{box-shadow:0 0 0 0 rgba(194,104,46,0);}88%{box-shadow:0 0 0 5px rgba(194,104,46,.16),0 0 22px 3px rgba(194,104,46,.42);}94%{box-shadow:0 0 0 13px rgba(194,104,46,0),0 0 32px 7px rgba(194,104,46,0);}}
nav .links a.nav-cta{animation:ctaPulse 13s ease-in-out 4s infinite;}
@media(max-width:760px){nav .links a:not(.nav-cta){display:none;}}

/* ---- section base ---- */
section{padding:calc(clamp(80px,12vh,160px) * var(--rhythm)) var(--pad);position:relative;}
.wrap{max-width:var(--maxw);margin:0 auto;width:100%;}
.sec-ink{background:var(--ink);color:var(--paper);}
.sec-soft{background:var(--paper-soft);}
.sec-amber{background:var(--terra);color:var(--ink);}
.sec-num{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);margin-bottom:34px;display:flex;gap:12px;align-items:center;font-weight:500;}
.sec-ink .sec-num,.sec-amber .sec-num{color:rgba(255,255,255,.55);}
.sec-amber .sec-num{color:rgba(30,26,20,.55);}
.sec-num::before{content:"";width:30px;height:1px;background:currentColor;opacity:.6;}
/* the kicker rule draws itself in as the section arrives */
.sec-num.reveal::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .15s;}
.sec-num.reveal.in::before{transform:scaleX(1);}

/* ---- hero ---- */
#hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:var(--ink);color:var(--paper);
  padding-top:140px;padding-bottom:90px;overflow:hidden;}
#hero .h1{font-family:var(--plex);font-weight:500;font-size:calc(clamp(44px,8.2vw,128px) * var(--type-scale));line-height:1.0;letter-spacing:-.045em;margin:0;}
#hero .h1 .l2{display:block;margin-top:.04em;}
#hero .twist{font-family:var(--news);font-style:italic;font-weight:500;letter-spacing:-.02em;}
/* the correction swap — words stacked so the hidden one never forces a 3rd line */
.swap{position:relative;display:inline-block;white-space:nowrap;}
.swap .wrong{position:relative;color:var(--stone-soft);transition:opacity .45s ease;}
.swap .wrong .strike{position:absolute;left:-.04em;right:-.04em;top:.735em;height:.07em;background:var(--terra);transform:scaleX(0);transform-origin:left;}
.swap.struck .wrong .strike{transform:scaleX(1);transition:transform .42s cubic-bezier(.7,0,.2,1);}
.swap.corrected .wrong{opacity:0;}
.swap .right{position:absolute;left:0;top:0;color:var(--terra);opacity:0;transition:opacity .5s ease .15s;white-space:nowrap;}
.swap.corrected .right{opacity:1;}
.swap .right.news{font-family:var(--news);font-style:italic;font-weight:500;}

#hero .subline{font-family:var(--plex);font-size:calc(clamp(16px,1.5vw,20px) * var(--type-scale));line-height:1.6;color:var(--stone-soft);max-width:48ch;margin:38px 0 0;}
#hero .cta-row{margin-top:44px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;}

/* hero entrance — staggered rise once the loader lifts */
.js .hero-el{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
.js .hero-el.he2{transition-delay:.14s;}
.js .hero-el.he3{transition-delay:.28s;}
.js .hero-el.he4{transition-delay:.6s;}
.js body.hero-in .hero-el, body.hero-in .hero-el{opacity:1;transform:none;}

/* scroll cue */
.scroll-cue{position:absolute;left:var(--pad);bottom:34px;display:flex;align-items:center;gap:14px;color:var(--stone);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;transition:opacity .5s ease;}
.scroll-cue i{display:block;width:56px;height:1px;background:var(--stone);position:relative;overflow:hidden;}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--terra);transform:translateX(-100%);animation:cueSweep 2.6s var(--ease-out) 1.2s infinite;}
@keyframes cueSweep{0%{transform:translateX(-100%);}55%{transform:translateX(0);}100%{transform:translateX(102%);}}
.scroll-cue.gone{opacity:0;}

/* ---- buttons ---- */
.btn{font-family:var(--plex);font-weight:500;font-size:16px;letter-spacing:-.01em;background:var(--terra);color:var(--paper);
  border:0;padding:17px 28px;border-radius:2px;cursor:pointer;display:inline-flex;align-items:center;gap:12px;
  position:relative;overflow:hidden;transition:transform .12s;}
.btn>*{position:relative;z-index:1;}
/* hover fill sweeps up — depth from motion, not shadows */
.btn::before{content:"";position:absolute;inset:0;background:var(--terra-deep);transform:scaleY(0);transform-origin:bottom;transition:transform .32s var(--ease-out);}
.btn:hover::before{transform:scaleY(1);}
.btn:active{transform:translateY(1px);}
.btn .arr{transition:transform .25s var(--ease-out);}
.btn:hover .arr{transform:translateX(5px);}
.btn-note{font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--stone);}
.sec-ink .btn-note{color:var(--stone-soft);}

/* ---- big editorial statement ---- */
.statement{font-family:var(--news);font-weight:400;font-size:calc(clamp(30px,4.6vw,62px) * var(--type-scale));line-height:1.1;letter-spacing:-.018em;margin:0 0 var(--head-gap);max-width:18ch;}
.statement em{font-style:italic;color:var(--terra);}
.sec-ink .statement em{color:var(--terra);}
.lede{font-family:var(--plex);font-size:calc(clamp(16px,1.45vw,19px) * var(--type-scale));line-height:1.62;color:var(--ink-soft);max-width:60ch;}
.sec-ink .lede{color:var(--stone-soft);}
.body-col{font-family:var(--plex);font-size:calc(17px * var(--type-scale));line-height:1.66;color:var(--ink-soft);}
.sec-ink .body-col{color:var(--stone-soft);}
.body-col p{margin:0 0 18px;}

/* word-rise: statements arrive line by line, word by word */
.statement.split{opacity:1;transform:none;}
.statement.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:0 .05em .12em;margin:0 -.05em -.12em;}
.statement.split .wi{display:inline-block;transform:translateY(112%);transition:transform .85s var(--ease-out);will-change:transform;}
.statement.split.in .wi{transform:none;}
.statement.split.played .w{overflow:visible;}
.statement.split.played .wi{will-change:auto;}

/* scrub-fill: the conviction line inks itself in as you scroll */
.scrub .sw{color:var(--stone-soft);transition:color .35s ease;}
.scrub .sw.lit{color:var(--ink);}
.scrub em .sw.lit{color:var(--terra);}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:start;}
@media(max-width:820px){.two-col{grid-template-columns:1fr;gap:32px;}}

/* "we do not" lines */
.not-list{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:14px;}
.not-list li{font-family:var(--plex);font-size:calc(19px * var(--type-scale));line-height:1.4;color:var(--ink);display:flex;gap:14px;align-items:baseline;}
.not-list li .x{font-family:var(--mono);color:var(--terra);font-size:15px;flex:0 0 auto;}
.not-list li .t{text-decoration:line-through;text-decoration-color:var(--stone-soft);text-decoration-thickness:2px;color:var(--stone);}

/* ---- revenue metrics row ---- */
.metrics{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}
.metrics .m{font-family:var(--mono);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper);
  border:1px solid rgba(255,255,255,.22);padding:12px 18px;border-radius:2px;transition:background .3s,border-color .3s,opacity .7s var(--ease-out),transform .7s var(--ease-out);}
.metrics .m:hover{background:var(--terra-deep);border-color:var(--terra-deep);}
/* chips cascade in behind their column reveal */
.js .reveal .metrics .m{opacity:0;transform:translateY(14px);}
.js .reveal.in .metrics .m{opacity:1;transform:none;}
.reveal.in .metrics .m:nth-child(1){transition-delay:.05s;}
.reveal.in .metrics .m:nth-child(2){transition-delay:.13s;}
.reveal.in .metrics .m:nth-child(3){transition-delay:.21s;}
.reveal.in .metrics .m:nth-child(4){transition-delay:.29s;}
.revtag{font-family:var(--news);font-style:italic;font-size:clamp(22px,2.4vw,30px);color:var(--terra);margin-top:42px;}

/* ---- 4D framework ---- */
.fourd{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:56px;background:var(--sand);border:1px solid var(--sand);}
@media(max-width:880px){.fourd{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.fourd{grid-template-columns:1fr;}}
.fourd .d{background:var(--paper);padding:34px 30px 40px;display:flex;flex-direction:column;gap:14px;min-height:240px;position:relative;overflow:hidden;}
/* terracotta rises from the baseline on hover */
.fourd .d::before{content:"";position:absolute;inset:0;background:var(--terra);transform:scaleY(0);transform-origin:bottom;transition:transform .38s var(--ease-out);}
.fourd .d>*{position:relative;z-index:1;}
.fourd .d:hover::before{transform:scaleY(1);}
.fourd .d h4.dh{font-family:var(--news);font-weight:400;font-size:calc(32px * var(--type-scale));letter-spacing:-.01em;margin:0;color:var(--terra);display:flex;gap:14px;align-items:baseline;transition:color .25s;}
.fourd .d h4.dh .dnum{font-family:var(--news);font-style:italic;font-size:24px;color:var(--terra);transition:color .25s;}
.fourd .d p{font-family:var(--plex);font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0;transition:color .25s;}
.fourd .d:hover h4.dh,.fourd .d:hover h4.dh .dnum,.fourd .d:hover p{color:var(--paper);}
/* cards step in one after another */
.js .fourd .d{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),background .3s;}
.fourd.in .d{opacity:1;transform:none;}
.fourd.in .d:nth-child(1){transition-delay:.02s;}
.fourd.in .d:nth-child(2){transition-delay:.12s;}
.fourd.in .d:nth-child(3){transition-delay:.22s;}
.fourd.in .d:nth-child(4){transition-delay:.32s;}
.fourd-foot{font-family:var(--plex);font-size:16px;line-height:1.6;color:var(--ink-soft);margin-top:30px;max-width:62ch;}
.fourd-foot b{color:var(--ink);font-weight:500;}

/* ---- audit callout ---- */
.audit{background:var(--paper-warm);border:1px solid var(--sand);border-radius:4px;padding:clamp(28px,4vw,48px);margin-top:8px;}
.audit .lab{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);margin-bottom:18px;}

/* ---- founders ---- */
.founder{display:grid;grid-template-columns:300px 1fr;gap:clamp(30px,5vw,72px);align-items:start;}
.founder + .founder{margin-top:clamp(56px,8vh,110px);}
@media(max-width:820px){.founder{grid-template-columns:1fr;}}
.founder .portrait{width:100%;aspect-ratio:4/5;background:var(--paper-soft);overflow:hidden;border-radius:3px;}
.founder image-slot{display:block;width:100%;height:100%;}
/* portrait wipe: image unveils upward, settles from a gentle zoom.
   Triggered by the parent .founder's reveal — the clipped element itself
   reports zero visible area to IntersectionObserver, so it can't self-trigger. */
.js .img-reveal{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--ease-out) .12s;}
.js .img-reveal img{transform:scale(1.12);transition:transform 1.5s var(--ease-out) .12s;display:block;}
.founder.reveal.in .img-reveal,.img-reveal.in{clip-path:inset(0 0 0 0);}
.founder.reveal.in .img-reveal img,.img-reveal.in img{transform:scale(1);}
.founder .quote{font-family:var(--news);font-weight:400;font-size:calc(clamp(22px,2.5vw,32px) * var(--type-scale));line-height:1.28;letter-spacing:-.012em;margin:0 0 22px;}
.founder .quote em{font-style:italic;color:var(--terra);}
.founder .who{font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone);margin-top:8px;}
.founder .who b{color:var(--ink);font-weight:500;}
/* founder section on ink */
.sec-ink .founder .quote{color:var(--paper);}
.sec-ink .founder .quote em{color:var(--terra);}
.sec-ink .founder .who{color:var(--stone-soft);}
.sec-ink .founder .who b{color:var(--paper);}
.sec-ink .founder .portrait{background:var(--ink-soft);}

/* ---- proof ---- */
.proof{font-family:var(--news);font-weight:400;font-size:calc(clamp(20px,2vw,26px) * var(--type-scale));line-height:1.4;color:var(--ink);max-width:42ch;}
.proof-na{margin-top:34px;padding-top:26px;border-top:1px solid var(--sand);font-family:var(--plex);font-size:16px;line-height:1.6;color:var(--ink-soft);max-width:56ch;}
.proof-na .tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra);display:block;margin-bottom:10px;}

/* ---- closing ---- */
#closing .statement{color:var(--ink);max-width:20ch;}
#closing .lede{color:var(--ink-soft);}
#closing .btn::before{background:var(--terra-deep);}

/* ---- footer ---- */
footer{background:var(--ink);color:var(--stone-soft);padding:54px var(--pad);}
footer .foot-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;}
footer svg{height:24px;}
/* width:auto so the wordmark box matches its glyphs (not a fixed 150px box that
   centres the art); tiny bearing nudge aligns the 'c' to the content margin */
footer #foot-logo svg{height:24px;width:auto;display:block;}
footer #foot-logo{display:inline-flex;margin-left:-3.4px;}
footer .foot-right{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
footer .socials{display:flex;gap:14px;}
footer .social{color:var(--stone-soft);display:inline-flex;transition:color .2s,transform .15s;}
footer .social:hover{color:var(--terra);transform:translateY(-1px);}
footer .social svg{height:22px;}
footer .meta{font-family:var(--mono);font-size:13px;letter-spacing:.04em;}
footer .foot-legal{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--stone);}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}.reveal.d2{transition-delay:.16s;}.reveal.d3{transition-delay:.24s;}.reveal.d4{transition-delay:.32s;}

/* ---- reduced motion: everything simply appears ---- */
@media(prefers-reduced-motion:reduce){
  .reveal,.js .hero-el,.js .fourd .d,.js .reveal .metrics .m{opacity:1;transform:none;transition:none;}
  #loader{display:none;}
  nav .links a.nav-cta{animation:none;}
  .js .img-reveal{clip-path:none;transition:none;}
  .js .img-reveal img{transform:none;transition:none;}
  .statement.split .wi{transform:none;transition:none;}
  .scrub .sw{color:inherit;}
  .scroll-cue i::after{animation:none;}
  #progress{display:none;}
}

/* ---- form modal ---- */
#modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:24px;}
#modal.open{display:flex;}
#modal .scrim{position:absolute;inset:0;background:rgba(30,26,20,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .3s;}
#modal.open .scrim{opacity:1;}
#modal .sheet{position:relative;background:var(--paper);width:min(620px,100%);max-height:90vh;overflow:auto;border-radius:5px;
  padding:clamp(28px,4vw,52px);box-shadow:0 40px 90px -40px rgba(30,26,20,.7);transform:translateY(20px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .35s;}
#modal.open .sheet{transform:none;opacity:1;}
#modal .sheet .close{position:absolute;top:18px;right:20px;background:none;border:0;font-family:var(--mono);font-size:13px;color:var(--stone);cursor:pointer;letter-spacing:.08em;}
#modal .sheet .close:hover{color:var(--terra);}
#modal h3{font-family:var(--news);font-weight:400;font-size:30px;letter-spacing:-.015em;margin:0 0 6px;}
#modal .sub{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--terra);margin-bottom:26px;}
.field{margin-bottom:22px;}
.field label{display:block;font-family:var(--plex);font-size:15px;font-weight:500;margin-bottom:9px;}
.field label .qn{font-family:var(--mono);color:var(--terra);font-size:13px;margin-right:8px;}
.field textarea,.field input{width:100%;font-family:var(--plex);font-size:15px;color:var(--ink);background:var(--paper-warm);
  border:1px solid var(--sand);border-radius:3px;padding:13px 15px;resize:vertical;transition:border-color .2s;}
.field textarea:focus,.field input:focus{outline:none;border-color:var(--terra);}
.slots{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.slots .slot{font-family:var(--mono);font-size:13px;border:1px solid var(--sand);background:var(--paper-warm);padding:10px 14px;border-radius:2px;cursor:pointer;transition:all .15s;}
.slots .slot:hover{border-color:var(--terra);color:var(--terra);}
.slots .slot.sel{background:var(--ink);color:var(--paper);border-color:var(--ink);}
#modal .done-msg{text-align:center;padding:30px 10px;}
#modal .done-msg .big{font-family:var(--news);font-size:30px;letter-spacing:-.01em;margin-bottom:12px;}
#modal .done-msg p{font-family:var(--plex);font-size:15px;color:var(--ink-soft);line-height:1.6;}
@media screen and (max-width:768px){#doesnt-text{margin:6px 0px 0px !important;}#founder-new{display: grid;grid-template-columns: inherit !important;gap: clamp(30px, 5vw, 72px);align-items: start;}}
#loader .left path{fill:#c2682e !important}
#founder-new{display: grid;grid-template-columns: 670px 1fr;gap: clamp(30px, 5vw, 72px);align-items: start;}
@media(max-width:1080px){#founder-new{grid-template-columns:1fr 300px;}}
/*form new css*/
#step1,
#step2{
    transition: all 0.5s ease;
}

#step2{
    display:none;
    transform:translateX(100%);
    opacity:0;
}

/* ============================================================
   MOBILE REFINEMENTS (v2 responsiveness pass)
   One breakpoint at 768px covers phones and small tablets.
   ============================================================ */
@media(max-width:768px){

  /* 1. HERO — the 44px floor was too large for phone widths, so
     "Your business works." wrapped to two lines. This fluid range keeps it
     on one line from ~320px up while staying as large as the width allows. */
  #hero .h1{font-size:calc(clamp(30px,9.2vw,54px) * var(--type-scale));}

  /* 2. NEWSREADER DISPLAY TYPE — nudge the weight up on small screens so the
     headings read at the same visual weight as desktop. Tune this 500 down
     toward 460/440 if it ever looks too heavy on your device. */
  .statement,
  .founder .quote,
  .proof,
  .revtag{font-weight:500;}

  /* 3. REVENUE METRIC CHIPS — deterministic 2x2 grid of equal tiles instead of
     text-width chips that wrapped unevenly. Text is centered so one- and
     two-line chips both sit tidily. */
  #revenue .metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  #revenue .metrics .m{display:flex;align-items:center;justify-content:center;
    text-align:center;min-height:52px;}
}