/* =====================================================================
   Ferrith Onboarding — storefront, signup wizard & account portal.
   Uses the Ferrith CHAT design language (Thermal Orange accent,
   anthracite, Space Grotesk / Inter / JetBrains Mono, chamfer, matrix)
   so the entry point feels continuous with the app. Light only.
   Tokens come from brand-system.css; this file adds components.
   ===================================================================== */

:root {
  --ob-accent: #FF8E46;
  --ob-accent-strong: #f0791f;
  --ob-accent-ink: #2C3138;      /* text on the orange fill */
  --ob-accent-weak: #fff0e3;
  --ob-accent-line: #ffd1b1;
  --ob-ink: #1a1d22;
  --ob-ink-2: #5a606a;
  --ob-ink-3: #8a8f97;
  --ob-bg: #ffffff;
  --ob-bg-muted: #f7f8f9;
  --ob-bg-sunken: #f1f3f5;
  --ob-border: #e5e6e8;
  --ob-border-strong: #d4d6d9;
  --ob-ok: #2f7a4f; --ob-ok-weak: #e9f4ee; --ob-ok-line: #c2e0cf;
  --ob-danger: #c8453a;
  --ob-r: 12px;
  --ob-shadow-sm: 0 1px 2px rgba(20,24,30,.05);
  --ob-shadow-md: 0 4px 20px rgba(20,24,30,.06);
  --ob-shadow-lg: 0 18px 60px rgba(20,24,30,.14);
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

.ob { width: 100%; height: 100%; overflow-y: auto; background: var(--ob-bg); color: var(--ob-ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
.ob *, .ob *::before, .ob *::after { box-sizing: border-box; }
.ob *::-webkit-scrollbar { width: 10px; height: 10px; }
.ob *::-webkit-scrollbar-thumb { background: rgba(0,0,0,.16); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }

.ob-chamfer { clip-path: polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px); }
.ob-chamfer-sm { clip-path: polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); }
.ob-matrix { background-image: linear-gradient(rgba(44,49,56,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(44,49,56,.045) 1px,transparent 1px); background-size: 26px 26px; }

.ob-container { max-width: 1120px; margin: 0 auto; padding: 0 40px; }
.ob-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .11em; color: var(--ob-accent); }
.ob-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.ob-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid transparent; padding: 10px 20px; border-radius: 8px; white-space: nowrap; transition: background .13s, border-color .13s, color .13s; }
.ob-btn svg { width: 16px; height: 16px; }
.ob-btn-primary { background: var(--ob-accent); color: var(--ob-accent-ink); border-radius: 0; }
.ob-btn-primary:hover { background: var(--ob-accent-strong); }
.ob-btn-ghost { background: var(--ob-bg); color: var(--ob-ink); border-color: var(--ob-border-strong); }
.ob-btn-ghost:hover { background: var(--ob-bg-muted); }
.ob-btn-dark { background: var(--anthracite,#2C3138); color: #fff; border-radius: 0; }
.ob-btn-dark:hover { background: #1f242a; }
.ob-btn-lg { padding: 13px 26px; font-size: 15px; }
.ob-btn-sm { padding: 7px 13px; font-size: 13px; }
.ob-btn-block { width: 100%; }
.ob-link { color: var(--ob-accent); text-decoration: none; font-weight: 600; }
.ob-link:hover { text-decoration: underline; }

/* ── Marketing nav ─────────────────────────────────────────────────── */
.ob-nav { position: sticky; top: 0; z-index: 10; height: 66px; display: flex; align-items: center; gap: 28px; padding: 0 40px; background: rgba(255,255,255,.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ob-border); }
.ob-nav .brand img { height: 30px; display: block; }
.ob-nav .links { display: flex; gap: 26px; margin-left: 8px; }
.ob-nav .links a { color: var(--ob-ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.ob-nav .links a:hover { color: var(--ob-ink); }
.ob-nav .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.ob-hero { position: relative; overflow: hidden; }
.ob-h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; color: var(--ob-ink); margin: 0; }
.ob-lede { font-size: 17px; line-height: 1.6; color: var(--ob-ink-2); margin: 0; }

/* value props */
.ob-values { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.ob-value .ic { width: 34px; height: 34px; color: var(--ob-accent); display: flex; align-items: center; }
.ob-value h4 { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin: 12px 0 5px; }
.ob-value p { font-size: 13px; color: var(--ob-ink-2); line-height: 1.55; margin: 0; }

/* ── Cards / modules ───────────────────────────────────────────────── */
.ob-card { background: var(--ob-bg); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-sm); }
.ob-price { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; color: var(--ob-ink); }
.ob-price .amt { font-size: 40px; }
.ob-price .per { font-size: 14px; color: var(--ob-ink-3); font-family: var(--font-body); font-weight: 500; }

/* ── Tier cards ────────────────────────────────────────────────────── */
.ob-tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 780px) { .ob-tier-grid { grid-template-columns: 1fr; } }
.ob-tier { position: relative; display: flex; flex-direction: column; background: var(--ob-bg); border: 1px solid var(--ob-border); border-radius: var(--ob-r); padding: 24px 22px; box-shadow: var(--ob-shadow-sm); transition: border-color .13s, box-shadow .13s; }
.ob-tier.popular { border-color: var(--ob-accent); box-shadow: 0 0 0 1px var(--ob-accent), var(--ob-shadow-md); }
.ob-tier.selectable { cursor: pointer; }
.ob-tier.selectable:hover { border-color: var(--ob-accent-line); }
.ob-tier.selected { border-color: var(--ob-accent); background: var(--ob-accent-weak); box-shadow: 0 0 0 2px var(--ob-accent), var(--ob-shadow-md); }
.ob-pop-badge { position: absolute; top: -11px; left: 22px; background: var(--ob-accent); color: var(--ob-accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 11px; border-radius: 999px; }
.ob-sel-badge { position: absolute; top: -11px; right: 22px; display: inline-flex; align-items: center; gap: 4px; background: var(--ob-accent); color: var(--ob-accent-ink); font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; }
.ob-sel-badge svg { width: 11px; height: 11px; }
.ob-tier-feat { display: flex; gap: 9px; font-size: 13px; align-items: flex-start; padding: 5px 0; color: var(--ob-ink-2); }
.ob-tier-feat svg { width: 15px; height: 15px; color: var(--ob-ok); flex-shrink: 0; margin-top: 2px; }
.ob-tier.compact { padding: 15px; box-shadow: none; }
.ob-tier.compact.selected { box-shadow: 0 0 0 2px var(--ob-accent); }

.ob-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 10.5px; font-weight: 600; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; background: var(--ob-bg-sunken); color: var(--ob-ink-2); border: 1px solid var(--ob-border); }
.ob-badge[data-tone="orange"] { background: var(--ob-accent-weak); color: #a85320; border-color: var(--ob-accent-line); }
.ob-badge[data-tone="green"] { background: var(--ob-ok-weak); color: var(--ob-ok); border-color: var(--ob-ok-line); }
.ob-badge[data-tone="dark"] { background: var(--anthracite,#2C3138); color: #fff; border-color: transparent; }

/* ── Toggle + stepper (plan builder) ───────────────────────────────── */
.ob-toggle { position: relative; width: 42px; height: 24px; border: 0; border-radius: 999px; background: var(--ob-border-strong); cursor: pointer; padding: 0; flex-shrink: 0; transition: background .15s; }
.ob-toggle[data-on="1"] { background: var(--ob-accent); }
.ob-toggle i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.ob-toggle[data-on="1"] i { transform: translateX(18px); }

.ob-step { display: inline-flex; align-items: center; border: 1px solid var(--ob-border-strong); border-radius: 8px; overflow: hidden; background: var(--ob-bg); }
.ob-step button { width: 34px; height: 34px; border: 0; background: var(--ob-bg); color: var(--ob-ink); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.ob-step button:hover { background: var(--ob-bg-muted); }
.ob-step button:disabled { color: var(--ob-border-strong); cursor: not-allowed; }
.ob-step .val { min-width: 52px; text-align: center; font-family: var(--font-mono); font-size: 14px; font-weight: 500; border-left: 1px solid var(--ob-border); border-right: 1px solid var(--ob-border); height: 34px; display: flex; align-items: center; justify-content: center; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.ob-field { margin-bottom: 15px; }
.ob-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ob-ink-2); margin-bottom: 6px; }
.ob-input { width: 100%; height: 42px; padding: 0 13px; font-family: var(--font-body); font-size: 14px; color: var(--ob-ink); background: var(--ob-bg); border: 1px solid var(--ob-border-strong); border-radius: 8px; outline: none; }
.ob-input:focus { border-color: var(--ob-accent); box-shadow: 0 0 0 3px var(--ob-accent-weak); }
.ob-input::placeholder { color: var(--ob-ink-3); }
.ob-input-group { display: flex; align-items: stretch; border: 1px solid var(--ob-border-strong); border-radius: 8px; overflow: hidden; background: var(--ob-bg); }
.ob-input-group input { flex: 1; border: 0; height: 42px; padding: 0 13px; font-size: 14px; font-family: var(--font-body); outline: none; }
.ob-input-group .suffix { display: flex; align-items: center; padding: 0 13px; font-family: var(--font-mono); font-size: 13px; color: var(--ob-ink-3); background: var(--ob-bg-muted); border-left: 1px solid var(--ob-border); }

/* segmented (billing period) */
.ob-seg { display: inline-flex; gap: 3px; background: var(--ob-bg-sunken); border-radius: 9px; padding: 3px; }
.ob-seg button { border: 0; background: transparent; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--ob-ink-3); padding: 6px 15px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ob-seg button.on { background: var(--ob-bg); color: var(--ob-ink); box-shadow: var(--ob-shadow-sm); }

/* ── Wizard stepper ────────────────────────────────────────────────── */
.ob-wizhead { display: flex; align-items: center; justify-content: center; gap: 0; }
.ob-wizstep { display: flex; align-items: center; gap: 10px; }
.ob-wizstep .num { width: 28px; height: 28px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 13px; flex-shrink: 0; border: 1.5px solid var(--ob-border-strong); color: var(--ob-ink-3); background: var(--ob-bg); }
.ob-wizstep .lbl { font-size: 13px; font-weight: 600; color: var(--ob-ink-3); white-space: nowrap; }
.ob-wizstep.done .num { background: var(--ob-ok); border-color: var(--ob-ok); color: #fff; }
.ob-wizstep.done .lbl { color: var(--ob-ink-2); }
.ob-wizstep.active .num { background: var(--ob-accent); border-color: var(--ob-accent); color: var(--ob-accent-ink); }
.ob-wizstep.active .lbl { color: var(--ob-ink); }
.ob-wizline { width: 46px; height: 2px; background: var(--ob-border); margin: 0 12px; }
.ob-wizline.done { background: var(--ob-ok); }

/* ── Order summary ─────────────────────────────────────────────────── */
.ob-summary { background: var(--ob-bg); border: 1px solid var(--ob-border); border-radius: var(--ob-r); box-shadow: var(--ob-shadow-md); overflow: hidden; }
.ob-summary .hd { padding: 16px 18px; border-bottom: 1px solid var(--ob-border); font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ob-summary .ln { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 18px; font-size: 13px; }
.ob-summary .ln .lbl { color: var(--ob-ink-2); }
.ob-summary .ln .amt { font-family: var(--font-mono); color: var(--ob-ink); }
.ob-summary .total { padding: 15px 18px; border-top: 1px solid var(--ob-border); background: var(--ob-bg-muted); display: flex; justify-content: space-between; align-items: baseline; }
.ob-summary .total .amt { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--ob-ink); }

/* ── Footer ────────────────────────────────────────────────────────── */
.ob-footer { background: var(--anthracite,#2C3138); color: #c7cbd1; }
.ob-footer a { color: #c7cbd1; text-decoration: none; font-size: 13px; }
.ob-footer a:hover { color: #fff; }

/* ── Portal shell ──────────────────────────────────────────────────── */
.ob-portal { display: flex; flex-direction: column; height: 100%; }
.ob-ptop { height: 60px; flex-shrink: 0; display: flex; align-items: center; gap: 26px; padding: 0 28px; background: var(--ob-bg); border-bottom: 1px solid var(--ob-border); }
.ob-ptop img { height: 28px; }
.ob-ptop .tabs { display: flex; gap: 4px; height: 100%; align-items: stretch; }
.ob-ptop .tabs a { display: flex; align-items: center; padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--ob-ink-2); text-decoration: none; border-bottom: 2px solid transparent; }
.ob-ptop .tabs a.active { color: var(--ob-ink); border-bottom-color: var(--ob-accent); }
.ob-ptop .tabs a:hover { color: var(--ob-ink); }
.ob-pbody { flex: 1; overflow-y: auto; background: var(--ob-bg-muted); }
.ob-ptop-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.ob-portal-tenant { gap: 6px; }
.ob-portal-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ob-ok); }
.ob-portal-avatar { width: 32px; height: 32px; background: var(--anthracite, #2C3138); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; }
/* Compact primary CTA that fits the 60px portal top bar (the always-visible "Open Chat" hand-off). */
.ob-ptop-cta { padding: 7px 15px; font-size: 13px; white-space: nowrap; }
.ob-portal-content { max-width: 1000px; margin: 0 auto; padding: 30px 28px; }
.ob-portal-loading { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; }
.ob-portal-placeholder { padding: 24px; margin-top: 12px; }
.ob-portal-placeholder p { margin: 0; color: var(--ob-ink-2); }

/* ── Account & security panel (every role) ─────────────────────────── */
.ob-account-section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--ob-border); }
.ob-account-sec { padding: 22px; margin-top: 12px; }
.ob-account-identity { display: flex; flex-direction: column; gap: 3px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ob-border); }
.ob-account-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ob-ink-3); }
.ob-account-name { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--ob-ink); margin-top: 4px; }
.ob-account-email { font-size: 13px; color: var(--ob-ink-2); }
.ob-account-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ob-account-hint { margin: 16px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ob-ink-3); max-width: 52ch; }
.ob-account-sent { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ob-ok); }
.ob-account-sent svg { width: 16px; height: 16px; flex-shrink: 0; }
.ob-account-error { margin: 12px 0 0; font-size: 12.5px; color: var(--ob-danger); }
.ob-btn-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ── Account portal: overview stats, subscription, billing (Phase 7) ─── */
.ob-overview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.ob-overview-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; margin: 6px 0 0; color: var(--ob-ink); }

.ob-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.ob-stat { padding: 18px; }
.ob-stat-label { font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--ob-ink-3); }
.ob-stat-value { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; color: var(--ob-ink); }
.ob-stat-unit { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--ob-ink-3); letter-spacing: 0; }
.ob-stat-foot { font-size: 12px; color: var(--ob-ink-2); margin-top: 8px; }
@media (max-width: 720px) { .ob-stat-grid { grid-template-columns: 1fr; } }

