/* Daily Rewire v2. Letterbox Dawn colours, the app's Open Sky skies and type (Newsreader for personal
   words, Geist for everything else, as in ios/design-reference). */

@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(../fonts/newsreader-italic.woff2) format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist"; src: url(../fonts/geist.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --night: #1E2452;
  --deep: #0F1230;
  --abyss: #090B1F;
  --coral: #FF7A59;
  --cream: #F6EFE6;
  --cream-2: #EFE5D8;
  --ink: #0A1525;
  --ink-soft: rgba(30, 36, 82, 0.74);
  --on-dark-soft: rgba(246, 239, 230, 0.74);
  --serif: "Newsreader", "New York", ui-serif, Georgia, serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--head-h); }
body { margin: 0; background: var(--deep); color: var(--night); font: 400 17px/1.55 var(--sans); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, video, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; font-optical-sizing: auto; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--cream); color: var(--night); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 6px; }

/* ---------- header ---------- */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h); color: var(--cream); transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }
.site-head.solid { background: rgba(15, 18, 48, 0.72); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 rgba(246, 239, 230, 0.08); }
.site-head.light { color: var(--night); }
.site-head.light.solid { background: rgba(246, 239, 230, 0.78); box-shadow: 0 1px 0 rgba(30, 36, 82, 0.08); }
.head-row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup-mark { width: 30px; height: 22.5px; }
.lockup-mark .bar { fill: currentColor; }
.lockup-mark .sun { fill: var(--coral); }
.wordmark { font: 500 0.84rem/1 var(--sans); letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; }
.site-head nav { display: flex; gap: clamp(16px, 2.6vw, 34px); font-size: 0.9rem; }
.site-head nav a { text-decoration: none; opacity: 0.86; transition: opacity 0.2s ease; }
.site-head nav a:hover { opacity: 1; }

