/* ============================================
   CONNEXT — Design System v9.0
   "Sunset over Cable Beach"

   Palette derived from the Connext mark: a sunset arc
   over water, with the fibre node at centre.

   Navy is structure: headings, body, footers, dark bands.
   Orange is action: CTAs, section labels, the mark, the node.
   Warm sand keeps the page out of big-telco territory — navy
   on white is Telstra, navy on sand is Broome.

   The split matters. When navy took the CTAs too, the whole
   scroll flattened into one dark surface with no rhythm.

   Motion is restrained: colour and shadow transitions only.
   Nothing lifts or jumps on hover.
   ============================================ */

/* ── 1. TOKENS ── */
:root {
  /* Brand — sampled from the logo artwork, not the spec sheet */
  --color-ink:            #001133;  /* navy, 18.6:1 on white */
  --color-ink-deep:       #000B22;
  --color-orange:         #FE5605;  /* sunset, from the mark. Fills + accents */
  --color-orange-deep:    #D94703;  /* text-safe accent on light surfaces */
  --color-orange-cta:     #CE4302;  /* the CTA fill: 4.7:1, carries WHITE text */
  --color-blue:           #12336F;  /* links + technical. 12.2:1 on white */
  --color-blue-deep:      #0C2450;
  --color-azure:          #4FC8FF;  /* DARK SURFACES ONLY — 2.0:1 on white */

  /* Semantic roles (legacy names — 12 other pages read these) */
  --color-primary:        var(--color-orange);
  --color-primary-deep:   var(--color-orange-deep);
  --color-secondary:      var(--color-blue);
  --color-secondary-deep: var(--color-blue-deep);

  /* Surfaces — warm, deliberately. This is the anti-telco move. */
  --color-warm-pearl:     #FAF8F5;
  --color-morning-sand:   #FDF6ED;
  --color-broome-sand:    #F6EADB;
  --color-white:          #FFFDFB;

  /* Tints, retuned to the sunset hue */
  --color-dusk-tint:      #FCE8DC;
  --color-soft-glow:      #FFF3EC;
  --color-red-pindan:     #F7C4A5;

  /* Ink scale — every neutral carries a navy cast */
  --color-near-black:     var(--color-ink);
  --color-dark:           #2E3D52;  /* body, 10.9:1 on sand */
  --color-mid-gray:       #5A6B80;  /* secondary, 5.6:1 on sand */
  --color-hairline:       #E7EAF0;
  --color-input-border:   #D8DDE7;

  /* Depth reads navy, never grey or orange */
  --shadow-card:       0 1px 2px rgba(0,17,51,0.05), 0 2px 8px rgba(0,17,51,0.05);
  --shadow-card-hover: 0 12px 32px rgba(0,17,51,0.13);
  --shadow-button:     0 2px 8px rgba(254,86,5,0.28);
  --shadow-header:     0 1px 3px rgba(0,17,51,0.07);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --spacing-xs:  6px;
  --spacing-sm:  12px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 64px;

  /* Motion — ease-out-quart. No bounce. */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);

  /* Backwards-compat aliases */
  --white:        #FAF8F5;
  --primary-teal: var(--color-blue);
  --deep-ocean:   var(--color-blue-deep);
  --sand-beige:   #FDF6ED;
  --off-white:    #FAF8F5;
  --dark-gray:    #2E3D52;
}

/* ── 2. RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-dark);
  background: var(--color-warm-pearl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }

/* Blue, not orange. Orange body text is 3.0:1 and fails AA;
   this blue is 12.2:1. Orange stays a fill colour. */
a { color: var(--color-blue); }
a:hover { color: var(--color-blue-deep); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  color: var(--color-near-black);
  margin-top: 0;
  line-height: 1.2;
}

h1 { font-size: 3rem;    font-weight: 800; line-height: 1.1; }
h2 { font-size: 2rem;    font-weight: 700; }
h3 { font-size: 1.5rem;  font-weight: 700; line-height: 1.3; margin-bottom: 0.5rem; }
h4 { font-size: 1.125rem; font-weight: 600; }

p { margin-top: 0; margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

/* ── 3. LAYOUT ── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

main { display: block; }

/* ── 4. BUTTONS ── */
.btn {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  border: none;
  padding: 14px 24px;
  border-radius: var(--radius-md);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}

/* Orange fill, WHITE label. The earlier problem was never the orange, it
   was the navy label forced on it by contrast: the pure sunset is 3.2:1
   against white and fails AA. Deepening it to #CE4302 buys 4.7:1, so the
   label can be white and the CTA can carry the brand's warmth. Navy is
   left to do structure, which stops the page reading as a wall of dark. */
.btn-primary {
  background: var(--color-orange-cta);
  color: #ffffff;
  box-shadow: none;
}
.btn-primary:hover {
  background: #B53802;
  color: #ffffff;
  text-decoration: none;
}

/* Outline is navy-on-sand: the quiet half of a CTA pair */
.btn-outline {
  background: transparent;
  color: var(--color-ink);
  border: 2px solid rgba(0,17,51,0.22);
}
.btn-outline:hover {
  background: rgba(0,17,51,0.04);
  border-color: var(--color-ink);
  color: var(--color-ink);
  text-decoration: none;
}

.btn-secondary {
  background: var(--color-blue);
  color: #ffffff;
}
.btn-secondary:hover {
  background: var(--color-blue-deep);
  color: #ffffff;
  text-decoration: none;
}

/* THE ADJACENCY RULE
   Saturated orange never sits directly on navy. They are near
   complementary at high chroma, so edges vibrate and the pairing
   reads cheap. On navy the primary CTA inverts to warm white:
   18.6:1, calmer, and the brightest thing on the panel.

   These are the ON-DARK treatments only. .cta-section defaults to sand, so it
   must not be listed here — .on-ink covers .cta-section.on-ink already. */
.on-ink .btn-primary,
.section-ink .btn-primary,
.service-card--lead .btn-primary {
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: none;
}
.on-ink .btn-primary:hover,
.section-ink .btn-primary:hover,
.service-card--lead .btn-primary:hover {
  background: #ffffff;
  color: var(--color-ink);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

.on-ink .btn-outline,
.section-ink .btn-outline {
  color: #ffffff;
  border-color: rgba(255,255,255,0.32);
}
.on-ink .btn-outline:hover,
.section-ink .btn-outline:hover {
  background: rgba(255,255,255,0.08);
  border-color: #ffffff;
  color: #ffffff;
}

.btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1100;
  background: var(--color-ink);
  color: #ffffff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ── 5. NAVIGATION ── */
.site-header {
  background: rgba(255,253,251,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--color-hairline);
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 68px;
  padding: 0 20px;
  gap: var(--spacing-lg);
}

.logo { display: flex; align-items: center; text-decoration: none; }
/* One artwork file — the icon/wordmark spacing is the designer's, not ours.
   Height is the only contract. */
.logo img { max-height: none; width: auto; }
.logo-lockup { height: 38px; }

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--color-ink);
  cursor: pointer;
  padding: 10px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.main-nav {
  display: flex;
  gap: 28px;
  align-items: center;
}

.main-nav a {
  color: var(--color-dark);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  transition: color 0.2s var(--ease);
  padding: 8px 0;
  position: relative;
  display: inline-block;
}

.main-nav a:hover { color: var(--color-ink); }
.main-nav a.active { color: var(--color-ink); font-weight: 600; }

/* The centre node from the mark, not a generic underline */
.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--color-orange);
}

