/* ==========================================================================
   Scenario — design system (Phase 1 foundation)
   Motif: the coloured paper of screenplay revision drafts.
   Type: Archivo (interface, variable width) + Courier Prime (script).
   ========================================================================== */

/* Self-hosted fonts (SIL Open Font License) — no third-party requests. */
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"), url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/courier-prime-latin-400-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/courier-prime-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/courier-prime-latin-700-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/courier-prime-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/courier-prime-latin-400-italic.woff2") format("woff2"); 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; }

:root {
  /* Light theme */
  --bg:          #EEF0F3;
  --surface:     #FFFFFF;
  --surface-2:   #F6F7F9;
  --ink:         #1C2230;
  --ink-2:       #586174;
  --ink-3:       #8A93A5;
  --line:        #DCE0E7;
  --line-strong: #C4CAD4;

  --primary:     #2F5BEA;   /* revision blue — the one action colour */
  --primary-hover:#2449C4;
  --primary-ink: #FFFFFF;
  --primary-soft:#E4EBFD;
  --focus:       #2F5BEA;

  --success:     #1E7F55;  --success-soft: #DDF2E8;
  --danger:      #B93A2B;  --danger-soft:  #FBE3DF;
  --warning:     #9A6A06;  --warning-soft: #FBF0D2;

  --paper:       #FFFFFF;
  --paper-ink:   #1A1A1A;
  --paper-edge:  #D5D9E0;

  /* Industry-standard revision page colours (WGA order) */
  --rev-white:     #FFFFFF;
  --rev-blue:      #AFCBF6;
  --rev-pink:      #F4BACB;
  --rev-yellow:    #F4E185;
  --rev-green:     #ADDDBB;
  --rev-goldenrod: #E3B851;
  --rev-buff:      #EBD9B4;
  --rev-salmon:    #F2AC92;
  --rev-cherry:    #D9707F;

  --shadow-1: 0 1px 2px rgba(28, 34, 48, .06), 0 1px 1px rgba(28, 34, 48, .04);
  --shadow-2: 0 10px 30px -12px rgba(28, 34, 48, .25), 0 2px 6px rgba(28, 34, 48, .06);
  --shadow-page: 0 24px 60px -20px rgba(20, 28, 48, .35), 0 2px 4px rgba(20, 28, 48, .08);

  --r-sm: 6px;   /* controls */
  --r-md: 10px;  /* panels */
  --r-page: 2px; /* paper */

  --font-ui: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Devanagari", sans-serif;
  --font-script: "Courier Prime", "Courier New", Courier, "Noto Sans Mono", monospace;

  --step--1: .8125rem;
  --step-0:  .9375rem;
  --step-1:  1.125rem;
  --step-2:  1.4rem;
  --step-3:  clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem);
  --step-4:  clamp(2.4rem, 1.5rem + 3.6vw, 4.1rem);

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161C27; --surface: #1E2533; --surface-2: #252D3D;
    --ink: #E8EBF1; --ink-2: #A7B0C2; --ink-3: #78829A;
    --line: #2E3647; --line-strong: #3B4559;
    --primary: #5B82F5; --primary-hover: #7395F7; --primary-ink: #0F1730; --primary-soft: #26325A; --focus: #8AA8FA;
    --success: #4CC28C; --success-soft: #173A2C; --danger: #F07A69; --danger-soft: #45231F; --warning: #E7B44A; --warning-soft: #3D3118;
    --paper-edge: #3B4559;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 14px 34px -14px rgba(0,0,0,.6);
    --shadow-page: 0 30px 70px -24px rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161C27; --surface: #1E2533; --surface-2: #252D3D;
  --ink: #E8EBF1; --ink-2: #A7B0C2; --ink-3: #78829A;
  --line: #2E3647; --line-strong: #3B4559;
  --primary: #5B82F5; --primary-hover: #7395F7; --primary-ink: #0F1730; --primary-soft: #26325A; --focus: #8AA8FA;
  --success: #4CC28C; --success-soft: #173A2C; --danger: #F07A69; --danger-soft: #45231F; --warning: #E7B44A; --warning-soft: #3D3118;
  --paper-edge: #3B4559;
  --shadow-1: 0 1px 2px rgba(0,0,0,.3); --shadow-2: 0 14px 34px -14px rgba(0,0,0,.6);
  --shadow-page: 0 30px 70px -24px rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.3);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--step-0); line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.12; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--rev-yellow); color: #1A1A1A; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -40px; background: var(--surface); padding: 8px 12px; border-radius: var(--r-sm); z-index: 100; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-2); }
.small { font-size: var(--step--1); }

/* ---------- Brand ---------- */
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-word { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; font-variation-settings: "wdth" 118; }

