/* Additions to the live template (live.css) for the website-review mockup, revision 5.
   Every colour and type value is a live one: --ink, --muted, --line, --action, --gutter and
   --story-width. Layout is one container, the hero, the film, then one story:
   - the container is the live story track, min(--story-width, 100% less two gutters). The
     header's content, the hero, the story, the film frame and the footer share its two edges;
   - the hero is copy and its own phone, laid out as one block of the story, its phone static;
   - the story is one phone and three copy blocks: before the trip, the travel day, after the
     trip. On a laptop the copy runs down the left column and the phone holds the right one,
     sticky under the 64 px header and centred in the screen below it; each block is one
     screen tall with its copy centred, so the copy centres on the phone. On a phone the phone
     holds the top of the screen and the copy scrolls beneath it, each block fading out before
     it reaches the phone. The screen inside the phone follows the block in view (site.js);
   - on a laptop every view is one screen under the header, and the close plus the footer
     fill the last screen, so a view never shows a slice of its neighbour. */

.site-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; width: 1px; height: 1px; position: absolute; overflow: hidden; }

.product-story {
  --site-header: 64px;
  --site-view: calc(100svh - var(--site-header));
  --site-pad: 40px;
  --site-gap: 96px;
  --site-foot: 169px; /* the live footer on a laptop: 1 + 32 + 44 + 24 + 44 + 24 */
}

/* The header's content sits on the container's edges: the brand on the left one, the early
   access button (or Menu) on the right one. */
.product-story.midnight-refined .site-header { padding-inline: max(var(--gutter), calc((100% - var(--story-width)) / 2)); }
/* The live header's material, a little denser: copy scrolling under it stays unreadable. */
.horizon-surface.midnight-refined[data-scrolled=true] .site-header { background: #101a23f5; -webkit-backdrop-filter: blur(32px) saturate(1.2); backdrop-filter: blur(32px) saturate(1.2); }

/* The wordmark: the live -0.055em tracking makes the r and n touch, so "Jurn" reads "Jum". */
.product-story .brand span { letter-spacing: -0.01em; }

/* A view: the container's width, one screen tall under the header, its content centred. */
.product-story .site-view { box-sizing: border-box; width: calc(100% - var(--gutter) * 2); max-width: var(--story-width); min-height: var(--site-view); margin: 0 auto; padding: var(--site-pad) 0; display: grid; align-content: center; }

/* The story. The copy and the phone share one grid area row, so the phone's sticky range is
   the whole story: its box holds still from the first block to the last. */
.product-story .site-story {
  --site-phone: clamp(240px, calc((100svh - 160px) * .4614), 345px);
  box-sizing: border-box; width: calc(100% - var(--gutter) * 2); max-width: var(--story-width); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) var(--site-phone); column-gap: var(--site-gap);
}
.site-story-copy { grid-area: 1 / 1; min-width: 0; }
.site-story-pin { grid-area: 1 / 2; align-self: start; position: sticky; top: var(--site-header); height: var(--site-view); display: flex; align-items: center; justify-content: flex-end; }
/* A block: one screen tall, its copy centred, so it centres on the phone. The block in view is
   full strength; the others' words dim, as the live reading column does. An action (a button
   or a link) never dims. */
.site-step { box-sizing: border-box; min-height: var(--site-view); padding: var(--site-pad) 0; display: grid; align-content: center; }
.site-step .site-copy > :is(h1, h2, p) { transition: opacity .4s cubic-bezier(.22, 1, .36, 1); }
.site-step:not(.is-current) .site-copy > :is(h1, h2, p) { opacity: .6; }
/* The hero's phone is its own: it holds no sticky range and leaves with the hero. */
.site-story-hero .site-story-pin { position: relative; top: auto; }
.site-copy { min-width: 0; }
/* The live phone sets its own width per breakpoint; here the story's one value wins. The four
   screens stack in the one frame; site.js crossfades them, so the live CSS fade is off. */
