/*
 * One stylesheet, no framework, and one typeface — served from this origin.
 *
 * No external requests of any kind: a page that loads nothing it did not write cannot leak the URL
 * fragment to a third party. That rule has not changed, and it is what rules out a font CDN: a
 * Google Fonts stylesheet would hand every visitor's request to a third party, and
 * scripts/check-fragment-privacy.js fails any page that loads one. The font files below sit in
 * public/fonts and are served from lumedrop.app like everything else here, so the guarantee holds.
 *
 * Plus Jakarta Sans, because the apps use it: the mark is circles and squares on a grid, so the type
 * is geometric enough to rhyme with it without being a Futura revival — the first attempt was Jost,
 * and its small x-height made prose read light and its period letterforms fought a product about
 * optics. Two Latin subsets covering the three languages this site is written in. SIL Open Font
 * License 1.1, alongside the files.
 */

/*
 * One variable file per subset, spanning the weights the page uses, so a heading and body text come
 * out of the same download. `swap` because the page must be readable before the font arrives — the
 * system stack below is a genuine fallback, not decoration.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;

  /*
   * One accent, both appearances — the same rule the apps follow.
   *
   * The site used a navy `--beam` for links and buttons while the apps had already moved to gold. Side by
   * side those are not one brand, they are two products, and the icon a visitor sees in the store is gold.
   *
   * Three gold tokens rather than one, for the same reason the apps separate readable text, control fill and
   * decorative light. In dark appearance the controls use #f2b21b while the brighter #ffc84a is reserved for
   * glow; asking either token to do both jobs is how a visual effect silently changes every button.
   */
  --ink: #1b1a17;
  --ink-soft: #6f6a5e;
  --paper: #fafaf7;
  --card: #fffdf8;
  --line: #e6e1d4;
  --beam: #795100;
  --beam-soft: #fdf3d8;
  --accent-fill: #e5a800;
  --glow: #e5a800;
  --glow-soft: #fff0bd;
  --glow-text: #795100;
  --on-accent: #2d1d00;
  --signal-surface: #172033;
  --signal-ink: #f8f5eb;
  --signal-accent: #ffe9a6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f4f1e8;
    --ink-soft: #b6af9e;
    --paper: #12110e;
    --card: #1d1b16;
    --line: #322e23;
    --beam: #fccb53;
    --beam-soft: #3a2a08;
    --accent-fill: #f2b21b;
    --glow: #ffc84a;
    --glow-soft: #4b3505;
    --glow-text: #fccb53;
    --on-accent: #2d1d00;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  color: var(--on-accent);
  background: var(--accent-fill);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
  transition: transform 120ms ease;
}

.skip-link:focus { transform: none; }


/* --- the mark, as a wordmark lockup ------------------------------------------ */
/*
   The mark is the same generated /icon.svg the favicon uses, not a hand-written copy inlined here. Inlining it
   would allow currentColor and a lattice that matches the page background, which is prettier — and would put a
   second copy of the droplet geometry in five HTML files, where it would drift from brand/mark.py the first time
   the shape changed. The self-contained brand tile is the honest trade.
*/
header.brand { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.25rem 0; }
.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /*
     Ink rather than the accent. The mark and controls are both gold, so using the accent for the wordmark would
     flatten the hierarchy inside a single lockup. Neutral type gives the name the same calm weight as the apps.
  */
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.lockup:hover span { text-decoration: underline; text-underline-offset: 3px; }
.lockup .mark { width: 1.6rem; height: 1.6rem; display: block; }

/* --- the light-beam motif: cells moving from a screen into a lens ------------ */
/* Brand is light, not lock (product brief §49). No padlocks anywhere on this site. */

.beam {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 2.5rem;
}

.beam .screen {
  width: 2.2rem;
  height: 1.6rem;
  border: 2px solid var(--ink);
  border-radius: 3px;
  flex: none;
}

.beam .cells {
  display: flex;
  gap: 0.25rem;
  flex: none;
}

.beam .cells i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 1px;
  background: var(--glow);
  display: block;
  animation: drift 1.8s ease-in-out infinite;
}

.beam .cells i:nth-child(2) { animation-delay: 0.15s; opacity: 0.8; }
.beam .cells i:nth-child(3) { animation-delay: 0.3s; opacity: 0.6; }
.beam .cells i:nth-child(4) { animation-delay: 0.45s; opacity: 0.4; }

.beam .lens {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  flex: none;
  position: relative;
}

.beam .lens::after {
  content: "";
  position: absolute;
  inset: 0.32rem;
  border-radius: 50%;
  background: var(--ink);
}

