/* ============================================================================
   TextPCB sub-page styles — CANONICAL (sub.css)
   History: sub-v2.css, sub-v3.css and sub-original-v4.css were superseded by
   this file and have been deleted (rollback via git). Portrait fit: the stage
   top-aligns; the close button lives in-flow at the bottom of the page.
   ========================================================================== */
/* TextPCB sub-pages — shared styles (matches index.html) */
:root { --bg: #010b14; --trace: #2dd4bf; --trace-hi: #67e8f9; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); }
body { overflow-x: hidden; font-family: system-ui, sans-serif;
  touch-action: manipulation;   /* no browser double-tap zoom / 300ms tap delay */ }

/* ===== SCROLL-ASSEMBLY SCENE ===== */
/* 252vh = 100vh pinned scene + 80vh assembly + 72vh hold (assembled page on
   display), then the reading body. Zoom is user-owned (double-tap / pinch). */
.scene-wrap { position: relative; height: 198vh; background: var(--bg); z-index: 1; }   /* 100vh pin + 80vh assembly + 10% hold — matches the main page */
.scene {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
  background: var(--bg);
  touch-action: pan-y;   /* vertical scroll stays native; double-tap/pinch belong to the poster */
}
.stage {
  position: relative; line-height: 0;
  aspect-ratio: 864 / 1536;
  height: min(100vh, calc(100vw * 1536 / 864));
  height: min(100dvh, calc(100vw * 1536 / 864));
  container-type: inline-size;
  transform-origin: 50% 50%;
}
#boardCanvas { display: block; width: 100%; height: 100%; }
/* DOM overlays ride the canvas camera (JS sets --camtf on the stage each
   frame + per-element transform-origin so every overlay scales about the
   STAGE center, exactly like the old whole-stage CSS zoom) */
.stage-traces, .art-links { transform: var(--camtf, none); }

/* Scroll cue — visible only before assembly starts */
.cue {
  position: absolute; left: 50%; bottom: 6.5vh; transform: translateX(-50%);
  color: var(--trace); font-size: 11px; letter-spacing: .35em;
  text-transform: uppercase; opacity: .85; pointer-events: none;
  animation: cuePulse 1.8s ease-in-out infinite;
  font-family: ui-monospace, monospace; white-space: nowrap;
}
@keyframes cuePulse { 0%,100% { opacity:.35 } 50% { opacity:.9 } }


/* ===== Real HTML links over the poster's nav/footer zones ===== */
.art-links { position: absolute; display: flex; gap: 2.6cqw; z-index: 6; line-height: 1.2; }
.art-links a {
  color: #b9ccc8; text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600; font-size: 1.65cqw; letter-spacing: .18em;
  padding: .4em .15em; white-space: nowrap;
  transition: color .25s, text-shadow .25s;
}
.art-links a:hover, .art-links a:focus-visible {
  color: #8ffbf0; outline: none;
  text-shadow: 0 0 12px rgba(45,212,191,.95), 0 0 32px rgba(45,212,191,.5);
}
.art-links a.active { color: #8ffbf0; text-shadow: 0 0 10px rgba(45,212,191,.8); }
.art-links-top { left: 47%; top: 1.0%; }
/* second nav row: the legal trio, directly beneath the primary trio —
   matches the home page header exactly */
.art-links-sub { left: 47%; top: 3.35%; }

/* Peekaboo robots overlay (screen-space, above the zooming stage).
   dvh — NOT svh: the canvas box must equal the REAL device viewport so the
   robots lean in from the actual screen rim, exactly like the home page.
   (With svh the box stopped at the poster's edge on dynamic-chrome phones,
   which also vertically squashed the sprites.) */
#peekCanvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 40; }

/* ===== FULL TEXT DOCUMENT below the assembled poster =====
   Readable, selectable, accessible long-form body for every sub-page
   (same pattern the privacy page introduced). */
.page-doc{position:relative;z-index:1;background:var(--bg,#010b14);color:#b9ccc8;
  font-family:system-ui,-apple-system,sans-serif;padding:8vh max(20px,6vw) 10vh;}
.page-doc article{max-width:760px;margin:0 auto;line-height:1.65;font-size:15.5px;}
.page-doc h1{color:#e8f6f3;font-size:30px;margin:0 0 6px;letter-spacing:.01em;}
.page-doc .doc-meta{color:#7d9590;font-size:13px;margin:0 0 34px;font-family:ui-monospace,Menlo,monospace;letter-spacing:.06em;}
.page-doc h2{color:#8ffbf0;font-size:15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.18em;text-transform:uppercase;margin:38px 0 10px;padding-top:22px;
  border-top:1px solid rgba(45,212,191,.18);}
.page-doc p{margin:0 0 14px;}
.page-doc ul{margin:0 0 14px;padding-left:22px;}
.page-doc li{margin:0 0 8px;}
.page-doc strong{color:#dffcf4;font-weight:600;}
.page-doc a{color:#67e8f9;}

/* Editorial polish shared with the homepage — typography and content only. */
.page-doc{background:linear-gradient(180deg,#010b14 0%,#061821 50%,#010b14 100%);padding:clamp(60px,9vw,110px) max(20px,6vw) clamp(72px,10vw,124px);}
.page-doc article{max-width:820px;}
.page-doc h1{font-size:clamp(40px,6vw,60px);font-weight:750;line-height:1.06;letter-spacing:-.045em;margin-bottom:14px;}
.page-doc .doc-meta{font-size:11px;letter-spacing:.11em;color:#94b6b6;margin-bottom:44px;}
.page-doc h2{font-size:12px;letter-spacing:.16em;margin:46px 0 16px;padding-top:27px;border-top-color:rgba(103,232,249,.22);}
.page-doc p{font-size:clamp(16px,1.5vw,17.5px);line-height:1.76;margin-bottom:17px;color:#c5d8d8;}
.page-doc li{font-size:clamp(16px,1.5vw,17.5px);line-height:1.7;color:#c5d8d8;}
.page-doc strong{color:#edfdfa;}
.page-doc a{text-decoration-color:rgba(103,232,249,.48);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s;}
.page-doc a:hover,.page-doc a:focus-visible{color:#a6fff3;text-decoration-color:currentColor;}
@media(max-width:620px){.page-doc{padding:58px 22px 78px}.page-doc h1{font-size:40px}.page-doc h2{margin-top:38px;padding-top:22px}.page-doc p{font-size:16px;line-height:1.72}.page-doc .doc-meta{font-size:10px;line-height:1.6;letter-spacing:.065em;}}

@media print{.page-doc p,.page-doc li{color:#1a2b28;}}

/* ===== CLOSE BUTTON — in-flow at the very bottom of the page, in its own
   dock, so it never covers page content on any screen ===== */
.close-dock {
  position: fixed; z-index: 60;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, calc(14px + env(safe-area-inset-bottom)));
  display: flex; align-items: center; justify-content: flex-end;
  transform: translateX(var(--flyX, 160%)) translateY(var(--hop, 0px));  /* robot courier: engine drives --flyX/--hop */
  pointer-events: none;
}
.close-dock.up { pointer-events: auto; }
.close-btn {
  display: flex; align-items: center; gap: .55em;
  color: #b9ccc8; text-decoration: none;
  font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .22em; text-transform: uppercase;
  background: rgba(4, 22, 29, .78); border: 1px solid rgba(45,212,191,.45);
  border-radius: 999px; padding: 10px 16px 10px 14px;
  transition: color .25s, border-color .25s, box-shadow .25s, transform .15s;
}
.close-btn .x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid rgba(45,212,191,.65); color: #8ffbf0;
  font-size: 12px; line-height: 1; letter-spacing: 0;
}
.close-btn:hover, .close-btn:focus-visible {
  color: #e8fffb; border-color: #2dd4bf; outline: none;
  box-shadow: 0 0 14px rgba(45,212,191,.55), 0 0 40px rgba(45,212,191,.25);
  transform: scale(1.04);
}
.close-btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .cue { animation: none; }
}

/* ===== ACTIVE NAV DOT — small teal pad under the current page's link ===== */
.art-links a.active { position: relative; }
.art-links a.active::after {
  content: ''; position: absolute; left: 50%; bottom: -1px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: #2dd4bf; box-shadow: 0 0 6px rgba(45,212,191,.9);
}

/* ===== BACK-TO-TOP CHIP — appears once you're into the reading body ===== */
.top-chip {
  position: fixed; left: max(14px, env(safe-area-inset-left));
  bottom: max(14px, calc(14px + env(safe-area-inset-bottom))); z-index: 60;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(45,212,191,.4); background: rgba(1,11,20,.85);
  color: #8ffbf0; font: 600 11px ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em; backdrop-filter: blur(6px);
  transform: translateX(var(--flyX, -180%)) translateY(var(--hop, 0px)) scale(var(--hov, 1));  /* robot courier */
  pointer-events: none;
  transition: color .25s, border-color .25s, box-shadow .25s;
}
.top-chip.up { pointer-events: auto; }
.top-chip:hover, .top-chip:focus-visible {
  color: #e8fffb; border-color: #2dd4bf; outline: none;
  box-shadow: 0 0 14px rgba(45,212,191,.55), 0 0 40px rgba(45,212,191,.25);
  --hov: 1.04;
}
.top-chip:active { --hov: .97; }
.top-chip svg { width: 15px; height: 15px; stroke: #2dd4bf; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ===== DOC "LAST UPDATED" STAMP ===== */
.page-doc .doc-updated { margin-top: 44px; font-size: 12px; }

/* ===== PRINT — the readable body prints clean; the poster machinery hides ===== */
@media print {
  .scene-wrap, #peekCanvas, .close-dock, .cta-wrap, .top-chip { display: none !important; }
  body { background: #fff !important; }
  .page-doc { background: #fff; color: #1a2b28; padding: 0; }
  .page-doc h1 { color: #000; }
  .page-doc h2 { color: #0b7c6b; border-top-color: #ccc; }
  .page-doc strong { color: #000; }
  .page-doc a { color: #0b5e63; }
  .page-doc .doc-meta { color: #666; }
}

.waitlist-consent{display:flex!important;align-items:flex-start;gap:10px;margin:13px 0 0!important;font-size:13px!important;line-height:1.5}.waitlist-consent input{width:18px!important;height:18px;flex:0 0 18px;margin:1px 0 0;padding:0;accent-color:#2dd4bf}.waitlist-consent span{flex:1}.waitlist-consent a,.waitlist-collection-note a{color:#67e8f9;text-decoration:underline;text-underline-offset:3px}.waitlist-card .waitlist-collection-note{font-size:12px;line-height:1.5;margin:14px 0 0;color:#a3bcc0}.waitlist-modal{overflow-y:auto}.waitlist-card{max-height:calc(100dvh - 48px);overflow-y:auto;box-sizing:border-box}


/* Real TextPCB logo: no button styling. */
.home-logo-link{position:absolute;top:max(8px,env(safe-area-inset-top));left:max(8px,env(safe-area-inset-left));z-index:60;display:block;width:132px;line-height:0;border:0;padding:0;background:none;box-shadow:none;text-decoration:none}
.home-logo-link img{display:block;width:100%;height:auto}
.home-logo-link:focus-visible{outline:2px solid #67e8f9;outline-offset:3px}
@media(max-width:390px){.home-logo-link{width:110px}}
@media print{.home-logo-link{display:none!important}}