/* =============================================================================
   SB Estates Marketing Page Styles (sb-marketing.css)
   -----------------------------------------------------------------------------
   Section-level layouts for the public marketing site: navbar, hero, social
   proof, feature grid, how-it-works steps, pricing, testimonials, FAQ,
   final CTA, footer, seasonal banner.

   Loaded only when {{ new_theme }} is true. Depends on sb-tokens.css +
   sb-base.css.
   ========================================================================== */


/* ---------- Marketing page wrapper ---------- */

.sb-marketing {
  background-color: var(--sb-bg-page);
  color: var(--sb-text);
}

/* Reset body so the sticky navbar is flush with the viewport top.
   Browser user-agent stylesheets default to `body { margin: 8px }`
   which creates the visible gap above the navbar. Also reset
   horizontal margins so background gradients fill edge-to-edge. */
body.sb-marketing-body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--sb-bg-page);
}


/* ---------- Public navbar ----------
   Sticky with a frosted-glass background that becomes more solid +
   shadowed when the user has scrolled past the top. The `.is-scrolled`
   class is toggled by JS in base_clean.html so we can animate the
   transition cleanly.                                                       */

.sb-navbar {
  position: sticky;
  top: 0;
  z-index: var(--sb-z-sticky);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  padding: 1rem 0;
  transition: background-color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              padding 0.25s ease;
}
.sb-navbar.is-scrolled {
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--sb-border);
  box-shadow: 0 6px 24px -12px rgba(15, 23, 42, 0.12);
  padding: 0.625rem 0;
}

.sb-navbar__inner {
  max-width: var(--sb-content-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3.5vw, 2.5rem);
  display: flex;
  align-items: center;
  gap: var(--sb-space-6);
}

.sb-navbar__brand {
  font-family: var(--sb-font-body);
  font-weight: var(--sb-fw-extrabold);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: var(--sb-tracking-tight);
  color: var(--sb-text);
  text-decoration: none;
  flex: 0 0 auto;
}
.sb-navbar__brand:hover { color: var(--sb-text); text-decoration: none; }

.sb-navbar__links {
  display: flex;
  gap: var(--sb-space-8);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  justify-content: center;
}

.sb-navbar__link {
  font-family: var(--sb-font-body);
  font-size: 0.9375rem;
  font-weight: var(--sb-fw-medium);
  color: var(--sb-text);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color var(--sb-transition-fast);
}
.sb-navbar__link:hover {
  color: var(--sb-primary);
  text-decoration: none;
}

.sb-navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--sb-space-3);
  flex: 0 0 auto;
}

/* NOTE: the old .sb-navbar__cta-badge ("Limited offer · 6 months free" pill
   that used to sit next to the navbar's Start Free Trial button) was
   removed when the navbar CTA was renamed to "Create account" — the
   navbar button no longer starts a trial, so a "trial offer" callout
   next to it was a broken promise. The offer copy now lives inline in
   the homepage hero as .sb-hero__offer (defined below in the hero
   section), where the real trial CTA actually lives. */

/* Pill auth buttons in the navbar — match the mockup. */
.sb-navbar__actions .btn,
.sb-navbar__actions .dropdown-toggle.btn {
  font-family: var(--sb-font-body);
  font-weight: var(--sb-fw-semibold);
  font-size: 0.9375rem;
  border-radius: var(--sb-radius-pill);
  padding: 0.55rem 1.25rem;
  line-height: 1.25;
}
.sb-navbar__actions .btn-ghost {
  background: transparent;
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
}
.sb-navbar__actions .btn-ghost:hover {
  background: var(--sb-bg-subtle);
  border-color: var(--sb-border-strong);
  color: var(--sb-text);
}
.sb-navbar__actions .btn-primary {
  background: var(--sb-primary);
  color: var(--sb-text-on-primary);
  border: 1px solid var(--sb-primary);
}
.sb-navbar__actions .btn-primary:hover,
.sb-navbar__actions .btn-primary:focus {
  background: var(--sb-primary-hover);
  border-color: var(--sb-primary-hover);
  color: var(--sb-text-on-primary);
}

.sb-navbar__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-sm);
  padding: 0.4rem 0.6rem;
  color: var(--sb-text);
}

@media (max-width: 767.98px) {
  .sb-navbar__links { display: none; }
  .sb-navbar__toggle { display: inline-flex; }
  .sb-navbar.is-open .sb-navbar__links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--sb-bg-page);
    flex-direction: column;
    padding: var(--sb-space-4) var(--sb-space-6);
    border-bottom: 1px solid var(--sb-border-soft);
    box-shadow: var(--sb-shadow-md);
    gap: var(--sb-space-3);
  }
}


/* ---------- Hero ---------- */

.sb-hero {
  background: var(--sb-bg-page);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  position: relative;
  /* visible so the 3D-tilted mock + shadow aren't clipped */
  overflow: visible;
}
/* Compact hero variant — used on subpage headers (about, terms, privacy,
   demo) where there's no big dashboard image, just centered copy. */
.sb-hero--compact {
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(2rem, 4vw, 3rem);
}
/* NOTE: `.sb-hero__inner--centered` must keep higher specificity than
   `.sb-hero__inner` (which is a 2-col grid for the home hero, defined
   later in this file). The compound `.sb-hero__inner.sb-hero__inner--centered`
   selector ensures the centered/stacked layout wins regardless of source
   order. Without this, the overline / title / subtitle get distributed
   across the home-hero grid columns (LEGAL in col 1, "Privacy Policy"
   pushed to col 2, etc.). */
.sb-hero__inner.sb-hero__inner--centered {
  display: block;
  grid-template-columns: none;
  gap: 0;
  text-align: center;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}
.sb-hero__inner.sb-hero__inner--centered .sb-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
}
.sb-hero__inner.sb-hero__inner--centered .sb-hero__subtitle {
  margin: var(--sb-space-4) auto 0;
  max-width: 36rem;
}

/* Long-form prose container (legal copy, about content). Restores
   comfortable reading width + cleaner typography defaults. */
.sb-prose {
  max-width: 56rem;
  margin: 0 auto;
  color: var(--sb-text);
  font-size: 1rem;
  line-height: 1.7;
}
.sb-prose p { margin: 0 0 1.1em; }
.sb-prose h2, .sb-prose h3, .sb-prose h4 {
  font-family: var(--sb-font-body);
  color: var(--sb-text);
  letter-spacing: var(--sb-tracking-tight);
}
.sb-prose h2 { font-size: 1.625rem; font-weight: var(--sb-fw-extrabold); margin: 2.25em 0 0.75em; line-height: 1.25; }
.sb-prose h3 { font-size: 1.25rem;  font-weight: var(--sb-fw-bold);     margin: 1.75em 0 0.5em;  line-height: 1.3; }
.sb-prose h4 { font-size: 1.0625rem; font-weight: var(--sb-fw-bold);    margin: 1.5em 0 0.5em;   line-height: 1.35; }
.sb-prose h2:first-child, .sb-prose h3:first-child, .sb-prose h4:first-child { margin-top: 0; }
.sb-prose ul, .sb-prose ol { margin: 0 0 1.25em 1.25em; padding: 0; }
.sb-prose li { margin: 0 0 0.5em; }
.sb-prose a {
  color: var(--sb-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.sb-prose a:hover { color: var(--sb-primary-hover); }
.sb-prose strong { color: var(--sb-text); font-weight: var(--sb-fw-bold); }
.sb-prose hr { border: 0; border-top: 1px solid var(--sb-border-soft); margin: 2.5em 0; }
.sb-prose .sb-prose-meta { color: var(--sb-text-muted); font-size: 0.875rem; }

/* Section header used INSIDE a .sb-prose column (about page Mission /
   Story / Company headings). Left-aligned, no max-width / auto margin
   so it sits flush with the surrounding prose body — unlike the global
   .sb-section-header which is centered with max-width 42rem. */
.sb-prose-header {
  margin: 0 0 var(--sb-space-4);
  text-align: left;
}
.sb-prose-header--spaced {
  margin-top: var(--sb-space-10);
}
.sb-prose-title {
  font-family: var(--sb-font-body);
  font-weight: var(--sb-fw-extrabold);
  font-size: clamp(1.625rem, 2.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sb-text);
  margin: var(--sb-space-2) 0 0;
}

.sb-hero__inner {
  max-width: var(--sb-content-max);
  margin: 0 auto;
  display: grid;
  /* Media column dominates — product mock is the visual hero */
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.4fr);
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  align-items: center;
}

@media (max-width: 991.98px) {
  .sb-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--sb-space-10);
  }
}

