/* ==========================================================================
   Lune Line – luneline.com
   One stylesheet, mobile first. Tokens mirror the Lune Line design system.
   ========================================================================== */

/* ---------- Font: Reddit Sans, one self-hosted variable file ---------- */
@font-face {
  font-family: "Reddit Sans";
  src: url("../fonts/reddit-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Surfaces */
  --ink: #1B1C24;          /* page background */
  --night: #272A41;        /* panels */
  --dusk: #31355A;         /* raised panels, hover, hairlines */
  --indigo: #3B47BF;       /* illustrations */
  --blue: #4466F2;         /* primary buttons, sparkle bullets */
  --blue-hover: #3858E6;
  --link: #7B93FF;         /* inline text links – Blue is 3.6:1 on Ink */
  --link-hover: #AFC0FF;
  --focus: #1FB5E6;        /* cyan focus ring */

  /* Text */
  --text-heading: #FFFFFF;
  --text-body: #C9CBD6;
  --text-small: #8E91A5;   /* only on Ink – on panels small text uses --text-body */

  /* Gradients – display headline, step numbers, phone-frame outlines,
     the secondary button outline and the hero arc only */
  --grad-cool: linear-gradient(to top right, #4D6BFF, #1FB5E6, #58D68D);
  --grad-warm: linear-gradient(90deg, #E3348F, #8B5CF6, #4D6BFF);
  --grad-warm-loop: linear-gradient(90deg, #E3348F, #8B5CF6, #4D6BFF, #8B5CF6, #E3348F);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --grad-frame: linear-gradient(160deg, #4D6BFF, #E3348F 55%, #FFFFFF);

  /* Type */
  --font: "Reddit Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(2.6rem, 1.933rem + 2.963vw, 4.6rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.778vw, 3.2rem);
  --fs-h3: 1.25rem;
  --fs-body: clamp(1.0625rem, 1.0417rem + 0.0926vw, 1.125rem);
  --fs-small: 0.875rem;

  /* Shape – radius follows hierarchy */
  --radius-lg: 32px;
  --radius-md: 20px;
  --radius-sm: 12px;
  --radius-qr: 16px;
  --radius-pill: 999px;

  /* Layout */
  --gutter: 16px;
  --container: 1280px;
  --header-h: 64px;
  --section-pad: 64px;
  --panel-pad: 28px 20px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --panel-pad: 56px 48px;
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --section-pad: 48px;
    --panel-pad: 88px 72px;
  }
}

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

html {
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

html.has-sticky-bar {
  scroll-padding-bottom: 88px;
}

html.modal-open {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-body);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
figure,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  color: var(--text-heading);
  text-wrap: balance;
}

p {
  max-width: 65ch;
  text-wrap: pretty;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--link-hover);
}

/* Visible focus on every interactive element: 2px cyan, 3px offset */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  background: var(--night);
  color: var(--text-heading);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 10px;
}

/* 8px tall marker at the top of the page – main.js adds .scrolled to the
   header once it leaves the viewport (no scroll listeners). */
.scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  pointer-events: none;
}

/* ---------- Type helpers ---------- */
.display {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Line 1 cool, line 2 warm. Solid white is the fallback. */
.display-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
  color: var(--text-heading);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .display-line {
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
  .display-line--cool {
    background-image: var(--grad-cool);
  }
  .display-line--warm {
    background-image: var(--grad-warm);
  }
}

.h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.1;
}

.h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
}

.small {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-small);
}

.text-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
}

/* Sparkle bullets – small four-point sparkle in Blue */
.sparkle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.sparkle-list li {
  position: relative;
  max-width: 65ch;
  padding-left: 28px;
}

.sparkle-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234466F2' d='M12 0C12.9 7.1 16.9 11.1 24 12C16.9 12.9 12.9 16.9 12 24C11.1 16.9 7.1 12.9 0 12C7.1 11.1 11.1 7.1 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn-sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.9375rem;
}

.btn-primary {
  background: var(--blue);
  color: var(--text-heading);
}

.btn-primary:hover {
  background: var(--blue-hover);
  color: var(--text-heading);
}

