/* ===========================================================
   Homepage page layer

   Layout for the homepage's own sections only. Tokens and every
   shared primitive come from assets/insight.css, which this file
   is loaded AFTER and must never override.
   =========================================================== */

.pi-skip {
  position: absolute;
  left: 0;
  top: -120px;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border-radius: 0 0 var(--radius-control) 0;
  transition: top 0.12s ease;
}
.pi-skip:focus {
  top: 0;
}

.pi-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
}

/* ---------------- hero ----------------
   Two columns: the argument, and the product. Nothing else — no
   decorative layer sits behind or on top of the screenshot. */

.home-hero {
  display: grid;
  /* Rebalanced when the H1 became a sentence rather than a three-word slogan:
     at 38fr the headline broke into five lines and the accent phrase split
     across three of them. The copy column now has to hold "Turn Perfex CRM
     into a" on one line, which sets the floor. */
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  gap: var(--space-6);
  align-items: center;
  /* The shared container, so the H1 starts on the same left edge as every
     section heading below it. A 1360px hero measure put it 56px further left
     at 1440 and above.
     The padding is added on top: .home-section is full-bleed and pads its
     edges, then centres a --container-wide child inside, so its headings land
     at (100vw - container)/2. The hero is the container, so it must carry the
     padding outside that measure to resolve to the same edge. */
  max-width: calc(var(--container) + 2 * var(--space-5));
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) var(--space-7);
}
.home-hero h1 {
  margin-bottom: var(--space-4);
}
.home-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 46ch;
}
.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.home-hero__tertiary {
  margin: var(--space-4) 0 0;
  font-size: var(--text-sm);
}
.home-hero__shot {
  min-width: 0;
}

/* ---------------- sections ---------------- */

.home-section {
  padding: var(--space-8) var(--space-5);
}
.home-section > * {
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}
.home-section--soft {
  background: var(--color-surface-soft);
  border-block: 1px solid var(--color-border);
}

.home-head {
  margin-bottom: var(--space-6);
}
.home-head h2 {
  margin-bottom: var(--space-3);
}
.home-head p {
  font-size: var(--text-lg);
  max-width: 62ch;
}

.home-note {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  /* "…separate products, listed below." was dropping "below." onto a line of
     its own. text-wrap: pretty is the minimum fix: it asks the browser to
     avoid a short last line, changes no copy and no box, and browsers without
     it simply wrap as before. */
  text-wrap: pretty;
}

.home-more {
  margin-top: var(--space-6);
}

/* ---------------- platform split ---------------- */

.home-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: var(--space-7);
  align-items: start;
}
.home-split__shot {
  position: sticky;
  top: var(--space-5);
}

.home-facts {
  margin: var(--space-5) 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.home-facts > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.home-facts dt {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
}
.home-facts dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------- ecosystem (the dark band) ----------------
   Composition and contrast do the work here, not decoration: a deep navy
   ground, hairline borders, one accent per business group. No gradient wash,
   no glow, no translucent glass — the old page used a radial blue/purple
   bloom and it dated immediately. */

.home-eco {
  padding: var(--space-9) var(--space-5);
  background: var(--color-surface-inverse);
}
.home-eco__inner {
  max-width: calc(var(--container) + 2 * var(--space-5));
  margin: 0 auto;
  padding-inline: var(--space-5);
}
.home-eco__head {
  max-width: 62ch;
  margin-bottom: var(--space-7);
}
.home-eco .pi-eyebrow {
  color: var(--color-eco-eyebrow);
}
.home-eco__lead {
  font-size: var(--text-lg);
  color: var(--color-text-inverse-muted);
}

.home-eco__group {
  margin-bottom: var(--space-6);
}
.home-eco__group-name {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-inverse-muted);
}
/* A short accent rule instead of a coloured chip: it marks the group without
   adding another pill to the page. */
.home-eco__group-name::before {
  content: "";
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--eco-accent);
  flex: none;
}
.home-eco__group-name::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-inverse);
}

