/* ===========================================================
   ALWYN DIGITAL WEBSITE (Builds WEB1 and WEB2): the shared Alwyn Blue look.
   Draft only: this folder (landing-pages-next/) is not served.

   Rules this file keeps (see test_website_web1.py):
   - Gold (#F5C451) only on the main button (.btn-main), the one
     gold headline word (.gold-word), the "Booked" highlight of
     the flow animation (.is-booked) and the small light balls on the
     moving streaks (.streak-gold). Nowhere else.
   - Anything that moves uses transform and opacity only.
   - prefers-reduced-motion: every moving thing shows its finished
     state with no movement.
   - WEB2, the dashboard's recipe: one fixed background layer
     (.backdrop: the page color, a soft pale blue glow, the faint
     lines and the moving streaks) stays put behind everything, and
     the sections are see-through so the glass slides over it.
   - Computers (721px and up) get frosted glass on the cards and
     panels, never more than 8 blurred on screen at once. Phones
     (720px and under) get the darker smoky tint with no blur on page
     cards; only the header keeps a light 6px blur.
   - No glow is ever clipped by a box edge (no overflow clip around a
     glow or a shadow), so every light fades out with no hard edge.
   - Corner radius system: cards and panels 24px, inner rows and
     inputs 14px, buttons 16px, chips and pills fully round.
   =========================================================== */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #07111A;
  --card: #0F1F2C;
  --card-line: #1E3443;
  --field-line: #45606F;
  --glow: #A9D6F2;
  --core: #E8F6FF;
  --slate: #8BA4B0;
  --quiet: #B8C9D2;
  --body: #C5D3DA;
  --white: #FFFFFF;
  --ink: #07111A;
  --gold: #F5C451;
  --coral: #F4A68F;
  --edge: rgba(169, 214, 242, 0.4);
  --edge-soft: rgba(169, 214, 242, 0.16);
  --edge-smoky: rgba(169, 214, 242, 0.15);
  --glass: rgba(15, 31, 44, 0.42);
  --smoky: rgba(10, 23, 34, 0.72);
  --solid: #0C1A26;
  --tint: rgba(7, 17, 26, 0.55);
  --glass-blur: blur(22px) saturate(140%);
  --glass-shine: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --smoky-shine: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glass-drop: 0 24px 60px rgba(0, 0, 0, 0.35);
  --lift-drop: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(169, 214, 242, 0.22), 0 0 44px rgba(169, 214, 242, 0.1);
  --section-pad: clamp(104px, 10vw, 144px);
  --glow-box: 0 0 18px rgba(169, 214, 242, 0.55), 0 0 52px rgba(169, 214, 242, 0.25);
  --glow-soft: 0 0 60px rgba(169, 214, 242, 0.14);
  --glow-text: 0 0 12px rgba(169, 214, 242, 0.75), 0 0 38px rgba(169, 214, 242, 0.4);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --head: "Archivo", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 72px;
  --gutter: 16px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  min-width: 320px;
  background: transparent;
  color: var(--body);
  font: 400 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--glow); text-underline-offset: 3px; }
a, button, summary, label { touch-action: manipulation; }
button { font: inherit; }
h1, h2, h3 { font-family: var(--head); color: var(--white); margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }

/* THE FIXED BACKGROUND LAYER. One per page, right under <body>: it never
   scrolls, so the glass slides over it. .backdrop carries the speed lines
   (homepage, Recovery Pack, How It Works, About, Contact, the city page and
   the 404); .page-glow is the same glow with no lines (privacy). Every glow
   fades to fully transparent inside its own gradient and nothing clips it,
   so no light ever stops at an edge. 100lvh keeps it covering the screen on
   a phone when the browser bar slides away. Sits behind everything
   (z-index -1 under a transparent body) and never takes a tap. */
.backdrop, .page-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(70vmax 46vmax at 86% -10%, rgba(169, 214, 242, 0.13), rgba(169, 214, 242, 0) 70%),
    radial-gradient(56vmax 42vmax at -8% 102%, rgba(139, 164, 176, 0.1), rgba(139, 164, 176, 0) 70%),
    radial-gradient(64vmax 26vmax at 34% 74%, rgba(169, 214, 242, 0.045), rgba(169, 214, 242, 0) 70%),
    var(--bg);
}
.speed-lines { position: absolute; inset: 0; width: 100%; height: 100%; }

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 30;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--card);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: 1184px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 721px) { :root { --gutter: 32px; } }

/* ---------- header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
}
/* The header's glass lives on ::before, so it can fade in by opacity once
   the page has scrolled (site.js sets .is-scrolled). At the very top the
   header is clear over the background; with no script it stays glass. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 17, 26, 0.58);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--edge-soft);
  box-shadow: var(--glass-shine);
  transition: opacity 240ms var(--ease-out);
}
.site-ready .site-header:not(.is-scrolled)::before { opacity: 0; }
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  flex: none;
}
.brand-cube { height: 36px; width: 36px; }
.brand-word { height: 20px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--body);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.nav-links a[aria-current="page"] { color: var(--white); box-shadow: inset 0 -2px 0 var(--glow); border-radius: 0; }
.nav .btn-main { height: 46px; padding: 0 20px; font-size: 15px; }

/* Phone and tablet menu: a details disclosure, so it works with no JavaScript. */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--edge-soft);
  color: var(--white);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu-icon-close { display: none; }
.menu[open] .menu-icon-open { display: none; }
.menu[open] .menu-icon-close { display: block; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 10px;
  border-radius: 22px;
  border: 1px solid var(--edge-soft);
  background: rgba(10, 23, 34, 0.96);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  transform-origin: top right;
}
.menu-panel ul { list-style: none; margin: 0 0 8px; padding: 0; }
.menu-panel a:not(.btn-main) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
}
.menu-panel a[aria-current="page"] { background: rgba(169, 214, 242, 0.08); }
.menu-panel .btn-main { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .menu[open] .menu-panel { animation: menuIn 200ms var(--ease-out); }
}
@keyframes menuIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

@media (max-width: 959px) {
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 720px) {
  :root { --header-h: 62px; }
  .brand-cube { height: 30px; width: 30px; }
  .brand-word { height: 17px; }
  .site-header::before {
    background: var(--smoky);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: var(--smoky-shine);
  }
}

/* One clear gold button per screen: the header button waits while a main
   button inside the page is on screen (the homepage hero button, kept from
   the Oct 6 site, and now every page's own button). With no script it shows. */
.site-ready .nav .btn-main {
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms, transform 160ms var(--ease-out);
}
.site-ready .nav .btn-main.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms var(--ease-out), visibility 0s, transform 160ms var(--ease-out);
}

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 16px;
  border: 0;
  font: 700 17px/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-lg { height: 60px; padding: 0 30px; }

/* THE MAIN BUTTON: every "Get My Free Recovery Pack". Gold rule 1 of 3. */
.btn-main {
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 22px rgba(245, 196, 81, 0.32), 0 0 60px rgba(245, 196, 81, 0.12);
}
@media (hover: hover) and (pointer: fine) {
  .btn-main:hover { box-shadow: 0 0 26px rgba(245, 196, 81, 0.5), 0 0 70px rgba(245, 196, 81, 0.2); }
}
.btn-main:focus-visible { outline-color: var(--white); }

.btn-quiet {
  background: rgba(15, 31, 44, 0.6);
  color: var(--white);
  border: 1px solid var(--edge);
}
@media (hover: hover) and (pointer: fine) {
  .btn-quiet:hover { box-shadow: var(--glow-soft), inset 0 0 0 1px var(--glow); }
}

.quiet-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 4px;
  color: var(--glow);
  font-weight: 700;
  text-decoration: none;
}
.quiet-link svg { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .quiet-link:hover { color: var(--white); }
  .quiet-link:hover svg { transform: translateX(3px); }
}

/* THE ONE GOLD HEADLINE WORD (homepage only). Gold rule 2 of 3. */
.gold-word {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(245, 196, 81, 0.35), 0 0 42px rgba(245, 196, 81, 0.16);
}
.glow-words { color: var(--glow); text-shadow: var(--glow-text); }

/* ---------- surfaces: glass over the fixed background ----------
   .card and .glass are the same surface. Computers: the dashboard pane
   recipe (tint, 22px blur, hairline edge, top shine, deep shadow). Phones:
   the smoky tint and the edge only, no blur, so a slow phone keeps up.
   Every blur has a fallback (near the end of this file, so it wins over
   every surface rule): a near solid tint where blur is missing, and a solid
   surface when less transparency or more contrast is asked for. */
.glass, .card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--edge-soft);
  border-radius: 24px;
  box-shadow: var(--glass-shine), var(--glass-drop);
}
@media (min-width: 721px) {
  .glass, .card {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}
@media (max-width: 720px) {
  .glass, .card {
    background: var(--smoky);
    border-color: var(--edge-smoky);
    box-shadow: var(--smoky-shine), 0 18px 44px rgba(0, 0, 0, 0.3);
  }
}

/* Hover on computers: the card rises 4px (transform only) and a quiet
   glow and deeper shadow fade in on ::after (opacity only). Nothing else
   animates; no border or shadow is ever transitioned. */
.lift::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--lift-drop);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
}
.lift { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lift:hover, .site-ready .lift[data-reveal].is-in:hover { transform: translateY(-4px); }
  .lift:hover::after { opacity: 1; }
}

