/* c0vibe.app front page: the hero and the card that is the form. */
  /* ───────── HERO ───────── */
  .hero { position: relative; display: grid; gap: 40px; padding-block: calc(var(--hdr) + 150px) 96px; align-items: start; grid-template-areas: "t" "c" "r"; }
  .hero > h1 { grid-area: t; } .hero-copy { grid-area: c; } .hero .right { grid-area: r; }
  /* narrow: the column may shrink below the card; on phones the card keeps a 440px layout and card.js zooms it to the column (--cz) */
  @media (max-width: 979px) { .hero { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 559px) { .card-wrap { width: 440px; } }
  /* the card fills the phone without overshooting it: card.js sets --cz from BOTH the column width and
     the space left under the header, and the pane snaps to the top of the card as you scroll past it */
  /* phones scroll natively: no snapping and no smooth-behaviour override. Both were tried on 2026-09-18 and made
     scrolling feel slow and sticky, most of all across the card (founder). What stays is cheap paint:
     the card's shadows shrink (a 120px blur repainted under a moving finger is the expensive part), and the
     sections below the hero are skipped by the renderer until they come near the screen. */
  @media (max-width: 979px) {
    .card-wrap .pcard, .card-wrap:hover .pcard { box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 26px 44px -26px rgba(0,0,0,.9), 0 0 0 1px color-mix(in srgb, var(--tint) 35%, transparent); transition: none; }
    .wrap > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 900px; }
  }
  /* the card width (founder: +20%, +20%, then -15%: 612 at 1400+, 563 at 980+, 661 at 1600+); the grid column and #builder read --card-w, the card itself is the 500px layout zoomed by --cz = --card-w / 500 */
  @media (min-width: 980px) { :root { --card-w: 563px; --cz: 1.125; } .hero { grid-template-columns: minmax(0, 1fr) minmax(380px, var(--card-w)); grid-template-areas: "t t" "c r"; gap: 34px 48px; padding-block: calc(var(--hdr) + 150px) 140px; } .hero .right { padding-top: 44px; } .hero.explaining .right { padding-top: 12px; } }
  @media (min-width: 1400px) { :root { --card-w: 612px; --cz: 1.224; } .hero { grid-template-columns: minmax(0, 1fr) var(--card-w); gap: 34px 56px; } }
  /* B: the headline sits level with the halo's centre (header 56 + 63.5); the copy column clears the halo */
  /* the content edge is x 148 for every title (rail 70 + 62 + 16): 8px after the cutout arc's widest point (70 + 7 + 63.5 = 140.5), so the hero title can sit level with the ring and still line up with the section titles */
  @media (min-width: 1100px) { .hero { padding-top: calc(119.5px - var(--h1) * 0.505); } }

  /* the headline runs across the top row in TWO rows (founder, 00:15 and 01:05); the fit only ever steps in on odd widths */
  .hero h1 { font-size: var(--h1); line-height: 1; font-weight: 800; max-width: none; white-space: nowrap; text-wrap: nowrap; }
  .hero h1 .w { display: inline-block; transform-origin: left center; will-change: transform, opacity; }
  /* narrow: the title is set from the same variable the desktop uses, so the halo can be centred on it */
  @media (max-width: 979px) { :root { --h1: clamp(2.05rem, 7.6vw, 3.4rem); } .hero h1 { white-space: normal; text-wrap: balance; font-size: var(--h1); } }
  /* row 1 is the category at full size (centred on the ring), row 2 the claim at .56em */
  .hero h1 .row2 { display: block; font-size: .56em; font-weight: 700; letter-spacing: -.012em; line-height: 1.05; margin-top: .14em; }
  @media (max-width: 979px) { .hero h1 .row2 { font-size: .7em; } }
  .hero .lede { margin-top: 24px; max-width: 44ch; }
  .hero .cta { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  /* the call to action that points at the card: an arrow that keeps walking towards it until the handle is typed */
  .grabs { display: grid; gap: 22px; margin-top: 40px; justify-items: end; transition: opacity 1.1s var(--ease); }
  .hero.card-hover .grabs { opacity: 0; transition-duration: 1.6s; }
  @media (min-width: 980px) { .hero-copy { display: flex; flex-direction: column; } .hero:not(.explaining) .grabs { margin-top: clamp(72px, 12vh, 180px); align-self: flex-end; margin-right: 24px; } }
  .fillcta { display: inline-grid; gap: 4px; color: var(--vibe); text-decoration: none; }
  .fillcta.seat { color: var(--signal); margin-right: 19px; }
  .fillcta.seat small { max-width: 34ch; }
  @media (max-width: 979px) { .grabs { justify-items: start; } .fillcta.seat { margin-right: 0; } }
  .fillcta.seat .arr { animation: none; }
  .fillcta .big { display: inline-flex; align-items: center; gap: 12px; font: 700 1.3rem/1.15 var(--display); letter-spacing: -.01em; }
  .fillcta small { font: 400 .92rem var(--body); color: var(--dust); }
  .fillcta:hover .big { text-decoration: underline; text-underline-offset: 4px; }
  .fillcta .arr { display: inline-block; animation: arrowwalk 1.4s var(--ease) infinite; }
  @keyframes arrowwalk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
  @media (max-width: 979px) { .fillcta .arr { animation-name: arrowdown; } }
  @keyframes arrowdown { 0%, 100% { transform: rotate(90deg) translateX(0); } 50% { transform: rotate(90deg) translateX(7px); } }
  .fillcta.done { display: none; }
  .hero .fine { margin-top: 18px; color: var(--dust-2); font-size: .95rem; max-width: 44ch; }
  .hero .fine b { color: var(--dust); font-weight: 600; }
  .hero > :not(.net) { position: relative; z-index: 3; }
  .net { position: fixed; top: -18vh; left: -6vw; width: 150vw; height: 190vh; z-index: 0; pointer-events: none; will-change: transform; transform-origin: 45% 30%; } /* NET_SCROLL_V3 */
  .net canvas { width: 100%; height: 100%; display: block; }
  .node-label { position: fixed; z-index: 4; pointer-events: none; display: none; align-items: center; gap: 8px; transform: translate(-50%, -50%); }
  .node-label .av { width: 34px; height: 34px; border-radius: 50%; background: var(--tint) center/cover; box-shadow: 0 0 0 2px var(--tint), 0 0 24px color-mix(in srgb, var(--tint) 60%, transparent); display: grid; place-items: center; font: 700 .9rem var(--display); color: #0b0e12; overflow: hidden; }
  .node-label .av img { width: 100%; height: 100%; object-fit: cover; }
  .node-label .nm { font: 600 .85rem var(--body); color: var(--bone); background: rgba(12,18,30,.85); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2); white-space: nowrap; }
  .node-tip { position: fixed; z-index: 5; pointer-events: none; display: none; font: 500 .8rem var(--body); color: var(--bone); background: rgba(12,18,30,.92); padding: 6px 10px; border-radius: 10px 3px 10px 3px; border: 1px solid var(--line-2); white-space: nowrap; transform: translate(12px, -50%); }
  .node-tip small { display: block; color: var(--dust-2); font-size: .72rem; }

  /* ───────── right column: the card IS the form; a quiet deck of controls under it ───────── */
  .right { position: relative; }
  .panel[hidden] { display: none; }
  #builder { width: 100%; max-width: var(--card-w); perspective: 1500px; perspective-origin: 72% 40%; }
  .card-wrap { position: relative; zoom: var(--cz); transform: rotateY(calc(-11deg + var(--ry, 0deg))) rotateX(calc(2.5deg + var(--rx, 0deg))) translateY(var(--lift, 0px)); transform-origin: 62% 50%; transform-style: preserve-3d; transition: transform .7s var(--ease); }
  .card-wrap.live { transition: transform 0s; }
  /* founder: the card always glows the way it used to on hover, and glows more on hover (the tint follows the card colour) */
  .card-wrap .pcard { box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 70px 120px -44px rgba(0,0,0,.95), -30px 40px 80px -40px color-mix(in srgb, var(--tint) 45%, transparent), 0 0 0 1px color-mix(in srgb, var(--tint) 35%, transparent); transition: box-shadow .45s var(--ease); }
  .card-wrap:hover .pcard { box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 70px 120px -44px rgba(0,0,0,.95), -34px 44px 96px -36px color-mix(in srgb, var(--tint) 70%, transparent), 0 0 70px -6px color-mix(in srgb, var(--tint) 38%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--tint) 60%, transparent); }
  .card-wrap:focus-within { transform: rotateY(-3deg) rotateX(.6deg); }
  .card-wrap:has(.pcard.still) { zoom: 1; transform: none; }
  .card-wrap::after { content: ""; position: absolute; left: 6%; right: 4%; bottom: -30px; height: 46px; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.72), transparent 72%); filter: blur(12px); transform: translateZ(-80px); pointer-events: none; }
  .deck { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin-top: 18px; padding: 0 6px; }
  .deck .sw { display: flex; gap: 10px; align-items: center; }
  .deck .sw span { font: 500 9.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--dust-2); margin-right: 4px; }
  .tint { width: 18px; height: 18px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
  .tint[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--bone); transform: scale(1.1); }
  .optin { display: flex; align-items: center; gap: 8px; font: 400 .82rem var(--body); color: var(--dust); cursor: pointer; }
  .optin input { width: 16px; height: 16px; accent-color: var(--ember); margin: 0; }
  .deck-note { margin-top: 10px; padding: 0 6px; color: var(--dust-2); font-size: .74rem; line-height: 1.4; max-width: 60ch; }
  .deck-note b { color: var(--dust); font-weight: 600; }
  .deck .share { margin-left: auto; }
  /* the tray under the card: one plate, same tilt as the card, three tidy rows */
  .tray { position: absolute; top: -10px; right: 18px; margin: 0; width: auto; padding: 0; border: 0; background: transparent; box-shadow: none; z-index: 5; }
  .hero .right { position: relative; }
  @media (max-width: 979px) { .tray { position: static; margin-top: 14px; display: flex; justify-content: flex-end; } }
  .tray .deck { margin-top: 0; padding: 0; }
  .tray .deck.acts2 { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--line); }
  .tray .deck-note { margin-top: 0; padding: 0; max-width: none; }
  .tray .walllink { margin-top: 0; padding: 0; }
  .deck.acts2 { margin-top: 12px; justify-content: flex-end; gap: 10px; }
  .deck.acts2 .share { margin-left: 0; }
  .prog { margin-right: auto; display: inline-flex; align-items: center; gap: 10px; font: 500 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dust-2); }
  .prog i { width: 64px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; display: block; }
  .prog i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--tint), #ffd23f); transition: width .5s var(--ease); }
  .prog.done { color: var(--ok); }
  .btn.submit.ready { animation: readypulse 1.8s ease-out infinite; }
  @keyframes readypulse { 0% { box-shadow: 0 0 0 0 rgba(255,122,26,.55); } 100% { box-shadow: 0 0 0 14px rgba(255,122,26,0); } }
  .btn.submit:disabled { background: var(--ok); color: #06231a; cursor: default; }
  .btn.shake { animation: shake .45s var(--ease); }
  @keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
  .deck-note.warn { color: var(--vibe); } .deck-note.warn b { color: var(--vibe); }
  .deck-note.ok { color: var(--ok); } .deck-note.ok b { color: var(--ok); }
  .deck-note a { color: inherit; }
  /* the nudge on the empty handle line: a pill that keeps walking towards it, and the line itself breathes. Edit mode only: the walking examples show a mock handle instead */
  .pcard .name .hint { display: none; gap: 1px; text-align: left; max-width: 200px; color: #141a24; background: var(--tint); padding: 6px 10px 7px; border-radius: 12px 4px 12px 4px; animation: nudge 1.6s var(--ease) infinite; }
  .pcard .name .hint b { font: 700 10.5px/1.25 var(--body); letter-spacing: .02em; white-space: nowrap; }
  .pcard .name .hint small { font: 500 9px/1.25 var(--body); opacity: .85; white-space: nowrap; }
  @keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-6px); } }
  .pcard.filling:not(.has-handle):not(.in):not(.artfull) .name .hint { display: grid; }
  .pcard.filling:not(.has-handle) #fHandle:not(:focus) { animation: linepulse 1.6s ease-in-out infinite; }
  /* the tools a viber builds with: logo chips threaded on the diagonal, right of the face. The row starts at 24% of the width, where the seam is at 97.12% of the art's height,
     and turns with the seam (atan(12% of 59.54%) = 4.09deg); each chip turns back so the logos stand upright. Examples only: edit mode, drawing and the full hero hide them */
  .pcard .ctools { position: absolute; left: 24%; top: calc(97.12% + 4px); z-index: 4; display: flex; align-items: center; gap: 7px; transform-origin: 0 50%; transform: translateY(-50%) rotate(-4.09deg); transition: opacity .3s var(--ease); }
  .pcard .tchip { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--tint), 0 5px 12px -2px rgba(0,0,0,.45); transform: rotate(4.09deg); animation: chipin .5s cubic-bezier(.22,1.18,.36,1) calc(var(--i) * 70ms + 140ms) both; }
  .pcard .tchip img { width: 17px; height: 17px; display: block; }
  .pcard .tchip.fill img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .pcard .tchip::after { content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 7px); translate: -50% 4px; white-space: nowrap; font: 600 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #eef1f6; background: rgba(10,13,18,.92); border: 1px solid rgba(255,255,255,.14); padding: 4px 7px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), translate .2s var(--ease); }
  .pcard .tchip:hover::after { opacity: 1; translate: -50% 0; }
  @keyframes chipin { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
  .pcard.filling .ctools, .pcard.editing .ctools, .pcard.artfull .ctools { opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: reduce) { .pcard .tchip { animation: none; } }
  @keyframes linepulse { 0%, 100% { border-bottom-color: rgba(20,26,36,.34); background: transparent; } 50% { border-bottom-color: #08dff7; background: rgba(8,223,247,.14); } }
  .btn.sm { padding: 8px 14px; font-size: .85rem; }
  .pcard.still { animation: none; }
  /* the wall of vibers lives on its own page now (wall.html); the card saves itself to this browser for it */
  .walllink { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 6px; color: var(--dust); text-decoration: none; font-size: .86rem; }
  .walllink:hover { color: var(--bone); }
  .walllink i { width: 22px; height: 12px; border-radius: 3px 1px 3px 1px; background: linear-gradient(135deg, var(--tint), #05070d); box-shadow: 0 0 0 2px #eef1f6; transform: rotate(-6deg); }
  /* the share sheet: the card as a PNG, the post in the thread's own shape, one button to X */
  .sharesheet { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px 4px 14px 4px; background: rgba(10,13,18,.9); padding: 16px 18px 18px; display: grid; gap: 12px; }
  .sharesheet[hidden] { display: none; }
  .ss-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .95rem; }
  .ss-head button { background: transparent; border: 0; color: var(--dust); font: 500 .9rem var(--body); cursor: pointer; }
  .ss-head button:hover { color: var(--bone); }
  .ss-lede { color: var(--dust); font-size: .92rem; max-width: 52ch; }
  .ss-body { display: grid; gap: 14px; }
  .ss-img img { width: 100%; max-width: 260px; border-radius: 12px; background: #0b0e14; }
  .ss-text { display: grid; gap: 10px; align-content: start; }
  .ss-text textarea { font: 500 .95rem/1.45 var(--body); resize: vertical; min-height: 120px; }
  .ss-acts { display: flex; gap: 8px; flex-wrap: wrap; }
  .ss-acts .btn { padding: 10px 16px; font-size: .9rem; }
  .ss-text small { color: var(--dust-2); font-size: .8rem; }
  .explainer .logos { grid-template-columns: repeat(2, 1fr); }
  /* "How it works" opens under the same headline and the same copy (founder, 23:10: no hard switch): the panel row crossfades and takes the width */
  @media (min-width: 980px) { .hero { grid-template-rows: auto calc(var(--card-w) * 1.95); } }
  @media (min-width: 1600px) { :root { --card-w: 661px; --cz: 1.323; } .hero { gap: 40px 80px; } .hero .lede { font-size: 1.35rem; max-width: 46ch; } .hero .fine { max-width: 50ch; } }
  .panel { transform-origin: 30% 20%; }
  @media (min-width: 980px) {
    .explainer { padding: 26px 30px 30px; }
    .explainer .beat.on { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "h h" "a b" "c b"; column-gap: 44px; }
    .explainer .beat h3 { grid-area: h; font-size: clamp(1.8rem, 3vw, 2.6rem); max-width: 22ch; }
    #beat-link .netdiag { grid-area: b; align-self: start; }
    #beat-link > p { grid-area: a; font-size: 1.1rem; max-width: 52ch; }
    #beat-link .verbs2 { grid-area: c; }
    #beat-tools.on { grid-template-areas: "h h" "a b" "a c"; }
    #beat-tools .logos { grid-area: a; grid-template-columns: repeat(3, 1fr); align-content: start; }
    #beat-tools .crosslines { grid-area: b; align-self: start; }
    #beat-tools > p { grid-area: c; align-self: start; }
    #beat-link .netdiag { max-width: 560px; justify-self: center; }
  }
  /* explainer */
  /* the explainer card: the card's register at the card's size; the art half holds the network diagram or the nine wordmarks, the sheet the tabs and the rows */
  .xcard .xart { position: absolute; inset: 0; display: none; background: #05070d; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); cursor: default; }
  .xcard .xart.on { display: block; }
  .xcard .xart svg.netdiag { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .xcard .xart.tools.on { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 16px; align-content: center; padding: 30px 26px 52px; box-sizing: border-box; }
  .xcard .xart.tools img { width: 100%; height: auto; display: block; }
  .xcard .xtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
  .xcard .xtabs button { border: 1px solid rgba(20,26,36,.25); background: #eef1f6; color: #141a24; border-radius: 999px; padding: 5px 12px; font: 600 11px var(--body); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); }
  .xcard .xtabs button[aria-selected="true"] { background: #141a24; color: #eef1f6; border-color: #141a24; }
  .xcard .beat { display: none; gap: 6px; }
  .xcard .beat.on { display: grid; }
  .xcard .name { font-size: 20px; display: block !important; text-align: left; padding-left: 0 !important; }  /* the real card's name row keeps 104px for the avatar disc; the explainer has none */
  .xcard .tagline { margin: 2px 0 4px; }
  .xcard .rows b { white-space: normal; text-align: right; font-size: 12.5px; max-width: 62%; }
  .xcard .rows > div { padding: 6px 0; }
  .xcard .addp { text-align: center; padding: 10px 0 2px; }
  /* the old full-width explainer rules (item H) must not touch the card version */
  .pcard .xart:not(.on) { display: none !important; }
  .xcard .beat.on { grid-template-columns: 1fr !important; grid-template-areas: none !important; column-gap: 0 !important; }
  .xcard .beat > * { grid-area: auto !important; max-width: none !important; justify-self: stretch !important; }
  .xcard .beat > .tagline { font-size: 14px !important; }
  .explainer.panel { display: block; background: transparent; border: 0; padding: 0; box-shadow: none; }
  .explainer.panel[hidden] { display: none; }
  .explainer-old { display: grid; gap: 18px; background: linear-gradient(180deg, var(--raise-2), var(--raise)); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px; box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 60px -30px rgba(0,0,0,.8); }
  .explainer .tabs { display: flex; gap: 6px; padding: 4px; background: rgba(10,13,18,.7); border: 1px solid var(--line); border-radius: 999px; width: max-content; max-width: 100%; }
  .explainer .tabs button { border: 0; background: transparent; color: var(--dust); font: 600 .9rem var(--body); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease); }
  .explainer .tabs button[aria-selected="true"] { background: var(--bone); color: #0b0e12; }
  .beat { display: none; gap: 16px; }
  .beat.on { display: grid; }
  .beat h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.02em; }
  .beat p { color: var(--dust); }
  .netdiag { width: 100%; aspect-ratio: 16 / 9; display: block; }
  .netdiag .l { stroke: rgba(8,223,247,.35); stroke-width: 1; stroke-dasharray: 6 6; animation: dash 3s linear infinite; }
  .netdiag .ly { stroke: var(--ember); stroke-width: 1.4; stroke-dasharray: 8 6; animation: dash 2s linear infinite; }
  @keyframes dash { to { stroke-dashoffset: -28; } }
  .netdiag .n { fill: #eef1f4; }
  .netdiag .y { fill: var(--ember); }
  .netdiag .ring { fill: none; stroke: var(--ember); stroke-width: 1.5; opacity: .6; transform-origin: center; transform-box: fill-box; animation: ringpulse 2.4s ease-in-out infinite; }
  @keyframes ringpulse { 0%, 100% { transform: scale(1); opacity: .6 } 50% { transform: scale(1.25); opacity: .2 } }
  .beat .verbs2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .beat .verbs2 div { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-reg); background: rgba(10,13,18,.5); font-size: .95rem; color: var(--dust); opacity: 0; transform: translateY(8px); animation: rise .6s var(--ease) forwards; }
  .beat .verbs2 div b { display: block; color: var(--bone); font-family: var(--display); font-size: 1.15rem; }
  .beat .verbs2 div:nth-child(2) { animation-delay: .08s } .beat .verbs2 div:nth-child(3) { animation-delay: .16s } .beat .verbs2 div:nth-child(4) { animation-delay: .24s }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
  @media (min-width: 640px) { .logos { grid-template-columns: repeat(3, 1fr); } }
  .logo-tile { display: grid; gap: 8px; align-content: center; justify-items: start; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-reg); background: rgba(10,13,18,.55); opacity: 0; transform: translateY(8px); animation: rise .6s var(--ease) forwards; min-height: 84px; }
  .logo-tile:nth-child(2) { animation-delay: .06s } .logo-tile:nth-child(3) { animation-delay: .12s } .logo-tile:nth-child(4) { animation-delay: .18s } .logo-tile:nth-child(5) { animation-delay: .24s } .logo-tile:nth-child(6) { animation-delay: .3s } .logo-tile:nth-child(7) { animation-delay: .36s } .logo-tile:nth-child(8) { animation-delay: .42s } .logo-tile:nth-child(9) { animation-delay: .48s } .logo-tile:nth-child(10) { animation-delay: .54s }
  .logo-tile img { height: 22px; width: auto; }
  .logo-tile .wm { display: inline-flex; align-items: baseline; gap: 0; height: 22px; }
  .logo-tile .wm img { height: 22px; }
  .logo-tile .wm span { font: 800 1.4rem/1 var(--display); letter-spacing: -.02em; background: linear-gradient(90deg, #ea7b2b, #f6c538); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(1px); }
  .logo-tile small { color: var(--dust); font-size: .8rem; line-height: 1.3; }
  .logo-tile.addon { opacity: 0; }
  .crosslines { display: grid; gap: 8px; }
  .crosslines div { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--dust); }
  .crosslines i { width: 26px; height: 2px; background: linear-gradient(90deg, #08dff7, #ff7a1a); border-radius: 2px; flex: none; }
  .crosslines b { color: var(--bone); font-weight: 600; }

  /* ───────── form controls (the waitlist form) and the small shared bits ───────── */
  label { display: grid; gap: 6px; font-size: .85rem; color: var(--dust); }
  input, select, textarea { width: 100%; background: rgba(17,21,28,.9); color: var(--bone); border: 1px solid var(--line-2); border-radius: var(--r-field); padding: 10px 12px; font: 500 .95rem var(--body); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
  input::placeholder, textarea::placeholder { color: var(--dust-2); }
  input:focus, select:focus, textarea:focus { border-color: var(--signal); outline: none; box-shadow: 0 0 0 3px rgba(8,223,247,.12); }
  select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dust) 50%), linear-gradient(135deg, var(--dust) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
  .chipx { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-reg); font: 500 .85rem var(--body); color: var(--dust); transition: border-color .3s var(--ease), color .3s var(--ease); }
  .chipx.ask { border-color: var(--tint); color: var(--bone); }
  .vibe { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--dust); font: 500 .95rem var(--body); cursor: pointer; padding: 6px 8px; border-radius: 8px; }
  .vibe svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .35s var(--ease); }
  .vibe.on { color: var(--vibe); }
  .vibe.on svg { fill: var(--vibe); stroke: var(--vibe); transform: scale(1.15); }
  /* the net's strings tie to these (all four corners, every string from your node; the two far corners are reached behind the card, so those strings enter the right edge straight); zero-size, so their screen position includes the 3D tilt and the zoom; corners 8px in along the 26px radius */
  .pcard > .net-anchor { position: absolute; width: 0; height: 0; pointer-events: none; }
  .pcard > .net-anchor[data-c="tr"] { right: 8px; top: 8px; } .pcard > .net-anchor[data-c="tl"] { left: 8px; top: 8px; } .pcard > .net-anchor[data-c="bl"] { left: 8px; bottom: 8px; } .pcard > .net-anchor[data-c="br"] { right: 8px; bottom: 8px; }
  /* How it works: the art for the projects, arcade and seat beats (the diagonal seam covers the lower right, so the art sits a little high) */
  .xcard .xart .xa { position: absolute; inset: 0; box-sizing: border-box; display: grid; align-content: center; }
  .xcard .xart.proj .xa { grid-template-columns: repeat(3, 1fr); gap: 18px 26px; padding: 30px 70px 64px; justify-items: center; }
  .xcard .xart.proj .xa span { width: 62px; height: 62px; display: block; }
  .xcard .xart.proj .xa svg { width: 100%; height: 100%; display: block; border-radius: 14px; }
  .xcard .xart.arcade .xa { grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 26px 34px 60px; }
  .xcard .xart.arcade .xa span { aspect-ratio: 1; background: url(../arcade/medals.webp) calc(var(--mx) * 20%) calc(var(--my) * 50%) / 600% 300% no-repeat; }
  .xcard .xart.seat .xa { grid-template-columns: repeat(50, 1fr); gap: 2px; padding: 36px 30px 70px; }
  .xcard .xart.seat .xa i { aspect-ratio: 1; border-radius: 1px; background: rgba(255,255,255,.08); }

  /* ── mobile order (founder, 2026-09-18). The copy column and the CTA pair dissolve so every piece is
     its own row and can be ordered. Order A is the founder's: the card sits BETWEEN the two calls to
     action. ?m=b|c|d on the address swaps in an order to compare; nothing else changes. ── */
  @media (max-width: 979px) {
    .hero { display: flex; flex-direction: column; gap: 18px; padding-block: calc(var(--hdr) + 30px) 64px; }
    /* sidebar shown: the SAME lockup as the wide page. The first title line is centred on the ring
       (header + ring centre, minus half a line), the title starts 8px past the arc's widest point, and the
       title block reaches below the cutout so the copy under it clears the arc. All from the frame's variables. */
    body.sb-open { --h1: clamp(1.28rem, 5.5vw, 2.5rem); }
    body.sb-open .hero { padding-top: calc(var(--hdr) + var(--c0x-sidebar-cutout-mask-center-y) - var(--h1) * 0.505); }
    body.sb-open .hero > h1 {
      padding-left: calc(var(--c0x-sidebar-cutout-center-x) + var(--c0x-sidebar-cutout-mask-radius) + 7px - var(--c0x-sidebar-cutout-paint-width) - 9px);
      min-height: calc(var(--c0x-sidebar-cutout-bottom) + 8px - var(--c0x-sidebar-cutout-mask-center-y) + var(--h1) * 0.505);
    }
    body.sb-open .hero > h1 .row2 { font-size: max(.6em, 13.5px); margin-top: .3em; }
    /* the column is narrower beside the rail: the copy steps down one size so it keeps its measure */
    body.sb-open .hero .lede { font-size: 1.04rem; line-height: 1.5; }
    body.sb-open .hero .fillcta .big { font-size: 1.22rem; }
    @media (max-width: 380px) { body.sb-open .hero .fillcta .big { font-size: 1.04rem; gap: 8px; } body.sb-open .hero .lede { font-size: 1rem; } }
    /* narrow screens: the card is FLAT, outside any 3D scene. A level card left inside preserve-3d put its layers
       (avatar, the handle toast, the art) in one plane, where they fought for depth on every repaint: a flicker once a
       second with the ticker, and black triangles (founder, 2026-09-18). Flat is also the cheapest thing to scroll. */
    #builder { perspective: none; margin-inline: auto; }
    .card-wrap, .card-wrap.live, .card-wrap:focus-within { transform: none; transform-style: flat; transition: none; }
    .card-wrap::after { display: none; }
    .card-wrap { margin-inline: auto; }
    .hero-copy, .grabs { display: contents; }
    /* a flex item will not shrink below its content: the 440px card layout would push the page sideways */
    .hero > *, .hero .right { min-width: 0; max-width: 100%; }
    #builder { min-width: 0; } /* keeps its own max-width (the card width), so margin auto can centre it on tablets */
    .hero .right { display: grid; justify-items: center; }
    .hero > h1 { order: 1; }
    .hero .lede { order: 2; }
    .hero #fillCta { order: 3; }
    .hero .right { order: 4; }
    .hero .fillcta.seat { order: 5; }
    .hero .seats { order: 6; }
    .hero .cta { order: 7; }
    .hero .fine { order: 8; }
    body[data-m="b"] .hero .right { order: 2; }   /* title, card, then the words */
    body[data-m="b"] .hero .lede { order: 3; }
    body[data-m="c"] .hero .right { order: 3; }   /* title, subtitle, card */
    body[data-m="c"] .hero #fillCta { order: 4; }
    body[data-m="d"] .hero #fillCta { order: 2; } /* title, call, card, subtitle */
    body[data-m="d"] .hero .right { order: 3; }
    body[data-m="d"] .hero .lede { order: 4; }
    .hero .fillcta { margin: 0; width: 100%; }
    /* the card and the seat map take every point the phone has (founder, 2026-09-18): they bleed past the text column
       to 6px from the screen edge, and to 4px from the rail while it is shown. The seat panel also drops the wide
       page's cap of column minus 72, which cost a quarter of a phone's width. */
    .hero { --bleed-l: 10px; --bleed-r: 10px; }
    body.sb-open .hero { --bleed-l: 5px; }
    .hero .right, .hero .seats { width: auto; max-width: none; align-self: stretch; margin: 0 calc(-1 * var(--bleed-r)) 0 calc(-1 * var(--bleed-l)); }
    .hero .seats { padding: 10px 10px 12px; }
    .hero .seats .seatmap { max-width: none; gap: 2px; }
  }