/* ============================================================
   Make It Crazy — shared styles
   Ink background, parchment text, crazy-red / orange / teal / yellow,
   CRT scanlines, Press Start 2P eyebrows, Space Grotesk, JetBrains Mono, Kalam.
   ============================================================ */

:root{
  --paper:#E4D9CC;
  --ink:#05050A;
  --crazy:#FF3D1F;
  --orange:#FF7A1F;
  --blue:#3D8BFF;
  --yellow:#FFE347;
  --teal:#2DE8C9;
  --line:rgba(228,217,204,0.18);
  --muted:rgba(228,217,204,0.74);
  --soft:rgba(228,217,204,0.6);
  --accent:var(--teal);
  --accent-2:#9AF3E3;
}
body[data-app="sonda"]{ --accent:var(--blue); --accent-2:#8DB4FF; }
body[data-app="orbit"]{ --accent:var(--crazy); --accent-2:var(--orange); }

*{margin:0;padding:0;box-sizing:border-box;}
html{ scroll-behavior:auto; -webkit-text-size-adjust:100%; }
/* smooth only for in-page jumps (nav.js adds the class on click); a permanent rule makes Firefox animate Back/Forward scroll restoration */
html.smooth-nav{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  min-height:100vh;
}
a{ color:inherit; text-decoration:none; }
img,svg{ max-width:100%; display:block; }
::selection{ background:var(--yellow); color:var(--ink); }
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

/* CRT scanlines + vignette, arcade-cabinet feel */
body::before{
  content:""; position:fixed; inset:0; z-index:997; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, rgba(0,0,0,0.085) 0px, rgba(0,0,0,0.085) 1px, transparent 1px, transparent 3px);
}
body::after{
  content:""; position:fixed; inset:0; z-index:996; pointer-events:none;
  box-shadow:inset 0 0 140px 30px rgba(0,0,0,0.5);
}
@media (max-width:700px){ body::after{ box-shadow:inset 0 0 64px 10px rgba(0,0,0,0.4); } } /* the big vignette swallowed the top of a phone screen */
#stars{ position:fixed; inset:0; z-index:0; pointer-events:none; image-rendering:pixelated; }

.skip{
  position:absolute; left:-999px; top:8px; z-index:2000;
  background:var(--yellow); color:var(--ink); padding:10px 14px;
  font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700;
}
.skip:focus{ left:8px; }

/* ===== NAV / LOGOTYPE ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:22px;
  padding:22px 5vw;
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
body.sub .nav{
  background:linear-gradient(180deg, rgba(5,5,10,0.94) 0%, rgba(5,5,10,0.7) 65%, rgba(5,5,10,0) 100%);
  padding-bottom:30px;
}
.brand-mark{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.orbit-icon{ position:relative; width:34px; height:34px; flex-shrink:0; }
.orbit-ring{
  position:absolute; inset:2px;
  border:1.5px dashed rgba(228,217,204,0.5);
  border-radius:50%;
  transform:rotate(-18deg) scaleY(0.52);
}
.orbit-core{
  position:absolute; top:50%; left:50%;
  width:7px; height:7px; margin:-3.5px;
  border-radius:50%; background:var(--yellow);
  box-shadow:0 0 10px 2px rgba(255,227,71,0.65);
}
.orbit-comet-wrap{ position:absolute; inset:2px; animation:orbit-spin 4.5s linear infinite; }
.orbit-comet{
  position:absolute; top:-2px; left:50%;
  width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%; background:var(--crazy);
  box-shadow:0 0 8px 2px rgba(255,61,31,0.75);
}
@keyframes orbit-spin{
  from{ transform:rotate(-18deg) scaleY(0.52) rotate(0deg); }
  to{ transform:rotate(-18deg) scaleY(0.52) rotate(360deg); }
}
.brand-text{ display:flex; flex-direction:column; gap:2px; line-height:1; }
.brand-line1{ font-family:'JetBrains Mono', monospace; font-size:9.5px; letter-spacing:3.5px; color:rgba(228,217,204,0.7); }
.brand-line2{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:19px; letter-spacing:0.5px; color:var(--paper);
  position:relative; width:fit-content;
}
.brand-line2::after{
  content:""; position:absolute; left:0; bottom:-4px;
  width:100%; height:2px;
  background:linear-gradient(90deg,var(--crazy),var(--yellow));
  transform-origin:left; transform:scaleX(0.75);
}

.score-hud{ margin-left:auto; text-align:right; font-family:'Press Start 2P', monospace; }
.score-row{ font-size:13px; color:var(--yellow); letter-spacing:1px; text-shadow:2px 2px 0 rgba(0,0,0,0.6); white-space:nowrap; }
.hiscore-row{ font-size:8px; color:rgba(228,217,204,0.6); margin-top:6px; letter-spacing:1px; }

/* ===== PRODUCTS BUTTON (top left, every page) ===== */
.menu-btn{
  position:relative; display:inline-flex; align-items:center; gap:12px; cursor:pointer; flex-shrink:0;
  padding:12px 14px; background:var(--ink); color:var(--paper);
  border:2px solid var(--paper); box-shadow:4px 4px 0 rgba(0,0,0,0.6);
  font-family:'Press Start 2P', monospace; font-size:9px; letter-spacing:1px; line-height:1; text-transform:uppercase;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.menu-btn:hover{ background:var(--paper); color:var(--ink); transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,0,0,0.6); }
