/* Stop SSRI · The phone on the bench.
   Tokens first (the rebrand), then the bench, the story column and the acts.
   The engine's own selectors (.sc-stage, [data-sc-*]) are left alone. */

:root {
  --sc-canvas:      #E4ECE1;
  --sc-surface:     #EEF3EA;
  --sc-ink:         #1C1B18;
  --sc-ink-soft:    #52604E;
  --sc-accent:      #3F6B4C;
  --sc-accent-ink:  #F6F3EC;
  --sc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --sc-shadow-color: 140 18% 12%;
  --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 24px;

  --bench-w: 46vw;
  --story-pad: clamp(1.5rem, 5vw, 6rem);
  --sage-deep: #5F8A6C;
  --sage-mid:  #A9C4AE;
  --sage-pale: #E9F0E5;
}

html { scroll-behavior: smooth; }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sc-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sc-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
::selection { background: var(--sage-mid); color: var(--sc-ink); }

/* ------------------------------------------------------------- world -- */
.dots {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  background:
    radial-gradient(60vw 70vh at 22% 62%, rgba(95,138,108,0.42) 0%, rgba(95,138,108,0) 70%),
    radial-gradient(50vw 50vh at 85% 8%, rgba(233,240,229,0.9) 0%, rgba(233,240,229,0) 70%),
    linear-gradient(162deg, #EEF3EA 0%, #DCE7D8 42%, #BFD3BF 100%);
}

/* ------------------------------------------------------------- bench -- */
.bench {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--bench-w);
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.bench__mark {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 1.4rem 0 0 var(--story-pad);
  font-family: var(--sc-font-display); font-size: 1.35rem; letter-spacing: -0.005em;
  color: var(--sc-ink); text-decoration: none; justify-self: start;
}
.bench__mark img { width: 26px; height: 26px; border-radius: 7px; box-shadow: var(--sc-e1); }
.bench__stage { position: relative; min-height: 0; }
.bench__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* fade the stage's edges so the phone's shadow never ends in a hard line against the story */
@media (min-width: 901px) {
  #phone {
    -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 68%, transparent 100%);
            mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 68%, transparent 100%);
  }
}
.bench__poster {
  display: none;
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: min(30vw, 42vh); aspect-ratio: 660 / 1434;
  padding: 2.2%; border-radius: 12% / 5.6%;
  background: #232326;
  box-shadow: var(--sc-e3), var(--sc-edge);
}
.bench__poster img { width: 100%; height: 100%; display: block; border-radius: 10% / 4.6%; object-fit: cover; }
.no-webgl .bench__poster { display: block; }
.no-webgl #phone { display: none; }
.bench__caption {
  display: flex; gap: 1.2rem; align-items: baseline;
  margin: 0 0 1.6rem var(--story-pad);
  font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.bench__caption span:first-child { color: var(--sc-ink); font-weight: 500; }

/* ------------------------------------------------------------- story -- */
.story {
  /* no z-index here: it would trap the fixed nav in the story's stacking context, under the bench */
  position: relative;
  margin-left: var(--bench-w);
  padding: 0 var(--story-pad);
}

.steps {
  position: fixed; top: 0; left: var(--bench-w); right: 0; z-index: 4;
  display: flex; align-items: center; gap: clamp(0.7rem, 1.2vw, 1.4rem);
  padding: 1.35rem var(--story-pad) 0.9rem;
  font-size: var(--sc-t-sm);
  background: linear-gradient(to bottom, rgba(228,236,225,0.92) 55%, rgba(228,236,225,0));
}
.steps a[data-step] {
  color: var(--sc-ink-soft); text-decoration: none; white-space: nowrap;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.steps a[data-step]:hover { color: var(--sc-ink); }
.steps a[aria-current="true"] { color: var(--sc-ink); border-bottom-color: var(--sc-ink); }
.steps__cta {
  margin-left: auto;
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border-radius: var(--sc-r-md);
  background: var(--sc-ink); color: var(--sc-accent-ink) !important;
  text-decoration: none; font-weight: 500; white-space: nowrap;
  transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.steps__cta:hover { transform: translateY(-1px); }
.steps__cta, .cta { gap: 0.5em; }
.steps__cta-long { white-space: pre; }
@media (max-width: 1360px) { .steps__cta-long { display: none; } }
@media (min-width: 901px) and (max-width: 1080px) { .steps { gap: 0.6rem; font-size: var(--sc-t-xs); } }
.steps__cta .apple, .cta .apple { width: 1.05em; height: 1.05em; flex: none; translate: 0 -0.08em; }
.steps__cta:active { transform: scale(0.97); }

.act { position: relative; }
.act:not([data-sc-act]) { min-height: 100svh; display: flex; align-items: center; padding-block: var(--sc-8); }
/* a flow act after a pinned one starts high, so the reader is not shown an empty screen while the stage slides off */
#plan, #measure, #show { align-items: flex-start; padding-top: clamp(5rem, 16vh, 9rem); }
.copy { max-width: 34rem; }
.copy > * + * { margin-top: var(--sc-5); }
.copy > h1 + p, .copy > h2 + p { margin-top: var(--sc-5); }
.copy p { margin: 0; max-width: var(--sc-measure); text-wrap: pretty; line-height: var(--sc-leading-body); }
.copy p + p { margin-top: var(--sc-4); }

.sc-display {
  font-family: var(--sc-font-display); font-weight: 400;
  letter-spacing: -0.012em; line-height: 1.04; text-wrap: balance;
}
h1.sc-display { font-size: var(--sc-t-3xl); margin: 0; }
h2.sc-display { font-size: var(--sc-t-2xl); margin: 0; }
.lede { font-size: var(--sc-t-lg); color: var(--sc-ink-soft); }
.hero__meta { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.label {
  font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.copy > .label + h2 { margin-top: var(--sc-3); }

/* pinned arguments */
.argument {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0; max-width: 36rem;
}
.argument > [data-sc-cue] { position: absolute; left: 0; right: 0; }
.argument__line { font-size: var(--sc-t-2xl); top: 50%; translate: 0 -50%; margin: 0; }
.argument__note { top: 50%; translate: 0 -50%; margin: 0; max-width: 32rem; color: var(--sc-ink-soft); line-height: var(--sc-leading-body); }
.argument__note--last { color: var(--sc-ink); }

/* the rough week keeps its heading and lets the options stack under it */
.argument--rough { max-width: 38rem; }
.argument--rough .argument__line { top: 24%; translate: 0 0; }
.argument--rough > .argument__note { top: 38%; translate: 0 0; }
.options { position: absolute; left: 0; right: 0; top: 40%; }
.option {
  position: absolute; left: 0; right: 0; top: 0; margin: 0;
  max-width: 30rem; font-size: var(--sc-t-base); line-height: var(--sc-leading-body); color: var(--sc-ink-soft);
  padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong);
}
.option strong { display: block; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); color: var(--sc-ink); letter-spacing: -0.01em; margin-bottom: var(--sc-2); }
.argument__shift { top: 68%; margin: 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.argument__shift .shift { color: var(--sc-ink); font-weight: 500; }
.argument--rough > .argument__note--last { top: 78%; }

/* schedule */
.schedule { display: flex; flex-direction: column; justify-content: center; max-width: 36rem; gap: var(--sc-6); }
.schedule > h2 { margin: 0; }
.schedule__table table { width: 100%; border-collapse: collapse; font-size: var(--sc-t-base); }
.schedule__table th {
  text-align: left; font-weight: 500; font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sc-ink-soft); padding: 0 0 var(--sc-3);
  border-bottom: 1px solid var(--sc-hairline-strong);
}
.schedule__table td { padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); }
.schedule__table td:nth-child(3), .schedule__table th:nth-child(3),
.schedule__table td:nth-child(4), .schedule__table th:nth-child(4) { text-align: right; }
.schedule__table td:first-child { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); }
.schedule__note { margin: 0; max-width: 32rem; color: var(--sc-ink-soft); line-height: var(--sc-leading-body); }

/* figures */
.figures { display: flex; gap: var(--sc-7); margin: 0; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); }
.figures div { display: flex; flex-direction: column-reverse; gap: var(--sc-1); }
.figures dt { font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.figures dd { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-2xl); line-height: 1; }
.figures div:last-child dd { font-size: var(--sc-t-xl); padding-top: 0.2em; }

