/* PliumPic landing — shared base styles (all variants).
   Variant-specific overrides live in variant-*.css. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-stack);
  background: var(--c-bg);
  color: var(--c-fg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden. overflow-x: hidden forces overflow-y to compute to auto, which makes
     body a scroll container - and WebKit will not sample a backdrop through one, so every
     glass surface on the page (the nav first of all) rendered flat opaque on iOS Safari
     while Chromium blurred it correctly. clip leaves overflow-y visible, so body stays a
     normal box and the clip propagates to the viewport instead. Nothing on the page
     actually overflows sideways - .bg-blobs and .hero clip their own - so this is only a
     guard; the hidden below it is the fallback for engines without clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.container {
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding-inline: max(var(--sp-5), env(safe-area-inset-left)) max(var(--sp-5), env(safe-area-inset-right));
}
main { display: block; }
section { position: relative; }
.section-pad { padding-block: var(--sp-9); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 200;
  background: var(--c-primary); color: #fff; padding: 10px 16px;
  border-radius: var(--r-md); font-weight: var(--fw-semibold);
  transition: top var(--dur-fast);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Typography ---------- */
.eyebrow {
  display: inline-block; font-size: 0.8125rem; font-weight: var(--fw-semibold);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-primary-text);
  margin-bottom: var(--sp-3);
}
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: var(--fw-bold); }
h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.1875rem; font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--c-muted); line-height: 1.55; }
.muted { color: var(--c-muted); }
.section-head { max-width: var(--content-narrow); margin-bottom: var(--sp-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.grad-text {
  background: var(--grad-brand-simple); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* ---------- Surfaces ---------- */
.glass {
  background: var(--c-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* ---------- Buttons / App Store badge ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 56px; padding-inline: var(--sp-6);
  background: var(--c-primary); color: #fff; font-weight: var(--fw-semibold);
  border-radius: var(--r-lg); box-shadow: var(--glow-primary);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast), filter var(--dur-fast);
}
.btn-primary:hover { box-shadow: var(--glow-primary-lg); filter: brightness(1.03); }
.btn-primary:active { transform: scale(0.97); }

.appstore {
  display: inline-flex; border-radius: 9px;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
  box-shadow: var(--shadow-soft);
}
.appstore:hover { box-shadow: var(--shadow-phone); }
.appstore:active { transform: scale(0.97); }
.appstore img { display: block; height: 54px; width: auto; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium);
  color: var(--c-primary-text);
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--dur-fast); }
.link-arrow:hover svg { transform: translateY(3px); }

.trust-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  font-size: 0.875rem; color: var(--c-muted); font-weight: var(--fw-medium);
}
.trust-line .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }

/* ---------- Nav ---------- */
.nav-wrap {
  position: sticky; top: 0; z-index: 100; padding-top: var(--sp-3);
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
}
.nav {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: var(--content-max); margin-inline: auto;
  padding: 10px 12px 10px 16px;
  background: var(--c-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--c-border); border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
}
.nav-brand { display: flex; align-items: center; gap: 9px; font-weight: var(--fw-bold); letter-spacing: -0.01em; font-size: 1.05rem; }
.nav-brand img { width: 28px; height: 28px; border-radius: 7px; }
.nav-links { display: flex; gap: var(--sp-5); margin-left: auto; }
.nav-links a { font-size: 0.925rem; font-weight: var(--fw-medium); color: var(--c-muted); transition: color var(--dur-fast); }
.nav-links a:hover { color: var(--c-fg); }
.nav-actions { display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-4); }
.nav-cta {
  display: inline-flex; align-items: center; height: 40px; padding-inline: 18px;
  background: var(--c-primary); color: #fff; font-weight: var(--fw-semibold); font-size: 0.9rem;
  border-radius: var(--r-pill); box-shadow: var(--glow-primary);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.nav-cta:active { transform: scale(0.96); }
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-actions { margin-left: auto; }
}

/* Theme toggle */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--c-input); border: 0.5px solid var(--c-border);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun,
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-spring), transform 0.6s var(--ease-spring); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.06s; }
.reveal[data-delay="2"] { transition-delay: 0.12s; }
.reveal[data-delay="3"] { transition-delay: 0.18s; }
.reveal[data-delay="4"] { transition-delay: 0.24s; }
.reveal[data-delay="5"] { transition-delay: 0.30s; }
/* No JS / observer unavailable: show everything */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
/* No overflow clip here. The phone's drop shadow is 0 30px 80px, so it needs ~70px below the
   frame, and the hero only leaves it var(--sp-6) on a phone - the clip cut the shadow dead and
   drew a hard horizontal line across the full width where the hero ended. The clip was only
   ever a guard against the 3D-rotated phone, which turns out not to need one: the rotation is
   switched off below 900px, phone-bob only translates vertically, and nothing inside the hero
   reaches the viewport edge at any width (measured 320-1425). body's overflow-x: clip is the
   backstop if that ever changes. */
.hero { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7);
  align-items: center;
}
.hero-copy { max-width: 560px; }
.hero h1 { margin-bottom: var(--sp-4); }
.hero .lead { margin-bottom: var(--sp-6); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.hero-visual { display: grid; place-items: center; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero-copy { max-width: none; }
  .hero-visual { order: 2; }
}

/* ---------- Problem strip ---------- */
.problem { padding-block: var(--sp-7); }
.problem-inner { text-align: center; max-width: var(--content-narrow); margin-inline: auto; }
.problem h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: var(--sp-5); }
/* padding: 0 is load-bearing — the UA's 40px padding-inline-start on a <ul> offsets the
   centred row by half of it, putting the pills 20px right of the heading above them. */