.menu-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,0.6); }
.menu-btn::after{
  content:""; position:absolute; top:-6px; left:-6px; width:9px; height:9px; background:var(--crazy);
  box-shadow:0 0 10px 2px rgba(255,61,31,0.7); animation:coin-blink 1s steps(1) 6;
}
.menu-btn[aria-expanded="true"]::after{ display:none; }
@keyframes coin-blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
.menu-ico{ position:relative; display:block; width:16px; height:12px; }
.menu-ico i{ position:absolute; left:0; width:100%; height:2px; background:currentColor; transition:transform 0.25s ease, top 0.25s ease, opacity 0.2s ease; }
.menu-ico i:nth-child(1){ top:0; } .menu-ico i:nth-child(2){ top:5px; } .menu-ico i:nth-child(3){ top:10px; }
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(1){ top:5px; transform:rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] .menu-ico i:nth-child(3){ top:5px; transform:rotate(-45deg); }
html:not(.js) .menu-btn{ display:none; }
@media (max-width:900px){
  .nav{ gap:12px; padding:16px 5vw; }
  .score-hud .hiscore-row{ display:none; }
  .score-row{ font-size:10px; }
}
@media (max-width:520px){ .menu-ico{ display:none; } .menu-btn{ padding:10px 11px; } }
@media (max-width:420px){ .brand-text{ display:none; } }
@media (max-width:360px){ .score-row{ font-size:9px; } .nav{ gap:8px; } }

/* ===== SIDEBAR (opens from the left, from the PRODUCTS button) ===== */
.menu-backdrop{
  position:fixed; inset:0; z-index:998; background:rgba(5,5,10,0.66);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; visibility:hidden; transition:opacity 0.3s ease, visibility 0s linear 0.3s;
}
html.menu-open .menu-backdrop{ opacity:1; pointer-events:auto; visibility:visible; transition:opacity 0.3s ease, visibility 0s; }
html.menu-open{ overflow:hidden; }
html.menu-open .level-toast{ opacity:0 !important; }
.sidemenu{
  position:fixed; top:0; left:0; bottom:0; z-index:1000; width:min(440px, 100vw);
  display:flex; flex-direction:column; gap:8px; padding:20px 26px 30px;
  background:#07070d; border-right:2px solid rgba(228,217,204,0.28);
  box-shadow:34px 0 90px rgba(0,0,0,0.65);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(-104%); visibility:hidden;
  transition:transform 0.4s cubic-bezier(0.2,0.9,0.2,1), visibility 0s linear 0.4s;
}
html.menu-open .sidemenu{ transform:none; visibility:visible; transition:transform 0.4s cubic-bezier(0.2,0.9,0.2,1), visibility 0s; }
.sidemenu::before{
  content:""; position:fixed; top:0; left:0; bottom:0; width:min(440px, 100vw); pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
}
html:not(.js) .sidemenu, html:not(.js) .menu-backdrop{ display:none; }
.sidemenu .rise{ opacity:0; transform:translateX(-26px); }
html.menu-open .sidemenu .rise{
  opacity:1; transform:none;
  transition:opacity 0.35s ease, transform 0.35s cubic-bezier(0.2,0.9,0.2,1), background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  transition-delay:calc(var(--i, 0) * 45ms + 140ms), calc(var(--i, 0) * 45ms + 140ms), 0s, 0s, 0s, 0s;
}
.menu-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.menu-title{ font-family:'Press Start 2P', monospace; font-size:11px; color:var(--teal); letter-spacing:1px; line-height:1.5; }
.menu-close{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; background:transparent; color:var(--paper);
  border:2px solid var(--paper); padding:10px 12px; font-family:'Press Start 2P', monospace; font-size:9px; letter-spacing:1px; text-transform:uppercase; line-height:1;
}
.menu-close:hover{ background:var(--paper); color:var(--ink); }
.menu-group{
  display:flex; align-items:center; gap:14px; margin:16px 0 4px;
  font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--soft);
}
.menu-group::after{ content:""; flex:1; height:1px; background:var(--line); }

