/* east11ai: Apple-style landing page. Shared by / (English) and /fr/ (French). */
:root{
  color-scheme:light;
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --card:#ffffff;
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --hair:#d2d2d7;
  --link:#0066cc;
  --btn:#0071e3;
  --btn-hover:#0077ed;
  --brand:#2c36f5;
  --sun:#ffb21a;
  --ok:#1d9e5f;
  --nav:rgba(251,251,253,.8);
  --grad:linear-gradient(90deg,#2c36f5 0%,#b03ad8 52%,#ff8a1a 100%);
  --shadow:0 30px 80px -30px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.04);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#000000;--bg-alt:#161617;--card:#1d1d1f;--ink:#f5f5f7;--muted:#86868b;--hair:#424245;
    --link:#2997ff;--btn:#0071e3;--btn-hover:#0077ed;--brand:#7c84ff;--nav:rgba(22,22,23,.8);
    --shadow:0 30px 80px -30px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:600}
:focus-visible{outline:2px solid var(--btn);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.wrap{max-width:980px;margin-inline:auto;padding-inline:22px}
.wide{max-width:1200px;margin-inline:auto;padding-inline:22px}
.center{text-align:center}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.muted{color:var(--muted)}

/* buttons and links */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--btn);color:#fff;border:0;border-radius:980px;padding:11px 22px;font:400 17px/1.2 var(--font);letter-spacing:-.022em;cursor:pointer;transition:background .2s}
.pill:hover{background:var(--btn-hover);text-decoration:none}
.pill.sm{padding:5px 13px;font-size:12px;letter-spacing:-.01em}
.pill.ghost{background:transparent;color:var(--btn);box-shadow:inset 0 0 0 1px var(--btn)}
.pill.ghost:hover{background:var(--btn);color:#fff}
.more{font-size:17px;white-space:nowrap}
.more::after{content:" ›";font-size:1.15em;line-height:1}
.ctas{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--nav);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--hair) 60%,transparent);padding-top:env(safe-area-inset-top,0px)}
.nav .in{height:52px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.wordmark{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.wordmark svg{width:26px;height:26px;flex:none}
.wordmark b{color:var(--brand);font-weight:600}
.nav .links{display:flex;gap:24px;font-size:12px;letter-spacing:-.01em}
.nav .links a{color:var(--ink);opacity:.8}
.nav .links a:hover{opacity:1;text-decoration:none}
.nav .right{display:flex;align-items:center;gap:16px}
.lang{font-size:12px;color:var(--ink);opacity:.8;border:1px solid var(--hair);border-radius:980px;padding:4px 10px}
.lang:hover{opacity:1;text-decoration:none}
@media (max-width:860px){.nav .links{display:none}}

/* sections */
section{padding-block:120px}
@media (max-width:734px){section{padding-block:80px}}
.alt{background:var(--bg-alt)}
.dark{background:#000;color:#f5f5f7;--ink:#f5f5f7;--muted:#86868b;--hair:#424245;--card:#1d1d1f;--link:#2997ff}
.headline{font-size:clamp(40px,6vw,64px);line-height:1.0625;letter-spacing:-.009em}
.title{font-size:clamp(32px,4.6vw,56px);line-height:1.07;letter-spacing:-.005em}
.sub{font-size:clamp(19px,2.2vw,28px);line-height:1.17;letter-spacing:.007em;font-weight:600;color:var(--muted)}
.intro{font-size:clamp(17px,1.8vw,21px);line-height:1.38;letter-spacing:.011em;color:var(--muted);max-width:680px;margin-inline:auto}
.eyebrow{font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:.011em;margin-bottom:10px}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:64px}
.sec-head.center{align-items:center}

/* reveal: elements are visible at rest; JS only adds a small lift on scroll */
.js .reveal{transform:translateY(36px);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{transform:none}

/* hero */
.hero{padding-block:72px 0;text-align:center;overflow:hidden}
.hero .eyebrow{font-size:clamp(19px,2vw,24px)}
.hero h1{font-size:clamp(48px,9vw,96px);line-height:1.04;letter-spacing:-.015em;font-weight:700}
.hero .sub{margin-top:18px}
.hero .ctas{margin-top:34px}
.stage{margin-top:72px;padding-bottom:0;position:relative}
.stage::before{content:"";position:absolute;inset:18% -10% -20%;background:radial-gradient(60% 50% at 50% 40%,color-mix(in srgb,#2c36f5 22%,transparent),transparent 70%),radial-gradient(40% 40% at 75% 70%,color-mix(in srgb,#ff8a1a 18%,transparent),transparent 70%);filter:blur(30px);z-index:0}

.window{position:relative;z-index:1;max-width:860px;margin-inline:auto;background:var(--card);border-radius:18px;box-shadow:var(--shadow);border:1px solid color-mix(in srgb,var(--hair) 70%,transparent);text-align:left;overflow:hidden}
.window .bar{display:flex;align-items:center;gap:8px;height:40px;padding-inline:14px;border-bottom:1px solid var(--hair);background:color-mix(in srgb,var(--bg-alt) 70%,var(--card))}
.window .bar i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.window .bar i:nth-child(2){background:#febc2e}
.window .bar i:nth-child(3){background:#28c840}
.window .bar span{flex:1;text-align:center;font-size:13px;color:var(--muted);margin-right:52px}
.window .body{display:grid;grid-template-columns:1fr 1.15fr}
@media (max-width:760px){.window .body{grid-template-columns:1fr}}
.ask{padding:28px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:14px}
@media (max-width:760px){.ask{border-right:0;border-bottom:1px solid var(--hair)}}
.ask .who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.ask .av{width:28px;height:28px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px}
.ask .text{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.01em;min-height:3.75em}
.caret{display:inline-block;width:2px;height:1em;background:var(--btn);vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ask .meta{margin-top:auto;font:12px var(--mono);color:var(--muted)}
.steps{list-style:none;margin:0;padding:14px}
.step{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:start;padding:10px;border-radius:12px;transition:background .35s,opacity .35s}
.step .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--bg-alt);color:var(--muted);transition:background .35s,color .35s}
.step .t{font-size:15px;font-weight:600}
.step .d{font-size:13px;color:var(--muted);line-height:1.38}
.tag{font-size:11px;font-weight:500;padding:3px 9px;border-radius:980px;white-space:nowrap;margin-top:3px;letter-spacing:0}
.tag.you{background:color-mix(in srgb,var(--sun) 22%,transparent);color:var(--ink)}
.tag.ai{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.tag.eng{background:var(--ink);color:var(--bg)}
.step.done .dot{background:var(--ok);color:#fff}
.step.active{background:color-mix(in srgb,var(--btn) 9%,transparent)}
.step.active .dot{background:var(--btn);color:#fff}
.step.wait{opacity:.35}
@media (max-width:420px){.step{grid-template-columns:28px 1fr}.step .tag{grid-column:2;justify-self:start;margin-top:0}}

/* the result bar under the demo window: the clock from request to production */
.result{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:22px 28px;border-top:1px solid var(--hair);background:color-mix(in srgb,var(--bg-alt) 60%,var(--card))}
.result .lbl{font-size:15px;font-weight:600;color:var(--muted)}
.result .lbl small{display:block;font-size:13px;font-weight:400}
.result b{font-size:clamp(34px,5vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.result.running b{background:none;color:var(--muted);-webkit-text-fill-color:currentColor}
.result.landed b{animation:land .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes land{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:none}}
.result .live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ok)}
.result .live i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 50%,transparent);animation:ping 1.6s infinite}
.result.running .live{visibility:hidden}
@keyframes ping{70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* three steps, right under the hero headline */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:900px;margin:44px auto 0;text-align:left;border-top:1px solid var(--hair)}
.three > div{padding:20px 20px 0;display:flex;flex-direction:column;gap:6px}
.three > div + div{border-left:1px solid var(--hair)}
.three .k{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.three .k em{font-style:normal;color:var(--brand)}
.three b{font-size:19px;font-weight:600;line-height:1.25}
.three p{font-size:15px;color:var(--muted)}
@media (max-width:760px){.three{grid-template-columns:1fr}.three > div{padding:18px 0}.three > div + div{border-left:0;border-top:1px solid var(--hair)}}

/* design first */
.design{display:grid;grid-template-columns:1.1fr 1fr;gap:20px}
@media (max-width:860px){.design{grid-template-columns:1fr}}
.design .main{background:#000;color:#f5f5f7;border-radius:28px;padding:48px 44px;display:flex;flex-direction:column;gap:20px}
.design .main p{color:#a1a1a6;font-size:19px}
.design .main h3{font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.design .main .n{font-size:15px;font-weight:600;color:#a1a1a6;text-transform:uppercase;letter-spacing:.05em}
.design .main .rule{margin-top:auto;font-size:19px;font-weight:600;color:#f5f5f7}
.design .list{background:var(--bg-alt);border-radius:28px;padding:40px;display:flex;flex-direction:column}
.design .list h4{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.design .list div{padding:16px 0;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:2px}
.design .list b{font-size:17px;font-weight:600}
.design .list span{font-size:15px;color:var(--muted)}
.then{margin-top:20px;background:var(--bg-alt);border-radius:28px;padding:40px 44px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.then .n{font-size:15px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.then h3{font-size:28px;line-height:1.14;margin-top:6px}
.then p{color:var(--muted)}
@media (max-width:760px){.then{grid-template-columns:1fr;padding:32px 24px}}

/* highlights: five short cards, all visible at once */
.gallery-head{margin-bottom:40px}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.hl{border-radius:24px;padding:28px 24px;display:flex;flex-direction:column;gap:14px;background:#000;color:#f5f5f7}
.hl:nth-child(2n){background:var(--card);color:var(--ink)}
.hl .vis{font-size:clamp(40px,4vw,52px);font-weight:700;letter-spacing:-.03em;line-height:1}
.hl .vis small{display:block;font-size:15px;font-weight:600;letter-spacing:0;margin-top:8px;color:#a1a1a6}
.hl:nth-child(2n) .vis small{color:var(--muted)}
.hl h3{font-size:19px;line-height:1.21;letter-spacing:.012em;margin-top:auto;padding-top:24px}
.hl p{font-size:15px;color:#a1a1a6}
.hl:nth-child(2n) p{color:var(--muted)}
@media (max-width:1000px){.gallery{grid-template-columns:1fr 1fr}.hl:last-child{grid-column:span 2}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}.hl:last-child{grid-column:auto}.hl h3{padding-top:12px}}

/* phone: shorter language button, so the bar fits */
.lang .short{display:none}
@media (max-width:480px){.lang .long{display:none}.lang .short{display:inline}.nav .right{gap:10px}.wordmark{font-size:19px}}

/* before / after */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:24px}
@media (max-width:760px){.versus{grid-template-columns:1fr;gap:56px}}
.versus .side{display:flex;flex-direction:column;gap:18px}
.versus .label{font-size:17px;font-weight:600;color:var(--muted)}
.versus .num{font-size:clamp(64px,10vw,120px);font-weight:700;letter-spacing:-.03em;line-height:1}
.versus .old .num{color:#424245;text-decoration:line-through;text-decoration-thickness:4px}
.versus ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.versus li{display:grid;grid-template-columns:88px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--hair);font-size:17px}
.versus li span:first-child{font:13px/1.9 var(--mono);color:var(--muted)}
.versus .old li span:last-child{color:var(--muted)}
.request{display:inline-block;margin-top:28px;font-size:clamp(19px,2.2vw,24px);font-weight:600;padding:12px 22px;border-radius:980px;background:#1d1d1f}

/* phases */
.phases{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.phases{grid-template-columns:1fr}}
.phase{background:var(--bg-alt);border-radius:28px;padding:44px 40px;display:flex;flex-direction:column;gap:20px}
.phase .n{font-size:96px;line-height:.9;font-weight:700;letter-spacing:-.04em}
.phase .when{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.phase h3{font-size:28px;line-height:1.14}
.phase ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.phase li{padding:14px 0;border-top:1px solid var(--hair);font-size:17px;color:var(--muted)}
.phase li b{color:var(--ink);font-weight:600}
.phase .out{margin-top:auto;font-size:17px;font-weight:600}

/* compare: who does what */
.compare{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center}
@media (max-width:760px){.compare{grid-template-columns:1fr;gap:56px}}
.col{display:flex;flex-direction:column;align-items:center;gap:14px}
.col .ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center}
.col .ic svg{width:34px;height:34px}
.col.you .ic{background:color-mix(in srgb,var(--sun) 25%,transparent);color:#b36b00}
.col.ai .ic{background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand)}
.col.eng .ic{background:var(--ink);color:var(--bg)}
.col h3{font-size:24px;line-height:1.17}
.col .role{font-size:14px;color:var(--muted);margin-top:-8px}
.col ul{list-style:none;margin:8px 0 0;padding:0;width:100%}
.col li{padding:14px 0;border-top:1px solid var(--hair);font-size:17px}
.col li:last-child{border-bottom:1px solid var(--hair)}
.note{margin-top:56px;text-align:center;font-size:21px;font-weight:600}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.tile{background:var(--card);border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:12px;min-height:280px}
.tile.w3{grid-column:span 3}
.tile.w2{grid-column:span 2}
.tile.w4{grid-column:span 4}
@media (max-width:860px){.tile.w2,.tile.w3,.tile.w4{grid-column:span 6}.tile{min-height:0}}
.tile .ic{width:44px;height:44px;color:var(--brand);margin-bottom:auto}
.tile .ic svg{width:44px;height:44px}
.tile h3{font-size:24px;line-height:1.17;margin-top:24px}
.tile p{color:var(--muted)}
.tile.feature{background:#000;color:#f5f5f7}
.tile.feature p{color:#a1a1a6}
.tile.feature .big{font-size:clamp(56px,8vw,88px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:auto}

/* proof */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
@media (max-width:860px){.stats{grid-template-columns:1fr 1fr;gap:40px 20px}}
.stat{text-align:center;display:flex;flex-direction:column;gap:6px}
.stat b{font-size:clamp(48px,6vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-size:15px;color:var(--muted);max-width:200px;margin-inline:auto}
.flow{margin-top:72px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;align-items:center}
.flow span{background:var(--bg-alt);border-radius:980px;padding:8px 16px;font-size:15px;font-weight:500}
.flow i{font-style:normal;color:var(--muted)}

/* audiences */
.aud{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:760px){.aud{grid-template-columns:1fr}}
.aud > div{border-radius:28px;padding:56px 44px;display:flex;flex-direction:column;gap:16px;min-height:360px;justify-content:flex-end}
.aud .a1{background:#000;color:#f5f5f7}
.aud .a1 p{color:#a1a1a6}
.aud .a2{background:var(--bg-alt)}
.aud .a2 p{color:var(--muted)}
.aud h3{font-size:clamp(28px,3.4vw,40px);line-height:1.1}

/* try it */
.try{background:var(--card);border-radius:28px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:44px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
@media (max-width:860px){.try{grid-template-columns:1fr;padding:28px 22px}}
.try label{display:block;font-weight:600;font-size:21px;margin-bottom:14px}
.try textarea{width:100%;min-height:150px;resize:vertical;border:1px solid var(--hair);border-radius:14px;padding:16px;font:400 17px/1.47 var(--font);letter-spacing:-.022em;background:var(--bg);color:var(--ink)}
.try textarea:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 4px color-mix(in srgb,var(--btn) 20%,transparent)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-block:14px 22px}
.chip{border:1px solid var(--hair);background:transparent;color:var(--ink);border-radius:980px;padding:7px 14px;font:400 14px var(--font);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.plan .ph{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.plan ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--hair);font-size:16px;animation:lift .4s ease both}
.plan li .tag{margin-top:2px}
@keyframes lift{from{transform:translateY(6px)}to{transform:none}}

/* pilot */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:11px;height:2px;background:var(--grad);opacity:.6}
.timeline li{position:relative;padding-top:44px;display:flex;flex-direction:column;gap:8px}
.timeline li::before{content:"";position:absolute;top:2px;left:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:4px solid var(--btn)}
.timeline .day{font-size:14px;font-weight:600;color:var(--btn)}
.timeline h3{font-size:21px}
.timeline p{color:var(--muted);font-size:16px}
@media (max-width:760px){
  .timeline{grid-template-columns:1fr;gap:0}
  .timeline::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .timeline li{padding:0 0 32px 44px}
}
.offer{margin-top:80px;background:var(--bg-alt);border-radius:28px;padding:44px;display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}
@media (max-width:760px){.offer{grid-template-columns:1fr;padding:32px 24px}}
.offer h3{font-size:32px;line-height:1.1}
.offer ul{list-style:none;margin:0;padding:0}
.offer li{padding:10px 0;border-top:1px solid var(--hair);font-size:17px}
.offer li::before{content:"✓  ";color:var(--ok);font-weight:700}
.offer .go{display:flex;flex-direction:column;gap:14px;align-items:flex-start}

/* faq */
.faq{max-width:820px;margin-inline:auto}
details{border-bottom:1px solid var(--hair)}
details:first-child{border-top:1px solid var(--hair)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-size:21px;font-weight:600;letter-spacing:.011em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:28px;font-weight:300;color:var(--btn);transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding-bottom:24px;color:var(--muted);font-size:17px;max-width:680px}

/* final */
.final{text-align:center}
.final h2{font-size:clamp(44px,8vw,96px);line-height:1.04;letter-spacing:-.015em;font-weight:700}
.final .ctas{margin-top:40px}
.mail{display:inline-flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}
.mail code{font:17px var(--mono);user-select:all;color:#f5f5f7}
.mail button{background:transparent;border:0;color:#2997ff;font:400 17px var(--font);cursor:pointer;padding:0}

/* footer */
footer{background:var(--bg-alt);color:var(--muted);font-size:12px;line-height:1.33;letter-spacing:-.01em;padding-block:20px 40px}
footer .notes{padding-bottom:16px;border-bottom:1px solid var(--hair);display:flex;flex-direction:column;gap:8px}
footer .bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:16px}
footer a{color:var(--ink)}
sup{font-size:.55em;vertical-align:super;line-height:0;margin-left:1px}

/* hero: the disruptive line */
.hero .tagline{margin-top:22px;font-size:clamp(21px,2.6vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.01em}
.hero h1 .x{font-size:1.08em}

/* how the AI labs build: the reference that makes the claim credible */
.lab{text-align:center}
.lab .big{font-size:clamp(88px,17vw,220px);font-weight:800;letter-spacing:-.05em;line-height:.9;margin-block:28px 8px}
.lab .big-cap{font-size:clamp(19px,2.2vw,28px);font-weight:600;color:#a1a1a6;max-width:760px;margin-inline:auto;line-height:1.2}
.lab .big-cap b{color:#f5f5f7;font-weight:600}
.lab .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:72px;border-top:1px solid #424245;text-align:left}
.lab .pillars div{padding:24px 24px 0}
.lab .pillars div + div{border-left:1px solid #424245}
.lab .pillars b{display:block;font-size:21px;font-weight:600;margin-bottom:6px}
.lab .pillars p{color:#a1a1a6;font-size:16px}
.lab .bring{margin-top:64px;font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1.08;letter-spacing:-.01em}
@media (max-width:760px){.lab .pillars{grid-template-columns:1fr}.lab .pillars div{padding:20px 0}.lab .pillars div + div{border-left:0;border-top:1px solid #424245}}

/* the math: a team of 5 against east11ai */
.math{width:100%;border-collapse:collapse;font-size:17px}
.math-wrap{overflow-x:auto;border-radius:28px;background:var(--card)}
.math th,.math td{padding:20px 24px;text-align:left;border-bottom:1px solid var(--hair);vertical-align:top}
.math tr:last-child td{border-bottom:0}
.math thead th{font-size:15px;font-weight:600;color:var(--muted);padding-top:28px}
.math thead th.us{color:var(--ink)}
.math td:first-child{font-weight:600;width:28%}
.math td.them{color:var(--muted)}
.math td.us{font-weight:600}
.math td.us b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:640px){
  .math thead{display:none}
  .math,.math tbody,.math tr,.math td{display:block;width:auto!important}
  .math tr{padding:18px 20px;border-bottom:1px solid var(--hair)}
  .math tr:last-child{border-bottom:0}
  .math td{padding:2px 0;border:0}
  .math td.them::before{content:attr(data-l) " ";font-weight:600}
  .math td.us::before{content:attr(data-l) " ";color:var(--muted);font-weight:600}
}
.hero .wrap{max-width:1240px}
.hero h1 sup{font-size:.28em;color:var(--muted);font-weight:600;vertical-align:top;position:relative;top:.5em;margin-left:4px}
.hero .sub,.hero .tagline{max-width:900px;margin-inline:auto}
/* hero kept short: headline, one line, buttons, then the 3 steps */
.hero{padding-top:88px}
.hero .sub{margin-top:22px;color:var(--ink)}
.hero .sub sup{color:var(--muted)}
.hero .ctas{margin-top:36px}
.hero .three{margin-top:64px}

/* evolution: one year of releases, then who steers / who runs / who grows */
.stream-cap{text-align:center;font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:28px}
.stream{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;position:relative}
.stream::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--grad);opacity:.6}
.stream li{position:relative;padding-top:36px;display:flex;flex-direction:column;gap:4px}
.stream li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--bg-alt);border:4px solid var(--sun)}
.stream li.ours::before{border-color:var(--ink)}
.stream .when{font-size:13px;font-weight:600;color:var(--muted)}
.stream h3{font-size:17px;line-height:1.25}
.stream p{font-size:14px;color:var(--muted)}
.evolve-cards{margin-top:64px}
.evolve-cards .tile{min-height:0}
@media (max-width:900px){
  .stream{grid-template-columns:1fr;gap:0}
  .stream::before{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .stream li{padding:0 0 28px 44px}
}
.stream-legend{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:28px;font-size:14px;color:var(--muted)}
.stream-legend span{display:flex;align-items:center;gap:8px}
.stream-legend i{width:12px;height:12px;border-radius:50%;border:3px solid var(--sun)}
.stream-legend i.ours{border-color:var(--ink)}