/*
    The non-marketing pages — _AppLayout.cshtml: sign-in, sign-up, two-factor, security
    settings, account, platform. Loaded after bootstrap.min.css and site.css.

    Those pages are written in plain Bootstrap 5 markup and nothing else. This file is what
    makes that markup look like the front page: the same type (DM Sans for text, DM Serif
    Display for headings), the navy/blue/teal palette, the site's radii and focus rings, and
    buttons shaped like the site's calls to action. A page author never needs a stylesheet
    of their own, which matters because the CSP allows no style="" attribute either.

    Most of it is done through Bootstrap's own custom properties rather than by overriding
    rules, so component states Bootstrap computes (hover, active, disabled, focus) follow the
    theme instead of fighting it. Colors come from site.css; the few literal values below are
    the tints the marketing pages already use for the same jobs.
*/

/* ══ Bootstrap's root variables ══════════════════════════════════════════════ */
:root {
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--navy);
  --bs-body-color-rgb: 15, 26, 43;
  --bs-body-bg: var(--white);
  --bs-emphasis-color: var(--navy);
  --bs-secondary-color: var(--gray);
  --bs-secondary-bg: var(--off-white);
  --bs-tertiary-bg: var(--off-white);
  --bs-heading-color: var(--navy);

  --bs-primary: #0b63e5;
  --bs-primary-rgb: 11, 99, 229;
  /* Bootstrap's success green, swapped for a teal dark enough to carry white text. The brand
     teal (#00c8b4) is an accent, not a background for words. */
  --bs-success: #0e8a7d;
  --bs-success-rgb: 14, 138, 125;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-secondary-rgb: 100, 116, 139;

  --bs-link-color: var(--blue);
  --bs-link-color-rgb: 11, 99, 229;
  --bs-link-hover-color: var(--blue-hover);
  --bs-link-hover-color-rgb: 10, 86, 199;

  --bs-border-color: var(--light-border);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 14px;

  --bs-focus-ring-color: rgba(11, 99, 229, .25);
  --bs-form-invalid-color: var(--bs-danger);
  --bs-form-invalid-border-color: var(--bs-danger);
  --bs-form-valid-color: var(--bs-success);
  --bs-form-valid-border-color: var(--bs-success);
}

/* ══ The page frame ══════════════════════════════════════════════════════════ */
body.app {
  min-height: 100vh;
  display: flex; flex-direction: column;
  line-height: 1.6;
  background: var(--white);
}

/* The homepage hero's soft blue wash, behind the top of every page here, so stepping from
   "Get started" into the sign-up form does not feel like leaving the site. */
body.app::before {
  content: '';
  position: absolute; top: 64px; left: 0; right: 0; height: 420px;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, #e8f0fe 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.app-main {
  flex: 1 0 auto;
  width: 100%; max-width: 1100px;
  margin: 0 auto;
  padding: 48px 5vw 72px;
}

/* ViewData["Narrow"] = true — the auth forms. One centered column, the width of a form that
   asks for an email address and a password and nothing else. */
.app-main--narrow {
  max-width: 480px;
  padding: 64px 20px 72px;
}

/* The shared footer (site.css) at the bottom of the column, however short the page. */
body.app > .site-footer { flex-shrink: 0; }

/* ══ Type ════════════════════════════════════════════════════════════════════
   The scale follows the element, not Bootstrap's .h1-.h6 size utilities. Pages here write
   <h1 class="h3"> and <h2 class="h5"> (Bootstrap habit), and when those utilities sized the
   heading the page title came out smaller than the card titles under it. Element selectors
   inside .app-main outrank the bare utility classes, so h1 is always the biggest thing on the
   page; the utilities still size a non-heading element (<p class="h5">) if a page wants that. */
.app-main h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.app-main--narrow h1 { font-size: 2rem; }

.app-main h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 36px 0 12px;
}
.app-main h2:first-child { margin-top: 0; }
/* A heading that titles a card is a step down from a section heading on the page. */
.app-main .card h2 { font-size: 1.3rem; margin-top: 0; }

.app-main h3,
.app-main h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 24px 0 8px;
}
.app-main h5, .app-main h6 { font-weight: 700; }

.app-main p { margin-bottom: 1rem; }
.app-main .lead { font-size: 1.1rem; font-weight: 400; color: var(--gray); line-height: 1.6; }
/* Prose lists only: a list with a class (list-group, list-unstyled, nav) styles itself. */
.app-main ul:not([class]), .app-main ol:not([class]) { padding-left: 1.4rem; margin-bottom: 1rem; }