/* Transparent pill with a 1.5px gradient outline */
.btn-secondary {
  background: transparent;
  color: var(--text-heading);
}

.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: var(--grad-warm-loop);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.btn-secondary:hover {
  background: rgba(49, 53, 90, 0.7);
  color: var(--text-heading);
}

.btn-secondary:hover::before {
  background-position: 100% 50%;
}

.btn-secondary.btn-sm {
  padding-left: 14px;
}

/* ---------- Panels: Night with grain at low opacity ---------- */
.panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: var(--night);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../img/texture-grain.png") repeat;
  background-size: 256px auto;
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Phone frame ----------
   The screenshots ship with the design-system frame built in (dark device,
   blue–pink–white outline), so every phone is exactly 782 × 1600 and the
   image is never cropped or stretched. */
.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 782 / 1600;
}

.phone-screen {
  width: 100%;
  height: 100%;
}

/* ---------- Illustrations (grain is part of the artwork) ---------- */
.is-flipped {
  transform: scaleX(-1);
}

.ill-wrap {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.ill-wrap img {
  width: 100%;
  height: auto;
}

/* ---------- Store badges and QR tile ---------- */
.get-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 24px;
  row-gap: 20px;
}

.get-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.badge-row {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

/* Android: Google Play badge first. Both always stay visible. */
.is-android .store-badge--android {
  order: -1;
}

.store-badge {
  display: inline-flex;
  border-radius: 10px;
}

/* Official badges: unaltered, equal height */
.store-badge img {
  width: auto;
  height: 48px;
}

.get-note {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-small);
}

.rating-slot:empty {
  display: none;
}

.rating-slot {
  font-size: var(--fs-small);
  color: var(--text-body);
}

/* QR tile – desktop only; caption sits below the code */
.qr-tile {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.qr-tile-code {
  flex: none;
  width: 112px;
  height: 112px;
  padding: 2px;
  overflow: hidden;
  border-radius: var(--radius-qr);
  background: #FFFFFF;
}

.qr-tile-code img {
  width: 100%;
  height: 100%;
}

.qr-tile-caption {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-small);
}

@media (min-width: 1024px) {
  .qr-tile {
    display: flex;
  }
}

/* ==========================================================================
   Header – sticky, slim; gains a translucent blurred background once
   scrolled. On phones it slides away while scrolling down and slides back
   on scroll up (main.js sets .is-tucked).
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.2s ease, transform 0.3s var(--ease-out);
}

@media (max-width: 767.98px) {
  /* leaving is quicker (0.2s) than arriving (0.3s); main.js waits for one to leave before the other arrives */
  .site-header.is-tucked {
    transform: translateY(calc(-100% - 1px));
    transition: background-color 0.2s ease, transform 0.2s var(--ease-out);
  }
}

.site-header.scrolled {
  background-color: rgba(27, 28, 36, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: rgba(49, 53, 90, 0.7);
}

.header-inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-right: auto;
  border-radius: var(--radius-sm);
  text-decoration: none;
}

/* logo-wordmark.svg is the full lockup: ring mark plus "lune line" */
.brand-logo {
  width: auto;
  height: 32px;
}

.brand-logo--footer {
  height: 40px;
}

.cta-mark {
  width: 56px;
  height: 56px;
}

.nav {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: var(--text-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.nav-list a {
  position: relative;
}

.nav-list a::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
}

.nav-list a:hover {
  color: var(--text-heading);
}

.nav-list a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-shop {
  display: none;
}

/* Disclosure menu – phones only, works without JavaScript */
.menu {
  position: relative;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--text-heading);
  list-style: none;
  cursor: pointer;
}

.menu-toggle::-webkit-details-marker {
  display: none;
}

.menu-toggle:hover,
.menu[open] > .menu-toggle {
  background: var(--night);
}

.menu-toggle .icon {
  width: 22px;
  height: 22px;
}

.menu-icon-close,
.menu[open] .menu-icon-open {
  display: none;
}

.menu[open] .menu-icon-close {
  display: block;
}

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  border: 1px solid var(--dusk);
  border-radius: var(--radius-md);
  background: var(--night);
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  font-weight: 500;
  text-decoration: none;
}