.ob-status-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.ob-status-ok { background: var(--ob-ok-weak); color: var(--ob-ok); }
.ob-status-warn { background: var(--ob-accent-weak); color: var(--ob-accent-strong); }
.ob-status-danger { background: #fdecea; color: var(--ob-danger); }
.ob-status-muted { background: var(--ob-bg-sunken); color: var(--ob-ink-2); }

.ob-overview-includes { padding: 20px; }
.ob-overview-includes-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; margin-bottom: 12px; }

.ob-sub-card { padding: 22px; margin-top: 12px; }
.ob-sub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--ob-border); flex-wrap: wrap; }
.ob-sub-tier { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -.01em; }
.ob-sub-tagline { font-size: 13px; color: var(--ob-ink-3); margin-top: 2px; }
.ob-sub-price { text-align: right; white-space: nowrap; }
.ob-sub-amount { font-family: var(--font-display); font-weight: 600; font-size: 22px; }
.ob-sub-per { font-size: 13px; color: var(--ob-ink-3); margin-left: 4px; }
.ob-sub-features { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.ob-sub-features li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--ob-ink); }
.ob-sub-features li::before { content: ""; position: absolute; left: 3px; top: 3px; width: 5px; height: 9px; border-right: 2px solid var(--ob-accent); border-bottom: 2px solid var(--ob-accent); transform: rotate(45deg); }

