/* ── NAV BAR: THIS FILE IS THE REFERENCE ──
   The playtesting hub is four pages on TWO stylesheets: /playtesting/ and
   /pricing/ are generated onto playtesting-v7.css, while /guide/ and /testers/
   stay here because their prose predates the v7 markup (see
   docs/mockups/build-playtesting-site.py). The nav markup is identical on all
   four, so the bar only looked different because these rules had drifted: a
   38px wordmark against 24px, 15px bar padding against 8px, a 3px underline
   against 2px, and a larger .navcta. /testers/ is the agreed look, so the v7
   mockup was matched TO these values rather than the reverse. Change the bar
   here and change it in docs/mockups/playtesting-site-v7.html too, or the hub
   splits in half again. */
/* Loaded by relative path from the real site dir. Falls back silently. */
  @font-face {
    font-family: 'Google Sans Flex';
    src: url('/brand/GoogleSansFlex.woff2') format('woff2');
    font-weight: 300 800; font-style: normal; font-display: swap;
  }
  :root{
    /* v7 paper theme. --ink deliberately stays DARK: it is used as the
       foreground on yellow/sky/indigo accents in a dozen rules. Surfaces
       moved to --paper-*; --ink-2/-3 are background-only, so they follow. */
    --paper:#FFFFFF; --paper-2:#F6F5F8; --paper-3:#ECEAF0;
    --ink:#0E121B; --ink-2:#F6F5F8; --ink-3:#ECEAF0;
    --text:#0E121B; --muted:#3E4655; --faint:#6E7787; --dim:rgba(14,18,27,.5);
    --border:#D8D5DC; --border-2:#E9E7EC;
    --card:#F6F5F8;
    --indigo:#2438C9; --indigo-deep:#18246E; --indigo-soft:#EEF0FC;
    --blue:#2438C9; --sky:#7FCBDA; --green:#5CD393; --yellow:#FFCD17;
    --orange:#F55A00; --pink:#FF90E1; --red:#D93636;
    /* Text-safe variants. The brand colours are display colours: on white the
       h3s ran 1.5:1 (yellow) to 2.03:1 (pink) against a 4.5:1 AA floor, and
       "Rules issue" was effectively invisible on the testers page. Same hue,
       darkened only as far as AA needs, so the palette still reads as itself.
       Keep the originals for fills, rules and anything non-textual. */
    --green-ink:#367E58; --sky-ink:#4A7881; --pink-ink:#9E598C;
    --yellow-ink:#886D0B; --orange-ink:#C44800;
    --sans:'Google Sans Flex',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    /* Aliases for the v7 names. The grafted v7 bar rules use --mono, --rule
       and --rule-2; this file only ever defined --border/--border-2 and no
       mono stack, so `.crumb{font:700 11.5px var(--mono)}` was an INVALID
       font shorthand and the whole declaration was dropped -- which is why
       PLAYTESTING rendered at 16px body font on guide/ and testers/ and at
       11.5px everywhere else. Same for the mobile nav's border-top. */
    --mono:'SF Mono',Menlo,monospace;
    --rule:#D8D5DC; --rule-2:#E9E7EC;
    --notch:12px;
  }
  *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper); color:var(--text); font-family:var(--sans);
    min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.022;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  }
  ::selection{background:var(--yellow); color:var(--ink);}
  a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--indigo); outline-offset:3px;}
  .page{max-width:1080px; margin:0 auto; padding:0 26px; position:relative; z-index:2;}
  .notch{clip-path:polygon(var(--notch) 0,100% 0,100% calc(100% - var(--notch)),calc(100% - var(--notch)) 100%,0 100%,0 var(--notch));}
  .chev{display:inline-block; width:.8em; height:.8em; flex:none; background:currentColor;
    clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%);}

  /* ── Top bar ─────────────────────────────────────────────────────── */
  .topbar{position:fixed; top:0; left:0; right:0; z-index:60;
    background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-2);}
  .topbar-in{max-width:1080px; margin:0 auto; padding:13px 26px; display:flex; align-items:center; justify-content:space-between;}
  .brand{display:flex; align-items:baseline; gap:9px; text-decoration:none; color:var(--text); font-weight:800; font-size:1.15rem; letter-spacing:-.02em;}
  .brand em{font-style:normal; color:var(--indigo);}
  .brand .crumb{font-size:.8rem; font-weight:650; color:var(--faint); letter-spacing:.02em;}
  .topright{display:flex; align-items:center; gap:24px;}
  .topnav{display:flex; align-items:center; gap:22px;}
  .nav-link{color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:650; background:none; border:0; font-family:var(--sans); cursor:pointer; padding:0;}
  .nav-link:hover{color:var(--text);}
  .nav-link.on{color:var(--indigo); box-shadow:inset 0 -2px 0 var(--indigo);}
  .nav-cta{font-weight:800; font-size:.88rem; color:#fff; background:var(--indigo); padding:10px 18px; text-decoration:none; white-space:nowrap;
    clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:transform .15s ease;}
  .nav-cta:hover{transform:translate(-2px,-2px);}
  .nav-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:42px; height:38px; padding:0 10px; flex:none; background:none; border:1px solid var(--border); cursor:pointer;}
  .nav-burger span{display:block; height:2px; background:var(--ink);}

  /* ── Type ────────────────────────────────────────────────────────── */
  .kicker{display:flex; align-items:center; gap:10px; font-weight:700; font-size:.75rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:18px;}
  h1{font-size:clamp(2.5rem,6vw,4.2rem); font-weight:800; letter-spacing:-.02em; line-height:1.02;}
  h2{font-size:clamp(1.9rem,4.2vw,2.8rem); font-weight:800; letter-spacing:-.018em; line-height:1.05; max-width:760px;}
  h3{font-size:1.25rem; font-weight:800; letter-spacing:-.01em;}
  .lede{max-width:640px; font-size:1.1rem; font-weight:380; color:var(--muted); line-height:1.65; margin-top:16px;}
  .lede b{color:var(--text); font-weight:650;}
  p.body{font-size:1.02rem; font-weight:380; color:var(--muted); line-height:1.7; max-width:660px; margin-top:14px;}
  p.body b{color:var(--text); font-weight:650;}
  /* padding-TOP only, never the shorthand: these divs are `page section`,
     and `padding:96px 0 0` here silently zeroed .page's 26px side padding
     (same specificity, later in the file). Invisible on desktop, where the
     1080px container floats in a wider viewport — on phones the container
     IS the viewport and text sat on the screen edge (guide + testers). */
  .section{padding-top:96px;}
  .section.tight{padding-top:64px;}
  .hl{position:relative; display:inline-block; z-index:0;}
  .hl::after{content:''; position:absolute; left:-2%; right:-2%; bottom:.05em; height:.16em; background:var(--orange); z-index:-1;}

  /* ── Buttons ─────────────────────────────────────────────────────── */
  .cta{font-weight:800; font-size:1rem; padding:15px 26px; display:inline-flex; align-items:center; gap:10px;
    text-decoration:none; cursor:pointer; border:none; font-family:var(--sans);
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
    transition:transform .15s ease, filter .15s ease, border-color .2s ease, color .2s ease;}
  .cta.solid{background:var(--indigo); color:#fff; filter:drop-shadow(6px 6px 0 rgba(36,56,201,.22));}
  .cta.solid:hover{transform:translate(-2px,-2px); filter:drop-shadow(8px 8px 0 rgba(36,56,201,.3));}
  .cta.ghost{color:var(--text); border:2px solid var(--border); background:transparent;}
  .cta.ghost:hover{border-color:var(--sky); color:var(--sky);}
  .cta.small{font-size:.9rem; padding:11px 18px;}
  .ctas{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}

  /* ── Panels, notes, tables ───────────────────────────────────────── */
  .panel{background:var(--ink-2); border:1px solid var(--border-2); padding:24px 26px;}
  .panel + .panel{margin-top:14px;}
  .grid{display:grid; gap:16px; margin-top:34px;}
  .g2{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(3,1fr);}
  .g4{grid-template-columns:repeat(4,1fr);}
  .note{background:var(--card); border-left:4px solid var(--yellow); padding:16px 20px; margin-top:18px; font-size:.95rem; font-weight:380; color:var(--muted); line-height:1.62;}
  .note b{color:var(--text); font-weight:700;}
  .note.sky{border-left-color:var(--sky);}
  .note.green{border-left-color:var(--green);}
  .note.pink{border-left-color:var(--pink);}
  .caveat{color:var(--faint); font-size:.86rem; font-style:italic; margin-top:12px;}
  table{width:100%; border-collapse:collapse; font-size:.95rem; margin-top:6px;}
  th{text-align:left; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); padding:0 12px 10px 0; border-bottom:1px solid var(--border);}
  td{padding:13px 12px 13px 0; border-bottom:1px solid var(--border-2); color:var(--muted); font-weight:400; vertical-align:top;}
  tr:last-child td{border-bottom:0;}
  td.g{color:var(--text); font-weight:650;}
  .yes{color:var(--green); font-weight:700;}
  .no{color:var(--faint);}
  .n{color:var(--faint); font-size:.8rem; font-weight:400;}
  .tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}

  /* ── Screenshot placeholder. Convention from email-template.html. ── */
  .shot{background:var(--ink-3); border:2px dashed var(--border); padding:34px 20px; text-align:center; margin:20px 0;}
  .shot b{display:block; color:var(--yellow); font-size:.7rem; font-weight:800; letter-spacing:.2em; margin-bottom:8px;}
  .shot span{display:block; color:var(--muted); font-size:.92rem; line-height:1.55; max-width:520px; margin:0 auto;}
  .shot i{display:block; color:var(--faint); font-size:.78rem; font-style:normal; margin-top:7px;}
  .shot.tall{padding:70px 20px;}

  /* ── Badges ──────────────────────────────────────────────────────── */
  .badge{display:inline-flex; align-items:center; gap:7px; font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--border);}
  .badge.warn{color:#8A6A00; border-color:rgba(255,205,23,.6); background:rgba(255,205,23,.18);}
  .badge.live{color:#1B7F4B; border-color:rgba(27,127,75,.35); background:rgba(92,211,147,.14);}
  .badge.tier{color:var(--indigo); border-color:rgba(36,56,201,.3); background:var(--indigo-soft);}
  .stamp{position:fixed; right:12px; bottom:12px; background:var(--yellow); color:#0E121B; font-size:.65rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:7px 12px; z-index:99;}
  .pathbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 0 0; font-size:.78rem; color:var(--faint); letter-spacing:.04em;}
  .pathbar code{color:var(--sky); font-size:.86rem;}

  /* ── Step cards ──────────────────────────────────────────────────── */
  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
  .stepcard{background:var(--ink-2); border:1px solid var(--border-2); padding:26px 24px; position:relative;}
  .stepcard::after{content:''; position:absolute; top:0; left:0; width:44px; height:5px; background:var(--sc);}
  .stepcard .num{font-size:3.2rem; font-weight:800; line-height:1; color:transparent; -webkit-text-stroke:1.5px var(--sc);}
  .stepcard h3{margin-top:14px;}
  .stepcard p{font-size:.95rem; font-weight:380; color:var(--muted); line-height:1.6; margin-top:9px;}
  .stepcard p b{color:var(--text); font-weight:650;}

  /* ── Feature tokens (the coloured slabs from the homepage) ───────── */
  .tokens{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
  .token{--tc:var(--ink); background:var(--bg); color:var(--tc); padding:24px 22px; min-height:210px; display:flex; flex-direction:column;
    filter:drop-shadow(7px 7px 0 rgba(14,18,27,.14)); transition:transform .18s ease, filter .18s ease;
    clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);}
  .token:hover{transform:translate(-4px,-4px); filter:drop-shadow(11px 11px 0 rgba(14,18,27,.18));}
  .token.dark{--tc:#FFFFFF;}
  .token .tag{font-size:.66rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; opacity:.75;}
  .token h3{font-size:1.3rem; margin:auto 0 8px; padding-top:34px; line-height:1.12;}
  .token p{font-size:.9rem; font-weight:420; line-height:1.5; opacity:.85;}

  /* ── List with chevrons ──────────────────────────────────────────── */
  .chevlist{list-style:none; margin-top:10px;}
  .chevlist li{display:flex; gap:14px; align-items:flex-start; padding:14px 2px; border-top:1px solid var(--border-2);}
  .chevlist li:last-child{border-bottom:1px solid var(--border-2);}
  .chevlist .chev{margin-top:6px; color:var(--orange);}
  .chevlist b{color:var(--text); display:block; font-size:1rem; font-weight:750;}
  .chevlist span{font-size:.92rem; font-weight:380; color:var(--muted); line-height:1.55;}

  /* ── Guide: sticky ToC + numbered steps ──────────────────────────── */
  .guidewrap{display:grid; grid-template-columns:210px minmax(0,1fr); gap:44px;}
  .toc{position:sticky; top:118px; align-self:start;}
  .toclbl{display:block; font-size:.66rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); margin-bottom:12px;}
  .toc a{display:block; padding:8px 0 8px 13px; color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:550; border-left:2px solid var(--border);}
  .toc a:hover{color:var(--text);}
  /* The ACTIVE item was the least readable thing in the list at 1.83:1.
     Text takes the AA variant; the rule keeps the display colour, since
     a 2px border is not text. */
  .toc a.on{color:var(--sky-ink); border-left-color:var(--sky); font-weight:750;}
  /* Group labels inside the ToC mirror the .gphase separators in the body,
     so the list reads as four short menus instead of one ten-item column. */
  .tocgrp{display:block; font-size:.62rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:16px 0 5px;}
  .toclbl + .tocgrp{margin-top:0;}
  /* Phase separators: the guide's ten sections group into four phases. The
     accent square takes its colour from --pc (set inline per label). */
  .gphase{font-size:.68rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--faint); margin:56px 0 0; padding-bottom:10px; border-bottom:1px solid var(--border-2); display:flex; align-items:center; gap:10px;}
  .gphase::before{content:''; width:10px; height:10px; flex:0 0 10px; background:var(--pc, var(--yellow));}
  .gphase:first-child{margin-top:0;}
  /* Sections own the anchor + vertical rhythm now (the h2 is always the
     first child of its section, so .gh margins can't space siblings). */
  .gsec{scroll-margin-top:120px;}
  .gsec + .gsec{margin-top:44px;}
  .gphase + .gsec{margin-top:22px;}
  .gh{font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 14px;}
  .gstep{display:flex; gap:15px; margin-bottom:20px;}
  .gstep:last-child{margin-bottom:4px;}
  .gnum{width:30px; height:30px; flex:0 0 30px; background:var(--indigo-soft); border:1px solid var(--border); color:var(--indigo); font-weight:800; font-size:.85rem; display:flex; align-items:center; justify-content:center;}
  .gstep b{display:block; color:var(--text); font-weight:750; font-size:1rem;}
  .gstep span{display:block; color:var(--muted); font-size:.94rem; font-weight:380; line-height:1.6; margin-top:4px;}
  code.code{color:var(--sky); background:var(--card); padding:1px 6px; font-size:.9em;}
  @media(max-width:940px){
    .guidewrap{grid-template-columns:1fr; gap:0;}
    /* The wrapping chip-row ToC was a wall of ten links right under the
       hero. On small screens the collapsed section cards below ARE the
       table of contents, so the ToC goes away entirely. */
    .toc{display:none;}
    .gphase{margin:34px 0 12px; border-bottom:0; padding-bottom:0;}
    .gsec{scroll-margin-top:96px;}
    .gsec + .gsec, .gphase + .gsec{margin-top:0;}
    /* Collapsible section cards, same contract as the app guide at
       /guide/: JS adds .collapsible below this breakpoint and .collapsed
       to closed cards; without JS the page renders in full. */
    .gsec.collapsible{background:var(--paper); border:1px solid var(--border); padding:0 16px; margin-bottom:10px;}
    .gsec.collapsible > .gh{font-size:1.02rem; margin:0; padding:16px 0; display:flex; align-items:center; gap:10px; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none;}
    .gsec.collapsible > .gh::after{content:''; width:9px; height:9px; margin-left:auto; flex:0 0 9px; border-right:2px solid var(--faint); border-bottom:2px solid var(--faint); transform:rotate(45deg) translate(-2px,-2px); transition:transform .2s ease;}
    .gsec.collapsible:not(.collapsed) > .gh::after{transform:rotate(225deg) translate(-2px,-2px);}
    .gsec.collapsible.collapsed > :not(.gh){display:none;}
    .gsec.collapsible:not(.collapsed){padding-bottom:16px;}
    /* Inside a card the panel chrome doubles up — drop it and keep the text. */
    .gsec.collapsible .panel{background:transparent; border:0; padding:4px 0 0;}
    /* Breathing room the crowded pass was missing. */
    .gstep{gap:12px; margin-bottom:22px;}
    .note{padding:14px 16px; margin-top:16px;}
  }

  /* ── Pricing ─────────────────────────────────────────────────────── */
  .toggle{display:inline-flex; border:1px solid var(--border); margin-top:26px;}
  .toggle button{font-family:var(--sans); background:transparent; border:0; color:var(--muted); font-weight:750; font-size:.9rem; padding:11px 20px; cursor:pointer;}
  .toggle button.on{background:var(--indigo); color:#fff;}
  .toggle .save{font-size:.7rem; font-weight:800; letter-spacing:.08em; margin-left:7px; opacity:.8;}
  .plans{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:30px; align-items:stretch;}
  .plan{background:var(--ink-2); border:1px solid var(--border-2); padding:24px 22px; display:flex; flex-direction:column; position:relative;}
  .plan.feature{border-color:var(--indigo); background:var(--indigo); color:#fff;}
  .plan.feature .pname,.plan.feature .price{color:#fff;}
  .plan.feature .pfor,.plan.feature .alt,.plan.feature .price small{color:rgba(255,255,255,.72);}
  .plan.feature li{color:rgba(255,255,255,.92);}
  .plan.feature li b{color:#fff;}
  .plan.feature li::before{background:var(--yellow);}
  .plan.feature .pcta a.solid{background:#fff; color:var(--indigo);}
  .plan .flag{position:absolute; top:-1px; right:-1px; background:var(--yellow); color:var(--ink); font-size:.6rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; padding:5px 9px;}
  .plan .pname{font-size:1.15rem; font-weight:800; letter-spacing:-.01em;}
  .plan .pfor{font-size:.85rem; color:var(--faint); font-weight:400; line-height:1.5; margin-top:5px; min-height:42px;}
  .plan .price{font-size:2.1rem; font-weight:800; letter-spacing:-.02em; margin-top:14px; font-variant-numeric:tabular-nums;}
  .plan .price small{font-size:.85rem; font-weight:600; color:var(--faint); letter-spacing:0;}
  .plan .alt{font-size:.8rem; color:var(--faint); margin-top:4px; min-height:19px;}
  .plan ul{list-style:none; margin-top:18px; flex:1;}
  .plan li{font-size:.9rem; color:var(--muted); line-height:1.5; padding:7px 0 7px 20px; position:relative;}
  .plan li::before{content:''; position:absolute; left:0; top:.62em; width:9px; height:9px; background:var(--indigo);
    clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%);}
  .plan li b{color:var(--text); font-weight:700;}
  .plan .pcta{margin-top:20px;}
  .plan .pcta a{display:block; text-align:center; font-weight:800; font-size:.92rem; padding:12px; text-decoration:none;
    clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);}
  .plan .pcta a.solid{background:var(--indigo); color:#fff;}
  .plan .pcta a.out{border:2px solid var(--border); color:var(--text);}
  .bigline{margin-top:34px; background:var(--indigo); color:#fff; padding:26px 30px; font-size:clamp(1.15rem,2.6vw,1.6rem); font-weight:800; letter-spacing:-.01em; line-height:1.3;
    filter:drop-shadow(8px 8px 0 rgba(14,18,27,.16));
    clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);}
  .bigline span{display:block; font-size:.95rem; font-weight:500; margin-top:9px; opacity:.8; letter-spacing:0; line-height:1.55;}
  @media(max-width:940px){.plans{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:700px){.plans{grid-template-columns:1fr;}}

  /* ── Tester page bits ────────────────────────────────────────────── */
  .flagcard{background:var(--ink-2); border:1px solid var(--border-2); border-left:5px solid var(--pink); padding:26px 26px 24px;}
  .checkrow{display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--border-2);}
  .checkrow:last-of-type{border-bottom:0;}
  .box{width:19px; height:19px; flex:none; border:2px solid var(--faint); margin-top:2px; position:relative;}
  .box.tick{border-color:var(--green); background:var(--green);}
  .box.tick::after{content:'✓'; position:absolute; inset:0; color:var(--ink); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  .checkrow b{color:var(--text); font-weight:650; font-size:.96rem;}
  .checkrow span{display:block; color:var(--faint); font-size:.84rem; margin-top:2px;}
  .chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
  .chip{font-size:.8rem; font-weight:650; color:var(--muted); border:1px solid var(--border); padding:6px 12px;}
  .chip.on{color:#fff; background:var(--indigo); border-color:var(--indigo);}
  .tierstrip{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:26px;}
  .tierbox{background:var(--ink-2); border:1px solid var(--border-2); padding:16px 14px; text-align:center;}
  .tierbox .tn{font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);}
  .tierbox .tl{font-size:.98rem; font-weight:800; color:var(--text); margin-top:7px; line-height:1.2;}
  .tierbox .tq{font-size:.78rem; color:var(--sky); margin-top:5px;}
  @media(max-width:940px){.tierstrip{grid-template-columns:repeat(2,1fr);}}

  /* ── Join-page frame (the already-live page, shown in context) ───── */
  .joinframe{max-width:420px; margin:26px auto 0; background:#1E293B; border:1px solid #334155; border-radius:20px; padding:32px 24px; text-align:center;}
  .joinframe .jb{font-size:30px; font-weight:800; color:#01796F; letter-spacing:.5px;}
  .joinframe .jsoon{display:inline-block; margin-top:10px; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#01796F; background:rgba(1,121,111,.12); border:1px solid rgba(1,121,111,.35); border-radius:999px; padding:5px 12px;}
  .joinframe h3{font-size:20px; margin:18px 0 6px; color:#F1F5F9;}
  .joinframe p{color:#94A3B8; font-size:14px; line-height:1.55; margin:0 auto 18px; max-width:330px; font-weight:400;}
  .joinframe .jcode{display:inline-block; font-weight:700; font-size:28px; letter-spacing:3px; color:#F1F5F9; background:#0F1B33; border:1px solid #334155; border-radius:12px; padding:12px 22px; margin-bottom:22px;}
  .joinframe .jlbl{font-size:11px; letter-spacing:1.2px; text-transform:uppercase; color:#94A3B8; margin-bottom:8px;}
  .joinframe .jbtn{display:block; padding:14px; border-radius:12px; font-weight:600; font-size:14px; margin-bottom:11px; border:1px solid #01796F; background:#01796F; color:#fff;}
  .joinframe .jbtn.ghost{background:transparent; color:#01796F;}

  /* ── FAQ ─────────────────────────────────────────────────────────── */
  .faq{margin-top:34px; border-top:1px solid var(--border-2);}
  .faq details{border-bottom:1px solid var(--border-2);}
  .faq summary{cursor:pointer; padding:17px 2px; font-weight:700; font-size:1rem; color:var(--text); list-style:none; display:flex; justify-content:space-between; gap:16px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{content:'+'; color:var(--sky); font-weight:800;}
  .faq details[open] summary::after{content:'–';}
  .faq p{padding:0 2px 18px; font-size:.95rem; font-weight:380; color:var(--muted); line-height:1.65; max-width:700px;}

  /* ── Full-bleed close band ───────────────────────────────────────── */
  .band{margin-top:96px; padding:72px 0; position:relative; z-index:2;}
  .band.yellow{background:var(--yellow); color:var(--ink);}
  .band.yellow h2{color:var(--ink);}
  .band.yellow p{color:rgba(14,18,27,.78); font-size:1.05rem; font-weight:420; margin-top:14px; max-width:560px; line-height:1.6;}
  .band .btn-dark{display:inline-block; background:var(--ink); color:var(--yellow); font-weight:800; font-size:1rem; padding:15px 26px; text-decoration:none; margin-top:28px; margin-right:12px;
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);}
  .band .btn-outline{display:inline-block; border:2px solid var(--ink); color:var(--ink); font-weight:800; font-size:1rem; padding:13px 24px; text-decoration:none; margin-top:28px;}

  /* ── Footer ──────────────────────────────────────────────────────── */
  footer{background:var(--paper-2); position:relative; z-index:2; padding:48px 0 56px; border-top:1px solid var(--border-2); margin-top:96px;}
  footer .inner{max-width:1080px; margin:0 auto; padding:0 26px; display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
  footer .flinks{margin-left:auto; display:flex; gap:22px; font-size:.88rem; flex-wrap:wrap;}
  footer .flinks a{color:var(--faint); text-decoration:none; font-weight:500;}
  footer .flinks a:hover{color:var(--text);}
  footer .cr{max-width:1080px; margin:18px auto 0; padding:0 26px; font-size:.78rem; color:var(--faint);}

  .view{display:none; padding-top:104px;}
  .view.on{display:block;}

  /* ── Responsive ──────────────────────────────────────────────────── */
  @media(max-width:940px){
    .g4{grid-template-columns:repeat(2,1fr);}
    .g3,.g2{grid-template-columns:1fr;}
    .tokens{grid-template-columns:1fr 1fr;}
    .steps{grid-template-columns:1fr;}
  }
  @media(max-width:700px){
    .topnav{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
      background:var(--ink-2); border-bottom:1px solid var(--border-2); padding:6px 0 12px;}
    .topbar.open .topnav{display:flex;}
    .topnav .nav-link{padding:13px 26px; font-size:1rem; text-align:left;}
    .nav-burger{display:flex;}
    .brand .crumb{display:none;}
    .tokens{grid-template-columns:1fr;}
    h1{font-size:clamp(2.1rem,9vw,2.7rem);}
    h2{font-size:clamp(1.6rem,6.6vw,2rem);}
    .lede{font-size:1rem;}
    .section{padding-top:68px;}
    .band{margin-top:68px; padding:52px 0;}
    .ctas .cta{width:100%; justify-content:center;}
    .panel{padding:20px 18px;}
    footer .inner{flex-direction:column; align-items:flex-start; gap:16px;}
    footer .flinks{margin-left:0; flex-direction:column; gap:12px;}
  }
  @media(prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{transition-duration:.01ms !important;}
  }

  /* ── Guide screenshots ───────────────────────────────────────────── */
  /* NB: .shot is already the dashed "screenshot goes here" placeholder box
     above, so real guide images use .gshot to avoid colliding with it. */
  .gfig{margin:20px 0 26px; max-width:560px;}
  .gfig.wide{max-width:100%;}
  /* Cap by HEIGHT. These are phone captures (900x1957 for the first one), and
     width:100% in a 560px column made a single screenshot over three screens
     tall in a written guide. */
  .gshot{display:block; max-height:520px; width:auto; max-width:100%; height:auto;
    border:1px solid var(--border); background:#0E121B; border-radius:10px;}
  .gfig:has(.gshot){max-width:none;}
  .gfig figcaption{margin-top:9px; font-size:.86rem; line-height:1.55; color:var(--faint);}
  .gfig figcaption b{color:var(--muted); font-weight:650;}


  /* ── v7 chrome, grafted so guide/testers match the ported pages ──
     Only the header and footer move; the body prose keeps its own classes.
     .crumb here is v7's PLAYTESTING chip; the old `.brand .crumb` is more
     specific and still wins where it applies. */
.bar{display:flex;align-items:center;gap:24px;padding:15px 40px;border-bottom:3px solid var(--indigo);background:var(--paper)}
.crumb{font:700 11.5px var(--mono);letter-spacing:.14em;color:#fff;background:var(--indigo);padding:5px 10px}
.nav{display:flex;gap:24px}
.nav a{font-size:14.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:5px 0;border-bottom:2px solid transparent}
.nav a.on{color:var(--indigo);border-bottom-color:var(--indigo);font-weight:750}
.login{font-size:14.5px;font-weight:700;color:var(--indigo);text-decoration:none}
.btn{font:800 14.5px var(--sans);background:var(--indigo);color:#fff;text-decoration:none;padding:11px 20px;border:none;cursor:pointer;display:inline-block}
.btn.paper{background:#fff;color:var(--indigo)}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.75)}
.btn.ghost.dk{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn.lg{font-size:16.5px;padding:15px 28px}
.bar{position:sticky;top:0;z-index:60}

.barright{margin-left:auto;display:flex;align-items:center;gap:26px}

/* ── /testers/ indigo hero ──────────────────────────────────────────────
   Scoped to .thero on purpose. This page is on playtesting.css (paper),
   not playtesting-v7.css, so the v7 hero rules do not exist here and the
   shared .btn/.sub/.hero names already mean something else. Every rule
   below is a descendant of .thero for that reason — do not hoist them. */
.thero{position:relative;background:var(--indigo);color:#fff;padding:56px 0 48px;overflow:hidden;margin-bottom:0}
.thero::before{content:'';position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
  background-size:38px 38px}
.thero .in{position:relative;z-index:3;max-width:1080px;margin:0 auto;padding:0 26px}
.thero .kick{font:800 12.5px/1 var(--mono,var(--sans));letter-spacing:.18em;text-transform:uppercase;color:var(--yellow,#FFC53D);margin:0 0 22px}
.thero h1{font-size:clamp(38px,5.4vw,62px);line-height:1.02;letter-spacing:-.03em;margin:0;color:#fff}
.thero h1 .u{box-shadow:inset 0 -.14em 0 var(--yellow,#FFC53D)}
.thero .sub{font-size:17.5px;line-height:1.55;color:rgba(255,255,255,.86);margin:22px 0 0;max-width:56ch}
.thero .sub b{color:#fff}
.thero .hero-ctas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:32px}
.thero .btn.paper{background:#fff;color:var(--indigo)}
.thero .login{color:#fff;font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:2px}
.thero .login:hover{border-bottom-color:#fff}
.thero .fine{margin:20px 0 0;font-size:14.5px;color:rgba(255,255,255,.78)}
.thero .fine b{color:#fff}
/* .notch is already defined at the top of this file, with both corners.
   The second copy cut only one, so the same button had a different shape
   here than on the generated pages. Removed. */
/* .view's 104px top pad dates from the fixed bar; the v7 bar is in normal
   flow, so on this page it is just a white gap above the indigo band. */
#p-testers,#p-guide{padding-top:0}
/* the crumb is a link on these pages too, and the legacy .crumb predates that */
.bar .crumb{text-decoration:none}
@media(max-width:720px){.thero{padding:52px 0 46px}}


/* ── v7 bar, second copy ────────────────────────────────────────────────
   guide/ and testers/ are on THIS stylesheet, not playtesting-v7.css, but
   they carry the same header markup. .navcta and .burger arrived with the
   header rework and were never copied across, so Log in rendered as a bare
   underlined link and overflowed the bar. Lifted verbatim rather than
   re-typed, so the two copies cannot drift. */
.navcta{font:800 14px var(--sans);background:var(--indigo);color:#fff;text-decoration:none;padding:10px 18px;white-space:nowrap}
.navcta:hover{background:var(--indigo-deep)}
.burger{display:none;appearance:none;border:0;background:transparent;cursor:pointer;padding:6px;flex-direction:column;gap:5px}
.burger span{display:block;width:22px;height:2.5px;background:var(--ink)}
.brand{display:flex;align-items:center;text-decoration:none}
.wm{height:38px;flex:none;display:block}
@media(max-width:900px){
  .bar{padding:12px 20px;gap:14px}
  .barright{gap:16px}
  .nav{gap:18px}
}
@media(max-width:760px){
  .crumb{display:none}          /* the page itself says where you are */
  .burger{display:flex}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:3px solid var(--indigo);display:none;z-index:70}
  /* relative for the absolutely-positioned drop-down, but keep it STICKY:
     this block sits after .bar{position:sticky} in this file (the reverse of
     v7's order), so a plain `relative` here silently un-stuck the header on
     phones. */
  .bar{position:sticky}
  .bar.open .nav{display:flex}
  .nav a{padding:14px 20px;border-top:1px solid var(--rule);font-size:16px}
}
@media(max-width:430px){
  .bar{padding:11px 16px}
  .wm{height:30px}
  .navcta{padding:9px 14px;font-size:13px}
}
@media(max-width:760px){
  .specs,.why,.provide,.studio{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    grid-template-columns:none;gap:1px}
  .specs::-webkit-scrollbar,.why::-webkit-scrollbar,
  .provide::-webkit-scrollbar,.studio::-webkit-scrollbar{display:none}
  .specs>*,.why>*,.provide>*,.studio>*{
    flex:0 0 82%;min-width:82%;scroll-snap-align:start}
}


/* ── testers: the flag, and the sheet it opens ──────────────────────────────
   The page's whole argument is "one tap", and the section that says so had no
   picture of the thing being tapped. The mark is the same flag the app draws;
   the screenshot is the sheet it opens, so the promise and the product agree. */
.flaglede{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.flaglede h2{margin:0}
.flagmark{flex:none;display:grid;place-items:center;width:56px;height:56px;
  background:var(--orange);color:#fff;border-radius:14px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--orange) 32%,transparent)}
.flagmark svg{width:28px;height:28px}
.tshot{margin:26px 0 0;max-width:420px}
.tshot img{width:100%;height:auto;display:block;border:1px solid var(--border);
  border-radius:14px;background:#0E121B}
.tshot figcaption{margin-top:10px;font-size:.86rem;line-height:1.55;color:var(--muted)}
@media(max-width:560px){
  .flaglede{gap:12px}
  .flagmark{width:44px;height:44px;border-radius:11px}
  .flagmark svg{width:22px;height:22px}
}


/* ── footer, lifted verbatim from playtesting-v7.css ────────────────────
   guide/ and testers/ shipped a LIGHT footer with a text wordmark while
   every other page ended on the dark bar with the real asset -- the one
   place the site visibly changed identity at the bottom. Appended, so it
   wins over the light rule earlier in this file. */
footer{background:var(--ink);color:#fff;padding:54px 40px 34px}
footer .inner{max-width:1080px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:34px;flex-wrap:wrap}
footer .inner>a img{height:34px;display:block}
footer .flinks{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
footer .flinks a{color:rgba(255,255,255,.72);text-decoration:none;font-size:14.5px;font-weight:600}
footer .flinks a:hover{color:#fff}
footer .cr{max-width:1080px;margin:34px auto 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.5)}
@media(max-width:760px){footer{padding:40px 20px 28px}footer .inner{flex-direction:column;gap:22px}}