/* ══════════════════════════════════════════════════════════════════════════
   SceneHunt site pages: account, legal, help. (2026-10-08)

   Deep black, built from steps rather than effects. The page is true black and every raised
   surface is a few points lighter, separated by hairlines, never by shadow or glow: on black a
   shadow is invisible and a glow is the first thing that makes a dark site look generated.

   Inter for text and interface, the pairing Baseten's docs use, with IBM Plex Mono for numbers
   that are data (minutes, usage, scores). Headings use Schibsted Grotesk, drawn for a news
   publisher, so the first thing a visitor reads is not a default Inter headline: that one detail is
   the most cited sign of a generated site.

   The primary action and the logo mark are brand blue (2026-10-26, so the brand has a colour). No coloured status dots and no green for "good": state is
   said in words, and colour is kept for what needs attention (amber) or is destructive (red).
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --black: #000;
  --raise-1: #0b0b0b;
  --raise-2: #131313;
  --raise-3: #1c1c1c;
  --line: rgba(255, 255, 255, .085);
  --line-strong: rgba(255, 255, 255, .15);

  --fg: #ececec;
  --fg-2: #a2a2a2;
  --fg-3: #6c6c6c;

  --rec: #ff3b2f;
  --danger: #ff6b5e;
  /* Brand blue, only on the logo mark and primary buttons (2026-10-26). White text on it is 5.2:1. */
  --primary: #2563eb;
  --primary-hover: #1d4ed8;

  --radius: 6px;
  --radius-panel: 10px;

  --font: "Inter", system-ui, sans-serif;
  --display: "Schibsted Grotesk", "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --page: 1120px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--fg);
  font: 400 15px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: rgba(255, 255, 255, .18); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 2px; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- Header ---- */
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, .86); backdrop-filter: saturate(140%) blur(10px); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 56px; }
h1, h2, .brand { font-family: var(--display); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.brand svg { width: 20px; height: 20px; flex: none; color: var(--primary); }
.site-nav { display: flex; gap: 22px; font-size: 14px; color: var(--fg-2); }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg); }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---- Buttons ---- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: var(--radius);
  font: 600 14px/1 var(--font); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.button:hover { background: var(--raise-2); border-color: rgba(255, 255, 255, .24); }
.button.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.button.quiet { border-color: transparent; color: var(--fg-2); }
.button.quiet:hover { color: var(--fg); background: var(--raise-2); }
.button.danger { color: var(--danger); border-color: rgba(255, 107, 94, .35); }
.button.danger:hover { background: rgba(255, 107, 94, .08); border-color: rgba(255, 107, 94, .6); }
.button[disabled] { opacity: .45; cursor: not-allowed; }
.button.large { height: 44px; padding: 0 20px; font-size: 15px; }
.button.block { width: 100%; }

/* ---- Page heading ---- */
.page-head { padding: 56px 0 36px; }
.page-head h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.page-head p { margin: 12px 0 0; color: var(--fg-2); font-size: 16px; max-width: 60ch; }

/* ---- Two-column layout: section nav on the left ---- */
.with-nav { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 56px; padding-bottom: 96px; }
.side-nav { position: sticky; top: 24px; align-self: start; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.side-nav a { padding: 6px 10px; border-radius: var(--radius); color: var(--fg-2); text-decoration: none; }
.side-nav a:hover { color: var(--fg); background: var(--raise-1); }
.side-nav a.active { color: var(--fg); background: var(--raise-2); }

/* ---- Settings sections ---- */
.section { margin-bottom: 64px; scroll-margin-top: 24px; }
.section h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.section > p { margin: 0 0 20px; color: var(--fg-2); font-size: 14px; max-width: 62ch; }

.rows { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--raise-1); }
.row { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 20px; }
.row + .row { border-top: 1px solid var(--line); }
.row-label { color: var(--fg-2); font-size: 14px; }
.row-value { min-width: 0; overflow-wrap: anywhere; }
.row-value small { display: block; color: var(--fg-3); font-size: 13px; margin-top: 2px; }
.row-action { display: flex; gap: 8px; justify-content: flex-end; }

