/* ============================================================
   Design tokens — single source for every cstoken.net page.

   Tokens are named for the job they do, not for what they look like.
   "--ink" and "--mist" told you a colour; --text-strong and
   --surface-subtle tell you where it may be used.

   THREE TIERS OF ACTION. This is the part that is easy to get wrong.

     .button            neutral   most buttons: copy, cancel, detail,
                                  settings, logout, close
     .button--primary   green     the representative action of this
                                  screen or state — save, continue, submit
     .button--action    orange    money or signup moves: start, pay, renew

   The default is deliberately the quiet one. An earlier revision made
   .button green by default, which meant 17 green buttons on /account
   and no way to tell which one mattered — the same dilution an orange
   default would cause, just in a different hue. Standing out has to
   cost something, so the base tier pays nothing and the two accents
   are rationed: at most one --primary per visible state, at most one
   --action per screen.

   Green also carries identity and links (the mark, hook__hl, anchors,
   focus ring, brand-tinted surfaces) and status success. --brand
   clears 4.5:1 on every light surface, so one value serves as both
   fill and text.

   A third hue (slate blue, for an "enterprise track") was tried and
   removed: green, slate and the old rust-orange all sat within a
   1.05-1.31 luminance ratio, so four colours read as one muddy band.
   Brightness, not hue, is what separates a CTA.

   Neutrals are near-grey on purpose — a bright accent only reads as
   bright against uncoloured ground — and every neutral is verified
   against the whole surface ramp, not just white. --text-muted and
   --border-strong were both a step lighter until --surface-muted
   turned out to be a page background under .operator-recovery-page
   and .renewal-state, where they fell to 4.19:1 and 2.90:1.

   --border-strong is the one grey dark enough to be a control
   boundary: 3.27:1 at worst across all four surfaces. A lighter grey
   candidate was 2.14:1 on white and is not usable for a boundary.

   Hue alone cannot separate --action from --warning (h35) and --danger
   (h6) — orange sits between them and every position is within 20
   degrees of one or the other. Luminance does the work instead:
   --action is 1.46x brighter than both. Keep it that way, and keep
   status colours as tinted text with an icon, never a filled
   surface next to a CTA.

   Every colour used anywhere belongs here; a hex literal outside
   :root is a bug, not a shortcut, and a frontend test enforces it.
   Sizes and spaces are scales rather than tokens — see the note
   below. Breakpoints: 520 / 620 / 820.
   ============================================================ */
