/* KKB — components layer (Air Fill).
   iOS design language in the brand skin. Depends on, and loads AFTER:
     - theme.json brand tokens   (--wp--preset--*)   color / type / space
     - assets/css/ios.css         (--ios-*)           radii / controls / motion
   BEM, single-class, token-only — no hardcoded color, space, radius, or motion.
   Reviewed: 2026-07. */

/* ---- Responsive section rhythm (steps up by breakpoint) ------------- */
:root { --section-pad: var(--wp--preset--spacing--60, 2.25rem); }
@media (min-width: 834px)  { :root { --section-pad: var(--wp--preset--spacing--70, 3.5rem); } }
@media (min-width: 1200px) { :root { --section-pad: var(--wp--preset--spacing--90, 7rem); } }

/* No sideways scroll — a bleeding decorative layer, a wide media, or a motion transform
   must never scroll the page horizontally on phones. clip (not hidden) so position:sticky
   keeps working. */
html, body { overflow-x: clip; }

/* ---- Buttons -------------------------------------------------------- */
/* Ink on coral = ~6:1 AA (paper-on-coral was ~2.8:1 and failed). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ios-control-height);
  padding: 0 var(--wp--preset--spacing--40);
  border: 0;
  border-radius: var(--ios-radius-md);
  background: var(--wp--preset--color--coral);
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  font-size: var(--wp--preset--font-size--base);
  text-decoration: none;
  transition: transform var(--ios-duration-fast) var(--ios-ease-out),
              background-color var(--ios-duration-fast) var(--ios-ease-out);
}
.btn:active { transform: scale(0.97); }
@media (hover: hover) {
  .btn:hover { background: #ed7559; color: var(--wp--preset--color--ink); } /* darker coral (text-gradient bottom stop), not the rose pink */
}
.btn--lg {
  min-height: var(--ios-control-height-lg);
  padding-inline: var(--wp--preset--spacing--50);
  font-size: var(--wp--preset--font-size--lg);
}
/* Link-styled CTA — reads as a text link but keeps a 44px tap target (use with .btn).
   Lets the hero sit as [button] [link] rather than two stacked heavy buttons. */
.btn--link {
  background: transparent;
  box-shadow: none;
  padding-inline: var(--wp--preset--spacing--20);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: underline;
  color: var(--wp--preset--color--coral-deep);
}
.section--dark .btn--link { color: var(--wp--preset--color--coral-tint); }
@media (hover: hover) {
  .btn--link:hover { background: transparent; color: var(--wp--preset--color--paper); }
}

/* ---- Status badge — real ACF status / recommended flag -------------- */
.badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--ios-control-height-sm);
  padding-inline: var(--wp--preset--spacing--20);
  border-radius: var(--ios-radius-capsule);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1;
}
.badge--shipped  { background: var(--wp--preset--color--sand); color: var(--wp--preset--color--ink); }
.badge--coming   { background: var(--wp--preset--color--coral-tint); color: var(--wp--preset--color--ink); }
.badge--featured { background: var(--wp--preset--color--coral); color: var(--wp--preset--color--ink); }

/* ---- Detail hero — iOS large-title header --------------------------- */
/* Band padding comes from .section--dark; Fill owns the coral accent via --fill. */
.hero__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: var(--ios-tap-min);
  margin-block-end: var(--wp--preset--spacing--20);
  color: var(--wp--preset--color--paper);
  font-weight: 700;
  text-decoration: none;
}
.hero__back::before {
  content: "";
  width: 9px; height: 9px;
  border-inline-start: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
}
.hero__label {
  display: block;
  margin-block-end: var(--wp--preset--spacing--20);
  color: var(--fill, var(--wp--preset--color--coral-tint));
  font-weight: 800;
  font-size: var(--wp--preset--font-size--sm);
}
.hero__status { display: block; margin-block-end: var(--wp--preset--spacing--30); }
.hero__title { max-width: 16ch; margin: 0 0 var(--wp--preset--spacing--30); color: var(--wp--preset--color--paper); }
.hero__lead {
  max-width: 42ch;
  margin: 0;
  color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent);
  font-size: var(--wp--preset--font-size--xl); /* lede tier — outranks section intros (lg) */
  line-height: 1.4;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  margin-block-start: var(--wp--preset--spacing--40);
}
.hero__note { margin: var(--wp--preset--spacing--30) 0 0; } /* layout only; reuse .disclaimer for color/size */
.hero--fill { --fill: var(--wp--preset--color--coral-tint); }

/* ---- Section hero (homepage) — the one commanding moment ------------ */
.section--hero { padding-block: var(--wp--preset--spacing--70, 3.5rem); }
@media (min-width: 834px)  { .section--hero { padding-block: var(--wp--preset--spacing--80, 5rem); } }
@media (min-width: 1200px) { .section--hero { padding-block: calc(var(--wp--preset--spacing--80, 5rem) + var(--wp--preset--spacing--50)); } }
.section--hero .device { --device-w: min(360px, 84vw); }
@media (min-width: 834px) {
  .section--hero .showcase__inner { grid-template-columns: 1fr 1.05fr; column-gap: var(--wp--preset--spacing--80, 5rem); }
  .section--hero .showcase__media { align-self: end; }
  .section--hero .device { --device-w: 460px; }
}

/* ---- iOS inset-grouped list — feature / pain link rows -------------- */
/* Reused by front-page, both archives, and related lists on single templates
   (all grouped link lists — an inset reading measure + subtle elevation suit all). */
