/* ==========================================================================
   theme-v2.css — MathPapa visual-modernization layer
   --------------------------------------------------------------------------
   Loaded site-wide ONLY when the `theme_v2` flag is on (?theme=v2). It is
   linked AFTER Bootstrap 3 and each page's own stylesheet, so it layers on
   top without editing any existing rule. Flag off => this file never loads
   and the live site is byte-identical.

   Phase 1 scope: design tokens + typography. Buttons, nav, and footer are
   intentionally left for later phases (their text still inherits the new
   font, which is desired).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Brand stays MathPapa gold (#f1c40f / #dab10d). Everything downstream — and
   every later phase — consumes these variables instead of hardcoded values.
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --tv-brand:        #f1c40f;   /* MathPapa sunflower gold */
  --tv-brand-dark:   #dab10d;   /* hover / border gold */
  --tv-brand-tint:   #fef9e7;   /* faint gold wash for surfaces */

  /* Ink & neutrals (warm-cool slate, softer than pure #333) */
  --tv-ink:          #1f2733;   /* primary text */
  --tv-ink-soft:     #4a5568;   /* secondary text */
  --tv-ink-muted:    #718096;   /* captions, meta */
  --tv-border:       #e2e8f0;   /* hairline borders */
  --tv-surface:      #ffffff;
  --tv-surface-alt:  #f7f9fc;   /* page / section background */

  /* Links / interactive accent (blue — gold fails text contrast) */
  --tv-link:         #2b6cb0;
  --tv-link-hover:   #1c4f87;

  /* Semantic button colors (Phase 2). Each role keeps its existing meaning —
     gold=primary, green=positive, blue=info, red=destructive, gray=neutral —
     modernized to flatter shades. Green is muted to sit with the gold/ink
     palette; info (blue) is tied to --tv-link so info buttons match page links. */
  --tv-btn-primary-bg:       var(--tv-brand);
  --tv-btn-primary-text:     #1f2733;
  --tv-btn-primary-hover:    var(--tv-brand-dark);
  --tv-btn-success-bg:       #3a7d5f;
  --tv-btn-success-hover:    #336b52;
  --tv-btn-info-bg:          var(--tv-link);
  --tv-btn-info-hover:       var(--tv-link-hover);
  --tv-btn-danger-bg:        #e03131;
  --tv-btn-danger-hover:     #c92a2a;
  --tv-btn-neutral-bg:       #ffffff;
  --tv-btn-neutral-text:     #1f2733;
  --tv-btn-neutral-border:   #d3dae4;
  --tv-btn-neutral-hover-bg: #f1f4f9;
  --tv-radius-btn:           8px;
  --tv-focus-ring:           0 0 0 3px rgba(43, 108, 176, 0.40);

  /* Type scale (1.250 — major third), rooted at 16px.
     NOTE: values are in px, NOT rem. Bootstrap 3 sets `html{font-size:10px}`,
     so rem here would render at 62.5% of intent (body would be 10px). px keeps
     the scale correct regardless of the legacy 10px root, and matches the
     px-based existing stylesheets. */
  --tv-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --tv-fs-xs:   12px;
  --tv-fs-sm:   14px;
  --tv-fs-base: 16px;
  --tv-fs-lg:   20px;
  --tv-fs-xl:   25px;
  --tv-fs-2xl:  31px;
  --tv-fs-3xl:  39px;
  --tv-fs-4xl:  49px;

  --tv-lh-tight: 1.2;
  --tv-lh-base:  1.6;

  --tv-fw-normal: 400;
  --tv-fw-medium: 500;
  --tv-fw-semi:   600;
  --tv-fw-bold:   700;
  --tv-fw-black:  800;

  /* Spacing scale (later phases) — px for the same 10px-root reason as above */
  --tv-space-1: 4px;
  --tv-space-2: 8px;
  --tv-space-3: 12px;
  --tv-space-4: 16px;
  --tv-space-6: 24px;
  --tv-space-8: 32px;
  --tv-space-12: 48px;

  /* Radius & depth (later phases) */
  --tv-radius-sm: 6px;
  --tv-radius:    10px;
  --tv-radius-lg: 16px;
  --tv-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06),
                  0 1px 3px rgba(16, 24, 40, 0.10);
  --tv-shadow:    0 4px 6px -1px rgba(16, 24, 40, 0.08),
                  0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --tv-shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.12),
                  0 4px 8px -4px rgba(16, 24, 40, 0.08);
}