.btn-portal {
  background: var(--color-ink) !important;
  color: #ffffff !important;
  padding: 9px 18px !important;
  border-radius: var(--radius-sm) !important;
  text-decoration: none !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  transition: background 0.2s var(--ease) !important;
  white-space: nowrap !important;
}
.btn-portal:hover {
  background: var(--color-blue) !important;
}
.btn-portal::after { display: none !important; }

/* ── 6. HERO ── */
/* Shared hero: used by the inner pages. Flat sand, no blobs.
   Deliberately shorter than the home hero — on a sub-page the hero is a
   title bar, not a landing moment, and the content below is the point. */
.hero {
  background: var(--color-morning-sand);
  padding: clamp(2.25rem, 4.5vw, 3.25rem) 0 clamp(2rem, 4vw, 2.75rem);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--color-dusk-tint);
}

.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  /* One notch below the global h1's 800. The wordmark is SemiBold, and at
     hero scale an ExtraBold heading beside it reads as a mismatch. */
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.85rem;
}

.hero-content > p {
  color: var(--color-mid-gray);
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  max-width: 62ch;
  margin: 0 auto;
  line-height: 1.55;
}

/* Restore spacing only when the hero actually has buttons under it */
.hero-content > p + .hero-buttons { margin-top: 1.75rem; }

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── 6b. HOME HERO — asymmetric, arc motif ── */
.hero--home {
  background: var(--color-morning-sand);
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 0;
  border-bottom: none;
}

.hero--home .hero-content {
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.hero--home h1 {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0 0 1.25rem;
  max-width: 15ch;
}

.hero--home .hero-lede {
  color: var(--color-dark);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 2rem;
}

.hero--home .hero-buttons { justify-content: flex-start; }

/* The mark, used at scale as the hero's single image */
.hero-mark {
  justify-self: center;
  width: min(100%, 340px);
  height: auto;
}

@media (max-width: 900px) {
  .hero--home .hero-content {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-mark { display: none; }
}

/* The shared mobile rule centres hero buttons. The home hero is
   left-aligned, so keep its CTAs on the same axis as the headline. */
@media (max-width: 768px) {
  .hero--home .hero-buttons { align-items: stretch; }
  .hero--home .hero-buttons .btn { max-width: none; }
}

/* ── 7. FEATURE SECTION ── */
.features-section {
  padding: var(--spacing-2xl) 0;
  background: var(--color-warm-pearl);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

.feature-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  border: 1px solid var(--color-hairline);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Border and shadow only. Cards do not jump. */
.feature-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-dusk-tint);
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--color-soft-glow);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  color: var(--color-orange-deep);
  flex-shrink: 0;
}

.feature-icon svg { width: 24px; height: 24px; }

.feature-card h3 {
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  color: var(--color-near-black);
}

.feature-card p {
  font-size: 0.9375rem;
  color: var(--color-mid-gray);
  line-height: 1.5;
  margin: 0;
}

/* ── 7b. SECTION HEADERS ── */
.section-head {
  max-width: 60ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Warm punctuation at the top of each section. Small, but it gives the
   scroll a rhythm that an all-navy page loses. */
.section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-orange-deep);
  margin-bottom: 0.75rem;
}

.section-head h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin: 0 0 0.85rem;
}

.section-head p {
  color: var(--color-dark);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 58ch;
  margin: 0;
}

.section-aside {
  margin-top: 1.5rem !important;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-hairline);
  font-size: 0.9375rem !important;
  color: var(--color-mid-gray) !important;
}

/* Where a section has no intro paragraph, the aside follows the h2 directly and
   its hairline would read as a rule struck under the heading rather than a
   divider between two kinds of text. */
.section-head h2 + .section-aside {
  border-top: none;
  padding-top: 0;
}

/* ── 7c. REASONS — replaces the four identical feature cards ── */
.reasons {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.reasons-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* No marker. These are three claims, not three steps, so a leading numeral was
   only ever decoration — and the 01/02/03 treatment has become a tell. The
   hairline carries the separation and the h3 carries the entry point. */
.reasons-list li {
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-hairline);
}
.reasons-list li:first-child { border-top: none; padding-top: 0; }
.reasons-list li:last-child { padding-bottom: 0; }

.reasons-list h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 0.45rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.reasons-list p {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-dark);
  line-height: 1.6;
  max-width: 56ch;
}