.card-list {
  list-style: none;
  margin: 0 auto var(--wp--preset--spacing--40);
  padding: 0;
  max-width: var(--wp--style--global--content-size, 760px);
  border: 1px solid var(--ios-hairline-color);
  border-radius: var(--ios-radius-card);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--ios-elevation-1);
  overflow: hidden;
}
.card-list__item + .card-list__item { border-block-start: 0.5px solid var(--ios-hairline-color); }
.card-list__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: var(--ios-tap-min);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  padding-inline-end: calc(var(--wp--preset--spacing--40) + 16px);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: background-color var(--ios-duration-fast) var(--ios-ease-out);
}
.card-list__link::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--wp--preset--spacing--40);
  inset-block-start: 50%;
  width: 8px; height: 8px;
  border-inline-end: 2px solid var(--wp--preset--color--muted);
  border-block-start: 2px solid var(--wp--preset--color--muted);
  transform: translateY(-50%) rotate(45deg);
}
.card-list__title { font-weight: 700; color: var(--wp--preset--color--ink); }
.card-list__summary { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--base); }
.card-list__link:active { background: var(--wp--preset--color--sand); }
@media (hover: hover) {
  .card-list__link:hover { background: var(--wp--preset--color--sand); }
}

/* ---- Gaps tile-grid — scannable coral tap-tiles (Apple category grid) --- */
/* Flat tiles (no shadow, larger radius) so they read distinct from the
   elevated compare/pricing cards. Coral-only keeps Fill's accent ownership. */
.tile-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--wp--style--global--wide-size, 1200px);
  display: grid;
  gap: var(--wp--preset--spacing--30);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.tile-grid__link {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
  height: 100%;
  min-height: var(--ios-tap-min);
  padding: var(--wp--preset--spacing--40);
  border-radius: var(--ios-radius-lg);
  background: var(--wp--preset--color--paper);
  border: 1px solid var(--ios-hairline-color);
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: transform var(--ios-duration-fast) var(--ios-ease-out),
              border-color var(--ios-duration-fast) var(--ios-ease-out);
}
.tile-grid__link:active { transform: scale(0.98); }
.tile-grid__link:focus-visible { border-radius: var(--ios-radius-lg); }
@media (hover: hover) {
  .tile-grid__link:hover { border-color: var(--wp--preset--color--coral); }
}
.tile-grid__label { font-weight: 800; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--coral-deep); }
.tile-grid__sub { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--base); }

/* ---- Small text helpers -------------------------------------------- */
.muted { color: var(--wp--preset--color--muted); }
.disclaimer {
  color: color-mix(in srgb, var(--wp--preset--color--paper) 66%, transparent);
  font-size: var(--wp--preset--font-size--sm);
}
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Device shot — framed screenshot ------------------------------- */
/* The iPhone frame is baked into the PNG; render directly + ground with a shadow
   that follows the frame's alpha. */
/* Never render a phone larger than roughly life-size (a framed iPhone ≈ 300px). */
.device { width: min(var(--device-w, 300px), 90vw); max-width: 300px; margin-inline: auto; }
/* aspect-ratio reserves space so the lazy portrait doesn't shift layout on decode */
.device__shot { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 2449; filter: var(--ios-device-shadow); }

/* ---- Feature showcase — Apple-style editorial section -------------- */
.showcase { padding-block: var(--wp--preset--spacing--60); }
@media (min-width: 834px) { .showcase { padding-block: var(--wp--preset--spacing--70, 3.5rem); } }
.showcase__inner { display: grid; gap: var(--wp--preset--spacing--50); align-items: center; }
.showcase__title { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--2xl); }
.showcase__lead { margin: 0 0 var(--wp--preset--spacing--40); max-width: 42ch; font-size: var(--wp--preset--font-size--lg); }
.showcase--dark .showcase__title,
.showcase--dark .showcase__lead { color: var(--wp--preset--color--paper); }

/* ---- Arrow link (reusable affordance; replaces literal arrows) ------ */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 700;
  text-decoration: none;
  color: var(--wp--preset--color--coral-deep);
}
.arrow-link::after {
  content: "";
  width: 0.42em; height: 0.42em;
  border-inline-end: 2px solid currentColor;
  border-block-start: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--ios-duration-fast) var(--ios-ease-out);
}
@media (hover: hover) { .arrow-link:hover::after { transform: translateX(3px) rotate(45deg); } }
.arrow-link:active { opacity: 0.6; }
.showcase--dark .arrow-link,
.section--dark .arrow-link { color: var(--wp--preset--color--coral-tint); }
.more-link { margin-block-start: var(--wp--preset--spacing--50); text-align: center; }

/* ---- Showcase / device layout at iPad and up ----------------------- */
@media (min-width: 834px) {
  .showcase__inner { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--60); }
  .showcase--reverse .showcase__text { order: 2; }
  .showcase--reverse .showcase__media { order: 1; }
  .device { --device-w: 360px; }
}