.ob-portal-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; margin-top: 16px; flex-wrap: wrap; }
.ob-portal-cta-text { flex: 1; min-width: 220px; }
.ob-portal-cta-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ob-portal-cta-desc { font-size: 13px; line-height: 1.5; color: var(--ob-ink-2); margin: 5px 0 0; max-width: 52ch; }

.ob-bill-summary { padding: 6px 22px; margin-top: 12px; }
.ob-bill-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ob-border); }
.ob-bill-row:last-child { border-bottom: none; }
.ob-bill-key { font-size: 13px; color: var(--ob-ink-3); }
.ob-bill-val { font-size: 13.5px; font-weight: 500; color: var(--ob-ink); }

/* ── Subscription configurator (Phase 7b) ─────────────────────────────── */
.ob-sub-config-head { display: flex; justify-content: center; margin-bottom: 18px; }
.ob-account-saved { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--ob-ok); }

.ob-exp-card { padding: 4px 22px 16px; margin-top: 16px; }
.ob-exp-card-title { padding: 16px 0 2px; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ob-exp-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--ob-border); }
.ob-exp-row.locked { opacity: .55; }
.ob-exp-info { flex: 1; min-width: 0; }
.ob-exp-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ob-exp-price { font-family: var(--font-mono); font-size: 11.5px; font-weight: 400; color: var(--ob-ink-3); }
.ob-exp-detail { font-size: 12.5px; color: var(--ob-ink-2); margin-top: 3px; line-height: 1.5; }
.ob-exp-na { color: var(--ob-ink-3); font-size: 13px; }

