/* =========================================================
   TurboCharger — Inner page template styles
   ---------------------------------------------------------
   Loaded AFTER style.css (shared design tokens, base reset,
   .container, buttons, header, final-CTA + footer). Everything
   for the inner pages lives here, prefixed `ip-`, so the home
   page is never affected.

   MOBILE FIRST: base rules target small screens; larger
   layouts are layered on with min-width queries:
     640px  → large phones / small tablets
     768px  → tablets
     1025px → desktop (same desktop boundary as the home page)
     1200px → wide desktop (two-column hero)

   ---------------------------------------------------------
   REUSABLE BUILDING BLOCKS (copy the markup from inner-page.html)
   ---------------------------------------------------------
   Layout      .ip-main · .ip-section (+ --pad-bottom before a dark
               section or the footer) · .ip-container-wide
   Headings    .ip-head (+ --center) with the shared .eyebrow /
               .section-title / .section-sub · .ip-card-title
   Copy        .ip-copy (+ --spaced, --light) · .ip-tagline
   Actions     .ip-actions · .ip-btn-lg / .ip-btn-md · .ip-text-link
   Sections    Hero ........ .ip-hero-grid, .ip-hero-visual, .ip-profile-card
               Feature list  .ip-problem-grid > .ip-feature (+ .ip-banner)
               Dark split .. .ip-solution / .ip-solution-grid + .ip-panel
               Card flow ... .ip-impact-grid > .ip-impact-card, .ip-tags
               Media + list  .ip-benefits-grid + .ip-accordion
               Card pair ... .ip-diff-grid > .ip-diff-card + .ip-quote-card
   Motion      [data-reveal] on any block → fades up on scroll (inner.js)
   ========================================================= */

:root {
  /* Colours */
  --ip-ink: #06082C;            /* headings, dark surfaces */
  --ip-text: #333333;           /* body copy */
  --ip-line: #06082C1F;         /* card borders */
  --ip-hairline: #E1E0E5;       /* dividers + connector lines */
  --ip-header-line: #E5E5EA;    /* header / menu borders */
  --ip-tint: #F5F5FF;           /* icon tiles, tags, banner */
  --ip-accent: #EF0279;         /* highlight text, banner rule */
  --ip-blue: #2E72DC;           /* toggle on */
  --ip-chart-blue: #0078FF;     /* badge, "in use" */
  --ip-green: #01B367;          /* status dot, positive change */

  /* Radii */
  --ip-radius: 0.3125rem;       /* 5px — cards, media, tags, banner */
  --ip-radius-sm: 0.25rem;      /* 4px — badges, small media */
  --ip-radius-xs: 0.125rem;     /* 2px — icon tiles, select */

  /* Elevation */
  --ip-menu-shadow: 0 16px 24px -18px rgba(6, 8, 44, .35);

  /* Vertical space between page sections (grows with the viewport) */
  --ip-gap: 4rem;
}
@media (min-width: 768px) {
  :root { --ip-gap: 6rem; }
}
@media (min-width: 1025px) {
  :root { --ip-gap: 9.75rem; }
}

/* =========================================================
   HEADER — light variant of the shared header
   (inner pages sit on a white background)
   ========================================================= */
.site-header--light {
  background: var(--white);
  border-bottom: 1px solid var(--ip-header-line);
}
.site-header--light.is-scrolled {
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px -14px rgba(6, 8, 44, .35);
}
.site-header--light .main-nav a { color: var(--ip-ink); }
.site-header--light .main-nav a:hover { color: var(--blue); }
.site-header--light .nav-toggle span { background: var(--ip-ink); }

/* Menu panel: white on phones and tablets */
@media (max-width: 1024px) {
  .site-header--light.nav-open .main-nav {
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--ip-header-line);
    box-shadow: var(--ip-menu-shadow);
  }
}
/* Tablet landscape / small laptops: the full nav + CTA doesn't fit yet,
   so keep the menu button (the shared header only does this up to 768px). */
@media (min-width: 769px) and (max-width: 1024px) {
  .site-header--light .main-nav { display: none; }
  .site-header--light .nav-toggle { display: flex; }
  .site-header--light.nav-open .main-nav {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 2rem;
  }
}
/* Small desktops: tighten the spacing so nav + CTA stay on one line */
@media (min-width: 1025px) and (max-width: 1199px) {
  .site-header--light { --header-pad-x: 2rem; }
  .site-header--light .header-right,
  .site-header--light .main-nav { gap: 1.5rem; }
}

/* Space for the fixed header */
.ip-main { padding-top: 4.875rem; }
@media (min-width: 769px) {
  .ip-main { padding-top: 4.5625rem; }
}

/* =========================================================
   SHARED BUILDING BLOCKS
   ========================================================= */

/* ---------- Type ---------- */
.ip-main .eyebrow {
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--ip-ink);
  margin-bottom: 1rem;
}
.ip-main .eyebrow.light { color: var(--white); }

.ip-main .section-title {
  font-size: clamp(1.875rem, 1.45rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
  margin-bottom: 1rem;
}
.ip-main .section-title.light { color: var(--white); }

/* Body copy — one definition for every 0.875rem paragraph on the page */
.ip-main .section-sub,
.ip-copy p,
.ip-feature p,
.ip-banner p,
.ip-impact-card p,
.ip-acc-panel p,
.ip-profile-label,
.ip-meter-row {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-main .section-sub { max-width: 40rem; }

/* Small 0.875rem / 600 headings inside lists, banners and cards */
.ip-feature h3,
.ip-banner h3,
.ip-impact-card h3 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ip-ink);
}

/* Larger card headings (same as the home "meet" cards) */
.ip-card-title {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ip-ink);
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .ip-card-title { font-size: 1.75rem; }
}

/* Italic uppercase one-liners (hero tagline, CTA note) */
.ip-tagline,
.ip-cta-note {
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ip-head--center { text-align: center; }
.ip-head--center .section-sub { margin-inline: auto; }

/* Copy block: paragraphs stacked with a small gap */
.ip-copy p + p { margin-top: 0.3125rem; }
.ip-copy--spaced p + p { margin-top: 0.75rem; }
.ip-copy--light p { color: rgba(255, 255, 255, .85); }

/* ---------- Surfaces ---------- */
/* Square icon tiles */
.ip-feature-icon,
.ip-impact-icon,
.ip-acc-icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ip-tint);
}
.ip-feature-icon { border-radius: 0.25rem; } /* 4px */
.ip-impact-icon,
.ip-acc-icon { border-radius: 0.125rem; } /* 2px */

