/* ===========================================================
   page-home.css 
   -----------------------------------------------------------
   Page wrapper: .page-home   |   Slug: ?page=Home
   Loaded by the CMS via getVersionedFile('css/page-home.css').

   FRAME WIDTHS
     Desktop: 1640px artboard, content 1200px (Figma 13084:3940)
     Mobile:  390px (Figma 13292:147)

   PAGE FONT-SIZE BASE
     font-size: 18px on .page-home. Every non-clamp size is em
     anchored to it (50px Figma -> 2.778em).

   CLAMP FORMULA (1200 desktop basis / 390 mobile frame)
     slope_vw     = (desktop_px - mobile_px) / (1200 - 390) * 100
     intercept_px = mobile_px - slope_vw/100 * 390
   Clamp endpoints are PX (site standard; em endpoints are fragile).

   HERO FONT
     The hero headline uses the licensed "Cream Cake" script face,
     declared below via @font-face. Upload the font file to
     /fonts/cream_cake.woff2 (adjust the src url here if it lands
     elsewhere). Its line-height is set to 1 as a safe seed; tune
     against the live font (Figma shows 58.32px on 90px, a ratio
     that only renders correctly with Cream Cake's own metrics).

   INHERITED FROM CMS-LOADED CSS (do not re-declare):
     - font-family: 'Roboto', sans-serif (asserted below anyway
       for standalone previews)
     - color-scheme: light only

   ASCII rule: this file MUST stay ASCII-clean.

   SECTION INDEX (search the block prefix)
     hero      1. Hero (script headline, hover pins)
     nature    2. The technologies are nature's (tech chips)
     finder    3. Let's find your first Unit (tabs; site-tabs.js)
     guide     4. Everything we'd tell you, in one guide
     help      5. "How will these help me?" (4 tinted cards)
     owners    6. For everyone who already owns SOTA units
     founders  7. That's everything, for now + page-wave
=========================================================== */