.menu-list a:hover {
  background: var(--dusk);
}

.menu-shop {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--dusk);
}

@media (min-width: 768px) {
  .brand {
    margin-right: 0;
  }
  .nav {
    display: block;
    margin-inline: auto;
  }
  .header-shop {
    display: inline-flex;
  }
  .menu {
    display: none;
  }
}

@media (min-width: 1024px) {
  .header-inner {
    gap: 24px;
  }
  .nav-list a {
    padding: 0 14px;
  }
  .nav-list a::after {
    left: 14px;
    right: 14px;
  }
}

/* ==========================================================================
   Hero – the one bold moment: "moon to moon"
   ========================================================================== */
/* The hero runs up under the transparent header. */
.hero {
  position: relative;
  overflow: hidden;
  overflow: clip;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + 24px);
  /* width of the phones-and-arc box below 1024px */
  --m2m: min(100vw - 2 * var(--gutter), 520px);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.announce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 16px 6px 13px;
  border: 1px solid var(--dusk);
  border-radius: var(--radius-pill);
  background: var(--night);
  color: var(--text-heading);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
}

.announce:hover {
  border-color: rgba(77, 107, 255, 0.55);
  background: var(--dusk);
  color: var(--text-heading);
}

.announce-icon {
  width: 12px;
  height: 12px;
  flex: none;
  color: var(--blue);
}

.hero-sub {
  max-width: 34em;
}

.hero .get-row {
  margin-top: 8px;
  /* on desktop "Free on iPhone and Android." and "Scan to get the app." share a line */
  align-items: flex-end;
}

/* Phones and arc. The SVG viewBox (1000 × 1080) matches the box's aspect
   ratio, so the arc's end points stay on the phone tops at every size. */
.hero-visual {
  position: relative;
}

.moon-to-moon {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
  aspect-ratio: 1000 / 1080;
}

/* The crescent sits behind both phones */
.hero-ill {
  left: 32%;
  top: 2.5%;
  width: 80%;
}

.hero-arc {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
}

.hero-arc-line {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}

.hero-arc-glow {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  opacity: 0.5;
}

.phone-figure {
  position: absolute;
  z-index: 1;
  width: 37%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.phone-figure--you {
  left: 8%;
  top: 15.74%;
}

.phone-figure--partner {
  left: 55%;
  top: 19.44%;
}

/* Angled slightly toward each other */
.phone-figure--you .phone {
  transform: rotate(4deg);
}

.phone-figure--partner .phone {
  transform: rotate(-4deg);
}

.phone-caption {
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-heading); /* sits over the crescent – white keeps it above 4.5:1 */
}

/* Phones and tablets: copy first, then both phones in full with their
   captions underneath. The badges sit side by side. */
@media (max-width: 1023.98px) {
  .hero-visual {
    overflow: visible;
  }
  .moon-to-moon {
    width: var(--m2m);
    max-width: none;
  }
  .hero .badge-row {
    flex-direction: row;
  }
}

/* Narrow phones: both hero badges still fit on one row */
@media (max-width: 374px) {
  .hero .store-badge img {
    height: 42px;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 64px;
  }
  .hero-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    align-items: center;
    gap: 48px;
  }
  .hero-copy {
    gap: 24px;
  }
}

/* ==========================================================================
   Background glows – grad-01 behind the hero and tracking, grad-02 behind
   the chat phone. Full size on desktop, scaled proportionally below 1024px.
   They sit beneath every section (z-index -1), and their wrappers clip only
   sideways, so nothing cuts them off at a section edge.
   ========================================================================== */
.glow-zone {
  position: relative;
  overflow-x: clip;
}