/* Bordered white cards */
.ip-impact-card,
.ip-diff-card {
  background: var(--white);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
}

/* Photo frames: crop the image to the frame */
.ip-hero-photo,
.ip-benefits-media,
.ip-diff-media {
  overflow: hidden;
  border-radius: var(--ip-radius);
}
.ip-hero-photo img,
.ip-benefits-media img,
.ip-diff-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Actions ---------- */
/* Design uses fixed-width CTAs */
.ip-btn-lg { min-width: 12.875rem; }
.ip-btn-md { min-width: 11.8125rem; }
.ip-main .btn-outline {
  background: var(--white);
  border-color: #CCCCCC;
  color: var(--ip-ink);
}
.ip-main .btn-outline:hover { background: var(--ip-tint); }

.ip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.5rem;
}
/* On phones the CTAs share the row and wrap to full width */
.ip-actions .btn { flex: 1 1 12.875rem; }
@media (min-width: 480px) {
  .ip-actions .btn { flex: 0 0 auto; }
}

/* Dark square arrow link (home .text-link, navy variant) */
.ip-text-link { margin-top: 2.5rem; }
.ip-text-link span { background: var(--ip-ink); }

/* ---------- Rhythm & helpers ---------- */
.ip-section { padding-top: var(--ip-gap); }
.ip-section--pad-bottom { padding-bottom: var(--ip-gap); }

/* Line breaks that only make sense on wide layouts */
.ip-br-desktop { display: none; }
@media (min-width: 1025px) {
  .ip-br-desktop { display: inline; }
}

/* Scroll reveal (inner.js adds .is-visible). Only hidden when JS runs. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   HERO
   ========================================================= */
.ip-hero { padding-top: 2.5rem; }

.ip-container-wide { max-width: 80.875rem; }

.ip-hero-grid {
  display: grid;
  gap: 2.5rem;
}

.ip-hero-content { max-width: 36rem; }

.ip-hero-eyebrow.eyebrow {
  font-size: 0.75rem;
  margin-bottom: 1.25rem;
}
.ip-hero-eyebrow span { color: var(--ip-accent); }

.ip-hero-title {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
  margin-bottom: 1rem;
}

/* Visual: on phones/tablets only the top of the photo is shown and the
   profile card sits just below, overlapping its bottom edge. */
.ip-hero-visual { position: relative; }

.ip-hero-photo { aspect-ratio: 540 / 320; }
.ip-hero-photo img { object-position: top center; }

.ip-profile-card {
  position: relative;
  margin: -2.5rem 0.75rem 0;
  background: var(--white);
  border-radius: var(--ip-radius);
  box-shadow: 0 12px 32px -14px rgba(6, 8, 44, .35), 0 0 0 1px rgba(6, 8, 44, .06);
  /* Entrance: a short, soft slide in from the left on page load */
  --ip-card-shift: -1.5rem;
  --ip-card-fade: 0;
  animation: ip-card-in 1s cubic-bezier(.22, .61, .36, 1) 0.25s both;
}
@keyframes ip-card-in {
  from {
    opacity: var(--ip-card-fade);
    transform: translateX(var(--ip-card-shift));
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ip-profile-card { animation: none; }
}
@media (min-width: 640px) {
  .ip-profile-card {
    max-width: 25rem;
    margin: -4rem auto 0;
  }
}

.ip-profile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.25rem;
  padding: 0.375rem 1rem;
  border-bottom: 1px solid #EDEDED;
}
.ip-profile-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ip-text);
}
.ip-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--ip-green);
  flex-shrink: 0;
}
.ip-badge {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3125rem;
  color: var(--ip-chart-blue);
  background: var(--ip-tint);
  border-radius: var(--ip-radius-sm);
  padding: 0 0.625rem;
  white-space: nowrap;
}

.ip-profile-body { padding: 0.75rem 1rem 1rem; }
.ip-profile-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
}
.ip-profile-stat strong {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ip-ink);
  letter-spacing: -0.01em;
}
.ip-up { font-size: 0.875rem; font-weight: 500; color: var(--ip-green); white-space: nowrap; }

/* Meters: each bar reads its width (--w) and colour (--c) from the markup */
.ip-meter + .ip-meter { margin-top: 0.5rem; }
.ip-meter-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
}
.ip-meter-row span:first-child { font-weight: 600; color: var(--ip-ink); }
.ip-bar {
  height: 0.3125rem;
  margin-top: 0.25rem;
  border-radius: 999px;
  background: #EEF1F8;
  overflow: hidden;
}
.ip-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  border-radius: inherit;
  background: var(--c);
}

.ip-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.875rem;
  font-size: 0.75rem;
  color: var(--ip-text);
}
.ip-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.ip-legend-swatch {
  width: 0.625rem;
  height: 0.375rem;
  border-radius: 999px;
  background: #EDF0F7;
}
.ip-legend-swatch--used { background: var(--ip-chart-blue); }

.ip-tagline {
  margin-top: 3rem;
  text-align: center;
  color: var(--ip-ink);
}

@media (min-width: 640px) {
  .ip-profile-title { letter-spacing: 0.1em; }
  .ip-profile-head { padding-inline: 1.5rem; }
  .ip-profile-body { padding: 0.75rem 1.5rem 1.125rem; }
  .ip-profile-stat strong { font-size: 2.25rem; }
}

/* Wide desktop: text left, photo right with the card overhanging its
   lower-left corner — exact design geometry (photo 540×650, card 400×266
   placed 78px left of the photo and 335px from its top). */