/* ---- Comparison table — coral ownership of the Air Fill column ------ */
.table-wrap {
  overflow-x: auto;
  margin-block-end: var(--wp--preset--spacing--40);
  border: 1px solid var(--ios-hairline-color);
  border-radius: var(--ios-radius-card);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--ios-elevation-1);
}
.compare { width: 100%; min-width: 30em; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.compare th,
.compare td {
  padding: var(--wp--preset--spacing--40);
  text-align: start;
  line-height: 1.3;
  border-block-end: 0.5px solid var(--ios-hairline-color);
}
.compare__note {
  max-width: 60ch;
  margin: var(--wp--preset--spacing--30) auto 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  text-align: center;
}
.compare thead th { font-weight: 800; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--muted); }
.compare tbody th { font-weight: 600; }
.compare td { color: var(--wp--preset--color--muted); }
/* Air Fill column = a positive/"yes" column: subtle green tint + green checks. */
.compare th:last-child,
.compare td:last-child {
  background: color-mix(in srgb, var(--wp--preset--color--success) 8%, transparent);
  border-inline-start: 0.5px solid color-mix(in srgb, var(--wp--preset--color--success) 30%, var(--ios-hairline-color));
}
.compare thead th:last-child { color: var(--wp--preset--color--ink); }
.compare td:last-child { color: var(--wp--preset--color--success); font-weight: 700; }
.compare__none { color: var(--wp--preset--color--muted); }
.compare__check {
  display: inline-block;
  width: 0.5em; height: 0.28em;
  margin-inline-end: 0.5em;
  border-inline-start: 2px solid var(--wp--preset--color--success);
  border-block-end: 2px solid var(--wp--preset--color--success);
  transform: rotate(-45deg) translateY(-0.15em);
}

/* ---- Pricing tiers — Pro reads as recommended ---------------------- */
.tiers { display: grid; gap: var(--wp--preset--spacing--40); max-width: var(--wp--style--global--content-size, 760px); margin-inline: auto; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--40); max-width: var(--wp--style--global--wide-size, 1200px); } }
.tier {
  position: relative;
  padding: var(--wp--preset--spacing--50);
  border: 1px solid var(--ios-hairline-color);
  border-radius: var(--ios-radius-card);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--ios-elevation-1);
}
/* Featured Pro: a single, lighter emphasis — the coral border + the Recommended
   badge only. Deliberately NOT the stacked border+top-bar+elevation "hard-sell
   middle" that reads as a stock SaaS pricing grid. */
.tier--featured {
  border-width: 2px;
  border-color: var(--wp--preset--color--coral);
}
.tier__flag { margin: 0 0 var(--wp--preset--spacing--20); }
.tier__name { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--xl); }
.tier__price { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--2xl); font-weight: 800; }
.tier__price--tbd { font-size: var(--wp--preset--font-size--lg); font-weight: 700; color: var(--wp--preset--color--muted); }
.tier__list { list-style: none; margin: 0; padding: 0; }
.tier__list li { position: relative; margin-block-end: var(--wp--preset--spacing--20); padding-inline-start: 1.6em; }
.tier__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.15em; inset-block-start: 0.4em;
  width: 0.55em; height: 0.3em;
  border-inline-start: 2px solid var(--wp--preset--color--coral-deep);
  border-block-end: 2px solid var(--wp--preset--color--coral-deep);
  transform: rotate(-45deg);
}

/* ---- FAQ (native disclosure, rotating chevron) --------------------- */
.faq {
  border-block-start: 0.5px solid var(--ios-hairline-color);
  margin-block-end: var(--wp--preset--spacing--40);
  max-width: var(--wp--style--global--content-size, 760px);
  margin-inline: auto;
}
.faq__item { border-block-end: 0.5px solid var(--ios-hairline-color); }
.faq__q {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30) 0;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--lg);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border-inline-end: 2px solid var(--wp--preset--color--muted);
  border-block-end: 2px solid var(--wp--preset--color--muted);
  transform: rotate(45deg);
  transition: transform var(--ios-duration-fast) var(--ios-ease-out),
              border-color var(--ios-duration-fast) var(--ios-ease-out);
}
.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
  border-color: var(--wp--preset--color--coral-deep);
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: block-size var(--ios-duration-base) var(--ios-ease-out),
                opacity var(--ios-duration-base) var(--ios-ease-out),
                content-visibility var(--ios-duration-base) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; opacity: 1; }
}
.faq__a { max-width: 60ch; padding-block-end: var(--wp--preset--spacing--30); color: var(--wp--preset--color--muted); }

/* ---- Section rhythm + fixed bottom-nav clearance ------------------- */
section.container,
article.container,
.band { padding-block: var(--section-pad); }
.site-footer { padding-block-end: calc(8em + var(--ios-safe-bottom)); }
.container--tail { padding-block-end: calc(var(--section-pad) + var(--wp--preset--spacing--50)); }

/* ---- Centered section header --------------------------------------- */
.section-intro {
  max-width: 48ch;
  margin-inline: auto;
  margin-block-end: var(--wp--preset--spacing--50);
  text-align: center;
}
.section-intro > :last-child { margin-bottom: 0; }
.section-intro p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--lg); line-height: 1.45; }
.section--dark .section-intro p { color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent); }

/* ---- Sunken band (warm sand) for section rhythm -------------------- */
.section--sunken {
  background: var(--wp--preset--color--sand);
  padding-block: var(--section-pad);
  --ios-hairline-color: color-mix(in srgb, var(--wp--preset--color--line) 45%, var(--wp--preset--color--muted));
}

/* ---- Air Pack cross-sell roster (the one multi-accent band) -------- */
.app-row {
  list-style: none;
  margin: 0 auto;
  padding: 0;
/*  max-width: var(--wp--style--global--content-size, 760px);*/
max-width: 820px;
  display: grid;
  gap: var(--wp--preset--spacing--40);
}
@media (min-width: 834px) { .app-row { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); } }
.app-row__item { display: grid; grid-template-columns: auto 1fr; column-gap: var(--wp--preset--spacing--30); align-items: center; }
.app-row__item .tile { grid-row: 1 / 3; --tile-size: 72px; box-shadow: var(--ios-elevation-2); }
@media (min-width: 834px) { .app-row__item .tile { --tile-size: 84px; } }
.app-row__desc { align-self: start; color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent); font-size: var(--wp--preset--font-size--sm); }

