/* Firm Monitors - stylesheet.
 *
 * Rewritten 30 September 2026 for the reseller launch ("black glass, brass
 * light"): translucent glass surfaces with a gradient edge over a slow gold
 * aurora, a display face for headlines and prices, a bigger type scale and
 * more air, and a motion language that arrives once and then breathes.
 *
 * Sections, in order:
 *   1. tokens (dark, then the warm-paper light theme)
 *   2. base and type
 *   3. ambient background
 *   4. shell: header, nav, phone menu, footer, back-to-top
 *   5. surfaces: .panel and its depth tiers
 *   6. controls: buttons, inputs, forms
 *   7. badges, chips, pills
 *   8. tables
 *   9. feedback: toasts, alerts, modal
 *  10. page furniture: section heads, page head, crumbs, tiles, kv
 *  11. marketing: hero, the Discord card, steps, plans, packs, FAQ
 *  12. guides
 *  13. auth
 *  14. onboarding, empty states, the .why block
 *  15. the activity console
 *  16. staff dashboard
 *  17. motion, and the reduced-motion fallback
 *
 * Rules that must hold: no colour literal that reads in one theme only (use
 * the tokens and the -rgb triplets); animate transform and opacity only;
 * nothing here animates on an htmx poll (see .reveal and .mon-card.flash);
 * every animation is off under prefers-reduced-motion.
 */

/* ===================================================================== */
/* 1. tokens                                                              */
/* ===================================================================== */
:root{
  --bg:#07080b;
  --bg-2:#0c0e13;
  --panel:#111319;            /* opaque: menus, modals, the console frame */
  --panel-soft:#181b23;
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.07);
  --text:#f4f1e9;
  --muted:#a9a498;
  --faint:#6e7280;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.055);
  --hairline:rgba(227,182,78,.6);
  --gold:#e3b64e;
  --gold-deep:#c9982f;
  --gold-bright:#f3d382;
  --gold-ink:#f0cf7a;
  --gold-rgb:227,182,78;
  --accent-ink:#14100a;
  --danger:#f08a8a;  --danger-rgb:240,138,138;
  --ok:#8fd8a0;      --ok-rgb:143,216,160;
  --warn:#f5c76a;    --warn-rgb:245,199,106;
  --input-bg:rgba(0,0,0,.32);
  --placeholder:#5f6674;
  --dot-off:#3a4150;
  --console:#05070a;
  --shadow-1:0 10px 30px rgba(0,0,0,.35);
  --shadow-2:0 30px 80px rgba(0,0,0,.55);
  --aurora-a:rgba(227,182,78,.22);
  --aurora-b:rgba(227,182,78,.13);
  --aurora-c:rgba(120,90,220,.12);
  --grain:.05;
  --radius:16px; --radius-s:10px; --radius-l:24px;
  --display:"Bricolage Grotesque","Inter",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  color-scheme:dark;
}
/* Warm paper. The same structure, every token retuned rather than inverted. */
[data-theme="light"]{
  --bg:#f2ecdf;
  --bg-2:#faf6ec;
  --panel:#fbf7ee;
  --panel-soft:#fffdf7;
  --glass:rgba(255,255,255,.5);
  --glass-2:rgba(255,255,255,.82);
  --text:#262012;
  --muted:#6a6250;
  --faint:#9a927f;
  --line:rgba(80,62,24,.15);
  --line-soft:rgba(80,62,24,.09);
  --hairline:rgba(154,113,16,.5);
  --gold:#b8860b;
  --gold-deep:#9a7110;
  --gold-bright:#dcae35;
  --gold-ink:#7f5c06;          /* 5.1:1 on the page ground */
  --gold-rgb:184,134,11;
  --accent-ink:#1c1608;
  --danger:#bc3838;  --danger-rgb:188,56,56;
  --ok:#2c7a44;      --ok-rgb:44,122,68;
  --warn:#96660a;    --warn-rgb:150,102,10;
  --input-bg:#fffdf8;
  --placeholder:#a89e88;
  --dot-off:#cbc2ac;
  --shadow-1:0 10px 30px rgba(90,70,30,.14);
  --shadow-2:0 24px 60px rgba(90,70,30,.2);
  --aurora-a:rgba(184,134,11,.15);
  --aurora-b:rgba(184,134,11,.09);
  --aurora-c:rgba(120,90,220,.07);
  --grain:.06;
  color-scheme:light;
}

/* ===================================================================== */
/* 2. base and type                                                       */
/* ===================================================================== */
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;interpolate-size:allow-keywords}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;overflow-x:hidden;overflow-x:clip;
  background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:14.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--gold-ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3{margin:0 0 10px;text-wrap:balance}
