/* ============================================================
   Pick One · website v0
   Implements "Pick One Agents/Website/00_Homepage.pdf" (desktop)
   and "00_Homepage_Mobile.pdf" (mobile).

   Every colour below was sampled out of the client's own artwork —
   the exported mockups and the App Store screenshots in
   "Pick One Agents/Product Images/6.5_*.jpg" — not invented.
   See ../DESIGN-COMPLIANCE.md for the source-to-token table.
   ============================================================ */

/* ---------- 1 · Fonts -------------------------------------- */
/* Type in the mockups is outlined (Type 3), so the family name is
   not recoverable from the PDF. Gabarito + Figtree were chosen by
   rendering the same strings side by side against 288-dpi crops of
   the mockup; they were the closest free, self-hostable match.
   Substitution, not an exact identification — documented in
   ../DESIGN-COMPLIANCE.md §Type. */
@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2 · Tokens ------------------------------------- */
:root {
  --white: #ffffff;
  --black: #000000;
  /* Brand — from the official palette PDF, confirmed against the app */
  --coral: #f06858; /* primary / CTA          6.5_01, 6.5_08 */
  --coral-deep: #d9503f; /* pressed, focus ring, and coral TEXT on
                               cream — brand coral on cream is 2.91:1  */
  --coral-lift: #f58274; /* coral on the charcoal footer (5.0:1)   */
  --coral-ink: #b8402d; /* coral text on a pale-coral chip (4.8:1);
                               the app's own chip pairing is ~3.5:1    */
  --amber: #fcbd4c; /* secondary               6.5_05, 6.5_10 */
  --pink: #f4a9b0; /* category · values       6.5_02, 6.5_09 */
  --teal: #97c1bf; /* category · family       6.5_04, 6.5_07 */
  --blue: #92aec6; /* category · friendships       6.5_06 */
  --green: #c0cb6d; /* checklist ticks       homepage mockup */
  --violet: #b39ddb; /* category · memories          6.5_04 */

  /* Ground */
  --paper: #ffffff;
  --cream: #fef8ec; /* problem band                         */
  --mist: #f8f9fa; /* testimonial band                     */
  --chip: #e9ecef; /* inactive tabs                        */
  --pill: #f7f7f7; /* checklist rows                       */
  --charcoal: #333333; /* footer                               */

  /* Hero wash */
  --hero-cream: #fefbf5;
  --hero-peach: #fcece5;

  /* Ink */
  --ink: #1a1a1a; /* headlines                            */
  --body: #302f2e; /* body copy                            */
  --muted: #6e6b67; /* captions, legal                      */
  --faint: #74716d; /* "Yours forever. No subscriptions." — the
                               mockup's pale grey measures 2.6:1 on white;
                               this is the lightest grey that clears 4.5:1  */
  --line: rgba(26, 26, 26, 0.1);

  /* Type */
  --display: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Space — 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Radii — three steps plus a pill. Pick by size of the thing:
     sm = controls and small buttons, md = cards and media,
     lg = full-width panels. Do not add a fourth. */
  --r-sm: 0.75rem;
  --r-md: 1.25rem;
  --r-lg: 1.75rem;
  --r-pill: 62.5rem;

  --shadow-card:
    0 1px 2px rgba(26, 26, 26, 0.04), 0 12px 32px -12px rgba(26, 26, 26, 0.12);
  --shadow-float:
    0 2px 6px rgba(26, 26, 26, 0.06), 0 22px 48px -18px rgba(26, 26, 26, 0.22);
  --shadow-nav: 0 1px 0 var(--line), 0 8px 24px -18px rgba(26, 26, 26, 0.5);

  --container: 80rem; /* 1280px content inside a 1440 canvas  */
  --nav-h: 5.25rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 3 · Reset -------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0;
}
img,
svg,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
/* Phosphor paths carry no fill of their own, so without this every icon
   renders black instead of taking the colour of the thing it sits in. */
svg {
  fill: currentColor;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Any component that sets its own `display` silently defeats the UA's
   `[hidden] { display: none }` — which is exactly how the collections filter
   ended up hiding nothing. Make the attribute win. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}
/* Underline links inside running copy only — never nav, cards or footer. */
.prose a,
.different__prose a,
.band-close a,
.strata a,
.voice__quote a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

:focus-visible {
  outline: 3px solid var(--coral-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-coral :focus-visible,
.on-amber :focus-visible {
  outline-color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 200;
  transform: translate(-50%, -120%);
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 600;
}
.skip-link:focus {
  transform: translate(-50%, 0);
}

/* ---------- 4 · Layout primitives --------------------------- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* 96px top and bottom at desktop pushed five homepage blocks past one
   viewport. 72px is the standard rhythm; blocks fit a 900px screen. */
.section {
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

.section--cream {
  background: var(--cream);
}
.section--mist {
  background: var(--mist);
}
.section--tight {
  padding-block: var(--s-7);
}

/* Two-column split: copy beside media. Mobile stacks copy first. */
.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
/* Grid items default to min-width:auto, so a track gets sized by the widest
   thing inside it. With a carousel in the column that meant the item grew to
   the full width of all its cards (2857px inside a 375px phone), the rail
   stopped scrolling, and body{overflow-x:clip} hid the evidence. */
.split > * {
  min-width: 0;
}
@media (min-width: 60rem) {
  .split {
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }
  .split--wide-copy {
    grid-template-columns: minmax(0, 32rem) minmax(0, 1fr);
  }
  /* Media on the left, copy on the right — the "Just one question" row. */
  .split--flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: center;
  }
}

/* ---------- 5 · Type scale ---------------------------------- */
/* These carry the whole display treatment, not just a size, so a <p>
   used as a display line looks identical to an <h2>. */
.h-hero,
.h-1,
.h-2,
.h-3 {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.h-hero {
  font-size: clamp(2.6rem, 7.2vw, 4.35rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.h-1 {
  font-size: clamp(2rem, 4.4vw, 2.75rem);
  line-height: 1.12;
}
.h-2 {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  line-height: 1.16;
}
.h-3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.24;
}

.lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: var(--body);
}
.prose {
  max-width: 34rem;
}
.prose > * + * {
  margin-top: 1em;
}
.measure-wide {
  max-width: 58rem;
}
.small {
  font-size: 0.9375rem;
}
.muted {
  color: var(--muted);
}
.center {
  text-align: center;
}
.center-x {
  margin-inline: auto;
}

/* ---------- 6 · Buttons ------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  /* 19px, deliberately. White on brand coral is 3.08:1 — it clears WCAG AA
     at the large-text threshold (>=18.66px bold) and fails below it. Sizing
     up keeps Justyna's exact coral instead of darkening every button on the
     page. See ../DESIGN-COMPLIANCE.md §Contrast. */
  font-size: 1.1875rem;
  letter-spacing: -0.005em;
  padding: 0.85rem 1.6rem;
  border-radius: var(--r-pill);
  background: var(--coral);
  color: #fff;
  transition:
    background 0.18s var(--ease),
    transform 0.18s var(--ease);
  text-align: center;
}
.btn:hover {
  background: var(--coral-deep);
}
.btn:active {
  transform: translateY(1px);
}

.btn--block {
  display: flex;
  width: 100%;
}
.btn--wide {
  border-radius: var(--r-sm);
  padding: 1rem 1.5rem;
  justify-content: space-between;
}
.btn--sm {
  padding: 0.72rem 1.2rem;
  font-size: 1.1875rem;
} /* size, not colour — see .btn */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover {
  background: var(--pill);
}

/* Circular carousel controls — mockup: pale coral back, solid coral forward */
.rail-nav {
  display: flex;
  gap: 0.75rem;
}
.rail-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fdeae7;
  color: var(--coral);
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    opacity 0.18s;
}
.rail-btn--next {
  background: var(--coral);
  color: #fff;
}
.rail-btn:hover {
  background: var(--coral-deep);
  color: #fff;
}
.rail-btn[disabled] {
  opacity: 0.35;
  cursor: default;
}
.rail-btn[disabled]:hover {
  background: #fdeae7;
  color: var(--coral);
}
.rail-btn--next[disabled]:hover {
  background: var(--coral);
  color: #fff;
}
.rail-btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* ---------- 7 · Header -------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  transition: box-shadow 0.2s var(--ease);
}
.nav[data-stuck="true"] {
  box-shadow: var(--shadow-nav);
}

.nav__inner {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
.nav__logo {
  margin-right: auto;
}
.nav__logo img {
  height: 2.85rem;
  width: auto;
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2.6vw, 2.15rem);
}
.nav__links a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  padding-block: 0.4rem;
  border-bottom: 2px solid transparent;
  transition:
    color 0.16s var(--ease),
    border-color 0.16s var(--ease);
}
.nav__links a:hover {
  color: var(--coral);
  border-bottom-color: var(--coral);
}

.nav__cta {
  display: none;
}

.nav__burger {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  color: var(--coral);
  margin-left: auto;
}
.nav__burger svg {
  width: 1.9rem;
  height: 1.9rem;
}

@media (min-width: 62rem) {
  .nav__links {
    display: flex;
  }
  .nav__cta {
    display: inline-flex;
  }
  .nav__burger {
    display: none;
  }
  .nav__logo {
    margin-right: 0;
  }
  .nav__links {
    margin-inline: auto;
  }
}

/* Mobile drawer — a plain <details>-free disclosure so it works
   without JS too (the button is hidden when JS is off). */
.nav__drawer {
  display: none;
  border-top: 1px solid var(--line);
  background: #fff;
  padding: var(--s-4) 0 var(--s-5);
}
.nav__drawer[data-open="true"] {
  display: block;
}
.nav__drawer a {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  padding: 0.7rem 0;
  color: var(--ink);
}
.nav__drawer .btn {
  margin-top: var(--s-4);
}
@media (min-width: 62rem) {
  .nav__drawer {
    display: none !important;
  }
}

/* ---------- 8 · Hero ---------------------------------------- */
.hero {
  position: relative;
  background:
    radial-gradient(
      90rem 46rem at 88% 6%,
      var(--hero-peach) 0%,
      rgba(252, 236, 229, 0) 62%
    ),
    linear-gradient(178deg, var(--hero-cream) 0%, #fdfaf4 46%, #ffffff 100%);
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(1rem, 2vw, 1.75rem);
  overflow: hidden;
}
.hero__head {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
}
.hero__sub {
  margin-top: var(--s-5);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
@media (min-width: 60rem) {
  .hero__sub {
    margin-inline: auto;
    max-width: 44rem;
    text-align: center;
  }
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
  justify-content: center;
}
@media (min-width: 60rem) {
  .hero__cta {
    justify-content: center;
  }
}

/* Stage — device centred, real DOM cards floated around it.
   Mobile keeps the cards but tucks them to the edges. */
.stage {
  position: relative;
  margin-top: clamp(1.5rem, 4vw, 2.75rem);
  margin-bottom: 0;
  display: grid;
  place-items: center;
  min-height: 24rem;
}
.stage__device {
  width: clamp(12rem, 42vw, 16.5rem);
  /* The device images carry their own rounded iPhone body on a transparent
     canvas, so a box-shadow would draw a rectangle behind it and a border-radius
     would clip the rail corners. drop-shadow follows the silhouette. */
  filter: drop-shadow(0 24px 44px rgba(26, 26, 26, 0.18));
  position: relative;
  z-index: 2;
  margin-bottom: 0;
  display: block;
}

.float {
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  padding: 1.15rem 1.35rem;
  position: absolute;
  z-index: 3;
}
.float--q {
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--body);
  text-align: center;
  max-width: 19rem;
}
.float--who {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.6rem 0.85rem 0.85rem;
}
.float--who img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.float__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.float__role {
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.3;
}

.float--tag {
  background: var(--coral);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1875rem; /* large-text threshold, as .btn */
  border-radius: var(--r-pill);
  padding: 0.55rem 1.15rem;
  box-shadow: 0 12px 24px -12px rgba(240, 104, 88, 0.9);
}

/* Placement. Anchor from the centered device so cards maintain an exact,
   balanced distance on both sides without overlapping the phone. */
.f-emma {
  top: 3%;
  right: calc(50% + 11.5rem);
  left: auto;
}
.f-spin {
  top: 34%;
  right: calc(50% + 10.5rem);
  left: auto;
}
.f-q1 {
  top: 48%;
  right: calc(50% + 10.5rem);
  left: auto;
}
.f-q2 {
  top: 19%;
  left: calc(50% + 10.5rem);
  right: auto;
}
.f-sonia {
  top: 66%;
  left: calc(50% + 11.5rem);
  right: auto;
}
@media (min-width: 60rem) {
  .stage {
    min-height: 33rem;
  }
}
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .f-emma {
    right: calc(50% + 10rem);
  }
  .f-spin {
    right: calc(50% + 9.5rem);
  }
  .f-q1 {
    right: calc(50% + 9.5rem);
  }
  .f-q2 {
    left: calc(50% + 9.5rem);
  }
  .f-sonia {
    left: calc(50% + 10rem);
  }
  .float--q {
    max-width: 15rem;
    font-size: 1rem;
  }
}