.sb-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-5);
}

.sb-hero__overline {
  font-family: var(--sb-font-body);
  font-weight: var(--sb-fw-semibold);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-primary);
  margin: 0;
}

.sb-hero__title {
  font-family: var(--sb-font-body);
  font-weight: var(--sb-fw-extrabold);
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--sb-text);
  margin: 0;
}

.sb-hero__subtitle {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  color: var(--sb-gray-600);
  max-width: 32rem;
  margin: 0;
}

.sb-hero__actions {
  display: flex;
  gap: var(--sb-space-3);
  flex-wrap: wrap;
  margin-top: var(--sb-space-3);
}

/* Hero CTA buttons — pill-shaped, matching the mockup. */
.sb-hero__actions .btn {
  border-radius: var(--sb-radius-pill);
  padding: 0.65rem 1.25rem;
  font-weight: var(--sb-fw-semibold);
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.sb-hero__actions .btn-lg {
  padding: 0.7rem 1.35rem;
  font-size: 0.9375rem;
}
.sb-hero__actions .btn-primary {
  background: var(--sb-primary);
  border-color: var(--sb-primary);
  color: var(--sb-text-on-primary);
  box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.45);
}
.sb-hero__actions .btn-primary:hover {
  background: var(--sb-primary-hover);
  border-color: var(--sb-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px -8px rgba(16, 185, 129, 0.50);
}
.sb-hero__actions .btn-ghost {
  background: #fff;
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
}
.sb-hero__actions .btn-ghost:hover {
  background: var(--sb-bg-subtle);
  border-color: var(--sb-border-strong);
  color: var(--sb-text);
}

/* Standout treatment for the primary trial CTA — a slow, breathing emerald
   ring that signals "this is the action we want you to take" without
   feeling like a tacky animated banner. The ring is built on the existing
   box-shadow so it composites cleanly with the button's lift on hover. */
.sb-hero__cta-primary {
  position: relative;
  box-shadow:
    0 6px 16px -6px rgba(16, 185, 129, 0.45),
    0 0 0 0 rgba(16, 185, 129, 0.45);
  animation: sb-hero-cta-pulse 2.6s ease-out infinite;
}
.sb-hero__cta-primary:hover {
  animation: none; /* drop the pulse on hover so the lift reads cleanly */
}
@keyframes sb-hero-cta-pulse {
  0%   { box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.45), 0 0 0 0 rgba(16, 185, 129, 0.45); }
  70%  { box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.45), 0 0 0 14px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 6px 16px -6px rgba(16, 185, 129, 0.45), 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-hero__cta-primary { animation: none; }
}

/* Limited-offer pill that sits between the subtitle and the CTA row.
   Visually matches the old .sb-navbar__cta-badge (so the design language
   is familiar to anyone who saw the previous navbar callout) but adapted
   to live INSIDE the hero text column. */
.sb-hero__offer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--sb-space-3);
  padding: 0.4rem 0.85rem;
  background: #ecfdf5;             /* emerald-50 surface */
  border: 1px solid #a7f3d0;       /* emerald-200 accent border */
  border-radius: var(--sb-radius-pill);
  color: var(--sb-text);
  font-size: 0.8125rem;
  font-weight: var(--sb-fw-medium);
  line-height: 1.3;
  max-width: max-content;
}
.sb-hero__offer strong {
  color: #047857;                  /* emerald-700 — accent the offer word */
  font-weight: var(--sb-fw-bold);
}
.sb-hero__offer-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sb-primary);
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  animation: sb-hero-offer-dot 2.2s ease-out infinite;
}
@keyframes sb-hero-offer-dot {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-hero__offer-dot { animation: none; }
}

.sb-hero__microcopy {
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  margin: 0;
}

/* Dashboard preview — live HTML mock (stays sharp) + 3D product tilt.
   NOTE: do NOT put container-type on this node — size containment flattens
   3D transforms in Chromium. Perspective lives on the transform itself. */
.sb-hero__media {
  /* Smaller design width → larger UI chrome when scaled into the frame */
  --sb-hero-mock-w: 960;
  position: relative;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  /* Pull toward copy + allow a bit of visual overflow from the tilt */
  margin-left: -1.25rem;
  margin-right: -0.5rem;
  padding: 0.5rem 0.75rem 2rem 0;
  /* Keep hover on this wrapper (not the scaled mock children) */
  pointer-events: auto;
}

.sb-hero__media-frame {
  position: relative;
  width: 100%;
  /* Slightly taller so more of the dashboard reads in-frame */
  aspect-ratio: 16 / 10.25;
  border-radius: 14px;
  overflow: hidden;
  background: #f1f5f9;
  pointer-events: auto;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Milder tilt so foreshortening doesn't shrink the mock as much */
  transform: perspective(1400px) rotateY(-11deg) rotateX(3.5deg) scale(1.06);
  transform-origin: center center;
  box-shadow:
    -18px 32px 60px -18px rgba(15, 23, 42, 0.32),
    -4px 18px 36px -12px rgba(15, 23, 42, 0.16),
    0 4px 12px rgba(15, 23, 42, 0.06);
  transition: transform 0.55s var(--sb-easing, ease-out),
              box-shadow 0.55s var(--sb-easing, ease-out);
}

/* Invisible hit layer — scaled mock uses pointer-events:none and can
   let hover fall through to the page behind the hero */
.sb-hero__media-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
}

/* Hover: ease toward the viewer (flatter + slight lift), like the original */
.sb-hero__media:hover .sb-hero__media-frame,
.sb-hero__media-frame:hover {
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg) scale(1.08) translateY(-8px);
  box-shadow:
    -14px 36px 64px -16px rgba(15, 23, 42, 0.34),
    -2px 22px 40px -12px rgba(15, 23, 42, 0.18),
    0 6px 14px rgba(15, 23, 42, 0.08);
}

.sb-hero__media-stage {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  pointer-events: none;
  /* Container queries live here (child of the tilted frame) */
  container-type: inline-size;
  container-name: hero-media;
}

/* Scale the fixed-width mock to the frame — vector text stays crisp */
.sb-hero-mock {
  display: flex;
  background: #f8fafc;
  font-family: var(--sb-font-body, Manrope, system-ui, sans-serif);
  color: #0f172a;
  pointer-events: none;
  user-select: none;
  /* Fallback without container query units */
  width: 100%;
  height: 100%;
  transform-origin: top left;
}

@supports (width: 1cqi) {
  .sb-hero-mock {
    width: calc(var(--sb-hero-mock-w) * 1px);
    height: calc(var(--sb-hero-mock-w) * 10.25 / 16 * 1px);
    transform: scale(calc(100cqi / var(--sb-hero-mock-w)));
  }
}

.sb-hero-mock__side {
  width: 200px;
  flex: 0 0 200px;
  background: #0f172a;
  color: #fff;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-hero-mock__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 6px;
}

.sb-hero-mock__mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: contain;
  background: #fff;
  flex: 0 0 auto;
  display: block;
}

.sb-hero-mock__search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #1e293b;
  border-radius: 8px;
  padding: 8px 10px;
  color: #94a3b8;
  font-size: 0.72rem;
  margin-bottom: 6px;
}

.sb-hero-mock__search .material-symbols-rounded { font-size: 16px; }
.sb-hero-mock__search kbd {
  margin-left: auto;
  font-size: 0.62rem;
  border: 1px solid #334155;
  padding: 1px 5px;
  border-radius: 4px;
}

.sb-hero-mock__sec {
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  margin: 8px 6px 2px;
}

.sb-hero-mock__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  color: #cbd5e1;
  font-weight: 600;
  font-size: 0.78rem;
}