h1,h2{font-family:var(--display);letter-spacing:-.025em;line-height:1.08}
h1{font-size:34px;font-weight:800}
h2{font-size:24px;font-weight:800}
h3{font-size:16.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 12px}
button{font:inherit}
code,kbd{font-family:var(--mono);font-size:12px}
.muted{color:var(--muted)}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pad{padding:20px 22px}
.mt{margin-top:28px}
.mt-s{margin-top:12px}
.w-full{width:100%}
.narrow{max-width:680px}
.narrower{max-width:640px}
.break{overflow-wrap:anywhere}
.mono{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.helptext{color:var(--muted);font-size:12px;line-height:1.6}
/* The TOTP QR is black on white: it needs a white card in both themes. */
.qr-frame{max-width:220px;margin:16px 0;padding:10px;border-radius:10px;background:#fff}
/* keyboard focus: never the browser default on a dark ground */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:80;padding:10px 16px;border-radius:0 0 12px 0;
  background:var(--panel-soft);border:1px solid var(--gold);color:var(--text);font-weight:700;font-size:13px;
}
.skip-link:focus{left:0;text-decoration:none}
/* anchor jumps land below the sticky header */
[id]{scroll-margin-top:96px}

/* ===================================================================== */
/* 3. ambient background: three slow blobs of light and a film grain      */
/* ===================================================================== */
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.ambient span{position:absolute;border-radius:50%;will-change:transform}
.ambient .amb-a{
  width:70vmax;height:70vmax;left:-22vmax;top:-30vmax;
  background:radial-gradient(closest-side,var(--aurora-a),transparent 70%);
  animation:drift-a 46s ease-in-out infinite alternate;
}
.ambient .amb-b{
  width:60vmax;height:60vmax;right:-24vmax;bottom:-26vmax;
  background:radial-gradient(closest-side,var(--aurora-b),transparent 70%);
  animation:drift-b 58s ease-in-out infinite alternate;
}
.ambient .amb-c{
  width:44vmax;height:44vmax;left:38vw;top:28vh;
  background:radial-gradient(closest-side,var(--aurora-c),transparent 70%);
  animation:drift-c 70s ease-in-out infinite alternate;
}
@keyframes drift-a{to{transform:translate(10vw,9vh) scale(1.12)}}
@keyframes drift-b{to{transform:translate(-9vw,-12vh) scale(1.08)}}
@keyframes drift-c{to{transform:translate(-13vw,9vh) scale(.92)}}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ===================================================================== */
/* 4. shell                                                               */
/* ===================================================================== */
.page-shell{width:min(1120px,100%);margin:0 auto;padding:24px 24px 64px}

.site-header{
  display:flex;align-items:center;gap:14px;
  padding:12px 4px 12px;margin:-12px 0 28px;
  position:sticky;top:0;z-index:40;
}
/* The bar behind the sticky header. At rest it is nothing; once the page has
   moved it becomes a floating glass pill around the header's contents. */
.site-header::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:6px -14px;border-radius:999px;
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--line);box-shadow:var(--shadow-1);
  opacity:0;transform:scaleX(.98);
  transition:opacity .3s ease,transform .35s var(--ease-out);
}
.is-scrolled .site-header::before,.menu-open .site-header::before{opacity:1;transform:none}
.is-scrolled .site-header{padding-left:16px;padding-right:12px}
.site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,var(--hairline),transparent 60%);
  transition:opacity .3s ease;
}
.is-scrolled .site-header::after{opacity:0}
.wordmark{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.wordmark:hover{text-decoration:none}
.wordmark-logo{
  width:40px;height:40px;border-radius:11px;flex:none;
  box-shadow:0 2px 16px rgba(var(--gold-rgb),.35);
  transition:transform .4s var(--ease-spring),box-shadow .35s var(--ease-out);
}
.wordmark:hover .wordmark-logo{transform:rotate(-8deg) scale(1.08);box-shadow:0 6px 26px rgba(var(--gold-rgb),.5)}
.wordmark-text{display:flex;flex-direction:column;line-height:1.1}
.wordmark-name{
  font-family:var(--display);font-size:19px;font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(110deg,var(--gold-deep) 0%,var(--gold-bright) 28%,var(--gold-deep) 55%,var(--gold-bright) 80%,var(--gold-deep) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 7s linear infinite;
}
@keyframes shine{to{background-position:-220% center}}
.wordmark-sub{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.header-meta{margin-left:auto;display:flex;align-items:center;gap:10px}
.now{color:var(--muted);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}

.site-nav{display:flex;align-items:center;gap:2px;margin-left:16px;flex-wrap:wrap}
.site-nav a{
  padding:8px 13px;border-radius:999px;color:var(--muted);
  font-weight:650;font-size:13.5px;text-decoration:none;white-space:nowrap;
  transition:color .2s ease,background-color .2s ease;
}
.site-nav a:hover{color:var(--text);background:rgba(var(--gold-rgb),.08);text-decoration:none}
.site-nav a.active{color:var(--accent-ink);background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));box-shadow:0 2px 10px rgba(var(--gold-rgb),.25)}

.account-menu{position:relative}
.account-menu summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:38px;
  padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--glass);
  color:var(--muted);font-size:12.5px;font-weight:600;transition:border-color .2s ease,color .2s ease;
}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu summary:hover{border-color:var(--hairline);color:var(--text)}
.account-drop{
  position:absolute;right:0;top:calc(100% + 10px);z-index:40;min-width:220px;
  display:flex;flex-direction:column;padding:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-2);
  animation:drop-in .25s var(--ease-out) both;
}
@keyframes drop-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.account-drop a,.account-drop button{
  padding:9px 12px;border-radius:9px;border:none;background:transparent;
  color:var(--text);font-size:13px;font-weight:600;text-align:left;cursor:pointer;text-decoration:none;font-family:inherit;
}
.account-drop a:hover,.account-drop button:hover{background:rgba(var(--gold-rgb),.09);text-decoration:none}
.account-drop .who{color:var(--muted);font-weight:600;font-size:11.5px;padding:8px 12px 4px;overflow-wrap:anywhere}

/* theme toggle: the glyph is drawn from data-theme, set before first paint */
#theme-toggle{border-radius:999px}
#theme-toggle::before{content:"\2600";display:inline-block;transition:transform .5s var(--ease-spring)}
[data-theme="light"] #theme-toggle::before{content:"\263E"}
#theme-toggle:hover::before{transform:rotate(40deg)}

.nav-mobile-only{display:none}
.menu-toggle{display:none}

.to-top{
  position:fixed;right:20px;bottom:20px;z-index:35;
  display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--line);border-radius:50%;
  background:var(--panel);color:var(--gold-ink);box-shadow:var(--shadow-1);
  opacity:0;pointer-events:none;transform:translateY(12px) scale(.9);
  transition:opacity .25s ease,transform .3s var(--ease-spring),border-color .2s ease;
}
.show-top .to-top{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{border-color:var(--gold);text-decoration:none}

.site-footer{
  margin-top:64px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;gap:16px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:12.5px;
}
.site-footer a{color:var(--muted);padding:4px 0}
.site-footer a:hover{color:var(--text)}
.site-footer .spacer{flex:1}

/* ===================================================================== */
/* 5. surfaces                                                            */
/* ===================================================================== */
/* The one container. Smoked glass with a one-pixel gradient edge that
   catches the gold at the top-left corner. Depth tiers: .panel (glass),
   .raised (the hero card, the recommended plan, a status card), and the
   opaque floating things (menus, toasts, modals) in their own sections. */
.panel{
  position:relative;
  background:linear-gradient(160deg,var(--glass-2),var(--glass) 60%);
  border:1px solid transparent;border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.panel::before{
  content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,var(--hairline) 0%,var(--line) 32%,var(--line) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.panel.raised{box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.06)}
.panel.raised::before{background:linear-gradient(150deg,var(--gold) 0%,var(--hairline) 20%,var(--line) 50%,var(--line) 100%)}
a.panel{color:inherit;text-decoration:none;transition:transform .25s var(--ease-out),box-shadow .3s ease}
a.panel:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-1)}
.review-banner{color:var(--text);background:rgba(var(--warn-rgb),.08)}
.review-banner::before{background:rgba(var(--warn-rgb),.5)}

/* ===================================================================== */
/* 6. controls                                                            */
/* ===================================================================== */
.btn{
  position:relative;overflow:hidden;
  min-height:40px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:8px 18px;border:1px solid var(--line);border-radius:12px;
  background:var(--glass);color:var(--text);
  font-weight:650;font-size:13.5px;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform .18s var(--ease-out),box-shadow .25s var(--ease-out),border-color .25s ease,background-color .25s ease,color .25s ease;
}
.btn:hover{transform:translateY(-2px);border-color:var(--hairline);box-shadow:0 8px 24px rgba(var(--gold-rgb),.14);text-decoration:none}
.btn:active{transform:translateY(0) scale(.97)}
.btn-primary{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  border-color:var(--gold-deep);color:var(--accent-ink);font-weight:750;
  box-shadow:0 2px 14px rgba(var(--gold-rgb),.3),inset 0 1px 0 rgba(255,255,255,.35);
}
/* a light sweep across the gold on hover */
.btn-primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);opacity:0;
}
.btn-primary:hover::after{opacity:1;animation:sweep .7s var(--ease-out)}
@keyframes sweep{from{left:-60%}to{left:120%}}
.btn-primary:hover{border-color:var(--gold-deep);box-shadow:0 10px 30px rgba(var(--gold-rgb),.45)}
.btn-danger{color:var(--danger)}
.btn-danger:hover{border-color:var(--danger);box-shadow:0 4px 18px rgba(var(--danger-rgb),.16)}
.btn-sm{min-height:32px;padding:4px 12px;font-size:12.5px;border-radius:9px;font-weight:600}
/* small buttons sit in rows and tabs; a lift there jitters */
.btn-sm:hover{transform:none}
.btn-icon{width:38px;min-width:38px;padding:4px 0;font-size:15px}
.btn .ico{font-size:15px;line-height:1}
.btn[disabled]{opacity:.45;pointer-events:none;filter:saturate(.4)}
/* The current plan on a tier card: looks like the button, is not one. */
.btn.is-current{cursor:default;opacity:.72}
/* in flight: keep the colour, show a spinner (htmx puts .htmx-request on the form) */
.htmx-request .btn[disabled]{opacity:.8;filter:none;cursor:progress}
.htmx-request .btn[disabled]::after{
  content:"";flex:none;width:11px;height:11px;border-radius:50%;position:static;transform:none;opacity:1;
  background:none;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite;
}