/* ---- App name (shared — hero lockup, roster) ----------------------- */
.app-name { font-weight: 800; font-size: var(--wp--preset--font-size--xl); line-height: 1.1; }

/* Per-app brand colours + gradients — defined here in CSS (not theme.json). Each Air Pack
   app title reads in its own gradient; solid --app-color-* is the no-background-clip fallback. */
:root {
  --app-grad-fill:     linear-gradient(180deg, #ee997c 0%, #ed7559 100%);
  --app-grad-sort:     linear-gradient(180deg, #ff7ea6 0%, #e94c7d 100%);
  --app-grad-widgets:  linear-gradient(180deg, #ffc24d 0%, #e8930a 100%);
  --app-color-fill:    #ed7559;
  --app-color-sort:    #e94c7d;
  --app-color-widgets: #e8930a;
}
.app-row__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.app-name--fill    { color: var(--app-color-fill); }
.app-name--sort    { color: var(--app-color-sort); }
.app-name--widgets { color: var(--app-color-widgets); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .app-name--fill, .app-name--sort, .app-name--widgets {
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .app-name--fill    { background-image: var(--app-grad-fill); }
  .app-name--sort    { background-image: var(--app-grad-sort); }
  .app-name--widgets { background-image: var(--app-grad-widgets); }
}
/* Coming-soon chips colour-coded to each app's gradient (ink text on the light gradient top). */
.badge--sort    { background: var(--app-grad-sort);    color: var(--wp--preset--color--ink); }
.badge--widgets { background: var(--app-grad-widgets); color: var(--wp--preset--color--ink); }

/* ---- Inline accent keyword (solid color; no gradient text) ---------- */
.u-accent { color: var(--wp--preset--color--coral-deep); font-weight: inherit; }
.section--dark .u-accent { color: var(--wp--preset--color--coral-tint); }

/* ---- Square app-icon tile motif ------------------------------------ */
.tile {
  inline-size: var(--tile-size, 56px);
  aspect-ratio: 1 / 1;
  flex: none;
  border-radius: var(--ios-radius-icon);
  overflow: hidden;
  background: var(--wp--preset--color--sand);
  box-shadow: var(--ios-elevation-1);
}
.tile__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Brand plate — stands in for a device (distinct shape + depth, not a fake screen) */
.tile--plate {
  --tile-size: min(300px, 72vw);
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: var(--ios-radius-xl);
  background: color-mix(in srgb, var(--wp--preset--color--coral) 14%, var(--wp--preset--color--sand));
  box-shadow: var(--ios-elevation-2);
}
.tile--plate .tile__img { width: 68%; height: 68%; border-radius: var(--ios-radius-icon); }
/* Honest accent placeholder for a sibling app with no icon yet */
.tile--rose  { background: var(--wp--preset--color--rose); }
.tile--amber { background: var(--wp--preset--color--amber); }

/* ---- Hero identity lockup (App Store-style icon + name + subtitle) -- */
.hero__identity { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); margin-block-end: var(--wp--preset--spacing--40); }
.hero__identity .tile { --tile-size: 64px; }
.hero__identity .hero__label { margin-block-end: 0; }
.hero__ident-text { display: grid; gap: 2px; }

/* ---- Closing store card (App Store-style, benefit-led heading) ------ */
.store-card {
  display: grid;
  justify-items: center;
  gap: var(--wp--preset--spacing--30);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  border: 1px solid var(--ios-hairline-color);
  border-radius: var(--ios-radius-card);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--ios-elevation-2);
  text-align: center;
}
.store-card .tile { --tile-size: 112px; }
.store-card__title { margin: 0; font-size: var(--wp--preset--font-size--2xl); }
.store-card__sub { margin: 0; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--lg); }

/* ---- Desktop vertical rhythm --------------------------------------- */
@media (min-width: 1200px) {
  .showcase { padding-block: var(--wp--preset--spacing--80, 5rem); }
  .section--hero .device { --device-w: 520px; }
}

/* ---- Immersive showcase — one oversized device on a warm stage --------- */
/* Echoes Apple's "Find a routine" centerpiece. Reuses .showcase + .device;
   always lands on a real assigned screenshot (applied to feature #1). */
.showcase--immersive {
  overflow: hidden;
  background: color-mix(in srgb, var(--wp--preset--color--coral) 6%, var(--wp--preset--color--sand));
}
.showcase--immersive .showcase__media { min-width: 0; }
.showcase--immersive .device { --device-w: min(400px, 82vw); width: min(var(--device-w, 340px), 100%); }
@media (min-width: 834px) {
  .showcase--immersive .showcase__inner { grid-template-columns: 1fr 1.05fr; column-gap: var(--wp--preset--spacing--70, 3.5rem); }
  .showcase--immersive .showcase__media { align-self: end; }
  .showcase--immersive .device { --device-w: 500px; margin-block-end: calc(-1 * var(--wp--preset--spacing--70, 3.5rem)); }
}
@media (min-width: 1200px) { .showcase--immersive .device { --device-w: 600px; } }

/* Graceful empty: if the device slot renders nothing, collapse to a text beat. */
.showcase__media:empty { display: none; }
@media (min-width: 834px) {
  .showcase__inner:has(> .showcase__media:empty) { grid-template-columns: 1fr; }
}

/* ---- Staged feature chapter — a coloured "moment" per shipped story ----- */
/* Extends .showcase: reads an inline --stage-bg (a color-mix of palette tokens),
   fills a comfortable min-height on larger screens, and can carry a soft scene
   backdrop. Text/media always sit above the scene. */
.showcase--stage { position: relative; overflow: hidden; background: var(--stage-bg, var(--wp--preset--color--paper)); }
.showcase--stage > .container { position: relative; z-index: 1; }
@media (min-width: 834px) {
  .showcase--stage { display: grid; align-content: center; min-height: min(86svh, 760px); }
}
/* Soft atmospheric backdrop (decorative, aria-hidden). Default = a warm coral wash;
   an optional <img> adds documentary context, with a directional scrim that only
   engages when a photo is present so text keeps its contrast. */
.showcase__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 90% at 82% 22%, color-mix(in srgb, var(--wp--preset--color--coral) 16%, transparent), transparent 62%);
}
.showcase__scene img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.showcase__scene:has(img)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--stage-bg, var(--wp--preset--color--ink)) 40%,
    color-mix(in srgb, var(--stage-bg, var(--wp--preset--color--ink)) 55%, transparent) 100%);
}
.showcase--reverse .showcase__scene:has(img)::after {
  background: linear-gradient(270deg,
    var(--stage-bg, var(--wp--preset--color--ink)) 40%,
    color-mix(in srgb, var(--stage-bg, var(--wp--preset--color--ink)) 55%, transparent) 100%);
}