.sb-hero-mock__link .material-symbols-rounded { font-size: 16px; }
.sb-hero-mock__link.is-active {
  background: #1e293b;
  color: #fff;
  box-shadow: inset 3px 0 0 #10b981;
}

.sb-hero-mock__user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 6px 2px;
  border-top: 1px solid #1e293b;
  font-size: 0.78rem;
}

.sb-hero-mock__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #334155;
  flex: 0 0 auto;
}

.sb-hero-mock__main {
  flex: 1;
  min-width: 0;
  padding: 18px 20px;
  background: #f8fafc;
}

.sb-hero-mock__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.sb-hero-mock__h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.sb-hero-mock__btn {
  background: #10b981;
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 0.72rem;
}

.sb-hero-mock__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.sb-hero-mock__card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sb-hero-mock__card h3 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 800;
}

.sb-hero-mock__kpi-label {
  color: #64748b;
  font-size: 0.68rem;
  font-weight: 600;
}

.sb-hero-mock__kpi-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 4px;
}

.sb-hero-mock__kpi-val {
  font-size: 1.15rem;
  font-weight: 800;
}

.sb-hero-mock__icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 15px;
}

.sb-hero-mock__icon.is-g { background: rgba(16, 185, 129, 0.12); color: #059669; }
.sb-hero-mock__icon.is-r { background: rgba(239, 68, 68, 0.12); color: #dc2626; }
.sb-hero-mock__icon.is-o { background: rgba(249, 115, 22, 0.12); color: #ea580c; }

.sb-hero-mock__delta {
  font-size: 0.62rem;
  margin-top: 4px;
  font-weight: 600;
}
.sb-hero-mock__delta.is-down { color: #dc2626; }
.sb-hero-mock__delta.is-up { color: #059669; }

.sb-hero-mock__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.sb-hero-mock__donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sb-hero-mock__donut {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(#10b981 0 89%, #ef4444 89% 100%);
  display: grid;
  place-items: center;
  position: relative;
  flex: 0 0 auto;
}

.sb-hero-mock__donut::after {
  content: '';
  position: absolute;
  inset: 22px;
  background: #fff;
  border-radius: 50%;
}

.sb-hero-mock__donut span {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: 0.85rem;
}

.sb-hero-mock__legend div { margin-bottom: 8px; font-size: 0.72rem; }
.sb-hero-mock__sw {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}

.sb-hero-mock__meta {
  color: #64748b;
  font-size: 0.65rem;
}

.sb-hero-mock__act {
  display: flex;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.72rem;
}
.sb-hero-mock__act:last-child { border-bottom: 0; }

.sb-hero-mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex: 0 0 auto;
}

.sb-hero-mock__task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.74rem;
  font-weight: 600;
}
.sb-hero-mock__task:last-child { border-bottom: 0; }

.sb-hero-mock__badge {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 999px;
}
.sb-hero-mock__badge.is-over { background: #fee2e2; color: #b91c1c; }
.sb-hero-mock__badge.is-soon { background: #ffedd5; color: #c2410c; }
.sb-hero-mock__badge.is-later { background: #e2e8f0; color: #475569; }

.sb-hero-mock__bar-row {
  display: grid;
  grid-template-columns: 58px 1fr 18px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.7rem;
  font-weight: 600;
}

.sb-hero-mock__bar {
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}

.sb-hero-mock__bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

@media (max-width: 991.98px) {
  .sb-hero__media {
    justify-self: center;
    max-width: 640px;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .sb-hero__media-frame,
  .sb-hero__media:hover .sb-hero__media-frame,
  .sb-hero__media-frame:hover {
    transform: scale(1.02);
    box-shadow: 0 22px 44px -14px rgba(15, 23, 42, 0.18);
  }
}

/* Still allow the one-shot hover ease; only drop the transition timing */
@media (prefers-reduced-motion: reduce) {
  .sb-hero__media-frame {
    transition: none;
  }
}


/* ---------- Section helpers ---------- */

.sb-section {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3.5vw, 2.5rem);
}
.sb-section--subtle  { background: var(--sb-bg-subtle); }
.sb-section--brand   { background: var(--sb-brand); color: var(--sb-text-on-brand); }
.sb-section--primary { background: var(--sb-primary); color: var(--sb-text-on-primary); }

.sb-section__inner {
  max-width: var(--sb-content-max);
  margin: 0 auto;
}

.sb-section-header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--sb-space-10);
}

.sb-section-overline {
  font-family: var(--sb-font-accent);
  font-weight: var(--sb-fw-extrabold);
  font-size: var(--sb-text-xs);
  letter-spacing: var(--sb-tracking-wide);
  text-transform: uppercase;
  color: var(--sb-primary);
  display: inline-block;
  margin-bottom: var(--sb-space-3);
}

.sb-section-title {
  font-family: var(--sb-font-body);
  font-weight: var(--sb-fw-extrabold);
  font-size: clamp(1.75rem, 3.5vw, var(--sb-text-3xl));
  line-height: 1.2;
  letter-spacing: var(--sb-tracking-tight);
  color: var(--sb-text);
  margin: 0 0 var(--sb-space-3);
}

.sb-section--brand .sb-section-title,
.sb-section--primary .sb-section-title {
  color: var(--sb-text-on-brand);
}

.sb-section-subtitle {
  font-size: var(--sb-text-lg);
  line-height: var(--sb-leading-relaxed);
  color: var(--sb-text-muted);
  margin: 0;
}
.sb-section--brand .sb-section-subtitle,
.sb-section--primary .sb-section-subtitle {
  color: rgba(255, 255, 255, 0.85);
}


/* ---------- Social proof strip ---------- */

/* Trust strip — lives between Pricing and Testimonials. Uses a white
   surface so it visually breaks from the subtle-gray Pricing section
   above it (otherwise the two merge into one indistinct band). Stays
   restrained on padding so it reads as a quiet credibility signal, not
   a marketing pitch. */
.sb-social-proof {
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 3.5vw, 2.5rem);
  background: #ffffff;
  border-top: 1px solid var(--sb-border-soft);
  border-bottom: 1px solid var(--sb-border-soft);
}

.sb-social-proof__inner {
  max-width: var(--sb-content-max);
  margin: 0 auto;
  text-align: center;
}

.sb-social-proof__label {
  font-family: var(--sb-font-accent);
  font-weight: var(--sb-fw-extrabold);
  font-size: var(--sb-text-xs);
  letter-spacing: var(--sb-tracking-wide);
  text-transform: uppercase;
  color: var(--sb-text-muted);
  margin: 0 0 var(--sb-space-3);
}

.sb-social-proof__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--sb-space-4), 4vw, var(--sb-space-10));
}
/* Stripe wordmark — inline SVG so it's pixel-crisp at any size and
   inherits color from currentColor (no grayscale filter washing it
   out the way the old low-res PNG required). */
.sb-social-proof__stripe {
  height: clamp(28px, 4vw, 38px);
  width: auto;
  color: #635bff; /* Official Stripe brand purple */
  display: block;
}

/* Secondary row of compliance / capability signals under the logo.
   Three short lines with leading icons — gives the strip enough
   substance that it doesn't feel like an orphaned logo. */
.sb-social-proof__signals {
  list-style: none;
  margin: var(--sb-space-4) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.sb-social-proof__signals li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  font-weight: var(--sb-fw-medium);
}
.sb-social-proof__signals .material-symbols-rounded {
  font-size: 1rem;
  color: var(--sb-primary);
}
@media (max-width: 600px) {
  .sb-social-proof__signals { gap: 0.75rem 1.5rem; }
}


/* ---------- Feature grid (3-column rounded MUI cards) ---------- */

.sb-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sb-space-6);
}
@media (max-width: 991.98px) { .sb-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599.98px) { .sb-feature-grid { grid-template-columns: 1fr; } }

.sb-feature-card {
  background: var(--sb-surface);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-sm);
  padding: var(--sb-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
  transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.sb-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-md);
}