.field{display:flex;flex-direction:column;gap:6px}
.field.span-3{grid-column:1/-1}
.span-2{grid-column:span 2}
.field label,.form-stack label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.field input,.field select,.field textarea,
.form-stack input[type=text],.form-stack input[type=email],.form-stack input[type=password],
.form-stack input[type=number],.form-stack select,.form-stack textarea,
.search,.sort-select{
  width:100%;min-height:42px;padding:9px 13px;
  background:var(--input-bg);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font:inherit;font-size:14px;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.field input::placeholder,.field textarea::placeholder,.form-stack input::placeholder,.form-stack textarea::placeholder,.search::placeholder{color:var(--placeholder)}
.field input:focus,.field select:focus,.field textarea:focus,
.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus,.search:focus,.sort-select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.16);
}
.field textarea,.form-stack textarea{min-height:120px;resize:vertical;font-family:var(--mono);font-size:13px;line-height:1.55}
/* A checkbox is not a text box. */
.field input[type=checkbox],.field input[type=radio],
.form-stack input[type=checkbox],.form-stack input[type=radio]{
  width:17px;height:17px;min-height:0;padding:0;margin:2px 0 0;align-self:flex-start;accent-color:var(--gold);
}
.chk{display:flex;align-items:center;gap:7px;min-height:40px;color:var(--muted);font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer}
.chk input{width:16px;height:16px;accent-color:var(--gold)}
.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.form-stack{display:flex;flex-direction:column;gap:16px}
.form-actions{margin-top:18px}
.form-note{color:var(--muted);font-size:12.5px;margin:0 0 16px}
.form-note code,.guide code{
  font-family:var(--mono);font-size:11.5px;color:var(--gold-ink);
  background:rgba(var(--gold-rgb),.09);border:1px solid rgba(var(--gold-rgb),.22);border-radius:5px;padding:1px 6px;
}
.errorlist{margin:6px 0 0;padding-left:16px;color:var(--danger);font-size:12.5px;font-weight:600}
.form-error{
  margin:0 0 14px;padding:10px 13px;border-radius:10px;
  border:1px solid rgba(var(--danger-rgb),.5);background:rgba(var(--danger-rgb),.08);
  color:var(--danger);font-size:13px;font-weight:600;
}
.search{flex:1;min-width:180px;max-width:380px;min-height:38px;padding:8px 14px}
.sort-select{width:auto;min-height:38px;padding:8px 12px;font-size:13px;font-weight:600}
.toolbar{display:flex;align-items:center;gap:10px;margin:0 0 16px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.count-pill{color:var(--muted);font-size:12.5px;border:1px solid var(--line);border-radius:999px;padding:5px 13px;background:var(--glass)}
.count-pill b{color:var(--text);font-weight:700}
/* a contextual link to the guide that explains this screen */
.qmark{
  display:inline-grid;place-items:center;width:18px;height:18px;flex:none;margin-left:6px;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.45);color:var(--gold-ink);font-size:11px;font-weight:800;line-height:1;
  text-decoration:none;vertical-align:middle;transition:background-color .2s ease,transform .2s var(--ease-spring);
}
.qmark:hover{background:rgba(var(--gold-rgb),.14);text-decoration:none;transform:scale(1.15)}
/* the add-a-club form */
details.add-club{margin-top:22px}
details.add-club summary{
  list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:12px;
  padding:16px 20px;font-weight:700;font-size:14.5px;border-radius:var(--radius);transition:color .25s ease;
}
details.add-club summary::-webkit-details-marker{display:none}
details.add-club summary:hover{color:var(--gold-ink)}
.summary-chip{
  display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:8px;font-size:16px;font-weight:800;line-height:1;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:var(--accent-ink);
  box-shadow:0 2px 10px rgba(var(--gold-rgb),.3);transition:transform .3s var(--ease-spring);
}
details.add-club[open] .summary-chip{transform:rotate(45deg)}
.form-body{padding:2px 20px 20px}
.htmx-indicator{opacity:0;transition:opacity .2s ease}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}

/* ===================================================================== */
/* 7. badges, chips, pills                                                */
/* ===================================================================== */
.badge{
  display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:999px;border:1px solid var(--line);
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
  background:var(--glass);
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.badge.running{color:var(--ok);border-color:rgba(var(--ok-rgb),.4);background:rgba(var(--ok-rgb),.09)}
.badge.running::before{animation:radar 2.2s var(--ease-out) infinite}
@keyframes radar{0%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),.7)}70%{box-shadow:0 0 0 7px rgba(var(--ok-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--ok-rgb),0)}}
.badge.idle{color:#a8b0be;background:rgba(154,163,178,.06)}
.badge.done{color:#8b93a1;border-color:var(--line);background:transparent}
.badge.stopped{color:var(--danger);border-color:rgba(var(--danger-rgb),.4);background:rgba(var(--danger-rgb),.08)}
.badge.warn{color:var(--warn);border-color:rgba(var(--warn-rgb),.5);background:rgba(var(--warn-rgb),.09)}
.badge.warn::before{animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.35}}
[data-theme="light"] .badge.idle{color:#7d7462;background:rgba(125,116,98,.08)}
[data-theme="light"] .badge.done{color:#7a705c}
.chip{
  display:inline-block;padding:1px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  font-size:10.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
}
.chip.gold{border-color:rgba(var(--gold-rgb),.45);color:var(--gold-ink)}
.chip.warn{border-color:rgba(var(--warn-rgb),.5);color:var(--warn)}
.chip.red{border-color:rgba(var(--danger-rgb),.55);color:var(--danger)}
.src-tag{
  display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.src-tag.manual{border-color:rgba(var(--gold-rgb),.45);color:var(--gold-ink)}
.t-ok{color:var(--ok);font-weight:700}
.t-warn{color:var(--warn);font-weight:700}
.t-danger{color:var(--danger);font-weight:700}
.tier-badge{
  display:inline-block;margin-left:8px;padding:3px 10px;border-radius:999px;vertical-align:2px;
  background:linear-gradient(90deg,rgba(var(--gold-rgb),.16),rgba(var(--gold-rgb),.34),rgba(var(--gold-rgb),.16));background-size:200% auto;
  color:var(--gold-ink);font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  animation:shimmer 2.8s linear infinite;
}
@keyframes shimmer{to{background-position:-200% center}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:18px;padding:5px 13px;border-radius:999px;
  border:1px solid rgba(var(--gold-rgb),.45);background:var(--glass);color:var(--gold-ink);
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);animation:ping 2.6s var(--ease-out) infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),.6)}70%{box-shadow:0 0 0 8px rgba(var(--gold-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0)}}

/* ===================================================================== */
/* 8. tables                                                              */
/* ===================================================================== */
.table-panel{overflow:hidden}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:760px}
th{
  padding:13px 16px;text-align:left;color:var(--muted);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle;white-space:nowrap}
