/* ==========================================================================
   MB STUDIO — DEV PANEL
   Style      : Dark Mode (OLED) / instrument panel
   Type       : IBM Plex Sans (UI) + JetBrains Mono (data, labels)
   Density    : standard (8 / 16 / 24 / 32 / 48 / 64 / 96)
   ========================================================================== */

:root{
  /* surfaces */
  --bg:        #08090b;
  --bg-2:      #0b0d10;
  --panel:     #101317;
  --panel-2:   #14181d;
  --panel-3:   #191e24;
  --line:      #1d222a;
  --line-2:    #2a313b;

  /* ink */
  --fg:        #e7eaee;
  --fg-2:      #a8b0ba;
  --fg-3:      #7a828d;

  /* signal */
  --accent:    #ff5a1f;
  --accent-2:  #ff8a52;
  --accent-dim:rgba(255,90,31,.10);
  --ok:        #37d67a;
  --ok-dim:    rgba(55,214,122,.10);
  --no:        #ff4d4d;
  --no-dim:    rgba(255,77,77,.10);
  --warn:      #ffb020;

  /* type */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* space */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --rail: 252px;
  --maxw: 1120px;
  --r:   10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.65 var(--sans);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* engineering-paper ground ------------------------------------------------ */
body::before{
  content:"";
  position:fixed; inset:-20vh 0 -20vh 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 80% at 60% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 80% at 60% 0%, #000 0%, transparent 72%);
  pointer-events:none; z-index:0;
  transform:translate3d(0,var(--paraY,0px),0);
  will-change:transform;
}

::selection{ background:var(--accent); color:#0a0a0a; }

a{ color:inherit; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }

:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:3px;
}

/* ==========================================================================
   Primitives
   ========================================================================== */

.mono{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
}

.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* thin ticked rule — a printed scale, not a plain <hr> */
.scale{
  height:9px; position:relative;
  background:
    repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px 24px) bottom left/100% 5px no-repeat,
    linear-gradient(var(--line),var(--line)) bottom left/100% 1px no-repeat;
  opacity:.7;
}

/* ==========================================================================
   Shell — rail + content
   ========================================================================== */

.shell{ position:relative; z-index:1; }

.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail);
  display:flex; flex-direction:column;
  padding:var(--s3) var(--s3) var(--s3) var(--s4);
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
  z-index:40;
}

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .mk{
  width:30px; height:30px; flex:0 0 30px;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:7px;
  background:var(--panel-2);
}
.brand .mk svg{ width:16px; height:16px; }
.brand b{ font-size:14px; letter-spacing:.16em; font-family:var(--mono); font-weight:600; }
.brand span{ display:block; font-size:10px; letter-spacing:.2em; color:var(--fg-3); font-family:var(--mono); margin-top:1px; }

.rail nav{ margin-top:var(--s6); display:flex; flex-direction:column; gap:2px; }
.rail nav a{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 10px; margin-left:-10px;
  border-radius:7px; text-decoration:none;
  color:var(--fg-2); font-size:14.5px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.rail nav a i{
  font-family:var(--mono); font-size:10px; font-style:normal;
  color:var(--fg-3); letter-spacing:.08em;
  transition:color .18s var(--ease);
}
.rail nav a:hover{ background:var(--panel); color:var(--fg); }
.rail nav a[aria-current]{ color:var(--fg); background:var(--panel-2); }
.rail nav a[aria-current] i{ color:var(--accent); }

.rail-foot{ margin-top:auto; padding-top:var(--s3); }
.rail-foot .badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2);
  padding:5px 9px; border:1px solid var(--line-2); border-radius:100px;
  background:var(--panel);
}
.pulse{ width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 rgba(55,214,122,.5); animation:pulse 2.6s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 7px rgba(55,214,122,0);} 100%{ box-shadow:0 0 0 0 rgba(55,214,122,0);} }

