/* TESORIN scroll story.
   Copy scrolls past a pinned phone whose screen crossfades to the step in
   the middle of the viewport (assets/story.js). Used by How it works and the
   homepage. Features keeps its video-driven version in features.css/.js.
   Wide screens (1000px+, or landscape from 760px) pin the phone beside the
   copy; phones and portrait tablets pin it above the copy instead. */

.story-section {
  padding: clamp(72px, 9vw, 128px) 0 clamp(48px, 6vw, 88px);
}

.story-section__label {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(24px, 4vw, 56px);
  color: #68713F;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.story-section__label::before,
.story-section__label::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .5;
}

.story {
  --story-top: 120px;
  position: relative;
}

.story__step hgroup {
  margin: 0;
}

.story__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: #68713F;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}


.story__step :is(h2, h3) {
  max-width: 15ch;
  margin: 0;
  font-family: var(--font-serif, var(--serif));
  font-size: clamp(34px, 3.8vw, 54px);
  font-style: normal;
  line-height: 1.04;
  letter-spacing: -.022em;
  text-wrap: balance;
  color: var(--ink);
}

.story__step > p {
  max-width: 34em;
  margin: 20px 0 0;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: clamp(17px, 1.35vw, 19px);
  line-height: 1.65;
  text-wrap: pretty;
}

.story__step + .story__step {
  margin-top: clamp(72px, 10vw, 112px);
}

.story__phone {
  --tesorin-phone-width: 260px;
}

.story__inline {
  margin-top: 32px;
}

.story__stage {
  display: none;
}

.story__dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.story__dot {
  position: relative;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--hair-2, rgba(11, 11, 11, .18));
  cursor: pointer;
  transition: width .3s ease, background-color .3s ease;
}

.story__dot::before {
  content: "";
  position: absolute;
  inset: -12px -6px;
}