@font-face {
  font-family: 'Cream Cake';
  src: url('/fonts/cream_cake.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* -- TOKENS ---------------------------------------------- */
.page-home {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;

  /* Type scale (desktop px / mobile px) */
  --text-heading:    clamp(30px, 2.47vw + 20.37px, 50px);  /* 50 / 30 section titles */
  --text-hero:       clamp(44px, 5.68vw + 21.85px, 90px);  /* 90 / 44 script headline */
  --text-subheading: clamp(18px, 0.49vw + 16.08px, 22px);  /* 22 / 18 section subheads */
  --text-body:       clamp(16px, 0.25vw + 15.04px, 18px);  /* 18 / 16 card body */
  --text-card-title: clamp(18px, 0.49vw + 16.08px, 22px);  /* 22 / 18 card titles */
  --text-link:       clamp(17px, 0.37vw + 15.56px, 20px);  /* 20 / 17 bold text links */

  /* Spacing */
  --space-section-y: clamp(40px, 4.94vw + 20.74px, 80px);  /* 80 / 40 */
  --space-container: clamp(10px, 2.47vw + 0.37px, 30px);   /* 30 / 10 gutter */
  --space-gap-md:    clamp(12px, 0.99vw + 8.15px, 20px);   /* 20 / 12 */
  --space-gap-lg:    clamp(24px, 3.21vw + 11.48px, 50px);  /* 50 / 24 */

  /* Radius */
  --radius-panel: 20px; /* px, not em (corner-arc matching rule) */
  --radius-card:  30px; /* the tinted cards / owners row */
  --radius-opt:   16px; /* finder option pills, hero pin hover pill */

  /* Ink: this design's text darks */
  --color-ink:      #3b3b3b;
  --color-white:    #fff;
  --color-cream:    #f8f4f2;
  --color-line:     #e2dbd7;
  --color-chipline: #e7edf1;

  /* Brand colours (site tokens, named by product) */
  --color-silver-pulser:   #92ca6a;
  --color-magnetic-pulser: #59afb2;
  --color-water-ozonator:  #4792bc; /* also the site primary blue */
  --color-bio-tuner:       #a194c7;

  /* Darkened per-product text tones (finder kickers, mobile links) */
  --color-sp-dark:  #4a8b3f;
  --color-mp-dark:  #268e92;
  --color-woz-dark: #3f799a;
  --color-bt-dark:  #62538e;

  /* Page accent: the Home page's accent is the site primary blue */
  --color-accent:      var(--color-water-ozonator);
  --color-accent-dark: var(--color-woz-dark);

  color: var(--color-ink);

  /* Section colours promoted to tokens (consistency audit, Oct 2026):
     no inline hex in section rules. */
  --color-btn-hover:         #555555;  /* site-wide blue-button hover (confirmed by designer) */
  --tint-cream:              #f9fbf6;  /* hero gradient start */
  --tint-warm-light:         #f5faf0;  /* icon-tile gradient start / callout bg */
  --tint-azure-light:        #e6f4f8;  /* icon-tile gradient start */
}

/* -- BOILERPLATE (site standard) -------------------------- */
.page-home button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.page-home header { font: inherit; }

.page-home .sec-title {
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1.2; /* 60/50 desktop; mobile ratio matches closely */
  margin: 0;
}
.page-home .text-ink    { color: var(--color-ink); }
.page-home .text-accent { color: var(--color-accent); }

.page-home a:focus-visible,
.page-home button:focus-visible,
.page-home input:focus-visible,
.page-home [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* "Water O3zonator" subscript (site convention) */
.page-home .brand-sub { font-size: 0.7em; line-height: 0; vertical-align: -0.15em; }

/* -- LAYOUT UTILITIES -------------------------------------- */
.page-home .section { width: 100%; padding: var(--space-section-y) 0; }
.page-home .container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1200px + 2 * var(--space-container));
  margin: 0 auto;
  padding: 0 var(--space-container);
}

/* Shared header rhythm: 10px title-to-subhead gap (site standard) */
.page-home .hero__header,
.page-home .nature__header,
.page-home .finder__header,
.page-home .guide__header,
.page-home .help__header,
.page-home .owners__header,
.page-home .founders__header {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  margin: 0;
}

/* Pill button (shared look; flat #555 hover per site standard) */
.page-home .btn {
  display: inline-block;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.page-home .btn--primary { background: var(--color-accent); color: var(--color-white); }
.page-home .btn--pill { border-radius: 999em; } /* pill radius */
.page-home .btn:hover { background: var(--color-btn-hover); }

/* ============================================================
   SECTION 1: HERO
   Gradient bg (Figma 13084:3972), centered script headline,
   product photo with hover pins.
============================================================ */
.page-home .section-hero {
  background: linear-gradient(177deg, var(--tint-cream) 0%, var(--tint-warm-light) 40%, var(--tint-azure-light) 100%);
  overflow: hidden;
}
.page-home .hero__header { text-align: center; }
.page-home .hero__eyebrow {
  margin: 0;
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.364; /* 30/22 */
  letter-spacing: 0.3em; /* 6.6px at 22px */
  text-transform: uppercase;
}
.page-home .hero__title {
  margin: 0;
  font-weight: 400;
}
.page-home .hero__title-script {
  font-family: 'Cream Cake', cursive;
  font-size: var(--text-hero);
  line-height: 1; /* tune against the live Cream Cake metrics (see header) */
  /* Gradient fill (Figma 174deg blue -> teal -> green). Solid fallback
     first for browsers without background-clip: text. */
  color: var(--color-magnetic-pulser);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-home .hero__title-script {
    background-image: linear-gradient(174deg, var(--color-water-ozonator) 0%, var(--color-magnetic-pulser) 43.8%, var(--color-silver-pulser) 73%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.page-home .hero__title-dot {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(32px, 3.95vw + 16.59px, 64px); /* 64 / 32 */
  line-height: 1;
  color: var(--color-silver-pulser);
}
.page-home .hero__sub {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: 1.6;
}

.page-home .hero__stage {
  position: relative;
  margin-top: var(--space-gap-lg); /* 50px gap heading -> image */
}
.page-home .hero__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
}

/* Hover pins: "+" dot expands into a labelled pill (13217:386).
   Positions are % of the 1425x403 hero image. */
.page-home .hero__pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.111em;  /* 20px */
  height: 1.111em;     /* 20px -- Figma: 20x20 circle */
  padding: 0;
  border-radius: 1.667em; /* 30px at the 18px anchor -- Figma radius 30 */
  color: var(--color-white);
  text-decoration: none;
  box-shadow: 0 12px 20px rgba(26, 43, 28, 0.09);
  transition: border-radius 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease, transform 0.4s ease; /* softened: 50% slower */
}
.page-home .hero__pin--woz { left: 13%; top: 11.5%;    background: var(--color-water-ozonator); }
.page-home .hero__pin--sp  { left: 50.3%; top: 4.5%;  background: var(--color-silver-pulser); }
.page-home .hero__pin--mp  { left: 72.6%; top: 26.5%; background: var(--color-magnetic-pulser); }
.page-home .hero__pin--bt  { left: 40%;   top: 70%; background: var(--color-bio-tuner); }
/* Invisible hover halo: the pin morphs shape and shifts on hover, and a
   pointer resting near the curved bottom edge can fall just outside the
   mid-transition geometry -- hover drops, the pin snaps back, and it
   shudders. The halo pads the hit area ~6px in every state so the morph
   never crosses the pointer. */
.page-home .hero__pin::before {
  content: '';
  position: absolute;
  inset: -0.333em;
}

.page-home .hero__pin-plus {
  /* The + is DRAWN (two bars, same technique as the video modal's X),
     not a font glyph: glyph baseline metrics rasterize differently at
     each browser zoom, so a text "+" drifts off-centre at e.g. 80%.
     A geometric box flex-centres identically at any zoom. The text
     character stays in the markup for copy/paste and screen readers
     but is made invisible (color: transparent). */
  font-size: 0.833em; /* 15px em base -- scales with the <=767 half-size */
  line-height: 1;
  color: transparent;
  position: relative;
  /* The span FILLS the pin's 20px content box (1.333em at this font):
     zero flex-centring offset, so no half-pixel snap of the whole plus
     at fractional zooms (9x11 in 20px = a 4.5px offset that rounded
     differently at 80% vs 100%). The 9x11 ink is drawn by the bars. */
  width: 1.333em;
  height: 1.333em;
  /* Roll-out: the + collapses as the label unrolls (see below) */
  max-width: 1.333em;
  overflow: hidden;
  transition: max-width 0.4s ease, opacity 0.4s ease;
}
.page-home .hero__pin-plus::before,
.page-home .hero__pin-plus::after {
  content: '';
  position: absolute;
  background: var(--color-white);
  border-radius: 0.067em;
}
/* Bars centre via transform, not margin offsets: translate(-50%) is
   resolved at raster time with symmetric sub-pixel antialiasing, while
   a layout margin snaps to a device pixel in one direction -- the snap
   was the visible off-centre at 80% zoom. Ink stays 9x11 (Figma). */
/* Ink is 10x10, EVEN dimensions on purpose (was the Figma glyph's 9x11):
   odd ink in the even 20px box puts bar edges at half-pixel offsets
   ((20-9)/2 = 5.5px), and at fractional browser zooms a half-pixel edge
   rounds to a device pixel on one side only -- the visible off-centre
   at 80%. With even ink every edge sits on an integral CSS px, so both
   sides round identically at any zoom. Visually indistinguishable. */
.page-home .hero__pin-plus::before { /* horizontal bar */
  left: 50%; top: 50%;
  width: 0.667em;  /* 10px */
  height: 0.133em; /* 2px */
  transform: translate(-50%, -50%);
}
.page-home .hero__pin-plus::after { /* vertical bar */
  left: 50%; top: 50%;
  width: 0.133em;
  height: 0.667em; /* 10px */
  transform: translate(-50%, -50%);
}
.page-home .hero__pin-label {
  font-size: 0.667em; /* 12px */
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  /* Roll-out reveal: width unrolls rightward from the + instead of an
     instant display swap. 12em comfortably exceeds the longest label
     ("Magnetic Pulser ->" ~9.2em) without inflating the timing much. */
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s ease, opacity 0.4s ease;
}
.page-home .hero__pin:hover,
.page-home .hero__pin:focus-visible {
  border-radius: var(--radius-opt);
  padding: 0.278em 0.556em; /* 5px/10px: 20px content + 10 = 30px pill
                               (the 40px original reduced 25%, designer) */
  box-shadow: 0 12px 40px rgba(26, 43, 28, 0.09);
  /* The pin is anchored by TOP, so the 10px height growth all extends
     downward; shifting up the full 10px (0.556em) pins the pill's
     BOTTOM to the rest circle's bottom line (Figma expansion). */
  transform: translateY(-0.556em);
}
.page-home .hero__pin:hover .hero__pin-plus,
.page-home .hero__pin:focus-visible .hero__pin-plus { max-width: 0; opacity: 0; }
.page-home .hero__pin:hover .hero__pin-label,
.page-home .hero__pin:focus-visible .hero__pin-label { max-width: 12em; opacity: 1; }

/* ============================================================
   SECTION 2: THE TECHNOLOGIES ARE NATURE'S
============================================================ */
.page-home .section-nature { background: var(--color-white); }
.page-home .nature__title-row {
  display: flex;
  align-items: center;
  gap: 1.667em; /* 30px */
}
.page-home .nature__leaf {
  width: 7.778em;  /* 140px */
  height: 5.167em; /* 93px */
  object-fit: contain;
  flex: 0 0 auto;
}
.page-home .nature__lead {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: 1.818; /* 40/22 */
}
.page-home .nature__note {
  margin: 1.111em 0 0; /* 20px below header block */
  font-style: italic;
  font-size: clamp(17px, 0.37vw + 15.56px, 20px); /* 20 / 17 */
  line-height: 1.5; /* 30/20 */
}
.page-home .nature__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.556em; /* 10px */
  margin: 1.667em 0 0; /* 30px gap above the chip row */
  padding: 0;
}
.page-home .nature__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em; /* 9px */
  padding: 0.444em 0.889em; /* 8px 16px */
  border: 1px solid var(--color-chipline);
  border-radius: 5.556em;
  background: var(--color-white);
  font-size: var(--text-link);
  font-weight: 500;
  line-height: 1.25; /* 25/20 */
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.page-home .nature__dot {
  width: 0.5em;  /* 10px */
  height: 0.5em;
  border-radius: 50%;
  flex: 0 0 auto;
}
.page-home .nature__chip--sp  .nature__dot { background: var(--color-silver-pulser); }
.page-home .nature__chip--mp  .nature__dot { background: var(--color-magnetic-pulser); }
.page-home .nature__chip--woz .nature__dot { background: var(--color-water-ozonator); }
.page-home .nature__chip--bt  .nature__dot { background: var(--color-bio-tuner); }
/* Hover: brand background + white text (designer, this build) */
.page-home .nature__chip:hover { color: var(--color-white); }
.page-home .nature__chip:hover .nature__dot { background: var(--color-white); }
.page-home .nature__chip--sp:hover  { background: var(--color-silver-pulser);   border-color: var(--color-silver-pulser); }
.page-home .nature__chip--mp:hover  { background: var(--color-magnetic-pulser); border-color: var(--color-magnetic-pulser); }
.page-home .nature__chip--woz:hover { background: var(--color-water-ozonator);  border-color: var(--color-water-ozonator); }
.page-home .nature__chip--bt:hover  { background: var(--color-bio-tuner);       border-color: var(--color-bio-tuner); }

/* ============================================================
   SECTION 3: LET'S FIND YOUR FIRST UNIT (tabs; site-tabs.js)
   Six unit tabs, one visible card, on EVERY tier (Figma
   13301:18708 desktop, 16921:2457 mobile -- Oct 2026).
   Desktop (>1024): tabs column left, card right, product photo
   anchored to the section's bottom-right, landscape background.
   <=1024: 2-col tab grid, white card below (see the media block).
   Switching = the shared site-tabs module (roving tabindex, arrow
   keys, [hidden] on inactive panels; .is-active on the active
   tab). page-home.js only drives the mobile "Read more" clamp.
   Without JS the Silver Pulser card (server-rendered, not
   [hidden]) stays visible.
============================================================ */
.page-home .section-finder {
  position: relative;
  background: url('../images/elements/background_units__find__home.jpg') center / cover no-repeat;
  overflow: hidden;
}
.page-home .finder__sub {
  margin: 0;
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.818; /* 40/22 */
}
.page-home .finder__hint { display: none; } /* mobile-only line */
.page-home .finder {
  display: grid;
  grid-template-columns: 13.889em minmax(0, 1fr); /* 250px | card */
  column-gap: 2.778em; /* 50px */
  align-items: start;
  margin-top: var(--space-gap-lg); /* 50px below header */
}

/* --- Tabs (desktop pills) --------------------------------------
   Two lines: unit name + uppercase technology label in the product's
   dark tone. A 2-col grid (name/tech over an empty column) so the
   mobile tier can reuse the same boxes. */
.page-home .finder__tabs {
  display: flex;
  flex-direction: column;
  gap: 0.444em; /* 8px */
}
.page-home .finder__opt {
  display: flex;
  flex-direction: column;
  gap: 0.111em; /* 2px */
  width: 100%;
  padding: 0.556em; /* 10px */
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-opt);
  background: var(--color-white);
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.page-home .finder__opt-name {
  font-size: var(--text-link); /* 20px */
  font-weight: 500;
  line-height: 1.25; /* 25/20 */
  color: var(--color-ink);
}
.page-home .finder__opt-tech {
  font-size: 0.778em; /* 14px */
  font-weight: 500;
  line-height: 1.286; /* 18/14 */
  letter-spacing: 0.05em; /* 0.7px */
  text-transform: uppercase;
}
.page-home .finder__opt--sp  .finder__opt-tech { color: var(--color-sp-dark); }
.page-home .finder__opt--mp  .finder__opt-tech { color: var(--color-mp-dark); }
.page-home .finder__opt--woz .finder__opt-tech { color: var(--color-woz-dark); }
.page-home .finder__opt--bt  .finder__opt-tech { color: var(--color-bt-dark); }
/* Kit tech label: gradient text (Figma); solid fallback first */
.page-home .finder__opt--all .finder__opt-tech { color: var(--color-woz-dark); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-home .finder__opt--all:not(.is-active) .finder__opt-tech {
    background-image: linear-gradient(90deg, var(--color-water-ozonator) 0%, var(--color-magnetic-pulser) 29.3%, var(--color-silver-pulser) 62%, #8b7bb8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Active tab: brand background, "->" before the name (desktop), white
   tech label. SP keeps the ink name on its green (Figma); the darker
   brands go white. */
.page-home .finder__opt.is-active { border-color: var(--color-white); }
.page-home .finder__opt.is-active .finder__opt-name::before {
  content: "\2192";
  font-weight: 700;
  margin-right: 0.3em; /* explicit gap after the arrow (designer, Oct 2026) */
}
.page-home .finder__opt.is-active .finder__opt-tech { color: var(--color-white); }
.page-home .finder__opt--sp.is-active  { background: var(--color-silver-pulser); }
.page-home .finder__opt--mp.is-active  { background: var(--color-magnetic-pulser); }
.page-home .finder__opt--woz.is-active { background: var(--color-water-ozonator); }
.page-home .finder__opt--bt.is-active  { background: var(--color-bio-tuner); }
.page-home .finder__opt--all.is-active {
  background: linear-gradient(90deg, var(--color-silver-pulser) 0%, var(--color-magnetic-pulser) 43.3%, var(--color-water-ozonator) 79.3%, var(--color-bio-tuner) 100%);
}
.page-home .finder__opt--mp.is-active  .finder__opt-name,
.page-home .finder__opt--woz.is-active .finder__opt-name,
.page-home .finder__opt--bt.is-active  .finder__opt-name,
.page-home .finder__opt--all.is-active .finder__opt-name { color: var(--color-white); }

/* --- Cards (desktop) --------------------------------------------
   All six cards share ONE grid cell, so the switch cross-fades: hidden
   cards stay rendered at opacity 0 (visibility flips after the fade,
   keeping them out of the a11y tree/tab order as [hidden] promises).
   Side benefits: the section holds the tallest card's height, and
   the absolutely-positioned photo fades with its card (opacity groups
   the subtree without creating a containing block). The <=1024 block
   overrides [hidden] back to display:none. */
.page-home .finder__cards { display: grid; }
.page-home .finder__card {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "kicker"
    "name"
    "desc"
    "price"
    "actions";
  align-content: start;
  max-width: 25.167em; /* 453px text column */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.page-home .finder__card[hidden] {
  display: grid;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.page-home .finder__kicker {
  grid-area: kicker;
  margin: 0 0 0.556em;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.389; /* 25/18 */
  letter-spacing: 0.1em; /* 1.8px */
  text-transform: uppercase;
}
.page-home .finder__card--sp  .finder__kicker { color: var(--color-sp-dark); }
.page-home .finder__card--mp  .finder__kicker { color: var(--color-mp-dark); }
.page-home .finder__card--woz .finder__kicker { color: var(--color-woz-dark); }
.page-home .finder__card--bt  .finder__kicker { color: var(--color-bt-dark); }
.page-home .finder__card--all .finder__kicker { color: var(--color-woz-dark); }
.page-home .finder__name {
  grid-area: name;
  margin: 0 0 1.111em; /* 20px card gap */
  font-size: clamp(24px, 0.79vw + 20.92px, 30.4px);
  font-weight: 700;
  line-height: 1.13;
  color: var(--color-ink);
}
.page-home .finder__desc {
  grid-area: desc;
  margin: 0 0 1.111em;
  font-size: var(--text-body);
  line-height: 1.667; /* 30/18 */
}
.page-home .finder__price {
  grid-area: price;
  margin: 0 0 1.111em; /* 20px to the actions row */
  line-height: 1.4; /* 35/25 */
  white-space: nowrap;
}
.page-home .finder__amount {
  font-size: 1.389em; /* 25px */
  font-weight: 900;
  color: var(--color-accent);
}
.page-home .finder__currency {
  font-size: 1.111em; /* 20px */
  color: var(--color-ink);
}
.page-home .finder__more { display: none; } /* mobile-only "Read more" */
/* Actions: "View <unit>" + "How it works" as two blue pills (desktop) */
.page-home .finder__view,
.page-home .finder__how {
  display: inline-block;
  justify-self: start;
  padding: 0.556em 1.111em; /* 10px 20px */
  border-radius: 2.778em;
  background: var(--color-accent);
  font-size: 0.889em; /* 16px */
  font-weight: 700;
  line-height: normal;
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
/* The two pills sit in a .finder__actions wrapper (flex row that wraps
   if ever too narrow); on mobile the wrapper is display:contents so the
   card grid places the pills itself. */
.page-home .finder__actions {
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 0.556em 1.111em; /* 10px row / 20px column */
}
.page-home .finder__view:hover,
.page-home .finder__how:hover { background: var(--color-btn-hover); }
.page-home .finder__photo {
  /* Anchored to the SECTION (designer, Oct 2026):
     1. Pinned to the viewport's right edge up to 1920px wide; beyond
        that it holds the 1920 relationship to the content (right edge
        at 50% + 960px) instead of drifting off to an ultrawide edge.
     2. As the screen narrows the right pin slides the photo toward the
        text column, until its left edge meets the text LANE: the
        centred container's left + pills 250 + gap 50 + text 453 + 18
        clearance = 771px past the container's left (= the Figma's
        991px at 1640, flush right).
     3. Held at the lane, the photo's right side may run off-screen by
        up to 30% OF ITS WIDTH (section overflow:hidden crops it); past
        that the width shrinks so 70% always stays visible
        (designer, Oct 2026 -- a fixed 300px was 46% of the 649px
        design size and an ever-larger share as the photo shrank).
     --lane: the container's left edge + 771px; the container is
     min(100% - 2 gutters, 1200px) wide and centred.
     A replaced element will not stretch between left/right, so the
     width is computed explicitly. */
  --finder-lane: calc((100% - min(100% - 2 * var(--space-container), 1200px)) / 2 + 771px);
  --finder-right-edge: min(100%, calc(50% + 960px));
  position: absolute;
  bottom: 0;
  width: min(36.056em, calc((100% - var(--finder-lane)) / 0.7)); /* visible part = 70% of width */
  left: max(var(--finder-lane), calc(var(--finder-right-edge) - 36.056em));
  height: auto;
}

/* ============================================================
   SECTION 4: EVERYTHING WE'D TELL YOU, IN ONE GUIDE
============================================================ */
.page-home .section-guide { background: var(--color-white); }
.page-home .guide__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27.167em; /* text | 489px book */
  column-gap: 0.778em; /* 14px (Figma container gap) */
  align-items: center;
}
.page-home .guide__lead {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: 1.591; /* 35/22 */
}
.page-home .guide__for {
  margin: 1.667em 0 0; /* 30px stack gap */
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.591;
}
.page-home .guide__cta-row { margin: 1.667em 0 0; }
.page-home .guide__cta {
  padding: 0.556em 1.111em; /* 10px 20px */
  font-size: 0.833em; /* 15px */
  font-weight: 900;
  line-height: 1.8; /* 27/15 */
  letter-spacing: 0.1em; /* 1.5px */
  text-transform: uppercase;
}
.page-home .guide__media { display: block; }
.page-home .guide__book {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-panel);
}

/* ============================================================
   SECTION 5: "HOW WILL THESE HELP ME?"
============================================================ */
.page-home .section-help { background: var(--color-cream); }
.page-home .help__sub {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: 1.818; /* 40/22 */
}
.page-home .help__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.111em; /* 20px */
  margin-top: 1.667em; /* 30px below header */
}
.page-home .help__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.556em;
  /* No fixed min-height: the grid row stretches every card to the
     tallest one, so the bottom links align just below the tallest
     text block (Figma 13256:8571) instead of at an arbitrary depth. */
  padding: 1.667em; /* 30px */
  border-radius: var(--radius-card);
  color: var(--color-ink);
  text-decoration: none;
}
/* Tinted backgrounds: 30% product colour over white (Figma a30-over-white) */
.page-home .help__card--woz { background: color-mix(in srgb, var(--color-water-ozonator) 30%, var(--color-white)); }
.page-home .help__card--sp  { background: color-mix(in srgb, var(--color-silver-pulser) 30%, var(--color-white)); }
.page-home .help__card--mp  { background: color-mix(in srgb, var(--color-magnetic-pulser) 30%, var(--color-white)); }
.page-home .help__card--bt  { background: color-mix(in srgb, var(--color-bio-tuner) 30%, var(--color-white)); }
.page-home .help__card-body {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-home .help__card-title {
  margin: 0;
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: 1.364; /* 30/22 */
}
.page-home .help__card-desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.667; /* 30/18 */
}
.page-home .help__card-link {
  margin: 0;
  font-size: var(--text-link);
  font-weight: 700;
  line-height: 1.5; /* 30/20 */
}
.page-home .help__card:hover .help__card-link { text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   SECTION 6: FOR EVERYONE WHO ALREADY OWNS SOTA UNITS
============================================================ */
.page-home .section-owners { background: var(--color-white); }
.page-home .owners__sub {
  margin: 0;
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.818; /* 40/22 */
}
.page-home .owners__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1.667em; /* 30px below header */
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.3);
}
.page-home .owners__cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.556em;
  /* No fixed min-height (same reasoning as .help__card) */
  padding: 2.222em; /* 40px */
  border-right: 1px solid var(--color-line);
  color: var(--color-ink);
  text-decoration: none;
}
.page-home .owners__cell:last-child { border-right: none; }
.page-home .owners__cell-body {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
}
.page-home .owners__cell-title {
  margin: 0;
  font-size: clamp(20px, 0.62vw + 17.59px, 25px); /* 25 / 20 */
  font-weight: 700;
  line-height: 1.2; /* 30/25 */
  color: var(--color-accent);
}
.page-home .owners__cell-desc {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.667; /* 30/18 */
}
.page-home .owners__cell-link {
  margin: 0;
  font-size: var(--text-link);
  font-weight: 700;
  line-height: 1.5;
  /* Underline appears on hover (Figma ships it transparent at rest) */
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  transition: text-decoration-color 0.2s ease;
}
.page-home .owners__cell:hover .owners__cell-link { text-decoration-color: var(--color-ink); }

.page-home .owners__quote {
  margin: 1.667em 0 0; /* 30px below the row */
  padding: 0 0 0 1.111em; /* 20px */
  border-left: 4px solid var(--color-silver-pulser);
}
.page-home .owners__quote p {
  margin: 0;
  font-size: clamp(19px, 0.62vw + 16.59px, 24px); /* 24 / 19 */
  font-weight: 300;
  line-height: 1.4;
}
.page-home .owners__quote strong { font-weight: 700; }

/* ============================================================
   SECTION 7: THAT'S EVERYTHING, FOR NOW  (+ page-bottom wave)
============================================================ */
.page-home .section-founders {
  position: relative;
  /* The people are baked into this photo (1920x876). It is taller than
     the text-driven section at most widths, so anchor it to the TOP:
     the crop then happens at the bottom, under the wave, never at the
     heads (designer, Oct 2026). */
  /* Two layers (designer, Oct 2026):
     ::before -- the same photo, enlarged to cover the whole section and
        heavily blurred: a hazy continuation wherever the sharp photo
        does not reach.
     ::after  -- the sharp photo sized to the WIDTH (not cover) so the
        whole frame -- the people occupy its right half, x = 53-99% --
        stays in frame at every width; its bottom 90px is masked to
        transparent so it dissolves into the haze beneath. Wider than
        ~2.19 x the section's height it is taller than the section and
        simply crops at the bottom under the wave.
     The flat colour is the no-mask fallback. */
  background-color: #dcdfdb;
  overflow: hidden;
}
.page-home .section-founders::before,
.page-home .section-founders::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background-image: url('../images/sp/sp8_russ_lesley_micropulsing__everything__home.jpg');
  background-repeat: no-repeat;
}
.page-home .section-founders::before {
  inset: -3em; /* overshoot so the blur's soft edges fall outside the section */
  background-position: center top;
  background-size: cover;
  filter: blur(1.6em) saturate(0.9);
}
.page-home .section-founders::after {
  inset: 0;
  background-position: center top;
  background-size: 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(45.625vw - 90px), transparent 45.625vw);
  mask-image: linear-gradient(to bottom, #000 calc(45.625vw - 90px), transparent 45.625vw);
}
/* Content and wave sit above both photo layers */
.page-home .section-founders > .container,
.page-home .section-founders > .page-wave { position: relative; z-index: 1; }
/* The wave is the section's last child; kill the section's own bottom
   padding so the wave sits flush on the footer (site standard). */
.page-home .section--wave { padding-bottom: 0 !important; }
/* Tighter top padding than the site's 80px: keeps the text-driven
   section no taller than the width-sized photo (45.625vw) further down
   the width range, delaying the fill colour's appearance below the
   people (designer, Oct 2026). */
.page-home .section-founders { padding-top: 2.222em; } /* 40px */
.page-home .founders__grid {
  position: relative;
  display: grid;
  /* 611px by design, but never past the people: their left edge sits
     at 53% of the photo = 53vw (the photo is viewport-wide), so the
     column is capped at 53vw minus the gutter and a 1.5em margin. */
  grid-template-columns: minmax(0, min(33.944em, calc(53vw - var(--space-container) - 1.5em))) 1fr;
  column-gap: 2.778em; /* 50px */
}
.page-home .founders__title { color: var(--color-accent); }
.page-home .founders__text {
  position: relative;
  z-index: 2; /* text stays above the wave (which sits at z1, over the photo) */
}
.page-home .founders__header { gap: 1.111em; } /* 20px in this section's Figma */
.page-home .founders__lead {
  margin: 0;
  font-size: var(--text-subheading);
  font-weight: 700;
  line-height: 1.818; /* 40/22 */
}
.page-home .founders__quote {
  margin: 1.667em 0 0; /* 30px stack gap */
  padding: 0 0 0 1.111em;
  border-left: 4px solid var(--color-silver-pulser);
}
.page-home .founders__quote p {
  margin: 0;
  font-size: clamp(18px, 0.44vw + 16.26px, 21.6px);
  font-weight: 500;
  line-height: 1.4;
}
.page-home .founders__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1.667em; /* 30px */
  margin: 1.667em 0 0;
  font-size: clamp(18px, 0.44vw + 16.26px, 21.6px);
  font-weight: 500;
  line-height: 1.4;
}
.page-home .founders__about {
  font-size: var(--text-link);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}
