/* Multi-page additions. Loaded after motion.v4.css so these win on ties.
   Everything here reuses the site's own tokens; nothing introduces a new look. */

/* Subpages have no hero film. The fixed backdrop shows the first frame at the
   same dimmed state the home page settles into below its hero, so the ground
   under every page is the same. */
.subpage .hero-photo{ opacity: .5 !important; transform: scale(1.14) !important; }

/* Subpage opening: the section-head pattern, with the page's h1 */
.page-intro{ padding-top: calc(var(--section-y) + 56px); }
.page-intro .page-title{
  margin: 0;
  font-size: calc(var(--h2) * 1.12);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1.08;
  color: #fff;
  text-wrap: balance;
}

/* Home: three doors to the detail pages, drawn as the site's cards. The
   transition restates the reveal's properties because at equal specificity
   the later rule wins outright and would otherwise cancel the entrance. */
.deeper-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.deeper-card{
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 190px;
  padding: 28px 26px 26px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.085);
  background: linear-gradient(168deg, rgba(255,255,255,0.062) 0%, rgba(255,255,255,0.018) 42%, rgba(255,255,255,0.006) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.35), 0 20px 42px -18px rgba(0,0,0,0.62);
  color: #fff;
  text-decoration: none;
  transition:
    border-color .45s ease, box-shadow .45s ease, background .45s ease,
    opacity .95s cubic-bezier(0.16,1,0.3,1),
    transform .95s cubic-bezier(0.16,1,0.3,1),
    filter .95s cubic-bezier(0.16,1,0.3,1),
    scale .58s var(--pop);
  transition-delay: 0s, 0s, 0s, var(--rd,0s), var(--rd,0s), var(--rd,0s), var(--rd,0s);
}
@media (hover: hover){ .deeper-card:hover{
  border-color: rgba(186,208,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 4px rgba(0,0,0,0.4), 0 30px 60px -20px rgba(0,0,0,0.72), 0 0 40px -12px rgba(186,208,255,0.22);
} }
.deeper-card:focus-visible{ outline: 2px solid rgba(186,208,255,0.7); outline-offset: 3px; }
.deeper-eyebrow{ font-size: 11.5px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--t4); }
.deeper-card b{ font-size: 19px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: #fff; }
.deeper-go{ margin-top: auto; font-size: 13.5px; color: var(--accent); }
@media (max-width: 900px){ .deeper-grid{ grid-template-columns: 1fr; } .deeper-card{ min-height: 0; } }

/* =====================================================================
   The capsule header (every page, via .header--capsule), then the
   subpage opening and the way onward (scoped to .subpage).
   ===================================================================== */

/* ---------- capsule header (every page) ----------
   A floating glass pill instead of a full-width bar. No transform on the
   header itself: that would make it the containing block for the fixed
   phone menu. left/right + max-width + auto margins centre it instead. */
.header.header--capsule{
  top: 14px; left: 16px; right: 16px;
  max-width: 1200px; margin-inline: auto;
  height: 64px;
  padding: 0 9px 0 22px;
  border-radius: 999px;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  transition: top .4s ease;
}
.header.header--capsule.is-stuck{ top: 10px; padding-top: 0; padding-bottom: 0; }
.header.header--capsule::before{
  opacity: 1;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.11);
  background: linear-gradient(180deg, rgba(20,26,34,0.72), rgba(10,14,19,0.66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 22px 48px -24px rgba(0,0,0,0.85);
  transition: background .4s ease, border-color .4s ease;
}
.header.header--capsule.is-stuck::before{ border-color: rgba(255,255,255,0.14); background: linear-gradient(180deg, rgba(20,26,34,0.86), rgba(10,14,19,0.82)); }

/* the nav loses motion v4's own pill: the capsule is the pill now */
.nav.nav--capsule{ gap: 2px; padding: 0; border: 0; background: none; }
.nav.nav--capsule a{
  position: static; overflow: visible;
  display: block; height: auto; padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  color: inherit; font-size: inherit; text-decoration: none;
}
.nav.nav--capsule a::before{ content: none; }
.header--capsule .nav-item{ position: relative; }
.nav.nav--capsule .nav-top{
  display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 15px;
  border-radius: 999px;
  color: var(--t3);
  font-size: 14px; letter-spacing: -0.006em;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.header--capsule .nav-item:focus-within .nav-top{ color: #fff; background: rgba(255,255,255,0.06); }
@media (hover: hover){ .nav.nav--capsule .nav-top:hover{ color: #fff; background: rgba(255,255,255,0.06); } }
.nav.nav--capsule .nav-top.is-active{
  color: #fff;
  background: rgba(186,208,255,0.08);
  box-shadow: inset 0 0 0 1px rgba(186,208,255,0.2);
}
.header--capsule .chev{ width: 9px; height: 9px; opacity: .6; transition: transform .3s ease, opacity .3s ease; }
.header--capsule .nav-item:focus-within .chev{ transform: rotate(180deg); opacity: 1; }
@media (hover: hover){ .header--capsule .nav-item:hover .chev{ transform: rotate(180deg); opacity: 1; } }

/* dropdown: the page's sections, a bold name and one line each */
.header--capsule .nav-drop{
  position: absolute;
  top: calc(100% + 17px); left: 50%;
  width: 330px;
  display: grid; gap: 2px;
  padding: 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.11);
  background: linear-gradient(180deg, rgba(22,28,37,0.96), rgba(11,15,20,0.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 30px 60px -20px rgba(0,0,0,0.85);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .22s ease, transform .3s cubic-bezier(0.16,1,0.3,1), visibility .22s;
}
/* a bridge over the gap, so the panel stays open on the way down to it */
.header--capsule .nav-drop::before{ content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.header--capsule .nav-item:focus-within .nav-drop{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover){ .header--capsule .nav-item:hover .nav-drop{ opacity: 1; visibility: visible; transform: translate(-50%, 0); } }
.header--capsule .nav-drop-label{
  padding: 9px 14px 6px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--t5);
}
.nav.nav--capsule .nav-drop a{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; justify-items: start; justify-content: stretch;
  padding: 11px 14px;
  border-radius: 13px;
  text-align: left; white-space: normal;
  transition: background .2s ease;
}
.header--capsule .nav-drop b{ font-size: 14.5px; font-weight: 500; letter-spacing: -0.008em; color: #fff; }
.header--capsule .nav-drop span{ font-size: 12.5px; line-height: 1.45; color: var(--t4); }
@media (hover: hover){ .nav.nav--capsule .nav-drop a:hover{ background: rgba(255,255,255,0.055); } }
.nav.nav--capsule .nav-drop a.is-active{ background: rgba(186,208,255,0.07); }
.nav.nav--capsule .nav-drop a.is-active b{ color: var(--accent); }

/* right side: a quiet pill and the solid one, as in the reference */
.header--capsule .header-actions{ justify-self: end; display: flex; align-items: center; gap: 8px; }
.header.header--capsule .btn{ height: 46px; padding: 0 20px; border-radius: 999px; }
.header--capsule .nav-foot{ display: none; }

/* ---------- page opening ---------- */
.subpage .page-intro{ padding-top: calc(var(--section-y) + 64px); padding-bottom: calc(var(--section-y) * .7); }
.crumbs{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 30px;
  font-size: 13px; letter-spacing: -0.003em;
  color: var(--t5);
}
.crumbs a{ color: var(--t4); transition: color .2s ease; }
@media (hover: hover){ .crumbs a:hover{ color: #fff; } }
.crumbs [aria-current]{ color: var(--t2); }
.subpage .page-intro .page-title{
  max-width: 16ch;
  font-size: clamp(46px, 6.3vw, 92px);
  line-height: 1;
  letter-spacing: -0.052em;
}
.page-title em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.03em;
  color: var(--muted);
}
.intro-row{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px;
  margin-top: 40px;
}
.intro-sub{ max-width: 540px; margin: 0; font-size: 17px; line-height: 1.62; letter-spacing: -0.013em; color: var(--t3); }
.intro-actions{ display: flex; gap: 10px; flex: none; }
.intro-actions .btn{ height: 48px; padding: 0 22px; border-radius: 999px; }

/* the page's own contents, drawn as a strip: one cell per section */
.toc{ margin-top: 76px; }
.toc-label{
  display: block; margin-bottom: 14px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--t5);
}
.toc ol{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.toc li + li{ border-left: 1px solid var(--border-soft); }
.toc a{
  position: relative;
  display: grid; gap: 6px; align-content: start;
  height: 100%;
  padding: 24px 52px 26px 22px;
  color: #fff;
  transition: background .35s ease;
}
/* a hairline of the accent draws in across the top, the eyebrow's gesture */
.toc a::before{
  content: ""; position: absolute; left: -1px; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, rgba(186,208,255,0.9), rgba(186,208,255,0.1));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s cubic-bezier(0.16,1,0.3,1);
}
@media (hover: hover){ .toc a:hover{ background: linear-gradient(180deg, rgba(186,208,255,0.06), rgba(186,208,255,0) 80%); } }
.toc a:focus-visible::before{ transform: scaleX(1); }
@media (hover: hover){ .toc a:hover::before{ transform: scaleX(1); } }
.toc b{ font-size: 16.5px; font-weight: 500; letter-spacing: -0.012em; }
.toc span{ font-size: 13.5px; line-height: 1.5; color: var(--t4); }
.toc i{
  position: absolute; top: 22px; right: 20px;
  font-style: normal; font-size: 15px; color: var(--t5);
  transition: transform .35s cubic-bezier(0.16,1,0.3,1), color .35s ease;
}
@media (hover: hover){ .toc a:hover i{ transform: translateY(4px); color: var(--accent); } }
.toc a:focus-visible, .crumbs a:focus-visible{ outline: 2px solid rgba(186,208,255,0.7); outline-offset: -2px; }

/* ---------- the way onward ---------- */
.next-page{ display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 14px; }
.next-card, .next-aside{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.085);
  background: linear-gradient(168deg, rgba(255,255,255,0.062) 0%, rgba(255,255,255,0.018) 42%, rgba(255,255,255,0.006) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 2px 4px rgba(0,0,0,0.35), 0 20px 42px -18px rgba(0,0,0,0.62);
  /* restates the reveal's properties, as .deeper-card does */
  transition:
    border-color .45s ease, box-shadow .45s ease, background .45s ease,
    opacity .95s cubic-bezier(0.16,1,0.3,1),
    transform .95s cubic-bezier(0.16,1,0.3,1),
    filter .95s cubic-bezier(0.16,1,0.3,1),
    scale .58s var(--pop);
  transition-delay: 0s, 0s, 0s, var(--rd,0s), var(--rd,0s), var(--rd,0s), var(--rd,0s);
}
.next-card{
  display: flex; flex-direction: column; gap: 14px;
  min-height: 280px;
  padding: 34px 38px 36px;
  color: #fff; text-decoration: none;
  overflow: hidden;
}
.next-card::after{
  content: ""; position: absolute; inset: auto -10% -60% 30%; height: 120%;
  background: radial-gradient(closest-side, rgba(186,208,255,0.16), transparent);
  opacity: 0; transition: opacity .6s ease;
  pointer-events: none;
}
@media (hover: hover){ .next-card:hover{
  border-color: rgba(186,208,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 2px 4px rgba(0,0,0,0.4), 0 30px 60px -20px rgba(0,0,0,0.72), 0 0 40px -12px rgba(186,208,255,0.22);
} }
@media (hover: hover){ .next-card:hover::after{ opacity: 1; } }
.next-card:focus-visible{ outline: 2px solid rgba(186,208,255,0.7); outline-offset: 3px; }
.next-kicker{ font-size: 11.5px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--t4); }
.next-title{
  display: flex; align-items: baseline; gap: .28em;
  margin-top: auto;
  font-size: clamp(40px, 5.2vw, 76px); font-weight: 500;
  line-height: 1; letter-spacing: -0.05em;
}
.next-title i{
  font-style: normal; font-weight: 300; color: var(--t4);
  transition: transform .5s cubic-bezier(0.16,1,0.3,1), color .4s ease;
}
@media (hover: hover){ .next-card:hover .next-title i{ transform: translateX(.18em); color: var(--accent); } }
.next-line{ max-width: 460px; font-size: 16px; line-height: 1.55; color: var(--t3); }
.next-aside{ display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 30px 30px 30px; }
.next-aside p{ margin: 0; text-wrap: pretty; font-size: 19px; line-height: 1.35; letter-spacing: -0.02em; color: var(--t2); }
.next-aside .btn{ height: 48px; border-radius: 999px; }

/* ---------- mid widths: the capsule drops its quiet pill first ---------- */
@media (min-width: 901px) and (max-width: 1080px){
  .header--capsule .header-actions .btn-ghost{ display: none; }
  .nav.nav--capsule .nav-top{ padding: 0 12px; }
}

/* ---------- phones ---------- */
@media (max-width: 900px){
  .header.header--capsule{
    top: max(10px, env(safe-area-inset-top)); left: 12px; right: 12px;
    height: 58px;
    padding: 0 7px 0 18px;
    grid-template-columns: 1fr auto;
  }
  .header.header--capsule.is-stuck{ top: max(8px, env(safe-area-inset-top)); }
  .header--capsule .header-actions{ display: none; }
  .header--capsule .burger{ width: 44px; height: 44px; border-radius: 999px; border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.05); }

  /* the menu is a sheet hanging from the capsule, not a full-screen takeover */
  .nav.nav--capsule{
    display: block;
    inset: auto 12px auto 12px;
    top: calc(max(10px, env(safe-area-inset-top)) + 66px);
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)) - 80px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 8px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.12);
    background: linear-gradient(180deg, rgba(20,26,34,0.98), rgba(10,14,19,0.98));
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.9);
    transform: translateY(-8px) scale(0.985); transform-origin: top center;
    transition: opacity .26s ease, visibility .26s ease, transform .4s cubic-bezier(0.16,1,0.3,1);
  }
  body.menu-open .nav.nav--capsule{ transform: none; }
  .nav.nav--capsule .nav-top{
    display: flex; justify-content: space-between;
    width: 100%; height: 56px; padding: 0 18px;
    border-radius: 16px;
    font-size: 19px; color: var(--t2);
  }
  .header--capsule .chev{ transform: rotate(-90deg); }
  .header--capsule .nav-item:focus-within .chev{ transform: rotate(-90deg); }
@media (hover: hover){ .header--capsule .nav-item:hover .chev{ transform: rotate(-90deg); } }
  /* only the page you are on lists its sections */
  .header--capsule .nav-drop{ display: none; }
  .header--capsule .nav-item.is-current .nav-drop{
    display: grid; position: static;
    width: auto; margin: 4px 0 8px;
    padding: 4px;
    opacity: 1; visibility: visible; transform: none;
    border-radius: 16px; border-color: rgba(255,255,255,0.07);
    background: rgba(255,255,255,0.03); box-shadow: none;
  }
  .header--capsule .nav-drop::before{ content: none; }
  .header--capsule .nav-foot{
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--border-soft);
  }
  /* the link reset above outranks .btn, so the menu's two buttons restate it */
  .nav.nav--capsule .nav-foot .btn{
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 50px; border-radius: 999px;
    font-size: 15px; font-weight: 500; letter-spacing: -0.009em;
  }
  .nav.nav--capsule .nav-foot .btn-solid{
    background: linear-gradient(180deg, #ffffff 0%, #e7e7e7 48%, #cfcfcf 100%);
    color: #111; border: 1px solid #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
  }
  .nav.nav--capsule .nav-foot .btn-ghost{
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(0,0,0,0.45) 50%, rgba(160,175,200,0.08));
    color: #fff; border: 1px solid rgba(198,198,198,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  }

  .subpage .page-intro{ padding-top: calc(var(--section-y) + 30px); }
  .crumbs{ margin-bottom: 22px; }
  .subpage .page-intro .page-title{ max-width: none; font-size: clamp(40px, 11vw, 56px); line-height: 1.02; }
  .intro-row{ flex-direction: column; align-items: stretch; gap: 26px; margin-top: 24px; }
  .intro-sub{ font-size: 16px; }
  .intro-actions .btn{ flex: 1; }
  .toc{ margin-top: 48px; }
  .toc ol{ grid-auto-flow: row; }
  .toc li + li{ border-left: 0; border-top: 1px solid var(--border-soft); }
  .toc a{ padding: 18px 44px 18px 4px; }
  .toc i{ top: 20px; right: 8px; }

  .next-page{ grid-template-columns: 1fr; }
  .next-card{ min-height: 220px; padding: 26px 24px 28px; }
  .next-aside{ padding: 24px; }
}
@media (prefers-reduced-motion: reduce){
  .header--capsule .nav-drop, .nav.nav--capsule, .toc a::before, .toc i, .next-title i{ transition: none; }
}

/* short screens: the hero starts below the header (site.v2.css sets 88px for
   the old bar). The capsule's lower edge sits at 78px, so clear it by 26px. */
@media (max-height: 760px){
  .hero{ padding-top: 104px; }
}

/* =====================================================================
   Polish pass: hero, subpage sections, footer
   ===================================================================== */

/* ---------- hero ---------- */
/* buttons take the capsule's pill, so the header and the hero agree */
.hero-actions .btn{ border-radius: 999px; padding: 0 24px; }
.hero{ position: relative; }
/* the background toggle is a setting, not a call to action: it sits quietly
   in the hero's corner with a play or pause glyph */
.video-control{
  position: absolute; z-index: 2;
  /* lines up with the capsule's right edge (16px gutter, 1200px max) */
  right: max(16px, calc((100% - 1200px) / 2), env(safe-area-inset-right)); bottom: 22px;
  margin: 0;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 38px; padding: 0 15px 0 13px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,12,16,0.55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--t2);
  font-size: 12px; letter-spacing: 0em;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
@media (hover: hover){ .video-control:hover{ color: #fff; border-color: rgba(255,255,255,0.32); background: rgba(8,12,16,0.72); } }
.video-control::before{
  content: ""; width: 8px; height: 9px; flex: none;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);           /* play */
}
.video-control[aria-pressed="true"]::before{
  clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%, 0 0, 68% 0, 100% 0, 100% 100%, 68% 100%, 68% 0); /* pause */
}
@media (max-width: 900px){
  .video-control{ bottom: 14px; min-height: 34px; font-size: 11.5px; }
}

/* ---------- subpage sections ---------- */
/* --center heads lose to the base .section-head in site.v2.css (declared
   later, same weight), so they render as two columns with centred text in
   each. On the subpages every head reads left, like its neighbours. */
.subpage .section-head--center{ justify-items: stretch; align-items: end; text-align: left; }
/* and the proof list under it follows the head to the left edge */
.subpage .help--proof{ margin-left: 0; margin-right: 0; }
.subpage .section-head--center .eyebrow{ justify-content: flex-start; }
.subpage .section h2{ text-wrap: balance; }
.subpage .section-sub{ text-wrap: pretty; }
/* the FAQ's numbers share one width, so the questions start on one line */
.faq summary > .motion-index{ font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */
.site-foot.site-foot--full{
  display: block;
  padding: 72px var(--section-x) 0;
  font-size: 13.5px;
  text-align: left;
}
.foot-top{
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
  gap: 48px 64px;
  padding-bottom: 56px;
}
.foot-brand{ display: grid; justify-items: start; align-content: start; gap: 18px; }
.site-foot--full .foot-brand .logo{ font-size: 16px; color: #fff; }
.site-foot--full .foot-brand .logo svg{ height: 20px; }
.foot-brand p{ max-width: 330px; margin: 0; font-size: 14.5px; line-height: 1.6; letter-spacing: -0.008em; color: var(--t3); }
.foot-cols{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-col{ display: grid; align-content: start; justify-items: start; gap: 12px; }
.foot-h{
  margin: 0 0 4px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--t5);
}
.foot-col a{ color: var(--t3); transition: color .2s ease; }
@media (hover: hover){ .foot-col a:hover{ color: #fff; } }
.foot-base{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px 24px;
  padding: 22px 0 max(26px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-soft);
  font-size: 12px; color: var(--t5);
}
.site-foot--full .foot-legal{ display: flex; gap: 20px; }
.site-foot--full .foot-legal a{ color: var(--t4); text-decoration: none; }
@media (hover: hover){ .site-foot--full .foot-legal a:hover{ color: #fff; } }
.site-foot--full a:focus-visible{ outline: 2px solid rgba(186,208,255,0.7); outline-offset: 3px; border-radius: 4px; }
@media (max-width: 900px){
  .site-foot.site-foot--full{ padding-top: 56px; text-align: left; }
  .foot-top{ grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .foot-cols{ grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .foot-col:last-child{ grid-column: 1 / -1; }
  .foot-base{ flex-direction: column; align-items: flex-start; }
}

/* =====================================================================
   Home: "a member's day". Replaces the light momentum panel. The scroll
   runs a clock from morning to night; a marker walks the rail, each moment
   lights as it passes, and a faint sun crosses the frame. JS writes --p
   (section progress) and --x (marker position). Without JS, or with reduced
   motion, neither is set and everything renders lit and at rest.
   ===================================================================== */
.day-scene{ position: relative; isolation: isolate; }
.day-frame{
  position: relative;
  max-width: 1280px; margin: 0 auto;
  padding: 120px var(--section-x) 112px;
  display: flex; flex-direction: column; justify-content: center;
}
/* tall desktops: the section is the dial; the frame holds still */
.motion-ready .day-scene{ height: 300svh; }
.motion-ready .day-frame{
  position: sticky; top: 0;
  height: 100svh; min-height: 660px;
  padding-top: 104px; padding-bottom: 48px;
}

/* the sun: rises left, peaks mid-frame, sets right */
.day-sun{
  position: absolute; z-index: -1; pointer-events: none;
  width: min(980px, 110vw); aspect-ratio: 1;
  left: calc(var(--x, .5) * 100%);
  top: 40%;
  top: calc(64% - sin(var(--x, .5) * 180deg) * 30%);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(186,208,255,0.16), rgba(186,208,255,0.05) 42%, transparent 72%);
  opacity: .9;
  opacity: calc(.45 + sin(var(--x, .5) * 180deg) * .55);
}

.day-head{ display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.day-eyebrow{
  display: block; margin-bottom: 22px;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--t4);
}
.day-scene h2{
  margin: 0;
  font-size: clamp(46px, 6.2vw, 98px); font-weight: 500;
  line-height: 1.02; letter-spacing: -0.05em;
  color: #fff;
}
/* "It runs all day." fills with light as the day goes on */
.day-scene h2 em{
  font-family: "Instrument Serif", "Times New Roman", Times, serif;
  font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.03em;
  padding-right: .06em;
  color: transparent;
  background: linear-gradient(90deg, #fff 0, #fff calc(var(--p, 1) * 100%), var(--t5) calc(var(--p, 1) * 100% + 14%));
  -webkit-background-clip: text; background-clip: text;
}
.day-clock{ display: grid; justify-items: end; gap: 10px; flex: none; }
.day-clock-label{ font-size: 11px; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--t5); }
.day-clock-time{
  font-size: clamp(56px, 7.4vw, 118px); font-weight: 300;
  line-height: .9; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  color: var(--t2);
}

/* the rail, and the marker that walks it */
.day-rail{ position: relative; height: 1px; margin-top: clamp(44px, 8vh, 88px); background: rgba(255,255,255,0.12); }
.day-rail-fill{
  position: absolute; inset: 0;
  transform-origin: left; transform: scaleX(var(--x, 1));
  background: linear-gradient(90deg, rgba(186,208,255,0.12), rgba(186,208,255,0.85));
}
.day-rail-dot{
  position: absolute; top: 0; left: calc(var(--x, 1) * 100%);
  width: 9px; height: 9px; margin: -4px 0 0 -4.5px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(186,208,255,0.14), 0 0 24px 5px rgba(186,208,255,0.5);
}

.day-moments{
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.moment{
  position: relative;
  display: grid; align-content: start; gap: 8px;
  padding: 30px 30px 0 0;
  transition: opacity .6s ease;
}
/* each moment's tick on the rail */
.moment::before{
  content: ""; position: absolute; left: 0; top: -3.5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #0b1016; border: 1px solid rgba(255,255,255,0.28);
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.moment time{
  font-size: 28px; font-weight: 300; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
  transition: color .5s ease;
}
.moment-k{ font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t4); transition: color .5s ease; }
.moment p{ margin: 4px 0 0; max-width: 250px; font-size: 14.5px; line-height: 1.55; letter-spacing: -0.008em; color: var(--t3); }
.moment::before{ z-index: 1; }

/* live: moments wait dim until the marker reaches them */
/* only the words rise: the tick has to stay on the rail */
.day-scene.is-live .moment{ opacity: .32; }
.day-scene.is-live .moment > *{ transform: translateY(10px); transition: transform .7s cubic-bezier(0.16,1,0.3,1), color .5s ease; }
.day-scene.is-live .moment.is-lit{ opacity: 1; }
.day-scene.is-live .moment.is-lit > *{ transform: none; }
.day-scene.is-live .moment.is-lit::before,
.day-scene:not(.is-live) .moment::before{
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 14px 2px rgba(186,208,255,0.45);
}
.day-scene .moment.is-lit .moment-k{ color: var(--accent); }

.day-foot{ margin: clamp(36px, 6vh, 64px) 0 0; font-size: 14px; color: var(--t4); letter-spacing: -0.006em; }

/* phones: the rail turns vertical and runs down the left of the list */
@media (max-width: 900px){
  .day-frame{ padding: 88px 20px 80px; }
  .day-head{ flex-direction: column; align-items: flex-start; gap: 28px; }
  /* the clock only means something while the frame holds still */
  .day-clock{ display: none; }
  .day-scene h2{ font-size: clamp(40px, 11vw, 56px); }
  .day-rail{ display: none; }
  .day-moments{
    grid-template-columns: 1fr; gap: 30px;
    margin-top: 40px; padding-left: 26px;
    border-left: 1px solid rgba(255,255,255,0.12);
  }
  .day-moments{ position: relative; }
  .day-moments::before{
    content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px;
    transform-origin: top; transform: scaleY(var(--fill, 1));
    background: linear-gradient(180deg, rgba(186,208,255,0.12), rgba(186,208,255,0.85));
  }
  .moment{ padding: 0; }
  .moment::before{ left: -30px; top: 8px; }
  .moment p{ max-width: none; }
  .day-sun{ width: 140vw; }
}
@media (prefers-reduced-motion: reduce){
  .moment, .moment > *, .moment::before{ transition: none; }
}

/* =====================================================================
   Home #product: the app walkthrough film, above the interactive stage
   ===================================================================== */
/* a contained window rather than a full-bleed band: narrower than the
   column, centred, and seated in a padded glass shell */
.walkthrough{ max-width: 420px; margin: 0 auto; }
.walkthrough-frame{
  position: relative;
  padding: 6px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 40px 90px -40px rgba(0,0,0,0.9), 0 0 90px -30px rgba(186,208,255,0.18);
}
.walkthrough video{
  /* height:auto, or the element's height="1080" attribute beats aspect-ratio */
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 14px;
  background: #080C10;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
/* the film loops, so it can always be stopped: same quiet pill as the hero's */
.walkthrough-toggle{
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 30px; padding: 0 11px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(8,12,16,0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--t2); font: inherit; font-size: 11px; cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
@media (hover: hover){ .walkthrough-toggle:hover{ color: #fff; border-color: rgba(255,255,255,0.32); background: rgba(8,12,16,0.78); } }
.walkthrough-toggle:focus-visible{ outline: 2px solid rgba(186,208,255,0.8); outline-offset: 3px; }
.walkthrough-toggle i{
  width: 8px; height: 9px; flex: none; background: currentColor;
  clip-path: polygon(0 0, 32% 0, 32% 100%, 0 100%, 0 0, 68% 0, 100% 0, 100% 100%, 68% 100%, 68% 0);   /* pause */
}
.walkthrough-toggle[aria-pressed="true"] i{ clip-path: polygon(0 0, 100% 50%, 0 100%); }             /* play */
.walkthrough figcaption{
  margin: 14px auto 0; max-width: 460px; text-align: center; text-wrap: balance;
  font-size: 13px; line-height: 1.55; letter-spacing: -0.003em; color: var(--t4);
}
.walkthrough figcaption b{ font-weight: 500; color: var(--t2); }
/* phones: the 4:5 cut, which keeps the phone large */
@media (max-width: 700px){
  .walkthrough{ max-width: 300px; margin-bottom: 44px; }
  .walkthrough-frame{ padding: 5px; border-radius: 18px; }
  .walkthrough video{ aspect-ratio: 4 / 5; border-radius: 13px; }
  .walkthrough-toggle{ right: 12px; bottom: 12px; }
}

/* the film sits to the right of the app section's heading and sub.
   #product>.section-head is set to one column in motion.v4.css; this file
   loads later, so the same selector wins. */
@media (min-width: 901px){
  #product > .section-head{
    grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 420px);
    column-gap: clamp(40px, 5vw, 80px); row-gap: 28px;
    align-items: center;
  }
  #product > .section-head > div{ grid-column: 1; grid-row: 1; }
  #product > .section-head > .section-sub{ grid-column: 1; grid-row: 2; align-self: start; }
  #product > .section-head > .walkthrough{ grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; }
}
@media (max-width: 900px){
  #product > .section-head > .walkthrough{ margin-top: 12px; }
}

/* =====================================================================
   Home #coach: the visitor's own message box, under the thread
   (behaviour in js/coach-chat.v2.js)
   ===================================================================== */
.chat-composer{
  flex: none;
  display: flex; align-items: center; gap: 8px;
  margin: 0 10px 12px;
  padding: 5px 5px 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.055);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  transition: border-color .2s ease, background .2s ease;
}
.chat-composer:focus-within{ border-color: rgba(186,208,255,0.55); background: rgba(255,255,255,0.08); }
.chat-composer input{
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: none;
  color: #e9edf4; font: inherit; font-size: 16px;   /* 16px: iOS doesn't zoom the page on focus */
  padding: 6px 0;
}
.chat-composer input::placeholder{ color: rgba(233,237,244,0.45); }
.chat-composer button{
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: #bad0ff; color: #0a0e14;
  transition: transform .15s ease, opacity .2s ease;
}
.chat-composer button svg{ width: 16px; height: 16px; }
@media (hover: hover){ .chat-composer button:hover{ transform: scale(1.06); } }
.chat-composer button:active{ transform: scale(.94); }
.chat-composer button:focus-visible{ outline: 2px solid #bad0ff; outline-offset: 2px; }
.coach-try-note{ margin: 12px 0 0; max-width: 460px; font-size: 13px; line-height: 1.5; color: var(--t4); }

/* Coach chat: a bottom-anchored feed, never its own scroller. As a scroller
   it trapped vertical swipes on phones, and scrolling it from script (to show
   a new reply) interrupts the page's momentum scroll on iOS. Now the newest
   message sits at the bottom and older ones slide out under a fade at the top. */
.coach-device .chat--app{
  overflow: hidden;
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 44px);
}
.coach-device .chat--app > *:first-child{ margin-top: 0; }

/* =====================================================================
   Polish pass after an Apple-design review. Hover styles and small-text
   tracking are handled mechanically (see the header of site.v3.css); the
   rest is here.
   ===================================================================== */

/* ---------- 1. press feedback ----------
   Respond the instant a finger or click lands, not on release. The `scale`
   property composes with any transform an entrance animation holds, so the
   press never fights the reveal. In fast (90ms), out on the site's own --pop
   spring, which overshoots a hair as it settles back. Each transition list
   below restates the component's existing one, plus scale. */
.btn, .chip, .nav.nav--capsule .nav-top, .header--capsule .nav-drop a, .tour-item, .toc a,
.deeper-card, .next-card, .walkthrough-toggle, .video-control, .burger, .chat-composer button,
.faq summary, .crumbs a, .foot-col a, .foot-legal a{ -webkit-tap-highlight-color: transparent; }

.btn{ transition: background .35s ease, border-color .35s ease, box-shadow .35s ease,
                  color .35s ease, filter .35s ease, transform .32s cubic-bezier(0.16,1,0.3,1), scale .45s var(--pop); }
.chip{ transition: border-color .3s ease, background .3s ease, color .3s ease, scale .45s var(--pop); }
.nav.nav--capsule .nav-top{ transition: background .25s ease, color .25s ease, box-shadow .25s ease, scale .45s var(--pop); }
.tour-item{ transition: background .35s ease, scale .45s var(--pop); }
.toc a{ transition: background .35s ease, scale .45s var(--pop); }
.walkthrough-toggle, .video-control{ transition: color .25s ease, border-color .25s ease, background .25s ease, scale .45s var(--pop); }
.burger{ transition: border-color .25s ease, background .25s ease, scale .45s var(--pop); }
.chat-composer button{ transition: transform .15s ease, opacity .2s ease, scale .45s var(--pop); }
/* (.deeper-card and .next-card already carry `scale .58s var(--pop)` for their reveal) */

.btn:active, .chip:active, .nav.nav--capsule .nav-top:active, .walkthrough-toggle:active,
.video-control:active, .burger:active, .chat-composer button:active{
  scale: .96; transition: scale 90ms ease-out;
}
.tour-item:active, .toc a:active, .deeper-card:active, .next-card:active{
  scale: .985; transition: scale 90ms ease-out;
}
.header--capsule .nav-drop a:active{ background: rgba(255,255,255,0.08); }
.faq summary:active{ opacity: .72; }

/* ---------- 4. faint text meets 4.5:1 ----------
   --t5 (eyebrows, fine print, 11-12px) measured 3.9:1 on the ground. This
   lifts it to 5.0:1 on the ground and 4.6:1 on a card, one step under --t4. */
:root{ --t5: #7a818d; }

/* ---------- 5. tracking where the size comes from a variable ----------
   (the mechanical pass only sees px sizes in the same rule) */
.btn{ letter-spacing: -0.005em; }
.lede{ letter-spacing: -0.01em; }

/* ---------- 6. dropdowns grow from the link that opened them ----------
   Scale from the top centre with a short blur, and close back along the same
   path. Leaving the whole nav keeps a panel for 120ms, so a slightly diagonal
   route to it doesn't drop it; moving to another link closes it at once. */
@media (min-width: 901px){
  .header--capsule .nav-drop{
    transform-origin: 50% 0;
    transform: translate(-50%, 4px) scale(.96);
    filter: blur(3px);
    transition: opacity .2s ease .12s, transform .32s cubic-bezier(0.16,1,0.3,1) .12s,
                filter .24s ease .12s, visibility 0s linear .44s;
  }
  .header--capsule .nav-item:hover .nav-drop,
  .header--capsule .nav-item:focus-within .nav-drop{
    transform: translate(-50%, 0) scale(1);
    filter: none;
    transition: opacity .2s ease, transform .32s cubic-bezier(0.16,1,0.3,1), filter .24s ease, visibility 0s;
  }
  .nav.nav--capsule:hover .nav-item:not(:hover):not(:focus-within) .nav-drop{
    transition: opacity .14s ease, transform .2s ease, filter .14s ease, visibility 0s linear .14s;
  }
}

/* ---------- 8. the grain holds still on phones ----------
   A full-screen texture stepping five times a second costs battery for a
   detail a phone screen can't show. */
@media (max-width: 900px), (pointer: coarse){
  .grain{ animation: none; }
}

/* ---------- 3. reduce transparency / increase contrast ---------- */
@media (prefers-reduced-transparency: reduce){
  *, *::before, *::after{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .header.header--capsule::before,
  .header.header--capsule.is-stuck::before{ background: #10151c; }
  .header--capsule .nav-drop{ background: #151b23; }
  .nav.nav--capsule{ background: #10151c; }
  .menu-backdrop{ background: rgba(8,12,16,0.94); }
  .walkthrough-toggle, .video-control{ background: #10151c; }
  .walkthrough-frame{ background: #10151c; }
}
@media (prefers-contrast: more){
  :root{
    --t2: #e4e8ee; --t3: #c9ced6; --t4: #b4bac4; --t5: #a0a7b2;
    --border: rgba(255,255,255,0.42); --border-soft: rgba(255,255,255,0.32);
  }
  .header.header--capsule::before{ border-color: rgba(255,255,255,0.45); background: #0d1218; }
  .header--capsule .nav-drop, .nav.nav--capsule{ border-color: rgba(255,255,255,0.45); background: #111720; }
  .deeper-card, .next-card, .next-aside, .walkthrough-frame, .chip,
  .walkthrough-toggle, .video-control, .chat-composer{ border-color: rgba(255,255,255,0.42); }
  .nav.nav--capsule .nav-top.is-active{ box-shadow: inset 0 0 0 1.5px rgba(186,208,255,0.8); }
}

/* =====================================================================
   Home: the "TRAIN. ADAPT. REPEAT." ribbon drifts on its own, the two lanes
   in opposite directions. motion.v5.js still scrubs a parallax on scroll by
   setting `transform`; the drift animates the separate `translate`
   property, so the two add up instead of overriding each other. Each lane
   holds four copies (two halves); moving by half its width is exactly one
   half, so the loop has no seam. Padding rather than gap between copies
   keeps the halves equal. Reduced motion: the global rule stops it.
   ===================================================================== */
.motion-ribbon .ribbon-lane{ gap: 0; }
.motion-ribbon .ribbon-lane span{ padding-right: .3em; }
.motion-ribbon .ribbon-lane--outline{ animation: ribbon-right 56s linear infinite; }
.motion-ribbon .ribbon-lane--solid{ animation: ribbon-left 46s linear infinite; }
@keyframes ribbon-left{ from{ translate: 0 0; } to{ translate: -50% 0; } }
@keyframes ribbon-right{ from{ translate: -50% 0; } to{ translate: 0 0; } }

/* =====================================================================
   Calculator: the "Twelve months, with churn" chart (js/ramp.v1.js).
   Bars grow in month by month, ripple when a slider is released, and read
   out a month on hover or tap. Movement uses the `scale` property with the
   origin at the floor, so it never fights the height transition that
   calculator.v1.js drives.
   ===================================================================== */
.ramp-bars{ position: relative; cursor: default; }
.ramp-bars i{
  transform-origin: 50% 100%;
  transition: height .5s cubic-bezier(0.16,1,0.3,1), opacity .25s ease, filter .25s ease;
}
.ramp.is-reading .ramp-bars i{ opacity: .38; }
.ramp.is-reading .ramp-bars i.is-on{ opacity: 1; filter: drop-shadow(0 0 10px rgba(186,208,255,0.55)); }
.ramp-tip{
  position: absolute; left: 0; bottom: 100%; z-index: 2;
  transform: translate(var(--edge, -50%), 4px);
  padding: 5px 10px; border-radius: 999px;
  background: #f4f7fc; color: #0b0d10;
  font-size: 12px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.7);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .25s cubic-bezier(0.16,1,0.3,1),
              left .22s cubic-bezier(0.16,1,0.3,1), bottom .22s cubic-bezier(0.16,1,0.3,1);
}
.ramp-tip.is-shown{ opacity: 1; transform: translate(var(--edge, -50%), 0); }

@media (prefers-reduced-motion: no-preference){
  /* grow in, month 1 to month 12 */
  .ramp.is-armed .ramp-bars i{ scale: 1 0; }
  .ramp.is-armed.is-in .ramp-bars i{
    scale: 1 1;
    transition: height .5s cubic-bezier(0.16,1,0.3,1), opacity .25s ease, filter .25s ease,
                scale .7s var(--pop) calc(var(--i, 0) * 60ms);
  }
  /* a slider was released: a ripple runs along the year */
  .ramp.is-ripple .ramp-bars i{ animation: ramp-ripple .55s cubic-bezier(0.16,1,0.3,1) calc(var(--i, 0) * 40ms) both; }
  @keyframes ramp-ripple{ 0%{ scale: 1 1; } 40%{ scale: 1 1.14; } 100%{ scale: 1 1; } }
}