:root {
  --bg: #FFFFFF;
  --bg-soft: #F6F6F5;
  --card: #FFFFFF;
  --text: #17181C;
  --text-2: #6B6E76;
  --border: #E7E7E5;
  --ink: #17181C;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* motion tokens */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-micro: 150ms;
  --dur-comp: 300ms;
  --dur-section: 560ms;
  interpolate-size: allow-keywords; /* enables height:auto transitions (FAQ open/close) */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); line-height: 1.6; font-size: 16px;
  -webkit-font-smoothing: antialiased; letter-spacing: -0.006em;
}
.amp { font-weight: 700; color: inherit; }

@keyframes pageup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* Above the fold: entrance on load */
  .hero { animation: pageup var(--dur-section) var(--ease-out) both; }
  main.page { animation: pageup var(--dur-section) var(--ease-out) both; }

  /* Below the fold: reveal as it scrolls into view (zero-JS, per-item stagger by row) */
  @supports (animation-timeline: view()) {
    .closing, .zrow {
      animation: pageup linear both;
      animation-timeline: view();
      /* complete during entry — elements near the page bottom can't reach a
         "cover %" (no scroll room left), which left them stuck invisible */
      animation-range: entry 0% entry 80%;
    }
  }
  /* Fallback for browsers without scroll timelines: gentle load fade */
  @supports not (animation-timeline: view()) {
    .zig { animation: pageup var(--dur-section) var(--ease-out) both; animation-delay: 120ms; }
  }
}

/* Top bar */
.bar {
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
}
.bar .wrap { max-width: 920px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 11px; }
.bar .logo { width: 30px; height: 30px; border-radius: 8px; }
.bar .brand { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
/* Icon and wordmark are one target back to the home page. */
.bar .home {
  display: flex; align-items: center; gap: 11px; flex: 1;
  color: inherit; text-decoration: none; border-radius: 10px;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.bar .home:hover { opacity: .68; }
.bar .home:focus, .bar .home:focus-visible { outline: none; }
.bar nav a { color: var(--text-2); text-decoration: none; margin-left: 20px; font-size: 14.5px; transition: color var(--dur-micro) var(--ease-out); }
.bar nav a:hover { color: var(--text); }
.bar nav a.active { color: var(--text); font-weight: 620; }

/* Hero */
.hero { max-width: 720px; margin: 0 auto; padding: 74px 24px 8px; text-align: center; }
.hero .app-icon { width: 92px; height: 92px; border-radius: 21px; margin-bottom: 26px; box-shadow: 0 12px 34px rgba(20,21,24,.20); }
/* Who this is for, right under the button: it answers "is this for me?" at the
   moment of the decision. Four chips, not a sentence — one grey line of names
   read as a disabled control (user 2026-08-04).
   Ink text on an ink hairline, not a filled black pill: the App Store badge is
   solid black and is the thing that must win here. */
.audience {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  /* No cap: at 540px the fourth chip dropped to a row of its own. The hero's
     own column is the only limit that should apply. */
  list-style: none; margin: 20px auto 0; padding: 0;
}
.audience li {
  margin: 0; padding: 7px 15px; white-space: nowrap;
  border: 1px solid rgba(23,24,28,.24); border-radius: 999px;
  font-size: 12.5px; font-weight: 640; line-height: 1.2;
  letter-spacing: .002em; color: var(--text);
}
h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.15rem); font-weight: 780; line-height: 1.06;
  letter-spacing: -0.03em; margin: 0 0 16px; text-wrap: balance;
}
/* One line, said once. Two stacked paragraphs plus an eyebrow read as a wall
   of text above the button, which is the last place to put one. */
.lede {
  font-size: clamp(1.14rem, 2.7vw, 1.36rem); font-weight: 560; line-height: 1.34;
  color: var(--text); max-width: 520px; margin: 0 auto 28px; text-wrap: balance;
}

/* App Store badge. Apple's marketing guidelines forbid animating the badge,
   so no hover or press transforms here. */
.store-badge {
  display: inline-block; line-height: 0; border-radius: 13px;
  transition: opacity var(--dur-micro) var(--ease-out);
}
.store-badge img { display: block; width: 168px; height: auto; }
.store-badge:hover { opacity: .86; }

/* Hero stage: the real iPhone frame with a live screenshot inside,
   the brand signature, initials, a round APPROVED seal, and floating
   currencies in light ink around it */