/* --------------------------------------------------------------------------
   2. Base typography
   Same-or-higher specificity than Bootstrap's base rules, loaded later, so
   these win without !important.
   -------------------------------------------------------------------------- */
body {
  font-family: var(--tv-font-sans);
  font-size: var(--tv-fs-base);
  line-height: var(--tv-lh-base);
  color: var(--tv-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";  /* Inter: friendlier 1/a/g glyphs */
}

/* Bootstrap sets font on these to inherit already, but be explicit. */
button, input, select, textarea, .btn, .form-control {
  font-family: var(--tv-font-sans);
}

p {
  line-height: var(--tv-lh-base);
}

/* --------------------------------------------------------------------------
   3. Headings — tighter leading, heavier weight, modern letter-spacing
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--tv-font-sans);
  /* No color here: headings inherit (body ink #1f2733 on light areas, white on
     dark sections like .cta-section). Forcing var(--tv-ink) broke that
     inheritance and put dark text on dark bands. Inheritance matches the
     original behavior while keeping the modern typeface/weight. */
  line-height: var(--tv-lh-tight);
  font-weight: var(--tv-fw-bold);
  letter-spacing: -0.011em;
  /* No margin-top reset: keep each heading's original top margin so page
     titles retain their breathing room from the nav bar (e.g. the ~20px gap
     above "Algebra Calculator"). Only typeface/weight/color are modernized. */
}

h1, .h1 { font-size: var(--tv-fs-3xl); font-weight: var(--tv-fw-black); letter-spacing: -0.02em; }
h2, .h2 { font-size: var(--tv-fs-2xl); letter-spacing: -0.017em; }
h3, .h3 { font-size: var(--tv-fs-xl); }
/* A couple of pages set `h3 { letter-spacing: 2px }` in an inline <style> block
   (calc/examples, mentor/home) which loads after this sheet and would otherwise
   win at equal specificity. `body h3` (0,0,2) reclaims the modern tracking. */
body h3 { letter-spacing: -0.011em; }
h4, .h4 { font-size: var(--tv-fs-lg); }
h5, .h5 { font-size: var(--tv-fs-base); font-weight: var(--tv-fw-semi); }
h6, .h6 { font-size: var(--tv-fs-sm);  font-weight: var(--tv-fw-semi);
          text-transform: uppercase; letter-spacing: 0.04em; color: var(--tv-ink-muted); }

.lead { font-size: var(--tv-fs-lg); font-weight: var(--tv-fw-normal);
        color: var(--tv-ink-soft); line-height: 1.5; }

small, .small { font-size: var(--tv-fs-sm); }

/* --------------------------------------------------------------------------
   4. Links
   -------------------------------------------------------------------------- */
a {
  color: var(--tv-link);
  transition: color 0.12s ease-in-out;
}
a:hover, a:focus {
  color: var(--tv-link-hover);
}

/* --------------------------------------------------------------------------
   5. Small global niceties
   -------------------------------------------------------------------------- */
::selection {
  background: var(--tv-brand);
  color: var(--tv-ink);
}

hr {
  border-top-color: var(--tv-border);
}

blockquote {
  border-left-color: var(--tv-brand);
  color: var(--tv-ink-soft);
  font-size: var(--tv-fs-lg);
  line-height: 1.5;
}

/* ==========================================================================
   PHASE 2 — Buttons
   One modern base treatment, semantic colors preserved. Padding is left to
   Bootstrap / page CSS so the math keypad (fixed 40px keys) and inline
   buttons don't reflow; the modern feel comes from radius, weight, flat
   color, transitions, and focus/hover states.
   ========================================================================== */