.sb-feature-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--sb-radius-md);
  background: var(--sb-primary-soft);
  color: var(--sb-primary);
  margin-bottom: var(--sb-space-2);
}
.sb-feature-card__icon > .material-symbols-rounded,
.sb-feature-card__icon > .material-icons {
  font-size: 1.5rem;
}

.sb-feature-card__title {
  font-size: var(--sb-text-lg);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-text);
  margin: 0;
}

.sb-feature-card__body {
  font-size: var(--sb-text-sm);
  color: var(--sb-text-muted);
  line-height: var(--sb-leading-relaxed);
  margin: 0;
}


/* ---------- Portal previews (4-column video cards) ---------- */

.sb-portal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sb-space-5);
}
@media (max-width: 1199.98px) { .sb-portal-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599.98px)  { .sb-portal-grid { grid-template-columns: 1fr; } }

.sb-portal-card {
  background: var(--sb-surface);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-sm);
  padding: var(--sb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
}

.sb-portal-card__head {
  text-align: center;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sb-portal-card__title {
  font-size: var(--sb-text-base);
  font-weight: var(--sb-fw-semibold);
  margin: 0;
  color: var(--sb-text);
}
.sb-portal-card__subtitle {
  font-size: var(--sb-text-xs);
  color: var(--sb-text-muted);
  margin: 0;
}

.sb-portal-card__video {
  position: relative;
  border-radius: var(--sb-radius);
  overflow: hidden;
  background: var(--sb-gray-100);
  aspect-ratio: 16 / 9;
}
.sb-portal-card__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sb-portal-card__caption {
  text-align: center;
  font-size: var(--sb-text-xs);
  color: var(--sb-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-2);
}
.sb-portal-card__caption a {
  color: var(--sb-primary);
  text-decoration: none;
  font-weight: var(--sb-fw-semibold);
}
.sb-portal-card__caption a:hover { text-decoration: underline; }


/* ---------- "How it works" 3-step layout ---------- */

.sb-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sb-space-8);
  position: relative;
}
@media (max-width: 767.98px) { .sb-steps { grid-template-columns: 1fr; gap: var(--sb-space-6); } }

.sb-step {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-3);
}

.sb-step__number {
  width: 56px;
  height: 56px;
  border-radius: var(--sb-radius-pill);
  background: var(--sb-primary-soft);
  color: var(--sb-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sb-font-accent);
  font-weight: var(--sb-fw-extrabold);
  font-size: var(--sb-text-2xl);
}

.sb-step__title {
  font-size: var(--sb-text-lg);
  font-weight: var(--sb-fw-semibold);
  margin: 0;
  color: var(--sb-text);
}

.sb-step__body {
  font-size: var(--sb-text-sm);
  color: var(--sb-text-muted);
  line-height: var(--sb-leading-relaxed);
  max-width: 22rem;
  margin: 0;
}


/* ---------- Pricing ---------- */

.sb-pricing-toggle {
  display: inline-flex;
  background: var(--sb-bg-page);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-pill);
  padding: 4px;
  gap: 2px;
}
.sb-pricing-toggle .btn {
  border: none;
  border-radius: var(--sb-radius-pill) !important;
  padding: 0.5rem 1.25rem;
  font-size: var(--sb-text-sm);
  font-weight: var(--sb-fw-semibold);
  background: transparent;
  color: var(--sb-text-muted);
  /* Restrict the transition to just the color/bg properties so the
     button can't visibly "grow" via box-shadow during state changes. */
  transition: background-color 0.15s ease, color 0.15s ease !important;
  box-shadow: none !important;
}
.sb-pricing-toggle .btn:hover {
  background: var(--sb-bg-subtle);
  color: var(--sb-text);
}
.sb-pricing-toggle .btn.btn-primary,
.sb-pricing-toggle .btn.active {
  background: var(--sb-primary);
  color: var(--sb-text-on-primary);
}
/* Mouse focus / active: no halo at all — the pill container itself
   already visually groups the two options. */
.sb-pricing-toggle .btn:focus,
.sb-pricing-toggle .btn:active,
.sb-pricing-toggle .btn.btn-primary:focus,
.sb-pricing-toggle .btn.btn-outline-primary:focus {
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Keyboard focus only: subtle emerald ring for a11y. */
.sb-pricing-toggle .btn:focus-visible {
  outline: 2px solid var(--sb-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}


/* ---------- Testimonials (auto-scroll carousel preserved) ---------- */

.sb-testimonials__track {
  display: flex;
  gap: var(--sb-space-5);
  overflow: hidden;
  padding: var(--sb-space-2) 0;
}

.sb-testimonial-card {
  background: var(--sb-surface);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-sm);
  padding: var(--sb-space-6);
  min-width: clamp(320px, 28vw, 380px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
}

.sb-testimonial-card__quote {
  font-size: var(--sb-text-base);
  line-height: var(--sb-leading-relaxed);
  color: var(--sb-text);
  margin: 0;
}

.sb-testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-top: var(--sb-space-3);
  border-top: 1px solid var(--sb-border-soft);
  margin-top: auto;
}
.sb-testimonial-card__name {
  font-size: var(--sb-text-sm);
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-text);
}
.sb-testimonial-card__role {
  font-size: var(--sb-text-xs);
  color: var(--sb-text-muted);
}


/* ---------- FAQ accordion ---------- */

.sb-faq {
  max-width: 48rem;
  margin: 0 auto;
}


/* ---------- Final CTA band ----------
   Deep midnight gradient with an emerald glow that matches the hero
   banner. Headline is explicitly white because the global h2 rule sets
   color to dark slate (which would render invisible on a dark bg).      */

.sb-cta-band {
  background: linear-gradient(135deg, #0b1226 0%, #0f172a 45%, #134e4a 100%);
  color: var(--sb-text-on-brand);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 3.5vw, 2.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sb-cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 88% 12%, rgba(16, 185, 129, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(6, 182, 212, 0.16) 0%, transparent 50%);
  pointer-events: none;
}

.sb-cta-band__inner {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-5);
}

/* Critical: override the global heading color so the title shows up
   white on the dark midnight background. */
.sb-cta-band__title,
.sb-cta-band h2.sb-cta-band__title {
  font-family: var(--sb-font-body);
  font-weight: var(--sb-fw-extrabold);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: var(--sb-tracking-tight);
  color: #ffffff !important;
  margin: 0;
}

.sb-cta-band__subtitle {
  font-size: var(--sb-text-lg);
  color: rgba(255, 255, 255, 0.85) !important;
  max-width: 36rem;
  line-height: 1.5;
  margin: 0;
}

/* CTA buttons inside the dark band — emerald primary, white-outline ghost. */
.sb-cta-band .sb-hero__actions {
  margin-top: var(--sb-space-3);
}
.sb-cta-band .btn-primary {
  background: var(--sb-primary) !important;
  border-color: var(--sb-primary) !important;
  color: var(--sb-text-on-primary) !important;
  box-shadow: 0 10px 24px -10px rgba(16, 185, 129, 0.55);
}
.sb-cta-band .btn-primary:hover {
  background: var(--sb-primary-hover) !important;
  border-color: var(--sb-primary-hover) !important;
}
.sb-cta-band .btn-ghost {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
.sb-cta-band .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: #fff !important;
}


/* ---------- Footer ---------- */

.sb-footer {
  background: var(--sb-bg-subtle);
  border-top: 1px solid var(--sb-border-soft);
  padding: var(--sb-space-16) var(--sb-space-6) var(--sb-space-8);
  margin-top: 0;
}

.sb-footer__inner {
  max-width: var(--sb-content-max);
  margin: 0 auto;
}

.sb-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sb-space-10);
  padding-bottom: var(--sb-space-10);
  border-bottom: 1px solid var(--sb-border-soft);
}
@media (max-width: 767.98px) {
  .sb-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--sb-space-8);
  }
}
@media (max-width: 479.98px) {
  .sb-footer__top { grid-template-columns: 1fr; }
}

.sb-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-3);
}
.sb-footer__brand-logo {
  display: flex;
  align-items: center;
  gap: var(--sb-space-2);
  font-weight: var(--sb-fw-extrabold);
  font-size: var(--sb-text-lg);
  color: var(--sb-text);
  text-decoration: none;
}
.sb-footer__tagline {
  font-size: var(--sb-text-sm);
  color: var(--sb-text-muted);
  line-height: var(--sb-leading-relaxed);
  margin: 0;
  max-width: 18rem;
}