.glow-zone::before,
.section--chat::before {
  content: "";
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* grad-01: its brightest part centred a little right of the hero copy, towards the phones */
.glow-zone::before {
  width: 170vw;
  aspect-ratio: 2230 / 1917;
  left: -31vw;
  top: 380px;
  background-image: url("../img/grad-01.png");
}

/* grad-02: centred on the chat phone */
.section.section--chat {
  overflow: visible;
  overflow-x: clip;
}

.section--chat::before {
  width: 150vw;
  aspect-ratio: 1 / 1;
  left: 50%;
  /* phones: the phone is the last thing in the section; its centre sits half a phone above the bottom padding */
  top: calc(100% - var(--section-pad) - min(307px, 71.6vw));
  transform: translate(-50%, -50%);
  background-image: url("../img/grad-02.png");
}

@media (min-width: 1024px) {
  .glow-zone::before {
    width: 2230px;
    left: calc(50% - 836px);
    top: -200px;
  }
  .section--chat::before {
    width: 2309px;
    /* centre of the left column, where the phone sits */
    left: calc(max(0px, (100% - 1280px) / 2) + 40px + (min(100%, 1280px) - 144px) / 4);
    /* centre of the phone: equal padding above and below, so the middle of the section */
    top: 50%;
  }
}

/* ==========================================================================
   Content sections – calm
   ========================================================================== */
.section {
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-block: var(--section-pad);
}

.split {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  align-items: center;
}

.split-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 36rem;
}

.split-text .sparkle-list {
  margin-top: 4px;
}

.chat-private {
  color: var(--text-heading);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
}

.phone-stack {
  position: relative;
  width: min(300px, 70vw);
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
  .split--reverse .split-media {
    order: -1;
  }
}

/* ---------- Tracking ---------- */
.phone-stack {
  isolation: isolate;
}

/* The sun sits behind the phone, half its earlier size */
.tracking-ill {
  z-index: -1;
  width: 64%;
  left: 39%;
  top: -6%; /* phones: stays in the gap below the text */
}

@media (min-width: 1024px) {
  .tracking-ill {
    width: 106%;
    left: 39%;
    top: 15%;
  }
}

/* ---------- Sharing – the centrepiece ---------- */
.section--sharing {
  padding-block: calc(var(--section-pad) * 0.5);
}

.share-panel {
  padding: var(--panel-pad);
}

/* Phones and tablets: the art sits in its own strip at the foot of the panel,
   cropped by the bottom and right edges, so no text runs over the heart. */
.share-panel {
  padding-bottom: 200px;
}

.share-ill {
  width: min(360px, 88vw);
  right: -14%;
  bottom: -70px;
}

.share-head,
.steps,
.share-note {
  position: relative;
  z-index: 1;
}

.share-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 40rem;
}

/* Steps – a real sequence, numbered with large cool-gradient numerals */
.steps {
  counter-reset: step;
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  gap: 36px;
}

.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 8px;
  align-content: start;
}

/* Phones: the number sits to the left of the title and the text */
.step::before {
  grid-row: span 2;
  min-width: 1ch;
}

.step > * {
  grid-column: 2;
}

.step::before {
  content: counter(step);
  display: block;
  width: fit-content;
  margin-bottom: 4px;
  font-size: clamp(3.5rem, 2.8rem + 3vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .step::before {
    background-image: var(--grad-cool);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Text that can sit over the figures gets a slightly lighter body colour (4.9:1 over the art) */
.share-panel .step p,
.share-panel .share-note {
  color: #D6D8E2;
}

.share-note {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--dusk);
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  /* Tablets and up: the number sits above the title */
  .step {
    grid-template-columns: minmax(0, 1fr);
  }
  .step::before {
    grid-row: auto;
  }
  .step > * {
    grid-column: 1;
  }
}

@media (min-width: 1024px) {
  /* The figures stand on the bottom edge, beside the note and below the steps */
  .share-panel {
    padding-bottom: max(72px, calc(0.75 * min(440px, 32vw) - 110px));
  }
  .share-ill {
    width: 73%;
    right: -13%;
    bottom: 0;
  }
  .share-note {
    max-width: min(65ch, calc(96% + 34px - min(440px, 32vw)));
  }
  .steps {
    gap: 48px;
    margin-top: 72px;
  }
  .share-note {
    margin-top: 56px;
  }
}

/* ---------- Who it's for ---------- */
.people {
  display: grid;
  gap: 48px;
  margin-top: 40px;
}

.person {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Side items: a small illustration tile, the figure cropped by its lower edge */
.person-art {
  position: relative;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--night);
}

.person-art img {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: auto;
  height: 98%;
  max-width: none;
  transform: translateX(-50%);
}

.person-art img.is-flipped {
  transform: translateX(-50%) scaleX(-1);
}

/* The partner item is the widest, with the photo and the callout */
.person--partner {
  padding: 12px 12px 28px;
  gap: 0;
}

.person-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-md);
}