a { text-underline-offset: 2px; }

/* Long unbroken values - email addresses, slugs, keys - wrap inside their column instead of
   pushing the layout wider than a phone. */
.app-main td, .app-main .card-body { overflow-wrap: anywhere; }
/* break-word, not anywhere, on summary values: anywhere also shrinks the column's minimum
   width, so a grid squeezes an email address into a letter-wide column and breaks it mid-word. */
.app-main dd { overflow-wrap: break-word; }
/* The same trap in a table: anywhere let the security page's passkey and session tables shrink
   every column to one letter on a phone. Inside .table-responsive a table keeps readable columns
   and scrolls sideways instead; break-word still wraps a long address inside its cell. */
.app-main .table td { overflow-wrap: break-word; }
.app-main .table > thead th { white-space: nowrap; }
.app-main .table input.form-control { min-width: 8rem; }
/* The positioning context for the visually-hidden "Actions" header: absolutely positioned, it
   otherwise escapes the scroll container and widens the whole page on a phone. */
.table-responsive { position: relative; }

/* The bot trap (Pages/Shared/_BotTrap.cshtml): off-screen rather than display:none, which some bots know to skip. */
.form-extra { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.text-muted { color: var(--gray) !important; }
small, .small { font-size: .85em; }

code {
  font-family: var(--font-mono);
  font-size: .88em;
  color: var(--navy);
  background: var(--off-white);
  border: 1px solid var(--light-border);
  border-radius: 4px;
  padding: 1px 5px;
}

hr { border-color: var(--light-border); opacity: 1; margin: 28px 0; }

/* ══ Buttons — shaped like the site's calls to action ════════════════════════ */
.btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: .95rem;
  --bs-btn-padding-x: 22px;
  --bs-btn-padding-y: 11px;
  --bs-btn-border-radius: 8px;
  --bs-btn-border-width: 1.5px;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(13, 110, 253, .25);
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn-sm {
  --bs-btn-padding-x: 14px;
  --bs-btn-padding-y: 6px;
  --bs-btn-font-size: .85rem;
  --bs-btn-border-radius: 6px;
}

/* The homepage's "Get Started": blue, lifted, a soft blue shadow. */
.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-hover);
  --bs-btn-hover-border-color: var(--blue-hover);
  --bs-btn-active-bg: #0954c4;
  --bs-btn-active-border-color: #0954c4;
  --bs-btn-disabled-bg: var(--blue);
  --bs-btn-disabled-border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(13, 110, 253, .22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(13, 110, 253, .28); }
.btn-primary:active { transform: none; }

/* The homepage's "See How It Works": no fill, a hairline border that darkens on hover. */
.btn-outline-secondary {
  --bs-btn-color: var(--navy);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--light-border);
  --bs-btn-hover-color: var(--navy);
  --bs-btn-hover-bg: var(--off-white);
  --bs-btn-hover-border-color: var(--gray-light);
  --bs-btn-active-color: var(--navy);
  --bs-btn-active-bg: #eef1f5;
  --bs-btn-active-border-color: var(--gray-light);
  --bs-btn-disabled-color: var(--gray);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--light-border);
}

.btn-outline-primary {
  --bs-btn-color: var(--blue);
  --bs-btn-border-color: rgba(13, 110, 253, .45);
  --bs-btn-hover-bg: var(--blue);
  --bs-btn-hover-border-color: var(--blue);
}

.btn-outline-danger {
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
  --bs-btn-active-bg: #991b1b;
}
.btn-outline-danger { --bs-btn-color: var(--bs-danger); }

/* Text actions — "Forgot your password?", "Use a recovery code instead". */
.btn-link {
  --bs-btn-color: var(--blue);
  --bs-btn-hover-color: var(--blue-hover);
  --bs-btn-active-color: var(--blue-hover);
  --bs-btn-padding-x: 0;
  --bs-btn-font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  box-shadow: none;
}

/* In a flex row (a link on one side, a button on the other) a button keeps its own height
   rather than stretching to the tallest neighbor. */
.d-flex > .btn { align-self: center; }

/* A full-width button in a narrow form reads as the one thing to do. */
.app-main--narrow form .btn-primary.w-100,
.app-main--narrow .d-grid .btn { padding-top: 12px; padding-bottom: 12px; }