.problem-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); padding: 0; }
.problem-list li {
  list-style: none; font-size: 0.925rem; color: var(--c-muted); font-weight: var(--fw-medium);
  padding: 8px 16px; border: 0.5px solid var(--c-border); border-radius: var(--r-pill);
}

/* ---------- How it works ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.step { padding: var(--sp-5); }
.step .step-num {
  font-size: 0.8rem; font-weight: var(--fw-bold); color: var(--c-primary-text);
  letter-spacing: 0.08em;
}
.step .step-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center; margin: var(--sp-3) 0 var(--sp-4);
  background: color-mix(in srgb, var(--c-primary) 15%, transparent);
  color: var(--c-primary);
}
.step .step-icon svg { width: 26px; height: 26px; }
.step h3 { margin-bottom: 6px; }
.step p { color: var(--c-muted); font-size: 0.95rem; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Features ---------- */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.feature { padding: var(--sp-5); }
.feature .f-icon {
  width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
  margin-bottom: var(--sp-4);
}
.feature .f-icon svg { width: 24px; height: 24px; }
.feature h3 { margin-bottom: 6px; }
.feature p { color: var(--c-muted); font-size: 0.925rem; }
.ic-blue { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; }
.ic-green { background: color-mix(in srgb, var(--c-success) 15%, transparent); color: var(--c-success); }
.ic-amber { background: color-mix(in srgb, var(--c-amber) 15%, transparent); color: var(--c-amber); }
.ic-teal { background: color-mix(in srgb, #14b8a6 15%, transparent); color: #14b8a6; }
.ic-purple { background: color-mix(in srgb, #a855f7 15%, transparent); color: #a855f7; }
.ic-orange { background: color-mix(in srgb, var(--c-orange) 15%, transparent); color: var(--c-orange); }
@media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .features-grid { grid-template-columns: 1fr; } }

/* ---------- Use cases ---------- */
.usecases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.usecase {
  padding: var(--sp-5); min-height: 172px; display: flex; flex-direction: column;
  justify-content: flex-end; position: relative; overflow: hidden;
  border-radius: var(--r-xl);
}
.usecase .uc-emoji { font-size: 1.7rem; margin-bottom: auto; }
.usecase h3 { margin-bottom: 4px; }
.usecase p { color: var(--c-muted); font-size: 0.875rem; }
@media (max-width: 900px) { .usecases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .usecases-grid { grid-template-columns: 1fr; } }

/* ---------- "The real thing" strip — live CSS mockups in phone frames ---------- */
.shots {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: var(--sp-5);
}
.shot { flex: none; text-align: center; width: min(100%, 300px); }
.shot-frame {
  border-radius: 34px; padding: 8px; background: var(--c-card-solid);
  border: 0.5px solid var(--c-border); box-shadow: var(--shadow-soft);
  aspect-ratio: 9 / 19.5; overflow: hidden; margin-bottom: var(--sp-3);
  display: flex; flex-direction: column;
}
/* Same 284px design width as the hero phone, so all pm-* sizes carry over 1:1.

   The screen takes its height from this flex parent, NOT from height: 100%. WebKit will not
   resolve a percentage height against a parent whose height came from aspect-ratio, so there
   the screen fell back to its own content height - 662px inside a 650px frame - and the
   frame's overflow: hidden sliced off the home bar and the bottom of the tab bar, leaving the
   bar sitting on the frame edge. Chromium does resolve it, which is why this only ever showed
   up in Safari. flex: 1 is sized by the flex algorithm, which both engines agree on;
   min-height: 0 is load-bearing, because this is itself a flex column and its automatic
   minimum size would otherwise refuse to shrink below its content. */
.shot-screen {
  position: relative; width: 100%; flex: 1; min-height: 0; border-radius: 26px; overflow: hidden;
  background: var(--c-bg); color: var(--c-fg); text-align: left;
  display: flex; flex-direction: column;
}
.shot-cap { font-size: 0.9rem; color: var(--c-muted); font-weight: var(--fw-medium); }

/* ---------- Privacy ---------- */
.privacy-panel {
  padding: var(--sp-8); border-radius: var(--r-xxl);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); align-items: center;
  background: var(--c-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--c-border);
}
.privacy-panel h2 { margin-bottom: var(--sp-4); }
.privacy-panel p { color: var(--c-muted); margin-bottom: var(--sp-4); }
.privacy-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px;
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-success) 14%, transparent);
  color: color-mix(in srgb, var(--c-success) 70%, var(--c-fg));
  font-weight: var(--fw-semibold); font-size: 0.9rem;
}
.privacy-badge svg { width: 18px; height: 18px; }
/* device-to-device diagram — photos visibly arriving on the peer phone */
.p2p { display: grid; place-items: center; gap: var(--sp-5); }
.p2p-diagram { display: flex; align-items: center; gap: var(--sp-4); }
.p2p-device { display: grid; justify-items: center; gap: 10px; }
.p2p-phone {
  --p2p-w: 88px;
  width: var(--p2p-w); height: calc(var(--p2p-w) * 178 / 88);
  border-radius: 20px; padding: 6px;
  background: linear-gradient(160deg, #2a2a30, #101014);
  box-shadow: var(--shadow-card), inset 0 0 0 1.5px rgba(255,255,255,0.07);
}
.p2p-cards {
  height: 100%; border-radius: 14px; overflow: hidden;
  background: var(--c-bg);
  display: flex; flex-direction: column; gap: 4px; padding: 5px 4px;
}
.p2p-mini-card { position: relative; flex: 1; border-radius: 7px; overflow: hidden; }
.p2p-mini-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p2p-mini-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 62%);
}
.p2p-mini-pill {
  position: absolute; top: 4px; right: 4px; width: 14px; height: 5px;
  border-radius: var(--r-pill); background: rgba(0,0,0,0.5);
}
.p2p-mini-pill-active { background: var(--c-primary); }
.p2p-mini-name {
  position: absolute; left: 5px; bottom: 5px; width: 55%; height: 3px;
  border-radius: 2px; background: rgba(255,255,255,0.9);
}
.p2p-cards-arriving .p2p-mini-card { animation: p2p-arrive 7s ease-in-out infinite; }
.p2p-cards-arriving .p2p-mini-card:nth-child(2) { animation-delay: 0.7s; }
.p2p-cards-arriving .p2p-mini-card:nth-child(3) { animation-delay: 1.4s; }
.p2p-name { font-size: 0.78rem; font-weight: var(--fw-medium); color: var(--c-muted); }
.p2p-link { display: grid; justify-items: center; gap: 9px; padding-bottom: var(--sp-5); }
.p2p-lockchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-primary) 12%, transparent);
  color: var(--c-primary-text); font-size: 0.72rem; font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.p2p-lockchip svg { width: 11px; height: 11px; flex: none; }