/* syringe */
.syringe { margin: 0; color: var(--sc-ink); }
.syringe svg { width: 100%; height: auto; display: block; }
.syringe figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }

/* close */
.close { flex-direction: column; align-items: flex-start; gap: var(--sc-9); padding-bottom: var(--sc-5); }
.close > .copy { margin-block: auto; } /* copy centred; the footer sits at the very bottom */
.close__price { color: var(--sc-ink-soft); }
.cta {
  display: inline-flex; align-items: center; height: 52px; padding: 0 22px;
  border-radius: var(--sc-r-md);
  background: var(--sc-ink); color: var(--sc-accent-ink);
  text-decoration: none; font-weight: 500; font-size: var(--sc-t-base);
  box-shadow: var(--sc-e2);
  transition: transform var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out);
}
.cta:hover { transform: translateY(-1px); box-shadow: var(--sc-e3); color: var(--sc-accent-ink); }
.cta:active { transform: scale(0.97); }
.copy > .cta { margin-top: var(--sc-6); }
.foot { max-width: 38rem; padding-top: var(--sc-5); border-top: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.foot p { margin: 0; line-height: 1.55; }
.foot p + p { margin-top: var(--sc-3); }

/* ------------------------------------------------------------ mobile -- */
@media (max-width: 900px) {
  :root { --bench-w: 0px; --story-pad: clamp(1.25rem, 5vw, 2rem); }
  .bench {
    right: 0; bottom: auto; width: auto; height: 46svh;
    grid-template-rows: auto 1fr;
    /* opaque ground so story copy disappears cleanly under the phone, fading out over the last stretch */
    background:
      linear-gradient(to bottom, rgba(226,235,223,1) 0%, rgba(226,235,223,1) 84%, rgba(226,235,223,0) 100%),
      radial-gradient(70vw 40vh at 50% 55%, rgba(95,138,108,0.30) 0%, rgba(95,138,108,0) 70%);
  }
  .bench::before {
    content: ""; position: absolute; inset: 0 0 16% 0; z-index: -1;
    background: linear-gradient(170deg, #EEF3EA 0%, #DCE7D8 60%, #D2E0D0 100%);
  }
  .bench__mark { margin: 1rem 0 0 var(--story-pad); font-size: 1.15rem; }
  .bench__caption { display: none; }
  .bench__poster { width: min(46vw, 34svh); }
  .story { margin-left: 0; padding-top: 48svh; }
  .steps { left: 0; padding: 1rem var(--story-pad); background: none; }
  .steps a[data-step] { display: none; }
  .steps__cta { height: 34px; padding: 0 12px; font-size: var(--sc-t-xs); }
  .act:not([data-sc-act]) { min-height: 54svh; padding-block: var(--sc-7); }
  #plan, #measure, #show { padding-top: var(--sc-7); }
  .act[data-sc-act] .sc-stage { padding-top: 46svh; }
  .argument, .schedule { max-width: none; }
  .argument > [data-sc-cue] { top: auto; translate: 0 0; }
  .argument { justify-content: flex-start; }
  .argument__line { position: absolute; top: 48svh; }
  .argument__note { position: absolute; top: 48svh; }
  .argument--rough .argument__line { top: 47svh; font-size: var(--sc-t-xl); }
  .argument--rough > .argument__note { top: 55svh; font-size: var(--sc-t-sm); }
  .options { top: 55svh; }
  .option { font-size: var(--sc-t-sm); padding-top: var(--sc-4); }
  .argument__shift { top: 84svh; }
  .argument--rough > .argument__note--last { top: 55svh; }
  .schedule { gap: var(--sc-4); justify-content: flex-start; }
  .schedule > h2 { font-size: var(--sc-t-xl); }
  .schedule__table table { font-size: var(--sc-t-sm); }
  .schedule__note { display: none; }
  .figures { gap: var(--sc-5); }
  .figures dd { font-size: var(--sc-t-xl); }
  h1.sc-display { font-size: var(--sc-t-2xl); }
  .close { gap: var(--sc-7); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .steps__cta, .cta { transition: none; }
}