/* ══ Forms ═══════════════════════════════════════════════════════════════════ */
.form-label {
  font-weight: 600;
  font-size: .875rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-control {
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--navy);
  padding: 10px 14px;
  border: 1.5px solid var(--light-border);
  border-radius: 8px;
  background-color: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.form-control::placeholder { color: var(--gray-light); }
.form-control:hover:not(:focus):not(:disabled) { border-color: #cbd5e1; }
.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(13, 110, 253, .15);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--off-white); }
.form-control-sm { padding: 6px 10px; font-size: .85rem; }

.form-text { color: var(--gray); font-size: .82rem; margin-top: 6px; }

.form-check { padding-left: 1.75em; }
.form-check-input {
  width: 1.15em; height: 1.15em;
  margin-left: -1.75em; margin-top: .22em;
  border: 1.5px solid #cbd5e1;
}
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-check-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(13, 110, 253, .15); }
.form-check-label { color: var(--navy); }

.input-group-text {
  background: var(--off-white);
  border: 1.5px solid var(--light-border);
  color: var(--gray);
  font-size: .9rem;
}
.input-group > .btn { box-shadow: none; transform: none; }

/* Validation. ASP.NET's validation tag helpers emit these class names. */
.text-danger { color: var(--bs-danger) !important; }
span.text-danger,
.field-validation-error { display: block; font-size: .82rem; margin-top: 6px; }
.field-validation-valid { display: none; }
.input-validation-error { border-color: var(--bs-danger); }
.input-validation-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.validation-summary-errors ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.validation-summary-valid { display: none; }

/* ══ Cards ═══════════════════════════════════════════════════════════════════ */
.card {
  --bs-card-border-color: var(--light-border);
  --bs-card-border-radius: 14px;
  --bs-card-inner-border-radius: 13px;
  --bs-card-cap-bg: var(--off-white);
  --bs-card-spacer-x: 28px;
  --bs-card-spacer-y: 26px;
  --bs-card-cap-padding-x: 28px;
  --bs-card-cap-padding-y: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
/* A form in the narrow column sits on a lifted card, like the featured pricing tier. */
.app-main--narrow .card { box-shadow: 0 12px 40px rgba(15, 26, 43, .08); }
/* Sentence case, not the small uppercase eyebrow it used to be: a card header holds real
   content - names, slugs, statuses - and uppercase changes how a case-sensitive value reads. */
.card-header {
  font-size: .95rem; font-weight: 600;
  color: var(--navy);
}
.card-footer { background: var(--off-white); }
/* The heading margins above are for a page; inside a card the padding already spaces them. */
.card-body > :first-child { margin-top: 0; }
.card-body > :last-child { margin-bottom: 0; }

/* ══ Alerts — the site's tinted callouts ═════════════════════════════════════ */
.alert {
  --bs-alert-border-radius: 10px;
  --bs-alert-padding-x: 18px;
  --bs-alert-padding-y: 14px;
  font-size: .93rem;
  line-height: 1.6;
  border-width: 1px;
}
.alert p:last-child, .alert ul:last-child { margin-bottom: 0; }
.alert-success {
  --bs-alert-color: #0b5f56;
  --bs-alert-bg: #ecfdf9;
  --bs-alert-border-color: rgba(0, 200, 180, .35);
  --bs-alert-link-color: #084b44;
}
.alert-info {
  --bs-alert-color: #1e40af;
  --bs-alert-bg: #eff6ff;
  --bs-alert-border-color: #bfdbfe;
  --bs-alert-link-color: #1e3a8a;
}
.alert-warning {
  --bs-alert-color: #92400e;
  --bs-alert-bg: #fffbeb;
  --bs-alert-border-color: #fcd34d;
  --bs-alert-link-color: #78350f;
}
.alert-danger {
  --bs-alert-color: #991b1b;
  --bs-alert-bg: #fff1f1;
  --bs-alert-border-color: #fecaca;
  --bs-alert-link-color: #7f1d1d;
}

/* ══ Tables — as in the guides ═══════════════════════════════════════════════ */
.table {
  --bs-table-color: var(--navy);
  --bs-table-border-color: var(--light-border);
  --bs-table-striped-bg: var(--off-white);
  --bs-table-hover-bg: #f2f5f9;
  font-size: .92rem;
}
.table > :not(caption) > * > * { padding: 12px 12px; vertical-align: middle; }
.table > thead th {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray);
  border-bottom-width: 1px;
}