/* Base treatment shared by every .btn (display intentionally untouched — see
   the opt-in flex-centering block below). */
.btn {
  border-radius: var(--tv-radius-btn);
  font-weight: var(--tv-fw-semi);
  border-width: 1px;
  border-style: solid;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Flex-center the label — OPT-IN, not on every .btn.
   Centering via the flex box (instead of line-height math) reliably centers
   buttons with a tight fixed inline height (e.g. "More Examples",
   height:30px;line-height:20px) regardless of font metrics. But making a button
   a flex container reorders multi-child buttons, so we apply it only to solid
   single-text-child variants. Buttons NOT listed here keep Bootstrap's native
   inline-block and are safe by default:
     - .btn-ghost      (left-aligned icon+text app-store badges)
     - .mkey / .mkey2  (keypad keys; variable keys render a <math> glyph beside
                        an empty .inneranswer div)
     - any new/unknown button type
   The keypad reuses .btn-default/info/danger, so those three exclude .mkey. */
.btn-primary,
.btn-success,
.btn-warning,
.btn-info2,
.btn-cta-primary,
.btn-cta-secondary,
.btn-default:not(.mkey):not(.mkey2),
.btn-info:not(.mkey):not(.mkey2),
.btn-danger:not(.mkey):not(.mkey2) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Full-width buttons stay full-width and centered. */
.btn-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Subtle press affordance — prominent/inline buttons only, never the keypad */
.btn:not(.mkey):not(.mkey2):not(.navbar-toggle):hover {
  transform: translateY(-1px);
  box-shadow: var(--tv-shadow-sm);
}
.btn:not(.mkey):not(.mkey2):not(.navbar-toggle):active {
  transform: translateY(0);
  box-shadow: none;
}
/* Pricing cards: payments.css scales the button up on CARD hover
   (`.prices .panel:hover .btn { transform: scale(1.2) }`). Our subtle button
   lift is more specific and overrides it on BUTTON hover, so the button popped
   bigger on card-hover then snapped smaller on button-hover. Neutralize the
   card-hover scale (same specificity, loaded later) so the button just uses the
   consistent subtle lift everywhere. */
.prices .panel:hover .btn {
  transform: none;
}

/* Accessible keyboard focus ring that reads on any button color */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--tv-focus-ring);
}