@media (max-width: 47.99rem) {
  /* The mockup's phone is ~61% of the mobile canvas; the cards ring it without
     covering the wheel, which is the one thing that has to stay readable. */
  .stage {
    min-height: 34rem;
  }
  .stage__device {
    width: min(60vw, 15rem);
  }
  .float {
    padding: 0.8rem 0.95rem;
    box-shadow:
      0 2px 5px rgba(26, 26, 26, 0.06),
      0 14px 30px -14px rgba(26, 26, 26, 0.3);
  }
  .float--q {
    font-size: 0.875rem;
    max-width: 12.5rem;
  }
  .float--who {
    padding: 0.7rem 1.1rem 0.7rem 0.7rem;
  }
  .float--who img {
    width: 2.4rem;
    height: 2.4rem;
  }
  .float__name {
    font-size: 0.9375rem;
  }
  .float__role {
    font-size: 0.85rem;
  }
  .float--tag {
    padding: 0.45rem 0.95rem;
    font-size: 1.1875rem;
  }
  /* Reset the desktop side anchors: a card pinned on both sides gets squeezed
     to a one-word-per-line sliver. */
  .f-emma {
    top: 0;
    left: 0;
    right: auto;
  }
  .f-q2 {
    top: 7%;
    right: -0.5rem;
    left: auto;
  }
  .f-spin {
    top: 31%;
    left: -0.25rem;
    right: auto;
  }
  .f-sonia {
    top: 57%;
    right: -0.5rem;
    left: auto;
  }
  .f-q1 {
    bottom: 1%;
    top: auto;
    left: -0.5rem;
    right: auto;
  }
  .float--tag {
    white-space: nowrap;
  }
}
@media (max-width: 22.49rem) {
  /* Narrowest phones: Emma and the top question can't share a row. */
  .f-q2 {
    top: 13%;
    max-width: 11.5rem;
  }
}
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .float--q {
    max-width: 15rem;
    font-size: 1rem;
  }
}

/* ---------- 9 · Reel (problem carousel, audience rail) ------- */
.reel {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.reel::-webkit-scrollbar {
  display: none;
}
.reel > * {
  scroll-snap-align: start;
  flex: none;
}
/* One card at a time on phones, so equal heights only stretch the short ones
   into a column of empty space. Let them size to their own content there. */
@media (max-width: 47.99rem) {
  .reel {
    align-items: flex-start;
  }
}

/* Problem carousel: one slide fills the media column */
.slides {
  width: 100%;
}
.slides > .slide {
  width: 100%;
}
.slide__media {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--pill);
}
.slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 12b · Three-part story scroll -------------------- */
.story-section {
  overflow: hidden;
}
.story {
  gap: 0;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  border-radius: var(--r-lg);
}
.story__row {
  width: 100%;
  min-width: 100%;
  display: grid;
  gap: var(--s-6);
  align-items: center;
  scroll-snap-align: start;
  padding: clamp(1rem, 2vw, 1.75rem) 0;
}
.story__row > * {
  min-width: 0;
}
.story__copy {
  position: relative;
  z-index: 1;
}
.story__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #fff;
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.story__media--cutout {
  aspect-ratio: 16 / 10;
  overflow: visible;
  border-radius: 0;
  background: #fff;
}
.story__media--cutout img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story-controls {
  justify-content: space-between;
}
.story-controls .reel-count {
  color: var(--green);
}

@media (min-width: 60rem) {
  .story__row {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    min-height: 34rem;
  }
  .story__media--cutout {
    width: 112%;
    margin-left: -6%;
    transform: translateY(-3.75rem);
  }
}

@media (max-width: 59.99rem) {
  .story__row {
    align-content: start;
  }
  .story__media--cutout {
    aspect-ratio: 5 / 3;
  }
}

/* The "We stopped asking..." list is the turn that answers the story above it,
   so the two close up instead of reading as separate chapters. */
#story {
  padding-bottom: var(--s-6);
}
#story + .section--tight {
  padding-top: var(--s-5);
}

.problem-copy__body {
  margin-top: var(--s-5);
}
.problem-copy__body p + p {
  margin-top: 0.9em;
}
.reel-controls {
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.reel-count {
  font-family: var(--display);
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 10 · Checklist rows ----------------------------- */
.checks {
  display: grid;
  gap: var(--s-3);
  max-width: 56rem;
  margin-inline: auto;
}
.check {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--pill);
  border-radius: var(--r-md);
  padding: 1.1rem 1.35rem;
  font-size: 1.0625rem;
}
.check__tick {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.6rem;
  background: var(--green);
  display: grid;
  place-items: center;
  color: #fff;
}
.check__tick svg {
  width: 1.15rem;
  height: 1.15rem;
}

.pivot {
  text-align: center;
  margin-top: var(--s-7);
}
/* In the split, the list fills its column and the pivot line sits under it
   rather than under the whole page. */
.split .checks {
  max-width: none;
  margin-inline: 0;
}
.split .pivot {
  text-align: left;
  margin-top: var(--s-6);
}

/* ---------- 10b · App scene -------------------------------
   Justyna's 2026-08-02 comment asked to see the app in the problem
   statement. Same discipline as everywhere else on this site: the plate is
   generated colour, the device is a real render of the real app, and the
   question cards are real DOM carrying real app content. Nothing here draws
   a fake UI. -------------------------------------------------------------- */
.appscene {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.appscene__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Absolutely positioned on purpose: as a grid item the row is content-sized,
   so `height: 82%` is cyclic, resolves to auto, and the device renders at its
   intrinsic 1062px and gets clipped by the scene. */
.appscene__device {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  height: 84%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 26px 46px rgba(26, 26, 26, 0.24));
}

/* Question card — the app's own card: pale category pill above the question */
.qcard {
  position: absolute;
  z-index: 2;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: var(--shadow-float);
  padding: 0.8rem 0.95rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--body);
  max-width: min(13rem, 42%);
}
.qcard__cat {
  display: block; /* inline-block would flow into the question */
  width: fit-content;
  margin-bottom: 0.45rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  background: #fdedea;
  color: var(--coral-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.3;
}
.qcard--a {
  top: 9%;
  right: 2%;
}
.qcard--b {
  bottom: 11%;
  left: 2%;
}

@media (max-width: 47.99rem) {
  /* Square on phones, not portrait: the plate is a 4:3 photograph, and a 4:5
     box cover-crops ~30% off each side, which cuts both people out of their
     own scene. 1:1 crops 12.5% a side and keeps them. */
  .appscene {
    aspect-ratio: 1 / 1;
  }
  .appscene__device {
    height: 88%;
  }
  /* One card, not two. A 342px box holding a 156px phone plus two 150px cards
     is "there's so much on the table" — the failure mode Justyna named. The
     second question is decorative repetition, so it goes on phones. */
  .qcard {
    font-size: 0.8125rem;
    padding: 0.6rem 0.75rem;
    max-width: min(9.5rem, 44%);
  }
  .qcard--a {
    top: 2%;
    right: 0;
  }
  .qcard--b {
    display: none;
  }
}

/* ---------- 11 · Problem band (cream) ----------------------- */
.strata {
  display: grid;
  gap: var(--s-6);
}
.strata__label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--coral-deep); /* brand coral here is 2.91:1 on cream */
  margin-bottom: 0.4rem;
}
.strata p {
  max-width: 44rem;
}

.band-close {
  margin-top: var(--s-8);
  text-align: center;
  max-width: 58rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.band-close strong {
  font-family: var(--display);
  color: var(--ink);
}

/* ---------- 12 · Audience cards ----------------------------- */
.who-card {
  position: relative;
  width: min(20rem, 78vw);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
/* 4:3 is the shape these photographs were shot at. Squaring them off used to
   slice a face away at the card edge (her rule, 2026-09-03: show the full
   picture), so the frame follows the photo instead of the other way round. */
.who-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.who-card:hover > img {
  transform: scale(1.04);
}
.who-card__bar {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1.25rem 1.15rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(
    180deg,
    rgba(20, 16, 14, 0) 0%,
    rgba(20, 16, 14, 0.72) 55%,
    rgba(20, 16, 14, 0.86) 100%
  );
}
.who-card__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
/* The card the paired copy on the left belongs to. The others stay legible,
   they just stop competing for the eye. */
.js #who-reel .who-card {
  transition: opacity 0.32s var(--ease);
}
.js #who-reel .who-card[data-current="false"] {
  opacity: 0.72;
}
.js #who-reel .who-card[data-current="false"]:hover {
  opacity: 0.9;
}

/* Intro line under the section head: her paragraph, moved out of the left
   column so it reads as part of the section opening. */
#who.section {
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
}
.who-head {
  max-width: 38rem;
  margin-inline: auto;
  text-align: center;
}
.who-head #who-title {
  max-width: 100%;
}
.who-head .lead,
.who-head .who-intro {
  max-width: 38rem;
  margin-inline: auto;
  text-wrap: pretty;
}
.who-intro {
  margin-top: 0.85rem;
  color: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

/* Paired audience copy. Every block sits in the same grid cell, so the
   column keeps the height of the longest one and nothing below it jumps
   when the rail moves. Without JS the blocks simply stack and all read. */
.js .who-copy {
  display: grid;
}
.js .who-copy > p {
  grid-area: 1 / 1;
  margin-top: 0;
  transition: opacity 0.32s var(--ease);
}
.js .who-copy > p[hidden] {
  /* kept for height; !important because the global [hidden] rule above is
     !important too — without it the hidden blocks collapse and the column
     (and the arrows under it) jumps with every slide */
  display: block !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* The audience block ends on two short lines; without this they float in a
   200px void left over from the taller media column. */
#who .band-close {
  margin-top: var(--s-6);
}
.audience-close {
  margin-top: var(--s-5);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  color: var(--ink);
  text-align: right;
}

/* ---------- 13 · "What makes Pick One different" ------------ */
.different__prose {
  max-width: 60rem;
  margin-inline: auto;
  text-align: center;
  font-size: 1.0625rem;
  line-height: 1.62;
}
.different__prose > * + * {
  margin-top: 1.1em;
}
.different__prose strong {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
}
.different__beat {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  letter-spacing: -0.02em;
}
.different__beat--coral {
  color: var(--coral);
}

/* Structure for the opening argument. The three "it's not" lines are one
   parallel triad, so they stack and sit back; the pivot that answers them
   steps forward; the explanation keeps a readable measure rather than
   running the full prose width. Scoped to this section only. */
.different__nots {
  list-style: none;
  margin-inline: auto;
  padding: 0;
  max-width: 46rem;
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
}
.different__pivot {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}
.different__setup {
  color: var(--muted);
}
.different__narrow {
  max-width: 44rem;
  margin-inline: auto;
}

/* Bind each lead-in to the beat it introduces, and give the coral turn its
   own breathing room before the list of swaps. */
.different__prose > .different__setup + .different__beat {
  margin-top: 0.45em;
}
.different__prose > .different__beat + .different__narrow {
  margin-top: 0.7em;
}
.different__prose > .different__pivot {
  margin-top: 1.5em;
}
.different__prose > .different__beat--coral {
  margin-top: 1.6em;
}

.swaps {
  display: grid;
  gap: var(--s-3);
  max-width: 48rem;
  margin: var(--s-7) auto 0;
  text-align: left;
}
.swap {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: var(--pill);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  font-size: 1rem;
  line-height: 1.45;
}
.swap__tick {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.1rem;
  border-radius: 0.5rem;
  background: var(--amber);
  color: #fff;
  display: grid;
  place-items: center;
}
.swap__tick svg {
  width: 0.95rem;
  height: 0.95rem;
}

.different__media {
  margin-top: var(--s-8);
}
.different__media img {
  margin-inline: auto;
  width: min(62rem, 100%);
}

/* ---------- 14 · Flagship product cards --------------------- */
.flagship {
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 54rem) {
  .flagship {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6);
  }
}