:root {
  color-scheme: light;
  /* Pretendard, now actually loaded — assets/fonts.css self-hosts the
     variable dynamic subset. It used to lead this stack with no @font-face
     anywhere, so every page rendered in whatever Hangul font the OS picked.

     Pretendard over Noto Sans KR because this copy mixes scripts inside
     single lines ("US$69 / 30일", "Whop PG 안전결제"): its Latin is
     Inter-derived and metrically matched to its Hangul, so weight and width
     do not jump mid-sentence.

     The fallbacks stay explicit rather than ending at sans-serif — Segoe UI
     and system-ui carry no Hangul, so Malgun Gothic / Apple SD Gothic Neo
     have to be named or the browser chooses for us during the swap. */
  font-family: "Pretendard Variable", system-ui, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Roboto, "Segoe UI", sans-serif;
  /* NEUTRAL — the tier every button and most text starts from.
     Each value is verified against all four surfaces, not just white. */
  --text-strong: #171a1f;
  --text-default: #3f4651;
  --text-muted: #626a75;
  --border-subtle: #eaedf1;
  --border-default: #d7dce3;
  /* a control boundary must clear 3:1 on every surface (WCAG 1.4.11);
     --border-default and --border-subtle are decorative and do not */
  --border-strong: #7c8490;
  --surface-default: #fff;
  --surface-page: #fbfcfd;
  --surface-subtle: #f5f7f9;
  --surface-muted: #eceff3;
  /* BRAND green — identity, links, the representative action, success.
     One value for fill and text: 5.26:1 on white, 4.90:1 at worst on
     the section tint. */
  --brand: #237a57;
  --brand-dark: #1a5c42;
  --brand-tint: #edf6f2;
  --focus-ring: #237a57;
  /* ACTION orange — money or signup only, at most one per screen.
     The deeper orange keeps white labels above 4.5:1 even when the
     responsive layout uses normal-size button text. */
  --action: #c94d00;
  --action-dark: #bd4b00;
  /* STATUS — ink for text, -bg for the tint behind it, -border for an
     edge where one is drawn. Success is the brand green: on a payment
     surface "succeeded" and "on brand" mean the same thing. */
  --success: #237a57;
  --success-bg: #e7f3ec;
  --warning: #a16207;
  --warning-bg: #fbf5e3;
  --warning-border: #e5ce8f;
  --danger: #d92d20;
  --danger-bg: #fff6f5;
  /* inverted surfaces (footer, closing band) */
  --invert-surface: #14181d;
  --invert-text: #c9ced6;
  --invert-muted: #9aa1ac;
  --invert-link: #8fd0ae;
  /* Claude's character colour, used only by the landing's pixel mark. */
  --claude-mark: #d97757;
  /* Type, weight and space are scales, not tokens. They used to be
     declared here as --text-*, --weight-* and --space-* and were
     referenced exactly zero times — the frontend test enforces them by
     checking the literal px values instead. Wiring the tokens in would
     have made that test blind (every value would hide behind a var()),
     so the scales stay documented here and enforced there:

       font-size   12 13 14 15 16 18 20 24 32 40   (plus clamp())
       font-weight 400 500 600 700
       space       4 8 12 16 20 24 32 40 48 56 64 80 96   (4px grid)

     500 became available only once Pretendard Variable was self-hosted:
     the scale stopped at 400/600/700 because intermediate weights snap
     unpredictably on a non-variable stack. The variable axis is 45..920,
     so 500 is now a real weight, and the fallback fonts only see it
     during the swap.

     Weight is the hierarchy, and it was flat: every one of the ten
     declarations in landing.css was 700, so the section title, the trust
     row, the kit titles and the accordion all shouted equally. The tiers
     are now 700 titles and CTAs / 600 sub-titles and data / 500 supporting
     labels / 400 prose.

     Motion is a token because it has no such test and must stay
     uniform: every state change shares one duration and easing. */
  --ease: cubic-bezier(.2, 0, .2, 1);
  --dur: 160ms;
  /* shape & elevation */
  --r-lg: 16px;
  --r: 12px;
  --r-sm: 8px;
  --r-btn: 10px;
  --shadow-card: 0 1px 2px rgba(20, 23, 26, .05), 0 14px 34px rgba(20, 23, 26, .07);
  --shadow-panel: 0 18px 50px rgba(20, 23, 26, .08);
  --shadow-modal: 0 24px 70px rgba(20, 23, 26, .3);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--surface-muted); }
body { margin: 0; color: var(--text-strong); background: var(--surface-page); }
::selection { color: var(--text-strong); background: var(--brand-tint); }
a { color: inherit; }
input, textarea { caret-color: var(--brand); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { border-bottom: 1px solid var(--border-default); background: rgba(251,252,253,.9); position: sticky; top: 0; z-index: 10; }
.topbar__inner, .main, .footer__inner { width: min(1120px, calc(100% - 36px)); margin: 0 auto; }
.topbar__inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; }
.brand__mark { width: 26px; height: 26px; background: url("/assets/favicon.svg?v=12") center / contain no-repeat; }
.brand__mark span { display: none; }
.nav { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.nav a { color: var(--text-muted); text-decoration: none; }
.nav a:hover { color: var(--text-strong); }

.main { flex: 1; padding: 40px 0 64px; }
.eyebrow { margin: 0 0 12px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(34px, 5vw, 58px); line-height: 1.08; letter-spacing: -.01em; }
h2 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
h3 { margin: 0; font-size: 16px; letter-spacing: 0; }
h1, h2 { text-wrap: balance; word-break: keep-all; }
.lead { max-width: 690px; margin: 20px 0 0; color: var(--text-default); font-size: 18px; line-height: 1.7; }
.service-note { margin: 24px 0 0; padding: 16px 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); display: flex; gap: 20px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; }
.service-note strong { color: var(--text-strong); }