/* ══ Badges — the dashboard's status pills ═══════════════════════════════════ */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-font-size: .72rem;
  --bs-badge-padding-x: 10px;
  --bs-badge-padding-y: 4px;
  --bs-badge-border-radius: 9999px;
  letter-spacing: .02em;
}

/* ══ List groups ═════════════════════════════════════════════════════════════ */
.list-group {
  --bs-list-group-border-color: var(--light-border);
  --bs-list-group-border-radius: 12px;
  --bs-list-group-item-padding-x: 18px;
  --bs-list-group-item-padding-y: 14px;
  --bs-list-group-action-hover-bg: var(--off-white);
  --bs-list-group-action-active-bg: #eef1f5;
  --bs-list-group-active-bg: var(--blue);
  --bs-list-group-active-border-color: var(--blue);
}

/* ══ The authenticator QR code (Identity/Security, drawn by authenticator-qr.js) ═
   The script draws an <svg> with a viewBox and no size, which would otherwise stretch to the
   full width of the card. A fixed square that scanners like, never wider than the screen. */
.authenticator-qr { width: 208px; max-width: 100%; }
.authenticator-qr svg { display: block; width: 100%; height: auto; border: 1px solid var(--light-border); border-radius: 8px; }

/* ══ Focus — keyboard users need to see where they are ═══════════════════════ */
.app-main a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .app-main { padding: 32px 18px 56px; }
  .app-main--narrow { padding: 40px 16px 56px; }
  .card { --bs-card-spacer-x: 20px; --bs-card-spacer-y: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover { transform: none; }
}

/* ══ Staff badge ════════════════════════════════════════════════════════════
   Beside "Platform" in the nav, for a platform admin, on these pages only (_SiteNav renders it
   when _AppLayout asks). The role reads every customer; the badge is so an admin looking at an
   account page never mistakes a customer's view for their own. Amber, not brand: it is a
   warning about who you are, not decoration. #92400e on #fef3c7 is 6.9:1. */
.nav-staff-badge {
  display: inline-block;
  margin-left: -18px;           /* sit with the Platform link, inside the nav's 28px gap */
  padding: 2px 8px;
  border: 1px solid #fcd34d;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .nav-staff-badge { align-self: flex-start; margin: 8px 0 6px 2px; }
}

/* ══ Getting-started steps (_SignUpSteps) ════════════════════════════════════
   Four bars with a label under each: blue for where you are, teal for what is done. */
.signup-steps {
  display: flex; gap: 8px;
  list-style: none; padding: 0; margin: 0 0 28px;
}
.signup-steps li {
  flex: 1 1 0;
  border-top: 3px solid var(--light-border);
  padding-top: 8px;
  font-size: .78rem; font-weight: 600; line-height: 1.3;
  color: var(--gray);
}
.signup-steps li.done { border-top-color: var(--teal); color: var(--teal-text); }
.signup-steps li.current { border-top-color: var(--blue); color: var(--navy); }

/* The dashboard's copy rows (the referral link) and the platform's one-time code: a long value in
   a code box with its Copy button. On a phone the value takes the row and the button goes under it. */
.input-group > code.form-control { display: flex; align-items: center; background: var(--off-white); color: var(--navy); }
@media (max-width: 575.98px) {
  .input-group:has(> code.form-control) { flex-direction: column; }
  .input-group:has(> code.form-control) > * { width: 100%; margin-left: 0 !important; border-radius: 8px !important; }
  .input-group:has(> code.form-control) > .btn { margin-top: 6px; }
}


/* ══ The signed-in shell (_DashboardLayout) ══════════════════════════════════
   The old portal's sidebar (bak/…/site.css): a navy rail, small section labels, a teal wash on the
   current item, a teal glow at the foot. Beside the content on a desktop; above it, as a row that
   scrolls sideways, on a phone - no script, so no menu to open. */