.rail-foot dl{ margin:var(--s3) 0 0; display:grid; grid-template-columns:1fr auto; gap:7px 10px; }
.rail-foot dt{ font-size:12px; color:var(--fg-3); }
.rail-foot dd{ margin:0; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; color:var(--fg-2); }

.rail-foot p{ margin:var(--s3) 0 0; font-size:11.5px; line-height:1.55; color:var(--fg-3); }
.rail-foot p a{ color:var(--fg-2); }

.nav-sm{ display:none; }

/* touch pointers get the full 44px target even where the visual box is smaller */
@media (pointer:coarse){
  .chip{ min-height:44px; padding:12px 14px; }
  .field input{ min-height:44px; }
  .rail nav a{ min-height:44px; align-items:center; }
  footer nav a{ display:inline-flex; align-items:center; min-height:44px; }
  .toc a{ min-height:44px; align-items:center; }
}

/* content column */
main{
  margin-left:var(--rail);
  padding:0 var(--s5) var(--s8);
  max-width:calc(var(--maxw) + var(--s5)*2);
}

/* scroll progress — reads like a layer counter */
.progress{
  position:fixed; top:0; left:var(--rail); right:0; height:2px; z-index:50;
  background:transparent;
}
.progress i{
  display:block; height:100%; width:var(--p,0%);
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}

/* ==========================================================================
   Section furniture
   ========================================================================== */

section{ padding:var(--s7) 0; border-top:1px solid var(--line); }
section:first-of-type{ border-top:0; }

.shead{ display:flex; align-items:baseline; gap:14px; margin-bottom:var(--s4); }
.shead .ix{ font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.14em; }
.shead h2{
  margin:0; font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:600;
  letter-spacing:-.018em;
}
.shead .line{ flex:1; height:1px; background:var(--line); }

.lede{ font-size:17px; color:var(--fg-2); max-width:64ch; margin:0 0 var(--s4); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero{ padding:var(--s7) 0 var(--s6); position:relative; }

.hero-tag{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-2); padding:6px 11px 6px 8px;
  border:1px solid var(--line-2); border-radius:100px; background:var(--panel);
  margin-bottom:var(--s4);
}
.hero-tag img{ width:20px; height:20px; border-radius:50%; }

.hero h1{
  margin:0; font-weight:600;
  font-size:clamp(2.4rem,6.2vw,4.35rem);
  line-height:1.02; letter-spacing:-.035em;
  max-width:16ch;
}
.hero h1 em{ font-style:normal; color:var(--fg-3); }
.hero h1 .hl{ color:var(--accent); }

.hero p.sub{
  margin:var(--s3) 0 0; max-width:56ch;
  font-size:18px; line-height:1.6; color:var(--fg-2);
}

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s4); }

.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 17px; border-radius:8px; text-decoration:none;
  font-size:14.5px; font-weight:500; border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  min-height:44px;
}
.btn svg{ width:15px; height:15px; flex:0 0 15px; }
.btn-primary{ background:var(--accent); color:#0a0705; font-weight:600; }
.btn-primary:hover{ background:var(--accent-2); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line-2); color:var(--fg); background:var(--panel); }
.btn-ghost:hover{ border-color:var(--fg-3); background:var(--panel-2); transform:translateY(-1px); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* toolpath plate */
.plate{
  margin-top:var(--s6);
  position:relative; border:1px solid var(--line);
  border-radius:12px; background:
    radial-gradient(90% 120% at 20% 0%, rgba(255,90,31,.05), transparent 60%),
    var(--panel);
  overflow:hidden;
}
.plate canvas{ display:block; width:100%; height:auto; }
.plate .plate-meta{
  position:absolute; left:16px; bottom:12px; right:16px;
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); pointer-events:none;
}

/* ==========================================================================
   Stat readout
   ========================================================================== */