.person-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 12px 0;
}

.callout {
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--dusk);
  color: var(--text-heading);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

/* ill-doctor.png: smaller and centred in its block */
.person-art .person-art-img--doctor {
  bottom: 8%;
  height: 80%;
}

@media (min-width: 1024px) {
  .people {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin-top: 56px;
  }
  .person--partner {
    padding: 16px 16px 36px;
  }
  .person-body {
    padding: 28px 20px 0;
  }
}

/* ---------- Privacy ---------- */
.privacy-panel {
  display: grid;
  padding: var(--panel-pad);
  padding-bottom: 0;
}

.privacy-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 36rem;
}

.privacy-groups {
  display: grid;
  gap: 24px;
}

.privacy-group {
  display: grid;
  gap: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--dusk);
}

/* Phones: the art sits below the copy, centred */
.privacy-art {
  position: relative;
  width: min(78%, 360px);
  margin: 24px auto 28px;
}

.privacy-art img {
  width: 100%;
}

@media (min-width: 1024px) {
  .privacy-panel {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    min-height: 640px;
    padding-bottom: 88px;
  }
  .privacy-art {
    position: absolute;
    right: -6%;
    top: 50%;
    width: min(600px, 46%);
    margin: 0;
    transform: translateY(-50%);
  }
}

/* ---------- Reviews – rendered by main.js from site.config.js ---------- */
.review-list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 32px;
}

.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--dusk);
}

.review-stars {
  display: flex;
  gap: 4px;
  color: var(--blue);
}

.review-stars svg {
  width: 18px;
  height: 18px;
}

.review-quote p {
  color: var(--text-heading);
  font-size: 1.125rem;
}

.review-name {
  color: var(--text-heading);
  font-weight: 600;
}

.review-source {
  font-size: var(--fs-small);
  color: var(--text-small);
}

@media (min-width: 1024px) {
  .review-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
  }
}

/* ---------- Shop – a quiet band ---------- */
.section--shop {
  padding-block: 32px;
}

.shop-band {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  align-items: center;
  padding: 28px 20px;
  border-radius: var(--radius-md);
}

/* The smallest phone on the page: narrower than the hero phones at every width */
.shop-media {
  grid-row: span 2;
}

.shop-text {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
}

.h2-quiet {
  font-weight: 800;
  line-height: 1.25;
}

.shop-text p {
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* on phones the comfort heart sits behind the copy: a soft Ink halo keeps the words at 4.5:1 */
@media (max-width: 767.98px) {
  .shop-text p {
    text-shadow: 0 0 2px var(--ink), 0 0 4px var(--ink), 0 0 10px rgba(27, 28, 36, 0.9);
  }
}

/* ill-comfort sits faintly behind the button */
.shop-cta {
  position: relative;
  isolation: isolate;
  grid-column: 2;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-ill {
  position: absolute;
  left: 112%;
  top: -95%;
  z-index: -1;
  width: auto;
  height: 280px;
  max-width: none;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.shop-btn {
  min-height: 44px;
  padding: 0 18px 0 14px;
  font-size: 0.9375rem;
}

@media (min-width: 768px) {
  .section--shop {
    padding-block: 40px;
  }
  .shop-band {
    grid-template-columns: 128px minmax(0, 1fr) auto;
    column-gap: 40px;
    padding: 36px 48px;
  }
  .shop-media {
    grid-row: auto;
  }
  .shop-cta {
    grid-column: auto;
    padding-inline: 24px;
  }
  .shop-ill {
    left: 50%;
    top: 234%;
    height: 220px;
  }
}

@media (min-width: 1024px) {
  .shop-ill {
    height: 480px;
  }
}

@media (min-width: 1280px) {
  .shop-band {
    grid-template-columns: 160px minmax(0, 1fr) auto;
    padding: 40px 64px;
  }
}

/* ---------- FAQ ---------- */
.faq-panel {
  padding: var(--panel-pad);
  /* room for the figure (65% wide, so about 80% tall) to stand below the questions */
  padding-bottom: calc(80% + 16px);
}

/* Shown in full, standing on the panel's bottom edge */
.faq-ill {
  width: 65%;
  right: -3%;
  bottom: 0;
  transform: scaleX(-1);
}

@media (min-width: 1024px) {
  .faq-panel {
    padding-bottom: 88px;
  }
  .faq-ill {
    width: 43%;
  }
  /* keep the questions clear of the figure */
  .faq-panel .faq-content {
    max-width: min(48rem, calc(60% - 10px));
  }
}

.faq-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 48rem;
}

.faq-list {
  width: 100%;
  border-top: 1px solid var(--dusk);
}

.faq-item {
  border-bottom: 1px solid var(--dusk);
}

.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 60px;
  padding: 14px 0;
  border-radius: var(--radius-sm);
  color: var(--text-heading);
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

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

.faq-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--dusk);
  color: var(--text-heading);
}