.pcard {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(26, 46, 34, 0.1);
}
.pcard__img-wrap {
  width: calc(100% + 2 * clamp(1.5rem, 3vw, 2.25rem));
  margin-top: calc(-1 * clamp(1.5rem, 3vw, 2.25rem));
  margin-inline: calc(-1 * clamp(1.5rem, 3vw, 2.25rem));
  margin-bottom: var(--s-4);
  aspect-ratio: 1000 / 806;
  overflow: hidden;
  background: #fbf0dd;
  position: relative;
}
/* Both flagship packshots are exactly 1000x806, so the frame is that ratio and
   a contained photo fills it edge to edge: nothing cropped and no mat. A 4:3
   frame left a 28px cream strip down each side while the top and bottom sat
   flush, which read as letterboxing rather than as a mount. The shared rule
   further down keeps `object-fit: contain` here, which is what guarantees a
   future packshot of another shape is still never cropped. */
.pcard__img {
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
}
.pcard:hover .pcard__img {
  transform: scale(1.04);
}
/* The mockup floats a very pale house mark behind the card. */
.pcard::before {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 22rem;
  height: 22rem;
  background: url("pick-one-mark-coral.svg") no-repeat center / contain;
  opacity: 0.045;
  pointer-events: none;
}
.pcard > * {
  position: relative;
}
/* Her prototype sets the wordmark clear of the plan name, not stacked on it. */
.pcard__mark {
  height: 2.75rem;
  width: auto;
  align-self: flex-start;
}
.pcard__name {
  margin-top: var(--s-4);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ink);
}
.pcard__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--coral);
  letter-spacing: -0.04em;
  margin-top: 0.4rem;
}
.pcard__terms {
  color: var(--faint);
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}
.pcard__list {
  margin-top: var(--s-5);
  display: grid;
  gap: 0.7rem;
}
.pcard__list li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 1rem;
}
.pcard__list .tick {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.22rem;
  border-radius: 0.3rem;
  background: var(--amber);
  color: #fff;
  display: grid;
  place-items: center;
}
.pcard__list .tick svg {
  width: 0.7rem;
  height: 0.7rem;
}
.pcard__foot {
  margin-top: auto;
  padding-top: var(--s-6);
}
.pcard__note {
  text-align: center;
  color: var(--faint);
  font-size: 0.875rem;
  margin-top: 0.85rem;
}

/* ---------- 15 · Collections (tabs + grid) ------------------ */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--s-6);
}
.tab {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--r-pill);
  background: #ffffff;
  border: 1.5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: #fff8f6;
}
.tab[aria-selected="true"] {
  background: var(--coral);
  color: #ffffff;
  border-color: var(--coral);
  box-shadow: 0 4px 14px rgba(240, 104, 88, 0.28);
}
.tab[aria-selected="true"] {
  background: var(--amber);
  color: var(--ink);
} /* white here is 1.68:1 */
.tab[aria-selected="true"]:hover {
  background: var(--amber);
}

.grid-3 {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 66rem) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.mcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.75rem 0.75rem 1rem;
  box-shadow: var(--shadow-card);
}
.mcard__media {
  border-radius: 0.85rem;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--pill);
}
.mcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mcard__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--ink);
  margin: var(--s-4) 0.4rem 0;
}
.mcard__desc {
  margin: 0.5rem 0.4rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--body);
}
.mcard__foot {
  margin-top: auto;
  padding: var(--s-5) 0.4rem 0;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: var(--s-6);
}
.dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #d8dade;
  transition: background 0.16s var(--ease);
}
.dot[aria-current="true"] {
  background: var(--coral);
}

/* ---------- 16 · Testimonials ------------------------------- */
.voice {
  width: min(24rem, 82vw);
  background: #fff;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
}
.voice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.voice__mark {
  color: var(--coral);
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 0.6;
  font-weight: 800;
}
.voice__stars {
  display: flex;
  gap: 0.15rem;
  color: var(--amber);
}
.voice__stars svg {
  width: 1rem;
  height: 1rem;
}
.voice__quote {
  margin-top: var(--s-4);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--body);
}
.voice__who {
  margin-top: auto;
  padding-top: var(--s-5);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* Monogram, not a stock face. These are real named buyers from her copy and
   we have no photographs of them; borrowing an unrelated model's face for a
   named testimonial is a fabrication. Swap in real portraits when supplied. */
.voice__monogram {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem; /* large-text threshold on coral */
  color: #fff;
  background: var(--coral);
}
.voice__monogram[data-tone="pink"] {
  background: var(--pink);
  color: #4a2a2e;
}
.voice__monogram[data-tone="amber"] {
  background: var(--amber);
  color: #4a3410;
}
.voice__monogram[data-tone="teal"] {
  background: var(--teal);
  color: #1f3b3a;
}
.voice__monogram[data-tone="blue"] {
  background: var(--blue);
  color: #1f3040;
}
.voice__monogram[data-tone="violet"] {
  background: var(--violet);
  color: #2f2447;
}
.voice__monogram[data-tone="green"] {
  background: var(--green);
  color: #33380f;
}
.voice__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.voice__role {
  display: block;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.3;
}
.voice__verified {
  margin-left: auto;
  color: var(--teal);
  flex: none;
}
.voice__verified svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* ---------- 17 · Marquee ------------------------------------ */
/* The mockup sets this text white on amber, which measures 1.9:1 — not a
   near miss, an illegible one. Ink on the same amber is 10.4:1 and keeps the
   brand colour exactly. Deviation logged in ../DESIGN-COMPLIANCE.md §Contrast. */
.marquee {
  background: var(--amber);
  color: var(--ink);
  overflow: hidden;
  padding-block: 1.15rem;
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marquee__mark {
  height: 1.9rem;
  width: auto;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- 18 · Just one question -------------------------- */
.tonight__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding-inline: clamp(0rem, 6vw, 4rem);
}
.tonight__stage img {
  width: clamp(11rem, 34vw, 18rem);
  filter: drop-shadow(0 26px 44px rgba(26, 26, 26, 0.16));
}
.tonight__bubble {
  position: absolute;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  padding: 0.95rem 1.15rem;
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: min(15rem, 46%);
}
.b-top {
  top: 12%;
  right: 0;
}
.b-bottom {
  bottom: 14%;
  left: 0;
}

/* Below ~768 the phone plus two floating bubbles cannot fit side by side —
   they end up sitting on top of the wheel. Drop them into normal flow. */
@media (max-width: 47.99rem) {
  .tonight__stage {
    padding-inline: 0;
    justify-items: center;
    gap: 1rem;
  }
  .tonight__bubble {
    position: static;
    max-width: 22rem;
    text-align: center;
  }
  .b-top {
    order: -1;
  }
  .b-bottom {
    order: 1;
  }
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--s-6);
}
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: #000;
  color: #fff;
  border-radius: 0.65rem;
  padding: 0.6rem 1.1rem;
  transition: opacity 0.16s var(--ease);
}
.store:hover {
  opacity: 0.82;
}
.store svg {
  width: 1.65rem;
  height: 1.65rem;
  flex: none;
}
.store__lines {
  display: grid;
  line-height: 1.15;
}
.store__sm {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.store__lg {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---------- 19 · Closing CTA card --------------------------- */
.cta-card {
  background: var(--amber);
  border-radius: var(--r-lg);
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem) 1.5rem;
  color: var(--ink);
}
.cta-card__mark {
  height: 4.25rem;
  width: auto;
  margin-inline: auto;
}
.cta-card__line {
  margin-top: var(--s-5);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 3.2vw, 2rem);
  color: var(--ink); /* white on amber is 1.9:1 — see §Contrast */
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.cta-card__line,
.cta-card__body {
  max-width: 40rem;
  margin-inline: auto;
}
.cta-card__body {
  margin-top: var(--s-3);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink);
}
.cta-card .btn {
  margin-top: var(--s-6);
}

/* ---------- 20 · Footer ------------------------------------- */
/* No margin-top: the last section carries its own bottom padding, and a
   margin shows each page's body colour as a stray band above the footer.
   Line-height is set here so the footer does not inherit each page's own. */
.site-footer {
  background: var(--charcoal);
  color: #d7d5d2;
  padding-block: var(--s-8) var(--s-6);
  margin-top: 0;
  line-height: 1.6;
}
.site-footer a:hover {
  color: #fff;
}
.footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 44rem) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 62rem) {
  .footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: var(--s-7);
  }
}

.footer__mark {
  height: 3.1rem;
  width: auto;
}
.footer__tag {
  margin-top: var(--s-4);
  max-width: 22rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #b8b5b1;
}
.footer__head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral-lift); /* brand coral on #333 is 4.11:1 */
  margin-bottom: var(--s-4);
}
.footer__list {
  display: grid;
  gap: 0.65rem;
  font-size: 0.9375rem;
}
.footer__rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin: var(--s-7) 0 var(--s-5);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  font-size: 0.875rem;
  color: #a9a6a2;
}
.footer__social {
  display: flex;
  gap: var(--s-5);
}
/* The same footer ships on every page; the link to the page you are on
   is marked aria-current rather than given its own markup. */
.site-footer a[aria-current="page"] {
  color: #fff;
}
/* Footer links sit at a ~24px hit height, under the 44px touch minimum.
   On coarse pointers they get real padding; on mouse the list keeps its
   tighter rhythm. */
@media (pointer: coarse) {
  .footer__list {
    gap: 0;
  }
  .footer__list a,
  .footer__social a {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
  }
}

/* ---------- 21 · Motion ------------------------------------- */
/* Content must never depend on JavaScript to become visible. The reveal class
   remains as a harmless hook, but the complete page renders immediately even
   when an observer is delayed or unavailable inside an embedded preview. */
.reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee__track {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 25 · Justified text (site-wide) ------------------ */
/* Her standing rule, 2026-08-16: text runs flush from one side to the other.
   This is deliberately a bare element selector, so it only reaches running
   prose — anything with its own alignment (buttons, badges, counters, notes)
   keeps it, because a class rule outranks this one.

   Hyphenation used to be on here to keep the word spacing even. It is now
   off, everywhere, permanently: she flagged "part-ners" on 2026-09-03 and
   "si-lence", "un-happy" and "peo-ple" the same day. A word never breaks
   across a line on this site. The rivers hyphenation was holding back are
   dealt with properly in section 25b instead, by not justifying a column
   that is too narrow to justify. */
p,
li {
  text-align: justify;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Inside centred blocks the last line stays centred, so the composition still
   reads as centred — just flush on both edges instead of ragged. */
:is(
    .center,
    .hero__head,
    .different__prose,
    .cta-card,
    .tonight__stage,
    .social-proof-banner,
    .category-container,
    .statement,
    .quiz-loading__inner,
    .about-hero__lede
  )
  :is(p, li),
.hero__sub {
  text-align-last: center;
}

/* Tick-list chips and other short flex rows are labels, not prose — justifying
   a two-line chip just stretches it. */
:is(.check, .swap, .float, .reel-count, .rail-btn, .tab, .tweak-btn) {
  text-align: start;
  hyphens: manual;
}

/* ---------- 25b · No hanging words (her rule, 2026-09-03) ---- */
/* A paragraph must never end on one lonely word. `pretty` makes the browser
   pull a word down from the line above rather than leave a widow, and it
   costs nothing where it is not supported. */
p,
li,
blockquote,
figcaption,
dd,
.lead {
  text-wrap: pretty;
}

/* No word ever breaks across a line, in any element, at any width. */
* {
  -webkit-hyphens: none;
  hyphens: none;
}

/* ---------- 25c · Flush-text guard, homepage ----------------- */
/* pick-one-ds.css has carried this guard for the sub-pages since
   iteration-48, but the homepage does not load that sheet, so the homepage
   card grids were still being justified at 30-40 characters a line. With
   that few word gaps the browser stretches the ones it has and opens rivers
   of white down the column; with hyphenation now off it would be worse.
   That is what she was looking at on 2026-09-03 when she called the problem
   block sloppy.

   So her flush rule is kept where it physically works — wide running prose —
   and switched off inside cards, list rows, captions, prices and any column
   too narrow to justify. Measured on the served page, not guessed. */
:is(
    .problem-item,
    .who-copy,
    .mv-card,
    .pcard,
    .mini-deck-card,
    .voice,
    .disc-shifts,
    .just-one-q__content,
    .prose,
    .site-footer,
    figcaption,
    blockquote,
    td,
    th,
    dd,
    dt
  )
  :is(p, li, span, div, h2, h3, h4),
:is(p, li):is(
  .pill,
  .chip,
  .eyebrow,
  .note,
  .caption,
  .meta,
  .footnote,
  .shift-item,
  .pcard__price,
  .pcard__terms,
  .footer__tag
) {
  text-align: start;
  text-align-last: auto;
}

/* The CTA card is a centred block, so its narrow lines centre rather than
   ranging left. Same reason, opposite answer. */
.cta-card :is(p, li) {
  text-align: center;
  text-align-last: center;
}

/* Same exception for the reassurance line under a flagship card's button.
   It is one short centred line in her prototype, and the guard above ranges
   every `p` inside `.pcard` to the left, which pulled it off the button. */
.pcard .pcard__note {
  text-align: center;
  text-align-last: center;
}

/* ---------- 26 · Mindvalley Dynamic Question Stream --------- */
.mv-stream {
  position: relative;
  overflow: hidden;
  padding: 3.5rem 0;
  background: var(--cream);
  color: var(--body);
}
.mv-stream__head {
  text-align: center;
  margin-bottom: 2.5rem;
}
.mv-stream__head h2,
.mv-stream__head .h-1,
.mv-stream .mv-stream__head h2,
.mv-stream .mv-stream__head .h-1 {
  color: var(--ink) !important;
}
.mv-stream__head p.lead,
.mv-stream .mv-stream__head p.lead {
  color: var(--body) !important;
}
.mv-stream__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(240, 104, 88, 0.18);
  color: var(--coral-lift);
  border: 1px solid rgba(240, 104, 88, 0.35);
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
/* Cream band, not the old dark forest green (#14221a is not a brand
   colour, and a dark section mid-page reads as a second website). */
.mv-stream {
  background: var(--cream);
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  overflow: hidden;
  position: relative;
}
.mv-stream::before,
.mv-stream::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 3;
  pointer-events: none;
}
.mv-stream::before {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--cream) 0%,
    rgba(254, 248, 236, 0) 100%
  );
}
.mv-stream::after {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--cream) 0%,
    rgba(254, 248, 236, 0) 100%
  );
}

.mv-stream__track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: mv-scroll-left 52s linear infinite;
  will-change: transform;
  align-items: center;
}
.mv-stream__track--reverse {
  animation: mv-scroll-right 55s linear infinite;
  margin-top: 1.5rem;
}
.mv-stream:hover .mv-stream__track {
  animation-play-state: paused;
}
/* The loop step is 9 cards AND 9 gaps, not half the track. Half the track is
   9 cards and 8.5 gaps, because flex puts no gap after the last child, so a
   -50% loop snapped back half a gap (12px) every pass and read as a stutter.
   Both rows carry 9 unique cards, duplicated once. */
.mv-stream__track {
  --mv-card: 280px;
  --mv-gap: 1.5rem;
  --mv-step: calc(9 * (var(--mv-card) + var(--mv-gap)));
}
@keyframes mv-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--mv-step)));
  }
}
@keyframes mv-scroll-right {
  0% {
    transform: translateX(calc(-1 * var(--mv-step)));
  }
  100% {
    transform: translateX(0);
  }
}

/* Card Type 1: Physical Prompt Card */
/* Her note, 2026-09-08: the stream carries questions only, and "they all need
   to have the same size". So the tile is a fixed box, not a min-height that
   each question stretches to its own length. */
.mv-card {
  display: flex;
  flex-direction: column;
  width: var(--mv-card, 280px);
  height: var(--mv-card, 280px);
  aspect-ratio: 1 / 1;
  padding: 1.5rem 1.4rem 1.25rem;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
  text-align: start;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s ease;
}
.mv-card:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: var(--shadow-float);
}

.mv-card__tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.725rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
  align-self: flex-start;
}
.mv-card__tag--coral {
  background: #ffeae8;
  color: #d9503f;
}
.mv-card__tag--amber {
  background: #fff4db;
  color: #b87a00;
}
.mv-card__tag--teal {
  background: #e3f6f5;
  color: #1e7a76;
}
.mv-card__tag--pink {
  background: #fcebee;
  color: #b84360;
}
.mv-card__tag--blue {
  background: #e5f1fc;
  color: #2062a3;
}
.mv-card__tag--sage {
  background: #eff5db;
  color: #5a7322;
}

.mv-card__q {
  font-family: var(--font-display, "Gabarito", sans-serif) !important;
  font-size: 1.12rem !important;
  line-height: 1.42 !important;
  color: #1a2e22 !important;
  margin: 0 !important;
  text-align: start !important;
  font-weight: 700 !important;
}

.mv-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(26, 46, 34, 0.07);
  font-size: 0.72rem;
  color: #88998e;
  font-weight: 600;
}
.mv-card__logo-mark {
  height: 16px;
  width: auto;
  opacity: 0.55;
}

/* Card Type 2: Authentic Phone App Screen / Product Card from Drive */
/* The store-screen tile that used to sit between the questions is gone:
   her note, 2026-09-08, "change the images in this section to questions
   instead". It also carried the open CRITIQUE item about a cropped face. */

/* ---------- 27 · Parent & Teen Dialogue Scene --------------- */
.dialogue-scene {
  background: var(--cream);
  border-radius: var(--rad-lg);
  overflow: hidden;
  border: 1px solid var(--sand);
  margin-top: 2.5rem;
}
.dialogue-scene__stage {
  position: relative;
  width: 100%;
  max-height: 440px;
  overflow: hidden;
}
.dialogue-scene__stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dialogue-bubble {
  position: absolute;
  padding: 0.85rem 1.4rem;
  border-radius: 1.5rem;
  font-weight: 600;
  font-size: 1.15rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.dialogue-bubble--parent {
  top: 18%;
  left: 6%;
  background: var(--white);
  color: var(--ink);
  border-bottom-left-radius: 0.25rem;
}
.dialogue-bubble--teen {
  bottom: 22%;
  right: 6%;
  background: var(--coral);
  color: var(--white);
  border-bottom-right-radius: 0.25rem;
}
.dialogue-scene__copy {
  padding: 2rem;
  background: var(--sand-light, #fdfbf7);
}

/* ---------- 28 · Interactive Spin Wheel Game Demo ----------- */
.game-demo {
  background: var(--white);
  border: 2px solid var(--sand);
  border-radius: var(--rad-lg);
  padding: 2.5rem;
  margin-top: 2.5rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
}
.game-demo__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 800px) {
  .game-demo__inner {
    grid-template-columns: 1fr;
  }
}
.wheel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.wheel-svg-container {
  position: relative;
  width: 260px;
  height: 260px;
  margin-bottom: 1.5rem;
}
.wheel-svg {
  width: 100%;
  height: 100%;
  transition: transform 3.2s cubic-bezier(0.15, 0.9, 0.2, 1);
}
.wheel-pointer {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 22px solid var(--coral);
  z-index: 10;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.wheel-card-result {
  background: var(--cream);
  border: 2px solid var(--coral);
  border-radius: var(--rad-md);
  padding: 2rem;
  box-shadow: 0 8px 30px rgba(240, 104, 88, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  text-align: start;
}
.wheel-card-result .q-cat {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--coral-deep);
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}
.wheel-card-result .q-text {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.wheel-card-result .q-note {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin-top: 1rem;
}

/* ---------- 8b · Modern Disconnection (Slide 2 Direct Layout) --------- */
.disconnection {
  position: relative;
  overflow: hidden;
  min-height: clamp(48rem, 70vw, 63rem);
  background: #f7f5f0;
  padding: clamp(4rem, 7vw, 7rem) 0;
}
.disconnection::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(247, 245, 240, 0.98) 0%,
      rgba(247, 245, 240, 0.92) 44%,
      rgba(247, 245, 240, 0.1) 70%
    ),
    radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.8),
      transparent 44%
    );
  z-index: 1;
  pointer-events: none;
}
.disconnection__grid {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
.disconnection__copy {
  position: relative;
  z-index: 3;
  max-width: 46rem;
  padding: clamp(1.75rem, 4vw, 4rem);
  margin-left: clamp(0rem, 2vw, 2rem);
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: clamp(1.5rem, 3vw, 2.75rem);
  box-shadow: 0 24px 80px rgba(30, 35, 30, 0.13);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.disconnection__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1rem;
}
.disconnection__eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: currentColor;
}
.disconnection__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.2vw, 4.35rem);
  line-height: 1.02;
  color: var(--ink);
  letter-spacing: -0.045em;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}
.disconnection__title span {
  display: block;
  margin-top: 0.28em;
  color: var(--coral);
}
.disconnection__lead,
.disconnection__text {
  color: var(--body);
  margin: 0;
}
.disconnection__lead {
  max-width: 64ch;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.64;
}
.disconnection__accent {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: var(--ink);
  margin: 1.75rem 0 0.25rem;
}
.disconnection__text {
  max-width: 62ch;
  font-size: 1rem;
  line-height: 1.62;
}
.disconnection__shifts {
  display: grid;
  gap: 0.55rem;
  margin: 1.5rem 0;
}
.shift-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.78rem 1rem;
  color: var(--ink);
  line-height: 1.35;
  background: rgba(250, 246, 238, 0.9);
  border: 1px solid rgba(217, 130, 43, 0.16);
  border-radius: 1rem;
}
.shift-item__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  font-size: 1rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(26, 46, 34, 0.1);
}
.shift-item__instead {
  color: var(--muted);
}
.shift-item strong {
  font-weight: 750;
}
.disconnection__climax {
  margin-top: 1.75rem;
  padding-top: 1.45rem;
}
.climax__intro {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 750;
}
.climax__core {
  font-family: var(--display);
  font-weight: 750;
  font-size: clamp(1.1rem, 1.65vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 0.8rem;
}
.climax__conclusion {
  font-size: clamp(1.05rem, 1.55vw, 1.22rem);
  line-height: 1.48;
  color: var(--coral);
  font-weight: 700;
  margin: 0;
}
.disconnection__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.disconnection__media-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #e9e6df;
}
.disconnection__media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(19, 27, 22, 0.15));
  pointer-events: none;
}
.disconnection__media-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.disconnection__media-tag {
  position: absolute;
  z-index: 2;
  right: clamp(1.25rem, 4vw, 4rem);
  bottom: clamp(1.25rem, 4vw, 3rem);
  max-width: 23rem;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  text-align: center;
  padding: 0.8rem 1.15rem;
  background: rgba(26, 46, 34, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 63.99rem) {
  .disconnection {
    min-height: 0;
    padding-top: clamp(22rem, 74vw, 34rem);
  }
  .disconnection::before {
    background: linear-gradient(
      180deg,
      rgba(247, 245, 240, 0) 0 25%,
      rgba(247, 245, 240, 0.76) 43%,
      #f7f5f0 62%
    );
  }
  .disconnection__grid {
    display: block;
  }
  .disconnection__copy {
    margin: 0;
  }
  .disconnection__media-frame img {
    height: clamp(24rem, 78vw, 38rem);
    object-position: center top;
  }
  .disconnection__media-tag {
    top: clamp(17rem, 53vw, 26rem);
    right: 1.5rem;
    bottom: auto;
    left: 1.5rem;
  }
}
@media (max-width: 40rem) {
  .disconnection {
    padding: 18rem 0 2.75rem;
  }
  .disconnection__copy {
    padding: 1.4rem;
    border-radius: 1.5rem;
  }
  .disconnection__title {
    font-size: clamp(2rem, 11vw, 3rem);
  }
  .disconnection__lead {
    font-size: 1rem;
  }
  .disconnection__media-frame img {
    height: 21rem;
    object-position: 52% top;
  }
  .disconnection__media-tag {
    top: 13.8rem;
  }
  .shift-item {
    align-items: flex-start;
  }
}

/* ---------- 9 · Problem Editorial (Slide 2 Direct Layout) --------- */
/* No rule between sections, on any page (her rule, 2026-09-03). Sections are
   separated by space and by background, never by a line. */
.problem-editorial,
#problem.problem-editorial {
  background: var(--cream);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

/* ---------- App Features Overview Section ---------- */
/* 2026-10-01: she said this block and #collections below it looked like two
   different designers. #collections runs its deck stream edge to edge; this one
   floated a 927px image in the middle of a 1440 band, which is what made it
   read as a separate, smaller design. The image is full-bleed now, matching
   the stream, and the section carries .section--tight in the markup so both
   blocks share one vertical rhythm. That also means the image covers the band
   completely, so the colour below is only ever seen at the very top and bottom
   edges. It stays #fff9f4 — the image's OWN background, sampled from its
   corners — so there is no seam. Pure white is still not an option: the
   "10 Curated Categories" cards inside the image are white with no border and
   would disappear. The 30% cap from 2026-09-30 is gone; she asked for full
   width instead. */
.app-features-overview {
  background: #fff9f4;
  overflow: hidden;
}
.app-features-overview__inner {
  width: 100%;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  justify-content: center;
}
.app-features-overview picture {
  width: 100%;
  display: block;
}
.app-features-overview__img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
/* 2026-10-19: the phones are cut off at the frame's bottom edge, so the
   section ends there — no cream band under them. Top padding unchanged. */
#app-features.section--tight {
  padding-bottom: 0;
}
.problem-editorial__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: start;
}
@media (min-width: 64rem) {
  /* Measured off her reference by scanning it for text columns, 2026-09-09.
     In that image the text runs 0.054 to 0.946 of the frame, the left column
     ends at 0.373 and the right one starts at 0.510. So inside the container
     the split is 35.8% / 15.5% gutter / 48.9%, which is 42fr and 58fr either
     side of a 15.5% gap. The live page was 41.7 / 11.7 / 46.8 in a container
     that stopped 9% short of the frame, which is why her block looked wider
     and airier than ours. */
  .problem-editorial__grid {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    column-gap: 15.5%;
  }
}
/* Her block sits much closer to the edges of the frame than the site default:
   0.054 to 0.946 against our 0.072 to 0.912. This section gets a wider
   container to match; every other section keeps --container. */
