/*
  myreps.net — the app's design system on the web.

  Colours are copied from `palette`, `surfaces` and `navGlass` in src/constants/myreps.ts and
  `npm run site-tokens` fails when the two drift. This file is the only styling the site has:
  the CSP in _headers allows no inline styles and no scripts, so every carousel, accordion and
  reveal below is plain CSS and HTML.
*/

@font-face {
  font-family: Geist;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/geist-regular.woff2') format('woff2');
}
@font-face {
  font-family: Geist;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/geist-medium.woff2') format('woff2');
}
@font-face {
  font-family: Geist;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/geist-semibold.woff2') format('woff2');
}
@font-face {
  font-family: Geist;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/geist-bold.woff2') format('woff2');
}
@font-face {
  font-family: Geist;
  font-weight: 900;
  font-display: swap;
  src: url('/fonts/geist-black.woff2') format('woff2');
}

:root {
  color-scheme: dark;

  --background: #15171a;
  --surface: #24272c;
  --surface-raised: #2e2e30;
  --card-top: #3a3f47;
  --divider: #404045;
  --text: #ffffff;
  --text-secondary: #8e8e93;
  --accent: #b0d10c;
  --danger: #ff4b4b;
  --gold: #f5a624;
  --info: #4587f5;
  --ring-track: #2a2d32;
  --nav-fill: #11161c;
  --ink: #15171a;

  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Wide enough that a big desktop window is not mostly margin (Scott, 2026-09-17). */
  --content: 92rem;
  --edge: max(var(--gutter), calc((100vw - var(--content)) / 2));
  --phone-w: clamp(11.5rem, 16.5vw, 12.4rem);
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font:
    400 1rem/1.6 Geist,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* The mood: one lime ember high on the right, and the corners falling to black. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60rem 38rem at 85% -8%, rgb(176 209 12 / 0.13), transparent 62%),
    radial-gradient(90rem 60rem at 50% 120%, rgb(0 0 0 / 0.55), transparent 60%),
    radial-gradient(70rem 50rem at -10% 30%, rgb(0 0 0 / 0.4), transparent 65%);
  pointer-events: none;
}

/* `hidden` must win over any display rule below: carousel.js relies on it for the arrows. */
[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
}

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

/* ---------- Navigation: the app's Liquid Glass bar, across the top ---------- */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.75rem var(--edge);
  background: rgb(17 22 28 / 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: 4.25rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  transition: color 160ms ease-out;
  color: rgb(255 255 255 / 0.62);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--text);
}

/* Support's children. Opens on hover and on keyboard focus; no script involved. */
.has-menu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: -0.75rem;
  min-width: 15rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 0.7);
  opacity: 0;
  visibility: hidden;
  translate: 0 0.25rem;
  transition:
    opacity 160ms ease-out,
    translate 160ms ease-out,
    visibility 160ms;
}

.has-menu:hover .submenu,
.has-menu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  translate: 0 0.5rem;
}

.submenu a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
}

.submenu a:hover {
  background: var(--surface-raised);
}

/* On a phone the links stay, smaller, beside the logo. Support's children live on /support. */
@media (max-width: 46rem) {
  .nav {
    gap: 0.9rem;
  }

  .brand img {
    width: 3.1rem;
  }

  .nav-links {
    gap: clamp(0.5rem, 2.6vw, 0.9rem);
  }

  .nav-links a {
    font-size: clamp(0.72rem, 3.3vw, 0.85rem);
  }

  .submenu {
    display: none;
  }
}

/* ---------- Type ---------- */

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

h1 {
  margin-top: 1rem;
  font-size: clamp(3rem, 7.2vw, 6rem);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.035em;
}