.readout{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  grid-template-columns:repeat(3,1fr);
}
@media (min-width:900px){ .readout{ grid-template-columns:repeat(6,1fr); } }
.readout div{ background:var(--panel); padding:var(--s3) var(--s2); }
.readout b{
  display:block; font-family:var(--mono); font-weight:600;
  font-size:clamp(1.15rem,2.4vw,1.55rem); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.readout span{ display:block; margin-top:5px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); }

/* ==========================================================================
   Flow — how licensing works
   ========================================================================== */

.flow{ display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fit,minmax(224px,1fr)); }

.step{
  position:relative; padding:var(--s3);
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
  transition:border-color .22s var(--ease), transform .22s var(--ease);
}
.step:hover{ border-color:var(--line-2); }
.step .k{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--fg-3); }
.step h3{ margin:12px 0 8px; font-size:17px; font-weight:600; letter-spacing:-.01em; }
.step p{ margin:0; font-size:14.5px; color:var(--fg-2); line-height:1.6; }
.step .price{ margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--ok); }
.step .price.pay{ color:var(--accent); }

/* ==========================================================================
   Checker
   ========================================================================== */

.checker{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--panel);
}
.checker .ck-top{ padding:var(--s3); border-bottom:1px solid var(--line); background:var(--panel-2); }

.field{ position:relative; display:flex; align-items:center; gap:10px; }
.field svg{ width:16px; height:16px; color:var(--fg-3); flex:0 0 16px; }
.field input{
  flex:1; background:transparent; border:0; outline:0;
  font:400 15px/1.4 var(--sans); color:var(--fg); padding:10px 0; min-height:40px;
}
.field input::placeholder{ color:var(--fg-3); }
.field-wrap{
  border:1px solid var(--line-2); border-radius:8px; padding:4px 12px;
  background:var(--bg-2); transition:border-color .18s var(--ease);
}
.field-wrap:focus-within{ border-color:var(--accent); }