@media (min-width: 1200px) {
  .ip-hero { padding-top: 4.25rem; padding-bottom: 1.625rem; }

  .ip-hero-grid {
    grid-template-columns: minmax(0, 30rem) 38.625rem;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }

  /* design sits the text block slightly below the photo's centre */
  .ip-hero-content { padding-top: 3.875rem; }

  .ip-hero-visual { padding-left: 4.875rem; }

  .ip-hero-photo {
    width: 33.75rem;
    aspect-ratio: 540 / 650;
  }
  .ip-hero-photo img { object-position: center; }

  .ip-profile-card {
    position: absolute;
    left: 0;
    top: 20.9375rem;
    width: 25rem;
    max-width: none;
    min-height: 16.625rem;
    margin: 0;
    /* Here the card sits on top of the photo, so it stays opaque and only
       glides a short way into place. */
    --ip-card-shift: -1.25rem;
    --ip-card-fade: 1;
  }

  .ip-tagline { margin-top: 4.25rem; }
}

/* =========================================================
   FEATURE LIST + BANNER ("The problem")
   ========================================================= */
.ip-problem-grid {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.5rem;
}

.ip-feature {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ip-feature > div { max-width: 24.5rem; }
.ip-feature-icon { flex-shrink: 0; }
.ip-feature-icon img { width: 2rem; height: 2rem; } /* 32px */
.ip-feature h3 { margin-bottom: 0.25rem; }

.ip-banner {
  margin-top: 3rem;
  border-top: 2px solid var(--ip-accent);
  border-radius: 0 0 var(--ip-radius) var(--ip-radius);
  background: var(--ip-tint);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}
.ip-banner h3 { margin-bottom: 0.25rem; }

@media (min-width: 768px) {
  .ip-problem-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem 2rem;
  }
  .ip-feature { gap: 1.5rem; }
  .ip-feature-icon { width: 4rem; height: 4rem; }

  .ip-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
  .ip-banner .btn { flex-shrink: 0; }
}
@media (min-width: 1025px) {
  .ip-problem-grid { margin-top: 3.5rem; column-gap: 0; }
  .ip-feature { padding-right: 1.5rem; }
  .ip-banner { margin-top: 4.25rem; }
}

/* =========================================================
   DARK SPLIT + APP PANEL ("The solution")
   ========================================================= */
.ip-solution {
  background: #050510 url('../img/features-bg.webp') center / cover no-repeat;
  color: var(--white);
  padding-block: 4rem;
}

.ip-solution-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.ip-solution-content { max-width: 28rem; }
.ip-solution-content .ip-copy { max-width: 26.5rem; }
.ip-solution-content .btn { margin-top: 2.5rem; }

/* App panel mock */
.ip-panel {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-md);
  background: rgba(8, 8, 26, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ip-panel-inner { padding: 1.5rem 1rem 1.25rem; }

.ip-panel-head,
.ip-panel-group { border-bottom: 1px solid rgba(255, 255, 255, .14); }

.ip-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
}
.ip-panel-app { font-size: 1.125rem; font-weight: 600; line-height: 1.3; color: var(--white); }
.ip-panel-meta { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.ip-panel-close { flex-shrink: 0; margin-top: 0.375rem; color: rgba(255, 255, 255, .8); }

.ip-panel-group { padding: 1rem 0 1.5rem; }
.ip-panel-group:last-child { border-bottom: 0; padding-bottom: 0; }

.ip-panel-label,
.ip-panel-add {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.ip-panel-label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}
.ip-panel-add {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}
.ip-info { color: rgba(255, 255, 255, .8); flex-shrink: 0; }

.ip-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.ip-seg + .ip-panel-row { margin-top: 1.875rem; }

.ip-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.875rem;
}
.ip-seg span {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 0.75rem;
  border-radius: 0.4rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, .85);
}
.ip-seg span.is-active { background: rgba(255, 255, 255, .13); color: var(--white); }

.ip-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 1.875rem;
  margin-top: 1.25rem;
  padding: 0 0.75rem;
  border-radius: var(--ip-radius-xs);
  background: rgba(255, 255, 255, .15);
  font-size: 0.875rem;
  color: var(--white);
}
.ip-select svg { color: rgba(255, 255, 255, .85); flex-shrink: 0; }

.ip-toggle {
  position: relative;
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .25);
}
.ip-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--white);
  transform: translateY(-50%);
}
.ip-toggle.is-on { background: var(--ip-blue); }
.ip-toggle.is-on::after { left: auto; right: 0.1875rem; }

@media (min-width: 640px) {
  .ip-panel-inner { padding: 2rem 1.25rem 1.25rem; }
}
@media (min-width: 768px) {
  .ip-solution { padding-block: 5.5rem; }
}
@media (min-width: 1025px) {
  .ip-solution { padding-block: 7rem; }
  .ip-solution-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 33.75rem);
    gap: 3.75rem;
  }
}

/* =========================================================
   CARD FLOW + TAGS ("The impact")
   ========================================================= */
.ip-impact-flow { margin-top: 2.5rem; }

.ip-impact-grid {
  display: grid;
  gap: 1rem;
}
.ip-impact-card {
  position: relative;
  padding: 1.5rem;
}
.ip-impact-icon { margin-bottom: 1.5rem; }
.ip-impact-icon img { width: 1.5rem; height: 1.5rem; }
.ip-impact-card h3 { margin-bottom: 0.75rem; }

/* Connector curves only exist on the 4-across desktop layout */
.ip-impact-links { display: none; }

.ip-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
.ip-tags li {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 1.5rem;
  border-radius: var(--ip-radius);
  background: var(--ip-tint);
  font-size: 0.875rem;
  color: var(--ip-ink);
}

@media (min-width: 640px) {
  .ip-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1025px) {
  .ip-impact-flow { margin-top: 3.75rem; }
  .ip-impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.875rem; }
  .ip-impact-card { padding: 2rem 1rem 1.5rem 1.5rem; }
  .ip-impact-icon { margin-bottom: 3.75rem; }

  /* Horizontal links between neighbouring cards and between tags */
  .ip-impact-card + .ip-impact-card::before,
  .ip-tags li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    height: 1px;
    background: var(--ip-hairline);
  }
  .ip-impact-card + .ip-impact-card::before { width: 1.875rem; margin-right: 1px; }
  .ip-tags li + li::before { width: 1.6875rem; }

  .ip-impact-links {
    display: block;
    width: 100%;
    height: 3.875rem;
    overflow: visible;
  }
  .ip-impact-links path {
    fill: none;
    stroke: #DCDCE2;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .ip-tags { margin-top: 0; gap: 1.6875rem; }
}

/* =========================================================
   MEDIA + ACCORDION ("Benefits")
   ========================================================= */
