/* vanno.ai — built to DESIGN.md. One typeface, teal ground, one job line. */
:root{
  --teal:#1D6F78; --ink:#15181D; --paper:#F4F3EF; --teal-l:#3FA6B0; --chalk:#F2C230;
  --soft:#d5e4e5;            /* quiet text on teal */
  --lx:40px;                 /* x of the job line inside the column */
  --in:200px;                /* where text starts */
  --pt:112px;                /* section padding */
  --font:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font:400 19px/1.55 var(--font);background:var(--teal);color:var(--paper);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
h1{font-weight:800;font-size:clamp(42px,6.5vw,90px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
h2{font-weight:800;font-size:clamp(33px,4.5vw,60px);line-height:1.02;letter-spacing:-.03em;max-width:15em;text-wrap:balance}
h3{font-weight:700;font-size:clamp(22px,2vw,27px);line-height:1.18;letter-spacing:-.012em}
p{max-width:33em}
.lede{font-size:clamp(19px,1.7vw,22px);line-height:1.45;color:var(--soft);max-width:28em;margin-top:26px}
.ink .lede{color:#c5c9cc}
svg text{font-family:var(--font)}

.wrap{max-width:1240px;margin:0 auto;padding:0 44px}
.col{position:relative}
.sec{--g:var(--teal);background:var(--g);position:relative}
.sec.ink{--g:var(--ink)}

.btn{display:inline-block;background:var(--paper);color:var(--ink);font:700 17px/1 var(--font);padding:17px 26px;border:0;border-radius:6px;text-decoration:none;cursor:pointer}
.btn:hover{background:#fff}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--chalk);outline-offset:3px}
.go{margin-top:38px}

/* ---------- header ---------- */
.top{background:var(--teal)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:92px}
.logo{flex:none}
.logo img{height:30px;width:auto;max-width:none}
.hero{overflow-x:clip}
.top nav{display:flex;gap:34px;font-weight:500;font-size:16.5px}
.top nav a{text-decoration:none;white-space:nowrap}
.top nav .short{display:none}
.top nav a:hover,.top nav a[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* ---------- the job line ---------- */
.run{position:relative;padding:var(--pt) 0 var(--pt) var(--in)}
.run::before{content:"";position:absolute;left:calc(var(--lx) - 2px);top:0;bottom:0;width:4px;background:var(--paper);transform-origin:top}
.run.start::before{top:calc(var(--pt) + .42em);border-radius:2px 2px 0 0}
.run.end::before{bottom:auto;height:calc(var(--pt) + 24px)}
.stop{position:relative}
.stop::before{content:"";position:absolute;left:calc(var(--lx) - var(--in) - 9px);top:.38em;width:18px;height:18px;border-radius:50%;background:var(--paper)}
h1.stop::before,h2.stop::before{top:.36em;width:22px;height:22px;left:calc(var(--lx) - var(--in) - 11px)}
.stops{margin-top:64px}
.stops>.stop+.stop{margin-top:58px}
.stop h3{margin-bottom:10px}
.stop p{color:var(--soft)}
.ink .stop p{color:#c5c9cc}
.cover{fill:var(--g)}
.ln{fill:none;stroke:var(--paper);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.ln2{fill:none;stroke:var(--paper);stroke-width:2;stroke-linecap:round}
.ring{fill:none;stroke:var(--chalk);stroke-width:3}
.dot{fill:var(--paper)}
.lbl{font-weight:700;font-size:17px;fill:var(--paper)}
.lblc{font-weight:500;font-size:15px;fill:var(--chalk)}

/* ---------- hero ---------- */
.hero .col{min-height:700px;padding:64px 0 150px}
.hero h1{max-width:8.4em}
.hero .lede{font-size:clamp(19px,1.75vw,22.5px);max-width:25em;margin-top:30px;color:#e3eded}
.hero .free{display:block;margin-top:14px;font-size:15.5px;color:var(--soft)}
.heroline{position:absolute;top:26px;bottom:92px;right:0;width:420px}
.heroline svg{width:420px;height:620px;overflow:visible}
.heroline::after{content:"";position:absolute;left:20px;top:618px;bottom:0;width:4px;background:var(--paper)}
.cross-a{position:absolute;left:calc(var(--lx) + 44px);right:396px;bottom:44px;height:48px;border-right:4px solid var(--paper);border-bottom:4px solid var(--paper);border-bottom-right-radius:44px}
.cross-b{position:absolute;left:calc(var(--lx) - 2px);bottom:0;width:46px;height:48px;border-left:4px solid var(--paper);border-top:4px solid var(--paper);border-top-left-radius:44px}

/* ---------- stalls ---------- */
.stalls{margin-top:70px}
.stall{position:relative;min-height:176px}
.stall+.stall{margin-top:44px}
.stall svg{position:absolute;top:0;left:calc(var(--lx) - var(--in) - 22px);width:190px;overflow:visible}
.stall h3{font-size:clamp(24px,2.5vw,33px);letter-spacing:-.02em;padding-top:34px;margin-bottom:12px}
.stall p{color:var(--soft)}
.stall .mark{display:block;color:var(--chalk);font-weight:500;font-size:16px;margin-top:12px}

/* ---------- build: today / with the build ---------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:64px;max-width:900px}
.pair svg{width:100%;height:auto;margin-bottom:20px}
.pair h3{font-size:21px;margin-bottom:8px}
.pair .now h3{color:var(--chalk)}
.pair p{color:#c5c9cc}
.sub{font-weight:700;font-size:clamp(22px,2vw,27px);letter-spacing:-.012em;margin-top:92px}
.steps .stop{display:grid;grid-template-columns:210px minmax(0,1fr) minmax(0,1fr);gap:0 44px;align-items:start}
.steps .stop h3{margin:0}
.steps .stop p.who{color:var(--paper);font-weight:700}
.ret{font-weight:800;font-size:clamp(25px,3vw,40px);letter-spacing:-.022em;line-height:1.12;color:var(--chalk);max-width:19em;margin-top:84px}

/* ---------- heard ---------- */
.heard p.q{font-weight:800;font-size:clamp(29px,4vw,54px);line-height:1.06;letter-spacing:-.03em;max-width:17em}
.heard p.by{margin-top:24px;color:var(--soft);font-size:17px}

/* ---------- offer ---------- */
.offer .stop{display:grid;grid-template-columns:260px minmax(0,1fr);gap:0 44px;align-items:start}
.offer .stop h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;margin-bottom:6px}
.offer .price{font-weight:500;font-size:17px;color:var(--teal-l)}
.offer .price b{font-weight:800;font-size:27px;color:var(--paper);letter-spacing:-.02em;margin-right:8px}
.more{margin-top:54px;font-weight:500}
.more a{text-underline-offset:5px;text-decoration-thickness:2px}

/* ---------- why ---------- */
.why p{margin-top:28px;font-size:clamp(19px,1.7vw,22px);line-height:1.5;color:#e3eded;max-width:30em}

/* ---------- form ---------- */
.formsec .run{padding-bottom:calc(var(--pt) - 10px)}
.formsec .intro p{margin-top:22px;color:#c5c9cc}
.sheet{background:var(--paper);color:var(--ink);border-radius:8px;padding:clamp(22px,3.4vw,44px);margin-top:54px;max-width:780px}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.cell.full{grid-column:1/-1}
.cell label{display:block;font-weight:500;font-size:15px;color:#454b51;margin-bottom:4px}
.cell input,.cell textarea{width:100%;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;font:400 19px/1.3 var(--font);color:var(--ink);padding:7px 0 9px}
.cell textarea{min-height:84px;resize:vertical}
.cell input::placeholder{color:#8b9095}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sheet .foot{margin-top:34px}
.sheet .btn{background:var(--ink);color:var(--paper)}
.sheet .btn:hover{background:#000}
.sheet .btn[disabled]{opacity:.6;cursor:default}
.formmsg{font-weight:700;margin-top:16px;min-height:1px}
.formmsg.ok{color:var(--teal)}
.formmsg.err{color:#9c2f1b}
.fine{font-size:14.5px;line-height:1.5;color:#454b51;margin-top:18px;max-width:42em}
.next{margin-top:22px;color:#c5c9cc;font-size:16.5px}

/* ---------- inner pages ---------- */
.pagehead .run{padding-top:74px}
.pagehead .run.start::before{top:calc(74px + .42em)}
.pagehead h1{max-width:10em;font-size:clamp(40px,5.8vw,80px)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:40px 64px;margin-top:60px;max-width:900px}
.duo h3{margin-bottom:14px}
.duo li{font-size:clamp(19px,1.7vw,22px);line-height:1.35;padding:11px 0;border-top:1px solid rgba(244,243,239,.28)}
.duo .ppl h3{color:var(--chalk)}
.prose{margin-top:56px}
.prose p{color:var(--soft)}
.prose p+p{margin-top:18px}
.person .role{color:var(--soft);font-weight:500;margin:-4px 0 12px}
.person h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.quote{font-weight:800;font-size:clamp(29px,4vw,54px);line-height:1.06;letter-spacing:-.03em;max-width:17em}
.lone .col{padding:90px 0 150px}
.lone h1{max-width:9em}

/* ---------- footer ---------- */
footer{background:var(--ink);border-top:1px solid rgba(244,243,239,.16);padding:46px 0 42px;font-size:15.5px;color:#aeb3b6}
footer .wrap{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-end}
footer img{height:26px;width:auto;margin-bottom:14px}
footer nav{display:flex;gap:26px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:var(--paper)}

/* ---------- the one motion: the line draws as the page scrolls ---------- */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .run:not(.end)::before{animation:draw linear both;animation-timeline:view();animation-range:cover 18vh cover calc(100% - 82vh)}
  }
}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- narrower ---------- */
@media (max-width:1080px){
  :root{--in:170px}
  .heroline{width:360px}
  .cross-a{right:336px}
  .steps .stop{grid-template-columns:170px minmax(0,1fr) minmax(0,1fr);gap:0 28px}
  .offer .stop{grid-template-columns:210px minmax(0,1fr);gap:0 28px}
}
@media (max-width:900px){
  :root{--lx:16px;--in:50px;--pt:72px}
  body{font-size:17.5px}
  .wrap{padding:0 22px}
  .top .wrap{height:74px}
  .logo img{height:25px}
  .top nav{gap:18px;font-size:15px}
  .hero .col{min-height:0;padding:40px 0 0}
  .heroline{position:relative;top:auto;bottom:auto;right:auto;width:auto;margin:54px 0 0 calc(var(--lx) - 22px);height:620px}
  .heroline svg{width:420px;max-width:none}
  .heroline::after{display:none}
  .cross-a,.cross-b{display:none}
  .stall{min-height:0}
  .stall svg{position:relative;left:auto;margin-left:calc(var(--lx) - var(--in) - 22px)}
  .stall h3{padding-top:16px}
  .pair{grid-template-columns:1fr;gap:40px}
  .steps .stop,.offer .stop{grid-template-columns:1fr;gap:8px}
  .steps .stop h3{margin-bottom:2px}
  .stops>.stop+.stop{margin-top:44px}
  .cells{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .lone .col{padding:54px 0 96px}
}
@media (max-width:560px){
  .top nav .long{display:none}
  .top nav .short{display:inline}
}
@media (max-width:430px){
  .top nav a.opt{display:none}
}