/* ==========================================================================
   iFibre UI Framework
   Version: 1.0.0
   Purpose: Marketing website, customer portal, product catalogue,
            ordering, support and operational status surfaces.
   Naming: .if-* component classes, --if-* design tokens.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  color-scheme: light;

  /* Core brand system: dark network base, fibre cyan, warm signal accent */
  --if-ink-950: #07111f;
  --if-ink-900: #0b1728;
  --if-ink-850: #102039;
  --if-ink-800: #172a45;
  --if-ink-700: #263a55;
  --if-ink-600: #44566e;
  --if-ink-500: #65748a;
  --if-ink-400: #8b98aa;
  --if-ink-300: #b3bdca;
  --if-ink-200: #d2d9e2;
  --if-ink-100: #e9edf2;
  --if-ink-50: #f6f8fb;

  --if-cyan-700: #007a9f;
  --if-cyan-600: #009bc6;
  --if-cyan-500: #00bde8;
  --if-cyan-400: #36d5f4;
  --if-cyan-300: #79e4f7;
  --if-cyan-200: #b6eff9;
  --if-cyan-100: #ddf8fc;
  --if-cyan-50: #f1fcfe;

  --if-signal-700: #a95400;
  --if-signal-600: #d66b00;
  --if-signal-500: #ff8a1f;
  --if-signal-400: #ffa44f;
  --if-signal-300: #ffc17f;
  --if-signal-200: #ffdab0;
  --if-signal-100: #fff0df;

  --if-white: #ffffff;
  --if-black: #02060b;

  --if-success-700: #08745b;
  --if-success-100: #dcf7ef;
  --if-warning-700: #8a5700;
  --if-warning-100: #fff2cf;
  --if-danger-700: #a82d3d;
  --if-danger-100: #fde7ea;
  --if-info-700: #1768a8;
  --if-info-100: #e4f2ff;

  --if-bg: var(--if-white);
  --if-bg-subtle: var(--if-ink-50);
  --if-surface: var(--if-white);
  --if-surface-raised: var(--if-white);
  --if-text: var(--if-ink-900);
  --if-text-muted: var(--if-ink-600);
  --if-border: var(--if-ink-200);
  --if-border-strong: var(--if-ink-400);
  --if-primary: var(--if-cyan-600);
  --if-primary-hover: var(--if-cyan-700);
  --if-accent: var(--if-signal-500);

  --if-gradient-brand:
    linear-gradient(135deg, var(--if-cyan-500) 0%, #4fdfff 40%, var(--if-signal-400) 115%);
  --if-gradient-dark:
    radial-gradient(circle at 18% 12%, rgba(0, 189, 232, .22), transparent 31%),
    radial-gradient(circle at 86% 18%, rgba(255, 138, 31, .16), transparent 26%),
    linear-gradient(145deg, var(--if-ink-950), var(--if-ink-850) 56%, #132a44);
  --if-gradient-soft:
    linear-gradient(145deg, var(--if-cyan-50), var(--if-white) 48%, var(--if-signal-100));

  --if-font-sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --if-font-display: "Space Grotesk", Inter, "Segoe UI", sans-serif;
  --if-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --if-fs-xs: .75rem;
  --if-fs-sm: .875rem;
  --if-fs-md: 1rem;
  --if-fs-lg: 1.125rem;
  --if-fs-xl: 1.25rem;
  --if-fs-2xl: 1.5rem;
  --if-fs-3xl: clamp(1.75rem, 3vw, 2.25rem);
  --if-fs-4xl: clamp(2.15rem, 5vw, 3.75rem);
  --if-fs-5xl: clamp(3rem, 8vw, 6.4rem);

  --if-lh-tight: 1.06;
  --if-lh-heading: 1.18;
  --if-lh-body: 1.55;
  --if-tracking-caps: .12em;

  --if-space-1: .25rem;
  --if-space-2: .5rem;
  --if-space-3: .75rem;
  --if-space-4: 1rem;
  --if-space-5: 1.25rem;
  --if-space-6: 1.5rem;
  --if-space-7: 2rem;
  --if-space-8: 2.5rem;
  --if-space-9: 3rem;
  --if-space-10: 4rem;
  --if-space-11: 5rem;
  --if-space-12: 7rem;

  --if-radius-xs: .25rem;
  --if-radius-sm: .5rem;
  --if-radius-md: .875rem;
  --if-radius-lg: 1.25rem;
  --if-radius-xl: 1.75rem;
  --if-radius-pill: 999px;

  --if-shadow-xs: 0 1px 2px rgba(7, 17, 31, .07);
  --if-shadow-sm: 0 8px 24px rgba(7, 17, 31, .08);
  --if-shadow-md: 0 18px 48px rgba(7, 17, 31, .13);
  --if-shadow-lg: 0 28px 80px rgba(7, 17, 31, .2);
  --if-glow-cyan: 0 0 0 4px rgba(0, 189, 232, .18);

  --if-content: 1180px;
  --if-content-wide: 1440px;
  --if-prose: 720px;
  --if-sidebar: 272px;
  --if-header: 76px;

  --if-ease: cubic-bezier(.2, .8, .2, 1);
  --if-fast: 140ms;
  --if-base: 240ms;
  --if-slow: 420ms;

  --if-z-header: 100;
  --if-z-dropdown: 200;
  --if-z-drawer: 300;
  --if-z-modal: 400;
  --if-z-toast: 500;
}

[data-theme="dark"] {
  color-scheme: dark;
  --if-bg: var(--if-ink-950);
  --if-bg-subtle: var(--if-ink-900);
  --if-surface: var(--if-ink-900);
  --if-surface-raised: var(--if-ink-850);
  --if-text: var(--if-white);
  --if-text-muted: var(--if-ink-300);
  --if-border: var(--if-ink-700);
  --if-border-strong: var(--if-ink-500);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--if-bg);
  color: var(--if-text);
  font-family: var(--if-font-sans);
  font-size: var(--if-fs-md);
  line-height: var(--if-lh-body);
  -webkit-font-smoothing: antialiased;
}

body.if-lock-scroll { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: var(--if-cyan-700); text-underline-offset: .2em; }
a:hover { color: var(--if-cyan-600); }
hr { border: 0; border-top: 1px solid var(--if-border); margin: var(--if-space-7) 0; }
p { margin: 0 0 var(--if-space-4); }
ul, ol { margin: 0 0 var(--if-space-4); padding-left: 1.25rem; }
code, pre, kbd { font-family: var(--if-font-mono); }
code { padding: .1em .35em; background: var(--if-bg-subtle); border-radius: var(--if-radius-xs); }
pre { overflow: auto; padding: var(--if-space-5); background: var(--if-ink-950); color: var(--if-ink-100); border-radius: var(--if-radius-md); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--if-text);
  font-family: var(--if-font-display);
  line-height: var(--if-lh-heading);
  letter-spacing: -.025em;
}
h1 { font-size: var(--if-fs-4xl); }
h2 { font-size: var(--if-fs-3xl); }
h3 { font-size: var(--if-fs-2xl); }
h4 { font-size: var(--if-fs-xl); }
h5 { font-size: var(--if-fs-lg); }
h6 { font-size: var(--if-fs-md); }

::selection { background: var(--if-cyan-300); color: var(--if-ink-950); }
:focus-visible { outline: 3px solid var(--if-cyan-400); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.if-container {
  width: min(100% - 2rem, var(--if-content));
  margin-inline: auto;
}
.if-container--wide { width: min(100% - 2rem, var(--if-content-wide)); margin-inline: auto; }
.if-container--prose { width: min(100% - 2rem, var(--if-prose)); margin-inline: auto; }

.if-section { padding-block: var(--if-space-10); }
.if-section--sm { padding-block: var(--if-space-8); }
.if-section--lg { padding-block: var(--if-space-12); }
.if-section--subtle { background: var(--if-bg-subtle); }
.if-section--dark { background: var(--if-gradient-dark); color: var(--if-white); }
.if-section--dark h1, .if-section--dark h2, .if-section--dark h3 { color: var(--if-white); }

.if-stack { display: flex; flex-direction: column; gap: var(--if-space-4); }
.if-stack--sm { gap: var(--if-space-2); }
.if-stack--lg { gap: var(--if-space-7); }
.if-stack--xl { gap: var(--if-space-10); }

.if-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--if-space-3); }
.if-cluster--between { justify-content: space-between; }
.if-cluster--end { justify-content: flex-end; }
.if-cluster--lg { gap: var(--if-space-6); }

.if-grid { display: grid; gap: var(--if-space-6); }
.if-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.if-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.if-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.if-grid--cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.if-grid--plans { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); align-items: stretch; }

.if-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}
.if-split--reverse > :first-child { order: 2; }

@media (max-width: 900px) {
  .if-grid--4, .if-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .if-split { grid-template-columns: 1fr; }
  .if-split--reverse > :first-child { order: initial; }
}
@media (max-width: 620px) {
  .if-grid--4, .if-grid--3, .if-grid--2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   4. TYPOGRAPHY HELPERS
   ========================================================================== */
.if-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: var(--if-space-4);
  color: var(--if-cyan-700);
  font-size: var(--if-fs-xs);
  font-weight: 800;
  letter-spacing: var(--if-tracking-caps);
  text-transform: uppercase;
}
.if-eyebrow::before {
  content: "";
  width: 1.8rem;
  height: 2px;
  background: var(--if-gradient-brand);
}
.if-display {
  font-size: var(--if-fs-5xl);
  line-height: var(--if-lh-tight);
  letter-spacing: -.055em;
}
.if-gradient-text {
  background: var(--if-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.if-lead { max-width: 62ch; color: var(--if-text-muted); font-size: var(--if-fs-lg); }
.if-muted { color: var(--if-text-muted); }
.if-center { text-align: center; }
.if-center .if-lead { margin-inline: auto; }
.if-kicker { font-weight: 700; color: var(--if-cyan-700); }
.if-price {
  font-family: var(--if-font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
}
.if-price__currency { font-size: .46em; vertical-align: top; line-height: 1.55; }
.if-price__term { font-family: var(--if-font-sans); font-size: var(--if-fs-sm); color: var(--if-text-muted); letter-spacing: 0; }

/* ==========================================================================
   5. HEADER + NAVIGATION
   ========================================================================== */
.if-header {
  position: sticky;
  top: 0;
  z-index: var(--if-z-header);
  height: var(--if-header);
  background: color-mix(in srgb, var(--if-bg) 88%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--if-border) 80%, transparent);
  backdrop-filter: blur(18px);
}
.if-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--if-space-6);
}
.if-brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--if-text);
  font-family: var(--if-font-display);
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.045em;
  text-decoration: none;
}
.if-brand__mark {
  width: 2.35rem;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--if-gradient-brand);
  color: var(--if-ink-950);
  box-shadow: 0 0 24px rgba(0, 189, 232, .25);
}
.if-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.if-nav__link {
  padding: .7rem .9rem;
  border-radius: var(--if-radius-pill);
  color: var(--if-text-muted);
  font-weight: 650;
  text-decoration: none;
  transition: background var(--if-fast), color var(--if-fast);
}
.if-nav__link:hover,
.if-nav__link[aria-current="page"] { background: var(--if-cyan-100); color: var(--if-ink-900); }
.if-header__actions { display: flex; gap: .65rem; }
.if-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-pill);
  background: var(--if-surface);
  color: var(--if-text);
}
@media (max-width: 900px) {
  .if-menu-toggle { display: inline-grid; place-items: center; margin-left: auto; }
  .if-nav {
    position: fixed;
    inset: var(--if-header) 0 auto 0;
    display: none;
    padding: var(--if-space-5);
    background: var(--if-surface);
    border-bottom: 1px solid var(--if-border);
    box-shadow: var(--if-shadow-md);
  }
  .if-header[data-menu="open"] .if-nav { display: grid; }
  .if-header__actions { display: none; }
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */
.if-btn {
  min-height: 44px;
  padding: .72rem 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  border: 1px solid transparent;
  border-radius: var(--if-radius-pill);
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  transition: transform var(--if-fast) var(--if-ease),
              box-shadow var(--if-fast) var(--if-ease),
              background var(--if-fast),
              border-color var(--if-fast),
              color var(--if-fast);
}
.if-btn:hover { transform: translateY(-1px); text-decoration: none; }
.if-btn:active { transform: translateY(0); }
.if-btn:disabled, .if-btn[aria-disabled="true"] { opacity: .52; pointer-events: none; }

.if-btn--primary {
  background: var(--if-gradient-brand);
  color: var(--if-ink-950);
  box-shadow: 0 10px 28px rgba(0, 189, 232, .18);
}
.if-btn--primary:hover { color: var(--if-ink-950); box-shadow: 0 14px 34px rgba(0, 189, 232, .27); }
.if-btn--dark { background: var(--if-ink-950); color: var(--if-white); }
.if-btn--dark:hover { color: var(--if-white); background: var(--if-ink-800); }
.if-btn--outline { border-color: var(--if-border-strong); color: var(--if-text); background: transparent; }
.if-btn--outline:hover { color: var(--if-text); border-color: var(--if-cyan-500); background: var(--if-cyan-50); }
.if-btn--ghost { color: var(--if-text); background: transparent; }
.if-btn--ghost:hover { color: var(--if-text); background: var(--if-bg-subtle); }
.if-btn--danger { background: var(--if-danger-700); color: var(--if-white); }
.if-btn--sm { min-height: 36px; padding: .55rem .9rem; font-size: var(--if-fs-sm); }
.if-btn--lg { min-height: 54px; padding: 1rem 1.55rem; font-size: var(--if-fs-lg); }
.if-btn--icon { width: 44px; padding: 0; }

/* ==========================================================================
   7. HERO SYSTEM
   ========================================================================== */
.if-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(840px, calc(100vh - var(--if-header)));
  display: grid;
  align-items: center;
  background: var(--if-gradient-dark);
  color: var(--if-white);
}
.if-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .34;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.if-hero::after {
  content: "";
  position: absolute;
  width: 45rem;
  aspect-ratio: 1;
  right: -16rem;
  top: -14rem;
  z-index: -1;
  border: 1px solid rgba(121, 228, 247, .25);
  border-radius: 50%;
  box-shadow:
    0 0 0 80px rgba(0, 189, 232, .03),
    0 0 0 160px rgba(0, 189, 232, .025),
    0 0 0 240px rgba(255, 138, 31, .018);
}
.if-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding-block: clamp(5rem, 10vw, 8rem);
}
.if-hero h1 { color: var(--if-white); }
.if-hero .if-lead { color: var(--if-ink-200); }
.if-hero__actions { display: flex; flex-wrap: wrap; gap: var(--if-space-3); margin-top: var(--if-space-7); }
.if-hero__trust { display: flex; flex-wrap: wrap; gap: var(--if-space-5); margin-top: var(--if-space-8); color: var(--if-ink-300); font-size: var(--if-fs-sm); }
.if-hero__trust span { display: inline-flex; align-items: center; gap: .45rem; }
.if-hero__media {
  position: relative;
  min-height: 450px;
  border-radius: var(--if-radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: var(--if-shadow-lg);
}
.if-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.if-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,17,31,.55), transparent 55%); }
.if-hero__floating {
  position: absolute;
  left: -2rem;
  bottom: 2rem;
  z-index: 2;
  max-width: 270px;
  padding: var(--if-space-5);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--if-radius-lg);
  background: rgba(11,23,40,.82);
  backdrop-filter: blur(16px);
  color: var(--if-white);
  box-shadow: var(--if-shadow-md);
}
@media (max-width: 900px) {
  .if-hero { min-height: auto; }
  .if-hero__inner { grid-template-columns: 1fr; }
  .if-hero__media { min-height: 360px; }
  .if-hero__floating { left: 1rem; }
}

