/*
  Snacked marketing site, shared design system
  ============================================

  Built on the Droppy site's system (getdroppy.app): tokens first, the
  Apple-style global bar with flyouts and a phone sheet, reveal-on-scroll
  motion, the alternating FAQ pills and a footer that ends in a band with a
  giant half-cut wordmark. Re-skinned in Snacked's own brand: the app's
  canvas, accent green, deep green ink and macro pastels, Manrope for text
  and Unbounded for display type, in dark and light.

  ONE SOURCE OF TRUTH. Every space, gap, radius, font size and line height
  on every page comes from the tokens below. Components never write a raw
  length: a new size is a new token here, never a number in a rule.

  Motion rules, as on Droppy: everything that moves animates transform or
  opacity only; nothing that moves, or sits over moving video, carries a
  backdrop-filter (the global bar is the one frosted surface); scroll
  readers share one frame (SnackedFrame in site.js), reads first.

  Page-only rules live in home.css, written against the same tokens.
*/

@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/manrope-regular.woff2?v=10afaea5c8") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/manrope-medium.woff2?v=fee59acc72") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-semibold.woff2?v=3c9e987da1") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/manrope-bold.woff2?v=ae91bcc32b") format("woff2"); }
@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/unbounded-semibold.woff2?v=86c7284892") format("woff2"); }

/* ---------------------------------------------------------------------- */
/* Tokens                                                                 */
/* ---------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  /* Space: one 4 pt scale. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;

  /* Layout rhythm. Every section has the same block padding, so two
     neighbours always sit twice it apart; every section header has the
     same gaps; every card and tile the same inner padding. */
  --section-pad: clamp(72px, 8.5vw, 120px);
  --gutter: var(--s-6);
  --container: 1120px;
  --measure: 40em;
  --eyebrow-gap: var(--s-4);
  --head-gap: var(--s-4);
  --stack-gap: var(--s-7);
  --content-gap: clamp(40px, 5vw, 56px);
  --grid-gap: var(--s-4);
  --card-pad: clamp(24px, 2.6vw, 32px);
  --card-gap: var(--s-2);
  --row-gap: var(--s-4);
  --split-gap: clamp(40px, 7vw, 112px);

  /* Radii. */
  --r-sm: 14px;
  --r-card: 28px;
  --r-panel: 36px;
  --r-full: 999px;

  /* Type: one size and one line height per text style. */
  --fs-hero: clamp(2.55rem, 7.4vw, 5.6rem);
  --fs-h1: clamp(2.2rem, 6vw, 3.6rem);
  --fs-h2: clamp(2rem, 4.8vw, 3.4rem);
  --fs-h3: 19px;
  --fs-lead: clamp(1.06rem, 1.7vw, 1.25rem);
  --fs-body: 16px;
  --fs-read: 17px;
  --fs-small: 14px;
  --fs-caption: 13px;
  --fs-label: 15px;
  --fs-kicker: 19px;
  --fs-price: clamp(24px, 2.6vw, 30px);
  --fs-wordmark: clamp(5.5rem, 19.5vw, 19rem);
  /* Apple's badge: its own two lines over the Apple mark. */
  --badge-small: 11px;
  --badge-big: 21px;
  --badge-line-gap: 2px;
  --badge-logo-w: 22px;
  --badge-logo-h: 27px;
  --lh-display: 1.04;
  --lh-h2: 1.08;
  --lh-h3: 1.3;
  --lh-lead: 1.5;
  --lh-body: 1.55;
  --lh-read: 1.7;
  --lh-ui: 1.2;
  --track-display: -0.03em;
  --track-h2: -0.025em;
  --track-ui: -0.01em;

  /* Controls share two sizes, as in the app (YumbatTheme.control 56,
     cornerControl 44). */
  --control: 56px;
  --control-sm: 44px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 44px;

  --nav-safe-top: env(safe-area-inset-top, 0px);
  --site-nav-height: 44px;
  --hero-gap: 96px;
  --hero-start: calc(var(--nav-safe-top) + var(--site-nav-height) + var(--hero-gap));

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;

  /* Colour: the app's own. The page is the app's dark canvas; bands are
     the widgets' backdrop (#0E2618 to #040A06) with the accent gathered
     softly at their top, the way the goal aura glows on Home. */
  --page: #040705;
  --band-top: #0e2618;
  --band-bottom: #040a06;
  --footer-end: #0b2216;
  --accent: #8fd6a2;
  --ink-deep: #0f2a1b;
  --mint: #d6f6bc;
  --protein: #ff9bae;
  --carbs: #ffcf7a;
  --fat: #8fcbff;
  --accent-fill: #8fd6a2;
  --accent-fill-hover: #a6e0b5;
  --accent-fill-ink: #0f2a1b;
  --glow: rgb(47 143 91 / 0.30);
  --ring: rgb(255 255 255 / 0.2);
  --hairline: rgb(255 255 255 / 0.08);
  --dim-word: rgb(255 255 255 / 0.17);
  --wordmark: rgb(214 246 188 / 0.075);

  /* Text in solid steps, never transparency; every step stays above 4.5:1
     on the page and on a card. */
  --text-1: #ffffff;
  --text-2: #d3ded6;
  --text-3: #a9b8ae;
  --text-4: #7d9083;

  /* Surfaces: flat, no outlines, a lighter fill over the page. */
  --card: #0d1510;
  --card-2: #131d16;
  --card-3: #1a261d;
  --chip: rgb(255 255 255 / 0.07);
  --chip-hover: rgb(255 255 255 / 0.11);

  /* One pill in three fills: the app's white capsule for the primary, the
     accent for highlights, a quiet glass for secondary. */
  --pill-light: #f4f8f2;
  --pill-light-hover: #e6eee4;
  --pill-light-ink: #0f2a1b;
  --pill-quiet: rgb(255 255 255 / 0.1);
  --pill-quiet-hover: rgb(255 255 255 / 0.15);
  --pill-quiet-ink: #ffffff;

  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Unbounded", "Manrope", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-apple: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --page: #f3f6ef;
    --band-top: #e1f0d5;
    --band-bottom: #eef4e9;
    --footer-end: #d3e8c7;
    --accent: #2f8f5b;
    --protein: #e2607a;
    --carbs: #d8962a;
    --fat: #3d93d6;
    --accent-fill: #2f8f5b;
    --accent-fill-hover: #287d4f;
    --accent-fill-ink: #ffffff;
    --glow: rgb(47 143 91 / 0.16);
    --ring: rgb(15 42 27 / 0.16);
    --hairline: rgb(15 42 27 / 0.1);
    --dim-word: rgb(15 42 27 / 0.16);
    --wordmark: rgb(15 42 27 / 0.06);
    --text-1: #0f2a1b;
    --text-2: #2b4335;
    --text-3: #4a5e52;
    --text-4: #64776b;
    --card: #ffffff;
    --card-2: #e8efe5;
    --card-3: #dde7d9;
    --chip: rgb(15 42 27 / 0.06);
    --chip-hover: rgb(15 42 27 / 0.1);
    --pill-light: #0f2a1b;
    --pill-light-hover: #1d3d2a;
    --pill-light-ink: #ffffff;
    --pill-quiet: rgb(15 42 27 / 0.07);
    --pill-quiet-hover: rgb(15 42 27 / 0.11);
    --pill-quiet-ink: #0f2a1b;
  }
}