/* group accents: four business areas, not thirteen brands */
.home-eco__group[data-group="finance"] {
  --eco-accent: var(--accent-finance);
  --eco-accent-soft: var(--accent-finance-soft);
  --eco-accent-fill: var(--accent-finance-fill);
  --eco-accent-line: var(--accent-finance-line);
}
.home-eco__group[data-group="assets"] {
  --eco-accent: var(--accent-assets);
  --eco-accent-soft: var(--accent-assets-soft);
  --eco-accent-fill: var(--accent-assets-fill);
  --eco-accent-line: var(--accent-assets-line);
}
.home-eco__group[data-group="operations"] {
  --eco-accent: var(--accent-operations);
  --eco-accent-soft: var(--accent-operations-soft);
  --eco-accent-fill: var(--accent-operations-fill);
  --eco-accent-line: var(--accent-operations-line);
}
.home-eco__group[data-group="property"] {
  --eco-accent: var(--accent-property);
  --eco-accent-soft: var(--accent-property-soft);
  --eco-accent-fill: var(--accent-property-fill);
  --eco-accent-line: var(--accent-property-line);
}

.home-mods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: var(--space-3);
}

/* One tile shape for all thirteen. The only per-product difference is the
   glyph; the only per-group difference is the accent. */
.pi-mod {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-panel);
  background: var(--color-eco-tile);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.pi-mod:hover {
  background: var(--color-eco-tile-hover);
  border-color: var(--eco-accent);
  text-decoration: none;
}
.pi-mod:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-inverse);
  outline-offset: var(--focus-offset);
}
.pi-mod__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-control);
  background: var(--eco-accent-soft);
  color: var(--eco-accent);
}
.pi-mod__glyph {
  width: 20px;
  height: 20px;
}
.pi-mod__name {
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1.3;
}
.pi-mod__blurb {
  color: var(--color-text-inverse-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.pi-mod__go {
  margin-top: var(--space-3);
  color: var(--eco-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}

.home-eco__more {
  margin: var(--space-7) 0 0;
}

/* ---------------- combined ---------------- */

.home-combined {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}
.home-combined .pi-callout {
  max-width: none;
  margin: 0;
}

/* ---------------- problem / solution ---------------- */

.home-ps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.home-ps__col {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface-soft);
}
/* The "with" panel is the destination, so it sits on the product's own
   surface with a solid left edge, while the "without" panel stays muted.
   Direction without red/green marketing theatre. Must stay AFTER
   .home-ps__col: that rule's `border` shorthand would otherwise reset the
   left edge back to 1px. */
.home-ps__col--after {
  background: var(--color-surface);
  border-color: var(--color-border);
  border-left: 3px solid var(--color-primary);
}
.home-ps__col h3 {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-base);
}
.home-ps__col ul {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.home-ps__col li {
  margin-bottom: var(--space-2);
}

/* ---------------- pricing summary ---------------- */

/* Pro leads: it is the required purchase, so it gets the wider column and the
   larger figure. The add-on range reads as a secondary note beside it. */
.home-price {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: stretch;
}
.home-price__item:first-child {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-resting);
}
.home-price__item:first-child .home-price__value {
  font-size: var(--text-4xl);
}
.home-price__item {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
}
.home-price__label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}
.home-price__value {
  margin: 0 0 var(--space-2);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.home-price__value span {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  color: var(--color-text-subtle);
}
.home-price__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------- two-panel ---------------- */

.home-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}
.home-two h3 {
  font-size: var(--text-base);
}
.home-two .pi-btn {
  margin-top: var(--space-3);
}

/* ---------------- faq ----------------
   Native <details>: keyboard-operable and open-able with no JS. */

/* Full container width, because .home-section > * centres every direct child:
   a 78ch max-width here was centred rather than left-aligned, indenting the
   whole list 264px right of its own heading. The readable measure belongs on
   the rows instead. */
.home-faq {
  max-width: var(--container);
}
/* The 78ch cap used to sit here, which clamped the question row and its
   divider to 673px of the 1200px measure — the FAQ was the only block on the
   page that stopped half way across. The readable-width constraint belongs on
   the answer prose (see .home-faq details p), not on the row. */
.home-faq details {
  border-bottom: 1px solid var(--color-border);
}
.home-faq details:first-of-type {
  border-top: 1px solid var(--color-border);
}
.home-faq summary {
  padding: var(--space-4) var(--space-6) var(--space-4) 0;
  position: relative;
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.home-faq summary::-webkit-details-marker {
  display: none;
}
.home-faq summary::after {
  content: "+";
  position: absolute;
  right: var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-text-subtle);
}
.home-faq details[open] summary::after {
  content: "−";
}
.home-faq summary:hover {
  color: var(--color-primary);
}
/* The reading measure now lives here, on the prose only, so a long answer
   never runs the full 1200px even though its question row does. */
.home-faq details p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  max-width: 70ch;
}
/* The question itself is a single line, not prose, but it still should not run
   the whole measure before the +/- control; it wraps well short of it. */
