/* ==========================================================================
   Preston benefits page (Preston system)

   Components for page-templates/preston-benefits.php — the page that replaced
   the legacy "Meet Preston" / /our-technology/ Gutenberg page.

   Hand-written; depends on ir-tokens.css. No build step, deploys by upload.
   Same precedent as lp-chrome.css and ir-pricing.css.

   The page it replaced was built from legacy blocks (heading-section,
   text-image-or-card, testimonials_slider) styled from assets/scss/ in the
   frozen palette. Rebuilt here against the Preston tokens rather than
   extended — DESIGN-SYSTEM.md §4d "Reuse or build new?", failing tests 1
   and 2: legacy-styled, and database-driven where this needs to be
   file-deployable.

   Everything is scoped under .ir-benefits, so no rule leaks out and legacy
   selectors on bare elements do not reach in.

   Reference: DESIGN-SYSTEM.md
   ========================================================================== */

.ir-benefits {
  font-family: var(--ir-font);
  color: var(--ir-ink);
  background: var(--ir-white);
}

.ir-benefits *,
.ir-benefits *::before,
.ir-benefits *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Scoped reset — REQUIRED, not defensive politeness.

   The theme styles bare elements globally and those rules reach inside any
   markup using them. A class selector outranks them, but only for properties
   it actually declares; anything left undeclared inherits the legacy value.

     header { position: fixed }             critical CSS in header.php
     h1-h6  { font-family: "primary-bold" } main.css:251  — declaring
              font-weight:600 without font-family renders the bold file
     ul li::before { content: "" ; background: #7DF4DC; position: absolute }
              main.css:571 — injects the frozen mint dot into every <li>.
              `content: none` is the only thing that removes it; overriding
              only the colour leaves the absolute positioning behind and the
              marker escapes the item.

   `section` is deliberately NOT in this list: at 0,1,1 it would outrank
   every section skin below (.ir-benefits__hero, .ir-proof, .ir-cta — all
   0,1,0) and flatten them to plain white. Same trap documented in
   ir-pricing.css.
   -------------------------------------------------------------------------- */
.ir-benefits header,
.ir-benefits footer {
  position: static;
  inset: auto;
  background: none;
  color: inherit;
  z-index: auto;
  transition: none;
}

.ir-benefits h1,
.ir-benefits h2,
.ir-benefits h3 {
  font-family: var(--ir-font);
  font-weight: 600;
  text-transform: none;
}

.ir-benefits ul { margin: 0; padding: 0; list-style: none; }
.ir-benefits li { margin: 0; padding-left: 0; list-style: none; }
.ir-benefits li::before { content: none; }
.ir-benefits a { text-decoration: none; }
.ir-benefits p { margin: 0; }
.ir-benefits img { display: block; max-width: 100%; height: auto; }

/* The theme does not define this, and WordPress does not add it. */
.ir-benefits .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ir-benefits__wrap {
  max-width: var(--ir-wrap);
  margin: 0 auto;
}

/* Shared section furniture ------------------------------------------------- */
.ir-benefits__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ir-brand);
}
.ir-benefits__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ir-brand);
}

.ir-benefits__h2 {
  margin: 0;
  font-size: clamp(28px, 3.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ir-ink);
  text-wrap: balance;
}

.ir-benefits__sub {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ir-text);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ir-benefits__hero {
  padding: 80px var(--ir-gutter) 56px;
  background: linear-gradient(180deg, var(--ir-wash) 0%, var(--ir-white) 100%);
}

.ir-benefits__title {
  max-width: 18ch;
  margin: 18px 0 0;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.06;
  letter-spacing: -.035em;
  color: var(--ir-ink);
  text-wrap: balance;
}

.ir-benefits__lede {
  max-width: 64ch;
  margin: 18px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--ir-text);
  text-wrap: pretty;
}

.ir-benefits__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.ir-benefits__note {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ir-muted);
}

/* --------------------------------------------------------------------------
   Benefit cards — the substance of the page.

   Each card is one outcome plus the mechanism that produces it. A benefit
   with no mechanism under it is a slogan.
   -------------------------------------------------------------------------- */
.ir-benefits__grid-section { padding: 64px var(--ir-gutter) 8px; }

.ir-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.ir-benefit {
  display: flex;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--ir-line);
  border-radius: var(--ir-radius-lg);
  background: var(--ir-white);
  box-shadow: var(--ir-shadow-card);
}

.ir-benefit__tag {
  align-self: flex-start;
  padding: 4px 10px;
  margin-bottom: 14px;
  border-radius: var(--ir-radius-pill);
  background: var(--ir-brand-tint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ir-brand);
}

.ir-benefit__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ir-ink);
}

.ir-benefit__body {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ir-text);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Before / after — what actually changes in the week.

   Two columns, not a table: these are parallel lists, not tabular data with
   row headers, so a table would announce a structure that is not there.
   -------------------------------------------------------------------------- */
.ir-shift { padding: 64px var(--ir-gutter); }

.ir-shift__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.ir-shift__col {
  padding: 28px 26px;
  border-radius: var(--ir-radius-lg);
  border: 1px solid var(--ir-line);
  background: var(--ir-white);
}
.ir-shift__col--after {
  border-color: var(--ir-line-btn);
  background: var(--ir-wash-2);
}