@media (max-width: 833px) {
  :root { --site-nav-height: 48px; --hero-gap: var(--s-10); }
}
@media (max-width: 480px) {
  :root { --gutter: var(--s-4); --hero-gap: var(--s-9); }
}

/* ---------------------------------------------------------------------- */
/* Reset and base                                                         */
/* ---------------------------------------------------------------------- */

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

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-safe-top) + var(--site-nav-height) + var(--s-3));
  background: var(--page);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-body);
  color: var(--text-2);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--text-1); font-weight: 600; }

::selection { background: rgb(143 214 162 / 0.32); color: var(--text-1); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--s-2);
}

.skip-link {
  position: fixed;
  top: calc(var(--nav-safe-top) + var(--s-3));
  left: 50%;
  z-index: 101;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  background: var(--pill-light);
  color: var(--pill-light-ink);
  font-size: var(--fs-small);
  font-weight: 700;
  transform: translate(-50%, -160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Every section: the same block padding. */
section { position: relative; padding-block: var(--section-pad); }

/* Glyphs: the app's own filled SVG icons, from one sprite. */
.glyph { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------------------------------------------------------------------- */
/* Section headers: eyebrow, heading, subtitle, then the content          */
/* ---------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--eyebrow-gap);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: var(--lh-ui);
  letter-spacing: var(--track-ui);
  color: var(--accent);
}
.eyebrow .glyph { width: var(--icon-md); height: var(--icon-md); }
.eyebrow--center { display: flex; justify-content: center; }

.section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--track-h2);
  color: var(--text-1);
  text-wrap: balance;
  margin-bottom: var(--head-gap);
}
.section-heading--center { text-align: center; margin-inline: auto; }

.section-subtitle {
  max-width: var(--measure);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: 500;
  color: var(--text-3);
  text-wrap: pretty;
}
.section-subtitle--center { text-align: center; margin-inline: auto; }
.section-subtitle strong { color: var(--text-1); font-weight: 700; }

/* The content under a centred section header always starts here. */
.section-body { margin-top: var(--content-gap); }

.text-accent { color: var(--accent); }
.text-grad {
  background: linear-gradient(180deg, var(--mint), var(--accent) 60%, #5dbe74);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-color-scheme: light) {
  .text-grad { background-image: linear-gradient(180deg, #3fa56b, #2f8f5b 70%); }
}

/* ---------------------------------------------------------------------- */
/* Bands                                                                  */
/* ---------------------------------------------------------------------- */

/* A band is the widgets' backdrop as a full-bleed stretch of the page:
   deep green rising out of the canvas and settling back into it, with the
   accent gathered at its top. The bar over a band wears green glass
   (site.js reads --band-nav-top and --band-nav-bottom). */
.band {
  --band-nav-top: 120px;
  --band-nav-bottom: 120px;
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(70% 46% at 50% 0%, var(--glow), transparent 72%),
    linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--band-top) 45%, var(--page)) 14%, var(--band-top) 36%, color-mix(in srgb, var(--band-top) 70%, var(--page)) 66%, var(--band-bottom) 88%, var(--page) 100%);
}
.band--top {
  --band-nav-top: 0px;
  background:
    radial-gradient(60% 54% at 50% 0%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--band-top) 0%, color-mix(in srgb, var(--band-top) 70%, var(--page)) 40%, color-mix(in srgb, var(--band-top) 30%, var(--page)) 74%, var(--page) 100%);
}

/* ---------------------------------------------------------------------- */
/* Reveal-on-load / reveal-on-scroll                                      */
/* ---------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(var(--s-5));
  transition: opacity 520ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
.is-return .reveal[data-reveal-on-load] { opacity: 1; transform: none; transition: none; }
.reveal.is-settled { transition: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 1ms; transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Buttons: one capsule, the App Store badge included                     */
/* ---------------------------------------------------------------------- */

.btn,
.appstore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: var(--control);
  padding-inline: var(--s-7);
  border: 0;
  border-radius: var(--r-full);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:active,
.appstore:active { transform: scale(0.97); }
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-read);
  font-weight: 700;
  letter-spacing: var(--track-ui);
  line-height: 1;
}
.btn .glyph { width: var(--icon-sm); height: var(--icon-sm); }
.btn--light { background: var(--pill-light); color: var(--pill-light-ink); }
.btn--light:hover { background: var(--pill-light-hover); }
.btn--quiet { background: var(--pill-quiet); color: var(--pill-quiet-ink); box-shadow: inset 0 0 0 1px var(--ring); }
.btn--quiet:hover { background: var(--pill-quiet-hover); }
.btn--accent { background: var(--accent-fill); color: var(--accent-fill-ink); }
.btn--accent:hover { background: var(--accent-fill-hover); }
.btn--sm { height: var(--control-sm); padding-inline: var(--s-5); font-size: var(--fs-label); }