/* Breaks out of the hero's 720px text column: the decor needs room to sit
   BESIDE the phone, never on top of it. Anything left of the phone must end
   before its left edge, anything right of it must start after its right one. */
.stage {
  position: relative; left: 50%; translate: -50% 0;
  width: min(960px, calc(100vw - 40px)); max-width: none;
  margin: 46px 0 -2px; padding: 0 24px;
}
/* The art carries its own phone body and shadow, so no CSS chrome here.
   It is cropped so the phone and the sheet sit on the art box's own centre
   line (both measure 49.9–50.0%), which is why the box carries 16% of empty
   space down its left side: that mirrors how far the pen reaches out right.
   Centre the box and the composition is centred.

   The silhouette is still not a rectangle, and that is what the decor has to
   clear. Right edge as a percentage of the art box, in 5% slices of height:

      0–10%   73–75%   phone frame only
     10–25%    83.4%   invoice sheet
     25–35%    99.8%   the pen, at full reach
     35–45%  98→96%    |
     45–55%  94→91%    | pen tapering back in
     55–65%  89→86%    |
     65–90%    83.4%   sheet again
     90–100%   73–75%  phone frame only

   Left edge is 16.4% wherever the sheet is, 24–27% above and below it. */
.device { width: min(560px, 100%); margin: 0 auto; }
.device img, .device picture { display: block; width: 100%; height: auto; }
/* Six marks on a ring around the art: seal at the top right, euro out past the
   pen at the sheet's midline, initials below it, then dollar, signature and
   pound back up the left side. */
.dec { position: absolute; }
.dec-sign { width: 170px; left: 6%; top: 37%; transform: rotate(-8deg); opacity: .22; }
.dec-init {
  right: 8%; top: 68%; transform: rotate(-6deg);
  font-family: "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive;
  font-size: 56px; line-height: 1; color: #C8C8C3;
}
/* Small and high on purpose: it has to finish above the 25% mark, where the
   pen starts claiming the right side. */
