/* Case study pages + /services/. One shared stylesheet rather than 39 inline
   copies - and linking it keeps style-src at 'self' for these pages instead of
   leaning on the 'unsafe-inline' the main page needs.
   Palette is the live brand - VICE NIGHT: indigo-black ground, a pink-to-orange
   sunset for the identity moments, orange for figures, teal for live state -
   the same tokens as index.html (keep the two in step).
   Type follows the main page's three registers: Big Shoulders Display is the
   DISPLAY voice, JetBrains Mono the LABEL voice, the system sans reads. */
@font-face{font-family:'Big Shoulders Display';
  src:url('/fonts/BigShouldersDisplay-latin-wght.woff2') format('woff2') tech('variations'),
      url('/fonts/BigShouldersDisplay-latin-wght.woff2') format('woff2-variations');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-500-latin.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/JetBrainsMono-700-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JBM Fallback';src:local('Consolas');
  size-adjust:109.13%;ascent-override:93.47%;descent-override:27.49%;line-gap-override:0%}
:root{
  --ink:#0A0A14; --ink-2:#11111E; --ink-3:#18182A;
  --paper:#F4F2FB; --muted:#A5A2C2; --line:#232339; --line-2:#34345A;
  --pink:#FF2F87; --orange:#FF8A2A; --money:#FFA24A;
  --accent:#FF2F87; --accent-soft:#FF74B3; --accent-dim:rgba(255,47,135,.13);
  --grad:linear-gradient(100deg,#FF2F87 0%,#FF6A3D 55%,#FFB84A 100%);
  --grad-v:linear-gradient(180deg,#FF2F87 0%,#FF7A3A 60%,#FFC24A 100%);
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.065);
  --grid:rgba(165,162,194,.05); --grid-major:rgba(165,162,194,.085);
  --sans:'Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','JBM Fallback','Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;
  --display:'Big Shoulders Display',Impact,'Arial Narrow',Haettenschweiler,sans-serif;
  --wrap:760px; --r:14px; --r-sm:10px; --r-pill:999px; --snap:cubic-bezier(.35,0,.1,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;position:relative;isolation:isolate}
body::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 10% -120px,rgba(255,47,135,.18),transparent 62%),
    radial-gradient(640px 460px at 100% 60px,rgba(255,138,42,.12),transparent 60%)}
::selection{background:var(--pink);color:#fff}
a{color:var(--accent-soft)}
a:hover{color:var(--paper)}
h1,h2{letter-spacing:-.02em;text-wrap:balance;margin:0}

.top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:16px 22px;border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(10,10,20,.6);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  position:sticky;top:0;z-index:10}
.brand{font:800 19px/1 var(--display);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);
  text-decoration:none}
.brand:hover{color:var(--paper)}
.top nav{display:flex;gap:18px;flex-wrap:wrap}
.top nav a{font:500 12px/1.35 var(--mono);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  color:var(--muted)}
.top nav a:hover{color:var(--paper)}

main{max-width:var(--wrap);margin:0 auto;padding:34px 22px 10px}
.crumb{margin:0 0 22px;font:400 12px/1.6 var(--mono);color:var(--muted)}
.crumb a{text-decoration:none}
.crumb span{margin:0 7px;opacity:.5}

/* LABEL register + the same stamp language as the main page's section numbers. */
.eyebrow{margin:0 0 12px;font:500 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-soft)}
.eyebrow::before{content:'[case] ';color:var(--muted);letter-spacing:.04em}
.case h1{font:800 clamp(34px,6.4vw,58px)/.98 var(--display);letter-spacing:.005em;text-transform:uppercase;
  margin-bottom:18px}
.lede{margin:0 0 26px;font-size:17px;line-height:1.72;color:var(--paper);text-wrap:pretty}
main > h1{font:800 clamp(34px,6.4vw,58px)/.98 var(--display);letter-spacing:.005em;text-transform:uppercase;
  margin-bottom:14px}

/* Pink means one thing here too: this is where the fault was named. */
.outcome{position:relative;padding:20px 22px;border:1px solid var(--line-2);
  border-radius:var(--r);overflow:hidden;
  background:linear-gradient(90deg,var(--accent-dim),transparent 72%),var(--glass);margin:0 0 22px}
.outcome::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-v)}
.outcome h2{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-soft);margin-bottom:7px}
.outcome p{margin:0;font-size:15.5px}

.who{margin:0 0 30px;font-size:14px;color:var(--muted)}
.who strong{color:var(--paper);font-weight:600}

.cta{padding:26px;border:1px solid var(--line-2);border-radius:var(--r);
  background:radial-gradient(420px 220px at 100% 0%,rgba(255,138,42,.16),transparent 60%),
    linear-gradient(135deg,var(--accent-dim),transparent 68%),var(--glass);margin:0 0 30px}