/* Download on the App Store: the badge's black fill, the Apple mark and its
   two lines, in the same capsule as every other pill (same height, a full
   radius, the same hairline ring and padding). */
.appstore {
  background: #000;
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--ring);
  font-family: var(--font-apple);
  line-height: 1;
}
.appstore:hover { background: #151816; }
.appstore__logo { width: var(--badge-logo-w); height: var(--badge-logo-h); margin-top: -3px; fill: currentColor; flex: none; }
.appstore__text { display: flex; flex-direction: column; gap: var(--badge-line-gap); text-align: left; }
.appstore__small { font-size: var(--badge-small); font-weight: 500; letter-spacing: 0.01em; line-height: 1.1; }
.appstore__big { font-size: var(--badge-big); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.appstore:focus-visible { outline-color: var(--accent); }

.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.actions--start { justify-content: flex-start; }
@media (max-width: 480px) {
  .actions--stack { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; margin-inline: auto; }
  .actions--stack > * { justify-content: center; }
}

/* ---------------------------------------------------------------------- */
/* Devices                                                                */
/* ---------------------------------------------------------------------- */

/* Apple's own iPhone 18 Pro Max Simulator bezel (script/appstore/frames,
   pm_chrome.png) with the real capture or recording on its screen. The
   screen sits where compose.py places it, at (51, 51) of the 1422 x 2970
   chrome, cut by the device's own screen mask (pm_mask.png). Captures
   carry the Dynamic Island as compose.py draws it; recordings carry their
   own. No part of a device is drawn in CSS. */
.device {
  --device-w: 300px;
  position: relative;
  width: var(--device-w);
  max-width: 100%;
  aspect-ratio: 1422 / 2970;
  flex: none;
}
.device__chrome { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.device__screen {
  position: absolute;
  left: 3.5865%;
  top: 1.7172%;
  width: 92.827%;
  height: 96.5657%;
  overflow: hidden;
  background: #000;
  -webkit-mask-image: url("/assets/img/device/pm-mask.png?v=cee58943ef");
  mask-image: url("/assets/img/device/pm-mask.png?v=cee58943ef");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.device__screen > img,
.device__screen > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.device__screen > video { opacity: 0; transition: opacity 240ms linear; }
.device__screen > video.is-live { opacity: 1; }
/* A soft shadow under the device, drawn once behind it (never a filter on
   a box that holds a playing film). */
.device--shadow::before {
  content: "";
  position: absolute;
  inset: 4% 6% 2%;
  border-radius: 16% / 8%;
  box-shadow: 0 40px 90px rgb(0 0 0 / 0.55);
  pointer-events: none;
}

/* Replay, under a film that plays once and holds its last frame. */
.film-replay {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--s-8);
  margin-top: var(--s-5);
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--r-full);
  background: var(--chip);
  color: var(--text-2);
  font-size: var(--fs-small);
  font-weight: 700;
  opacity: 0;
  transform: translateY(var(--s-2));
  pointer-events: none;
  transition: opacity 240ms var(--ease-out), transform 360ms var(--ease-out), background-color var(--dur-fast) linear;
}
.film-replay .glyph { width: var(--icon-sm); height: var(--icon-sm); }
.film-replay:hover { background: var(--chip-hover); color: var(--text-1); }
.film-replay.is-shown { opacity: 1; transform: none; pointer-events: auto; }

/* ---------------------------------------------------------------------- */
/* Cards: one inner padding, one title style, one body style              */
/* ---------------------------------------------------------------------- */

.card {
  position: relative;
  border-radius: var(--r-card);
  background: var(--card);
  padding: var(--card-pad);
}
.card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--track-ui);
  line-height: var(--lh-h3);
  color: var(--text-1);
  margin-bottom: var(--card-gap);
}
.card p { color: var(--text-3); font-size: var(--fs-body); line-height: var(--lh-body); }
.card p strong { color: var(--text-1); font-weight: 700; }