/* --- Primary (gold brand action) --- */
.btn-primary,
.btn-cta-primary {
  background-color: var(--tv-btn-primary-bg);
  border-color: var(--tv-btn-primary-bg);
  color: var(--tv-btn-primary-text);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-cta-primary:hover, .btn-cta-primary:focus, .btn-cta-primary:active {
  background-color: var(--tv-btn-primary-hover);
  border-color: var(--tv-btn-primary-hover);
  color: var(--tv-btn-primary-text);
}

/* --- Success (positive / green) --- */
.btn-success {
  background-color: var(--tv-btn-success-bg);
  border-color: var(--tv-btn-success-bg);
  color: #fff;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background-color: var(--tv-btn-success-hover);
  border-color: var(--tv-btn-success-hover);
  color: #fff;
}

/* --- Info (blue) — also the keypad operator keys --- */
.btn-info {
  background-color: var(--tv-btn-info-bg);
  border-color: var(--tv-btn-info-bg);
  color: #fff;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background-color: var(--tv-btn-info-hover);
  border-color: var(--tv-btn-info-hover);
  color: #fff;
}

/* --- Info2 (outline blue) --- */
.btn-info2 {
  background-color: #fff;
  border-color: var(--tv-btn-info-bg);
  color: var(--tv-btn-info-bg);
}
.btn-info2:hover, .btn-info2:focus, .btn-info2:active {
  background-color: var(--tv-btn-info-bg);
  border-color: var(--tv-btn-info-bg);
  color: #fff;
}

/* --- Danger (destructive / red) — keypad "del" --- */
.btn-danger {
  background-color: var(--tv-btn-danger-bg);
  border-color: var(--tv-btn-danger-bg);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background-color: var(--tv-btn-danger-hover);
  border-color: var(--tv-btn-danger-hover);
  color: #fff;
}

/* --- Neutral (gray) — keypad digits, secondary inline actions --- */
.btn-default {
  background-color: var(--tv-btn-neutral-bg);
  border-color: var(--tv-btn-neutral-border);
  color: var(--tv-btn-neutral-text);
}
.btn-default:hover, .btn-default:focus, .btn-default:active {
  background-color: var(--tv-btn-neutral-hover-bg);
  border-color: var(--tv-btn-neutral-border);
  color: var(--tv-btn-neutral-text);
}

/* --- Ghost CTA (transparent on dark navbar / app-store links) --- */
.btn-cta-secondary,
.btn-ghost {
  border-radius: var(--tv-radius-btn);
}
/* App-store badge buttons keep their native left-aligned inline-block layout
   (excluded from the flex allow-list above). */
.btn-ghost {
  display: inline-block;
}

/* Keypad keys: flex-center the glyph on BOTH axes. This replaces the legacy
   centering, which left the label ~4px right (the `.inneranswer` container is
   width:95% with a 5px LEFT margin, overflowing the key) and ~2.5px high
   (top-flowing content in a fixed-height key). The only multi-child keys are
   the variable keys (x, y): an empty `.inneranswer` div beside a <math> glyph —
   hide the empty div so the glyph is the sole, centered flex item. Every other
   key has a single filled `.inneranswer`. (.mkey is kept out of the generic
   allow-list's inline-flex via :not(.mkey) so only this rule sets its display.) */
.mkey, .mkey2 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkey .inneranswer:empty,
.mkey2 .inneranswer:empty {
  display: none;
}
.btn-cta-secondary:hover, .btn-cta-secondary:focus,
.btn-ghost:hover, .btn-ghost:focus {
  background-color: rgba(255, 255, 255, 0.14);
}

/* Keep CTA border-width constant across states. The legacy CSS grows it
   1px -> 2px on hover; on an inline-flex button that shrinks the content box
   and nudges the baseline, shifting adjacent inline fields (e.g. the footer
   email input next to "Subscribe Now"). Only color should change on hover. */
.btn-cta-primary:hover, .btn-cta-primary:focus, .btn-cta-primary:active,
.btn-cta-secondary:hover, .btn-cta-secondary:focus, .btn-cta-secondary:active {
  border-width: 1px;
}

/* --- "Ask a Follow-up Question" widget buttons ---
   These are custom buttons outside the .btn system (#doublecheck-button /
   .followup-ai-btn blue, #followup-submit-btn navy) with no hover state. Their
   background is set inline per-button, so darken with filter:brightness rather
   than overriding the inline background — works for any base color, no
   !important. Lift + shadow match the Phase 2 buttons. (transition:all is
   already defined on these buttons, so this animates.) */
.followup-ai-btn:hover,
#followup-submit-btn:hover {
  filter: brightness(0.93);
  transform: translateY(-1px);
  box-shadow: var(--tv-shadow-sm);
}
.followup-ai-btn:active,
#followup-submit-btn:active {
  filter: brightness(0.88);
  transform: translateY(0);
  box-shadow: none;
}
.followup-ai-btn:focus-visible,
#followup-submit-btn:focus-visible {
  outline: none;
  box-shadow: var(--tv-focus-ring);
}

/* ==========================================================================
   PHASE 3 — Navbar & footer
   Refinements only. Hover changes color, never border/size (see the BS3
   inline-flex hover trap). The navbar has two states — dark at the top of the
   page and white once `.scrolled` — so each rule is checked against both.
   ========================================================================== */

/* --- Navbar links ---
   Refine the uppercase nav links and add a smooth gold hover. Specificity
   matches the legacy `.header .main-nav .nav .nav-item a` rule so it wins by
   load order without !important. */