@media (max-width: 860px) {
  .reasons { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── 8. SERVICE PANELS — asymmetric, NBN leads ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--spacing-lg);
}

.service-card {
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-dusk-tint); }

.service-card h3 {
  color: var(--color-ink);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.service-card p {
  color: var(--color-dark);
  flex-grow: 1;
  margin: 0 0 var(--spacing-lg);
  font-size: 0.9375rem;
  line-height: 1.6;
  max-width: 46ch;
}

.service-card .btn { margin-top: auto; }

/* Lead panel — navy drench, carries the primary conversion path */
.service-card--lead {
  grid-column: span 7;
  background: var(--color-ink);
  border-color: var(--color-ink);
  position: relative;
  overflow: hidden;
}
.service-card--lead h3 { color: #ffffff; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.service-card--lead p  { color: rgba(255,255,255,0.78); }

/* Azure earns its place here: 9.2:1 on navy, unusable on light */
.service-card--lead .service-meta { color: var(--color-azure); }

.service-card--sub  { grid-column: span 5; background: var(--color-morning-sand); border-color: var(--color-dusk-tint); }
/* Second row's wide half, so a four-panel grid reads 7/5 then 5/7 rather
   than leaving a seven-column hole under a lone span-5 card. */
.service-card--mid  { grid-column: span 7; }
.service-card--wide { grid-column: span 12; flex-direction: row; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.service-card--wide p { margin-bottom: 0; }
.service-card--wide .service-body { flex: 1; }

.service-meta {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-bottom: 0.85rem;
}

@media (max-width: 860px) {
  .service-card--lead,
  .service-card--sub,
  .service-card--mid,
  .service-card--wide { grid-column: span 12; }
  .service-card--wide { flex-direction: column; align-items: flex-start; }
}

/* ── 9. PLAN CARDS ── */
.nbn-plan-card,
.mobile-plan-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-hairline);
  box-shadow: var(--shadow-card);
  position: relative;
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  padding-top: 1.5rem;
}

.nbn-plan-card:hover,
.mobile-plan-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-orange);
}

.nbn-plan-card.popular,
.mobile-plan-card.popular {
  border-color: var(--color-primary);
}

/* Most Popular pill, anchored above top edge */
.plan-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-orange);
  color: var(--color-ink);
  padding: 4px 16px;
  border-radius: var(--radius-lg);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 2;
}

/* Tag stripe (FTTP Only / ideal-for) */
.plan-tag {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  margin: 0 1.5rem 1rem;
  color: #ffffff;
  display: block;
}
.plan-tag--orange { background: var(--color-orange); color: var(--color-ink); }
.plan-tag--teal   { background: var(--color-blue); }
.plan-tag--promo  { background: var(--color-orange); color: var(--color-ink); }

/* Plan header block */
.plan-header-area {
  text-align: center;
  padding: 0 1.5rem 1.25rem;
  border-bottom: 2px solid var(--color-hairline);
}

.plan-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-near-black);
  margin-bottom: 0.5rem;
}

.plan-price-block {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.75rem;
  line-height: 1;
}

/* The whole price is one colour. An orange dollar sign against a navy
   numeral splits a single value into two competing marks. */
.plan-currency { font-size: 1.25rem; color: var(--color-ink); font-weight: 600; margin-right: 1px; }
.plan-amount   { font-size: 2.5rem;  color: var(--color-ink); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.plan-period   { font-size: 0.875rem; color: var(--color-mid-gray); margin-left: 4px; }

.plan-speed-badge,
.plan-network-badge {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 4px 12px;
  background: rgba(18,51,111,0.10);
  color: var(--color-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}

/* Data amount (mobile plans) */
.plan-data-amount {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-near-black);
  margin-bottom: 0.25rem;
}
.plan-data-original {
  font-size: 0.875rem;
  text-decoration: line-through;
  opacity: 0.5;
  margin-left: 0.25rem;
}
.plan-promo-text {
  font-size: 0.75rem;
  color: var(--color-primary);
  font-weight: 600;
  margin: 0.25rem 0 0.5rem;
}

/* Description strip */
.plan-description {
  padding: 1rem 1.5rem;
  font-size: 0.875rem;
  color: var(--color-mid-gray);
  text-align: center;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-hairline);
}

/* Features body */
.plan-features-area {
  flex-grow: 1;
  padding: 1.25rem 1.5rem;
}

/* Feature rows — icon + text */
.plan-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-dark);
  line-height: 1.4;
}

.plan-feature-row strong { font-weight: 600; }

/* One colour for every feature-list icon. Alternating orange and blue
   down a checklist reads as noise, not as meaning: nothing in the list
   is more "included" than anything else. Inline colour overrides on
   individual rows are removed rather than tuned. */
.plan-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--color-blue) !important;
}

.plan-feature-icon svg { width: 18px; height: 18px; display: block; }

/* Callout row — full border, NO side-stripe */
.plan-feature-row--callout {
  padding: 0.625rem 0.75rem;
  background: var(--color-soft-glow);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-dusk-tint);
  margin-top: 0.5rem;
}

/* International calls callout (mobile) */
.plan-intl-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-soft-glow);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-dusk-tint);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-dark);
  margin-top: 0.5rem;
}

.plan-intl-callout strong { font-weight: 600; display: block; }
.plan-intl-callout small  { color: var(--color-mid-gray); font-size: 0.8125rem; }

/* Plan card footer */
.plan-footer-area {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid var(--color-hairline);
  margin-top: auto;
}

.plan-footer-area .btn { display: block; width: 100%; text-align: center; }

.plan-footer-note {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 0.75rem;
  text-align: center;
  line-height: 1.4;
  margin-bottom: 0;
}

/* Plans grids */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-xl);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── 9b. NBN PLANS GRID (responsive, no carousel) ── */
.nbn-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1.25rem;
  max-width: 1100px;
  margin: 0 auto;
}

