/* Venice — shared by the home page, legal pages, 404 and the Worker-rendered /discord and /connect pages. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/geist-latin-wght-normal-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallback so the swap to Geist does not move text. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 105.85%;
  ascent-override: 94.94%;
  descent-override: 27.87%;
  line-gap-override: 0%;
}

:root {
  color-scheme: dark;
  --bg: #06080c;
  --panel: #0b0f16;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --text: #f2f5f9;
  --text-2: #a7b2bf;
  --text-3: #8d99a7;
  --blue-2: #6fb4ff;
  --blue-3: #9fd0ff;
  --btn: #1c67dd;
  --btn-hover: #2470e4;
  --ok: #8be3bb;
  --error: #ffc2c2;
  --radius: 12px;
  --shell: min(1040px, 100% - 40px);
  --header-h: 68px;
  --font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg); color: var(--text);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; overflow-x: clip;
}
/* Two soft lights over the page: one at the top, one high to the right. They breathe (motion only). */
body::before {
  content: ""; position: fixed; inset: -8%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1000px 460px at 50% -120px, rgba(38, 112, 255, .22), transparent 70%),
    radial-gradient(720px 600px at 84% 2%, rgba(90, 179, 251, .11), transparent 72%);
}
/* Fine matte grain over everything, so the flat dark areas read as a surface, not a void. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
code {
  font-family: var(--mono); font-size: .88em; color: var(--blue-3);
  background: rgba(111, 180, 255, .1); border: 1px solid rgba(111, 180, 255, .18);
  padding: .08em .42em; border-radius: 6px; white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--blue-3); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(61, 134, 255, .45); color: #fff; }
[hidden] { display: none !important; }

.shell { width: var(--shell); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100; padding: 9px 14px; border-radius: 8px;
  background: #fff; color: #05070b; font-weight: 600; transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }
.icon { width: 18px; height: 18px; flex: none; }
.inline-link, .sub a, .hint a, .facts a { color: var(--blue-3); text-decoration: underline; text-decoration-color: rgba(159, 208, 255, .4); text-underline-offset: 3px; }
.inline-link:hover, .sub a:hover, .hint a:hover, .facts a:hover { text-decoration-color: currentColor; }
.kicker { color: var(--blue-2); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* Star texture behind the page: painted once, redrawn only while the pointer parallax settles. */
#starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }

/* ---------- Buttons ---------- */
.button {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--h); padding: 0 18px; border: 1px solid transparent; border-radius: 10px;
  font-size: 15px; font-weight: 600; line-height: 1.1; text-align: center; white-space: nowrap; cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.button.primary { color: #fff; background: linear-gradient(135deg, #2064e0, #2f86f9 58%, #57aefb); border-color: rgba(120, 180, 255, .5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.button.primary:hover { background: linear-gradient(135deg, #2a6ef0, #3a90ff 58%, #64b6ff); border-color: rgba(150, 200, 255, .62); }
.button.ghost, .button.secondary { color: var(--text); background: rgba(255, 255, 255, .045); border-color: var(--line-2); }
.button.ghost:hover, .button.secondary:hover { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .26); }
.button.small { --h: 36px; padding: 0 14px; font-size: 14px; border-radius: 9px; }
.button[aria-busy="true"] { cursor: progress; opacity: .8; }

/* ---------- Header ---------- */
.top { border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 650; letter-spacing: .2em; line-height: 1; }
/* BETA tag: sits beside the brand word and on the plan card. Small, calm, unmistakable. */
.beta-tag {
  display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; margin-left: 2px;
  color: var(--blue-3); background: rgba(111, 180, 255, .12); border: 1px solid rgba(111, 180, 255, .32);
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; line-height: 1.3;
}
.gate-head .beta-tag { font-size: 11px; padding: 3px 8px; }
.brand-logo { width: 24px; height: 24px; }
.brand-mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; }
.brand-mark img, .brand-mark svg { width: 100%; height: 100%; object-fit: contain; }

/* Connected Discord account. Both states share one grid cell, so the control keeps the same
   width before and after /api/checkout/config resolves and the header never reflows. */