.sb-footer__col-title {
  font-family: var(--sb-font-body);
  font-size: var(--sb-text-xs);
  font-weight: var(--sb-fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wide);
  color: var(--sb-text-muted);
  margin: 0 0 var(--sb-space-3);
}

.sb-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-2);
}
.sb-footer__links a {
  font-size: var(--sb-text-sm);
  color: var(--sb-text);
  text-decoration: none;
  font-weight: var(--sb-fw-medium);
}
.sb-footer__links a:hover {
  color: var(--sb-primary);
  text-decoration: none;
}

.sb-footer__bottom {
  padding-top: var(--sb-space-5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sb-space-4);
  font-size: var(--sb-text-xs);
  color: var(--sb-text-muted);
}


/* ---------- Seasonal banner (new-theme replacement styling) ----------
   Re-styles the existing .seasonal-banner DOM with a calmer, more refined
   look that fits the new design system. Same HTML, no JS changes.

   Layout: spans the full viewport width with content centered, more
   generous padding so it reads as a deliberate announcement rather than
   a cramped strip.
   --------------------------------------------------------------------------- */

.seasonal-banner {
  position: relative;
  background: linear-gradient(90deg, #0b1226 0%, #0f172a 35%, #134e4a 100%) !important;
  color: var(--sb-text-on-brand) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10) !important;
  padding: 0.75rem 0 !important;
  height: auto !important;
  min-height: 52px !important;
  width: 100% !important;
  z-index: var(--sb-z-banner) !important;
}

/* Subtle emerald glow on the right edge, mirroring the hero band. */
.seasonal-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle at 90% 50%, rgba(16, 185, 129, 0.22) 0%, transparent 55%);
  z-index: 0;
}

/* Override Bootstrap's .container max-width so the banner spans the full
   viewport — content stays nicely centered via .banner-content's flex. */
.seasonal-banner > .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: clamp(1rem, 4vw, 2.5rem) !important;
  padding-right: clamp(1rem, 4vw, 2.5rem) !important;
  position: relative;
  z-index: 1;
}

.seasonal-banner .banner-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.75rem, 2vw, 1.5rem) !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

.seasonal-banner .banner-message {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 0 1 auto !important;
  text-align: center !important;
}

/* Reset old MD theme variants (spring/summer/fall/winter) under new theme. */
.seasonal-banner.spring,
.seasonal-banner.summer,
.seasonal-banner.fall,
.seasonal-banner.winter {
  background: linear-gradient(90deg, #0b1226 0%, #0f172a 35%, #134e4a 100%) !important;
  color: var(--sb-text-on-brand) !important;
}

.seasonal-banner .seasonal-message {
  color: var(--sb-text-on-brand) !important;
  font-family: var(--sb-font-body) !important;
  font-weight: var(--sb-fw-medium) !important;
  font-size: 0.9375rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.seasonal-banner .banner-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 0 0 auto !important;
}

.seasonal-banner .seasonal-banner-btn.claim-offer {
  background-color: var(--sb-primary) !important;
  color: var(--sb-text-on-primary) !important;
  border: none !important;
  border-radius: var(--sb-radius-pill) !important;
  font-family: var(--sb-font-body) !important;
  font-weight: var(--sb-fw-semibold) !important;
  padding: 0.5rem 1.125rem !important;
  font-size: 0.8125rem !important;
  height: auto !important;
  line-height: 1.25 !important;
  box-shadow: 0 4px 12px -4px rgba(16, 185, 129, 0.55) !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}
.seasonal-banner .seasonal-banner-btn.claim-offer:hover {
  background-color: var(--sb-primary-hover) !important;
  color: var(--sb-text-on-primary) !important;
  transform: translateY(-1px) !important;
}
.seasonal-banner .seasonal-banner-btn.close-btn {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.65) !important;
  border: none !important;
  box-shadow: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--sb-radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}
.seasonal-banner .seasonal-banner-btn.close-btn .material-icons {
  font-size: 18px !important;
  line-height: 1 !important;
}
.seasonal-banner .seasonal-banner-btn.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: var(--sb-text-on-brand) !important;
}

@media (max-width: 575.98px) {
  .seasonal-banner { padding: 0.625rem 0 !important; }
  .seasonal-banner .seasonal-message { font-size: 0.8125rem !important; }
  .seasonal-banner .seasonal-banner-btn.claim-offer { font-size: 0.75rem !important; padding: 0.4rem 0.875rem !important; }
}


/* ---------- Demo modal "select portal" radio buttons fix ----------
   Full layout lockdown under the new theme. The inline <style> block
   inside #requestDemoModal applies `transition: all 0.2s ease` plus
   `transform: translateY(-2px)` on hover, and Bootstrap's .btn / .btn-
   outline-primary cascade adds its own focus halo (blue by default, now
   emerald via sb-base.css). Together they produce visible stretching
   and a blue-flash on click.

   We override every property that can affect the box model, and use
   `contain: layout style` so nothing inside one label can cause a
   reflow that affects the sibling labels in the grid. Transitions
   are restricted to color-only properties so no visible size animation
   is possible. Mouse-click focus halo is suppressed; keyboard users
   still get an emerald :focus-visible ring for a11y.                       */

/* Compact portal chips — fixed size so video reload can't reflow them. */
.demo-type-selector {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  gap: 0.35rem !important;
  width: 100% !important;
  contain: layout !important;
}

.demo-type-selector label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  flex: 1 1 calc(50% - 0.2rem) !important;
  width: calc(50% - 0.2rem) !important;
  min-width: calc(50% - 0.2rem) !important;
  max-width: calc(50% - 0.2rem) !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  margin: 0 !important;
  padding: 0.3rem 0.55rem !important;
  border: 1px solid var(--sb-border, #e2e8f0) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  color: var(--sb-brand, #0f172a) !important;
  font-family: var(--sb-font-body) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
  contain: strict !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.demo-type-selector label:hover {
  background-color: rgba(16, 185, 129, 0.08) !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  color: var(--sb-brand, #0f172a) !important;
  transform: none !important;
  box-shadow: none !important;
}

.demo-type-selector .btn-check:checked + label {
  background-color: var(--sb-primary) !important;
  border-color: var(--sb-primary) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.demo-type-selector .btn-check:checked + label:hover {
  background-color: var(--sb-primary-hover) !important;
  border-color: var(--sb-primary-hover) !important;
  color: #fff !important;
}

.demo-type-selector .btn-check:checked + label .material-icons,
.demo-type-selector .btn-check:checked + label .material-symbols-rounded {
  color: #fff !important;
}

.demo-type-selector .material-icons,
.demo-type-selector .material-symbols-rounded {
  display: inline-flex !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  color: var(--sb-primary) !important;
  transition: color 0.15s ease !important;
  flex: 0 0 auto !important;
}

/* Mouse focus / active: absolutely no halo or movement. */
.demo-type-selector .btn-check:focus + label,
.demo-type-selector .btn-check:active + label,
.demo-type-selector .btn:focus,
.demo-type-selector .btn:active,
.demo-type-selector label:focus,
.demo-type-selector label:active {
  outline: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Keyboard focus only: subtle emerald ring for accessibility. */
.demo-type-selector .btn-check:focus-visible + label,
.demo-type-selector .btn:focus-visible,
.demo-type-selector label:focus-visible {
  outline: 2px solid var(--sb-primary) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

/* Tablet / mobile: keep compact 2-col chips */
@media (max-width: 768px) {
  .demo-type-selector { gap: 0.35rem !important; }
  .demo-type-selector label {
    flex: 1 1 calc(50% - 0.2rem) !important;
    width: calc(50% - 0.2rem) !important;
    min-width: calc(50% - 0.2rem) !important;
    max-width: calc(50% - 0.2rem) !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0.3rem 0.5rem !important;
    font-size: 0.72rem !important;
  }
}

/* Mobile: keep 2-col compact chips */
@media (max-width: 576px) {
  .demo-type-selector { gap: 0.3rem !important; }
  .demo-type-selector label {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0.25rem 0.45rem !important;
    font-size: 0.7rem !important;
  }
  .demo-type-selector .material-icons,
  .demo-type-selector .material-symbols-rounded {
    font-size: 15px !important;
    margin: 0 !important;
  }
}

/* ---------- Demo modal vertical stability ----------
   Click → video.load() → modal body height briefly changes → buttons
   appear to grow/snap. Defense-in-depth:

   1. Disable every transition/animation inside the modal so nothing
      can VISIBLY animate growth.
   2. Anchor the dialog to the top of the viewport (no recenter).
   3. Lock subtitle min-height so text-length variation doesn't reflow.
   4. CSS containment on the video-preview block so internal reflows
      can't propagate to the rest of the modal body.
   5. Black bg on video so source-swap doesn't briefly show transparency.
   --------------------------------------------------------------------------- */

/* Compact demo request modal — same content, less screen real estate. */
#requestDemoModal .demo-modal__dialog,
#requestDemoModal .modal-dialog {
  max-width: 480px;
  width: calc(100% - 1.5rem);
  margin: 1rem auto;
  min-height: auto !important;
}

#requestDemoModal .modal-content {
  border: 1px solid var(--sb-border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(15, 23, 42, 0.28);
  overflow: hidden;
}

#requestDemoModal .modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem 0.65rem;
  border-bottom: 1px solid var(--sb-border, #e2e8f0);
  text-align: left;
}

#requestDemoModal .demo-modal__heading {
  flex: 1;
  min-width: 0;
}

#requestDemoModal .modal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--sb-brand, #0f172a);
  line-height: 1.25;
}

#requestDemoModal .demo-modal__sub {
  margin: 0.2rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sb-primary, #10b981);
}

#requestDemoModal .modal-body {
  padding: 0.85rem 1.1rem 1.1rem;
  max-height: min(78vh, 640px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#requestDemoModal .demo-modal__field {
  margin-bottom: 0.75rem;
}

#requestDemoModal .demo-modal__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sb-text-muted, #64748b);
}