.panel { border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-page); }
.panel__head, .panel__body, .panel__section { padding: 24px; }
.panel__head { border-bottom: 1px solid var(--border-default); }
.panel__body, .panel__section { display: grid; gap: 16px; }
.panel__section + .panel__section { border-top: 1px solid var(--border-default); }
.field { display: grid; gap: 8px; }
.field label { font-size: 13px; font-weight: 700; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-default); padding: 12px 12px; color: var(--text-strong); }
.field textarea { min-height: 124px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--brand); }
.refund-guidance { display: grid; gap: 12px; margin: 4px 0; padding: 16px 0 16px 16px; border-left: 3px solid var(--danger); }
.refund-guidance[hidden] { display: none; }
.refund-guidance > strong { font-size: 15px; }
.refund-guidance > p { margin: 0; font-size: 13px; line-height: 1.65; }
.refund-guidance fieldset { display: grid; gap: 8px; margin: 4px 0; padding: 0; border: 0; }
.refund-guidance legend { margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.refund-guidance label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.refund-guidance input { flex: 0 0 auto; margin-top: 2px; }
.refund-ack { padding-top: 10px; border-top: 1px solid var(--border-default); font-weight: 700; }
.help, .status-text { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.status-text[data-tone="error"] { color: var(--danger); }
.status-text[data-tone="success"] { color: var(--success); }
/* TIER 1 — the default is neutral. Everything that is merely available
   looks available and nothing more; the two accent tiers below buy their
   prominence from this baseline.
   The border is 2px, not 1px: on the neutral tier the border IS the button,
   and 1px read as a hairline next to a filled CTA. box-sizing is border-box,
   so the extra pixel comes out of the padding and the 44px floor holds.
   touch-action: manipulation drops the legacy 300ms tap delay; the
   transition keeps state changes from snapping (they used to be 0ms). */
.button { min-height: 44px; border: 2px solid var(--border-strong); border-radius: var(--r-btn); background: var(--surface-default); color: var(--text-strong); padding: 12px 16px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; touch-action: manipulation; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
/* --border-strong clears 3:1 on --surface-default but not on --surface-muted,
   so the boundary darkens with the fill rather than fading into it. */
.button:hover { border-color: var(--text-default); background: var(--surface-muted); }
/* Press feedback: transform only, so the surrounding layout never moves. */
.button:active:not(:disabled) { transform: scale(.98); }
.button:disabled { opacity: .58; cursor: wait; }
.button:disabled:hover { transform: none; }
/* Spinner for async submits. .button keeps its gap, so the ring simply
   sits before the label; aria-busy on the button carries it to AT. */
.button[aria-busy="true"]::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: button-spin 700ms linear infinite;
}
@keyframes button-spin { to { transform: rotate(360deg); } }
/* --quiet is now what .button already is. Kept as a no-op alias because it
   appears across the account, renew and operator pages; new markup should
   just use .button. */
.button--quiet { }
.button--danger { border-color: var(--danger); background: var(--surface-default); color: var(--danger); }
.button--danger:hover { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

/* TIER 2 — the representative action of the current screen or state.
   At most one per visible state; a second one puts us back where the
   green-by-default revision was. */
.button--primary { border-color: var(--brand); background: var(--brand); color: var(--surface-default); }
.button--primary:hover { border-color: var(--brand-dark); background: var(--brand-dark); }

/* TIER 3 — money or signup moves, at most one per screen.
   The 20px label is load-bearing, not taste. White on --action is
   3.37:1, which clears WCAG AA only under the large-text rule
   (>=18.66px bold). Shrink this below 20px and the contrast silently
   becomes non-compliant — use --action-dark (5:1) for a smaller one.

   Hence .button.button--action, not .button--action: the size modifiers
   below are single-class too, and whichever came last in the file was
   winning the font-size. */
.button.button--action { border-color: var(--action); background: var(--action); color: var(--surface-default); font-size: 20px; }
.button--action:hover { border-color: var(--action-dark); background: var(--action-dark); }
/* 44px, not 36px: a modifier cannot be allowed to undercut the touch-target
   minimum. --sm now means tighter padding and a smaller label, not a smaller
   hit area. */
.button--sm { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.button--lg { min-height: 52px; padding: 16px 32px; font-size: 15px; }
.button--xl { min-height: 58px; padding: 16px 40px; font-size: 16px; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.button-row .button { flex: 1 1 160px; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.nav a, .footer__links a, .disclosures summary { transition: color var(--dur) var(--ease); }

/* Skip link: only rendered while focused, so it costs no layout. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; padding: 12px 16px; border-radius: var(--r-btn); background: var(--text-strong); color: var(--surface-default); font-size: 14px; font-weight: 700; text-decoration: none; }

/* One global stop for motion: the spinner degrades to a static ring rather
   than disappearing, since it is the only signal that a submit is running. */
@media (prefers-reduced-motion: reduce) {
  .button, .nav a, .footer__links a, .disclosures summary { transition: none; }
  .button:active:not(:disabled) { transform: none; }
  .button[aria-busy="true"]::before { animation: none; }
  .promo__dot { animation: none; }
}

.seat-availability { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--warning-border); border-radius: 8px; background: var(--warning-bg); }
.seat-availability strong { font-size: 15px; }
.seat-availability p { margin: 0; color: var(--warning); font-size: 13px; line-height: 1.6; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; }
.fact { min-height: 94px; padding: 16px; border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.fact:nth-child(2n) { border-right: 0; }
.fact:nth-last-child(-n+2) { border-bottom: 0; }
.fact span { color: var(--text-muted); font-size: 12px; }
.fact strong { display: block; margin-top: 8px; font-size: 15px; overflow-wrap: anywhere; }
/* Auth dialog — single canonical definition (shared by 시작하기 / 로그인).
   Width 444px keeps the body content at 400px = the GIS button width. */
.auth-dialog { width: min(444px, calc(100% - 28px)); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); color: var(--text-strong); background: var(--surface-page); box-shadow: var(--shadow-modal); }
.auth-dialog::backdrop { background: rgba(16, 19, 24, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.auth-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 0; }
.auth-dialog__head h2 { margin: 8px 0 0; font-size: 20px; letter-spacing: -.01em; }
.auth-dialog__body { display: grid; gap: 20px; padding: 16px 24px 24px; }
.auth-dialog__desc { margin: 0; color: var(--text-default); font-size: 14px; line-height: 1.6; }
.auth-dialog__close { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-default); color: var(--text-strong); font-size: 24px; line-height: 1; }
.auth-dialog__close:hover { background: var(--surface-muted); }
.auth-dialog form { display: grid; gap: 16px; }
.auth-dialog .field input { min-height: 50px; font-size: 16px; }
.auth-dialog .button { width: 100%; min-height: 50px; }
.auth-dialog__state { min-height: 190px; align-content: center; text-align: center; }
.auth-dialog__state h3 { font-size: 20px; }
.auth-dialog__state p { margin: 0; color: var(--text-default); line-height: 1.65; }
.auth-dialog__muted { color: var(--text-muted) !important; font-size: 13px; }
.auth-dialog__divider { display: flex; align-items: center; gap: 12px; margin-top: 10px; color: var(--text-muted); font-size: 12px; }
.auth-dialog__divider::before, .auth-dialog__divider::after { content: ""; height: 1px; flex: 1; background: var(--border-default); }
.auth-dialog__help { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.auth-dialog__help a { color: var(--brand); }
.google-auth-button { width: 100%; height: 44px; min-height: 44px; display: grid; place-items: center; overflow: hidden; }
.google-auth-button iframe { display: block; max-width: 100%; }
.nicepay-dialog { width: min(520px, calc(100% - 28px)); }
.nicepay-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nicepay-consent { align-items: flex-start; width: 100%; padding: 16px; border: 1px solid var(--border-default); border-radius: var(--r); background: var(--surface-muted); font-size: 13px; }
.nicepay-consent input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--brand); }

/* Cancellation dialog — reuses the auth-dialog shell, adds the reason picker,
   the deflection promise, and the plain-language list of what ending costs. */
.cancel-dialog [data-cancel-step] { display: grid; gap: 16px; }
.cancel-dialog [data-cancel-step][hidden] { display: none; }
.cancel-choices { display: grid; gap: 12px; }
.cancel-choices button { display: grid; gap: 4px; min-height: 66px; padding: 16px 16px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface-default); text-align: left; }
.cancel-choices button:hover { border-color: var(--brand); background: var(--brand-tint); }
.cancel-choices strong { font-size: 15px; }
.cancel-choices span { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
.cancel-promise { padding: 16px 16px; border-radius: var(--r); background: var(--brand-tint); }
.cancel-promise strong { display: block; color: var(--text-strong); font-size: 15px; line-height: 1.5; }
.cancel-promise p { margin: 8px 0 0; color: var(--text-default); font-size: 13px; line-height: 1.55; }
.cancel-facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cancel-facts li { position: relative; padding-left: 20px; color: var(--text-default); font-size: 14px; line-height: 1.6; }
.cancel-facts li::before { content: ""; position: absolute; top: 9px; left: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); }
.cancel-facts b { color: var(--text-strong); }
.cancel-dialog textarea { min-height: 110px; resize: vertical; }
.cancel-dialog code { font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text-strong); }
.cancel-dialog .button-row .text-button { flex: 0 0 auto; }

.auth-page { min-height: 100vh; }
.auth-page__main { min-height: calc(100vh - 67px); display: grid; place-items: center; padding: 32px 0; }
.auth-page__panel { width: min(520px, 100%); display: grid; justify-items: stretch; gap: 20px; padding: 32px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-page); box-shadow: var(--shadow-panel); text-align: center; }
.auth-page__panel h1 { font-size: 32px; }
.auth-page__description { margin: 0; color: var(--text-default); line-height: 1.65; }
.auth-page__spinner { width: 28px; height: 28px; justify-self: center; border: 3px solid var(--border-default); border-top-color: var(--brand); border-radius: 50%; animation: auth-spin .8s linear infinite; }
.auth-page__panel form { display: grid; gap: 16px; text-align: left; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

.operator-recovery-page { min-height: 100vh; background: var(--surface-muted); }
.operator-recovery-shell { width: min(560px, calc(100% - 28px)); min-height: 100vh; margin: 0 auto; padding: 32px 0 56px; display: grid; align-content: center; gap: 20px; }
.operator-recovery-panel { display: grid; gap: 20px; padding: 32px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--surface-page); box-shadow: var(--shadow-panel); }
.operator-recovery-panel h1 { font-size: 32px; }
.operator-recovery-lead { margin: 0; color: var(--text-default); line-height: 1.65; }
.operator-recovery-facts { margin: 0; border-top: 1px solid var(--border-default); }
.operator-recovery-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-default); }
.operator-recovery-facts dt { color: var(--text-muted); font-size: 13px; }
.operator-recovery-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.operator-recovery-guidance { padding: 16px; border-left: 3px solid var(--brand); background: var(--brand-tint); color: var(--text-default); font-size: 13px; line-height: 1.65; }
.operator-recovery-action { width: 100%; }