/* ---------------------------------------------------------------------- */
/* FAQ: Droppy's back-and-forth pills (grid-template-rows 0fr to 1fr)     */
/* ---------------------------------------------------------------------- */

.faq {
  --faq-icon: var(--s-8);
  --faq-gutter: var(--s-10);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--row-gap);
  max-width: 980px;
  margin: var(--content-gap) auto 0;
}
.faq__item { position: relative; min-width: 0; display: flex; flex-direction: column; }
.faq__question {
  position: relative;
  z-index: 0;
  width: fit-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--faq-gutter);
  margin: 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-6);
  background: none;
  border: none;
  text-align: left;
  font-size: var(--fs-read);
  font-weight: 700;
  letter-spacing: var(--track-ui);
  line-height: var(--lh-h3);
  color: var(--text-1);
  -webkit-tap-highlight-color: transparent;
}
.faq__question::before {
  content: "";
  position: absolute;
  inset: 0 var(--faq-gutter) 0 0;
  border-radius: var(--r-full);
  background: var(--card-2);
  z-index: -1;
  transition: background-color var(--dur-fast) linear;
}
.faq__question:hover::before { background: var(--card-3); }
.faq__item:nth-child(even) .faq__question { margin-left: auto; }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: var(--faq-icon);
  height: var(--faq-icon);
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--text-4);
  color: var(--text-3);
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.faq__icon .glyph { width: var(--icon-sm); height: var(--icon-sm); transition: opacity var(--dur-fast) linear; }
.faq__icon::after {
  content: "";
  position: absolute;
  width: var(--icon-sm);
  height: 2px;
  border-radius: 2px;
  background: var(--accent-fill-ink);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__icon { background: var(--accent-fill); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
.faq__item.is-open .faq__icon .glyph { opacity: 0; }
.faq__item.is-open .faq__icon::after { opacity: 1; }
.faq__answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease-out); }
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }
.faq__answer-inner { overflow: hidden; }
.faq__answer-content {
  position: relative;
  margin: var(--s-3) 18% var(--s-1) calc(var(--faq-gutter) + var(--s-2));
  padding: var(--card-pad);
  border-radius: var(--r-card);
  background: var(--card);
  color: var(--text-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.faq__answer-content p + p { margin-top: var(--s-3); }
.faq__answer-content a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--ring); text-underline-offset: 3px; }
.faq__answer-content::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--s-9));
  top: var(--card-pad);
  width: var(--s-7);
  height: var(--s-7);
  border-radius: 50%;
  background: var(--accent-fill);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.faq__item.is-open .faq__answer-content::before { opacity: 1; }
.faq__item:nth-child(even) .faq__answer-content { margin: var(--s-3) calc(var(--faq-gutter) + var(--s-2)) var(--s-1) 18%; }
.faq__item:nth-child(even) .faq__answer-content::before { left: auto; right: calc(-1 * var(--s-9)); }

@media (max-width: 760px) {
  .faq { --faq-icon: 36px; --faq-gutter: calc(var(--faq-icon) + var(--s-3)); }
  .faq__question,
  .faq__item:nth-child(even) .faq__question { width: 100%; margin-left: 0; gap: var(--s-4); padding: var(--s-3) 0 var(--s-3) var(--s-5); }
  .faq__answer-content,
  .faq__item:nth-child(even) .faq__answer-content { margin: var(--s-3) 0 var(--s-1); }
  .faq__answer-content::before { display: none; }
}
/* Support: every question on the left, every answer under it. */
.faq--support { margin-top: var(--stack-gap); max-width: none; --faq-gutter: calc(var(--faq-icon) + var(--s-4)); }
.faq--support .faq__question,
.faq--support .faq__item:nth-child(even) .faq__question { width: 100%; margin-left: 0; gap: var(--s-4); }
.faq--support .faq__answer-content,
.faq--support .faq__item:nth-child(even) .faq__answer-content { margin: var(--s-3) var(--faq-gutter) var(--s-1) 0; }
.faq--support .faq__answer-content::before { display: none; }
@media (max-width: 760px) {
  .faq--support .faq__answer-content,
  .faq--support .faq__item:nth-child(even) .faq__answer-content { margin: var(--s-3) 0 var(--s-1); }
}