.mstage{
  --c:var(--teal);
  position:relative; display:flex; align-items:center; gap:16px; padding:16px 16px 16px 14px;
  border:2px solid var(--c); background:rgba(10,10,15,0.8); box-shadow:5px 5px 0 rgba(0,0,0,0.6); z-index:2;
}
.mstage-sonda{ --c:var(--blue); }
.mstage-orbit{ --c:var(--crazy); }
.mstage img{ flex:none; width:54px; height:54px; border-radius:14px; image-rendering:auto; }
.mstage-body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mstage-n{ font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:2px; color:var(--c); }
.mstage-t{ font-weight:700; font-size:1.35rem; text-transform:uppercase; letter-spacing:-0.3px; line-height:1.1; }
.mstage-s{ font-size:0.86rem; color:var(--muted); line-height:1.4; }
.mstage-b{ position:absolute; top:-12px; right:10px; background:#07070d; padding:6px 8px; font-size:7px; }
.mstage:hover, .mstage:focus-visible{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 rgba(0,0,0,0.6), 0 0 36px -6px var(--c); background:rgba(20,20,28,0.95); }
.mstage[aria-current="page"]{ background:linear-gradient(135deg, rgba(255,255,255,0.05), transparent); }
.mstage[aria-current="page"]::before{
  content:"YOU ARE HERE"; position:absolute; left:12px; bottom:-10px; padding:5px 7px; background:#07070d;
  border:1px solid var(--yellow); color:var(--yellow); font-family:'Press Start 2P', monospace; font-size:7px; letter-spacing:1px; line-height:1;
}
.mstage::after{ content:">"; position:absolute; right:14px; bottom:12px; font-family:'Press Start 2P', monospace; font-size:11px; color:var(--c); opacity:0; transform:translateX(-6px); transition:opacity 0.15s, transform 0.15s; }
.mstage:hover::after, .mstage:focus-visible::after{ opacity:1; transform:none; animation:coin-blink 0.9s steps(1) infinite; }

.mi{
  position:relative; z-index:2; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:10px;
  padding:11px 12px; border:1px solid transparent; border-bottom-color:var(--line);
  font-family:'JetBrains Mono', monospace; text-transform:uppercase;
}
.mi-n{ font-size:10px; letter-spacing:1px; color:var(--accent); }
.mi-t{ font-size:13px; letter-spacing:1.5px; color:var(--paper); font-weight:700; white-space:nowrap; }
.mi-s{ font-size:10px; letter-spacing:1px; color:var(--soft); text-align:right; }
.mi:hover, .mi:focus-visible{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.mi:hover .mi-n, .mi:hover .mi-t, .mi:hover .mi-s, .mi:focus-visible .mi-n, .mi:focus-visible .mi-t, .mi:focus-visible .mi-s{ color:var(--ink); }
.mi[aria-current="page"]{ border-left:3px solid var(--yellow); background:rgba(255,227,71,0.06); }
.mi[aria-current="page"] .mi-s{ color:var(--yellow); }
.mi[aria-current="page"] .mi-s::before{ content:"YOU ARE HERE · "; }
.mi-home{ border:2px dashed var(--line); margin-top:10px; }
.mi-home[aria-current="page"] .mi-s{ font-size:0; }
.mi-home[aria-current="page"] .mi-s::before{ content:"YOU ARE HERE"; font-size:10px; }
.menu-foot{ position:relative; z-index:2; margin-top:auto; padding-top:24px; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1px; line-height:1.9; color:var(--soft); }
.menu-foot kbd{ font-family:'Press Start 2P', monospace; font-size:8px; padding:3px 5px; border:1px solid var(--soft); color:var(--paper); }
@media (max-width:520px){
  .sidemenu{ padding:16px 18px 26px; }
  .mi-s{ display:none; }
  .mi{ grid-template-columns:34px 1fr; }
}

/* ===== PAGE-TO-PAGE WARP ===== */
.warp-veil{
  position:fixed; inset:0; z-index:10001; pointer-events:none; opacity:0; visibility:hidden;
  background:radial-gradient(circle at 50% 50%, rgba(45,232,201,0.22), rgba(5,5,10,0) 55%), #05050A;
}
html.warp-in .warp-veil{ visibility:visible; opacity:1; animation:veil-out 0.75s cubic-bezier(0.3,0.7,0.2,1) 0.1s forwards; }
@keyframes veil-out{ 0%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(1.3); visibility:hidden; } }
.warp-gate{ position:fixed; inset:0; z-index:10002; background:rgba(5,5,10,0); pointer-events:all; }
.warp-gate canvas{ position:absolute; inset:0; width:100%; height:100%; }
.warp-gate .warp-label{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center;
  font-family:'Press Start 2P', monospace; color:var(--paper); text-shadow:3px 3px 0 rgba(0,0,0,0.7);
}
.warp-label small{ display:block; font-size:9px; letter-spacing:2px; color:var(--yellow); margin-bottom:14px; }
.warp-label b{ display:block; font-size:clamp(16px, 3.2vw, 28px); letter-spacing:1px; font-weight:400; }
.warp-label .bar{ display:flex; gap:4px; justify-content:center; margin-top:22px; }
.warp-label .bar i{ width:14px; height:10px; background:rgba(228,217,204,0.18); }
.warp-label .bar i.on{ background:var(--warp-tint, var(--teal)); box-shadow:0 0 8px var(--warp-tint, var(--teal)); }

/* ===== TYPE ===== */
.eyebrow{
  font-family:'Press Start 2P', monospace; font-size:10px; font-weight:400;
  letter-spacing:1px; text-transform:uppercase; color:var(--accent); margin-bottom:18px;
  border-right:2px solid transparent; white-space:nowrap; overflow:hidden; text-overflow:clip;
  line-height:1.6; width:fit-content; max-width:100%;
}
.eyebrow.typing{ border-right-color:var(--accent); }
.title{
  font-weight:700; text-transform:uppercase;
  font-size:clamp(2.2rem, 5.6vw, 4.4rem);
  line-height:0.98; letter-spacing:-1.5px;
}
.title.sm{ font-size:clamp(1.7rem, 3.6vw, 2.8rem); letter-spacing:-1px; }
.wobble{ font-family:'Kalam', cursive; color:var(--accent); display:inline-block; transform:rotate(-2deg); text-transform:none; letter-spacing:0; }
.lead{ margin-top:24px; font-size:clamp(1rem, 1.5vw, 1.2rem); line-height:1.7; color:var(--muted); max-width:560px; }
.mono{ font-family:'JetBrains Mono', monospace; }

/* ===== LAYOUT ===== */
main{ position:relative; z-index:10; }
.wrap{ width:min(1120px, 88vw); margin:0 auto; }
.section{ padding:clamp(56px, 9vw, 110px) 0; position:relative; }
.section.tight{ padding:clamp(24px, 4vw, 44px) 0 clamp(36px, 6vw, 64px); }
.section-head{ margin-bottom:40px; max-width:720px; }
.hero{
  display:grid; grid-template-columns:1.08fr 0.92fr; gap:5vw; align-items:center;
  min-height:100vh; padding:130px 0 70px;
}
.hero-copy .btn-row{ margin-top:34px; }
.hero-art{ display:flex; flex-direction:column; align-items:center; gap:14px; }
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:0; padding-top:112px; gap:48px; }
}
.page-head{ padding:150px 0 30px; }
.page-head .lead{ max-width:680px; }
.divider{ border:0; border-top:1px solid var(--line); }