@media (max-width: 560px) {
  .operator-recovery-shell { align-content: start; padding-top: 22px; }
  .operator-recovery-panel { padding: 24px 20px; }
  .operator-recovery-panel h1 { font-size: 24px; }
  .operator-recovery-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .nicepay-card-grid { grid-template-columns: 1fr; }
}

.price-compare { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.price-compare > div { padding: 16px 0; }
.price-compare > div + div { padding-left: 18px; border-left: 1px solid var(--border-default); }
.price-compare dt { color: var(--text-muted); font-size: 12px; }
.price-compare dd { margin: 8px 0 0; font-weight: 700; }
.price-compare s { color: var(--text-muted); font-weight: 400; }
.checkout-consent { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--border-default); }
.checkout-consent__option { min-height: 48px; display: flex; align-items: center; gap: 12px; width: fit-content; cursor: pointer; font-weight: 700; line-height: 1.5; }
.checkout-consent__option input { width: 22px; height: 22px; flex: 0 0 22px; margin: 0; accent-color: var(--brand); }
.checkout-consent p { margin: 0 0 0 32px; color: var(--text-muted); font-size: 13px; line-height: 1.55; }

.provisioning-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.provisioning-rail li { min-height: 74px; display: flex; align-items: center; gap: 8px; padding: 16px 16px; color: var(--text-muted); font-size: 13px; }
.provisioning-rail li::before { content: "○"; flex: 0 0 auto; }
.provisioning-rail li[data-state="current"]::before { content: "●"; }
.provisioning-rail li[data-state="done"]::before { content: "✓"; }
.provisioning-rail li + li { border-left: 1px solid var(--border-default); }
.provisioning-rail li[data-state="done"], .provisioning-rail li[data-state="current"] { color: var(--text-strong); font-weight: 700; }
.indeterminate-bar { height: 4px; overflow: hidden; background: var(--border-subtle); }
.indeterminate-bar span { display: block; width: 38%; height: 100%; background: var(--brand); animation: indeterminate-progress 1.6s ease-in-out infinite; }
@keyframes indeterminate-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(290%); } }
.processing-message { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.processing-message p { margin: 0; font-weight: 700; }
.processing-message small { color: var(--text-muted); white-space: nowrap; }
.critical-note { margin: 0; padding: 16px 0 16px 16px; border-left: 3px solid var(--warning); color: var(--text-default); line-height: 1.6; }
.access-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: access-step; border-top: 1px solid var(--border-default); }
.access-steps li { position: relative; counter-increment: access-step; display: grid; gap: 8px; padding: 20px 0 20px 40px; border-bottom: 1px solid var(--border-default); }
.access-steps li::before { content: counter(access-step); position: absolute; width: 26px; height: 26px; margin-left: -42px; display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: 50%; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.access-steps p, .access-steps small { margin: 0; color: var(--text-muted); line-height: 1.55; }
.copy-row { display: flex; align-items: center; gap: 12px; }
.copy-row code { overflow-wrap: anywhere; }
.icon-button { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface-default); color: var(--text-strong); font-size: 18px; }
.text-button { border: 0; background: transparent; color: var(--brand); padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }


.status-label { color: var(--success); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.danger-row, .refund-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--border-default); }
.danger-row p, .refund-entry p { margin: 8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.55; }
.help-list { margin-bottom: 32px; border-top: 1px solid var(--border-default); }
.help-section { margin: 24px 0 0; padding-bottom: 8px; color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.help-list > .help-section:first-child { margin-top: 12px; }
.help-list details p + p { margin-top: 12px; }
.help-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0 !important; padding-bottom: 20px !important; }
.help-links a { color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.help-list details { border-bottom: 1px solid var(--border-default); }
.help-list summary { cursor: pointer; padding: 20px 0; font-weight: 700; }
.help-list details p { margin: 0; padding: 0 0 20px; color: var(--text-default); line-height: 1.65; }
.support-form { display: grid; gap: 16px; padding-top: 26px; border-top: 1px solid var(--border-default); }
.support-form h2 { margin-bottom: 4px; }

/* ============================================================
   Service hub (/account) — the single surface for the whole
   customer lifecycle. One centered column, white cards on warm
   mist, top tab row on every viewport.
   ============================================================ */
.hub-page { background: var(--surface-subtle); }
.hub-page .topbar { background: rgba(243, 245, 248, .9); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); }
/* Topbar and footer hug the 640px content column, like the landing does with its own column. */
.hub-page .topbar__inner { width: min(640px, calc(100% - 32px)); min-height: 62px; }
.hub-page .footer__inner { width: min(640px, calc(100% - 32px)); }
.nav-email { color: var(--text-muted); font-size: 13px; overflow-wrap: anywhere; }
.hub { width: min(640px, calc(100% - 32px)); margin: 0 auto; flex: 1; padding: 24px 0 56px; }
.hub-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border-default); }
.hub-tabs button { min-height: 46px; padding: 0 16px; border: 0; background: transparent; color: var(--text-muted); font-size: 14px; font-weight: 700; }
.hub-tabs button:hover { color: var(--text-strong); }
.hub-tabs button[aria-current="page"] { color: var(--text-strong); box-shadow: inset 0 -2px var(--brand); }
.hub [data-account-panel], .hub [data-state-block] { display: grid; gap: 16px; }
.hub-status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; margin: 0 4px; font-size: 13px; color: var(--text-muted); }
.hub-status .status-label { font-size: 12px; }
.hub-status b { color: var(--text-default); font-weight: 700; }
.card { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--border-default); border-radius: var(--r); background: var(--surface-default); }
.card > h2 { font-size: 20px; }
.card > .eyebrow { margin: 0; }
.card__sub { margin: -6px 0 0; color: var(--text-default); font-size: 14px; line-height: 1.65; }
.kv { display: grid; margin: 0; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--border-subtle); font-size: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; color: var(--text-strong); font-weight: 700; text-align: right; }
/* checkout price hero: Claude Max anchored, our price beside it, bonus below */
.card .price-compare { grid-template-columns: 1fr; border-top: 1px solid var(--border-default); border-bottom: 0; }
.card .price-compare > div { display: grid; justify-items: center; gap: 8px; padding: 20px 0 4px; text-align: center; }
.card .price-compare dt { color: var(--text-muted); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.card .pc-main { margin: 0; font-size: 15px; }
.card .pc-main s { margin-right: 10px; color: var(--text-muted); font-weight: 600; }
.card .pc-main b { font-size: 24px; font-weight: 700; color: var(--text-strong); }
.card .pc-bonus { margin: 0; color: var(--success); font-size: 13px; font-weight: 700; }
.card .button { justify-self: start; }
.card .button--full { justify-self: stretch; }
.card .provisioning-rail { border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.card .provisioning-rail li { min-height: 62px; padding: 12px 12px; font-size: 12px; }
.card .access-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; padding: 16px 0; }
.card .access-steps li > * { grid-column: 2; justify-self: start; }
.card .access-steps li > .copy-row { justify-self: stretch; }
.card .access-steps li::before { position: static; grid-column: 1; grid-row: 1; margin: 0; }
.card .access-steps li:last-child { border-bottom: 0; padding-bottom: 6px; }
.card .danger-row, .card .refund-entry { padding: 16px 0; }
.card .danger-row { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.card .refund-entry { border-bottom: 0; }
.card .help-list { margin-bottom: 0; border-top: 0; }
.card .help-list details:first-child { border-top: 0; }
.card .support-form { border-top: 1px solid var(--border-subtle); }
/* info callout + vertical 3-step flow (mobile-first, reads top to bottom) */
.info-note { margin: 0; padding: 12px 16px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--brand-tint); color: var(--text-default); font-size: 14px; line-height: 1.65; }
.info-note b { color: var(--text-strong); }
.flow3 { display: grid; margin: 0; padding: 0 4px; list-style: none; }
.flow3 li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 12px 0; }
.flow3 li + li::before { content: ""; position: absolute; top: -11px; left: 19px; height: 22px; border-left: 2px dashed var(--focus-ring); }
.flow3__ico { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: 50%; background: var(--surface-default); color: var(--text-muted); }
.flow3__ico svg { display: block; width: 20px; height: 20px; }
/* Only the outcome step carries brand: the icons inherit through currentColor. */
.flow3 li:last-child .flow3__ico { border-color: var(--brand); background: var(--brand); color: var(--surface-default); }
.flow3 strong { font-size: 15px; }