.faq-icon svg {
  width: 14px;
  height: 14px;
}

.faq-icon-v {
  transform-box: fill-box;
  transform-origin: center;
}

.faq-item[open] .faq-icon-v {
  transform: scaleY(0);
}

.faq-q:hover .faq-icon {
  background: var(--blue);
}

.faq-a {
  padding: 0 52px 22px 0;
}

/* ---------- Founder note (hidden until real copy exists) ---------- */
.founder-note {
  padding-block: calc(var(--section-pad) * 0.5);
}

.founder-note-quote {
  max-width: 40rem;
  color: var(--text-heading);
  font-size: 1.25rem;
  line-height: 1.5;
}

.founder-note-sign {
  margin-top: 16px;
  font-weight: 600;
}

/* ---------- Final call to action – the only centered section ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  justify-content: center;
  min-height: 680px;
  padding: 56px 20px;
  border-radius: var(--radius-lg);
  background: var(--night);
  text-align: center;
}

.cta-photo {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 40rem;
}

.cta-text {
  color: var(--text-body);
}

.get-row--center {
  justify-content: center;
  margin-top: 8px;
}

.get-row--center .badge-row {
  align-items: center;
}

@media (min-width: 1024px) {
  .cta-panel {
    min-height: clamp(600px, 58vw, 800px);
    padding: 72px 40px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 48px 0 40px;
}

.footer-inner {
  display: grid;
  gap: 24px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-tagline {
  font-size: var(--fs-small);
  color: var(--text-body);
}

.footer-links,
.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
  list-style: none;
  margin: 0 0 0 -10px;
  padding: 0;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.footer-links a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 7px;
}

.footer-links a:hover {
  color: var(--text-heading);
  text-decoration-color: currentColor;
  text-underline-offset: 4px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--text-body);
}

.social-link:hover {
  background: var(--night);
  color: var(--text-heading);
}

.text-link,
.callout a,
.faq-a a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.text-link:hover,
.callout a:hover,
.faq-a a:hover {
  text-underline-offset: 6px;
}

.brand:hover {
  opacity: 0.85;
}

.social-icon {
  width: 20px;
  height: 20px;
}

.footer-disclaimer,
.footer-legal {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-small);
}

@media (min-width: 1024px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 48px;
  }
  .footer-links {
    justify-content: flex-end;
  }
  .footer-disclaimer,
  .footer-legal,
  .social-list {
    grid-column: 1 / -1;
  }
}

/* ---------- Sticky bar – phones only; slides up while scrolling down,
   away again on scroll up when the header returns (main.js sets .is-shown) ---------- */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--dusk);
  background: rgba(39, 42, 65, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(calc(100% + 1px));
  visibility: hidden;
  transition: transform 0.2s var(--ease-out), visibility 0s linear 0.2s;
}

.sticky-bar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 0.3s var(--ease-out), visibility 0s linear 0s;
}

.sticky-bar-text {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-body);
}

@media (min-width: 768px) {
  .sticky-bar {
    display: none !important;
  }
}