/* ---------- badge ---------- */
.store { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.appstore-badge { display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 15px; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, 0.36); cursor: not-allowed; user-select: none; -webkit-user-select: none; box-shadow: 0 10px 30px rgba(5, 8, 25, 0.28); }
.appstore-badge .apple { width: 24px; height: 24px; fill: #fff; margin-top: -3px; }
.badge-text { display: grid; line-height: 1; text-align: left; }
.badge-small { font-size: 0.6875rem; letter-spacing: 0.01em; }
.badge-big { font-size: 1.34rem; font-weight: 600; letter-spacing: -0.015em; margin-top: 2px; }
.store-note { font-size: 0.9rem; letter-spacing: 0.01em; opacity: 0.86; }

/* ---------- phones ---------- */
.phone { position: relative; width: 300px; aspect-ratio: 390 / 844; padding: 3.2%; border-radius: 15% / 7%; background: linear-gradient(160deg, #3a3d47 0%, #15161b 38%, #0b0c0f 70%, #2b2d35 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), inset 0 0 0 4px #050608, 0 40px 80px -20px rgba(5, 8, 25, 0.55), 0 12px 30px -10px rgba(5, 8, 25, 0.4); box-sizing: content-box; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 12.4% / 5.7%; overflow: hidden; background: #0A1230; isolation: isolate; }
.phone .screen > img, .phone .screen > .sc { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone .island { position: absolute; left: 50%; top: 2.9%; width: 29%; height: 3.6%; border-radius: 99px; background: #000; transform: translateX(-50%); }

/* ---------- hero: the sunlight ---------- */
.hero { position: relative; background: var(--deep); color: var(--cream); }
.js .hero { height: 185vh; }
.hero-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; touch-action: pan-y; }
.js .hero-stage { position: sticky; top: 0; }
canvas.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.no-gl canvas.sky { display: none; }
.sky-fallback { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 40% at 56% 73%, rgba(255, 200, 140, 0.6), transparent 70%),
    linear-gradient(180deg, #27467F 0%, #6E7EB0 30%, #E7A78D 58%, #FFD59C 73%, #6C5F7E 73.2%, #2A3157 100%); }
.fb-sun { position: absolute; left: var(--sun-x, 56%); bottom: 27%; width: 96px; height: 96px; margin-left: -48px; border-radius: 50%; transform: translateY(40%); background: radial-gradient(circle, #FFF1C9 0 46%, rgba(255, 196, 120, 0.6) 48%, transparent 70%); }
.grain { position: absolute; inset: -40px; z-index: 2; pointer-events: none; background: url(../sky/sky-grain.webp) 0 0 / 160px 160px; opacity: 0.07; mix-blend-mode: overlay; animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-12px, 8px); } 40% { transform: translate(9px, -14px); } 60% { transform: translate(-6px, -9px); } 80% { transform: translate(14px, 11px); } 100% { transform: translate(0, 0); } }

.hero-inner { position: relative; z-index: 3; height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: 40px; padding-top: var(--head-h); padding-bottom: 6vh; }
.hero-copy { max-width: 640px; margin-top: -9vh; }
.skyline { display: flex; align-items: center; gap: 10px; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; font-variant-numeric: tabular-nums; margin-bottom: 26px; }
.skyline .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(3.3rem, 7.2vw, 7.1rem); line-height: 0.96; letter-spacing: -0.038em; text-wrap: balance; padding-bottom: 0.06em;
  background: radial-gradient(circle 70vmax at var(--hx, 60%) var(--hy, 160%), #FFC8A0 0%, #FBE3CF 34%, var(--cream) 62%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin-top: 24px; max-width: 30ch; font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.45; }
.hero .store { margin-top: 34px; }
.hero-copy > * { transition: color 0.6s ease, text-shadow 0.6s ease; }
.hero-copy [data-ink="light"], .hero-copy:not([data-ink]) { text-shadow: 0 1px 14px rgba(10, 18, 48, 0.35); }
.hero-copy [data-ink="dark"] { color: var(--ink); text-shadow: 0 1px 16px rgba(255, 246, 230, 0.45); }
.hero-copy h1[data-ink="dark"] { color: transparent; text-shadow: none; background-image: radial-gradient(circle 70vmax at var(--hx, 60%) var(--hy, 160%), #7A3524 0%, #2B2550 40%, var(--ink) 66%); }
.hero-copy h1 { text-shadow: none !important; }

.hero-phone { justify-self: center; width: min(300px, 25vw); transform: translateY(calc(var(--rise, 0) * -1px)); filter: drop-shadow(var(--sx, 0) var(--sy, 30px) 40px rgba(5, 8, 25, 0.45)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12), inset 0 0 0 4px #050608; }
.hero-phone .ready { opacity: var(--ready, 0); }
/* glass that catches the sun: a glint on the side facing it, and a warm rim */
.hero-phone::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 80%), rgba(255, 214, 170, calc(var(--glow, 0) * 0.55)) 0%, rgba(255, 190, 140, calc(var(--glow, 0) * 0.18)) 26%, transparent 55%);
  mix-blend-mode: screen; }
.hero-phone::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 80%), rgba(255, 196, 150, calc(0.25 + var(--glow, 0) * 0.75)) 0%, transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* ---------- how it works: four screens in a letterbox ---------- */
.how { position: relative; z-index: 1; background: var(--cream); padding-block: clamp(96px, 11vw, 160px) clamp(80px, 9vw, 130px); overflow: hidden; }
.how .display { max-width: 15ch; color: var(--night); }
.strip { position: relative; margin-top: clamp(56px, 7vw, 96px); }
.strip-picture { position: absolute; left: 0; right: 0; top: calc(var(--phone-h) * 0.12); height: calc(var(--phone-h) * 0.76); overflow: hidden;
  background: linear-gradient(180deg, #F3D9C6 0%, #F7E3CF 55%, #FBEBDB 100%);
  border-block: clamp(26px, 3.4vw, 44px) solid var(--night); }
.strip-sun { position: absolute; left: var(--sun-left, 50%); bottom: -1px; width: calc(var(--phone-h) * 0.52); aspect-ratio: 2 / 1; margin-left: calc(var(--phone-h) * -0.26); border-radius: 999px 999px 0 0; background: var(--coral); box-shadow: 0 0 120px 40px rgba(255, 122, 89, 0.28); transform: translateY(var(--sun-sink, 0%)); }
.steps { --phone-w: clamp(200px, 17.5vw, 252px); --phone-h: calc(var(--phone-w) * 844 / 390 * 1.07); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.strip { --phone-w: clamp(200px, 17.5vw, 252px); --phone-h: calc(var(--phone-w) * 844 / 390 * 1.07); }
.step .phone { width: var(--phone-w); margin-inline: auto; }
.step:nth-child(even) .phone { transform: translateY(calc(var(--phone-h) * 0.06)); }
.step h3 { margin-top: clamp(40px, 5vw, 64px); font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--night); }
.step p { margin-top: 12px; color: var(--ink-soft); font-size: 0.98rem; }
.film-phone .screen { background: #000; }
.film-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-bar { position: absolute; left: 8%; right: 8%; top: 7.5%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); overflow: hidden; z-index: 2; }
.film-bar span { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.film-tag { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 4px 8px; border-radius: 99px; font: 600 0.62rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: rgba(10, 14, 26, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.film-phone .film-tag { bottom: auto; top: calc(7.5% + 12px); right: 8%; }

/* ---------- films ---------- */
.films { position: relative; background: var(--abyss); color: var(--cream); padding-block: clamp(110px, 12vw, 170px); overflow: hidden; }
.films::before { content: ""; position: absolute; left: 50%; top: 42%; width: 120vw; height: 70vh; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(255, 122, 89, 0.16), transparent 70%); pointer-events: none; }
.bar-top, .bar-bottom { position: absolute; left: 0; right: 0; height: clamp(34px, 5vw, 64px); background: #000; z-index: 2; }
.bar-top { top: 0; } .bar-bottom { bottom: 0; }
.films-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.films-head p { color: var(--on-dark-soft); max-width: 40ch; font-size: 1.08rem; justify-self: end; }
.reel { position: relative; margin-top: clamp(40px, 5vw, 64px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; }
.reel::-webkit-scrollbar { display: none; }
.reel.dragging { cursor: grabbing; scroll-snap-type: none; }
.reel:focus-visible { outline-offset: -4px; }
.reel-track { display: flex; gap: clamp(14px, 1.6vw, 22px); padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); width: max-content; }
.film-card { width: clamp(210px, 19vw, 262px); scroll-snap-align: start; scroll-margin-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.clip { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #111 center / cover; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.12); transform: translateZ(0); }
.clip video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.film-card .goal { margin-top: 16px; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-soft); }
.film-card .title { margin-top: 6px; font: 400 1.5rem/1.1 var(--serif); letter-spacing: -0.015em; }
.reel-nav { position: relative; display: flex; justify-content: flex-end; gap: 10px; margin-top: 28px; }
.reel-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(246, 239, 230, 0.28); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.reel-btn:hover { background: rgba(246, 239, 230, 0.08); border-color: rgba(246, 239, 230, 0.5); }
.reel-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- photos ---------- */
.photos { position: relative; background: linear-gradient(180deg, var(--night) 0%, #262B5E 55%, #3E3366 100%); color: var(--cream); padding-block: clamp(110px, 12vw, 170px); overflow: hidden; }
.photos-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.photos .display { max-width: 11ch; }
.photos-lede { margin-top: 26px; font-size: clamp(1.1rem, 1.4vw, 1.25rem); max-width: 34ch; color: rgba(246, 239, 230, 0.9); }
.facts { margin-top: 40px; border-top: 1px solid rgba(246, 239, 230, 0.16); }
.facts li { padding: 18px 0 18px 28px; border-bottom: 1px solid rgba(246, 239, 230, 0.16); color: var(--on-dark-soft); position: relative; font-size: 0.98rem; }
.facts li::before { content: ""; position: absolute; left: 2px; top: 1.62em; width: 10px; height: 5px; border-radius: 10px 10px 0 0; background: var(--coral); }
.photos-art { position: relative; display: grid; justify-items: center; }
.frames { position: relative; width: min(100%, 520px); aspect-ratio: 1.05; }
.frame { position: absolute; top: 50%; left: 50%; width: 46%; aspect-ratio: 9 / 14; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 34px 60px -20px rgba(5, 8, 25, 0.7), 0 0 0 0.5px rgba(255, 255, 255, 0.2); transition: transform 0.9s var(--ease); }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.frame figcaption { position: absolute; left: 12px; bottom: 12px; height: 28px; padding: 0 12px; display: flex; align-items: center; border-radius: 99px; font: 600 0.78rem/1 var(--sans); color: #fff; background: rgba(10, 14, 26, 0.44); border: 0.5px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.f1 { transform: translate(-112%, -46%) rotate(-7deg); }
.f2 { transform: translate(-50%, -54%); z-index: 2; }
.f3 { transform: translate(12%, -46%) rotate(7deg); }
.frame::after { content: ""; position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.8l4.4 4.4L19 7.6' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; transform: scale(0); transition: transform 0.5s var(--ease); }
.photos-art.is-on .frame::after { transform: scale(1); }
.photos-art.is-on .f2::after { transition-delay: 0.35s; }
.photos-art.is-on .f3::after { transition-delay: 0.7s; }
.js .photos-art:not(.is-on) .f1 { transform: translate(-50%, -50%) rotate(-2deg); }
.js .photos-art:not(.is-on) .f3 { transform: translate(-50%, -50%) rotate(2deg); }
.ask { margin-top: 10px; font: italic 400 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--serif); letter-spacing: -0.01em; color: rgba(246, 239, 230, 0.92); }

/* ---------- faq ---------- */
.faq { background: var(--cream); color: var(--night); padding-block: clamp(100px, 11vw, 160px); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.qa { border-top: 1px solid rgba(30, 36, 82, 0.16); }
.qa details { border-bottom: 1px solid rgba(30, 36, 82, 0.16); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font: 400 clamp(1.25rem, 1.9vw, 1.55rem)/1.2 var(--serif); letter-spacing: -0.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 22px; height: 16px; background: linear-gradient(var(--night) 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(var(--night) 0 0) 0 100% / 100% 3px no-repeat, radial-gradient(circle at 50% 100%, var(--coral) 0 5px, transparent 5.5px) 0 0 / 100% 13px no-repeat; transition: background-size 0.4s var(--ease); }
.qa details[open] summary::after { background-size: 100% 3px, 100% 3px, 100% 0; }
.qa details p { padding: 0 0 26px; max-width: 54ch; color: var(--ink-soft); }

/* ---------- closing ---------- */
.close { position: relative; overflow: hidden; color: var(--cream); padding-block: clamp(120px, 14vw, 200px) clamp(110px, 12vw, 170px); text-align: center;
  background: linear-gradient(180deg, #0A1230 0%, #22306A 46%, #5E4F87 76%, #D18779 100%); }
.close-sky { position: absolute; inset: 0; background: radial-gradient(60% 50% at var(--px, 50%) 100%, rgba(255, 176, 128, 0.55), transparent 70%), url(../sky/sky-stars.webp) 0 0 / 320px 320px; opacity: 0.9; pointer-events: none; transition: background-position 0.2s linear; }
.close-sky::after { content: ""; position: absolute; inset: 0; background: url(../sky/sky-stars.webp) 140px 60px / 460px 460px; opacity: 0.5; -webkit-mask: linear-gradient(#000, transparent 60%); mask: linear-gradient(#000, transparent 60%); }
.close-inner { position: relative; display: grid; justify-items: center; }
.close-mark { width: clamp(120px, 14vw, 180px); height: auto; overflow: visible; }
.close-mark .mark-bar { fill: var(--cream); }
.mark-sun, .mark-glow { transform: translateY(var(--set, 0px)); transition: transform 1.6s var(--ease); }
.js .close:not(.is-on) .mark-sun, .js .close:not(.is-on) .mark-glow { --set: 24px; }
.close .display { margin-top: 44px; max-width: 14ch; font-size: clamp(2.8rem, 6vw, 5.4rem); }
.close .store { justify-content: center; margin-top: 40px; }

/* ---------- footer ---------- */
.site-foot { background: var(--abyss); color: var(--cream); padding-block: 40px; }
.foot-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 0.9rem; }
.foot-row .made { color: var(--on-dark-soft); }
.foot-legal { display: flex; gap: 22px; margin-left: auto; }
.foot-legal a { text-decoration: none; border-bottom: 1px solid rgba(246, 239, 230, 0.3); padding-bottom: 2px; }
.foot-legal a:hover { border-color: var(--coral); }
.foot-row .copy { color: var(--on-dark-soft); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .site-head nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; align-content: start; padding-top: calc(var(--head-h) + 8vh); }
  .hero-copy { margin-top: 0; }
  .hero h1 { font-size: clamp(3rem, 13.4vw, 5rem); }
  .hero .lede { max-width: 26ch; }
  .hero-phone { position: absolute; left: 7vw; bottom: 0; width: 44vw; max-width: 250px; transform: translateY(calc(58% - var(--rise, 0) * 1px)); }
  .strip { --phone-w: min(58vw, 250px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .strip::-webkit-scrollbar { display: none; }
  .strip-picture { width: calc(4 * (var(--phone-w) + 36px) + 84px + 2 * var(--gutter)); right: auto; }
  .steps { --phone-w: min(58vw, 250px); display: flex; gap: 28px; width: max-content; max-width: none; }
  .step { width: calc(var(--phone-w) + 36px); scroll-snap-align: center; }
  .step:nth-child(even) .phone { transform: none; }
  .films-head, .photos-grid, .faq-grid { grid-template-columns: 1fr; }
  .films-head p { justify-self: start; }
  .photos-art { order: -1; }
  .foot-legal { margin-left: 0; }
}
@media (max-width: 560px) {
  :root { --head-h: 60px; }
  body { font-size: 16px; }
  .hero .store { gap: 12px; }
  .frames { width: 100%; }
  .frame { width: 40%; }
  .foot-row { gap: 18px 24px; }
  .foot-row .copy { width: 100%; }
}

/* ---------- reduced motion: one still sunrise, nothing pinned or autoplaying ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero { height: auto; }
  .js .hero-stage { position: relative; }
  .grain { animation: none; }
  .hero-phone .ready { opacity: 1; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .frame, .frame::after, .mark-sun, .mark-glow { transition: none !important; }
  .js .photos-art:not(.is-on) .f1 { transform: translate(-112%, -46%) rotate(-7deg); }
  .js .photos-art:not(.is-on) .f3 { transform: translate(12%, -46%) rotate(7deg); }
  .photos-art .frame::after { transform: scale(1); }
  .js .close:not(.is-on) .mark-sun, .js .close:not(.is-on) .mark-glow { --set: 0px; }
  .reel { scroll-snap-type: x proximity; }
}

/* ---------- lockup + legal pages ---------- */
.lockup-svg { height: 20px; width: auto; aspect-ratio: 10586.33 / 1420; color: currentColor; }
.site-foot .lockup-svg { height: 24px; }
.legal-page { background: var(--cream); }
.legal-top { background: linear-gradient(180deg, #0A1230 0%, #22306A 55%, #5E4F87 100%); color: var(--cream); padding: calc(var(--head-h) + clamp(64px, 9vw, 120px)) 0 clamp(56px, 7vw, 90px); }
.legal-wrap { max-width: calc(760px + 2 * var(--gutter)); }
.legal-top p { margin-top: 18px; font-size: 1.15rem; color: rgba(246, 239, 230, 0.86); max-width: 46ch; }
.legal { background: var(--cream); color: var(--night); padding-block: clamp(56px, 7vw, 96px) clamp(80px, 9vw, 130px); }
.legal h2 { font: 400 clamp(1.5rem, 2.2vw, 1.85rem)/1.15 var(--serif); letter-spacing: -0.015em; margin-top: 2.2em; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal ul { margin-top: 14px; color: var(--ink-soft); }
.legal ul { list-style: none; padding: 0; }
.legal li { position: relative; padding-left: 22px; margin-top: 10px; }
.legal li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 10px; height: 5px; border-radius: 10px 10px 0 0; background: var(--coral); }
.legal strong { color: var(--night); font-weight: 600; }
.legal a { color: var(--night); }
.legal-page .site-head nav a { opacity: 0.86; }
@media (max-width: 900px) { .legal-page .site-head nav { display: none; } }