/* Lander "bold" layer: brand-board energy on top of the existing homepage.
   Decorative only; every element added for it is aria-hidden. Tokens are re-scoped, not overridden globally. */
:root{--px-g:#0a7d43;--px-t:#d9e2dc;--px-f:#1d1d1f;--px-c:#d93a5a;--board:#0C0F0D;--hair:color-mix(in srgb,var(--text) 14%,transparent)}
:root[data-theme="dark"]{--px-g:#2FD27A;--px-t:#2a3a30;--px-f:#F2F5F3;--px-c:#FF5C7A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--px-g:#2FD27A;--px-t:#2a3a30;--px-f:#F2F5F3;--px-c:#FF5C7A}}

/* Hero: bigger type, CRT scanlines, faint pixel grid */
.hero2{padding:56px 0 56px}
.hero2 h1{font-size:clamp(44px,8.2vw,104px);line-height:.98;letter-spacing:-.045em}
.hero2::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--text) 6%,transparent) 0 1px,transparent 1px 3px);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);
          mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000 30%,transparent 80%);opacity:.9}
.hud{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin:0 auto 22px}
.hud svg{width:28px;height:28px;display:block}
.rr-rec{display:inline-flex;align-items:center;gap:7px;font:400 19px/1 var(--pixel);letter-spacing:.08em;color:var(--text);
  border:1px solid var(--hair);padding:5px 10px 4px;border-radius:4px}
.rr-rec::before{content:"";width:9px;height:9px;border-radius:50%;background:#e5333f}
.hud-bar{width:120px;height:6px;background:var(--px-t);position:relative}
.hud-bar i{position:absolute;inset:0 auto 0 0;width:63%;background:var(--px-g)}
.hud-bar b{position:absolute;top:-5px;left:63%;width:6px;height:16px;background:var(--px-f);transform:translateX(-50%)}
.hud-bar::after{content:"";position:absolute;right:-6px;top:-4px;width:3px;height:14px;background:var(--px-c)}

/* Dark board panels: re-scope tokens so existing content renders unchanged on the board */
.device,.loop,.board{--text:#F2F5F3;--muted:#9aa59f;--line:#26302a;--panel:#111613;--panel2:#0f1411;--ink:#0C0F0D;--ink2:#151b17;
  --px-g:#2FD27A;--px-t:#2a3a30;--px-f:#F2F5F3;--px-c:#FF5C7A;
  background:var(--board) !important;color:var(--text);border:1px solid #26302a !important;border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -30px rgba(0,0,0,.45);position:relative}
.device::after,.loop::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.device-bar .rr-live{margin-left:auto;font-size:15px;padding:3px 7px 2px}
.device-bar{display:flex;align-items:center;gap:6px}
.streambar{background:#2a3a30 !important;position:relative}
.streambar::after{content:"";position:absolute;right:0;top:-4px;width:3px;height:calc(100% + 8px);background:#FF5C7A}

/* Section rhythm: graphic scrubber dividers */
.rr-div{max-width:1080px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:14px;color:var(--muted);font:400 18px/1 var(--pixel)}
.rr-div svg{width:22px;height:22px;flex:none}
.rr-div .tr{flex:1;height:4px;background:var(--px-t);position:relative}
.rr-div .tr i{position:absolute;inset:0 auto 0 0;background:var(--px-g)}
.rr-div .tr b{position:absolute;top:-6px;width:6px;height:16px;background:var(--px-f);transform:translateX(-50%)}
.rr-div .tr::after{content:"";position:absolute;right:0;top:-5px;width:3px;height:14px;background:var(--px-c)}
.rr-div + section{padding-top:72px}
section:has(+ .rr-div){padding-bottom:72px}

/* Kickers and steps in pixel type */
.kicker{font-family:var(--pixel) !important;font-size:22px !important;letter-spacing:.06em !important;
  border-radius:4px !important;border-color:color-mix(in srgb,var(--go,var(--green)) 45%,var(--line)) !important;color:var(--px-g) !important}
.kicker::before{content:"";display:inline-block;width:7px;height:7px;background:var(--px-g);margin-right:8px;vertical-align:1px}
.step-n{font-family:var(--pixel) !important;font-size:26px !important;letter-spacing:.06em;color:var(--px-g) !important}
section h2{font-size:clamp(32px,4.6vw,56px);letter-spacing:-.035em}

/* Cards: board-like hairline panels with pixel corner ticks */
.grid3 .card,.flow .card{position:relative;border:1px solid var(--hair) !important;border-radius:14px}
.grid3 .card::after,.flow .card::after{content:"";position:absolute;top:-1px;left:18px;width:28px;height:3px;background:var(--px-g)}
.ill,.ill-sm{image-rendering:pixelated}
.ill{background:var(--board) !important;border:1px solid #26302a;max-height:170px}
.ill .pg{fill:#2FD27A}.ill .pt{fill:#2a3a30}.ill .pf{fill:#F2F5F3}.ill .pc{fill:#FF5C7A}.ill .pm{fill:#9aa59f}
.ill text,.ill-sm text{font-family:VT323,monospace;font-size:16px}
.ill-sm{display:block;width:72px;height:40px;margin:0 0 16px}
.ill-sm .pg{fill:var(--px-g)}.ill-sm .pt{fill:var(--px-t)}.ill-sm .pf{fill:var(--px-f)}.ill-sm .pc{fill:var(--px-c)}

/* Chat snippet panel */
.board{max-width:560px;margin:34px auto 0;padding:18px;display:grid;gap:10px;text-align:left}
.board .bh{display:flex;align-items:center;gap:8px;font:400 17px/1 var(--pixel);color:var(--muted);letter-spacing:.06em}
.board .bh .rr-live{font-size:14px;padding:3px 6px 2px;margin-left:auto}
.bub{max-width:88%;padding:9px 12px;border-radius:10px 10px 10px 3px;background:#151b17;border:1px solid #26302a;font-size:15px;line-height:1.4}
.bub b{font:400 17px/1 var(--pixel);color:#FF5C7A;margin-right:6px;font-weight:400}
.bub.me{justify-self:end;border-radius:10px 10px 3px 10px;background:color-mix(in srgb,#2FD27A 12%,#111613);border-color:color-mix(in srgb,#2FD27A 35%,#26302a)}
.bub .rr-ts{font-size:17px;padding:3px 7px 2px;margin-right:8px}

/* Pricing: popular tier gets the board treatment edge */
.tier.pop{outline:1px solid color-mix(in srgb,var(--px-g) 60%,transparent);outline-offset:-1px}
.price{font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .hero2{padding:36px 0 40px}
  .hud{gap:8px;margin-bottom:16px} .hud-bar{width:72px}
  .rr-div{padding:0 18px;font-size:16px} .rr-div .lbl-end{display:none}
  .rr-div + section{padding-top:52px} section:has(+ .rr-div){padding-bottom:52px}
  .board{margin-top:26px;padding:14px}
}
@media (prefers-reduced-motion:no-preference){
  .hud-bar i{animation:rrfill 1.2s steps(12,end) both .3s}
  .hud-bar b{animation:rrhead 1.2s steps(12,end) both .3s}
  @keyframes rrfill{from{width:0}} @keyframes rrhead{from{left:0}}
}
.device .tile,.device .device-bar span:not(.rr-live){background:#111613 !important;border-color:#26302a !important;color:#F2F5F3}
.device .tile span{color:#9aa59f}
.qchip .s{margin-right:.4em}