.nbn-plans-grid .nbn-plan-card {
  padding: 1.5rem 1.3rem 1.4rem;
  text-align: left;
}

.plan-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nbn-plans-grid .plan-name { font-size: 1.4rem; margin: 0; }

.nbn-plans-grid .plan-speed-badge { margin-top: 0; white-space: nowrap; }

.nbn-plans-grid .plan-price-block { justify-content: flex-start; margin: 0 0 0.85rem; }

.plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.plan-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  line-height: 1.2;
}
/* On a plan card, orange means one thing only: "this is the popular one"
   (the badge and the border). Benefit and spec chips stay quiet so that
   signal survives. */
.plan-chip--orange { background: var(--color-soft-glow); color: var(--color-ink); border: 1px solid var(--color-dusk-tint); }
.plan-chip--teal   { background: rgba(18,51,111,0.10); color: var(--color-blue); }

/* FTTP-only plan emphasis — teal border + full-width banner */
.nbn-plan-card.fttp-only { border-color: var(--color-secondary); }
.plan-fttp-banner {
  margin: -1.5rem -1.3rem 1.1rem;
  background: var(--color-secondary);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.01em;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1.25;
}
.plan-fttp-banner svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Connection types on every plan card. Without this only the nbn500 card
   named a technology, and FTTP customers read that as "FTTP gets nbn500
   only". FTTP is filled on every card so it is visibly on all of them. */
.plan-tech {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.85rem;
}
.plan-tech-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-right: 0.15rem;
}
.plan-tech-tag {
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(18,51,111,0.35);
  color: var(--color-blue);
}
.plan-tech-tag--fttp { background: var(--color-blue); border-color: var(--color-blue); color: #ffffff; }

.plan-blurb {
  font-size: 0.875rem;
  color: var(--color-mid-gray);
  line-height: 1.5;
  margin: 0 0 1.1rem;
  flex-grow: 1;
}

.plan-cta { display: block; width: 100%; text-align: center; }

.plan-evening {
  font-size: 0.6875rem;
  color: #999;
  text-align: center;
  line-height: 1.4;
  margin: 0.7rem 0 0;
}

/* ── 9c-b. CORE INCLUSIONS STRIP ──
   The three things true of every plan, stated before the comparison
   rather than only in the band underneath them. A customer should not
   have to scroll past seven prices to learn what they all include. */
.plans-topline {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: 0.9rem 1.25rem;
  background: var(--color-white);
  border: 1px solid var(--color-dusk-tint);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2rem;
  list-style: none;
}

.plans-topline li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.3;
}

.plans-topline .plans-include-icon {
  width: 24px;
  height: 24px;
}

/* Every mobile plan has been 5G since the October 2026 refresh, so the network
   stopped being a per-plan variable and became the first thing the table should
   say. It gets the blue-on-blue-tint speed badge treatment rather than orange:
   orange on this page already means "this is the popular plan", and a second
   orange pill in the row above would blunt it. */
.plans-5g-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  background: rgba(18,51,111,0.10);
  color: var(--color-blue);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border-radius: 999px;
}

/* The page h1 carries "5G" in the name of the thing being sold, so the badge
   and the per-row mark label it rather than restating it in prose. */
.plans-topline .plans-include-icon svg { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .plans-topline {
    justify-content: flex-start;
    gap: 0.65rem;
    flex-direction: column;
    align-items: flex-start;
  }
  .plans-topline li { font-size: 0.875rem; }
}

/* ── 9c-c. PLAN GROUPS ──
   Network type was a small chip carrying the same weight as every other
   chip, so the 4G/5G split was easy to miss. Grouping makes it structural:
   you cannot scan the list without seeing which tier you are in. It also
   lets the shared 5G benefit sit in the header instead of repeating on
   every row underneath. */
.plan-group + .plan-group { margin-top: 2.25rem; }

.plan-group-head {
  max-width: 900px;
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--color-dusk-tint);
}

.plan-group-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Filled for 5G, quiet for 4G: weight carries the hierarchy, not a new hue */
.plan-group-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--color-blue);
  color: #ffffff;
  line-height: 1;
}
.plan-group-badge--quiet {
  background: transparent;
  color: var(--color-mid-gray);
  border: 1px solid var(--color-input-border);
}

.plan-group-note {
  font-size: 0.875rem;
  color: var(--color-mid-gray);
  margin: 0;
  line-height: 1.4;
}
.plan-group-note strong { color: var(--color-dark); font-weight: 600; }

@media (max-width: 700px) {
  .plan-group-head { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

/* ── 9d. PLAN ROWS (mobile plans) ──
   Seven mobile plans differ only by data, price and network. As cards
   that meant repeating five identical feature rows seven times, which
   buries the one thing a customer is comparing. Rows put every price on
   one axis and the shared features get stated once, below. */
.plan-rows {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Fixed track widths, not `auto`. Each row is its own grid, so an auto
   first column made "100GB 5G" wider than "10GB 4G" and every row started
   its bullets at a different x. Fixed tracks align the whole table and
   give the columns an even rhythm instead of one large arbitrary gap. */
.plan-row {
  position: relative;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 92px 124px;
  align-items: center;
  column-gap: 1.75rem;
  row-gap: 0.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.plan-row:hover { border-color: var(--color-dusk-tint); box-shadow: var(--shadow-card); }

/* Orange means one thing here too: this is the recommended plan */
.plan-row--popular { border-color: var(--color-orange); }

/* Number and unit are separated by size, weight and colour rather than
   sitting flush: "10GB" set as one solid word is hard to parse at a glance.
   Network type now lives in the group header, not on every row. */
.plan-row-data { line-height: 1; }

.plan-row-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan-row-unit {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-mid-gray);
  margin-left: 0.22em;
  letter-spacing: 0.02em;
}

.plan-row-data small {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-mid-gray);
  margin-top: 0.45rem;
}

/* "5G · PER MONTH" under the data figure. A chip on every row would be six
   copies of the same shout, so the network rides the line that is already
   there and takes the blue to separate it from the grey. */
.plan-row-data small b {
  color: var(--color-blue);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Inclusions read as a scannable list, not a sentence */
.plan-row-feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.plan-row-feats li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--color-dark);
}
.plan-row-feats li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-blue);
}
.plan-row-feats strong { font-weight: 600; color: var(--color-ink); }