/* ---------- type ---------- */
.h1 {
  font-weight: 900;
  font-size: clamp(42px, 6.4vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.h1-md { font-size: clamp(38px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.03em; }
.h2 {
  font-weight: 900;
  font-size: clamp(32px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
.h3 { font-weight: 800; font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--body); max-width: 34em; }
.measure { max-width: 40em; }
.quiet { color: var(--quiet); }

/* ---------- sections: see-through, so the background shows ---------- */
body { display: flex; flex-direction: column; min-height: 100svh; }
main { display: block; flex: 1 0 auto; }
.section { position: relative; padding: var(--section-pad) 0; }
/* A hairline between sections that fades out at both ends. */
.section + .section::before, .hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(169, 214, 242, 0), rgba(169, 214, 242, 0.14) 30%, rgba(169, 214, 242, 0.14) 70%, rgba(169, 214, 242, 0));
  pointer-events: none;
}
.hero::after { top: auto; bottom: 0; }
@media (max-width: 720px) { :root { --section-pad: 88px; } }

/* Page top for the inner pages. */
.page-top { position: relative; padding: calc(var(--header-h) + 88px) 0 88px; }
@media (max-width: 720px) { .page-top { padding: calc(var(--header-h) + 48px) 0 56px; } }
.page-top .lead { margin-top: 22px; }
/* The panel right under an inner page's title belongs to it: no second gap. */
.page-top + .section { padding-top: 8px; }


/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--header-h) + 88px) 0 104px;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 64px;
  align-items: center;
}
.hero-copy { display: grid; gap: 28px; justify-items: start; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
@media (max-width: 959px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 720px) {
  .hero { padding: calc(var(--header-h) + 44px) 0 88px; }
  .hero-copy { gap: 20px; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-main { width: 100%; }
}

/* The streaks: each one is its own small group (a trail, a short bright
   tip, and a ball of light: a tiny warm white core inside a soft gold
   glow). Only transform (and the fade-in opacity) moves, sampled along the
   faint lines (keyframes at the bottom of this file). The glow is built
   from static radial gradients that fade to fully transparent, so it has
   no ring, no border and no hard edge. No filter, no shadow on anything
   that moves. */
/* WEB2a: the streaks pass behind text on every screen, so the trail is
   dimmed by a fixed opacity (never animated). The trail fades in over the
   first stretch of each pass (opacity keyframes) so the streaks do not
   bunch up at the left edge. The trail stays blue and fades out toward
   the back. WEB2b: the leading end is a ball of light (gold glow, set on
   the gradient stops by .streak-gold) and a short comet tip behind it in
   warm white to pale blue. The ball, its glow and the tip are small
   decorative lights, left out of the text contrast test; the blue trail is
   what text sits under, and test_website_web1.py measures its brightest
   point in a browser. */
.streak-trail { opacity: 0.32; }
.streak-gold { stop-color: var(--gold); }
.streak-glow { r: 8px; }
.streak-glow-near { r: 3.6px; }
.streak-core { r: 1.5px; }
@media (max-width: 720px) {
  .streak-glow { r: 6px; }
  .streak-glow-near { r: 2.8px; }
  .streak-core { r: 1.2px; }
}
.streak {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(-400px, -400px);
  will-change: transform;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.streak-1 { animation-name: alwynStreak1; animation-duration: 24s; animation-delay: -21.2s; }
.streak-2 { animation-name: alwynStreak2; animation-duration: 24s; animation-delay: -15.7s; }
.streak-3 { animation-name: alwynStreak3; animation-duration: 24s; animation-delay: -5.3s; }
.streak-4 { animation-name: alwynStreak4; animation-duration: 24s; animation-delay: -14.6s; }
.streak-5 { animation-name: alwynStreak5; animation-duration: 24s; animation-delay: -4.1s; }
.streak-6 { animation-name: alwynStreak6; animation-duration: 24s; animation-delay: -18s; }
.streak-7 { animation-name: alwynStreak7; animation-duration: 24s; animation-delay: -6.6s; }
.streak-8 { animation-name: alwynStreak8; animation-duration: 24s; animation-delay: -11.7s; }
.streak-9 { animation-name: alwynStreak9; animation-duration: 24s; animation-delay: -2.3s; }
.streak-10 { animation-name: alwynStreak10; animation-duration: 24s; animation-delay: -1.1s; }
.streak-11 { animation-name: alwynStreak11; animation-duration: 24s; animation-delay: -22.5s; }
.streak-12 { animation-name: alwynStreak12; animation-duration: 24s; animation-delay: -19.2s; }
.streak-13 { animation-name: alwynStreak13; animation-duration: 24s; animation-delay: -10.7s; }
.streak-14 { animation-name: alwynStreak14; animation-duration: 24s; animation-delay: -8.2s; }
/* Phones: 7 streaks (the other 7 are hidden), each on its own short part of
   its line, with its own timing. The faint lines stay. */
@media (max-width: 720px) {
  .streak-2, .streak-4, .streak-6, .streak-8, .streak-10, .streak-12, .streak-14 { display: none; }
  .streak-1 { animation-name: alwynPhone1; animation-duration: 13.5s; animation-delay: -7.2s; }
  .streak-3 { animation-name: alwynPhone3; animation-duration: 13.5s; animation-delay: -11s; }
  .streak-5 { animation-name: alwynPhone5; animation-duration: 13.5s; animation-delay: -9.7s; }
  .streak-7 { animation-name: alwynPhone7; animation-duration: 13.5s; animation-delay: -6s; }
  .streak-9 { animation-name: alwynPhone9; animation-duration: 13.5s; animation-delay: -2.9s; }
  .streak-11 { animation-name: alwynPhone11; animation-duration: 13.5s; animation-delay: -0.1s; }
  .streak-13 { animation-name: alwynPhone13; animation-duration: 13.5s; animation-delay: -1.3s; }
}
/* Paused while the layer is not on screen (a page shown with the layer
   hidden) or the tab is hidden (site.js). */
.backdrop.is-offscreen .streak,
.tab-hidden .streak { animation-play-state: paused; }

/* Hero entrance: plays once when the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .js .enter { animation: enterUp 640ms var(--ease-out) both; }
  .js .enter-2 { animation-delay: 70ms; }
  .js .enter-3 { animation-delay: 140ms; }
  .js .enter-4 { animation-delay: 210ms; }
}
@keyframes enterUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- sample text phone card (homepage hero) ---------- */
.phone-card {
  margin: 0;
  justify-self: center;
  width: min(100%, 340px);
  padding: 24px 16px 26px;
  border-radius: 40px;
  border: 1.5px solid var(--edge);
  background: var(--glass);
  box-shadow: var(--glass-shine), var(--glass-drop), 0 0 48px rgba(169, 214, 242, 0.14);
  display: grid;
  gap: 12px;
}
@media (min-width: 721px) {
  .phone-card { -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
@media (max-width: 720px) {
  .phone-card { background: var(--smoky); box-shadow: var(--smoky-shine), 0 0 36px rgba(169, 214, 242, 0.12); }
}
.phone-label { text-align: center; font-size: 13px; font-weight: 700; color: var(--quiet); }
.event-chip {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--field-line);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
}
.bubble {
  max-width: 90%;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.bubble-in { justify-self: start; background: #15293A; color: var(--white); border-radius: 18px 18px 18px 6px; }
.bubble-out { justify-self: end; background: var(--glow); color: var(--ink); border-radius: 18px 18px 6px 18px; box-shadow: var(--glow-soft); }
.bubble-note { font-size: 12.5px; color: var(--quiet); }
.bubble-note-out { justify-self: end; margin-top: -6px; }
.bubble-note-in { margin-top: -6px; }

/* ---------- homepage: "Good inquiries can go quiet" ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 959px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.moments { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.moment {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
}
.moment-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--edge);
  background: var(--tint);
  color: var(--glow);
}
.moment p { font-size: 18px; color: var(--white); font-weight: 600; padding-top: 9px; }
.moments-after { margin-top: 24px; font-size: 18px; }

/* ---------- THE FLOW ANIMATION ("From missed call to booked job") ----------
   Without JavaScript: a plain list (dot beside each card).
   site.js adds .flow-on (rail drawn, finished state) and then one of:
   .flow-css  scroll-driven animation (animation-timeline), or
   .flow-js   the small script fallback (classes .on per step).
   Reduced motion: finished path, nothing moves. */
.flow-intro { margin-bottom: 48px; }
/* WEB2 fix for the "wall": the flow box no longer clips. Its overflow clip
   cut the dot glows, the light head's glow and the cards' soft shadows off
   at the box edges, which drew a faint rectangle with hard edges behind the
   rail. Nothing here clips now; the page itself stops sideways scroll. */
.flow { position: relative; padding: 8px 0 24px; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 28px; position: relative; z-index: 1; }
.flow-step { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; align-items: start; }
.flow-dot {
  position: relative;
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0A1722;
  border: 1px solid rgba(169, 214, 242, 0.22);
  color: var(--white);
}
.flow-dot svg { position: relative; z-index: 1; }
.flow-dot-glow {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 214, 242, 0.35), rgba(169, 214, 242, 0.08) 70%);
  box-shadow: 0 0 22px rgba(169, 214, 242, 0.65), 0 0 0 1px rgba(169, 214, 242, 0.7);
}
.flow-card { padding: 22px 24px; }
.flow-card h3 { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 6px; }
.flow-card p { font-size: 16px; line-height: 1.55; }
.flow-extra { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flow-extra-col { flex-direction: column; align-items: flex-start; gap: 6px; }
.flow-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(169, 214, 242, 0.24);
  background: rgba(7, 17, 26, 0.5);
  color: var(--body);
  font-size: 13px;
  font-weight: 600;
}
.flow-bubble {
  max-width: 100%;
  padding: 10px 13px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(169, 214, 242, 0.12);
  border: 1px solid rgba(169, 214, 242, 0.25);
  color: var(--white);
  font-size: 14px;
  line-height: 1.45;
}
.flow-note { font-size: 12.5px; color: var(--quiet); }
.flow-minis { display: flex; flex-wrap: wrap; gap: 10px; }
.flow-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(169, 214, 242, 0.2);
  background: rgba(7, 17, 26, 0.5);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
}
.flow-mini svg { color: var(--glow); flex: none; }
/* The "Booked" highlight. Gold rule 3 of 3: only on the last step. */
.is-booked .flow-chip-booked {
  border-color: rgba(245, 196, 81, 0.5);
  color: var(--gold);
}
.is-booked .flow-dot-glow {
  background: radial-gradient(circle, rgba(245, 196, 81, 0.45), rgba(245, 196, 81, 0.1) 70%);
  box-shadow: 0 0 26px rgba(245, 196, 81, 0.7), 0 0 0 1px rgba(245, 196, 81, 0.85);
}

.flow-rail, .flow-head-track { display: none; }
.flow-on .flow-rail {
  display: block;
  position: absolute;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: rgba(169, 214, 242, 0.14);
  z-index: 0;
}
.flow-fill {
  position: absolute;
  inset: 0;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(169, 214, 242, 0.25), var(--glow));
  box-shadow: 0 0 10px rgba(169, 214, 242, 0.6);
}
.flow-on .flow-head-track {
  display: block;
  position: absolute;
  width: 0;
  z-index: 1;
  pointer-events: none;
}
/* The light head: a fixed size glow that only ever moves with transform. */
.flow-head {
  position: absolute;
  left: -7px;
  top: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--core);
  box-shadow: 0 0 12px 3px rgba(169, 214, 242, 0.9), 0 0 34px 8px rgba(169, 214, 242, 0.45);
  opacity: 0;
}
.flow-head::before {
  content: "";
  position: absolute;
  left: 5px;
  bottom: 7px;
  width: 4px;
  height: 90px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(169, 214, 242, 0), rgba(169, 214, 242, 0.85));
}