/* Modal-scoped chips inherit the compact hard-lock above; no extra size. */
#requestDemoModal .demo-type-selector {
  gap: 0.35rem !important;
}

#requestDemoModal .demo-video-preview {
  margin: 0 0 0.75rem;
  padding: 0.55rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid var(--sb-border, #e2e8f0);
  contain: layout style;
}

#requestDemoModal .video-container {
  border-radius: 8px;
  overflow: hidden;
  contain: layout style paint;
  max-width: 360px;
  margin: 0 auto;
}

#requestDemoModal .ratio.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

#requestDemoModal .ratio.ratio-16x9 > video {
  background-color: #000;
  border-radius: 8px;
}

#requestDemoModal .demo-modal__preview-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--sb-text-muted, #64748b);
}

#requestDemoModal .demo-modal__preview-note .material-icons {
  font-size: 14px;
  opacity: 0.75;
}

#requestDemoModal #demoSubtitle,
#requestDemoModal .demo-modal__subtitle {
  min-height: 2.6em;
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--sb-text-muted, #64748b);
}

#requestDemoModal .form-control {
  border-radius: 10px;
  border: 1px solid var(--sb-border, #e2e8f0);
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
}

#requestDemoModal .form-control:focus {
  border-color: var(--sb-primary, #10b981);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

#requestDemoModal .demo-modal__checks {
  display: grid;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
}

#requestDemoModal .demo-modal__check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--sb-text-muted, #64748b);
  cursor: pointer;
}

#requestDemoModal .demo-modal__check input {
  margin-top: 0.15rem;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
}

#requestDemoModal #demoSubmitBtn {
  border: 0;
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.925rem;
  font-weight: 700;
  background: var(--sb-primary, #10b981);
}

#requestDemoModal #demoSubmitBtn:hover {
  background: var(--sb-primary-hover, #059669);
  transform: none;
  box-shadow: none;
}

@media (max-width: 576px) {
  #requestDemoModal .modal-dialog {
    max-width: calc(100% - 1rem);
    margin: 0.5rem auto;
  }
  #requestDemoModal .modal-body {
    max-height: 85vh;
  }
  #requestDemoModal .video-container {
    max-width: 100%;
  }
}


/* ---------- Auth button compat (used by base_clean.html else branch elements
   that may render under new theme during transition) ---------- */

.btn-login.sb-btn-ghost,
.btn-signup.sb-btn-primary {
  border-radius: var(--sb-radius);
  font-weight: var(--sb-fw-semibold);
  font-size: var(--sb-text-sm);
  padding: 0.5rem 1rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}


/* ---------- Pricing card refinements ---------- */
/* The included subscription/*.html partials render Bootstrap .card elements.
   sb-base.css already restyles these, but we want extra polish in the
   pricing context. */

.sb-pricing-grid .card {
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-md);
  box-shadow: var(--sb-shadow-sm);
  transition: transform var(--sb-transition), box-shadow var(--sb-transition);
}
.sb-pricing-grid .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sb-shadow-lg);
}
.sb-pricing-grid .card.popular,
.sb-pricing-grid .card.featured {
  border-top: 4px solid var(--sb-primary);
}


/* ---------- Stripe-style trust badges row ---------- */

.sb-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sb-space-6);
  margin-top: var(--sb-space-6);
}
.sb-trust-row img { max-height: 32px; opacity: 0.85; }
.sb-trust-row span {
  font-size: var(--sb-text-xs);
  color: var(--sb-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--sb-tracking-wide);
}


/* =============================================================================
   Auth pages (sb-auth-*)
   -----------------------------------------------------------------------------
   Shared layout for login / signup / password reset / verification screens.
   Centered card on a subtle background, no gradient header, emerald CTA.
   ========================================================================== */

.sb-auth {
  /* Anchor the card near the top of the viewport (was align-items: center,
     which floated the form in the middle of the screen and felt low).
     Keeps a generous min-height so the page still fills the screen on
     short forms (login) without leaving a hard footer gap. */
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.5rem, 6vh, 5rem) 1rem clamp(3rem, 8vh, 6rem);
  background: var(--sb-bg-page);
}
/* On larger viewports give an extra nudge of top breathing room so the
   card sits roughly a third of the way down rather than glued to the
   navbar. */
@media (min-height: 800px) {
  .sb-auth {
    padding-top: clamp(4rem, 10vh, 7rem);
  }
}
.sb-auth__inner {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}
.sb-auth--wide .sb-auth__inner {
  /* Used by signup flows that need room for the audience gate / longer forms. */
  max-width: 36rem;
}

.sb-auth__brand {
  text-align: center;
  margin: 0 0 1.5rem;
}
.sb-auth__brand a {
  color: var(--sb-text);
  text-decoration: none;
  font-weight: var(--sb-fw-extrabold);
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.sb-auth__card {
  background: var(--sb-bg-card);
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-md);
  overflow: hidden;
}

.sb-auth__header {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem) 0;
  text-align: center;
}
.sb-auth__title {
  font-family: var(--sb-font-body);
  font-size: clamp(1.375rem, 2.5vw, 1.625rem);
  font-weight: var(--sb-fw-extrabold);
  color: var(--sb-text);
  letter-spacing: -0.01em;
  margin: 0 0 0.375rem;
  line-height: 1.25;
}
.sb-auth__subtitle {
  color: var(--sb-text-muted);
  font-size: 0.9375rem;
  margin: 0;
  line-height: 1.5;
}

.sb-auth__body {
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 3vw, 2.25rem);
}
.sb-auth__field {
  margin-bottom: 0.875rem;
}
.sb-auth__field:last-of-type {
  margin-bottom: 1.25rem;
}
.sb-auth__field-error {
  color: var(--sb-danger, #b91c1c);
  font-size: 0.8125rem;
  margin: 0.375rem 0 0;
}
.sb-auth__actions {
  margin-top: 1.25rem;
}
/* Stacked variant — two full-width CTAs separated by an "or" divider.
   Used on the subscription auth_choice page (Create account / Sign in). */
.sb-auth__actions--stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 0;
}
.sb-auth__submit {
  width: 100%;
  font-weight: var(--sb-fw-bold);
}
/* Ghost / secondary variant of the submit button — used as the second
   option in a stacked action group. Pairs with .btn-outline-primary. */