/* Every marker in the list is the same. Colour-coding a subset by category
   reads as an inconsistency, not as meaning: nothing in the list is more
   included than anything else. Ordering carries the emphasis instead —
   talk and text leads, because it is what makes these phone plans. */

.plan-row-feats .plan-row-revert { color: var(--color-mid-gray); font-style: italic; }
.plan-row-feats .plan-row-revert::before { background: var(--color-mid-gray); }

/* Fine print, replacing a closing band that repeated the topline strip */
.plans-smallprint {
  max-width: 900px;
  margin: 1.75rem auto 0;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-mid-gray);
}

.plan-row-price {
  text-align: right;
  white-space: nowrap;
  color: var(--color-ink);
}
.plan-row-price b {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.plan-row-price span { font-size: 0.8125rem; color: var(--color-mid-gray); }

/* Full-width in its fixed track so every CTA shares one edge */
.plan-row .btn { padding: 11px 16px; width: 100%; }

.plan-row-flag {
  position: absolute;
  top: -9px;
  left: 1.4rem;
  background: var(--color-orange);
  color: var(--color-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 999px;
}

@media (max-width: 820px) {
  .plan-row {
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    row-gap: 0.85rem;
    padding: 1.25rem 1.15rem;
  }
  .plan-row-data  { grid-column: 1; grid-row: 1; }
  .plan-row-price { grid-column: 2; grid-row: 1; align-self: start; }
  .plan-row-feats { grid-column: 1 / -1; grid-row: 2; }
  .plan-row .btn  { grid-column: 1 / -1; width: 100%; }
}

/* Every-plan-includes band — shared features listed once */
.plans-includes {
  max-width: 1100px;
  margin: 1.75rem auto 0;
  background: var(--color-soft-glow);
  border: 2px solid var(--color-dusk-tint);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.6rem;
}

.plans-includes-title {
  text-align: center;
  font-weight: 700;
  color: var(--color-near-black);
  font-size: 1.05rem;
  margin: 0 0 1rem;
}

.plans-includes-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.85rem 1.5rem;
}

.plans-include-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-dark);
  line-height: 1.4;
}
.plans-include-item strong { font-weight: 600; }

/* Was a green tick on a green tint, which belonged to no palette here. */
.plans-include-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(18,51,111,0.08);
  color: var(--color-blue);
}
.plans-include-icon svg { width: 15px; height: 15px; }
/* Matches the other icons in the band. A single odd-coloured item in a
   uniform list reads as an error, not as emphasis. */
.plans-include-icon--infinity {
  background: rgba(18,51,111,0.08);
  color: var(--color-blue);
  font-size: 1.15rem;
  font-weight: 700;
}

@media (max-width: 600px) {
  .nbn-plans-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .nbn-plans-grid .nbn-plan-card { padding: 1.15rem 0.95rem 1.1rem; }
  .plan-fttp-banner { margin: -1.15rem -0.95rem 0.9rem; font-size: 0.72rem; }
  .nbn-plans-grid .plan-name { font-size: 1.15rem; }
  .nbn-plans-grid .plan-amount { font-size: 2rem; }
  .plan-card-head { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .plans-includes { padding: 1.2rem 1.1rem; }
  .plans-includes-grid { grid-template-columns: 1fr; gap: 0.7rem; }
}

@media (max-width: 360px) {
  .nbn-plans-grid { grid-template-columns: 1fr; }
}

/* ── 9c. CONTACT PAGE ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--spacing-xl);
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

.contact-info-card,
.contact-form-card {
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-card);
}
.contact-info-card { background: var(--color-warm-pearl); border: 2px solid var(--color-dusk-tint); }
.contact-form-card { background: #ffffff; border: 2px solid var(--color-hairline); }

.contact-info-list {
  list-style: none;
  margin: 0 0 var(--spacing-xl);
  padding: 0;
  display: grid;
  gap: 1.15rem;
}
.contact-info-list li { display: flex; gap: 0.85rem; align-items: flex-start; }
.contact-info-list p { margin: 0; font-weight: 600; color: var(--color-dark); }
.contact-info-list a { color: var(--color-dark); text-decoration: none; font-weight: 600; }
.contact-info-list a:hover { color: var(--color-primary); }

.contact-info-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(18,51,111,0.10);
  color: var(--color-secondary);
}
.contact-info-icon svg { width: 20px; height: 20px; }

.contact-info-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-mid-gray);
  margin-bottom: 2px;
}

/* Form controls */
.contact-form .form-group { width: 100%; margin-bottom: 1.1rem; }
.contact-form label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-dark);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border: 2px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  color: var(--color-dark);
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(254,86,5,0.14);
}
.contact-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235A5A5A'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 14px;
  padding-right: 2.25rem;
}

/* Honeypot — kept in the layout flow but off-screen for humans */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Turnstile widget wrapper. The widget runs in interaction-only mode, so for
   almost every visitor it renders at zero height and this is just the normal
   gap above the send button; the checkbox only appears when Cloudflare
   actually wants to challenge someone. */
.contact-turnstile { margin-bottom: var(--spacing-md); }
.contact-turnstile iframe { max-width: 100%; }