.dec-seal { width: 132px; right: 10.5%; top: 0; transform: rotate(10deg); color: #C3C3BE; }
.cur { font-weight: 800; line-height: 1; color: #CECEC9; }
.cur-usd { font-size: 56px; left: 20.5%; bottom: 15%; transform: rotate(-11deg); }
/* Sits past the pen, not under it — hence the small inset. */
.cur-eur { font-size: 64px; right: 14.5%; top: 45%; transform: rotate(9deg); }
/* Dips below the phone's rounded top corner, so it clears the sheet's edge
   at 16.4%, not the frame's at 24.5%. */
.cur-gbp { font-size: 48px; left: 22%; top: 2%; transform: rotate(-7deg); }
@media (prefers-reduced-motion: no-preference) {
  .dec-seal { animation: decbob 7s var(--ease-in-out) infinite; }
  .dec-sign { animation: decbob 8.6s var(--ease-in-out) infinite; animation-delay: -3.2s; }
  .dec-init { animation: decbob 7.8s var(--ease-in-out) infinite; animation-delay: -5s; }
  .cur-usd { animation: decbob 6.6s var(--ease-in-out) infinite; animation-delay: -1.8s; }
  .cur-eur { animation: decbob 7.4s var(--ease-in-out) infinite; animation-delay: -4.2s; }
  .cur-gbp { animation: decbob 8s var(--ease-in-out) infinite; animation-delay: -2.7s; }
}
@keyframes decbob {
  0%, 100% { translate: 0 6px; }
  50% { translate: 0 -8px; }
}
/* Narrower stage, narrower side gutters: shrink the marks so they still clear
   the phone instead of drifting over it. */
@media (max-width: 1040px) {
  .device { width: min(460px, 100%); }
  .dec-sign { width: 140px; left: 3%; }
  .dec-seal { width: 104px; right: 6%; }
  .dec-init { font-size: 40px; right: 6%; }
  .cur-usd { font-size: 40px; left: 20%; }
  .cur-eur { font-size: 42px; right: 11%; }
  .cur-gbp { font-size: 34px; left: 24%; }
}
/* Below this the phone eats the full width — there is no gutter left to stand
   in, and decor drawn over the screenshot is what made it invisible. */
@media (max-width: 760px) {
  /* Wider stage, no padding: the art carries 16% of empty space on its left,
     so a box sized to the text column would render a small phone with a
     margin baked into the pixels. Trim the stage instead of the art. */
  .stage { margin-top: 36px; width: calc(100vw - 16px); padding: 0; }
  .device { width: min(440px, 100%); }
  .dec { display: none; }
}

/* Closing call to action */
.cta { max-width: 720px; margin: 78px auto 0; padding: 0 24px; text-align: center; }
.cta h2 { font-size: 27px; letter-spacing: -0.022em; margin: 0 0 8px; text-wrap: balance; }
.cta .sub { color: var(--text-2); font-size: 15px; margin: 0 0 22px; }

/* Focus-visible rings (accessibility) */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 7px;
}

/* App screens on a dark band: a compact full-bleed slide belt */
.screens { background: #141819; margin-top: 64px; padding: 38px 0 36px; overflow: hidden; }
.screens h2 { color: #fff; font-size: 24px; letter-spacing: -0.02em; margin: 0 0 4px; text-align: center; padding: 0 24px; }
.screens .sub { color: #A2A4AB; margin: 0 0 22px; text-align: center; font-size: 14.5px; padding: 0 24px; }

/* Slow endless belt across the full viewport. The rail carries the same
   vertical gradient as the slide artwork (#2C2C34 → #212226 → #141819), so
   the slides melt into one continuous strip instead of reading as boxes.
   Hover pauses the belt and spotlights one slide, click opens it large. */
.srail {
  overflow: hidden; padding: 18px 0;
  background: linear-gradient(180deg, #2C2C34, #212226 50%, #141819);
}
.strack { display: flex; width: max-content; }
.sgroup { display: flex; gap: 14px; padding-right: 14px; }
.srail img {
  width: clamp(190px, 13.5vw, 250px); height: auto; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.10);
  transition: transform var(--dur-comp) var(--ease-out), opacity var(--dur-comp) var(--ease-out), box-shadow var(--dur-comp) var(--ease-out);
  cursor: zoom-in;
}
@keyframes beltscroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .strack { animation: beltscroll 80s linear infinite; }
  .srail:hover .strack { animation-play-state: paused; }
  .srail:hover img { opacity: .35; }
  .srail img:hover { opacity: 1; transform: scale(1.05); box-shadow: 0 26px 70px rgba(0,0,0,.55); }
}
/* Touch or reduced motion: a plain swipeable rail, single set of slides */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .srail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .srail::-webkit-scrollbar { display: none; }
  .sgroup { padding: 0 24px 0 24px; }
  .sgroup[aria-hidden="true"] { display: none; }
  .srail img { width: min(230px, 56vw); scroll-snap-align: center; }
}

/* Lightbox for a closer look at one slide */
.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 26px; cursor: zoom-out; background: rgba(10,10,12,.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.lightbox[hidden] { display: none; }
/* Controls anchor to the slide itself, not the viewport edges */
.lb-wrap { position: relative; }
.lb-wrap img { display: block; max-height: 88vh; max-width: 80vw; width: auto; height: auto; border-radius: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox button {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; padding: 0;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.lightbox button:hover { background: rgba(255,255,255,.28); }
.lightbox button svg { width: 22px; height: 22px; }
.lightbox button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lb-x { top: -8px; right: -60px; }
.lb-x:active { transform: scale(.92); }
.lb-prev { left: -64px; top: 50%; transform: translateY(-50%); }
.lb-next { right: -64px; top: 50%; transform: translateY(-50%); }
.lb-prev:active { transform: translateY(-50%) scale(.92); }
.lb-next:active { transform: translateY(-50%) scale(.92); }
/* Narrow screens: no room beside the slide, lay controls over it */
@media (max-width: 700px) {
  .lightbox { padding: 16px; }
  .lb-wrap img { max-width: 88vw; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-x { top: 8px; right: 8px; background: rgba(20,21,24,.55); }
}

/* Alternating feature rows on dark panels */
.zig { max-width: 928px; margin: 58px auto 0; padding: 0 24px; display: grid; gap: 18px; }
.zrow {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: center;
  background: linear-gradient(160deg, #1E1F24, #141819); color: #fff;
  border-radius: 22px; overflow: hidden; min-height: 330px;
  box-shadow: 0 24px 60px rgba(20,21,24,.28);
}
.ztext { padding: 40px 38px; }
.ztag {
  display: inline-block; font-size: 12px; font-weight: 660; letter-spacing: .07em;
  text-transform: uppercase; color: #D6D8DC; margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.20); border-radius: 999px; padding: 6px 14px;
}
.ztext h2, .ztext h3 { font-size: 25px; font-weight: 770; letter-spacing: -0.022em; margin: 0 0 12px; text-wrap: balance; }
.ztext p { margin: 0; color: #A2A4AB; font-size: 15px; line-height: 1.65; }
.ztext p strong { color: #fff; font-weight: 680; }
.zart {
  position: relative; align-self: stretch; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
}
/* Light falls from the top left: round glow shifted up-left,
   shadow cast down-right */
.zart::before {
  content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  transform: translate(-5%, -8%);
  background: radial-gradient(closest-side, rgba(255,255,255,.17), rgba(255,255,255,.05) 52%, transparent 74%);
}
.zart img {
  position: relative; width: min(225px, 56%); height: auto;
  filter: drop-shadow(16px 26px 28px rgba(0,0,0,.55));
  will-change: translate;
}
/* Animates `translate`, not `transform`, so the glow keeps its own light
   offset (a transform here would wipe it out). */
@keyframes zfloat {
  0%, 100% { translate: 0 9px; }
  50% { translate: 0 -11px; }
}
/* The glow floats WITH the object. It used to sit still while the icon drifted
   20px through it, which read as light missing its target (user 2026-08-04).
   Same duration and delay on both, so they never separate. */
@media (prefers-reduced-motion: no-preference) {
  .zart img, .zart::before { animation: zfloat 7s var(--ease-in-out) infinite; }
  .zig .zrow:nth-child(2) .zart img,
  .zig .zrow:nth-child(2) .zart::before { animation-duration: 8.2s; animation-delay: -2.6s; }
  .zig .zrow:nth-child(3) .zart img,
  .zig .zrow:nth-child(3) .zart::before { animation-duration: 7.6s; animation-delay: -4.1s; }
}
.zrow.rev .ztext { order: 2; }
.zrow.rev .zart { order: 1; }
@media (max-width: 700px) {
  .zrow, .zrow.rev { grid-template-columns: 1fr; min-height: 0; }
  .zrow.rev .ztext { order: 1; }
  .zrow.rev .zart { order: 2; }
  .ztext { padding: 28px 24px 4px; }
  .zart { min-height: 232px; margin: 4px 0 8px; }
  .zart::before { width: 220px; height: 220px; }
  .zart img { width: 168px; }
}

.closing { max-width: 720px; margin: 52px auto 0; padding: 0 24px; text-align: center; color: var(--text-2); font-size: 15px; }

/* Content pages */
main.page { max-width: 700px; margin: 0 auto; padding: 44px 24px 80px; }
main.page h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); margin-bottom: 6px; letter-spacing: -0.025em; text-wrap: balance; }
.updated { color: var(--text-2); font-size: 14px; margin: 0 0 26px; }
main.page h2 { font-size: 18.5px; font-weight: 700; margin: 30px 0 6px; letter-spacing: -0.015em; }
main.page h3 { font-size: 16px; font-weight: 660; margin: 20px 0 4px; }
main.page p, main.page li { font-size: 15.5px; }
main.page p { margin: 8px 0; }
a { color: var(--text); text-underline-offset: 2px; }
.email { font-weight: 650; }
ul { padding-left: 20px; } li { margin: 6px 0; }
.lead { color: var(--text-2); }

/* Centered support page */
main.center { text-align: center; }
main.center .lead { max-width: 460px; margin-left: auto; margin-right: auto; }
main.center .form { margin-left: auto; margin-right: auto; text-align: left; }
main.center .form button { display: block; margin: 4px auto 0; }
main.center .form .note { text-align: center; }
main.center .faq { text-align: left; max-width: 580px; margin: 10px auto 0; }
main.center h2 { text-align: center; }

/* FAQ accordion */
.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-of-type { border-top: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 4px; font-weight: 660; font-size: 15.5px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border-radius: 8px; transition: background var(--dur-micro) var(--ease-out); }
.faq summary:hover { background: #FAFAF9; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; width: 18px; height: 18px; color: var(--text-2); transition: transform var(--dur-comp) var(--ease-out); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .a { padding: 0 4px 16px; margin: 0; color: var(--text-2); font-size: 15px; }
/* Smooth open AND close (was open-only). Modern CSS; older browsers fall back to instant. */
.faq details::details-content {
  opacity: 0; height: 0; overflow: clip;
  transition: opacity var(--dur-comp) var(--ease-out), height var(--dur-comp) var(--ease-out), content-visibility var(--dur-comp);
  transition-behavior: allow-discrete;
}
.faq details[open]::details-content { opacity: 1; height: auto; }
@media (prefers-reduced-motion: reduce) { .faq details::details-content { transition: none; } }

/* Contact form */
.form { max-width: 460px; margin: 16px 0 8px; }
.field { margin-bottom: 13px; }
.field label { display: block; font-size: 13px; font-weight: 650; color: var(--text-2); margin-bottom: 5px; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 15px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; background: #FBFBFA; color: var(--text); transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out); }
.field input::placeholder, .field textarea::placeholder { color: #AAACB1; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; border-color: #17181C; box-shadow: 0 0 0 3px rgba(23,24,28,.07); }
.field textarea { min-height: 122px; resize: vertical; }
.form button { background: var(--ink); color: #fff; border: none; border-radius: 999px; padding: 12px 26px; font: inherit; font-weight: 650; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.form button:hover { opacity: .9; transform: translateY(-1px); }
.form button:active { transform: translateY(0) scale(.985); transition-duration: 90ms; }
.hp { position: absolute; left: -9999px; }
.or-sep { display: flex; align-items: center; gap: 14px; color: var(--text-2); font-size: 13px; max-width: 300px; margin: 18px auto 14px; }
.or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form .note { font-size: 14px; color: var(--text-2); margin: 0; text-align: center; }

/* Thanks page (after form submit) */
.sent-check { width: 64px; height: 64px; margin: 4px auto 22px; border-radius: 999px; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; }
.sent-check svg { width: 30px; height: 30px; }
.btn-link { display: inline-block; margin-top: 18px; background: var(--ink); color: #fff; text-decoration: none; border-radius: 999px; padding: 12px 26px; font-weight: 650; transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.btn-link:hover { opacity: .9; transform: translateY(-1px); }

/* Full-height page (thanks): content vertically centered, footer pinned to bottom */
body.fill { min-height: 100dvh; display: flex; flex-direction: column; }
body.fill main.page { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding-top: 40px; padding-bottom: 40px; }
body.fill main.page .lead { max-width: 460px; }
body.fill footer { margin-top: 0; flex: none; }

/* Footer */
footer { border-top: 1px solid var(--border); max-width: 920px; margin: 60px auto 0; padding: 24px; color: var(--text-2); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
footer .fnav a { color: var(--text-2); text-decoration: none; margin-right: 16px; }
footer .fnav a:hover { color: var(--text); }
footer .spacer { flex: 1; }

@media (max-width: 520px) { .hero { padding-top: 52px; } .bar nav a { margin-left: 14px; } }

/* Mobile burger navigation (pure CSS, no JS) */
.navtoggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.burger { display: none; }
@media (max-width: 560px) {
  .bar .wrap { position: relative; flex-wrap: nowrap; }
  .bar .brand { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .burger {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; margin-left: auto; border-radius: 9px;
    color: var(--text); cursor: pointer;
    transition: background var(--dur-micro, .15s) var(--ease-out, ease);
  }
  .burger:hover { background: #F2F2F1; }
  .burger svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  }
  .navtoggle:focus-visible ~ .burger { outline: 2px solid #17181C; outline-offset: 2px; }
  .bar nav {
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    display: flex; flex-direction: column; padding: 4px 24px 12px;
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--border);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity var(--dur-comp, .28s) var(--ease-out, ease), transform var(--dur-comp, .28s) var(--ease-out, ease);
  }
  .navtoggle:checked ~ nav { opacity: 1; transform: none; pointer-events: auto; }
  .bar nav a { margin: 0; padding: 12px 2px; font-size: 16px; }
  .bar nav a + a { border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) { .bar nav, .burger svg { transition: none; } }

/* ===== nav plate on hover, and the FAQ page ===== */
.bar nav a {
  position: relative; padding: 7px 12px; border-radius: 999px;
  transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.bar nav a:hover { background: #F4F4F3; box-shadow: 0 6px 16px -12px rgba(23,24,28,.5); }
.bar nav a.active { background: #17181C; color: #fff; }
.bar nav a.active:hover { background: #17181C; box-shadow: none; }

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .zrow .ztext, .faq details { transition: transform var(--dur-comp) var(--ease-out); }
  .zrow:hover .zart img { transform: translateY(-4px) scale(1.01); }
  .zart img { transition: transform var(--dur-comp) var(--ease-out); }
}

.page .wrap.narrow { max-width: 760px; }
.faq-more { margin-top: 26px; font-size: 15px; color: var(--text-2); }
.faq-more a { color: var(--text); }