.num { font-family: var(--mono); font-weight: 500; font-size: .93em; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--raise-3); color: var(--fg); font-size: 12px; font-weight: 600; vertical-align: 1px; }
.tag.warn { color: #f5c26b; background: rgba(245, 194, 107, .1); }

.meter { height: 6px; border-radius: 3px; background: var(--raise-3); overflow: hidden; margin-top: 10px; max-width: 360px; }
.meter > span { display: block; height: 100%; background: var(--fg); border-radius: 3px; }

.danger-zone .rows { border-color: rgba(255, 107, 94, .25); }

/* ---- Article (legal, help) ---- */
.article { max-width: 68ch; font-size: 16px; line-height: 1.7; }
.article h2 { margin: 48px 0 12px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; scroll-margin-top: 24px; }
.article h2:first-child { margin-top: 0; }
.article h3 { margin: 28px 0 8px; font-size: 16px; font-weight: 700; }
.article p, .article ul, .article ol { margin: 0 0 16px; color: #cfcfcf; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin: 6px 0; }
.article strong { color: var(--fg); font-weight: 600; }
.article a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.article a:hover { text-decoration-color: var(--fg); }
.article table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14px; }
.article th, .article td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); }
.article th { color: var(--fg-2); font-weight: 600; }
.summary { border: 1px solid var(--line); background: var(--raise-1); border-radius: var(--radius-panel); padding: 20px 24px; margin: 0 0 48px; }
.summary h2 { margin: 0 0 10px !important; font-size: 15px !important; }
.summary ul { margin: 0; }
.meta { color: var(--fg-3); font-size: 14px; margin-top: 10px; }
.placeholder { background: rgba(245, 194, 107, .12); color: #f5c26b; padding: 0 4px; border-radius: 3px; }

/* ---- Footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: 48px 0 56px; color: var(--fg-2); font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-grid h4 { margin: 0 0 12px; color: var(--fg); font-size: 14px; font-weight: 600; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--fg); }
.footer-note { margin-top: 40px; color: var(--fg-3); font-size: 13px; }

/* ---- Notices ---- */
.notice { border: 1px solid var(--line-strong); background: var(--raise-2); border-radius: var(--radius-panel); padding: 14px 18px; margin: 0 0 28px; font-size: 14px; color: var(--fg-2); }
.notice strong { color: var(--fg); }

/* ---- Dialog ---- */
dialog { background: var(--raise-1); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--radius-panel); padding: 24px; width: min(440px, calc(100vw - 32px)); }
dialog::backdrop { background: rgba(0, 0, 0, .7); }
dialog h3 { margin: 0 0 6px; font-size: 18px; }
dialog p { margin: 0 0 18px; color: var(--fg-2); font-size: 14px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--fg-2); }
.field input { height: 38px; padding: 0 12px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--black); color: var(--fg); font: 400 15px var(--font); }
.field input:focus { outline: none; border-color: var(--fg-2); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.form-error { color: var(--danger); font-size: 14px; margin: 0 0 12px; }

/* ---- Landing ---- */
/* Two columns: the headline, and what it does with the way in, aligned to the headline's last
   line. The hero used to share its row with a demo card; on its own a left-aligned headline left
   the right half of the screen empty. Vertical padding is set per side because .hero is also
   .wrap, and a shorthand would wipe the page gutters. */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: end; padding-top: 104px; padding-bottom: 112px; }