.reveal{ opacity:0; transform:translateY(34px); transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.reveal.in{ opacity:1; transform:none; }
html:not(.js) .reveal{ opacity:1; transform:none; }

/* ===== BUTTONS ===== */
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 22px; border:2px solid var(--paper); background:transparent; color:var(--paper);
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:12px;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  box-shadow:5px 5px 0 rgba(0,0,0,0.6);
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover{ background:var(--paper); color:var(--ink); transform:translate(-2px,-2px); box-shadow:7px 7px 0 rgba(0,0,0,0.6); }
.btn:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(0,0,0,0.6); }
.btn.primary{ border-color:transparent; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--ink); }
.btn.primary:hover{ background:var(--teal); color:var(--ink); }
.btn.ghost{ border-color:var(--line); color:var(--muted); }
.btn.disabled, .btn[aria-disabled="true"]{
  border-style:dashed; border-color:var(--line); color:var(--soft); cursor:default; box-shadow:none;
}
.btn.disabled:hover, .btn[aria-disabled="true"]:hover{ background:transparent; color:var(--soft); transform:none; box-shadow:none; }

/* ===== BADGES ===== */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Press Start 2P', monospace; font-size:8px; letter-spacing:1px; line-height:1;
  padding:8px 10px; border:2px solid var(--teal); color:var(--teal); text-transform:uppercase;
}
.badge .dot{ width:6px; height:6px; background:currentColor; animation:live-pulse 1.6s ease-in-out infinite; }
.badge.warn{ border-color:var(--yellow); color:var(--yellow); }
.badge.soon{ border-color:var(--soft); color:var(--soft); }
.badge.accent{ border-color:var(--accent); color:var(--accent); }
@keyframes live-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.4; transform:scale(0.7); } }
.badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }

/* ===== CARDS / GRIDS ===== */
.grid{ display:grid; gap:18px; }
.grid.c2{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid.c3{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.card{
  position:relative;
  border:1px solid var(--line); background:rgba(10,10,15,0.8);
  padding:26px 26px 28px;
}
.card::before{
  content:""; position:absolute; left:-1px; top:-1px; width:14px; height:14px;
  border-left:3px solid var(--accent); border-top:3px solid var(--accent);
}
.card h3{ font-size:1.1rem; text-transform:uppercase; letter-spacing:0.3px; line-height:1.25; margin-bottom:10px; }
.card p, .card li{ color:var(--muted); font-size:0.98rem; line-height:1.65; }
.card p + p{ margin-top:10px; }
.card .k{
  display:block; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:2px;
  text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.card ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.card ul li{ padding-left:20px; position:relative; }
.card ul li::before{ content:"▸"; position:absolute; left:0; color:var(--accent); }
.card.hot{ border-color:var(--accent); }

/* lanes (Sonda) */
.lane-now{ --accent:var(--blue); }
.lane-later{ --accent:var(--teal); }
.lane-noise{ --accent:#8a8a96; }

/* spec sheet */
.spec{ border:1px solid var(--line); background:rgba(10,10,15,0.62); }
.spec dl{ display:grid; grid-template-columns:minmax(120px, 200px) 1fr; }
.spec dt, .spec dd{ padding:14px 18px; border-bottom:1px solid var(--line); font-size:0.95rem; }
.spec dt{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--soft); display:flex; align-items:center; }
.spec dd{ color:var(--paper); }
.spec dt:nth-last-of-type(1), .spec dd:last-of-type{ border-bottom:0; }
@media (max-width:600px){
  .spec dl{ grid-template-columns:1fr; }
  .spec dt{ padding-bottom:2px; border-bottom:0; }
  .spec dd{ padding-top:2px; }
}

/* numbered steps */
.steps{ list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:14px; }
.steps li{
  counter-increment:step; position:relative; padding:16px 18px 16px 62px;
  border:1px solid var(--line); background:rgba(10,10,15,0.5); color:var(--muted); line-height:1.6;
}
.steps li::before{
  content:counter(step); position:absolute; left:16px; top:15px;
  width:30px; height:30px; display:grid; place-items:center;
  font-family:'Press Start 2P', monospace; font-size:10px; color:var(--ink); background:var(--accent);
}
.steps li strong{ color:var(--paper); }

/* ===== PHONE MOCKS (illustrations, drawn in HTML) ===== */
.phone{
  width:min(300px, 76vw); aspect-ratio:9 / 18.6; padding:9px;
  background:#0b0b10; border:3px solid #2a2a33; border-radius:42px;
  box-shadow:0 34px 90px rgba(0,0,0,0.65), 0 0 60px -10px var(--accent), inset 0 0 0 1px rgba(255,255,255,0.05);
  position:relative; flex-shrink:0;
}
.phone::before{
  content:""; position:absolute; top:14px; left:50%; width:78px; height:20px; margin-left:-39px;
  background:#0b0b10; border-radius:12px; z-index:3;
}
.phone .screen{ border-radius:32px; height:100%; overflow:hidden; position:relative; }
.phone-cap{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--soft); text-align:center; max-width:300px; }
.m-status{ display:flex; justify-content:space-between; padding:14px 22px 6px; font:600 11px -apple-system, system-ui, sans-serif; }

/* Sonda screen: post-office sorting counter, New York serif, blue */
.phone-sonda .screen{ background:#E6EEF9; color:#0C1A35; font-family:-apple-system, 'SF Pro Text', system-ui, sans-serif; }
.phone-sonda .m-head{ padding:6px 16px 0; }
.phone-sonda .m-title{ font:600 26px ui-serif, 'New York', Georgia, serif; }
.phone-sonda .m-chips{ display:flex; gap:6px; margin-top:8px; }
.phone-sonda .m-chips i{ font-style:normal; font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:99px; background:#F3F7FD; border:1px solid #C8D8EE; color:#4E6285; }
.phone-sonda .m-chips i.on{ background:#1A56DB; border-color:#1A56DB; color:#fff; }
.phone-sonda .m-tabs{ display:flex; gap:14px; padding:12px 16px 8px; border-bottom:1px solid #C8D8EE; font:600 11px ui-monospace, 'SF Mono', Menlo, monospace; color:#4E6285; }
.phone-sonda .m-tabs b{ font-weight:600; padding-bottom:6px; }
.phone-sonda .m-tabs b.on{ color:#1A56DB; border-bottom:2px solid #1A56DB; }
.phone-sonda .m-tabs u{ text-decoration:none; opacity:0.75; margin-left:3px; }
.phone-sonda .m-rows{ list-style:none; }
.phone-sonda .m-rows li{ display:flex; gap:10px; padding:11px 16px; border-bottom:1px solid #D8E5F5; }
.phone-sonda .av{ flex:none; width:32px; height:32px; border-radius:50%; background:#D3E1F6; color:#1A56DB; display:grid; place-items:center; font:700 11px -apple-system, system-ui, sans-serif; position:relative; }
.phone-sonda .av.unread::after{ content:""; position:absolute; right:-2px; top:-2px; width:9px; height:9px; border-radius:50%; background:#1A56DB; border:2px solid #E6EEF9; }
.phone-sonda .r1{ display:flex; justify-content:space-between; gap:8px; font-size:12px; }
.phone-sonda .r1 time{ font:500 10px ui-monospace, 'SF Mono', Menlo, monospace; color:#4E6285; }
.phone-sonda .subj{ font:600 12.5px ui-serif, 'New York', Georgia, serif; margin-top:1px; line-height:1.3; }
.phone-sonda .snip{ font-size:11px; color:#4E6285; line-height:1.35; margin-top:2px; }
.phone-sonda .tag{ display:inline-block; margin-top:5px; font:600 9.5px ui-monospace, 'SF Mono', Menlo, monospace; padding:2px 7px; border-radius:99px; background:#F3F7FD; border:1px solid #C8D8EE; color:#1A56DB; }
.phone-sonda .tag.later{ color:#087A6A; }
.phone-sonda .tag.noise{ color:#4E6285; }

/* Orbit screen: fintech grey canvas, one big number on the red→orange card */
.phone-orbit .screen{ background:#F3F4F7; color:#101114; font-family:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; }
.phone-orbit .o-hello{ padding:6px 18px 0; font-size:12px; color:#646876; }
.phone-orbit .o-hello strong{ display:block; font-size:19px; color:#101114; letter-spacing:-0.3px; }
.phone-orbit .o-total{ margin:12px 14px 0; border-radius:20px; padding:16px; color:#fff; background:linear-gradient(135deg,#DB3A1E,#C24A0E); box-shadow:0 10px 24px rgba(219,58,30,0.25); }
.phone-orbit .o-total span{ font-size:11px; font-weight:500; }
.phone-orbit .o-total strong{ display:block; font-size:30px; letter-spacing:-1px; line-height:1.1; margin:4px 0 10px; font-variant-numeric:tabular-nums; }
.phone-orbit .o-bars{ display:flex; align-items:flex-end; gap:3px; height:26px; }
.phone-orbit .o-bars i{ flex:1; border-radius:2px; background:rgba(255,255,255,0.35); height:4px; }
.phone-orbit .o-bars i.h{ background:#fff; }
.phone-orbit .o-sec{ margin:16px 18px 6px; font-size:11px; font-weight:700; color:#646876; letter-spacing:0.5px; text-transform:uppercase; }
.phone-orbit .o-rows{ list-style:none; margin:0 14px; background:#fff; border-radius:16px; overflow:hidden; }
.phone-orbit .o-rows li{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid #EEF0F4; }
.phone-orbit .o-rows li:last-child{ border-bottom:0; }
.phone-orbit .mono{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 10px -apple-system, system-ui, sans-serif; color:#fff; }
.phone-orbit .o-rows div{ flex:1; min-width:0; }
.phone-orbit .o-rows b{ display:block; font-size:12.5px; }
.phone-orbit .o-rows small{ font-size:10.5px; color:#646876; }
.phone-orbit .o-rows em{ font-style:normal; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.phone-orbit .o-tabbar{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-around; padding:10px 0 16px; background:rgba(255,255,255,0.92); border-top:1px solid #E3E5EB; font-size:9.5px; color:#80838F; font-weight:600; }
.phone-orbit .o-tabbar .on{ color:#101114; }

/* ===== LONG-FORM (policies, terms, support) ===== */
.prose{ max-width:760px; counter-reset:sec; }
.prose h2{
  counter-increment:sec;
  margin:2.6em 0 0.7em; padding-top:0.9em; border-top:1px solid var(--line);
  font-size:1.2rem; text-transform:uppercase; letter-spacing:0.3px; line-height:1.3; scroll-margin-top:100px;
}
.prose h2::before{
  content:counter(sec, decimal-leading-zero); font-family:'Press Start 2P', monospace; font-size:10px;
  color:var(--accent); margin-right:14px; vertical-align:2px;
}
.prose h3{ margin:1.7em 0 0.4em; font-size:1rem; letter-spacing:0.3px; color:var(--paper); scroll-margin-top:100px; }
.prose p, .prose li{ color:var(--muted); font-size:1.02rem; line-height:1.75; }
.prose p{ margin:0.8em 0; }
.prose ul, .prose ol{ margin:0.8em 0 0.8em 1.3em; display:flex; flex-direction:column; gap:0.4em; }
.prose strong{ color:var(--paper); font-weight:700; }
.prose a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--yellow); }
.prose code, code{ font-family:'JetBrains Mono', monospace; font-size:0.88em; background:rgba(228,217,204,0.1); padding:1px 6px; }
.dateline{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--soft); margin-top:22px; }
.summary{
  margin:34px 0 0; max-width:760px; padding:22px 24px 24px;
  border:2px solid var(--accent); background:rgba(10,10,15,0.7);
  box-shadow:6px 6px 0 rgba(0,0,0,0.55);
}
.summary .k{ font-family:'Press Start 2P', monospace; font-size:9px; letter-spacing:1px; color:var(--accent); display:block; margin-bottom:14px; line-height:1.6; }
.summary ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.summary li{ padding-left:22px; position:relative; color:var(--paper); line-height:1.6; }
.summary li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }
.callout{
  margin:1.4em 0; padding:16px 20px; border-left:4px solid var(--yellow); background:rgba(255,227,71,0.07);
}
.callout p{ margin:0; color:var(--paper); }
.callout.good{ border-color:var(--teal); background:rgba(45,232,201,0.07); }
.limited{
  margin:1.4em 0; padding:18px 22px; border:2px solid var(--blue); background:rgba(61,139,255,0.08);
}
.limited p{ color:var(--paper); margin:0; font-weight:500; }
.toc{ margin:34px 0 0; max-width:760px; border:1px solid var(--line); padding:18px 22px; background:rgba(10,10,15,0.5); }
.toc .k{ font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--soft); display:block; margin-bottom:10px; }
.toc ol{ list-style:none; counter-reset:t; columns:2; column-gap:30px; }
.toc li{ counter-increment:t; break-inside:avoid; padding:3px 0; font-size:0.95rem; }
.toc li::before{ content:counter(t, decimal-leading-zero) " "; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); margin-right:8px; }
.toc a{ color:var(--muted); }
.toc a:hover{ color:var(--teal); }
@media (max-width:640px){ .toc ol{ columns:1; } }
.table-wrap{ overflow-x:auto; margin:1.2em 0; border:1px solid var(--line); }
table.data{ width:100%; border-collapse:collapse; font-size:0.94rem; min-width:560px; }
table.data th{ text-align:left; font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--soft); padding:12px 14px; background:rgba(228,217,204,0.06); border-bottom:1px solid var(--line); }
table.data td{ padding:12px 14px; vertical-align:top; color:var(--muted); border-bottom:1px solid var(--line); line-height:1.55; }
table.data tr:last-child td{ border-bottom:0; }
table.data td:first-child{ color:var(--paper); font-weight:600; }

/* FAQ */
details.faq{ border:1px solid var(--line); background:rgba(10,10,15,0.55); margin-bottom:10px; }
details.faq summary{
  cursor:pointer; list-style:none; padding:16px 52px 16px 20px; position:relative;
  font-weight:700; text-transform:uppercase; letter-spacing:0.2px; font-size:0.95rem; line-height:1.4;
}
details.faq summary::-webkit-details-marker{ display:none; }
details.faq summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%);
  font-family:'Press Start 2P', monospace; font-size:14px; color:var(--accent);
}
details.faq[open] summary::after{ content:"–"; }
details.faq[open]{ border-color:var(--accent); }
details.faq .a{ padding:0 20px 18px; color:var(--muted); line-height:1.7; }
details.faq .a p + p{ margin-top:10px; }
details.faq .a a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }

.group-title{ font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--accent); margin:44px 0 14px; display:flex; align-items:center; gap:14px; }
.group-title::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ===== FOOTER ===== */
.site-footer{
  position:relative; z-index:10; margin-top:60px; padding:56px 6vw 40px;
  border-top:1px solid var(--line); background:rgba(5,5,10,0.86);
  font-family:'JetBrains Mono', monospace; font-size:12px;
}
.footer-grid{ width:min(1120px, 100%); margin:0 auto; display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:34px; }
.footer-grid h2{ font-size:10px; letter-spacing:3px; text-transform:uppercase; color:var(--soft); font-weight:500; margin-bottom:14px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer-grid a{ color:rgba(228,217,204,0.86); letter-spacing:0.5px; }
.footer-grid a:hover{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.footer-sig p{ margin-top:14px; color:var(--soft); line-height:1.7; letter-spacing:0.3px; max-width:300px; }
.footer-base{
  width:min(1120px, 100%); margin:38px auto 0; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px;
  color:var(--soft); letter-spacing:1px; text-transform:uppercase; font-size:10.5px;
}
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-sig{ grid-column:1 / -1; } }

/* ===== SCORE POPUP ===== */
.coin-pop{
  position:fixed; z-index:9998; pointer-events:none;
  font-family:'Press Start 2P', monospace; font-size:11px; color:var(--yellow);
  text-shadow:2px 2px 0 rgba(0,0,0,0.6);
  animation:coin-float 0.7s ease-out forwards;
}
@keyframes coin-float{ from{ transform:translate(-50%,-50%); opacity:1; } to{ transform:translate(-50%,-140%); opacity:0; } }

/* ===== 404 ===== */
.gameover{ min-height:100vh; display:grid; place-items:center; text-align:center; padding:120px 6vw 60px; position:relative; z-index:10; }
.gameover .big{ font-family:'Press Start 2P', monospace; font-size:clamp(1.6rem, 6vw, 3.4rem); line-height:1.3; color:var(--crazy); text-shadow:4px 4px 0 rgba(0,0,0,0.6); }
.gameover .count{ font-family:'Press Start 2P', monospace; font-size:clamp(3rem, 14vw, 7rem); color:var(--yellow); margin:26px 0 8px; text-shadow:5px 5px 0 rgba(0,0,0,0.6); }
.gameover p{ color:var(--muted); max-width:520px; margin:0 auto; }
.gameover .btn-row{ justify-content:center; margin-top:30px; }

/* ===== SMALL ADDITIONS FOR LEGAL / SUPPORT PAGES ===== */
.prose code, .prose li, .prose td{ overflow-wrap:anywhere; }
.prose code{ font-family:'JetBrains Mono', monospace; font-size:0.85em; color:var(--yellow); background:rgba(228,217,204,0.07); padding:1px 6px; }

h3.sub-h{ font-size:clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing:-0.4px; margin:0 0 10px; color:var(--paper); scroll-margin-top:100px; }
.steps li, details.faq .a, .callout p{ overflow-wrap:anywhere; }
.lead a, .steps a, .callout a, details.faq .a a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.section[id]{ scroll-margin-top:90px; }


/* ============================================================
   Shared by the app pages and the long pages: flight rail, level toast,
   pixel hints. (Loaded on every page.)
   ============================================================ */
[hidden]{ display:none !important; }
html:not(.js) .js-only{ display:none !important; }
html.js .nojs-only{ display:none !important; }

/* ---------- level rail (right edge) ---------- */
.level-rail{
  position:fixed; right:clamp(10px, 1.6vw, 26px); top:50%; z-index:55; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:0; align-items:center; padding:6px 0;
  transition:opacity 0.3s ease;
}
.level-rail::before{ content:""; position:absolute; top:8px; bottom:8px; left:50%; width:2px; margin-left:-1px; background:rgba(228,217,204,0.2); }
.level-node{
  position:relative; width:var(--node, 34px); height:var(--node, 34px); display:grid; place-items:center;
}
.level-node::before{
  content:""; width:10px; height:10px; background:var(--ink); border:2px solid rgba(228,217,204,0.55);
  transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.level-node.past::before{ background:rgba(228,217,204,0.55); }
.level-node.on::before{ background:var(--accent); border-color:var(--accent); transform:scale(1.5) rotate(45deg); box-shadow:0 0 12px var(--accent); }
.level-node:hover::before, .level-node:focus-visible::before{ border-color:var(--yellow); transform:scale(1.35); }
.level-node-label{
  position:absolute; right:calc(100% + 8px); top:50%; transform:translate(8px,-50%); white-space:nowrap;
  font:8px 'Press Start 2P', monospace; letter-spacing:1px; color:var(--ink); background:var(--paper);
  padding:7px 9px; opacity:0; pointer-events:none; transition:opacity 0.18s ease, transform 0.18s ease;
}
.level-node:hover .level-node-label, .level-node:focus-visible .level-node-label{ opacity:1; transform:translate(0,-50%); }
.level-ship{
  position:absolute; left:50%; width:0; height:0; margin-left:0; pointer-events:none;
  top:0; transition:top 0.5s cubic-bezier(0.2,0.9,0.2,1);
}
.level-ship::after{
  content:""; position:absolute; left:-15px; top:-3px; width:6px; height:6px; background:var(--yellow);
  box-shadow:0 0 8px 2px rgba(255,227,71,0.7); transform:rotate(45deg);
}
html.at-footer .level-rail, html.at-footer .app-hud{ opacity:0; pointer-events:none; }
html.menu-open .level-rail{ opacity:0; }
@media (max-width:900px){ .level-rail{ display:none; } }

.level-toast{
  position:fixed; top:90px; left:50%; transform:translate(-50%,-30px); z-index:9997; pointer-events:none;
  font-family:'Press Start 2P', monospace; font-size:11px; color:var(--ink); background:var(--yellow);
  padding:14px 22px; border:3px solid var(--ink); box-shadow:5px 5px 0 rgba(0,0,0,0.5);
  opacity:0; transition:opacity 0.35s ease, transform 0.35s ease; text-align:center; max-width:92vw;
}
.level-toast.show{ opacity:1; transform:translate(-50%,0); }
@media (max-width:520px){ .level-toast{ font-size:9px; padding:11px 14px; white-space:normal; } }

.score-hud .score-row.bump{ animation:score-bump 0.4s ease; }
@keyframes score-bump{ 30%{ transform:scale(1.18); color:var(--paper); } }

.pix-hint{
  font:8px/1.9 'Press Start 2P', monospace; letter-spacing:1px; color:var(--yellow); text-align:center; text-transform:uppercase;
}
.pix-hint::before{ content:"▶ "; animation:coin-blink 1s steps(1) infinite; }
.pix-hint.done{ color:var(--teal); }
.pix-hint.done::before{ content:"✓ "; animation:none; }



/* ===== LABS (bordered game-cabinet panels), segmented buttons, pixel buttons ===== */
/* labs: the bordered game-cabinet panels everything interactive lives in */
.lab{
  position:relative; border:2px solid rgba(228,217,204,0.28); background:rgba(8,8,14,0.9);
  box-shadow:8px 8px 0 rgba(0,0,0,0.5);
}
.lab-bar{
  display:flex; justify-content:space-between; align-items:center; gap:10px 18px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:2px solid rgba(228,217,204,0.2);
  font:8px 'Press Start 2P', monospace; letter-spacing:1px; color:var(--soft); text-transform:uppercase;
}
.lab-bar b{ color:var(--yellow); font-weight:400; }
.lab-bar .t{ color:var(--accent); }
.lab-body{ padding:clamp(16px, 3vw, 30px); }
.lab-foot{ padding:12px 16px; border-top:2px solid rgba(228,217,204,0.14); font-size:0.86rem; color:var(--soft); line-height:1.55; }
.lab-foot strong{ color:var(--paper); }

.seg{ display:inline-flex; flex-wrap:wrap; border:2px solid var(--paper); background:var(--ink); }
.seg button{
  appearance:none; border:0; background:transparent; color:var(--paper); cursor:pointer;
  font:700 11px 'Space Grotesk', sans-serif; letter-spacing:1px; text-transform:uppercase; padding:11px 15px;
  border-right:2px solid rgba(228,217,204,0.3); transition:background 0.15s ease, color 0.15s ease;
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ background:rgba(228,217,204,0.14); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"], .seg button[aria-checked="true"]{ background:var(--paper); color:var(--ink); }

.pbtn{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  border:2px solid var(--paper); background:transparent; color:var(--paper);
  font:700 11px 'Space Grotesk', sans-serif; letter-spacing:1px; text-transform:uppercase; padding:11px 15px;
  box-shadow:4px 4px 0 rgba(0,0,0,0.6); transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pbtn:hover{ background:var(--paper); color:var(--ink); transform:translate(-2px,-2px); box-shadow:6px 6px 0 rgba(0,0,0,0.6); }
.pbtn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(0,0,0,0.6); }
.pbtn.primary{ border-color:transparent; background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--ink); }
.pbtn[disabled]{ opacity:0.45; cursor:default; transform:none; box-shadow:none; }
.pbtn[disabled]:hover{ background:transparent; color:var(--paper); }


/* ===== READING AIDS (long pages, support, privacy hub) ===== */
.read-bar{
  position:fixed; top:0; left:0; right:0; height:5px; z-index:61; pointer-events:none;
  background:rgba(228,217,204,0.08);
}
.read-bar i{
  display:block; height:100%; width:100%; transform-origin:left; transform:scaleX(0);
  background:repeating-linear-gradient(90deg, var(--crazy) 0 8px, var(--orange) 8px 12px);
  box-shadow:0 0 12px rgba(255,61,31,0.6);
}
html.menu-open .read-bar{ opacity:0; }
.toc a.on{ color:var(--teal); }
.toc li:has(a.on)::before{ color:var(--yellow); }
.toc a.on::after{ content:" ◂"; color:var(--yellow); }

/* support: find an answer */
.faq-find{ margin:0 0 6px; }
.faq-find .row{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.faq-search{
  flex:1 1 260px; min-width:0; background:var(--ink); color:var(--paper); border:2px solid var(--paper);
  font:500 1rem 'Space Grotesk', sans-serif; padding:12px 14px; box-shadow:4px 4px 0 rgba(0,0,0,0.6);
}
.faq-search::placeholder{ color:var(--soft); }
.faq-search:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.faq-status{ font:9px/1.8 'Press Start 2P', monospace; letter-spacing:1px; color:var(--yellow); text-transform:uppercase; margin-top:14px; }
.faq-status a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
details.faq[hidden]{ display:none; }
details.faq mark{ background:var(--yellow); color:var(--ink); padding:0 2px; }

/* delete-your-data: tick-off list */
.tick-prog{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:6px 0 14px; max-width:760px; }
.tick-prog .bar{ flex:1 1 180px; height:12px; border:2px solid rgba(228,217,204,0.4); background:rgba(5,5,10,0.8); position:relative; }
.tick-prog .bar i{ position:absolute; left:0; top:0; bottom:0; width:0; background:linear-gradient(90deg, var(--teal), var(--accent-2)); transition:width 0.35s cubic-bezier(0.2,0.9,0.2,1); }
.tick-prog span{ font:9px 'Press Start 2P', monospace; letter-spacing:1px; color:var(--soft); text-transform:uppercase; }
.tick-prog.complete span{ color:var(--teal); }
.tick{
  display:inline-flex; align-items:center; gap:10px; margin-top:12px; cursor:pointer; user-select:none;
  font:700 11px 'Space Grotesk', sans-serif; letter-spacing:1px; text-transform:uppercase; color:var(--soft);
}
.tick input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; border:2px solid var(--paper); background:var(--ink); cursor:pointer; position:relative; margin:0; }
.tick input:checked{ background:var(--teal); border-color:var(--teal); }
.tick input:checked::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:var(--ink); font:700 14px sans-serif; }
.tick input:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }
.steps li.ticked{ border-color:rgba(45,232,201,0.5); }
.steps li.ticked .tick{ color:var(--teal); }

/* privacy hub: where does it live */
.pmap-tabs{ margin-bottom:18px; }
.pmap{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.pmap-lane{ border:2px solid var(--line); background:rgba(10,10,15,0.7); padding:16px; display:grid; gap:10px; align-content:start; position:relative; }
.pmap-lane h4{ font:8px/1.7 'Press Start 2P', monospace; letter-spacing:1px; color:var(--soft); text-transform:uppercase; }
.pmap-lane.me{ border-color:var(--crazy); }
.pmap-lane.me h4{ color:var(--crazy); }
.pmap-lane.dev{ border-color:var(--teal); }
.pmap-lane.dev h4{ color:var(--teal); }
.pmap-lane ul{ list-style:none; display:grid; gap:8px; }
.pmap-lane li{ color:var(--muted); font-size:0.9rem; line-height:1.5; padding-left:16px; position:relative; animation:fade-down 0.3s ease backwards; }
.pmap-lane li::before{ content:"▸"; position:absolute; left:0; color:var(--accent, var(--teal)); }
.pmap-lane li.none{ color:var(--paper); font-weight:700; }
.pmap-lane li.none::before{ content:"∅"; color:var(--teal); }
.pmap-note{ margin-top:14px; font-size:0.9rem; color:var(--soft); line-height:1.6; max-width:760px; }
.pmap-note a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
@keyframes fade-down{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
@media (max-width:980px){ .pmap{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:560px){ .pmap{ grid-template-columns:1fr; } }

/* ===== MOTION PREFERENCES ===== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}