/* upstratus public-site identity (UI.md in the app root). Everything is scoped under .site-shell so the
   signed-in screens, which still use stock Bootstrap + a11y.css, are untouched. Tokens are the only place a
   colour is written: components below reference them. Dark mode remaps tokens, never components. */

@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }

.site-shell {
  /* ---- colour (light) ---- */
  --color-bg: #F6F5F1;          --color-surface: #FFFFFF;      --color-surface-2: #ECEAE3;
  --color-fg: #1B1F23;          --color-muted: #565E64;
  --color-border: #CFCBC0;      --color-border-strong: #7D8388;
  --color-primary: #0B6B5B;     --color-primary-hover: #085246;  --color-on-primary: #FFFFFF;
  --color-accent: #9A4A00;
  --color-success: #146C43;     --color-warning: #7A5200;      --color-error: #B02A37;
  --focus-ring: #0B57D0;
  --color-panel: #12332D;       --color-panel-fg: #FFFFFF;     --color-panel-trace: #8CE8CF;
  --color-panel-muted: #C4E3DA;  --color-panel-line: #2F5C53;

  /* ---- type ---- */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem;
  --leading-tight: 1.15; --leading-normal: 1.5;

  /* ---- space / shape / motion ---- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem;
  --shadow-sm: 0 1px 2px rgb(27 31 35 / .08); --shadow-md: 0 4px 14px rgb(27 31 35 / .10);
  --ease-standard: cubic-bezier(.2, 0, 0, 1); --dur-fast: 150ms;

  /* Bootstrap reads these inside the shell only. */
  --bs-body-bg: var(--color-bg); --bs-body-color: var(--color-fg); --bs-body-font-family: var(--font-body);
  --bs-border-color: var(--color-border); --bs-link-color: var(--color-primary);
  --bs-link-hover-color: var(--color-primary-hover); --bs-link-color-rgb: 11, 107, 91;
  --bs-link-hover-color-rgb: 8, 82, 70; --bs-secondary-color: var(--color-muted);

  background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); min-height: 100vh;
}
:root[data-bs-theme="dark"] .site-shell {
  --color-bg: #101418;          --color-surface: #171C21;      --color-surface-2: #1F252B;
  --color-fg: #E8E6E1;          --color-muted: #A9B0B6;
  --color-border: #2B333A;      --color-border-strong: #6C757D;
  --color-primary: #3DD6B0;     --color-primary-hover: #6FE3C6;  --color-on-primary: #101418;
  --color-accent: #F0A04B;
  --color-success: #5FD08F;     --color-warning: #F2C14E;      --color-error: #FF8A93;
  --focus-ring: #7AB0FF;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 4px 14px rgb(0 0 0 / .45);
  --bs-link-color-rgb: 61, 214, 176; --bs-link-hover-color-rgb: 111, 227, 198;
}

.site-shell :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.site-shell a:not(.btn) { color: var(--color-primary); text-underline-offset: .18em; }
.site-shell a:not(.btn):hover { color: var(--color-primary-hover); }
.site-shell h1, .site-shell h2, .site-shell h3, .site-shell .display-font {
  font-family: var(--font-display); font-weight: 700; line-height: var(--leading-tight); letter-spacing: -.01em; }
.site-shell code, .site-shell .mono { font-family: var(--font-mono); font-size: .92em; color: var(--color-fg); }
.site-shell p, .site-shell li { max-width: 68ch; }
.site-shell .text-muted, .site-shell .muted { color: var(--color-muted) !important; }

/* ---- header / nav ---- */
.site-shell .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.site-shell .site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-2);
  color: var(--color-fg); text-decoration: none; border-radius: var(--radius-sm); }
.site-shell .site-nav a:not(.btn):hover { color: var(--color-primary); text-decoration: underline; }
.site-shell .site-nav a[aria-current="page"] { font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 2px; text-underline-offset: .3em; }
.site-shell .site-brand { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  letter-spacing: -.02em; display: inline-flex; align-items: center; gap: var(--space-2); }
.site-shell .site-brand .bi { color: var(--color-primary); }

/* ---- buttons (one primary look; Bootstrap's .btn geometry is kept) ---- */
.site-shell .btn { font-weight: 600; min-height: 2.75rem; display: inline-flex; align-items: center;
  justify-content: center; gap: var(--space-2); border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); }
.site-shell .btn-primary { --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-color: var(--color-on-primary); --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover); --bs-btn-hover-color: var(--color-on-primary);
  --bs-btn-active-bg: var(--color-primary-hover); --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-active-color: var(--color-on-primary); --bs-btn-focus-shadow-rgb: 11, 87, 208; }
.site-shell .btn-outline-primary { --bs-btn-color: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary); --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--color-on-primary); --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-color: var(--color-on-primary); }