/* ---------------------------------------------------------------------- */
/* Page heroes and long-form pages (legal, support, 404)                  */
/* ---------------------------------------------------------------------- */

.page-hero { padding-top: var(--hero-start); padding-bottom: var(--content-gap); text-align: center; }
.page-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--stack-gap);
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  line-height: var(--lh-ui);
  color: var(--text-1);
}
.page-hero__kicker img { width: var(--s-7); height: var(--s-7); }
.page-hero__title { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--track-h2); margin-bottom: var(--head-gap); text-wrap: balance; }
.page-hero__meta { color: var(--text-3); font-size: var(--fs-lead); line-height: var(--lh-lead); }

.legal { padding-top: 0; }
.legal-doc { max-width: 760px; margin-inline: auto; }
.legal-doc .card { margin: 0 0 var(--s-8); }
.legal-doc h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--track-ui);
  line-height: var(--lh-h3);
  margin: var(--s-9) 0 var(--s-3);
}
.legal-doc h3 { font-size: var(--fs-read); font-weight: 700; line-height: var(--lh-h3); margin: var(--s-6) 0 var(--s-2); }
.legal-doc p, .legal-doc li { color: var(--text-2); font-size: var(--fs-read); line-height: var(--lh-read); }
.legal-doc p + p { margin-top: var(--s-3); }
.legal-doc ul, .legal-doc ol { margin: var(--s-3) 0 0; display: grid; gap: var(--s-3); }
.legal-doc li { position: relative; padding-left: var(--s-6); }
.legal-doc li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: var(--s-2); height: var(--s-2); border-radius: 50%; background: var(--accent); }
.legal-doc strong { color: var(--text-1); font-weight: 700; }
.legal-doc :is(p, li) > a:not([class]) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--ring); text-underline-offset: 3px; }
.legal-doc :is(p, li) > a:not([class]):hover { text-decoration-color: currentColor; }
.legal-doc .card p { color: var(--text-2); font-size: var(--fs-read); line-height: var(--lh-read); }
.legal-steps { counter-reset: step; }
.legal-steps li { padding-left: var(--s-8); }
.legal-steps li::before {
  counter-increment: step;
  content: counter(step);
  top: 0.15em;
  left: 0;
  width: var(--s-6);
  height: var(--s-6);
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-fill-ink);
  background: var(--accent-fill);
}

.support-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center; }
.support-card .card__title { margin: 0 0 var(--card-gap); }
@media (max-width: 600px) {
  .support-card { grid-template-columns: minmax(0, 1fr); }
  .support-card .btn { justify-self: start; }
}

.lost { min-height: 78svh; display: flex; align-items: center; justify-content: center; padding-bottom: var(--section-pad); }
.lost .mascot { --mascot: 120px; margin: 0 auto var(--stack-gap); }
.lost .actions { margin-top: var(--stack-gap); }

/* ---------------------------------------------------------------------- */
/* The mascot: the exact vector character, alive                          */
/* ---------------------------------------------------------------------- */

/* The wrapper takes the float, sway, hop and squash (one transform on an
   HTML box, so the compositor moves it); the eyes inside the SVG take the
   blink and the glances. site.js drives it while it is on screen;
   Reduce Motion keeps it still and lets it blink. */
.mascot { --mascot: 128px; position: relative; width: var(--mascot); height: var(--mascot); }
.mascot__body { width: 100%; height: 100%; transform-origin: 50% 92%; will-change: transform; }
.mascot__body svg { width: 100%; height: 100%; overflow: visible; }
.mascot__eyes { transform-box: view-box; transform-origin: 16px -45px; }
.mascot__shadow {
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -6%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgb(0 0 0 / 0.38), transparent 70%);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
@media (prefers-color-scheme: light) {
  .mascot__shadow { background: radial-gradient(50% 50% at 50% 50%, rgb(15 42 27 / 0.2), transparent 70%); }
}

/* ---------------------------------------------------------------------- */
/* Footer: the page ends in a band, with the half-cut wordmark            */
/* ---------------------------------------------------------------------- */