/* ==========================================================================
   8. CARDS + FEATURE SURFACES
   ========================================================================== */
.if-card {
  position: relative;
  padding: var(--if-space-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-lg);
  background: var(--if-surface);
  box-shadow: var(--if-shadow-xs);
}
.if-card--interactive {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform var(--if-base) var(--if-ease),
              border-color var(--if-base),
              box-shadow var(--if-base);
}
.if-card--interactive:hover {
  color: inherit;
  transform: translateY(-4px);
  border-color: var(--if-cyan-400);
  box-shadow: var(--if-shadow-md);
}
.if-card--dark { background: var(--if-gradient-dark); border-color: var(--if-ink-700); color: var(--if-white); }
.if-card--dark h3 { color: var(--if-white); }
.if-card--soft { background: var(--if-gradient-soft); }
.if-card__icon {
  width: 3rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: var(--if-space-5);
  border-radius: var(--if-radius-md);
  background: var(--if-cyan-100);
  color: var(--if-cyan-700);
}
.if-card__title { margin-bottom: var(--if-space-2); }
.if-card__body { color: var(--if-text-muted); }
.if-card__footer { margin-top: var(--if-space-6); padding-top: var(--if-space-5); border-top: 1px solid var(--if-border); }

.if-feature-card {
  min-height: 340px;
  padding: var(--if-space-7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--if-radius-xl);
  color: var(--if-white);
  background: var(--if-ink-900);
}
.if-feature-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: transform var(--if-slow) var(--if-ease); }
.if-feature-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,17,31,.96), rgba(7,17,31,.08) 75%); }
.if-feature-card > * { position: relative; z-index: 1; }
.if-feature-card:hover img { transform: scale(1.035); }
.if-feature-card h3 { color: var(--if-white); }

/* ==========================================================================
   9. PLAN + PRICING CARDS
   ========================================================================== */
.if-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--if-space-7);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-xl);
  background: var(--if-surface);
  box-shadow: var(--if-shadow-sm);
}
.if-plan--featured {
  border-color: var(--if-cyan-500);
  box-shadow: 0 22px 55px rgba(0, 189, 232, .17);
}
.if-plan__flag {
  position: absolute;
  top: 0;
  right: var(--if-space-6);
  transform: translateY(-50%);
  padding: .42rem .8rem;
  border-radius: var(--if-radius-pill);
  background: var(--if-gradient-brand);
  color: var(--if-ink-950);
  font-size: var(--if-fs-xs);
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.if-plan__name { margin-bottom: var(--if-space-2); }
.if-plan__subtitle { color: var(--if-text-muted); min-height: 3rem; }
.if-plan__price { margin-block: var(--if-space-6); }
.if-plan__speed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--if-space-3);
  padding: var(--if-space-4);
  border-radius: var(--if-radius-md);
  background: var(--if-bg-subtle);
}
.if-plan__speed strong { display: block; font-size: var(--if-fs-xl); color: var(--if-cyan-700); }
.if-plan__features { display: grid; gap: .75rem; margin: var(--if-space-6) 0; padding: 0; list-style: none; }
.if-plan__features li { display: flex; gap: .65rem; color: var(--if-text-muted); }
.if-plan__features li::before { content: "✓"; color: var(--if-success-700); font-weight: 900; }
.if-plan__actions { margin-top: auto; display: grid; gap: .65rem; }

/* ==========================================================================
   10. FORMS
   ========================================================================== */
.if-field { display: grid; gap: .45rem; }
.if-label { color: var(--if-text); font-size: var(--if-fs-sm); font-weight: 750; }
.if-label[data-required]::after { content: " *"; color: var(--if-danger-700); }
.if-hint { color: var(--if-text-muted); font-size: var(--if-fs-sm); }
.if-error { color: var(--if-danger-700); font-size: var(--if-fs-sm); }

.if-input, .if-select, .if-textarea {
  width: 100%;
  min-height: 46px;
  padding: .78rem 1rem;
  color: var(--if-text);
  background: var(--if-surface);
  border: 1px solid var(--if-border-strong);
  border-radius: var(--if-radius-md);
  transition: border-color var(--if-fast), box-shadow var(--if-fast), background var(--if-fast);
}
.if-input:hover, .if-select:hover, .if-textarea:hover { border-color: var(--if-cyan-600); }
.if-input:focus, .if-select:focus, .if-textarea:focus {
  outline: none;
  border-color: var(--if-cyan-500);
  box-shadow: var(--if-glow-cyan);
}
.if-input::placeholder, .if-textarea::placeholder { color: var(--if-ink-500); }
.if-input[aria-invalid="true"], .if-select[aria-invalid="true"], .if-textarea[aria-invalid="true"] { border-color: var(--if-danger-700); }
.if-textarea { min-height: 140px; resize: vertical; }
.if-select {
  appearance: none;
  padding-right: 2.8rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--if-ink-600) 50%), linear-gradient(135deg, var(--if-ink-600) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.if-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--if-space-5); }
.if-form-grid__full { grid-column: 1 / -1; }
@media (max-width: 620px) { .if-form-grid { grid-template-columns: 1fr; } }

.if-check { display: inline-flex; align-items: flex-start; gap: .7rem; cursor: pointer; }
.if-check input { width: 1.15rem; height: 1.15rem; margin-top: .18rem; accent-color: var(--if-cyan-600); }

.if-toggle { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; }
.if-toggle input { position: absolute; opacity: 0; }
.if-toggle__track { width: 2.7rem; height: 1.5rem; padding: .15rem; border-radius: var(--if-radius-pill); background: var(--if-ink-300); transition: background var(--if-fast); }
.if-toggle__track::before { content: ""; display: block; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--if-white); box-shadow: var(--if-shadow-xs); transition: transform var(--if-base) var(--if-ease); }
.if-toggle input:checked + .if-toggle__track { background: var(--if-cyan-600); }
.if-toggle input:checked + .if-toggle__track::before { transform: translateX(1.2rem); }

/* Searchable/custom select shell */
.if-combobox { position: relative; }
.if-combobox__menu {
  position: absolute;
  z-index: var(--if-z-dropdown);
  inset: calc(100% + .4rem) 0 auto;
  max-height: 280px;
  overflow: auto;
  padding: .4rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-md);
  background: var(--if-surface-raised);
  box-shadow: var(--if-shadow-md);
}
.if-combobox__option { padding: .7rem .8rem; border-radius: var(--if-radius-sm); cursor: pointer; }
.if-combobox__option:hover, .if-combobox__option[aria-selected="true"] { background: var(--if-cyan-100); color: var(--if-ink-950); }

/* ==========================================================================
   11. BADGES, STATUS, ALERTS
   ========================================================================== */
.if-badge {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .35rem .7rem;
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-pill);
  background: var(--if-bg-subtle);
  color: var(--if-text-muted);
  font-size: var(--if-fs-xs);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.if-badge--primary { background: var(--if-cyan-100); border-color: var(--if-cyan-300); color: var(--if-cyan-700); }