.ip-benefits-grid {
  display: grid;
  gap: 2rem;
  grid-template-areas:
    "head"
    "media"
    "list";
}
.ip-benefits-head { grid-area: head; }
.ip-benefits-head .btn { margin-top: 0.75rem; }

.ip-benefits-media {
  grid-area: media;
  aspect-ratio: 4 / 3;
}
.ip-benefits-media img { object-position: center 35%; }

/* Accordion — any number per page; inner.js keeps one item open */
.ip-accordion { grid-area: list; }

.ip-acc-item {
  position: relative;
  border-bottom: 1px solid var(--ip-hairline);
}
.ip-acc-trigger {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  /* Closed: title vertically centred on the 48px icon (8px + 12px above) */
  padding: 1.25rem 0 1.25rem 4rem;
  background: none;
  border: 0;
  text-align: left;
  color: var(--ip-ink);
  transition: padding .3s var(--ease);
}
.ip-acc-trigger:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 2px; }
.ip-acc-icon {
  position: absolute;
  left: 0;
  top: 0.5rem;
  background: var(--ip-ink);
}
.ip-acc-icon img { width: 1.5rem; height: 1.5rem; }
.ip-acc-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}
.ip-acc-chevron {
  flex-shrink: 0;
  margin-top: 0.5rem;
  transition: transform .3s var(--ease);
}

.ip-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.ip-acc-panel > div { overflow: hidden; }
.ip-acc-panel p { padding: 0 2rem 0 4rem; }

/* Open: title moves up to the top of the icon, description follows */
.ip-acc-item.is-open .ip-acc-trigger { padding-top: 0.5rem; padding-bottom: 0.125rem; }
.ip-acc-item.is-open .ip-acc-chevron { transform: rotate(180deg); }
.ip-acc-item.is-open .ip-acc-panel { grid-template-rows: 1fr; }
.ip-acc-item.is-open .ip-acc-panel p { padding-bottom: 0.875rem; }
/* keep room for the icon even if the description is short */
.ip-acc-item.is-open { min-height: 4rem; }

@media (min-width: 640px) {
  .ip-benefits-media { aspect-ratio: 16 / 10; }
}
@media (min-width: 768px) {
  .ip-acc-trigger { padding-left: 4.5rem; gap: 1.5rem; }
  .ip-acc-panel p { padding-left: 4.5rem; }
}
@media (min-width: 1025px) {
  .ip-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "head media"
      "list media";
    column-gap: 1.875rem;
    row-gap: 2rem;
  }
  .ip-benefits-head .btn { margin-top: 1rem; }
  .ip-benefits-media { aspect-ratio: 540 / 850; }
  .ip-accordion { align-self: end; }
}

/* =========================================================
   CARD PAIR ("Differentiation": light card + dark quote card)
   ========================================================= */
.ip-diff-grid {
  display: grid;
  gap: 1.25rem;
}

.ip-diff-card {
  display: grid;
  gap: 1.5rem;
  padding: 1.5rem;
}
.ip-diff-text .eyebrow { margin-bottom: 0.5rem; }
.ip-diff-media {
  border-radius: var(--ip-radius-sm);
  aspect-ratio: 4 / 3;
}
.ip-diff-media img { object-position: center 30%; }

.ip-quote-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 1.5rem 5.5rem;
  border-radius: var(--ip-radius);
  background: var(--ip-ink);
  color: var(--white);
}
.ip-quote-card .ip-card-title { color: var(--white); max-width: 15rem; }
.ip-quote-card .ip-copy { max-width: 17.75rem; }
.ip-quote-card .btn { margin-top: 2rem; }
.ip-quote-mark {
  position: absolute;
  right: 1.5rem;
  bottom: 2rem;
  height: 2.625rem;
}
.ip-quote-mark img { display: block; width: auto; height: 100%; }

@media (min-width: 768px) {
  .ip-diff-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20.3125rem);
    align-items: center;
  }
  .ip-diff-media { aspect-ratio: 325 / 502; }
}
@media (min-width: 1025px) {
  .ip-diff-grid {
    grid-template-columns: minmax(0, 1fr) 23.75rem;
    gap: 1.875rem;
  }
  .ip-quote-card { padding-top: 3.5rem; }
}

/* =========================================================
   FINAL CTA — extra note line under the shared CTA button
   ========================================================= */
.ip-cta-note {
  margin-top: 1.75rem;
  color: var(--white);
}

/* =========================================================
   HERO CARD VARIANT — "status" card (startup time + donut + list)
   Use instead of the meter card:
     <div class="ip-profile-card ip-profile-card--status"> … </div>
   It keeps the profile card's position, shadow and slide-in; only
   the inside differs. Donut segments and list bars read their
   colour from --c in the markup (same idea as .ip-bar).
   ========================================================= */
.ip-profile-card--status { padding: 0 1.25rem; }

.ip-status-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0 1.75rem;
  border-bottom: 1px solid #EDEDED;
}
.ip-status-label {
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ip-text);
}
.ip-status-value {
  margin-top: 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ip-ink);
}
.ip-down {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  color: #E14141;
}

.ip-donut {
  flex-shrink: 0;
  width: 3.75rem;
  height: 3.75rem;
  margin-top: 0.375rem;
}
.ip-donut circle { fill: none; stroke-width: 12; }
.ip-donut-track { stroke: #F1F2F7; }
.ip-donut-seg { stroke: var(--c); }

.ip-status-list {
  display: grid;
  gap: 0.1875rem;
  padding: 0.75rem 0 1.5rem;
}
.ip-status-list li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-left: 0.9375rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.ip-status-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 1rem;
  border-radius: 999px;
  background: var(--c);
  transform: translateY(-50%);
}
.ip-status-list span { font-style: italic; text-transform: uppercase; color: var(--ip-text); }
.ip-status-list strong { font-weight: 500; color: var(--ip-ink); white-space: nowrap; }

@media (min-width: 640px) {
  .ip-profile-card--status { padding-inline: 1.5rem; }
  .ip-status-value { font-size: 1.75rem; }
  .ip-donut { width: 4.375rem; height: 4.375rem; margin-top: 0.375rem; }
}
/* Wide desktop: same overhang as the meter card, placed per this card's design */
@media (min-width: 1200px) {
  .ip-profile-card--status {
    top: 22.9375rem;
    min-height: 14.625rem;
  }
}