/* ---- hero panel with the signal trace ---- */
.site-shell .site-hero { background: var(--color-panel); color: var(--color-panel-fg);
  border-radius: var(--radius-lg); padding: var(--space-12) var(--space-6); position: relative; overflow: hidden; }
.site-shell .site-hero h1 { font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl)); color: var(--color-panel-fg); }
.site-shell .site-hero .lead { color: var(--color-panel-fg); font-size: var(--text-lg); }
.site-shell .site-hero .eyebrow { color: var(--color-panel-trace); font-family: var(--font-mono);
  font-size: var(--text-sm); text-transform: none; letter-spacing: .02em; }
.site-shell .site-hero .btn-outline-light { --bs-btn-color: var(--color-panel-fg); --bs-btn-border-color: var(--color-panel-fg);
  --bs-btn-hover-bg: var(--color-panel-fg); --bs-btn-hover-color: var(--color-panel); }
.site-shell .signal-trace { display: block; width: 100%; height: 3rem; color: var(--color-panel-trace); }
.site-shell .signal-divider { color: var(--color-border-strong); height: 1.5rem; width: 100%; display: block; }

/* ---- sections, steps, cards ---- */
.site-shell .site-section { padding-block: var(--space-12); }
.site-shell .section-title { font-size: var(--text-3xl); margin-bottom: var(--space-4); }
.site-shell .step-number { font-family: var(--font-mono); color: var(--color-primary); font-size: var(--text-sm);
  letter-spacing: .04em; }
.site-shell .site-card { overflow-wrap: anywhere; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm); height: 100%; }
/* A card that is a column's only child fills it (equal-height rows); a card stacked with siblings must not. */
.site-shell section.site-card { height: auto; }
.site-shell .site-card.is-linked { transition: box-shadow var(--dur-fast) var(--ease-standard),
  border-color var(--dur-fast) var(--ease-standard); }
.site-shell .site-card.is-linked:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.site-shell .site-card .stretched-link { text-decoration: none; color: var(--color-fg); }
.site-shell .site-card .card-icon { color: var(--color-primary); font-size: var(--text-2xl); }

/* ---- pricing ---- */
.site-shell .plan-card { display: flex; flex-direction: column; position: relative; }
.site-shell .plan-card .plan-price { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 700;
  line-height: 1; }
.site-shell .plan-card .plan-per { color: var(--color-muted); font-size: var(--text-sm); }
.site-shell .plan-card .plan-minutes { font-family: var(--font-mono); font-size: var(--text-lg); }
.site-shell .plan-card.is-featured { border: 2px solid var(--color-primary); }
.site-shell .plan-flag { color: var(--color-accent); font-weight: 600; font-size: var(--text-sm); }
.site-shell .plan-card .plan-flag { position: absolute; top: 0; left: var(--space-4); transform: translateY(-50%);
  background: var(--color-surface); padding: 0 var(--space-2); margin: 0; white-space: nowrap; }
.site-shell .test-mode-note { border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-accent);
  background: var(--color-surface); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); }

/* ---- tables / definition lists ---- */
.site-shell .site-table { --bs-table-bg: var(--color-surface); --bs-table-color: var(--color-fg);
  --bs-table-striped-bg: var(--color-surface-2); --bs-table-border-color: var(--color-border); }
.site-shell .site-table caption { color: var(--color-muted); caption-side: top; padding-bottom: var(--space-2); }
.site-shell .status-chip { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600;
  font-size: var(--text-sm); }
.site-shell .status-chip.is-ok { color: var(--color-success); }
.site-shell .status-chip.is-limited { color: var(--color-warning); }
.site-shell .status-chip.is-none { color: var(--color-muted); }

/* ---- skip link, page intro, breadcrumbs ---- */
.site-shell .site-skip { position: absolute; top: var(--space-2); left: var(--space-2); z-index: 1030; }
.site-shell .page-intro { padding-block: var(--space-6) var(--space-8); }
.site-shell .page-intro h1 { font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl)); }
.site-shell .page-intro .lead { color: var(--color-muted); font-size: var(--text-lg); }
.site-shell .site-breadcrumb { --bs-breadcrumb-divider-color: var(--color-muted);
  --bs-breadcrumb-item-active-color: var(--color-muted); font-size: var(--text-sm); margin-bottom: 0; }
.site-shell .site-breadcrumb a { display: inline-flex; align-items: center; min-height: 1.5rem; }

/* ---- hero additions ---- */
.site-shell .site-hero .btn-primary { --bs-btn-bg: var(--color-panel-trace); --bs-btn-border-color: var(--color-panel-trace);
  --bs-btn-color: var(--color-panel); --bs-btn-hover-bg: var(--color-panel-fg); --bs-btn-hover-border-color: var(--color-panel-fg);
  --bs-btn-hover-color: var(--color-panel); --bs-btn-active-bg: var(--color-panel-fg);
  --bs-btn-active-border-color: var(--color-panel-fg); --bs-btn-active-color: var(--color-panel); }
