/*
 * "7 דקות" campaign landing page.
 *
 * Loaded after styles.css, which already supplies the nav, the footer and the
 * base type. Everything here is namespaced under `d15` so the rest of the site
 * is untouched.
 *
 * The palette is the app's own "Warm Moment" set, taken straight from
 * iOS `Theme.swift` / Android `Color.kt` rather than the slightly older tones
 * the marketing pages shipped with: ink and violet for the numbers, the sunset
 * gradient (dusk → mauve → peach) for the moments that should feel warm, clay
 * for the one number the page is actually about.
 *
 * The page is Hebrew-first and RTL, so every directional rule is written with
 * logical properties and the English switch needs no overrides.
 */

.d15 {
  --d15-sticky-h: 100px;
  --d-ink: var(--ink, #2d2930);
  --d-violet: var(--plum, #503750);
  --d-violet-deep: var(--plum-deep, #3d293e);
  --d-paper: var(--lav, #f0eef6);
  --d-surface: var(--surface, #fffdfc);
  --d-line: var(--divider, #e3ddea);
  --d-muted: var(--ink-soft, #6b5f63);
  --d-lav-muted: var(--muted-lav, #a491a6);
  --d-lav-soft: var(--lav-deep, #e7e3f0);
  --d-sage: var(--sage, #557565);
  --d-sage-soft: var(--soft-sage, #e0eae4);
  --d-clay: #c97863;
  --d-peach: #f3b995;
  --d-dusk: var(--plum-deep, #3d293e);
  --d-mauve: #9a7a8e;

  --d-shell: var(--wide, 68rem);
  --d-gutter: 24px;

  background: var(--d-paper);
  color: var(--d-ink);
}

.d15 ::selection {
  background: var(--d-peach);
  color: var(--d-ink);
}

/* Screen-reader-only text, used to give the linked figures a spoken label
   that names the source instead of reading out a bare number. */
.d15 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.d15 .d15-shell {
  max-width: var(--d-shell);
  margin: 0 auto;
  padding-inline: var(--d-gutter);
}

.d15 .d15-narrow {
  max-width: 34rem;
}

/* Tabular figures everywhere a number is doing the talking, so the counter and
   the bar values do not jitter as digits change. */
.d15 .num {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- hero --- */

.d15 .d15-hero {
  min-height: calc(100svh - 70px);
  min-height: calc(100dvh - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 6vw, 48px) var(--d-gutter) calc(56px + env(safe-area-inset-bottom));
  max-width: var(--d-shell);
  margin: 0 auto;
}

.d15 .d15-hero h1 {
  font-size: clamp(4rem, 22vw, 11rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0 0 clamp(20px, 5vw, 32px);
  color: var(--d-ink);
  background: linear-gradient(200deg, var(--d-dusk) 0%, var(--d-mauve) 62%, var(--d-peach) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* `background-clip: text` clips the gradient to the glyphs; without a touch
     of padding the descenders and the final period get shaved on Safari. */
  padding-block-end: 0.08em;
  padding-inline-end: 0.12em;
}

.d15 .d15-hero .d15-hero-sub {
  font-size: clamp(1.25rem, 4.6vw, 1.9rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--d-ink);
  margin: 0 0 24px;
  max-width: 26rem;
  text-wrap: balance;
}

.d15 .d15-note {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--d-muted);
  max-width: 30rem;
  margin-block: clamp(24px, 6vw, 32px) 0;
  margin-inline: 0;
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--d-line);
}

.d15 .d15-note a {
  color: var(--d-violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.d15 .d15-hero-fold {
  margin-block: 18px 0;
  margin-inline: auto;
  max-width: 22rem;
  width: 100%;
}

.d15 .d15-compare {
  margin-block-end: clamp(40px, 10vw, 48px);
}

.d15 .d15-compare-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-block-end: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.d15 .d15-compare-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1.2;
}

.d15 .d15-compare-screens {
  background: var(--d-lav-soft);
  color: var(--d-violet);
}

.d15 .d15-compare-kids {
  background: rgba(201, 120, 99, 0.16);
  color: var(--d-clay);
}

.d15 .d15-compare-arrow {
  flex-shrink: 0;
  color: var(--d-muted);
  font-size: 1rem;
}

.d15 .d15-compare-track {
  display: flex;
  justify-content: flex-end;
  block-size: 8px;
  border-radius: 999px;
  background: var(--d-lav-muted);
  overflow: hidden;
}

.d15 .d15-compare-fill {
  display: block;
  block-size: 100%;
  inline-size: 3.76%;
  min-inline-size: 6px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--d-clay), var(--d-peach));
}

.d15 .store-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-inline: auto;
}

.d15 .store-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  border-radius: 9px;
}

.d15 .store-row img {
  block-size: 44px;
  inline-size: auto;
  width: auto;
  height: 44px;
  max-inline-size: 152px;
  object-fit: contain;
  display: block;
}

/* Apple's official badge is a noticeably more compact pill than Google's
   wider one, so at the same height it reads smaller and lighter next to it.
   Sizing it a little taller brings the pair to the same optical weight. */
.d15 .store-row .badge-apple img {
  block-size: 50px;
  height: 50px;
}

.d15 .d15-hero-fold .d15-hero-stores {
  margin-block: 14px 0;
}

.d15 .d15-hero-free,
.d15 .d15-cta-free {
  margin: 10px 0 0;
  font-size: 0.875rem;
  color: var(--d-muted);
  text-align: center;
}

.d15 .d15-mid-cta .d15-cta-free,
.d15 .d15-close .d15-cta-free {
  margin-block-end: 12px;
}

.d15 .d15-product-title-mobile {
  display: none;
}

.d15 .store-row a:hover {
  text-decoration: none;
}

.d15 .d15-scroll-hint {
  align-self: flex-start;
}

/* A quiet nudge that there is more below the fold, since the hero is otherwise
   deliberately empty. */
.d15 .d15-scroll-hint {
  margin-block-start: 44px;
  font-size: 0.8125rem;
  color: var(--d-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.d15 .d15-scroll-hint::before {
  content: "";
  inline-size: 1px;
  block-size: 26px;
  background: linear-gradient(to bottom, transparent, var(--d-muted));
}

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

.d15 .d15-section {
  padding-block: 88px;
}

.d15 .d15-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--d-muted);
  margin: 0 0 14px;
  text-transform: none;
}

.d15 .d15-section h2 {
  font-size: clamp(1.9rem, 6.4vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  text-wrap: balance;
}

.d15 .d15-section .d15-lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--d-muted);
  max-width: 34rem;
  margin: 0 0 44px;
}

.d15 .d15-dark {
  background: linear-gradient(180deg, var(--d-violet-deep) 0%, #2a2234 100%);
  color: #fff;
}

.d15 .d15-dark .d15-lede {
  color: rgba(245, 243, 248, 0.68);
}

.d15 .d15-dark .d15-kicker {
  color: var(--d-peach);
}

/* ------------------------------------------------------------- the sum --- */

/* 7 × 5 × 52 × 12, stacked as its own little column so each factor lands one
   after the other as the section scrolls into view. */
.d15 .d15-sum {
  display: grid;
  gap: 10px;
  margin: 0 0 32px;
  max-width: 26rem;
}

.d15 .d15-factor {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  padding: 16px 20px;
}

.d15 .d15-factor .d15-factor-num {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--d-violet);
  min-inline-size: 2.6em;
}

.d15 .d15-factor .d15-factor-label {
  font-size: 1rem;
  color: var(--d-muted);
}

.d15 .d15-op {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--d-muted);
  text-align: center;
  line-height: 1;
}

.d15 .d15-total {
  background: linear-gradient(200deg, #292440 0%, #574a7a 55%, #7d6380 100%);
  border: none;
  color: #fff;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(79, 65, 121, 0.26);
}

.d15 .d15-total .d15-factor-num {
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  color: #fff;
  min-inline-size: 0;
}

.d15 .d15-total .d15-factor-label {
  color: rgba(255, 255, 255, 0.86);
}

.d15 .d15-sum-foot {
  font-size: 0.9375rem;
  color: var(--d-muted);
  max-width: 30rem;
  margin: 0;
}

/* ----------------------------------------------------------- childhood --- */

/* 144 squares, one per month from 6 to 18. The 21 days are about two thirds of
   one of them, so the last square is filled most of the way: the comparison
   does the work, no extra copy needed. */
.d15 .d15-childhood {
  margin-block-start: 64px;
  padding-block-start: 56px;
  border-block-start: 1px solid var(--d-line);
}

.d15 .d15-childhood .d15-kicker {
  font-size: clamp(1rem, 3.8vw, 1.125rem);
  letter-spacing: -0.01em;
  color: var(--d-ink);
  font-weight: 600;
}

.d15 .d15-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 5px;
  max-width: 24rem;
  margin: 0 0 22px;
}

.d15 .d15-grid span {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--d-lav-soft);
}

.d15 .d15-grid span.is-slice {
  background: linear-gradient(to left, var(--d-clay) 0 70%, var(--d-lav-soft) 70% 100%);
  /* This partial square is the whole point of the grid, so it is ringed and lit
     rather than left to be found among 143 identical neighbours. */
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 2px var(--d-clay), 0 0 16px rgba(201, 120, 99, 0.55);
}

html[dir="ltr"] .d15 .d15-grid span.is-slice {
  background: linear-gradient(to right, var(--d-clay) 0 70%, var(--d-lav-soft) 70% 100%);
}

.d15 .d15-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-size: 0.9375rem;
  color: var(--d-muted);
  margin: 0;
  padding: 0;
  list-style: none;
}

.d15 .d15-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.d15 .d15-legend i {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 3px;
  background: var(--d-lav-soft);
  flex: none;
}

.d15 .d15-legend li.is-slice i {
  background: var(--d-clay);
}

/* ------------------------------------------------------------ counter --- */

.d15 .d15-counter-band {
  background: #fff;
  border-block: 1px solid var(--d-line);
  text-align: center;
  padding-block: 96px;
}

.d15 .d15-counter {
  font-size: clamp(3.6rem, 19vw, 8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--d-violet);
  display: block;
  margin: 0;
}

.d15 .d15-counter-unit {
  font-size: clamp(1.1rem, 4.4vw, 1.5rem);
  font-weight: 600;
  color: var(--d-muted);
  letter-spacing: -0.01em;
  display: block;
  margin-block-start: 8px;
}

.d15 .d15-counter-caption {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--d-muted);
  max-width: 28rem;
  margin: 28px auto 0;
  text-wrap: balance;
}

/* --------------------------------------------------------------- bars --- */

.d15 .d15-bars {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 26px;
}

.d15 .d15-bar-children {
  margin-block-start: 12px;
  padding-block-start: 28px;
  border-block-start: 1px solid rgba(201, 120, 99, 0.35);
}

.d15 .d15-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 9px;
}

.d15 .d15-bar-label {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #fff;
}

.d15 .d15-bar-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--d-peach);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: rgba(243, 185, 149, 0.45);
  text-underline-offset: 4px;
}

.d15 .d15-bar-value:hover {
  text-decoration-style: solid;
}

.d15 .d15-track {
  block-size: 14px;
  border-radius: 999px;
  background: rgba(245, 243, 248, 0.08);
  overflow: hidden;
}

.d15 .d15-fill {
  display: block;
  block-size: 100%;
  inline-size: var(--d-width);
  border-radius: 999px;
  background: linear-gradient(to left, var(--d-mauve), var(--d-lav-soft));
  transition: inline-size 1s cubic-bezier(0.22, 0.75, 0.3, 1);
  transition-delay: var(--d-delay, 0s);
}

html[dir="ltr"] .d15 .d15-fill {
  background: linear-gradient(to right, var(--d-mauve), var(--d-lav-soft));
}

@media (prefers-reduced-motion: no-preference) {
  .d15-js .d15 .d15-bars:not(.is-on) .d15-fill {
    inline-size: 0;
  }
}

.d15 .d15-bar-note {
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(245, 243, 248, 0.55);
  max-width: 34rem;
}

/* The row the whole page is about: clay instead of the violet ramp, a lit
   track, and a sliver so narrow it stays visible at any width. */
.d15 .d15-bar-children .d15-bar-label,
.d15 .d15-bar-children .d15-bar-value {
  color: var(--d-clay);
}

.d15 .d15-bar-children .d15-bar-value {
  text-decoration-color: rgba(201, 120, 99, 0.5);
}

.d15 .d15-bar-children .d15-track {
  background: rgba(201, 120, 99, 0.14);
  box-shadow: 0 0 0 1px rgba(201, 120, 99, 0.3);
  block-size: 18px;
}

.d15 .d15-bar-children .d15-fill {
  background: linear-gradient(to left, #e8a088, var(--d-clay));
  min-inline-size: 8px;
  box-shadow: 0 0 28px rgba(201, 120, 99, 0.9);
}

html[dir="ltr"] .d15 .d15-bar-children .d15-fill {
  background: linear-gradient(to right, #e8a088, var(--d-clay));
}

.d15 .d15-bar-children .d15-bar-note {
  color: rgba(245, 243, 248, 0.66);
}

/* ------------------------------------------------------------- caveat --- */

.d15 .d15-caveat {
  margin-block-start: 48px;
  padding: 26px;
  border-radius: 20px;
  background: rgba(245, 243, 248, 0.06);
  border: 1px solid rgba(245, 243, 248, 0.12);
}

.d15 .d15-caveat h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: #fff;
}

.d15 .d15-caveat p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(245, 243, 248, 0.66);
}

/* ------------------------------------------------------------- pullquote --- */

.d15 .d15-pull {
  padding-block: 104px;
  text-align: center;
}

.d15 .d15-pull p {
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin: 0 auto;
  max-width: 24rem;
  text-wrap: balance;
}

.d15 .d15-pull .d15-pull-soft {
  color: var(--d-muted);
  display: block;
}

.d15 .d15-dark .d15-pull .d15-pull-soft {
  color: rgba(245, 243, 248, 0.5);
}

.d15 .d15-pull .d15-pull-after {
  font-size: clamp(1.25rem, 4.6vw, 1.6rem);
  color: var(--d-violet);
  margin-block-start: 34px;
  font-weight: 600;
}

/* The page's first download prompt after the hero. It sits on the line that
   introduces the app, which is the earliest point where asking for the
   download is not ahead of the story. */
.d15 .d15-turn-cta {
  margin-block-start: 26px;
}

/* ------------------------------------------------------------- product --- */

.d15 .d15-audience {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--d-muted);
  max-width: 36em;
  margin: 0 0 28px;
}

.d15 .d15-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: grid;
  gap: 10px;
  counter-reset: d15step;
}