/* =========================================================
   HERO CARD VARIANT — "rings" status card (big stat + 3 progress rings)
   Add to a status card:
     <div class="ip-profile-card ip-profile-card--status ip-profile-card--rings">
   Swaps the donut for .ip-rings (three concentric arcs; each arc's
   colour comes from --c and its length from stroke-dasharray, out of
   pathLength 100). Position, shadow and slide-in stay the same.
   ========================================================= */
.ip-profile-card--rings .ip-status-head {
  align-items: center;
  padding: 1.125rem 0 0.875rem;
}
.ip-profile-card--rings .ip-status-label { letter-spacing: 0; }
.ip-profile-card--rings .ip-status-value { margin-top: 0.125rem; font-size: 1.75rem; line-height: 1.1; }
.ip-profile-card--rings .ip-down {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: italic;
  text-transform: uppercase;
}

.ip-rings {
  flex-shrink: 0;
  width: 5rem;
  height: 5rem;
}
.ip-rings circle { fill: none; stroke-width: 7; }
.ip-rings-track { stroke: #F3F4F6; }
.ip-rings-arc { stroke: var(--c); }

.ip-profile-card--rings .ip-status-list {
  gap: 0.3125rem;
  padding: 0.75rem 0 0.75rem;
}
.ip-profile-card--rings .ip-status-list li { padding-left: 0.75rem; }
.ip-profile-card--rings .ip-status-list li::before { height: 0.875rem; }
.ip-profile-card--rings .ip-status-list span { font-size: 0.75rem; }

@media (min-width: 640px) {
  .ip-profile-card--rings .ip-status-head { padding-top: 1.3125rem; }
  .ip-profile-card--rings .ip-status-value { font-size: 2rem; }
  .ip-rings { width: 6.25rem; height: 6.25rem; }
}

/* =========================================================
   FEATURES LANDING PAGE (features.html)
   ---------------------------------------------------------
   New blocks only — nothing above is changed. Reused as-is:
   header, .ip-hero grid, .ip-copy, .ip-actions, .ip-diff-*,
   .ip-quote-card, final CTA + footer, and the home page's
   .hero-social / .avatar-stack and .persona-card (style.css).
   ========================================================= */

/* Screen-reader-only text (e.g. icon-only links) */
.ip-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hero variant: tinted background + video ---------- */
.ip-hero--tint {
  background: var(--ip-tint);
  padding-bottom: 3rem;
}
.ip-social { margin-bottom: 1.5rem; }
.ip-social .avatar-stack img { border-radius: 50%; }
.ip-social .hero-social-label {
  font-style: italic;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ip-ink);
}

.ip-video {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--ip-radius);
  background: #C4C4C4 center / cover no-repeat;
}
.ip-video-play {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--white);
  color: #C4C4C4;
  transition: transform .25s var(--ease);
}
.ip-video-play svg { width: 45%; height: 45%; margin-left: 8%; }
/* When a video is set, inner.js makes the whole area a play button */
.ip-video-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
}
.ip-video-btn:hover .ip-video-play,
.ip-video-btn:focus-visible .ip-video-play { transform: scale(1.06); }
.ip-video-btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: -4px; }
.ip-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }

@media (min-width: 640px) {
  .ip-video-play { width: 4.625rem; height: 4.625rem; }
}
@media (min-width: 1200px) {
  .ip-hero--tint { padding-block: 6.25rem; }
  .ip-hero--video .ip-hero-grid { grid-template-columns: minmax(0, 33rem) 38.625rem; }
  .ip-hero--video .ip-hero-content { padding: 0 0 1.375rem; }
  .ip-hero--video .ip-social { margin-bottom: 2rem; }
  .ip-hero--video .ip-copy { max-width: 30.5rem; }
  .ip-hero--video .ip-hero-visual { padding-left: 4.875rem; }
  .ip-video { width: 33.75rem; aspect-ratio: 540 / 650; }
}

