/* Cinnematic marketing page. Tokens come from /v3/assets/tokens.css. */
body{overflow-x:hidden}
[data-k]{will-change:transform}

/* top bar + nav */
.bar{height:30px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-meta);color:var(--ink-2);background:var(--wash);border-bottom:1px solid var(--line)}
.bar a{border-bottom:1px solid #C9C9C4;margin-left:6px}
nav.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav.top .in{max-width:var(--wrap-wide);margin:0 auto;padding:0 24px;height:58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.links{display:flex;gap:34px;font-size:13px;color:var(--ink-2)}
.links a:hover{color:var(--ink)}
.right{display:flex;justify-content:flex-end;align-items:center;gap:20px;font-size:13px}
.right .login{color:var(--mute)}
.right .login:hover{color:var(--ink)}

/* hero: a room drawn in dots */
.hero{position:relative;height:clamp(700px,calc(100vh - 88px),900px);overflow:hidden}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-text{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px 20px}
h1{font:600 var(--fs-h1)/1.04 var(--display);letter-spacing:-.03em;max-width:14ch}
.lede{margin-top:18px;font-size:var(--fs-lede);line-height:1.55;color:var(--mute);max-width:46ch}
.ctas{display:flex;gap:10px;margin-top:30px}
/* the prompt box: describe the edit, drop the clip */
.ask{position:relative;width:min(600px,100%);margin-top:32px;text-align:left;background:var(--paper-up);border-radius:18px;box-shadow:0 0 0 1px var(--line),0 24px 60px -34px rgba(11,11,12,.35),0 2px 6px -2px rgba(11,11,12,.06);transition:box-shadow var(--d-fast)}
.ask:focus-within{box-shadow:0 0 0 1px var(--line-2),0 28px 70px -34px rgba(11,11,12,.42),0 2px 6px -2px rgba(11,11,12,.06)}
.ask.drag{box-shadow:0 0 0 1.5px var(--ink),0 28px 70px -34px rgba(11,11,12,.42)}
.ask textarea{display:block;width:100%;min-height:76px;resize:none;border:0;background:none;padding:18px 20px 6px;font:400 15.5px/1.5 var(--text);color:var(--ink);outline:0}
.ask textarea::placeholder{color:var(--faint)}
.ask .row{display:flex;align-items:center;gap:8px;padding:8px 10px 10px 12px}
.ask .row .sp{flex:1}
.ask .pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;font:500 13px/1 var(--text);color:var(--ink-2);background:var(--wash);box-shadow:var(--ring);transition:background var(--d-fast)}
.ask .pill:hover{background:var(--wash-2)}
.ask .pill svg{width:14px;height:14px}
.ask .mono{font:400 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.ask .go{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--on-btn);transition:opacity var(--d-fast),transform var(--d-fast)}
.ask .go:hover{transform:translateY(-1px)}
.ask .go[disabled]{opacity:.28;pointer-events:none}
.ask .go svg{width:15px;height:15px}
.ask .clip{display:none;align-items:center;gap:10px;margin:0 12px;padding:8px;border-radius:12px;background:var(--wash)}
.ask.has .clip{display:flex}
.ask .clip video{width:30px;height:52px;border-radius:5px;object-fit:cover;background:#0B0B0C;flex:none}
.ask .clip b{display:block;font:500 13px/1.3 var(--text);max-width:34ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask .clip span{font:400 10.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--faint)}
.ask .clip button{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--mute)}
.ask .clip button:hover{background:var(--wash-2)}
.ask-note{min-height:20px;margin-top:12px;font-size:13px;color:var(--mute)}
.ask-note a{color:var(--ink);border-bottom:1px solid var(--line-2)}
.alt{margin-top:6px;font:400 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.alt a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.cue{position:absolute;z-index:2;left:50%;bottom:28px;width:1px;height:46px;background:linear-gradient(#BDBDB7,transparent)}

/* resolve: the dots gather into a frame of the edit (pinned) */
.resolve{position:relative;height:300vh}
.sticky{position:sticky;top:0;height:100vh;overflow:hidden}
#rcv{position:absolute;inset:0;width:100%;height:100%}
.rframe{position:absolute;left:50%;top:50%;border-radius:var(--r-card);overflow:hidden;opacity:0;box-shadow:var(--sh-frame);background:#1b1c22}
.rframe video{width:100%;height:100%;object-fit:cover}
.beats{position:absolute;left:max(24px,calc(50% - 465px));top:50%;width:250px;transform:translateY(-50%)}
.beat{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity}
.beat p{margin-top:8px;font-size:var(--fs-small);color:var(--mute);max-width:30ch}
.rside{position:absolute;right:max(24px,calc(50% - 465px));top:50%;transform:translateY(-50%);text-align:right;font-size:var(--fs-meta);color:var(--faint);font-variant-numeric:tabular-nums;line-height:2}
.rside{font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.rside b{font-weight:500;color:var(--ink-2)}
.prog{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);width:120px;height:1px;background:#DCDCD7}
.prog i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(0)}

/* edits carousel, rising over a soft mist that overlaps the pinned section */
.stories{position:relative;z-index:3;margin-top:-90px;padding:150px 0 110px}
.mist{position:absolute;left:0;right:0;top:-40px;height:420px;z-index:0;pointer-events:none;opacity:.6}
.mist svg{display:block;width:100%;height:100%}
.stories>.wrap,.stories>.rail{position:relative;z-index:2}
.rail{margin-top:30px;height:560px;overflow:hidden;overflow:clip;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.track{position:absolute;left:50%;top:0;height:100%;display:flex;align-items:center;gap:14px;will-change:transform;transition:transform var(--d-slow) var(--ease)}
.card{position:relative;flex:none;width:290px;aspect-ratio:9/16;border-radius:8px;overflow:hidden;background:#E8E8E4;scale:.93;translate:0 var(--py,0px);transition:scale var(--d-slow) var(--ease);cursor:pointer}
.card.on{scale:1;cursor:default}
.card video,.card .px{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .px{transition:opacity .9s}
.card video{opacity:0;transition:opacity .9s}
.card.on video.ready{opacity:1}
.card.on.vready .px{opacity:0}
.card::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:.5;transition:opacity var(--d-slow);pointer-events:none}
.card.on::after{opacity:0}
.card .shade{position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,var(--scrim));z-index:1}
.meta{position:absolute;left:18px;right:18px;bottom:18px;z-index:2;color:#fff}
.meta .tag{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.meta b{display:block;margin-top:8px;font:600 17px/1.25 var(--display);letter-spacing:-.01em;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.ctl{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.dots{display:flex;gap:6px}
.dots button{width:18px;height:2px;background:#D4D4CF;border-radius:2px;transition:background .3s,width .3s;position:relative}
.dots button::before{content:"";position:absolute;inset:-10px -2px}
.dots button.on{background:var(--ink);width:30px}
.arrows{display:flex;gap:6px}
.arrows button{width:32px;height:32px;border-radius:var(--r-ctl);box-shadow:var(--ring);display:grid;place-items:center;background:var(--paper)}
.arrows button:hover{background:var(--wash)}

/* how it works: a real sequence, so numbered */
.how{position:relative;z-index:4;padding:30px 0 130px}
.rows{margin-top:28px;border-top:1px solid var(--line);list-style:none}
.rows li{display:grid;grid-template-columns:44px 1fr auto;gap:0 16px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.rows .n{font:400 11px/1 var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.rows b{font:600 17px/1.35 var(--display);letter-spacing:-.01em}
.rows p{grid-column:2;font-size:var(--fs-small);color:var(--mute);margin-top:3px;max-width:58ch}
.rows .tag{grid-column:3;grid-row:1}

/* styles: a cut-out stack where every frame moves at its own speed */
.styles{position:relative;padding:40px 0 150px;overflow:hidden;overflow:clip}
.styles .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;margin-top:28px}
.fam{font-size:var(--fs-small);color:var(--mute);max-width:36ch}
.slist{list-style:none;margin-top:22px;border-top:1px solid var(--line)}
.slist button{width:100%;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px;text-align:left;padding:15px 0;border-bottom:1px solid var(--line);color:var(--mute);transition:color var(--d-fast)}
.slist button b{font:600 var(--fs-h3)/1.3 var(--display);letter-spacing:-.01em;color:inherit}
.slist button span{font-size:var(--fs-meta);color:var(--faint)}
.slist button[aria-pressed="true"],.slist button:hover{color:var(--ink)}
.slist button[aria-pressed="true"] span{color:var(--ink-2)}
.auto{margin-top:18px;font-size:var(--fs-small);color:var(--mute);max-width:40ch}
.auto b{font-weight:500;color:var(--ink)}
.stack{position:relative;height:620px}
.stack .f{position:absolute;border-radius:var(--r-card);overflow:hidden;background:#1b1c22;box-shadow:var(--sh-frame)}
.stack .f video,.stack .f img{width:100%;height:100%;object-fit:cover}
.stack .f-main{width:300px;aspect-ratio:9/16;left:50%;top:40px;margin-left:-150px;z-index:2}
.stack .f-back{width:210px;aspect-ratio:9/16;left:2%;top:0;z-index:1;opacity:.55;filter:saturate(.6)}
.stack .f-front{width:170px;aspect-ratio:9/16;right:0;top:300px;z-index:3;box-shadow:var(--sh-frame),0 0 0 6px var(--paper)}
.stack .f-main video{transition:opacity .5s;background:center/cover no-repeat}
.stack .cap{position:absolute;left:calc(50% - 150px);top:588px;z-index:3;font-size:var(--fs-meta);color:var(--faint);white-space:nowrap}

/* plans */
.plans{position:relative;padding:20px 0 130px}
.cards{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cards.cards-3{grid-template-columns:1fr 1fr 1fr}
.pc{background:var(--paper-up);border-radius:var(--r-card);box-shadow:var(--ring);padding:24px;display:flex;flex-direction:column}
.pc .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pc h3{font:600 19px/1.2 var(--display);letter-spacing:-.01em}
.pc .price{font:600 19px/1 var(--display);white-space:nowrap}
.pc .price span{font-size:var(--fs-meta);color:var(--mute);margin-left:3px}
.pc .for{font-size:var(--fs-small);color:var(--mute);margin-top:4px}
.pc ul{list-style:none;margin:18px 0 22px;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--ink-2);flex:1}
.pc li{padding:4px 0 4px 18px;position:relative}
.pc li::before{content:"";position:absolute;left:1px;top:13px;width:6px;height:1px;background:var(--ink-2)}
.pc .btn{width:100%;height:40px}
.note{margin-top:16px;font-size:var(--fs-meta);color:var(--faint)}

/* faq */
.faq{padding:0 0 130px}
.qa{margin-top:28px;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font:500 16.5px/1.35 var(--display);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:11px;height:11px;position:relative}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--ink-2);transition:transform var(--d-fast) var(--ease)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa p{padding:0 0 20px;font-size:var(--fs-small);color:var(--mute);max-width:62ch}

/* footer */
footer.foot{border-top:1px solid var(--line);padding:30px 0 44px;font-size:var(--fs-meta);color:var(--faint)}
footer.foot .wrap{display:grid;grid-template-columns:1fr auto;gap:18px 30px;align-items:center}
footer.foot .logo{font-size:16px}
footer.foot .logo .mk{width:30px}
footer.foot nav{display:flex;gap:22px}
footer.foot nav a:hover{color:var(--ink)}

@media (max-width:820px){
  .links,.right .login{display:none}
  nav.top .in{grid-template-columns:1fr auto;height:54px}
  .bar{font-size:11px}
  h1{font-size:var(--fs-h1-m);max-width:13ch}
  .hero{height:clamp(640px,calc(100vh - 84px),780px)}
  .hero-text{padding:0 22px 70px}
  .lede{font-size:var(--fs-body)}
  .ask textarea{min-height:64px;font-size:15px}
  .ask .mono{display:none}
  .resolve{height:170vh}
  .beats{left:22px;right:22px;width:auto;top:auto;bottom:64px;transform:none;height:110px}
  .beat{text-align:center;width:100%}
  .beat .sh{align-items:center}
  .beat p{margin:6px auto 0}
  .rside{display:none}
  .stories{margin-top:-40px;padding:110px 0 80px}
  .mist{height:280px}
  .rail{height:440px;-webkit-mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}
  .card{width:226px}
  .how{padding-bottom:90px}
  .rows li{grid-template-columns:30px 1fr}
  .rows .tag{display:none}
  .styles{padding-bottom:90px}
  .styles .grid{grid-template-columns:1fr;gap:28px}
  .stack{height:470px;order:-1}
  .stack .f-main{width:226px;margin-left:-113px;top:20px}
  .stack .f-back{width:150px;left:0}
  .stack .f-front{width:120px;top:250px}
  .stack .cap{top:428px;left:calc(50% - 113px)}
  .cards,.cards.cards-3{grid-template-columns:1fr}
  .plans,.faq{padding-bottom:90px}
  footer.foot .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.track,.card,.card::after,.card .px,.card video{transition:none}}

/* ---------- v4 (Daniel, 4 Nov): bigger header and type, new hero line, AI rotator, raw beside edit, own pages, 3D plans, MCP logos ---------- */
:root{--fs-meta:12.5px;--fs-small:15.5px;--fs-body:16px;--fs-lede:18px;--fs-h3:20px;--fs-h2:32px;--fs-h1:68px;--fs-h1-m:42px}
.label{font-size:11.5px}
.sh h2{margin-top:8px;letter-spacing:-.02em}

/* header */
.bar{height:34px;font-size:13px}
nav.top .in{height:76px}
nav.top .logo{font-size:24px;gap:12px}
nav.top .logo .mk{width:48px;height:auto}
.links{gap:40px;font-size:15.5px}
.links a[aria-current]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink);padding-bottom:3px}
.right{gap:24px;font-size:15.5px}
.right .btn{height:42px;padding:0 22px;font-size:15px;border-radius:9px}

/* hero */
.hero{height:clamp(760px,calc(100vh - 110px),960px)}
h1{max-width:15ch;line-height:1.02;letter-spacing:-.035em}
.lede{margin-top:20px;max-width:48ch}
.ask{width:min(720px,100%);margin-top:38px;border-radius:22px}
.ask textarea{min-height:100px;padding:24px 26px 8px;font-size:17px}
.ask .row{gap:10px;padding:10px 12px 12px 16px}
.ask .pill{height:38px;padding:0 15px;font-size:14.5px}
.ask .pill svg{width:15px;height:15px}
.ask .mono{font-size:11.5px}
.ask .go{width:44px;height:44px}
.ask .go svg{width:17px;height:17px}
.ask-note{font-size:14px}
.alt{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .34em;font:400 16.5px/1.5 var(--text);letter-spacing:0;text-transform:none;color:var(--mute)}
.alt a.rot{border:0}
.rot{position:relative;display:inline-block;height:1.5em;vertical-align:bottom;color:var(--ink);font-weight:500;transition:width .45s var(--ease)}
.rot .w{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.32em;white-space:nowrap;line-height:1.5em;opacity:0;transform:translateY(.75em);filter:blur(4px)}
.rot .w.on{opacity:1;transform:none;filter:none;transition:opacity .42s var(--ease),transform .42s var(--ease),filter .42s var(--ease)}
.rot .w.out{opacity:0;transform:translateY(-.75em);filter:blur(4px);transition:opacity .36s var(--ease),transform .36s var(--ease),filter .36s var(--ease)}
.rot::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--line-2)}
svg.ai{width:1em;height:1em;fill:currentColor;flex:none}

/* demo: the raw take floating beside the edit */
.rframe{overflow:visible}
.rframe video{border-radius:var(--r-card)}
.rframe .etag,.rraw .tag{position:absolute;z-index:3;top:12px;left:12px;background:rgba(253,253,251,.9);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.12)}
.rframe .etag{background:var(--ink);color:var(--on-btn)}
.rraw{position:absolute;z-index:4;opacity:0;pointer-events:none;transform:translateX(var(--rx,0px))}
.rraw .rin{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#1b1c22;transform:rotate(4deg);
  box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--line),0 40px 80px -30px rgba(11,11,12,.55),0 12px 24px -12px rgba(11,11,12,.3);animation:rawfloat 6s ease-in-out infinite}
.rraw video{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.rraw .tag{top:10px;left:10px}
@keyframes rawfloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -12px;rotate:-1.2deg}}

/* section text a step bigger */
.beat p{font-size:15.5px;max-width:32ch}
.beats{width:280px}
.rside{font-size:12px}
.meta b{font-size:19px}
.rows li{padding:24px 0}
.rows b{font-size:20px}
.rows p{margin-top:5px}
.rows .n{font-size:12px}
.slist button{padding:18px 0}
.slist button b{font-size:21px}
.qa summary{padding:21px 0;font-size:19px}
.note{font-size:13.5px}

/* plans: big 3D cards in the ribbon's ink and ivory */
.cards{margin-top:40px;gap:26px;perspective:1600px}
.pc{position:relative;padding:34px 30px 30px;min-height:520px;border-radius:20px;transform-style:preserve-3d;
  background:linear-gradient(165deg,#FFFFFF 0%,#FAFAF7 55%,#F1F1EC 100%);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px #E4E4DF,0 1px 0 #DCDCD6,0 2px 0 #D6D6D0,0 3px 0 #D0D0CA,0 4px 0 #CACAC4,0 5px 0 #C4C4BE,0 6px 0 #BEBEB8,0 40px 70px -34px rgba(11,11,12,.42),0 18px 30px -22px rgba(11,11,12,.22);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);will-change:transform}
.pc::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 70% at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.75),transparent 55%);opacity:.9;mix-blend-mode:soft-light}
.pc>*{transform:translateZ(26px)}
.pc .top{flex-direction:column;align-items:flex-start;gap:14px}
.pc h3{font-size:22px}
.pc .price{font-size:52px;letter-spacing:-.035em;line-height:1}
.pc .price span{font:400 15px/1 var(--text);letter-spacing:0;margin-left:5px}
.pc .for{margin-top:12px;font-size:16px}
.pc ul{margin:24px 0 28px;padding-top:20px;font-size:15.5px}
.pc li{padding:6px 0 6px 22px}
.pc li::before{top:17px;width:8px}
.pc .btn{height:50px;font-size:15.5px;border-radius:12px;transform:translateZ(40px)}
.pc-ink{color:var(--on-btn);background:linear-gradient(165deg,#4A4A47 0%,#1C1C1D 38%,#0B0B0C 70%,#000 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px #000,0 1px 0 #2a2a28,0 2px 0 #242422,0 3px 0 #1e1e1c,0 4px 0 #181817,0 5px 0 #121211,0 6px 0 #0c0c0b,0 50px 80px -34px rgba(11,11,12,.6),0 20px 34px -22px rgba(11,11,12,.4)}
.pc-ink::before{background:radial-gradient(120% 70% at var(--gx,30%) var(--gy,0%),rgba(255,255,255,.28),transparent 55%);mix-blend-mode:screen;opacity:.8}
.pc-ink .price span,.pc-ink .for{color:#B9B9B4}
.pc-ink ul{color:#E8E8E4;border-top-color:rgba(255,255,255,.14)}
.pc-ink li::before{background:#E8E8E4}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{background:#fff}
.pc .pop{position:absolute;top:22px;right:22px;font:400 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.12);color:#E8E8E4;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.pc .mini{display:flex;gap:10px;margin-top:14px;color:var(--ink-2)}
.pc .mini svg.ai{width:18px;height:18px;opacity:.85}
@media (hover:hover){.pc:hover{box-shadow:inset 0 1px 0 #fff,0 0 0 1px #E0E0DB,0 1px 0 #DCDCD6,0 2px 0 #D6D6D0,0 3px 0 #D0D0CA,0 4px 0 #CACAC4,0 5px 0 #C4C4BE,0 6px 0 #BEBEB8,0 60px 90px -36px rgba(11,11,12,.5),0 24px 40px -24px rgba(11,11,12,.28)}}

/* works with: Claude, ChatGPT, Gemini, Perplexity, Grok */
.mcp{margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px 48px;align-items:center;padding:34px 34px;border-radius:20px;background:var(--wash);box-shadow:var(--ring)}
.mcp h3{margin-top:8px;font:600 26px/1.2 var(--display);letter-spacing:-.02em}
.mcp p{margin-top:8px;font-size:15.5px;color:var(--mute);max-width:46ch}
.ailogos{list-style:none;display:flex;flex-wrap:wrap;gap:12px}
.ailogos li{display:flex;flex-direction:column;align-items:center;gap:9px;width:92px;padding:16px 6px 12px;border-radius:14px;background:var(--paper-up);
  box-shadow:0 0 0 1px var(--line),0 1px 0 #DCDCD6,0 2px 0 #D2D2CC,0 3px 0 #C8C8C2,0 16px 26px -18px rgba(11,11,12,.35);color:var(--ink);font:500 13px/1 var(--text);transition:transform .35s var(--ease)}
.ailogos li:hover{transform:translateY(-3px)}
.ailogos svg.ai{width:28px;height:28px}

/* the pages each header link opens */
.phead{padding:110px 0 34px;text-align:left}
.phead h1{margin-top:10px;max-width:18ch;font-size:clamp(42px,6vw,64px)}
.phead .lede{max-width:52ch}
.phead + .stories{margin-top:0;padding-top:40px}
.phead + .resolve{margin-top:0}
.phead + .styles,.phead + .plans{padding-top:10px}
.phead + .plans .cards{margin-top:16px}
.pcta{padding:40px 0 120px}
.pcta .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:44px;border-radius:20px;background:var(--wash);box-shadow:var(--ring)}
.pcta h2{font:600 var(--fs-h2)/1.15 var(--display);letter-spacing:-.02em}
.pcta p{color:var(--mute)}
.pcta .btn{height:46px;padding:0 24px;font-size:15px;border-radius:11px;margin-top:6px}

@media (max-width:820px){
  nav.top .in{height:62px}
  nav.top .logo{font-size:21px}
  nav.top .logo .mk{width:40px}
  .right .btn{height:38px;padding:0 16px;font-size:14px}
  .alt{font-size:15px}
  .ask textarea{min-height:76px;padding:20px 20px 6px;font-size:16px}
  .rraw .rin{box-shadow:0 0 0 3px var(--paper),0 24px 40px -20px rgba(11,11,12,.55)}
  .rraw .tag,.rframe .etag{font-size:9px;top:8px;left:8px}
  .cards{gap:22px}
  .pc{min-height:0}
  .pc .price{font-size:44px}
  .mcp{grid-template-columns:1fr;padding:26px 22px}
  .ailogos{gap:8px}
  .ailogos li{width:calc((100% - 32px)/5);padding:12px 2px 10px;font-size:11px}
  .ailogos svg.ai{width:22px;height:22px}
  .phead{padding:64px 0 20px}
  .pcta .wrap{padding:30px 24px}
}
@media (prefers-reduced-motion:reduce){.rraw .rin{animation:none}.pc{transition:none}}
h1{max-width:17ch}
.ask .pill{white-space:nowrap}
.plans .wrap{max-width:1120px}
.phead + .stories > .wrap.sh{display:none}
.phead + .stories .rail{margin-top:0}
@media (max-width:820px){h1{max-width:13ch}.ask .pill{padding:0 12px;font-size:13.5px}}
/* founder */
.founder{position:relative;padding:40px 0 130px}
.fgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.fimg{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#1b1c22;box-shadow:var(--sh-frame),0 0 0 1px var(--line)}
.fimg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.fimg .tag{position:absolute;left:14px;bottom:14px;background:rgba(253,253,251,.92);color:var(--ink)}
.ftext p{margin-top:16px;font-size:17px;line-height:1.65;color:var(--ink-2);max-width:54ch}
.ftext .sh+p{margin-top:22px}
.fstats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}
.fstats li{padding:18px 16px;border-radius:14px;background:var(--paper-up);box-shadow:0 0 0 1px var(--line),0 1px 0 #DCDCD6,0 2px 0 #D2D2CC,0 14px 24px -18px rgba(11,11,12,.3)}
.fstats b{display:block;font:600 30px/1 var(--display);letter-spacing:-.03em}
.fstats span{display:block;margin-top:8px;font-size:13.5px;line-height:1.4;color:var(--mute)}
.fsig{display:flex;gap:14px;align-items:baseline;margin-top:26px!important;font-size:15px!important}
.fsig a{font-weight:500;color:var(--ink);border-bottom:1px solid var(--line-2)}
.fsig span{color:var(--faint)}
.phead + .founder{padding-top:10px}
@media (max-width:820px){.fgrid{grid-template-columns:1fr;gap:28px}.fimg{aspect-ratio:4/4.4}.fstats{grid-template-columns:1fr 1fr 1fr;gap:8px}.fstats li{padding:14px 10px}.fstats b{font-size:22px}.fstats span{font-size:12px}.ftext p{font-size:16px}}

/* about: the editor behind it */
.about{position:relative;padding:20px 0 130px}
.ab-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;margin-top:30px;align-items:start}
.ab-copy p{font-size:var(--fs-small);color:var(--mute);max-width:52ch;margin-top:14px}
.ab-copy .ab-lede{margin-top:0;font:500 21px/1.45 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ab-stats{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ab-stats li{padding:22px 20px;border-radius:16px;background:var(--paper-up);box-shadow:0 0 0 1px var(--line),0 1px 0 #DCDCD6,0 2px 0 #D2D2CC,0 3px 0 #C8C8C2,0 22px 36px -24px rgba(11,11,12,.35)}
.ab-stats b{display:block;font:600 34px/1 var(--display);letter-spacing:-.03em}
.ab-stats span{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:var(--mute)}
.phead + .about{padding-top:10px}
.phead + .about > .wrap > .sh{display:none}
@media (max-width:820px){.ab-grid{grid-template-columns:1fr;gap:30px}.ab-copy .ab-lede{font-size:19px}.ab-stats b{font-size:28px}.about{padding-bottom:90px}}