.app-main--sidebar { max-width: none; padding: 0; display: flex; }
.dash-shell { flex: 1 1 auto; display: grid; grid-template-columns: 232px minmax(0, 1fr); }
.dash-sidebar {
  position: relative;
  display: flex; flex-direction: column;
  padding: 20px 12px;
  background: var(--navy);
  border-right: 1px solid #243450;
}
.dash-sidebar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0, 200, 180, .1) 0%, transparent 70%);
  pointer-events: none;
}
.dash-nav-section { margin-bottom: 6px; }
.dash-nav-label {
  display: block; padding: 12px 10px 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-navy-muted);
}
.dash-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 2px; border-radius: 7px;
  font-size: .9rem; font-weight: 500; text-decoration: none;
  color: #cbd5e1;
  transition: background .15s, color .15s;
}
.dash-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.dash-nav-item.is-current { background: rgba(0, 200, 180, .14); color: var(--teal); }
.dash-nav-item:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.dash-nav-icon { width: 18px; text-align: center; line-height: 1; flex-shrink: 0; }
.dash-nav-section--platform { margin-top: 6px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); }
.dash-nav-section--platform .dash-nav-label { color: var(--teal); }
.dash-sidebar-note {
  position: relative; z-index: 1;
  margin: auto 0 0; padding: 14px 10px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .74rem; line-height: 1.5; color: var(--on-navy-muted);
}
.dash-content { min-width: 0; max-width: 1040px; padding: 40px clamp(20px, 4vw, 48px) 72px; }

@media (max-width: 860px) {
  .dash-shell { grid-template-columns: minmax(0, 1fr); }
  .dash-sidebar { flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; overflow-x: auto; border-right: 0; }
  .dash-sidebar::after, .dash-nav-label, .dash-sidebar-note { display: none; }
  .dash-nav-section { display: flex; gap: 4px; margin: 0; }
  .dash-nav-section--platform { margin: 0 0 0 6px; padding: 0 0 0 10px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12); }
  .dash-nav-item { white-space: nowrap; margin: 0; }
  .dash-content { padding-top: 28px; }
}

/* The dashboard's empty state: no TemprBac yet, and the one thing to do about it. */
.dash-empty { text-align: center; padding: 48px 24px; }
.dash-empty-mark { width: 56px; height: 56px; margin: 0 auto 16px; }
.dash-empty p { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* The sign-in / create-account box: two tabs over one card (_AuthTabs). Links, not script - each
   tab is its own page, so the browser's back button and a bookmarked /signup still work. */
.auth-tabs { display: flex; margin: 0 0 24px; border-bottom: 1px solid var(--light-border); }
.auth-tabs a {
  flex: 1 1 0; text-align: center; padding: 14px 8px 12px;
  font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--gray);
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.auth-tabs a:hover { color: var(--navy); }
.auth-tabs a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--blue); }
.auth-box { padding: 0 28px 28px; }
@media (max-width: 480px) { .auth-box { padding: 0 18px 22px; } }

/* The platform overview's stat tiles (the old portal's .stat-card): one number each, in text ink;
   the label and the sub-line say what it is, never a color. */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat-card { position: relative; overflow: hidden; padding: 18px 20px; background: var(--white); border: 1px solid var(--light-border); border-radius: 10px; }
.stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.stat-card--alert::before { background: var(--bs-danger); }
.stat-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.stat-value { display: block; margin: 4px 0 2px; font-family: var(--font-display); font-size: 2.2rem; line-height: 1.1; color: var(--navy); }
.stat-sub { display: block; font-size: .8rem; line-height: 1.45; color: var(--gray); }

/* ══ Checkout (Dashboard/Checkout, mounted by checkout.js) ═════════════════════
   The summary beside the payment form on wide screens, above it on narrow ones. The payment card
   is wider: Stripe's embedded form wants about 400px and lays itself out in two columns past 900px. */
.checkout-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
/* Below lg the payment card comes first; the plan is the one-line .checkout-mini above it. */
.checkout-pay { order: 1; }
.checkout-summary { order: 2; }
.checkout-mini { margin: -.5rem 0 1rem; color: var(--navy); }
@media (min-width: 992px) {
  .checkout-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .checkout-pay, .checkout-summary { order: 0; }
}
.checkout-plan { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.2; color: var(--navy); }
.checkout-price { font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.checkout-points { list-style: none; padding: 0; border-top: 1px solid var(--light-border); padding-top: .75rem; }
.checkout-points li { position: relative; padding-left: 1.4rem; margin-bottom: .5rem; color: var(--ink); }
.checkout-points li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-text); font-weight: 700; }
.checkout-element { min-height: 12rem; }
.checkout-embedded { min-height: 24rem; }
.checkout-secure { text-align: center; }