/* Option A, the 60-second story. Full screen on a phone; a 9:16 frame on a laptop. */
html, body { height: 100%; }
.story-body { background: #070707; color: var(--on-dark); overflow: hidden; overscroll-behavior: none; }
.story { position: fixed; inset: 0; display: grid; place-items: center; }
.story__frame {
  position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ink);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.story__frame a, .story__frame button { -webkit-touch-callout: default; }

/* progress bars */
.bars { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 14px; right: 14px; display: flex; gap: 4px; pointer-events: none; }
.bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.bars b { display: block; height: 100%; background: var(--on-dark); transform: scaleX(0); transform-origin: left; }
.bars i.is-done b { transform: scaleX(1); }
.bars i.is-on b { animation: barfill var(--dur, 6s) linear forwards; }
@keyframes barfill { to { transform: scaleX(1); } }
.story.is-paused .bars i.is-on b,
.story.is-paused .card.is-on, .story.is-paused .card.is-on * { animation-play-state: paused !important; }

.story__top { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 20px); left: 16px; right: 8px; height: 40px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.story__logo { width: 92px; height: auto; }
.story__ctl { pointer-events: auto; display: flex; }
.ctl { width: 40px; height: 40px; display: grid; place-items: center; color: var(--on-dark-2); border-radius: 2px; transition: color 0.2s, transform 0.2s var(--ease); }
.ctl:hover { color: var(--on-dark); }
.ctl:active { transform: scale(0.94); }
.ctl .i { width: 18px; height: 18px; }

/* cards */
.card {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 72px) 24px calc(env(safe-area-inset-bottom, 0px) + 22px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.card.is-on { opacity: 1; visibility: visible; transition: opacity 0.35s ease; }
.card__label { display: flex; gap: 12px; align-items: baseline; font-size: 13px; font-weight: 600; color: var(--on-dark-2); }
.card__label .n { color: var(--on-dark-muted); font-variant-numeric: tabular-nums; }
.card__h {
  margin-top: 9px; font-size: clamp(24px, min(7.4vw, 4.1vh), 31px); line-height: 1.12; font-weight: 500; letter-spacing: -0.028em;
  color: var(--on-dark); text-wrap: balance;
}
.card__h em { font-style: normal; color: var(--accent); }
.card__vis { position: relative; flex: 1 1 auto; min-height: 140px; margin: 14px -10px 12px; }
.fit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--k, 1)); transform-origin: center; }
.card__gain { padding-top: 11px; border-top: 1px solid var(--line-dark); }
.card__gain small { display: block; font-size: 12px; font-weight: 700; color: var(--on-dark-muted); }
.card__gain p { margin-top: 3px; font-size: clamp(14.5px, 2.1vh, 16px); line-height: 1.42; color: var(--on-dark-2); }
.card__gain .link { color: var(--on-dark); }

/* cover */
.cover { display: flex; flex-direction: column; height: 100%; }
.cover__kicker { font-size: 13px; font-weight: 600; color: var(--on-dark-muted); }
.cover__h { margin-top: 8px; font-size: clamp(38px, min(11.5vw, 6.2vh), 50px); line-height: 1; font-weight: 500; letter-spacing: -0.04em; max-width: 7.5em; }
.cover__sub { margin-top: 12px; font-size: clamp(16px, 2.3vh, 18px); line-height: 1.4; color: var(--on-dark-2); }
.cover .card__vis { margin-top: 10px; }
.cover__hint { font-size: 13px; color: var(--on-dark-muted); padding-top: 11px; border-top: 1px solid var(--line-dark); }
.mouse-only { display: none; }
@media (hover: hover) and (pointer: fine) { .mouse-only { display: inline; } .touch-only { display: none; } }

/* last card */
.close { display: flex; flex-direction: column; height: 100%; }
.facts { margin-top: 18px; border-top: 1px solid var(--line-dark); }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line-dark); }
.facts .i { color: var(--accent); margin-top: 1px; }
.facts b { display: block; font-size: 15px; font-weight: 700; }
.facts span { display: block; margin-top: 1px; font-size: 13.5px; line-height: 1.4; color: var(--on-dark-muted); }
.close__cta { display: grid; gap: 8px; margin-top: auto; padding-top: 16px; }
.close__cta .btn { width: 100%; }
.close__cta .btn--line { --cv-line: rgba(255, 255, 255, 0.2); --cv-text: var(--on-dark); --cv-muted: var(--on-dark-2); }
.close__links { display: flex; gap: 22px; align-items: center; margin-top: 14px; font-size: 14px; }
.close__links button.link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.close__links button.link .i { width: 15px; height: 15px; }
.close__fine { margin-top: 12px; font-size: 11.5px; line-height: 1.5; color: var(--on-dark-muted); }
.close__fine .link { color: var(--on-dark-2); }
@media (max-height: 780px) {
  .facts li { padding: 10px 0; }
  .facts span { display: none; }
}
.close { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.close::-webkit-scrollbar { display: none; }

/* short screens (an in-app browser on a small phone) */
@media (max-height: 640px) {
  .card { padding-top: calc(env(safe-area-inset-top, 0px) + 66px); }
  .card__gain small { display: none; }
  .card__gain p { margin-top: 0; }
  .m-goal-list small, .m-ai > span:last-child { display: none; }
  .cover__sub { margin-top: 8px; }
}

/* a laptop or a tablet: the story sits in a phone-shaped frame */
.side { display: none; }
@media (min-width: 640px) and (min-height: 560px) {
  .story__frame {
    --fw: min(450px, calc((100dvh - 48px) * 0.5625));
    width: var(--fw); height: min(820px, calc(100dvh - 48px)); border-radius: 14px;
    box-shadow: 0 0 0 1px var(--line-dark), 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  }
  .side {
    display: grid; place-items: center; position: fixed; top: 50%; width: 48px; height: 48px; margin-top: -24px;
    color: var(--on-dark-2); border: 1px solid var(--line-dark); border-radius: 2px;
    transition: color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
  }
  .side:hover { color: var(--on-dark); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); }
  .side:active { transform: scale(0.96); }
  .side--prev { right: calc(50% + min(450px, calc((100dvh - 48px) * 0.5625)) / 2 + 24px); }
  .side--next { left: calc(50% + min(450px, calc((100dvh - 48px) * 0.5625)) / 2 + 24px); }
}

/* the video: no controls, no hints; the end card shows the address instead of buttons */
.film-end { display: none; }
.is-film .story__ctl, .is-film .side, .is-film .cover__hint { visibility: hidden; }
.is-film .close__cta, .is-film .close__links { display: none; }
.is-film .film-end { display: grid; gap: 10px; margin-top: auto; padding-top: 16px; }
.film-end p { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 16px; border: 1px solid var(--line-dark); border-radius: 2px; }
.film-end p:first-child { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.film-end span { font-size: 13px; font-weight: 600; opacity: 0.75; }
.film-end b { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.card__label .demo-tag { margin-left: auto; align-self: center; }