/* Computers: rail in the middle, cards alternate left and right. */
@media (min-width: 900px) {
  .flow-on .flow-steps { row-gap: 56px; }
  .flow-on .flow-step { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); column-gap: 0; align-items: center; }
  .flow-on .flow-dot { grid-column: 2; grid-row: 1; justify-self: center; }
  .flow-on .flow-step:nth-child(odd) .flow-card { grid-column: 1; grid-row: 1; }
  .flow-on .flow-step:nth-child(even) .flow-card { grid-column: 3; grid-row: 1; }
}
/* Phones: smoky cards (the .glass phone rule) and a narrower dot. */
@media (max-width: 720px) {
  .flow-step { grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; }
  .flow-dot { width: 46px; height: 46px; }
  .flow-card { padding: 18px; }
  .flow-card h3 { font-size: 19px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Shared starting state for both moving modes. */
  .flow-css .flow-card, .flow-js .flow-card { opacity: 0.18; transform: translateX(28px) scale(0.985); }
  .flow-css .flow-dot-glow, .flow-js .flow-dot-glow { opacity: 0; }
  .flow-css .flow-extra, .flow-js .flow-extra { opacity: 0; transform: translateY(6px); }
  .flow-css .flow-fill, .flow-js .flow-fill { transform: scaleY(0); }
  .flow-css .flow-head, .flow-js .flow-head { opacity: 1; }
  /* Phones: a shorter start offset that stays inside the page gutter, so
     nothing pokes past the screen edge. */
  @media (max-width: 720px) {
    .flow-css .flow-card, .flow-js .flow-card { transform: translateX(12px) scale(0.985); }
  }
  @media (min-width: 900px) {
    .flow-css .flow-step:nth-child(odd) .flow-card,
    .flow-js .flow-step:nth-child(odd) .flow-card { transform: translateX(-28px) scale(0.985); }
    .flow-css .flow-step:nth-child(even) .flow-card,
    .flow-js .flow-step:nth-child(even) .flow-card { transform: translateX(28px) scale(0.985); }
  }

  /* Script fallback: site.js moves the fill and head with transform and
     toggles .on on each step as the light reaches its dot. */
  .flow-js .flow-card { transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); }
  .flow-js .flow-dot-glow { transition: opacity 350ms var(--ease-out); }
  .flow-js .flow-extra { transition: opacity 400ms var(--ease-out) 150ms, transform 400ms var(--ease-out) 150ms; }
  .flow-js .flow-step.on .flow-card,
  .flow-js .flow-step.on .flow-extra { opacity: 1; transform: none; }
  .flow-js .flow-step.on .flow-dot-glow { opacity: 1; }

  /* Scroll-driven: the rail and every dot share one line, 58 percent
     down the screen (an inset of 42vh from the bottom). The light and
     the dots cross it together, and scrolling back rewinds both. */
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    .flow-css { timeline-scope: --flow-rail; }
    .flow-css .flow-rail { view-timeline: --flow-rail block; view-timeline-inset: 0px 42vh; }
    .flow-css .flow-fill {
      animation: flowFill linear both;
      animation-timeline: --flow-rail;
      animation-range: entry-crossing 0% entry-crossing 100%;
    }
    .flow-css .flow-head-track {
      animation: flowHead linear both;
      animation-timeline: --flow-rail;
      animation-range: entry-crossing 0% entry-crossing 100%;
    }
    .flow-css .flow-head {
      animation: flowHeadShow linear both;
      animation-timeline: --flow-rail;
      animation-range: entry-crossing 0% entry-crossing 100%;
    }
    .flow-css .flow-step { timeline-scope: --flow-dot; }
    .flow-css .flow-dot { view-timeline: --flow-dot block; view-timeline-inset: 0px 42vh; }
    .flow-css .flow-card {
      animation: flowCardInRight linear both;
      animation-timeline: --flow-dot;
      animation-range: entry-crossing -60% entry-crossing 140%;
    }
    .flow-css .flow-dot-glow {
      animation: flowShow linear both;
      animation-timeline: --flow-dot;
      animation-range: entry-crossing 0% entry-crossing 100%;
    }
    .flow-css .flow-extra {
      animation: flowExtraIn linear both;
      animation-timeline: --flow-dot;
      animation-range: entry-crossing 60% entry-crossing 260%;
    }
    @media (min-width: 900px) {
      .flow-css .flow-step:nth-child(odd) .flow-card { animation-name: flowCardInLeft; }
    }
    @media (max-width: 720px) {
      .flow-css .flow-card { animation-name: flowCardInPhone; }
    }
  }
}
@keyframes flowFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes flowHead { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes flowHeadShow { 0% { opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes flowShow { from { opacity: 0; } to { opacity: 1; } }
@keyframes flowCardInRight { from { opacity: 0.18; transform: translateX(28px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes flowCardInPhone { from { opacity: 0.18; transform: translateX(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes flowCardInLeft { from { opacity: 0.18; transform: translateX(-28px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes flowExtraIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Recovery Pack lists and bento ---------- */
.pack-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 959px) { .pack-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.pack-copy { display: grid; gap: 20px; justify-items: start; }
.get-list { list-style: none; margin: 0; padding: 20px 28px 28px; display: grid; gap: 4px; }
.get-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 4px;
  color: var(--white);
  font-weight: 600;
  font-size: 17px;
}
.get-list li + li { border-top: 1px solid rgba(169, 214, 242, 0.1); }
.tick {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  color: var(--glow);
}
.get-label { color: var(--quiet); font-weight: 600; }

.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.bento-score { grid-column: span 4; grid-row: span 2; padding: 32px; display: grid; gap: 20px; align-content: start; }
.bento-tile { grid-column: span 2; padding: 26px; display: grid; gap: 10px; align-content: start; }
.bento-wide { grid-column: span 3; }
@media (max-width: 959px) {
  .bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bento-score { grid-column: 1 / -1; grid-row: auto; }
  .bento-tile, .bento-wide { grid-column: span 1; }
}
@media (max-width: 599px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bento-score { padding: 22px; }
  .bento-tile { padding: 20px; }
}
.score-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sample-tag { font-size: 13px; font-weight: 700; color: var(--quiet); border: 1px solid var(--field-line); border-radius: 999px; padding: 2px 10px; }
.score-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.score-rows li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--tint);
  border: 1px solid var(--card-line);
  color: var(--white);
  font-weight: 600;
}
.status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.status-glow { background: var(--glow); color: var(--ink); }
.status-slate { background: var(--slate); color: var(--ink); }
.status-line { border: 1px solid var(--quiet); color: var(--body); }
.tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--edge);
  color: var(--glow);
  box-shadow: var(--glow-soft);
}

/* ---------- Recovery Pack form ---------- */
.form-card { position: relative; padding: 32px; display: grid; gap: 18px; }
.form-card::before {
  content: "";
  position: absolute;
  left: 32px;
  right: 32px;
  top: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--glow);
  box-shadow: var(--glow-box);
}
@media (max-width: 720px) { .form-card { padding: 22px; } .form-card::before { left: 22px; right: 22px; } }
.form-field { display: grid; gap: 6px; }
.form-label { font-size: 15px; font-weight: 700; color: var(--white); }
.form-input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--field-line);
  background: var(--bg);
  color: var(--white);
  font: 400 17px/1.2 var(--font);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.form-input:focus { outline: none; border-color: var(--glow); box-shadow: 0 0 0 3px rgba(169, 214, 242, 0.3); }
.form-input[aria-invalid="true"] { border: 2px solid var(--coral); }
.form-card .btn-main { width: 100%; height: 58px; white-space: normal; }
.form-card .btn-main:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.consent-line { font-size: 13px; line-height: 1.55; color: var(--quiet); }
.consent-line a { color: var(--glow); }
/* Warnings: soft coral, with an icon and a stronger outline. */
.error-message {
  position: relative;
  padding-left: 26px;
  color: var(--coral);
  font-size: 15px;
  line-height: 1.45;
}
.error-message::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) 50% 3px / 2px 6px no-repeat,
    linear-gradient(currentColor, currentColor) 50% 11px / 2px 2px no-repeat;
}
.error-message a { color: inherit; }
.error-box { padding: 12px 14px 12px 40px; border-radius: 12px; border: 1.5px solid rgba(244, 166, 143, 0.6); background: rgba(244, 166, 143, 0.06); }
.error-box::before { left: 14px; top: 14px; }

.success-card { padding: 36px 32px; display: grid; gap: 18px; justify-items: start; max-width: 640px; }
@media (max-width: 720px) { .success-card { padding: 26px 22px; } }
.success-cube { width: 52px; height: 52px; }
.next-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; counter-reset: n; }
.next-steps li { counter-increment: n; display: flex; gap: 12px; align-items: flex-start; color: var(--white); }
.next-steps li::before {
  content: counter(n);
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--glow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 14px/1 var(--head);
  color: var(--white);
}

/* ---------- numbered steps (How It Works) ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: s; }
.step { counter-increment: s; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 26px; align-items: start; align-content: start; }
.step::before {
  content: counter(s);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--glow);
  box-shadow: var(--glow-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 18px/1 var(--head);
  color: var(--white);
}
.step:last-child::before { background: var(--glow); color: var(--ink); }
.step h2 { font-size: 22px; font-weight: 800; line-height: 1.25; margin: 10px 0 6px; }
@media (min-width: 960px) {
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .step { grid-column: span 2; grid-template-columns: minmax(0, 1fr); }
  .step:nth-child(4), .step:nth-child(5) { grid-column: span 3; }
}

/* ---------- trades, prose, contact ---------- */
.chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: var(--tint);
  color: var(--white);
  font-weight: 600;
}
@media (max-width: 720px) { .chip { min-height: 44px; padding: 0 18px; font-size: 16px; } }

.prose { display: grid; gap: 18px; font-size: 18px; max-width: 40em; }
.prose-card { padding: 48px; }
@media (max-width: 720px) { .prose-card { padding: 24px; } .prose { font-size: 17px; } }

/* Homepage panels: "Need more inquiries too?" and the trades panel. */
.more-card, .trades-panel { padding: 48px; }
.more-card { display: grid; gap: 20px; max-width: 860px; }
.more-close {
  padding-top: 20px;
  border-top: 1px solid rgba(169, 214, 242, 0.12);
  font: 800 clamp(20px, 2vw, 24px)/1.3 var(--head);
  letter-spacing: -0.01em;
  color: var(--white);
}
@media (max-width: 720px) { .more-card, .trades-panel { padding: 24px; } }

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 820px; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.contact-link {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 22px 24px;
  color: var(--white);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-link .tile-icon { flex: none; }
.contact-kind { display: block; font-size: 14px; font-weight: 600; color: var(--quiet); }
.contact-value { display: block; font: 800 21px/1.3 var(--head); }

.close-cta { text-align: center; display: grid; justify-items: center; gap: 22px; }
.close-cta .lead { margin: 0 auto; }
/* The closing glow: a soft bloom behind the last button, drawn inside the
   section's own box. "closest-side" makes the gradient reach nothing exactly
   where it meets the box, so it has no edge, and it never sticks out past
   the screen (which would make a phone zoom the page out). */
.section-close { isolation: isolate; }
.section-close::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(820px, 100%);
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(169, 214, 242, 0.12), rgba(169, 214, 242, 0.04) 60%, rgba(169, 214, 242, 0));
}
@media (max-width: 720px) {
  .close-cta { text-align: left; justify-items: start; }
  .close-cta .btn-main { width: 100%; }
}