.if-badge--accent { background: var(--if-signal-100); border-color: var(--if-signal-300); color: var(--if-signal-700); }
.if-badge--success { background: var(--if-success-100); border-color: #a6e6d5; color: var(--if-success-700); }
.if-badge--warning { background: var(--if-warning-100); border-color: #efd896; color: var(--if-warning-700); }
.if-badge--danger { background: var(--if-danger-100); border-color: #f2b8c0; color: var(--if-danger-700); }

.if-status { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--if-fs-sm); font-weight: 700; }
.if-status::before { content: ""; width: .65rem; aspect-ratio: 1; border-radius: 50%; background: var(--if-ink-400); }
.if-status--online::before { background: #18b887; box-shadow: 0 0 0 4px rgba(24,184,135,.14); }
.if-status--degraded::before { background: #e39a14; box-shadow: 0 0 0 4px rgba(227,154,20,.14); }
.if-status--offline::before { background: #d64759; box-shadow: 0 0 0 4px rgba(214,71,89,.14); }

.if-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--if-space-3);
  align-items: start;
  padding: var(--if-space-4) var(--if-space-5);
  border: 1px solid var(--if-border);
  border-left-width: 4px;
  border-radius: var(--if-radius-md);
  background: var(--if-surface);
}
.if-alert--info { background: var(--if-info-100); border-left-color: var(--if-info-700); }
.if-alert--success { background: var(--if-success-100); border-left-color: var(--if-success-700); }
.if-alert--warning { background: var(--if-warning-100); border-left-color: var(--if-warning-700); }
.if-alert--danger { background: var(--if-danger-100); border-left-color: var(--if-danger-700); }

/* ==========================================================================
   12. TABLES + DATA
   ========================================================================== */
.if-table-wrap { overflow: hidden; border: 1px solid var(--if-border); border-radius: var(--if-radius-lg); background: var(--if-surface); }
.if-table-scroll { overflow-x: auto; }
.if-table { width: 100%; border-collapse: collapse; font-size: var(--if-fs-sm); font-variant-numeric: tabular-nums; }
.if-table th, .if-table td { padding: .9rem 1rem; text-align: left; border-bottom: 1px solid var(--if-border); }
.if-table th { color: var(--if-text-muted); background: var(--if-bg-subtle); font-size: var(--if-fs-xs); letter-spacing: .08em; text-transform: uppercase; }
.if-table tbody tr:hover { background: var(--if-cyan-50); }
.if-table tbody tr:last-child td { border-bottom: 0; }
.if-table .if-num { text-align: right; }

.if-kpi {
  padding: var(--if-space-6);
  border: 1px solid var(--if-border);
  border-radius: var(--if-radius-lg);
  background: var(--if-surface);
}
.if-kpi__label { color: var(--if-text-muted); font-size: var(--if-fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.if-kpi__value { margin-top: .5rem; font-family: var(--if-font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.if-kpi__meta { margin-top: .75rem; color: var(--if-text-muted); font-size: var(--if-fs-sm); }

/* ==========================================================================
   13. FAQ / ACCORDION / TABS
   ========================================================================== */
.if-accordion { border-top: 1px solid var(--if-border); }
.if-accordion__item { border-bottom: 1px solid var(--if-border); }
.if-accordion__trigger {
  width: 100%;
  padding: var(--if-space-5) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--if-space-4);
  border: 0;
  background: transparent;
  color: var(--if-text);
  font-family: var(--if-font-display);
  font-size: var(--if-fs-lg);
  font-weight: 700;
  text-align: left;
}
.if-accordion__panel { padding: 0 2.5rem var(--if-space-5) 0; color: var(--if-text-muted); }

.if-tabs { display: flex; gap: .35rem; overflow-x: auto; padding: .35rem; border: 1px solid var(--if-border); border-radius: var(--if-radius-pill); background: var(--if-bg-subtle); }
.if-tab { flex: 0 0 auto; padding: .65rem 1rem; border: 0; border-radius: var(--if-radius-pill); background: transparent; color: var(--if-text-muted); font-weight: 750; }
.if-tab[aria-selected="true"], .if-tab.is-active { background: var(--if-surface); color: var(--if-text); box-shadow: var(--if-shadow-xs); }

/* ==========================================================================
   14. APP / CUSTOMER PORTAL SHELL
   ========================================================================== */
.if-app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--if-sidebar) minmax(0, 1fr);
  grid-template-rows: var(--if-header) minmax(0, 1fr);
  grid-template-areas: "sidebar topbar" "sidebar main";
}
.if-app__sidebar { grid-area: sidebar; position: sticky; top: 0; height: 100vh; padding: var(--if-space-5); background: var(--if-gradient-dark); color: var(--if-white); overflow: auto; }
.if-app__topbar { grid-area: topbar; position: sticky; top: 0; z-index: var(--if-z-header); display: flex; align-items: center; padding: 0 var(--if-space-6); border-bottom: 1px solid var(--if-border); background: color-mix(in srgb, var(--if-bg) 88%, transparent); backdrop-filter: blur(16px); }
.if-app__main { grid-area: main; min-width: 0; padding: var(--if-space-7); background: var(--if-bg-subtle); }

.if-sidebar-nav { display: grid; gap: .3rem; margin-top: var(--if-space-7); }
.if-sidebar-nav__label { margin: var(--if-space-5) .8rem .45rem; color: var(--if-ink-400); font-size: .68rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.if-sidebar-nav__link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem .85rem;
  border-radius: var(--if-radius-md);
  color: var(--if-ink-300);
  text-decoration: none;
  transition: background var(--if-fast), color var(--if-fast);
}
.if-sidebar-nav__link:hover { color: var(--if-white); background: rgba(255,255,255,.07); }
.if-sidebar-nav__link[aria-current="page"] { color: var(--if-white); background: rgba(0,189,232,.16); box-shadow: inset 3px 0 0 var(--if-cyan-400); }

@media (max-width: 980px) {
  .if-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; }
  .if-app__sidebar { position: fixed; z-index: var(--if-z-drawer); width: min(86vw, 320px); transform: translateX(-105%); transition: transform var(--if-base) var(--if-ease); }
  .if-app[data-nav="open"] .if-app__sidebar { transform: translateX(0); }
}

/* ==========================================================================
   15. MODALS, DRAWERS, TOASTS
   ========================================================================== */
.if-backdrop { position: fixed; inset: 0; z-index: var(--if-z-modal); display: grid; place-items: center; padding: var(--if-space-4); background: rgba(7,17,31,.66); backdrop-filter: blur(5px); }
.if-modal { width: min(100%, 620px); max-height: min(88vh, 900px); overflow: auto; border: 1px solid var(--if-border); border-radius: var(--if-radius-xl); background: var(--if-surface-raised); box-shadow: var(--if-shadow-lg); animation: if-pop var(--if-base) var(--if-ease); }
.if-modal--lg { width: min(100%, 900px); }
.if-modal__header, .if-modal__body, .if-modal__footer { padding: var(--if-space-6); }
.if-modal__header { border-bottom: 1px solid var(--if-border); }
.if-modal__footer { display: flex; justify-content: flex-end; gap: var(--if-space-3); border-top: 1px solid var(--if-border); }

.if-drawer { position: fixed; z-index: calc(var(--if-z-drawer) + 1); inset: 0 0 0 auto; width: min(100%, 560px); display: flex; flex-direction: column; background: var(--if-surface); box-shadow: var(--if-shadow-lg); animation: if-slide var(--if-base) var(--if-ease); }
.if-drawer__header, .if-drawer__body, .if-drawer__footer { padding: var(--if-space-6); }
.if-drawer__body { flex: 1; overflow: auto; }
.if-drawer__header { border-bottom: 1px solid var(--if-border); }
.if-drawer__footer { border-top: 1px solid var(--if-border); }

.if-toast-stack { position: fixed; z-index: var(--if-z-toast); right: var(--if-space-5); bottom: var(--if-space-5); display: grid; gap: var(--if-space-3); }
.if-toast { width: min(92vw, 380px); padding: var(--if-space-4); border-radius: var(--if-radius-md); background: var(--if-ink-900); color: var(--if-white); box-shadow: var(--if-shadow-lg); }

@keyframes if-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes if-slide { from { transform: translateX(100%); } }

/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.if-footer { padding: var(--if-space-10) 0 var(--if-space-6); background: var(--if-ink-950); color: var(--if-ink-300); }
.if-footer h4 { color: var(--if-white); font-size: var(--if-fs-md); }
.if-footer a { color: var(--if-ink-300); text-decoration: none; }
.if-footer a:hover { color: var(--if-cyan-300); }
.if-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--if-space-8); }
.if-footer__links { display: grid; gap: .6rem; margin-top: var(--if-space-4); }
.if-footer__bottom { margin-top: var(--if-space-9); padding-top: var(--if-space-5); display: flex; justify-content: space-between; gap: var(--if-space-4); border-top: 1px solid var(--if-ink-800); font-size: var(--if-fs-sm); }
@media (max-width: 760px) {
  .if-footer__grid { grid-template-columns: 1fr 1fr; }
  .if-footer__bottom { flex-direction: column; }
}
@media (max-width: 460px) { .if-footer__grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */
.if-hidden { display: none !important; }
.if-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.if-w-full { width: 100%; }
.if-mt-auto { margin-top: auto; }
.if-nowrap { white-space: nowrap; }
.if-num { font-variant-numeric: tabular-nums lining-nums; }
.if-shadow-sm { box-shadow: var(--if-shadow-sm); }
.if-shadow-md { box-shadow: var(--if-shadow-md); }
.if-rounded { border-radius: var(--if-radius-lg); }
.if-overflow-hidden { overflow: hidden; }
.if-relative { position: relative; }
.if-sticky { position: sticky; top: calc(var(--if-header) + var(--if-space-4)); }
.if-divider { height: 1px; background: var(--if-border); }
.if-bg-dark { background: var(--if-ink-950); color: var(--if-white); }
.if-bg-soft { background: var(--if-bg-subtle); }
.if-text-success { color: var(--if-success-700); }
.if-text-warning { color: var(--if-warning-700); }
.if-text-danger { color: var(--if-danger-700); }

/* ==========================================================================
   18. PRINT
   ========================================================================== */
@media print {
  .if-header, .if-footer, .if-btn, .if-app__sidebar, .if-app__topbar { display: none !important; }
  body { background: #fff; color: #000; }
  .if-card, .if-plan, .if-table-wrap { box-shadow: none; break-inside: avoid; }
  .if-app { display: block; }
  .if-app__main { padding: 0; background: #fff; }
}

/* ========================================================================== 
   19. LEGACY APPLICATION ADAPTER
   Maps the original application markup into the iFibre framework while the
   templates are progressively converted to native .if-* components.
   ========================================================================== */
body { background: var(--if-bg); color: var(--if-text); }
body > header:not(.if-header) { display: none; }
.nav-menu { position: sticky; top: 0; z-index: var(--if-z-header); }
main { width: 100%; max-width: none; margin: 0; padding: 0; }

/* Existing navigation markup */
.navbar { height: var(--if-header); background: color-mix(in srgb, var(--if-bg) 90%, transparent); border-bottom: 1px solid var(--if-border); backdrop-filter: blur(18px); }
.nav-container { width: min(100% - 2rem, var(--if-content)); height: 100%; margin-inline: auto; padding: 0; display: flex; align-items: center; gap: var(--if-space-5); }
.nav-container::before { content: "iFibre"; display: inline-flex; align-items: center; margin-right: var(--if-space-5); color: var(--if-text); font-family: var(--if-font-display); font-size: 1.55rem; font-weight: 750; letter-spacing: -.045em; }
.navbar ul { display: flex; align-items: center; gap: .2rem; padding: 0; margin: 0; list-style: none; }
.nav-right { margin-left: auto !important; }
.navbar ul li { margin: 0; }
.navbar ul li a { display: block; padding: .7rem .9rem; border-radius: var(--if-radius-pill); color: var(--if-text-muted); font-weight: 700; text-decoration: none; transition: background var(--if-fast), color var(--if-fast); }
.navbar ul li a:hover, .navbar ul li a.active { background: var(--if-cyan-100); color: var(--if-ink-900); }
.hamburger { display: none; width: 44px; height: 44px; padding: 11px; margin-left: auto; border: 1px solid var(--if-border); border-radius: 50%; background: var(--if-surface); }
.hamburger span { display: block; height: 2px; margin: 4px 0; background: var(--if-text); transition: transform var(--if-fast), opacity var(--if-fast); }
@media (max-width: 820px) {
  .nav-container::before { margin-right: auto; }
  .hamburger { display: block; }
  .navbar { height: auto; min-height: var(--if-header); }
  .nav-container { min-height: var(--if-header); flex-wrap: wrap; padding-block: .6rem; }
  .navbar .nav-left, .navbar .nav-right { display: none; width: 100%; margin: 0 !important; flex-direction: column; align-items: stretch; }
  .navbar.active .nav-left, .navbar.active .nav-right { display: flex; }
  .navbar ul li a { padding: .9rem 1rem; }
}

/* Existing slideshow converted to premium hero */
#hero-section-main { background: var(--if-gradient-dark); }
.slideshow-container { position: relative; width: 100%; min-height: min(780px, calc(100vh - var(--if-header))); overflow: hidden; }
.slide { display: none; width: min(100% - 2rem, var(--if-content)); min-height: min(780px, calc(100vh - var(--if-header))); margin-inline: auto; padding-block: clamp(4rem, 9vw, 8rem); grid-template-columns: minmax(0,1fr) minmax(340px,.9fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; color: var(--if-white); }
.slide.active { display: grid; animation: if-fade-slide .55s var(--if-ease); }
.slide-left h2 { max-width: 12ch; color: var(--if-white); font-size: var(--if-fs-5xl); line-height: var(--if-lh-tight); letter-spacing: -.055em; }
.slide-left p { max-width: 58ch; margin-top: var(--if-space-5); color: var(--if-ink-200); font-size: var(--if-fs-lg); }
.slide-left::before { content: "New Zealand connectivity"; display: inline-flex; margin-bottom: var(--if-space-4); color: var(--if-cyan-300); font-size: var(--if-fs-xs); font-weight: 850; letter-spacing: var(--if-tracking-caps); text-transform: uppercase; }
.slide-right { min-height: 430px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--if-radius-xl); overflow: hidden; box-shadow: var(--if-shadow-lg); }
.slide-right img { width: 100%; height: 100%; min-height: 430px; object-fit: cover; }
.btn-slide { display: inline-flex; margin-top: var(--if-space-6); padding: .9rem 1.35rem; border-radius: var(--if-radius-pill); background: var(--if-gradient-brand); color: var(--if-ink-950); font-weight: 800; text-decoration: none; }
.dot-container { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); display: flex; gap: .55rem; z-index: 3; }
.dot { width: .65rem; height: .65rem; border-radius: 50%; background: rgba(255,255,255,.35); cursor: pointer; }
.dot.active { width: 2rem; border-radius: var(--if-radius-pill); background: var(--if-cyan-400); }
.prev, .next { display: none; }
@keyframes if-fade-slide { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 900px) { .slide, .slide.active { grid-template-columns: 1fr; } .slide-right { min-height: 300px; } .slide-right img { min-height: 300px; } }

/* Generic page hero wrapper */
#hero-section, #hero-section2 { width: min(100% - 2rem, var(--if-content)); margin: var(--if-space-9) auto var(--if-space-10); padding: clamp(2rem,5vw,4rem); border-radius: var(--if-radius-xl); background: var(--if-gradient-soft); color: var(--if-text); text-align: center; }
#hero-section > h2, #hero-section2 > h2 { margin-bottom: var(--if-space-6); }

/* Product catalogue */
.plan-toggle { display: inline-flex; align-items: center; gap: .65rem; margin: .45rem; padding: .55rem .85rem; border: 1px solid var(--if-border); border-radius: var(--if-radius-pill); background: var(--if-surface); color: var(--if-text); font-size: var(--if-fs-sm); font-weight: 750; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { position: absolute; opacity: 0; }
.slider { position: absolute; inset: 0; border-radius: var(--if-radius-pill); background: var(--if-ink-300); transition: background var(--if-fast); }
.slider::before { content: ""; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: var(--if-white); box-shadow: var(--if-shadow-xs); transition: transform var(--if-base) var(--if-ease); }
.switch input:checked + .slider { background: var(--if-cyan-600); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.product-cards-container { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,270px),1fr)); gap: var(--if-space-6); margin-top: var(--if-space-7); text-align: left; }
.product-card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: var(--if-space-7); border: 1px solid var(--if-border); border-radius: var(--if-radius-xl); background: var(--if-surface); color: var(--if-text); box-shadow: var(--if-shadow-sm); transition: transform var(--if-base) var(--if-ease), border-color var(--if-base), box-shadow var(--if-base); }
.product-card:hover { transform: translateY(-4px); border-color: var(--if-cyan-400); box-shadow: var(--if-shadow-md); }
.product-card.gold { border-color: var(--if-cyan-400); }
.product-card h3 { margin-bottom: var(--if-space-2); }
.product-card p { color: var(--if-text-muted); }
.product-card ul { display: grid; gap: .6rem; padding: 0; margin: var(--if-space-5) 0; list-style: none; color: var(--if-text-muted); }
.product-card li::before { content: "✓"; margin-right: .55rem; color: var(--if-success-700); font-weight: 900; }
.product-card .price { margin-top: auto; padding-top: var(--if-space-5); font-family: var(--if-font-display); font-size: 2rem; font-weight: 750; color: var(--if-text); }
.product-button { display: inline-flex; justify-content: center; margin-top: var(--if-space-5); padding: .8rem 1.1rem; border-radius: var(--if-radius-pill); background: var(--if-gradient-brand); color: var(--if-ink-950); font-weight: 800; text-decoration: none; }
.product-card.hidden { display: none !important; }

/* Forms and content includes */
.form-container, .login-container, .contact-form, .contact-info, .section, .dashboard-card, .profile-card, .order-summary { padding: var(--if-space-6); border: 1px solid var(--if-border); border-radius: var(--if-radius-lg); background: var(--if-surface); color: var(--if-text); box-shadow: var(--if-shadow-sm); }
.form-group { display: grid; gap: .45rem; margin-bottom: var(--if-space-4); }
label { color: var(--if-text); font-size: var(--if-fs-sm); font-weight: 750; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width: 100%; min-height: 46px; padding: .78rem 1rem; color: var(--if-text); background: var(--if-surface); border: 1px solid var(--if-border-strong); border-radius: var(--if-radius-md); }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--if-cyan-500); box-shadow: var(--if-glow-cyan); }
button[type="submit"], input[type="submit"], .submit-btn, .login-button, .order-button { min-height: 44px; padding: .75rem 1.2rem; border: 0; border-radius: var(--if-radius-pill); background: var(--if-gradient-brand); color: var(--if-ink-950); font-weight: 800; }

/* FAQ */
.faq-section, .contact-section, .about-section, .team-section, .privacy-section, .terms-section, .status-section, .compare-section { width: min(100% - 2rem, var(--if-content)); margin: var(--if-space-10) auto; color: var(--if-text); }
.faq-title, .faq-subtitle, .contact-header, .contact-header h2 { color: var(--if-text); }
.faq-subtitle, .contact-header p { color: var(--if-text-muted); }
.faq-container { margin-top: var(--if-space-7); border-top: 1px solid var(--if-border); }
.faq-item { border-bottom: 1px solid var(--if-border); }
.faq-question { width: 100%; padding: var(--if-space-5) 0; display: flex; justify-content: space-between; border: 0; background: transparent; color: var(--if-text); font-family: var(--if-font-display); font-size: var(--if-fs-lg); font-weight: 750; text-align: left; }
.faq-question::after { content: "+"; color: var(--if-cyan-600); font-size: 1.5rem; transition: transform var(--if-fast); }
.faq-item.active .faq-question::after { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; padding: 0; color: var(--if-text-muted); transition: max-height var(--if-base), padding var(--if-base); }
.faq-item.active .faq-answer { max-height: 500px; padding: 0 2rem var(--if-space-5) 0; }
.faq-answer p { color: var(--if-text-muted); }