.d15 .d15-steps li {
  counter-increment: d15step;
  background: var(--d-surface);
  padding-block: 20px;
  padding-inline: 56px 22px;
  position: relative;
  font-size: 1.0625rem;
  line-height: 1.55;
  border: 1px solid var(--d-line);
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(45, 41, 48, 0.04);
}

.d15 .d15-steps li::before {
  content: counter(d15step);
  position: absolute;
  inset-inline-start: 18px;
  inset-block-start: 19px;
  inline-size: 28px;
  block-size: 28px;
  border-radius: 999px;
  background: var(--d-lav-soft);
  color: var(--d-violet);
  font-size: 0.875rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.d15 .d15-net-demo {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-block: 8px 36px;
  padding: 22px 20px;
  border-radius: 22px;
  background: linear-gradient(145deg, var(--d-lav-soft), var(--d-surface));
  border: 1px solid var(--d-line);
  box-shadow: 0 10px 32px rgba(45, 41, 48, 0.06);
}

.d15 .d15-net-demo-title {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--d-violet);
  text-wrap: balance;
}

.d15 .d15-net-demo-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--d-ink-soft);
}

.d15 .d15-net-demo-shot {
  display: block;
  inline-size: min(100%, 280px);
  margin-inline: auto;
  border-radius: 26px;
  box-shadow: 0 2px 6px rgba(32, 28, 45, 0.06), 0 22px 52px rgba(79, 65, 121, 0.2);
}