@keyframes drift {
  0%, 100% { transform: translateX(0); opacity: 0.25; }
  50% { transform: translateX(3px); opacity: 1; }
}

/* Animation explains a state change; it must not be decoration that ignores a preference. */
@media (prefers-reduced-motion: reduce) {
  .beam .cells i { animation: none; opacity: 0.7; }
}

h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
}

h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 0.75rem;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1rem;
  margin: 1.75rem 0 0.5rem;
}

.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin: 0 0 2rem;
}

p { margin: 0 0 1rem; }

a { color: var(--beam); text-decoration-thickness: 1px; text-underline-offset: 2px; }

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

.claims li {
  font-size: 0.875rem;
  color: var(--ink-soft);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  margin: 0 0 1.25rem;
}

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.store-buttons a {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  border-radius: 10px;
  background: var(--accent-fill);
  color: var(--on-accent);
  font-weight: 600;
  text-decoration: none;
}

.store-buttons a.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.9375rem;
}

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

th { font-weight: 600; width: 45%; }

td.never { color: var(--ink-soft); }

code {
  font: 0.875em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--beam-soft);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.875rem;
}

footer a { color: var(--ink-soft); }

.note {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--line);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* Focus must be visible: this site is keyboard-navigable like any other. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 2px;
}

@media (prefers-contrast: more) {
  :root { --line: var(--ink-soft); }
}

/* --- home ------------------------------------------------------------------- */

.home {
  /* A physical floor, not a text-relative one: at 200% text zoom 18rem becomes 576px and creates a horizontal
     page the user must pan. 288px preserves the intended oldest-phone floor without coupling it to type size. */
  min-width: 288px;
  background:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--glow) 9%, transparent) 0, transparent 28rem),
    var(--paper);
}

.site-header {
  position: relative;
  z-index: 10;
  padding: 1.25rem clamp(1.25rem, 4vw, 3rem);
}

.nav-shell {
  width: min(76rem, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-header .lockup,
.site-footer .lockup {
  font-size: 1.05rem;
  font-weight: 700;
}

.site-header nav,
.site-footer nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.site-header nav a,
.site-footer nav a {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
}

.site-header nav a:hover,
.site-footer nav a:hover { color: var(--ink); }

.site-header .nav-cta {
  color: var(--on-accent);
  background: var(--accent-fill);
  border-radius: 999px;
  padding: 0.65rem 1rem;
}

.site-header .nav-cta:hover { color: var(--on-accent); transform: translateY(-1px); }

@media (prefers-color-scheme: dark) {
  .site-header .nav-cta { color: var(--on-accent); }
  .site-header .nav-cta:hover { color: var(--on-accent); }
}

.home-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem) 7rem;
}

.hero,
.page-section,
.proof-strip,
.final-cta,
.site-footer {
  width: min(76rem, 100%);
  min-width: 0;
  margin-inline: auto;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(24rem, 0.98fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 7rem);
  padding: clamp(4.5rem, 9vw, 8rem) 0 5rem;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--glow-text);
  font-size: 0.75rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.home h1 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(3.2rem, 6.3vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.065em;
  font-weight: 700;
}

.home .lede {
  max-width: 38rem;
  margin: 1.7rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.55;
}

.home .store-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 2rem 0 0;
}

.home .store-buttons a {
  min-width: 11.75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.05rem;
  padding: 0.72rem 1.15rem 0.78rem;
  border: 1px solid var(--accent-fill);
  border-radius: 14px;
  background: var(--accent-fill);
  color: var(--on-accent);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--glow) 18%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.home .store-buttons a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--beam) 24%, transparent);
}

.home .store-buttons a small {
  font-size: 0.68rem;
  line-height: 1.1;
  opacity: 0.72;
}

.home .store-buttons a span { font-size: 0.98rem; line-height: 1.2; }

.home .store-buttons a.secondary {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
  box-shadow: 0 12px 32px rgb(23 32 51 / 6%);
}

@media (prefers-color-scheme: dark) {
  .home .store-buttons a:not(.secondary) { color: var(--on-accent); }
}

.availability {
  margin: 0.9rem 0 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.transfer-demo {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  min-height: 34rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 2rem;
  color: var(--signal-ink);
  background:
    radial-gradient(circle at 68% 28%, rgb(232 165 0 / 18%), transparent 13rem),
    var(--signal-surface);
  box-shadow: 0 36px 80px rgb(23 32 51 / 20%);
}

.transfer-demo::before {
  content: "";
  position: absolute;
  inset: auto -5rem -8rem auto;
  width: 20rem;
  height: 20rem;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 50%;
}

.demo-topline,
.demo-caption {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: rgb(248 245 235 / 62%);
}

.secure-pill {
  padding: 0.35rem 0.65rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 999px;
  color: var(--signal-accent);
  background: rgb(255 255 255 / 5%);
}

.device-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.65rem, 2vw, 1.15rem);
  margin: 4.25rem 0 3.5rem;
}