.ob-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ob-border-strong); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.ob-stepper-btn { width: 32px; height: 32px; border: none; background: var(--ob-bg); color: var(--ob-ink); font-size: 17px; line-height: 1; cursor: pointer; transition: background .12s; }
.ob-stepper-btn:hover:not(:disabled) { background: var(--ob-bg-muted); }
.ob-stepper-btn:disabled { color: var(--ob-ink-3); cursor: not-allowed; }
.ob-stepper-val { min-width: 40px; text-align: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; border-left: 1px solid var(--ob-border); border-right: 1px solid var(--ob-border); padding: 6px 0; }

.ob-switch { width: 42px; height: 24px; border-radius: 999px; border: none; background: var(--ob-border-strong); position: relative; cursor: pointer; flex-shrink: 0; transition: background .13s; padding: 0; }
.ob-switch.on { background: var(--ob-accent); }
.ob-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .13s; }
.ob-switch.on .ob-switch-knob { left: 21px; }

.ob-order-summary { padding: 8px 22px 18px; margin-top: 16px; }
.ob-order-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ob-border); }
.ob-order-label { font-size: 13.5px; font-weight: 500; }
.ob-order-detail { color: var(--ob-ink-3); font-weight: 400; margin-left: 8px; font-size: 12px; }
.ob-order-amount { font-size: 13px; color: var(--ob-ink-2); }
.ob-order-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 13px; font-weight: 600; font-size: 15px; }
.ob-order-exvat { color: var(--ob-ink-3); font-weight: 400; font-size: 12px; margin-left: 6px; }
.ob-order-annual { text-align: right; font-size: 12px; color: var(--ob-ink-2); margin-top: 6px; }
.ob-order-note { font-size: 12px; color: var(--ob-ink-3); margin: 10px 0 0; }

.ob-sub-actions { display: flex; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.ob-sub-cancel { margin-left: auto; color: var(--ob-ink-2); }
.ob-cancel-confirm { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ob-danger); }
.ob-cancel-banner { border-color: var(--ob-accent-line); background: var(--ob-accent-weak); }

.ob-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--ob-bg-sunken); color: var(--ob-ink-2); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.ob-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ob-table thead th { text-align: left; padding: 11px 16px; background: var(--ob-bg-muted); font-family: var(--font-display); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ob-ink-3); border-bottom: 1px solid var(--ob-border); }
.ob-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--ob-border); }
.ob-table tbody tr:last-child td { border-bottom: 0; }

/* Stripe-style card row */
.ob-cardrow { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 13px; border: 1px solid var(--ob-border-strong); border-radius: 8px; background: var(--ob-bg); }
.ob-cardrow .num { flex: 1; font-family: var(--font-mono); font-size: 14px; color: var(--ob-ink); letter-spacing: .04em; }
.ob-cardrow .brand { width: 30px; height: 20px; border-radius: 3px; background: linear-gradient(135deg,#635bff,#4b45c6); }