/* Contact */
.contact-container { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: var(--if-space-6); }
.contact-info h3 { color: var(--if-cyan-700); }
.contact-info p { color: var(--if-text-muted); }
@media (max-width: 800px) { .contact-container { grid-template-columns: 1fr; } }

/* Footer legacy markup */
.site-footer { margin-top: var(--if-space-10); padding: var(--if-space-10) 0 var(--if-space-6); background: var(--if-ink-950); color: var(--if-ink-300); }
.footer-container, .footer-bottom { width: min(100% - 2rem, var(--if-content)); margin-inline: auto; }
.footer-container { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--if-space-8); }
.footer-column h4 { color: var(--if-white); font-size: var(--if-fs-md); }
.footer-column ul, .footer-links { padding: 0; margin-top: var(--if-space-4); list-style: none; }
.footer-column li { margin-bottom: .55rem; }
.footer-column a, .footer-links a { color: var(--if-ink-300); text-decoration: none; }
.footer-column a:hover, .footer-links a:hover { color: var(--if-cyan-300); }
.footer-bottom { margin-top: var(--if-space-8); padding-top: var(--if-space-5); display: flex; justify-content: space-between; gap: var(--if-space-4); border-top: 1px solid var(--if-ink-800); }
.footer-links { display: flex; gap: var(--if-space-4); margin: 0; }
.social-icons { display: flex; gap: .7rem; }
.social-icons img { width: 26px; height: 26px; object-fit: contain; opacity: .85; }
@media (max-width: 800px) { .footer-container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-container { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } }

/* Dashboard */
.dashboard-container, .dashboard { width: min(100% - 2rem, var(--if-content-wide)); margin: var(--if-space-8) auto; color: var(--if-text); }
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--if-space-5); }

/* Utilities retained from legacy */
.hidden { display: none !important; }
.error-message, .error { color: var(--if-danger-700); }
.success-message, .success { color: var(--if-success-700); }

/* =====================================================================
   IFIBRE CUSTOMER EXPERIENCE V2
   Native service catalogue and ordering experience
   ===================================================================== */