.cta h2{font:700 clamp(24px,3vw,30px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin-bottom:10px}
.cta p{margin:0 0 14px;color:var(--muted);font-size:14.5px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin:0!important}
.btn{display:inline-block;padding:12px 20px;border-radius:var(--r-pill);background:var(--grad);color:#fff;
  text-decoration:none;font-weight:600;font-size:14px;box-shadow:0 10px 26px -10px rgba(255,47,135,.65);
  transition:transform .16s,filter .16s}
.btn:hover{filter:brightness(1.08);color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--glass);border:1px solid var(--line-2);color:var(--paper);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent-soft)}

.related h2,.group h2{font:500 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.group h2 span{display:inline-block;margin-left:6px;font:400 12px/1 var(--mono);letter-spacing:.04em;
  color:var(--money);font-variant-numeric:tabular-nums}
.group h2 span::before{content:'['}
.group h2 span::after{content:']'}
.related ul{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:9px}
.related a{font-size:14.5px;text-decoration:none}
.related a:hover{text-decoration:underline}

.group{margin:0 0 36px}
.cases{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.cases li{position:relative;padding:17px 19px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  transition:border-color .15s var(--snap),background .15s}
.cases li:hover{border-color:var(--line-2);background:var(--glass-2)}
.cases a{font-weight:600;font-size:15.5px;text-decoration:none;color:var(--paper)}
.cases li:hover a{color:var(--accent-soft)}
.cases p{margin:6px 0 0;font-size:14px;color:var(--muted);line-height:1.62}

.foot{max-width:var(--wrap);margin:0 auto;padding:26px 22px 44px;border-top:1px solid var(--line);
  margin-top:30px;position:relative}
.foot::before{content:'';position:absolute;left:22px;right:22px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--pink) 30%,var(--orange) 70%,transparent);opacity:.7}
.foot p{margin:0;font:400 12.5px/1.9 var(--mono);color:var(--muted)}

@media (max-width:560px){
  main{padding:26px 18px 6px}
  .cta{padding:20px}
  .btn{flex:1 1 auto;text-align:center}
}

/* /fix/ pages — console lines, numbered steps, a severity tag. Added 2026-09-16. */
.fix pre{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);
  font:400 13px/1.6 var(--mono);color:var(--paper);white-space:pre-wrap;word-break:break-word}
.fix code,.fix .outcome p code{font:400 .92em/1.2 var(--mono);color:var(--money);background:var(--ink-3);padding:1px 5px;border-radius:5px}
.fix ol{margin:0;padding-left:22px}
.fix ol li{margin:0 0 10px;line-height:1.65}
.fix dl{margin:14px 0 0;display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;font-size:14px}
.fix dt{color:var(--muted);font:500 11px/1.8 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.fix dd{margin:0;line-height:1.6}
.sev{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;vertical-align:2px;
  font:500 10.5px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--muted)}
.sev.critical,.sev.high{color:var(--accent-soft);border-color:rgba(255,47,135,.45)}
@media (max-width:560px){.fix dl{grid-template-columns:1fr;gap:2px 0}.fix dt{margin-top:8px}}
.fix .eyebrow::before{content:'[fix] '}

/* /up/ — the uptime page and the badge index. Added 2026-09-16. */
.up-big{font:800 clamp(44px,7vw,72px)/1 var(--display);letter-spacing:.01em;color:var(--paper);margin:4px 0 14px}
.up-big small{display:block;margin-top:6px;font:400 13px/1.4 var(--mono);color:var(--muted);letter-spacing:.04em}
.up-bar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:96px;margin:0 0 14px}
.up-day{display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0}
.up-day i{display:block;width:100%;border-radius:4px 4px 0 0;background:var(--pink);min-height:0}
.up-day b{margin-top:6px;font:400 10.5px/1 var(--mono);color:var(--muted);text-align:center;letter-spacing:.06em;text-transform:uppercase}
.up-badge{margin:0 0 10px}
.up-badge img{display:inline-block;vertical-align:middle;image-rendering:auto}
.up pre{margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);
  font:400 12.5px/1.6 var(--mono);color:var(--paper);white-space:pre-wrap;word-break:break-all}
.up-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 28px}
.up-form label{font:500 13px/1 var(--mono);color:var(--muted)}
.up-form input{flex:1 1 180px;min-width:0;padding:12px 14px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--paper);font:400 14px/1.4 var(--mono)}
.up-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.up .eyebrow::before{content:'[up] '}