.d15 .d15-shots-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 260px);
  gap: 14px;
  margin-block: 0 44px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(var(--d-gutter) * -1);
  padding-inline: var(--d-gutter);
}

.d15 .d15-shots-strip::-webkit-scrollbar {
  display: none;
}

.d15 .d15-shot-card {
  margin: 0;
  scroll-snap-align: center;
}

.d15 .d15-shot-card img {
  display: block;
  inline-size: 100%;
  border-radius: 22px;
  box-shadow: 0 2px 6px rgba(32, 28, 45, 0.06), 0 16px 40px rgba(79, 65, 121, 0.14);
}

.d15 .d15-shot-card figcaption {
  margin-block-start: 10px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--d-ink-soft);
  text-align: center;
}

.d15 .d15-memory-spot figcaption {
  display: grid;
  gap: 4px;
}

.d15 .d15-memory-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--d-violet);
}

.d15 .d15-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: grid;
  gap: 12px;
}

.d15 .d15-highlights li {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(45, 41, 48, 0.04);
}

.d15 .d15-highlights h4 {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--d-violet);
}

.d15 .d15-highlights p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--d-ink-soft);
}

.d15 .d15-mid-cta {
  text-align: center;
  margin-block-end: 48px;
}

.d15 .d15-mid-cta .d15-store-row,
.d15 .d15-close .d15-store-row,
.d15 .d15-download-block .d15-store-row {
  justify-content: center;
  margin-inline: auto;
}