.p2p-line {
  position: relative; width: 92px; height: 8px; display: block;
}
.p2p-line::before {
  content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 2px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--c-primary) 0 6px, transparent 6px 12px);
  opacity: 0.55;
  animation: p2p-flow 0.9s linear infinite;
}
.p2p-dot {
  position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary); box-shadow: 0 0 6px color-mix(in srgb, var(--c-primary) 60%, transparent);
  animation: p2p-travel 2.6s ease-in-out infinite;
}
.p2p-dot-2 {
  background: var(--c-orange); box-shadow: 0 0 6px color-mix(in srgb, var(--c-orange) 60%, transparent);
  animation: p2p-travel-back 2.6s ease-in-out infinite; animation-delay: 1.3s;
}
.p2p-sub { font-size: 0.7rem; font-weight: var(--fw-medium); color: var(--c-muted); }
.p2p-cloud {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.82rem; font-weight: var(--fw-medium); color: var(--c-muted);
}
.p2p-cloud-icon { position: relative; display: inline-block; opacity: 0.8; }
.p2p-cloud-icon svg { width: 22px; height: 22px; }
.p2p-cloud .p2p-cross { position: absolute; inset: 0; }
@keyframes p2p-arrive {
  0%, 6%   { opacity: 0; transform: scale(0.8); }
  16%      { opacity: 1; transform: scale(1); }
  82%      { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes p2p-flow { to { background-position: 12px 0; } }
@keyframes p2p-travel {
  0%   { transform: translateX(0); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(84px); opacity: 0; }
}
@keyframes p2p-travel-back {
  0%   { transform: translateX(84px); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@media (max-width: 820px) {
  .privacy-panel { grid-template-columns: minmax(0, 1fr); text-align: center; }
  /* Without this the single track is sized by the diagram's min-content and both rows —
     heading and paragraph included — render wider than the card they sit in. */
  .privacy-panel > * { min-width: 0; }
  .privacy-badge { justify-self: center; }
  .p2p { margin-top: var(--sp-4); }
}

/* Narrow phones: that min-content is 305px (88 + 88 + a nowrap "Encrypted" chip + gaps),
   wider than the card's content box, so scale the two phones with the viewport. The middle
   column is left alone — the chip is already wider than the line, so shrinking the line
   would buy nothing. */
@media (max-width: 560px) {
  .p2p-diagram { gap: var(--sp-2); }
  .p2p-phone { --p2p-w: clamp(58px, 19vw, 88px); }
  .p2p-link { padding-bottom: var(--sp-4); }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: var(--content-narrow); margin-inline: auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { padding: 4px 6px; }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); font-weight: var(--fw-medium); font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-plus {
  margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: color-mix(in srgb, var(--c-primary) 15%, transparent);
  color: var(--c-primary); transition: transform var(--dur-fast) var(--ease-spring);
}
.faq-item .faq-plus svg { width: 14px; height: 14px; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 var(--sp-4) var(--sp-4) var(--sp-4); color: var(--c-muted); font-size: 0.95rem; line-height: 1.6; }

/* ---------- Footer CTA + footer ---------- */
.cta-final { text-align: center; padding-block: var(--sp-9); }
.cta-final .reveal > img { width: 64px; height: 64px; border-radius: 15px; margin-inline: auto; margin-bottom: var(--sp-4); }
.cta-final h2 { margin-bottom: var(--sp-5); }
.cta-final .appstore { margin-inline: auto; }
footer { border-top: 0.5px solid var(--c-border); padding-block: var(--sp-6); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); justify-content: space-between; }
.footer-inner .foot-brand { display: flex; align-items: center; gap: 8px; font-weight: var(--fw-semibold); }
.footer-inner .foot-brand img { width: 22px; height: 22px; border-radius: 6px; }
.footer-meta { font-size: 0.85rem; color: var(--c-muted); }
.footer-links { display: flex; gap: var(--sp-4); font-size: 0.85rem; }
.footer-links a { color: var(--c-muted); }
.footer-links a:hover { color: var(--c-fg); }
.footer-legal { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 0.5px solid var(--c-hairline); }
.footer-legal-title { font-size: 0.85rem; font-weight: var(--fw-semibold); margin-bottom: var(--sp-2); }
.footer-legal-body { font-style: normal; font-size: 0.8rem; line-height: 1.7; color: var(--c-muted); }
.footer-legal-body + .footer-legal-body { margin-top: var(--sp-2); }
.footer-legal-body a { color: var(--c-muted); }
.footer-legal-body a:hover { color: var(--c-fg); }

/* ---------- A/B/C variant switcher (removed in finalize) ---------- */
.variant-switch {
  position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: 150;
  display: flex; gap: 4px; padding: 5px;
  background: var(--c-card); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--c-border); border-radius: var(--r-pill); box-shadow: var(--shadow-soft);
  font-size: 0.8rem;
}
.variant-switch span { align-self: center; padding-left: 6px; color: var(--c-muted); font-weight: var(--fw-semibold); }
.variant-switch a {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: var(--fw-semibold); color: var(--c-muted);
}
.variant-switch a.active { background: var(--c-primary); color: #fff; }

/* =====================================================================
   PHONE MOCKUP (shared markup lives per-variant between
   <!-- phone-mockup:start --> / <!-- phone-mockup:end -->)
   ===================================================================== */
.phone {
  --pm-w: 300px;
  width: var(--pm-w); aspect-ratio: 300 / 642; position: relative;
  border-radius: 46px; padding: 10px;
  background: linear-gradient(160deg, #2a2a30, #101014);
  box-shadow: var(--shadow-phone), inset 0 0 0 2px rgba(255,255,255,0.06);
  display: flex; flex-direction: column;
}
/* Sized by the flex parent for the same reason as .shot-screen - see the note there. This one
   never clipped, because .phone has no overflow: hidden, so the frame simply grew to fit:
   682px in WebKit against its designed 642px. */
.phone-screen {
  position: relative; width: 100%; flex: 1; min-height: 0; border-radius: 38px; overflow: hidden;
  background: var(--c-bg);
  color: var(--c-fg);
  display: flex; flex-direction: column;
}
/* Top chrome — transparent, content scrolls under the system bar (iOS 26 Liquid Glass) */
.pm-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px 4px; font-size: 11.5px; font-weight: var(--fw-semibold);
}
.pm-statusbar .pm-glyphs { display: flex; align-items: center; gap: 5px; }
.pm-statusbar svg { width: 15px; height: 12px; }

/* Header — inline nav bar row: blue title left, blue + button right, no bar fill.
   The "N active • N past" subtitle lives in the body (it scrolls with content in the app). */
.pm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 17px 17px 0;
}
.pm-header .pm-title {
  font-size: 20px; line-height: 1.05; font-weight: var(--fw-bold);
  letter-spacing: -0.02em; color: var(--c-primary);
}
.pm-subtitle { flex: none; font-size: 11px; color: var(--c-muted); margin: 2px 0 8px; }
.pm-add {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-primary); color: #fff; display: grid; place-items: center;
  box-shadow: 0 2px 6px rgba(56,189,248,0.35);
}
.pm-add svg { width: 13px; height: 13px; }

.pm-body { flex: 1; padding: 0 17px; display: flex; flex-direction: column; overflow: hidden; }

/* Connection status card <-> "Sync complete" row (fixed-height slot, swaps at ~2/3 of the loop) */
.pm-statusarea { position: relative; flex: none; height: 68px; overflow: hidden; animation: pm-area 8s ease-in-out infinite; }
.pm-statuscard {
  position: absolute; left: 0; right: 0; top: 0;
  border-radius: 11px; padding: 11px 12px;
  background: var(--c-card); border: 0.5px solid var(--c-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 7px;
  animation: pm-card-out 8s ease-in-out infinite;
}
.pm-statuscard-head { display: flex; align-items: center; gap: 6px; }
.pm-antenna { width: 12px; height: 12px; color: var(--c-success); flex: none; animation: pm-antenna 8s ease-in-out infinite; }
.pm-statuscard-title {
  flex: 1; font-size: 11.5px; font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-avatars { display: flex; flex: none; }
.pm-avatars .pm-av {
  width: 17px; height: 17px; border-radius: 50%; margin-left: -6px;
  border: 1.5px solid var(--c-bg); display: grid; place-items: center;
  color: #fff; font-size: 8px; font-weight: var(--fw-bold);
}
.pm-avatars .pm-av:first-child { margin-left: 0; }

/* The two stand-in participants across every mockup: Anna and Lea. These exist as classes rather
   than as style="background:var(--avatar-1)" so that the published CSP needs no 'unsafe-inline' in
   style-src - a hash cannot cover a style ATTRIBUTE, only a <style> element, so inline styles are
   the one thing that would force the policy open. Scripts/Site/build-dist.sh fails the build if a
   style attribute reappears. */
.av-1 { background: var(--avatar-1); }
.av-5 { background: var(--avatar-5); }

/* Shifts a cover photo's crop upward so faces stay in frame in the short card tiles. */
.crop-high { object-position: 50% 30%; }
.pm-progress {
  flex: none; height: 3px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-fg) 10%, transparent); overflow: hidden;
}
.pm-progress .pm-progress-fill {
  height: 100%; width: 100%; border-radius: var(--r-pill); background: var(--c-primary);
  transform-origin: left; animation: pm-progress 8s var(--ease-spring) infinite;
}
.pm-statuscard-stats {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 8.8px; letter-spacing: -0.015em;
  color: var(--c-muted); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pm-pct { font-weight: var(--fw-semibold); color: var(--c-fg); }
.pm-speed { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pm-stats-right { flex: none; margin-left: auto; }
.pm-syncrow {
  position: absolute; left: 3px; right: 3px; top: 0;
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 11.5px; color: var(--c-fg);
  opacity: 0; animation: pm-row-in 8s ease-in-out infinite;
}
.pm-syncrow-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }

/* Section headers — uppercase, tracked, muted */
.pm-section {
  flex: none; margin: 13px 0 9px; padding: 0 3px;
  font-size: 9.6px; font-weight: var(--fw-medium); letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--c-muted);
}

/* Trip cards — adaptive 2-up grid of pure image tiles */
.pm-cardgrid { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pm-card { position: relative; height: 91px; border-radius: 11px; overflow: hidden; background: var(--c-input); }
.pm-card-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 62%);
}
.pm-pill {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  padding: 2px 6px; border-radius: var(--r-pill);
  color: #fff; font-size: 9px; font-weight: var(--fw-medium); line-height: 1.5;
}
.pm-pill-active { background: var(--c-primary); }
.pm-pill-past { background: rgba(0,0,0,0.55); }
.pm-card-info { position: absolute; left: 6px; right: 6px; bottom: 6px; color: #fff; z-index: 2; }
.pm-card-name {
  font-size: 11px; font-weight: var(--fw-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pm-card-loc {
  display: flex; align-items: center; gap: 2px; margin-top: 1px;
  font-size: 9.3px; color: rgba(255,255,255,0.9);
}
.pm-card-loc svg { width: 7px; height: 7px; flex: none; }

/* Native iOS 26 Liquid Glass tab bar — floating glass capsule, neutral platter under
   the selected item; unselected items are full-contrast fg (not muted), per the system bar */
.pm-tabbar {
  flex: none; height: 43px; margin: 8px 45px 4px; padding: 3px; border-radius: var(--r-pill);
  background: var(--c-card); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 0.5px solid var(--c-border); box-shadow: var(--shadow-card);
  display: flex;
}
.pm-tabbar .pm-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-radius: var(--r-pill); color: var(--c-fg);
}
.pm-tabbar .pm-tab svg { width: 17px; height: 17px; }
.pm-tabbar .pm-tab-label { font-size: 8.5px; font-weight: var(--fw-medium); }
.pm-tabbar .pm-tab.active { color: var(--c-primary); background: var(--c-platter); }
.pm-homebar {
  flex: none; width: 74px; height: 4px; border-radius: 2px; margin: 0 auto 7px;
  background: color-mix(in srgb, var(--c-fg) 28%, transparent);
}

/* Mockup keyframes — one shared 8s timeline: fill 8–62%, swap 62–76%, hold */
@keyframes pm-progress {
  0%, 8% { transform: scaleX(0.14); }
  62%    { transform: scaleX(1); }
  100%   { transform: scaleX(1); }
}
@keyframes pm-area {
  0%, 70%   { height: 68px; }
  80%, 100% { height: 23px; }
}
@keyframes pm-card-out { 0%, 62% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes pm-row-in   { 0%, 76% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes pm-antenna {
  0%, 8%  { opacity: 1; }
  15%     { opacity: 0.45; }
  22%     { opacity: 1; }
  29%     { opacity: 0.45; }
  36%     { opacity: 1; }
  43%     { opacity: 0.45; }
  50%, 100% { opacity: 1; }
}

/* Animated counters (percent 14 -> 100, transferred MB 18 -> 132). Degrade to the final values. */
@property --pm-pct { syntax: "<integer>"; inherits: false; initial-value: 100; }
@property --pm-mb  { syntax: "<integer>"; inherits: false; initial-value: 132; }
.pm-pct { animation: pm-pct 8s var(--ease-spring) infinite; counter-reset: pmpct var(--pm-pct); }
.pm-pct::after { content: counter(pmpct) "%"; }
.pm-mb { animation: pm-mb 8s var(--ease-spring) infinite; counter-reset: pmmb var(--pm-mb); }
.pm-mb::after { content: counter(pmmb) " MB"; }
@keyframes pm-pct { 0%, 8% { --pm-pct: 14; } 62%, 100% { --pm-pct: 100; } }
@keyframes pm-mb  { 0%, 8% { --pm-mb: 18; }  62%, 100% { --pm-mb: 132; } }

/* =====================================================================
   "The real thing" mockup screens (shared pieces reused from pm-*)
   ===================================================================== */

/* Static "All synced" row (Trips list at rest) */
.pm-syncrow-static {
  flex: none; display: flex; align-items: center; gap: 9px;
  padding: 8px 3px 2px; font-size: 11.5px; color: var(--c-fg);
}

/* Status bar variant overlaying a photo (Trip Detail ignores the top safe area) */
.pm-statusbar-overlay {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  color: #fff;
}

/* ---------- Trip Detail, syncing ---------- */
.td-hero { position: relative; flex: none; height: 163px; background: var(--c-input); }
.td-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent 38%, transparent 55%, rgba(0,0,0,0.7));
}
.td-topbar {
  position: absolute; top: 32px; left: 12px; right: 12px; z-index: 2;
  display: flex; justify-content: space-between;
}
.td-circle {
  width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.45);
  color: #fff; display: grid; place-items: center;
}
.td-circle svg { width: 12px; height: 12px; }
.td-titleblock { position: absolute; left: 12px; right: 12px; bottom: 9px; z-index: 2; color: #fff; }
.td-title { font-size: 15.2px; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.td-meta { display: flex; gap: 10px; margin-top: 3px; }
.td-meta-item {
  display: flex; align-items: center; gap: 3px;
  font-size: 9.6px; color: rgba(255,255,255,0.9);
}
.td-meta-item svg { width: 8px; height: 8px; flex: none; }

.td-body { flex: 1; position: relative; padding: 8px 17px 0; display: flex; flex-direction: column; overflow: hidden; }
/* Status card <-> "All synced" row — same swap as the hero, timed to the end of the loop */
.td-statusarea { position: relative; flex: none; height: 68px; overflow: hidden; animation: td-area 8s ease-in-out infinite; }
.td-statuscard { animation: td-card-out 8s ease-in-out infinite; }
.td-syncrow {
  position: absolute; left: 3px; right: 3px; top: 0;
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 11.5px; color: var(--c-fg);
  opacity: 0; animation: td-row-in 8s ease-in-out infinite;
}
.td-progress-fill { animation: td-progress 8s linear infinite; }
.td-pct { font-weight: var(--fw-semibold); color: var(--c-fg); }
.td-pct { animation: td-pct 8s linear infinite; counter-reset: tdpct var(--td-pct); }
.td-pct::after { content: counter(tdpct) "%"; }
.td-mb { animation: td-mb 8s linear infinite; counter-reset: tdmb var(--td-mb); }
.td-mb::after { content: counter(tdmb) " MB"; }

/* Owner filter chips + inline invite button, as on the real detail screen */
.td-filterrow { flex: none; display: flex; align-items: center; gap: 3px; margin-top: 6px; }
.td-chips {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
  padding: 3px 2px; overflow: hidden;
  background: var(--c-card); border: 0.5px solid var(--c-border);
  border-radius: 14px; box-shadow: var(--shadow-card);
}
.td-chip {
  flex: none; display: flex; align-items: center; gap: 3px;
  padding: 5px 6px; border-radius: 8.5px;
  font-size: 10px; font-weight: var(--fw-medium); color: var(--c-fg);
  white-space: nowrap;
}
.td-chip-active { background: var(--c-primary); color: #fff; }
.td-chip-count { font-size: 8.5px; font-weight: var(--fw-medium); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.td-cnt-all  { animation: td-cnt-all 8s linear infinite; counter-reset: tdcall var(--cnt-all); }
.td-cnt-all::after  { content: counter(tdcall); }
.td-cnt-anna { animation: td-cnt-anna 8s linear infinite; counter-reset: tdcanna var(--cnt-anna); }
.td-cnt-anna::after { content: counter(tdcanna); }
.td-cnt-lea  { animation: td-cnt-lea 8s linear infinite; counter-reset: tdclea var(--cnt-lea); }
.td-cnt-lea::after  { content: counter(tdclea); }
.td-chip-active .td-chip-count { color: rgba(255,255,255,0.85); }
.td-chip-av {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 8px; font-weight: var(--fw-bold);
}

.td-grid { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.td-cell {
  position: relative; aspect-ratio: 1; border-radius: 8.5px; overflow: hidden;
  background: var(--c-input);
}
.td-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.td-badge {
  position: absolute; right: 4px; bottom: 4px; z-index: 2;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--c-success); color: #fff;
}
.td-badge-check { position: absolute; inset: 0; display: grid; place-items: center; }
.td-badge svg { width: 9px; height: 9px; }
.td-badge-av { display: grid; place-items: center; font-size: 8px; font-weight: var(--fw-bold); }
.td-fab {
  flex: none; width: 31px; height: 31px; border-radius: 50%;
  background: var(--c-primary); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(56,189,248,0.5);
}
.td-fab svg { width: 16px; height: 16px; }

/* Arriving photos pop into the end of the grid at 20 / 40 / 60 / 78% of the
   shared 8s loop — no placeholder tiles, the grid just grows. */
.td-arrive { opacity: 0; transform: scale(0.55); }
.td-a1 { animation: td-pop-1 8s ease-out infinite; }
.td-a2 { animation: td-pop-2 8s ease-out infinite; }
.td-a3 { animation: td-pop-3 8s ease-out infinite; }
.td-a4 { animation: td-pop-4 8s ease-out infinite; }
.td-a5 { animation: td-pop-5 8s ease-out infinite; }
.td-a6 { animation: td-pop-6 8s ease-out infinite; }
.td-a7 { animation: td-pop-7 8s ease-out infinite; }

@keyframes td-progress { 0%, 8% { transform: scaleX(0.12); } 84%, 100% { transform: scaleX(1); } }
@keyframes td-area     { 0%, 86% { height: 68px; } 92%, 100% { height: 23px; } }
@keyframes td-card-out { 0%, 84% { opacity: 1; } 89%, 100% { opacity: 0; } }
@keyframes td-row-in   { 0%, 89% { opacity: 0; } 94%, 100% { opacity: 1; } }
@property --td-pct { syntax: "<integer>"; inherits: false; initial-value: 100; }
@property --td-mb  { syntax: "<integer>"; inherits: false; initial-value: 88; }
@keyframes td-pct { 0%, 8% { --td-pct: 12; } 84%, 100% { --td-pct: 100; } }
@keyframes td-mb  { 0%, 8% { --td-mb: 10; }  84%, 100% { --td-mb: 88; } }
@property --cnt-all  { syntax: "<integer>"; inherits: false; initial-value: 9; }
@property --cnt-anna { syntax: "<integer>"; inherits: false; initial-value: 4; }
@property --cnt-lea  { syntax: "<integer>"; inherits: false; initial-value: 3; }
@keyframes td-cnt-all {
  0%, 13% { --cnt-all: 2; } 15%, 23% { --cnt-all: 3; } 25%, 33% { --cnt-all: 4; }
  35%, 43% { --cnt-all: 5; } 45%, 53% { --cnt-all: 6; } 55%, 63% { --cnt-all: 7; }
  65%, 73% { --cnt-all: 8; } 75%, 100% { --cnt-all: 9; }
}
@keyframes td-cnt-anna {
  0%, 13% { --cnt-anna: 0; } 15%, 33% { --cnt-anna: 1; } 35%, 53% { --cnt-anna: 2; }
  55%, 73% { --cnt-anna: 3; } 75%, 100% { --cnt-anna: 4; }
}
@keyframes td-cnt-lea {
  0%, 23% { --cnt-lea: 0; } 25%, 43% { --cnt-lea: 1; }
  45%, 63% { --cnt-lea: 2; } 65%, 100% { --cnt-lea: 3; }
}
@keyframes td-pop-1 {
  0%, 14%   { opacity: 0; transform: scale(0.55); }
  19%       { opacity: 1; transform: scale(1.05); }
  22%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes td-pop-2 {
  0%, 24%   { opacity: 0; transform: scale(0.55); }
  29%       { opacity: 1; transform: scale(1.05); }
  32%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes td-pop-3 {
  0%, 34%   { opacity: 0; transform: scale(0.55); }
  39%       { opacity: 1; transform: scale(1.05); }
  42%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes td-pop-5 {
  0%, 54%   { opacity: 0; transform: scale(0.55); }
  59%       { opacity: 1; transform: scale(1.05); }
  62%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes td-pop-6 {
  0%, 64%   { opacity: 0; transform: scale(0.55); }
  69%       { opacity: 1; transform: scale(1.05); }
  72%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes td-pop-7 {
  0%, 74%   { opacity: 0; transform: scale(0.55); }
  79%       { opacity: 1; transform: scale(1.05); }
  82%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes td-pop-4 {
  0%, 44%   { opacity: 0; transform: scale(0.55); }
  49%       { opacity: 1; transform: scale(1.05); }
  52%, 100% { opacity: 1; transform: scale(1); }
}

/* ---------- Share Trip sheet (invite by QR) ---------- */
.qr-grabber {
  flex: none; width: 36px; height: 4px; border-radius: 2px; margin: 8px auto 2px;
  background: color-mix(in srgb, var(--c-fg) 25%, transparent);
}
.qr-nav { flex: none; position: relative; display: flex; align-items: center; padding: 8px 14px 10px; }
.qr-done { position: relative; z-index: 1; font-size: 11.5px; font-weight: var(--fw-medium); }
.qr-navtitle {
  position: absolute; left: 0; right: 0; text-align: center;
  font-size: 11.5px; font-weight: var(--fw-semibold);
}
.qr-head { flex: none; text-align: center; margin-top: 10px; padding: 0 17px; }
.qr-trip { font-size: 15.2px; font-weight: var(--fw-semibold); }
.qr-date { font-size: 10.5px; color: var(--c-muted); margin-top: 3px; }
.qr-loc {
  display: flex; justify-content: center; align-items: center; gap: 3px;
  font-size: 10.5px; color: var(--c-muted); margin-top: 3px;
}
.qr-loc svg { width: 8px; height: 8px; flex: none; }
.qr-cardwrap { flex: none; position: relative; width: 200px; margin: 20px auto 0; }
.qr-glow {
  position: absolute; inset: -14px; border-radius: 24px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-primary) 38%, transparent), transparent);
  filter: blur(10px);
  animation: qr-glow 8s ease-in-out infinite;
}
/* The app renders the QR on an explicitly white card in both themes */
.qr-card {
  position: relative; background: #fff; border-radius: 11.5px; padding: 11px;
  border: 0.5px solid var(--c-border); box-shadow: var(--shadow-card);
}
.qr-card img { display: block; width: 100%; height: auto; }
.qr-hint {
  flex: none; max-width: 214px; margin: 16px auto 0; text-align: center;
  font-size: 10px; line-height: 1.5; color: var(--c-muted);
}
.qr-toast {
  position: absolute; left: 50%; bottom: 24px; transform: translate(-50%, 8px);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--c-card); border: 0.5px solid var(--c-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-card);
  font-size: 10.5px; font-weight: var(--fw-medium);
  opacity: 0; animation: qr-toast 8s ease-in-out infinite;
}
.qr-toast-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-success); }
@keyframes qr-glow { 0%, 100% { opacity: 0.55; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes qr-toast {
  0%, 58%   { opacity: 0; transform: translate(-50%, 8px); }
  66%, 88%  { opacity: 1; transform: translate(-50%, 0); }
  96%, 100% { opacity: 0; transform: translate(-50%, 0); }
}

/* =====================================================================
   Mobile density — phones only. Nothing wider than 768px is touched.

   The desktop rhythm hangs off --sp-9 (96px) of block padding per
   section. On a 390px-wide phone that is 192px of empty page between one
   section and the next — most of a screen, scrolled past with nothing in
   it — and the same generosity inside the privacy card leaves its
   content box too narrow to hold the card's own text.
   ===================================================================== */
@media (max-width: 768px) {
  /* Let the nav read as the floating pill it is instead of spanning the
     screen edge to edge. */
  .nav-wrap { padding-inline: max(var(--sp-3), env(safe-area-inset-left)) max(var(--sp-3), env(safe-area-inset-right)); }

  /* The pill floats clear of the top of the scrollport, and on a phone that strip lands
     directly under the iOS status bar - so whatever is scrolling past shows through it as a
     sliced-off photo or half a line of text jammed against the clock, and the bar reads as
     hanging off the screen edge. Nothing here is Safari-specific: Chromium paints the same
     strip, but on a desktop it sits under the browser chrome, where it looks deliberate.
     Frost the strip with the glass the pill already uses, faded out below it, so content
     dissolves into the background instead of being cut in half. z-index keeps the band
     behind the pill without depending on the pill's backdrop-filter for paint order. */
  .nav-wrap { padding-top: var(--sp-4); }
  .nav-wrap::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in srgb, var(--c-bg) 86%, transparent);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    -webkit-mask-image: linear-gradient(#000 45%, transparent);
            mask-image: linear-gradient(#000 45%, transparent);
  }

  .section-pad { padding-block: var(--sp-6); }
  .section-head { margin-bottom: var(--sp-5); }
  .hero { padding-top: var(--sp-5); padding-bottom: var(--sp-6); }
  .hero-grid { gap: var(--sp-6); }
  .hero .lead { margin-bottom: var(--sp-5); }
  .problem { padding-block: var(--sp-5); }
  .problem h2 { margin-bottom: var(--sp-4); }
  .cta-final { padding-block: var(--sp-6); }
  .shots { gap: var(--sp-4); }
  .privacy-panel { padding: clamp(var(--sp-5), 6vw, var(--sp-6)); gap: var(--sp-6); }

  /* The sticky nav covers whatever an in-page link lands on. */
  main[id], main > section[id], #impressum { scroll-margin-top: 88px; }

  /* Centred headings orphan their last word at this measure. */
  .section-head h2, .problem h2, .privacy-panel h2, .cta-final h2 { text-wrap: balance; }
}

/* Screens too narrow for a 24px gutter to be worth its width — an iPad Split View
   pane goes down to 320pt, below anything an iPhone reports. */
@media (max-width: 360px) {
  .container {
    padding-inline: max(var(--sp-4), env(safe-area-inset-left)) max(var(--sp-4), env(safe-area-inset-right));
  }
  /* Below ~340px the wordmark, the toggle and the CTA stop clearing each other. */
  .nav { gap: var(--sp-2); padding-left: var(--sp-3); }
  .nav-cta { padding-inline: 14px; }
  /* The mockup's own width outgrows the gutters here. Its insides are fluid, so
     narrowing the frame reflows them rather than clipping anything. */
  .phone { --pm-w: min(300px, calc(100vw - 40px)); }
}

/* =====================================================================
   Reduced motion — freeze the mockup at the finished "Sync complete"
   state, kill all page motion.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .pm-progress-fill { transform: scaleX(1); }
  .pm-statusarea { height: 23px; }
  .pm-statuscard { opacity: 0; }
  .pm-syncrow { opacity: 1; }
  .pm-antenna { opacity: 1; }
  .pm-pct { --pm-pct: 100; }
  .pm-mb { --pm-mb: 132; }
  .p2p-dot { display: none; }
  .p2p-cards-arriving .p2p-mini-card { opacity: 1; transform: none; }
  .td-statusarea { height: 23px; }
  .td-syncrow { opacity: 1; }
  .td-progress-fill { transform: scaleX(1); }
  .td-pct { --td-pct: 100; }
  .td-mb { --td-mb: 88; }
  .td-cnt-all { --cnt-all: 9; }
  .td-cnt-anna { --cnt-anna: 4; }
  .td-cnt-lea { --cnt-lea: 3; }
  .td-arrive { opacity: 1; transform: none; }
  .qr-glow { opacity: 0.7; transform: none; }
  .qr-toast { opacity: 0; }
}