.story__dot:hover {
  background: var(--ink-3, #8B847B);
}

.story__dot.is-active {
  width: 26px;
  background: var(--ink, #0B0B0B);
}

.story__dot:focus-visible {
  outline: 2px solid var(--accent-olive, #737C47);
  outline-offset: 4px;
}

html[data-theme="dark"] .story__eyebrow,
html[data-theme="dark"] .story-section__label {
  color: #A6AF78;
}

html[data-theme="dark"] .story__dot {
  background: rgba(255, 255, 255, .22);
}

html[data-theme="dark"] .story__dot.is-active {
  background: #F2F2F2;
}

@media (min-width: 1000px), (min-width: 760px) and (min-aspect-ratio: 1251/1000) and (min-height: 640px) {
  .story {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 7vw, 120px);
    align-items: stretch; /* the stage column spans the story so sticky can travel */
  }

  .story--flip .story__steps {
    order: 2;
  }

  /* Room after the last step so the phone stays pinned while it is centred. */
  .story__steps {
    padding-bottom: 14svh;
  }

  .story__step {
    display: flex;
    min-height: calc(100svh - var(--story-top) - 40px);
    flex-direction: column;
    justify-content: center;
  }

  .story__step + .story__step {
    margin-top: 0;
  }

  .story__inline {
    display: none;
  }

  .story__stage {
    display: block;
  }

  .story__sticky {
    position: sticky;
    top: var(--story-top);
    display: flex;
    height: calc(100svh - var(--story-top) - 24px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
  }

  .story__stage .story__phone {
    --tesorin-phone-width: clamp(220px, calc((100svh - var(--story-top) - 130px) / 2.24), 300px);
  }

  .story__screen {
    opacity: 0;
    transition: opacity .5s ease;
  }

  .story__screen.is-active {
    opacity: 1;
  }

  /* Dimming only once story.js is driving the story. */
  .story.is-enhanced .story__step {
    opacity: .24;
    transition: opacity .45s ease;
  }

  .story.is-enhanced .story__step.is-current {
    opacity: 1;
  }
}

@media (max-width: 560px) {
  .story__step :is(h2, h3) {
    font-size: clamp(30px, 8.6vw, 38px);
  }

  .story__step > p {
    font-size: 16.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story__screen,
  .story__dot,
  .story.is-enhanced .story__step {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Variants. Any stacked set of .story__screen elements inside .story__screens
   crossfades; a phone is only one kind of stage.
   -------------------------------------------------------------------------- */
.story__screens {
  display: grid;
}

.story__screens > * {
  grid-area: 1 / 1;
}

/* Art stage (About principles): a framed sketch per step. */
.story__art {
  width: min(420px, 100%);
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--hair, rgba(11, 11, 11, .09));
  border-radius: var(--r-xl, 32px);
  background: var(--bg, #fff);
}

.story__art img {
  width: 62%;
  height: auto;
  margin: auto;
}

.story__inline-art {
  width: 132px;
  height: auto;
  margin-bottom: 22px;
}

/* Label stage (comparison rows): the row name, large, plus a counter. */
.story__label {
  width: 100%;
  text-align: left;
}


.story__label-text {
  display: block;
  font-family: var(--font-serif, var(--serif));
  font-size: clamp(44px, 5vw, 76px);
  font-weight: 300;
  font-size-adjust: ex-height .42;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}

.story__label-sub {
  display: block;
  margin-top: 18px;
  color: var(--ink-3, #8B847B);
  font-family: var(--sans);
  font-size: 15px;
}

/* Comparison step: TESORIN and the competitor side by side. */
.story__pair {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 22px;
}

.story__pair > div {
  padding: 24px 24px 22px;
  border: 1px solid var(--hair, rgba(11, 11, 11, .09));
  border-radius: 20px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
}

.story__pair > .story__ours {
  border-color: rgba(115, 124, 71, .38);
  box-shadow: inset 0 3px 0 var(--accent-olive, #737C47);
  color: var(--ink);
}

.story__pair-name {
  display: block;
  margin-bottom: 12px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3, #8B847B);
}

.story__ours .story__pair-name {
  color: #68713F;
}

.story__pair > div > * + * {
  margin-top: 10px;
}

.story__pair ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.story__pair li {
  position: relative;
  padding-left: 18px;
}

.story__pair li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-olive, #737C47);
  font-weight: 700;
}

.story__pair strong {
  color: var(--ink);
  font-weight: 650;
}

.story__pair a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Quote steps (Pricing reviews). */
.story__quote {
  margin: 0;
}

.story__quote blockquote {
  margin: 0;
}

.story__quote-stars {
  display: block;
  margin-bottom: 16px;
  color: var(--ink);
  font-size: 14px;
  letter-spacing: .18em;
}

.story__quote-title {
  margin: 0 0 10px;
  font-family: var(--font-serif, var(--serif));
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  font-size-adjust: ex-height .42;
  color: var(--ink);
}

.story__quote-body {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-serif, var(--serif));
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 300;
  font-size-adjust: ex-height .42;
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--ink);
}

.story__quote figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 22px;
  color: var(--ink-3, #8B847B);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.story__quote-author {
  color: var(--ink-2);
  font-weight: 600;
}

.story__heading {
  width: 100%;
}

.story__heading h2 {
  margin: 0;
  max-width: 12ch;
  font-family: var(--font-serif, var(--serif));
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -.026em;
  color: var(--ink);
}

.story__where {
  margin-top: 26px;
  color: var(--ink-3, #8B847B);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.story__where > * {
  transition: opacity .4s ease;
}

.story__where > :not(.is-active) {
  opacity: 0;
}

/* The quotes story keeps its heading on narrow screens, unpinned. */
.story--keep-stage .story__stage {
  display: block;
  margin-bottom: 40px;
}

.story--keep-stage .story__dots,
.story--keep-stage .story__where {
  display: none;
}

html[data-theme="dark"] .story__art {
  border-color: rgba(255, 255, 255, .12);
  background: var(--paper, #1B1B1B);
}

html[data-theme="dark"] .story__pair > div {
  border-color: rgba(255, 255, 255, .12);
}

@media (max-width: 640px) {
  .story__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1000px), (min-width: 760px) and (min-aspect-ratio: 1251/1000) and (min-height: 640px) {
  .story--keep-stage .story__stage {
    margin-bottom: 0;
  }

  .story--keep-stage .story__dots {
    display: flex;
  }

  .story--keep-stage .story__where {
    display: grid;
  }

  /* The pinned art replaces the small inline sketch on wide screens. */
  .story__inline-art {
    display: none;
  }

  /* Comparisons: the pinned row name on the left, the wider comparison right. */
  .story--compare {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr);
  }

  .story__sticky:has(.story__label),
  .story__sticky:has(.story__heading) {
    align-items: flex-start;
  }

  .story__screens > .story__screen-text {
    opacity: 0;
    transition: opacity .45s ease;
  }

  .story__screens > .story__screen-text.is-active {
    opacity: 1;
  }

  .story__art .story__screen {
    opacity: 0;
    transition: opacity .5s ease;
  }

  .story__art .story__screen.is-active {
    opacity: 1;
  }

  .story--compact .story__step {
    min-height: calc(62svh - 40px);
  }

  /* Shorter steps need more room after the last one to stay pinned. */
  .story--compact .story__steps {
    padding-bottom: 26svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story__where > *,
  .story__screens > .story__screen-text,
  .story__art .story__screen {
    transition: none;
  }
}

/* Comparison rows: the row name heads each step on narrow screens; on wide
   screens the pinned label shows it, so the step's copy is kept for
   assistive technology only. */
.story__step .story__row-label {
  max-width: none;
  margin: 0;
  font-size: clamp(28px, 6vw, 36px);
  font-weight: 400;
}

@media (min-width: 1000px), (min-width: 760px) and (min-aspect-ratio: 1251/1000) and (min-height: 640px) {
  .story--compare .story__step .story__row-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .story--compare .story__pair {
    margin-top: 0;
  }
}

/* Quotes story: heading first on narrow screens. */
.story--keep-stage {
  display: flex;
  flex-direction: column;
}

.story--keep-stage .story__stage {
  order: -1;
}

@media (min-width: 1000px), (min-width: 760px) and (min-aspect-ratio: 1251/1000) and (min-height: 640px) {
  .story--keep-stage {
    display: grid;
  }

  .story--keep-stage .story__stage {
    order: 0;
  }
}

/* Grouped quotes (Pricing): three per step, set smaller so a step stays calm. */
.story__group {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.2vw, 44px);
}

.story__group .story__quote + .story__quote {
  padding-top: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--hair, rgba(11, 11, 11, .09));
}

.story__group .story__quote-stars {
  margin-bottom: 10px;
  font-size: 12px;
}

.story__group .story__quote-title {
  margin-bottom: 6px;
  font-size: clamp(18px, 1.5vw, 21px);
}

.story__group .story__quote-body {
  max-width: 30ch;
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.2;
}

.story__group .story__quote figcaption {
  margin-top: 12px;
  font-size: 12px;
}

html[data-theme="dark"] .story__group .story__quote + .story__quote {
  border-top-color: rgba(255, 255, 255, .12);
}

@media (min-width: 1000px), (min-width: 760px) and (min-aspect-ratio: 1251/1000) and (min-height: 640px) {
  .story__group {
    padding-block: 7svh;
  }
}

/* Safety net: phone media in a story never paint at their native size, even
   for the moment before device-mockup.css has applied the frame. */
.story__phone {
  max-width: 100%;
}

.story__phone :is(video, img) {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Phones and portrait tablets (narrower than 1000px and not a roomy
   landscape window, see the wide query above): the stage pins at the top of
   the screen and the steps scroll up underneath it, one at a time. The step
   in the lower part of the screen is lit and the pinned media follows it
   (story.js moves its "current" band down on narrow screens). The quotes
   story keeps its heading above and only lights one group at a time.
   -------------------------------------------------------------------------- */
@media (max-width: 759.98px), (max-width: 999.98px) and (max-aspect-ratio: 5/4), (max-width: 999.98px) and (max-height: 639.98px) {
  .story:not(.story--keep-stage) {
    --story-top-m: 64px;
    display: flex;
    flex-direction: column;
  }

  .story:not(.story--keep-stage) .story__stage {
    position: sticky;
    top: var(--story-top-m);
    z-index: 3;
    display: block;
    order: -1;
    margin: 0 calc(var(--gutter, 18px) * -1);
    padding: 8px var(--gutter, 18px) 12px;
    background: var(--bg, #fff);
  }

  /* Soft edge where the steps slide under the pinned stage. */
  .story:not(.story--keep-stage) .story__stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 28px;
    background: linear-gradient(var(--bg, #fff), rgba(255, 255, 255, 0));
    pointer-events: none;
  }

  html[data-theme="dark"] .story:not(.story--keep-stage) .story__stage::after {
    background: linear-gradient(var(--bg, #111), rgba(17, 17, 17, 0));
  }

  .story:not(.story--keep-stage) .story__sticky {
    position: static;
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .story__stage .story__phone {
    --tesorin-phone-width: min(44vw, calc((46svh - 40px) / 2.24));
  }

  .story__art {
    width: min(220px, 56vw);
  }

  .story__sticky:has(.story__label) {
    align-items: flex-start;
  }

  .story__label-text {
    font-size: clamp(30px, 8vw, 40px);
  }

  .story__label-sub {
    margin-top: 8px;
    font-size: 13px;
  }

  .story:not(.story--keep-stage) .story__screen,
  .story__screens > .story__screen-text,
  .story__art .story__screen {
    opacity: 0;
    transition: opacity .45s ease;
  }

  .story:not(.story--keep-stage) .story__screen.is-active,
  .story__screens > .story__screen-text.is-active,
  .story__art .story__screen.is-active {
    opacity: 1;
  }

  /* The pinned stage carries the media now. */
  .story:not(.story--keep-stage) .story__inline,
  .story:not(.story--keep-stage) .story__inline-art {
    display: none;
  }

  .story--compare .story__step .story__row-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .story:not(.story--keep-stage) .story__steps {
    padding-bottom: 22svh;
  }

  .story:not(.story--keep-stage) .story__step {
    display: flex;
    min-height: 54svh;
    flex-direction: column;
    justify-content: center;
  }

  .story:not(.story--keep-stage) .story__step + .story__step {
    margin-top: 0;
  }

  .story.is-enhanced .story__step {
    opacity: .22;
    transition: opacity .4s ease;
  }

  .story.is-enhanced .story__step.is-current {
    opacity: 1;
  }

  .story--keep-stage .story__step + .story__step {
    margin-top: 56px;
  }
}

@media (max-width: 759.98px) and (prefers-reduced-motion: reduce), (max-width: 999.98px) and (max-aspect-ratio: 5/4) and (prefers-reduced-motion: reduce), (max-width: 999.98px) and (max-height: 639.98px) and (prefers-reduced-motion: reduce) {
  .story__screen,
  .story__screens > .story__screen-text,
  .story.is-enhanced .story__step {
    transition: none;
  }
}

@media (max-width: 759.98px), (max-width: 999.98px) and (max-aspect-ratio: 5/4), (max-width: 999.98px) and (max-height: 639.98px) {
  .story:not(.story--keep-stage) .story__stage.is-pinned::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: var(--story-top-m);
    background: var(--bg, #fff);
  }
}