.header .main-nav .nav .nav-item a {
  letter-spacing: 0.04em;
  transition: color 0.15s ease-in-out;
}
.header .main-nav .nav .nav-item a:hover,
.header .main-nav .nav .nav-item a:focus {
  color: var(--tv-brand);
}
/* Keep the navbar DARK on scroll (no light/dark flip). Once scrolled it gets a
   solid dark bar + shadow while the logo, links, and toggle stay white —
   overriding the legacy white scrolled state at EVERY width. A dark bar reads
   strongly on the white page content (better than the old white-on-white) and
   bookends the dark footer. The navbar stays transparent over the hero at the
   very top; this only kicks in once `.scrolled`. (--tv-ink is the bar color;
   easy to retune.) */
#header.navbar-fixed-top.scrolled {
  background: var(--tv-ink);
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.20);
}
#header.navbar-fixed-top.scrolled .logo a,
#header.navbar-fixed-top.scrolled .logo-title {
  color: #fff;
}
#header.navbar-fixed-top.scrolled .main-nav .nav .nav-item a {
  color: #fff;
}
#header.navbar-fixed-top.scrolled .main-nav .nav .nav-item a:hover,
#header.navbar-fixed-top.scrolled .main-nav .nav .nav-item a:focus {
  color: var(--tv-brand);
}
#header.navbar-fixed-top.scrolled .main-nav .navbar-toggle .icon-bar {
  background-color: rgba(255, 255, 255, 0.85);
}
/* Don't fill the Logout CTA gold on the dark scrolled navbar. The legacy rule
   turns nav CTA buttons into solid gold on scroll (designed for the old white
   navbar); on the dark navbar that makes Logout look like a primary action. Keep
   it the same outlined style it has at the top of the page. Sign Up (#sign-up-link)
   is excluded so it stays a real gold call-to-action. */
#header.navbar-fixed-top.scrolled .main-nav .nav .nav-item.nav-item-cta a.btn:not(#sign-up-link) {
  background: transparent;
  border-color: #fff;
}

/* Anchor the navbar on scroll at narrow widths. The legacy CSS only fixes it at
   >=992px; below that it's position:relative and scrolls away. `sticky` pins it
   to the top while reserving its space (nothing hidden under it), leaving
   desktop's fixed-over-hero design alone. The dark scrolled styling above gives
   it a visible bar against the white content. */
@media (max-width: 991px) {
  .header.navbar-fixed-top {
    position: sticky;
    top: 0;
  }
}

/* Navbar collapse breakpoint. The legacy CSS flips the navbar to its horizontal
   desktop layout at 968px (hamburger hidden, links floated, menu force-shown),
   but the logo + links + Sign Up don't fit on one row until ~1000px — so
   968–1023px is a dead band where the toggle is gone and the nav drops below the
   logo into a ~152px-tall bar (worse now that it sticks). Hold the hamburger menu
   through this band; the legacy >=968 rules still provide the desktop layout at
   >=1024px. Same specificity as the legacy rules, loaded later, so it wins in the
   band. `:not(.in)` leaves the toggled-open menu alone so it still expands. */
@media (min-width: 968px) and (max-width: 1023px) {
  .navbar-toggle {
    display: block;
  }
  /* !important to beat the legacy `display: block !important` on this selector;
     higher specificity then wins the important-vs-important contest. */
  .navbar-collapse.collapse:not(.in) {
    display: none !important;
  }
  /* Center the open dropdown on the page. Below 992px this is automatic, but the
     992–1023px slice inherits the desktop float layout, which pulls it right two
     ways: .main-nav floats right (shrink-wrapped), and the logo floats left and
     overlaps the top menu rows so their text flows around it (the first item or
     two get pushed right). Un-float both — matching how it renders below 992px —
     and lay the list out as a clean full-width block. !important beats the legacy
     `float: …!important` rules. */
  .header h1.logo,
  .main-nav.navbar-right {
    float: none !important;
  }
  #navbar-collapse .navbar-nav,
  #navbar-collapse .navbar-nav > .nav-item {
    float: none !important;
    display: block;
    width: 100%;
  }
}