.ck-filters{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.chip{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 13px; border-radius:100px; border:1px solid var(--line-2);
  background:transparent; color:var(--fg-3);
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  min-height:38px;
}
.chip:hover{ color:var(--fg-2); border-color:var(--fg-3); }
.chip[aria-pressed="true"]{ color:var(--fg); border-color:var(--fg-2); background:var(--panel-3); }

.ck-body{ display:grid; grid-template-columns:1fr; }
@media (min-width:900px){ .ck-body{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.ck-list{ max-height:390px; overflow-y:auto; border-right:1px solid var(--line); scrollbar-width:thin; }
.ck-list::-webkit-scrollbar{ width:9px; }
.ck-list::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:9px; border:3px solid var(--panel); }
@media (max-width:899px){ .ck-list{ border-right:0; border-bottom:1px solid var(--line); max-height:320px; } }

.ck-list button{
  display:flex; width:100%; gap:12px; align-items:center; text-align:left;
  padding:11px var(--s3); background:transparent; border:0;
  border-bottom:1px solid var(--line);
  transition:background .15s var(--ease);
  min-height:56px;
}
.ck-list button:last-child{ border-bottom:0; }
.ck-list button:hover{ background:var(--panel-2); }
.ck-list button[aria-pressed="true"]{ background:var(--panel-3); }
.ck-list img{ width:38px; height:38px; border-radius:6px; object-fit:cover; flex:0 0 38px; background:var(--panel-3); }
.ck-list .t{ flex:1; min-width:0; }
.ck-list .t strong{ display:block; font-size:13.5px; font-weight:500; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ck-list .t span{ display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); margin-top:3px; }
.dot{ width:7px; height:7px; border-radius:50%; flex:0 0 7px; }
.dot.y{ background:var(--ok); } .dot.n{ background:var(--no); }

.ck-empty{ padding:var(--s5) var(--s3); text-align:center; color:var(--fg-3); font-size:14px; }

.verdict{ padding:var(--s4) var(--s3); display:flex; flex-direction:column; justify-content:center; min-height:280px; }
.verdict .vtag{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 11px; border-radius:100px; border:1px solid var(--line-2); color:var(--fg-3);
}
.verdict h3{ margin:16px 0 10px; font-size:clamp(1.15rem,2.4vw,1.5rem); font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.verdict p{ margin:0 0 12px; font-size:14.5px; line-height:1.65; color:var(--fg-2); max-width:46ch; }
.verdict p:last-child{ margin-bottom:0; }
.verdict a{ color:var(--accent); text-underline-offset:3px; }

.verdict[data-state="yes"]{ background:linear-gradient(180deg,var(--ok-dim),transparent 55%); }
.verdict[data-state="yes"] .vtag{ color:var(--ok); border-color:rgba(55,214,122,.4); }
.verdict[data-state="no"]{ background:linear-gradient(180deg,var(--no-dim),transparent 55%); }
.verdict[data-state="no"] .vtag{ color:var(--no); border-color:rgba(255,77,77,.4); }

.vfade{ animation:vfade .34s var(--ease-out) both; }
@keyframes vfade{ from{ opacity:0; transform:translateY(7px);} to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .vfade{ animation:none; } }

.spec-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:18px; }
.spec-row span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:5px 9px; border-radius:5px; background:var(--panel-3); color:var(--fg-3);
}

/* ==========================================================================
   Tiers
   ========================================================================== */

.tiers{ display:grid; gap:var(--s2); grid-template-columns:1fr; }
@media (min-width:820px){ .tiers{ grid-template-columns:1fr 1.12fr; align-items:start; } }

.tier{
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  padding:var(--s4) var(--s3); position:relative; overflow:hidden;
}
.tier.lead{ border-color:var(--line-2); background:linear-gradient(180deg,rgba(255,90,31,.06),transparent 40%),var(--panel); }
.tier.lead::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.tier .tname{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-3); }
.tier.lead .tname{ color:var(--accent); }
.tier .tprice{ display:flex; align-items:baseline; gap:7px; margin:14px 0 6px; }
.tier .tprice b{ font-family:var(--mono); font-size:2.6rem; font-weight:600; letter-spacing:-.04em; line-height:1; }
.tier .tprice span{ font-family:var(--mono); font-size:11px; color:var(--fg-3); letter-spacing:.1em; }
.tier > p{ margin:0 0 var(--s3); font-size:14.5px; color:var(--fg-2); max-width:44ch; }
.tier ul{ margin:0 0 var(--s3); padding:0; list-style:none; display:grid; gap:11px; }
.tier li{ display:flex; gap:10px; font-size:14.5px; line-height:1.55; color:var(--fg-2); }
.tier li svg{ width:14px; height:14px; flex:0 0 14px; margin-top:4px; color:var(--ok); }
.tier li b{ color:var(--fg); font-weight:600; }
.tier .tfoot{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-3); border-top:1px solid var(--line); padding-top:14px; }

/* ==========================================================================
   Model cards
   ========================================================================== */

.grid{ display:grid; gap:var(--s2); grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); }

.card{
  border:1px solid var(--line); border-radius:11px; overflow:hidden;
  background:var(--panel); text-decoration:none; display:flex; flex-direction:column;
  transition:border-color .24s var(--ease), transform .24s var(--ease);
}
.card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
@media (prefers-reduced-motion: reduce){ .card:hover{ transform:none; } }

.card .shot{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--panel-3); }
.card .shot img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease-out), filter .3s var(--ease);
  filter:saturate(.92) contrast(1.02);
}
.card:hover .shot img{ transform:scale(1.045); filter:saturate(1) contrast(1.02); }
@media (prefers-reduced-motion: reduce){ .card:hover .shot img{ transform:none; } }
.card .shot::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,9,11,.72));
}

.tagline{
  position:absolute; z-index:2; left:10px; top:10px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  padding:5px 8px; border-radius:5px;
  background:rgba(8,9,11,.78); backdrop-filter:blur(6px);
  border:1px solid var(--line-2); color:var(--fg-2);
}
.tagline.y{ color:var(--ok); border-color:rgba(55,214,122,.35); }
.tagline.n{ color:var(--fg-3); }