.renewal { width: min(860px, 100%); margin: 0 auto; }
.renewal__head { max-width: 760px; }
.renewal__head h1 { font-size: clamp(36px, 6vw, 54px); }
.renewal-state { position: relative; display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 20px; margin-top: 30px; padding: 24px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-muted); }
.renewal-state__bar { width: 5px; min-height: 76px; border-radius: 3px; background: var(--border-strong); }
.renewal-state .eyebrow { margin-bottom: 6px; color: var(--text-muted); }
.renewal-state__description { margin: 8px 0 0; color: var(--text-default); line-height: 1.65; }
.renewal-state[data-renewal-state="offered"], .renewal-state[data-renewal-state="checkout_created"], .renewal-state[data-renewal-state="checkout_creating"] { background: var(--brand-tint); }
.renewal-state[data-renewal-state="offered"] .renewal-state__bar, .renewal-state[data-renewal-state="checkout_created"] .renewal-state__bar, .renewal-state[data-renewal-state="checkout_creating"] .renewal-state__bar { background: var(--brand); }
.renewal-state[data-renewal-state="converted"], .renewal-state[data-renewal-state="transferring"] { background: var(--success-bg); }
.renewal-state[data-renewal-state="converted"] .renewal-state__bar, .renewal-state[data-renewal-state="transferring"] .renewal-state__bar { background: var(--success); }
.renewal-state[data-renewal-state="expired"] { background: var(--warning-bg); }
.renewal-state[data-renewal-state="expired"] .renewal-state__bar { background: var(--warning); }
.renewal-state[data-renewal-state="failed"], .renewal-state[data-renewal-state="manual_required"] { background: var(--danger-bg); }
.renewal-state[data-renewal-state="failed"] .renewal-state__bar, .renewal-state[data-renewal-state="manual_required"] .renewal-state__bar { background: var(--danger); }
.renewal__content { display: grid; gap: 24px; margin-top: 22px; }
.renewal-details { display: grid; gap: 24px; }
.renewal-identity { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.renewal-identity > div { min-width: 0; padding: 20px 24px; }
.renewal-identity > div + div { border-left: 1px solid var(--border-default); }
.renewal-identity dt, .renewal-facts dt { color: var(--text-muted); font-size: 12px; }
.renewal-identity dd, .renewal-facts dd { margin: 8px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.renewal-section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.renewal-trial { flex: 0 0 auto; margin: 0; color: var(--success); font-size: 13px; font-weight: 700; }
.renewal-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.renewal-facts > div { min-width: 0; min-height: 92px; padding: 20px 20px; border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); }
.renewal-facts > div:nth-child(2n) { border-right: 0; }
.renewal-facts > div:nth-last-child(-n+2) { border-bottom: 0; }
.renewal-facts dd { font-size: 16px; line-height: 1.5; }
.renewal-fact--free dd { color: var(--success); font-size: 24px; font-weight: 700; }
.renewal-schedule > .help { margin-top: 12px; }
.renewal-checklist { display: grid; gap: 0; margin: 0; padding: 4px 24px; list-style: none; }
.renewal-checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
.renewal-checklist li + li { border-top: 1px solid var(--border-default); }
.renewal-check { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--success-bg); color: var(--success); font-weight: 700; }
.renewal-checklist strong { font-size: 14px; }
.renewal-checklist p { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.renewal-action { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, .6fr); align-items: center; gap: 24px; padding: 24px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--brand-tint); }
.renewal-action p:not(.eyebrow):not(.status-text) { margin: 8px 0 0; color: var(--text-default); font-size: 13px; line-height: 1.6; }
.renewal-action__controls { display: grid; gap: 8px; }
.renewal-action__controls .status-text:empty { display: none; }
.renewal-next { display: grid; justify-items: start; gap: 12px; }
.renewal-next .button { min-width: 210px; }