tbody tr{transition:background-color .25s ease}
tbody tr:hover{background:rgba(var(--gold-rgb),.035)}
tbody tr:last-child td{border-bottom:none}
tbody tr.is-disabled .cell-main{opacity:.55}
.task-name{font-weight:700;font-size:14.5px}
.sub{color:var(--muted);font-size:12px}
.actions-cell{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.empty{display:none;padding:64px 24px;text-align:center}
.table-panel.is-empty .table-wrap{display:none}
.table-panel.is-empty .empty{display:block}
.empty h2{margin:0 0 6px;font-size:18px}
.empty p{margin:0;color:var(--muted);font-size:13.5px}

/* ===================================================================== */
/* 9. feedback                                                            */
/* ===================================================================== */
#toasts{
  position:fixed;top:82px;right:20px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  width:min(400px,calc(100vw - 32px));pointer-events:none;
}
.toast{
  --toast-accent:var(--gold);
  position:relative;display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 14px 13px 16px;pointer-events:auto;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--toast-accent);border-radius:14px;
  font-size:14px;font-weight:600;line-height:1.45;color:var(--text);text-align:left;
  box-shadow:var(--shadow-2);animation:toast-in .45s var(--ease-spring) both;
}
.toast.ok{--toast-accent:var(--ok)}
.toast.warn{--toast-accent:var(--warn)}
.toast.err{--toast-accent:var(--danger)}
.toast.info{--toast-accent:var(--gold)}
.toast-icon{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--bg);background:var(--toast-accent);margin-top:1px}
.toast-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.toast-close{flex:0 0 auto;margin:-2px -4px 0 4px;padding:0 6px;background:none;border:0;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;border-radius:6px}
.toast-close:hover{color:var(--text)}
.toast.hide{animation:toast-out .3s ease both}
@keyframes toast-in{from{opacity:0;transform:translateX(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{from{opacity:1}to{opacity:0;transform:translateX(12px)}}

.alerts{display:none;flex-direction:column;gap:8px;margin:0 0 18px}
.alerts.has-alerts{display:flex}
.alert{
  display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;
  font-size:13px;font-weight:600;color:var(--muted);background:var(--glass);
}
.alert::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.alert-at{margin-left:auto;flex:none;color:var(--muted);font-weight:500;font-size:11.5px}
.alert.error{color:var(--danger);border-color:rgba(var(--danger-rgb),.45);background:rgba(var(--danger-rgb),.07)}
.alert.error::before{animation:beat 1.6s ease-in-out infinite}
.alert.warn{color:var(--warn);border-color:rgba(var(--warn-rgb),.45);background:rgba(var(--warn-rgb),.07)}

.modal-backdrop{
  position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:18px;
  background:rgba(3,4,7,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.modal-backdrop.open{display:flex}
.modal{
  position:relative;width:min(680px,100%);max-height:min(86vh,780px);display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-2);
  animation:toast-in .3s var(--ease-out) both;
}
.modal-head{padding:16px 20px 12px;border-bottom:1px solid var(--line);font-weight:800;font-size:15px}
.modal-plan{
  min-height:72px;max-height:280px;overflow:auto;overscroll-behavior:contain;margin:14px 18px 0;padding:11px 13px;border-radius:10px;
  background:var(--console);border:1px solid #232833;font-family:var(--mono);font-size:11.5px;line-height:1.65;color:#c9cdc3;
  --danger:#f08a8a;--warn:#f5c76a;--gold-bright:#f0cf7a;color-scheme:dark;
}
.modal-warn{
  margin:14px 18px 0;padding:11px 14px;border-radius:10px;border:1px solid rgba(var(--danger-rgb),.6);
  background:rgba(var(--danger-rgb),.1);color:var(--danger);font-size:13px;font-weight:600;line-height:1.6;
}
.modal-type{margin:14px 18px 0}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px}

/* ===================================================================== */
/* 10. page furniture                                                     */
/* ===================================================================== */
.section-head{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.section-title{color:var(--muted);font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.section-rule{flex:1;height:1px;background:linear-gradient(90deg,var(--hairline),transparent);transform-origin:left}
.section-note{color:var(--muted);font-size:12px;white-space:nowrap}
.mon-section{margin-top:28px}

.crumbs{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px;color:var(--muted);font-size:12px;font-weight:600}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--gold-ink);text-decoration:none}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--text)}
.page-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:30px;margin:0 0 6px}
.page-head .page-sub{color:var(--muted);font-size:13.5px;margin:0;max-width:62ch}
.page-head .page-actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.kv{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:10px 16px;font-size:13.5px}
.kv dt{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding-top:2px}
.kv dd{margin:0;overflow-wrap:anywhere}