/* Navbar height consistency. The legacy `.header { height: inherit }` at >=768px
   drops the fixed 80px height for the 768–991px range (it's reinstated at
   >=992px), so the bar there grows to its content height (~95px: the 80px logo +
   .main-nav's 15px margin-top) and sits ~15px taller than everywhere else.
   Restore 80px across the gap — the same content overflows the clamped 80px box
   at desktop and looks fine, so this just matches that. */
@media (min-width: 768px) and (max-width: 991px) {
  #header.navbar-fixed-top {
    height: 80px;
  }
}

/* Open hamburger menu (the JS adds .nav-open at hamburger widths, < 1024px).
   1. height:auto — grow the bar to hold the expanded menu, overriding the 80px
      clamp (base <768px and the 768–991px rule above) so the menu pushes the page
      down instead of overflowing the bar and overlapping content.
   2. dark background — once the bar grows it's no longer over the dark hero, so
      the white links would otherwise sit on the light page. A solid dark backdrop
      keeps them readable (and matches the dark scrolled navbar). */
#header.navbar-fixed-top.nav-open {
  height: auto;
  background: var(--tv-ink);
}
/* Breathing room below the last item so the bottom button isn't flush against the
   popout's bottom edge (the top already has a gap above the first item). */
#header.navbar-fixed-top.nav-open #navbar-collapse {
  padding-bottom: 15px;
}

/* Mobile menu open/close jank. Bootstrap animates the collapse height (and adds
   `.collapsing` only during that animation). The site's broad `transition: all`
   rules make child elements also animate every property that shifts during the
   reflow — which reads as the menu "recentering" on show and leaving ghost
   trails on hide. Disable element transitions while collapsing so only the
   clean height animation runs; hover transitions still work once it's open. */
#navbar-collapse.collapsing,
#navbar-collapse.collapsing * {
  transition: none !important;
}
/* Column titles: a touch heavier and fully opaque for clearer hierarchy. */
.footer .footer-col .title {
  font-weight: var(--tv-fw-semi);
  opacity: 1;
  letter-spacing: 0.005em;
}
/* Links: brighter resting color for legibility on the dark slate, white on hover. */
.footer .footer-col a {
  color: #8ba6c4;
  transition: color 0.15s ease-in-out;
}
.footer .footer-col a:hover,
.footer .footer-col a:focus {
  color: #ffffff;
}
/* Social icons brighten to brand gold on hover. */
.footer .footer-col.connect .social li a .fa {
  transition: color 0.15s ease-in-out;
}
.footer .footer-col.connect .social li a:hover .fa {
  color: var(--tv-brand);
}
/* Align the subscribe form with the rest of the footer column. The inherited
   Bootstrap `.navbar-form` adds -15px side margins (a navbar gutter hack) plus
   inconsistent side padding across its breakpoint, so the form box never
   matches the column content box: the field could sit ~15px left of the other
   content and the button jut ~15px past it on the right. Zeroing the side
   margins and padding makes the form span exactly the column content width, so
   the flexed field starts at the content edge and the button ends at it.
   Selector is `.footer .footer-col .signup-form` (specificity 0,3,0) to beat a
   `.footer .footer-col .navbar-form { padding-left:15px }` rule that lives in a
   max-width:767px media block. */
.footer .footer-col .signup-form {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  /* Kill the collapsed-navbar chrome `.navbar-form` adds (1px top/bottom borders
     + an inset white box-shadow). On the dark footer that shows as faint
     horizontal lines above/below the field. Bootstrap only removes it at
     >=968px, leaving lines visible in the 768-967px gap. */
  border: 0;
  box-shadow: none;
}
/* Footer subscribe form: keep the email field and "Subscribe Now" button on one
   row at narrow/intermediate widths. In this layout the form only goes side by
   side at >=992px (where .navbar-form .form-group becomes inline-block); from
   768-991px the form-group is display:block (full-width field) and the button
   wraps underneath. Flex keeps them on one row across the whole <=991px range
   and lets the field flex to fill. Desktop (>=992px) is untouched. The button's
   inline margin-left:5px still provides the gap. */
