/* How It Works page only (9 Nov 2026). Loaded after styles.css; pairs with how-it-works-wheel.js.
   The wheel itself (turning clockwise, the travelling light, pausing under the pointer) lives in videos.js + styles.css;
   this file adds the six direction arrows, the play buttons and the page's mobile fixes. */

/* ── 1. Six clockwise arrows on the track, turning with the wheel ── */
.orbit-ring .chev { display: none; }                       /* the small chevrons give way to the six big arrows */
.orbit-ring .cw-tail { fill: none; stroke: var(--brand); stroke-width: 8; stroke-linecap: round; }
.orbit-ring .cw-head { fill: var(--brand); }

/* the travelling light, made to read on the light page: a greener, thicker trail and a bigger glowing head */
.orbit-comet::before { background: conic-gradient(from 0deg, rgba(11, 129, 112, 0) 0deg 290deg, rgba(11, 129, 112, .55) 345deg, var(--brand) 356deg, var(--lime) 359.5deg, rgba(11, 129, 112, 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.orbit-comet::after { width: 18px; height: 18px; top: 4px; margin: -9px 0 0 -9px; background: var(--lime);
  box-shadow: 0 0 0 3px var(--brand), 0 0 18px 6px rgba(200, 217, 107, .95); }

/* ── 2. Play buttons ── */
.orbit .sat { container-type: size; }
.orbit .sat .sat-ic { width: clamp(30px, 26cqw, 44px); height: clamp(30px, 26cqw, 44px); }
.orbit .sat .sat-ic .ms { font-size: clamp(18px, 15cqw, 24px); }
.orbit .sat .sat-t { font-size: clamp(12px, 9.4cqw, 15px); }
.sat-play, .list-play { display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff;
  box-shadow: 0 6px 16px rgba(11, 129, 112, .30); transition: transform .3s var(--ease), background .3s var(--ease); }
.sat-play svg, .list-play svg, .hf-play svg { display: block; fill: currentColor; }
.sat-play { width: clamp(30px, 25cqw, 40px); height: clamp(30px, 25cqw, 40px); }
.sat-play svg { width: 58%; height: 58%; margin-left: 6%; }
.orbit .sat:hover .sat-play, .orbit .sat:focus-visible .sat-play { background: var(--brand-600); transform: scale(1.1); }
.orbit .sat:focus-visible, .hubvideo:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.hubvideo { container-type: size; }                       /* the centre's button and label scale with the hub */
.hubvideo .hf-play { width: clamp(52px, 26cqw, 76px); height: clamp(52px, 26cqw, 76px); top: 66%; }
.hf-play svg { width: 60%; height: 60%; margin-left: 7%; }
.hubvideo .hf-t b { font-size: clamp(14px, 6.4cqw, 18px); }
.tip-list { display: none; }
.list-play { flex: none; margin-left: auto; width: 44px; height: 44px; }
.list-play svg { width: 24px; height: 24px; margin-left: 3px; }
.video-list button:active .list-play, .video-list button:hover .list-play { background: var(--brand-600); }
.video-list button { min-height: 64px; }

/* ── 3. Mobile and viewport fixes ── */
@media (min-width: 1101px) {                                /* the iOS address bar: small viewport units */
  .hiw-stage { min-height: calc(100svh - 64px); }
  .orbit { --size: min(720px, calc(100svh - 150px), 54vw); }
}
.hiw { overflow-x: clip; }                                 /* the turning wheel's square corners never widen the page */
.modal { overscroll-behavior: contain; }
html:has(#modal:not([hidden])), html:has(#modal:not([hidden])) body { overflow: hidden; }
.modal-x { width: 44px; height: 44px; }
.modal-x .ms { font-size: 24px; }
@media (max-width: 760px) {
  .hiw-stage { padding-top: 32px; padding-bottom: 32px; }
  .hiw-copy h1 { font-size: clamp(36px, 10vw, 48px); }
  .hiw-copy .lede { font-size: 16px; }
  .modal { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .modal-panel { border-radius: 14px; }
  .modal-x { top: 8px; right: 8px; }
  .modal-cap { padding: 12px 14px; }
  .tip-wheel { display: none; }
  .tip-list { display: inline; }
  .signup input { font-size: 16px; }                        /* below 16px iOS zooms the page on focus */
  .final { padding: 80px 0 72px; }
}
@media (orientation: landscape) and (max-height: 540px) {   /* phones on their side: the video fits the height */
  .modal { padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .modal-panel { width: min(100%, calc((100svh - 64px) * 16 / 9)); }
  .modal-cap { padding: 8px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sat-play, .list-play { transition: none; }
}

/* ── The phone header, as on the home page (9 Nov 2026, round 16): How It Works stays visible, 44px tap targets,
   "Early Access" at 380px and below. Scoped to this page's body class. ── */
@media (max-width: 860px) {
  .hiw-page .nav-links { display: flex; margin-left: auto; }
  .hiw-page .nav .wrap { justify-content: flex-start; gap: 10px; }
  .hiw-page .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (pointer: coarse), (max-width: 860px) {
  .hiw-page .nav .brand { min-height: 44px; }
  .hiw-page .nav .btn-sm { height: 44px; }
}
@media (max-width: 430px) {
  .hiw-page .nav .wrap { gap: 6px; }
  .hiw-page .nav .brand .logo { height: 22px; }
  .hiw-page .nav-links a { font-size: 13px; padding: 0 6px; }
  .hiw-page .nav .btn-sm { font-size: 13px; padding: 0 12px; }
}
@media (max-width: 380px) {
  .hiw-page .cta-get { display: none; }
}

/* ── Round 17 (9 Nov 2026) ── */
/* the wheel: no track behind the arrows, no travelling light (only the six arrows and the spokes turn) */
.hiw-page .orbit-ring .ring, .hiw-page .orbit-ring .spin, .hiw-page .orbit-comet { display: none; }
/* the centre: a real frame from the video, one centred play button, the label as a pill below the circle */
.hiw-page .hubvideo { width: 36%; overflow: visible; background: var(--ink); }
.hiw-page .hubvideo img { display: none; }
.hiw-page .hubvideo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: url(assets/img/hub-frame.jpg) center / cover no-repeat; filter: brightness(.97) saturate(1.02); transition: filter .4s var(--ease); }
.hiw-page .hubvideo::after { inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 23, 42, .16), rgba(15, 23, 42, .06) 70%, rgba(15, 23, 42, .02)); transition: opacity .4s var(--ease); }
.hiw-page .hubvideo .hf-play { top: 50%; width: clamp(60px, 30cqw, 92px); height: clamp(60px, 30cqw, 92px); transition: transform .35s var(--ease), background .3s var(--ease); }
.hiw-page .hubvideo:hover .hf-play, .hiw-page .hubvideo:focus-visible .hf-play { transform: translate(-50%, -50%) scale(1.08); background: var(--brand-600); }
.hiw-page .hubvideo:hover::before, .hiw-page .hubvideo:focus-visible::before { filter: brightness(1.08) saturate(1.05); }
.hiw-page .hubvideo:hover::after, .hiw-page .hubvideo:focus-visible::after { opacity: .7; }
.hiw-page .hubvideo .hf-t { left: 50%; right: auto; bottom: auto; top: calc(100% + 12px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--brand-100); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); color: var(--ink); }
.hiw-page .hubvideo .hf-t b { font-size: 15px; }
.hiw-page .hubvideo .hf-t::after { content: "· 1:30"; font-size: 14px; font-weight: 500; color: var(--muted); }
.hiw-page .hubvideo:hover .hf-t, .hiw-page .hubvideo:focus-visible .hf-t { border-color: var(--brand); }
/* phones: the list's first row shows the same frame as a thumbnail with the play button */
.hiw-page .video-list li:first-child .sat-ic { position: relative; width: 92px; height: 52px; border-radius: 10px; overflow: hidden; background: url(assets/img/hub-frame.jpg) center / cover no-repeat; }
.hiw-page .video-list li:first-child .sat-ic .ms { display: none; }
.hiw-page .video-list li:first-child .sat-ic::before { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .22); }
.hiw-page .video-list li:first-child .sat-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8.6 5.4v13.2L19 12z'/%3E%3C/svg%3E") 55% 50% / 18px no-repeat; }
.hiw-page .video-list li:first-child .list-play { display: none; }
/* touch: the footer logo is a 44px target; no iOS zoom on the email field at any width */
@media (pointer: coarse), (max-width: 860px) { .hiw-page footer .brand { min-height: 44px; } }
.hiw-page .signup input { font-size: 16px; }
/* the CTA heading on two lines, as on the home page; the form note never strands a word */
.hiw-page .final h2 span { display: block; white-space: nowrap; }
@media (max-width: 560px) { .hiw-page .final h2 { font-size: clamp(34px, 10vw, 44px); } }
.hiw-page .final .reassure { text-wrap: balance; }

/* ── Round 18 (9 Nov 2026): the intro. On arrival the centre video plays in the pop-up over a washed-out page. ── */
html:has(body.hiw-page) { scrollbar-gutter: stable; }        /* locking the scroll never shifts the page */
.modal.intro .modal-scrim { background: rgba(245, 247, 246, .74); backdrop-filter: blur(10px) saturate(.7); -webkit-backdrop-filter: blur(10px) saturate(.7); }
.modal.intro .modal-panel { box-shadow: 0 40px 120px rgba(2, 30, 26, .28), 0 0 0 1px var(--line); transform-origin: 50% 50%; }
.vwrap { position: relative; }
.intro-sound { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font: 600 17px/1 Inter, sans-serif; cursor: pointer; box-shadow: 0 14px 34px rgba(2, 30, 26, .35); animation: soundIn .45s var(--ease) both; }
.intro-sound .ms { font-size: 26px; }
.intro-sound:hover, .intro-sound:focus-visible { background: var(--brand-600); }
.intro-sound:focus-visible, .intro-play:focus-visible, .intro-skip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px var(--brand); }
.intro-sound[hidden], .intro-play[hidden] { display: none; }
@keyframes soundIn { from { opacity: 0; transform: translate(-50%, -40%); } }
.intro-play { position: absolute; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%); width: 84px; height: 84px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; cursor: pointer; box-shadow: 0 14px 34px rgba(2, 30, 26, .35); }
.intro-play .ms { font-size: 48px; margin-left: 4px; }
.modal-cap { align-items: center; }
.intro-skip { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 14px/1 Inter, sans-serif; cursor: pointer; }
.intro-skip .ms { font-size: 20px; }
.intro-skip:hover { border-color: var(--brand); color: var(--brand-600); }
.modal.intro .modal-cap > span { margin-left: 12px; }
/* after the intro: the centre circle pulses once and the arrows brighten as the wheel comes back */
.orbit.hello .hubvideo { animation: hubHello 1.3s var(--ease); }
@keyframes hubHello { 0% { transform: translate(-50%, -50%) scale(.9); box-shadow: 0 0 0 0 rgba(11, 129, 112, .5), var(--shadow-lg); } 55% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 0 30px rgba(11, 129, 112, 0), var(--shadow-lg); } 100% { transform: translate(-50%, -50%) scale(1); } }
.orbit.hello .orbit-ring .cw { animation: cwHello 1.5s var(--ease); }
@keyframes cwHello { 0% { opacity: .2; } 60% { opacity: 1; } }
@media (max-width: 760px) {
  .intro-sound { min-height: 48px; font-size: 16px; padding: 0 18px 0 14px; }
  .intro-skip { padding: 0 10px 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-sound { animation: none; }
}
/* wider screens: the sound button sits low over the video, clear of its opening headline and of the controls bar */
@media (min-width: 761px) { .intro-sound { top: auto; bottom: 16%; transform: translateX(-50%); } @keyframes soundIn { from { opacity: 0; transform: translate(-50%, 10px); } } }
/* the label pill sits a little closer to the circle, so a passing feature circle never grazes it */
.hiw-page .hubvideo .hf-t { top: calc(100% + 8px); padding: 8px 14px; }

/* 9 Nov 2026: the Watch How It Works link under the early-access form */
.hiw-page .watch { min-height: 44px; }