/* ---------- small helpers ---------- */
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }
.pad-top-24 { padding: 24px 24px 0; }

/* ---------- privacy ---------- */
.legal { max-width: 46em; display: grid; gap: 34px; }
.legal h2 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul { margin: 8px 0 0; padding-left: 22px; }
.legal li { margin: 4px 0; }
.updated { margin-top: 14px; color: var(--quiet); }

/* ---------- 404 ---------- */
.lost-cube { width: 64px; height: 64px; margin-bottom: 24px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
@media (max-width: 720px) { .btn-row .btn { width: 100%; } }

/* ---------- footer: one glass panel over the background ---------- */
.site-footer { padding: 24px 0 calc(32px + env(safe-area-inset-bottom, 0px)); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: start; padding: 36px 40px; }
@media (max-width: 720px) { .footer-grid { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; } }
.footer-word { height: 22px; width: auto; }
.footer-line { margin-top: 16px; max-width: 30em; color: var(--body); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.footer-links a, .footer-small a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--body);
  font-weight: 600;
  text-decoration: none;
}
.footer-small { margin-top: 18px; font-size: 14px; }
.footer-small a { color: var(--quiet); font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover, .footer-small a:hover, .nav-links a:hover { color: var(--white); }
}

/* ---------- reveal on scroll (computers only, once per visit) ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
  .site-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .site-ready [data-reveal].is-in { opacity: 1; transform: none; }
  /* A card that also rises in keeps its quick 4px hover lift once it is in. */
  .site-ready .lift[data-reveal].is-in { transition: opacity 600ms var(--ease-out), transform 200ms var(--ease-out); }
}

/* ---------- glass fallbacks (kept last so they win) ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass, .card, .phone-card, .site-header::before { background: rgba(12, 26, 38, 0.92); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .card, .phone-card, .site-header::before { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glass, .card, .phone-card, .site-header::before { background: var(--solid); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--field-line); }
}

/* ---------- reduced motion: the finished state, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .streak { display: none; animation: none !important; }
  .flow-card, .flow-extra, .flow-dot-glow { opacity: 1 !important; transform: none !important; animation: none !important; }
  .flow-fill { transform: none !important; animation: none !important; }
  .flow-head, .flow-head-track { display: none !important; }
  .btn:active, .lift:hover, .site-ready .lift[data-reveal].is-in:hover { transform: none; }
  .site-ready [data-reveal] { opacity: 1; transform: none; }
}

/* ===========================================================
   STREAK KEYFRAMES (Build WEB2b): generated once from the 16 faint
   lines in the background layer (same paths as the SVG). Each streak
   rides one line, so 14 streaks use 14 different lanes. A streak is moved
   with translate and turned to the line's angle at each point, so only
   transform (and the fade-in opacity) changes. Each cycle is one pass
   across the screen followed by a rest with nothing showing, and every
   streak has its own pass time (7 to 13 seconds) and start point, so 3 to
   5 are on screen at once on computers and 2 to 3 on phones and they
   never arrive together. Opacity runs from 0 to 1 over the first stretch
   of each pass so nothing bunches at the left edge.
   =========================================================== */