.footer {
  --band-nav-top: 220px;
  --band-nav-bottom: 0px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: var(--section-pad);
  background:
    radial-gradient(70% 40% at 50% 100%, var(--glow), transparent 72%),
    linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--band-top) 45%, var(--page)) 26%, var(--band-top) 62%, var(--footer-end) 100%);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-9);
  justify-items: center;
  text-align: center;
}
.footer__brand { display: flex; flex-direction: column; align-items: center; }
.footer__logo {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 600;
  line-height: var(--lh-ui);
  color: var(--text-1);
}
.footer__logo img { width: var(--s-9); height: var(--s-9); }
.footer__tagline { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-kicker); line-height: var(--lh-h3); letter-spacing: var(--track-h2); color: var(--text-1); margin-bottom: var(--s-3); }
.footer__desc { color: var(--text-3); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 40ch; margin: 0 auto var(--s-6); }
.footer__copyright { margin: var(--s-6) 0 var(--s-1); color: var(--text-4); font-size: var(--fs-small); line-height: var(--lh-body); }
.footer__byline { color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-body); font-weight: 600; }
.footer__credit { margin-top: var(--s-3); color: var(--text-4); font-size: var(--fs-caption); line-height: var(--lh-body); max-width: 46ch; }
.footer__credit a { color: var(--text-3); text-decoration: underline; text-decoration-color: var(--ring); text-underline-offset: 3px; }
.footer__head { font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-read); line-height: var(--lh-h3); color: var(--text-1); margin-bottom: var(--s-1); }
.footer__col { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.footer__col a { color: var(--text-3); font-size: var(--fs-body); line-height: var(--lh-body); transition: color var(--dur-fast) var(--ease-out); }
.footer__col a:hover { color: var(--text-1); }
.footer__wordmark {
  overflow: hidden;
  height: clamp(76px, 12.5vw, 184px);
  margin-top: var(--section-pad);
  user-select: none;
}
.footer__wordmark span {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-wordmark);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--wordmark);
  will-change: transform;
  transform: translateY(0.06em);
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-6); }
}
@media (max-width: 380px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* The app icon on the light paper: a soft lift so the pale icon keeps its
   edge. A drop shadow follows the icon's own rounded shape. */
@media (prefers-color-scheme: light) {
  .gnav__logo img,
  .footer__logo img,
  .page-hero__kicker img,
  .hero__kicker img { filter: drop-shadow(0 1px 1.5px rgb(15 42 27 / 0.22)) drop-shadow(0 4px 10px rgb(15 42 27 / 0.1)); }
}

/* ---------------------------------------------------------------------- */
/* Global navigation                                                       */
/*                                                                         */
/* Droppy's globalnav, in Snacked's inks: a full-width 44px bar of frosted */
/* glass, its links spread across a 1024px column. Hovering a menu drops   */
/* its flyout: the glass grows down into one solid sheet, the columns read */
/* in, and a blurred curtain settles over the page. Phones get a 48px bar  */
/* and a full-height sheet whose sections drill in. Behaviour: site.js.    */
/*                                                                         */
/* The glass takes the stretch beneath it (site.js sets data-tone): green  */
/* glass over a band, near-black glass over the page.                      */
/* ---------------------------------------------------------------------- */

.gnav {
  --gnav-h: var(--site-nav-height);
  --gnav-flyout-h: 0px;
  --gnav-ease: cubic-bezier(0.4, 0, 0.6, 1);
  --gnav-sheet-ease: cubic-bezier(0.52, 0.16, 0.24, 1);
  --gnav-dur: 320ms;
  --gnav-sheet-dur: 400ms;
  --gnav-fs-big: 22px;
  --gnav-fs-sheet: 27px;
  --gnav-buy-h: 26px;
  --gnav-bar: rgb(10 34 20 / 0.62);
  --gnav-sheet: rgb(8 24 14 / 0.97);
  --gnav-curtain: rgb(2 8 4 / 0.42);
  --gnav-link: rgb(255 255 255 / 0.8);
  --gnav-link-hover: #ffffff;
  --gnav-title: rgb(214 246 188 / 0.56);
  --gnav-sub: rgb(255 255 255 / 0.86);
  --gnav-sub-elevated: #ffffff;
  --gnav-sub-hover: var(--accent);
  --gnav-buy: var(--accent);
  --gnav-buy-ink: var(--ink-deep);
  --gnav-focus: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  font-family: var(--font-sans);
  pointer-events: none;
}
.gnav[data-tone="page"] {
  --gnav-bar: rgb(8 11 9 / 0.7);
  --gnav-sheet: rgb(10 13 11 / 0.97);
}
@media (prefers-color-scheme: light) {
  .gnav {
    --gnav-bar: rgb(226 240 215 / 0.74);
    --gnav-sheet: rgb(240 246 235 / 0.97);
    --gnav-curtain: rgb(214 228 206 / 0.42);
    --gnav-link: rgb(15 42 27 / 0.8);
    --gnav-link-hover: #0f2a1b;
    --gnav-title: #557a62;
    --gnav-sub: rgb(15 42 27 / 0.86);
    --gnav-sub-elevated: #0f2a1b;
    --gnav-sub-hover: #2f8f5b;
    --gnav-buy: #2f8f5b;
    --gnav-buy-ink: #ffffff;
    --gnav-focus: #2f8f5b;
  }
  .gnav[data-tone="page"] {
    --gnav-bar: rgb(243 246 239 / 0.78);
    --gnav-sheet: rgb(246 249 243 / 0.97);
  }
  .gnav__logo span { color: #0f2a1b; }
  .gnav__buy:hover { background-color: #287d4f; }
}
.gnav.is-tone-instant,
.gnav.is-tone-instant * { transition: none !important; }

.gnav__bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-safe-top) + var(--gnav-h) + var(--gnav-flyout-h));
  background-color: var(--gnav-bar);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  pointer-events: auto;
  transition:
    height var(--gnav-sheet-dur) var(--gnav-sheet-ease),
    background-color var(--gnav-dur) var(--gnav-ease);
}
.gnav.is-open .gnav__bg,
.gnav.is-menu-open .gnav__bg { background-color: var(--gnav-sheet); }