/* ---------- Buttons ---------- */
.btn {
  --b-bg: var(--surface); --b-ink: var(--ink); --b-line: var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid var(--b-line); background: var(--b-bg); color: var(--b-ink);
  font: inherit; font-weight: 600; font-size: var(--step-0); line-height: 1; text-decoration: none;
  cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); color: var(--b-ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn-primary { --b-bg: var(--primary); --b-ink: var(--primary-ink); --b-line: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { --b-bg: transparent; --b-line: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { --b-bg: var(--danger); --b-ink: #fff; --b-line: var(--danger); }
.btn-danger:hover { background: var(--danger); filter: brightness(1.08); }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: var(--step-1); }
.btn-sm { min-height: 32px; padding: 0 11px; font-size: var(--step--1); }
.btn-block { width: 100%; }
.btn .spinner { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn { width: 38px; padding: 0; }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field > label, .label { font-weight: 600; font-size: var(--step--1); color: var(--ink); }
.hint { font-size: var(--step--1); color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--step-0); transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 110px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--step--1); font-weight: 500; }
.row { display: grid; gap: 16px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: var(--step-0); }
.check input { width: 18px; height: 18px; accent-color: var(--primary); margin-top: 2px; }

/* ---------- Panels, badges, alerts ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.panel-pad { padding: clamp(20px, 3vw, 32px); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: var(--step--1); font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.badge-ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge-warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.alert { padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid transparent; margin-bottom: 18px; font-size: var(--step-0); }
.alert-error { background: var(--danger-soft); color: var(--danger); }
.alert-success { background: var(--success-soft); color: var(--success); }
.alert-info { background: var(--primary-soft); color: var(--ink); }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 90; right: 16px; bottom: 16px; display: grid; gap: 10px; width: min(380px, calc(100vw - 32px)); }
.toast {
  display: grid; grid-template-columns: 6px 1fr auto; align-items: stretch;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); overflow: hidden; animation: toast-in .22s ease-out;
}
.toast::before { content: ""; background: var(--primary); }
.toast[data-type="success"]::before { background: var(--success); }
.toast[data-type="error"]::before { background: var(--danger); }
.toast[data-type="warning"]::before { background: var(--warning); }
.toast-body { padding: 12px 14px; font-size: var(--step-0); }
.toast-close { border: 0; background: none; color: var(--ink-3); font-size: 18px; padding: 0 12px; cursor: pointer; }
.toast-close:hover { color: var(--ink); }
.toast.is-leaving { animation: toast-out .18s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.topbar nav { display: flex; align-items: center; gap: 6px; }

/* ---------- Script page (the signature element) ---------- */
.script-stack { position: relative; padding: 0 22px 22px 0; }
.script-stack .edge { position: absolute; inset: 0; border-radius: var(--r-page); box-shadow: var(--shadow-1); }
.script-stack .edge:nth-child(1) { background: var(--rev-goldenrod); transform: translate(22px, 22px); }
.script-stack .edge:nth-child(2) { background: var(--rev-yellow);    transform: translate(16px, 16px); }
.script-stack .edge:nth-child(3) { background: var(--rev-pink);      transform: translate(10px, 10px); }
.script-stack .edge:nth-child(4) { background: var(--rev-blue);      transform: translate(5px, 5px); }
.script-stack .edge { right: 22px; bottom: 22px; }
.script-page {
  position: relative; background: var(--paper); color: var(--paper-ink);
  font-family: var(--font-script); font-size: clamp(12px, 1.1vw, 14.5px); line-height: 1.32;
  aspect-ratio: 8.5 / 11; padding: 9% 9% 9% 15%; border-radius: var(--r-page);
  box-shadow: var(--shadow-page); overflow: hidden;
}
.script-page .pg { position: absolute; top: 4.5%; right: 9%; }
.script-page p { margin: 0 0 1.32em; }
.sp-scene { text-transform: uppercase; font-weight: 700; display: flex; gap: 1.2em; }
.sp-scene .num { margin-left: -3.2em; width: 2em; text-align: right; font-weight: 400; }
.script-page .sp-char { margin: 0 0 0 36%; text-transform: uppercase; }
.script-page .sp-paren { margin: 0 0 0 29%; }
.script-page .sp-dial { margin-left: 18%; margin-right: 16%; }
.sp-trans { text-align: right; text-transform: uppercase; }
.sp-rev { position: relative; }
.sp-rev::after { content: "*"; position: absolute; right: -6%; top: 0; }

/* Collaborator presence on the page */
.presence { position: relative; }
.presence-caret { position: relative; display: inline-block; width: 2px; height: 1.15em; vertical-align: -.2em; margin-left: 1px; background: var(--c); }
.presence-caret::before { content: ""; position: absolute; inset: 0; background: inherit; animation: caret 1.05s steps(1) infinite; }
.presence-tag { position: absolute; left: 4px; top: -.15em; font-family: var(--font-ui); font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 0 4px 4px 4px; background: var(--c); color: #fff; white-space: nowrap; }
.presence-line { box-shadow: inset 3px 0 0 var(--c); padding-left: 10px; margin-left: calc(18% - 13px) !important; background: color-mix(in srgb, var(--c) 9%, transparent); }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Home (pre-launch) ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 88px); align-items: center; padding-top: clamp(32px, 7vw, 96px); padding-bottom: clamp(48px, 8vw, 112px); }
.hero h1 { font-size: var(--step-4); font-weight: 760; letter-spacing: -.025em; line-height: 1.02; font-variation-settings: "wdth" 112; margin-bottom: .45em; max-width: 12ch; }
.hero .lede { font-size: var(--step-1); color: var(--ink-2); max-width: 46ch; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { margin-top: 18px; font-size: var(--step--1); color: var(--ink-3); }
.hero-art { min-width: 0; }

.features { padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.features h2 { font-size: var(--step-3); font-variation-settings: "wdth" 110; max-width: 22ch; margin-bottom: 40px; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 48px; margin: 0; padding: 0; list-style: none; }
.feature-list li { padding-top: 16px; border-top: 3px solid var(--sw, var(--line)); }
.feature-list h3 { font-size: var(--step-1); margin-bottom: 6px; }
.feature-list p { color: var(--ink-2); margin: 0; max-width: 38ch; }

.site-footer { border-top: 1px solid var(--line); padding: 28px 0 40px; color: var(--ink-3); font-size: var(--step--1); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---------- Centered shell (setup, auth, errors) ---------- */
.shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.shell-main { display: grid; place-items: start center; padding: clamp(16px, 4vw, 48px) var(--gutter) 64px; }
.shell-card { width: 100%; max-width: 640px; }
.shell-card.narrow { max-width: 440px; }
.shell-head { margin-bottom: 24px; }
.shell-head h1 { font-size: var(--step-3); font-variation-settings: "wdth" 108; }
.steps { display: flex; gap: 8px; margin-bottom: 22px; }
.steps span { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.steps span.on { background: var(--primary); }
.check-list { list-style: none; margin: 0 0 24px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.check-list li:first-child { border-top: 0; }
.check-list .tick { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.check-list .ok .tick { background: var(--success-soft); color: var(--success); }
.check-list .bad .tick { background: var(--danger-soft); color: var(--danger); }
.check-list .soft .tick { background: var(--warning-soft); color: var(--warning); }
.check-list .fix { display: block; color: var(--ink-2); font-size: var(--step--1); }
.section-title { font-size: var(--step-1); margin: 28px 0 14px; }
.keybox { font-family: var(--font-script); font-size: 1.05rem; padding: 14px 16px; background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); user-select: all; word-break: normal; overflow-wrap: anywhere; }

/* ---------- Error pages (as a script page) ---------- */
.error-page { width: min(560px, 100%); }
.error-page .script-page { aspect-ratio: auto; padding: 48px 44px 40px 64px; font-size: 14.5px; }
.error-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; font-family: var(--font-ui); }
.error-ref { font-family: var(--font-ui); font-size: 12px; color: #6B7280; margin-top: 18px; }
.debug-trace { margin-top: 24px; max-height: 360px; overflow: auto; background: #0F1420; color: #D5DBE6; padding: 16px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }

/* ---------- Style guide ---------- */
.sg-section { padding: 36px 0; border-top: 1px solid var(--line); }
.sg-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.swatch { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); font-size: var(--step--1); }
.swatch i { display: block; height: 56px; }
.swatch span { display: block; padding: 6px 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { max-width: 14ch; }
  .hero-art { max-width: 520px; }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .feature-list { grid-template-columns: 1fr; gap: 28px; }
  .topbar .hide-sm { display: none; }
  .script-stack { padding: 0 12px 12px 0; }
  .script-stack .edge { right: 12px; bottom: 12px; }
  .script-stack .edge:nth-child(1) { transform: translate(12px, 12px); }
  .script-stack .edge:nth-child(2) { transform: translate(9px, 9px); }
  .script-stack .edge:nth-child(3) { transform: translate(6px, 6px); }
  .script-stack .edge:nth-child(4) { transform: translate(3px, 3px); }
  .error-page .script-page { padding: 36px 22px 30px 30px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Phase 3 — auth pages, customer app shell, account settings, admin panel
   ========================================================================== */

/* ---------- Auth (split: form + script page) ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth-main { display: flex; flex-direction: column; padding: 24px var(--gutter) 32px; }
.auth-form { width: 100%; max-width: 400px; margin: auto; padding: 32px 0; }
.auth-form h1 { font-size: var(--step-3); font-variation-settings: "wdth" 108; margin-bottom: 8px; }
.auth-form .sub { color: var(--ink-2); margin-bottom: 28px; }
.auth-foot { margin-top: 22px; font-size: var(--step-0); color: var(--ink-2); }
.auth-side { background: var(--surface-2); border-left: 1px solid var(--line); display: grid; place-items: center; padding: 48px; overflow: hidden; }
.auth-side .script-stack { width: min(440px, 100%); transform: rotate(-1.5deg); }
.auth-side .script-page { aspect-ratio: auto; padding: 44px 40px 40px 56px; font-size: 13px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: var(--step--1); margin: 20px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.btn-google { gap: 10px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; }
.label-row a { font-size: var(--step--1); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.code-input { font-family: var(--font-script); font-size: 1.6rem; letter-spacing: .35em; text-align: center; padding: 10px 12px; }
@media (max-width: 900px) { .auth { grid-template-columns: 1fr; } .auth-side { display: none; } }

/* ---------- Customer app shell ---------- */
.app-bar { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.app-bar-inner { display: flex; align-items: center; gap: 18px; height: 60px; }
.app-nav { display: flex; gap: 4px; margin-left: 12px; }
.app-nav a { padding: 7px 12px; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-weight: 550; }
.app-nav a:hover { background: var(--surface-2); color: var(--ink); }
.app-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.app-bar .spacer { flex: 1; }
.app-main { padding: 32px 0 80px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head h1 { font-size: var(--step-3); font-variation-settings: "wdth" 108; margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); }

.avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 12.5px; letter-spacing: .02em; }
.avatar-lg { width: 52px; height: 52px; font-size: 18px; }

/* Dropdown menu (no JS: <details>) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 999px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { background: var(--surface-2); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 240px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; z-index: 60; }
.menu-head { padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head strong { display: block; }
.menu-head span { color: var(--ink-2); font-size: var(--step--1); word-break: break-all; }
.menu-item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink);
  text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.menu-item:hover { background: var(--surface-2); color: var(--ink); }

/* Banners across the top of the app */
.banner { padding: 10px 0; font-size: var(--step-0); border-bottom: 1px solid transparent; }
.banner .wrap { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner-warn { background: var(--warning-soft); color: var(--warning); }
.banner-imp { background: #1C2230; color: #fff; }
.banner-imp .btn { --b-bg: #fff; --b-ink: #1C2230; --b-line: #fff; }
.banner form { margin: 0; }

/* Layout pieces */
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.grid-2 > * { min-width: 0; }
.stack { display: grid; gap: 20px; }
.panel h2 { font-size: var(--step-1); margin-bottom: 4px; }
.panel .panel-sub { color: var(--ink-2); margin: 0 0 18px; font-size: var(--step-0); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.panel-head h2 { margin: 0; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* Usage meters */
.meter { margin-bottom: 16px; }
.meter-top { display: flex; justify-content: space-between; font-size: var(--step-0); margin-bottom: 6px; }
.meter-top span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.meter-bar { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.meter-bar i { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.meter.is-full .meter-bar i { background: var(--danger); }
.meter.is-near .meter-bar i { background: var(--warning); }

/* Empty state for the scripts list: a blank page waiting to be written */
.empty-page { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; align-items: center; padding: 36px; }
.empty-page .script-stack { padding: 0 10px 10px 0; }
.empty-page .script-stack .edge { right: 10px; bottom: 10px; }
.empty-page .script-page { font-size: 7px; padding: 18% 12% 12% 18%; }
.empty-page h2 { font-size: var(--step-2); margin-bottom: 8px; }
.empty-page p { color: var(--ink-2); max-width: 46ch; }
@media (max-width: 640px) { .empty-page { grid-template-columns: 1fr; } .empty-page .script-stack { max-width: 140px; } }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--ink-2); text-decoration: none; font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }

/* Settings rows */
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--line); }
.setting:first-of-type { border-top: 0; padding-top: 4px; }
.setting h3 { font-size: var(--step-0); margin: 0 0 2px; }
.setting p { margin: 0; color: var(--ink-2); font-size: var(--step--1); }
.panel-danger { border-color: color-mix(in srgb, var(--danger) 40%, var(--line)); }

/* Device list */
.devices { list-style: none; margin: 0; padding: 0; }
.devices li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.devices li:first-child { border-top: 0; }
.device-ico { width: 36px; height: 36px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; color: var(--ink-2); }
.devices small { color: var(--ink-2); display: block; }

/* Two-step setup */
.qr-wrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.qr { width: 200px; height: 200px; padding: 10px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.qr svg, .qr img { width: 100%; height: 100%; }
.secret { font-family: var(--font-script); font-size: 15px; letter-spacing: .08em; word-break: break-all; background: var(--surface-2);
  padding: 10px 12px; border-radius: var(--r-sm); border: 1px dashed var(--line-strong); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; font-family: var(--font-script); font-size: 15px;
  background: var(--surface-2); padding: 16px 18px; border-radius: var(--r-sm); border: 1px dashed var(--line-strong); margin: 14px 0; }
@media (max-width: 560px) { .qr-wrap { grid-template-columns: 1fr; } }

/* Confirm dialog */
dialog.confirm { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
dialog.confirm::backdrop { background: rgba(14, 18, 28, .45); }
dialog.confirm .dlg-body { padding: 24px 24px 8px; }
dialog.confirm h2 { font-size: var(--step-1); margin-bottom: 8px; }
dialog.confirm p { color: var(--ink-2); margin: 0; }
dialog.confirm .dlg-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 24px 22px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--step-0); }
table.data th { text-align: left; font-weight: 600; color: var(--ink-2); font-size: var(--step--1); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who a { font-weight: 600; color: var(--ink); text-decoration: none; }
.who a:hover { color: var(--primary); }
.who small { display: block; color: var(--ink-2); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-2); }

/* ---------- Admin shell ---------- */
.admin { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh;
  background: linear-gradient(to right, #1B2230 236px, transparent 236px); }
.admin-side { background: #1B2230; color: #C9D0DC; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; }
.admin-side .brand { color: #fff; padding: 18px 20px; }
.admin-side .brand-word small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: #8D97AB; font-variation-settings: "wdth" 100; }
.admin-nav { padding: 8px 10px; display: grid; gap: 2px; }
.admin-nav h4 { margin: 16px 10px 6px; font-size: 11.5px; font-weight: 600; color: #7B859A; }
.admin-nav a, .admin-nav span { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: #C9D0DC; text-decoration: none; font-size: 14px; }
.admin-nav a:hover { background: #262F40; color: #fff; }
.admin-nav a[aria-current="page"] { background: #2B3954; color: #fff; box-shadow: inset 3px 0 0 var(--rev-blue); }
.admin-nav span { color: #677189; cursor: default; }
.admin-nav span em { margin-left: auto; font-style: normal; font-size: 10.5px; color: #677189; border: 1px solid #39435A; border-radius: 4px; padding: 0 5px; }
.admin-nav svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.admin-side-foot { margin-top: auto; padding: 14px 20px; font-size: 12px; color: #7B859A; border-top: 1px solid #2A3345; }
.admin-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 30; }
.admin-search { flex: 1; max-width: 420px; }
.admin-search .input { min-height: 38px; background: var(--surface-2); }
.admin-body { padding: 28px; }
.admin-menu-btn { display: none; }
@media (max-width: 960px) {
  .admin { grid-template-columns: 1fr; background: none; }
  .admin-side { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 70; transform: translateX(-100%); transition: transform .2s; }
  .admin.nav-open .admin-side { transform: none; box-shadow: var(--shadow-2); }
  .admin-menu-btn { display: inline-flex; }
  .admin-body { padding: 20px 16px; }
  .admin-top { padding: 10px 16px; }
}

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 24px; }
.stat { padding: 18px 20px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; }
.stat .k { font-size: var(--step--1); color: var(--ink-2); }
.stat .v { font-size: 1.85rem; font-weight: 700; font-variation-settings: "wdth" 104; line-height: 1.15; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.stat .d { font-size: var(--step--1); color: var(--ink-3); }
.stat .up { color: var(--success); } .stat .down { color: var(--danger); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

.bars { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-top: 8px; }
.bars i { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.bars i:hover { opacity: 1; }
.bars-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.mix { list-style: none; padding: 0; margin: 0; }
.mix li { display: grid; grid-template-columns: 90px minmax(0, 1fr) 48px; gap: 10px; align-items: center; padding: 7px 0; font-size: var(--step-0); }
.mix .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.feed { list-style: none; padding: 0; margin: 0; font-size: var(--step-0); }
.feed li { padding: 9px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; }
.feed li > span { min-width: 0; overflow-wrap: anywhere; }
.feed li:first-child { border-top: 0; }
.feed code { font-size: 12.5px; background: var(--surface-2); padding: 1px 6px; border-radius: 4px; }
.feed small { color: var(--ink-3); white-space: nowrap; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filters .input, .filters .select { min-height: 38px; width: auto; }
.filters .input { min-width: 240px; flex: 1; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions form { margin: 0; }
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 16px; font-size: var(--step-0); margin: 0; }
.kv dt { color: var(--ink-2); }
.kv dd { margin: 0; word-break: break-word; }
.user-head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; flex-wrap: wrap; }
.user-head h1 { font-size: var(--step-2); margin: 0; }
.note { border-left: 3px solid var(--rev-yellow); padding: 8px 12px; background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-bottom: 10px; font-size: var(--step-0); }
.note small { display: block; color: var(--ink-3); margin-top: 4px; }

/* ---------- Script library (Phase 4) ---------- */
.script-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 22px; }
.script-card { min-width: 0; }
.sc-page { display: block; position: relative; padding: 0 8px 8px 0; text-decoration: none; }
.sc-edges, .sc-edges::before, .sc-edges::after { position: absolute; inset: 6px 2px 2px 6px; border-radius: 2px; }
.sc-edges { background: var(--rev-yellow); }
.sc-edges::before { content: ""; inset: -2px 2px 2px -2px; background: var(--rev-pink); }
.sc-edges::after { content: ""; inset: -4px 4px 4px -4px; background: var(--rev-blue); }
.sc-sheet { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; aspect-ratio: 8.5 / 11;
  background: #fff; color: #111; border-radius: 2px; box-shadow: var(--shadow-1), 0 10px 24px -14px rgba(20, 28, 48, .45);
  padding: 14% 12%; text-align: center; font-family: var(--font-script); transition: transform .15s ease, box-shadow .15s ease; }
.sc-title { font-weight: 700; font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sc-by { font-size: 10px; color: #6B7280; }
.sc-page:hover .sc-sheet, .sc-page:focus-visible .sc-sheet { transform: translate(-2px, -3px); box-shadow: var(--shadow-1), 0 18px 30px -14px rgba(20, 28, 48, .5); }
.sc-meta { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; }
.sc-name { flex: 1; min-width: 0; }
.sc-name a, .sc-name strong { display: block; font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-name a:hover { color: var(--primary); }
.sc-name small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.sc-meta .menu > summary { width: 32px; min-height: 32px; border-radius: var(--r-sm); }
.sc-meta .menu-panel { min-width: 200px; }
.is-trashed .sc-sheet { opacity: .55; filter: grayscale(1); }
.menu-item svg { flex: none; color: var(--ink-2); }
dialog.confirm .field { margin-top: 14px; }
.btn[aria-disabled="true"] { opacity: .55; }

/* invitation card (0.5) */
.invite-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); margin-bottom: 22px; }
.invite-card b { display: block; font-family: var(--font-script); font-size: 15px; }
.invite-card small { color: var(--ink-3); font-size: 13px; }
.invite-ico { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; flex: none; }

/* notifications bell (0.5) */
.bell { position: relative; }
.bell summary { position: relative; }
.bell-count { position: absolute; top: 3px; right: 3px; min-width: 15px; height: 15px; border-radius: 8px; line-height: 15px !important; font-size: 9.5px !important; background: var(--danger); color: #fff;
  font: 700 10px/16px var(--font-ui); text-align: center; padding: 0 3px; border: 2px solid var(--surface); box-sizing: content-box; transform: translate(35%, -25%); }
.bell-panel { width: 340px; max-width: calc(100vw - 24px); padding: 6px; max-height: 70vh; overflow: auto; }
.bell-h { font-weight: 600; font-size: 13px; padding: 8px 10px 6px; }
.bell-item { display: block; padding: 9px 10px 9px 22px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.4; position: relative; }
.bell-item small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.bell-item:hover { background: var(--surface-2); }
.bell-item.unread::before { content: ""; position: absolute; left: 8px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }


.activity { list-style: none; margin: 0; padding: 0; }
.activity li { padding: 8px 0 8px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; position: relative; }
.activity li:last-child { border-bottom: 0; }
.activity li.unread::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.activity a { color: var(--ink); text-decoration: none; }
.activity a:hover { text-decoration: underline; }
.activity small { display: block; color: var(--ink-3); font-size: 12px; }
.bell-empty { font-size: 13px; color: var(--ink-3); padding: 6px 10px 10px; margin: 0; }
.bell > summary.icon-btn { padding: 0; justify-content: center; border-radius: var(--r-sm); }
.bell > summary svg { flex: none; width: 18px; height: 18px; }

/* ============================================================
   Billing (0.6)
   ============================================================ */
.mono { font-family: var(--font-script); letter-spacing: .02em; }
.test-banner { margin: 0 0 20px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--warning-soft); color: var(--ink); font-size: var(--step--1); border: 1px dashed color-mix(in srgb, var(--warning) 50%, transparent); }
.back-link { display: inline-block; margin-bottom: 14px; color: var(--ink-2); text-decoration: none; font-size: var(--step--1); }
.back-link:hover { color: var(--ink); }

/* monthly / yearly switch */
.interval { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.interval a { padding: 8px 18px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: var(--step-0); display: inline-flex; align-items: center; gap: 8px; }
.interval a[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.interval a span { font-size: 11.5px; font-weight: 650; color: var(--success); }
.interval-sm a { padding: 5px 12px; font-size: var(--step--1); }

/* pricing */
.pricing-head { padding-top: clamp(32px, 6vw, 80px); padding-bottom: 36px; text-align: center; }
.pricing-head h1 { font-size: var(--step-4); font-weight: 760; letter-spacing: -.025em; line-height: 1.04; font-variation-settings: "wdth" 112; max-width: 16ch; margin: 0 auto .4em; }
.pricing-head .lede { font-size: var(--step-1); color: var(--ink-2); max-width: 52ch; margin: 0 auto 28px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; padding-bottom: 72px; }
.plan { position: relative; display: flex; }
.plan-sheet { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-page); padding: 28px 26px 30px; box-shadow: var(--shadow-1); }
.plan-featured .plan-sheet { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); box-shadow: var(--shadow-2); }
.plan-edges { position: absolute; inset: 0; z-index: 0; }
.plan-edges i { position: absolute; inset: 0; border-radius: var(--r-page); }
.plan-edges i:nth-child(1) { background: var(--rev-yellow); transform: translate(14px, 14px); }
.plan-edges i:nth-child(2) { background: var(--rev-pink); transform: translate(9px, 9px); }
.plan-edges i:nth-child(3) { background: var(--rev-blue); transform: translate(4px, 4px); }
.plan header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan h2 { font-size: var(--step-2); margin: 0; font-variation-settings: "wdth" 110; }
.plan-tag { color: var(--ink-2); margin: 6px 0 22px; min-height: 2.8em; }
.plan-price { min-height: 96px; margin-bottom: 18px; }
.plan-price strong { display: block; font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3rem); font-weight: 760; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price span { display: block; color: var(--ink-2); margin-top: 6px; font-size: var(--step--1); }
.plan-price small { display: block; color: var(--ink-3); font-size: var(--step--1); }
.plan-list { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; }
.plan-list li { position: relative; padding-left: 22px; font-size: var(--step-0); }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 9px; height: 5px; border-left: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: rotate(-45deg); }
.compare { padding-bottom: 64px; }
.compare h2, .faq h2 { font-size: var(--step-3); font-variation-settings: "wdth" 110; margin-bottom: 22px; }
.compare-table th[scope="col"] { font-size: var(--step-0); color: var(--ink); }
.compare-table td, .compare-table th[scope="col"]:not(:first-child) { text-align: center; width: 18%; }
.compare-table th[scope="row"] { font-weight: 500; color: var(--ink); }
.compare-table tr.group th { padding-top: 26px; font-size: var(--step--1); color: var(--ink-3); font-weight: 650; border-bottom: 1px solid var(--line); }
.compare-table tbody tr.group:hover { background: none; }
.compare-table .yes { color: var(--success); font-weight: 700; }
.compare-table .no { color: var(--ink-3); }
.faq { padding-bottom: 96px; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.faq details { border-top: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; position: relative; padding-right: 28px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 20px; color: var(--ink-3); }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--ink-2); margin: 10px 0 0; max-width: 60ch; }

/* checkout */
.checkout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.checkout .h2 { font-size: var(--step-2); margin-bottom: 4px; }
.summary { position: sticky; top: 84px; }
.summary-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.summary-plan h2 { font-size: var(--step-2); margin: 0; }
.lines { margin: 0; display: grid; gap: 9px; font-size: var(--step-0); }
.lines div { display: flex; justify-content: space-between; gap: 12px; }
.lines div[hidden] { display: none; }
.lines [data-taxes] { display: contents; }
.lines dt { color: var(--ink-2); } .lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.lines .total { padding-top: 11px; border-top: 1px solid var(--line); font-weight: 650; }
.lines .total dt { color: var(--ink); }
.today { margin: 18px 0; padding: 14px 16px; border-radius: var(--r-sm); background: var(--primary-soft); }
.today strong { display: block; font-size: var(--step-2); letter-spacing: -.01em; }
.today span { display: block; color: var(--ink-2); font-size: var(--step--1); margin-top: 4px; }
.coupon { margin-bottom: 16px; font-size: var(--step--1); }
.coupon summary { cursor: pointer; color: var(--primary); font-weight: 600; }
.coupon-row { display: flex; gap: 8px; margin-top: 10px; }
.coupon-row .input { flex: 1; min-width: 0; text-transform: uppercase; }
.fine { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; line-height: 1.5; }

/* billing page */
.billing-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 24px; align-items: start; }
.plan-line { color: var(--ink-2); margin: 0 0 18px; }
.plan-price-line { margin: 0 0 10px; } .plan-price-line strong { font-size: var(--step-3); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan-facts { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--ink-2); }
.plan-facts .warn { color: var(--danger); }
.current-plan .actions, .panel .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); margin-bottom: 18px; font-size: var(--step-0); }
.mini-plans { display: grid; gap: 10px; }
.mini-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.mini-plan[hidden] { display: none; }
.mini-plan.is-current { border-color: color-mix(in srgb, var(--primary) 50%, var(--line)); background: var(--primary-soft); }
.mini-plan h3 { margin: 0; font-size: var(--step-1); } .mini-plan p { margin: 2px 0 0; }
.mp-price { text-align: right; white-space: nowrap; } .mp-price strong { font-variant-numeric: tabular-nums; } .mp-price span { color: var(--ink-3); font-size: var(--step--1); }
.reasons { border: 0; padding: 0; margin: 14px 0 12px; display: grid; gap: 6px; }
.reasons legend { margin-bottom: 6px; }
dialog.confirm .textarea { width: 100%; }

/* invoice page */
body.invoice-page { background: var(--surface-2); }
.invoice-bar { display: flex; gap: 10px; align-items: center; max-width: 860px; margin: 24px auto 12px; padding: 0 var(--gutter); }
.invoice-bar .spacer { flex: 1; }
.invoice-doc { max-width: 860px; margin: 0 auto 48px; background: #fff; color: #1C2230; padding: clamp(24px, 5vw, 56px); border-radius: var(--r-md); box-shadow: var(--shadow-2); border-top: 6px solid #2F5BEA; font-size: 14px; }
.inv-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid #E3E6EC; }
.inv-seller { font-size: 22px; margin: 0 0 6px; color: #1C2230; }
.inv-head p { margin: 0 0 4px; color: #5B6475; font-size: 13px; }
.inv-meta h2 { text-align: right; font-size: 18px; letter-spacing: .04em; text-transform: uppercase; color: #2F5BEA; margin: 0 0 10px; }
.inv-meta h2.cn { color: #B42318; }
.inv-meta dl { margin: 0; display: grid; gap: 4px; } .inv-meta dl div { display: flex; gap: 14px; justify-content: flex-end; }
.inv-meta dt { color: #5B6475; } .inv-meta dd { margin: 0; font-weight: 650; min-width: 140px; text-align: right; }
.inv-to { padding: 20px 0; } .inv-to h3 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #5B6475; margin: 0 0 8px; }
.inv-to p { margin: 0; line-height: 1.55; color: #3A4252; }
.inv-lines { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.inv-lines th { background: #F2F4F8; text-align: left; font-size: 12px; color: #5B6475; padding: 9px 12px; }
.inv-lines td { padding: 12px; border-bottom: 1px solid #ECEEF3; vertical-align: top; }
.inv-lines td small { display: block; color: #5B6475; font-size: 12px; margin-top: 2px; }
.inv-lines .num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-totals { margin: 0 0 18px auto; max-width: 340px; display: grid; gap: 6px; }
.inv-totals div { display: flex; justify-content: space-between; gap: 16px; } .inv-totals dt { color: #5B6475; } .inv-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.inv-totals .grand { margin-top: 6px; padding: 10px 12px; background: #EEF2FE; border-radius: 6px; font-weight: 700; } .inv-totals .grand dt { color: #1C2230; } .inv-totals .grand dd { color: #2F5BEA; font-size: 17px; }
.inv-note { color: #5B6475; font-size: 12.5px; margin: 0 0 6px; }
.invoice-doc footer { margin-top: 32px; padding-top: 14px; border-top: 1px solid #E3E6EC; color: #5B6475; font-size: 11.5px; }
@media print { .no-print { display: none !important; } body.invoice-page { background: #fff; } .invoice-doc { box-shadow: none; margin: 0; max-width: none; border-radius: 0; } }

/* built-in test checkout */
.test-checkout h1 { font-size: var(--step-3); margin-bottom: 8px; }
.tc-flag { display: inline-block; margin: 0 0 18px; padding: 4px 10px; border-radius: 999px; background: var(--warning-soft); color: var(--warning); font-weight: 700; font-size: 12px; }
.tc-methods { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; }
.tc-methods legend { font-weight: 600; font-size: var(--step--1); color: var(--ink-2); margin-bottom: 8px; }
.tc-opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.tc-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.tc-opt span { display: grid; } .tc-opt small { color: var(--ink-3); font-size: 12.5px; }

@media (max-width: 960px) {
  .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .checkout, .billing-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .faq-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mini-plan { grid-template-columns: 1fr auto; } .mini-plan .mp-price { grid-column: 1; text-align: left; }
  .compare-table td, .compare-table th { padding: 9px 8px; font-size: 13px; }
}

[hidden] { display: none !important; }
.kv > div { display: contents; }
.plain-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--step-0); }