/* streak 1: faint line 2 of 16, trail 126 units, one 8s pass in every 24s cycle */
@keyframes alwynStreak1{
  0.00%{transform:translate(-60.0px,640.0px) rotate(-6.78deg);opacity:0.00}
  1.45%{transform:translate(21.4px,627.6px) rotate(-10.51deg);opacity:0.12}
  2.90%{transform:translate(101.8px,610.2px) rotate(-13.82deg);opacity:0.23}
  4.35%{transform:translate(181.2px,588.5px) rotate(-16.69deg);opacity:0.34}
  5.80%{transform:translate(259.5px,563.1px) rotate(-19.14deg);opacity:0.46}
  7.25%{transform:translate(336.8px,534.7px) rotate(-21.18deg);opacity:0.57}
  8.70%{transform:translate(413.1px,503.8px) rotate(-22.88deg);opacity:0.68}
  10.14%{transform:translate(488.5px,470.9px) rotate(-24.25deg);opacity:0.78}
  11.59%{transform:translate(563.2px,436.3px) rotate(-25.34deg);opacity:0.89}
  13.04%{transform:translate(637.4px,400.5px) rotate(-26.19deg);opacity:1.00}
  14.49%{transform:translate(711.0px,363.7px) rotate(-26.83deg);opacity:1}
  15.94%{transform:translate(784.3px,326.3px) rotate(-27.28deg)}
  17.39%{transform:translate(857.4px,288.3px) rotate(-27.57deg)}
  18.84%{transform:translate(930.3px,250.1px) rotate(-27.71deg)}
  20.29%{transform:translate(1003.2px,211.8px) rotate(-27.73deg)}
  21.74%{transform:translate(1076.1px,173.6px) rotate(-27.63deg)}
  23.19%{transform:translate(1149.0px,135.5px) rotate(-27.43deg)}
  24.64%{transform:translate(1222.2px,97.7px) rotate(-27.15deg)}
  26.09%{transform:translate(1295.6px,60.4px) rotate(-26.79deg)}
  27.54%{transform:translate(1369.2px,23.6px) rotate(-26.36deg)}
  28.99%{transform:translate(1443.1px,-12.7px) rotate(-25.87deg)}
  30.43%{transform:translate(1517.3px,-48.2px) rotate(-25.45deg)}
  31.88%{transform:translate(1591.7px,-83.6px) rotate(-25.45deg)}
  33.33%{transform:translate(1666.0px,-119.0px) rotate(-25.45deg)}
  100.00%{transform:translate(1666.0px,-119.0px) rotate(-25.45deg)}
}
/* streak 2: faint line 3 of 16, trail 224 units, one 11s pass in every 24s cycle */
@keyframes alwynStreak2{
  0.00%{transform:translate(-60.0px,635.0px) rotate(-5.49deg);opacity:0.00}
  1.91%{transform:translate(21.4px,624.7px) rotate(-8.93deg);opacity:0.12}
  3.82%{transform:translate(102.2px,609.7px) rotate(-12.02deg);opacity:0.23}
  5.73%{transform:translate(182.0px,590.7px) rotate(-14.74deg);opacity:0.35}
  7.64%{transform:translate(261.0px,568.1px) rotate(-17.08deg);opacity:0.46}
  9.55%{transform:translate(339.0px,542.6px) rotate(-19.06deg);opacity:0.57}
  11.46%{transform:translate(416.2px,514.6px) rotate(-20.72deg);opacity:0.68}
  13.37%{transform:translate(492.7px,484.6px) rotate(-22.07deg);opacity:0.79}
  15.28%{transform:translate(568.4px,453.0px) rotate(-23.16deg);opacity:0.90}
  17.19%{transform:translate(643.7px,420.2px) rotate(-24.00deg);opacity:1}
  19.10%{transform:translate(718.5px,386.3px) rotate(-24.63deg)}
  21.01%{transform:translate(793.0px,351.8px) rotate(-25.08deg)}
  22.92%{transform:translate(867.3px,316.8px) rotate(-25.37deg)}
  24.83%{transform:translate(941.4px,281.5px) rotate(-25.51deg)}
  26.74%{transform:translate(1015.5px,246.1px) rotate(-25.52deg)}
  28.65%{transform:translate(1089.7px,210.8px) rotate(-25.42deg)}
  30.56%{transform:translate(1163.9px,175.7px) rotate(-25.23deg)}
  32.47%{transform:translate(1238.2px,140.9px) rotate(-24.94deg)}
  34.37%{transform:translate(1312.8px,106.5px) rotate(-24.58deg)}
  36.28%{transform:translate(1387.6px,72.6px) rotate(-24.16deg)}
  38.19%{transform:translate(1462.6px,39.3px) rotate(-23.67deg)}
  40.10%{transform:translate(1537.9px,6.6px) rotate(-23.41deg)}
  42.01%{transform:translate(1613.3px,-26.1px) rotate(-23.41deg)}
  43.92%{transform:translate(1688.6px,-58.7px) rotate(-23.41deg)}
  45.83%{transform:translate(1764.0px,-91.3px) rotate(-23.41deg)}
  100.00%{transform:translate(1764.0px,-91.3px) rotate(-23.41deg)}
}
/* streak 3: faint line 4 of 16, trail 84 units, one 9.5s pass in every 24s cycle */
@keyframes alwynStreak3{
  0.00%{transform:translate(-60.0px,637.0px) rotate(-4.62deg);opacity:0.00}
  1.88%{transform:translate(24.5px,628.1px) rotate(-7.45deg);opacity:0.12}
  3.77%{transform:translate(108.4px,615.1px) rotate(-10.09deg);opacity:0.24}
  5.65%{transform:translate(191.7px,598.4px) rotate(-12.49deg);opacity:0.36}
  7.54%{transform:translate(274.2px,578.5px) rotate(-14.63deg);opacity:0.48}
  9.42%{transform:translate(356.0px,555.7px) rotate(-16.48deg);opacity:0.59}
  11.31%{transform:translate(437.1px,530.4px) rotate(-18.05deg);opacity:0.71}
  13.19%{transform:translate(517.6px,503.2px) rotate(-19.34deg);opacity:0.83}
  15.08%{transform:translate(597.4px,474.3px) rotate(-20.38deg);opacity:0.94}
  16.96%{transform:translate(676.8px,444.1px) rotate(-21.19deg);opacity:1}
  18.85%{transform:translate(755.9px,413.0px) rotate(-21.78deg)}
  20.73%{transform:translate(834.6px,381.2px) rotate(-22.17deg)}
  22.62%{transform:translate(913.2px,349.0px) rotate(-22.39deg)}
  24.50%{transform:translate(991.7px,316.5px) rotate(-22.46deg)}
  26.39%{transform:translate(1070.2px,284.1px) rotate(-22.40deg)}
  28.27%{transform:translate(1148.8px,251.9px) rotate(-22.22deg)}
  30.16%{transform:translate(1227.5px,219.9px) rotate(-21.95deg)}
  32.04%{transform:translate(1306.4px,188.4px) rotate(-21.58deg)}
  33.93%{transform:translate(1385.5px,157.5px) rotate(-21.15deg)}
  35.81%{transform:translate(1464.8px,127.2px) rotate(-20.65deg)}
  37.70%{transform:translate(1544.4px,97.5px) rotate(-20.41deg)}
  39.58%{transform:translate(1624.0px,67.9px) rotate(-20.41deg)}
  100.00%{transform:translate(1624.0px,67.9px) rotate(-20.41deg)}
}
/* streak 4: faint line 5 of 16, trail 168 units, one 13s pass in every 24s cycle */
@keyframes alwynStreak4{
  0.00%{transform:translate(-60.0px,639.0px) rotate(-3.98deg);opacity:0.00}
  2.46%{transform:translate(23.5px,631.5px) rotate(-6.22deg);opacity:0.12}
  4.92%{transform:translate(106.7px,620.9px) rotate(-8.32deg);opacity:0.24}
  7.39%{transform:translate(189.5px,607.4px) rotate(-10.24deg);opacity:0.36}
  9.85%{transform:translate(271.8px,591.2px) rotate(-11.97deg);opacity:0.47}
  12.31%{transform:translate(353.6px,572.7px) rotate(-13.50deg);opacity:0.59}
  14.77%{transform:translate(434.9px,552.1px) rotate(-14.83deg);opacity:0.71}
  17.23%{transform:translate(515.7px,529.8px) rotate(-15.97deg);opacity:0.82}
  19.70%{transform:translate(596.1px,506.1px) rotate(-16.93deg);opacity:0.94}
  22.16%{transform:translate(676.2px,481.1px) rotate(-17.72deg);opacity:1}
  24.62%{transform:translate(755.9px,455.1px) rotate(-18.34deg)}
  27.08%{transform:translate(835.4px,428.4px) rotate(-18.81deg)}
  29.55%{transform:translate(914.7px,401.1px) rotate(-19.14deg)}
  32.01%{transform:translate(993.9px,373.4px) rotate(-19.34deg)}
  34.47%{transform:translate(1073.0px,345.6px) rotate(-19.43deg)}
  36.93%{transform:translate(1152.1px,317.7px) rotate(-19.41deg)}
  39.39%{transform:translate(1231.2px,289.9px) rotate(-19.29deg)}
  41.86%{transform:translate(1310.4px,262.3px) rotate(-19.09deg)}
  44.32%{transform:translate(1389.7px,235.1px) rotate(-18.82deg)}
  46.78%{transform:translate(1469.2px,208.3px) rotate(-18.47deg)}
  49.24%{transform:translate(1548.8px,181.9px) rotate(-18.32deg)}
  51.70%{transform:translate(1628.4px,155.5px) rotate(-18.32deg)}
  54.17%{transform:translate(1708.0px,129.1px) rotate(-18.32deg)}
  100.00%{transform:translate(1708.0px,129.1px) rotate(-18.32deg)}
}
/* streak 5: faint line 6 of 16, trail 280 units, one 10s pass in every 24s cycle */
@keyframes alwynStreak5{
  0.00%{transform:translate(-60.0px,637.0px) rotate(-3.29deg);opacity:0.00}
  1.81%{transform:translate(23.8px,630.6px) rotate(-5.37deg);opacity:0.12}
  3.62%{transform:translate(107.3px,621.4px) rotate(-7.12deg);opacity:0.24}
  5.43%{transform:translate(190.6px,609.9px) rotate(-8.61deg);opacity:0.36}
  7.25%{transform:translate(273.5px,596.4px) rotate(-9.88deg);opacity:0.48}
  9.06%{transform:translate(356.2px,581.2px) rotate(-10.96deg);opacity:0.59}
  10.87%{transform:translate(438.6px,564.5px) rotate(-11.88deg);opacity:0.71}
  12.68%{transform:translate(520.7px,546.6px) rotate(-12.65deg);opacity:0.83}
  14.49%{transform:translate(602.6px,527.7px) rotate(-13.31deg);opacity:0.95}
  16.30%{transform:translate(684.3px,508.0px) rotate(-13.86deg);opacity:1}
  18.12%{transform:translate(765.8px,487.5px) rotate(-14.31deg)}
  19.93%{transform:translate(847.1px,466.5px) rotate(-14.68deg)}
  21.74%{transform:translate(928.4px,445.0px) rotate(-14.97deg)}
  23.55%{transform:translate(1009.5px,423.1px) rotate(-15.19deg)}
  25.36%{transform:translate(1090.6px,400.9px) rotate(-15.35deg)}
  27.17%{transform:translate(1171.6px,378.6px) rotate(-15.44deg)}
  28.99%{transform:translate(1252.6px,356.2px) rotate(-15.48deg)}
  30.80%{transform:translate(1333.6px,333.8px) rotate(-15.46deg)}
  32.61%{transform:translate(1414.6px,311.4px) rotate(-15.39deg)}
  34.42%{transform:translate(1495.7px,289.2px) rotate(-15.27deg)}
  36.23%{transform:translate(1576.8px,267.1px) rotate(-15.26deg)}
  38.04%{transform:translate(1657.8px,244.9px) rotate(-15.26deg)}
  39.86%{transform:translate(1738.9px,222.8px) rotate(-15.26deg)}
  41.67%{transform:translate(1820.0px,200.7px) rotate(-15.26deg)}
  100.00%{transform:translate(1820.0px,200.7px) rotate(-15.26deg)}
}
/* streak 6: faint line 7 of 16, trail 112 units, one 12s pass in every 24s cycle */
@keyframes alwynStreak6{
  0.00%{transform:translate(-60.0px,644.0px) rotate(-3.65deg);opacity:0.00}
  2.38%{transform:translate(22.9px,637.5px) rotate(-5.30deg);opacity:0.12}
  4.76%{transform:translate(105.6px,628.7px) rotate(-6.75deg);opacity:0.24}
  7.14%{transform:translate(188.0px,618.0px) rotate(-8.00deg);opacity:0.35}
  9.52%{transform:translate(270.3px,605.7px) rotate(-9.08deg);opacity:0.47}
  11.90%{transform:translate(352.3px,591.9px) rotate(-9.98deg);opacity:0.59}
  14.29%{transform:translate(434.1px,576.9px) rotate(-10.75deg);opacity:0.71}
  16.67%{transform:translate(515.7px,560.9px) rotate(-11.37deg);opacity:0.82}
  19.05%{transform:translate(597.1px,544.2px) rotate(-11.88deg);opacity:0.94}
  21.43%{transform:translate(678.4px,526.8px) rotate(-12.27deg);opacity:1}
  23.81%{transform:translate(759.6px,508.9px) rotate(-12.57deg)}
  26.19%{transform:translate(840.8px,490.6px) rotate(-12.79deg)}
  28.57%{transform:translate(921.8px,472.1px) rotate(-12.92deg)}
  30.95%{transform:translate(1002.9px,453.5px) rotate(-12.98deg)}
  33.33%{transform:translate(1083.9px,434.8px) rotate(-12.98deg)}
  35.71%{transform:translate(1164.9px,416.1px) rotate(-12.93deg)}
  38.10%{transform:translate(1246.0px,397.6px) rotate(-12.82deg)}
  40.48%{transform:translate(1327.1px,379.2px) rotate(-12.67deg)}
  42.86%{transform:translate(1408.2px,361.1px) rotate(-12.48deg)}
  45.24%{transform:translate(1489.5px,343.3px) rotate(-12.26deg)}
  47.62%{transform:translate(1570.7px,325.7px) rotate(-12.23deg)}
  50.00%{transform:translate(1652.0px,308.1px) rotate(-12.23deg)}
  100.00%{transform:translate(1652.0px,308.1px) rotate(-12.23deg)}
}
/* streak 7: faint line 8 of 16, trail 196 units, one 7.5s pass in every 24s cycle */
@keyframes alwynStreak7{
  0.00%{transform:translate(-60.0px,638.0px) rotate(-1.96deg);opacity:0.00}
  1.42%{transform:translate(22.4px,634.3px) rotate(-3.13deg);opacity:0.12}
  2.84%{transform:translate(104.8px,629.0px) rotate(-4.19deg);opacity:0.24}
  4.26%{transform:translate(187.0px,622.3px) rotate(-5.14deg);opacity:0.35}
  5.68%{transform:translate(269.2px,614.3px) rotate(-6.00deg);opacity:0.47}
  7.10%{transform:translate(351.2px,605.1px) rotate(-6.75deg);opacity:0.59}
  8.52%{transform:translate(433.1px,594.9px) rotate(-7.41deg);opacity:0.70}
  9.94%{transform:translate(514.8px,583.9px) rotate(-7.97deg);opacity:0.82}
  11.36%{transform:translate(596.5px,572.1px) rotate(-8.45deg);opacity:0.94}
  12.78%{transform:translate(678.1px,559.7px) rotate(-8.85deg);opacity:1}
  14.20%{transform:translate(759.6px,546.8px) rotate(-9.17deg)}
  15.62%{transform:translate(841.0px,533.4px) rotate(-9.42deg)}
  17.05%{transform:translate(922.4px,519.8px) rotate(-9.60deg)}
  18.47%{transform:translate(1003.8px,505.9px) rotate(-9.72deg)}
  19.89%{transform:translate(1085.1px,491.9px) rotate(-9.79deg)}
  21.31%{transform:translate(1166.4px,477.9px) rotate(-9.81deg)}
  22.73%{transform:translate(1247.7px,463.8px) rotate(-9.78deg)}
  24.15%{transform:translate(1329.0px,449.9px) rotate(-9.71deg)}
  25.57%{transform:translate(1410.4px,436.0px) rotate(-9.60deg)}
  26.99%{transform:translate(1491.8px,422.4px) rotate(-9.45deg)}
  28.41%{transform:translate(1573.2px,408.8px) rotate(-9.43deg)}
  29.83%{transform:translate(1654.6px,395.3px) rotate(-9.43deg)}
  31.25%{transform:translate(1736.0px,381.8px) rotate(-9.43deg)}
  100.00%{transform:translate(1736.0px,381.8px) rotate(-9.43deg)}
}
/* streak 8: faint line 9 of 16, trail 140 units, one 9s pass in every 24s cycle */
@keyframes alwynStreak8{
  0.00%{transform:translate(-60.0px,636.0px) rotate(-0.79deg);opacity:0.00}
  1.79%{transform:translate(23.1px,634.2px) rotate(-1.64deg);opacity:0.12}
  3.57%{transform:translate(106.2px,631.3px) rotate(-2.40deg);opacity:0.24}
  5.36%{transform:translate(189.3px,627.3px) rotate(-3.06deg);opacity:0.36}
  7.14%{transform:translate(272.3px,622.4px) rotate(-3.63deg);opacity:0.47}
  8.93%{transform:translate(355.2px,616.8px) rotate(-4.11deg);opacity:0.59}
  10.71%{transform:translate(438.2px,610.6px) rotate(-4.52deg);opacity:0.71}
  12.50%{transform:translate(521.0px,603.8px) rotate(-4.84deg);opacity:0.83}
  14.29%{transform:translate(603.9px,596.5px) rotate(-5.11deg);opacity:0.95}
  16.07%{transform:translate(686.7px,589.0px) rotate(-5.30deg);opacity:1}
  17.86%{transform:translate(769.5px,581.2px) rotate(-5.45deg)}
  19.64%{transform:translate(852.2px,573.2px) rotate(-5.55deg)}
  21.43%{transform:translate(935.0px,565.1px) rotate(-5.60deg)}
  23.21%{transform:translate(1017.7px,557.0px) rotate(-5.61deg)}
  25.00%{transform:translate(1100.5px,548.9px) rotate(-5.59deg)}
  26.79%{transform:translate(1183.2px,540.8px) rotate(-5.55deg)}
  28.57%{transform:translate(1266.0px,532.8px) rotate(-5.47deg)}
  30.36%{transform:translate(1348.8px,525.0px) rotate(-5.38deg)}
  32.14%{transform:translate(1431.6px,517.2px) rotate(-5.27deg)}
  33.93%{transform:translate(1514.4px,509.7px) rotate(-5.16deg)}
  35.71%{transform:translate(1597.2px,502.2px) rotate(-5.16deg)}
  37.50%{transform:translate(1680.0px,494.7px) rotate(-5.16deg)}
  100.00%{transform:translate(1680.0px,494.7px) rotate(-5.16deg)}
}
/* streak 9: faint line 10 of 16, trail 252 units, one 12.5s pass in every 24s cycle */
@keyframes alwynStreak9{
  0.00%{transform:translate(-60.0px,641.0px) rotate(-0.62deg);opacity:0.00}
  2.37%{transform:translate(24.2px,639.9px) rotate(-0.87deg);opacity:0.12}
  4.73%{transform:translate(108.4px,638.5px) rotate(-1.09deg);opacity:0.24}
  7.10%{transform:translate(192.6px,636.7px) rotate(-1.29deg);opacity:0.36}
  9.47%{transform:translate(276.8px,634.7px) rotate(-1.46deg);opacity:0.48}
  11.84%{transform:translate(361.0px,632.4px) rotate(-1.61deg);opacity:0.60}
  14.20%{transform:translate(445.2px,630.0px) rotate(-1.74deg);opacity:0.72}
  16.57%{transform:translate(529.4px,627.3px) rotate(-1.84deg);opacity:0.84}
  18.94%{transform:translate(613.6px,624.5px) rotate(-1.93deg);opacity:0.96}
  21.31%{transform:translate(697.8px,621.7px) rotate(-1.99deg);opacity:1}
  23.67%{transform:translate(781.9px,618.7px) rotate(-2.04deg)}
  26.04%{transform:translate(866.1px,615.7px) rotate(-2.07deg)}
  28.41%{transform:translate(950.3px,612.6px) rotate(-2.09deg)}
  30.78%{transform:translate(1034.4px,609.5px) rotate(-2.09deg)}
  33.14%{transform:translate(1118.6px,606.5px) rotate(-2.08deg)}
  35.51%{transform:translate(1202.8px,603.4px) rotate(-2.06deg)}
  37.88%{transform:translate(1286.9px,600.4px) rotate(-2.04deg)}
  40.25%{transform:translate(1371.1px,597.4px) rotate(-2.00deg)}
  42.61%{transform:translate(1455.3px,594.5px) rotate(-1.96deg)}
  44.98%{transform:translate(1539.5px,591.7px) rotate(-1.93deg)}
  47.35%{transform:translate(1623.6px,588.8px) rotate(-1.93deg)}
  49.72%{transform:translate(1707.8px,586.0px) rotate(-1.93deg)}
  52.08%{transform:translate(1792.0px,583.1px) rotate(-1.93deg)}
  100.00%{transform:translate(1792.0px,583.1px) rotate(-1.93deg)}
}
/* streak 10: faint line 11 of 16, trail 98 units, one 8.5s pass in every 24s cycle */
@keyframes alwynStreak10{
  0.00%{transform:translate(-60.0px,642.0px) rotate(0.00deg);opacity:0.00}
  1.77%{transform:translate(24.9px,642.1px) rotate(0.18deg);opacity:0.12}
  3.54%{transform:translate(109.8px,642.5px) rotate(0.34deg);opacity:0.24}
  5.31%{transform:translate(194.7px,643.1px) rotate(0.47deg);opacity:0.36}
  7.08%{transform:translate(279.6px,643.9px) rotate(0.59deg);opacity:0.49}
  8.85%{transform:translate(364.5px,644.9px) rotate(0.70deg);opacity:0.61}
  10.63%{transform:translate(449.4px,646.0px) rotate(0.79deg);opacity:0.73}
  12.40%{transform:translate(534.3px,647.2px) rotate(0.86deg);opacity:0.85}
  14.17%{transform:translate(619.2px,648.5px) rotate(0.93deg);opacity:0.97}
  15.94%{transform:translate(704.1px,650.0px) rotate(0.98deg);opacity:1}
  17.71%{transform:translate(789.0px,651.4px) rotate(1.03deg)}
  19.48%{transform:translate(873.9px,653.0px) rotate(1.06deg)}
  21.25%{transform:translate(958.8px,654.6px) rotate(1.08deg)}
  23.02%{transform:translate(1043.7px,656.2px) rotate(1.10deg)}
  24.79%{transform:translate(1128.6px,657.8px) rotate(1.11deg)}
  26.56%{transform:translate(1213.5px,659.5px) rotate(1.11deg)}
  28.33%{transform:translate(1298.4px,661.1px) rotate(1.11deg)}
  30.10%{transform:translate(1383.3px,662.8px) rotate(1.10deg)}
  31.88%{transform:translate(1468.2px,664.4px) rotate(1.09deg)}
  33.65%{transform:translate(1553.1px,666.0px) rotate(1.08deg)}
  35.42%{transform:translate(1638.0px,667.6px) rotate(1.08deg)}
  100.00%{transform:translate(1638.0px,667.6px) rotate(1.08deg)}
}
/* streak 11: faint line 12 of 16, trail 182 units, one 11.5s pass in every 24s cycle */
@keyframes alwynStreak11{
  0.00%{transform:translate(-60.0px,645.0px) rotate(0.37deg);opacity:0.00}
  2.18%{transform:translate(21.2px,645.9px) rotate(0.95deg);opacity:0.12}
  4.36%{transform:translate(102.3px,647.7px) rotate(1.49deg);opacity:0.23}
  6.53%{transform:translate(183.4px,650.1px) rotate(1.97deg);opacity:0.35}
  8.71%{transform:translate(264.5px,653.2px) rotate(2.41deg);opacity:0.46}
  10.89%{transform:translate(345.6px,656.9px) rotate(2.80deg);opacity:0.58}
  13.07%{transform:translate(426.7px,661.1px) rotate(3.14deg);opacity:0.70}
  15.25%{transform:translate(507.7px,665.8px) rotate(3.43deg);opacity:0.81}
  17.42%{transform:translate(588.7px,670.8px) rotate(3.68deg);opacity:0.93}
  19.60%{transform:translate(669.7px,676.2px) rotate(3.89deg);opacity:1}
  21.78%{transform:translate(750.7px,681.8px) rotate(4.05deg)}
  23.96%{transform:translate(831.6px,687.7px) rotate(4.18deg)}
  26.14%{transform:translate(912.6px,693.6px) rotate(4.28deg)}
  28.31%{transform:translate(993.5px,699.7px) rotate(4.34deg)}
  30.49%{transform:translate(1074.5px,705.9px) rotate(4.37deg)}
  32.67%{transform:translate(1155.4px,712.1px) rotate(4.38deg)}
  34.85%{transform:translate(1236.3px,718.3px) rotate(4.36deg)}
  37.03%{transform:translate(1317.3px,724.4px) rotate(4.32deg)}
  39.20%{transform:translate(1398.2px,730.5px) rotate(4.26deg)}
  41.38%{transform:translate(1479.1px,736.5px) rotate(4.18deg)}
  43.56%{transform:translate(1560.1px,742.4px) rotate(4.16deg)}
  45.74%{transform:translate(1641.0px,748.3px) rotate(4.16deg)}
  47.92%{transform:translate(1722.0px,754.1px) rotate(4.16deg)}
  100.00%{transform:translate(1722.0px,754.1px) rotate(4.16deg)}
}
/* streak 12: faint line 13 of 16, trail 154 units, one 10.5s pass in every 24s cycle */
@keyframes alwynStreak12{
  0.00%{transform:translate(-60.0px,635.0px) rotate(2.55deg);opacity:0.00}
  2.08%{transform:translate(24.1px,639.5px) rotate(3.52deg);opacity:0.12}
  4.17%{transform:translate(108.2px,645.3px) rotate(4.36deg);opacity:0.24}
  6.25%{transform:translate(192.1px,652.2px) rotate(5.09deg);opacity:0.36}
  8.33%{transform:translate(276.0px,660.2px) rotate(5.73deg);opacity:0.48}
  10.42%{transform:translate(359.8px,669.0px) rotate(6.28deg);opacity:0.60}
  12.50%{transform:translate(443.5px,678.6px) rotate(6.76deg);opacity:0.72}
  14.58%{transform:translate(527.1px,688.8px) rotate(7.17deg);opacity:0.84}
  16.67%{transform:translate(610.7px,699.6px) rotate(7.52deg);opacity:0.96}
  18.75%{transform:translate(694.2px,710.8px) rotate(7.81deg);opacity:1}
  20.83%{transform:translate(777.6px,722.5px) rotate(8.06deg)}
  22.92%{transform:translate(861.0px,734.4px) rotate(8.26deg)}
  25.00%{transform:translate(944.3px,746.7px) rotate(8.43deg)}
  27.08%{transform:translate(1027.7px,759.1px) rotate(8.55deg)}
  29.17%{transform:translate(1111.0px,771.7px) rotate(8.63deg)}
  31.25%{transform:translate(1194.3px,784.4px) rotate(8.68deg)}
  33.33%{transform:translate(1277.5px,797.1px) rotate(8.70deg)}
  35.42%{transform:translate(1360.8px,809.8px) rotate(8.69deg)}
  37.50%{transform:translate(1444.1px,822.5px) rotate(8.64deg)}
  39.58%{transform:translate(1527.4px,835.1px) rotate(8.59deg)}
  41.67%{transform:translate(1610.7px,847.7px) rotate(8.59deg)}
  43.75%{transform:translate(1694.0px,860.3px) rotate(8.59deg)}
  100.00%{transform:translate(1694.0px,860.3px) rotate(8.59deg)}
}
/* streak 13: faint line 14 of 16, trail 210 units, one 7s pass in every 24s cycle */
@keyframes alwynStreak13{
  0.00%{transform:translate(-60.0px,640.0px) rotate(2.51deg);opacity:0.00}
  1.33%{transform:translate(23.4px,644.7px) rotate(3.89deg);opacity:0.12}
  2.65%{transform:translate(106.6px,651.3px) rotate(5.19deg);opacity:0.24}
  3.98%{transform:translate(189.7px,659.7px) rotate(6.39deg);opacity:0.36}
  5.30%{transform:translate(272.6px,669.8px) rotate(7.47deg);opacity:0.48}
  6.63%{transform:translate(355.3px,681.4px) rotate(8.42deg);opacity:0.59}
  7.95%{transform:translate(437.8px,694.2px) rotate(9.23deg);opacity:0.71}
  9.28%{transform:translate(520.2px,708.1px) rotate(9.91deg);opacity:0.83}
  10.61%{transform:translate(602.4px,722.9px) rotate(10.46deg);opacity:0.95}
  11.93%{transform:translate(684.4px,738.4px) rotate(10.89deg);opacity:1}
  13.26%{transform:translate(766.4px,754.4px) rotate(11.20deg)}
  14.58%{transform:translate(848.3px,770.8px) rotate(11.40deg)}
  15.91%{transform:translate(930.1px,787.4px) rotate(11.51deg)}
  17.23%{transform:translate(1012.0px,804.0px) rotate(11.53deg)}
  18.56%{transform:translate(1093.8px,820.7px) rotate(11.48deg)}
  19.89%{transform:translate(1175.6px,837.2px) rotate(11.36deg)}
  21.21%{transform:translate(1257.5px,853.6px) rotate(11.19deg)}
  22.54%{transform:translate(1339.5px,869.6px) rotate(10.97deg)}
  23.86%{transform:translate(1421.5px,885.3px) rotate(10.71deg)}
  25.19%{transform:translate(1503.6px,900.7px) rotate(10.44deg)}
  26.52%{transform:translate(1585.7px,915.8px) rotate(10.44deg)}
  27.84%{transform:translate(1667.9px,930.9px) rotate(10.44deg)}
  29.17%{transform:translate(1750.0px,946.1px) rotate(10.44deg)}
  100.00%{transform:translate(1750.0px,946.1px) rotate(10.44deg)}
}
/* streak 14: faint line 15 of 16, trail 112 units, one 10.2s pass in every 24s cycle */
@keyframes alwynStreak14{
  0.00%{transform:translate(-60.0px,641.0px) rotate(3.03deg);opacity:0.00}
  2.02%{transform:translate(23.3px,646.7px) rotate(4.75deg);opacity:0.12}
  4.05%{transform:translate(106.4px,654.8px) rotate(6.32deg);opacity:0.24}
  6.07%{transform:translate(189.3px,665.0px) rotate(7.72deg);opacity:0.36}
  8.10%{transform:translate(271.9px,677.1px) rotate(8.98deg);opacity:0.47}
  10.12%{transform:translate(354.2px,691.0px) rotate(10.08deg);opacity:0.59}
  12.14%{transform:translate(436.3px,706.3px) rotate(11.04deg);opacity:0.71}
  14.17%{transform:translate(518.1px,722.9px) rotate(11.87deg);opacity:0.83}
  16.19%{transform:translate(599.7px,740.6px) rotate(12.57deg);opacity:0.94}
  18.21%{transform:translate(681.1px,759.2px) rotate(13.16deg);opacity:1}
  20.24%{transform:translate(762.3px,778.5px) rotate(13.64deg)}
  22.26%{transform:translate(843.4px,798.5px) rotate(14.02deg)}
  24.29%{transform:translate(924.3px,818.9px) rotate(14.30deg)}
  26.31%{transform:translate(1005.2px,839.7px) rotate(14.50deg)}
  28.33%{transform:translate(1086.0px,860.7px) rotate(14.62deg)}
  30.36%{transform:translate(1166.8px,881.8px) rotate(14.66deg)}
  32.38%{transform:translate(1247.6px,902.9px) rotate(14.64deg)}
  34.40%{transform:translate(1328.4px,924.0px) rotate(14.55deg)}
  36.43%{transform:translate(1409.2px,944.9px) rotate(14.40deg)}
  38.45%{transform:translate(1490.1px,965.5px) rotate(14.20deg)}
  40.48%{transform:translate(1571.0px,985.9px) rotate(14.17deg)}
  42.50%{transform:translate(1652.0px,1006.4px) rotate(14.17deg)}
  100.00%{transform:translate(1652.0px,1006.4px) rotate(14.17deg)}
}