.gnav__curtain {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-color: var(--gnav-curtain);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gnav-dur) var(--gnav-ease), visibility 0s linear var(--gnav-dur);
}
.gnav.is-open .gnav__curtain {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--gnav-dur) var(--gnav-ease);
}

.gnav__content { max-width: 1024px; margin: 0 auto; padding: var(--nav-safe-top) var(--s-6) 0; }
.gnav__list {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: var(--gnav-h);
  margin: 0 calc(-1 * var(--s-2));
}
.gnav__item { display: flex; align-items: center; pointer-events: auto; }
.gnav__trigger { position: relative; display: flex; align-items: center; }
.gnav__link {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--gnav-h);
  padding: 0 var(--s-2);
  border: 0;
  background: none;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-ui);
  white-space: nowrap;
  color: var(--gnav-link);
  transition: color var(--gnav-dur) var(--gnav-ease);
}
.gnav__link:hover,
.gnav__item.is-current .gnav__link,
.gnav__link[aria-current="page"] { color: var(--gnav-link-hover); }
.gnav__logo img { display: block; width: 22px; height: 22px; }
.gnav__logo span { font-family: var(--font-display); font-size: var(--fs-small); font-weight: 600; color: var(--gnav-link-hover); letter-spacing: -0.01em; }
.gnav :focus-visible { outline: 2px solid var(--gnav-focus); outline-offset: -2px; border-radius: var(--s-2); }

.gnav__chevron {
  position: absolute;
  top: 50%;
  right: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 22px;
  margin-top: -11px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gnav-link);
  opacity: 0;
  pointer-events: none;
}
.gnav__link:focus-visible + .gnav__chevron,
.gnav__chevron:focus-visible { opacity: 1; pointer-events: auto; }