.card .meta{ padding:14px var(--s2) var(--s2); display:flex; flex-direction:column; flex:1; }
.card h3{ margin:0 0 6px; font-size:14.5px; font-weight:600; line-height:1.35; letter-spacing:-.008em; }
.card .note{ margin:0 0 14px; font-size:12.5px; line-height:1.5; color:var(--fg-3); flex:1; }
.card .stats{
  display:flex; gap:14px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; color:var(--fg-3); font-variant-numeric:tabular-nums;
}
.card .stats i{ font-style:normal; color:var(--fg-2); }

/* ==========================================================================
   Legal document
   ========================================================================== */

.doc-layout{ display:grid; grid-template-columns:1fr; gap:var(--s5); }
@media (min-width:1000px){ .doc-layout{ grid-template-columns:200px minmax(0,1fr); gap:var(--s6); } }

.toc{ align-self:start; }
@media (min-width:1000px){ .toc{ position:sticky; top:var(--s5); } }
.toc .mono{ color:var(--fg-3); display:block; margin-bottom:14px; }
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.toc a{
  display:flex; gap:9px; padding:6px 9px; margin-left:-9px; border-radius:6px;
  font-size:13px; color:var(--fg-3); text-decoration:none; line-height:1.4;
  transition:color .16s var(--ease), background .16s var(--ease);
}
.toc a em{ font-style:normal; font-family:var(--mono); font-size:10px; padding-top:2px; }
.toc a:hover{ color:var(--fg-2); background:var(--panel); }
.toc a.on{ color:var(--fg); background:var(--panel-2); }
.toc a.on em{ color:var(--accent); }

.doc section{ padding:0 0 var(--s5); border:0; scroll-margin-top:var(--s4); }
.doc h2{
  margin:0 0 var(--s2); font-size:1.3rem; font-weight:600; letter-spacing:-.018em;
  display:flex; gap:12px; align-items:baseline;
}
.doc h2 em{ font-style:normal; font-family:var(--mono); font-size:11px; color:var(--accent); letter-spacing:.1em; }
.doc p{ margin:0 0 var(--s2); color:var(--fg-2); max-width:68ch; font-size:15.5px; }
.doc ul{ margin:0 0 var(--s2); padding-left:0; list-style:none; max-width:68ch; display:grid; gap:9px; }
.doc ul li{ position:relative; padding-left:20px; color:var(--fg-2); font-size:15.5px; line-height:1.6; }
.doc ul li::before{ content:""; position:absolute; left:2px; top:11px; width:6px; height:1px; background:var(--fg-3); }
.doc strong{ color:var(--fg); font-weight:600; }
.doc a{ color:var(--accent); text-underline-offset:3px; }
.doc code{
  font-family:var(--mono); font-size:.88em; padding:2px 6px; border-radius:4px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--fg-2);
}

.callout{
  border:1px solid var(--line-2); border-left:2px solid var(--accent);
  border-radius:0 8px 8px 0; background:var(--panel);
  padding:var(--s3); margin:0 0 var(--s2); max-width:68ch;
}
.callout .mono{ color:var(--accent); display:block; margin-bottom:9px; }
.callout p:last-child{ margin-bottom:0; }
.callout.neutral{ border-left-color:var(--fg-3); }
.callout.neutral .mono{ color:var(--fg-3); }

.covered{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; margin:0 0 var(--s3); max-width:68ch; }
.covered a{
  display:flex; align-items:center; gap:12px; padding:11px var(--s2);
  background:var(--panel); text-decoration:none; color:var(--fg);
  transition:background .16s var(--ease); min-height:52px;
}
.covered a:hover{ background:var(--panel-2); }
.covered img{ width:34px; height:34px; border-radius:5px; object-fit:cover; flex:0 0 34px; }
.covered b{ flex:1; font-size:14px; font-weight:500; }
.covered span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--fg-3); }