.sb-auth__submit--ghost {
  background: transparent;
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
}
.sb-auth__submit--ghost:hover {
  background: var(--sb-bg-subtle);
  border-color: var(--sb-border-strong, var(--sb-text-muted));
  color: var(--sb-text);
}
/* Visual "or" separator between two stacked action buttons. */
.sb-auth__divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1rem 0;
  color: var(--sb-text-muted);
  font-size: 0.75rem;
  font-weight: var(--sb-fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sb-auth__divider::before,
.sb-auth__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sb-border-soft);
}
.sb-auth__divider span {
  padding: 0 0.75rem;
}

.sb-auth__footer {
  padding: 1rem clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--sb-border-soft);
  background: var(--sb-bg-subtle, #f8fafc);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
}
.sb-auth__footer--center {
  justify-content: center;
}
.sb-auth__link {
  color: var(--sb-primary);
  text-decoration: none;
  font-weight: var(--sb-fw-semibold);
}
.sb-auth__link:hover { color: var(--sb-primary-hover); text-decoration: underline; }
.sb-auth__muted { color: var(--sb-text-muted); }

/* Form-control overrides specific to auth screens — slightly more padding. */
.sb-auth .form-control,
.sb-auth .form-select {
  padding-block: 0.625rem;
  font-size: 0.9375rem;
}

/* Audience gate (signup) */
.sb-auth__gate {
  text-align: center;
  margin-bottom: 0.5rem;
}
.sb-auth__gate-lead {
  color: var(--sb-text-muted);
  margin: 0 0 1rem;
}
.sb-auth__gate-buttons {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.sb-auth__gate-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.sb-auth__gate-card {
  text-align: left;
  background: var(--sb-bg-subtle, #f8fafc);
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-md);
  padding: 0.875rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sb-auth__gate-card:hover,
.sb-auth__gate-card:focus-visible {
  border-color: var(--sb-primary);
  background: #ecfdf5;
  outline: none;
}
.sb-auth__gate-card strong {
  display: block;
  color: var(--sb-text);
  font-weight: var(--sb-fw-bold);
  margin-bottom: 0.125rem;
}
.sb-auth__gate-card small {
  color: var(--sb-text-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* Audience toggle (signup) */
.sb-auth__toggle {
  display: inline-flex;
  background: var(--sb-bg-subtle, #f8fafc);
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-md);
  padding: 0.25rem;
  margin: 0 auto 1.25rem;
}
.sb-auth__toggle-btn {
  border: none;
  background: transparent;
  color: var(--sb-text-muted);
  font-weight: var(--sb-fw-semibold);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border-radius: calc(var(--sb-radius-md) - 4px);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sb-auth__toggle-btn.is-active {
  background: var(--sb-text);
  color: #fff;
}

/* Optional services / checkboxes on signup */
.sb-auth__check {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-md);
  margin-bottom: 0.625rem;
  font-size: 0.875rem;
}
.sb-auth__check input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.sb-auth__check strong { font-weight: var(--sb-fw-semibold); color: var(--sb-text); }
.sb-auth__check small { display: block; color: var(--sb-text-muted); margin-top: 0.125rem; font-size: 0.8125rem; }

/* Inline notice / alert refined for auth */
.sb-auth__notice {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  border-radius: var(--sb-radius-md);
  padding: 0.75rem 0.875rem;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
.sb-auth__notice--info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e3a8a;
}
.sb-auth__notice--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.sb-auth__notice--danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* Help-text block (e.g., password requirements) */
.sb-auth__help {
  background: var(--sb-bg-subtle, #f8fafc);
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-md);
  padding: 0.75rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  margin-bottom: 1rem;
}
.sb-auth__help ul {
  margin: 0.375rem 0 0 1.125rem;
  padding: 0;
}
.sb-auth__help strong { color: var(--sb-text); }

/* Legal footnote at bottom of signup */
.sb-auth__legal {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--sb-text-muted);
  line-height: 1.5;
}
.sb-auth__legal--center { text-align: center; } /* alias for clarity */

/* Muted helper text rendered OUTSIDE the card (below it), e.g. the
   "Need help? Contact us." line on the subscription auth_choice page.
   Distinct from .sb-auth__footer which is styled as a card footer
   (border-top, background, padding). */
.sb-auth__help-below {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
}
.sb-auth__legal a { color: var(--sb-text); text-decoration: underline; text-underline-offset: 2px; }
.sb-auth__legal a:hover { color: var(--sb-primary); }

/* Hide reCAPTCHA badge so it doesn't clutter the auth form */
.sb-auth .grecaptcha-badge { visibility: hidden !important; }


/* =============================================================================
   Focus chrome (sb-focus-*)
   -----------------------------------------------------------------------------
   Minimal "checkout chrome" used by base_focus.html for transactional pages
   (subscription checkout, auth choice, future success/cancel pages). Strips
   the marketing nav + footer so the user can focus on a single action; keeps
   a slim brand bar + user menu so they don't lose context or escape route.
   ========================================================================== */

body.sb-focus-body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--sb-bg-page);
  color: var(--sb-text);
  font-family: var(--sb-font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sb-focus__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem clamp(1.25rem, 4vw, 2.5rem);
  background: var(--sb-bg-card);
  border-bottom: 1px solid var(--sb-border-soft);
  gap: 1rem;
  flex-wrap: wrap;
}
.sb-focus__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sb-text);
  text-decoration: none;
  font-weight: var(--sb-fw-extrabold);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.sb-focus__brand:hover { color: var(--sb-text); }
.sb-focus__brand img,
.sb-focus__brand svg {
  width: 24px;
  height: 24px;
}
.sb-focus__right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

/* Logged-in user pill */
.sb-focus__user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem 0.375rem 0.375rem;
  background: var(--sb-bg-card);
  border: 1px solid var(--sb-border-soft);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--sb-text);
  font-family: var(--sb-font-body);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.sb-focus__user:hover {
  border-color: var(--sb-border);
  background: var(--sb-bg-subtle, #f8fafc);
}
.sb-focus__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sb-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: var(--sb-fw-bold);
  flex-shrink: 0;
}
.sb-focus__user-email {
  font-weight: var(--sb-fw-medium);
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .sb-focus__user-email { display: none; }
}

/* Anonymous "Sign in" link */
.sb-focus__signin {
  font-size: 0.875rem;
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-text);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
}
.sb-focus__signin:hover { color: var(--sb-primary); }

/* Main content area — fills vertical space so footer sits at the bottom */
.sb-focus__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 6vh, 4rem) 1.25rem clamp(2rem, 4vh, 3rem);
}