.mini-device {
  position: relative;
  height: 12.5rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 13%);
  border-radius: 1.35rem;
  background: rgb(255 255 255 / 5%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 5%);
}

.device-label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: rgb(248 245 235 / 48%);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.pixel-field {
  position: absolute;
  inset: 3.2rem 1.2rem 1.2rem;
  border-radius: 0.6rem;
  background:
    linear-gradient(90deg, transparent 47%, rgb(23 32 51 / 70%) 47% 53%, transparent 53%),
    linear-gradient(transparent 47%, rgb(23 32 51 / 70%) 47% 53%, transparent 53%),
    conic-gradient(from 45deg, #e8a500, #f6cf6d, #f8f5eb, #e8a500);
  background-size: 1.15rem 1.15rem, 1.15rem 1.15rem, 100% 100%;
}

.camera-device { display: grid; place-items: center; }

.camera-lens {
  width: 5rem;
  height: 5rem;
  border: 1rem solid rgb(255 255 255 / 10%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0 10%, #38435a 11% 36%, #0c111c 37% 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 12%), 0 0 3rem rgb(232 165 0 / 15%);
}

.light-path { display: flex; gap: 0.28rem; }

.light-path i {
  display: block;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 2px;
  background: var(--glow);
  animation: demo-pulse 1.5s ease-in-out infinite;
}

.light-path i:nth-child(2) { animation-delay: 100ms; }
.light-path i:nth-child(3) { animation-delay: 200ms; }
.light-path i:nth-child(4) { animation-delay: 300ms; }
.light-path i:nth-child(5) { animation-delay: 400ms; }

@keyframes demo-pulse {
  0%, 100% { opacity: 0.25; transform: translateX(-2px); }
  50% { opacity: 1; transform: translateX(2px); }
}

.demo-file {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 6%);
}

.file-icon {
  display: grid;
  place-items: center;
  width: 2.55rem;
  height: 2.85rem;
  border-radius: 0.45rem;
  color: var(--on-accent);
  background: var(--accent-fill);
  font-size: 0.62rem;
  font-weight: 700;
}

.file-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.file-copy strong { font-size: 0.95rem; }
.file-copy span { color: rgb(248 245 235 / 54%); font-size: 0.72rem; }
.file-check { color: var(--accent-fill); font-size: 1.2rem; }

.demo-progress {
  position: relative;
  z-index: 1;
  height: 0.35rem;
  margin: 1.35rem 0 0.65rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
}

.demo-progress span { display: block; width: 78%; height: 100%; border-radius: inherit; background: var(--accent-fill); }
.demo-caption strong { color: var(--signal-ink); }

.proof-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--card);
}

.proof-strip div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.5rem clamp(1rem, 3vw, 2rem);
  border-right: 1px solid var(--line);
}

.proof-strip div:last-child { border-right: 0; }
.proof-strip strong { color: var(--glow-text); font-size: 1.65rem; line-height: 1; }
.proof-strip span { color: var(--ink-soft); font-size: 0.78rem; }

.page-section { padding-top: clamp(6rem, 11vw, 10rem); }

.section-heading { max-width: 44rem; }

.home h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}

.section-heading > p:last-child,
.privacy-copy > p:not(.eyebrow),
.principle-grid article > p:last-child {
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 3rem;
}

.steps article,
.principle-grid article {
  min-height: 18rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--card);
}

.step-number {
  display: block;
  margin-bottom: 5rem;
  color: var(--glow-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.steps h3 { margin: 0 0 0.65rem; font-size: 1.25rem; }
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.93rem; }

.privacy-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.privacy-copy { position: sticky; top: 2rem; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.text-link span { color: var(--glow-text); }

.fact-list {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  background: var(--card);
}

.fact-list div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--line);
}

.fact-list div:last-child { border-bottom: 0; }
.fact-list dt { font-weight: 650; }
.fact-list dd { margin: 0; color: var(--ink-soft); text-align: right; }

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.principle-grid article { min-height: 22rem; display: flex; flex-direction: column; }
.principle-grid h2 { font-size: clamp(1.8rem, 2.7vw, 2.7rem); }
.principle-grid article > p:last-child { margin-top: auto; padding-top: 2rem; font-size: 0.92rem; }

