:root{
    --bg:#f5f5f2;
    --paper:#ffffff;
    --ink:#0f0f0f;
    --ink-2:#2a2a2a;
    --muted:#666;
    --rule:#d8d8d4;
    --rule-2:#e8e8e4;
    --signal:#c4431e;  /* single spot color */
    --green:#0d7a3c;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    background: var(--bg);
    color: var(--ink);
    font-family:"Inter", system-ui, sans-serif;
    font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "ss01","cv11";
}
.mono{ font-family:"JetBrains Mono", monospace;}
.wrap{ max-width: 1320px; margin: 0 auto; padding: 0 32px;}

/* #1113 layout pass: single-row site header. The old standalone meta
   row (url + sponsor) is collapsed inline — brand + tagline anchor the
   left, a flex-spacer pushes sponsor + Console button to the right.
   Tagline and sponsor text hide at narrow widths so the brand and
   Console button still fit cleanly. */
.site-header{
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    position: sticky; top: 0; z-index: 40;
}
.site-header .inner{
    max-width: 1320px; margin: 0 auto;
    display: flex; align-items: center;
    padding: 0 32px;
}
.site-header .inner.nav{
    padding-top: 14px; padding-bottom: 14px;
    gap: 20px;
}
.site-header .nav-tagline,
.site-header .nav-sponsor{
    font-family:"JetBrains Mono"; font-size: 11px; letter-spacing: .04em;
    color: var(--muted);
    white-space: nowrap;
}
.site-header .nav-sponsor{
    /* small vertical rule keeps the sponsor text visually distinct
       from the Console button to its right. */
    padding-right: 16px;
    border-right: 1px solid var(--rule);
    margin-right: 4px;
}
.site-header .nav-sponsor a{
    /* subtle link — inherits muted color, dotted underline so it
       reads as a link without shouting. Hover/focus brightens. */
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}
.site-header .nav-sponsor a:hover,
.site-header .nav-sponsor a:focus{ color: var(--ink); text-decoration: underline solid;}
.site-header .nav-spacer{ flex: 1 1 auto;}
.brand{ display:flex; align-items:center; gap: 10px; text-decoration:none; color:inherit;}
.brand .mark{
    width: 28px; height: 28px; border: 1.5px solid var(--ink);
    display:grid; place-items:center; font-weight: 700; font-size: 14px;
    font-family:"Inter";
}
.brand .name{
    font-family:"Inter"; font-weight: 600; font-size: 16px;
    letter-spacing: -.01em; white-space: nowrap;
}
.brand .name .dot{ color: var(--signal);}
.signin{
    font-size: 13px; font-weight: 600;
    background: var(--ink); color: #fff;
    padding: 8px 14px; border-radius: 4px;
    text-decoration: none;
}
.signin:hover{ background: var(--signal);}

/* Section header helpers */
.sh{
    display: grid; grid-template-columns: 180px 1fr; gap: 32px;
    padding: 40px 0 20px;
    border-top: 1px solid var(--rule);
}
.sh .label{
    font-family:"JetBrains Mono"; font-size: 11px; letter-spacing: .08em;
    color: var(--muted); text-transform: uppercase;
}
.sh h2{
    font-family:"Inter"; font-weight: 700; font-size: 44px; line-height: 1.05;
    letter-spacing: -.03em; margin: 0;
    max-width: 780px;
}
.sh h2 em{ font-style: normal; color: var(--signal);}
.sh .lede{ margin-top: 14px; font-size: 17px; max-width: 680px; color: var(--ink-2);}

/* ---- HERO ---- */
.hero{ padding: 56px 0 40px;}
.hero .grid{
    display:grid; grid-template-columns: 1fr 380px; gap: 32px;
    align-items: start;
}
.hero .label{
    font-family:"JetBrains Mono"; font-size: 11px; letter-spacing:.08em;
    color: var(--muted); text-transform: uppercase;
}
h1.title{
    font-family:"Inter"; font-weight: 700;
    font-size: clamp(48px, 6.4vw, 96px);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 0;
    max-width: 820px;
}
h1.title em{ font-style: normal; color: var(--signal);}
.hero .sub{
    font-size: 18px; line-height: 1.55;
    margin-top: 28px; max-width: 640px;
    color: var(--ink-2);
}
/* #1168 polish: inline "Optimized" pill-badge used in the hero sub-copy.
   Signal-orange chip with white ink, small caps letter-spacing, tight
   vertical rhythm so it rides the baseline cleanly inside a paragraph.
   Sized proportional to the 18px hero body — not a screamer. */