#problem .wrap {
  max-width: 98rem;
  padding-inline: max(1.5rem, 5.4%);
}
/* Her layout, 2026-09-08 (screenshot): headline and its one-line answer in a
   left column, the three beats stacked in a right column. This is the one
   section on the site whose header is not centred (House rule 6), because she
   asked for this formatting by name and gave the reference. */
.problem-editorial__items {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 2.4vw, 2.25rem);
  align-items: start;
}
.problem-editorial__head {
  position: sticky;
  top: clamp(5rem, 8vw, 7rem);
}
@media (max-width: 63.999rem) {
  .problem-editorial__head {
    position: static;
  }
}
.problem-editorial__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.95rem, 2.72vw, 2.7rem);
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0;
  text-align: start;
  /* `wrap`, not the site-wide `balance` on h1-h4: balance evens the two lines
     and breaks after "that", her reference breaks after "we". Neither leaves an
     orphan, so House rule 9 holds either way and her break wins. */
  text-wrap: wrap;
}
.problem-editorial__sub {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--body);
  margin-top: 1.1rem;
  font-weight: 400;
  text-align: start;
  text-wrap: pretty;
}
/* The stack's rhythm is the grid gap now, not a per-item margin. */
.problem-item {
  margin-bottom: 0;
}
.problem-item__tag {
  color: var(--coral-deep);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  margin: 0 0 0.65rem 0;
}
.problem-item__p {
  font-size: clamp(1.05rem, 1.33vw, 1.3rem);
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}

/* ---------- 14 · Just One Question Section (Slide 5 Direct Layout) -- */
.just-one-q {
  background: var(--paper);
  padding: var(--s-9) 0;
}
.just-one-q__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}
@media (min-width: 60rem) {
  .just-one-q__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}
.just-one-q__stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 440px;
  margin: 0 auto;
}
.just-one-q__device {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 36px rgba(26, 26, 26, 0.14));
}
.just-one-q__bubble {
  position: absolute;
  background: #ffffff;
  color: var(--ink);
  border-radius: var(--r-md);
  padding: 1.1rem 1.4rem;
  font-size: 0.95rem;
  line-height: 1.4;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.04);
  max-width: 260px;
  z-index: 2;
}
/* Both bubbles sit clear of the phone rather than over it. They used to overlap
   the "Pick a category" heading and the Gratitude row, which hid app text
   inside the picture (her rule 12, 2026-09-03). In her own design they float
   beside the device, not on top of it. */
.just-one-q__bubble--top {
  top: 6%;
  right: -22%;
}
.just-one-q__bubble--bottom {
  bottom: 8%;
  left: -34%;
}
@media (max-width: 62rem) {
  .just-one-q__bubble--top {
    right: -6%;
  }
  .just-one-q__bubble--bottom {
    left: -6%;
  }
}
/* On a phone there is no room beside the device, so the two bubbles sit above
   and below it rather than across the app screen. */
@media (max-width: 48rem) {
  .just-one-q__stage {
    padding-block: 3rem 3.5rem;
  }
  .just-one-q__bubble {
    max-width: 74%;
    padding: 0.85rem 1.05rem;
    font-size: 0.9rem;
  }
  .just-one-q__bubble--top {
    top: 0;
    right: 0;
  }
  .just-one-q__bubble--bottom {
    bottom: 0;
    left: 0;
  }
}
.just-one-q__content h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem 0;
}
.just-one-q__content p {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--body);
  margin-bottom: 2rem;
}
.store-badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Her note, 2026-09-03: "google and apple buttons more premium with real google
   icon as on image". The mark is now the real four-colour Google Play triangle
   from assets/img/icon-google-play.svg, not a flat white glyph, and the button
   itself carries the proportions of the official badge: a hairline edge on
   true black, a 10px radius, and a lift on hover rather than a fade, because
   fading a black badge out just makes it look switched off. */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: #000000;
  color: #ffffff;
  padding: 0.6rem 1.15rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 0.625rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.18);
  transition:
    transform 0.2s var(--ease, ease),
    box-shadow 0.2s var(--ease, ease),
    border-color 0.2s ease;
}
.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(26, 26, 26, 0.22);
  border-color: rgba(255, 255, 255, 0.42);
}
.store-badge:focus-visible {
  outline: 3px solid var(--coral, #f06858);
  outline-offset: 3px;
}
.store-badge__icon {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  display: block;
}
.store-badge svg {
  width: 1.7rem;
  height: 1.7rem;
  fill: currentColor;
}
.store-badge__sub {
  display: block;
  font-family: var(--body-font, inherit);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.92);
}
.store-badge--play .store-badge__sub {
  text-transform: uppercase;
  letter-spacing: 0.075em;
}
.store-badge__name {
  display: block;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-top: 0.05rem;
}