/* Submit status message */
.contact-status {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1.1rem;
  line-height: 1.45;
}
.contact-status--success { background: #F1F8F2; border: 2px solid #BFDFC6; color: #1F6B33; }
.contact-status--error   { background: #FDF2F2; border: 2px solid #F3C6C6; color: #991b1b; }

@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-info-card,
  .contact-form-card { padding: 1.5rem; }
}

/* ── 10. CAROUSEL (legacy — retained for any other carousel usage) ── */
.plans-carousel-outer {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 64px;
  box-sizing: border-box;
}

.plans-carousel-track-wrap {
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  padding: 1rem 0 1.5rem;
}

.plans-carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  align-items: stretch;
}

.plans-carousel-track .nbn-plan-card {
  flex: 0 0 calc((100% - 3rem) / 3);
  width: calc((100% - 3rem) / 3);
  min-width: 260px;
  max-width: 420px;
  box-sizing: border-box;
}

.plans-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--color-ink);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0,17,51,0.22);
  padding: 0;
  z-index: 10;
}

.plans-carousel-prev { left: 0; }
.plans-carousel-next { right: 0; }

.plans-carousel-btn:hover:not(:disabled) {
  background: var(--color-primary-deep);
  box-shadow: 0 6px 20px rgba(0,17,51,0.30);
  transform: translateY(-50%);
}

.plans-carousel-btn:disabled {
  background: var(--color-input-border);
  color: #5A6B80;
  cursor: not-allowed;
  box-shadow: none;
  transform: translateY(-50%);
}

.plans-carousel-dots {
  display: none;
}

/* ── 11. ADDRESS CHECKER ── */
.address-checker-section {
  width: 100%;
  padding: 2rem 0;
  background: #ffffff;
  border-top: 1px solid var(--color-input-border);
  border-bottom: 3px solid var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.address-form { display: flex; flex-direction: column; width: 100%; }
.form-group   { width: 100%; }

#address-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 0.875rem;
  border: 2px solid var(--color-input-border);
  border-radius: var(--radius-md);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  transition: border-color 0.2s;
  background: #ffffff;
  color: var(--color-dark);
}

#address-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(254,86,5,0.12);
}

.address-spinner {
  display: none;
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2.5px solid #FCE8DC;
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: address-spin 0.7s linear infinite;
  pointer-events: none;
  z-index: 5;
}
.address-spinner.active { display: block; }

@keyframes address-spin {
  to { transform: translateY(-50%) rotate(360deg); }
}

#check-address-btn:disabled {
  background: #5A6B80 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.7;
}

.address-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #ffffff;
  border: 2px solid var(--color-dusk-tint);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}

#qualification-results { display: block; }
#qualification-results:empty { display: none; }

/* ── 12. FAQ ── */
.faq-section {
  padding: var(--spacing-2xl) 0;
  background: var(--color-warm-pearl);
}

.faq-item { border-bottom: 1px solid var(--color-hairline); }
.faq-item:last-child { border-bottom: none; }

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg) 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-near-black);
  gap: var(--spacing-md);
  user-select: none;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--color-primary); }

.faq-icon {
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--color-primary);
  flex-shrink: 0;
  line-height: 1;
}

.faq-answer {
  font-size: 0.9375rem;
  color: var(--color-mid-gray);
  line-height: 1.6;
}
.faq-answer p, .faq-answer li { font-size: 0.9375rem; }

/* ── 13. CTA SECTION ── */
/* Light, not navy. A dark CTA band sitting directly on the dark footer
   merges into one enormous block and makes the page bottom feel heavy.
   Keeping it on sand lets the wave divider and the footer do that job. */
.cta-section {
  padding: var(--spacing-2xl) 0;
  background: var(--color-morning-sand);
  color: var(--color-dark);
}
.cta-section h2 { color: var(--color-ink); }
.cta-section p {
  color: var(--color-dark);
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* Explicit dark variant, for a band that is NOT adjacent to the footer */
.cta-section.on-ink {
  background: var(--color-ink);
  color: #ffffff;
}
.cta-section.on-ink h2 { color: #ffffff; }
.cta-section.on-ink p  { color: rgba(255,255,255,0.78); }

/* ── 14. ABOUT SECTION — asymmetric, founder-led ── */
.about-section {
  /* No bottom padding: the wave divider is the last child and must sit
     flush against the navy band below it. */
  padding: var(--spacing-2xl) 0 0;
  background: var(--color-warm-pearl);
}
.about-section .wave-divider { margin-top: var(--spacing-2xl); }
.about-section .inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
  align-items: start;
}
.about-section h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
}
.about-section p {
  color: var(--color-dark);
  max-width: 62ch;
  margin-left: 0;
  margin-right: 0;
  line-height: 1.65;
}
.about-section p strong { color: var(--color-ink); font-weight: 600; }

/* Pull quote — the founder line earns emphasis without a side-stripe */
.about-quote {
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--color-ink);
  letter-spacing: -0.01em;
  margin: 0 0 1.5rem;
  max-width: 24ch;
}

@media (max-width: 860px) {
  .about-section .inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-quote { max-width: none; }
}

/* ── 15. FOOTER ── */
.site-footer {
  background: var(--color-ink);
  color: #ffffff;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
}

/* Five tracks: brand, Home, Business, Support, Get in Touch. Home and
   Business are split because a single "Services" list mixing residential
   and business plans gave a business visitor nothing to aim at. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 3rem;
}

.footer-logo { height: 34px; width: auto; margin-bottom: 1.1rem; }

.footer-col h3 { color: #ffffff; font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.footer-col h4 {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

@media (max-width: 1080px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-col p  { color: rgba(255,255,255,0.70); line-height: 1.6; margin-bottom: 1rem; font-size: 0.9375rem; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.75rem; }
.footer-links a {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s;
}
/* Azure is the dark-surface accent — 9.2:1 on navy, unusable on light */
.footer-links a:hover,
.site-footer a:hover { color: var(--color-azure); }

.footer-contact-list { list-style: none; padding: 0; margin: 0; }

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}