.home-faq summary {
  padding-right: var(--space-7);
}

/* ---------------- final cta ---------------- */

.home-cta {
  padding: var(--space-9) var(--space-5);
  text-align: center;
  border-top: 1px solid var(--color-border-inverse);
}
.home-cta h2 {
  font-size: clamp(var(--text-xl), 3.2vw, var(--text-3xl));
}
.home-cta h2,
.home-cta p {
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}
.home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-6);
}

/* ---------------- responsive ---------------- */

@media (max-width: 1024px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-top: var(--space-7);
  }
  .home-hero__lead {
    max-width: none;
  }
  .home-split {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-split__shot {
    position: static;
  }
}

@media (max-width: 1024px) {
  .home-price {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .home-eco {
    padding: var(--space-7) var(--space-4);
  }
  .home-eco__inner {
    padding-inline: 0;
  }
  /* Two up at tablet, one up on a phone: the tile has to stay readable and
     tappable, not become a shrunken desktop grid. */
  .home-mods {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2);
  }
  .home-section {
    padding: var(--space-7) var(--space-4);
  }
  .home-hero {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }
  .home-facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
  .home-cta {
    padding: var(--space-7) var(--space-4);
  }
}

@media (max-width: 560px) {
  .home-hero__actions .pi-btn,
  .home-cta__actions .pi-btn {
    flex: 1 1 auto;
  }
  /* One column on a phone, but laid out sideways so a tile is a compact row
     rather than a tall block. Thirteen stacked vertical cards turned the band
     into three screens of scrolling. */
  .home-mods {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
  .pi-mod {
    grid-template-rows: auto auto;
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: var(--space-3);
    row-gap: 2px;
    align-items: center;
    padding: var(--space-3) var(--space-4);
  }
  .pi-mod__icon {
    grid-row: span 2;
    margin-bottom: 0;
  }
  .pi-mod__blurb {
    font-size: var(--text-xs);
  }
  /* The whole card is the tap target, but the Explore affordance stays: it is
     what tells a touch user the card leads somewhere, and hiding it left the
     mobile grid looking like a list of labels. */
  .pi-mod__go {
    display: block;
  }
}

/* ---------------- hero: commercial weight ----------------
   The old site's hero read as more confident for one measurable reason: its
   H1 was 900-weight at -0.05em tracking, while this one sat at body weight
   and default tracking. Matching the confidence, not the effects — no
   gradient text, no glow, no grid overlay. */

.home-hero__brand {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}
.home-hero h1 {
  font-size: clamp(2.05rem, 1.1rem + 2.6vw, 3rem);
  font-weight: var(--weight-bold);
  line-height: 1.04;
  letter-spacing: -0.033em;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
/* A flat accent colour on the phrase that carries the claim. The old site
   clipped a gradient to the text; this is one solid token, so it survives
   forced-colours mode and never reads as an AI template. */
.home-hero__accent {
  color: var(--color-primary);
}
.home-hero__lead {
  max-width: 56ch;
}

/* ---------------- proof strip ----------------
   Sits inside the flow directly under the hero. The old site floated four
   cards across the dark/light seam, which is the single most template-like
   move on that page; the same four facts read better as a plain measured row. */
.home-proof {
  max-width: calc(var(--container) + 2 * var(--space-5));
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-8);
}
.home-proof__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.home-proof__grid dt {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.home-proof__grid dd {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ---------------- why upgrade: problem -> solution ----------------
   Three columns on desktop so the connector is drawn rather than implied.
   Deliberately not red-vs-green: the problem panel is warm neutral and the
   solution panel is the product's own blue. */
.home-head__accent {
  color: var(--color-primary);
}
.home-head__lead {
  max-width: 64ch;
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.home-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.home-story__panel {
  align-self: stretch;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
}
.home-story__panel--problem {
  background: var(--color-story-problem);
  border-left: 3px solid var(--color-story-problem-edge);
}
.home-story__panel--solution {
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  box-shadow: var(--shadow-resting);
}
.home-story__label {
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-story__panel--problem .home-story__label {
  color: var(--color-story-problem-text);
}
.home-story__panel--solution .home-story__label {
  color: var(--color-primary);
}
.home-story__list {
  margin: 0;
  padding-left: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.home-story__list li {
  margin-bottom: var(--space-2);
}
.home-story__list li:last-child {
  margin-bottom: 0;
}
.home-story__arrow {
  margin: 0;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-text-subtle);
}

/* ---------------- capability grid ----------------
   Six, not twelve. Every one is named in catalogue.php. */
.home-caps {
  display: grid;
  /* Three across, two rows: auto-fit gave four then two, leaving a hole.
     `margin: 0 auto` is required, not cosmetic — `.home-section > *` centres
     children with auto margins, and a bare `margin: 0` here silently pinned
     the grid to the padding edge while the heading stayed on the measure. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--space-6);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.home-caps li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.home-caps b {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

/* The hero used to stack at 1024. With a sentence-length H1 the copy column
   is 479px at 1100 — narrow enough to break "Turn Perfex CRM into a" across
   two lines and push the headline to four. Stack it a breakpoint earlier and
   the screenshot gets the full measure, which suits it anyway. */
@media (max-width: 1200px) {
  .home-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-top: var(--space-7);
  }
  .home-hero__lead {
    max-width: 68ch;
  }
}

/* Problem -> Solution stacks with the connector turned a quarter turn, so the
   progression still reads top-to-bottom on a phone. */
@media (max-width: 900px) {
  .home-story {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-story__arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
  .home-proof__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

/* ---------------- ecosystem: from rectangles to a catalogue ----------------
   The first dark pass grouped the thirteen correctly but every tile read as a
   bordered rectangle containing a link. What the old site got right was that
   each module carried a saturated, high-contrast badge, so the grid scanned as
   a set of products. Adapted here with the existing per-provider glyphs rather
   than generic monograms: the icon container gains real contrast and its own
   edge, the tile gains a left accent that appears on hover and focus, and the
   name/blurb hierarchy is widened. No glow, no glass, no gradient. */

.pi-mod {
  position: relative;
  padding-left: calc(var(--space-4) + 3px);
}
/* The accent edge is always in the box, transparent until hover/focus, so the
   tile never changes size and nothing reflows. */
.pi-mod::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  border-radius: var(--radius-panel) 0 0 var(--radius-panel);
  background: transparent;
}
.pi-mod:hover::before,
.pi-mod:focus-visible::before {
  background: var(--eco-accent);
}
.pi-mod__icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--eco-accent-line);
  background: var(--eco-accent-fill);
}
.pi-mod__glyph {
  width: 21px;
  height: 21px;
  stroke-width: 1.9;
}
.pi-mod__name {
  font-size: var(--text-lg);
  letter-spacing: -0.011em;
}
.pi-mod__blurb {
  font-size: var(--text-sm);
  line-height: 1.5;
}
/* The group label carried the same weight as a tile name. It is the spine of
   the section, so it gets the size and the tile names step back under it. */
.home-eco__group-name {
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  color: var(--color-text-inverse);
}
.home-eco__group-name::before {
  width: 28px;
}
.home-eco__group {
  margin-bottom: var(--space-7);
}

@media (max-width: 900px) {
  .home-caps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .home-caps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The stacked tile (glyph on its own row, then name, then blurb) left the
   right half of every tile empty, which is what made the grid read as
   rectangles-containing-links. The narrow-viewport rule already set the glyph
   beside the name and looked denser doing it, so the row layout becomes the
   default and the grid tightens to four across. */
.home-mods {
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: var(--space-3);
}
.pi-mod {
  grid-template-columns: auto minmax(0, 1fr);
  /* The blurb row takes the slack so "Explore" pins to the bottom of every
     tile. Without this, one two-line blurb (Fixed Equipment) drops its own
     Explore link 20px below its neighbours' across the whole row. */
  grid-template-rows: auto 1fr auto;
  column-gap: var(--space-4);
  row-gap: 0;
  padding: var(--space-4) var(--space-4) var(--space-4)
    calc(var(--space-4) + 3px);
}
.pi-mod__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin-bottom: 0;
}
.pi-mod__name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
.pi-mod__blurb {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 2px;
}
.pi-mod__go {
  grid-column: 2;
  grid-row: 3;
  margin-top: var(--space-3);
}

/* ---------------- hero ground ----------------
   The hero was a flat white canvas. This adds depth with two very low-contrast
   layers and nothing else: a cool wash seated behind the screenshot, and a
   faint square grid that fades out before it reaches the copy. No blobs, no
   glow, no glass, no animation — the effect should only be enough that the
   page no longer reads as empty paper.

   Both layers live on ::before of a wrapper so the hero content keeps a plain
   opaque ground for text contrast. */
.home-top {
  position: relative;
  isolation: isolate;
}
.home-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* the grid: 1px lines every 32px, masked to a soft ellipse so it exists
       only around the screenshot and never behind the headline */
    linear-gradient(var(--hero-grid-line) 1px, transparent 1px) 0 0 / 34px 34px,
    linear-gradient(90deg, var(--hero-grid-line) 1px, transparent 1px) 0 0 / 34px 34px,
    /* the wash: one cool ellipse centred on the screenshot column */
    radial-gradient(
      62% 78% at 72% 42%,
      var(--hero-wash) 0%,
      transparent 72%
    );
  -webkit-mask-image: radial-gradient(76% 86% at 68% 40%, #000 22%, transparent 76%);
  mask-image: radial-gradient(76% 86% at 68% 40%, #000 22%, transparent 76%);
}

/* On a phone the copy occupies the full width, so the grid would sit directly
   behind the headline and the paragraph. Drop it entirely and keep only a
   weakened wash: enough to separate the screenshot from the page, nothing
   competing with the text. */
@media (max-width: 860px) {
  .home-top::before {
    background: radial-gradient(
      120% 46% at 50% 62%,
      var(--hero-wash) 0%,
      transparent 74%
    );
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ===========================================================
   Ecosystem, second pass

   What the previous site actually got right, measured rather than
   guessed: its provider cards were a FIXED 271x165 in a 4-column
   grid, so every product occupied an identical box no matter which
   category it sat in. That uniformity is most of the "product
   family" feeling. Ours were fractional, so a three-product group
   drew wider cards than a four-product group and the grid read as
   four unrelated rows.

   auto-fill (not auto-fit) keeps the empty track, so a three-item
   group leaves the fourth column empty instead of stretching its
   cards. Every one of the thirteen is now the same width.

   Not adopted from that site: its category strip is a marquee-track
   — an infinitely animating chip row — and its cards carry a status
   pill that would duplicate what /addons already says.
   =========================================================== */

/* ---- heading as a two-column moment ---- */
.home-eco__head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-7);
  align-items: end;
  max-width: none;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border-inverse);
}
.home-eco__head h2 {
  margin: 0;
}
.home-eco__title-sub {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--color-text-inverse-muted);
}
.home-eco__head-note p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-inverse-muted);
}
.home-eco__req {
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-eco-req-edge);
  color: var(--color-eco-eyebrow) !important;
}