/* ---------- 15 · Yellow Ticker Marquee (Slide 6 Direct Layout) -------- */
.marquee-yellow {
  background: var(--amber);
  color: #ffffff;
  padding: 1.1rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-yellow__track {
  display: inline-flex;
  gap: 3rem;
  animation: yellowMarquee 25s linear infinite;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  letter-spacing: -0.01em;
}
@keyframes yellowMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ---------- 16 · Mini Products Grid & Cards (Slide 4 Direct Layout) -- */
.mini-products-row,
.mini-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.mini-deck-card {
  background: #ffffff;
  border: 1px solid rgba(26, 46, 34, 0.08);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 18px rgba(26, 46, 34, 0.04);
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.mini-deck-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(26, 46, 34, 0.12);
  border-color: rgba(240, 104, 88, 0.3);
}
/* Deck and product artwork is 5:4 with the question card sitting above the
   people. A wide frame cut the question in half at the top and the faces at
   the bottom, so the frame is 4:3 and the picture is contained inside it:
   nothing is ever trimmed (her rule, 2026-09-03). */
.mini-deck-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1000 / 806;
  overflow: hidden;
  background: #fbf0dd;
  display: block;
}
.mini-deck-card__img-wrap picture,
.pcard__img-wrap picture,
.pricing-card__img-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}
.mini-deck-card__img,
.mini-deck-card__img-wrap img,
.pcard__img,
.pcard__img-wrap img,
.pricing-card__img,
.pricing-card__img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}
.mini-deck-card:hover .mini-deck-card__img,
.mini-deck-card:hover .mini-deck-card__img-wrap img {
  transform: scale(1.05);
}
.mini-deck-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}
.mini-deck-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.mini-deck-card__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 0.4rem 0;
}
.mini-deck-card__title--blue {
  color: #2e6287;
}
.mini-deck-card__title--coral {
  color: var(--coral-deep);
}
.mini-deck-card__title--amber {
  color: #8a5300;
}
.mini-deck-card__desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 1.15rem 0;
  flex-grow: 1;
}
.mini-deck-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(26, 46, 34, 0.06);
  margin-top: auto;
}
.mini-deck-card__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--coral-deep);
}
.mini-deck-card__action {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--coral);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: transform 0.15s ease;
}
.mini-deck-card:hover .mini-deck-card__action {
  transform: translateX(3px);
}
.mini-deck-card__badge {
  align-self: flex-start;
  background: #fdf3e0;
  color: #8a5300;
  font-weight: 700;
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.mini-deck-card__badge--blue {
  background: #e9f2f8;
  color: #2b5d80;
}
.mini-deck-card__badge--coral {
  background: #feece9;
  color: var(--coral-deep);
}
.mini-deck-card__badge--green {
  background: #eef3dd;
  color: #445417;
}
.mini-deck-card__badge--purple {
  background: #f3ecf8;
  color: #5d2b80;
}

/* ---------- 29 · Tweaks Live Panel -------------------------- */
.tweaks-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 999;
  background: var(--ink);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.tweaks-toggle:hover {
  transform: scale(1.05);
  background: var(--coral);
}
.tweaks-modal {
  position: fixed;
  bottom: 4.5rem;
  right: 1.5rem;
  z-index: 1000;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--rad-md);
  padding: 1.25rem;
  width: 280px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--sand);
  display: none;
}
.tweaks-modal[data-open="true"] {
  display: block;
}
.tweaks-modal h4 {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
}
.tweaks-group {
  margin-bottom: 1rem;
}
.tweaks-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin-bottom: 0.4rem;
  display: block;
}
.tweaks-options {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tweaks-btn {
  background: var(--cream);
  border: 1px solid var(--sand);
  border-radius: var(--rad-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.tweaks-btn[data-active="true"] {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* ---------- 29 · Viewport + anti-slop pass (2026-08-31) --------------
   Homepage blocks measured at 1440x900. The hero is approved and locked
   (approved.md, iteration 25) and is not touched. Everything else fits
   one screen: the disconnection block becomes copy beside a 4:3 photo
   (the client's slide-2 direction) instead of a 1,558px frosted panel
   over a portrait; the collection grid becomes the mockup's rail with
   arrows; the flagship cards lose the repeated logo and footnote. Off-
   brand greys/ochres in this block go back to tokens. --------------- */
.disconnection {
  min-height: 0;
  padding: clamp(3rem, 5vw, 4.5rem) 0;
  background: var(--cream);
}
.disconnection::before {
  content: none;
}
.disconnection__grid {
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .disconnection__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.disconnection__copy {
  max-width: none;
  margin-left: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.disconnection__title {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-bottom: 1rem;
}
.disconnection__lead {
  font-size: 1.0625rem;
  line-height: 1.55;
}
.disconnection__text {
  margin-top: 0.9rem;
}
.disconnection__shifts {
  margin: 1rem 0;
  gap: 0.45rem;
}
.shift-item {
  padding: 0.55rem 0.9rem;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.disconnection__climax {
  margin-top: 1rem;
  padding-top: 1rem;
}
.climax__core {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  margin: 0;
}
.disconnection__media {
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  opacity: 1;
  transform: none;
}
.disconnection__media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.disconnection__media-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* Collections: the mockup pairs the tabs with a rail, not a 13-card wall. */
.mini-products-grid.reel {
  display: flex;
  gap: 1.25rem;
  margin-top: 1rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.mini-products-grid.reel > .mini-deck-card {
  flex: 0 0 min(20rem, 82vw);
  scroll-snap-align: start;
}
@media (min-width: 44rem) {
  .mini-products-grid.reel > .mini-deck-card {
    flex-basis: calc((100% - 1.25rem) / 2);
  }
}
@media (min-width: 66rem) {
  .mini-products-grid.reel > .mini-deck-card {
    flex-basis: calc((100% - 2 * 1.25rem) / 3);
  }
}
@media (min-width: 80rem) {
  .mini-products-grid.reel > .mini-deck-card {
    flex-basis: calc((100% - 3 * 1.25rem) / 4);
  }
}
.mini-deck-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.85rem;
}

/* Flagship cards: shorter stack, the same content. */
.pcard__price {
  font-size: clamp(2.6rem, 4vw, 3.2rem);
  margin-top: 0.25rem;
}
.pcard__list {
  margin-top: 1rem;
  gap: 0.5rem;
}
.pcard__foot {
  padding-top: 1.25rem;
}

/* Just one question: standard rhythm, slightly smaller device. */
.just-one-q {
  padding: clamp(3rem, 5vw, 4.5rem) 0;
}
.just-one-q__device {
  max-width: 330px;
}
/* Measured after the pass above: disconnection 911px, flagship 1028px. */
.disconnection {
  padding: clamp(2.5rem, 4vw, 3.75rem) 0;
}
#pick-one.section {
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
}
.pcard {
  padding: clamp(1.25rem, 2.2vw, 1.6rem);
}
.pcard__img-wrap {
  width: calc(100% + 2 * clamp(1.25rem, 2.2vw, 1.6rem));
  margin-top: calc(-1 * clamp(1.25rem, 2.2vw, 1.6rem));
  margin-inline: calc(-1 * clamp(1.25rem, 2.2vw, 1.6rem));
}
.pcard__list {
  gap: 0.4rem;
}
.pcard__foot {
  padding-top: 1rem;
}
/* Mobile: the two flagship cards STACK, full width. They used to scroll
   sideways (her note, 2026-09-08: "scroll isn't the best for mobile"). A
   sideways rail is wrong for pricing specifically: it hid the second edition
   and its price behind a swipe most people never make, and what was on screen
   was one card plus a sliver of another and a scrollbar. Stacked, both prices
   are in the ordinary downward scroll and neither card is cropped.

   Stacking doubles the section's height, so the card is tightened to earn it
   back: a smaller wordmark and price, tighter list rows, less padding. The
   list also loses its second line by dropping to 0.9375rem, which is where
   "365 questions, one a day for a full year" stops wrapping at 390. */
@media (max-width: 53.99rem) {
  .flagship {
    gap: 1rem;
  }
  .pcard {
    padding: 1.35rem 1.25rem 1.25rem;
  }
  .pcard__mark {
    height: 2.25rem;
  }
  .pcard__name {
    margin-top: 0.7rem;
    font-size: 1.2rem;
  }
  .pcard__price {
    font-size: 2.9rem;
    margin-top: 0.15rem;
  }
  .pcard__terms {
    margin-top: 0.3rem;
    font-size: 0.9rem;
  }
  .pcard__list {
    margin-top: 0.9rem;
    gap: 0.5rem;
  }
  .pcard__list li {
    font-size: 0.9375rem;
  }
  .pcard__list .tick {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.2rem;
  }
  .pcard__foot {
    padding-top: 1rem;
  }
  .pcard__note {
    font-size: 0.8125rem;
    margin-top: 0.7rem;
  }
  /* The pale house mark was sized for a 500px card and swamped a 340px one. */
  .pcard::before {
    width: 15rem;
    height: 15rem;
    right: -2.5rem;
    bottom: -3rem;
  }
}
/* The media frame was still absolutely positioned by the rule above
   (line ~1795), so the photo painted over the copy. Normal flow now. */
.disconnection__media-frame {
  position: relative;
  inset: auto;
  background: none;
}
.disconnection__media-frame::after {
  content: none;
}
.disconnection__copy {
  z-index: auto;
}
/* Question stream: no eyebrow pill on the homepage either; ink heading. */
.mv-stream__pill {
  display: none;
}
.mv-stream .mv-stream__head :is(h2, .h-1) {
  color: var(--ink) !important;
}
.mv-stream .mv-stream__head .lead {
  color: var(--body) !important;
}

/* ---------- 30 · Product stream (2026-08-31) -------------------------
   Justyna's reference is Mindvalley: rows of tiles gliding sideways with
   the phone in the middle. Two tracks, opposite directions, content
   duplicated twice for the -50% loop, paused on hover. Used on the
   homepage collection and the 365 page. */
.pstream {
  position: relative;
  overflow: hidden;
  padding-block: 0.5rem;
  --pstream-bg: var(--cream);
}
.pstream__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  align-items: stretch;
  animation: mv-scroll-left 72s linear infinite;
  will-change: transform;
}
.pstream__track--reverse {
  animation: mv-scroll-right 84s linear infinite;
  margin-top: 1rem;
}
.pstream:hover .pstream__track,
.pstream:focus-within .pstream__track {
  animation-play-state: paused;
}
.pstream::before,
.pstream::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 3;
  pointer-events: none;
}
.pstream::before {
  left: 0;
  background: linear-gradient(
    90deg,
    var(--pstream-bg) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.pstream::after {
  right: 0;
  background: linear-gradient(
    270deg,
    var(--pstream-bg) 0%,
    rgba(255, 255, 255, 0) 100%
  );
}
.pstream .mv-card {
  width: 300px;
  min-height: 0;
  justify-content: center;
}
.pcard-mini {
  flex: none;
  width: 17rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: inherit;
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.pcard-mini:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}
.pcard-mini img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.pcard-mini__body {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem 0.8rem;
}
.pcard-mini__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.pcard-mini__meta {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
/* Homepage collection: the phone in the middle, tiles gliding behind it. */
.pstream--phone {
  padding-block: 1rem;
}
.pstream__glow {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 30rem;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    var(--pstream-bg) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}
.pstream__phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 94%;
  width: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 30px 50px rgba(26, 26, 26, 0.22));
}
.pstream .mini-deck-card {
  flex: 0 0 16rem;
}
.pstream .mini-deck-card__desc,
.pstream .mini-deck-card__footer {
  display: none;
}
.pstream .mini-deck-card__body {
  padding: 0.8rem 0.9rem 0.9rem;
}
.pstream .mini-deck-card__meta {
  margin-bottom: 0.4rem;
}
/* Homepage collection, her deck covers (iteration-87). One row of her own
   product artwork instead of the two rows of lifestyle cards. The row height
   and the phone height are the same value, --cover-h, so the phone stands
   exactly as tall as the covers gliding past it (her note, 2026-09-03).
   object-fit is contain, never cover: every cover has its title, its
   sub-line and its question count baked into the artwork, and House rule 12
   says text inside an image is never cropped. */
.pstream--covers {
  --cover-h: clamp(15rem, 31vw, 28rem);
}
.pstream--covers .pstream__track {
  gap: 1.25rem;
  align-items: center;
  animation-name: cover-scroll-left;
  animation-duration: 64s;
}
/* The shared mv-scroll-left stops at -50% of the track. A flex track of twelve
   items has eleven gaps, so half of it is 5.5 gaps, not 6, and the loop lands
   half a gap short and visibly snaps. Half of 1.25rem is 0.625rem. */
@keyframes cover-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 0.625rem));
  }
}
/* No white glow behind the phone here: it washed the covers out to nothing.
   The phone's own drop shadow is enough separation against solid artwork. */
.pstream--covers .pstream__glow {
  display: none;
}
.pstream--covers::before,
.pstream--covers::after {
  width: 64px;
}
.pstream--covers .pstream__phone {
  height: var(--cover-h);
}
/* 620 x 810 is the artboard of her vector covers. The card matches it exactly,
   so `contain` never has to letterbox and the plate fills the frame. The radius
   is --r-sm, not --r-md: the artwork carries its own 15/620 rounded plate, and
   a wider CSS radius would cut white notches out of its corners. */
.deck-cover {
  flex: 0 0 auto;
  display: block;
  height: var(--cover-h);
  aspect-ratio: 620 / 810;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}
.deck-cover:hover,
.deck-cover:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-float);
}
.deck-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .pstream__track {
    animation: none !important;
  }
  .pstream {
    overflow-x: auto;
  }
  .pstream__phone,
  .pstream__glow {
    display: none;
  }
}
@media (max-width: 48rem) {
  .pstream__phone,
  .pstream__glow {
    display: none;
  }
  .pcard-mini {
    width: 14rem;
  }
  .pstream .mv-card {
    width: 240px;
  }
  /* The covers carry their own baked-in type, so they cannot shrink as far as
     a photo card: below about 15rem wide the sub-line stops being readable.
     The edge fade shrinks with them, or it eats a third of a 390px screen. */
  .pstream--covers {
    --cover-h: 21rem;
  }
  .pstream--covers::before,
  .pstream--covers::after {
    width: 32px;
  }
}

/* ---------- 31 · Homepage, her direction (2026-08-31) ---------------------
   Disconnection: centred headline, the couple on the sofa on their own
   phones, and the copy between them (Justyna, home deck slide 2). Emoji
   stay: they are the message people send instead of words. */
.disc-head {
  max-width: 52rem;
  margin-inline: auto;
}
.disc-head .disconnection__title {
  text-align: center;
  margin: 0 auto 0.75rem;
}
.disc-head .disconnection__lead {
  margin: 0 auto;
  text-align: center;
  text-align-last: center;
}
/* Her note, 2026-09-08: no white background on this photo. The white card
   the shot used to sit in is gone (no panel, no radius, no card shadow), so
   the sofa now stands directly on the section's cream. */
.disc-scene {
  position: relative;
  margin: 1.5rem auto 0;
  max-width: 68rem;
  background: none;
  margin-bottom: 0;
}
/* Her rule, 2026-09-03: never crop a person's head. The sofa shot is a
   cut-out on white at 1870x1230, so it runs at its own ratio and nothing is
   trimmed off the top.
   The white goes in two steps, because the shot has no alpha channel and a
   per-pixel knockout eats the man's white shoe soles: they sit in the same
   tonal range as the studio floor. So the asset (couch-clean-flat.webp) has its
   backdrop and floor flattened to pure 255 white, keeping only the real ground
   shadow, and multiply then maps that pure white onto exactly the section's
   cream. The photo's own anti-aliased edges survive untouched. The asset is
   tied to a light section: on a dark background this image would vanish. */
.disc-scene > img {
  width: 100%;
  height: auto;
  aspect-ratio: 2400 / 1610;
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
}
/* Centered in the open couch gap between the couple so it never overlaps her face, neck, or body */
/* Centered in the couch gap between the couple, matching her reference placement and size */
.disc-scene .disc-shifts {
  position: absolute;
  left: 51%;
  top: 47%;
  transform: translate(-50%, -50%);
  /* Her note, 2026-10-20: the pills were too long and touched the couple.
     Each pill now hugs its own line and stays inside the sofa gap. */
  width: auto;
  justify-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: clamp(0.6rem, 0.9vw, 1rem);
  z-index: 2;
}
.disc-scene .disc-shifts .shift-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 0.7vw, 0.75rem) clamp(0.9rem, 1.2vw, 1.25rem);
  font-size: clamp(0.8rem, 0.95vw, 1rem);
  line-height: 1.3;
  gap: clamp(0.45rem, 0.6vw, 0.65rem);
  background: #ffffff;
  border: 0;
  box-shadow: 0 10px 30px rgba(26, 26, 26, 0.12);
  border-radius: 9999px;
  white-space: nowrap;
  text-align: center;
}
/* No tinted disc behind the emoji in this version: the emoji sits on the white. */
.disc-scene .disc-shifts .shift-item__icon {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  background: none;
  box-shadow: none;
  border-radius: 0;
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "EmojiSymbols", system-ui, sans-serif;
}
.shift-item__icon {
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 1.75rem;
  font-size: 1rem;
  box-shadow: none;
  background: var(--cream);
}
/* Her note, 2026-09-09: only the three lines stay on the picture. The sentence
   moved up into the block above it, under the lead. */