/* /nuevavida/ — the server Serverside runs. Added 2026-10-05. */
.nv-actions{margin:0 0 18px}
.nv-live{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin:0 0 26px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2);font:400 13px/1.5 var(--mono);color:var(--muted)}
.nv-led{width:9px;height:9px;border-radius:50%;background:var(--muted);align-self:center;box-shadow:0 0 0 3px rgba(165,162,194,.15)}
.nv-live.on .nv-led{background:#2FE3B4;box-shadow:0 0 0 3px rgba(47,227,180,.18),0 0 10px rgba(47,227,180,.6)}
.nv-players{font:800 22px/1 var(--display);color:var(--paper);letter-spacing:.02em}
.nv-list{list-style:none;margin:0;padding:0}
.nv-list li{padding:9px 0 9px 22px;border-bottom:1px solid var(--line);position:relative;line-height:1.6}
.nv-list li:last-child{border-bottom:none}
.nv-list li::before{content:'';position:absolute;left:2px;top:16px;width:8px;height:8px;border-radius:50%;background:var(--grad)}
.nv .eyebrow::before{content:'[live] '}
/* the hidden attribute must win over .btn and .nv-live display rules until nv.js has a join code */
.nv [hidden]{display:none!important}
/* /nuevavida/ join steps */
.nv-steps{margin:0;padding-left:22px}
.nv-steps li{margin:0 0 12px;line-height:1.65}
.nv-steps code{font:400 .92em/1.2 var(--mono);color:var(--money);background:var(--ink-3);padding:1px 5px;border-radius:5px}

/* /rent/ — the rental offer in full, with its request form. Added 2026-10-05. */
.rent-tiers{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rent-tiers li{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ink-2)}
.rent-tiers b{display:block;font:800 22px/1.2 var(--display);letter-spacing:.02em;color:var(--paper);margin:0 0 8px}
.rent-tiers p{margin:0}
.rent details{border-bottom:1px solid var(--line);padding:4px 0}
.rent summary{cursor:pointer;padding:10px 0;font-weight:600;color:var(--paper)}
.rent details p{margin:0 0 14px;color:var(--muted)}
.rent-form{display:grid;gap:14px;margin-top:6px}
.rent-form label{display:grid;gap:6px;font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rent-form .req{color:var(--accent-soft);margin-left:6px}
.rent-form input,.rent-form select,.rent-form textarea{width:100%;padding:12px 14px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:var(--r-sm);color:var(--paper);font:400 14.5px/1.5 var(--sans)}
.rent-form input:focus,.rent-form select:focus,.rent-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.rent-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rent-form .btns{margin:4px 0 0;align-items:center}
.rent-note{font:400 13px/1.4 var(--mono);color:var(--muted)}
.rent-note.err{color:var(--accent-soft)}
.rent .eyebrow::before{content:'[rent] '}
.access .eyebrow::before{content:'[read] '}

/* /checklist/ — the weekly owner checklist. Added 2026-10-05. */
.ck-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 26px}
.ck-count{font:500 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--money);margin-right:auto}
.ck-list{list-style:none;margin:0;padding:0}
.ck-list li{padding:10px 0;border-bottom:1px solid var(--line)}
.ck-list li:last-child{border-bottom:none}
.ck-list label{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer;line-height:1.6}
.ck-list input{width:18px;height:18px;margin:4px 0 0;accent-color:var(--pink);cursor:pointer}
.ck-list li.done span{color:var(--muted)}
.ck-list li.done strong{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--pink)}
.ck .eyebrow::before{content:'[weekly] '}
@media print{.top,.foot,.no-print,.cta{display:none!important}.ck-list input{accent-color:#000}body{background:#fff;color:#000}.case h1,.outcome h2{color:#000}.outcome{border-color:#ccc}}

/* ── Game-site layout (2026-10-17) ─ the same pass as the home page: pure
   black, borderless dark tiles, bold mixed-case titles, pastel-pink pill
   buttons. The condensed face stays on the wordmark only. Layout borrowed
   from rockstargames.com at bryan's request; none of its brand is. */
:root{
  --ink:#000; --ink-2:#0E0E0E; --ink-3:#161616;
  --paper:#FFFFFF; --muted:#A8A8A8; --line:#1F1F1F; --line-2:#333;
  --glass:#121212; --glass-2:#1A1A1A; --blush:#F7A8C8;
  --r:12px; --r-sm:8px;
  --title:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
}
body{background:#000}
body::before{content:none}
.top{background:rgba(0,0,0,.92);border-bottom:0}
.top nav a{font:700 13px/1.35 var(--title);letter-spacing:.01em;color:#fff;opacity:.85}
.top nav a:hover{opacity:1}
.eyebrow{font:700 12.5px/1.6 var(--title);letter-spacing:.02em;color:#fff;opacity:.9}
.case h1,main > h1{font:700 clamp(32px,5.6vw,54px)/1.06 var(--title);letter-spacing:-.025em;text-transform:none}
.cta h2{font:700 clamp(22px,2.8vw,28px)/1.1 var(--title);letter-spacing:-.02em;text-transform:none}
.up-big,.nv-players,.rent-tiers b{font-family:var(--title);letter-spacing:-.025em}
.cta{border-color:transparent;background:var(--glass)}
.cases li{border-color:transparent}
.btn{background:var(--blush);color:#000;font:700 15px/1.25 var(--title);box-shadow:none}
.btn:hover{background:#fff;color:#000;filter:none}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,.55);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}