.legal { width: min(820px, 100%); }
.legal h1 { font-size: 40px; }
.legal section { padding: 24px 0; border-bottom: 1px solid var(--border-default); }
.legal p, .legal li { color: var(--text-default); line-height: 1.75; }
.legal dl { display: grid; grid-template-columns: 160px 1fr; gap: 12px 20px; }
.legal dt { color: var(--text-muted); }
.legal dd { margin: 0; }

/* Dark footer — shared across interior/legal pages. Landing uses .lp-footer on top of this. */
.footer { border-top: 1px solid var(--border-default); background: var(--invert-surface); color: var(--invert-text); }
.footer__inner { padding: 32px 0 32px; display: grid; gap: 20px; }
.footer .brand { color: var(--surface-default); }
.footer__prov { margin: 0; color: var(--invert-muted); font-size: 13px; line-height: 1.7; }
.footer__prov b { color: var(--invert-text); font-weight: 700; }
.footer__prov a { color: var(--invert-link); text-decoration: none; }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.footer__links a { color: var(--invert-muted); text-decoration: none; white-space: nowrap; }
.footer__links a:hover { color: var(--surface-default); }
.footer--compact .footer__inner { grid-template-columns: 1fr auto; align-items: center; padding: 20px 0; }

@media (max-width: 820px) {
  .renewal-action { grid-template-columns: 1fr; }
  .nav a:not(.button):not([hreflang]) { display: none; }
}