h2 {
  margin-top: 0.6rem;
  font-size: clamp(1.1rem, 4.9vw, 3.6rem);
  white-space: nowrap;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.lede {
  max-width: 44rem;
  margin: 0.6rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(0.78rem, 3.4vw, 1.1rem);
  white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2rem;
  align-items: center;
  padding: clamp(3rem, 8vw, 6.5rem) var(--edge) 0;
  overflow: hidden;
}

.hero-copy {
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

/*
  The hero is a product shot built from real captures: a front phone, a second phone turned away
  behind it, and the watch on its strap in front. Depth comes from the layering, the turned phone
  and the contact shadows, not from a filter.
*/
.hero-devices {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 1rem 0 clamp(2.5rem, 6vw, 5rem);
}

.iphone {
  position: relative;
  width: clamp(12.5rem, 19vw, 16rem);
  padding: 3px;
  border-radius: 2.75rem;
  background: linear-gradient(180deg, #9aa1ac 0%, #4a4f58 20%, #2c2f35 100%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.2),
    0 3.5rem 4.5rem -2rem #000000,
    0 0 6rem rgb(176 209 12 / 0.12);
}

/* Side buttons: volume on the left, power on the right. */
.iphone::before,
.iphone::after {
  content: '';
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #7b828d, #2a2d33);
}

.iphone::before {
  left: -3px;
  top: 24%;
  height: 11%;
  box-shadow: 0 5.5rem 0 0 #4a4f58;
}

.iphone::after {
  right: -3px;
  top: 30%;
  height: 15%;
}

.glass {
  padding: 0.42rem;
  border-radius: 2.6rem;
  background: #000000;
}

.glass img {
  width: 100%;
  border-radius: 2.2rem;
  filter: brightness(1.14) contrast(1.06) saturate(1.12);
}

.iphone-front {
  z-index: 2;
}

.iphone-back {
  position: absolute;
  z-index: 1;
  top: 7%;
  left: 50%;
  margin-left: clamp(0.5rem, 3vw, 2.5rem);
  transform: perspective(1500px) rotateY(-32deg) rotateZ(1.5deg) scale(0.92);
  transform-origin: left center;
  filter: brightness(0.82);
}

.wrist {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: clamp(8rem, 12.5vw, 10.6rem);
  margin-left: clamp(-18.75rem, -22.5vw, -14rem);
  transform: perspective(1100px) rotateY(16deg) rotateZ(-3deg);
  /* A hairline rim first, then the contact shadow: the rim is what separates strap from page. */
  filter: drop-shadow(0 0 1px rgb(255 255 255 / 0.55)) drop-shadow(0 2rem 1.75rem rgb(0 0 0 / 0.75));
}

.wrist::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18% -40%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.16), transparent 100%);
}