/* Azure, not orange — same adjacency rule as the buttons above. */
.footer-contact-icon {
  color: var(--color-azure);
  flex-shrink: 0;
  margin-top: 2px;
}
.footer-contact-icon svg { width: 18px; height: 18px; display: block; }

.footer-contact-item a,
.footer-contact-item span {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.footer-contact-item a:hover { color: var(--color-primary); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 2rem;
  text-align: center;
}
.footer-bottom p  { color: rgba(255,255,255,0.50); font-size: 0.875rem; margin: 0; }
.footer-bottom a  { color: rgba(255,255,255,0.50); text-decoration: none; transition: color 0.2s; }

/* ── 15b. WAVE DIVIDER — the waterline from the mark ── */
.wave-divider {
  display: block;
  width: 100%;
  height: clamp(28px, 4vw, 48px);
  color: var(--color-morning-sand);
  /* The height is fractional, so the svg's bottom edge can leave a hairline of
     page background above whatever follows. Let the next band cover it. */
  margin-bottom: -1px;
}
.wave-divider svg { width: 100%; height: 100%; display: block; }

/* The footer's wave sits outside <main>, so its transparent upper half shows
   the body background rather than the last band's. Match it when that band is
   the sand CTA; use --sand manually on pages that end sand some other way. */
main:has(> .cta-section) + .wave-divider,
.wave-divider--sand { background: var(--color-morning-sand); }
.wave-divider--pearl { color: var(--color-warm-pearl); }
.wave-divider--ink   { color: var(--color-ink); }

/* Navy band wrapper */
.section-ink {
  background: var(--color-ink);
  color: #ffffff;
  padding: clamp(3rem, 6vw, 5rem) 0;
}
.section-ink h2, .section-ink h3 { color: #ffffff; }
.section-ink p { color: rgba(255,255,255,0.78); }
.section-ink .section-label { color: var(--color-azure); }

/* ── 16. UTILITIES ── */
.text-center    { text-align: center; }
/* Text utilities use the deepened orange — the pure sunset is a fill
   colour, not a text colour, at body sizes. */
.text-primary   { color: var(--color-orange-deep); }
.text-secondary { color: var(--color-blue); }
.text-accent    { color: var(--color-orange-deep); }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 2rem; }

/* Callout block (full border) */
.callout-block {
  background: var(--color-soft-glow);
  border: 2px solid var(--color-dusk-tint);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}

/* Fibre note box */
.fibre-note {
  margin: 3rem auto 0;
  text-align: center;
  background: #ffffff;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  max-width: 800px;
  box-shadow: var(--shadow-card);
}
.fibre-note p { margin: 0; color: var(--color-dark); font-size: 0.9375rem; }

/* ── 17. RESPONSIVE ── */
@media (max-width: 768px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }

  .mobile-menu-toggle { display: block !important; margin-left: auto; z-index: 1001; }

  /* backdrop-filter on an ancestor makes it the containing block for fixed
     descendants, which collapsed the nav panel to the header's height. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fffdfb;
  }

  .main-nav {
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    flex-direction: column;
    gap: 0;
    padding: 0;
    z-index: 999;
    overflow-y: auto;
    display: none;
  }
  .main-nav.mobile-open { display: flex !important; }

  .main-nav a {
    width: 100%;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--color-dusk-tint);
  }
  .main-nav a::after { display: none !important; }
  .main-nav a:active,
  .main-nav a.active { background: var(--color-dusk-tint); }

  .btn-portal {
    width: calc(100% - 40px) !important;
    margin: 10px 20px !important;
    text-align: center !important;
  }

  .hero { padding: 3rem 0 2.5rem; }
  .hero-buttons { flex-direction: column; align-items: center; }
  .hero-buttons .btn { width: 100%; max-width: 280px; }

  .plans-carousel-outer { padding: 0; }
  .plans-carousel-outer::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 72px;
    background: linear-gradient(to left, #FAF8F5 25%, transparent);
    pointer-events: none;
    z-index: 5;
    transition: opacity 0.3s ease;
    border-radius: 0 12px 12px 0;
  }
  .plans-carousel-outer.at-end::after { opacity: 0; }
  .plans-carousel-btn { display: none; }
  .plans-carousel-track-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .plans-carousel-track-wrap::-webkit-scrollbar { display: none; }
  .plans-carousel-track { transition: none; }
  .plans-carousel-track .nbn-plan-card {
    flex: 0 0 85vw !important;
    width: 85vw !important;
    scroll-snap-align: start;
  }
  .plans-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 1.125rem;
    padding: 0.25rem 0;
  }
  .plans-carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #D8DDE7;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
    flex-shrink: 0;
  }
  .plans-carousel-dot.active {
    background: var(--color-primary);
    transform: scale(1.5);
  }

  .address-checker-section { display: none !important; }

  .features-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { gap: 2rem; }
}

@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .plans-carousel-track .nbn-plan-card {
    flex: 0 0 calc((100% - 1.5rem) / 2);
    width: calc((100% - 1.5rem) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   18. BUSINESS PAGES
   business-nbn-plans.php and business-mobile-plans.php.

   These reuse the residential plan primitives wherever they fit
   (.plan-row, .nbn-plan-card, .plans-topline). What is genuinely
   new is the pool builder, which has no residential equivalent.
   ============================================================ */

/* -- 18a. BUSINESS EYEBROW STRIP --
   Sits under the hero on both business pages. Three commitments,
   stated before any price, because business buyers qualify on
   terms first and cost second. */
.biz-strip {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}

.biz-strip li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: var(--color-white);
  border: 1px solid var(--color-dusk-tint);
  border-radius: var(--radius-lg);
}

.biz-strip-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(18,51,111,0.08);
  color: var(--color-blue);
}
.biz-strip-icon svg { width: 18px; height: 18px; }