.site-shell .site-hero :where(a, button):focus-visible { outline-color: var(--color-panel-fg); }
.site-shell .hero-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--color-panel-line); border: 1px solid var(--color-panel-line); border-radius: var(--radius-md);
  overflow: hidden; }
.site-shell .hero-readout > div { background: var(--color-panel); padding: var(--space-4); }
.site-shell .hero-readout dt { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-xs);
  color: var(--color-panel-muted); letter-spacing: .04em; text-transform: uppercase; }
.site-shell .hero-readout dd { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl);
  color: var(--color-panel-fg); margin: var(--space-1) 0 0; }

/* ---- section furniture ---- */
.site-shell .section-lead { color: var(--color-muted); font-size: var(--text-lg); margin-bottom: var(--space-6); }
.site-shell .card-label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-muted);
  letter-spacing: .02em; }
.site-shell .site-card h3 { line-height: var(--leading-tight); }
.site-shell .site-card .stretched-link:hover, .site-shell .site-card .stretched-link:focus-visible {
  color: var(--color-primary); text-decoration: underline; }
.site-shell .link-arrow { display: inline-flex; align-items: center; min-height: 1.5rem; font-weight: 600; }
.site-shell .signal-divider { margin-block: var(--space-4); }
.site-shell .site-cta { background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary); border-radius: var(--radius-md); padding: var(--space-8) var(--space-6);
  margin-top: var(--space-12); }
.site-shell .site-cta .other-link { min-height: 2.75rem; }

/* ---- chips and tags ---- */
.site-shell .chip-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); list-style: none;
  padding: 0; margin: 0; }
.site-shell .chip-list .status-chip { max-width: none; }
.site-shell .board-tag { color: var(--color-accent); font-weight: 600; font-size: var(--text-sm); }

/* ---- tables and specification lists ---- */
.site-shell .site-table th, .site-shell .site-table td { padding: var(--space-3); }
.site-shell .site-table thead th { font-family: var(--font-display); font-weight: 500; border-bottom-width: 2px;
  border-bottom-color: var(--color-border-strong); }
.site-shell .site-table a { display: inline-flex; align-items: center; min-height: 1.5rem; }
.site-shell .site-table caption { font-size: var(--text-sm); }
.site-shell .spec-list { display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: var(--space-2) var(--space-4); }
.site-shell .spec-list dt { color: var(--color-muted); font-weight: 400; }
.site-shell .spec-list dd { margin: 0; }

/* ---- pricing additions ---- */
.site-shell .plan-card .plan-allowance { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3); }
.site-shell .plan-card .plan-allowance-label { display: block; color: var(--color-muted); font-size: var(--text-sm); }
.site-shell .plan-card h3 { font-weight: 700; }
.site-shell .plan-card .btn { padding-inline: var(--space-2); }
.site-shell .plan-doc-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem;
  font-size: var(--text-sm); }
.site-shell .faq-list { border-top: 1px solid var(--color-border); }
.site-shell .faq-item { border-bottom: 1px solid var(--color-border); }
.site-shell .faq-item summary { cursor: pointer; min-height: 2.75rem; padding: var(--space-3) 0;
  font-family: var(--font-display); font-weight: 500; font-size: var(--text-lg); }
.site-shell .faq-item summary:hover { color: var(--color-primary); }
.site-shell .faq-answer { padding: 0 0 var(--space-4) var(--space-6); }

/* ---- trust additions ---- */
.site-shell .not-claimed { background: var(--color-surface-2); border: 1px solid var(--color-border-strong);
  border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); }
.site-shell .not-claimed .bi { color: var(--color-accent); }
.site-shell .doc-link { display: flex; align-items: center; min-height: 2.75rem; padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  text-decoration: none; height: 100%; }
.site-shell .doc-link:hover { border-color: var(--color-border-strong); text-decoration: underline; }
.site-shell address { font-style: normal; }

/* ---- footer ---- */
.site-shell .site-footer { border-top: 1px solid var(--color-border); color: var(--color-muted);
  padding-block: var(--space-8); margin-top: var(--space-12); }
.site-shell .site-footer a { display: inline-flex; align-items: center; min-height: 2.75rem; }

@media (prefers-reduced-motion: reduce) {
  .site-shell *, .site-shell *::before, .site-shell *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 575.98px) {
  .site-shell .site-hero { padding: var(--space-8) var(--space-4); }
  .site-shell .site-section { padding-block: var(--space-8); }
}