/* ===== MICHROMA, SELF HOSTED ==============================================
   It used to come from Google Fonts. Two reasons it does not any more:

   1. PRIVACY. A Google Fonts stylesheet hands every visitor's IP address
      to Google before a single word of the page renders. A German court
      has already ruled that a GDPR breach, and this site has to carry a
      privacy policy that says what it shares — "nothing, unless you ask
      us to" is a much easier sentence to write truthfully.
   2. IT IS FASTER. Two preconnects and a blocking stylesheet on another
      origin, to fetch a 26 KB file, versus fetching the 26 KB file.

   Michroma is SIL Open Font Licence 1.1, which permits this as long as
   the licence travels with it — see assets/fonts/OFL.txt.

   swap, so the page is readable in a fallback while the font arrives
   rather than showing nothing.
   ========================================================================= */
@font-face {
  font-family: 'Michroma';
  src: url('../assets/fonts/Michroma-Regular.woff2') format('woff2'),
       url('../assets/fonts/Michroma-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Shuv site: shared stylesheet for index.html, privacy.html and terms.html

   HOW THE LAYOUT WORKS
   - The phone layout is the default. Everything inside the DESKTOP media
     query at the bottom (min-width: 900px) switches to the desktop layout.
     There are no separate mobile/desktop files.
   - Sizes come from the custom properties in :root, so most layout tweaks
     are a one line edit there (phone values first, desktop values in the
     media query).
   - Michroma ships a single weight. Text is thickened with a thin
     -webkit-text-stroke in its own colour (0.03em body, about 0.045em
     headings). Keep that when porting, or the type looks too light.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* Brand colours (from the app theme) */
  --cobalt: #2742dd;       /* borders + hard "depth" shadows */
  --peri: #7382f0;         /* primary: button fills, card headings */
  --peri-soft: #7f9cff;    /* nav links, most outlined headings, menu */
  --ink: #1b2150;          /* strongest text: prices, typed input */
  --text: #6d78b4;         /* body copy */
  --muted: #8088b8;
  --panel: #eef1ff;        /* Pro column highlight */
  --rule: #d9e0fb;         /* divider lines */
  --good: #22c97a;         /* speech bubble, "First 4 days free" */
  --pink: #ff5a9e;         /* safety box, menu close button */
  --pink-deep: #c2185b;
  --legal-strong: #4f5aa0; /* bold lead-ins in the privacy policy */

  /* Type scale, PHONE. Scales with the screen (vw) to match the phone
     mockups, but is capped so tablets (600 to 899px wide) don't balloon. */
  --h1: min(7.6vw, 43px);     /* hero headline */
  --big: min(11.5vw, 66px);   /* section titles: TUTORIAL, SAFETY, ... */
  --ch: min(7.4vw, 36px);     /* card headings */
  --body: min(4.6vw, 26px);   /* body copy */
  --btn: min(4.3vw, 24px);    /* button labels */

  /* Spacing, PHONE */
  --pad: 2vw;        /* page side padding */
  --hdr-r: 3.5vw;    /* header side padding */
  --why-in: 4vw;     /* extra side inset: "Why choose Shuv?" */
  --form-in: 4vw;    /* extra side inset: contact form */
  --doc-in: 4.5vw;   /* extra side inset: legal text */
  --pop-mt: -12%;    /* pulls the skater scene up under the Pop card */
  --pop-mb: 0px;

  /* Sticky header height. js/shuv.js keeps this equal to the real header,
     so jumps to #sections land just below it instead of under it. */
  --header-h: 72px;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: Michroma, "Arial Black", sans-serif;
  -webkit-font-smoothing: antialiased;
  animation: page-in .35s ease;           /* every page fades in on load */
}
/* Added by js/shuv.js just before going to another page of the site */
body.is-leaving { opacity: 0; transition: opacity .3s ease; }
@keyframes page-in { from { opacity: 0; } }

/* Wrapper for the whole page. "clip" (not "hidden") so the sticky header
   keeps working while nothing can cause sideways scrolling on phones. */
.page {
  max-width: 1600px;
  margin-inline: auto; min-height: 100vh; overflow-x: clip; }

h1, h2, h3 { font-weight: 400; }        /* Michroma has no bold; never synthesize it */
a { color: var(--peri); text-decoration: none; }
a:hover { color: var(--cobalt); }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--peri); color: #fff; }
input::placeholder, textarea::placeholder { color: #9aa8f5; text-transform: uppercase; }

/* Anchor targets stop just below the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

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

/* ---------- 3. Shared pieces --------------------------------------------- */

/* Outlined headings: white letters with a thick round outline, like the
   app's headings. Built from 48 hard text-shadows in a circle of radius
   --o (0.15em = the app's 3px outline on 20px text, kept as a ratio).
   Don't swap this for -webkit-text-stroke: that gives sharp mitred corners.
   Colour: default periwinkle-soft; add .outline--peri or .outline--pink. */
.outline {
  --o: 0.15em;
  --oc: var(--peri-soft);
  color: #fff;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow:
    calc(var(--o) * 1.000) calc(var(--o) * 0.000) 0 var(--oc),
    calc(var(--o) * 0.991) calc(var(--o) * 0.131) 0 var(--oc),
    calc(var(--o) * 0.966) calc(var(--o) * 0.259) 0 var(--oc),
    calc(var(--o) * 0.924) calc(var(--o) * 0.383) 0 var(--oc),
    calc(var(--o) * 0.866) calc(var(--o) * 0.500) 0 var(--oc),
    calc(var(--o) * 0.793) calc(var(--o) * 0.609) 0 var(--oc),
    calc(var(--o) * 0.707) calc(var(--o) * 0.707) 0 var(--oc),
    calc(var(--o) * 0.609) calc(var(--o) * 0.793) 0 var(--oc),
    calc(var(--o) * 0.500) calc(var(--o) * 0.866) 0 var(--oc),
    calc(var(--o) * 0.383) calc(var(--o) * 0.924) 0 var(--oc),
    calc(var(--o) * 0.259) calc(var(--o) * 0.966) 0 var(--oc),
    calc(var(--o) * 0.131) calc(var(--o) * 0.991) 0 var(--oc),
    calc(var(--o) * 0.000) calc(var(--o) * 1.000) 0 var(--oc),
    calc(var(--o) * -0.131) calc(var(--o) * 0.991) 0 var(--oc),
    calc(var(--o) * -0.259) calc(var(--o) * 0.966) 0 var(--oc),
    calc(var(--o) * -0.383) calc(var(--o) * 0.924) 0 var(--oc),
    calc(var(--o) * -0.500) calc(var(--o) * 0.866) 0 var(--oc),
    calc(var(--o) * -0.609) calc(var(--o) * 0.793) 0 var(--oc),
    calc(var(--o) * -0.707) calc(var(--o) * 0.707) 0 var(--oc),
    calc(var(--o) * -0.793) calc(var(--o) * 0.609) 0 var(--oc),
    calc(var(--o) * -0.866) calc(var(--o) * 0.500) 0 var(--oc),
    calc(var(--o) * -0.924) calc(var(--o) * 0.383) 0 var(--oc),
    calc(var(--o) * -0.966) calc(var(--o) * 0.259) 0 var(--oc),
    calc(var(--o) * -0.991) calc(var(--o) * 0.131) 0 var(--oc),
    calc(var(--o) * -1.000) calc(var(--o) * 0.000) 0 var(--oc),
    calc(var(--o) * -0.991) calc(var(--o) * -0.131) 0 var(--oc),
    calc(var(--o) * -0.966) calc(var(--o) * -0.259) 0 var(--oc),
    calc(var(--o) * -0.924) calc(var(--o) * -0.383) 0 var(--oc),
    calc(var(--o) * -0.866) calc(var(--o) * -0.500) 0 var(--oc),
    calc(var(--o) * -0.793) calc(var(--o) * -0.609) 0 var(--oc),
    calc(var(--o) * -0.707) calc(var(--o) * -0.707) 0 var(--oc),
    calc(var(--o) * -0.609) calc(var(--o) * -0.793) 0 var(--oc),
    calc(var(--o) * -0.500) calc(var(--o) * -0.866) 0 var(--oc),
    calc(var(--o) * -0.383) calc(var(--o) * -0.924) 0 var(--oc),
    calc(var(--o) * -0.259) calc(var(--o) * -0.966) 0 var(--oc),
    calc(var(--o) * -0.131) calc(var(--o) * -0.991) 0 var(--oc),
    calc(var(--o) * 0.000) calc(var(--o) * -1.000) 0 var(--oc),
    calc(var(--o) * 0.131) calc(var(--o) * -0.991) 0 var(--oc),
    calc(var(--o) * 0.259) calc(var(--o) * -0.966) 0 var(--oc),
    calc(var(--o) * 0.383) calc(var(--o) * -0.924) 0 var(--oc),
    calc(var(--o) * 0.500) calc(var(--o) * -0.866) 0 var(--oc),
    calc(var(--o) * 0.609) calc(var(--o) * -0.793) 0 var(--oc),
    calc(var(--o) * 0.707) calc(var(--o) * -0.707) 0 var(--oc),
    calc(var(--o) * 0.793) calc(var(--o) * -0.609) 0 var(--oc),
    calc(var(--o) * 0.866) calc(var(--o) * -0.500) 0 var(--oc),
    calc(var(--o) * 0.924) calc(var(--o) * -0.383) 0 var(--oc),
    calc(var(--o) * 0.966) calc(var(--o) * -0.259) 0 var(--oc),
    calc(var(--o) * 0.991) calc(var(--o) * -0.131) 0 var(--oc);
}
.outline--peri { --oc: var(--peri); }
.outline--pink { --oc: var(--pink); }

/* Divider line */
.rule { height: 4px; border-radius: 2px; background: var(--rule); }

/* Cards: 4px cobalt border + hard 8px cobalt shadow (no blur) */
.card {
  border: 4px solid var(--cobalt);
  border-radius: 28px;
  box-shadow: 0 8px 0 var(--cobalt);
  background: #fff;
  padding: .8em .5em .9em;
  text-align: center;
  font-size: var(--body);
}
.card__title {
  margin: 0;
  color: var(--peri);
  text-transform: uppercase;
  font-size: var(--ch);
  line-height: 1.15;
  -webkit-text-stroke: .045em currentColor;
}
.card__text { margin: .6em 0 0; line-height: 1.3; -webkit-text-stroke: .03em currentColor; }

/* Buttons press down onto their shadow */
.btn {
  display: block;
  width: 100%;
  border: 4px solid var(--cobalt);
  border-radius: 24px;
  background: var(--peri);
  box-shadow: 0 8px 0 var(--cobalt);
  color: #fff;
  font-family: inherit;
  font-size: var(--btn);
  text-transform: uppercase;
  padding: .8em .6em;
  cursor: pointer;
  -webkit-text-stroke: .035em currentColor;
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:active { transform: translateY(8px); box-shadow: 0 0 0 var(--cobalt); }

/* "Jello" press. js/shuv.js adds .is-jello to any .jello element on
   pointerdown. Uses the separate `scale` property so it combines with the
   :active translate above. */
@keyframes shuv-jello {
  0%   { scale: 1 1; }
  25%  { scale: 1.12 .86; }
  40%  { scale: .9 1.1; }
  55%  { scale: 1.06 .95; }
  70%  { scale: .97 1.03; }
  85%  { scale: 1.01 .99; }
  100% { scale: 1 1; }
}
.is-jello { animation: shuv-jello .6s cubic-bezier(.3, .7, .4, 1); }

/* ---------- 4. Header ---------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 40; background: #fff; }
/* PHONE: logo centred, hamburger on the right */
.site-header__inner {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 14px var(--hdr-r);
}
.logo { grid-column: 2; justify-self: center; }
.logo img { width: min(220px, 58vw); }
.nav-desktop { display: none; }
.menu-btn {
  grid-column: 3;
  width: 44px; height: 44px;
  border: 0; background: transparent;
  padding: 6px 2px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer;
}
.menu-btn span { display: block; height: 6px; background: var(--peri-soft); }

/* ---------- 5. Phone menu (slides in from the right) ---------------------- */
.menu-backdrop { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.menu-backdrop.is-open { pointer-events: auto; }
.menu {
  position: fixed; z-index: 60;
  top: 92px; right: 0;
  width: min(72vw, 380px);
  max-height: calc(100dvh - 108px);      /* scrolls on short/landscape phones */
  overflow-y: auto;
  background: #fff;
  border: 6px solid var(--peri-soft);
  border-right: 0;
  border-radius: 56px 0 0 56px;
  padding: 32px 20px 40px;
  display: flex; flex-direction: column; align-items: center; gap: 36px;
  transform: translateX(calc(100% + 12px));
  visibility: hidden;
  transition: transform .42s cubic-bezier(.22, .8, .24, 1), visibility 0s linear .42s;
}
.menu.is-open {
  transform: none;
  visibility: visible;
  box-shadow: -12px 0 0 rgba(127, 156, 255, .18);
  transition: transform .42s cubic-bezier(.22, .8, .24, 1);
}
.menu:focus { outline: none; }
.menu__nav {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: clamp(34px, 10.5vw, 52px);
  line-height: 1.12;
  -webkit-text-stroke: .04em currentColor;
}
.menu__nav a { color: var(--peri-soft); }
.menu__close {
  width: 100%;
  border: 4px solid var(--pink-deep);
  border-radius: 22px;
  background: var(--pink);
  box-shadow: 0 8px 0 var(--pink-deep);
  color: #fff;
  font-family: inherit;
  font-size: clamp(30px, 9vw, 44px);
  padding: 10px 0 14px;
  cursor: pointer;
  -webkit-text-stroke: .04em currentColor;
  transition: transform .08s ease, box-shadow .08s ease;
}
.menu__close:active { transform: translateY(8px); box-shadow: 0 0 0 var(--pink-deep); }

/* ---------- 6. Home: hero ------------------------------------------------ */
.hero {
  max-width: 1600px; margin: 0 auto;
  padding: 16px var(--pad) 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px;
}
.hero__art { flex: 1 1 380px; position: relative; padding-bottom: 20px; }
.hero__art > img { width: min(88%, 720px); margin: 0 auto; }
.hero__copy { flex: 1 1 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero__title { margin: 0; text-align: center; font-size: var(--h1); line-height: 1.22; text-wrap: balance; }

/* Store badges. PHONE: pinned bottom right of Rash. DESKTOP: bottom left. */
.store-badges { position: absolute; right: 0; bottom: 0; display: grid; gap: 12px; justify-items: start; }
.store-badge {
  border: 3px solid var(--cobalt);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 0 var(--cobalt);
  padding: 8px 14px;
  color: var(--ink);
}
.store-badge--fill { background: var(--peri); color: #fff; }
.store-badge__kicker {
  display: block;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}
.store-badge--fill .store-badge__kicker { color: inherit; }
.store-badge__name { display: block; margin-top: 2px; font-size: 13px; text-transform: uppercase; -webkit-text-stroke: .03em currentColor; }

/* ---------- 7. Home: Pop. Slide. Land. ------------------------------------ */
.pop {
  max-width: 1600px; margin: 0 auto;
  padding: 48px var(--pad);
  display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: center; gap: 40px 48px;
}
.pop__card { position: relative; z-index: 2; flex: 1 1 420px; }
.pop__card .card__title { line-height: 1.1; }

/* The scene is one fixed-aspect box. Every piece is absolutely positioned
   in % of the box (measured from the mockup), and the speech bubble is
   sized in cqw (container query units), so the scene scales like a picture.
   Edit positions here, not in the HTML. */
.pop-scene {
  position: relative; z-index: 1;
  flex: 1 1 380px;
  max-width: 820px;
  margin: var(--pop-mt) auto var(--pop-mb);
  aspect-ratio: 1080 / 1645;
  container-type: inline-size;
}
.pop-scene > img { position: absolute; }
.pop-scene__girl  { left: 15.7%;  top: 13.09%; width: 70%; }
.pop-scene__combo { left: 10.95%; top: 7.6%;   width: 24.96%; }
.pop-scene__auto  { left: 35.06%; top: 14.1%;  width: 40.48%; }
.pop-scene__rec   { left: 75.84%; top: 8.85%;  width: 17.29%; }
.pop-scene__rash  { left: 12%;    top: 67.62%; width: 29.5%; }

/* Speech bubble, same construction as the app's camera bubble:
   thick bottom border, tail = green triangle with a smaller white one inside. */
.bubble {
  position: absolute; left: 40.7%; top: 83.81%; width: 44%;
  border: .7cqw solid var(--good);
  border-bottom-width: 1.63cqw;
  border-radius: 3.73cqw;
  background: #fff;
  padding: 1.4cqw 3.03cqw;
}
.bubble::before, .bubble::after { content: ""; position: absolute; width: 0; height: 0; }
.bubble::before {
  left: -3.5cqw; top: 3.27cqw;
  border-top: 1.4cqw solid transparent;
  border-bottom: 2.8cqw solid transparent;
  border-right: 3.5cqw solid var(--good);
}
.bubble::after {
  left: -2.1cqw; top: 3.97cqw;
  border-top: .7cqw solid transparent;
  border-bottom: 1.17cqw solid transparent;
  border-right: 3.03cqw solid #fff;
}
.bubble p {
  position: relative; margin: 0;
  color: var(--peri);
  font-size: 3.5cqw;
  line-height: 1.4;
  -webkit-text-stroke: .06em currentColor;
  paint-order: stroke fill;
}

/* ---------- 8. Home: tutorial -------------------------------------------- */
/* z-index keeps the tutorial above Rash if the scene above ever overlaps it */
.tutorial { position: relative; z-index: 3; max-width: 1600px; margin: 0 auto; padding: 56px var(--pad) 24px; }
.tutorial__title { margin: 0 0 clamp(28px, 4vw, 80px); text-align: center; font-size: var(--big); line-height: 1; }
/* Rows alternate sides on desktop. On phones the picture always sits above its card. */
.tut-row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; margin-bottom: clamp(56px, 7vw, 120px); }
.tut-row:last-child { margin-bottom: 0; }
.tut-row--flip { flex-direction: row-reverse; }
.tut-row__art { flex: 1 1 380px; }
.tut-row__art img { width: min(72%, 540px); margin: 0 auto; }
.tut-row__art--narrow img { width: min(58%, 330px); }
.tut-row > .card { flex: 1 1 420px; }

/* ---------- 9. Home: why choose Shuv -------------------------------------- */
.why {
  max-width: 1100px; margin: 0 auto;
  padding: 80px calc(var(--pad) + var(--why-in)) 24px;
  text-align: center;
  font-size: var(--body);
}
.why__title { margin: 0; font-size: var(--big); line-height: 1.15; text-wrap: balance; }
.why .rule { width: 85%; margin: .9em auto; }
.why .rule:last-child { margin-bottom: 0; }
.why h3 { margin: 0; color: var(--peri-soft); text-transform: uppercase; font-size: var(--ch); line-height: 1.2; -webkit-text-stroke: .045em currentColor; }
.why p { margin: .5em auto 0; max-width: 22em; line-height: 1.3; -webkit-text-stroke: .03em currentColor; }

/* ---------- 10. Home: Shuv Pro -------------------------------------------- */
.pro { max-width: 1600px; margin: 0 auto; padding: 80px var(--pad) 24px; }
.pro__title { margin: 0 0 clamp(28px, 4vw, 72px); text-align: center; font-size: var(--big); line-height: 1.15; text-wrap: balance; }
.pro__row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px; }
.pro__art { flex: 1 1 380px; }
.pro__art img { width: min(70%, 440px); margin: 0 auto; }
.pro__card { flex: 1 1 440px; padding: 1em .9em 1.1em; text-align: left; font-size: calc(var(--body) * .72); }
.pro__card .card__title { text-align: center; font-size: calc(var(--ch) * 1.111); }

.pro-table { width: 100%; border-collapse: collapse; margin-top: 1em; }
.pro-table thead th { padding: 0 0 .6em; font-weight: 400; letter-spacing: .08em; color: var(--muted); }
.pro-table .free-h { font-size: .75em; }
.pro-table thead .pro-col { padding: .5em 0 .6em; background: var(--panel); border-radius: 12px 12px 0 0; }
.pro-pill {
  display: inline-block;
  font-size: .7em;
  letter-spacing: .08em;
  color: #fff;
  background: var(--peri);
  border: 2px solid var(--cobalt);
  border-bottom-width: 4px;
  border-radius: 10px;
  padding: 4px 8px;
}
.pro-table tbody th { padding: .75em .4em .75em 0; text-align: left; font-weight: 400; line-height: 1.3; -webkit-text-stroke: .03em currentColor; }
.pro-table tbody td { padding: .75em 0; text-align: center; width: 3.4em; }
.pro-table tbody td.pro-col { background: var(--panel); }
.pro-table tbody tr + tr > * { border-top: 3px solid var(--panel); }
.tick {
  display: inline-block; vertical-align: middle;
  width: 1.1em; height: 1.1em;
  fill: none; stroke: var(--muted); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
}
.pro-col .tick { stroke: var(--peri); }
.dash { display: inline-block; vertical-align: middle; width: .8em; height: 4px; border-radius: 3px; background: var(--rule); }

.pro__price { display: flex; align-items: baseline; justify-content: center; gap: .4em; margin-top: 1.2em; }
.pro__amount { font-size: 2.1em; color: var(--ink); -webkit-text-stroke: .04em currentColor; }
.pro__per { color: var(--muted); }
.pro__trial { margin: .3em 0 0; text-align: center; color: var(--good); -webkit-text-stroke: .03em currentColor; }
.pro__fine { margin: 1.2em 0 0; text-align: center; font-size: .72em; line-height: 1.55; color: var(--muted); }

/* ---------- 11. Home: safety --------------------------------------------- */
.safety { max-width: 960px; margin: 0 auto; padding: 48px var(--pad) 24px; }
.safety__box {
  border: 6px solid var(--pink);
  border-radius: 48px;
  background: #fff;
  padding: 1.2em .9em 0;
  overflow: hidden;
  font-size: var(--body);
}
.safety__title { margin: 0; text-align: center; font-size: var(--big); line-height: 1.05; }
.safety .rule { width: 90%; margin: .8em auto; }
.safety__sub { margin: 0 0 .9em; text-align: center; color: var(--pink); text-transform: uppercase; font-size: var(--ch); line-height: 1.15; -webkit-text-stroke: .045em currentColor; }
.safety__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1em;
  line-height: 1.3;
  -webkit-text-stroke: .03em currentColor;
}
.safety__list li::before { content: "\2022"; }
.safety__art { width: 68%; margin: 1em auto .6em; }

/* ---------- 12. Home: contact -------------------------------------------- */
.contact { max-width: 900px; margin: 0 auto; padding: 88px var(--pad) 24px; font-size: var(--body); }
.contact__title { margin: 0; text-align: center; font-size: var(--big); line-height: 1; }
.contact__rule { width: 90%; margin: .9em auto 1.2em; }
.contact-form { display: flex; flex-direction: column; gap: .5em; padding: 0 var(--form-in); }
.contact-form label { color: var(--peri-soft); text-transform: uppercase; font-size: .8em; -webkit-text-stroke: .04em currentColor; }
.contact-form .contact-form__gap { margin-top: .6em; }
.contact-form__rule { margin: .8em 0 .4em; }
.contact-form .btn { margin-top: 1.2em; }
.field {
  width: 100%;
  border: 3px solid var(--cobalt);
  border-radius: 22px;
  background: #fff;
  padding: .8em .9em;
  font-family: inherit;
  font-size: max(16px, .9em);   /* never under 16px, or iPhones zoom in on focus */
  color: var(--ink);
  outline-color: var(--peri);
}
textarea.field { resize: vertical; }
.socials { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 56px; }
.socials a { display: flex; padding: 6px; color: var(--peri); }

/* ---------- 13. Legal pages (privacy.html, terms.html) --------------------- */
.doc-page { max-width: 1100px; margin: 0 auto; padding: 32px var(--pad) 24px; }
.doc-page__title { margin: 0; padding: 0 var(--o); text-align: center; font-size: var(--big); line-height: 1.05; text-wrap: balance; }
/* A LONG SINGLE WORD CANNOT WRAP, and Michroma is a very wide face.
   "UNSUBSCRIBE" is eleven characters with no break opportunity, so at the
   base --big of min(11.5vw, 66px) it runs off the right edge at every
   phone width — 390px and 320px alike. "PRIVACY" is short enough and
   "TERMS OF SERVICE" has spaces to wrap on, which is why only one page
   showed it.

   Sized so eleven Michroma capitals fit inside the content box down to a
   320px screen, with room to spare. */
.doc-page__title--long { font-size: min(8.6vw, 50px); }

.doc-page__rule { width: 85%; margin: 28px auto 40px; }
.doc {
  max-width: 900px; margin: 0 auto;
  padding: 0 var(--doc-in);
  font-size: clamp(15px, 1.7vw, 30px);
  line-height: 1.6;
  -webkit-text-stroke: .03em currentColor;
}
.doc p, .doc ul { margin: 20px 0 0; }
.doc p.doc__date { margin: 0; text-transform: uppercase; font-size: clamp(15px, 1.9vw, 34px); line-height: 1.4; -webkit-text-stroke: .04em currentColor; }
.doc h2 { margin: 44px 0 16px; color: var(--text); text-transform: uppercase; font-size: clamp(18px, 2.2vw, 40px); line-height: 1.3; -webkit-text-stroke: .04em currentColor; }
.doc ul { padding-left: 1.2em; display: flex; flex-direction: column; gap: 12px; }
.doc strong { font-weight: 400; color: var(--legal-strong); }
.doc__end-rule { margin: 48px 0 28px; }

/* ---------- 14. Footer --------------------------------------------------- */
.site-footer {
  margin-top: 72px;
  padding: 28px 20px 40px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--text);
  -webkit-text-stroke: .02em currentColor;
}
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.site-footer__small { margin-top: 8px; }

/* ==========================================================================
   DESKTOP (900px and wider)
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    /* THE DESKTOP SCALE WAS THE PHONE SCALE IN DISGUISE. Every token was
       a vw multiple with only an upper cap, which is right on a phone —
       where vw barely varies — and wrong on a monitor, where it keeps
       growing. Measured at 1440px the old values gave 40px body copy,
       32px nav links and 105px section titles. Body text wants 17 to 20;
       everything read as though the browser were zoomed in, which is
       exactly how it was described.

       clamp() rather than min() so each one has a floor as well as a
       ceiling, and the multipliers are cut so the ceiling is reached on a
       big monitor rather than exceeded on a laptop.

       The display sizes stay deliberately large — a 62px hero and 72px
       section titles are still loud, because the brand is loud. It is the
       things you READ that had to come down. */
    --h1: clamp(42px, 3.6vw, 62px);
    --big: clamp(44px, 4.4vw, 72px);
    --ch: clamp(23px, 1.9vw, 32px);
    --body: clamp(17px, 1.15vw, 20px);
    --btn: clamp(17px, 1.2vw, 21px);
    --nav: clamp(16px, 1.1vw, 19px);
    --pad: 28px;
    --hdr-r: 28px;
    --why-in: 0px;
    --form-in: 24px;
    --doc-in: 0px;
    --pop-mt: 72px;    /* clear of the Google Play badge above */
    --pop-mb: 72px;    /* Rash stays clear of the TUTORIAL title below */
    --header-h: 97px;
  }

  /* Header: logo left, text links right, no hamburger */
  .site-header__inner { display: flex; max-width: 1600px; margin: 0 auto; padding: 18px var(--pad); gap: 24px; }
  .logo { flex: none; }
  .logo img { width: clamp(190px, 21vw, 440px); }
  .nav-desktop {
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px .4em;
    margin-left: auto;
    font-size: var(--nav);
    -webkit-text-stroke: .04em currentColor;
  }
  .nav-desktop a { color: var(--peri-soft); }
  .nav-desktop a:hover { color: var(--cobalt); }
  .menu-btn, .menu, .menu-backdrop { display: none; }

  /* Store badges move to the bottom left of Rash and grow */
  .store-badges { right: auto; left: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
  .store-badge { border-radius: 16px; padding: 12px 22px; }
  .store-badge__kicker { font-size: min(1vw, 18px); }
  .store-badge__name { font-size: min(1.5vw, 30px); margin-top: 4px; }
}