:root{
  --ifx-ink:#07172f;--ifx-text:#29415f;--ifx-muted:#66778d;--ifx-line:#d9e4ec;
  --ifx-cyan:#13c3e7;--ifx-cyan-dark:#0699c4;--ifx-sand:#d2bd79;--ifx-soft:#f3fbfd;
  --ifx-success:#087a55;--ifx-warning:#9a6400;--ifx-danger:#b3261e;
  --ifx-shadow:0 18px 55px rgba(7,23,47,.10);--ifx-shadow-sm:0 8px 28px rgba(7,23,47,.08);
  --ifx-radius:24px;--ifx-radius-sm:16px;--ifx-max:1240px;
}
body{background:#fff;color:var(--ifx-text)}
.ifx-shell{width:min(calc(100% - 32px),var(--ifx-max));margin-inline:auto}
.ifx-section{padding:72px 0}.ifx-section--soft{background:linear-gradient(135deg,#eefbfd 0%,#fff 62%,#fff9ec 100%)}
.ifx-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ifx-cyan-dark)}
.ifx-eyebrow:before{content:"";width:26px;height:2px;background:var(--ifx-cyan)}
.ifx-hero{padding:74px 0 46px;background:linear-gradient(135deg,#edfafd 0%,#fff 58%,#fff7e8 100%);border-bottom:1px solid var(--ifx-line)}
.ifx-hero__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:48px;align-items:center}
.ifx-hero h1{font-size:clamp(2.6rem,5vw,4.7rem);line-height:.98;margin:14px 0 20px;color:var(--ifx-ink);letter-spacing:-.045em}
.ifx-hero p{font-size:1.16rem;max-width:720px;color:var(--ifx-text)}
.ifx-hero__panel{background:#fff;border:1px solid var(--ifx-line);border-radius:28px;padding:26px;box-shadow:var(--ifx-shadow)}
.ifx-trust-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}.ifx-trust-list li{display:flex;gap:12px;align-items:flex-start}.ifx-trust-list li:before{content:"✓";display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:#e4f8f3;color:var(--ifx-success);font-weight:900}
.ifx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.ifx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;font-weight:800;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.2s ease}.ifx-btn--primary{background:linear-gradient(90deg,var(--ifx-cyan),#8fdde0 68%,var(--ifx-sand));color:var(--ifx-ink)}.ifx-btn--primary:hover{transform:translateY(-2px);box-shadow:var(--ifx-shadow-sm)}.ifx-btn--secondary{background:#fff;color:var(--ifx-ink);border-color:var(--ifx-line)}
.ifx-section-head{text-align:center;max-width:760px;margin:0 auto 34px}.ifx-section-head h2{color:var(--ifx-ink);font-size:clamp(2rem,4vw,3.3rem);margin:10px 0 12px;letter-spacing:-.035em}.ifx-section-head p{color:var(--ifx-muted);font-size:1.05rem}
.ifx-configurator{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 auto 34px;max-width:1050px}.ifx-option{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border:1px solid var(--ifx-line);border-radius:20px;background:#fff;box-shadow:0 6px 24px rgba(7,23,47,.05)}.ifx-option__copy strong{display:block;color:var(--ifx-ink);font-size:1rem}.ifx-option__copy span{display:block;color:var(--ifx-muted);font-size:.9rem;margin-top:3px}.ifx-option__state{font-weight:800;color:var(--ifx-cyan-dark);min-width:88px;text-align:right}
.ifx-switch{position:relative;display:inline-flex;flex:0 0 56px;width:56px;height:32px}.ifx-switch input{position:absolute;opacity:0;width:1px!important;height:1px!important}.ifx-switch__track{position:absolute;inset:0;border-radius:999px;background:#c7ced6;cursor:pointer;transition:.2s}.ifx-switch__track:before{content:"";position:absolute;width:24px;height:24px;left:4px;top:4px;border-radius:50%;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.22);transition:.2s}.ifx-switch input:checked+.ifx-switch__track{background:var(--ifx-cyan)}.ifx-switch input:checked+.ifx-switch__track:before{transform:translateX(24px)}.ifx-switch input:focus-visible+.ifx-switch__track{outline:3px solid rgba(19,195,231,.26);outline-offset:3px}
.ifx-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}.ifx-plan-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}.ifx-plan-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ifx-line);border-radius:28px;padding:28px;box-shadow:var(--ifx-shadow-sm);min-height:100%}.ifx-plan-card--featured{border-color:var(--ifx-cyan);box-shadow:0 20px 58px rgba(19,195,231,.16)}.ifx-plan-card__badge{position:absolute;top:18px;right:18px;padding:6px 10px;border-radius:999px;background:#e8fbff;color:#007ba3;font-size:.73rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.ifx-plan-card h3{color:var(--ifx-ink);font-size:1.55rem;margin:16px 0 8px}.ifx-plan-card__intro{min-height:52px;color:var(--ifx-muted)}.ifx-plan-card__speed{font-weight:900;color:var(--ifx-cyan-dark);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}.ifx-plan-card ul{list-style:none;margin:24px 0;padding:0;display:grid;gap:12px}.ifx-plan-card li{display:flex;gap:10px}.ifx-plan-card li:before{content:"✓";color:var(--ifx-success);font-weight:900}.ifx-plan-card__price{margin-top:auto;padding-top:18px;color:var(--ifx-ink);font-weight:900;font-size:2rem;letter-spacing:-.03em}.ifx-plan-card__price small{font-size:.9rem;color:var(--ifx-muted);font-weight:600}.ifx-plan-card .ifx-btn{width:100%;margin-top:18px}.ifx-plan-card[hidden]{display:none!important}
.ifx-note{margin:24px auto 0;text-align:center;color:var(--ifx-muted);font-size:.9rem}.ifx-feature-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.ifx-feature{padding:24px;border:1px solid var(--ifx-line);border-radius:20px;background:#fff}.ifx-feature strong{display:block;color:var(--ifx-ink);font-size:1.05rem}.ifx-feature span{display:block;color:var(--ifx-muted);margin-top:6px;font-size:.92rem}
.ifx-order-shell{padding:48px 0 80px;background:linear-gradient(180deg,#f3fbfd,#fff 360px)}.ifx-order-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}.ifx-order-main,.ifx-order-summary{background:#fff;border:1px solid var(--ifx-line);border-radius:24px;box-shadow:var(--ifx-shadow-sm)}.ifx-order-main{padding:28px}.ifx-order-summary{padding:24px;position:sticky;top:96px}.ifx-order-summary h3,.ifx-order-main h2{color:var(--ifx-ink);margin-top:0}.ifx-progress{display:flex;align-items:center;gap:10px;margin:0 0 26px;padding:0;list-style:none}.ifx-progress li{display:flex;align-items:center;gap:8px;color:var(--ifx-muted);font-size:.86rem;font-weight:700}.ifx-progress li:not(:last-child):after{content:"";width:34px;height:1px;background:var(--ifx-line);margin-left:2px}.ifx-progress__dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef2f5;color:var(--ifx-muted)}.ifx-progress li.is-active{color:var(--ifx-ink)}.ifx-progress li.is-active .ifx-progress__dot{background:var(--ifx-cyan);color:var(--ifx-ink)}
.ifx-form-section{padding:24px 0;border-top:1px solid var(--ifx-line)}.ifx-form-section:first-of-type{border-top:0}.ifx-form-section h3{color:var(--ifx-ink);margin:0 0 6px}.ifx-form-section>p{color:var(--ifx-muted);margin:0 0 20px}.ifx-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.ifx-field{display:grid;gap:7px}.ifx-field--full{grid-column:1/-1}.ifx-field label{font-weight:800;color:var(--ifx-ink);font-size:.9rem}.ifx-field input:not([type=checkbox]):not([type=radio]),.ifx-field select,.ifx-field textarea,.ifx-search-input{width:100%;min-height:50px;padding:12px 14px;border:1px solid #cddae4;border-radius:13px;background:#fff;color:var(--ifx-ink);font:inherit}.ifx-field textarea{min-height:100px;resize:vertical}.ifx-field input:focus,.ifx-field select:focus,.ifx-field textarea:focus,.ifx-search-input:focus{outline:0;border-color:var(--ifx-cyan);box-shadow:0 0 0 4px rgba(19,195,231,.13)}.ifx-help{font-size:.82rem;color:var(--ifx-muted)}.ifx-check{display:flex;align-items:flex-start;gap:10px}.ifx-check input{width:18px!important;height:18px!important;margin-top:3px}.ifx-inline-alert{padding:14px 16px;border-radius:13px;background:#fff7e6;color:#754a00;border:1px solid #f1d6a1}.ifx-summary-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--ifx-line)}.ifx-summary-row span{color:var(--ifx-muted)}.ifx-summary-row strong{color:var(--ifx-ink);text-align:right}.ifx-summary-total{font-size:1.28rem}.ifx-secure{display:flex;gap:10px;align-items:flex-start;padding:14px;border-radius:14px;background:#f2faf7;color:#28634f;font-size:.85rem;margin-top:18px}
.ifx-service-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.ifx-service-tile{display:flex;flex-direction:column;padding:28px;border:1px solid var(--ifx-line);border-radius:24px;background:#fff;box-shadow:var(--ifx-shadow-sm);text-decoration:none;color:inherit;transition:.2s}.ifx-service-tile:hover{transform:translateY(-4px);border-color:var(--ifx-cyan)}.ifx-service-tile__icon{font-size:2rem}.ifx-service-tile h3{color:var(--ifx-ink);margin:18px 0 8px}.ifx-service-tile p{color:var(--ifx-muted);margin:0 0 22px}.ifx-service-tile span{margin-top:auto;color:var(--ifx-cyan-dark);font-weight:900}
.results:empty{display:none}.results{border:1px solid var(--ifx-line)!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important;box-shadow:var(--ifx-shadow-sm)!important}.result-item{padding:13px 15px;cursor:pointer;border-bottom:1px solid var(--ifx-line)}.result-item:hover{background:#effbfe}.service-details,.product-options,#userDetails{background:#fff!important;border:1px solid var(--ifx-line)!important;border-radius:18px!important;padding:20px!important;margin-top:18px!important}.validation-msg{color:var(--ifx-danger)!important}
@media(max-width:980px){.ifx-hero__grid,.ifx-order-layout{grid-template-columns:1fr}.ifx-order-summary{position:static}.ifx-plan-grid,.ifx-plan-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}.ifx-feature-strip{grid-template-columns:repeat(2,1fr)}.ifx-service-choice{grid-template-columns:1fr}.ifx-configurator{grid-template-columns:1fr}}
@media(max-width:650px){.ifx-section{padding:52px 0}.ifx-hero{padding:48px 0 34px}.ifx-plan-grid,.ifx-plan-grid--four,.ifx-form-grid,.ifx-feature-strip{grid-template-columns:1fr}.ifx-order-main{padding:20px}.ifx-progress{overflow-x:auto;padding-bottom:8px}.ifx-progress li span:last-child{display:none}.ifx-option{align-items:flex-start}.ifx-option__state{display:none}}


/* =========================================================
   IFIBRE V3 — INFORMATION, FAQ, TEAM & LEGAL EXPERIENCE
   ========================================================= */
#hero-section { color: var(--if-text); background: transparent; }
#hero-section :where(h1,h2,h3,h4,h5,h6,p,li,strong,span) { color: inherit; }
.ifx-info-page { width:min(100% - 2rem,1120px); margin:clamp(2rem,5vw,5rem) auto; color:var(--if-text); }
.ifx-info-hero { padding:clamp(2.5rem,7vw,5.5rem); text-align:center; border:1px solid var(--if-border); border-radius:32px; background:linear-gradient(135deg,#eefbfe 0%,#f8fcfd 56%,#fff8ef 100%); box-shadow:var(--if-shadow-sm); }
.ifx-info-hero__eyebrow,.ifx-kicker { display:block; margin-bottom:.65rem; color:var(--if-cyan-700)!important; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.ifx-info-hero h1,.ifx-info-hero .faq-title { margin:0 auto .85rem; max-width:820px; color:var(--if-text)!important; font-size:clamp(2.25rem,5vw,4.25rem); line-height:1.02; letter-spacing:-.045em; }
.ifx-info-hero p,.ifx-info-hero .faq-subtitle { max-width:720px; margin:0 auto; color:var(--if-text-muted)!important; font-size:clamp(1rem,1.8vw,1.2rem); line-height:1.7; }
.ifx-info-section { padding:clamp(3rem,6vw,5rem) 0; }
.ifx-section-heading { max-width:720px; margin-bottom:2rem; }
.ifx-section-heading h2,.ifx-info-panel h2,.ifx-info-cta h2 { color:var(--if-text)!important; font-size:clamp(1.7rem,3vw,2.55rem); letter-spacing:-.03em; }
.ifx-info-panel { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,5vw,5rem); margin:2rem 0; padding:clamp(2rem,5vw,4rem); border:1px solid var(--if-border); border-radius:28px; background:#fff; box-shadow:var(--if-shadow-sm); }
.ifx-info-panel p,.ifx-info-section p { color:var(--if-text-muted)!important; line-height:1.8; }
.ifx-value-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.ifx-value-card { padding:1.55rem; border:1px solid var(--if-border); border-radius:22px; background:#fff; box-shadow:var(--if-shadow-xs); }
.ifx-value-card__icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:1rem; border-radius:12px; background:var(--if-cyan-100); color:var(--if-cyan-800)!important; font-weight:900; }
.ifx-value-card h3 { margin-bottom:.55rem; color:var(--if-text)!important; }
.ifx-value-card p { margin:0; color:var(--if-text-muted)!important; line-height:1.65; }
.ifx-info-cta { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:2rem; padding:clamp(2rem,5vw,3.5rem); border-radius:28px; background:var(--if-navy-950); }
.ifx-info-cta h2,.ifx-info-cta p { color:#fff!important; }
.ifx-info-cta p { opacity:.8; margin:0; }
.ifx-info-cta__actions { display:flex; flex-wrap:wrap; gap:.75rem; }

/* Legacy legal content transformed into an accessible reading layout */
.ifx-legal-page > .ifx-info-hero + .terms-content,
.ifx-legal-page > .ifx-info-hero + .privacy-content { margin-top:2rem; }
.terms-content,.privacy-content { display:grid; gap:1rem; }
.terms-section,.privacy-section { width:100%; margin:0; padding:clamp(1.4rem,3vw,2.2rem); border:1px solid var(--if-border); border-radius:20px; background:#fff; color:var(--if-text)!important; box-shadow:var(--if-shadow-xs); }
.terms-section h2,.privacy-section h2 { margin:0 0 .8rem; color:var(--if-cyan-700)!important; font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.3; }
.terms-section :where(p,li,strong),.privacy-section :where(p,li,strong) { color:var(--if-text-muted)!important; font-size:1rem; line-height:1.8; }
.terms-section ul,.privacy-section ul { padding-left:1.35rem; }
.terms-section a,.privacy-section a { color:var(--if-cyan-700)!important; text-decoration:underline; text-underline-offset:3px; }

/* FAQ */
.ifx-faq-page .faq-container { max-width:900px; margin:2rem auto 0; border:0; display:grid; gap:.8rem; }
.ifx-faq-page .faq-item { overflow:hidden; border:1px solid var(--if-border); border-radius:18px; background:#fff; box-shadow:var(--if-shadow-xs); }
.ifx-faq-page .faq-question { padding:1.2rem 1.35rem; color:var(--if-text)!important; }
.ifx-faq-page .faq-question::after { margin-left:1rem; }
.ifx-faq-page .faq-answer { color:var(--if-text-muted)!important; }
.ifx-faq-page .faq-item.active .faq-answer { padding:0 1.35rem 1.3rem; }
.ifx-faq-page .faq-answer p,.ifx-faq-page .faq-answer a,.ifx-faq-page .faq-answer strong { color:var(--if-text-muted)!important; }
.ifx-faq-page .faq-answer a { color:var(--if-cyan-700)!important; }

/* Team */
.ifx-team-page .team-section { width:100%; margin:2rem 0 0; padding:0; }
.ifx-team-page .team-member { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr); gap:clamp(2rem,6vw,5rem); align-items:center; padding:clamp(2rem,5vw,4rem); border:1px solid var(--if-border); border-radius:28px; background:#fff; box-shadow:var(--if-shadow-sm); }
.ifx-team-page .team-bio h2 { color:var(--if-text)!important; font-size:clamp(1.8rem,3vw,2.6rem); }
.ifx-team-page .team-bio h4 { color:var(--if-cyan-700)!important; font-weight:800; }
.ifx-team-page .team-bio p { color:var(--if-text-muted)!important; line-height:1.8; }
.ifx-team-page .team-photo img { width:100%; max-width:360px; border-radius:24px; box-shadow:var(--if-shadow-md); }

@media (max-width:900px){.ifx-value-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ifx-info-panel,.ifx-team-page .team-member{grid-template-columns:1fr}.ifx-info-cta{align-items:flex-start;flex-direction:column}}
@media (max-width:560px){.ifx-value-grid{grid-template-columns:1fr}.ifx-info-page{width:min(100% - 1rem,1120px)}.ifx-info-hero{border-radius:22px;padding:2.25rem 1.25rem}.terms-section,.privacy-section{border-radius:16px}.ifx-info-cta__actions,.ifx-info-cta__actions .ifx-btn{width:100%}}

/* =========================================================
   iFibre Customer Experience v4.0
   Ordering, FAQ and legal document refinements
   ========================================================= */

.ifx-form-errors{margin:0 0 1.5rem;padding:1rem 1.15rem;border:1px solid #f0b6b6;border-radius:14px;background:#fff4f4;color:#8b1e1e}.ifx-form-errors strong{color:#8b1e1e}.ifx-form-errors ul{margin:.55rem 0 0;padding-left:1.25rem}.ifx-form-errors li{color:#8b1e1e;margin:.25rem 0}
.ifx-inline-alert--success{border-color:#b9e5d4!important;background:#eff9f5!important;color:#176b50!important}
.ifx-confirmation-card{max-width:780px;margin:2rem auto;padding:clamp(2rem,5vw,4rem);text-align:center;background:#fff;border:1px solid var(--if-border);border-radius:28px;box-shadow:var(--if-shadow-md)}.ifx-confirmation-card h1{margin:.55rem 0 1rem;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05}.ifx-confirmation-card>p{max-width:620px;margin:0 auto 1.5rem;color:var(--if-text-muted);font-size:1.08rem;line-height:1.75}.ifx-confirmation-icon{display:grid;place-items:center;width:66px;height:66px;margin:0 auto 1.2rem;border-radius:50%;background:#e9f9f3;color:#0c815c;font-size:2rem;font-weight:800}.ifx-confirmation-actions{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem}

/* Native, accessible FAQ accordion. It functions without JavaScript. */
.ifx-faq-toolbar{max-width:900px;margin:2rem auto 1rem;padding:1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--if-border);border-radius:18px;background:#fff}.ifx-faq-toolbar div{display:grid;gap:.2rem}.ifx-faq-toolbar strong{color:var(--if-text);font-size:1.05rem}.ifx-faq-toolbar span{color:var(--if-text-muted)}
.ifx-faq-page details.faq-item{overflow:hidden;border:1px solid var(--if-border);border-radius:18px;background:#fff;box-shadow:var(--if-shadow-xs);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.ifx-faq-page details.faq-item:hover{border-color:#a8ddea;box-shadow:var(--if-shadow-sm)}.ifx-faq-page details.faq-item[open]{border-color:#82d5e8;box-shadow:0 14px 32px rgba(14,55,78,.09)}
.ifx-faq-page summary.faq-question{list-style:none;cursor:pointer;padding:1.25rem 1.35rem;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;color:var(--if-text)!important;font-family:var(--if-font-display);font-size:1.04rem;font-weight:780;line-height:1.4}.ifx-faq-page summary.faq-question::-webkit-details-marker{display:none}.ifx-faq-page summary.faq-question::after{display:none!important}.faq-icon{position:relative;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#eaf9fd}.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:2px;background:#009fc7;border-radius:4px;transition:transform .2s ease}.faq-icon::after{transform:rotate(90deg)}details[open] .faq-icon::after{transform:rotate(0)}
.ifx-faq-page .faq-answer{max-height:none!important;overflow:visible;padding:0 1.35rem 1.35rem!important}.ifx-faq-page .faq-answer p{margin:0;color:var(--if-text-muted)!important;font-size:1rem;line-height:1.75}.ifx-faq-page .faq-answer a{color:var(--if-cyan-700)!important;font-weight:700}

/* Legal pages */
.ifx-legal-meta{display:flex;justify-content:center;gap:.55rem;flex-wrap:wrap;margin-top:1.35rem}.ifx-legal-meta span{padding:.45rem .72rem;border:1px solid rgba(0,157,199,.18);border-radius:999px;background:rgba(255,255,255,.7);color:#33516e;font-size:.82rem;font-weight:700}
.ifx-legal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:1.5rem;align-items:start;margin-top:2rem}.ifx-legal-nav{position:relative}.ifx-legal-nav__inner{position:sticky;top:88px;padding:1.15rem;border:1px solid var(--if-border);border-radius:20px;background:#fff;box-shadow:var(--if-shadow-xs)}.ifx-legal-nav__inner>strong{display:block;margin-bottom:.75rem;color:var(--if-text);font-family:var(--if-font-display);font-size:1.05rem}.ifx-legal-nav nav{display:grid;max-height:64vh;overflow:auto;margin:0 0 1rem;padding-right:.35rem}.ifx-legal-nav nav a{padding:.55rem .5rem;border-radius:9px;color:#526981;font-size:.82rem;line-height:1.35;text-decoration:none}.ifx-legal-nav nav a:hover{background:#edf9fc;color:#007fa3}.ifx-legal-nav .ifx-btn{width:100%}
.ifx-legal-document{min-width:0}.ifx-legal-document .terms-content{gap:1.15rem}.ifx-legal-document .terms-section{scroll-margin-top:100px;padding:clamp(1.5rem,3vw,2.4rem);border-radius:22px}.ifx-legal-document .terms-section h2{scroll-margin-top:100px;padding-bottom:.8rem;border-bottom:1px solid #e4edf2;color:#007fa3!important;font-size:clamp(1.25rem,2vw,1.65rem)}.ifx-legal-document .terms-section p,.ifx-legal-document .terms-section li{color:#3f5872!important;font-size:1rem;line-height:1.85;text-align:left}.ifx-legal-document .terms-section p{margin:.75rem 0}.ifx-legal-document .terms-section br{display:none}.ifx-legal-document .terms-section ul{margin:.85rem 0;padding-left:1.35rem}.ifx-legal-document .terms-section li+li{margin-top:.55rem}.ifx-legal-document .terms-section strong{color:#17324d!important}

/* Fibre order journey */
.ifx-fibre-order .ifx-order-layout{grid-template-columns:minmax(0,1fr) 320px}.ifx-fibre-order .ifx-order-main{padding:clamp(1.35rem,3vw,2rem)}.ifx-order-header{padding:0 0 1.6rem;border-bottom:1px solid var(--if-border)}.ifx-order-header h1{margin:.35rem 0 .55rem;font-size:clamp(2rem,4vw,3rem);line-height:1.05}.ifx-order-header p{margin:0;color:var(--if-text-muted);font-size:1.02rem;line-height:1.7}.ifx-order-stage{display:flex;align-items:flex-start;gap:1rem;margin:1.6rem 0 1rem}.ifx-order-stage h2{margin:0 0 .25rem!important;font-size:1.35rem}.ifx-order-stage p{margin:0;color:var(--if-text-muted)}.ifx-stage-number{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--if-cyan-500,#18c3e6);color:#052039;font-weight:850}
.ifx-fibre-order .search-bar{position:relative;margin-bottom:1rem}.ifx-fibre-order .ifx-search-input{height:58px;padding:0 1rem;font-size:1rem;border:1.5px solid #adc4d5;border-radius:14px;background:#fff}.ifx-fibre-order .ifx-search-input:focus{border-color:#12bfe3;box-shadow:0 0 0 4px rgba(18,191,227,.12)}.ifx-fibre-order .results{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;overflow:hidden;border:1px solid var(--if-border);border-radius:14px;background:#fff;box-shadow:var(--if-shadow-md)}.ifx-fibre-order .result-item{padding:.9rem 1rem;border-bottom:1px solid #edf2f5;cursor:pointer;color:var(--if-text)}.ifx-fibre-order .result-item:hover{background:#edfafd}
.ifx-availability{display:flex;align-items:center;gap:1rem;margin:1rem 0;padding:1rem 1.1rem;border-radius:16px}.ifx-availability>div{flex:1}.ifx-availability strong{display:block;color:var(--if-text);font-size:1rem}.ifx-availability p{margin:.2rem 0 0;color:var(--if-text-muted)}.ifx-availability--success{border:1px solid #bce5d4;background:#eff9f5}.ifx-availability--warning{border:1px solid #efd493;background:#fff8e8}.ifx-availability__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#d6f2e7;color:#087c58;font-weight:900}.ifx-button-row{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:.8rem}
.ifx-fibre-order .product-options,.ifx-fibre-details{margin-top:1.2rem;padding-top:.3rem;border-top:1px solid var(--if-border)}.ifx-selected-plan{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem;border:1px solid #b9dce7;border-radius:14px;background:#f2fbfd}.ifx-selected-plan span{color:var(--if-text-muted);font-size:.85rem}.ifx-selected-plan strong{color:var(--if-text);text-align:right}.ifx-term-control{display:flex;align-items:center;gap:.65rem;margin:1rem 0;padding:.85rem 1rem;border:1px solid var(--if-border);border-radius:14px;background:#fff}.ifx-plan-choice-heading{margin:1.2rem 0 .65rem;color:var(--if-text);font-weight:800}.ifx-fibre-plan-list{display:grid;gap:.65rem}.ifx-fibre-plan-option{display:flex!important;align-items:center;gap:.8rem;margin:0!important;padding:1rem;border:1.5px solid var(--if-border);border-radius:14px;background:#fff;cursor:pointer;transition:.18s ease}.ifx-fibre-plan-option:hover{border-color:#8bd7e8;transform:translateY(-1px)}.ifx-fibre-plan-option:has(input:checked){border-color:#11bde2;background:#f0fbfd;box-shadow:0 0 0 3px rgba(17,189,226,.1)}.ifx-fibre-plan-option input{width:auto!important}.ifx-fibre-plan-option>span{display:grid;gap:.16rem;flex:1}.ifx-fibre-plan-option strong{color:var(--if-text)}.ifx-fibre-plan-option small{color:var(--if-text-muted);font-weight:600}.ifx-fibre-plan-option>b{color:var(--if-text);font-size:1.08rem}.ifx-fibre-plan-option>b small{font-size:.72rem;margin-left:.15rem}.ifx-fibre-details{display:grid;grid-template-columns:1fr 1fr;gap:.75rem 1rem}.ifx-fibre-details>.ifx-order-stage,.ifx-fibre-details>#emailValidation,.ifx-fibre-details>#passwordFields,.ifx-fibre-details>#emailAction,.ifx-fibre-details>div:has(#agreeTerms),.ifx-fibre-details>.ifx-fibre-submit{grid-column:1/-1}.ifx-fibre-details .ifx-field-label{display:block;margin:.2rem 0 .35rem;color:var(--if-text);font-size:.84rem;font-weight:780}.ifx-fibre-details input:not([type=checkbox]),.ifx-fibre-details select{width:100%;height:48px;border-radius:12px}.ifx-fibre-details #passwordFields{display:grid!important;grid-template-columns:1fr 1fr;gap:.75rem 1rem}.ifx-fibre-details #passwordFields[style*="none"]{display:none!important}.ifx-fibre-submit{width:100%;margin-top:.4rem}.ifx-fibre-order .validation-msg{display:none;color:#b42318;font-size:.86rem}.ifx-fibre-order .ifx-order-summary .ifx-eyebrow{margin-bottom:.35rem}

@media(max-width:980px){.ifx-legal-layout{grid-template-columns:1fr}.ifx-legal-nav__inner{position:static}.ifx-legal-nav nav{display:flex;overflow:auto;max-height:none;padding-bottom:.5rem}.ifx-legal-nav nav a{flex:0 0 220px;background:#f6fafc}.ifx-fibre-order .ifx-order-layout{grid-template-columns:1fr}}
@media(max-width:680px){.ifx-faq-toolbar{align-items:flex-start;flex-direction:column}.ifx-faq-toolbar .ifx-btn{width:100%}.ifx-fibre-details{grid-template-columns:1fr}.ifx-fibre-details>*{grid-column:1!important}.ifx-fibre-details #passwordFields{grid-template-columns:1fr}.ifx-selected-plan{align-items:flex-start;flex-direction:column}.ifx-selected-plan strong{text-align:left}.ifx-availability{align-items:flex-start;flex-wrap:wrap}.ifx-availability .ifx-btn{width:100%}.ifx-legal-nav{display:none}}

/* ==========================================================================
   IFIBRE V5 — HOME, PRIVACY AND CUSTOMER DASHBOARD
   ========================================================================== */
.if-home-benefits{margin-top:2.5rem;text-align:left}

/* Privacy policy uses the same polished legal-document pattern as Terms. */
.ifx-legal-document .privacy-content{display:grid;gap:1.15rem}
.ifx-legal-document .privacy-section{scroll-margin-top:100px;padding:clamp(1.5rem,3vw,2.4rem);border:1px solid var(--if-border);border-radius:22px;background:#fff;box-shadow:var(--if-shadow-xs)}
.ifx-legal-document .privacy-section h2{margin:0;padding-bottom:.8rem;border-bottom:1px solid #e4edf2;color:#007fa3!important;font-size:clamp(1.25rem,2vw,1.65rem);text-align:left}
.ifx-legal-document .privacy-section p,.ifx-legal-document .privacy-section li{color:#3f5872!important;font-size:1rem;line-height:1.85;text-align:left}
.ifx-legal-document .privacy-section p{margin:.8rem 0 0}
.ifx-legal-document .privacy-section ul{margin:.9rem 0 0;padding-left:1.35rem}
.ifx-legal-document .privacy-section li+li{margin-top:.55rem}
.ifx-legal-document .privacy-section strong{color:#17324d!important}
.ifx-privacy-summary{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.15rem}
.ifx-privacy-summary>div{display:flex;gap:.9rem;padding:1.15rem;border:1px solid #cfe7ed;border-radius:18px;background:linear-gradient(135deg,#f1fbfd,#fff)}
.ifx-privacy-summary__icon{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:#d9f5ec;color:#087757;font-weight:900}
.ifx-privacy-summary strong{display:block;color:var(--if-text);font-size:.95rem}
.ifx-privacy-summary p{margin:.25rem 0 0;color:var(--if-text-muted);font-size:.88rem;line-height:1.55}
.ifx-contact-panel{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.1rem}
.ifx-contact-panel>div{padding:1rem;border:1px solid var(--if-border);border-radius:14px;background:#f8fbfc}
.ifx-contact-panel span{display:block;margin-bottom:.25rem;color:var(--if-text-muted);font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.ifx-contact-panel a{color:#007fa3!important;font-weight:800;text-decoration:none}

/* Customer dashboard shell */
.ifx-dashboard-body{background:#f5f8fa;color:var(--if-text)}
.ifx-dashboard{width:min(100% - 2rem,1320px);margin:0 auto;padding:clamp(2rem,5vw,4rem) 0 4rem}
.ifx-dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1.5rem;padding:clamp(1.6rem,4vw,2.6rem);border:1px solid #cfe0e8;border-radius:28px;background:linear-gradient(125deg,#ecfbfe 0%,#fff 56%,#fff7ed 100%);box-shadow:0 16px 40px rgba(25,61,82,.07)}
.ifx-dashboard-hero h1{margin:.35rem 0 .55rem;font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;letter-spacing:-.045em}
.ifx-dashboard-hero p{max-width:720px;margin:0;color:var(--if-text-muted);font-size:1.05rem;line-height:1.65}
.ifx-dashboard-hero__actions{display:flex;flex:0 0 auto;gap:.7rem;flex-wrap:wrap}
.ifx-dashboard-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.25rem 0}
.ifx-dashboard-kpi{display:flex;align-items:center;gap:1rem;padding:1.3rem;border:1px solid var(--if-border);border-radius:20px;background:#fff;box-shadow:var(--if-shadow-xs)}
.ifx-dashboard-kpi__icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:#eaf9fd;color:#007fa3;font-size:1.3rem;font-weight:850}
.ifx-dashboard-kpi div:last-child{display:grid;min-width:0}
.ifx-dashboard-kpi span{color:var(--if-text-muted);font-size:.76rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.ifx-dashboard-kpi strong{margin:.18rem 0;color:var(--if-text);font-family:var(--if-font-display);font-size:2rem;line-height:1}
.ifx-dashboard-kpi strong.ifx-dashboard-kpi__date{font-size:1.55rem}
.ifx-dashboard-kpi small{overflow:hidden;color:var(--if-text-muted);font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}
.ifx-dashboard-nav{display:flex;gap:.3rem;overflow-x:auto;margin:1.35rem 0;padding:.35rem;border:1px solid var(--if-border);border-radius:16px;background:#eef3f6}
.ifx-dashboard-nav a,.ifx-dashboard-nav span{display:flex;align-items:center;gap:.45rem;flex:0 0 auto;padding:.72rem 1rem;border-radius:12px;color:#496078;font-size:.9rem;font-weight:800;text-decoration:none}
.ifx-dashboard-nav a[aria-current=page]{background:#fff;color:var(--if-text);box-shadow:var(--if-shadow-xs)}
.ifx-dashboard-nav span[aria-disabled=true]{opacity:.58;cursor:not-allowed}
.ifx-dashboard-nav small{padding:.16rem .35rem;border-radius:999px;background:#dbe4e9;font-size:.62rem;text-transform:uppercase}
.ifx-dashboard-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1.25rem;align-items:start}
.ifx-dashboard-main-column,.ifx-dashboard-side-column{display:grid;gap:1.25rem;min-width:0}
.ifx-dashboard-panel{padding:clamp(1.25rem,3vw,1.8rem);border:1px solid var(--if-border);border-radius:22px;background:#fff;box-shadow:var(--if-shadow-xs)}
.ifx-dashboard-panel--compact{padding:1.25rem}
.ifx-dashboard-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.ifx-dashboard-panel__header h2{margin:.1rem 0 .25rem;font-size:1.45rem}
.ifx-dashboard-panel__header p{margin:0;color:var(--if-text-muted);font-size:.92rem}
.ifx-dashboard-panel__header>a{flex:0 0 auto;color:#007fa3;font-size:.86rem;font-weight:800;text-decoration:none}
.ifx-dashboard-panel__eyebrow{color:#0086a8;font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.ifx-dashboard-empty{display:grid;place-items:center;padding:2.7rem 1rem;text-align:center;border:1px dashed #bfd2dc;border-radius:18px;background:#f9fcfd}
.ifx-dashboard-empty--compact{padding:2rem 1rem}
.ifx-dashboard-empty__icon{display:grid;place-items:center;width:54px;height:54px;margin-bottom:.8rem;border-radius:18px;background:#eaf9fd;color:#0085a8;font-size:1.5rem;font-weight:900}
.ifx-dashboard-empty h3{margin:0 0 .35rem;font-size:1.2rem}
.ifx-dashboard-empty p{max-width:500px;margin:0 0 1rem;color:var(--if-text-muted)}
.ifx-service-list{display:grid;gap:.8rem}
.ifx-service-card{padding:1.15rem;border:1px solid #d7e3e9;border-radius:18px;background:linear-gradient(135deg,#fff,#fbfdfe)}
.ifx-service-card__top{display:flex;align-items:center;gap:.85rem}
.ifx-service-card__icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:14px;background:#eaf9fd;color:#007fa3;font-size:1.2rem;font-weight:900}
.ifx-service-card__identity{flex:1;min-width:0}
.ifx-service-card__identity span{display:block;color:var(--if-text-muted);font-size:.75rem;font-weight:800;text-transform:uppercase}
.ifx-service-card__identity h3{margin:.1rem 0 0;font-size:1.12rem}
.ifx-status-pill{display:inline-flex;align-items:center;gap:.35rem;width:max-content;padding:.38rem .58rem;border-radius:999px;background:#edf1f4;color:#536579;font-size:.72rem;font-weight:850;white-space:nowrap}
.ifx-status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ifx-status-pill.is-success{background:#e9f8f2;color:#087758}.ifx-status-pill.is-info{background:#eaf7fc;color:#007da0}.ifx-status-pill.is-warning{background:#fff5df;color:#9a6500}.ifx-status-pill.is-danger{background:#fff0f1;color:#b42332}
.ifx-service-card__details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:1rem 0 0;padding-top:1rem;border-top:1px solid #e7eef2}
.ifx-service-card__details div{min-width:0}.ifx-service-card__details dt{color:var(--if-text-muted);font-size:.72rem;font-weight:800;text-transform:uppercase}.ifx-service-card__details dd{margin:.2rem 0 0;color:var(--if-text);font-size:.88rem;font-weight:700;overflow-wrap:anywhere}
.ifx-dashboard-table td{vertical-align:middle}.ifx-dashboard-table td strong,.ifx-dashboard-table td small{display:block}.ifx-dashboard-table td small{margin-top:.18rem;color:var(--if-text-muted);font-size:.76rem}
.ifx-quick-actions{display:grid;gap:.55rem}
.ifx-quick-actions>a{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.8rem;border:1px solid #e0e8ec;border-radius:14px;color:var(--if-text);text-decoration:none;transition:.18s ease}
.ifx-quick-actions>a:hover{border-color:#9bd9e7;background:#f4fbfd;transform:translateY(-1px)}
.ifx-quick-actions>a>span{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:#eaf9fd;color:#007fa3;font-weight:900}
.ifx-quick-actions strong,.ifx-quick-actions small{display:block}.ifx-quick-actions strong{font-size:.88rem}.ifx-quick-actions small{margin-top:.1rem;color:var(--if-text-muted);font-size:.74rem}.ifx-quick-actions b{color:#8aa0b1;font-size:1.3rem}
.ifx-dashboard-panel--future{overflow:hidden;position:relative;background:linear-gradient(145deg,#0d223b,#142d4b);color:#fff;border-color:#243c58}
.ifx-dashboard-panel--future::after{content:"";position:absolute;right:-45px;top:-45px;width:140px;height:140px;border-radius:50%;background:rgba(38,199,230,.12)}
.ifx-dashboard-panel--future h2{position:relative;margin:.45rem 0 .5rem;color:#fff;font-size:1.25rem}.ifx-dashboard-panel--future p{position:relative;margin:0;color:#c9d6e4;font-size:.88rem;line-height:1.65}
.ifx-dashboard-future__label{position:relative;color:#60d9ef;font-size:.66rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.ifx-dashboard-future__preview{position:relative;margin-top:1rem;padding:1rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.06)}
.ifx-dashboard-future__preview span,.ifx-dashboard-future__preview strong{display:block}.ifx-dashboard-future__preview span{color:#aebfd0;font-size:.72rem;text-transform:uppercase}.ifx-dashboard-future__preview strong{margin-top:.25rem;color:#fff;font-size:.95rem}
.ifx-usage-placeholder{position:relative;height:78px;margin-top:1rem;display:flex;align-items:flex-end;gap:7px;padding:.7rem;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.05)}
.ifx-usage-placeholder i{flex:1;min-width:7px;border-radius:5px 5px 2px 2px;background:linear-gradient(#4bd4ec,#1d779f);opacity:.8}.ifx-usage-placeholder i:nth-child(1){height:28%}.ifx-usage-placeholder i:nth-child(2){height:46%}.ifx-usage-placeholder i:nth-child(3){height:38%}.ifx-usage-placeholder i:nth-child(4){height:72%}.ifx-usage-placeholder i:nth-child(5){height:58%}.ifx-usage-placeholder i:nth-child(6){height:84%}.ifx-usage-placeholder i:nth-child(7){height:64%}

@media(max-width:1040px){.ifx-dashboard-grid{grid-template-columns:1fr}.ifx-dashboard-side-column{grid-template-columns:repeat(2,minmax(0,1fr))}.ifx-dashboard-side-column .ifx-dashboard-panel:first-child{grid-column:1/-1}}
@media(max-width:760px){.ifx-privacy-summary,.ifx-contact-panel{grid-template-columns:1fr}.ifx-dashboard-hero{align-items:flex-start;flex-direction:column}.ifx-dashboard-hero__actions{width:100%}.ifx-dashboard-hero__actions .if-btn{flex:1}.ifx-dashboard-kpis{grid-template-columns:1fr}.ifx-service-card__details{grid-template-columns:1fr 1fr}.ifx-dashboard-side-column{grid-template-columns:1fr}.ifx-dashboard-side-column .ifx-dashboard-panel:first-child{grid-column:auto}}
@media(max-width:520px){.ifx-dashboard{width:min(100% - 1rem,1320px);padding-top:1rem}.ifx-dashboard-hero,.ifx-dashboard-panel{border-radius:18px}.ifx-dashboard-hero__actions{display:grid}.ifx-service-card__top{align-items:flex-start;flex-wrap:wrap}.ifx-service-card__identity{min-width:calc(100% - 58px)}.ifx-service-card__details{grid-template-columns:1fr}.ifx-dashboard-panel__header{flex-direction:column}.ifx-dashboard-table th:nth-child(5),.ifx-dashboard-table td:nth-child(5){display:none}}

/* =====================================================================
   IFIBRE BRAND EXPERIENCE V6
   New Zealand landscape + premium fibre technology direction
   ===================================================================== */
:root{
  --if-brand-navy:#061529;
  --if-brand-navy-2:#0b2440;
  --if-brand-blue:#067fb0;
  --if-brand-cyan:#17c8eb;
  --if-brand-cyan-soft:#7de6f4;
  --if-brand-white:#ffffff;
  --if-brand-cloud:#f3f7fa;
  --if-brand-line:rgba(255,255,255,.16);
  --if-brand-gold:#d8bd75;
  --if-brand-max:1320px;
  --if-brand-shadow:0 24px 70px rgba(0,22,48,.18);
}
.if-brand-body{background:#fff;color:var(--if-brand-navy);}
.if-brand-shell{width:min(calc(100% - 40px),var(--if-brand-max));margin-inline:auto;}
.if-brand-kicker{display:inline-flex;align-items:center;gap:.65rem;color:var(--if-brand-cyan);font-size:.73rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.if-brand-kicker::before{content:"";width:24px;height:2px;background:currentColor;}
.if-brand-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.75rem;}
.if-brand-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:52px;padding:0 1.45rem;border:1px solid transparent;border-radius:999px;font-weight:850;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;}
.if-brand-btn:hover{transform:translateY(-2px);}
.if-brand-btn--primary{background:linear-gradient(100deg,var(--if-brand-cyan),#60dbe8 70%,var(--if-brand-gold));color:var(--if-brand-navy);box-shadow:0 12px 30px rgba(23,200,235,.25);}
.if-brand-btn--primary:hover{box-shadow:0 18px 38px rgba(23,200,235,.34);}
.if-brand-btn--ghost{border-color:rgba(255,255,255,.54);background:rgba(4,20,39,.28);color:#fff;backdrop-filter:blur(10px);}
.if-brand-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.if-brand-btn--outline{border-color:rgba(93,216,239,.55);background:transparent;color:#fff;}
.if-brand-btn--outline:hover{border-color:var(--if-brand-cyan);background:rgba(23,200,235,.08);}

/* Main photographic hero */
.if-brand-hero{position:relative;min-height:720px;display:flex;align-items:center;overflow:hidden;background:var(--if-brand-navy);}
.if-brand-hero__media{position:absolute;inset:0;background-image:url('/assets/images/brand/hero-new-zealand.jpg');background-size:cover;background-position:center 46%;transform:scale(1.01);}
.if-brand-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,15,31,.98) 0%,rgba(3,15,31,.89) 36%,rgba(3,15,31,.42) 67%,rgba(3,15,31,.13) 100%),linear-gradient(0deg,rgba(3,15,31,.48),transparent 55%);}
.if-brand-hero__content{position:relative;z-index:1;padding:7rem 0 5.5rem;}
.if-brand-hero__copy{max-width:690px;color:#fff;}
.if-brand-hero h1{margin:.8rem 0 1.3rem;color:#fff;font-size:clamp(3.5rem,7.4vw,7rem);line-height:.88;letter-spacing:-.06em;text-shadow:0 8px 32px rgba(0,0,0,.25);}
.if-brand-hero h1 em{color:var(--if-brand-cyan);font-style:normal;}
.if-brand-hero__copy>p{max-width:650px;margin:0;color:#d7e4ef;font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.65;}
.if-brand-proof{display:flex;gap:1rem;flex-wrap:wrap;margin-top:3.2rem;}
.if-brand-proof span{display:flex;align-items:center;gap:.5rem;padding:.65rem .8rem;border-left:1px solid rgba(255,255,255,.22);color:#dce8f1;font-size:.82rem;font-weight:700;}
.if-brand-proof b{display:grid;place-items:center;min-width:24px;color:var(--if-brand-cyan);font-size:.9rem;}

/* Homepage service and story sections */
.if-brand-section{padding:clamp(4rem,7vw,7rem) 0;}
.if-brand-section-head{max-width:780px;margin:0 auto 2.8rem;text-align:center;}
.if-brand-section-head .if-brand-kicker{justify-content:center;}
.if-brand-section-head h2,.if-brand-story-copy h2,.if-brand-coast-cta h2{margin:.8rem 0 1rem;color:var(--if-brand-navy);font-size:clamp(2.3rem,5vw,4.25rem);line-height:1.02;letter-spacing:-.045em;}
.if-brand-section-head p{margin:0;color:#566b82;font-size:1.08rem;line-height:1.7;}
.if-brand-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;}
.if-brand-service-card{position:relative;min-height:430px;overflow:hidden;border-radius:26px;background:var(--if-brand-navy);box-shadow:var(--if-brand-shadow);text-decoration:none;isolation:isolate;}
.if-brand-service-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s ease;}
.if-brand-service-card__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,15,31,.98) 0%,rgba(3,15,31,.78) 40%,rgba(3,15,31,.08) 79%);}
.if-brand-service-card__content{position:absolute;z-index:2;inset:auto 0 0;padding:2rem;color:#fff;}
.if-brand-service-card__content>span{color:var(--if-brand-cyan);font-size:.72rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;}
.if-brand-service-card h3{margin:.55rem 0 .7rem;color:#fff;font-size:clamp(1.55rem,2.6vw,2.25rem);line-height:1.08;letter-spacing:-.03em;}
.if-brand-service-card p{margin:0;color:#cfdeea;line-height:1.55;}
.if-brand-service-card strong{display:flex;align-items:center;gap:.45rem;margin-top:1.3rem;color:#fff;font-size:.88rem;}
.if-brand-service-card strong b{color:var(--if-brand-cyan);font-size:1.15rem;transition:transform .2s ease;}
.if-brand-service-card:hover img{transform:scale(1.06);}
.if-brand-service-card:hover strong b{transform:translateX(4px);}
.if-brand-section--dark{position:relative;overflow:hidden;background:linear-gradient(140deg,#061529,#0b2440 72%,#0c3150);color:#fff;}
.if-brand-section--dark::before{content:"";position:absolute;right:-190px;top:-180px;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(23,200,235,.15),transparent 68%);}
.if-brand-story-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.8fr);gap:4rem;align-items:center;}
.if-brand-story-copy h2{color:#fff;}
.if-brand-story-copy p{max-width:700px;color:#c8d8e5;font-size:1.08rem;line-height:1.75;}
.if-brand-story-image{position:relative;min-height:430px;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:28px;box-shadow:0 28px 70px rgba(0,0,0,.3);}
.if-brand-story-image::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 50%,rgba(23,200,235,.18));}
.if-brand-story-image img{width:100%;height:100%;object-fit:cover;}
.if-brand-feature-grid{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:4rem;border:1px solid rgba(255,255,255,.12);border-radius:22px;background:rgba(255,255,255,.035);backdrop-filter:blur(8px);}
.if-brand-feature-grid article{padding:1.55rem;border-right:1px solid rgba(255,255,255,.12);}
.if-brand-feature-grid article:last-child{border-right:0;}
.if-brand-feature-grid article>span{color:var(--if-brand-cyan);font-size:1.75rem;}
.if-brand-feature-grid h3{margin:.75rem 0 .45rem;color:#fff;font-size:1rem;}
.if-brand-feature-grid p{margin:0;color:#aebfd0;font-size:.82rem;line-height:1.55;}
.if-brand-coast-cta{position:relative;min-height:540px;display:flex;align-items:center;overflow:hidden;background:var(--if-brand-navy);}
.if-brand-coast-cta__media{position:absolute;inset:0;background:url('/assets/images/brand/coastal-fibre.jpg') center/cover no-repeat;}
.if-brand-coast-cta__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,18,35,.96),rgba(4,18,35,.68) 52%,rgba(4,18,35,.15));}
.if-brand-coast-cta__content{position:relative;z-index:1;max-width:var(--if-brand-max);padding:5rem 0;color:#fff;}
.if-brand-coast-cta h2{max-width:740px;color:#fff;}
.if-brand-coast-cta p{max-width:620px;color:#d4e1eb;font-size:1.08rem;line-height:1.7;}

/* Branded service page heroes */
.if-brand-service-hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;background:var(--if-brand-navy);color:#fff;}
.if-brand-service-hero--fibre{background:url('/assets/images/brand/hero-new-zealand.jpg') center/cover no-repeat;}
.if-brand-service-hero--mobile{background:url('/assets/images/brand/mobile-connected.jpg') center 38%/cover no-repeat;}
.if-brand-service-hero--business{background:url('/assets/images/brand/business-connectivity.jpg') center/cover no-repeat;}
.if-brand-service-hero__overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,15,31,.98),rgba(3,15,31,.82) 52%,rgba(3,15,31,.28));}
.if-brand-service-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.65fr);gap:3rem;align-items:center;padding:6rem 0;}
.if-brand-service-hero h1{margin:.8rem 0 1.25rem;color:#fff;font-size:clamp(3.3rem,6vw,6rem);line-height:.9;letter-spacing:-.055em;}
.if-brand-service-hero h1 em{color:var(--if-brand-cyan);font-style:normal;}
.if-brand-service-hero p{max-width:700px;margin:0;color:#d2e0eb;font-size:1.15rem;line-height:1.68;}
.if-brand-glass-panel{padding:2rem;border:1px solid rgba(255,255,255,.18);border-radius:24px;background:rgba(4,19,37,.66);box-shadow:0 24px 70px rgba(0,0,0,.28);backdrop-filter:blur(16px);}
.if-brand-glass-panel__icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(23,200,235,.48);border-radius:16px;color:var(--if-brand-cyan);font-size:1.5rem;}
.if-brand-glass-panel h2{margin:1rem 0;color:#fff;font-size:1.55rem;line-height:1.2;}
.if-brand-glass-panel ul{display:grid;gap:.9rem;margin:0;padding:0;list-style:none;}
.if-brand-glass-panel li{display:flex;gap:.65rem;color:#d5e1ea;font-size:.9rem;line-height:1.5;}
.if-brand-glass-panel li::before{content:"✓";color:var(--if-brand-cyan);font-weight:900;}
.if-brand-split-section{padding:clamp(4rem,7vw,7rem) 0;background:linear-gradient(135deg,#eefafd,#fff 58%,#fff8ed);}
.if-brand-split-section__grid{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(0,1fr);gap:4rem;align-items:center;}
.if-brand-split-section__image{min-height:500px;overflow:hidden;border-radius:28px;box-shadow:var(--if-brand-shadow);}
.if-brand-split-section__image img{width:100%;height:100%;object-fit:cover;}
.if-brand-split-section__copy h2{margin:.75rem 0 1.5rem;color:var(--if-brand-navy);font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.04;letter-spacing:-.045em;}
.if-brand-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.if-brand-check-grid>div{padding:1.15rem;border:1px solid #d9e5eb;border-radius:16px;background:rgba(255,255,255,.8);}
.if-brand-check-grid b,.if-brand-check-grid span{display:block;}
.if-brand-check-grid b{color:var(--if-brand-navy);font-size:.95rem;}
.if-brand-check-grid b::before{content:"✓";margin-right:.5rem;color:#058b68;}
.if-brand-check-grid span{margin-top:.35rem;color:#5e7185;font-size:.86rem;line-height:1.55;}

/* Refine existing shared navigation and footer into the new visual system */
.nav-menu,.site-nav{background:rgba(255,255,255,.94)!important;backdrop-filter:blur(16px);}
.site-footer{background:linear-gradient(145deg,#041225,#071a31 70%,#0b2947)!important;}
.footer-column h4{color:#fff;}
.footer-column a:hover,.footer-links a:hover{color:var(--if-brand-cyan)!important;}

/* Carry the brand through dashboard and legal UI without reducing readability */
.ifx-dashboard-hero{background:linear-gradient(125deg,#e8faff 0%,#fff 53%,#fff5e5 100%);}
.ifx-dashboard-panel--future{background:linear-gradient(145deg,#061529,#0b2a49);}
.ifx-dashboard-kpi__icon,.ifx-service-card__icon,.ifx-quick-actions>a>span{background:#e4f9fd;color:#007fae;}
.ifx-legal-hero,.ifx-info-hero{background:linear-gradient(125deg,#eafaff,#fff 58%,#fff6e8)!important;}

@media(max-width:1080px){
  .if-brand-service-grid{grid-template-columns:1fr 1fr;}
  .if-brand-service-card:last-child{grid-column:1/-1;min-height:380px;}
  .if-brand-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .if-brand-feature-grid article{border-bottom:1px solid rgba(255,255,255,.12);}
  .if-brand-story-grid,.if-brand-service-hero__grid,.if-brand-split-section__grid{grid-template-columns:1fr;}
  .if-brand-story-image,.if-brand-split-section__image{min-height:420px;}
  .if-brand-glass-panel{max-width:700px;}
}
@media(max-width:760px){
  .if-brand-shell{width:min(calc(100% - 24px),var(--if-brand-max));}
  .if-brand-hero{min-height:670px;align-items:flex-end;}
  .if-brand-hero__media{background-position:62% center;}
  .if-brand-hero__overlay{background:linear-gradient(0deg,rgba(3,15,31,.98),rgba(3,15,31,.82) 65%,rgba(3,15,31,.35));}
  .if-brand-hero__content{padding:8rem 0 3.5rem;}
  .if-brand-hero h1{font-size:clamp(3.25rem,16vw,5.25rem);}
  .if-brand-proof{gap:.35rem;margin-top:2rem;}
  .if-brand-proof span{width:calc(50% - .2rem);}
  .if-brand-service-grid{grid-template-columns:1fr;}
  .if-brand-service-card,.if-brand-service-card:last-child{grid-column:auto;min-height:390px;}
  .if-brand-feature-grid{grid-template-columns:1fr 1fr;}
  .if-brand-feature-grid article:nth-child(even){border-right:0;}
  .if-brand-story-image,.if-brand-split-section__image{min-height:330px;}
  .if-brand-service-hero{min-height:auto;}
  .if-brand-service-hero__grid{padding:5rem 0 3.5rem;}
  .if-brand-service-hero h1{font-size:clamp(3rem,14vw,4.8rem);}
  .if-brand-check-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  .if-brand-actions{display:grid;}
  .if-brand-btn{width:100%;}
  .if-brand-proof span{width:100%;}
  .if-brand-feature-grid{grid-template-columns:1fr;}
  .if-brand-feature-grid article{border-right:0;}
}

/* =========================================================
   V7 media framing and responsive split-layout corrections
   ========================================================= */
.if-brand-story-grid,
.if-brand-split-section__grid {
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2.25rem,4vw,4.5rem);
}

.if-brand-story-copy,
.if-brand-split-section__copy,
.if-brand-story-image,
.if-brand-split-section__image {
  min-width:0;
}

.if-brand-story-copy h2,
.if-brand-split-section__copy h2 {
  max-width:100%;
  overflow-wrap:anywhere;
  text-wrap:balance;
}

/* A positioned media frame guarantees that images fill the complete card. */
.if-brand-story-image,
.if-brand-split-section__image {
  position:relative;
  width:100%;
  min-height:0;
  aspect-ratio:4 / 3;
  isolation:isolate;
  background:#0b2039;
}

.if-brand-story-image img,
.if-brand-split-section__image img {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:center;
}

/* The mountain photograph benefits from a slightly right-biased focal point. */
.if-brand-story-image img {
  object-position:58% center;
}

/* Service-specific focal points keep subjects centred after responsive cropping. */
.if-brand-split-section__image img[src*="mobile-connected"] {
  object-position:58% center;
}
.if-brand-split-section__image img[src*="coastal-fibre"] {
  object-position:center center;
}
.if-brand-split-section__image img[src*="business-connectivity"] {
  object-position:center center;
}

/* Avoid headings forcing horizontal page overflow on intermediate displays. */
.if-brand-split-section__copy h2 {
  font-size:clamp(2rem,3.55vw,3.65rem);
}
.if-brand-check-grid {
  min-width:0;
}
.if-brand-check-grid > div {
  min-width:0;
}
.if-brand-check-grid span {
  overflow-wrap:anywhere;
}

@media (max-width:1240px) {
  .if-brand-story-grid,
  .if-brand-split-section__grid {
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(1.75rem,3vw,3rem);
  }
  .if-brand-story-copy h2,
  .if-brand-split-section__copy h2 {
    font-size:clamp(2rem,3.3vw,3.2rem);
  }
}

@media (max-width:980px) {
  .if-brand-story-grid,
  .if-brand-split-section__grid {
    grid-template-columns:1fr;
  }
  .if-brand-story-image,
  .if-brand-split-section__image {
    aspect-ratio:16 / 9;
    min-height:0;
    max-height:520px;
  }
  .if-brand-story-image {
    order:2;
  }
  .if-brand-story-copy {
    order:1;
  }
  .if-brand-split-section__copy h2 {
    max-width:780px;
  }
}

@media (max-width:620px) {
  .if-brand-story-image,
  .if-brand-split-section__image {
    aspect-ratio:4 / 3;
    border-radius:20px;
  }
  .if-brand-story-copy h2,
  .if-brand-split-section__copy h2 {
    font-size:clamp(2rem,10vw,2.8rem);
    letter-spacing:-.035em;
  }
}

/* =========================================================
   V8 final media-edge and viewport containment corrections
   ========================================================= */
html,
body.if-brand-body {
  max-width:100%;
  overflow-x:hidden;
}

.if-brand-section,
.if-brand-section--dark,
.if-brand-split-section,
.if-brand-coast-cta {
  overflow:hidden;
}

.if-brand-shell,
.if-brand-story-grid,
.if-brand-split-section__grid {
  max-width:100%;
}

.if-brand-story-image,
.if-brand-split-section__image {
  box-sizing:border-box;
  max-width:100%;
  border:0;
  background:transparent;
  line-height:0;
}

.if-brand-story-image img,
.if-brand-split-section__image img {
  border:0;
  border-radius:inherit;
  vertical-align:middle;
  transform:scale(1.012);
  transform-origin:center;
}

/* Keep the photograph fully inside the frame with no residual generated-card edge. */
.if-brand-story-image::after {
  border-radius:inherit;
  pointer-events:none;
}

/* Prevent two-column content from creating a horizontal scroll range. */
.if-brand-story-copy,
.if-brand-split-section__copy,
.if-brand-check-grid,
.if-brand-check-grid > div {
  width:100%;
  max-width:100%;
}

.if-brand-story-copy h2,
.if-brand-split-section__copy h2 {
  word-break:normal;
  overflow-wrap:break-word;
}

@media (max-width:1180px) {
  .if-brand-story-grid,
  .if-brand-split-section__grid {
    grid-template-columns:1fr;
  }

  .if-brand-story-image,
  .if-brand-split-section__image {
    width:100%;
    aspect-ratio:16 / 9;
    max-height:560px;
  }

  .if-brand-story-image {
    order:2;
  }

  .if-brand-story-copy {
    order:1;
  }
}

/* =========================================================
   V9 — Fibre order completion experience
   ========================================================= */
.ifx-complete-page{
  min-height:70vh;
  padding:clamp(2.5rem,6vw,5rem) 0;
  background:linear-gradient(180deg,#f4fbfd 0%,#ffffff 58%,#f7fafc 100%);
}
.ifx-complete-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:2rem;
  align-items:center;
  padding:clamp(2rem,5vw,4rem);
  overflow:hidden;
  border:1px solid #274761;
  border-radius:30px;
  background:
    radial-gradient(circle at 90% 15%,rgba(18,196,232,.24),transparent 28%),
    linear-gradient(135deg,#071b33 0%,#0a2743 68%,#0a3550 100%);
  box-shadow:0 26px 70px rgba(7,27,51,.20);
}
.ifx-complete-hero::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:360px;
  height:360px;
  border:1px solid rgba(24,198,235,.22);
  border-radius:50%;
  box-shadow:0 0 0 52px rgba(24,198,235,.05),0 0 0 105px rgba(24,198,235,.035);
}
.ifx-complete-hero__copy,.ifx-complete-reference{position:relative;z-index:1}
.ifx-complete-hero .ifx-eyebrow{color:#18c6eb}
.ifx-complete-hero h1{
  max-width:760px;
  margin:.6rem 0 1rem;
  color:#fff;
  font-size:clamp(2.25rem,5vw,4.4rem);
  line-height:1.02;
  letter-spacing:-.045em;
}
.ifx-complete-hero p{max-width:710px;margin:0;color:#c9d8e6;font-size:1.08rem;line-height:1.75}
.ifx-complete-icon{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin-bottom:1.25rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:linear-gradient(135deg,#12c4e8,#d4b979);
  color:#071b33;
  font-size:2rem;
  font-weight:900;
  box-shadow:0 12px 28px rgba(18,196,232,.22);
}
.ifx-complete-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem}
.ifx-complete-hero .ifx-btn--secondary{border-color:#67d4e8;color:#fff;background:transparent}
.ifx-complete-reference{
  padding:1.5rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}
.ifx-complete-reference span,.ifx-complete-reference small{display:block;color:#b9cedd}
.ifx-complete-reference span{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ifx-complete-reference strong{display:block;margin:.45rem 0;color:#fff;font-size:2.3rem;line-height:1}
.ifx-complete-reference small{font-size:.85rem;line-height:1.55}
.ifx-complete-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.4rem}
.ifx-complete-card{
  padding:clamp(1.5rem,3vw,2.2rem);
  border:1px solid var(--if-border);
  border-radius:24px;
  background:#fff;
  box-shadow:var(--if-shadow-sm);
}
.ifx-complete-card h2,.ifx-complete-dashboard-cta h2{margin:.45rem 0 1.2rem;color:var(--if-text);font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.15}
.ifx-complete-summary{margin:0}
.ifx-complete-summary>div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--if-border)}
.ifx-complete-summary>div:last-child{border-bottom:0}
.ifx-complete-summary dt{color:var(--if-text-muted);font-size:.9rem}
.ifx-complete-summary dd{margin:0;color:var(--if-text);font-weight:800;text-align:right;overflow-wrap:anywhere}
.ifx-complete-steps{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.ifx-complete-steps li{display:grid;grid-template-columns:38px 1fr;gap:.85rem;align-items:start}
.ifx-complete-steps li>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e9f9fc;color:#008daf;font-weight:900}
.ifx-complete-steps strong{display:block;margin:.1rem 0 .25rem;color:var(--if-text)}
.ifx-complete-steps p{margin:0;color:var(--if-text-muted);line-height:1.55}
.ifx-complete-notice{margin-top:1.4rem;padding:1rem 1.2rem;border-radius:16px;border:1px solid var(--if-border);background:#fff}
.ifx-complete-notice.is-success{border-color:#bfe5d8;background:#eff9f6}
.ifx-complete-notice.is-warning{border-color:#efd39f;background:#fff7e9}
.ifx-complete-notice strong{display:block;margin-bottom:.25rem;color:var(--if-text)}
.ifx-complete-notice p{margin:0;color:var(--if-text-muted)}
.ifx-complete-dashboard-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  margin-top:1.4rem;
  padding:clamp(1.5rem,4vw,2.5rem);
  border:1px solid #c9e1e9;
  border-radius:24px;
  background:linear-gradient(135deg,#eefbfe,#fff8ef);
}
.ifx-complete-dashboard-cta h2{margin-bottom:.55rem}
.ifx-complete-dashboard-cta p{max-width:760px;margin:0;color:var(--if-text-muted);line-height:1.65}
.ifx-complete-dashboard-cta .ifx-btn{flex:0 0 auto}
@media (max-width:900px){
  .ifx-complete-hero,.ifx-complete-grid{grid-template-columns:1fr}
  .ifx-complete-reference{max-width:330px}
  .ifx-complete-dashboard-cta{align-items:flex-start;flex-direction:column}
}
@media (max-width:600px){
  .ifx-complete-page{padding:1.5rem 0 2.5rem}
  .ifx-complete-hero{padding:1.5rem;border-radius:22px}
  .ifx-complete-summary>div{grid-template-columns:1fr;gap:.3rem}
  .ifx-complete-summary dd{text-align:left}
  .ifx-complete-actions .ifx-btn,.ifx-complete-dashboard-cta .ifx-btn{width:100%;justify-content:center}
}


/* =========================================================
   V10 — Consent, analytics UX and system pages
   ========================================================= */
.if-cookie-banner {
  position: fixed;
  z-index: 10000;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  max-width: 1180px;
  margin-inline: auto;
  color: #eaf7ff;
  background: rgba(5, 24, 47, .98);
  border: 1px solid rgba(54, 209, 255, .35);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 18, 38, .34);
  backdrop-filter: blur(14px);
}
.if-cookie-banner__body { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.25rem 1.4rem; }
.if-cookie-banner strong { display:block; margin-bottom:.35rem; color:#fff; font-size:1.05rem; }
.if-cookie-banner p { max-width:760px; margin:0; color:#c9dded; font-size:.92rem; line-height:1.55; }
.if-cookie-banner a { display:inline-block; margin-top:.45rem; color:#33d4ff; font-size:.9rem; font-weight:700; }
.if-cookie-banner__actions { display:flex; flex:0 0 auto; gap:.65rem; }
.if-cookie-btn { min-height:44px; padding:.7rem 1rem; border-radius:999px; border:1px solid transparent; font:inherit; font-weight:800; cursor:pointer; }
.if-cookie-btn--primary { color:#04213b; background:linear-gradient(100deg,#16c5ea,#d8ba70); }
.if-cookie-btn--secondary { color:#fff; background:transparent; border-color:rgba(255,255,255,.4); }
.if-cookie-settings { padding:0; border:0; color:inherit; background:none; font:inherit; cursor:pointer; }
.if-cookie-settings:hover, .if-cookie-settings:focus-visible { color:#35d5ff; text-decoration:underline; }
.if-system-page { min-height:70vh; display:grid; place-items:center; padding:clamp(4rem,10vw,8rem) 1.25rem; background:radial-gradient(circle at top right,rgba(22,197,234,.15),transparent 34%),#071b33; }
.if-system-card { width:min(100%,760px); padding:clamp(2rem,6vw,4rem); text-align:center; color:#dcebf6; background:rgba(13,41,70,.9); border:1px solid rgba(56,205,244,.25); border-radius:28px; box-shadow:0 30px 80px rgba(0,0,0,.28); }
.if-system-card__code { display:block; color:#28d1f5; font-size:.82rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.if-system-card h1 { margin:.65rem 0 1rem; color:#fff; font-size:clamp(2.3rem,7vw,4.8rem); line-height:1; }
.if-system-card p { max-width:580px; margin:0 auto 1.75rem; font-size:1.05rem; line-height:1.65; }
.if-system-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
@media (max-width:760px) {
  .if-cookie-banner__body { align-items:stretch; flex-direction:column; gap:1rem; }
  .if-cookie-banner__actions { width:100%; }
  .if-cookie-btn { flex:1; }
}
@media (max-width:440px) { .if-cookie-banner__actions { flex-direction:column-reverse; } }