.strap {
  width: 74%;
  height: clamp(3.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #2a2d33 0%, #5a606a 50%, #2a2d33 100%);
}

.strap-top {
  margin-bottom: -0.9rem;
  border-radius: 1.4rem 1.4rem 0 0;
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

.strap-bottom {
  margin-top: -0.9rem;
  border-radius: 0 0 1.4rem 1.4rem;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  background:
    radial-gradient(circle at 50% 38%, #000000 0 0.2rem, transparent 0.22rem),
    radial-gradient(circle at 50% 62%, #000000 0 0.2rem, transparent 0.22rem),
    radial-gradient(circle at 50% 86%, #000000 0 0.2rem, transparent 0.22rem),
    linear-gradient(90deg, #2a2d33 0%, #5a606a 50%, #2a2d33 100%);
}

.watch-case {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0.4rem;
  border-radius: 28%/24%;
  background: linear-gradient(180deg, #8f96a1 0%, #4a4f58 25%, #2c2f35 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.24);
}

.watch-case img {
  width: 100%;
  border-radius: 25%/21%;
  background: #000000;
}

/* Digital Crown and the side button. */
.watch-case::before,
.watch-case::after {
  content: '';
  position: absolute;
  right: -0.4rem;
  width: 0.45rem;
  background: linear-gradient(90deg, #2a2d33, #6d747f);
}

.watch-case::before {
  top: 24%;
  height: 17%;
  border-radius: 0.2rem;
}

.watch-case::after {
  top: 52%;
  height: 22%;
  width: 0.28rem;
  right: -0.25rem;
  border-radius: 0.15rem;
}

@media (max-width: 58rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-copy {
    padding-bottom: 1rem;
  }

  .hero-devices {
    padding-bottom: 1rem;
  }

  /*
    On a phone the whole product shot has to be on screen as the page lands (Scott, 2026-09-17),
    so the devices are sized from the HEIGHT left under the copy: --pw is the phone's width, and
    its height is --pw / 0.46. Everything else in the trio is a fraction of --pw.
  */
  .hero {
    gap: 0.75rem;
    padding-top: 1.5rem;
  }

  .hero h1 {
    margin-top: 0;
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }

  .hero-copy {
    padding-bottom: 0;
  }

  .hero-cta {
    margin-top: 1.1rem;
  }

  .hero-devices {
    --pw: clamp(7.5rem, calc((100svh - 21.75rem) * 0.46), 11.25rem);

    padding: 0.5rem 0 1rem;
  }

  .iphone {
    width: var(--pw);
    border-radius: calc(var(--pw) * 0.17);
  }

  .glass {
    padding: calc(var(--pw) * 0.026);
    border-radius: calc(var(--pw) * 0.16);
  }

  .glass img {
    border-radius: calc(var(--pw) * 0.135);
  }

  .iphone-back {
    margin-left: 0;
  }

  .wrist {
    width: calc(var(--pw) * 0.64);
    margin-left: calc(var(--pw) * -1);
  }

  .strap {
    height: calc(var(--pw) * 0.3);
  }
}

/*
  The App Store button, in our colours. It carries its final wording now (Scott, 2026-09-17) and
  is not yet a link: when the listing exists the <span> becomes an <a href> and nothing else moves.
*/
.store {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.3rem 0.65rem 1rem;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #b0d10c, #8fae00);
  box-shadow: 0 0.75rem 2rem -0.75rem rgb(176 209 12 / 0.55);
  color: #ffffff;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition:
    filter 160ms ease-out,
    scale 160ms ease-out;
}

.store:hover {
  filter: brightness(1.06);
}

.store:active {
  scale: 0.97;
}

.store svg {
  width: 1.7rem;
  height: 1.7rem;
  color: #ffffff;
}

.store small {
  display: block;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 600;
}

.store strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- Feature sections and their rails ---------- */

.feature {
  padding: clamp(3.75rem, 8.25vw, 6.75rem) 0 0;
}

.feature-copy,
.block {
  padding-inline: var(--edge);
}

.carousel .feature-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 2rem;
  align-items: end;
}

.carousel .feature-copy > h2,
.carousel .feature-copy > .lede {
  grid-column: 1;
}

.carousel .feature-copy > .car-nav {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 46rem) {
  .carousel .feature-copy {
    grid-template-columns: minmax(0, 1fr);
  }
}

.block {
  padding-top: clamp(4rem, 9vw, 7.5rem);
}

/*
  A rail is a row of 4 to 7 screens that scrolls sideways and runs off the right edge, which
  is what tells a visitor there is more. `proximity`, not `mandatory`, so a flick can cross
  two cards.
*/
.stage {
  max-width: var(--content);
  margin: 1.75rem var(--edge) 0;
  padding: clamp(0.6rem, 1.2vw, 0.9rem) clamp(0.15rem, 0.6vw, 0.4rem);
  border: 1px solid rgb(255 255 255 / 0.07);
  border-radius: var(--radius-xl);
  /*
    A lit stage. The light is WHITE, not lime (Scott, 2026-09-17): every capture's own accent is
    lime, so a lime bloom behind them flattened their contrast. Lime stays on things that mean
    something; this is only lighting.
  */
  background:
    radial-gradient(52rem 20rem at 50% -12%, rgb(255 255 255 / 0.065), transparent 70%),
    linear-gradient(180deg, #26292f, #1a1d21);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
  overflow: hidden;
}

/* A row that fits hugs its screens: no empty floor to the right of the last one. A row that
   overflows is capped by the max-width above and scrolls, exactly as before. */
.carousel .stage {
  width: fit-content;
  max-width: min(var(--content), 100% - 2 * var(--edge));
}

.rail {
  display: flex;
  gap: clamp(2.25rem, 4vw, 3.25rem);
  margin: 0;
  /* Side room for a caption that overhangs its device; the snap point honours it too. */
  padding: 0.25rem 1.25rem 0.4rem;
  scroll-padding-inline: 1.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* The soft right edge; the rules beside the carousel controls add the left one once it moves. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 0.5rem), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 0.5rem), transparent 100%);
}

.rail > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* min-content: the device sets the column, so a long caption wraps instead of widening the gap. */
.rail figure {
  width: min-content;
  margin: 0;
}

/*
  One line, always (Scott, 2026-09-17). A caption wider than its device overhangs it equally on
  both sides: a centred flex item overflows symmetrically, where centred text would only run right.
*/
.rail figcaption {
  display: flex;
  justify-content: center;
  /* Zero intrinsic width, so a long caption cannot widen its column and push the row apart. */
  width: 0;
  min-width: 100%;
  margin-top: 0.85rem;
  color: var(--text);
  font-size: clamp(0.8rem, 1.5vw + 0.5rem, 1rem);
  font-weight: 600;
  white-space: nowrap;
}

.phone {
  width: var(--phone-w);
  padding: 0.4rem;
  border-radius: 1.8rem;
  /*
    Lit from straight above, so the left and right edges are the same weight. A diagonal light
    made every device look thicker on one side, which read as a drawing mistake.
  */
  background: linear-gradient(180deg, #8f96a1 0%, #4a4f58 22%, #2c2f35 100%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.22),
    0 2.5rem 3rem -1.25rem #000000;
}

.phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 660 / 1434;
  border-radius: 1.45rem;
  background: var(--background);
  object-fit: cover;
  object-position: top;
}

.phone img,
.watch img {
  filter: brightness(1.14) contrast(1.06) saturate(1.12);
}

.phone.is-short img {
  object-fit: contain;
}

.watch {
  width: clamp(7.5rem, 12vw, 9.4rem);
  padding: 0.35rem;
  border-radius: 27%/23%;
  /*
    Lit from straight above, so the left and right edges are the same weight. A diagonal light
    made every device look thicker on one side, which read as a drawing mistake.
  */
  background: linear-gradient(180deg, #8f96a1 0%, #4a4f58 22%, #2c2f35 100%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.22),
    0 2.5rem 3rem -1.25rem #000000;
}

.watch img {
  width: 100%;
  height: auto;
  aspect-ratio: 416 / 496;
  border-radius: 24.5%/20.5%;
  background: #000000;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 500;
}

.fineprint {
  max-width: 34rem;
  margin: 1rem 0 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ---------- Why myReps: five reasons, seen at once, never scrolled (Scott, 2026-09-17) ---------- */

.why-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin: 0;
  padding: 0 clamp(0.35rem, 0.8vw, 0.6rem);
  list-style: none;
}

.why-card {
  display: block;
  height: 100%;
  padding: 1rem 1rem 1.1rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
  color: inherit;
  text-decoration: none;
  transition:
    translate 200ms ease-out,
    background-color 200ms ease-out;
}

.why-card:hover {
  translate: 0 -3px;
  background-color: rgb(176 209 12 / 0.08);
}

.why-card svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
}

.why-card h3 {
  margin-top: 0.8rem;
  font-size: clamp(0.92rem, 1.35vw, 1.1rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.why-card p {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
  font-size: clamp(0.74rem, 1.05vw, 0.85rem);
  white-space: nowrap;
}

/* On a phone: five compact rows, icon beside the words, still one view. */
@media (max-width: 54rem) {
  .why-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }

  .why-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.85rem;
    align-items: center;
    padding: 0.6rem 0.85rem;
  }

  .why-card svg {
    grid-row: 1 / span 2;
    width: 1.6rem;
    height: 1.6rem;
  }

  .why-card h3 {
    margin-top: 0;
    font-size: 1rem;
  }

  .why-card p {
    margin-top: 0.05rem;
    font-size: 0.8rem;
  }
}

/* ---------- Carousel controls (revealed by carousel.js; the rail works without them) ---------- */

.carousel {
  position: relative;
}

.car-nav {
  display: flex;
  gap: 0.75rem;
}

.car-btn {
  display: grid;
  place-content: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
  transition:
    background-color 160ms ease-out,
    color 160ms ease-out,
    border-color 160ms ease-out,
    scale 160ms ease-out;
}

.car-btn:hover {
  background: var(--accent);
  color: var(--ink);
}

.car-btn:active {
  scale: 0.94;
}

.car-btn:disabled {
  border-color: var(--divider);
  color: var(--divider);
  background: none;
  cursor: default;
}

/*
  No hard edge where a row scrolls out of its wrapper, and no heavy one either: a short soft
  fade on the right while there is more to see, and on the left only once the row has moved.
*/
.carousel.is-moved .rail {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 0.5rem,
    #000 calc(100% - 0.5rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 0.5rem,
    #000 calc(100% - 0.5rem),
    transparent 100%
  );
}

.carousel.at-end .rail {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 0.5rem);
  mask-image: linear-gradient(to right, transparent 0, #000 0.5rem);
}

@media (max-width: 46rem) {
  .car-nav {
    display: none;
  }
}

/* ---------- The import demo: three real captures, played as one flow ---------- */

.stage.import-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 27rem);
  gap: 1rem 0.5rem;
  align-items: center;
  min-width: 0;
  /* The main event: its phones are a size up, and the wrapper hugs what it holds, so the words
     sit hard against the picture instead of drifting to the far side (Scott, 2026-09-17). */
  --phone-w: clamp(12rem, 18.5vw, 14rem);

  width: fit-content;
  max-width: calc(100% - 2 * var(--edge));
  padding: clamp(0.6rem, 1.2vw, 1rem) clamp(0.15rem, 0.8vw, 0.6rem);
}

@media (max-width: 54rem) {
  .stage.import-stage {
    --phone-w: calc((100vw - 2 * var(--gutter) - 3.25rem) / 2);

    grid-template-columns: minmax(0, 1fr);
    width: auto;
  }
}

/* One picture of the idea: your files, flowing into the phone. */
.import-visual {
  display: grid;
  justify-items: center;
  min-width: 0;
}

.sources {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(0.25rem, 1vw, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sources li {
  padding: 0.35em 0.75em;
  border: 1px solid rgb(176 209 12 / 0.45);
  border-radius: 999px;
  background: rgb(176 209 12 / 0.1);
  color: var(--text);
  font-size: clamp(0.66rem, 2.75vw, 0.9rem);
  font-weight: 600;
  white-space: nowrap;
}

.flow {
  position: relative;
  /* Lands on the first phone: the row's 2rem side padding plus half a phone. */
  justify-self: start;
  width: 2px;
  height: 1.6rem;
  margin: 0.3rem 0 0.7rem calc(clamp(0.5rem, 1.5vw, 1.25rem) + var(--phone-w) / 2);
  background: repeating-linear-gradient(to bottom, var(--accent) 0 6px, transparent 6px 12px);
  background-size: 100% 12px;
}

.flow::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.45rem;
  translate: -50% 0;
  border: 0.35rem solid transparent;
  border-top-color: var(--accent);
  border-bottom: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .flow {
    animation: flow 0.7s linear infinite;
  }
}

@keyframes flow {
  to {
    background-position-y: 12px;
  }
}

/* ---------- The import demo: three real captures, played as one flow ---------- */

.demo-wrap {
  display: flex;
  max-width: 100%;
  gap: clamp(0.75rem, 3vw, 2.5rem);
  padding: 0.25rem clamp(0.5rem, 1.5vw, 1.25rem) 0.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  align-items: flex-start;
}

.ways {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ways li {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 0.04);
}

.ways h3 {
  font-size: clamp(1rem, 4.4vw, 1.25rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.ways p {
  margin: 0.3rem 0 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/*
  On a phone the three ways are a slider, not a stack (Scott, 2026-09-17): one whole card per
  view, snapping into place, with three dots underneath saying there are more and which one this
  is. No card is ever cut off at the wrapper's edge.
*/
/* Position dots, shared by every slider on the page: the current one stretches into a lime pill. */
.dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 0 0.35rem;
}

.dots span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--divider);
  transition:
    background-color 200ms ease-out,
    width 200ms ease-out;
}

.dots span.is-on {
  width: 1.1rem;
  background: var(--accent);
}

.ways-dots {
  display: none;
}

@media (max-width: 54rem) {
  .ways {
    display: flex;
    gap: 0.6rem;
    margin-inline: clamp(0.35rem, 1.5vw, 0.6rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .ways li {
    flex: 0 0 100%;
    scroll-snap-align: center;
    padding: 0.7rem 0.9rem;
  }

  .ways p {
    font-size: clamp(0.74rem, 3.3vw, 0.88rem);
    white-space: nowrap;
  }

  .ways-dots {
    display: flex;
  }
}

.demo-wrap figure {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min-content;
  margin: 0;
}

.demo-wrap figcaption {
  position: relative;
  height: 1.5rem;
  margin-top: 0.85rem;
  line-height: 1.5rem;
  font-size: clamp(0.78rem, 1.5vw + 0.45rem, 1rem);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.demo-phone {
  position: relative;
}

.demo-step {
  position: absolute;
  inset: 0.4rem;
  width: auto;
  height: auto;
  overflow: hidden;
  border-radius: 1.45rem;
  opacity: 0;
}

.phone .demo-step img {
  border-radius: 0;
}

.phone img.demo-step {
  width: calc(100% - 0.8rem);
  height: auto;
  border-radius: 1.45rem;
}

/*
  The middle frame sits in the flow and gives the demo phone exactly the height every other phone
  has; the other two frames lie over it. With motion off, the demo rests on it, fully matched.
*/
.demo-step.demo-2 {
  position: relative;
  inset: auto;
}

.demo-2 {
  opacity: 1;
}

/* Each mask hides one "maps to" field of the capture until its turn. */
.mask {
  position: absolute;
  left: 45.5%;
  width: 52%;
  height: 6.3%;
  background: var(--background);
  opacity: 0;
}

.m1 {
  top: 26.2%;
}
.m2 {
  top: 31.85%;
}
.m3 {
  top: 37.5%;
}
.m4 {
  top: 43.15%;
}
.m5 {
  top: 48.8%;
}
.m6 {
  top: 54.45%;
}

.demo-cap {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.demo-cap.c2 {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .demo-1 {
    animation: demo-a 11s infinite;
  }
  .demo-2 {
    animation: demo-b 11s infinite;
  }
  .demo-3 {
    animation: demo-c 11s infinite;
  }
  .demo-cap.c1 {
    animation: demo-a 11s infinite;
  }
  .demo-cap.c2 {
    animation: demo-b 11s infinite;
  }
  .demo-cap.c3 {
    animation: demo-c 11s infinite;
  }
  .mask {
    animation: demo-mask 11s infinite;
  }
  .m2 {
    animation-delay: 0.45s;
  }
  .m3 {
    animation-delay: 0.9s;
  }
  .m4 {
    animation-delay: 1.35s;
  }
  .m5 {
    animation-delay: 1.8s;
  }
  .m6 {
    animation-delay: 2.25s;
  }
}

@keyframes demo-a {
  0%,
  18% {
    opacity: 1;
  }
  22%,
  96% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes demo-b {
  0%,
  18% {
    opacity: 0;
  }
  22%,
  68% {
    opacity: 1;
  }
  72%,
  100% {
    opacity: 0;
  }
}

@keyframes demo-c {
  0%,
  68% {
    opacity: 0;
  }
  72%,
  96% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes demo-mask {
  0%,
  27% {
    opacity: 1;
  }
  30%,
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ---------- FAQ ---------- */

.faq {
  max-width: 46rem;
  margin-top: 2rem;
}

.faq details {
  border-bottom: 1px solid var(--surface);
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: '+';
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}

.faq details[open] summary::after {
  content: '\2013';
}

.faq details p {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
}

/* ---------- Closing call and footer ---------- */

.closing {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding: clamp(3.75rem, 7.5vw, 6rem) var(--edge);
}

.closing h2 {
  margin: 0;
}

.closing-note span {
  white-space: nowrap;
}

.closing-note {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-secondary);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.75rem;
  align-items: center;
  padding: 1.75rem var(--edge) calc(1.75rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--surface);
  font-size: 0.9rem;
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.foot a {
  transition: color 160ms ease-out;
  color: var(--text-secondary);
  text-decoration: none;
}

.foot a:hover {
  color: var(--text);
}

.copy {
  margin: 0 0 0 auto;
  color: var(--text-secondary);
}

/* ---------- Document pages: privacy, terms, subscriptions, support, reset ---------- */

/* Left edge lines up with the logo and with every section on the homepage, not centred. */
.doc {
  max-width: min(46rem, 100% - 2 * var(--edge));
  margin: 0 auto 0 var(--edge);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 4rem;
}

.doc h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
}

.doc h2 {
  margin-top: 3rem;
  white-space: normal;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.doc h3 {
  margin-top: 1.75rem;
}

.doc p,
.doc li {
  color: rgb(255 255 255 / 0.8);
}

.doc li {
  margin-bottom: 0.4rem;
}

.doc .updated {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.doc .toc {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem 1.25rem 2.75rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  columns: 2 14rem;
  font-size: 0.92rem;
}

.doc .toc a {
  color: var(--text);
  text-decoration: none;
}

.doc .toc a:hover {
  color: var(--accent);
}

.notice {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  background: var(--surface);
}

.notice p {
  margin: 0.4rem 0;
}

.table-wrap {
  overflow-x: auto;
  margin-top: 1rem;
  border-radius: var(--radius-md);
  background: var(--surface);
}

table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

th,
td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--background);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--text-secondary);
  font-weight: 600;
}

td {
  color: rgb(255 255 255 / 0.8);
}

/*
  On a phone a table becomes a stack of cards: each row is one card, each cell carries its own
  column name. Nothing runs off the side, and nothing in a legal page is hidden behind a swipe.
*/
@media (max-width: 46rem) {
  .table-wrap.cards {
    overflow: visible;
    background: none;
  }

  .cards table {
    min-width: 0;
  }

  .cards thead {
    display: none;
  }

  .cards table,
  .cards tbody,
  .cards tr,
  .cards td {
    display: block;
  }

  .cards tr {
    margin-bottom: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .cards td {
    padding: 0;
    border: 0;
  }

  .cards td + td {
    margin-top: 0.6rem;
  }

  .cards td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.1rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
  }

  .cards td:first-child {
    color: var(--text);
    font-weight: 600;
  }
}

/* ---------- Motion: sections rise as they enter, only where the browser can and the visitor allows ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .stage {
      animation: rise linear both;
      animation-timeline: view();
      /* A length, not a percentage: a tall block would otherwise sit half-faded mid-screen. */
      animation-range: entry 0px entry 140px;
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 1.5rem;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}