.d15 .d15-cta-priming {
  margin: 14px auto 0;
  max-width: 22rem;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--d-muted);
}

.d15 .d15-mid-cta .d15-cta-priming {
  color: var(--d-ink-soft);
}

.d15 .d15-close .d15-close-priming {
  margin-block-start: 12px;
}

.d15 .d15-no-block-soft {
  margin: 8px 0 0;
  font-size: 0.8125rem;
}

.d15 .d15-no-block-soft a {
  color: var(--d-violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.d15 .d15-shots-wrap {
  position: relative;
  margin-block: 0 44px;
}

.d15 .d15-shots-wrap::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 28px;
  pointer-events: none;
  background: linear-gradient(to inline-start, var(--d-paper), transparent);
}

.d15 .d15-shots-wrap .d15-shots-strip {
  margin-block: 0;
}

.d15 .d15-footer-permissions {
  margin-block-start: 12px;
  font-size: 0.875rem;
}

.d15 .d15-footer-permissions a {
  color: var(--d-violet);
  font-weight: 600;
}

.d15 .d15-mid-cta-lead {
  margin: 0 0 16px;
  font-size: clamp(1.125rem, 3.8vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--d-ink);
  text-wrap: balance;
}

.d15 .d15-mid-cta .d15-store-row {
  justify-content: center;
}

.d15 .d15-promise {
  background: var(--d-sage-soft);
  border-radius: 22px;
  padding: 32px 26px;
  text-align: center;
  margin-block-end: 32px;
}

.d15 .d15-promise p {
  margin: 0;
  font-size: clamp(1.2rem, 4.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--d-sage);
  text-wrap: balance;
}

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

.d15 .d15-close {
  background: linear-gradient(200deg, #292440 0%, #574a7a 55%, #7d6380 100%);
  color: #fff;
  text-align: center;
  padding-block: 96px;
}

.d15 .d15-close h2 {
  color: #fff;
  margin-block-end: 14px;
}

.d15 .d15-close p {
  color: rgba(255, 255, 255, 0.86);
  max-width: 28rem;
  margin: 0 auto 34px;
  font-size: 1.0625rem;
}

.d15 .d15-close .d15-download-block {
  margin: 0 auto;
  max-width: 34rem;
}

.d15 .d15-close .d15-store-row {
  justify-content: center;
  margin: 0 auto 14px;
}

.d15 .d15-close .d15-fineprint {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 auto 10px;
}

.d15 .d15-close .d15-close-priming {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  max-width: 32rem;
  margin: 0 auto;
}

/* ------------------------------------------------------------- sources --- */

.d15 .d15-sources {
  background: #fff;
  border-block-start: 1px solid var(--d-line);
  padding-block: 80px;
}

.d15 .d15-sources h2 {
  font-size: clamp(1.5rem, 5vw, 2rem);
}

.d15 .d15-source-list {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
}

.d15 .d15-source-list li {
  padding-block: 20px;
  border-block-end: 1px solid var(--d-line);
}

.d15 .d15-source-list li:last-child {
  border-block-end: none;
}

.d15 .d15-source-list h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.d15 .d15-source-list p {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--d-muted);
}

.d15 .d15-source-list .d15-source-out {
  font-size: 0.875rem;
  color: var(--d-violet);
  text-decoration: underline;
  text-underline-offset: 3px;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: 8px;
  overflow-wrap: anywhere;
}

.d15 .d15-source-short {
  font-weight: 600;
}

.d15 .d15-source-url {
  display: none;
}

.d15 .d15-source-list li + li {
  margin-block-start: 4px;
}

/* --------------------------------------------------------- sticky cta --- */

/* Appears once the hero is behind the visitor, on small screens only: the
   desktop layout keeps a CTA in view without it. */
.d15 .d15-sticky {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: rgba(240, 238, 246, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-start: 1px solid var(--d-line);
  box-shadow: 0 -8px 32px rgba(45, 41, 48, 0.08);
  transform: translateY(110%);
  transition: transform 0.28s cubic-bezier(0.3, 0.8, 0.4, 1);
}

.d15 .d15-sticky-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  max-width: var(--d-shell);
  margin: 0 auto;
}

.d15 .d15-sticky-badges {
  justify-content: center;
  margin: 0;
}

.d15 .d15-sticky-free {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  color: var(--d-muted);
  text-align: center;
}

body.d15.d15-sticky-active {
  padding-block-end: calc(var(--d15-sticky-h) + env(safe-area-inset-bottom));
}

.d15 .d15-sticky[hidden] {
  display: none !important;
}

.d15 .d15-sticky.is-on {
  transform: none;
}

/* On wider screens the bar has room to put its line and its badges on one
   row, so it stays a thin strip rather than the stacked block it is on a
   phone. */
@media (min-width: 760px) {
  .d15 .d15-sticky-inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .d15 .d15-sticky-free {
    margin: 0;
    font-size: 0.875rem;
  }
}

/* ------------------------------------------------------------- reveal --- */

@media (prefers-reduced-motion: no-preference) {
  /* `.d15-js` is set by an inline script in the head. Without it the reveal
     never arms, so a page with scripting off shows every section. */
  .d15-js .d15 .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
    transition-delay: var(--d-delay, 0s);
  }

  .d15-js .d15 .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* Motion is decoration here, never the only way a number is delivered: with
   reduced motion the bars are simply drawn at full length. */
@media (prefers-reduced-motion: reduce) {
  .d15 .d15-fill {
    transition: none;
  }

  .d15 .d15-sticky {
    transition: none;
  }
}

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

@media (max-width: 759px) {
  /* The generous bottom padding is deliberate: it keeps the dark section
     below from starting too close to the fold, so the hero has room to
     breathe before the page turns. */
  .d15 .d15-hero {
    min-height: auto;
    justify-content: flex-start;
    padding-block: 16px 123px;
  }

  .d15 .d15-hero h1 {
    font-size: clamp(3.1rem, 17vw, 4.25rem);
    margin-block-end: 10px;
  }

  .d15 .d15-hero .d15-hero-sub {
    font-size: 1.125rem;
    margin-block-end: 12px;
  }

  .d15 .d15-product-title-full {
    display: none;
  }

  .d15 .d15-product-title-mobile {
    display: block;
  }

  .d15 .store-row a {
    min-block-size: 48px;
    min-inline-size: 48px;
    padding-inline: 2px;
  }

  .d15 .store-row img {
    block-size: 44px;
    height: 44px;
    max-inline-size: 148px;
  }

  .d15 .store-row .badge-apple img {
    block-size: 50px;
    height: 50px;
  }

  .d15 .d15-scroll-hint {
    margin-block-start: 40px;
  }

  .d15 .d15-steps-full,
  .d15 .d15-mobile-trim,
  .d15 .d15-promise {
    display: none;
  }

  .d15 .d15-section .d15-product-lede {
    display: none;
  }

  .d15 .d15-shots-strip {
    grid-auto-columns: min(86%, 300px);
    scroll-padding-inline: var(--d-gutter);
  }

}

@media (min-width: 760px) {
  .d15 .d15-hero-fold {
    max-width: 28rem;
  }

  .d15 .d15-source-url {
    display: inline;
  }

  .d15 .d15-source-short {
    display: none;
  }
}

@media (min-width: 760px) {
  .d15 {
    --d-gutter: 32px;
  }

  .d15 .d15-section {
    padding-block: 120px;
  }

  .d15 .d15-hero h1 {
    font-size: clamp(7rem, 15vw, 11rem);
  }

  .d15 .d15-sum {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
    max-width: none;
  }

  .d15 .d15-sum .d15-op {
    display: none;
  }

  .d15 .d15-factor {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .d15 .d15-factor .d15-factor-num {
    min-inline-size: 0;
  }

  .d15 .d15-total {
    grid-column: 1 / -1;
    margin-block-start: 12px;
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
  }

  .d15 .d15-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .d15 .d15-net-demo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 28px;
    padding: 28px 32px;
  }

  .d15 .d15-net-demo-shot {
    inline-size: 100%;
    max-inline-size: 300px;
  }

  .d15 .d15-shots-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 18px;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  .d15 .d15-hero .d15-store-row {
    align-self: center;
  }

  .d15 .d15-bars {
    gap: 30px;
  }

  .d15 .d15-track {
    block-size: 16px;
  }
}

@media (min-width: 1000px) {
  .d15 .d15-shots {
    gap: 24px;
  }
}