/* Webaroo · webaroo.ai · light scroll-experience build.
   Brand: Product Sans + JetBrains Mono, #0068FF family (BRAND.md / VISUAL_DESIGN_SYSTEM.md,
   light-surface variant). */

@font-face{font-family:'Product Sans';src:url('../assets/fonts/ProductSans-Light.ttf') format('truetype');font-weight:300;font-display:swap;}
@font-face{font-family:'Product Sans';src:url('../assets/fonts/ProductSans-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'Product Sans';src:url('../assets/fonts/ProductSans-Medium.ttf') format('truetype');font-weight:500;font-display:swap;}
@font-face{font-family:'Product Sans';src:url('../assets/fonts/ProductSans-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}
@font-face{font-family:'Product Sans';src:url('../assets/fonts/ProductSans-Black.ttf') format('truetype');font-weight:900;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}

:root{
  --blue:#0068FF; --purple:#701CFA; --yellow:#FCBC0F; --green:#82C91E;
  --bg:#FAFAF7; --ink:#14161C; --soft:#5B6170; --dim:#666D7C; --blue-text:#0056D6;
  --hair:rgba(20,22,28,.10); --hair2:rgba(20,22,28,.05);
  --sans:'Product Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:auto;} /* the field script owns scroll feel */
/* overflow-x:hidden would break position:sticky (it turns body into a scroll
   container); clip does not. */
html,body{overflow-x:clip;}
body{
  font-family:var(--sans);font-weight:400;color:var(--ink);background:var(--bg);
  line-height:1.6;-webkit-font-smoothing:antialiased;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

#field{position:fixed;inset:0;width:100vw;height:100vh;height:100svh;z-index:0;pointer-events:none;}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:26px clamp(22px,4vw,54px);}
.nav-logo img{height:24px;width:auto;display:block;}
.nav-right{display:flex;align-items:center;gap:22px;}
.nav-link{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--soft);text-decoration:none;}
.nav-link:hover{color:var(--blue-text);}

/* ---------- pills ---------- */
.pill{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:14px 24px;border-radius:999px;text-decoration:none;
  transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease;}
.pill:active{transform:translateY(0);filter:brightness(.94);}
.pill-blue{background:var(--blue);color:#fff;}
.pill-blue:hover{background:#1E79FF;transform:translateY(-1px);}
.pill-ink{background:var(--ink);color:#fff;}
.pill-ink:hover{background:#262a34;transform:translateY(-1px);}
.pill-ghost{color:var(--ink);border:1px solid #767D8C;background:transparent;}
.pill-ghost:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px);}
.pill:focus-visible,a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}

/* ---------- acts / pinned scenes ---------- */
/* act lengths: tuned so each scene resolves without dead scroll after it */
.act{position:relative;height:240vh;z-index:1;}
.act-tall{height:320vh;}
.act-mid{height:210vh;}
.act-short{height:185vh;}
.pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:0 clamp(22px,5vw,64px);}
.pin-left{align-items:flex-start;text-align:left;}
.pin-left .col{max-width:560px;margin-left:clamp(0px,4vw,60px);}

/* ---------- type ---------- */
.tag{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;
  letter-spacing:.26em;color:var(--soft);margin-bottom:26px;line-height:1.6;max-width:none;}
.tag-bottom{position:absolute;bottom:9vh;left:0;right:0;margin:0;text-align:center;}

.manifesto{font-weight:300;font-size:clamp(34px,5.4vw,64px);line-height:1.28;
  letter-spacing:.01em;color:var(--ink);max-width:20ch;word-spacing:.14em;}
.manifesto-master{max-width:24ch;font-size:clamp(30px,4.6vw,56px);}

.statement{font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.3;
  color:var(--ink);max-width:19ch;word-spacing:.1em;}
.statement-center{max-width:14ch;}
.support{font-size:17px;line-height:1.7;color:var(--soft);max-width:44ch;margin-top:28px;}

/* assembled letters: glyph layers are promoted only while their element is
   actively assembling (JS toggles .assembling), so weak GPUs never carry
   hundreds of permanent tiny layers */
.ch{display:inline-block;}
.assembling .ch{will-change:transform,opacity;}

/* ---------- fade elements (gated on .js so a failed script never hides
   the conversion path) ---------- */
.js [data-fade]{opacity:0;}
[data-fade],.pcard,.icard{will-change:transform,opacity;}

.pin-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}

/* opening beat: a welcome statement that slides away on first scroll and
   hands the stage to the manifesto assembly */
.hero-intro{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;z-index:2;pointer-events:none;
  background:var(--bg);}
.hero-intro-line{font-weight:300;font-size:clamp(30px,4.4vw,54px);line-height:1.3;
  letter-spacing:.005em;color:var(--ink);max-width:22ch;text-align:center;
  word-spacing:.1em;}

.scroll-hint{position:absolute;bottom:4.5vh;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border:1px solid var(--hair);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--soft);
  font-size:14px;line-height:1;}


/* ---------- insights ---------- */
.insights{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  width:min(1060px,92vw);}
.icard{display:flex;flex-direction:column;text-align:left;text-decoration:none;
  color:var(--ink);background:#FFFFFF;border:1px solid var(--hair2);border-radius:16px;
  padding:0 0 26px;overflow:hidden;transition:box-shadow .25s ease;}
.icard:hover{box-shadow:0 24px 60px -28px rgba(20,22,28,.25);}
.icard:active{box-shadow:0 12px 30px -20px rgba(20,22,28,.25);}
.ithumb{display:block;background:#F3F2EC;border-bottom:1px solid var(--hair2);}
.ithumb svg{display:block;width:100%;height:auto;}
.ilabel{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.24em;color:var(--blue-text);margin:22px 26px 10px;}
.ititle{font-weight:700;font-size:19px;line-height:1.35;letter-spacing:-.01em;
  margin:0 26px 14px;}
.imeta{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim);margin:auto 26px 0;}

/* ---------- pillar cards ---------- */
.cardstack{position:relative;min-height:340px;width:min(520px,86vw);}
.pcard{border-radius:18px;padding:40px 38px;position:relative;margin-bottom:18px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:8px;
  box-shadow:0 30px 80px -30px rgba(20,22,28,.35);}
/* with JS the cards stack and crossfade in place */
.js .pcard{position:absolute;inset:0;margin:0;opacity:0;}
.pcard-index{font-family:var(--mono);font-size:12px;letter-spacing:.22em;position:absolute;
  top:40px;left:38px;opacity:.95;}
.pcard h3{font-weight:900;font-size:30px;letter-spacing:-.02em;line-height:1.1;}
.pcard p{font-size:16px;line-height:1.6;max-width:38ch;}
.pcard-blue{background:var(--blue);color:#fff;}
.pcard-purple{background:var(--purple);color:#fff;}
.pcard-yellow{background:var(--yellow);color:var(--ink);}

/* ---------- read form ---------- */
.anchor{position:absolute;top:58%;}
.support-center{text-align:center;}
.readform{margin-top:40px;width:min(560px,90vw);display:flex;flex-direction:column;gap:12px;}
.readform[hidden]{display:none;}
.readform-row{display:flex;gap:12px;}
.readform input{flex:1;min-width:0;font-family:var(--sans);font-size:15px;color:var(--ink);
  background:#FFFFFF;border:1px solid var(--hair);border-radius:12px;padding:14px 18px;
  transition:border-color .2s ease;}
.readform input::placeholder{color:var(--dim);}
.readform input:hover{border-color:#9AA1AF;}
.readform input:focus{border-color:var(--blue);}
.readform input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.readform input:user-invalid{border-color:#D64545;}
.readform button{border:none;cursor:pointer;flex-shrink:0;}
.readform button[aria-disabled="true"]{opacity:.6;cursor:default;pointer-events:none;}
.readform-check{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:13px;color:var(--soft);cursor:pointer;}
.readform-check input{accent-color:var(--blue);width:15px;height:15px;}
.readform-note{font-family:var(--mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--dim);text-align:center;margin-top:8px;}
.founder-line{font-size:15px;color:var(--soft);margin-top:26px;max-width:44ch;text-align:center;}
.hp{position:absolute;left:-9999px;opacity:0;}

/* ---------- static sections (no scrub: identical for crawlers, JS-off,
   and skimmers; opaque background over the fixed canvas) ---------- */
.static-section{position:relative;z-index:1;background:var(--bg);
  padding:88px clamp(22px,5vw,64px);}
.static-inner{max-width:760px;margin:0 auto;}
.static-section h2{font-weight:300;font-size:clamp(24px,3vw,36px);letter-spacing:.005em;
  line-height:1.3;margin-bottom:22px;color:var(--ink);}
.static-section p{max-width:60ch;color:var(--soft);font-size:17px;line-height:1.75;}
.about-note{font-size:15px;color:var(--dim);margin-top:16px;}
.static-section .pin-cta{justify-content:flex-start;}
.short-close{font-weight:700;color:var(--ink);margin-top:18px;}
/* quiet third-party verification: one mono line, no badge, no box */
.verify-line{margin-top:22px;}
.verify-line a{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--soft);text-decoration:none;}
.verify-line a:hover{color:var(--blue-text);}

/* ---------- frontier act: four clean boxes ---------- */
.frontier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  width:min(920px,92vw);margin-top:46px;}
.fbox{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:#FFFFFF;border:1px solid var(--hair2);border-radius:16px;
  padding:38px 18px;transition:box-shadow .25s ease,border-color .25s ease;}
.fbox:hover{border-color:var(--hair);box-shadow:0 20px 50px -30px rgba(20,22,28,.22);}
.fbox-mark{width:26px;height:26px;border-radius:6px;}
.fbox-org{font-weight:500;font-size:clamp(16px,1.5vw,19px);letter-spacing:-.01em;color:var(--ink);}
.fbox-model{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.24em;color:var(--dim);}
.frontier-cpn{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--dim);margin-top:34px;}

/* ---------- ask an AI: footer-grade box grid ---------- */
.askai-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:34px;}
.askbox{display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:#FFFFFF;border:1px solid var(--hair2);border-radius:16px;
  padding:26px 24px;transition:box-shadow .25s ease,border-color .25s ease,transform .18s ease;}
.askbox:hover{border-color:var(--hair);box-shadow:0 20px 50px -30px rgba(20,22,28,.22);transform:translateY(-2px);}
.askbox:active{transform:translateY(0);}
.askbox-svg{width:26px;height:26px;}
.svg-chatgpt{color:#14161C;}
.svg-claude{color:#D97757;}
.svg-perplexity{color:#20808D;}
.svg-grok{color:#14161C;}
.svg-gemini{color:#4285F4;}
.askbox-name{font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink);}
.askbox-cta{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--dim);}
.askbox:hover .askbox-cta{color:var(--blue-text);}

/* ---------- coda: the closing frame ---------- */
.coda{position:relative;z-index:1;background:var(--ink);color:#fff;overflow:hidden;
  padding:110px clamp(22px,5vw,64px) 100px;display:flex;align-items:center;justify-content:center;}
.coda-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-weight:900;font-size:19vw;letter-spacing:-.04em;line-height:1;
  color:rgba(255,255,255,.045);pointer-events:none;white-space:nowrap;}
.coda-inner{position:relative;text-align:center;max-width:760px;}
.coda-line{font-weight:300;font-size:clamp(26px,3.6vw,46px);line-height:1.28;
  letter-spacing:.005em;word-spacing:.1em;}
.coda-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:40px;}
.pill-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);}
.pill-light:hover{border-color:#fff;transform:translateY(-1px);}

/* ---------- FAQ strip: compact accordion above the footer ---------- */
.faq-strip{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--hair2);
  padding:52px clamp(22px,5vw,64px);}
.faq-title{font-family:var(--mono);font-size:11px;font-weight:400;text-transform:uppercase;
  letter-spacing:.26em;color:var(--soft);margin-bottom:18px;}
.faq-strip details{border-bottom:1px solid var(--hair2);}
.faq-strip summary{cursor:pointer;font-weight:500;font-size:15px;color:var(--ink);
  padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.faq-strip summary::-webkit-details-marker{display:none;}
.faq-strip summary::after{content:'+';font-family:var(--mono);color:var(--dim);font-size:14px;}
.faq-strip details[open] summary::after{content:'\2212';}
.faq-strip details p{max-width:60ch;color:var(--soft);font-size:15px;line-height:1.7;
  padding:0 0 16px;}

/* ---------- footer ---------- */
.footer{position:relative;z-index:1;background:var(--bg);border-top:1px solid var(--hair2);
  padding:40px clamp(22px,4vw,54px) 52px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;
  color:var(--dim);display:flex;flex-direction:column;gap:12px;}
.footer-row{display:flex;align-items:center;gap:12px;}
.footer a{color:var(--soft);text-decoration:none;display:inline-block;padding:6px 2px;}
.footer a:hover{color:var(--blue-text);}
.sep{margin:0 8px;}

/* ---------- article pages ---------- */
.article-body{position:relative;z-index:1;max-width:680px;margin:0 auto;
  padding:140px clamp(22px,5vw,64px) 90px;}
.article-body .tag{margin-bottom:26px;}
.article-title{font-weight:300;font-size:clamp(30px,4.6vw,50px);line-height:1.25;
  letter-spacing:.005em;margin-bottom:14px;}
.article-meta{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.2em;color:var(--dim);margin-bottom:46px;}
.article-body h2{font-weight:700;font-size:22px;letter-spacing:-.01em;margin:44px 0 14px;}
.article-body p{font-size:17px;line-height:1.75;color:#3A3F4C;margin-bottom:18px;}
.article-body ul{margin:0 0 18px 22px;}
.article-body li{font-size:17px;line-height:1.75;color:#3A3F4C;margin-bottom:8px;}
.article-cta{margin-top:56px;padding-top:36px;border-top:1px solid var(--hair2);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.article-cta p{margin:0;font-size:16px;}
.article-next{margin-top:34px;font-size:15px;}
.article-next a{color:var(--blue-text);text-decoration:none;}
.article-next a:hover{text-decoration:underline;}

/* ---------- responsive ---------- */
/* ---------- tablet ---------- */
@media (max-width:900px){
  .frontier-grid{grid-template-columns:repeat(2,1fr);gap:14px;}
  .askai-grid{grid-template-columns:repeat(3,1fr);}
}

/* ---------- phone ---------- */
@media (max-width:720px){
  .nav{padding:14px 18px;}
  .nav-logo{display:flex;align-items:center;min-height:44px;padding:10px 6px;}
  .nav-logo img{height:19px;}
  .nav-link{display:none;}
  .nav-cta{padding:12px 16px;font-size:10px;letter-spacing:.14em;}

  .act{height:215vh;}
  .act-tall{height:280vh;}
  .act-mid{height:220vh;}
  /* explicit: without this, source order lets the generic .act mobile rule
     override the shorter form act and stretch it */
  .act-short{height:170vh;}
  .pin{padding:0 20px;}
  .pin-left .col{margin-left:0;}

  .manifesto{font-size:31px;line-height:1.24;max-width:none;word-spacing:.08em;}
  .manifesto-master{font-size:28px;}
  .hero-intro-line{font-size:28px;max-width:none;}
  .statement{font-size:26px;line-height:1.28;max-width:none;}
  .statement-center{max-width:16ch;}
  .support{font-size:16px;margin-top:22px;}
  .tag{font-size:10px;letter-spacing:.2em;margin-bottom:20px;}
  .tag-bottom{bottom:5vh;padding:0 20px;}
  .pin-cta{margin-top:32px;gap:10px;}

  .cardstack{min-height:330px;width:100%;}
  .pcard{padding:28px 22px;border-radius:16px;}
  .pcard h3{font-size:24px;}
  .pcard p{font-size:15px;line-height:1.55;}
  .pcard-index{top:26px;left:22px;}

  .frontier-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:32px;width:100%;}
  .fbox{padding:24px 12px;border-radius:14px;}
  .fbox-logo{height:20px;max-width:88%;object-fit:contain;}

  .askai-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px;}
  .askbox{padding:18px 16px;border-radius:14px;gap:8px;}
  .askbox:last-child{grid-column:span 2;}
  .askbox-svg{width:22px;height:22px;}
  .askbox-name{font-size:16px;}
  .askbox-cta{font-size:9px;letter-spacing:.14em;}

  /* horizontal snap row: no nested vertical scroller inside the pin */
  .insights{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);
    mask-image:linear-gradient(90deg,#000 84%,transparent);}
  .icard{flex:0 0 80%;scroll-snap-align:center;padding-bottom:18px;}
  .ithumb{aspect-ratio:5/3;}
  .ilabel{margin:16px 18px 8px;}
  .ititle{font-size:16px;margin:0 18px 12px;}
  .imeta{margin:auto 18px 0;}

  .readform{margin-top:30px;}
  .readform-row{flex-direction:column;gap:10px;}
  .readform input{font-size:16px;} /* 16px stops iOS zoom-on-focus */
  .readform button{width:100%;text-align:center;}
  .founder-line{font-size:14px;margin-top:20px;}

  .static-section{padding:56px 20px;}
  .static-section h2{font-size:26px;}
  .static-section p{font-size:16px;}
  .faq-strip{padding:44px 20px;}
  .article-body{padding:110px 20px 70px;}
  .article-title{font-size:30px;}
  .article-body p,.article-body li{font-size:16px;}

  /* mobile footer: wrapped rows with gaps, no floating separators to strand
     middots at line starts */
  .footer{font-size:10px;letter-spacing:.12em;padding:32px 20px 40px;}
  .footer p{display:flex;flex-wrap:wrap;column-gap:14px;row-gap:2px;}
  .footer .sep{display:none;}
  .footer a{padding:6px 0;}
}

/* ---------- small phone ---------- */
@media (max-width:400px){
  .manifesto{font-size:27px;}
  .manifesto-master{font-size:25px;}
  .hero-intro-line{font-size:25px;}
  .statement{font-size:23px;}
  .fbox-logo{height:17px;}
  .askbox-name{font-size:15px;}
}
/* Reduced motion: scroll-scrubbed states still track the user's own scrolling
   (letters fade in place, no flight, no tint), ambient drift is disabled in JS. */
@media (prefers-reduced-motion: reduce){
  .pill,.icard{transition:none;}
  .pill:hover{transform:none;}
}