/* ---- Form Flows — shipped: a guided multi-form session panel ------------ */
/* Reads as a real in-app step sequence (a diagram of the flow, not a fake
   screenshot). Lives on the dark coral stage; step colour communicates state:
   done = green, current = coral, upcoming = dim, finish = coral-tint. */
.flow-panel {
  padding: var(--wp--preset--spacing--50);
  border-radius: var(--ios-radius-xl);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 16%, transparent);
  box-shadow: var(--ios-elevation-2);
}
.flow-panel__head { margin: 0 0 var(--wp--preset--spacing--40); font-weight: 800; color: var(--wp--preset--color--paper); }
.flow-panel__foot { margin: var(--wp--preset--spacing--40) 0 0; }
.flow-panel__crumb {
  display: inline-flex;
  align-items: center;
  min-height: var(--ios-control-height-sm);
  padding-inline: var(--wp--preset--spacing--30);
  border-radius: var(--ios-radius-capsule);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 12%, transparent);
  color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
}
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--30); }
.flow-step {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  border-radius: var(--ios-radius-md);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 16%, transparent);
  color: var(--wp--preset--color--paper);
}
.flow-step__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 2em; height: 2em;
  border-radius: var(--ios-radius-capsule);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 22%, transparent);
  color: var(--wp--preset--color--paper);
  font-weight: 800;
}
.flow-step--done .flow-step__n    { background: var(--wp--preset--color--success); color: var(--wp--preset--color--paper); }
.flow-step--current { border-color: color-mix(in srgb, var(--wp--preset--color--coral) 55%, transparent); }
.flow-step--current .flow-step__n { background: var(--wp--preset--color--coral); color: var(--wp--preset--color--ink); }
.flow-step--finish .flow-step__n  { background: var(--wp--preset--color--coral-tint); color: var(--wp--preset--color--ink); }
.flow-step__label { font-weight: 700; }

/* ---- Full-bleed closing band -------------------------------------------- */
/* Distinct name from .showcase--stage: this is the page's final coral/ink band,
   holding the store card with clearance above the fixed bottom-nav. */
.section--close {
  background: var(--stage-bg, var(--wp--preset--color--ink));
  padding-block: var(--section-pad);
  padding-block-end: calc(var(--section-pad) + var(--wp--preset--spacing--60) + var(--ios-safe-bottom));
}

/* ---- Hero ambient wash (subtle, behind the device only) ----------------- */
.section--hero { position: relative; }
.section--hero .showcase__media { position: relative; }
.hero__wash {
  position: absolute;
  /* Stay INSIDE the media box (inset:0). Negative insets overflowed the viewport on phones
     and caused horizontal scroll. The gradient is centred and fades to transparent right at
     the box edge, so there's no hard edge without bleeding past it. */
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(62% 52% at 50% 46%, color-mix(in srgb, var(--wp--preset--color--coral) 16%, transparent), transparent 80%);
  opacity: 1;
  transition: opacity var(--ios-duration-slow, 460ms) var(--ios-ease-out);
}
/* The glow belongs to the Air Fill clip; fade it out when Airtable-in-Safari is shown. */
.showcase__media.is-browser .hero__wash { opacity: 0; }
.section--hero .showcase__media .device { position: relative; z-index: 1; }

/* ---- Arrow link as a standalone CTA (44px touch target) ----------------- */
/* Inline within prose, .arrow-link stays as-is; this modifier is for hero /
   chapter footers where it is the tappable action on its own line. */
.arrow-link--action { min-height: var(--ios-control-height); padding-inline: var(--wp--preset--spacing--20); }

/* ---- Compare: keep the row label in view while the table scrolls -------- */
.compare th[scope="row"] {
  position: sticky;
  inset-inline-start: 0;
  background: var(--wp--preset--color--paper);
  z-index: 1;
}

/* ---- Pricing: honest roadmap microcopy under the Advanced track --------- */
.tier__soon {
  margin: var(--wp--preset--spacing--30) 0 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
}
/* Price period suffix (/yr, /mo) — smaller + muted so the number leads. */
.tier__per { font-size: var(--wp--preset--font-size--lg); font-weight: 700; color: var(--wp--preset--color--muted); }
/* Per-card action (Elite "Notify me"). */
.tier__cta { margin: var(--wp--preset--spacing--30) 0 0; }