.hero h1 { margin: 0; font-size: 64px; line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
.eyebrow { margin: 0 0 20px; color: var(--fg-2); font-size: 15px; font-weight: 500; }
.lede { margin: 0; font-size: 18px; color: #cfcfcf; max-width: 46ch; }
.lede + .lede { margin-top: 12px; }
.lede strong { color: var(--fg); font-weight: 600; }
.actions { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
.fine { color: var(--fg-3); font-size: 13px; margin: 14px 0 0; }
.band { border-top: 1px solid var(--line); padding: 72px 0; }
.band-head { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; }
.band h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.band .side { color: var(--fg-2); margin: 12px 0 0; font-size: 14.5px; }
.prose p { margin: 0 0 16px; color: #cfcfcf; font-size: 16px; max-width: 64ch; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a, .fine a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.deflist { display: grid; margin: 0; border-top: 1px solid var(--line); }
.deflist > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.deflist dt { font-weight: 600; }
.deflist dd { margin: 0; color: #cfcfcf; }

/* ---- Pricing ---- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.plan { padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--raise-1); }
.plan + .plan { border-left: 1px solid var(--line-strong); }
.plan.featured { background: var(--raise-2); }
.plan h3 { margin: 0; font: 700 17px var(--display); letter-spacing: -.01em; display: flex; align-items: center; gap: 10px; }
.plan .price { font: 700 40px/1 var(--display); letter-spacing: -.03em; }
.plan .price small { font: 500 14px var(--font); color: var(--fg-2); letter-spacing: 0; }
.plan .tagline { margin: 0; color: var(--fg-2); font-size: 14px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: #cfcfcf; }
.plan li { display: flex; gap: 9px; }
.plan li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-3); margin-top: 8px; flex: none; }
.plan .button { margin-top: auto; }
.plans-note { min-height: 1.5em; margin: 16px 0 0; color: var(--danger); font-size: 14px; }
.plans-small { margin: 8px 0 96px; color: var(--fg-3); font-size: 13px; }

/* ---- Sign in ---- */
.auth { display: grid; justify-items: center; padding: 72px 16px 112px; }
.auth-card { width: min(400px, 100%); }
.auth-card h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.15; letter-spacing: -.02em; }
.auth-sub { margin: 0 0 24px; color: var(--fg-2); font-size: 15px; }
.auth-google { width: 100%; height: 44px; font-size: 15px; }
.auth-google svg { width: 18px; height: 18px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--fg-3); font-size: 12.5px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.auth-card .field input { height: 42px; width: 100%; }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 44px; }
.password-toggle { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--fg-3); cursor: pointer; border-radius: var(--radius); }
.password-toggle:hover { color: var(--fg); }
.auth-error { display: none; margin: 4px 0 14px; color: var(--danger); font-size: 14px; }
.auth-error.show { display: block; }
.auth-submit { width: 100%; height: 44px; margin-top: 4px; font-size: 15px; }
.auth-submit:disabled { opacity: .55; cursor: wait; }
.auth-switch { display: flex; gap: 6px; align-items: center; margin-top: 18px; color: var(--fg-2); font-size: 14px; }
.auth-switch-btn { border: 0; background: none; padding: 0; color: var(--fg); font: 600 14px var(--font); cursor: pointer; }
.auth-switch-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.auth-pay-later { display: inline-block; margin-top: 18px; color: var(--fg-2); font-size: 14px; }
.auth-upgrade-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; color: var(--fg-3); font-size: 12.5px; font-weight: 600; }
.auth-upgrade-steps span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.auth-upgrade-steps i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 600 11px var(--mono); border: 1px solid var(--line-strong); }
.auth-upgrade-steps .done, .auth-upgrade-steps .active { color: var(--fg); }
.auth-upgrade-steps .active i { background: var(--fg); color: #000; border-color: var(--fg); }
.auth-upgrade-steps b { width: 20px; height: 1px; background: var(--line-strong); }
.auth-fine { margin: 24px 0 0; color: var(--fg-3); font-size: 13px; }
.auth-fine a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }

/* ---- Not found ---- */
.lost { padding-top: 120px; padding-bottom: 140px; }
.lost h1 { margin: 0; font-size: 48px; letter-spacing: -.03em; }
.lost p { margin: 14px 0 0; color: var(--fg-2); font-size: 17px; max-width: 48ch; }

/* ---- Toast (app.js confirms a finished checkout with one) ---- */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(16px); opacity: 0; display: flex; align-items: center; gap: 10px; background: var(--raise-2); border: 1px solid var(--line-strong); color: var(--fg); padding: 11px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; z-index: 80; transition: opacity .2s, transform .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* ---- Small screens ---- */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 72px; padding-bottom: 80px; }
  .hero h1 { font-size: 52px; max-width: 14ch; }
}
@media (max-width: 860px) {
  .band-head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .band { padding: 56px 0; }
  .deflist > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line-strong); }
  .hero { padding-top: 56px; padding-bottom: 64px; }
  .hero h1 { font-size: 40px; }
  .auth { padding-top: 48px; }
  .lost { padding-top: 72px; padding-bottom: 96px; }
  .lost h1 { font-size: 36px; }
  :root { --gutter: 16px; }
  .site-header .wrap { gap: 16px; }
}
@media (max-width: 860px) {
  .with-nav { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .side-nav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
  .side-nav a { white-space: nowrap; }
  .row { grid-template-columns: 1fr; gap: 8px; }
  .row-action { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .page-head { padding: 36px 0 24px; }
  .page-head h1 { font-size: 32px; }
  .site-nav { display: none; }
}