/* ---- category boundary ---- */
.home-eco__group-name {
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.home-eco__group-n {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--eco-accent-line);
  border-radius: 999px;
  background: var(--eco-accent-fill);
  color: var(--eco-accent);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  flex: none;
}
.home-eco__group-label {
  flex: none;
}

/* ---- the card ---- */
/* auto-FILL was the first attempt, to hold every card at one width the way the
   previous site's fixed 271px columns did. On our per-category grids it left a
   card-shaped hole at the end of all three 3-product rows, which reads as a
   missing product rather than as the end of a row. auto-fit collapses the empty
   track instead: 3-product groups draw three wider cards, the 4-product group
   draws four. Family resemblance is carried by identical card structure, glyph
   size and type scale, not by identical width. */
.home-mods {
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: var(--space-3);
}
.pi-mod {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  column-gap: 0;
  padding: var(--space-4) var(--space-4) var(--space-4)
    calc(var(--space-4) + 3px);
  background: var(--color-eco-tile);
  border-color: var(--color-eco-tile-line);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}
.pi-mod:hover {
  /* 1px, once. Enough to register as a lift; not enough to bounce. */
  transform: translateY(-1px);
}
.pi-mod__icon {
  grid-column: 1;
  grid-row: 1;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-3);
  border-radius: 10px;
}
.pi-mod__glyph {
  width: 22px;
  height: 22px;
}
.pi-mod__name {
  grid-column: 1;
  grid-row: 2;
  align-self: auto;
  font-size: var(--text-lg);
}
.pi-mod__blurb {
  grid-column: 1;
  grid-row: 3;
  margin-top: 2px;
}
.pi-mod__go {
  grid-column: 1;
  grid-row: 4;
  margin-top: var(--space-4);
  font-weight: var(--weight-semibold);
}

/* One column on a phone: two 175px cards would shrink the glyph and the
   product name below the point where the grid is scannable. */
@media (max-width: 720px) {
  .home-eco__head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
  }
  .home-mods {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Back to the row layout at this width: with the full page width to play
     with, glyph-beside-name is shorter and reads better than a stack. */
  .pi-mod {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: var(--space-4);
  }
  .pi-mod__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .pi-mod__name {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
  }
  .pi-mod__blurb {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }
  .pi-mod__go {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--space-3);
  }
}