/* ---- Impact checklist — long-requested Airtable gaps, answered (on ink) -- */
/* Apple "Get the highlights"-style scannable list; each item = green check +
   the answer + the gripe it closes. Only shipped/build-verified items appear. */
.impact-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--wp--style--global--wide-size, 1200px);
  display: grid;
  gap: var(--wp--preset--spacing--40);
}
@media (min-width: 834px) {
  .impact-list { grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--60); }
}
.impact-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--wp--preset--spacing--30);
  align-items: start;
}
.impact-item__check {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--ios-radius-capsule);
  background: var(--wp--preset--color--success);
}
.impact-item__check::after {
  content: "";
  inline-size: 0.62em;
  block-size: 0.34em;
  border-inline-start: 2.5px solid var(--wp--preset--color--ink);
  border-block-end: 2.5px solid var(--wp--preset--color--ink);
  transform: rotate(-45deg) translateY(-0.08em);
}
.impact-item__t { grid-column: 2; margin: 0; font-weight: 800; font-size: var(--wp--preset--font-size--lg); color: var(--wp--preset--color--paper); }
.impact-item__d { grid-column: 2; margin: 2px 0 0; color: color-mix(in srgb, var(--wp--preset--color--paper) 78%, transparent); font-size: var(--wp--preset--font-size--base); line-height: 1.4; }
.impact-note { max-width: 64ch; margin: var(--wp--preset--spacing--50) auto 0; text-align: center; }

/* ---- Signature statement band — the one profound, typographic beat ------ */
/* Oversized Nunito, almost no chrome. The data-ownership moment before pricing. */
.statement {
/*  max-width: 22ch;*/
  margin: 0 auto; text-align: center; }
.statement__t {
  margin: 0;
  font-size: var(--wp--preset--font-size--4xl);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--wp--preset--color--paper);
}
.statement__body {
  max-width: 54ch;
  margin: var(--wp--preset--spacing--50) auto 0;
  color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent);
  font-size: var(--wp--preset--font-size--xl);
  line-height: 1.5;
}
/* Three plain assurances as an iOS grouped hairline list — no icon triad. */
.assurances {
  max-width: 40rem;
  margin: var(--wp--preset--spacing--60) auto 0;
  list-style: none;
  padding: 0;
  border-radius: var(--ios-radius-card);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--paper) 16%, transparent);
  overflow: hidden;
  text-align: start;
}
.assurance {
  display: grid;
  grid-template-columns: 9rem 1fr;
  column-gap: var(--wp--preset--spacing--40);
  padding: var(--wp--preset--spacing--40);
}
.assurance + .assurance { border-block-start: 0.5px solid color-mix(in srgb, var(--wp--preset--color--paper) 14%, transparent); }
.assurance__k { font-weight: 800; color: var(--wp--preset--color--paper); }
.assurance__v { color: color-mix(in srgb, var(--wp--preset--color--paper) 80%, transparent); }
@media (max-width: 559px) {
  .assurance { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--20); }
}

/* ---- Requirements / facts strip — quiet reassurance near the ask -------- */
.facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
  max-width: 60rem;
  margin: var(--wp--preset--spacing--50) auto 0;
  padding: 0;
  list-style: none;
}
.facts__item { position: relative; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); font-weight: 700; }
.facts__item + .facts__item::before {
  content: "·";
  margin-inline-end: var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--line);
}

/* ---- Ghost button — quiet secondary action on dark (e.g. notify-me) ----- */
.btn--ghost {
  background: transparent;
  color: var(--wp--preset--color--paper);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wp--preset--color--paper) 40%, transparent);
}
@media (hover: hover) {
  .btn--ghost:hover { background: color-mix(in srgb, var(--wp--preset--color--paper) 10%, transparent); color: var(--wp--preset--color--paper); }
}

/* ---- Hero h1 — display size (40 / 51 / 65px by breakpoint) --------------- */
/* Set explicitly rather than via the theme.json 4xl preset: WP's generated preset
   var isn't resolving on the page, so both .has-4xl-font-size and the base h1 rule
   fell through to the inherited 21px. The 4xl preset stays in theme.json as the
   intended source for when the global-styles emit is fixed. */
.section--hero .hero__title { font-size: 2.5rem; }                                  /* 40px — mobile */
@media (min-width: 834px)  { .section--hero .hero__title { font-size: 3.1875rem; } } /* 51px — tablet */
@media (min-width: 1200px) { .section--hero .hero__title { font-size: 4.0625rem; } } /* 65px — desktop+ */

/* ---- Hero h1 — brand gradient text (coral-h1 gradient, from theme.json) --- */
/* Source of truth is the theme.json gradient preset; the literal fallback keeps the
   title visible if WP's global-styles var isn't emitted yet (stale theme.json cache),
   since an empty background-image would clip to nothing and hide the text.
   @supports-guarded so unsupported browsers keep the solid paper title. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .section--hero#overview .hero__title,
  .bottom-nav__link.is--cta {
    background-image: var(--wp--preset--gradient--coral-h1, linear-gradient(180deg, #ee997c 0%, #ed7559 100%));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* ---- iOS bottom sheet — slide-up modal (the notify form) --------------- */