.acct { display: grid; align-items: center; }
.acct > * { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; visibility: hidden; }
.acct[data-state="out"] .acct-out-state, .acct[data-state="in"] .acct-in-state { visibility: visible; }
.acct-link {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 3px 12px 3px 3px; border: 1px solid var(--line-2); border-radius: 999px;
  background: rgba(255, 255, 255, .045); transition: background-color .18s, border-color .18s;
}
.acct-link:hover { background: rgba(255, 255, 255, .085); border-color: rgba(255, 255, 255, .26); }
.acct-avatar {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; overflow: hidden; border-radius: 50%;
  background: var(--btn); color: #fff; font-size: 12px; font-weight: 600; line-height: 1;
}
.acct-avatar img { width: 26px; height: 26px; object-fit: cover; }
/* Capped so no username can make the signed-in control wider than the signed-out button. */
.acct-name { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.acct-signout { display: flex; }
.acct-signout-button {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 9px;
  background: transparent; color: var(--text-3); cursor: pointer; transition: color .18s, background-color .18s, border-color .18s;
}
.acct-signout-button:hover { color: var(--text); background: rgba(255, 255, 255, .06); border-color: var(--line-2); }
.acct-signout-button .icon { width: 16px; height: 16px; }

/* ---------- Hero: name and gate side by side ---------- */
.hero {
  display: grid; justify-items: center; text-align: center; gap: clamp(36px, 5vw, 60px);
  padding: clamp(64px, 10vw, 132px) 0 clamp(52px, 7vw, 96px);
}
.intro { max-width: 680px; }
.hero h1 { font-size: clamp(3rem, 2.1rem + 3.6vw, 4.75rem); letter-spacing: -.035em; line-height: 1; text-shadow: 0 0 70px rgba(47, 134, 249, .22); }
.lede { margin-top: 18px; font-size: clamp(1.3rem, 1.08rem + .8vw, 1.7rem); font-weight: 500; letter-spacing: -.018em; line-height: 1.25; }
.beta-line { margin: 14px auto 0; max-width: 52ch; color: var(--text-3); font-size: 14px; line-height: 1.6; }
.beta-line strong { color: var(--text-2); font-weight: 600; }
.sub { margin: 16px auto 0; max-width: 46ch; color: var(--text-2); font-size: 17px; line-height: 1.65; }

/* ---------- Purchase gate ---------- */
.gate { width: min(480px, 100%); margin-inline: auto; text-align: left; padding: clamp(24px, 3.4vw, 34px); border: 1px solid rgba(111, 180, 255, .28); border-radius: var(--radius); background: linear-gradient(180deg, rgba(111, 180, 255, .06), rgba(111, 180, 255, 0) 46%), var(--panel); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 32px 72px -34px rgba(31, 110, 255, .58); }
/* The V, inside the plan card. */
.plan-mark {
  display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 20px; border-radius: 14px;
  background: radial-gradient(120% 100% at 50% 0%, rgba(90, 179, 251, .2), transparent 60%), rgba(10, 16, 26, .92);
  border: 1px solid rgba(120, 180, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 12px 26px -12px rgba(47, 134, 249, .7);
}
.plan-mark svg { width: 32px; height: 32px; filter: drop-shadow(0 3px 8px rgba(47, 134, 249, .55)); }
.gate-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; }
.gate-head .badges { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gate-head h2 { font-size: 20px; letter-spacing: -.02em; }
.badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  color: var(--blue-3); background: rgba(61, 134, 255, .14); border: 1px solid rgba(111, 180, 255, .3); font-size: 12.5px; font-weight: 600;
}
.gate-note { margin-top: 8px; color: var(--text-2); font-size: 14px; }
/* [2026-09-21 owner: "improve the get venice card"] Three facts under the price, so the card says
   what the money buys without a marketing claim anywhere near it. The divider moved off .gate-note
   and onto this list, so the head/price/what-you-get read as one block above the actions. */
.gate-points { margin-top: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; list-style: none; }
.gate-points li { position: relative; padding-left: 21px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.gate-points li::before { content: ""; position: absolute; left: 4px; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: #4f9dfb; box-shadow: 0 0 9px rgba(79, 157, 251, .8); }
.gate-points strong { color: var(--text); font-weight: 600; }
/* Every state is in the markup and only visibility is switched, inside one grid cell, so the gate
   is exactly the same height in all four states and resolving it shifts nothing (CLS 0). */
.states { display: grid; margin-top: 18px; }
.state { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; visibility: hidden; }
.states[data-state="out"] .state-out, .states[data-state="join"] .state-join,
.states[data-state="in"] .state-in, .states[data-state="done"] .state-done { visibility: visible; }
.state .button { width: 100%; }
.lead { display: grid; align-content: end; min-height: 2.9em; font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.hint { min-height: 2.9em; color: var(--text-3); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
/* The signed-in hint can gain a membership or old-backend note once the config resolves. */
.state-in .hint { min-height: 4.4em; }
.hint strong { color: var(--text-2); font-weight: 600; }
.hint code { font-size: .92em; }
.state-done { outline: none; }
.state-done .lead { color: var(--ok); }
.msg {
  display: grid; justify-items: start; gap: 9px; margin-top: 14px; padding: 11px 13px; border-radius: 10px;
  color: var(--error); background: rgba(255, 90, 90, .08); border: 1px solid rgba(255, 120, 120, .24); font-size: 13.5px; line-height: 1.5;
}
.msg.is-info { color: var(--text-2); background: rgba(255, 255, 255, .035); border-color: var(--line-2); }
.fine { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 12.5px; line-height: 1.55; }
.fine a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(167, 178, 191, .4); text-underline-offset: 3px; }
.fine a:hover { color: var(--text); }

/* ---------- Steps and details ---------- */
.block { padding: clamp(48px, 6.5vw, 84px) 0; border-top: 1px solid var(--line); }
.block h2 { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.block h2::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #2f86f9, #5ab3fb); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; margin-top: 30px; list-style: none; }
.steps li { display: flex; gap: 14px; align-items: flex-start; }
.steps span {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px;
  color: #eaf3ff; background: linear-gradient(140deg, rgba(31, 94, 219, .95), rgba(90, 179, 251, .82)); border: 1px solid rgba(140, 195, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 16px -8px rgba(47, 134, 249, .8);
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
}
.steps p { padding-top: 4px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.steps strong { color: var(--text); font-weight: 600; }
.steps a { color: var(--blue-3); text-decoration: underline; text-decoration-color: rgba(159, 208, 255, .4); text-underline-offset: 3px; }
.facts { margin-top: 14px; padding: 4px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 255, 255, .018); }
.facts > div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: background-color .18s; }
.facts > div:last-child { border-bottom: 0; }
.facts > div:hover { background: rgba(255, 255, 255, .022); }
.facts dt { color: var(--text); font-size: 15px; font-weight: 600; }
.facts dd { color: var(--text-2); font-size: 15px; line-height: 1.55; }

/* ---------- Footer ---------- */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding: 30px 0 48px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot a { color: var(--text-2); font-size: 14px; border-radius: 6px; transition: color .18s; }
.foot a:hover { color: var(--text); }
.foot p { color: var(--text-3); font-size: 12.5px; }

/* ---------- Checkout dialog (Stripe embedded) ---------- */
.checkout-dialog {
  width: min(960px, calc(100% - 24px)); height: min(800px, calc(100dvh - 24px)); padding: 0;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: #080b11; color: var(--text);
  box-shadow: 0 30px 100px rgba(0, 0, 0, .75); overflow: hidden;
}
.checkout-dialog::backdrop { background: rgba(2, 4, 8, .82); }
.checkout-shell { height: 100%; display: flex; flex-direction: column; }
.checkout-shell > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; padding: 0 14px 0 18px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
.checkout-shell > header > div { display: flex; align-items: center; gap: 12px; min-width: 0; }
.checkout-shell header strong, .checkout-shell header small { display: block; }
.checkout-shell header strong { font-size: 15px; font-weight: 600; }
.checkout-shell header small { color: var(--text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-shell header button {
  flex: none; width: 36px; height: 36px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); font-size: 21px; line-height: 1;
}
.checkout-shell header button:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.checkout-host { flex: 1; overflow: auto; }
.checkout-host:empty { display: none; }
.checkout-loading { flex: 1; display: grid; place-items: center; align-content: center; gap: 14px; color: var(--text-2); font-size: 14px; }
.checkout-loading i { width: 26px; height: 26px; border: 2px solid #253341; border-top-color: var(--blue-2); border-radius: 50%; animation: spin 1s linear infinite; }
.checkout-error { margin: auto; padding: 22px; max-width: 560px; color: var(--error); text-align: center; font-size: 15px; }
.checkout-retry { display: flex; justify-content: center; padding: 0 22px 26px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Worker-rendered pages: /discord (account) and /connect ---------- */
main.shell > .brand { margin-top: 24px; }
.account-page { min-height: 100dvh; padding-bottom: 60px; }
.account-panel { width: min(600px, 100%); margin: 48px auto 0; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.account-panel h1, main.shell > .section h1 { margin: 10px 0 16px; font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.2rem); letter-spacing: -.025em; }
.account-panel > p:not(.kicker), .account-trial p { color: var(--text-2); font-size: 15px; line-height: 1.7; }
.account-identity { display: flex; align-items: center; gap: 16px; margin: 4px 0 18px; padding: 16px 0; border-block: 1px solid var(--line); }
.account-avatar { display: grid; place-items: center; flex: none; width: 60px; height: 60px; overflow: hidden; border-radius: 50%; background: var(--btn); color: #fff; font-size: 24px; font-weight: 600; }
.account-avatar img { width: 60px; height: 60px; object-fit: cover; }
.account-identity .account-avatar span { margin: 0; color: #fff; font-size: 24px; font-weight: 600; }
.account-identity strong, .account-identity span { display: block; }
.account-identity strong { font-size: 18px; line-height: 1.2; }
.account-identity span { margin-top: 5px; color: var(--text-3); font-size: 13px; overflow-wrap: anywhere; }
.account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.account-trial { padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .03); }
.account-trial strong { font-size: 15px; }
.account-trial p { margin-top: 6px; }
.account-notice { margin-bottom: 16px; padding: 12px 14px; border: 1px solid rgba(95, 214, 160, .3); border-radius: 10px; background: rgba(95, 214, 160, .08); color: #c3f5dd !important; }
.account-switch { display: inline-block; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--blue-3); font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.account-switch:hover { text-decoration: underline; text-underline-offset: 4px; }
main.shell > .section { max-width: 700px; padding-top: 48px; }
main.shell > .section > p:not(.kicker) { margin-top: 12px; color: var(--text-2); font-size: 15.5px; line-height: 1.7; }
main.shell > .section > p > .button { margin-top: 8px; }
main.shell > .section code { white-space: normal; overflow-wrap: anywhere; }

/* ---------- 404 ---------- */
.notfound { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 40px 0; text-align: center; }
.hero-emblem { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel); }
.hero-emblem svg { width: 30px; height: 30px; }
.notfound h1 { margin: 12px 0 10px; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); letter-spacing: -.03em; }
.notfound p:not(.kicker) { color: var(--text-2); font-size: 16px; }
.notfound .button { margin-top: 24px; }

/* ---------- Motion ---------- */
/* All motion below is opt-in: under reduced motion the page runs zero animations, and without JS
   nothing is ever hidden — the reveal only layers motion on top of an already-visible page. */
@media (prefers-reduced-motion: no-preference) {
  /* The ambient light breathes — drifting and brightening over ~18s, then easing back. */
  body::before { animation: breathe 18s ease-in-out infinite alternate; }

  /* Hero, gate and each section settle in the first time they reach the viewport. */
  .reveal-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1); }
  .reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }
  .reveal-ready .gate[data-reveal] { transition-delay: .08s; }

  /* Buttons and the account chip lift a hair on hover. */
  .button { transition: background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; }
  .button.primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 12px 28px rgba(28, 103, 221, .42); }
  .button.ghost:hover, .button.secondary:hover, .acct-link:hover { transform: translateY(-1px); }
}
@keyframes breathe {
  from { opacity: .68; transform: translate3d(-2%, -1.4%, 0) scale(1); }
  to   { opacity: 1;   transform: translate3d(2%, 1.4%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .checkout-loading i { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { gap: 34px; padding-top: clamp(44px, 8vw, 72px); }
  .steps { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 640px) {
  :root { --shell: min(1040px, 100% - 32px); }
  .gate { padding: 18px; }
  .facts > div { grid-template-columns: 1fr; gap: 2px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .account-panel { margin-top: 32px; padding: 20px 18px; }
  .account-actions { display: grid; }
  .account-actions .button { width: 100%; }
}