.product-story .site-story .site-device { --phone: var(--site-phone); }
.site-device .product-screen { box-shadow: 0 28px 65px #0005; }
.site-story .product-screen-sequence img { transition: none; will-change: opacity, transform; }
.site-story .product-screen-sequence img.is-visible { z-index: 1; }

/* Hero: the live line and its second line, two asks in one row. */
.site-hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.site-hero-actions .story-text-link { gap: 8px; margin-top: 0; font-size: 16px; }
.site-hero-actions .story-text-link svg { width: 18px; height: 18px; flex: none; }

/* A moment: one short line and one large picture. */
.site-eyebrow { color: var(--muted); letter-spacing: .01em; margin: 0 0 20px; font-size: 17px; font-weight: 500; line-height: 1.4; }
.product-story .site-moment h2 { font-size: clamp(48px, 4.3vw, 74px); letter-spacing: -.05em; line-height: 1.06; text-wrap: balance; }
.site-moment-body { color: var(--muted); max-width: 24em; text-wrap: pretty; margin: 24px 0 0; font-size: 22px; line-height: 1.45; }
/* Optical edge, display type only: at display size the face's side bearing sets a straight
   stem (L, N) about .08em inside the box, where the small text's stems sit about .02em in.
   Pulling the display headings back .065em puts every stem on one ink edge; round and
   diagonal capitals (A, Y) then overhang slightly, as they should. The grid is unchanged. */
@media (width >= 760px) {
  .site-story .site-copy > h1, .site-story .site-copy > h2 { margin-left: -.065em; }
}

/* The hero: the line centred at the top, then the film full bleed right under it, one pause
   control. The frame starts on the container's edges and grows to the screen's over the first
   half screen of scroll (a scroll-driven animation where the browser has one; elsewhere and
   with reduced motion it is simply full bleed). On a laptop the pills sit on the film's bottom
   edge over a soft shade; on a phone, where the film is short, right under it.
   The grow animates the frame's clip-path and the control's transform directly, so the browser
   can run both off the main thread and the frame keeps step with the page on every scroll
   frame. An animated custom property (the earlier way) ticks on the main thread, restyles the
   whole stage each frame and lands one frame behind the scroll, which reads as lag. */
.site-film-hero { display: grid; justify-items: center; padding: 72px 0 0; text-align: center; }
.site-film-hero .site-copy { width: calc(100% - var(--gutter) * 2); max-width: var(--story-width); }
.site-film-hero .scroll-intro { margin-inline: auto; }
.site-film-hero .site-hero-actions { justify-content: center; margin-top: 32px; }
.site-film-hero .site-film-stage { position: relative; margin-top: 56px; --film-edge: max(var(--gutter), (100vw - var(--story-width)) / 2); }
@keyframes film-grow { from { clip-path: inset(0 var(--film-edge) round 24px); } to { clip-path: inset(0 0 round 0); } }
@keyframes film-control-grow { from { transform: translateX(calc(-1 * var(--film-edge))); } to { transform: none; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-film-hero .site-film-frame, .site-film-hero .site-film-toggle { animation: film-grow cubic-bezier(.22, 1, .36, 1) both; animation-timeline: scroll(root); animation-range: 0 50svh; }
    .site-film-hero .site-film-toggle { animation-name: film-control-grow; }
  }
}
.site-film-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 0; clip-path: inset(0 0 round 0); overflow: hidden; background: var(--paper); }
.site-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-film-toggle { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: #0c1013b8; color: var(--ink); box-shadow: 0 0 0 1px #ffffff1f; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background .2s; }
/* An action is never dimmed: the control is at full strength; hovering lifts its ground. */
.site-film-toggle:hover { background: #1a2229d9; }
.site-film-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.site-film-toggle [data-lucide="play"], .site-film-toggle svg.lucide-play { display: none; }
.site-film-frame.is-paused .site-film-toggle svg.lucide-pause { display: none; }
.site-film-frame.is-paused .site-film-toggle svg.lucide-play { display: block; transform: translateX(1px); }
.site-film-frame.is-still .site-film-toggle { display: none; }

/* The film's selector: a row of text pills, one per film, switching which film plays in the
   frame. The playing pill is filled in the page's action colour and a thin progress line sits
   just under it and follows the film. The row scrolls sideways inside itself when it is wider
   than the screen, never the page. */
.site-film-stage { display: flex; flex-direction: column; width: 100%; margin-inline: auto; min-width: 0; }
.site-film-select { margin-top: 16px; min-width: 0; }
@media (width >= 760px) {
  .site-film-toggle { right: 20px; z-index: 1; bottom: 28px; }
  .site-film-frame::after { content: ""; position: absolute; inset: auto 0 0; height: 160px; background: linear-gradient(to top, #0c1013d9, #0c101300); pointer-events: none; }
  .site-film-select { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 1; margin: 0; }
}
.site-film-row {
  position: relative; display: flex; gap: 8px; width: max-content; max-width: 100%; margin-inline: auto;
  padding: 4px 6px 14px; box-sizing: border-box; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 6px; scrollbar-width: none;
}
.site-film-row::-webkit-scrollbar { display: none; }
/* A row that continues past an edge fades out there, so it reads as scrollable. */
.site-film-row.has-before { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.site-film-row.has-after { -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
.site-film-row.has-before.has-after { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }

.site-film-option { position: relative; flex: none; display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 0 20px; background: none; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.3; white-space: nowrap; scroll-snap-align: center; transition: color .2s, background-color .2s, transform .2s cubic-bezier(.22, 1, .36, 1); -webkit-tap-highlight-color: transparent; }
.site-film-option:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--soft); }
.site-film-option:active:not(:disabled) { transform: scale(.97); }
.site-film-option[aria-pressed="true"] { background: var(--action); color: var(--button-ink); box-shadow: none; }
.site-film-option:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.site-film-option:disabled { cursor: default; color: var(--muted); }
.site-film-name { display: flex; align-items: center; }
.site-film-soon { margin-left: 8px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .01em; }
.site-film-progress { display: none; position: absolute; left: 14px; right: 14px; top: calc(100% + 6px); height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.site-film-option[aria-pressed="true"] .site-film-progress { display: block; }
.site-film-progress::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform: scaleX(var(--film-progress, 0)); transform-origin: left; }

@media (width <= 759px) {
  .site-film-option { padding: 0 18px; }
}

/* The closes. 1 the line: the page's only word on how it works under the button. 2 the icon:
   the app itself, its name, one fact. 3 the question. With the footer it fills the last
   screen, so no empty band opens before the footer. */
.product-story .site-close { border-top: 0; box-sizing: border-box; min-height: calc(var(--site-view) - var(--site-foot)); padding: var(--site-pad) 0; }
.site-close .story-access-action p { font-size: 15px; }
.site-close-sub { margin: 20px 0 0; }
.site-app-icon { width: 120px; height: 120px; border-radius: 27px; margin: 0 auto 28px; box-shadow: 0 24px 60px #0008; }

/* The footer on the container, as live. */
.product-story .site-footer { box-sizing: border-box; width: calc(100% - var(--gutter) * 2); }

/* The questions modal: the live accordion, left aligned inside the live modal. */
.site-questions { width: min(640px, 100vw - 32px); }
.site-questions .access-dialog-body { text-align: left; }
.site-questions h2 { padding-inline: 0; }
.site-questions .story-question-list { margin-top: 8px; }
.site-questions .story-question-list summary { min-height: 64px; font-size: 18px; }
.site-questions .story-text-link { margin-top: 24px; }
.story-questions .story-disclosure, .site-questions .story-disclosure { translate: 0 -2px; }
/* Both modals: the close button's middle on the heading's first line (the body's top padding,
   plus half the live heading's line, less half the 44 px button). */
.access-dialog .access-dismiss { top: calc(14px + clamp(40px, 3.6vw, 58px) * .535); }
@media (width <= 759px) { .access-dialog .access-dismiss { top: calc(14px + clamp(29px, 8.1vw, 36px) * .56); } }
@media (width <= 520px) { .access-dialog .access-dismiss { top: calc(6px + clamp(29px, 8.1vw, 36px) * .56); } }

/* Early access: the confirmation that replaces the form. */
/* Centred: the icon, the heading and the email line, which stays one line where it fits. */
.access-dialog-body.access-success { text-align: center; }
.access-success .access-icon { margin-inline: auto; }
.access-success strong { color: var(--ink); font-weight: 500; }
@media (width > 600px) {
  .access-dialog:has(.access-success:not([hidden])) { width: min(600px, 100vw - 32px); }
  .access-success p { max-width: none; white-space: nowrap; }
}

/* A phrase moves to the next line whole; only a phrase wider than the line wraps inside. */
.site-unit { display: inline-block; }

@media (width <= 1100px) {
  .product-story { --site-gap: 64px; }
  .product-story .site-story { --site-phone: clamp(240px, calc((100svh - 160px) * .4614), 300px); }
}

/* A narrow laptop or a tablet held upright (768): a slightly smaller phone, a tighter gap and a
   40 px headline, so each moment's headline holds one line instead of breaking mid-phrase. */
@media (760px <= width < 900px) {
  .product-story { --site-gap: 40px; }
  .product-story .site-story { --site-phone: clamp(240px, calc((100svh - 160px) * .4614), 280px); }
  .product-story .site-moment h2 { font-size: 40px; }
}

/* Phone: one centre axis. The phone holds the top of the screen under the header, about half
   its height; the copy scrolls beneath it. site.js fades each block's copy out just
   before its top reaches the phone's bottom edge, so no line is ever cut by the phone; the
   mask (--site-cut, the phone's bottom edge measured from the top of the copy) is only the
   backstop. Each block is the rest of the screen tall with its copy centred, so one block is
   read at a time. */
@media (width <= 759px) {
  .product-story { --site-pad: 56px; --site-gap: 40px; }
  .product-story .site-view { min-height: 0; }
  .product-story .site-story {
    --site-phone-h: clamp(220px, calc(var(--site-view) * .5), 480px);
    --site-phone: calc((var(--site-phone-h) - 18px) * .4614 + 18px);
    --site-pin: calc(var(--site-phone-h) + 24px);
    grid-template-columns: minmax(0, 1fr); text-align: center;
  }
  .site-story-copy { grid-area: 1 / 1; padding-top: var(--site-pin); -webkit-mask-image: linear-gradient(to bottom, transparent var(--site-cut, var(--site-pin)), #000 calc(var(--site-cut, var(--site-pin)) + 16px)); mask-image: linear-gradient(to bottom, transparent var(--site-cut, var(--site-pin)), #000 calc(var(--site-cut, var(--site-pin)) + 16px)); }
  .site-story-hero .site-story-copy { -webkit-mask-image: none; mask-image: none; }
  .site-story-pin { grid-area: 1 / 1; z-index: 1; height: var(--site-pin); box-sizing: border-box; padding: 12px 0; align-items: flex-start; justify-content: center; }
  .site-step { min-height: calc(var(--site-view) - var(--site-pin)); padding: 16px 0 24px; }
  /* The live rim and screen corners are drawn for a 330 px phone; a smaller phone keeps their
     proportion, so the frame never turns into a pill. */
  [data-story] .product-screen { border-radius: calc(var(--site-phone) * .122); }
  [data-story] .product-screen img { border-radius: calc(var(--site-phone) * .084); }
  /* The hero as in revision 4: its copy first, then its phone, centred, with the view's padding
     above and below. Its phone does not hold the top of the screen. */
  .product-story .site-story-hero { --site-phone: min(300px, 78vw); grid-template-rows: auto auto; row-gap: var(--site-gap); padding-block: var(--site-pad); }
  .site-story-hero .site-story-copy { padding-top: 0; }
  .site-story-hero .site-story-pin { grid-area: 2 / 1; position: static; height: auto; padding: 0; }
  .site-story-hero .site-step { min-height: 0; padding: 0; }
  .site-copy { width: 100%; }
  .site-hero .scroll-intro { margin-inline: auto; }
  .site-hero-actions { flex-direction: column; align-items: center; }
  .site-hero-actions .story-text-link { margin-top: 4px; }
  .site-film-hero { padding-top: 48px; }
  .site-film-hero .site-film-stage { margin-top: 40px; }
  .site-film-hero .site-hero-actions { margin-top: 28px; }
  .site-film-toggle { right: 12px; bottom: 12px; width: 40px; height: 40px; }
  .site-moment-body { margin-inline: auto; font-size: 18px; }
  .site-eyebrow { margin-bottom: 14px; font-size: 15px; }
  .product-story .site-moment h2 { font-size: clamp(30px, 8.6vw, 40px); line-height: 1.1; }
  /* On a phone each phrase of a moment takes its own line. */
  .site-moment-body .site-unit { display: block; }
  .product-story .site-close { min-height: 0; }
  .site-app-icon { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 22px; }
  .site-questions .story-question-list summary { font-size: 17px; }
  /* Five footer links: three over two, never one alone on the last line. */
  .footer-bottom nav { max-width: 270px; margin-inline: auto; }
  /* The two link rows touch tap target to tap target: 44 px apart, each link still 44 px tall. */
  .product-story .footer-bottom nav { row-gap: 0; }
}

@media (width <= 360px) {
  .site-hero h1 { font-size: 35px; }
  .site-moment-body { font-size: 16px; }
}

/* Launch review fixes (W2, W8). */
.access-dialog-body h2 { font-size: clamp(26px, 7.2vw, 32px); white-space: nowrap; padding-inline: 0; }
@media (max-width: 420px) { .access-dialog-body h2 { margin-top: 24px; } }
.brand { letter-spacing: -.01em; }
.footer-company-link { display: inline-flex; align-items: center; min-height: 44px; }