.final-cta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  margin-top: clamp(6rem, 12vw, 11rem);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 2rem;
  color: var(--signal-ink);
  background: var(--signal-surface);
}

.final-cta h2 { max-width: 18ch; font-size: clamp(2rem, 4vw, 3.6rem); }
.final-cta a { flex: none; color: var(--signal-accent); font-weight: 700; text-decoration: none; }
.final-cta a span { margin-left: 0.4rem; }

.site-footer {
  max-width: 76rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 2.5rem 0 3rem;
  color: var(--ink-soft);
}

.site-footer p { margin: 0; text-align: center; }
.site-footer nav { justify-self: end; }

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
  .light-path i { animation: none; opacity: 0.7; }
  .home .store-buttons a { transition: none; }
}

@media (max-width: 880px) {
  .hero { grid-template-columns: 1fr; padding-top: 4rem; }
  .hero-copy { max-width: 42rem; }
  .transfer-demo { min-height: 31rem; }
  .proof-strip { grid-template-columns: repeat(2, 1fr); }
  .proof-strip div:nth-child(2) { border-right: 0; }
  .proof-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .steps, .principle-grid { grid-template-columns: 1fr; }
  .steps article, .principle-grid article { min-height: 0; }
  .step-number { margin-bottom: 3rem; }
  .principle-grid article > p:last-child { margin-top: 2rem; }
  .privacy-section { grid-template-columns: 1fr; }
  .privacy-copy { position: static; max-width: 42rem; }
}

@media (max-width: 620px) {
  /* The hero immediately supplies the same download action. Keeping a second CTA here creates horizontal panning
     at 200% text zoom, when the wordmark and button can no longer share a 390px header. */
  .site-header nav { display: none; }
  .site-header { padding-block: 1rem; }
  .home-main { padding-bottom: 4rem; }
  .home h1,
  .home h2,
  .home h3,
  .home p,
  .home dt,
  .home dd,
  .home strong,
  .home span { overflow-wrap: anywhere; }
  .hero { padding-top: 2.5rem; gap: 3rem; }
  .home h1 { font-size: clamp(3rem, 15vw, 4.2rem); }
  .home .store-buttons { flex-direction: column; }
  .home .store-buttons a { width: 100%; min-width: 0; }
  .transfer-demo { min-height: auto; border-radius: 1.5rem; }
  .demo-topline,
  .demo-file { align-items: flex-start; flex-direction: column; }
  .device-row { margin-block: 3rem 2.5rem; }
  .mini-device { height: 9.5rem; border-radius: 1rem; }
  .pixel-field { inset: 2.8rem 0.8rem 0.8rem; background-size: 0.85rem 0.85rem, 0.85rem 0.85rem, 100% 100%; }
  .camera-lens { width: 3.8rem; height: 3.8rem; border-width: 0.75rem; }
  .light-path { gap: 0.18rem; }
  .light-path i { width: 0.28rem; height: 0.28rem; }
  .proof-strip { grid-template-columns: 1fr; }
  .proof-strip div { padding: 1.25rem 1rem; }
  .proof-strip div,
  .proof-strip div:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-strip div:last-child { border-bottom: 0; }
  .page-section { padding-top: 6rem; }
  .privacy-section { gap: 2.5rem; }
  .fact-list div { gap: 1rem; padding-inline: 1rem; }
  .final-cta { align-items: flex-start; flex-direction: column; border-radius: 1.5rem; }
  .site-footer { grid-template-columns: 1fr; justify-items: start; padding-inline: 1.25rem; }
  .site-footer p { text-align: left; }
  .site-footer nav { justify-self: start; }
}

/* --- language switcher -------------------------------------------------------- */
/*
   Plain links, no JavaScript. The site's CSP forbids scripting by default and /r deliberately loads as little as
   it can, so the switcher has to work as markup — which also means it works when the browser's language guess
   would have been wrong, and for anyone who arrived on a link someone else sent them.
*/
.language-switcher {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  font-size: 0.85rem;
}
.language-switcher a { color: var(--ink-soft); }
.language-switcher [aria-current="true"] { color: var(--ink); font-weight: 600; }

/* --- questions ------------------------------------------------------------- */

.faq {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 1.15rem;
}

/* Open by default would be a wall of text; a marker that moves is the only affordance needed. */
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 1rem 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

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

.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--beam);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1;
}

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

.faq details p {
  margin: 0;
  padding: 0 0 1.15rem;
  color: var(--ink-soft);
  max-width: 62ch;
}

.faq summary:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 3px;
  border-radius: 6px;
}