/* ---------- Arrow checklist (light + dark variants) ---------- */
.ip-arrow-list { margin-top: 1.125rem; }
.ip-arrow-list li {
  position: relative;
  padding: 0.4375rem 0 0.4375rem 1.5rem;
  border-bottom: 1px solid var(--ip-hairline);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-arrow-list li::before {
  content: "";
  position: absolute;
  left: 0.125rem;
  top: 0.71875rem; /* centred on the first line, also when an item wraps */
  width: 0.75rem;
  height: 0.75rem;
  background: url('../img/features-list-arrow.svg') center / contain no-repeat;
}
.ip-arrow-list--light li {
  border-bottom-color: rgba(255, 255, 255, .2);
  color: rgba(255, 255, 255, .85);
}
.ip-arrow-list--light li::before { background-image: url('../img/features-list-arrow-w.svg'); }

/* ---------- Feature rows: text + illustration, alternating ---------- */
.ip-features-list { padding-bottom: var(--ip-gap); }

.ip-feature-row {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.ip-feature-row + .ip-feature-row { margin-top: var(--ip-gap); }

.ip-feature-row-text { max-width: 36rem; }
.ip-feature-row-text .section-title { margin-bottom: 0.875rem; }
.ip-feature-note {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-feature-row .btn { margin-top: 2.5rem; padding-inline: 2rem; }

.ip-feature-row-media {
  width: 100%;
  max-width: 33.75rem;
  overflow: hidden;
  border-radius: var(--ip-radius);
  aspect-ratio: 540 / 650;
  /* shared gradient backdrop; each illustration is a transparent layer on top */
  background: #000 url('../img/features-media-bg.webp') center / 100% 100% no-repeat;
  /* SVG animation sits centred both ways, 40px in from the left/right edges */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 2.5rem;
}
.ip-feature-row-media img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* Tablets: text and illustration side by side */
@media (min-width: 768px) {
  .ip-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-feature-row--reverse .ip-feature-row-media { order: -1; }
}
@media (min-width: 1025px) {
  .ip-features-list { padding-top: 8.4375rem; }
  .ip-feature-row {
    grid-template-columns: minmax(0, 29.5rem) 33.75rem;
    justify-content: space-between;
    gap: 3rem;
  }
  .ip-feature-row--reverse { grid-template-columns: 33.75rem minmax(0, 29.5rem); }
  .ip-feature-row--reverse .ip-feature-row-media { order: -1; }
}

/* ---------- Dark benefits: glass cards + heading ---------- */
.ip-dark-benefits {
  background: #05082B url('../img/pricing-bg.webp') center center / cover no-repeat;
  color: var(--white);
  padding-block: 4rem;
}
.ip-dark-benefits-grid {
  display: grid;
  gap: 2.5rem;
}
.ip-dark-benefits-head .btn { margin-top: 0.75rem; }

.ip-glass-list {
  display: grid;
  gap: 1.25rem;
}
.ip-glass-card {
  padding: 1.5rem 1.5rem 1.5rem;
  border: 1px solid #FFFFFF3D;
  border-radius: var(--ip-radius);
  background: #FFFFFF1F;
  box-shadow: 0 0.125rem 0.875rem 0 #FFFFFF26 inset;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ip-glass-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.25rem;
  background: var(--white);
}
.ip-glass-icon img { width: 1.75rem; height: 1.75rem; }
.ip-glass-card h3 {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}
.ip-glass-card p {
  max-width: 23.5rem;
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}

@media (min-width: 768px) {
  .ip-dark-benefits { padding-block: 6rem; }
  .ip-glass-card { padding: 2rem 2rem 1.625rem; min-height: 17rem; }
  .ip-glass-card h3 { margin-top: 4.25rem; }
  .ip-glass-list { gap: 1.875rem; }
}
@media (min-width: 1025px) {
  .ip-dark-benefits { padding-block: var(--ip-gap); }
  .ip-dark-benefits-grid {
    grid-template-columns: 33.75rem minmax(0, 28rem);
    justify-content: space-between;
    align-items: start;
    gap: 3rem;
  }
  .ip-glass-list { order: -1; }
  /* Heading stays pinned 160px from the top while the cards scroll, until the
     list ends. The cards pin at the same line, so they line up with it. */
  .ip-dark-benefits-grid { --ip-stack-top: 10rem; }
  .ip-dark-benefits-head {
    position: sticky;
    top: var(--ip-stack-top);
  }
  /* Stacking cards: every card pins level with the heading, so each next card
     slides up and fully covers the one before it (inner.js initStackCards
     dims the covered card). The white tint sits on the section colour so
     cards are solid. */
  .ip-dark-benefits .ip-glass-card {
    position: sticky;
    top: var(--ip-stack-top);
    background: linear-gradient(#FFFFFF1F, #FFFFFF1F), #05082B;
    will-change: filter;
  }
  /* Keep the finished stack (and the heading) in place for 100px of scroll
     before it moves on; the section's bottom padding gives that space back,
     so the overall spacing is unchanged */
  .ip-dark-benefits .ip-glass-list::after { content: ""; height: 4.375rem; } /* + 1.875rem gap = 100px */
  .ip-dark-benefits { padding-bottom: calc(var(--ip-gap) - 6.25rem); }
}

/* ---------- Who it's for: full-bleed persona cards ---------- */
.ip-users-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.ip-users-head .section-title { margin-bottom: 0; }

/* Phones/tablets: a swipeable row of cards; desktop: four across, edge to edge */
.ip-users-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 20rem);
  gap: 1rem;
  margin-top: 2.5rem;
  padding-inline: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ip-users-track::-webkit-scrollbar { display: none; }
.ip-user-card.persona-card {
  aspect-ratio: 380 / 549;
  scroll-snap-align: start;
}
/* Touch screens can't hover, so always show the description there */
@media (hover: none) {
  .ip-user-card .persona-desc { max-height: 8rem; opacity: 1; margin-top: 0.5rem; margin-bottom: 0.75rem; }
}

@media (min-width: 640px) {
  .ip-users-track { padding-inline: 2rem; scroll-padding-inline: 2rem; grid-auto-columns: min(45%, 22rem); gap: 1.25rem; }
}
/* Desktop: same as the home page personas — heading + cards pin while you
   scroll and the row slides sideways through all six cards (inner.js) */
.ip-users-pin { position: relative; }
@media (min-width: 1025px) {
  .ip-users-sticky { position: sticky; }
  .ip-users-viewport { overflow: hidden; margin-top: 3.75rem; }
  .ip-users-track {
    display: flex;
    gap: 1.875rem;
    margin-top: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .ip-users-track > .ip-user-card { flex: 0 0 calc((100% - 3 * 1.875rem) / 4); }
  .ip-users-track.is-pinned { will-change: transform; }
}

/* ---------- Quote card: room for the checklist ---------- */
.ip-quote-card .ip-arrow-list { width: 100%; max-width: 17.75rem; margin-top: 1rem; }

/* =========================================================
   CONTACT PAGE (contact.html)
   ---------------------------------------------------------
   New blocks only — nothing above is changed. Reused as-is:
   header, .ip-hero--tint, .ip-head--center + shared .eyebrow /
   .section-title / .section-sub, .ip-section, final CTA + footer.
   The form itself (fields + button) comes from Contact Form 7 and
   is dropped into .ip-contact-form.
   ========================================================= */

/* ---------- Hero: tinted band, centred heading ---------- */
.ip-hero--contact { padding-block: 3rem; }
.ip-hero--contact .eyebrow { margin-bottom: 0.3125rem; }
.ip-hero--contact .section-title { margin-bottom: 0.5rem; }
.ip-hero--contact .section-sub { max-width: 40rem; }

/* ---------- Form card + quick answers ---------- */
.ip-contact { padding-bottom: var(--ip-gap); }

.ip-contact-grid {
  display: grid;
  gap: 3rem;
}

.ip-contact-card {
  background: var(--white);
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  padding: 1.5rem;
}
.ip-contact-title {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
}
.ip-contact-intro {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
/* Contact Form 7 output lands here */
.ip-contact-form { margin-top: 2.25rem; }
.ip-contact-form:empty { margin-top: 0; }
.ip-contact-note {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-contact-note a { color: var(--ip-blue); }
.ip-contact-note a:hover { text-decoration: underline; }

.ip-contact-faq-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
}
.ip-faq-item { padding-block: 1.6875rem 1.125rem; }
.ip-faq-item + .ip-faq-item { border-top: 1px solid var(--ip-hairline); padding-top: 1.125rem; }
.ip-faq-item:last-child { padding-bottom: 0; }
.ip-faq-item h3 {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ip-ink);
}
.ip-faq-item p {
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}

@media (min-width: 768px) {
  .ip-contact-card { padding: 2rem; }
}
@media (min-width: 1025px) {
  .ip-hero--contact { padding-block: 4.25rem; }
  .ip-contact { padding-top: 5rem; padding-bottom: 5.875rem; }
  .ip-contact-grid {
    grid-template-columns: minmax(0, 39.625rem) minmax(0, 26.625rem);
    justify-content: space-between;
    align-items: start;
    max-width: 73.375rem;
  }
}

/* =========================================================
   PRIVACY POLICY PAGE (privacy-policy.html)
   ---------------------------------------------------------
   New blocks only — nothing above is changed. Reused as-is:
   header, the contact page's tinted centred hero
   (.ip-hero--tint .ip-hero--contact), .ip-section, final CTA +
   footer. .ip-legal-* also suits any other long text page
   (terms, cookies …).
   ========================================================= */

/* Two-line hero title needs a little more line spacing */
.ip-hero--legal .eyebrow { margin-bottom: 0.1875rem; }
.ip-hero--legal .section-title { line-height: 1.4; margin-bottom: 0.4375rem; }

.ip-legal { padding-bottom: var(--ip-gap); }
.ip-legal-body { max-width: 73.375rem; }

.ip-legal-block + .ip-legal-block { margin-top: 3.1875rem; }
.ip-legal-block h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
  margin-bottom: 0.875rem;
}
.ip-legal-block h3 {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ip-ink);
}
.ip-legal-block p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-legal-block p + p,
.ip-legal-block p + .ip-legal-list,
.ip-legal-block .ip-legal-list + p { margin-top: 0.8125rem; }
.ip-legal-block a { color: inherit; }
.ip-legal-block a:hover { color: var(--ip-blue); }

/* Bullet list: dot + text on one line, wrapped lines run to the left edge */
.ip-legal-list li {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ip-ink);
}
.ip-legal-list li::before { content: "\2022\00a0"; }

.ip-legal-block .ip-legal-contact {
  margin-top: 0.8125rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ip-ink);
}