.sheet { position: fixed; inset: 0; z-index: 300; }
.sheet[hidden] { display: none; }
.sheet__scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
  opacity: 0;
  transition: opacity var(--ios-duration-base) var(--ios-ease-out);
  cursor: pointer;
}
.sheet__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin-inline: auto;
  width: 100%;
  max-width: 34rem;
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--paper);
  border-radius: var(--ios-radius-xl) var(--ios-radius-xl) 0 0; /* top corners only (mobile sheet); ≥768px rounds all four */
  box-shadow: var(--ios-elevation-sheet);
  transform: translateY(100%);
  transition: transform var(--ios-duration-base) var(--ios-ease-out);
}
.sheet--open .sheet__scrim { opacity: 1; }
.sheet--open .sheet__panel { transform: translateY(0); }
.sheet__grabber {
  flex: none;
  box-sizing: content-box;
  width: 2.25rem;
  height: 5px;
  /* transparent padding enlarges the swipe target; the visible bar stays 2.25rem × 5px */
  padding: 10px 22px;
  margin: var(--wp--preset--spacing--20) auto 0;
  border-radius: var(--ios-radius-capsule);
  background: var(--wp--preset--color--line);
  background-clip: content-box;
  position: relative;
  z-index: 10;
  touch-action: none;   /* JS owns the vertical drag (swipe-down to dismiss) */
  cursor: grab;
}
.sheet__close {
  position: absolute;
  z-index: 10;          /* above any Gravity Forms element that establishes a stacking context */
  inset-block-start: var(--wp--preset--spacing--30);
  inset-inline-end: var(--wp--preset--spacing--30);
  width: var(--ios-tap-min);
  height: var(--ios-tap-min);
  display: grid;
  place-items: center;
  border-radius: var(--ios-radius-capsule);
  background: var(--wp--preset--color--sand);
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--lg);
  line-height: 1;
  cursor: pointer;
}
.sheet__close > span { pointer-events: none; } /* taps always land on the button, not the glyph */
.sheet__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50)
           max(var(--wp--preset--spacing--50), var(--ios-safe-bottom));
}
.sheet__title { margin: 0 0 var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--2xl); }
.sheet__lead { margin: 0 0 var(--wp--preset--spacing--40); color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--base); }
@media (prefers-reduced-motion: reduce) {
  .sheet__scrim, .sheet__panel { transition: none; }
}

/* Phone: full-bleed slide-up. Bleed the square bottom a little below the fold so no
   rounded corner or white seam shows under the browser chrome / home indicator. */
@media (max-width: 767px) {
  .sheet__panel {
    max-width: none;
    inset-block-end: calc(-1 * var(--wp--preset--spacing--50));
    padding-block-end: var(--wp--preset--spacing--50);
  }
}

/* iPad portrait and up: a floating card on the dimmed page (Apple HIG sheet anatomy) —
   rounded on all four corners, centred, sized to its content. */
@media (min-width: 768px) {
  .sheet { display: flex; align-items: center; justify-content: center; }
  .sheet__panel {
    position: relative;
    inset: auto;
    margin: 0;
    width: 100%;
    max-width: 30rem;
    max-height: min(86svh, 42rem);
    border-radius: var(--ios-radius-xl);
    transform: translateY(1.5rem);
    opacity: 0;
    transition: transform var(--ios-duration-base) var(--ios-ease-out),
                opacity var(--ios-duration-base) var(--ios-ease-out);
  }
  .sheet--open .sheet__panel { transform: translateY(0); opacity: 1; }
  .sheet__grabber { display: none; } /* drag-to-dismiss is a phone affordance */
}

/* ---- Display (4xl) size — fallback for .has-4xl-font-size headings -------- */
/* WP's generated .has-4xl-font-size rule (!important, driven by the theme.json
   preset var) isn't reaching the page yet, so this keeps every 4xl heading at
   40 / 51 / 65px instead of collapsing to the inherited size. Placed last so it
   wins source-order over the chapter/statement rules; when WP emits the preset,
   its !important rule takes over (same 40–65 range). */
.has-4xl-font-size { font-size: 2.5rem; }                                  /* 40px — mobile */
@media (min-width: 834px)  { .has-4xl-font-size { font-size: 3.1875rem; } } /* 51px — tablet */
@media (min-width: 1200px) { .has-4xl-font-size { font-size: 4.0625rem; } } /* 65px — desktop+ */

/* ---- Device-framed video — screen recording inside an empty iPhone frame -- */
/* The frame <img> defines the box + aspect; the <video> sits in the screen cutout
   behind it, rounded so its corners stay inside the frame. Insets/radius are the
   measured cutout of the iPhone 17 Pro Max frame — tunable per frame via these vars. */
.device-video {
  --dv-inset-x: 5.1%;    /* left/right bezel */
  --dv-inset-y: 2.2%;    /* top/bottom bezel */
  --dv-radius: 13% / 6%; /* two-value → stays circular as the box scales */
  position: relative;
  z-index: 1;
  width: min(var(--device-w, 300px), 90vw);
  max-width: 320px; /* never bigger than roughly life-size (matches .device's cap; a touch
                       above 300px since this is the larger Pro Max frame + its transparent margin) */
  margin-inline: auto;
}
.device-video__frame {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: var(--ios-device-shadow);
}
.device-video__screen {
  
  position: absolute;
  z-index: 0;
  inset-block: var(--dv-inset-y);
  inset-inline: var(--dv-inset-x);
  width: 90%;
  height: auto;
  object-fit: cover;
  border-radius: var(--dv-radius);
  background: var(--wp--preset--color--ink);
}
/* Hero: the framed video takes the same responsive widths the static device had. */
.section--hero .device-video { --device-w: min(360px, 84vw); }
@media (min-width: 834px)  { .section--hero .device-video { --device-w: 460px; } }
@media (min-width: 1200px) { .section--hero .device-video { --device-w: 520px; } }