.biz-strip strong {
  display: block;
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.15rem;
}
.biz-strip-note {
  display: block;
  color: var(--color-mid-gray);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Free-of-charge marker. Orange earns its place here: it is the one
   commercial claim on the strip, not decoration on every item. */
.biz-free {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange-deep);
  background: var(--color-soft-glow);
  border: 1px solid var(--color-dusk-tint);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: 0.1em;
}

/* -- 18b. SLA BUNDLE PANEL --
   Navy-drenched, matching .service-card--lead: this is the one
   contracted, premium product on the business NBN page and it must
   not read as a fourth item in the plan grid. */
.sla-panel {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--color-ink);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.sla-panel h3 {
  color: #ffffff;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
}
.sla-panel p { color: rgba(255,255,255,0.78); font-size: 0.9375rem; line-height: 1.55; margin: 0 0 1rem; }
.sla-panel .section-label { color: var(--color-azure); display: block; margin-bottom: 0.7rem; }

.sla-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sla-points li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.82);
}
.sla-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-azure);
}
.sla-points strong { color: #ffffff; font-weight: 600; }

/* The response-time figure is the whole product. Given as one large
   numeral on its own surface rather than buried in the bullet list. */
.sla-figure {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem;
  text-align: center;
}
.sla-figure-num {
  display: block;
  font-size: clamp(3rem, 7vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--color-azure);
  font-variant-numeric: tabular-nums;
}
.sla-figure-unit {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin-top: 0.6rem;
}
.sla-figure-speed {
  display: inline-block;
  margin-top: 1.1rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  color: #ffffff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sla-figure .btn { margin-top: 1.1rem; width: 100%; }

.sla-smallprint {
  max-width: 1100px;
  margin: 1rem auto 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--color-mid-gray);
  text-align: center;
}

@media (max-width: 820px) {
  .sla-panel { grid-template-columns: 1fr; }
}

/* -- 18c. POOL BUILDER --
   Two columns: the picker is the work surface, the summary is the
   result. The summary is navy so the pool total is the single
   brightest object on the page - it is the answer the visitor came
   for. It sticks on desktop so the number never leaves view while
   services are being added. */
.pool-builder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .pool-builder { grid-template-columns: 1fr; }
}

.pool-picker-group + .pool-picker-group { margin-top: 1.5rem; }

.pool-picker-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-dusk-tint);
}
.pool-picker-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: -0.01em;
}
.pool-picker-note {
  font-size: 0.8125rem;
  color: var(--color-mid-gray);
  margin: 0;
  line-height: 1.4;
}

.pool-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pool-plan {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.1rem;
  row-gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* Selected state is a border change only. No lift - see the motion rule. */
.pool-plan.is-active { border-color: var(--color-blue); box-shadow: var(--shadow-card); }

/* Block, so the network badge underneath it starts a new line instead of
   trying to share the 84px track with the figure. */
.pool-plan-data {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pool-plan-data small {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-mid-gray);
  margin-left: 0.15em;
  letter-spacing: 0.02em;
}
.pool-plan-net {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(18,51,111,0.10);
  color: var(--color-blue);
  line-height: 1.4;
}

.pool-plan-body strong {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}
.pool-plan-body span {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-mid-gray);
  line-height: 1.4;
  margin-top: 0.15rem;
}
.pool-plan-price { font-weight: 600; color: var(--color-dark); }

/* Stepper. Square targets, 40px, so it stays usable on a phone. */
.pool-stepper {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pool-stepper button {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--color-input-border);
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.pool-stepper button:hover:not(:disabled) { border-color: var(--color-ink); background: rgba(0,17,51,0.04); }
.pool-stepper button:disabled { opacity: 0.4; cursor: not-allowed; }

.pool-count {
  min-width: 2.25rem;
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .pool-plan { grid-template-columns: 72px minmax(0, 1fr); }
  .pool-stepper { grid-column: 1 / -1; justify-content: flex-end; }
}

/* -- 18d. POOL SUMMARY -- */
.pool-summary {
  background: var(--color-ink);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  position: sticky;
  top: 96px;
}
@media (max-width: 900px) {
  .pool-summary { position: static; }
}

.pool-summary h3 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--color-azure);
}

.pool-total {
  text-align: center;
  padding-bottom: 1.15rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.pool-total-num {
  display: block;
  font-size: clamp(3rem, 8vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}
.pool-total-num small {
  font-size: 0.35em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--color-azure);
  margin-left: 0.15em;
}
.pool-total-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 0.6rem;
}

.pool-stats {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pool-stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
}
.pool-stats b {
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pool-stats li.pool-stat-total {
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.9375rem;
  color: #ffffff;
}
.pool-stats li.pool-stat-total b { font-size: 1.25rem; letter-spacing: -0.02em; }

.pool-lines {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0.9rem 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pool-lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.72);
}
.pool-lines span { font-variant-numeric: tabular-nums; white-space: nowrap; }

.pool-empty {
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.6);
  text-align: center;
  margin: 0 0 1.15rem;
}

.pool-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.pool-actions .btn { width: 100%; }

/* -- 18e. POOL LIMIT NOTE --
   Only appears once the pool is full, so it explains why every add button
   has just gone dead rather than leaving the picker looking broken. */
.pool-limit-note {
  margin: 1rem 0 0;
  padding: 0.85rem 1.1rem;
  background: var(--color-soft-glow);
  border: 1px solid var(--color-dusk-tint);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-dark);
}
.pool-limit-note[hidden] { display: none; }

/* -- 18f. POOLING EXPLAINER --
   Numbered, because pooling is a sequence, not a set of features. */
.pool-how {
  list-style: none;
  counter-reset: poolhow;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  max-width: 1100px;
}
.pool-how li { counter-increment: poolhow; }
.pool-how li::before {
  content: counter(poolhow);
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-orange-deep);
  margin-bottom: 0.6rem;
}
.pool-how h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; color: var(--color-ink); }
.pool-how p { font-size: 0.875rem; line-height: 1.55; color: var(--color-mid-gray); margin: 0; }