/* Closing call-out */
.ip-legal-cta {
  margin-top: 3rem;
  padding: 2.5rem 1.5rem 2.75rem;
  border-radius: 1rem;
  background: var(--ip-tint);
  text-align: center;
}
.ip-legal-cta h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ip-ink);
}
.ip-legal-cta .btn {
  margin-top: 1rem;
  min-width: 13.0625rem;
  background: var(--ip-chart-blue);
}

@media (min-width: 1025px) {
  .ip-hero--legal { padding-bottom: 4.125rem; }
  .ip-legal { padding-top: 4.5rem; padding-bottom: 7.3125rem; }
  .ip-legal-cta { margin-top: 3.6875rem; padding: 2.75rem 1.5rem 3rem; }
}

/* =========================================================
   FAQS PAGE (faqs.html)
   ---------------------------------------------------------
   New blocks only — nothing above is changed. Reused as-is:
   header, the tinted centred hero (.ip-hero--contact /
   .ip-hero--legal), .ip-legal section spacing + .ip-legal-cta
   box, the accordion markup + inner.js behaviour, final CTA +
   footer. .ip-accordion--faq only restyles the accordion as
   plain question rows (no icon tile).
   ========================================================= */

.ip-hero--faq .section-sub { max-width: 43.75rem; }

/* Groups of questions under a small heading */
.ip-accordion--faq { grid-area: auto; }
.ip-faq-group + .ip-faq-group { margin-top: 3.5rem; }
.ip-faq-group-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
}

.ip-accordion--faq .ip-acc-item { border-bottom-color: #E8E8E8; }
.ip-accordion--faq .ip-acc-trigger,
.ip-accordion--faq .ip-acc-item.is-open .ip-acc-trigger {
  align-items: center;
  padding: 1.5rem 0 1.25rem;
}
.ip-accordion--faq .ip-acc-item.is-open .ip-acc-trigger { padding-bottom: 0.5rem; }
.ip-accordion--faq .ip-acc-item:first-of-type .ip-acc-trigger { padding-top: 1.25rem; }
.ip-accordion--faq .ip-acc-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}
.ip-accordion--faq .ip-acc-chevron {
  width: 0.75rem;
  height: auto;
  margin: 0 0.375rem 0 0;
}
.ip-accordion--faq .ip-acc-panel p { padding: 0; }
.ip-accordion--faq .ip-acc-item.is-open .ip-acc-panel p { padding-bottom: 1.125rem; }
.ip-accordion--faq .ip-acc-item.is-open { min-height: 0; }
.ip-accordion--faq .ip-acc-panel a { color: var(--ip-blue); }
.ip-accordion--faq .ip-acc-panel a:hover { text-decoration: underline; }