/* ==========================================================================
   Directory
   ========================================================================== */

.dir{ border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.dir table{ width:100%; border-collapse:collapse; }
.dir th{
  text-align:left; padding:12px var(--s3); background:var(--panel-2);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-3); font-weight:500; border-bottom:1px solid var(--line);
}
.dir td{ padding:14px var(--s3); border-bottom:1px solid var(--line); font-size:14.5px; background:var(--panel); }
.dir tr:last-child td{ border-bottom:0; }

.empty{
  border:1px dashed var(--line-2); border-radius:11px;
  padding:var(--s6) var(--s3); text-align:center; background:var(--panel);
}
.empty .slot{
  width:44px; height:44px; margin:0 auto var(--s3); border-radius:9px;
  border:1px dashed var(--line-2); display:grid; place-items:center; color:var(--fg-3);
}
.empty h3{ margin:0 0 10px; font-size:17px; font-weight:600; }
.empty p{ margin:0 auto; max-width:44ch; font-size:14.5px; color:var(--fg-2); }
.empty .cta{ margin-top:var(--s3); }

/* ==========================================================================
   Footer
   ========================================================================== */

footer{
  margin-left:var(--rail); padding:var(--s5);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s3); justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--fg-3);
  position:relative; z-index:1;
}
footer a{ color:var(--fg-2); text-decoration:none; }
footer a:hover{ color:var(--accent); }
footer nav{ display:flex; gap:var(--s3); flex-wrap:wrap; }

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-rise]{ opacity:0; transform:translateY(18px); }
[data-rise].in{
  opacity:1; transform:none;
  transition:opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay:var(--d,0ms);
}
@media (prefers-reduced-motion: reduce){
  [data-rise]{ opacity:1; transform:none; }
  [data-rise].in{ transition:none; }
}

/* ==========================================================================
   Responsive shell
   ========================================================================== */

/* narrow desktops: trim the rail so three-up grids still fit */
@media (min-width:1024px) and (max-width:1259px){
  :root{ --rail:220px; }
  main{ padding-left:var(--s4); padding-right:var(--s4); }
  footer{ padding-left:var(--s4); padding-right:var(--s4); }
}

@media (max-width:1023px){
  .rail{
    position:sticky; top:0; inset:auto; width:auto;
    flex-direction:row; align-items:center; gap:var(--s3);
    padding:12px var(--s3); border-right:0; border-bottom:1px solid var(--line);
    background:rgba(8,9,11,.86); backdrop-filter:blur(14px);
  }
  .rail nav{ margin:0 0 0 auto; flex-direction:row; gap:2px; }
  .rail nav a{ padding:8px 10px; margin:0; font-size:13px; }
  .rail nav a i{ display:none; }
  .rail-foot{ display:none; }
  .progress{ left:0; top:auto; bottom:auto; }
  main{ margin-left:0; padding:0 var(--s3) var(--s7); }
  footer{ margin-left:0; padding:var(--s4) var(--s3); }
  section{ padding:var(--s6) 0; scroll-margin-top:96px; }
  .hero{ padding:var(--s6) 0 var(--s5); }
  .plate-meta{ font-size:9px; letter-spacing:.1em; left:12px; right:12px; bottom:9px; }
}

@media (max-width:700px){
  .nav-lg{ display:none; }
  .nav-sm{ display:inline; }
}

@media (max-width:600px){
  .brand span{ display:none; }
  .rail nav a{ padding:8px 9px; font-size:13px; }
  .readout{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:1fr; }
  .hero-actions .btn{ flex:1; justify-content:center; }
  .plate-meta span:last-child{ display:none; }
  .tiers .tier{ padding:var(--s3) var(--s2); }
}

/* ==========================================================================
   Admin — /admin, not linked from the nav. RLS is the real boundary;
   everything here only decides what the interface offers.
   ========================================================================== */