/* Minimal footer — single line, tiny, just legal links + copyright */
.sb-focus__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 1rem clamp(1.25rem, 4vw, 2.5rem);
  border-top: 1px solid var(--sb-border-soft);
  background: var(--sb-bg-card);
  font-size: 0.75rem;
  color: var(--sb-text-muted);
}
.sb-focus__footer-links {
  display: inline-flex;
  gap: 1rem;
}
.sb-focus__footer-links a {
  color: var(--sb-text-muted);
  text-decoration: none;
}
.sb-focus__footer-links a:hover {
  color: var(--sb-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* =============================================================================
   Checkout card (sb-checkout-*)
   -----------------------------------------------------------------------------
   Component used inside base_focus.html for subscription checkout, plan
   summaries, etc. Centered card with a clean header, price, feature list,
   and a single primary CTA.
   ========================================================================== */

.sb-checkout {
  max-width: 32rem;
  margin: 0 auto;
  width: 100%;
}
.sb-checkout__card {
  background: var(--sb-bg-card);
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-lg);
  box-shadow: var(--sb-shadow-md);
  overflow: hidden;
}
.sb-checkout__header {
  padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) clamp(1rem, 2vw, 1.5rem);
  text-align: center;
  border-bottom: 1px solid var(--sb-border-soft);
  background: var(--sb-bg-subtle, #f8fafc);
}
.sb-checkout__eyebrow {
  font-size: 0.6875rem;
  font-weight: var(--sb-fw-bold);
  color: var(--sb-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.sb-checkout__title {
  font-family: var(--sb-font-body);
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-weight: var(--sb-fw-extrabold);
  letter-spacing: -0.01em;
  color: var(--sb-text);
  margin: 0 0 0.25rem;
}
.sb-checkout__plan-name {
  font-size: 0.9375rem;
  color: var(--sb-text-muted);
  margin: 0;
}
.sb-checkout__body {
  padding: clamp(1.5rem, 3vw, 2rem);
}
.sb-checkout__price-block {
  text-align: center;
  margin-bottom: 1.5rem;
}
.sb-checkout__description {
  color: var(--sb-text-muted);
  font-size: 0.9375rem;
  margin: 0 0 0.875rem;
}
.sb-checkout__price {
  font-family: var(--sb-font-body);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: var(--sb-fw-extrabold);
  color: var(--sb-text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.sb-checkout__price-suffix {
  font-size: 0.75em;
  font-weight: var(--sb-fw-semibold);
  color: var(--sb-text-muted);
  letter-spacing: 0;
  margin-left: 0.25rem;
}
.sb-checkout__monthly-equiv {
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  margin: 0.25rem 0 0;
}
.sb-checkout__features-heading {
  font-size: 0.6875rem;
  font-weight: var(--sb-fw-bold);
  color: var(--sb-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.sb-checkout__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.sb-checkout__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.4375rem 0;
  font-size: 0.9375rem;
  color: var(--sb-text);
}
.sb-checkout__features li i,
.sb-checkout__features li .material-symbols-rounded {
  font-size: 1.125rem;
  color: var(--sb-primary);
  flex-shrink: 0;
  margin-top: 0.0625rem;
}
.sb-checkout__cta {
  width: 100%;
  font-weight: var(--sb-fw-bold);
  padding-block: 0.875rem;
  /* Use flex on the button itself so the lock icon and label center on the
     same baseline. Material Symbols has its own line-height that knocks
     them out of alignment when rendered as plain inline children. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1;
}
.sb-checkout__cta i,
.sb-checkout__cta .material-symbols-rounded {
  font-size: 1.125rem;
  line-height: 1;
}
.sb-checkout__legal {
  margin: 0.875rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--sb-text-muted);
  line-height: 1.5;
}
.sb-checkout__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 1rem auto 0;
  font-size: 0.8125rem;
  color: var(--sb-text-muted);
  text-decoration: none;
  font-weight: var(--sb-fw-semibold);
  justify-content: center;
}
.sb-checkout__back:hover { color: var(--sb-primary); }


/* =============================================================================
   Plan picker (sb-plan-*)
   -----------------------------------------------------------------------------
   Pricing grid used on /payments/plans/ (and reusable anywhere else we need
   plan selection cards on the new theme). Three columns at desktop, single
   column on mobile, with optional "Most Popular" featured card.
   ========================================================================== */

.sb-plan-page {
  width: 100%;
  max-width: var(--sb-content-max);
  margin: 0 auto;
}
.sb-plan-page__header {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
}
.sb-plan-page__eyebrow {
  font-size: 0.6875rem;
  font-weight: var(--sb-fw-bold);
  color: var(--sb-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.625rem;
}
.sb-plan-page__title {
  font-family: var(--sb-font-body);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--sb-fw-extrabold);
  color: var(--sb-text);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.625rem;
}
.sb-plan-page__subtitle {
  color: var(--sb-text-muted);
  font-size: 1rem;
  margin: 0;
  line-height: 1.55;
}

.sb-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .sb-plan-grid { grid-template-columns: 1fr; max-width: 28rem; margin: 0 auto; }
}

.sb-plan-card {
  position: relative;
  background: var(--sb-bg-card);
  border: 1px solid var(--sb-border-soft);
  border-radius: var(--sb-radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.sb-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sb-shadow-md);
  border-color: var(--sb-border);
}
.sb-plan-card--featured {
  border-color: var(--sb-primary);
  border-width: 2px;
  padding-top: clamp(1.875rem, 3vw, 2.5rem); /* room for ribbon */
  box-shadow: 0 12px 32px -12px rgba(16, 185, 129, 0.35);
}
.sb-plan-card--current {
  border-color: var(--sb-primary);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.04) 0%, var(--sb-bg-card) 60%);
}

.sb-plan-card__ribbon {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  background: var(--sb-primary);
  color: var(--sb-text-on-primary);
  font-size: 0.6875rem;
  font-weight: var(--sb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3125rem 0.625rem;
  border-radius: 999px;
}
.sb-plan-card__current-tag {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  background: var(--sb-bg-subtle, #f8fafc);
  color: var(--sb-primary);
  border: 1px solid var(--sb-primary);
  font-size: 0.6875rem;
  font-weight: var(--sb-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
}

.sb-plan-card__name {
  font-family: var(--sb-font-body);
  font-size: 1.125rem;
  font-weight: var(--sb-fw-extrabold);
  color: var(--sb-text);
  letter-spacing: -0.01em;
  margin: 0 0 0.25rem;
}
.sb-plan-card__description {
  color: var(--sb-text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  min-height: 2.625rem;
}
.sb-plan-card__price-block {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 0 0 0.25rem;
}
.sb-plan-card__price {
  font-family: var(--sb-font-body);
  font-size: clamp(2.25rem, 4vw, 2.75rem);
  font-weight: var(--sb-fw-extrabold);
  color: var(--sb-text);
  letter-spacing: -0.02em;
  line-height: 1;
}
.sb-plan-card__price-suffix {
  color: var(--sb-text-muted);
  font-size: 0.9375rem;
  font-weight: var(--sb-fw-semibold);
}
.sb-plan-card__properties {
  background: rgba(16, 185, 129, 0.08);
  border-radius: var(--sb-radius-md);
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  text-align: center;
}
.sb-plan-card__properties-label {
  font-size: 0.625rem;
  font-weight: var(--sb-fw-bold);
  color: #065f46;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.25rem;
}
.sb-plan-card__properties-value {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--sb-font-body);
  font-size: 1.375rem;
  font-weight: var(--sb-fw-extrabold);
  color: var(--sb-primary);
  letter-spacing: -0.01em;
  line-height: 1;
}
.sb-plan-card__properties-value i,
.sb-plan-card__properties-value .material-symbols-rounded {
  font-size: 1.375rem;
}

.sb-plan-card__callout {
  background: linear-gradient(135deg, #047857, var(--sb-primary));
  color: #fff;
  border-radius: var(--sb-radius-md);
  padding: 0.625rem 0.875rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  margin: 0 0 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.sb-plan-card__callout i,
.sb-plan-card__callout .material-symbols-rounded {
  font-size: 1.125rem;
  flex-shrink: 0;
}
.sb-plan-card__callout strong { font-weight: var(--sb-fw-bold); }

.sb-plan-card__features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  flex: 1;
}
.sb-plan-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
  color: var(--sb-text);
  line-height: 1.4;
}
.sb-plan-card__features li i,
.sb-plan-card__features li .material-symbols-rounded {
  font-size: 1.125rem;
  color: var(--sb-primary);
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

.sb-plan-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: auto;
}
.sb-plan-card__cta {
  width: 100%;
  font-weight: var(--sb-fw-bold);
  padding-block: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  line-height: 1.2;
  flex-direction: column;
}
.sb-plan-card__cta-sub {
  font-size: 0.75rem;
  font-weight: var(--sb-fw-semibold);
  opacity: 0.85;
  letter-spacing: 0;
}
.sb-plan-card__cta--current {
  background: var(--sb-text);
  color: #fff;
  border-color: var(--sb-text);
  cursor: not-allowed;
}
.sb-plan-card__savings {
  color: #047857;
  font-weight: var(--sb-fw-bold);
  margin-left: 0.25rem;
}
.sb-plan-card__cta--ghost .sb-plan-card__savings {
  color: #065f46;
}