.disc-head .disconnection__text {
  margin: 0.9rem auto 0;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
  text-align: center;
  text-align-last: center;
}
.disconnection .climax__core {
  max-width: 48rem;
  margin: 1.25rem auto 0;
  text-align: center;
  text-align-last: center;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  font-weight: 600;
  color: var(--ink);
}
/* Below 60rem the picture is too short to carry an overlay: the pills drop
   under it, the sentence introduces them, and they stop being nowrap. */
@media (max-width: 60rem) {
  .disc-scene {
    display: flex;
    flex-direction: column;
    background: none;
  }
  .disc-scene > img {
    order: 1;
  }
  .disc-scene .disc-shifts {
    order: 2;
    position: static;
    transform: none;
    width: auto;
    margin-top: 1rem;
    gap: 0.6rem;
  }
  .disc-scene .disc-shifts .shift-item {
    font-size: 0.95rem;
    padding: 0.65rem 1.05rem;
    gap: 0.7rem;
    white-space: normal;
    border-radius: 1.4rem;
  }
  .disc-scene .disc-shifts .shift-item__icon {
    font-size: 1.05rem;
  }
}
/* Problem block: an image per audience (her comment on slide 4: "image with text on it, how was school... fine"). */
/* 4:3 is the shape all three photographs were shot at. The 16:10 frame this
   used to be cut the top and bottom off them, which sliced the "How was
   school today?" bubble in half on the dinner shot (her note, 2026-09-03:
   text inside an image is never cropped). */
.problem-item__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
  margin-bottom: 0.9rem;
  display: block;
}
/* What makes Pick One different: the spin wheel in a hand. */
/* Collection stream sits on the white section. */
#collections .pstream {
  --pstream-bg: var(--paper);
  margin-top: 1.25rem;
}
/* Measured: disconnection 1,087px, collections 923px. */
.disconnection {
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-bottom: clamp(0.5rem, 1.5vw, 1rem);
  background: var(--cream);
}
.disc-head .disconnection__title {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}
.disc-head .disconnection__lead {
  font-size: 1rem;
}
.disconnection .climax__core {
  font-size: 1rem;
  margin-top: 1rem;
}
#collections.section--tight {
  padding-block: clamp(2rem, 3vw, 2.75rem);
}
#collections .h-1 {
  text-wrap: wrap;
  max-width: none;
}
#collections .pstream {
  margin-top: 0.75rem;
}
/* Her note, 2026-09-08: the Mini Products phone "needs to be really big. Like
   the one in the hero section". It no longer matches the cover height; it
   stands above and below the rail, which clips sideways only so the marquee
   still runs off the edges. The section makes the room. */
#collections .pstream--covers {
  overflow: visible;
  overflow-x: clip;
}
#collections .pstream--covers .pstream__phone {
  height: clamp(22rem, 46vw, 40rem);
  filter: drop-shadow(0 20px 40px rgba(26, 26, 26, 0.22));
}
#collections .pstream--covers {
  margin-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 6vw, 5.5rem);
}
@media (max-width: 48rem) {
  #collections .pstream--covers {
    margin-block: 1.25rem;
  }
}

/* ---------- 26d · Second critic pass, iteration-120 --------------------- */
/* The phone stands 80px above the rail, so the rail's own top margin was not
   the clearance: the lead paragraph above ended 16px from the phone, and would
   have touched it at any width where that last line wraps full. */
#collections .pstream--covers {
  margin-block: clamp(5.5rem, 10vw, 8.5rem) clamp(4.5rem, 9vw, 8rem);
}
@media (max-width: 48rem) {
  #collections .pstream--covers {
    margin-block: 1.25rem;
  }
}

/* Reduced motion used to delete this phone along with the animation. That was
   fair when it was a 122px garnish; now it is the whole point of the section,
   so the rail freezes and the phone stays. */
@media (prefers-reduced-motion: reduce) {
  #collections .pstream--covers {
    overflow: visible;
    overflow-x: clip;
  }
  #collections .pstream--covers .pstream__phone {
    display: block;
  }
}

/* ---------- 26c · Critic pass, iteration-119 ---------------------------- */
/* 1 · The reviews reel sat 16px off the amber marquee that closes the
   section, so the card shadows were being cut by the yellow band. */
#voices .reel {
  gap: 0.75rem;
  padding-bottom: 1.25rem;
}
#voices .marquee-yellow {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

/* 4 · "Just one question." now follows two white sections and had lost any
   ground of its own; the tail ran 2,480px of unbroken white. */
#get.just-one-q {
  background: var(--cream);
}

/* 5 · The disconnection closer ran a much wider measure than the lead two
   paragraphs above it, at a heavier weight. */
.disconnection .climax__core {
  max-width: 48rem;
}

.pstream .mini-deck-card {
  flex-basis: 15rem;
}
#collections .lead {
  font-size: 1rem;
}
#collections .tabs {
  margin-top: 1rem;
}
/* Phones: the three problem beats and the four "different" points stacked
   to 1,811px and 1,399px. Same move as the DS §12 rails: beats scroll
   sideways with snap, points sit two-up. */
@media (max-width: 48rem) {
  /* The three beats used to be image cards in a sideways snap rail. They are
     text blocks in a single column now (her layout, 2026-09-08), so on phones
     they simply stack: no rail, no horizontal scroll. */
  .problem-editorial__items {
    gap: 1.5rem;
  }
}

/* The comparison block on the homepage: same rhythm as the sub-pages. */
/* The phone was ending 56px above the seam and looked like it rested on it
   (critic pass, iteration-119), so the cream half keeps more under it. */
#different.section {
  padding-block: clamp(2.5rem, 4vw, 3.25rem) clamp(3.25rem, 5vw, 4.25rem);
}
#different .bridge-payoff {
  max-width: 46rem;
  font-size: clamp(1rem, 1.45vw, 1.15rem);
}

/* ---------- 26b · The two halves of "what makes Pick One different" ------ */
/* Her note, 2026-09-08: "its too much happening here. Needs to be divided in
   two seperate section, Section 1 explaining how it works, Section 2 starts
   from Permission to be vulnerable". So #different keeps the head and the
   ask-versus-app stage, and the four points plus the payoff are their own
   section on white. The points carry a big top margin for the case where they
   follow the stage; starting a section, that margin is the section's own. */
/* The white half had the tightest padding on the page, so the cream-to-white
   edge read as an accident rather than as a new section (critic pass,
   iteration-119). She has given no headline for it, so air carries the break. */
#makes-it-safe {
  padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(3.5rem, 6vw, 5.5rem);
  background: var(--white, #ffffff);
}
#makes-it-safe .safe-wrap {
  max-width: var(--container, 80rem);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.safe-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