.summary-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:0 0 24px}
.sum-tile{padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.sum-k{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.sum-v{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sum-sub{color:var(--muted);font-size:11.5px}

/* ===================================================================== */
/* 11. marketing                                                          */
/* ===================================================================== */
.hero{padding:52px 0 40px;max-width:760px}
.hero h1{font-size:clamp(38px,5.4vw,60px);line-height:1.04;margin-bottom:18px}
.hero .lede{color:var(--muted);font-size:17.5px;line-height:1.6;margin-bottom:24px;max-width:60ch}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .cta-row .btn{min-height:46px;padding:10px 22px;font-size:14.5px}
.hero-split{
  max-width:none;display:grid;gap:48px;align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding-top:44px;
}
.hero-split h1{max-width:640px}
.hero-points{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:11px}
.hero-points li{position:relative;padding-left:26px;color:var(--muted);font-size:15px;line-height:1.55}
.hero-points li::before{content:'\2726';position:absolute;left:0;top:0;color:var(--gold)}
.hero-points strong{color:var(--text)}
.hero-card{position:relative}
/* the halo is a shadow, not a pseudo-element: a shadow never widens the page */
.hero-card .discord-mock{box-shadow:var(--shadow-2),0 0 90px 24px rgba(var(--gold-rgb),.13)}
.hero-card-note{margin:14px 4px 0;color:var(--muted);font-size:13px;line-height:1.6}

/* the Discord card mock: real fields, restyled chrome */
.discord-mock{
  --dc-bg:#313338;--dc-embed:#2b2d31;--dc-text:#dbdee1;--dc-muted:#949ba4;--dc-accent:#e3b64e;
  padding:16px;border-radius:18px;background:var(--dc-bg);color:var(--dc-text);
  font-family:var(--body);font-size:13.5px;line-height:1.5;color-scheme:dark;overflow-x:auto;
  border:1px solid rgba(255,255,255,.06);
}
.discord-mock .dc-msg{display:flex;gap:14px;align-items:flex-start}
.discord-mock .dc-msg > div:last-child{min-width:0;flex:1}
.discord-mock .dc-avatar{
  position:relative;width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#e3b64e,#c9982f);color:#14100a;font-size:12px;font-weight:800;
}
.discord-mock .dc-avatar::after{ /* presence dot */
  content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  background:#23a55a;border:3px solid var(--dc-bg);animation:presence 3s ease-out infinite;
}
@keyframes presence{0%{box-shadow:0 0 0 0 rgba(35,165,90,.55)}60%{box-shadow:0 0 0 7px rgba(35,165,90,0)}100%{box-shadow:0 0 0 0 rgba(35,165,90,0)}}
.discord-mock .dc-who{color:#f2f3f5;font-weight:600;font-size:14px;margin-bottom:6px}
.discord-mock .dc-app{display:inline-block;margin-left:5px;padding:0 5px;border-radius:4px;background:#5865f2;color:#fff;font-size:10px;font-weight:700;vertical-align:middle}
.discord-mock .dc-when{margin-left:7px;color:#949ba4;font-size:11.5px;font-weight:400}
.discord-mock .dc-rel{color:#949ba4}
.discord-mock .embed{position:relative;max-width:520px;padding:12px 16px 14px 18px;background:var(--dc-embed);border-radius:6px}
.discord-mock .embed::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--dc-accent);border-radius:6px 0 0 6px}
.discord-mock .embed-title{color:#4aa3f0;font-weight:700;font-size:15px;margin-bottom:8px}
.discord-mock .embed-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;margin-bottom:10px}
.discord-mock .fname{color:#f2f3f5;font-weight:700;font-size:12.5px;margin-bottom:2px}
.discord-mock .fval{color:var(--dc-muted);font-size:12.5px}
.discord-mock .seats{display:flex;flex-direction:column;gap:6px;margin:8px 0 10px}
.discord-mock .seat{font-size:12.5px;color:var(--dc-text);overflow-wrap:anywhere}
.discord-mock .seat b{color:#fff}
.discord-mock .seat em{color:var(--dc-muted);font-style:italic}
.discord-mock .seat.head{margin-bottom:2px;color:#fff}
.discord-mock .seat code{padding:1px 5px;border-radius:3px;background:#1e1f22;color:#dbdee1;font-family:var(--mono);font-size:11.5px}
.discord-mock .embed-foot{color:var(--dc-muted);font-size:11.5px;border-top:1px solid #3f4147;padding-top:8px}
.discord-mock .thumb{
  float:right;width:72px;height:72px;margin-left:14px;border-radius:6px;
  background:linear-gradient(135deg,#3f4147,#23252a);display:grid;place-items:center;color:var(--dc-muted);font-size:10.5px;text-align:center;
}
/* the arrival: firm.js marks the hero card .arriving and then lands each
   listing in turn. Without JavaScript, or under reduced motion, the card
   is simply drawn. */
.discord-mock.arriving .seat:not(.head),.discord-mock.arriving .embed-grid,.discord-mock.arriving .embed-foot,.discord-mock.arriving .thumb{opacity:0}
.discord-mock .seat.landed{animation:land .55s var(--ease-spring) both}
.discord-mock .seat.landed code{animation:ring .9s var(--ease-out) both}
.discord-mock .embed-grid.landed,.discord-mock .embed-foot.landed,.discord-mock .thumb.landed{animation:fade-in .5s ease both}
@keyframes land{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(227,182,78,.9)}100%{box-shadow:0 0 0 10px rgba(227,182,78,0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.step{padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px}
.step h3{font-size:17px}
.step .n{
  display:grid;place-items:center;width:32px;height:32px;border-radius:10px;margin-bottom:6px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));color:var(--accent-ink);
  font-family:var(--display);font-weight:800;font-size:16px;box-shadow:0 4px 14px rgba(var(--gold-rgb),.3);
}
.step p{color:var(--muted);font-size:13.5px;margin:0;line-height:1.6}
.step-link{margin-top:auto;font-size:12.5px;font-weight:700}
.step .step-link + .step-link{margin-top:0}
.showcase{display:grid;gap:16px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}

.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;align-items:stretch;perspective:1200px}
.tier-card{
  padding:26px 24px 22px;display:flex;flex-direction:column;gap:10px;
  transform-style:preserve-3d;transition:transform .3s var(--ease-out),box-shadow .3s ease;will-change:transform;
}
.tier-card.featured{transform:translateY(-8px)}
.tier-card.featured::before{
  background:conic-gradient(from var(--turn,0deg),var(--gold-bright),var(--line) 25%,var(--hairline) 50%,var(--line) 75%,var(--gold-bright));
  animation:turn 9s linear infinite;
}
@property --turn{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes turn{to{--turn:360deg}}
.tier-card.featured{box-shadow:var(--shadow-2),0 0 80px 18px rgba(var(--gold-rgb),.16)}
.tier-name{font-size:16px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;flex-wrap:wrap}
.tier-price{font-family:var(--display);font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;margin:4px 0 2px}
.tier-price .per{font-family:var(--body);font-size:13px;font-weight:600;color:var(--muted);letter-spacing:0}
.tier-slots{color:var(--gold-ink);font-weight:700;font-size:14.5px}
.tier-each{color:var(--muted);font-size:12.5px}
.tier-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.7}
.tier-card .btn{margin-top:auto}
.plan-includes{margin-top:18px;display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;padding:16px 22px}
.plan-includes-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan-includes ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.plan-includes li{position:relative;padding-left:18px;font-size:13.5px}
.plan-includes li::before{content:'\2713';position:absolute;left:0;color:var(--gold)}
.plan-cost{margin-top:14px}

/* "inside the app": a picture of the monitor page, built from the app's own
   markup (partials/app_preview.html). Nothing in it can be clicked. */
.app-show{display:grid;gap:40px;align-items:center;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.app-show-copy h2{font-size:30px;margin-bottom:14px}
.app-show-copy .hero-points{margin:18px 0 0}
.app-preview{
  border-radius:var(--radius-l);border:1px solid var(--line);background:var(--bg-2);overflow:hidden;
  box-shadow:var(--shadow-2),0 0 90px 10px rgba(var(--gold-rgb),.1);pointer-events:none;user-select:none;
}
.ap-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--glass)}
.ap-dot{width:10px;height:10px;border-radius:50%;background:var(--dot-off);flex:none}
.ap-url{
  margin-left:10px;flex:1;min-width:0;padding:4px 12px;border-radius:999px;background:var(--input-bg);border:1px solid var(--line);
  color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ap-body{display:grid;gap:14px;padding:16px}
.app-preview .activity-scroll{max-height:232px;overflow:hidden}
.app-preview [hidden]{display:none}
.app-preview .ap-landed{animation:land .55s var(--ease-spring) both}
.tick{animation:tick .45s var(--ease-spring);transform-origin:left center}
@keyframes tick{from{transform:scale(1.28)}to{transform:none}}

/* the pricing calculator */
.calc{display:grid;gap:22px 30px;padding:26px;align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.calc:not(.calc-live){grid-template-columns:minmax(0,1fr)}
.calc:not(.calc-live) .calc-inputs{display:none}
.calc-live .calc-example{display:none}
.calc-inputs{display:grid;gap:20px}
.calc-field label{display:block;margin-bottom:6px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.calc-range{display:flex;align-items:center;gap:14px}
.calc-range input[type=range]{flex:1;min-width:0;height:32px;margin:0;accent-color:var(--gold);cursor:pointer}
.calc-range output{min-width:3ch;text-align:right;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-result{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--glass)}
.calc-line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:14px 18px;border-bottom:1px solid var(--line-soft);font-size:14px}
.calc-line .k,.calc-total .k{color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.calc-line .n{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-total{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;padding:16px 18px;background:rgba(var(--gold-rgb),.07)}
.calc-total .n{font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--gold-ink);font-variant-numeric:tabular-nums}
.calc-note{grid-column:1/-1;margin:0}
.calc-example{margin:0 0 10px}

.pack-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.pack-card{padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.pack-name{font-weight:700;font-size:14px}
.pack-price{font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pack-each{color:var(--muted);font-size:12px}

.faq{display:flex;flex-direction:column;gap:10px}
.faq details{padding:0}
.faq summary{
  list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:10px;
  padding:17px 22px;font-weight:700;font-size:15px;border-radius:var(--radius);
  transition:color .2s ease,background-color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.4);color:var(--gold-ink);font-size:17px;font-weight:700;line-height:1;
  transition:transform .35s var(--ease-spring),background-color .2s ease;
}
.faq details[open] summary::after{transform:rotate(45deg);background:rgba(var(--gold-rgb),.14)}
.faq summary:hover{color:var(--gold-ink);background:rgba(var(--gold-rgb),.04)}
.faq details p{margin:0;padding:0 22px 20px;font-size:14px;line-height:1.7;max-width:70ch}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s var(--ease-out),content-visibility .3s allow-discrete}
.faq details[open]::details-content{block-size:auto}

.cta-panel{margin-top:36px;padding:36px 28px;text-align:center}
.cta-panel h2{font-size:30px}
.cta-panel .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.cta-panel .cta-row .btn{min-height:46px;padding:10px 22px;font-size:14.5px}

.errpage{max-width:620px;margin:44px auto;padding:36px 30px;text-align:center}
.errpage .cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.errcode{
  font-family:var(--display);font-size:72px;font-weight:800;line-height:1;margin-bottom:10px;letter-spacing:-.04em;
  background:linear-gradient(110deg,var(--gold-deep),var(--gold-bright),var(--gold-deep));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite;
}

/* ===================================================================== */
/* 12. guides                                                             */
/* ===================================================================== */
.guide{max-width:760px}
.guide h2{margin-top:40px;font-size:26px;scroll-margin-top:96px}
.guide h2::before{content:"";display:block;width:36px;height:3px;border-radius:2px;margin-bottom:12px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright))}
.guide h3{margin-top:24px}
.guide p,.guide li{color:var(--text);font-size:15px;line-height:1.75}
.guide ul,.guide ol{padding-left:22px;margin:0 0 16px}
.guide li{margin-bottom:6px}
.guide pre{
  overflow-x:auto;padding:14px 16px;border-radius:12px;background:var(--console);border:1px solid #232833;color:#c9cdc3;
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color-scheme:dark;
}
.guide pre code{border:none;background:none;color:inherit;padding:0}
.callout{
  margin:18px 0;padding:14px 18px 14px 20px;border-radius:12px;position:relative;
  border:1px solid rgba(var(--gold-rgb),.3);border-left:3px solid var(--gold);background:rgba(var(--gold-rgb),.06);
  color:var(--muted);font-size:13.5px;line-height:1.65;
}
.guide a{text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.4);text-underline-offset:3px}
.guide a:hover{text-decoration-color:var(--gold)}
.guide-index{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.guide-index a{display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;text-decoration:none;color:inherit}
.guide-index .t{font-weight:750;font-size:15.5px;letter-spacing:-.01em}
.guide-index .s{color:var(--muted);font-size:13px;line-height:1.55}
.guide-layout{display:grid;gap:26px;grid-template-columns:230px minmax(0,1fr);align-items:start}
.guide-nav{position:sticky;top:96px;padding:14px 12px 16px}
.guide-nav .gn-group{color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin:16px 0 6px;padding:0 10px}
.guide-nav .gn-group:first-child{margin-top:0}
.guide-nav a{
  display:block;padding:8px 10px;border-radius:9px;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;
  transition:color .2s ease,background-color .2s ease,transform .2s var(--ease-out);
}
.guide-nav a:hover{color:var(--text);background:rgba(var(--gold-rgb),.07);text-decoration:none;transform:translateX(2px)}
.guide-nav a.active{color:var(--gold-ink);background:rgba(var(--gold-rgb),.12)}
.guide-foot{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.guide-foot .spacer{flex:1}

/* ===================================================================== */
/* 13. auth                                                               */
/* ===================================================================== */
.auth-wrap{max-width:440px;margin:min(9vh,72px) auto 24px}
.auth-card{padding:30px 28px 24px}
.auth-card h1{font-size:28px;margin-bottom:6px}
.auth-sub{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.auth-alt{margin-top:20px;color:var(--muted);font-size:12.5px;text-align:center}

/* ===================================================================== */
/* 14. onboarding, empty states, the .why block                           */
/* ===================================================================== */
.checklist{padding:20px 22px 18px;margin:0 0 22px}
.checklist .head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.checklist h2{margin:0;font-size:20px}
.checklist .count{margin-left:auto;color:var(--muted);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.checklist .intro{color:var(--muted);font-size:13px;margin:0 0 14px}
.progress{height:6px;border-radius:999px;overflow:hidden;margin:0 0 16px;background:rgba(127,127,127,.18)}
.progress span{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));transition:width .6s var(--ease-out)}
.progress .w0{width:0}
.progress .w20{width:20%}.progress .w25{width:25%}.progress .w33{width:33%}
.progress .w40{width:40%}.progress .w50{width:50%}.progress .w60{width:60%}
.progress .w67{width:67%}.progress .w75{width:75%}.progress .w80{width:80%}
.progress .w100{width:100%}
.check-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.check-item{display:flex;align-items:flex-start;gap:13px;padding:12px 12px;border-radius:10px;border-top:1px solid var(--line-soft)}
.check-item:first-child{border-top:none}
.check-item.is-next{background:rgba(var(--gold-rgb),.06)}
.check-mark{display:grid;place-items:center;width:22px;height:22px;flex:none;margin-top:1px;border-radius:50%;border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:800;line-height:1}
.check-item.is-done .check-mark{border-color:rgba(var(--ok-rgb),.5);color:var(--ok);background:rgba(var(--ok-rgb),.1)}
.check-item.is-done .ci-title{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.ci-body{flex:1;min-width:0}
.ci-title{font-weight:700;font-size:14px;display:flex;align-items:center;flex-wrap:wrap}
.ci-detail{color:var(--muted);font-size:12.5px;margin:3px 0 0}
.check-item .btn{flex:none;align-self:center}
.checklist-cta{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:10px;padding-top:14px;border-top:1px solid var(--line-soft)}

.setup-bar{margin:-10px 0 20px}
.sb-link{
  display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:10px 16px;border-radius:14px;
  border:1px solid rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.06);color:var(--text);font-size:13px;text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.sb-link:hover{text-decoration:none;border-color:var(--gold);background:rgba(var(--gold-rgb),.1)}
.sb-k{color:var(--gold-ink);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.sb-count{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.progress.sb-progress{flex:0 0 110px;margin:0}
.sb-next{margin-left:auto;font-weight:600}
.sb-next b{color:var(--gold-ink)}

.empty-cta{display:block;padding:44px 22px;text-align:center}
.empty .spark,.empty-cta .spark{
  display:grid;place-items:center;width:56px;height:56px;margin:0 auto 16px;border-radius:50%;font-size:22px;color:var(--gold-ink);
  border:1px solid rgba(var(--gold-rgb),.35);background:rgba(var(--gold-rgb),.08);box-shadow:0 0 30px rgba(var(--gold-rgb),.18);
  animation:ping 3s var(--ease-out) infinite;
}
.empty-cta h2{margin:0 0 6px;font-size:22px}
.empty-cta p{margin:0 auto 16px;max-width:52ch;color:var(--muted);font-size:13.5px}
.empty-cta .row{justify-content:center}

.why{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.6;border:1px solid var(--line);background:rgba(127,127,127,.05)}
.why .t{font-weight:700;display:block;margin-bottom:2px}
.why .d{color:var(--muted)}
.why .btn{flex:none;align-self:center;margin-left:auto}
.why.tone-ok{border-color:rgba(var(--ok-rgb),.35);background:rgba(var(--ok-rgb),.06)}
.why.tone-warn{border-color:rgba(var(--warn-rgb),.45);background:rgba(var(--warn-rgb),.07)}
.why.tone-danger{border-color:rgba(var(--danger-rgb),.45);background:rgba(var(--danger-rgb),.07)}
.why.tone-warn .t{color:var(--warn)}
.why.tone-danger .t{color:var(--danger)}

/* ===================================================================== */
/* 15. the activity console                                               */
/* ===================================================================== */
.log-drawer{overflow:hidden}
.log-drawer .drawer-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 18px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
}
.log-drawer .drawer-head .spacer{flex:1}
.log-drawer .drawer-head .live{color:var(--ok);text-transform:none;letter-spacing:0;font-size:11.5px}
.log-drawer .drawer-head .live::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:currentColor;animation:radar 2.2s var(--ease-out) infinite}
details.log-drawer > summary{cursor:pointer;list-style:none}
/* A console keeps its dark ground in both themes. */
.log-pane{
  margin:0;padding:14px 16px;max-height:440px;overflow:auto;background:var(--console);border:none;border-radius:0;
  font-family:var(--mono);font-size:12px;line-height:1.6;color:#c9cdc3;white-space:pre-wrap;overflow-wrap:anywhere;color-scheme:dark;
}
.activity-feed{list-style:none;white-space:normal}
.activity-feed .act{display:flex;gap:12px;padding:2px 0}
.activity-feed .act-time{flex:none;font-variant-numeric:tabular-nums}
.activity-feed .act-text{white-space:pre-wrap}
.activity-feed .act-time,.activity-feed .act-count,.activity-feed .act-empty{color:#8a919f}   /* 6.4:1 on the console */
.activity-feed .tone-ok .act-text{color:#8fd8a0}
.activity-feed .tone-warn .act-text{color:#f5c76a}
.activity-feed .tone-danger .act-text{color:#f08a8a}

/* ===================================================================== */
/* 16. staff dashboard (a staff surface is allowed a denser look)         */
/* ===================================================================== */
.pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);animation:radar 2.4s var(--ease-out) infinite;vertical-align:middle;margin-right:6px}
.as-of{color:var(--muted);font-size:12.5px;white-space:nowrap}
.attn{margin:0 0 20px}
.attn-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.attn-item{display:flex;align-items:center;gap:14px;background:var(--glass);border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius);padding:12px 16px}
.attn-item.tone-danger{border-left-color:var(--danger);background:linear-gradient(90deg,rgba(var(--danger-rgb),.07),transparent 40%)}
.attn-item.tone-warn{border-left-color:var(--warn);background:linear-gradient(90deg,rgba(var(--warn-rgb),.07),transparent 40%)}
.attn-n{font-family:var(--display);font-size:24px;font-weight:800;line-height:1;min-width:34px;text-align:right;font-variant-numeric:tabular-nums}
.tone-danger .attn-n{color:var(--danger)}
.tone-warn .attn-n{color:var(--warn)}
.attn-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.attn-text{font-weight:600}
.attn-why{color:var(--muted);font-size:12.5px}
.attn.is-clear .attn-clear{display:flex;align-items:center;gap:10px;margin:0;background:var(--glass);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:var(--radius);padding:12px 16px;color:var(--muted)}
.attn.is-clear strong{color:var(--text)}
.statline{display:grid;gap:12px;margin:0 0 22px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat{position:relative;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.stat-k{color:var(--muted);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase}
.stat-v{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.stat-sub{color:var(--muted);font-size:12.5px}
.stat-v-sm{font-size:20px}
.stat.stat-warn::before{background:rgba(var(--warn-rgb),.4)}
.stat-note{position:absolute;top:10px;right:12px;cursor:help;color:var(--muted);border:1px solid var(--line);border-radius:50%;width:16px;height:16px;font-size:10px;line-height:14px;text-align:center;opacity:.6}
.stat-note:hover{opacity:1;color:var(--gold-ink);border-color:var(--hairline)}
.live-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:12.5px}
.live-head .spacer{flex:1}
.live-title{color:var(--text);font-weight:600}
.live-as-of{white-space:nowrap}
.hdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--dot-off);vertical-align:middle}
.hdot-ok{background:var(--ok);box-shadow:0 0 6px rgba(var(--ok-rgb),.5)}
.hdot-warn{background:var(--warn)}
.hdot-danger{background:var(--danger);box-shadow:0 0 6px rgba(var(--danger-rgb),.55)}
.col-dot{width:26px;text-align:center}
.live-table tr.health-danger td{background:rgba(var(--danger-rgb),.045)}
.row-sub{display:block;color:var(--muted);font-size:11.5px}
.cred-table th.num,.cred-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.cred-table tbody tr:hover td{background:rgba(var(--gold-rgb),.035)}

/* ===================================================================== */
/* 17. motion                                                             */
/* ===================================================================== */
/* Scroll reveal, marketing pages only. theme.js puts .reveal-ready on <html>
   before first paint when the reader has not asked for reduced motion and the
   browser has IntersectionObserver; firm.js then adds .in to each .reveal the
   first time it scrolls into view, once, and stops watching it. Without the
   class nothing is ever hidden. Never put .reveal on anything htmx swaps. */
.reveal-ready .reveal:not(.in){opacity:0;animation:reveal-failsafe 0s 4.5s forwards}
.reveal-ready .reveal.stagger:not(.in) > *{animation:reveal-failsafe 0s 4.5s forwards}
/* The failsafe is CSS, not firm.js's 4s timer alone: theme.js hides these
   before first paint, so if firm.js never loads (a network blip, a bad
   deploy) the page must still show itself. */
@keyframes reveal-failsafe{to{opacity:1}}
.reveal.in{animation:rise .75s var(--ease-out) both}
.reveal-ready .reveal.stagger:not(.in) > *{opacity:0}
.reveal.stagger.in{animation:none}
.reveal.stagger.in > *{animation:rise .75s var(--ease-out) both}
.reveal.stagger.in > *:nth-child(2){animation-delay:.08s}
.reveal.stagger.in > *:nth-child(3){animation-delay:.16s}
.reveal.stagger.in > *:nth-child(4){animation-delay:.24s}
.reveal.stagger.in > *:nth-child(5){animation-delay:.32s}
.reveal.stagger.in > *:nth-child(6){animation-delay:.4s}
.reveal.stagger.in > *:nth-child(n+7){animation-delay:.46s}
.section-head.reveal.in .section-rule{animation:draw .9s var(--ease-out) both}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* A page-load entrance for a lone card (auth, billing return). */
.rise{opacity:0;animation:rise .8s var(--ease-out) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}.d4{animation-delay:.34s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* A monitor card whose status changed after a swap flashes its new colour once
   (firm.js adds the class; the three-second polls never trigger it). */
.mon-card.flash{animation:flash 1.1s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0)}20%{box-shadow:0 0 0 3px rgba(var(--gold-rgb),.55),0 0 30px rgba(var(--gold-rgb),.35)}100%{box-shadow:0 0 0 0 rgba(var(--gold-rgb),0)}}
.spin .ico{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* A swap marked transition:true cross-fades through the View Transitions API. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.18s}

/* ===================================================================== */
/* responsive                                                             */
/* ===================================================================== */
@media (max-width:860px){
  .guide-layout{grid-template-columns:minmax(0,1fr)}
  .guide-nav{position:static}
  .showcase{grid-template-columns:1fr}
  .hero-split{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:28px}
  .app-show{grid-template-columns:minmax(0,1fr);gap:26px}
  .calc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .page-shell{padding:16px 16px 48px}
  .site-header{gap:10px;margin-bottom:22px}
  .site-header::before{inset:4px -4px}
  .is-scrolled .site-header{padding-left:10px;padding-right:8px}
  .header-meta{gap:8px}
  .desktop-only{display:none !important}
  .now{font-size:11.5px}
  /* tap targets */
  .btn,.btn-sm{min-height:44px}
  .btn-sm{padding:6px 14px}
  .btn-icon{width:44px;min-width:44px}
  .account-menu summary{min-height:44px}
  .qmark{width:22px;height:22px}

  .menu-toggle{
    display:grid;place-content:center;gap:4px;flex:none;width:44px;height:44px;padding:0;
    border:1px solid var(--line);border-radius:999px;background:var(--glass);color:var(--text);cursor:pointer;
    transition:border-color .2s ease,background-color .2s ease;
  }
  .menu-toggle:hover,.menu-open .menu-toggle{border-color:var(--gold);background:rgba(var(--gold-rgb),.1)}
  .menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease-spring),opacity .2s ease}
  .menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menu-open .menu-toggle span:nth-child(2){opacity:0}
  .menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* the links drop down as a glass sheet under the header */
  .site-nav{
    position:absolute;top:calc(100% + 6px);left:-4px;right:-4px;
    margin:0;flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap;padding:10px 10px 12px;
    background:var(--panel);background:color-mix(in srgb,var(--panel) 92%,transparent);
    -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
    border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-2);
    opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top center;
    transition:opacity .22s ease,transform .3s var(--ease-out),visibility 0s linear .3s;
  }
  .menu-open .site-nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .site-nav a,.site-nav .nav-signout{padding:13px 14px;font-size:15.5px;border-radius:12px;min-height:46px;display:flex;align-items:center}
  .site-nav .nav-mobile-only{display:block}
  .menu-open .site-nav > *{animation:rise .45s var(--ease-out) both}
  .menu-open .site-nav > *:nth-child(2){animation-delay:.04s}
  .menu-open .site-nav > *:nth-child(3){animation-delay:.08s}
  .menu-open .site-nav > *:nth-child(4){animation-delay:.12s}
  .menu-open .site-nav > *:nth-child(5){animation-delay:.16s}
  .menu-open .site-nav > *:nth-child(n+6){animation-delay:.2s}
  .site-nav .nav-who{margin-top:6px;padding:12px 14px 4px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;overflow-wrap:anywhere;min-height:0}
  .nav-signout{width:100%;border:none;background:transparent;text-align:left;cursor:pointer;color:var(--muted);font:inherit;font-weight:700}
  .nav-signout:hover{color:var(--text);background:rgba(var(--gold-rgb),.06)}
  .to-top{right:14px;bottom:14px}
  .guide-layout > .guide-nav{order:2}

  .hero{padding:28px 0 26px}
  .hero h1{font-size:34px}
  .hero .lede{font-size:16px}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dd{margin-bottom:10px}
  .discord-mock .embed-grid{grid-template-columns:1fr 1fr}
  .page-head .page-actions{margin-left:0;width:100%}
  .page-head h1{font-size:26px}
  .check-item{flex-wrap:wrap}
  .check-item .ci-body{flex-basis:calc(100% - 35px)}
  .check-item .btn{margin-left:35px}
  .errpage{margin:22px auto;padding:26px 20px}
  .errcode{font-size:56px}
  .why{flex-direction:column}
  .why .btn{margin-left:0;align-self:flex-start}
  .tier-card.featured{transform:none}
  .cta-panel{padding:28px 20px}
  .app-show-copy h2{font-size:25px}
  .ap-body{padding:12px}
  .calc{padding:18px}
  .calc-line{grid-template-columns:minmax(0,1fr) auto}
  .calc-line .k{grid-column:1/-1}
  .calc-range input[type=range]{height:44px}
  .cta-panel h2{font-size:26px}
  #toasts{top:auto;bottom:16px;right:50%;transform:translateX(50%);align-items:stretch}
  @keyframes toast-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

  /* tables become stacked cards */
  .table-panel{background:transparent;border:none;overflow:visible;box-shadow:none}
  .table-panel::before{display:none}
  .table-wrap{overflow-x:visible}
  table{min-width:0;display:block}
  thead{display:none}
  tbody{display:flex;flex-direction:column;gap:12px}
  tbody tr{display:block;position:relative;padding:6px 0;background:linear-gradient(160deg,var(--glass-2),var(--glass) 60%);border:1px solid var(--line);border-radius:var(--radius)}
  tbody tr:hover{background:linear-gradient(160deg,var(--glass-2),var(--glass) 60%)}
  td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 16px;border-bottom:none;white-space:normal}
  td[data-label]::before{content:attr(data-label);flex:none;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  td.cell-task{padding-top:12px}
  td.cell-actions{border-top:1px solid var(--line-soft);margin-top:4px;padding:12px 16px}
  .actions-cell{width:100%;justify-content:flex-end}
  .form-grid{grid-template-columns:1fr}
  .empty{padding:44px 18px;background:linear-gradient(160deg,var(--glass-2),var(--glass) 60%);border:1px solid var(--line);border-radius:var(--radius)}
  .live-table td.col-dot{display:none}
  .stat-v{font-size:24px}
  .attn-item{align-items:flex-start}
}
@media (max-width:560px){
  .progress.sb-progress{flex:1 1 60px}
  .sb-next{margin-left:0;width:100%}
}
@media (max-width:420px){
  h1{font-size:26px}
  .hero h1{font-size:30px}
  .page-head h1{font-size:23px}
  .page-head .page-actions .btn{flex:1}
  .hero .cta-row .btn,.cta-panel .cta-row .btn{flex:1}
  .tier-price{font-size:38px}
  .toolbar .btn{flex:1}
  .count-pill{display:none}
  .discord-mock{padding:12px}
  .discord-mock .dc-msg{gap:9px}
  .discord-mock .dc-avatar{width:32px;height:32px;font-size:10px}
  .discord-mock .dc-avatar::after{width:10px;height:10px;border-width:2px}
  .discord-mock .embed-grid{grid-template-columns:1fr}
  .discord-mock .thumb{width:52px;height:52px;margin-left:10px}
  .faq summary{padding:14px 16px;font-size:14px}
  .faq details p{padding:0 16px 16px}
  .checklist{padding:15px 14px 13px}
  .check-item{padding:11px 4px}
  .pack-grid{grid-template-columns:1fr}
}
@media (max-width:400px){
  .wordmark-sub{display:none}
}
@media (hover:none){
  .tier-card{transition:none}
}

/* ===================================================================== */
/* reduced motion: every animation has a calm fallback                    */
/* ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rise,.reveal,.reveal.stagger > *{opacity:1}
  .ambient span{animation:none}
  .wordmark-name,.errcode{animation:none;background-position:0 center}
  .tier-card.featured{transform:none}
  .discord-mock.arriving .seat,.discord-mock.arriving .embed-grid,.discord-mock.arriving .embed-foot,.discord-mock.arriving .thumb{opacity:1}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .toast,.toast.hide{animation:none}
}