/* VowLane landing page - layout and components */
/* Consumes design tokens from styles/tokens.css only. No raw hex here. */
/* Mirror pointer: all color and type values live in styles/tokens.css. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-page);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding-inline:var(--space-inline)}
.eyebrow{font-family:var(--font-body);font-size:var(--text-eyebrow);font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--color-accent-deep)}
h1,h2,h3{font-family:var(--font-display);font-weight:400;letter-spacing:-0.01em}
em{font-style:italic;color:var(--color-accent-deep)}
a{color:var(--color-accent-deep);text-decoration:none}
a:focus-visible{outline:2px solid var(--color-accent-deep);outline-offset:2px;border-radius:2px}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-topbar) 0}
.brand{font-family:var(--font-display);font-size:var(--text-wordmark);font-weight:500;letter-spacing:0.01em;color:var(--color-ink)}
.brand span{color:var(--color-accent)}
.navlink{font-family:var(--font-body);font-size:var(--text-nav);font-weight:500}

/* Hero as invitation face */
.hero{text-align:center;padding-block:var(--space-block-m) var(--space-block-l)}
.rule{width:54px;height:1px;background:var(--color-accent);margin:0 auto;border:0}
.rule.soft{background:var(--color-line)}
.hero .eyebrow{margin:1.75rem 0 1.5rem}
.hero h1{font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.08;max-width:20ch;margin:0 auto}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--color-ink-soft);max-width:44ch;margin:1.75rem auto 0}

/* Waitlist */
/* Mobile-first: input and button stacked full width. Inline at 30rem and up. */
.signup{display:flex;flex-direction:column;gap:10px;max-width:30rem;margin:2.5rem auto 0}
.signup input{width:100%;height:52px;padding:0 1.1rem;font-family:var(--font-body);font-size:16px;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-line);border-radius:2px;outline:none;transition:border-color .2s}
.signup .btn{width:100%}
.signup input::placeholder{color:var(--color-placeholder)}
.signup input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}
.signup input:focus-visible{outline:2px solid var(--color-accent-deep);outline-offset:2px}
.signup input.is-error,
.signup input.is-error:focus{border-color:var(--color-error)}
@media (min-width:30rem){
  .signup{flex-direction:row;align-items:center}
  .signup input{flex:1 1 auto;width:auto;min-width:0}
  .signup .btn{flex:0 0 auto;width:auto}
}
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 1.6rem;font-family:var(--font-body);font-size:15.5px;font-weight:600;letter-spacing:0.01em;color:var(--color-page);background:var(--color-ink);border:1px solid var(--color-ink);border-radius:2px;cursor:pointer;text-decoration:none;transition:background .2s,transform .05s}
.btn:hover{background:var(--color-ink-hover)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--color-accent-deep);outline-offset:2px;box-shadow:0 0 0 3px var(--color-accent-soft)}
.micro{font-size:var(--text-micro);color:var(--color-ink-soft);margin-top:1rem}
.field-error{display:none;font-size:var(--text-micro);font-weight:500;color:var(--color-error);margin-top:0.6rem}
.field-error.show{display:block}
.confirm{display:none;font-family:var(--font-display);font-size:1.3rem;color:var(--color-ink);margin-top:2.5rem}
.confirm.show{display:block}
.confirm:focus{outline:none}

/* Thesis band */
.thesis{border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);padding:var(--space-block-m) 0;text-align:center}
.thesis .eyebrow{display:block;margin-bottom:1.25rem}
.thesis p{font-family:var(--font-display);font-size:clamp(1.35rem,2.8vw,1.9rem);line-height:1.4;max-width:26ch;margin:0 auto;color:var(--color-ink)}

/* Three sides */
.sides{padding-block:var(--space-block-l) 1rem;text-align:center}
.sides .eyebrow{display:block;margin-bottom:0.9rem}
.sides h2{font-size:clamp(1.9rem,3.6vw,2.6rem);margin-bottom:3.25rem}
/* Mobile-first: single column. 2-up at 40rem, 3-up at 60rem. */
.grid{display:grid;grid-template-columns:1fr;gap:var(--space-grid-gap);text-align:left}
@media (min-width:40rem){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card:nth-child(3){grid-column:1 / -1;justify-self:center;width:100%;max-width:calc((100% - var(--space-grid-gap)) / 2)}
}
@media (min-width:60rem){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .card:nth-child(3){grid-column:auto;justify-self:auto;width:auto;max-width:none}
}
.card{background:var(--color-surface);border:1px solid var(--color-line);border-radius:4px;padding:2rem 1.75rem;transition:transform .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.card .label{font-family:var(--font-body);font-size:var(--text-card-label);font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--color-accent-deep)}
.card .tick{width:26px;height:1px;background:var(--color-accent);margin:1rem 0 1.1rem}
.card p{font-size:var(--text-card-body);color:var(--color-ink-soft);line-height:1.65}

/* Closing CTA */
.closing{text-align:center;padding-block:var(--space-block-xl) var(--space-block-m)}
.closing h2{font-size:clamp(1.8rem,3.4vw,2.5rem);margin-bottom:1.1rem}
.closing .sub{color:var(--color-ink-soft);max-width:40ch;margin:0 auto 2.25rem}

/* Footer */
footer{border-top:1px solid var(--color-line);padding:var(--space-footer-y) 0;text-align:center}
footer .brand{font-size:var(--text-wordmark-foot);display:inline-block;margin-bottom:0.5rem}
footer p{font-size:var(--text-footer);color:var(--color-ink-soft)}

/* Long-form content page (privacy, legal) */
.page{padding-block:var(--space-block-l) var(--space-block-m)}
.prose{max-width:var(--measure-prose);margin-inline:auto;overflow-wrap:break-word}
.prose h1{font-size:clamp(2rem,4.2vw,2.8rem);line-height:1.15;letter-spacing:-0.01em;margin-bottom:0.75rem}
.prose .effective{color:var(--color-ink-soft);margin-bottom:0.5rem}
.prose .note{font-size:var(--text-micro);color:var(--color-ink-soft);font-style:italic;margin-bottom:2.5rem}
.prose h2{font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.25;margin-top:2.5rem;margin-bottom:0.75rem}
.prose p{color:var(--color-ink);line-height:1.75;margin-bottom:1.1rem}
.prose ul{margin:0 0 1.1rem;padding-left:1.4rem}
.prose li{color:var(--color-ink);line-height:1.7;margin-bottom:0.5rem}
.prose li::marker{color:var(--color-accent)}
.prose a{color:var(--color-accent-deep);text-decoration:underline;text-underline-offset:2px}
.prose strong{font-weight:600}

/* Load reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .card{transition:none}
}