*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:#FAF9F6;overflow-x:clip}img{max-width:100%}

  .lj{
    --canvas:#FAF9F6; --panel:#FFFFFF; --panel-2:#F4F1EA;
    --ink:#17181A; --ink-soft:#5C5E63; --ink-faint:#8B8D92;
    --gold:#E9A83A; --gold-deep:#996611; --gold-soft:rgba(233,168,58,.12);
    --dark:#141517; --dark-2:#1D1F22; --dark-line:rgba(255,255,255,.08);
    --hairline:#EBE7DE; --hairline-2:#E3DED3;
    --good:#2F8F5B; --hard:#C7442E;
    --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Monaco,"Cascadia Code",monospace;
    color-scheme:light; background:var(--canvas); color:var(--ink);
    font-family:var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
  }
  .lj *{box-sizing:border-box}
  .lj ::selection{background:rgba(233,168,58,.28)}
  .lj img{max-width:100%}

  .wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
  .sec{padding:clamp(56px,8vw,104px) 0}
  .sec.tint{background:var(--panel-2)}
  .sec.dark{background:var(--dark);color:#E7E7EA}
  .sec.dark .eyebrow{color:var(--gold)}
  .sec.dark .h2{color:#fff}
  .sec.dark .lead{color:#A9ABB2}

  .eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.17em;color:var(--gold-deep);text-transform:uppercase}
  .h2{font-size:clamp(1.8rem,3.3vw,2.5rem);font-weight:800;letter-spacing:-.03em;line-height:1.08;
    margin:14px 0 0;text-wrap:balance;max-width:20ch}
  .h2.wide{max-width:24ch}
  .lead{color:var(--ink-soft);font-size:1.08rem;line-height:1.55;max-width:56ch;margin:18px 0 0;
    text-wrap:pretty}
  .center{text-align:center;margin-left:auto;margin-right:auto}
  .center .h2,.center .lead{margin-left:auto;margin-right:auto}
  /* no orphaned last lines in running prose */
  .founder-text p,.faq p,.price-note{text-wrap:pretty}

  /* buttons */
  .btn{font-family:var(--sans);font-weight:800;font-size:.98rem;padding:14px 26px;border-radius:12px;cursor:pointer;
    border:0;background:linear-gradient(150deg,#F2C25A,#E4A233);color:#17181A;box-shadow:0 4px 18px rgba(222,154,42,.32);
    text-decoration:none;display:inline-block}
  .btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--hairline-2)}
  .sec.dark .btn.ghost{color:#fff;border-color:rgba(255,255,255,.22)}
  .link{font-weight:700;font-size:.95rem;color:inherit;background:none;border:0;cursor:pointer;padding:6px 2px;
    border-bottom:2px solid rgba(23,24,26,.16);border-radius:1px;text-decoration:none;display:inline-block}
  .sec.dark .link{border-bottom-color:rgba(233,168,58,.5)}
  .link:hover{border-bottom-color:var(--gold)}

  /* icons */
  .ico{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .ico-chip{width:40px;height:40px;flex:none;border-radius:11px;background:var(--gold-soft);color:var(--gold-deep);
    display:grid;place-items:center}
  .sec.dark .ico-chip{background:rgba(233,168,58,.14);color:var(--gold)}

  /* feature grids */
  .grid{display:grid;gap:clamp(20px,3vw,34px);margin-top:clamp(32px,4vw,48px)}
  .grid.g2{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .feat{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
  .feat h3{font-size:1.02rem;font-weight:700;margin:2px 0 0;letter-spacing:-.01em}
  .feat p{color:var(--ink-soft);font-size:.94rem;line-height:1.5;margin:7px 0 0}
  .sec.dark .feat p{color:#9EA0A7}
  .sec.dark .fcard{background:var(--dark-2);border-color:var(--dark-line);box-shadow:none}
  .sec.dark .fcard p{color:#9EA0A7}

  /* split layout */
  .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
  .split.lean{grid-template-columns:1.05fr .95fr}

  /* ===== NAV ===== */
  .nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
  .brand{display:flex;align-items:center;gap:11px}
  .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,#F2C25A,#DE9A2A);
    display:grid;place-items:center;box-shadow:0 2px 10px rgba(222,154,42,.35)}
  .mark span{display:flex;gap:2.5px;align-items:flex-end}
  .mark i{width:3.5px;border-radius:1px;background:#17181A;display:block}
  .mark i:nth-child(1){height:9px}.mark i:nth-child(2){height:15px}.mark i:nth-child(3){height:12px}
  .word b{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
  .word b em{font-style:normal;color:var(--gold-deep)}
  .word small{display:block;font-size:.5rem;letter-spacing:.19em;color:var(--ink-faint);font-weight:700;margin-top:3px}
  .navlinks{display:flex;align-items:center;gap:26px}
  .navlinks a{color:var(--ink-soft);font-weight:600;font-size:.92rem;text-decoration:none}
  .navlinks a:hover{color:var(--ink)}
  .open{font-weight:800;font-size:.9rem;color:#17181A;background:linear-gradient(150deg,#F2C25A,#E4A233);
    border:0;border-radius:999px;padding:11px 22px;cursor:pointer;box-shadow:0 3px 14px rgba(222,154,42,.34);text-decoration:none}
  /* light nav + real logo */
  .nav-bar{position:sticky;top:0;z-index:90;background:rgba(250,249,246,.86);
    -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);border-bottom:1px solid var(--hairline)}
  .sec{scroll-margin-top:80px}
  .nav-bar .nav{padding:16px 0}
  .nav-bar .brand{text-decoration:none}
  .logo{height:34px;width:auto;display:block}
  .foot .logo{height:38px}
  /* hero: real phone frame around the app screenshot */
  .hero-shot{display:flex;justify-content:center}
  .phone-frame{position:relative;width:min(322px,84vw);border-radius:46px;padding:11px;
    background:linear-gradient(155deg,#45484e,#212327 26%,#0e0f11 62%,#2c2e32);
    box-shadow:0 52px 104px -36px rgba(20,21,23,.62),0 8px 22px rgba(20,21,23,.16),
      inset 0 0 0 2px rgba(255,255,255,.05),inset 0 1.5px 1px rgba(255,255,255,.18),inset 0 -2px 3px rgba(0,0,0,.4)}
  .phone-screen{position:relative;border-radius:34px;overflow:hidden;background:#000;line-height:0}
  .phone-screen img{display:block;width:100%;height:auto}
  .phone-screen video{display:block;width:100%;height:auto}
  .phone-island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:32%;height:24px;
    background:#000;border-radius:14px;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
  .pf-btn{position:absolute;width:3px;border-radius:2px 0 0 2px;background:#141518;z-index:0}
  .pf-btn.r{border-radius:0 2px 2px 0}
  .pf-silent{left:-3px;top:15%;height:5%}
  .pf-volup{left:-3px;top:23%;height:9%}
  .pf-voldn{left:-3px;top:34.5%;height:9%}
  .pf-power{right:-3px;top:26%;height:13%}
  /* app window frame for wide screenshots */
  .appwin{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--hairline-2);
    box-shadow:0 40px 80px -34px rgba(20,21,23,.34),0 6px 18px rgba(20,21,23,.10)}
  .appwin-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#F1EEE8;border-bottom:1px solid var(--hairline-2)}
  .appwin-bar i{width:11px;height:11px;border-radius:50%;display:block}
  .appwin-bar i:nth-child(1){background:#ec6a5e}
  .appwin-bar i:nth-child(2){background:#f4bf4f}
  .appwin-bar i:nth-child(3){background:#61c454}
  .appwin-bar span{margin-left:10px;font-size:.72rem;color:var(--ink-faint);font-weight:600;
    background:#fff;border:1px solid var(--hairline-2);border-radius:999px;padding:3px 12px}
  .appwin img{display:block;width:100%;height:auto}
  .appwin-lg{max-width:1020px;margin:clamp(36px,5vw,56px) auto 0}
  /* printed document (entry tag, score report) */
  .paper{background:#fff;border:1px solid var(--hairline-2);border-radius:16px;overflow:hidden;max-width:340px;margin:0 auto;
    box-shadow:0 1px 2px rgba(20,21,23,.05),0 8px 20px -6px rgba(20,21,23,.14),0 28px 56px -18px rgba(20,21,23,.30)}
  .paper img{display:block;width:100%;height:auto}
  .paper-lg{max-width:470px}
  .scan-split{align-items:start}
  .scan-split .h2{margin-top:0}
  .scan-split .paper{margin-top:7px}
  /* spotlight the phone when it sits on a dark section */
  .sec.dark .hero-shot{position:relative}
  .sec.dark .hero-shot::before{content:"";position:absolute;inset:-10% -14%;z-index:0;
    background:radial-gradient(closest-side,rgba(233,168,58,.16),transparent 72%)}
  .sec.dark .phone-frame{z-index:1}
  /* fan voting: vote phone on top, results tucked beneath and to the right */
  .vote-fan{position:relative;width:min(420px,94vw);margin:56px auto}
  .vote-fan .vf-front{position:relative;z-index:2;width:60%;margin:0 0 7% 0}
  .vote-fan .vf-back{position:absolute;z-index:1;width:59%;right:9%;bottom:0;transform:rotate(6deg);transform-origin:bottom right}
  .sec.dark .vote-fan::before{content:"";position:absolute;inset:-8% -14%;z-index:0;
    background:radial-gradient(closest-side,rgba(233,168,58,.16),transparent 72%)}
  .vlbl{position:absolute;z-index:6;font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
    background:rgba(20,21,23,.86);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:5px 12px;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .vlbl-front{top:-46px;left:2%}
  .vlbl-front::after{content:"";position:absolute;top:100%;left:50%;width:1px;height:24px;background:rgba(233,168,58,.75);transform:translateX(-50%)}
  .vlbl-front::before{content:"";position:absolute;top:calc(100% + 24px);left:50%;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%)}
  .vlbl-back{bottom:-46px;right:2%}
  .vlbl-back::after{content:"";position:absolute;bottom:100%;left:50%;width:1px;height:24px;background:rgba(233,168,58,.75);transform:translateX(-50%)}
  .vlbl-back::before{content:"";position:absolute;bottom:calc(100% + 24px);left:50%;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%)}
  /* two-phone pair: tap front, slider tucked behind, techy callout labels */
  .pair{position:relative;width:100%;display:flex;justify-content:center;padding:52px 0 6px}
  .pair .ph-front{position:relative;z-index:2;width:min(256px,60vw)}
  .pair .ph-back{position:absolute;z-index:1;width:min(256px,60vw);top:52px;left:50%;
    transform:translateX(-90%) rotate(-5deg);transform-origin:center}
  @media (max-width:600px){
    .pair .ph-front,.pair .ph-back{width:min(216px,54vw)}
    .pair .ph-back{transform:translateX(-66%) rotate(-5deg)}
    .vote-fan{width:min(340px,90vw)}
  }
  .ph-label{position:absolute;z-index:6;top:-52px;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    background:rgba(20,21,23,.85);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 12px;white-space:nowrap;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .ph-label::after{content:"";position:absolute;top:100%;left:50%;width:1px;height:26px;background:rgba(233,168,58,.7);transform:translateX(-50%)}
  .ph-label::before{content:"";position:absolute;top:calc(100% + 26px);left:50%;width:7px;height:7px;border-radius:50%;
    background:var(--gold);transform:translate(-50%,-50%);box-shadow:0 0 0 3px rgba(233,168,58,.18)}
  .lbl-front{left:50%;transform:translateX(-50%)}
  .lbl-back{left:20%;transform:translateX(-50%) rotate(5deg)}
  /* offset panel: images left, text right */
  @media (min-width:901px){
    .split.flip>:first-child{order:2}
    .split.flip>:last-child{order:1}
  }
  /* lift product windows off dark sections */
  .sec.dark .win{background:var(--dark-2);border-color:rgba(255,255,255,.1)}

  /* ===== HERO ===== */
  .hero{background-image:radial-gradient(1000px 560px at 92% 16%,rgba(233,168,58,.10),transparent 62%)}
  .hero .split{align-items:center;padding:clamp(24px,4vw,44px) 0 clamp(40px,5vw,60px)}
  .kick{display:inline-flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
  .kick span{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);
    background:var(--panel);border:1px solid var(--hairline-2);border-radius:999px;padding:6px 12px}
  .h1{font-size:clamp(2.3rem,4.9vw,3.7rem);font-weight:800;letter-spacing:-.032em;line-height:1.03;margin:0;text-wrap:balance;max-width:14ch}
  .h1 u{text-decoration:none;position:relative;white-space:nowrap}
  .h1 u::after{content:"";position:absolute;left:-1px;right:-1px;bottom:.06em;height:.30em;z-index:-1;
    background:linear-gradient(180deg,transparent 55%,rgba(233,168,58,.55) 55%)}
  .hsub{color:var(--ink-soft);font-size:1.06rem;line-height:1.52;max-width:47ch;margin:20px 0 0;min-height:4.7em}
  .hsub b{color:var(--ink);font-weight:600}
  .seg{display:inline-flex;gap:4px;margin-top:26px;padding:4px;border:1px solid var(--hairline-2);border-radius:999px;background:var(--panel);flex-wrap:wrap}
  .seg button{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ink-soft);border:0;background:transparent;padding:9px 15px;border-radius:999px;cursor:pointer;transition:.18s}
  .seg button:hover{color:var(--ink)}
  .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
  .trusted{font-size:.82rem;color:var(--ink-faint);margin:14px 0 0;min-height:1.2em}
  .trusted strong{color:var(--ink-soft);font-weight:600}
  .cta{display:flex;gap:14px;align-items:center;margin-top:28px;flex-wrap:wrap}
  .fade{transition:opacity .28s ease}.fade.out{opacity:0}

  /* product window (dark) */
  .win{background:var(--dark);border-radius:20px;padding:22px;color:#EDEDEF;
    box-shadow:0 34px 80px -34px rgba(20,21,23,.6),0 2px 0 rgba(255,255,255,.04) inset;border:1px solid var(--dark-line);position:relative}
  .win::before{content:"";position:absolute;inset:0 0 auto;height:64px;border-radius:20px 20px 0 0;background:linear-gradient(180deg,rgba(233,168,58,.1),transparent)}
  .win-top{display:flex;align-items:center;justify-content:space-between;position:relative}
  .win-label{font-size:.66rem;letter-spacing:.18em;color:var(--gold);font-weight:700}
  .modes{display:inline-flex;background:#0E0F11;border-radius:999px;padding:3px;gap:2px}
  .modes span{font-size:.68rem;font-weight:700;padding:6px 12px;border-radius:999px;color:#7C7E84}
  .modes span.on{background:#2A2C30;color:#fff}
  .perf{display:flex;align-items:center;gap:12px;margin:20px 0 6px}
  .ava{width:44px;height:44px;border-radius:12px;background:linear-gradient(150deg,#33363B,#212327);display:grid;place-items:center;font-weight:800;color:var(--gold);font-size:.95rem;border:1px solid var(--dark-line)}
  .perf b{font-size:.95rem}.perf small{display:block;color:#8A8C92;font-size:.74rem;margin-top:2px;font-weight:500}
  .scorebig{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px}
  .scorebig .n{font-family:var(--mono);font-size:3.1rem;font-weight:700;color:var(--gold);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
  .scorebig .of{color:#71737A;font-weight:600;font-size:1rem}
  .track{height:8px;border-radius:999px;background:#26282C;position:relative;margin:12px 0 4px;overflow:hidden}
  .track i{position:absolute;inset:0 28% 0 0;background:linear-gradient(90deg,#DE9A2A,#F2C25A);border-radius:999px}
  .ticks{display:flex;justify-content:space-between;color:#5D5F65;font-size:.6rem;font-weight:600;margin-top:7px}
  .els{margin-top:18px;border-top:1px solid var(--dark-line);padding-top:14px;display:grid;gap:11px}
  .el{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px}
  .el .k{font-size:.8rem;color:#C7C9CE;font-weight:600}
  .el .w{font-size:.64rem;color:var(--gold);font-weight:700}
  .el .bar{grid-column:1 / -1;height:5px;border-radius:999px;background:#24262A;overflow:hidden}
  .el .bar i{display:block;height:100%;background:#6C6E74;border-radius:999px}
  .win-foot{margin-top:16px;font-size:.66rem;color:#6F7178;letter-spacing:.03em;font-weight:600;display:flex;justify-content:space-between;align-items:center}
  .win-foot em{font-style:normal;color:var(--gold)}

  /* hero stat strip */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
  .stat{padding:22px 6px}
  .stat+.stat{border-left:1px solid var(--hairline)}
  .stat b{font-size:1.7rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .stat b em{font-style:normal;color:var(--gold-deep)}
  .stat span{display:block;font-size:.75rem;color:var(--ink-soft);font-weight:600;margin-top:4px}

  /* tap-mode window */
  .taps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .tapbtn{background:#1E2024;border:1px solid var(--dark-line);border-radius:14px;padding:18px 14px;text-align:center}
  .tapbtn b{display:block;font-family:var(--mono);font-size:1.6rem;color:#fff;font-variant-numeric:tabular-nums}
  .tapbtn.gold{background:linear-gradient(150deg,rgba(233,168,58,.22),rgba(233,168,58,.06));border-color:rgba(233,168,58,.4)}
  .tapbtn.gold b{color:var(--gold)}
  .tapbtn small{display:block;font-size:.66rem;color:#8A8C92;font-weight:600;margin-top:6px;letter-spacing:.04em}

  /* works-with tags */
  .tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:38px;max-width:920px;margin-left:auto;margin-right:auto}
  .tags span{font-size:.9rem;font-weight:600;color:var(--ink);background:var(--panel);border:1px solid var(--hairline-2);
    border-radius:999px;padding:11px 18px}
  .tags span.hot{border-color:rgba(233,168,58,.55);background:var(--gold-soft);color:var(--gold-deep)}
  .worksline{text-align:center;margin:34px auto 0;font-size:1.15rem;font-weight:600;color:var(--ink);text-wrap:balance}

  /* fairness demo (dark card in light section) */
  .demo{position:relative;background:var(--dark);border-radius:20px;padding:clamp(20px,3vw,30px);color:#E7E7EA;box-shadow:0 30px 70px -34px rgba(20,21,23,.55);border:1px solid var(--dark-line)}
  .se-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px clamp(32px,5vw,64px);align-items:start}
  .se-head{grid-column:1 / -1}
  .se-body .lead{margin-top:0}
  @media (max-width:900px){.se-grid{grid-template-columns:1fr;gap:34px}}
  .try-it{position:absolute;top:-15px;left:50%;z-index:4;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:#17181A;background:linear-gradient(150deg,#F2C25A,#E4A233);border-radius:999px;padding:7px 16px;
    box-shadow:0 8px 20px -6px rgba(222,154,42,.6);transform:translateX(-50%);animation:tryBob 1.9s ease-in-out infinite}
  @keyframes tryBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}
  @media (prefers-reduced-motion:reduce){.try-it{animation:none}}
  .demo-tabs{display:flex;gap:4px;background:#0E0F11;border-radius:12px;padding:4px;flex-wrap:wrap}
  .demo-tabs button{flex:1;min-width:88px;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.03em;color:#8A8C92;background:transparent;border:0;padding:10px 8px;border-radius:9px;cursor:pointer;transition:.15s}
  .demo-tabs button[aria-pressed="true"]{background:#2A2C30;color:#fff}
  .demo-judges{display:flex;gap:9px;margin:22px 0}
  .dj{flex:1;text-align:center;transition:.25s}
  .dj small{display:block;font-size:.62rem;color:#8A8C92;font-weight:700;letter-spacing:.05em}
  .dj b{display:block;font-family:var(--mono);font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:6px;padding:9px 0;border-radius:10px;background:#22242A;color:#fff}
  .dj.hard b{background:rgba(199,68,46,.18);color:#F0876F}
  .dj.drop{opacity:.32}
  .dj.drop b{text-decoration:line-through}
  .demo-out{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--dark-line);padding-top:20px;flex-wrap:wrap}
  .demo-final .n{font-family:var(--mono);font-size:2.6rem;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1}
  .demo-final small{display:block;font-size:.64rem;color:#8A8C92;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
  .demo-desc{color:#A9ABB2;font-size:.86rem;line-height:1.5;max-width:34ch}
  .demo-note{font-size:.66rem;color:#6F7178;margin-top:14px}

  /* phone mock (custom experience) */
  .phone{width:230px;margin:0 auto;border-radius:30px;background:var(--dark);border:1px solid var(--dark-line);padding:14px 12px 18px;box-shadow:0 34px 80px -34px rgba(20,21,23,.6);position:relative}
  .phone .notch{width:56px;height:5px;border-radius:99px;background:#3A3C42;margin:2px auto 14px}
  .phevent{text-align:center;color:#fff}
  .phevent .logo{width:52px;height:52px;border-radius:14px;margin:0 auto 10px;background:linear-gradient(150deg,#F2C25A,#DE9A2A);display:grid;place-items:center;color:#17181A;font-weight:800}
  .phevent h4{font-size:.98rem;font-weight:800;margin:0}
  .phevent p{font-size:.7rem;color:#8A8C92;margin:4px 0 0}
  .phrow{display:grid;gap:8px;margin-top:14px}
  .phrow a{display:flex;align-items:center;gap:10px;background:#1E2024;border:1px solid var(--dark-line);border-radius:12px;padding:11px 12px;color:#E7E7EA;font-size:.8rem;font-weight:600;text-decoration:none}
  .phrow a .ico{width:18px;height:18px;color:var(--gold)}
  .qr{width:74px;height:74px;margin:16px auto 0;border-radius:10px;background:#fff;padding:8px}
  .qr svg{display:block;width:100%;height:100%}

  /* dashboard window */
  .dash{background:var(--dark);border-radius:18px;border:1px solid var(--dark-line);overflow:hidden;box-shadow:0 34px 80px -34px rgba(20,21,23,.6)}
  .dash-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--dark-line);background:#101113}
  .dash-bar i{width:10px;height:10px;border-radius:99px;background:#33363B;display:block}
  .dash-bar span{margin-left:10px;font-size:.72rem;color:#8A8C92;font-weight:600}
  .dash-body{display:grid;grid-template-columns:132px 1fr;min-height:280px}
  .dash-side{border-right:1px solid var(--dark-line);padding:14px 10px;display:grid;gap:4px;align-content:start}
  .dash-side a{font-size:.74rem;color:#9EA0A7;font-weight:600;padding:8px 10px;border-radius:8px;text-decoration:none}
  .dash-side a.on{background:rgba(233,168,58,.14);color:var(--gold)}
  .dash-main{padding:16px}
  .dash-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .dcard{background:#1B1D21;border:1px solid var(--dark-line);border-radius:12px;padding:12px}
  .dcard small{font-size:.6rem;color:#8A8C92;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .dcard b{display:block;font-family:var(--mono);font-size:1.4rem;color:#fff;font-variant-numeric:tabular-nums;margin-top:6px}
  .dcard b em{font-style:normal;color:var(--gold)}
  .dash-list{margin-top:12px;display:grid;gap:7px}
  .drow{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;background:#16181B;border:1px solid var(--dark-line);border-radius:10px;padding:9px 11px}
  .drow .rk{width:22px;height:22px;border-radius:7px;background:#2A2C30;display:grid;place-items:center;font-size:.66rem;font-weight:800;color:var(--gold);font-family:var(--mono)}
  .drow .nm{font-size:.78rem;color:#D2D4D9;font-weight:600}
  .drow .sc{font-family:var(--mono);font-size:.86rem;color:#fff;font-variant-numeric:tabular-nums}

  /* entry tag */
  .tag-card{background:var(--panel);border:1px solid var(--hairline-2);border-radius:16px;padding:22px;max-width:300px;margin:0 auto;box-shadow:0 20px 50px -30px rgba(20,21,23,.28)}
  .tag-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px dashed var(--hairline-2);padding-bottom:14px}
  .tag-top .mk{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.86rem}
  .tag-top .mk .mark{width:24px;height:24px;border-radius:7px}
  .tag-num{font-family:var(--mono);font-size:2.4rem;font-weight:700;letter-spacing:-.02em;margin:14px 0 2px}
  .tag-card .qr{background:var(--panel-2);margin:14px 0 0;width:90px;height:90px}
  .tag-card .qr svg .qd{fill:var(--ink)}
  .tag-meta{font-size:.72rem;color:var(--ink-faint);font-weight:600;margin-top:12px}

  /* scoresheet (light document) */
  .sheet{background:#fff;border:1px solid var(--hairline-2);border-radius:14px;padding:clamp(20px,3vw,30px);box-shadow:0 24px 60px -34px rgba(20,21,23,.3);max-width:460px;margin:0 auto}
  .sheet-h{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:12px}
  .sheet-h .mk{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.9rem}
  .sheet-h .mk .mark{width:26px;height:26px;border-radius:7px}
  .sheet-h .pl{text-align:right}
  .sheet-h .pl b{display:block;font-family:var(--mono);font-size:1.5rem;color:var(--gold-deep);line-height:1}
  .sheet-h .pl small{font-size:.6rem;letter-spacing:.12em;color:var(--ink-faint);font-weight:700}
  .sheet-sub{display:flex;justify-content:space-between;font-size:.76rem;color:var(--ink-soft);font-weight:600;margin:12px 0}
  table.stbl{width:100%;border-collapse:collapse;font-size:.78rem}
  table.stbl th{text-align:left;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding:6px 4px;border-bottom:1px solid var(--hairline)}
  table.stbl th.r,table.stbl td.r{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
  table.stbl td{padding:8px 4px;border-bottom:1px solid var(--hairline);color:var(--ink)}
  table.stbl tr.tot td{border-bottom:0;font-weight:800;padding-top:12px}
  table.stbl tr.tot td.r{color:var(--gold-deep)}

  /* testimonials */
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
  .quote{position:relative;background:var(--panel);border:1px solid var(--hairline-2);border-radius:16px;padding:58px 24px 26px;display:flex;flex-direction:column}
  .quote .qm{position:absolute;top:0;left:50%;transform:translate(-50%,3%);font-family:Georgia,"Times New Roman",serif;font-size:10.4rem;line-height:.7;color:var(--gold);pointer-events:none}
  .quote p{font-size:.98rem;line-height:1.55;color:var(--ink);margin:14px 0 auto;font-weight:500}
  .quote footer{margin-top:20px;padding-top:16px;border-top:1px solid var(--hairline)}
  .quote footer b{display:block;font-size:.9rem;font-weight:700}
  .quote footer small{color:var(--ink-faint);font-size:.8rem}
  /* command & control browser mock */
  .browser-wrap{position:relative;max-width:780px;margin:44px auto 0}
  .browser-wrap::before{content:"";position:absolute;inset:-9% -7%;z-index:0;background:radial-gradient(closest-side,rgba(233,168,58,.18),transparent 72%);pointer-events:none}
  .browser{position:relative;z-index:1;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 50px 120px -40px rgba(0,0,0,.65)}
  .browser-bar{display:flex;align-items:center;gap:8px;padding:11px 15px;background:#EFEDE7;border-bottom:1px solid rgba(20,21,23,.07)}
  .browser-bar .bd{width:11px;height:11px;border-radius:50%;background:#d9d9de}
  .browser-bar .bd:nth-child(1){background:#ff5f57}.browser-bar .bd:nth-child(2){background:#febc2e}.browser-bar .bd:nth-child(3){background:#28c840}
  .browser-url{margin-left:14px;flex:1;max-width:340px;height:24px;display:flex;align-items:center;padding:0 14px;border-radius:7px;background:#fff;border:1px solid rgba(20,21,23,.08);font-size:.74rem;font-weight:600;color:#8a8c92}
  .browser img{display:block;width:100%;height:auto}
  @media(max-width:600px){.browser-url{display:none}}
  /* feature panel: everything-included grid (equal-size boxes) */
  .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;grid-auto-rows:1fr;margin-top:clamp(30px,4vw,46px)}
  .fcard{background:var(--panel);border:1px solid var(--hairline-2);border-radius:16px;padding:22px 22px 20px;box-shadow:0 22px 44px -34px rgba(20,21,23,.28);display:flex;flex-direction:column}
  .fcard-h{display:flex;align-items:center;gap:12px;margin-bottom:15px}
  .fcard-h h3{font-size:1.04rem;font-weight:750;letter-spacing:-.01em;margin:0}
  .fcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .fcard li{display:flex;align-items:flex-start;font-size:.9rem;line-height:1.42;color:var(--ink-soft)}
  .fcard li::before{content:"";flex:none;width:16px;height:16px;margin:1px 10px 0 0;border-radius:50%;background:var(--gold-soft);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.5 8.4l2.2 2.2 4.8-5' fill='none' stroke='%23996611' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:center}
  .fp-soon{display:inline-block;margin-left:7px;font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);background:var(--hairline);padding:2px 6px;border-radius:5px;vertical-align:1px;white-space:nowrap}
  @media(max-width:900px){.fgrid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:600px){.fgrid{grid-template-columns:1fr}}
  /* comparison table */
  .cmp-wrap{overflow-x:auto;margin-top:clamp(28px,4vw,44px);border-radius:16px}
  table.cmp{width:100%;border-collapse:collapse;min-width:660px;background:var(--panel);border:1px solid var(--hairline-2);border-radius:16px;overflow:hidden}
  .cmp th,.cmp td{padding:13px 18px;border-bottom:1px solid var(--hairline);text-align:left;vertical-align:middle}
  .cmp tbody tr:last-child td{border-bottom:0}
  .cmp thead th{font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
  .cmp thead th.lj{color:var(--gold-deep)}
  .cmp td:first-child,.cmp th:first-child{font-weight:600;color:var(--ink);font-size:.93rem;min-width:230px}
  .cmp .col{text-align:center;width:150px}
  .cmp col.ljcol,.cmp td.lj,.cmp th.lj{background:var(--gold-soft)}
  .cmp .yes{color:var(--gold-deep);font-weight:800;font-size:1.02rem}
  .cmp .no{color:#C7BFAE;font-weight:700}
  .cmp .part{color:var(--ink-soft);font-size:.8rem;font-weight:600}
  /* Two-column "them vs us". The first column is the category norm, NOT a row label, so it
     has to read as the muted side. Left on .cmp's default it inherits the bold ink label
     styling and both halves look equally endorsed, which reads as a set of instructions. */
  .cmp.two{min-width:560px}
  .cmp.two th,.cmp.two td{width:50%;vertical-align:top}
  .cmp.two td:first-child,.cmp.two th:first-child{min-width:0;font-weight:500;color:var(--ink-faint)}
  .cmp.two td.lj{color:var(--ink);font-weight:500}
  .cmp.two .ico{width:15px;height:15px;stroke-width:2.4;vertical-align:-2px;margin-right:8px}

  /* founder */
  .founder{display:grid;grid-template-columns:minmax(auto,600px) auto;gap:clamp(28px,4vw,54px);align-items:start;justify-content:start}
  .founder-aside{order:2}
  .founder .h2{margin:0 0 22px}
  @media (max-width:900px){.founder{grid-template-columns:1fr}.founder-aside{order:0}}
  .mono-av{width:132px;height:132px;flex:none;border-radius:20px;background:linear-gradient(150deg,#22242A,#141517);
    border:1px solid var(--dark-line);display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:2.4rem;letter-spacing:.02em;
    box-shadow:0 24px 60px -34px rgba(20,21,23,.5)}
  .founder-photo{width:clamp(230px,28vw,308px);height:auto;margin-top:7px;flex:none;border-radius:20px;display:block;
    border:1px solid var(--hairline-2);box-shadow:0 26px 60px -34px rgba(20,21,23,.4)}
  .founder p{color:var(--ink-soft);font-size:1.02rem;line-height:1.6;margin:16px 0 0;max-width:62ch}
  .founder p:first-of-type{margin-top:0}
  .founder .sig{margin-top:18px;font-weight:700;color:var(--ink)}
  .founder .sig small{display:block;color:var(--ink-faint);font-weight:600;font-size:.82rem;margin-top:2px}

  /* big flex diagram */
  .flex-dia{margin-top:44px;background:var(--panel);border:1px solid var(--hairline-2);border-radius:18px;padding:clamp(22px,3vw,36px)}
  .node{border-radius:12px;padding:12px 14px;font-weight:700;font-size:.86rem;text-align:center}
  .node.ev{background:var(--ink);color:#fff}
  .node.comp{background:var(--gold-soft);border:1px solid rgba(233,168,58,.5);color:var(--gold-deep)}
  .node.cl{background:var(--panel-2);border:1px solid var(--hairline-2);color:var(--ink)}
  .node.small{font-size:.76rem;padding:9px 11px;font-weight:600}
  .dia-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:14px}
  .dia-cap{text-align:center;font-size:.78rem;color:var(--ink-faint);font-weight:600;margin-top:6px}
  /* Big Flex: click-to-expand explainer */
  .flex-explainer{margin:clamp(32px,4vw,48px) auto 0;max-width:720px}
  .flex-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,32px);max-width:1060px;margin:clamp(32px,4vw,48px) auto 0}
  .flex-item{margin:0}
  .flex-cap{text-align:center;font-size:.82rem;color:var(--ink-soft);font-weight:600;margin-top:12px}
  @media (max-width:720px){.flex-grid{grid-template-columns:1fr;max-width:540px}}
  .flex-thumb{display:block;width:100%;padding:clamp(18px,2.6vw,30px);border:1px solid var(--hairline-2);border-radius:16px;overflow:hidden;
    background:#fff;cursor:zoom-in;box-shadow:0 30px 70px -34px rgba(20,21,23,.3);position:relative;transition:.18s}
  .flex-thumb:hover{transform:translateY(-2px);box-shadow:0 40px 82px -34px rgba(20,21,23,.36)}
  .flex-thumb:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px}
  .flex-thumb img{display:block;width:100%;height:auto}
  .flex-zoom{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;
    background:rgba(20,21,23,.82);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.03em;border-radius:999px;padding:8px 14px;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .flex-zoom .ico{width:15px;height:15px}
  .lightbox{position:fixed;inset:0;z-index:130;display:grid;place-items:center;padding:24px;
    background:rgba(15,16,18,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .25s ease}
  .lightbox.show{opacity:1}
  .lightbox[hidden]{display:none}
  .lightbox img{max-width:min(1040px,96vw);max-height:92vh;width:auto;height:auto;border-radius:12px;background:#fff;
    padding:clamp(18px,3vw,32px);box-shadow:0 40px 100px -20px rgba(0,0,0,.7)}
  .lb-x{position:fixed;top:18px;right:20px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.24);
    background:rgba(20,21,23,.6);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;z-index:131}
  .lb-x:hover{background:rgba(20,21,23,.85)}
  @media (prefers-reduced-motion:reduce){.lightbox,.flex-thumb{transition:none}}
  .stem{width:2px;height:20px;background:var(--hairline-2);margin:0 auto}

  /* pricing */
  .price{max-width:560px;margin:44px auto 0;background:var(--panel);border:1px solid var(--hairline-2);border-radius:20px;overflow:hidden;box-shadow:0 30px 70px -40px rgba(20,21,23,.3)}
  .price-top{background:var(--ink);color:#fff;padding:26px 30px;text-align:center;position:relative}
  .price-top .badge{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(233,168,58,.14);border:1px solid rgba(233,168,58,.4);padding:5px 12px;border-radius:999px}
  .price-top b{display:block;font-size:3rem;font-weight:800;letter-spacing:-.03em;margin:12px 0 2px}
  .price-top span{color:#A9ABB2;font-size:.9rem}
  .price-body{padding:26px 30px}
  .plist{display:grid;gap:12px}
  .plist li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--ink);list-style:none}
  .plist li .ico{width:20px;height:20px;color:var(--good);flex:none;margin-top:1px}
  .price-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
  .price-cta .btn{flex:1.7;text-align:center;white-space:nowrap}
  .price-cta .btn.ghost{flex:1}
  .price-note{text-align:center;font-size:.82rem;color:var(--ink-faint);margin-top:16px}

  /* FAQ */
  .faq{max-width:760px;margin:40px auto 0;display:grid;gap:12px}
  .faq details{background:var(--panel);border:1px solid var(--hairline-2);border-radius:14px;padding:2px 20px}
  .faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:1.4rem;color:var(--gold-deep);font-weight:400;transition:.2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq p{color:var(--ink-soft);font-size:.95rem;line-height:1.6;margin:0 0 18px;max-width:64ch}

  /* footer */
  .foot{background:var(--dark);color:#A9ABB2;padding:clamp(44px,6vw,72px) 0 40px}
  .foot .word b{color:#fff}.foot .word b em{color:var(--gold)}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--dark-line)}
  .foot h5{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#6F7178;font-weight:700;margin:0 0 14px}
  .foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
  .foot a{color:#A9ABB2;text-decoration:none;font-size:.9rem;font-weight:500}
  .foot a:hover{color:#fff}
  .foot-tag{color:#6F7178;font-size:.86rem;line-height:1.6;margin:14px 0 0;max-width:34ch}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;font-size:.8rem;color:#6F7178}

  /* review banner */
  .banner{background:linear-gradient(90deg,#17181A,#26282C);color:#E7E7EA;text-align:center;font-size:.8rem;font-weight:600;padding:9px 16px;letter-spacing:.01em}
  .banner b{color:var(--gold)}

  /* landing chooser (glass modal) */
  .lj-gate{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:24px;
    background:rgba(20,21,23,.42);backdrop-filter:blur(9px) saturate(1.1);-webkit-backdrop-filter:blur(9px) saturate(1.1);
    opacity:0;transition:opacity .3s ease}
  .lj-gate.show{opacity:1}
  .lj-gate[hidden]{display:none}
  .gate-card{position:relative;width:min(560px,100%);background:var(--panel);border:1px solid var(--hairline-2);
    border-radius:22px;padding:clamp(26px,4vw,40px);box-shadow:0 40px 100px -30px rgba(20,21,23,.6);
    transform:translateY(10px) scale(.985);transition:transform .3s ease}
  .lj-gate.show .gate-card{transform:none}
  .gate-x{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:9px;border:1px solid var(--hairline-2);
    background:var(--panel);color:var(--ink-soft);font-size:1.2rem;line-height:1;cursor:pointer}
  .gate-x:hover{color:var(--ink)}
  .gate-card h2{font-size:clamp(1.5rem,3vw,1.95rem);font-weight:800;letter-spacing:-.03em;margin:12px 0 0;text-wrap:balance}
  .gate-card>p{color:var(--ink-soft);font-size:.98rem;margin:12px 0 0;line-height:1.5;max-width:44ch}
  .gate-opts{display:grid;gap:12px;margin:24px 0 0}
  .gate-opts button{display:grid;grid-template-columns:auto 1fr;gap:4px 15px;align-items:center;text-align:left;
    background:var(--panel);border:1px solid var(--hairline-2);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.16s}
  .gate-opts button:hover,.gate-opts button:focus-visible{border-color:var(--gold);background:var(--gold-soft);transform:translateY(-1px);outline:none}
  .gate-opts .gi{grid-row:span 2;width:44px;height:44px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:grid;place-items:center}
  .gate-opts b{font-size:1rem;font-weight:700;grid-column:2}
  .gate-opts small{grid-column:2;color:var(--ink-soft);font-size:.82rem}
  .gate-skip{margin:20px auto 0;display:block;background:none;border:0;color:var(--ink-soft);font-weight:700;font-size:.9rem;
    cursor:pointer;border-bottom:2px solid transparent;padding-bottom:2px}
  .gate-skip:hover{color:var(--ink);border-bottom-color:var(--hairline-2)}
  .open-chooser{background:none;border:0;color:var(--ink-faint);font-weight:600;font-size:.82rem;cursor:pointer;
    text-decoration:underline;text-underline-offset:3px;margin-top:14px;padding:2px 0;display:inline-block}
  .open-chooser:hover{color:var(--ink-soft)}

  /* review-only: replay the chooser (strips at launch, with the banner) */
  .lj-replay{position:fixed;left:16px;bottom:16px;z-index:115;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.14);
    border-radius:999px;padding:11px 17px;font:700 .8rem/1 var(--sans);cursor:pointer;box-shadow:0 12px 34px -12px rgba(0,0,0,.55);opacity:.92;transition:.15s}
  .lj-replay:hover{opacity:1;transform:translateY(-1px)}
  .lj-replay b{color:var(--gold);font-weight:800}

  @media (max-width:900px){
    .split,.split.lean{grid-template-columns:1fr;gap:36px}
    .h1{max-width:none}.hsub{min-height:0}
    .grid.g3,.grid.g2{grid-template-columns:1fr 1fr}
    .quotes{grid-template-columns:1fr}
    .dash-body{grid-template-columns:1fr}.dash-side{display:none}
    .founder{grid-template-columns:1fr;justify-items:start}
    .foot-grid{grid-template-columns:1fr 1fr}
    /* The text links collapse on mobile, but the primary CTA must not: it is the only
       control in the bar and hiding it left the header with nothing but a logo. */
    .navlinks a:not(.open){display:none}
  }
  @media (max-width:560px){
    .stats{grid-template-columns:1fr}.stat+.stat{border-left:0;border-top:1px solid var(--hairline)}
    .grid.g3,.grid.g2{grid-template-columns:1fr}
    .demo-tabs button{min-width:0;flex:1 1 40%}
    .foot-grid{grid-template-columns:1fr}
    .price-top b{font-size:2.4rem}
  }
  @media (prefers-reduced-motion:reduce){.fade,.dj,.demo-tabs button{transition:none}}

  /* ---- sub-page header ----
     Pricing, FAQ, and the use-case pages to come. Same rhythm as a section heading, but it
     carries the page's h1, so it needs its own size: .h1 is the hero's and is capped at 14ch. */
  /* No padding of its own: it always sits inside a .sec, which already sets the rhythm.
     Doubling them put 182px of nothing between the nav and the eyebrow. */
  .pagehead{text-align:center}
  .pagehead h1{font-size:clamp(2rem,4.4vw,3rem);font-weight:800;letter-spacing:-.028em;
    line-height:1.06;margin:12px 0 0;text-wrap:balance}
  .pagehead .lead{margin:18px auto 0}
  /* A worked-example table. Same shell as .cmp but it is data, not a comparison, so the
     LiveJudge column is not singled out. */
  .calc{width:100%;border-collapse:collapse;min-width:520px;background:var(--panel);
    border:1px solid var(--hairline-2);border-radius:16px;overflow:hidden}
  .calc th,.calc td{padding:12px 18px;border-bottom:1px solid var(--hairline);text-align:left}
  .calc thead th{background:var(--panel-2);font-size:.76rem;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-faint);font-weight:700}
  .calc tbody tr:last-child td{border-bottom:0}
  .calc td.n{font-variant-numeric:tabular-nums;text-align:right}
  /* The use-case hub reuses .fcard but carries prose where the homepage grid carries
     bulleted lists, so paragraphs need to match .fcard li rather than inherit body copy.
     The link is pushed to the bottom with margin-top:auto so a ragged set of card
     descriptions still lines its links up. */
  /* These cards sit inside .wrap.center, which centres everything. Card copy is read as
     prose, so it is left-aligned regardless of the section it lives in. */
  .fcard{text-align:left}
  .fcard-h h3{text-align:left}
  .fcard p{margin:0 0 10px;font-size:.9rem;line-height:1.55;color:var(--ink-soft)}
  /* Only the LINK is pushed to the bottom, so links line up across a ragged row while the
     paragraphs all start at the top. Pushing the paragraph itself left short cards with
     their text floating halfway down. */
  .fcard p.cardlink{margin:auto 0 0;padding-top:12px}
  .fcard p a{color:var(--gold-deep);font-weight:650;text-decoration:none}
  .fcard p a:hover{text-decoration:underline}  /* The caption belongs UNDER the phone. .hero-shot is a centred flex ROW and is shared
     with the homepage hero, so the column lives here rather than on that. */
  .mockwrap{display:flex;flex-direction:column;align-items:center}
  /* ---- the judge's seat, built as MARKUP ----
     Matched against a real capture of the app (Michael, 2026-08-12), not designed. What the
     first pass got wrong and this fixes: the screen is near BLACK, not slate; the app chrome
     (status bar, back, brand mark, the three right-hand controls) was missing entirely;
     sliders are much taller and the spectrum is saturated, not pastel; chevrons are thin
     strokes, not filled triangles; an element's subtotal is GOLD when it is mid-band and
     only green near the top; criterion labels are short nouns, so nothing wraps; and the
     commit bar is a deep green over a home indicator.

     Markup rather than a screenshot so every word stays crawlable, no real contestant can
     leak in, and it survives an admin redesign. Math is JudgePreview.vue's, see mock.js.

     One scale unit: font-size derives from frame width, so type, radii and padding scale
     together. */
  .mock{position:relative;width:100%;height:100%;overflow:hidden;
    font-size:calc(var(--pw) / 19.3);
    background:
      radial-gradient(120% 55% at 78% 88%, rgba(120,58,32,.42), transparent 62%),
      radial-gradient(90% 45% at 18% 68%, rgba(74,44,34,.34), transparent 66%),
      radial-gradient(140% 60% at 50% 118%, rgba(150,86,44,.30), transparent 60%),
      #08090b;font-family:var(--sans);line-height:1.3;text-align:left;
    color:#f2f4f7;user-select:none;-webkit-user-select:none}

  /* --- app chrome --- */
  /* The notch island sits at 11px..35px inside the screen and paints black over anything
     under it, so the status row has to clear it: its content is centred on the island the
     way iOS does, time to the left, radios to the right. */
  .mock-sbar{display:flex;align-items:center;justify-content:space-between;
    padding:1.28em 1.15em .15em;font-size:.72em;font-weight:600;color:#fff}
  .mock-sbar svg{height:.85em;width:auto;display:block}
  .mock-sbar .sb-r{display:flex;align-items:center;gap:.4em}
  .mock-nav{display:flex;align-items:center;gap:.55em;padding:.5em .7em .6em;color:#fff}
  .mock-nav .nv-back{display:flex;align-items:center;gap:.42em;font-size:.82em;font-weight:500;
    color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden}
  .mock-nav .nv-back svg{width:1.5em;height:1.5em;flex:none}
  /* Equal-flex sides put the mark dead centre regardless of how long the back label is. */
  .mock-nav .nv-mark{width:1.6em;height:1.6em;border-radius:.26em;flex:none}
  .mock-nav .nv-r{flex:1;display:flex;justify-content:flex-end;align-items:center}
  .mock-nav .nv-ico{width:1.5em;height:1.5em;flex:none;color:#fff}

  .mock-body{padding:.25em .68em 0;display:flex;flex-direction:column;gap:.6em}

  /* --- element cards --- */
  .mcard{background:rgba(23,26,32,.84);border-radius:.95em;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
  /* The opened panel IS outlined, in light grey. Not gold.
     NOTE the class is `is-open`, not `open`: `.open` is the site's gold nav BUTTON, and
     `class="mcard open"` was silently inheriting its padding:11px 22px, its pill radius
     and its 800 weight. That stolen 44px is where the scoring bars' width had gone. */
  .mcard.is-open{background:rgba(20,23,28,.9);
    box-shadow:inset 0 0 0 1px #3f454e}
  .mcard-h{display:flex;align-items:center;gap:.5em;padding:.95em .7em}
  .mname{font-size:.95em;font-weight:500;color:#fff;flex:1;min-width:0;letter-spacing:-.01em}
  .mscore{background:#0c0e12;border-radius:.45em;padding:.3em .55em;white-space:nowrap;flex:none}
  .mscore b{color:#4ec96e;font-weight:800;font-size:.78em}
  .mscore b.mid{color:#e8b53a}      /* mid band: the app shows gold, not green */
  .mscore b.low{color:#e2603f}
  .mscore i{color:#7d838d;font-style:normal;font-size:.66em;font-weight:600}
  .mchev{width:1.25em;height:1.25em;flex:none;color:#9aa1ab;stroke-width:1.8}

  /* --- criteria --- */
  .mcrit{padding:0 .55em}
  .mcrit + .mcrit{margin-top:.85em}
  .mcrit-h{display:flex;align-items:center;gap:.5em;margin-bottom:.55em}
  .mcrit-h p{font-size:.78em;font-weight:600;color:#fff;line-height:1.25;margin:0;flex:1;max-width:none}
  .mchip{background:#2b3038;color:#fff;font-size:.74em;font-weight:600;border-radius:.45em;
    padding:.32em .62em;flex:none}
  /* The spectrum IS the product's scoring affordance. Saturated, not pastel. */
  .mslider{position:relative;height:2.2em;border-radius:999px;touch-action:none;
    background:linear-gradient(90deg,#ef1c1c 0%,#f6631a 16%,#fbb00d 32%,#fff000 48%,
      #c6e800 62%,#63d21a 80%,#17b52e 100%)}
  /* The thumb is a FULL-HEIGHT circle: its diameter equals the track height, so it reads as
     a knob filling the bar rather than a dot floating in it. Keep the three 2.2em values in
     step - height, width and both halves of the left calc - or the travel stops matching the
     ends of the track. */
  .mslider i{position:absolute;top:50%;width:2.2em;height:2.2em;border-radius:50%;
    background:#6b6b6b;transform:translate(-50%,-50%);
    left:calc(1.1em + (100% - 2.2em) * var(--p,.5));
    box-shadow:0 .12em .3em rgba(0,0,0,.5)}
  .mock.live .mslider{cursor:ew-resize}
  /* The guidance slides up as it changes band. Two lines are reserved so the card does not
     jump while a slider is being dragged, which is what made the motion feel jerky. */
  .mguide{font-size:.68em;font-weight:400;color:#6fa8f5;line-height:1.35;
    margin:.45em 0 0;max-width:none;min-height:2.7em}
  .mguide.in{animation:mguide-in .3s cubic-bezier(.2,.9,.3,1) both}
  @keyframes mguide-in{from{opacity:0;transform:translateY(.55em)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.mguide.in{animation:none}}

  .mcard-f{display:flex;justify-content:center;gap:.55em;padding:1em .7em .95em}
  .mbtn{display:inline-flex;align-items:center;gap:.36em;background:#22262e;
    color:#eef1f6;border-radius:999px;padding:.5em .9em;font-size:.7em;
    font-weight:500;white-space:nowrap}
  .mbtn svg{width:1.05em;height:1.05em;flex:none}

  /* --- commit --- */
  .mock-commit{position:absolute;left:0;right:0;bottom:0;background:#000;padding:.7em .78em .5em}
  .mock-commit span{display:block;background:#2e6b35;color:#fff;text-align:center;font-weight:800;
    font-size:.84em;letter-spacing:.02em;border-radius:999px;padding:.86em 0}
  .mock-home{width:36%;height:.28em;border-radius:999px;background:#5c5f66;margin:.7em auto .35em}

  .trydrag{margin-top:14px;font-size:.82rem;letter-spacing:.04em;color:var(--gold-deep);font-weight:650}

  /* ---- THE canonical device frame ----
     Ported verbatim from the phone-frame recipe (reference: the science fair deck, slide 1)
     rather than patching the older `.phone-frame` still used by the homepage hero. Scoped to
     .mockwrap so the hero is untouched until that gets ported too.

     The recipe is height-driven; this layout is width-driven, so --ph is derived from --pw
     at the true display aspect (1206x2622 = 1:2.174). NEVER stretch that ratio; scale --pw.
     Everything after the font-size is in em off that one unit, so band, radii, bevel and
     buttons stay in proportion at any size. A fixed px padding is the documented trap: it
     makes the band a different fraction of the phone at every scale.
     Concentric radii come out for free: 5.2em = 3.8em + 1.4em (frame = screen + band). */
  .mockwrap .pf{position:relative;z-index:1;
    --pw:min(300px, 78vw);
    --ph:calc(var(--pw) * 2.174);
    --pf-glow:0 0 0 0 rgba(0,0,0,0);
    --pf-drop:0 42px 84px -30px rgba(0,0,0,.72);
    --pf-edge:rgba(255,255,255,.17)}
  /* Light canvas: the drop lightens and the edge hairline FLIPS from white to dark. A white
     edge on a light page does nothing and the case reads as having a halo. */
  .mockwrap .pf.on-light{--pf-drop:0 30px 62px -26px rgba(20,22,26,.45);--pf-edge:rgba(20,22,26,.22)}
  .mockwrap .pf .frame{position:relative;font-size:calc(var(--ph)/66);border-radius:5.2em;padding:1.4em;
    background:linear-gradient(152deg,#5a606a 0%,#3f454d 18%,#2e333a 42%,#242931 56%,#373c44 76%,#4b5058 100%);
    box-shadow:var(--pf-glow), var(--pf-drop),
      0 0 0 1px var(--pf-edge),
      inset 0 0 0 .15em rgba(255,255,255,.30),
      inset 0 0 .5em .1em rgba(255,255,255,.07),
      inset 0 .15em .1em rgba(255,255,255,.22),
      inset 0 -.2em .3em rgba(0,0,0,.5),
      inset .5em 0 .8em -.5em rgba(0,0,0,.5), inset -.5em 0 .8em -.5em rgba(0,0,0,.5)}
  /* Black gasket, then a thin orange rim, then the contact shadow. The gasket is what makes
     the case read as wrapping AROUND the glass; without the contact shadow the orange butts
     flat against the aluminium and reads as a drawn outline. */
  .mockwrap .pf .screen{position:relative;width:var(--pw);height:var(--ph);
    border-radius:3.8em;overflow:hidden;line-height:0;z-index:1;background:#000;
    box-shadow:0 0 0 .3em #0c0e11, 0 0 0 .45em #c4682e, 0 0 0 .55em rgba(0,0,0,.42),
      0 0 1.1em .6em rgba(0,0,0,.62)}
  .mockwrap .pf .island{position:absolute;top:1.1em;left:50%;transform:translateX(-50%);
    width:32%;height:2.4em;background:#000;border-radius:1.4em;z-index:2}
  /* Buttons sit proud: outdented by their own width, with a directional shadow per side. */
  .mockwrap .pf .pf-btn{position:absolute;width:.4em;border-radius:.2em 0 0 .2em;z-index:0;
    background:linear-gradient(180deg,#41464e,#25292f 55%,#363b43);
    box-shadow:-.1em 0 .2em rgba(0,0,0,.5), inset 0 .1em 0 rgba(255,255,255,.16)}
  .mockwrap .pf .pf-btn.r{border-radius:0 .2em .2em 0;box-shadow:.1em 0 .2em rgba(0,0,0,.5)}
  .mockwrap .pf .pf-silent{left:-.4em;top:15%;height:5%}
  .mockwrap .pf .pf-volup{left:-.4em;top:23%;height:9%}
  .mockwrap .pf .pf-voldn{left:-.4em;top:34.5%;height:9%}
  .mockwrap .pf .pf-power{right:-.4em;top:26%;height:13%}


  /* ---- the judging screen on a small viewport ----
     MUST stay last in this file. These selectors have the same specificity as the frame
     rules above, so source order is the only thing that decides, and when this block sat
     earlier every override here silently lost.
     The canonical frame recipe says hide the device under 900px rather than let it shrink,
     and it is right: at 375px the band is a sliver and it reads as a phone drawn inside a
     phone. But display:none would also hide the words, and crawlable copy is the entire
     reason this screen is markup instead of a screenshot.
     So the DEVICE goes and the SCREEN stays: same content, same interactivity, rendered as
     a plain dark panel. Nobody needs a picture of a phone while holding one. */
  @media (max-width:900px){
    .mockwrap .pf{--pw:min(420px, 92vw)}
    .mockwrap .pf .frame{padding:0;background:none;border-radius:16px;
      box-shadow:0 18px 40px -26px rgba(20,21,23,.5)}
    .mockwrap .pf .pf-btn,.mockwrap .pf .island{display:none}
    /* The fake status bar and home indicator are DEVICE furniture. With the device gone
       they are a clock and a grey pill floating on a panel. The app's own nav row stays. */
    .mockwrap .mock-sbar,.mockwrap .mock-home{display:none}
    .mockwrap .mock-nav{padding-top:.7em}
    .mockwrap .pf .screen{border-radius:16px;border:1px solid #262a33;
      box-shadow:none;height:auto}
    /* Height follows the content instead of a device aspect, or a full-width panel would
       be 900px tall for no reason. */
    .mockwrap .mock{height:auto;font-size:calc(var(--pw) / 21)}
    .mockwrap .mock-hdr{padding:.8em .8em .55em}
    .mockwrap .mock-body{padding-bottom:.7em}
    .mockwrap .mock-commit{position:static;padding:.6em .72em .8em}
    /* Same trap as the commit bar: the tab bar is pinned to the bottom of a fixed-height
       screen, and this screen is content-height here, so it landed on the last card. */
    .mockwrap .vt-tabs{position:static;margin:.7em 0 .1em}
    .mockwrap .vt-body{padding-bottom:.2em}
  }

  /* ---- the Scoring Admin console, built as MARKUP ----
     Ported from scoring-admin-mockup.html (the redesign Michael signed off on), with fake
     pitch data. Tokens copied from that file so the two do not drift. Scoped under .adm.

     Same reasoning as the judge's seat: every number and label here stays crawlable, no real
     event's pilots or judges leak onto a marketing page, and it survives the next admin
     redesign. One scale unit off --aw so the whole console scales as one object. */
  .adm{--gold:#d3a03b;--charcoal:#1a1d23;--ink:#1f2329;--muted:#6b7280;--faint:#9aa0aa;
    --page:#f3f4f6;--line:#e6e7ea;--line-2:#d7d9dd;--chip:#f6f7f9;--danger:#c0392b;
    --live:#1f9254;--warn:#a4690f;--warn-bg:#fdf6e7;--warn-line:#f0dfb8;
    font-size:calc(min(760px, 84vw)/76);background:var(--page);color:var(--ink);
    display:grid;grid-template-columns:11.5em 1fr;text-align:left;line-height:1.35;
    font-family:var(--sans);-webkit-font-smoothing:antialiased}
  .adm-rail{background:#20232B;color:#AEB4BE;padding:1.1em .9em;font-size:.85em}
  .adm-rail b{display:block;color:#fff;font-size:1.05em;font-weight:700;margin-bottom:.15em}
  .adm-rail small{display:block;color:#79808c;font-size:.85em;margin-bottom:1.4em}
  .adm-rail u{display:block;text-decoration:none;font-size:.75em;letter-spacing:.09em;
    text-transform:uppercase;color:#6e7682;font-weight:700;margin:1.2em 0 .5em}
  .adm-rail span{display:block;padding:.42em .6em;border-radius:.45em;margin-bottom:.15em}
  .adm-rail span.on{background:#2c313b;color:#fff;font-weight:600}
  .adm-main{padding:1.3em 1.5em}
  .adm-h{display:flex;align-items:center;gap:.7em;margin-bottom:1.1em}
  .adm-h h3{margin:0;font-size:1.5em;font-weight:800;letter-spacing:-.02em}
  .adm-h .sp{margin-left:auto;display:flex;gap:.5em}
  .adm-btn{border:1px solid var(--line-2);background:#fff;border-radius:.5em;
    padding:.42em .75em;font-size:.8em;font-weight:600;color:var(--ink);white-space:nowrap}
  .adm-ctl{display:flex;align-items:center;gap:.8em;margin-bottom:1em}
  .adm-sel{border:1px solid var(--line-2);background:#fff;border-radius:.5em;
    padding:.45em .8em;font-size:.85em;font-weight:600;min-width:11em}
  .adm-rounds{display:inline-flex;background:var(--chip);border:1px solid var(--line);
    border-radius:.55em;padding:.18em;margin-left:auto;gap:.15em}
  .adm-rounds span{display:inline-flex;align-items:center;gap:.35em;padding:.32em .7em;
    border-radius:.42em;font-size:.78em;font-weight:700;color:var(--muted)}
  .adm-rounds span.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
  .adm-rounds i{width:.42em;height:.42em;border-radius:50%;background:#c9ced6}
  .adm-rounds i.done{background:var(--live)}
  .adm-rounds i.part{background:var(--gold)}
  .adm-rules{border:1px solid var(--line);border-radius:.6em;overflow:hidden;display:grid;
    grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);margin-bottom:1.1em}
  .adm-rules div{background:#fff;padding:.6em .7em}
  .adm-rules u{display:block;text-decoration:none;font-size:.62em;letter-spacing:.07em;
    text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:.3em}
  .adm-rules b{display:block;font-size:.8em;font-weight:700;line-height:1.25}
  .adm-attn{display:inline-flex;align-items:center;gap:.45em;color:var(--warn);
    background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:.5em;
    padding:.42em .7em;font-size:.78em;font-weight:600;margin-bottom:1em}
  .adm-panel{background:#fff;border:1px solid #EAEAEA;border-radius:.7em;overflow:hidden;
    box-shadow:0 1px 3px rgba(20,22,26,.06),0 6px 18px rgba(20,22,26,.04)}
  .adm-ph{background:#E5E5E5;border-bottom:1px solid #C2C2C2;padding:.65em .9em;
    display:flex;align-items:baseline;gap:.6em}
  .adm-ph b{font-size:1em;font-weight:800;letter-spacing:-.015em}
  .adm-ph small{font-size:.75em;color:#4B5563;font-weight:600}
  .adm-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.8em}
  .adm-tbl th{background:#fafbfc;border-bottom:1px solid var(--line-2);padding:.55em .85em;
    font-size:.78em;font-weight:700;color:var(--muted);text-align:left;letter-spacing:.05em;
    text-transform:uppercase;white-space:nowrap}
  .adm-tbl th.n{text-align:right}
  .adm-tbl td{border-bottom:1px solid var(--line);padding:.7em .85em;vertical-align:middle}
  .adm-tbl tr:last-child td{border-bottom:0}
  .adm-tbl tr.part{background:#fefbf3}
  .adm-rk{width:2em;height:2em;border-radius:50%;background:var(--charcoal);color:#fff;
    font-size:.95em;font-weight:800;display:flex;align-items:center;justify-content:center;
    font-variant-numeric:tabular-nums}
  .adm-rk.none{background:#eceef1;color:var(--faint);font-weight:700}
  .adm-ent b{display:block;font-size:.95em;font-weight:700;letter-spacing:-.01em}
  .adm-ent .num{display:inline-block;padding:0 .4em;border-radius:.3em;background:var(--chip);
    border:1px solid var(--line);font-size:.75em;font-weight:700;color:var(--muted);
    margin-right:.45em;font-variant-numeric:tabular-nums}
  .adm-ent small{display:block;font-size:.8em;color:var(--muted);margin-top:.15em}
  .adm-jc{display:flex;gap:.35em;flex-wrap:wrap}
  .adm-jc span{display:inline-flex;flex-direction:column;border:1px solid var(--line);
    border-radius:.5em;padding:.28em .5em .32em;background:#fff;min-width:4.6em}
  .adm-jc small{font-size:.68em;color:var(--faint);font-weight:700;letter-spacing:.03em;
    text-transform:uppercase;white-space:nowrap}
  .adm-jc b{font-size:.9em;font-weight:700;font-variant-numeric:tabular-nums}
  .adm-jc .hi b{color:var(--live)}
  .adm-jc .lo b{color:var(--danger)}
  .adm-jc .miss{border-style:dashed;border-color:var(--line-2);background:#fbfbfc}
  .adm-jc .miss b{font-size:.78em;font-weight:600;color:var(--muted);font-style:italic}
  .adm-need{display:block;font-size:.75em;color:var(--muted);margin-top:.3em}
  .adm-n{text-align:right;font-variant-numeric:tabular-nums}
  .adm-n b{font-size:1.25em;font-weight:700;letter-spacing:-.01em}
  .adm-n small{display:block;font-size:.72em;color:var(--muted);margin-top:.15em}
  .adm-n .off{font-size:.85em;font-weight:600;color:var(--muted);font-style:italic}
  .adm-foot{display:flex;gap:.6em;padding:.6em .9em;font-size:.75em;color:var(--muted);
    border-top:1px solid var(--line)}
  .adm-foot span:last-child{margin-left:auto;text-align:right}
  @media (max-width:900px){
    .adm{grid-template-columns:1fr;font-size:calc(min(760px, 90vw)/62)}
    .adm-rail{display:none}
    .adm-rules{grid-template-columns:repeat(2,1fr)}
  }

  /* ---- the fan voting ballot, built as MARKUP ----
     Matched to the real capture (assets/img/a-fan-casting-a-vote-on-a-ballot-c-e3ae68.jpg):
     a live countdown strip, the ballot card with its sponsor slot, search plus Cast Vote,
     the remaining-votes line, entry cards with a checkbox each, and the bottom tab bar.

     Shares .mock, .mock-sbar and .mock-nav with the judge's seat so the two screens cannot
     drift apart. `.flat` because this screen has no entry photo behind it. Entry thumbnails
     are initials, not stock photos: a marketing page should not invent a team's faces. */
  .mock.flat{background:#0d0d0f}
  .vt-live{display:flex;align-items:center;gap:.45em;background:#141519;
    padding:.55em .8em;font-size:.72em;color:#d6d9de;font-weight:500}
  .vt-live i{width:.5em;height:.5em;border-radius:50%;background:#e0392b;flex:none}
  .vt-live b{font-weight:700;color:#fff}
  .vt-live .vt-pill{margin-left:auto;background:#2ea44f;color:#fff;font-weight:800;
    font-size:.82em;letter-spacing:.06em;border-radius:999px;padding:.24em .7em}
  .vt-body{padding:.7em .68em 0;display:flex;flex-direction:column;gap:.55em}
  .vt-ballot{display:flex;gap:.6em;background:#1c1d21;border-radius:.7em;padding:.75em .8em}
  .vt-ballot b{display:block;color:#e2762e;font-size:.95em;font-weight:800;letter-spacing:-.01em}
  .vt-ballot p{margin:.28em 0 0;font-size:.75em;color:#9aa0aa;line-height:1.35;max-width:none}
  .vt-sponsor{flex:none;text-align:center;border-left:1px solid #2a2c31;padding-left:.7em}
  .vt-sponsor small{display:block;font-size:.6em;color:#8b929c;margin-bottom:.3em}
  /* The sponsor mark is an SVG with a viewBox, so its text scales WITH the box and can never
     spill out of it. The HTML-text version overflowed the white plate the moment the name was
     longer than the plate was wide. textLength pins the width whatever font resolves. */
  .vt-sponsor svg{display:block;width:3.7em;height:2.5em}
  .vt-row{display:flex;gap:.5em;align-items:center}
  .vt-search{flex:1;background:#1c1d21;border:1px solid #2a2c31;border-radius:999px;
    padding:.5em .9em;font-size:.75em;color:#7d838d}
  .vt-cast{flex:none;background:#cf6b2a;color:#fff;font-weight:800;font-size:.78em;
    border-radius:.5em;padding:.55em 1em}
  .vt-left{margin:.1em 0 0;font-size:.72em;color:#9aa0aa}
  .vt-left b{color:#fff;font-weight:800}
  .vt-card{display:flex;align-items:center;gap:.6em;background:#1a1b1f;border:1px solid #26282d;
    border-radius:.7em;padding:.55em .6em}
  /* Team marks, not faces. These entries are companies, so a brand mark is the honest
     avatar: it invents no photograph of a person who does not exist, and it scales as
     vector rather than shipping four more images. */
  .vt-thumb{position:relative;flex:none;width:3.1em;height:2.6em;border-radius:.35em;
    display:flex;align-items:center;justify-content:center;overflow:hidden}
  .vt-thumb svg{width:78%;height:78%;display:block}
  .vt-thumb u{position:absolute;left:.15em;bottom:.1em;text-decoration:none;font-size:.62em;
    font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9)}
  .vt-meta{flex:1;min-width:0}
  .vt-meta b{display:block;color:#fff;font-size:.8em;font-weight:700;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
  .vt-meta small{display:block;font-size:.7em;color:#9aa0aa;margin-top:.2em}
  .vt-meta em{display:block;font-style:normal;font-size:.72em;color:#7d838d;margin-top:.2em}
  .vt-box{flex:none;width:1.85em;height:1.85em;border-radius:.28em;background:#8a8d93}
  .vt-box.on{background:#fff;display:flex;align-items:center;justify-content:center}
  .vt-box.on svg{width:1.3em;height:1.3em;color:#2ea44f}
  /* The app's real bottom nav: a dark pill holding Scores / Vote / Contestants, with Judge
     as a SEPARATE circular button alongside it. Taken from the contestant-list capture on
     the homepage, not invented. */
  .vt-tabs{position:absolute;left:.5em;right:.5em;bottom:.45em;display:flex;align-items:center;gap:.45em}
  .vt-bar{flex:1;display:flex;justify-content:space-around;align-items:center;
    background:#1e1f23;border-radius:999px;padding:.42em .5em}
  .vt-tabs span span,.vt-bar span{display:flex;flex-direction:column;align-items:center;gap:.12em;
    font-size:.58em;font-weight:600;color:#9aa0aa;white-space:nowrap}
  .vt-bar span.on{color:#cf6b2a}
  .vt-judge{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.12em;width:3.5em;height:3.5em;border-radius:50%;background:#26282d;
    font-size:.58em;font-weight:600;color:#c9ced6}
  .vt-tabs svg{width:1.45em;height:1.45em}
  .vt-judge svg{width:1.5em;height:1.5em}

  /* ---- the official score report, built as MARKUP ----
     Ported from the science fair deck's slide 10. Sized off a width variable rather than
     container queries: `container-type:inline-size` with an auto margin collapses to a
     zero-width box, which that deck learned the hard way.
     Every figure is computed by the build from the per-judge marks, so the column a director
     adds up always reconciles. */
  .doc{background:#fff;border-radius:10px;color:#1a1d24;text-align:left;
    font-size:calc(min(720px, 86vw)/62);line-height:1.35;padding:2.4em 2.6em 1.6em;
    font-family:var(--sans);box-shadow:0 24px 60px -34px rgba(20,21,23,.4)}
  .doc b{color:#1a1d24}
  .doc-h{display:flex;align-items:center;gap:1.2em}
  .doc-logo{flex:none;width:4.6em;height:4.6em;border-radius:50%;display:grid;place-items:center;
    background:radial-gradient(circle at 32% 28%,#3f6ea8,#1e3c63);color:#fff}
  .doc-logo svg{width:2.7em;height:2.7em}
  .doc-ev{flex:1;text-align:center}
  .doc-ev b{display:block;font-size:1.75em;font-weight:800;letter-spacing:-.01em}
  .doc-ev span{display:block;font-size:.95em;color:#6b7280;margin-top:.2em}
  .doc-off{text-align:right;flex:none}
  .doc-off span{display:block;font-size:.78em;font-weight:700;letter-spacing:.12em;color:#9aa0aa}
  .doc-off b{display:block;font-size:1.25em;font-weight:800}
  .doc-rule{height:2px;background:#1a1d24;margin:1.15em 0 1.25em}
  .doc-top{display:grid;grid-template-columns:1fr auto auto;gap:.85em;align-items:stretch}
  .doc-card{border:1px solid #e6e8ec;border-radius:8px;padding:1em 1.15em;background:#fdfdfc}
  .doc-lbl{font-size:.78em;font-weight:700;letter-spacing:.12em;color:#9aa0aa}
  .doc-num{display:inline-block;background:#1a1d24;color:#fff;font-size:.85em;font-weight:700;
    border-radius:5px;padding:.16em .5em;margin:.5em 0 .35em}
  .doc-name{font-size:1.6em;font-weight:800;letter-spacing:-.01em}
  .doc-cls{font-size:1em;font-weight:700;margin-top:.15em}
  .doc-place{background:#1a1d24;color:#fff;border-radius:8px;padding:1em 1.5em;text-align:center;
    display:flex;flex-direction:column;justify-content:center}
  .doc-place .doc-lbl{color:#b6bcc6}
  .doc-place b{display:block;color:#fff;font-size:2.5em;font-weight:800;line-height:1.05;margin:.05em 0 .18em}
  .doc-tie{display:inline-block;background:#c9a227;color:#1a1d24;font-size:.72em;font-weight:800;
    letter-spacing:.1em;border-radius:999px;padding:.2em .7em}
  .doc-fin{background:#faf5e8;border:1px solid #ecdfbc;border-radius:8px;padding:1em 1.5em;
    text-align:center;display:flex;flex-direction:column;justify-content:center}
  .doc-fin b{display:block;font-size:2.5em;font-weight:800;line-height:1.05;color:#8a6d1f}
  .doc-fin i{font-style:normal;font-size:.85em;color:#9aa0aa}
  .doc-sec{display:flex;align-items:baseline;justify-content:space-between;margin:1.35em 0 .3em}
  .doc-sec b{font-size:1.15em;font-weight:800}
  .doc-sec span{font-size:.9em;font-weight:700;color:#8a6d1f}
  .doc-t{width:100%;border-collapse:collapse;font-size:.95em}
  .doc-t th{font-size:.82em;font-weight:700;letter-spacing:.1em;color:#9aa0aa;text-align:right;padding:.5em .4em}
  .doc-t th:first-child{text-align:left}
  .doc-t td{padding:.55em .4em;text-align:right;border-top:1px solid #eef0f3;font-weight:700;
    font-variant-numeric:tabular-nums}
  .doc-t td:first-child{text-align:left}
  .doc-t .wt{display:inline-block;background:#faf1dc;color:#8a6d1f;font-size:.8em;font-weight:800;
    border-radius:999px;padding:.1em .5em;margin-left:.45em}
  .doc-t .avg{background:#faf7ef;color:#8a6d1f}
  .doc-t tr.tot td{border-top:2px solid #1a1d24;font-size:1.02em;padding-top:.7em}
  .doc-t tr.tot td:first-child{font-size:.85em;letter-spacing:.1em}
  .doc-f3{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid #e6e8ec;border-radius:8px;
    margin-top:1.15em;overflow:hidden}
  .doc-f3>div{padding:.85em 1.1em;border-right:1px solid #e6e8ec}
  .doc-f3>div:last-child{border-right:0;background:#faf5e8}
  .doc-f3 b{display:block;font-size:1.3em;font-weight:800;margin-top:.2em}
  .doc-f3>div:last-child b{color:#8a6d1f}
  @media (max-width:900px){
    .doc{font-size:calc(min(720px, 92vw)/46);padding:1.6em 1.4em 1.2em}
    .doc-top{grid-template-columns:1fr}
    .doc-f3{grid-template-columns:1fr}
    .doc-f3>div{border-right:0;border-bottom:1px solid #e6e8ec}
  }

  /* ---- the printed entry tag ----
     Matched to Michael's real printed sheet: class mark, a boxed entry number that reads
     from across the aisle, entry and owner, then TWO QR panels with black caption bars,
     one for judges and one for spectators, over an event/date footer.
     The QR codes are REAL and resolve to app.livejudge.com. They are generated once with
     segno and committed as SVG, so neither the build nor CI carries the dependency. */
  .tag{background:#fff;border-radius:12px;color:#111;text-align:center;
    font-size:calc(min(560px, 82vw)/40);padding:2.4em 2em 1.4em;font-family:var(--sans);
    box-shadow:0 24px 60px -34px rgba(20,21,23,.4)}
  .tag-brand{display:inline-flex;align-items:center;justify-content:center;
    background:#111;color:#fff;border-radius:.5em;padding:.5em .9em;
    font-size:.8em;font-weight:800;letter-spacing:.16em}
  .tag-num{border:.28em solid #111;border-radius:1.5em;margin:1.4em 0 1.1em;
    padding:.15em 0 .3em;font-size:1em;line-height:1}
  .tag-num b{font-size:5.2em;font-weight:800;letter-spacing:-.03em}
  .tag-name{font-size:1.55em;font-weight:800;letter-spacing:-.02em;line-height:1.15}
  .tag-owner{font-size:1.05em;font-weight:600;color:#4b5563;margin-top:.3em}
  .tag-qrs{display:flex;justify-content:center;gap:1.5em;margin-top:1.9em}
  .tag-qr{flex:0 0 auto;width:9.5em}
  .tag-qr .hd{background:#111;color:#fff;border-radius:.55em .55em 0 0;
    font-size:.85em;font-weight:800;letter-spacing:.14em;padding:.42em 0}
  .tag-qr .box{border:1px solid #e6e8ec;border-top:0;border-radius:0 0 .55em .55em;padding:.7em}
  .tag-qr svg{display:block;width:100%;height:auto}
  .tag-qr .cap{font-size:.72em;font-weight:600;color:#4b5563;margin-top:.55em}
  .tag-foot{display:flex;align-items:center;justify-content:space-between;gap:.8em;
    border-top:1px solid #eef0f3;margin-top:2.2em;padding-top:.9em;
    font-size:.75em;color:#6b7280}
  .tag-foot b{color:#111;font-weight:700}
  .tag-foot .by{display:inline-flex;align-items:center;gap:.4em}
  .tag-foot .by img{height:1.5em;width:auto;display:block}
  @media (max-width:900px){
    .tag{font-size:calc(min(560px, 90vw)/34);padding:1.8em 1.2em 1.1em}
    .tag-qrs{gap:1em}
    .tag-qr{width:8em}
  }

  /* PCSC standards band (use-cases/pitch-competitions) */
  .pcsc-band{background:#012249}
  .pcsc-band .wrap{display:flex;align-items:center;gap:clamp(20px,3.5vw,40px);
    padding-top:clamp(18px,2.4vw,26px);padding-bottom:clamp(18px,2.4vw,26px)}
  .pcsc-band img{height:clamp(56px,7vw,74px);width:auto;flex:none;display:block}
  .pcsc-band .txt{flex:1;min-width:0}
  .pcsc-band .txt h2{margin:0;font-size:clamp(1rem,1.6vw,1.16rem);font-weight:800;letter-spacing:-.015em;
    line-height:1.3;color:#fff;text-wrap:balance}
  .pcsc-band .txt p{margin:5px 0 0;font-size:.93rem;line-height:1.5;color:#A8B6CC;text-wrap:pretty;max-width:62ch}
  .pcsc-band .btn{flex:none;font-size:.92rem;padding:12px 22px;white-space:nowrap}
  @media (max-width:820px){
    .pcsc-band .wrap{flex-wrap:wrap;row-gap:16px}
    .pcsc-band img{height:52px}
    .pcsc-band .txt{flex:1 1 100%;order:2}
    .pcsc-band .btn{order:3}
  }