.optimized-badge, .standard-badge{
    display: inline-block; color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1.2;
    padding: 2px 8px; border-radius: 4px;
    text-transform: uppercase; letter-spacing: .04em;
    vertical-align: 1px;
}
.optimized-badge{ background: var(--signal); }
.standard-badge{ background: var(--ink-2); }
.game-card .sku .optimized-badge{ align-self: center; vertical-align: 0; font-size: 10px; }
.hero .sub a{
    color: var(--signal);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.hero .sub a:hover,
.hero .sub a:focus{ color: var(--ink);}
.hero .cta-row{ display:flex; gap: 12px; margin-top: 28px;}
.btn{
    display: inline-flex; align-items:center; gap: 8px;
    font-family:"Inter"; font-weight: 500; font-size: 15px;
    padding: 12px 18px;
    background: var(--ink); color: #fff;
    border: 1px solid var(--ink);
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s;
}
.btn:hover{ background: var(--signal); border-color: var(--signal);}
.btn.ghost{ background: transparent; color: var(--ink);}
.btn.ghost:hover{ background: var(--ink); color: #fff;}
.btn:disabled{ background: #ccc; border-color: #ccc; color: #888; cursor: not-allowed;}
.btn:disabled:hover{ background: #ccc; border-color: #ccc; color: #888;}

/* right column datasheet — key facts */
.facts{
    border: 1px solid var(--rule); background: var(--paper);
    font-family:"JetBrains Mono"; font-size: 12px;
}
.facts .row{
    display:grid; grid-template-columns: 1fr 1fr;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
}
.facts .row:last-child{ border-bottom: 0;}
.facts .k{ color: var(--muted); letter-spacing: .04em; text-transform: uppercase; font-size: 11px;}
.facts .v{ font-weight: 500; color: var(--ink);}
.facts .v.signal{ color: var(--signal);}
.facts .v.dot::before{
    content:""; display:inline-block; width:8px; height:8px; background: var(--green);
    border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.facts h4{
    font-family:"Inter"; font-weight: 600; font-size: 13px;
    margin: 0; padding: 12px 16px;
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
    display: flex; justify-content: space-between;
}
.facts h4 span{ color: var(--muted); font-family:"JetBrains Mono"; font-size: 11px; font-weight: 400;}

/* ---- GAMES ---- */
section.games-section{ padding: 0;}
.games{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.game-card{
    text-decoration: none; color: var(--ink);
    background: var(--paper);
    border-right: 1px solid var(--rule);
    padding: 28px;
    display: flex; flex-direction: column;
    transition: background .15s;
    position: relative;
}
.game-card:last-child{ border-right: 0;}
.game-card:hover{ background: var(--bg);}
.game-card .sku{
    display:flex; justify-content: space-between;
    font-family:"JetBrains Mono"; font-size: 11px; color: var(--muted);
    letter-spacing: .04em; text-transform: uppercase;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
}
.game-card .sku .status{
    color: var(--green); font-weight: 500;
}
.game-card .sku .status::before{
    content:""; display:inline-block; width:7px; height:7px;
    background: var(--green); border-radius: 50%;
    margin-right: 6px; vertical-align: middle;
}

.game-card h3{
    font-family:"Inter"; font-weight: 700;
    font-size: 32px; line-height: 1.05; letter-spacing: -.025em;
    margin: 22px 0 6px;
}
.game-card .tagline{ color: var(--muted); font-size: 14px;}

.game-card .ill{
    width: 100%; height: 140px; margin: 22px 0;
    background: var(--bg);
    border: 1px solid var(--rule);
    object-fit: cover; display: block;
}

.game-card dl{
    margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr 1fr;
    font-family:"JetBrains Mono"; font-size: 12px;
}
.game-card dl .pair{ padding: 10px 0; border-top: 1px solid var(--rule); display:flex; flex-direction: column; gap: 2px;}
.game-card dl dt{ color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;}
.game-card dl dd{ margin: 0; font-weight: 500;}

.game-card .foot{
    margin-top: auto; padding-top: 18px;
    border-top: 1px solid var(--rule);
    display:flex; justify-content: space-between; align-items: center;
}
.game-card .price{ font-family:"Inter"; display:flex; align-items: baseline; gap: 4px;}
.game-card .price .big{ font-weight: 700; font-size: 24px; letter-spacing: -.02em;}
.game-card .price .per{ font-size: 12px; color: var(--muted);}
.game-card .arrow{
    width: 36px; height: 36px;
    background: var(--ink); color: #fff;
    display: grid; place-items: center;
    border-radius: 4px; font-size: 14px;
    transition: background .12s;
}
.game-card:hover .arrow{ background: var(--signal);}

/* #1113 landing CTAs: .soon is the alpha-state dimmed-card variant.
   Reduces opacity on the illustration + dl pairs to signal "not yet
   available" without breaking clickability — the card still links
   through to the per-game landing where visitors can join the
   waitlist. The .early-access status badge replaces the default
   "Optimized" dot + signal-green tint with a muted amber treatment. */
.game-card.soon .ill{ opacity: .45;}
.game-card.soon dl, .game-card.soon .tagline{ opacity: .55;}
.game-card .sku .status.early-access{ color: #c89128;}
.game-card .sku .status.early-access::before{ background: #c89128;}

/* ---- PITCH / WHY ---- */
section.pitch{ padding: 60px 0; background: var(--paper); border-top: 1px solid var(--rule);}
.pitch .grid{
    display: grid; grid-template-columns: 180px 1fr 1fr; gap: 32px;
}
.pitch .label{
    font-family:"JetBrains Mono"; font-size: 11px; letter-spacing:.08em;
    color: var(--muted); text-transform: uppercase;
}
.pitch h2{
    font-family:"Inter"; font-weight: 700; font-size: 44px;
    line-height: 1.05; letter-spacing: -.03em; margin: 0;
}
.pitch h2 em{ font-style: normal; color: var(--signal);}
.pitch p{ font-size: 16px; color: var(--ink-2);}
.pitch ul{ list-style: none; padding: 0; margin: 20px 0 0;}
.pitch ul li{
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    font-size: 15px;
    display: grid; grid-template-columns: 28px 1fr; gap: 8px;
}
.pitch ul li:last-child{ border-bottom: 1px solid var(--rule);}
.pitch ul li::before{
    content:"→"; color: var(--signal); font-family:"JetBrains Mono";
}

/* ---- KIT ---- */
section.kit{ padding: 40px 0 56px; border-bottom: 1px solid var(--rule);}
.kit-grid{
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--rule);
    margin-top: 20px;
}
.kit-card{
    padding: 28px;
    border-right: 1px solid var(--rule);
    display: flex; flex-direction: column;
}
.kit-card:last-child{ border-right: 0;}
.kit-card .num{
    font-family:"JetBrains Mono"; font-size: 11px; color: var(--muted);
    letter-spacing: .08em; margin-bottom: 20px;
}
.kit-card h3{
    font-family:"Inter"; font-weight: 700; font-size: 20px;
    letter-spacing: -.02em; margin: 0 0 10px;
    line-height: 1.1;
}
.kit-card p{ font-size: 14px; color: var(--ink-2); margin: 0; line-height: 1.55;}
.kit-card b{ color: var(--ink); font-weight: 600;}

/* ---- CONFIGURE (calculator) ---- */
/* #1168 polish: tightened top padding (60→20px) so the configure form
   lifts up beneath the hero — the order form now sits closer to the
   fold without crushing either section. Bottom padding stays at 60
   for the transition into the games strip. Grid template matches the
   hero's (1fr 380px) so .config-cart right-edge aligns with .facts
   right-edge when stacked vertically — same .wrap container + same
   gap = perfect column registration. */
section.configure{ padding: 20px 0 60px;}
.config-grid{
    display: grid; grid-template-columns: 1fr 380px; gap: 32px;
    margin-top: 24px;
}
.config-form,
.config-cart{
    border: 1px solid var(--rule);
    background: var(--paper);
    padding: 28px;
}
.config-form h4,
.config-cart h4{
    font-family:"Inter"; font-weight: 600; font-size: 13px;
    margin: 0 0 20px; padding: 0 0 12px;
    border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between;
}
.config-form h4 span,
.config-cart h4 span{ color: var(--muted); font-family:"JetBrains Mono"; font-size: 11px; font-weight: 400;}

.cfg-field{ margin-bottom: 18px; border: 0; padding: 0; min-width: 0;}
.cfg-field > label,
.cfg-field > legend{
    display: block;
    font-family:"JetBrains Mono"; font-size: 11px; letter-spacing: .08em;
    color: var(--muted); text-transform: uppercase;
    margin: 0 0 8px; padding: 0;
}
.cfg-field select{
    display: block; width: 100%; padding: 10px 12px;
    border: 1px solid var(--rule); background: var(--paper);
    font-family:"Inter"; font-size: 15px; color: var(--ink);
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230f0f0f' stroke-width='1.5' fill='none'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    padding-right: 36px;
}
.cfg-field select:focus{ outline: 1px solid var(--ink); outline-offset: -1px;}
.cfg-radio-group{ display: flex; gap: 20px; flex-wrap: wrap;}
.cfg-radio-group label{
    font-family:"Inter"; font-size: 14px; color: var(--ink);
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.cfg-radio-group input[type="radio"]{
    appearance: none; -webkit-appearance: none;
    width: 14px; height: 14px; border: 1.5px solid var(--rule); border-radius: 50%;
    margin: 0; cursor: pointer; position: relative;
    flex-shrink: 0;
}
.cfg-radio-group input[type="radio"]:checked{ border-color: var(--ink);}
.cfg-radio-group input[type="radio"]:checked::after{
    content: ""; position: absolute;
    inset: 3px; background: var(--ink); border-radius: 50%;
}
/* #1159-rebase: disabled region radio (capacity=0 or enabled=false) */
.cfg-radio-group input[type="radio"]:disabled{
    border-color: var(--rule); opacity: 0.45; cursor: not-allowed;
}
.cfg-radio-group label:has(input[type="radio"]:disabled){
    color: var(--muted); cursor: not-allowed;
}

.cfg-hint{
    font-family:"JetBrains Mono"; font-size: 12px; color: var(--muted);
    margin: 0 0 18px; padding: 12px; background: var(--bg);
    border-left: 2px solid var(--rule);
}
.cfg-selected{
    margin-bottom: 18px; font-family: "Inter"; font-size: 18px; font-weight: 600;
    display: flex; align-items: center; gap: 10px;
}
/* #1113: renamed from .badge-community — the public-facing word for a
   row with is_preserved=true is now "Optimized" (single axis with
   tier='primary'). Internal DB columns keep their is_preserved /
   tier names; the UI always reads Optimized. */
.badge-optimized{
    font-family:"JetBrains Mono"; font-size: 10px; text-transform: uppercase;
    color: var(--signal); border: 1px solid var(--signal); padding: 2px 6px;
    letter-spacing: .08em; font-weight: 400;
}
.cfg-hint-sm{
    font-size: 12px; color: var(--muted); margin: 6px 0 0;
}
.cfg-hint-sm strong{ color: var(--ink); font-weight: 600;}

.cfg-cost-row{
    display: flex; align-items: baseline; gap: 10px;
    margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--rule);
    flex-wrap: wrap;
}
.cfg-cost-num{ font-family:"Inter"; font-weight: 700; font-size: 28px; letter-spacing: -.02em; color: var(--ink);}
.cfg-cost-unit{ font-family:"JetBrains Mono"; font-size: 12px; color: var(--muted);}
.cfg-cost-row .btn{ margin-left: auto;}

/* Cart right-column */
.config-cart .cart-empty{
    font-family:"JetBrains Mono"; font-size: 12px; color: var(--muted); margin: 0;
}
.cfg-total{
    margin-top: 22px; display: flex; align-items: baseline; gap: 8px;
    padding-top: 18px; border-top: 1px solid var(--rule);
}
.cfg-total-num{ font-family:"Inter"; font-weight: 700; font-size: 36px; letter-spacing: -.03em; color: var(--ink);}
.cfg-total-unit{ font-family:"JetBrains Mono"; font-size: 12px; color: var(--muted);}
.cfg-breakdown{ font-family:"JetBrains Mono"; font-size: 11px; color: var(--muted); margin: 4px 0 0;}
.cfg-tax-note{ font-family:"JetBrains Mono"; font-size: 10px; color: var(--muted); margin: 2px 0 14px;}

#gs-checkout-btn{ width: 100%; justify-content: center;}

/* Calculator-rendered order items (see gs-calculator.js renderOrderList) */
#gs-order-list .gs-order-item{
    display: flex; align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    font-size: 14px; gap: 8px;
}
#gs-order-list .gs-order-item:first-child{ border-top: 0;}
#gs-order-list .gs-order-item .btn{
    padding: 4px 8px; font-size: 11px; min-height: 0;
    background: transparent; color: var(--muted); border-color: var(--rule);
}
#gs-order-list .gs-order-item .btn:hover{
    background: var(--signal); border-color: var(--signal); color: #fff;
}

/* ---- RECRUIT ---- */
section.recruit{
    padding: 80px 0;
    background: var(--ink); color: #fff;
    text-align: center;
}
.recruit .grid{ display:grid; grid-template-columns: 1fr; gap: 32px; align-items: center;}
/* #1113 layout pass: .recruit-center re-centers the tagline that used
   to left-align inside its grid column. text-align:center on the
   wrapper handles both h2 and any future inline content. */
.recruit .recruit-center{ text-align: center;}
.recruit .label{
    font-family:"JetBrains Mono"; font-size: 11px; letter-spacing: .08em;
    color: #888; text-transform: uppercase;
}
.recruit h2{
    font-family:"Inter"; font-weight: 700;
    font-size: clamp(44px, 6vw, 80px); line-height: 1.02; letter-spacing: -.035em;
    margin: 0; color: #fff;
}
.recruit h2 em{ font-style: normal; color: var(--signal);}

/* ---- FOOTER ---- */
footer{ padding: 40px 0 24px; font-size: 13px; color: var(--muted);}
footer .cols{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;}
footer h4{
    font-family:"JetBrains Mono"; font-size: 11px; letter-spacing: .08em;
    color: var(--ink); text-transform: uppercase; margin: 0 0 10px;
}
footer a{ color: var(--ink); text-decoration: none; display:block; padding: 3px 0; font-size: 14px;}
footer a:hover{ color: var(--signal);}
footer .brand .name{ font-size: 16px; color: var(--ink);}
footer .tagline{ margin-top: 12px; max-width: 340px;}
footer .bot{
    display:flex; justify-content: space-between; gap: 20px;
    margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--rule);
}

@media (max-width: 1200px){
    .kit-grid{ grid-template-columns: 1fr 1fr;}
    .kit-card:nth-child(even){ border-right: 0; }
}

@media (max-width: 1060px){
    .hero .grid{ grid-template-columns: 1fr;}
    .sh{ grid-template-columns: 1fr;}
    .games{ grid-template-columns: 1fr; border-right: 0;}
    .game-card{ border-right: 0; border-bottom: 1px solid var(--rule);}
    .pitch .grid, .recruit .grid{ grid-template-columns: 1fr;}
    .config-grid{ grid-template-columns: 1fr;}
    footer .cols{ grid-template-columns: 1fr 1fr;}
}

/* #1113 layout pass: at mobile widths the inline tagline + sponsor
   text are hidden so the brand + Console button still fit cleanly.
   The nav-spacer flex-fills on its own to keep the button pinned
   right; the sponsor's right-divider is also removed since nothing
   sits between it and the button's edge at that size. */
@media (max-width: 768px){
    .site-header .nav-tagline,
    .site-header .nav-sponsor{ display: none;}
    .kit-grid{ grid-template-columns: 1fr;}
    .kit-card{ border-right: 0; border-bottom: 1px solid var(--rule);}
    .kit-card:last-child{ border-bottom: 0;}
}