@media (max-width: 991px) {
  .footer .signup-form {
    display: flex;
    align-items: center;
  }
  .footer .signup-form .form-group {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
  }
  .footer .signup-form .form-control {
    width: 100%;
  }
  .footer .signup-form .btn {
    flex: 0 0 auto;
  }
}
/* On phones (<=479px) side-by-side gets cramped, so stack the form: full-width
   field with a full-width button below. Switch the flex direction to column and
   stretch both items. The button's inline margin-left:5px needs !important to
   clear (it would otherwise indent + narrow the stacked button). */
@media (max-width: 479px) {
  .footer .footer-col .signup-form {
    flex-direction: column;
    align-items: stretch;
  }
  .footer .footer-col .signup-form .form-group {
    margin-bottom: 8px;
  }
  .footer .footer-col .signup-form .btn {
    margin-left: 0 !important;
  }
}

/* Press Coverage logos. The legacy layout is a 3-up grid (col-xs-4, active below
   this build's 968px grid breakpoint) led by an empty spacer <li> that centers
   the desktop row — and the logo <img>s are block-level inside shrink-wrapped
   <a>s, so they left-align in their cells. Across widths this reads as: logos
   shifted left, and below 968px the spacer unbalances the rows (KIM KOMANDO even
   clips off-screen). Fix: center each logo in its cell, and use even columns —
   2-up on phones, 4-up on tablets. Desktop (>=968px) keeps its spacer-centered
   6-up row; there we only center the images. */
.press-list > li a {
  display: block;
}
.press-list > li img {
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 967px) {
  .press-list > li:first-child {   /* drop the centering spacer in the col-xs-4 range */
    display: none;
  }
}
@media (max-width: 767px) {
  .press-list > li { width: 50%; }   /* 2-up (phones) */
}
@media (min-width: 768px) and (max-width: 967px) {
  .press-list > li { width: 25%; }   /* 4-up (tablets) */
}

/* --- Heading weight unification ---
   Marketing/section titles (.title) on home, pricing, and login were set to a
   light 300 by per-section legacy rules, clashing with the bold app-page
   headings. Unify toward bolder so titles read consistently sitewide. Each
   selector matches its legacy counterpart's specificity; theme-v2 loads later
   so it wins without !important. The hero (.promo .title) is already 700. */
.cta-section .title,
.why .title,
.why .feature-lead .title,
.testimonials .title,
.press .title,
.pricing .title,
.access-section .form-box .title {
  font-weight: var(--tv-fw-bold);
}

/* ==========================================================================
   PHASE 4 — Depth & surface polish
   Modernize the card-like surfaces (panels, thumbnails, wells) with softer
   borders, a larger radius, and a subtle shadow from the Phase 1 tokens.
   Panels are containers, not buttons, so no hover-lift. Single-class selectors
   load after the page CSS, so they win without !important.
   ========================================================================== */

/* Cards / panels */
.panel {
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow-sm);
}
/* Round the first/last child corners to match the panel radius (no-op when a
   heading/footer has no background, e.g. the practice cards). */
.panel > .panel-heading:first-child {
  border-top-left-radius: calc(var(--tv-radius) - 1px);
  border-top-right-radius: calc(var(--tv-radius) - 1px);
}
.panel > .panel-footer:last-child {
  border-bottom-left-radius: calc(var(--tv-radius) - 1px);
  border-bottom-right-radius: calc(var(--tv-radius) - 1px);
}

/* Thumbnails (e.g. the calculator example images) */
.thumbnail {
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow-sm);
}

/* Wells — flatten Bootstrap's inset look into a soft raised surface */
.well {
  background-color: var(--tv-surface-alt);
  border: 1px solid var(--tv-border);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow-sm);
}

/* Follow-up widget: match the new panel depth. Its border/radius/background are
   set inline, so only the shadow is layered on here (no !important needed). */
#followup-section {
  box-shadow: var(--tv-shadow-sm);
}