@media (max-width: 520px) {
  .topbar__inner, .main, .footer__inner { width: min(100% - 24px, 1120px); }
  .main { padding-top: 28px; }
  .nav-email { display: none; }
  .hub { padding-top: 14px; }
  .card { padding: 20px 16px; }
  .hub-tabs button { flex: 1; padding: 0 8px; }
  h1 { font-size: 40px; }
  .facts { grid-template-columns: 1fr; }
  .fact, .fact:nth-child(2n), .fact:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--border-default); }
  .fact:last-child { border-bottom: 0; }
  .footer--compact .footer__inner { grid-template-columns: 1fr; }
  .fact { border-right: 0; border-bottom: 1px solid var(--border-default); }
  .fact:nth-last-child(2) { border-bottom: 1px solid var(--border-default); }
  .legal dl { grid-template-columns: 1fr; gap: 4px; }
  .renewal__head h1 { font-size: 40px; }
  .renewal-state { gap: 12px; padding: 16px 16px; }
  .renewal-identity, .renewal-facts { grid-template-columns: 1fr; }
  .renewal-identity > div + div { border-top: 1px solid var(--border-default); border-left: 0; }
  .renewal-facts > div { border-right: 0; }
  .renewal-facts > div:nth-last-child(2) { border-bottom: 1px solid var(--border-default); }
  .renewal-section-head { display: grid; gap: 8px; }
  .renewal-trial { justify-self: start; }
  .renewal-action { padding: 20px 16px; }
  .renewal-action .button, .renewal-next .button { width: 100%; min-width: 0; }
  .auth-page__panel { padding: 24px 20px; }
  .price-compare { grid-template-columns: 1fr; }
  .price-compare > div + div { padding-left: 0; border-left: 0; }
  .price-compare > div + div { border-top: 1px solid var(--border-default); }
  .provisioning-rail li { min-height: 64px; padding: 12px 8px; font-size: 12px; }
  .processing-message { display: grid; gap: 4px; }
  .processing-message small { white-space: normal; }
  .danger-row, .refund-entry { display: grid; gap: 16px; }
}