.panelbox{
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  padding:var(--s4) var(--s3);
}
.panelbox--narrow{ max-width:440px; }
.panelbox h3{ margin:0 0 10px; font-size:18px; font-weight:600; letter-spacing:-.015em; }
.panelbox > p{ margin:0 0 var(--s3); font-size:14.5px; color:var(--fg-2); }
.panelbox > p:last-child{ margin-bottom:0; }

.field-row{ display:grid; gap:14px; margin-bottom:var(--s3); }
@media (min-width:720px){ .field-row.two{ grid-template-columns:1fr 1fr; } }

.lbl{ display:block; }
.lbl > span{
  display:block; margin-bottom:7px;
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3);
}
.inp{
  width:100%; background:var(--bg-2); color:var(--fg);
  border:1px solid var(--line-2); border-radius:8px;
  padding:11px 13px; font:400 14.5px/1.4 var(--sans); min-height:44px;
  transition:border-color .18s var(--ease);
}
.inp:focus{ outline:none; border-color:var(--accent); }
.inp::placeholder{ color:var(--fg-3); }

.switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; min-height:44px; }
.switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.switch .track{
  width:38px; height:22px; border-radius:100px; background:var(--panel-3);
  border:1px solid var(--line-2); position:relative; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.switch .track::after{
  content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%;
  background:var(--fg-3); transition:transform .2s var(--ease), background .2s var(--ease);
}
.switch input:checked + .track{ background:var(--ok-dim); border-color:rgba(55,214,122,.5); }
.switch input:checked + .track::after{ transform:translateX(16px); background:var(--ok); }
.switch input:focus-visible + .track{ outline:2px solid var(--accent-2); outline-offset:3px; }
.switch b{ font-size:13.5px; font-weight:500; color:var(--fg-2); }

.msg{
  border-radius:8px; padding:12px 14px; font-size:14px; line-height:1.55;
  margin:0 0 var(--s3); border:1px solid var(--line-2); background:var(--panel-2); color:var(--fg-2);
}
.msg.ok{ border-color:rgba(55,214,122,.4); background:var(--ok-dim); color:var(--fg); }
.msg.bad{ border-color:rgba(255,77,77,.4); background:var(--no-dim); color:var(--fg); }
.msg:empty{ display:none; }

.who{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  margin-bottom:var(--s4); padding-bottom:var(--s3); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-3);
}
.who .mail{ color:var(--fg-2); text-transform:none; letter-spacing:0; font-size:13px; font-family:var(--sans); }
.who .spacer{ flex:1; }

.btn-sm{
  padding:8px 12px; border-radius:7px; min-height:38px;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--line-2); background:transparent; color:var(--fg-2);
  transition:border-color .16s var(--ease), color .16s var(--ease), background .16s var(--ease);
}
.btn-sm:hover{ color:var(--fg); border-color:var(--fg-3); background:var(--panel-2); }
.btn-sm.danger:hover{ color:var(--no); border-color:rgba(255,77,77,.5); background:var(--no-dim); }
@media (pointer:coarse){ .btn-sm{ min-height:44px; } }

.rows{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.row{
  background:var(--panel); padding:14px var(--s2);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.row .grow{ flex:1; min-width:180px; }
.row strong{ display:block; font-size:14.5px; font-weight:600; letter-spacing:-.008em; }
.row .sub{
  display:block; margin-top:3px; font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; color:var(--fg-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46ch;
}
.row .acts{ display:flex; gap:7px; flex-wrap:wrap; }
.pill{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 8px; border-radius:100px; border:1px solid var(--line-2); color:var(--fg-3);
}
.pill.on{ color:var(--ok); border-color:rgba(55,214,122,.4); }
.pill.off{ color:var(--warn); border-color:rgba(255,176,32,.4); }

.skeleton{
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  padding:var(--s4); text-align:center; color:var(--fg-3); font-size:14px;
}