/* Phone keyframes: a phone shows only the middle of the layer (about x 500
   to 940 of 1440), so each phone streak rides just that part of its line,
   fading in a little before the screen. */
/* phone streak 1: the part of line 2 that crosses a phone screen, one 8s pass in every 13.5s cycle */
@keyframes alwynPhone1{
  0.00%{transform:translate(380.0px,517.5px) rotate(-22.18deg);opacity:0.00}
  5.93%{transform:translate(454.6px,485.9px) rotate(-23.67deg);opacity:0.31}
  11.85%{transform:translate(528.5px,452.6px) rotate(-24.87deg);opacity:0.62}
  17.78%{transform:translate(601.7px,417.9px) rotate(-25.81deg);opacity:0.92}
  23.70%{transform:translate(674.5px,382.1px) rotate(-26.54deg);opacity:1}
  29.63%{transform:translate(746.8px,345.5px) rotate(-27.08deg)}
  35.56%{transform:translate(818.8px,308.4px) rotate(-27.44deg)}
  41.48%{transform:translate(890.7px,270.9px) rotate(-27.65deg)}
  47.41%{transform:translate(962.5px,233.2px) rotate(-27.73deg)}
  53.33%{transform:translate(1034.2px,195.5px) rotate(-27.70deg)}
  59.26%{transform:translate(1106.0px,157.9px) rotate(-27.56deg)}
  100.00%{transform:translate(1106.0px,157.9px) rotate(-27.56deg)}
}
/* phone streak 3: the part of line 4 that crosses a phone screen, one 9s pass in every 13.5s cycle */
@keyframes alwynPhone3{
  0.00%{transform:translate(380.0px,548.5px) rotate(-16.97deg);opacity:0.00}
  7.41%{transform:translate(457.5px,523.7px) rotate(-18.40deg);opacity:0.32}
  14.81%{transform:translate(534.5px,497.2px) rotate(-19.59deg);opacity:0.64}
  22.22%{transform:translate(611.0px,469.2px) rotate(-20.54deg);opacity:0.96}
  29.63%{transform:translate(687.0px,440.2px) rotate(-21.28deg);opacity:1}
  37.04%{transform:translate(762.7px,410.2px) rotate(-21.82deg)}
  44.44%{transform:translate(838.2px,379.7px) rotate(-22.18deg)}
  51.85%{transform:translate(913.5px,348.8px) rotate(-22.39deg)}
  59.26%{transform:translate(988.8px,317.8px) rotate(-22.46deg)}
  66.67%{transform:translate(1064.0px,286.7px) rotate(-22.41deg)}
  100.00%{transform:translate(1064.0px,286.7px) rotate(-22.41deg)}
}
/* phone streak 5: the part of line 6 that crosses a phone screen, one 7.5s pass in every 13.5s cycle */
@keyframes alwynPhone5{
  0.00%{transform:translate(380.0px,576.5px) rotate(-11.24deg);opacity:0.00}
  5.05%{transform:translate(460.8px,559.8px) rotate(-12.10deg);opacity:0.34}
  10.10%{transform:translate(541.4px,541.9px) rotate(-12.83deg);opacity:0.67}
  15.15%{transform:translate(621.8px,523.2px) rotate(-13.45deg);opacity:1}
  20.20%{transform:translate(702.0px,503.6px) rotate(-13.97deg)}
  25.25%{transform:translate(782.0px,483.4px) rotate(-14.39deg)}
  30.30%{transform:translate(861.8px,462.6px) rotate(-14.74deg)}
  35.35%{transform:translate(941.6px,441.4px) rotate(-15.01deg)}
  40.40%{transform:translate(1021.3px,419.9px) rotate(-15.22deg)}
  45.45%{transform:translate(1100.9px,398.1px) rotate(-15.36deg)}
  50.51%{transform:translate(1180.5px,376.2px) rotate(-15.45deg)}
  55.56%{transform:translate(1260.0px,354.2px) rotate(-15.48deg)}
  100.00%{transform:translate(1260.0px,354.2px) rotate(-15.48deg)}
}
/* phone streak 7: the part of line 8 that crosses a phone screen, one 8.5s pass in every 13.5s cycle */
@keyframes alwynPhone7{
  0.00%{transform:translate(380.0px,601.6px) rotate(-6.99deg);opacity:0.00}
  6.30%{transform:translate(459.9px,591.4px) rotate(-7.60deg);opacity:0.33}
  12.59%{transform:translate(539.8px,580.4px) rotate(-8.13deg);opacity:0.67}
  18.89%{transform:translate(619.5px,568.7px) rotate(-8.57deg);opacity:1.00}
  25.19%{transform:translate(699.2px,556.4px) rotate(-8.94deg);opacity:1}
  31.48%{transform:translate(778.7px,543.7px) rotate(-9.23deg)}
  37.78%{transform:translate(858.3px,530.6px) rotate(-9.46deg)}
  44.07%{transform:translate(937.7px,517.2px) rotate(-9.63deg)}
  50.37%{transform:translate(1017.2px,503.6px) rotate(-9.74deg)}
  56.67%{transform:translate(1096.6px,489.9px) rotate(-9.80deg)}
  62.96%{transform:translate(1176.0px,476.2px) rotate(-9.81deg)}
  100.00%{transform:translate(1176.0px,476.2px) rotate(-9.81deg)}
}
/* phone streak 9: the part of line 10 that crosses a phone screen, one 7s pass in every 13.5s cycle */
@keyframes alwynPhone9{
  0.00%{transform:translate(380.0px,631.9px) rotate(-1.64deg);opacity:0.00}
  4.71%{transform:translate(457.5px,629.6px) rotate(-1.76deg);opacity:0.32}
  9.43%{transform:translate(534.9px,627.1px) rotate(-1.85deg);opacity:0.65}
  14.14%{transform:translate(612.4px,624.6px) rotate(-1.93deg);opacity:0.97}
  18.86%{transform:translate(689.8px,621.9px) rotate(-1.99deg);opacity:1}
  23.57%{transform:translate(767.3px,619.2px) rotate(-2.03deg)}
  28.28%{transform:translate(844.7px,616.4px) rotate(-2.07deg)}
  33.00%{transform:translate(922.2px,613.6px) rotate(-2.08deg)}
  37.71%{transform:translate(999.6px,610.8px) rotate(-2.09deg)}
  42.42%{transform:translate(1077.1px,608.0px) rotate(-2.09deg)}
  47.14%{transform:translate(1154.5px,605.2px) rotate(-2.08deg)}
  51.85%{transform:translate(1232.0px,602.4px) rotate(-2.06deg)}
  100.00%{transform:translate(1232.0px,602.4px) rotate(-2.06deg)}
}
/* phone streak 11: the part of line 12 that crosses a phone screen, one 9.5s pass in every 13.5s cycle */
@keyframes alwynPhone11{
  0.00%{transform:translate(380.0px,658.7px) rotate(2.95deg);opacity:0.00}
  7.04%{transform:translate(458.3px,662.9px) rotate(3.26deg);opacity:0.33}
  14.07%{transform:translate(536.5px,667.5px) rotate(3.52deg);opacity:0.65}
  21.11%{transform:translate(614.8px,672.5px) rotate(3.75deg);opacity:0.98}
  28.15%{transform:translate(693.0px,677.8px) rotate(3.94deg);opacity:1}
  35.19%{transform:translate(771.2px,683.3px) rotate(4.09deg)}
  42.22%{transform:translate(849.3px,689.0px) rotate(4.21deg)}
  49.26%{transform:translate(927.5px,694.8px) rotate(4.29deg)}
  56.30%{transform:translate(1005.7px,700.7px) rotate(4.34deg)}
  63.33%{transform:translate(1083.8px,706.6px) rotate(4.37deg)}
  70.37%{transform:translate(1162.0px,712.6px) rotate(4.38deg)}
  100.00%{transform:translate(1162.0px,712.6px) rotate(4.38deg)}
}
/* phone streak 13: the part of line 14 that crosses a phone screen, one 8s pass in every 13.5s cycle */
@keyframes alwynPhone13{
  0.00%{transform:translate(380.0px,685.1px) rotate(8.67deg);opacity:0.00}
  5.93%{transform:translate(461.4px,698.1px) rotate(9.44deg);opacity:0.34}
  11.85%{transform:translate(542.7px,712.1px) rotate(10.08deg);opacity:0.68}
  17.78%{transform:translate(623.9px,726.9px) rotate(10.59deg);opacity:1}
  23.70%{transform:translate(704.9px,742.3px) rotate(10.98deg)}
  29.63%{transform:translate(785.8px,758.3px) rotate(11.25deg)}
  35.56%{transform:translate(866.7px,774.5px) rotate(11.43deg)}
  41.48%{transform:translate(947.5px,790.9px) rotate(11.52deg)}
  47.41%{transform:translate(1028.3px,807.4px) rotate(11.52deg)}
  53.33%{transform:translate(1109.1px,823.8px) rotate(11.46deg)}
  59.26%{transform:translate(1190.0px,840.1px) rotate(11.33deg)}
  100.00%{transform:translate(1190.0px,840.1px) rotate(11.33deg)}
}