.page-home .founders__about:hover { color: var(--color-accent-dark); }
/* The wave sits in flow at the section's bottom. (It used to be pulled
   up with a negative margin so the former separate R&L photo could
   overlap its crest; with the people now baked into the background
   that only dragged the wave over the byline.) */
.page-home .page-wave {
  position: relative;
  z-index: 1;
  margin-top: 1.111em; /* 20px below the byline (tightened, see section padding) */
}
/* 3. Scale the wave to the viewport; block kills the inline-baseline
   gap that let a strip of the background show beneath it. */
.page-home .page-wave__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   BREAKPOINT: <=1024 (layout / column count)
============================================================ */
@media (max-width: 1024px) {

  /* Hero pins: no hover on touch tiers, so the labelled pill state is
     shown permanently (designer, Aug 2026). */
  .page-home .hero__pin {
    border-radius: var(--radius-opt);
    padding: 0.278em 0.556em;
    transform: translateY(-0.556em); /* bottom on the rest-circle line */
  }
  .page-home .hero__pin .hero__pin-plus { display: none; }
  .page-home .hero__pin .hero__pin-label { max-width: none; opacity: 1; }

  /* Finder (<=1024): 2-col tab grid + white card below (Figma
     16921:2457). Soft vertical gradient instead of the landscape. */
  .page-home .section-finder {
    background: linear-gradient(180deg, #edf3f2 0%, #f6f8f6 40%, #fff 100%);
    padding: 2.444em 0 2.889em; /* 44 / 52; gutters come from .container */
  }
  .page-home .finder__header { padding-bottom: 0; }
  .page-home .finder__sub {
    font-size: 0.944em; /* 17px */
    font-weight: 500;
    line-height: 1.53; /* 26/17 */
  }
  .page-home .finder__hint {
    display: block;
    margin: 0.5em 0 0;
    font-size: 0.778em; /* 14px */
    line-height: 1.43; /* 20/14 */
    color: #6b6b6b;
  }
  .page-home .finder {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* desktop's align-items:start would shrink the tab grid to content */
    gap: 0.667em; /* 12px */
    margin-top: 1em; /* 18px */
  }
  .page-home .finder__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.444em; /* 8px */
  }
  .page-home .finder__opt {
    justify-content: center;
    min-height: 2.889em; /* 52px */
    padding: 0.444em 0.556em; /* 8px 10px */
    border-radius: 14px;
  }
  .page-home .finder__opt-name { font-size: 0.889em; line-height: 1.19; } /* 16/19 */
  .page-home .finder__opt-tech { font-size: 0.583em; line-height: 1.24; letter-spacing: 0.04em; } /* 10.5/13 */
  .page-home .finder__opt.is-active { border-color: transparent; }
  .page-home .finder__opt.is-active .finder__opt-name::before { content: none; } /* no arrow on mobile */

  /* The card: white panel, thumb + head text, clamped description with
     "Read more", text links, full-width View button */
  .page-home .finder__cards { display: block; }
  .page-home .finder__card {
    display: grid;
    grid-template-columns: 6.222em minmax(0, 1fr); /* 112px thumb | head text */
    grid-template-areas:
      "photo kicker"
      "photo name"
      "photo price"
      "desc  desc"
      "links links"
      "view  view";
    grid-template-rows: auto auto 1fr auto auto auto;
    column-gap: 0.778em; /* 14px */
    row-gap: 0;
    max-width: none;
    padding: 0.889em; /* 16px */
    border-radius: 24px;
    background: var(--color-white);
    box-shadow: 0 10px 28px rgba(23, 58, 82, 0.09), 0 1px 2px rgba(23, 58, 82, 0.06);
  }
  .page-home .finder__card[hidden] { display: none; }
  /* Thumb: the desktop photo re-used at 112px with a product tint
     (Figma 16921:2457). The section-level anchors are reset. */
  .page-home .finder__photo {
    position: static;
    grid-area: photo;
    align-self: start;
    width: 6.222em; /* 112px */
    height: 6.222em;
    margin: 0.139em 0 0;
    border-radius: 18px;
    object-fit: cover;
  }
  .page-home .finder__card--sp  .finder__photo { background: color-mix(in srgb, var(--color-silver-pulser) 30%, #fff); }
  .page-home .finder__card--mp  .finder__photo { background: color-mix(in srgb, var(--color-magnetic-pulser) 30%, #fff); }
  .page-home .finder__card--woz .finder__photo { background: color-mix(in srgb, var(--color-water-ozonator) 30%, #fff); }
  .page-home .finder__card--bt  .finder__photo { background: color-mix(in srgb, var(--color-bio-tuner) 30%, #fff); }
  .page-home .finder__card--all .finder__photo { background: var(--color-cream); }
  .page-home .finder__actions { display: contents; } /* pills back into the card grid */
  .page-home .finder__kicker {
    margin: 0 0 0.222em;
    font-size: 0.611em; /* 11px */
    line-height: 1.36; /* 15/11 */
    letter-spacing: 0.08em;
  }
  .page-home .finder__name {
    margin: 0 0 0.182em;
    font-size: 1.222em; /* 22px */
    line-height: 1.23; /* 27/22 */
  }
  .page-home .finder__price { margin: 0; line-height: 1.3; }
  .page-home .finder__amount { font-size: 1.056em; } /* 19px */
  .page-home .finder__currency { font-size: 0.778em; color: #6b6b6b; } /* 14px */
  .page-home .finder__desc {
    margin: 0.667em 0 0; /* 12px below the head */
    font-size: 0.889em; /* 16px */
    line-height: 1.5625; /* 25/16 */
    /* Clamped to four lines until "Read more" (page-home.js) */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .page-home .finder__desc.is-expanded { display: block; -webkit-line-clamp: none; overflow: visible; }
  /* Links row: Read more (left) ... How it works (right), 15px medium */
  .page-home .finder__more,
  .page-home .finder__how {
    display: inline;
    margin: 0.8em 0 0; /* 12px */
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: 0.833em; /* 15px */
    font-weight: 500;
    line-height: 1.333; /* 20/15 */
    color: #2e6e93;
    text-decoration: underline;
    white-space: nowrap;
    transition: none;
  }
  .page-home .finder__more { grid-area: links; justify-self: start; }
  .page-home .finder__how  { grid-area: links; justify-self: end; }
  .page-home .finder__more:hover,
  .page-home .finder__how:hover { background: none; color: var(--color-accent-dark); }
  .page-home .finder__view {
    grid-area: view;
    justify-self: stretch;
    margin-top: 0.667em; /* 12px */
    padding: 0.875em 1.25em; /* 14px 20px at 16px */
    text-align: center;
  }

  /* Guide: stack, image above text (DOM order flips visually) */
  .page-home .guide__grid { grid-template-columns: 1fr; row-gap: 1.667em; }
  .page-home .guide__media { order: -1; max-width: 27.167em; margin: 0 auto; }

  /* Help cards + owners row: jump straight to the phone column count */
  .page-home .help__cards { grid-template-columns: 1fr; }
  .page-home .owners__row { grid-template-columns: 1fr; }
  .page-home .owners__cell {
    border-right: none;
    border-bottom: 1px solid var(--color-line);
  }
  .page-home .owners__cell:last-child { border-bottom: none; }

  /* Founders: stack, photo below text, still overlapping the wave */
  /* Founders: the photo (viewport-wide, 45.625vw tall) sits at the top
     and the text moves BELOW it (designer, Oct 2026 -- was 767): the
     section's top padding reserves the photo's full height, and the
     text column returns to full width. */
  .page-home .section-founders { padding-top: calc(45.625vw + var(--space-section-y)); }
  .page-home .founders__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BREAKPOINT: <=767 (phone-only spacing / stacking)
============================================================ */
@media (max-width: 767px) {
  .page-home .hero__eyebrow { letter-spacing: 0.22em; }
  /* Pin pills at 50% size (designer, Aug 2026): re-anchoring the pin's
     em base to half (18px -> 9px) halves every em-derived dimension
     inside it -- label (12px -> 6px), padding, min-width/height --
     in one declaration. */
  .page-home .hero__pin { font-size: 0.5em; }
  .page-home .nature__title-row { flex-wrap: wrap; gap: 0.833em; }
  .page-home .nature__leaf { width: 5.556em; height: auto; aspect-ratio: 140 / 93; }
  .page-home .owners__cell { padding: 1.333em; }
  .page-home .founders__byline { gap: 0.833em; }

}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .page-home .finder__card,
  .page-home .finder__card[hidden],
  .page-home .hero__pin,
  .page-home .nature__chip,
  .page-home .finder__opt,
  .page-home .finder__view,
  .page-home .finder__how,
  .page-home .btn,
  .page-home .owners__cell-link { transition: none; }
}