.safe-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(26, 46, 34, 0.08);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem 2rem;
  box-shadow: 0 4px 16px -2px rgba(26, 38, 30, 0.05), 0 1px 3px rgba(26, 38, 30, 0.03);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.safe-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(26, 38, 30, 0.08), 0 2px 6px rgba(26, 38, 30, 0.04);
}
.safe-card__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fde8bc;
  border-radius: 9999px;
  padding: 0.35rem 0.85rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.safe-card__pill-logo {
  height: 1rem;
  width: auto;
  display: block;
}
.safe-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.safe-card__title {
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  line-height: 1.25;
  color: var(--ink, #1a1a1a);
  margin: 0 0 0.65rem;
  text-wrap: balance;
}
.safe-card__desc {
  font-family: var(--font-body, "Figtree", sans-serif);
  font-size: clamp(0.925rem, 1.1vw, 1rem);
  line-height: 1.5;
  color: var(--muted, #66635f);
  margin: 0;
  text-align: start;
}
.safe-closing {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}
.safe-closing__statement {
  font-family: var(--font-display, "Gabarito", sans-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2.15rem);
  line-height: 1.45;
  color: var(--ink, #1a1a1a);
  max-width: 100%;
  margin: 0 auto;
  text-wrap: balance;
  text-align: center;
}
.safe-closing__statement .coral-highlight {
  color: var(--coral, #f06858);
  font-weight: 700;
}

@media (max-width: 64rem) {
  .safe-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 36rem) {
  .safe-cards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .safe-card {
    padding: 1.5rem 1.25rem 1.75rem;
  }
  .safe-closing__statement {
    font-size: clamp(1.2rem, 5vw, 1.45rem);
    line-height: 1.4;
  }
}

/* ---------- 28 · Native App Features Overview Section --------- */
.app-features-section {
  background: var(--cream, #fef8ec);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

.app-features-head {
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.app-features-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(240, 104, 88, 0.12);
  color: var(--coral-deep, #d9503f);
  border: 1px solid rgba(240, 104, 88, 0.25);
  padding: 0.35rem 0.95rem;
  border-radius: var(--r-pill, 9999px);
  font-size: 0.825rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.app-features-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

/* --- Device Frames (Common) --- */
.device-frame {
  background: #111111;
  border-radius: 36px;
  padding: 8px;
  box-shadow: 0 16px 40px -8px rgba(26, 26, 26, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
  position: relative;
  overflow: hidden;
}

.device-frame--sm {
  border-radius: 28px;
  padding: 6px;
  box-shadow: 0 12px 28px -6px rgba(26, 26, 26, 0.14);
}

.device-frame--hero {
  border-radius: 42px;
  padding: 10px;
  box-shadow: 0 24px 64px -12px rgba(26, 26, 26, 0.22), 0 0 0 1.5px rgba(255, 255, 255, 0.2) inset;
}

.device-screen {
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  font-family: var(--text, "Figtree", sans-serif);
}

.device-frame--sm .device-screen {
  border-radius: 22px;
  min-height: 380px;
}

.device-frame--hero .device-screen {
  border-radius: 32px;
  min-height: 580px;
}

/* --- Left Column: Paired Mini Phones --- */
.phone-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.phone-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone-label {
  font-family: var(--display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink, #1a1a1a);
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Mini Phone Screen Inner Elements */
.screen-notch {
  width: 38%;
  height: 12px;
  background: #111111;
  border-radius: 0 0 8px 8px;
  margin: 0 auto;
}

.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.6rem 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}

.screen-back {
  font-size: 1.1rem;
  line-height: 1;
  color: #111111;
  font-weight: 700;
}

.screen-title {
  font-family: var(--display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: 0.8rem;
}

.screen-signal {
  font-size: 0.65rem;
  color: #777777;
}

.screen-body {
  padding: 0.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.screen-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--coral, #f06858);
  margin-bottom: 0.35rem;
}

.screen-prompt {
  font-family: var(--display, "Gabarito", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #1a1a1a);
  margin-bottom: 0.6rem;
}

.screen-input-placeholder {
  background: #fbfbfb;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  padding: 0.5rem;
  flex: 1;
  font-size: 0.7rem;
  color: #a09d98;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.screen-mic-icon {
  align-self: flex-end;
  font-size: 0.85rem;
  opacity: 0.6;
}

.screen-btn-bar {
  padding: 0.5rem 0.6rem 0.75rem;
}

.screen-btn {
  display: block;
  width: 100%;
  padding: 0.45rem;
  border-radius: 10px;
  font-family: var(--display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}

.screen-btn--amber {
  background: #fbb03b;
}

.screen-btn--compact {
  padding: 0.35rem;
  margin-bottom: 0.6rem;
}

.screen-field-label {
  font-size: 0.65rem;
  color: #888888;
  margin-bottom: 0.2rem;
}

.screen-field-box {
  background: #fbfbfb;
  border: 1px solid #eeeeee;
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  font-size: 0.65rem;
  color: #a09d98;
  margin-bottom: 0.45rem;
}

.screen-deck-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.screen-deck-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 0.4rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}

.screen-chevron {
  color: #bbbbbb;
  font-size: 0.8rem;
}

.screen-tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #f0f0f0;
  padding: 0.4rem 0.2rem 0.5rem;
  background: #ffffff;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #aaaaaa;
}

.tab-item--active {
  color: #fbb03b;
}

.tab-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.tab-label {
  font-size: 0.55rem;
  font-weight: 600;
}

/* --- Center Column: Main Hero Phone --- */
.screen-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.25rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.screen-time {
  font-size: 0.8rem;
  color: #111111;
}

.screen-dynamic-island {
  width: 70px;
  height: 18px;
  background: #111111;
  border-radius: 12px;
}

.screen-net {
  font-size: 0.7rem;
  color: #666666;
}

.screen-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.screen-app-title {
  font-family: var(--display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink, #1a1a1a);
}

.screen-bell {
  font-size: 0.9rem;
  opacity: 0.7;
}

.hero-screen-content {
  padding: 0.5rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.hero-qcard {
  width: 100%;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 0.85rem 0.75rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.hero-qcard-arrow {
  color: #cccccc;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 2px;
}

.hero-qcard-text {
  flex: 1;
  font-family: var(--display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--ink, #1a1a1a);
  text-align: center;
  margin: 0;
}

.hero-subtext {
  font-size: 0.7rem;
  color: #8c8882;
  margin-bottom: 0.75rem;
  text-align: center;
}

.hero-wheel-wrap {
  width: 160px;
  height: 160px;
  margin: 0.25rem auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.08));
}

.hero-wheel-svg {
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease, ease);
}

.hero-actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: auto;
}

.hero-btn {
  width: 100%;
  padding: 0.65rem;
  border-radius: 12px;
  font-family: var(--display, "Gabarito", sans-serif);
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  border: 0;
  cursor: pointer;
}

.hero-btn--primary {
  background: #fbb03b;
  color: #ffffff;
}

.hero-btn--outline {
  background: #ffffff;
  color: #fbb03b;
  border: 1.5px solid #fbb03b;
}

.hero-tab-bar .tab-icon {
  width: 18px;
  height: 18px;
}

.hero-tab-bar .tab-label {
  font-size: 0.65rem;
}

/* --- Right Column: 3 Stacked Feature Cards --- */
.feature-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.feature-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.5rem 1.6rem;
  box-shadow: 0 12px 32px rgba(26, 26, 26, 0.05), 0 1px 3px rgba(26, 26, 26, 0.03);
  border: 1px solid rgba(26, 26, 26, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(26, 26, 26, 0.08);
}

.feature-card__title {
  font-family: var(--display, "Gabarito", sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--ink, #1a1a1a);
  margin-bottom: 1rem;
}

/* 10 Curated Categories List */
.cat-pill-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-pill-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.4rem 0.2rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
}

.cat-pill-bar {
  width: 6px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
}

.cat-pill-bar--coral { background: var(--coral, #f06858); }
.cat-pill-bar--amber { background: var(--amber, #fcbd4c); }
.cat-pill-bar--pink  { background: var(--pink, #f4a9b0); }
.cat-pill-bar--blue  { background: var(--blue, #92aec6); }
.cat-pill-bar--teal  { background: var(--teal, #97c1bf); }

.cat-pill-name {
  flex: 1;
}

.cat-pill-svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Custom Deck Card */
.feature-card--deck-cta {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.custom-deck-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #eeeeee;
  border-radius: var(--r-pill, 9999px);
  padding: 0.35rem 0.85rem;
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  align-self: flex-start;
  background: #fafafa;
}

.custom-deck-plus {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--coral, #f06858);
}

.custom-deck-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.custom-deck-name {
  font-family: var(--display, "Gabarito", sans-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink, #1a1a1a);
  margin: 0;
}

.custom-deck-count {
  font-size: 0.8rem;
  color: #888888;
}

.custom-deck-btn {
  background: #111111;
  color: #ffffff;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill, 9999px);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.custom-deck-progress {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.custom-deck-progress-bar {
  width: 35%;
  height: 100%;
  background: var(--coral, #f06858);
  border-radius: 4px;
}

/* 100% Digital Badge */
.digital-badge-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.digital-icon-box {
  width: 44px;
  height: 44px;
  background: #eef5fc;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.digital-pin-icon {
  width: 24px;
  height: 24px;
}

.digital-text-group {
  display: flex;
  flex-direction: column;
}

.digital-sub {
  font-size: 0.8rem;
  font-weight: 600;
  color: #888888;
}

.digital-title {
  font-family: var(--display, "Gabarito", sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ink, #1a1a1a);
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 64rem) {
  .app-features-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .app-col--center {
    order: -1;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }

  .phone-pair {
    max-width: 520px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }

  .feature-cards-stack {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 36rem) {
  .phone-pair {
    grid-template-columns: 1fr;
    max-width: 280px;
    gap: 1.5rem;
  }
}


/* ---------- 32 · Disconnection copy as three story beats (2026-10-11) -----
   Her ask: "make this boring long text more attractive. Leave the copy as
   is, change how it all looks." Every word is unchanged; only the markup
   around it moved. One type system for the whole block:
     statement  Gabarito 700 on the .h-3 step, ink
     pivot      Gabarito 700, held below the section headline
     lead-in    Figtree 600, a step above the body
     body       Figtree 400 on the .lead step, body colour
   Beat 1: the three habits stack as statements. From 48rem the three
   "instead of" share one axis, set a little right of centre so the block's
   mass (long "what we do", short "what we lost") sits under the headline;
   what we lost sits under a coral highlighter stroke. "separate screens,
   separate worlds, separately alone" drifts apart: wider spacing, ink fading
   to muted. Beat 2: a typing indicator, then "Not because we don't care."
   alone. Beat 3: the four things we never learn about each other carry the
   four category tints, and "the right question" gets a drawn coral underline
   that hands over to the product.
   Motion is scroll-driven CSS (animation-timeline: view()), never a class a
   script adds: text is never hidden, nothing blinks when it reveals, and a
   browser without support simply shows the finished state. Letter spacing is
   never animated, so no line reflows mid-motion. Reduced motion: none. */
/* view() timelines bind to the nearest scroll container, and overflow:
   hidden made this section one, so the strokes never moved. clip crops the
   same pixels without being a scroll container; flow-root keeps the block
   formatting context hidden used to give. Layout measured identical. */
.disconnection {
  overflow: clip;
  display: flow-root;
}
.disc-head .disc-beat {
  max-width: 44rem;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--body);
  text-align: center;
  text-align-last: center;
  text-wrap: pretty;
  -webkit-hyphens: none;
  hyphens: none;
}
.disc-head .disc-beat--habits {
  max-width: none;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}
.disc-head .disc-beat--pivot {
  margin-top: clamp(var(--s-6), 4vw, var(--s-7));
}
.disc-head .disc-beat--turn {
  margin-top: clamp(1.75rem, 3.4vw, 2.25rem);
}
.disc-beat--habits > .disc-beat__body {
  max-width: 44rem;
  margin-inline: auto;
}
.disc-habits {
  display: grid;
  gap: 0.4rem;
}
.disc-habit,
.disc-beat__statement,
.disc-beat__close {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
@media (min-width: 48rem) {
  .disc-habits .disc-habit {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 0.85fr);
    column-gap: 0.45em;
    align-items: baseline;
  }
  .disc-habit__do {
    text-align: right;
    text-align-last: right;
  }
  .disc-habit__end {
    text-align: left;
    text-align-last: left;
  }
}
.disc-beat--pivot .disc-beat__statement {
  font-size: clamp(1.6rem, 2.8vw, 1.875rem);
  line-height: 1.16;
  letter-spacing: -0.022em;
}
.disc-beat__statement.disc-turn__lead {
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(1.1875rem, 1.75vw, 1.375rem);
  line-height: 1.4;
  letter-spacing: 0;
}
.disc-beat__body {
  display: block;
}
.disc-habits + .disc-beat__body,
.disc-beat__statement + .disc-beat__body {
  margin-top: clamp(0.85rem, 1.6vw, 1.15rem);
}
.disc-habit__swap {
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.disc-habit__lost {
  background-image: linear-gradient(
    transparent 56%,
    rgba(240, 104, 88, 0.3) 56%,
    rgba(240, 104, 88, 0.3) 94%,
    transparent 94%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.disc-drift > span {
  display: inline-block;
  white-space: nowrap;
}
.disc-drift__a {
  color: var(--ink);
  font-weight: 600;
}
.disc-drift__b {
  color: var(--body);
  letter-spacing: 0.08em;
}
.disc-drift__c {
  color: var(--muted);
  letter-spacing: 0.18em;
}
.disc-pivot__beat {
  font-weight: 700;
  color: var(--ink);
}
.disc-hl {
  --hl: rgba(244, 169, 176, 0.42);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  background-image: linear-gradient(transparent 55%, var(--hl) 55%, var(--hl) 95%, transparent 95%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.disc-hl--teal {
  --hl: rgba(151, 193, 191, 0.42);
}
.disc-hl--amber {
  --hl: rgba(252, 189, 76, 0.42);
}
.disc-hl--blue {
  --hl: rgba(146, 174, 198, 0.42);
}
.disc-beat__close {
  margin-top: clamp(1rem, 2vw, 1.4rem);
}
/* Coral deep on cream is 3.85:1, which clears AA for this large bold text. */
.disc-question {
  color: var(--coral-deep);
  white-space: nowrap;
  padding-bottom: 0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.6C46 3.4 104 2.6 197 6.2' fill='none' stroke='%23F06858' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
    no-repeat 0 100% / 100% 0.42em;
}

/* Scroll-driven: each keyframe runs FROM a quiet state TO the resting style
   above, tied to the element's own trip into the viewport. */
@keyframes discSweep {
  from {
    background-size: 0% 100%;
  }
}
@keyframes discDraw {
  from {
    background-size: 0% 0.42em;
  }
}
@keyframes discDriftB {
  from {
    opacity: 0.5;
    transform: translateX(-0.3em);
  }
}
@keyframes discDriftC {
  from {
    opacity: 0.35;
    transform: translateX(-0.7em);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .disc-habit__lost,
    .disc-hl,
    .disc-question,
    .disc-drift__b,
    .disc-drift__c {
      animation-duration: 1ms;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 100% cover 30%;
    }
    .disc-habit__lost,
    .disc-hl {
      animation-name: discSweep;
    }
    .disc-question {
      animation-name: discDraw;
      animation-range: entry 100% cover 35%;
    }
    .disc-drift__b {
      animation-name: discDriftB;
    }
    .disc-drift__c {
      animation-name: discDriftC;
    }
  }
}
@media (max-width: 36rem) {
  .disc-head .disc-beat {
    font-size: 1.0625rem;
  }
  .disc-drift__b {
    letter-spacing: 0.05em;
  }
  .disc-drift__c {
    letter-spacing: 0.12em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .disc-habit__lost,
  .disc-drift > span,
  .disc-hl,
  .disc-question {
    animation: none !important;
    transform: none;
  }
}

/* ---------- Mobile overflow guard (iteration 259) ----------------
   iOS Safari ignores body{overflow-x:clip} once it propagates to the
   viewport, so anything wider than the phone made the whole page pan
   sideways. html takes the clip, which keeps body's own clip on body;
   body becomes the containing block for absolute children, so a
   visually-hidden label inside a carousel (it sat at x=1161 on a 390
   phone) is clipped instead of widening the page 3x. */
html { overflow-x: clip; }
body { position: relative; }
.reel { position: relative; }
@media (max-width: 47.99rem) {
  /* A 1fr track is sized by its widest unbreakable child: let it shrink. */
  .just-one-q__grid > *,
  .grid-2 > *,
  .contact-layout-grid > * { min-width: 0; }
  .store-badges > .store-badge { min-width: 0; }
  .store-badge > span { min-width: 0; }
  .contact-email-inline { overflow-wrap: anywhere; }
}
@media (max-width: 47.99rem) {
  .jo-phone .just-one-q__content { width: 100%; }
  .contact-sidebar > *,
  .contact-sidebar .channel-card > *,
  .contact-sidebar .channel-card__header > * { min-width: 0; }
}
/* Small phones (iPhone SE / mini, 320-360): give long buttons and the
   two store badges room instead of pushing past the edge. */
@media (max-width: 22.5rem) {
  body .hero-fe__actions .btn.btn--lg { padding-inline: 1.25rem; white-space: normal; text-align: center; }
}