/* Closing box: heading + line + button */
.ip-legal-cta--faq p {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-legal-cta--faq .btn { min-width: 10.3125rem; margin-top: 1.125rem; }

@media (min-width: 768px) {
  .ip-accordion--faq .ip-acc-trigger { padding-left: 0; }
  .ip-accordion--faq .ip-acc-panel p { padding-left: 0; }
  .ip-accordion--faq .ip-acc-title { font-size: 1.125rem; }
}
@media (min-width: 1025px) {
  .ip-accordion--faq .ip-acc-trigger,
  .ip-accordion--faq .ip-acc-item.is-open .ip-acc-trigger { padding: 2.375rem 0 1.5rem; }
  .ip-accordion--faq .ip-acc-item.is-open .ip-acc-trigger { padding-bottom: 0.625rem; }
  .ip-accordion--faq .ip-acc-item:first-of-type .ip-acc-trigger { padding-top: 2.0625rem; }
  .ip-legal-cta--faq { margin-top: 4rem; }
}

/* =========================================================
   BLOG PAGE (blog.html)
   ---------------------------------------------------------
   New blocks only — nothing above is changed. Reused as-is:
   header, the contact page's tinted centred hero
   (.ip-hero--contact), .ip-section, the shared buttons and
   .text-link / .ip-text-link arrow link, final CTA + footer.
   ========================================================= */

.ip-hero--blog .section-sub { max-width: 43.75rem; }

.ip-blog { padding-bottom: var(--ip-gap); }
.ip-blog-body { max-width: 73.375rem; }

/* ---------- Search ---------- */
.ip-blog-search-label {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ip-ink);
  margin-bottom: 1.125rem;
}
.ip-blog-search-row {
  display: flex;
  gap: 0.75rem;
}
.ip-blog-search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}
.ip-blog-search-field svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ip-ink);
  pointer-events: none;
}
.ip-blog-search-field input {
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem 0 2.75rem;
  border: 1px solid #CCCCCC;
  border-radius: var(--ip-radius);
  background: var(--white);
  font: inherit;
  font-size: 0.875rem;
  color: var(--ip-ink);
}
.ip-blog-search-field input::placeholder { color: #666666; }
.ip-blog-search-field input:focus { outline: none; border-color: var(--ip-blue); box-shadow: 0 0 0 3px rgba(46, 114, 220, .15); }
.ip-blog-search .btn {
  flex-shrink: 0;
  min-width: 5.5rem;
  background: var(--ip-blue);
}

/* ---------- Post cards ---------- */
.ip-post-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
.ip-post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  overflow: hidden;
  background: var(--white);
}
.ip-post-card[hidden] { display: none; }
.ip-post-img {
  width: 100%;
  aspect-ratio: 7 / 5;
  object-fit: cover;
}
.ip-post-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.625rem 1.5rem 1.875rem;
}
.ip-post-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ip-ink);
}
.ip-post-title a { color: inherit; }
/* whole card is clickable through the title link */
.ip-post-card { position: relative; }
.ip-post-title a::after { content: ""; position: absolute; inset: 0; }
.ip-post-title a:focus-visible { outline: none; }
.ip-post-card:has(.ip-post-title a:focus-visible) { box-shadow: 0 0 0 2px var(--blue-light); }
.ip-post-card:hover .ip-post-title { color: var(--ip-blue); }
.ip-post-body p {
  margin-top: 0.5625rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-post-link.ip-text-link {
  margin-top: auto;
  padding-top: 1.125rem;
  font-weight: 400;
  gap: 1rem;
  align-self: flex-start;
}

.ip-blog-empty {
  margin-top: 2rem;
  font-size: 0.875rem;
  color: var(--ip-text);
}

/* ---------- Pagination ---------- */
.ip-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
}
.ip-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.5rem;
  border: 1px solid var(--ip-line);
  border-radius: var(--ip-radius);
  background: var(--white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ip-ink);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
a.ip-page:hover { border-color: var(--ip-ink); }
.ip-page.is-current {
  background: var(--ip-ink);
  border-color: var(--ip-ink);
  color: var(--white);
}
.ip-page.is-disabled { color: #B4B5C0; }

@media (min-width: 640px) {
  .ip-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .ip-blog { padding-top: 4.5625rem; padding-bottom: 5rem; }
  .ip-blog-search-row { gap: 1rem; }
  .ip-blog-search-field svg { left: 1.5625rem; }
  .ip-blog-search-field input { padding-left: 3.5rem; }
  .ip-blog-search .btn { min-width: 8.8125rem; }
  .ip-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.875rem;
    margin-top: 3rem;
  }
  .ip-post-body { padding-right: 2.625rem; }
  .ip-pagination { margin-top: 3.75rem; }
}

/* =========================================================
   BLOG DETAIL PAGE (blog-detail.html)
   ---------------------------------------------------------
   New blocks only — nothing above is changed. Reused as-is:
   header, the inner tint colour, final CTA + footer.
   .ip-article-content styles the post body WordPress outputs
   (the_content): paragraphs, headings, lists, images, quotes.
   ========================================================= */

.ip-article-wrap { max-width: 73.375rem; }

/* ---------- Post header ---------- */
.ip-article-head {
  background: var(--ip-tint);
  padding-block: 2.5rem 3rem;
}
.ip-article-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--ip-radius);
  aspect-ratio: 1110 / 557;
}
.ip-article-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ip-article-date {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-article-title {
  margin-top: 0.5rem;
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ip-ink);
}
.ip-article-cat {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-ink);
}
.ip-article-cat:hover { color: var(--ip-blue); }

/* ---------- Post body ---------- */
.ip-article-body { padding-block: 2.5rem var(--ip-gap); }

.ip-article-content > :first-child { margin-top: 0; }
.ip-article-content p,
.ip-article-content li {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ip-text);
}
.ip-article-content p { margin-top: 0.8125rem; }
.ip-article-content h2 {
  margin-top: 3.5rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ip-ink);
}
.ip-article-content h3 {
  margin-top: 1.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ip-ink);
}
.ip-article-content h2 + p { margin-top: 0.6875rem; }
.ip-article-content h3 + p { margin-top: 0.25rem; }
.ip-article-content ul,
.ip-article-content ol {
  margin-top: 0.8125rem;
  padding-left: 1.25rem;
}
.ip-article-content ul { list-style: disc; }
.ip-article-content ol { list-style: decimal; }
.ip-article-content li + li { margin-top: 0.25rem; }
.ip-article-content a { color: var(--ip-blue); }
.ip-article-content a:hover { text-decoration: underline; }
.ip-article-content strong { font-weight: 600; color: var(--ip-ink); }
.ip-article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--ip-radius);
}
.ip-article-content figure,
.ip-article-content .wp-block-image { margin: 1.75rem 0 0; }
.ip-article-content figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--ip-text);
}
.ip-article-content blockquote {
  margin: 1.5rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--ip-blue);
  background: var(--ip-tint);
  border-radius: 0 var(--ip-radius) var(--ip-radius) 0;
}
.ip-article-content blockquote p:first-child { margin-top: 0; }

@media (min-width: 1025px) {
  .ip-article-head { padding-block: 4.5rem 4.0625rem; }
  .ip-article-date { margin-top: 1.6875rem; }
  .ip-article-title { margin-top: 0.0625rem; }
  .ip-article-cat { margin-top: 0.25rem; }
  .ip-article-body { padding-block: 2.75rem 4.75rem; }
  .ip-article-content h2 { margin-top: 4.8125rem; }
}