/* Accessibility — skip-to-main-content link. Visually hidden until it
     receives keyboard focus (Tab from top of page), then snaps into view. */
  .skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 1000;
    padding: 12px 20px;
    background: #2D2D2D;
    color: #FFFFFF;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: top 0.2s ease-in-out;
  }
  .skip-link:focus {
    top: 16px;
    outline: 3px solid #FFB900;
    outline-offset: 2px;
  }

  :root {
    --magenta: #E71C8E;
    /* Accent for small text + white-on-colour fills. Vivid --magenta is 4.24:1
       on white and misses AA (4.5), so this is the darkest-possible step that
       passes: #DE1B88 = 4.55:1 and 96% of the brand pink, i.e. still visibly
       BRAND PINK. The earlier #C01177 passed at 5.85:1 but read plum/purple,
       which is off-brand. --purple is an alias kept only so legacy rules that
       still reference it resolve to the same pink. */
    --magenta-dark: #DE1B88;
    --purple: #DE1B88;
    /* Pink text sitting on the --pale-blush tint. #DE1B88 is 4.55:1 on WHITE
       but only 3.90:1 on blush, so tinted pills need one step deeper to clear
       AA. Still 91% of the brand pink, so it reads pink, not plum. Do not use
       this on white - it is needlessly dark there. */
    --magenta-on-tint: #CA197C;
    --yellow: #FFB900;
    --aqua: #60C3D4;
    --orange: #FF6000;
    --charcoal: #2D2D2D;
    --pale-blush: #F8EAF1;
    --white: #FFFFFF;
    --grey-50: #FAFAFA;
    --grey-100: #F4F4F5;
    --grey-200: #E4E4E7;
    --grey-300: #D4D4D8;
    --grey-500: #71717A;
    --grey-700: #3F3F46;
    --green: #16a34a;

    --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --container: 1180px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* Very narrow screens (<360px, e.g. iPhone SE 1st-gen): scale the header logo
     down so the logo + phone + menu cluster never overflow the viewport. The
     designed 96px size is kept at 360px and up. */
  /* Logo is 100px so the strapline reads, but that is ~230px wide and the header
     cluster (logo + Talk to an expert + Upload + burger) will not fit a small
     phone at that size. Step it down. Keep in step with the .header-logo rules
     in src/styles/global.css, which do the same job for Base.astro pages. */
  @media (max-width: 480px) {
    .site-header .logo img { height: 74px !important; }
  }
  @media (max-width: 380px) {
    .site-header .logo img { height: 62px !important; }
  }
  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
  /* The header is sticky AND opaque, so anything an anchor jumps to lands
     UNDERNEATH it and reads as "cut off at the top". Measured 31 Aug 2026 on
     live /guides/: a jump to #gd-grid put the target at viewport y=0 with the
     header covering 0-101px, so the whole top 101px of the target was buried.
     That hit the skip-to-content link (#main, a WCAG bypass-block control), the
     #upload / #calculator anchors, and SwitchFunnel's scrollIntoView({block:
     "start"}) when the bill funnel advances a step, which is the conversion
     path. scroll-padding-top on the scroll container fixes anchors AND
     scrollIntoView in one go. Values are header height + breathing room,
     measured per breakpoint, not guessed: 101 / 75 / 63. Keep in step with the
     logo-height media queries above, which are what change the header height. */
  html { scroll-padding-top: 117px; }
  @media (max-width: 480px) { html { scroll-padding-top: 87px; } }
  @media (max-width: 380px) { html { scroll-padding-top: 75px; } }
  body {
    font-family: var(--font-body);
    color: var(--charcoal);
    background: var(--white);
    line-height: 1.55;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; height: auto; }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--charcoal);
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Even out heading line lengths instead of letting the last line be one
       stubby word. Browsers cap balancing at ~6 lines, which no heading here
       reaches, and it is ignored where unsupported. */
    text-wrap: balance;
  }
  h1 { font-size: clamp(40px, 5.5vw, 64px); }
  h2 { font-size: clamp(28px, 3.5vw, 42px); }
  h3 { font-size: clamp(20px, 2vw, 24px); font-weight: 700; }

  /* ORPHAN / WIDOW CONTROL, site-wide. Body copy was regularly stranding a
     single word ("walk away.") on its own final line, which reads as a mistake
     at every viewport. `pretty` tells the browser to avoid that last-line
     orphan; unlike `balance` it does not reflow the whole block, so long
     paragraphs keep their normal ragged edge and there is no layout cost.
     Progressive enhancement: silently ignored on older browsers. */
  p, li, dd, figcaption, blockquote, summary, label {
    text-wrap: pretty;
  }

  /* Short, centred lead paragraphs get `balance` instead. `pretty` only guards
     a ONE-word final line, so a two-word stub ("walk away.") still slips
     through, and under a centred heading that reads as broken. Measured before
     and after at 480/565/640px: these three went from 11-17% final lines to
     55-84%. Long body copy deliberately stays on `pretty`, balance is for
     short blocks only. */
  .founder-bio {
    text-wrap: balance;
  }

  /* Scoped to `body` (0,1,1) on purpose: Tailwind ships its own `.container`
     utility (0,1,0) and, on LiveLayout pages, its stylesheet loads after this
     one. Equal specificity would hand the tie to Tailwind and swap our 1180px
     padded container for its 1280px unpadded one. `container` is the ONLY
     class name that collides between the two stylesheets (audited 27 Jul 2026),
     so this one bump settles it regardless of load order. */
  body .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
  /* LiveLayout-only containment for shared components whose <section class="section">
     only carries vertical padding here (Base's global.css .section self-contains,
     so this class is intentionally undefined there = a no-op on Base pages). */
  .lv-contain { max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; }

  /* Buttons */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: 10px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    border: none;
    text-align: center;
    white-space: nowrap;
  }
  /* White-on-colour fill, so it takes --magenta-dark: vivid --magenta is only
     4.24:1 against white text and misses AA (4.5). #DE1B88 is 4.55:1 and is
     96% of the brand pink, so it still reads as brand pink, not plum. */
  .btn-primary { background: var(--magenta-dark); color: var(--white); }
  .btn-primary:hover { background: #c41778; transform: translateY(-1px); }
  .btn-secondary {
    background: var(--white);
    color: var(--charcoal);
    border: 1.5px solid var(--grey-200);
  }
  .btn-secondary:hover { border-color: var(--charcoal); transform: translateY(-1px); }
  .btn-dark { background: var(--magenta-dark); color: var(--white); }
  .btn-dark:hover { background: var(--magenta); transform: translateY(-1px); }
  .btn-yellow {
    background: var(--yellow);
    color: var(--charcoal);
    box-shadow: 0 1px 0 #d49b00;
  }
  .btn-yellow:hover {
    background: #ffc933;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 185, 0, 0.3);
  }

  /* Header */
  header.site-header {
    position: sticky; top: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--grey-200);
    z-index: 100;
  }
  .header-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
  }
  .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .logo-mark { width: 40px; height: 40px; flex-shrink: 0; }
  .logo-wordmark { display: flex; flex-direction: column; line-height: 1; }
  .logo-text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    color: var(--magenta);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .logo-tagline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 8.5px;
    color: var(--magenta);
    letter-spacing: 0.08em;
    margin-top: 3px;
    text-transform: uppercase;
  }
  nav.main-nav { display: flex; align-items: center; gap: 32px; }
  nav.main-nav a {
    font-weight: 500;
    color: var(--grey-700);
    font-size: 15px;
    transition: color 0.15s ease;
  }
  nav.main-nav a:hover { color: var(--magenta); }
  /* ── Services dropdown ────────────────────────────────────────────────────
     CSS-only on :hover and :focus-within, so there is no JS to break and it is
     keyboard reachable. The padding-top bridge on the panel is deliberate:
     without it the cursor crosses a dead gap between trigger and panel and the
     menu snaps shut mid-move. Below the nav breakpoint the whole bar is hidden
     and the mobile drawer takes over, so touch never sees this. */
  .nav-drop { position: relative; display: flex; align-items: center; }
  .nav-drop-trigger {
    display: inline-flex; align-items: center; gap: 5px;
    font-weight: 500; color: var(--grey-700); font-size: 15px;
    transition: color 0.15s ease;
  }
  .nav-drop-trigger svg { transition: transform 0.2s ease; opacity: 0.55; }
  .nav-drop:hover .nav-drop-trigger,
  .nav-drop:focus-within .nav-drop-trigger { color: var(--magenta); }
  .nav-drop:hover .nav-drop-trigger svg,
  .nav-drop:focus-within .nav-drop-trigger svg { transform: rotate(180deg); opacity: 1; }

  .nav-drop-panel {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 6px);
    margin-top: 14px;          /* visual gap */
    padding: 8px;
    width: 330px;
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 16px;
    box-shadow: 0 2px 4px rgba(45,45,45,0.04), 0 24px 48px -20px rgba(45,45,45,0.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 200;
  }
  /* Bridges the gap between trigger and panel so the hover never drops out. */
  .nav-drop-panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
  }
  .nav-drop:hover .nav-drop-panel,
  .nav-drop:focus-within .nav-drop-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .nav-drop-panel a {
    display: block; padding: 11px 13px; border-radius: 11px;
    transition: background 0.15s ease;
  }
  .nav-drop-panel a:hover { background: var(--grey-100); }
  .nav-drop-panel a strong {
    display: block; font-family: var(--font-display); font-weight: 800;
    font-size: 15px; color: var(--charcoal); letter-spacing: -0.015em;
  }
  .nav-drop-panel a span {
    display: block; margin-top: 2px; font-size: 13px; color: var(--grey-500);
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-drop-panel, .nav-drop-trigger svg { transition: none; }
  }

  /* gap was 12px, which glued "Client login" to the yellow button. Measured
     31 Aug 2026 at 1280px: 129px of air between the nav and the CTA cluster,
     129px between the logo and the nav, then 12px between the login link and
     the button. The button itself is correctly placed (its right edge lands on
     the container edge, 1198.5px, dead in line with the page content below), so
     the button must NOT move; the fix is to give the quiet login link room.
     28px sits just under the 32px nav-link gap, so the cluster reads as its own
     group. Slack at the 1088px nav breakpoint is 76px, so this costs nothing. */
  .header-cta { display: flex; align-items: center; gap: 28px; }
  /* Client login. Quiet by design: it serves people who already have an account,
     so it must not compete with the yellow CTA beside it. Sized and weighted to
     match the nav links rather than the button.
     NOTE: this belongs HERE, in public/styles.css. src/styles/smarta-live.css is
     a dead file that nothing loads, and rules added there silently do nothing. */
  .header-login {
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink, #2D2D2D);
    text-decoration: none;
    opacity: .74;
    white-space: nowrap;
    transition: opacity .15s ease, color .15s ease;
  }
  .header-login:hover { opacity: 1; color: var(--magenta-dark, #DE1B88); }
  .header-login:focus-visible {
    outline: 2px solid var(--magenta, #E71C8E);
    outline-offset: 3px;
    border-radius: 4px;
    opacity: 1;
  }
  .header-phone {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--charcoal);
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .header-phone span.label { white-space: nowrap; }

  /* Mobile-only chrome — funky magenta-circle phone + hamburger drawer.
     Hidden on desktop (≥881px) since the text phone + nav cover the same intents. */
  .header-phone-mobile,
  .mobile-menu-btn { display: none; }

  .mobile-menu {
    background: var(--white);
    border-top: 1px solid var(--grey-200);
    padding: 16px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-menu/* !important is deliberate. [hidden] has the same specificity as a class, so any later class rule that sets display beats it and the element renders anyway, silently. That is how the whole signed-out dashboard ended up stacked under the portal sign-in form on 27 Aug 2026. hidden means hidden; nothing in a stylesheet should be able to argue with it. Guarded by npm run audit-hidden. */
[hidden] { display: none !important; }
  .mobile-menu a {
    padding: 14px 4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--charcoal);
    border-bottom: 1px solid var(--grey-200);
  }
  .mobile-menu a.btn-yellow { border: none; text-align: center; }
  .mobile-menu a:last-child { border-bottom: none; }

  /* 1087px, not 880px. The desktop header does not FIT at 880: measured at
     1009px the Base header needed ~1068px (logo 221 + nav 455 + CTAs 280 + gaps
     + padding) and overflowed the viewport by 19px, and the LiveLayout header
     needs ~1010px. That left an 880-1087px dead zone where the full header was
     shown but could not fit, scrolling the page sideways. Both layouts and the
     sticky CTA bar now switch together at the same width. */
  @media (max-width: 1087px) {
    nav.main-nav { display: none; }
    .header-phone,
    .header-cta-desktop,
    .logo-desktop { display: none; }
    .logo-mobile { display: block !important; }
    .header-phone-mobile {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 9999px;
      background: var(--white);
      border: 2px solid rgba(231, 28, 142, 0.2);
      color: var(--magenta);
      transition: background 0.15s ease, color 0.15s ease;
    }
    .header-phone-mobile:hover { background: var(--magenta); color: var(--white); }
    .mobile-menu-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 11px;            /* WCAG: 44x44 minimum tap target */
      min-width: 44px;
      min-height: 44px;
      border-radius: 8px;
      background: transparent;
      border: none;
      color: var(--charcoal);
      cursor: pointer;
    }
    .mobile-menu-btn:hover { background: rgba(0,0,0,0.05); }
  }

  /* Hero — flat pale-blush, matches Hero.astro on Base.astro pages.
     Removed the radial gradient bubble so both layouts share one identical hero
     background tone end-to-end. */
  /* Heroes are WHITE, not a pink block (Joe, 12 Aug 2026: "doesn't like the pink
     tiles", wants clean and high end). A flat --pale-blush slab on every page
     hero was the single biggest thing making the site read mid-market: it dates
     the design, it fights the magenta accents, and it turns each page into a
     coloured lid on white content. One hairline separates the hero from the page
     instead. Colour now earns its place (the film, the final CTA), rather than
     being the default backdrop. */
  section.hero {
    padding: clamp(48px, 8vw, 80px) 0 clamp(56px, 9vw, 96px);
    background: var(--white);
    border-bottom: 1px solid var(--grey-200);
  }
  .hero-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: center;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--pale-blush);
    color: var(--magenta-on-tint);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 24px;
  }
  .hero-eyebrow::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--magenta);
  }
  h1 .accent { color: var(--magenta); }
  .hero-sub {
    margin-top: 24px;
    font-size: clamp(17px, 1.8vw, 19px);
    color: var(--grey-700);
    line-height: 1.55;
    max-width: 540px;
  }
  .hero-ctas {
    display: flex; gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
  }
  .hero-trust {
    margin-top: 20px;
    font-size: 14px;
    color: var(--grey-700);
    display: flex; align-items: center; gap: 8px;
  }
  .hero-trust::before {
    content: '✓';
    color: var(--green);
    font-weight: 700;
  }

  /* Collapse the hero to one column at 980px (not 880): the redesigned
     calculator shows its 3-col business tiles down to 560px, and in the narrow
     0.95fr hero column those tiles were cramped between ~560-880px. Giving the
     calc the full width earlier keeps it comfortable; below 560px it swaps to
     its own native-select layout. */
  @media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .hero-ctas .btn { flex: 1; }
  }

  /* Sections */
  section.section { padding: 96px 0; }
  @media (max-width: 720px) { section.section { padding: 56px 0; } }

  .section-eyebrow {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* On the blush tint --magenta-dark is only 3.90:1 at 13px, under the 4.5
       AA floor. Same fix as .eyebrow-pill and .eyebrow. */
    color: var(--magenta-on-tint);
    margin-bottom: 16px;
  }

  /* Problem */
  section.problem { background: var(--grey-50); }
  .problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .problem-grid p {
    margin-bottom: 18px;
    font-size: 17px;
    color: var(--grey-700);
  }
  .problem-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .stat-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    padding: 24px;
  }
  .stat-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 36px;
    color: var(--magenta);
    line-height: 1;
    margin-bottom: 8px;
  }
  .stat-label {
    font-size: 14px;
    color: var(--grey-500);
    line-height: 1.4;
  }
  @media (max-width: 880px) {
    .problem-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  /* How it works */
  .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
  }
  .step-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.2s ease;
  }
  .step-card:hover {
    border-color: var(--magenta);
    transform: translateY(-2px);
  }
  /* When step 1 is wrapped in a link — keep link affordance, drop default styling. */
  a.step-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
  }
  a.step-card-link:hover h3 { color: var(--magenta); }
  .step-num {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--pale-blush);
    color: var(--magenta);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
  }
  .step-card h3 { margin-bottom: 8px; font-size: 20px; color: var(--charcoal); }
  .step-card p { color: var(--grey-700); font-size: 16px; }
  @media (max-width: 880px) {
    .steps-grid { grid-template-columns: 1fr; }
  }

  /* Bill upload section */
  section.upload-cta {
    background: linear-gradient(135deg, #FFF7FB 0%, #FFFAF0 100%);
    padding: 88px 0;
  }
  .upload-grid {
    display: grid;
    /* minmax(0, …) stops a child's min-content from forcing a track wider than
       the viewport (the form card was flooring the column ~344px on mobile). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }
  /* Sticky left column so the upload context stays in view while the
     1518px-tall Tally iframe scrolls — fixes the empty-left-column issue
     Joe flagged on /upload-bill/. */
  .upload-text {
    position: sticky;
    top: 100px;
    align-self: start;
  }
  @media (max-width: 880px) {
    .upload-text { position: static; }
  }
  .upload-text h2 { margin-bottom: 16px; }
  .upload-text p {
    color: var(--grey-700);
    font-size: 17px;
    margin-bottom: 14px;
  }
  .upload-text ul {
    list-style: none;
    margin-top: 24px;
  }
  .upload-text ul li {
    padding: 8px 0 8px 32px;
    position: relative;
    color: var(--grey-700);
    font-size: 16px;
  }
  .upload-text ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 800;
    font-size: 18px;
  }
  .upload-card-inner {
    background: var(--white);
    border-radius: 20px;
    padding: 36px;
    border: 1px solid var(--grey-200);
    box-shadow: 0 20px 60px -20px rgba(6, 63, 69, 0.16);
  }
  .upload-zone {
    border: 2px dashed var(--grey-300);
    border-radius: 14px;
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
  }
  .upload-zone:hover, .upload-zone.dragover {
    border-color: var(--magenta);
    background: var(--pale-blush);
  }
  .upload-zone .upload-icon {
    font-size: 40px;
    margin-bottom: 12px;
  }
  .upload-zone p {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--charcoal);
    font-size: 18px;
  }
  .upload-zone .small {
    font-size: 13px;
    color: var(--grey-500);
    margin-top: 6px;
  }
  .upload-card-inner .or-divider {
    display: flex; align-items: center; text-align: center;
    margin: 24px 0;
    color: var(--grey-500);
    font-size: 13px;
    font-family: var(--font-display);
    font-weight: 700;
  }
  .upload-card-inner .or-divider::before,
  .upload-card-inner .or-divider::after {
    content: ''; flex: 1; height: 1px;
    background: var(--grey-200);
  }
  .upload-card-inner .or-divider::before { margin-right: 14px; }
  .upload-card-inner .or-divider::after { margin-left: 14px; }
  .upload-card-inner .btn { width: 100%; }
  /* Tally embed iframe: reserve height up-front + normalise the box so the form
     loading/resizing doesn't reflow the page (mobile CLS). Inline height="1518"
     stays as the no-JS/SSR fallback; this floors the rendered height per
     breakpoint and drops the inline-iframe baseline gap. */
  .upload-card-inner iframe {
    display: block;
    width: 100%;
    border: 0;
    min-height: 1100px;
  }
  @media (max-width: 480px) {
    .upload-card-inner iframe { min-height: 1280px; }
  }
  @media (max-width: 880px) {
    .upload-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  }

  /* Sticky mobile CTA bar (locked rule 2). Rendered by LiveLayout on every live
     page. Hidden on desktop, fixed to the bottom at <=880px. z:90 sits below the
     sticky header (z-index:100). Safe-area padding relies on viewport-fit=cover. */
  .sticky-cta-bar, .sticky-cta-spacer { display: none; }
  /* 1087px, not 880px. The desktop header does not FIT at 880: measured at
     1009px the Base header needed ~1068px (logo 221 + nav 455 + CTAs 280 + gaps
     + padding) and overflowed the viewport by 19px, and the LiveLayout header
     needs ~1010px. That left an 880-1087px dead zone where the full header was
     shown but could not fit, scrolling the page sideways. Both layouts and the
     sticky CTA bar now switch together at the same width. */
  @media (max-width: 1087px) {
    .sticky-cta-bar {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 90;
      background: rgba(255, 255, 255, 0.97);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      border-top: 1px solid var(--grey-200);
      padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
      box-shadow: 0 -4px 20px -8px rgba(0, 0, 0, 0.15);
    }
    .sticky-cta-bar .btn { width: 100%; padding: 12px 8px; font-size: 14px; min-height: 48px; }
    .sticky-cta-spacer { display: block; height: calc(64px + env(safe-area-inset-bottom, 0px)); }
  }

  /* Services */
  section.services { background: var(--pale-blush); }
  .services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 48px;
  }
  .service-card {
    background: var(--white);
    border-radius: 20px;
    padding: 40px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
  }
  .service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
  }
  .service-card.electricity::before { background: var(--magenta); }
  .service-card.gas::before { background: var(--orange); }
  .service-card:hover { transform: translateY(-4px); }
  .service-card h3 { font-size: 26px; margin-bottom: 4px; }
  .service-card .tag {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--grey-500);
    font-weight: 500;
    margin-bottom: 20px;
    font-size: 16px;
  }
  .service-card p { color: var(--grey-700); margin-bottom: 24px; }
  /* Standalone .arrow-link (e.g. "Learn about business gas →" on the home
     page). Adds a minimum hit area of 44px on touch devices without changing
     the visual weight of the link too much. */
  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-block: 10px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .service-card .arrow-link {
    color: var(--magenta-dark);
    font-weight: 700;
    font-family: var(--font-display);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .coming-soon {
    margin-top: 32px;
    text-align: center;
    color: var(--grey-700);
    font-size: 14px;
  }
  @media (max-width: 720px) {
    .services-grid { grid-template-columns: 1fr; }
  }

  /* Industries */
  .industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 48px;
  }
  .industry-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    padding: 24px 20px;
    text-align: center;
    transition: all 0.2s ease;
  }
  .industry-card:hover {
    border-color: var(--magenta);
    transform: translateY(-2px);
    background: var(--pale-blush);
  }
  .industry-card .icon { font-size: 32px; margin-bottom: 12px; color: var(--purple); line-height: 0; }
  .industry-card .icon svg { display: inline-block; }
  .industry-card:hover .icon { color: var(--magenta); }
  .industry-card h3 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--charcoal);
  }
  @media (max-width: 880px) {
    .industries-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* Founder */
  section.founder { background: var(--grey-50); }
  .founder-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: center;
  }
  .founder-grid p {
    color: var(--grey-700);
    margin-bottom: 18px;
    font-size: 17px;
  }
  .founder-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
  }
  .founder-stat .num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 32px;
    color: var(--magenta);
    line-height: 1;
  }
  .founder-stat .lbl {
    font-size: 13px;
    color: var(--grey-500);
    margin-top: 6px;
  }
  .founder-quote-card {
    background: var(--charcoal);
    color: var(--white);
    padding: 40px;
    border-radius: 20px;
  }
  .founder-quote-card .avatar {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--magenta);
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    margin-bottom: 20px;
  }
  .founder-quote-card .quote {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.4;
    margin-bottom: 16px;
    font-style: italic;
  }
  .founder-quote-card .name {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--white);
  }
  .founder-quote-card .role {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
  }
  @media (max-width: 880px) {
    .founder-grid { grid-template-columns: 1fr; gap: 40px; }
  }

  /* Keeps a hyphenated phrase on one line. "Brisbane-based." was splitting at
     the hyphen across two H1 lines, which reads as a typo. */
  .nb { white-space: nowrap; }

  /* Founders team grid */
  .founders-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 64px;
  }
  /* The eyebrow, H2, rule and first paragraph were all sitting on default
     spacing, so the block read as one cramped lump (Joe, 12 Aug 2026: "the
     spacing with UK to Brisbane is too close"). This gives the heading real air
     above and below without pushing the section apart. */
  .founders-intro h2 { margin-top: 18px; }
  .founders-intro .headline-rule { margin: 22px auto 0; }
  .founders-intro p {
    margin-top: 28px;
    font-size: 18px;
    color: var(--grey-700);
    line-height: 1.68;
  }
  .founders-intro p + p { margin-top: 20px; }
  .founders-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
  .founder-card-v2 {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 20px;
    padding: 36px;
    text-align: center;
    transition: all 0.2s ease;
  }
  .founder-card-v2:hover {
    border-color: var(--magenta);
    transform: translateY(-4px);
    box-shadow: 0 20px 60px -20px rgba(6, 63, 69, 0.16);
  }
  .founder-photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 24px;
    display: block;
    border: 4px solid var(--pale-blush);
  }
  /* The founder photo is an <img> inside a <picture> (avif/webp/jpg sources).
     An unstyled <picture> defaults to display:inline, so the img's
     `margin: 0 auto` centering had no block to center in — WebKit then sized the
     inline wrapper at 269px and pushed it 22px off the right of a 375px screen,
     while Chromium placed it differently. Making the wrapper a block lets the
     img center identically in every engine. Caught by the WebKit pass of
     audit-cross-browser; invisible to Chrome-only testing. */
  .founder-card-v2 picture { display: block; }
  .founder-card-v2 h3 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 24px;
    color: var(--charcoal);
    margin-bottom: 4px;
  }
  .founder-role {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--magenta-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 20px;
  }
  .founder-bio {
    color: var(--grey-700);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
  }
  .founder-contact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--charcoal);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    background: var(--pale-blush);
    transition: all 0.15s ease;
  }
  .founder-contact:hover {
    background: var(--magenta);
    color: var(--white);
  }
  @media (max-width: 720px) {
    .founders-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .founder-card-v2 { padding: 28px; }
    .founder-photo { width: 120px; height: 120px; }
  }

  /* Locations */
  .locations-grid {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare 1fr track refuses to shrink below its
       content's min-content width, so long suburb labels ("Fortitude Valley
       4006") blew the 2-column mobile grid out to 157px + 179px inside a 327px
       parent and pushed 21 cards past its edge. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 48px;
  }
  .location-card {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    padding: 28px 24px;
    transition: all 0.2s ease;
  }
  .location-card:hover {
    border-color: var(--magenta);
    transform: translateY(-2px);
  }
  .location-card h3 {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--charcoal);
    margin-bottom: 6px;
  }
  .location-card p {
    font-size: 14px;
    color: var(--grey-500);
  }
  @media (max-width: 880px) {
    .locations-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* FAQ */
  section.faq { background: var(--grey-50); }
  .faq-list {
    max-width: 820px;
    margin: 48px auto 0;
  }
  .faq-item {
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .faq-item summary {
    padding: 22px 28px;
    cursor: pointer;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--charcoal);
    font-size: 17px;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+';
    font-size: 24px;
    color: var(--magenta);
    font-weight: 400;
    transition: transform 0.2s ease;
  }
  .faq-item[open] summary::after { content: '−'; }
  .faq-item .answer {
    padding: 0 28px 24px;
    color: var(--grey-700);
    line-height: 1.6;
  }

  /* Final CTA */
  section.final-cta {
    background: var(--magenta-dark);
    color: var(--white);
    text-align: center;
    padding: clamp(64px, 8vw, 96px) 0;
  }
  .final-cta h2 { color: var(--white); margin-bottom: 16px; }
  .final-cta p {
    color: rgba(255,255,255,0.92);
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Footer */
  footer.site-footer {
    background: var(--white);
    color: var(--grey-700);
    padding: 64px 0 32px;
    border-top: 1px solid var(--grey-200);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
    gap: 40px;
    margin-bottom: 48px;
  }
  .footer-brand p {
    margin-top: 16px;
    font-size: 14px;
    color: var(--grey-500);
    max-width: 280px;
  }
  .footer-col h2 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--charcoal);
    font-size: 14px;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .footer-col ul { list-style: none; }
  /* Match every footer line to the 14px link size — without this, plain-text
     items (e.g. the address) inherit the 17px body size and look oversized. */
  .footer-col li { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }
  .footer-col a {
    color: var(--grey-700);
    font-size: 14px;
    transition: color 0.15s ease;
    /* The email addresses are single unbreakable ~25-char tokens. Once the grid
       tracks were allowed to shrink (minmax(0, …)), they overflowed their cell
       and pushed the page sideways at every width below ~1100px. Let them wrap;
       `anywhere` only breaks a word that genuinely cannot fit. */
    overflow-wrap: anywhere;
  }
  .footer-col a:hover { color: var(--magenta); }
  .footer-bottom {
    border-top: 1px solid var(--grey-200);
    padding-top: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 13px;
    color: var(--grey-500);
  }
  /* Legal line — keep each segment (© line, ACN, ABN) un-broken so the ABN
     number never wraps mid-string and "runs off" the screen on mobile. The
     whole line still wraps cleanly at the separators when space is tight. */
  .footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
  }
  .footer-legal > span { white-space: nowrap; }
  .footer-legal .sep { color: var(--grey-300); }
  /* On small screens, stack the legal segments (©, ACN, ABN) onto their own
     lines so ABN/ACN never share an awkward half-wrapped line. */
  @media (max-width: 600px) {
    .footer-legal { flex-direction: column; align-items: flex-start; gap: 3px; }
    .footer-legal .sep { display: none; }
  }
  .footer-tagline {
    color: var(--magenta-dark);
    font-style: italic;
    font-family: var(--font-display);
    font-weight: 500;
  }
  @media (max-width: 880px) {
    .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
  }

  /* Inner page hero — no calculator card */
  /* Top padding must clear the STICKY header, which grew to ~101px when the
     logo went to 100px for strapline legibility. At the old 64-96px the eyebrow
     pill sat right under the header edge on every inner page (Joe flagged it
     twice). 112px min is header height plus real breathing room. */
  section.hero.inner-hero {
    padding: clamp(112px, 11vw, 148px) 0 clamp(48px, 7vw, 72px);
  }
  .inner-hero-inner {
    max-width: 820px;
  }
  .inner-hero-inner h1 {
    max-width: 760px;
  }
  .inner-hero-inner .hero-sub {
    max-width: 680px;
  }

  /* Active nav state */
  nav.main-nav a.active {
    /* 15px small text, so it needs the AA-safe deep accent, not vivid magenta. */
    color: var(--magenta-dark);
    font-weight: 700;
  }

  /* Guide-specific styles */
  .guide-article {
    max-width: 760px;
    margin: 0 auto;
  }
  .guide-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid var(--grey-200);
    border-bottom: 1px solid var(--grey-200);
    margin-bottom: 40px;
  }
  .guide-byline img {
    width: 48px; height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }
  .guide-byline .meta {
    font-size: 14px;
    color: var(--grey-500);
  }
  .guide-byline .author {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--charcoal);
    font-size: 15px;
    display: block;
  }
  .guide-article p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--grey-700);
    margin-bottom: 20px;
  }
  .guide-article h2 {
    font-size: 28px;
    margin: 48px 0 16px;
  }
  .guide-article h3 {
    font-size: 21px;
    margin: 32px 0 12px;
  }
  .guide-article ul, .guide-article ol {
    padding-left: 24px;
    margin-bottom: 24px;
  }
  .guide-article li {
    font-size: 17px;
    line-height: 1.7;
    color: var(--grey-700);
    margin-bottom: 8px;
  }
  .guide-article strong { color: var(--charcoal); }
  .guide-article blockquote {
    border-left: 4px solid var(--magenta);
    padding: 8px 0 8px 20px;
    margin: 28px 0;
    font-style: italic;
    color: var(--charcoal);
  }
  .guide-cta-box {
    background: var(--pale-blush);
    border-radius: 16px;
    padding: 28px 32px;
    margin: 40px 0;
    text-align: center;
  }
  .guide-cta-box h3 {
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--charcoal);
  }
  .guide-cta-box p {
    margin: 0 0 20px;
    color: var(--grey-700);
  }
  .related-guides {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--grey-200);
  }
  .related-guides h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--charcoal);
  }
  .related-guides-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .related-guide-card {
    display: block;
    padding: 20px;
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    transition: all 0.15s ease;
  }
  .related-guide-card:hover {
    border-color: var(--magenta);
    transform: translateY(-2px);
  }
  .related-guide-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--charcoal);
    font-size: 16px;
    margin-bottom: 6px;
  }
  .related-guide-card p {
    font-size: 14px;
    color: var(--grey-500);
    margin: 0;
  }
  @media (max-width: 720px) {
    .related-guides-grid { grid-template-columns: 1fr; }
  }

  /* Location + Industry page specifics */
  .local-areas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 32px;
  }
  .local-area-card {
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
  }
  .local-area-card h4 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--charcoal);
    margin-bottom: 6px;
  }
  .local-area-card p {
    font-size: 14px;
    color: var(--grey-500);
    margin: 0;
  }
  @media (max-width: 720px) {
    .local-areas { grid-template-columns: 1fr; }
  }

  /* Contact page */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
  }
  .contact-method {
    padding: 24px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .contact-method h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--charcoal);
    font-size: 17px;
    margin-bottom: 6px;
  }
  .contact-method a {
    color: var(--magenta-dark);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
  }
  .contact-method p {
    color: var(--grey-700);
    font-size: 15px;
    margin: 8px 0 0;
  }
  @media (max-width: 720px) {
    .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  }

  /* Hub pages (services/, industries/, guides/) - card grid */
  .hub-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
  }
  .hub-card {
    display: block;
    padding: 32px;
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: 16px;
    transition: all 0.2s ease;
  }
  .hub-card:hover {
    border-color: var(--magenta);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px -12px rgba(231, 28, 142, 0.18);
  }
  .hub-card h3 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--charcoal);
    font-size: 20px;
    margin-bottom: 8px;
  }
  .hub-card p {
    color: var(--grey-700);
    font-size: 15px;
    margin: 0 0 16px;
    line-height: 1.55;
  }
  .hub-card .read-more {
    color: var(--magenta);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
  }
  @media (max-width: 720px) {
    .hub-grid { grid-template-columns: 1fr; }
  }

  /* Utility (legal) pages */
  .legal-content {
    max-width: 760px;
    margin: 0 auto;
  }
  .legal-content p {
    margin-bottom: 18px;
    color: var(--grey-700);
    font-size: 16px;
    line-height: 1.7;
  }
  .legal-content h2 {
    font-size: 24px;
    margin: 40px 0 16px;
  }
  .legal-content ul {
    padding-left: 24px;
    margin-bottom: 20px;
  }
  .legal-content li {
    margin-bottom: 8px;
    color: var(--grey-700);
  }
  .legal-content .updated {
    color: var(--grey-500);
    font-style: italic;
    margin-bottom: 32px;
  }