.gnav__buy {
  display: inline-flex;
  align-items: center;
  height: var(--gnav-buy-h);
  margin: 0 var(--s-2);
  padding: 0 var(--s-3);
  border-radius: var(--r-full);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background-color: var(--gnav-buy);
  color: var(--gnav-buy-ink);
  transition: background-color var(--gnav-dur) var(--gnav-ease);
}
.gnav__buy:hover { background-color: color-mix(in srgb, var(--gnav-buy) 86%, #fff); }
.gnav__item--menubtn,
.gnav__back { display: none; }

/* Flyouts */
.gnav__menu {
  position: absolute;
  z-index: 1;
  top: calc(var(--nav-safe-top) + var(--gnav-h));
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
}
.gnav__menu.is-active { visibility: visible; }
.gnav__menu.is-shown { pointer-events: auto; }
@media (min-width: 834px) {
  .gnav__menu {
    max-height: calc(100dvh - var(--nav-safe-top) - var(--gnav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}
.gnav__menu-inner { max-width: 1024px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-10); }
.gnav__cols {
  --gnav-gutter: clamp(14px, calc((100vw - 780px) / 5.5), 44px);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--s-7);
}
.gnav__col { padding-right: var(--gnav-gutter); }
.gnav__col:first-child { padding-right: calc(var(--gnav-gutter) * 2); }
.gnav__col:last-child { padding-right: 0; }
.gnav .gnav__group-title { margin-bottom: var(--s-3); font-size: var(--fs-caption); font-weight: 600; line-height: var(--lh-h3); color: var(--gnav-title); }
.gnav__sublink {
  display: inline-block;
  padding: var(--s-1) 0;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: var(--lh-h3);
  color: var(--gnav-sub);
  transition: color 150ms linear;
}
.gnav__sublink--elevated {
  padding: var(--s-1) 0;
  font-family: var(--font-display);
  font-size: var(--gnav-fs-big);
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: -0.015em;
  color: var(--gnav-sub-elevated);
}
.gnav__sublink:hover { color: var(--gnav-sub-hover); }
.gnav .gnav__group--elevated .gnav__group-title { margin-bottom: var(--s-2); }

.gnav__menu .gnav__group-title,
.gnav__menu .gnav__sublink {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 120ms var(--gnav-ease), transform 120ms var(--gnav-ease), color 150ms linear;
}
.gnav__menu.is-shown .gnav__group-title,
.gnav__menu.is-shown .gnav__sublink {
  opacity: 1;
  transform: none;
  transition:
    opacity 280ms var(--gnav-ease) calc(60ms + var(--gi, 0) * 18ms),
    transform 280ms var(--gnav-ease) calc(60ms + var(--gi, 0) * 18ms),
    color 150ms linear;
}

@media (max-width: 833px) {
  .gnav__content { padding: var(--nav-safe-top) var(--s-4) 0; }
  .gnav__list { flex-wrap: wrap; justify-content: flex-start; height: auto; margin: 0 calc(-1 * var(--s-2)); }
  .gnav__item { height: var(--gnav-h); }
  .gnav__item--logo { margin-right: auto; transition: opacity var(--gnav-dur) var(--gnav-ease); }
  .gnav__buy { margin: 0 var(--s-1); }
  .gnav__item--menubtn { display: flex; }
  .gnav__menubtn {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    width: var(--s-9);
    height: var(--gnav-h);
    padding: 0 var(--s-2);
    border: 0;
    background: none;
  }
  .gnav__menubtn span {
    display: block;
    width: 17px;
    height: 1.5px;
    border-radius: 1px;
    background-color: var(--gnav-link-hover);
    transition: transform 360ms var(--gnav-sheet-ease);
  }
  .gnav.is-menu-open .gnav__menubtn span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .gnav.is-menu-open .gnav__menubtn span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

  .gnav__item--section { display: none; order: 1; flex-basis: 100%; height: auto; }
  .gnav.is-menu-open .gnav__item--section { display: flex; }
  .gnav.is-menu-open .gnav__item--section:nth-child(2) { margin-top: var(--s-5); }
  .gnav__item--section .gnav__link {
    height: auto;
    padding: var(--s-2) var(--s-8);
    font-family: var(--font-display);
    font-size: var(--gnav-fs-sheet);
    font-weight: 600;
    line-height: var(--lh-ui);
    letter-spacing: -0.015em;
    color: var(--gnav-sub-elevated);
  }
  .gnav:not(.is-sub) .gnav__item--section .gnav__link {
    animation: gnav-sheet-in 360ms var(--gnav-ease) both;
    animation-delay: calc(60ms + var(--gi, 0) * 24ms);
  }
  .gnav__item--section .gnav__link:hover { color: var(--gnav-sub-hover); }
  .gnav__chevron { display: none; }

  .gnav.is-menu-open { --gnav-flyout-h: calc(100dvh - var(--nav-safe-top) - var(--gnav-h)); }
  .gnav.is-menu-open .gnav__list { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
  .gnav.is-menu-open.is-menu-closing { --gnav-flyout-h: 0px; }
  .gnav.is-menu-closing .gnav__item--section { opacity: 0; transition: opacity 160ms var(--gnav-ease); }

  .gnav.is-sub .gnav__item--section > .gnav__trigger,
  .gnav.is-sub .gnav__item--section > .gnav__link { visibility: hidden; }
  .gnav.is-sub .gnav__item--logo { opacity: 0; pointer-events: none; }
  .gnav__back {
    position: absolute;
    top: var(--nav-safe-top);
    left: var(--s-2);
    z-index: 2;
    align-items: center;
    justify-content: flex-start;
    width: var(--s-9);
    height: var(--gnav-h);
    padding: 0 0 0 var(--s-2);
    border: 0;
    background: none;
    color: var(--gnav-link-hover);
    pointer-events: auto;
  }
  .gnav.is-sub .gnav__back { display: flex; animation: gnav-sheet-in 280ms var(--gnav-ease) both; }
  .gnav__menu {
    height: calc(100dvh - var(--nav-safe-top) - var(--gnav-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .gnav__menu-inner { padding: var(--s-5) var(--s-8) var(--s-10); }
  .gnav__cols { display: block; }
  .gnav__col, .gnav__col:first-child { padding: 0; }
  .gnav__col + .gnav__col { margin-top: var(--s-8); }
  .gnav .gnav__group-title { margin-bottom: var(--s-3); font-size: var(--fs-label); }
  .gnav__sublink { padding: var(--s-2) 0; font-size: var(--fs-read); }
  .gnav__sublink--elevated { padding: var(--s-2) 0; font-size: var(--gnav-fs-sheet); line-height: var(--lh-ui); }
}
@media (max-width: 380px) {
  .gnav__item--section .gnav__link { padding-inline: var(--s-6); }
  .gnav__menu-inner { padding-inline: var(--s-6); }
}
@keyframes gnav-sheet-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

html.gnav-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .gnav__bg, .gnav__curtain, .gnav__menu .gnav__group-title, .gnav__menu .gnav__sublink, .gnav__menubtn span {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  .gnav__menu .gnav__group-title, .gnav__menu .gnav__sublink { transform: none; }
  .gnav__link, .gnav__back { animation: none !important; }
}

@media print {
  .gnav, .footer__wordmark { display: none; }
}