/* ---------- Download modal – desktop ---------- */
.modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--dusk);
  border-radius: var(--radius-lg);
  background: var(--night);
  color: var(--text-body);
}

.modal::backdrop {
  background: rgba(15, 16, 22, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 40px 40px;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-heading);
  cursor: pointer;
}

.modal-close:hover {
  background: var(--dusk);
}

.modal-close .icon {
  width: 22px;
  height: 22px;
}

.modal-title {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
}

.modal-get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
}

.qr-tile-code--lg {
  width: 160px;
  height: 160px;
}

.badge-row--stack {
  flex-direction: column;
  align-items: stretch;
}

/* ---------- Redirect page (get/) ---------- */
.get-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--gutter);
  text-align: center;
}

.get-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.get-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.15;
}

.get-card .badge-row {
  align-items: center;
  margin-top: 8px;
}

/* ==========================================================================
   Interaction – hover and press states. Short and eased; transforms only on
   devices that hover; all of it switches off with reduced motion.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .store-badge,
  .social-link {
    transition: transform 0.35s var(--ease-out), background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
  }
  .btn-secondary::before {
    transition: background-position 0.8s var(--ease-out);
  }
  .btn .icon,
  .social-icon,
  .announce-icon,
  .modal-close .icon {
    transition: transform 0.45s var(--ease-out);
  }
  .announce,
  .nav-list a,
  .menu-toggle,
  .modal-close,
  .brand {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease, opacity 0.25s ease;
  }
  .nav-list a::after {
    transition: transform 0.35s var(--ease-out);
  }
  .menu-list a {
    transition: background-color 0.2s ease, padding-left 0.3s var(--ease-out);
  }
  .footer-links a,
  .text-link,
  .callout a,
  .faq-a a {
    transition: color 0.2s ease, text-decoration-color 0.25s ease, text-underline-offset 0.3s var(--ease-out);
  }
  .faq-icon {
    transition: background-color 0.25s ease, transform 0.45s var(--ease-out);
  }
  .faq-icon-v {
    transition: transform 0.3s var(--ease-out);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover,
  .store-badge:hover,
  .social-link:hover {
    transform: translateY(-2px);
  }
  .btn-secondary:hover .icon {
    transform: rotate(-10deg);
  }
  .social-link:hover .social-icon {
    transform: scale(1.1);
  }
  .announce:hover .announce-icon {
    transform: rotate(90deg) scale(1.15);
  }
  .modal-close:hover .icon {
    transform: rotate(90deg);
  }
  .menu-list a:hover {
    padding-left: 20px;
  }
  .faq-item:not([open]) > .faq-q:hover .faq-icon {
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .btn:active,
  .store-badge:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 0.1s;
  }
}

/* ==========================================================================
   Motion – exactly one orchestrated moment: on load the arc draws from the
   left phone to the right while the phones settle 12px into place.
   The FAQ answer fades in on open. Nothing else moves on its own.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .hero-arc-line,
  .hero-arc-glow {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: arc-draw 1.2s ease-out 0.15s forwards;
  }
  .hero-arc-end--end {
    opacity: 0;
    animation: arc-end 0.2s ease-out 1.3s forwards;
  }
  .phone-figure--you .phone {
    animation: settle-you 1.2s ease-out 0.15s both;
  }
  .phone-figure--partner .phone {
    animation: settle-partner 1.2s ease-out 0.15s both;
  }
  .faq-item[open] > .faq-a {
    animation: faq-open 0.2s ease-out;
  }
}

@keyframes arc-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes arc-end {
  to {
    opacity: 1;
  }
}

@keyframes settle-you {
  from {
    transform: translateY(12px) rotate(4deg);
  }
  to {
    transform: rotate(4deg);
  }
}

@keyframes settle-partner {
  from {
    transform: translateY(12px) rotate(-4deg);
  }
  to {
    transform: rotate(-4deg);
  }
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header.is-tucked,
  .sticky-bar,
  .sticky-bar.is-shown {
    transition: none;
  }
}

/* Windows high contrast: drop gradient text */
@media (forced-colors: active) {
  .display-line,
  .step::before {
    background: none;
    color: CanvasText;
    -webkit-text-fill-color: CanvasText;
  }
}