.ir-shift__label {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ir-faint);
}
.ir-shift__col--after .ir-shift__label { color: var(--ir-brand); }

.ir-shift__head {
  margin: 0 0 18px;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ir-ink);
}

.ir-shift__list { display: grid; gap: 12px; }

.ir-shift__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ir-text);
}

/* State carries a shape as well as a colour — never colour alone (§8). */
.ir-shift__mark {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.ir-shift__col--before .ir-shift__mark {
  background: var(--ir-wash);
  color: var(--ir-faint);
  border: 1px solid var(--ir-line);
}
.ir-shift__col--after .ir-shift__mark {
  background: var(--ir-brand);
  color: var(--ir-white);
}

/* --------------------------------------------------------------------------
   Proof band — the numbers behind the claims above.
   -------------------------------------------------------------------------- */
.ir-proof {
  padding: 64px var(--ir-gutter);
  background: var(--ir-wash-2);
  border-top: 1px solid var(--ir-line);
  border-bottom: 1px solid var(--ir-line);
}

.ir-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 32px;
}

.ir-proof__stat {
  font-size: clamp(28px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--ir-brand);
}

.ir-proof__label {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ir-text);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Deliverables — what lands in the first minute.
   -------------------------------------------------------------------------- */
.ir-deliver { padding: 64px var(--ir-gutter); }

.ir-deliver__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
}

.ir-deliver__tile {
  padding: 20px 20px 22px;
  border-radius: var(--ir-radius-md);
  background: var(--ir-wash);
  border: 1px solid var(--ir-line);
}

.ir-deliver__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ir-ink);
}

.ir-deliver__note {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ir-muted);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Buttons (light grounds)
   -------------------------------------------------------------------------- */
.ir-benefits .ir-btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: var(--ir-radius-md);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.ir-benefits .ir-btn--primary {
  background: var(--ir-brand);
  color: var(--ir-white);
  box-shadow: var(--ir-shadow-cta);
}
.ir-benefits .ir-btn--primary:hover {
  background: var(--ir-brand-hover);
  color: var(--ir-white);
}
.ir-benefits .ir-btn--secondary {
  background: var(--ir-white);
  color: var(--ir-ink);
  border-color: var(--ir-line-btn);
}
.ir-benefits .ir-btn--secondary:hover { border-color: var(--ir-brand); }

/* --------------------------------------------------------------------------
   Dark CTA band — same component as the pricing page, restated here because
   ir-pricing.css is not loaded on this template.
   -------------------------------------------------------------------------- */
.ir-benefits .ir-cta {
  padding: 80px var(--ir-gutter);
  text-align: center;
  background: var(--ir-ink);
  color: var(--ir-white);
}
.ir-benefits .ir-cta__inner { max-width: 720px; margin: 0 auto; }
.ir-benefits .ir-cta h2 {
  margin: 0;
  font-size: clamp(28px, 3.8vw, 38px);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--ir-white);
  text-wrap: balance;
}
.ir-benefits .ir-cta p {
  margin: 14px auto 0;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ir-on-dark);
  text-wrap: pretty;
}
.ir-benefits .ir-cta__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 28px;
}
.ir-benefits .ir-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: var(--ir-white);
}
.ir-benefits .ir-btn--ghost:hover {
  border-color: var(--ir-white);
  color: var(--ir-white);
}

.ir-benefits a:focus-visible {
  outline: 2px solid var(--ir-brand);
  outline-offset: 3px;
  border-radius: var(--ir-radius-sm);
}
.ir-benefits .ir-cta a:focus-visible { outline-color: var(--ir-white); }

/* --------------------------------------------------------------------------
   Responsive — the system's three breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ir-benefits__hero { padding-top: 64px; }
}

@media (max-width: 900px) {
  .ir-benefits__grid,
  .ir-deliver__grid,
  .ir-proof__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ir-benefits__hero { padding: 48px var(--ir-gutter) 40px; }
  .ir-benefits__title { max-width: none; }
  .ir-benefits__grid,
  .ir-deliver__grid,
  .ir-proof__grid,
  .ir-shift__grid { grid-template-columns: minmax(0, 1fr); }
  .ir-benefits__grid-section,
  .ir-shift,
  .ir-proof,
  .ir-deliver { padding-top: 52px; padding-bottom: 52px; }
  .ir-benefits .ir-cta { padding: 56px var(--ir-gutter); }
  .ir-benefits .ir-btn { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .ir-benefits * { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Fixed-header clearance that no longer applies.

   partials.css:522 and main.css:2023 both set
     .header-disabled main section:first-child { margin-top: 96px !important }
   as clearance for the OLD position:fixed header. The header is sticky now,
   so that is pure additive whitespace above the fold. !important is required
   because the declaration it fights is itself !important — the documented
   exception in DESIGN-SYSTEM.md §6. Same override as ir-pricing.css.
   -------------------------------------------------------------------------- */
.header-disabled main .ir-benefits .ir-benefits__hero { margin-top: 0 !important; }