/* Respect "reduce motion": no fades, slides or wobbles */
@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  body.is-leaving { transition: none; }
  .menu, .menu.is-open { transition: none; }
  .is-jello { animation: none; }
}

/* ===== CONTACT FORM: honeypot + result line ==============================
   .hp must be invisible to people WITHOUT being display:none — some bots
   skip hidden inputs, and the point is that they fill this one. Pushed off
   screen instead, and aria-hidden + tabindex -1 keep it away from anyone
   using a keyboard or a screen reader. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.contact-form__status {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  min-height: 1.5em;   /* reserve the line so the form does not jump */
}
.contact-form__status.is-good { color: var(--ink, #2742dd); }
.contact-form__status.is-bad  { color: var(--pink, #ff5c9d); }

/* ==========================================================================
   DESKTOP ARTWORK SIZING (900px and wider)

   The artwork is sized as a percentage of its flex column with a pixel
   cap, which is right on a phone and generous on a monitor: at 1440px the
   hero was rendering 581x782, taller than most laptop viewports, so you
   met Rash and had to scroll to reach the headline he belongs to.

   Roughly 15% off each, which keeps every composition intact — the
   pop-scene's pieces are positioned in percentages of the scene, so
   shrinking the scene moves them together rather than scattering them.

   A separate block at the end of the file rather than edits inside the
   main desktop one: same specificity, later wins, and the original
   values stay readable above for comparison.
   ========================================================================== */
@media (min-width: 900px) {
  .hero__art > img        { width: min(75%, 615px); }
  /* The 820px cap was never what limited this one — its flex column was,
     so lowering the cap changed nothing. A viewport-relative ceiling
     does bite, and scales with the monitor instead of pinning one
     width. Everything inside is positioned in percentages of the scene,
     so the pieces move together. */
  .pop-scene              { max-width: min(100%, 38vw); }
  .tut-row__art img       { width: min(61%, 460px); }
  .tut-row__art--narrow img { width: min(49%, 281px); }
  .pro__art img           { width: min(60%, 374px); }
  .safety__art            { width: 58%; }
}