/* Life-size phones on every screen larger than a phone — static shots AND the framed
   video, across all contexts. The old ~300–320px cap read small on dense tablet
   displays (iPad especially), so from 600px up the device holds one consistent
   real-world size instead of shrinking. Wins over the per-context --device-w widths;
   below 600px (actual phones) the showcase device still goes edge-to-edge (rule below). */
@media (min-width: 600px) {
  .device,
  .device-video,
  .section--hero .device,
  .section--hero .device-video,
  .hero-video .device-video,
  .showcase--immersive .device,
  .showcase__media .device,
  .showcase__media .device-video { width: 360px; max-width: 360px; } /* ~life-size for the 17 Pro Max frame; 400 read slightly large on laptops */
}

/* Tablet+ docks the nav at the top with the app icon + name, so the hero's identity
   lockup is a duplicate there — hide it. Phone keeps it (nav starts hidden on load). */
@media (min-width: 834px) {
  .section--hero .hero__identity { display: none; }
}

/* ---- Hero video switcher — two recordings crossfaded, with play controls -- */
.hero-video {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--wp--preset--spacing--40);
}
.hero-video__ui { display: flex; flex-direction: column; align-items: center; gap: var(--wp--preset--spacing--30); }

/* Both screens stack in the cutout and crossfade on switch (both keep playing). */
.device-video--switch .device-video__screen {
  opacity: 0;
  transition: opacity var(--ios-duration-base) var(--ios-ease-out);
}
.device-video--switch .device-video__screen.is-active { opacity: 1; }

/* iOS segmented control (dark hero) with a sliding, colour-changing active indicator. */
.segmented {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: var(--ios-radius-md);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 14%, transparent);
}
/* The pill that slides between segments; JS sets its width + translateX to the active
   button. Rich coral under Air Fill, light under Airtable-in-Safari. */
.segmented__ind {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: calc(var(--ios-radius-md) - 3px);
  background: var(--wp--preset--color--paper);
  transition: transform var(--ios-duration-base) var(--ios-ease-out),
              width var(--ios-duration-base) var(--ios-ease-out),
              background-color var(--ios-duration-base) var(--ios-ease-out);
  pointer-events: none;
  z-index: 0;
}
.segmented[data-active="airfill"] .segmented__ind { background: var(--wp--preset--color--coral); }
.segmented__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--ios-control-height);
  padding-inline: var(--wp--preset--spacing--40);
  border: 0;
  border-radius: calc(var(--ios-radius-md) - 3px);
  background: transparent;
  color: color-mix(in srgb, var(--wp--preset--color--paper) 82%, transparent);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--sm);
  cursor: pointer;
  transition: color var(--ios-duration-fast) var(--ios-ease-out);
}
.segmented__btn.is-active { color: var(--wp--preset--color--ink); }
.segmented__icon { width: 20px; height: 20px; border-radius: 22%; flex: none; }
@media (prefers-reduced-motion: reduce) {
  .segmented__ind { transition: none; }
}

/* Play / restart controls. */
.hero-video__controls { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.hero-video__ctrl {
  display: grid;
  place-items: center;
  width: var(--ios-control-height);
  height: var(--ios-control-height);
  border: 0;
  border-radius: var(--ios-radius-capsule);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 12%, transparent);
  color: var(--wp--preset--color--paper);
  cursor: pointer;
  transition: background-color var(--ios-duration-fast) var(--ios-ease-out);
}
@media (hover: hover) {
  .hero-video__ctrl:hover { background: color-mix(in srgb, var(--wp--preset--color--paper) 20%, transparent); }
}
.hero-video__i { display: block; width: 20px; height: 20px; fill: currentColor; }
.hero-video__i--play { display: none; }
.hero-video__ctrl.is-paused .hero-video__i--pause { display: none; }
.hero-video__ctrl.is-paused .hero-video__i--play { display: block; }

/* ---- Hero CTAs: stack full-width on small screens (cleaner than wrapping) --- */
@media (max-width: 559px) {
  .section--hero .hero__actions { flex-direction: column; align-items: stretch; }
  .section--hero .hero__actions .btn--link { display: none; } /* phone: primary CTA only */
}

/* ---- Mobile: hero + chapter devices go nearly edge-to-edge --------------- */
/* Overrides the life-size sizing on ACTUAL PHONES only (<600px) — a device recording
   reads best big there. From 600px up, the min-width:600px rule above holds a
   consistent life-size instead (iPad included). */
@media (max-width: 599px) {
  .showcase__media .device,
  .showcase__media .device-video { width: 94vw; max-width: 94vw; }
}

/* ---- Sub-page repeat control ------------------------------------------- */
/* Reused "mini-homepage" sections carry [data-kkb-reused]. When the visitor already saw
   the home page this session, the header script sets html.kkb-trim and we hide them — so
   internal navigators don't re-read the same bands. Always present in the HTML, so
   crawlers / no-JS get the full page. */
html.kkb-trim [data-kkb-reused] { display: none; }

/**
MISC UTILITIES
**/
.text-redacted {
  filter: blur(7px);
  -webkit-filter: blur(7px);
  pointer-events: none;
    /* Prevent text selection in iOS Safari and other modern browsers */
  -webkit-user-select: none; /* Safari, iOS Safari */
  user-select: none;         /* Standard syntax */
  
  /* Disable the native iOS long-press callout menu (copy/paste pop-up) */
  -webkit-touch-callout: none; 
}