/* Noxi website — one stylesheet for every page.
   Night Sky design language. Dark only: the site is the night. */

/* ============================================================
   EDIT ME — colours, fonts and spacing live here.
   Change a value and every page follows.
   ============================================================ */
:root {
  /* Colours (Night Sky) */
  --void: #05070D;        /* page background */
  --panel: #0E1424;       /* cards, the nav, the phone bezel */
  --line: #1B2440;        /* one tone step up from a card: fields, rows, the Noxi+ card */
  --deep-line: #3A4870;   /* a stronger step, used sparingly */
  --star: #E9EEF8;        /* text */
  --moon: #BFD4F2;        /* the one accent: buttons, the italic word, the lit row */
  --muted: #7D8AA8;       /* secondary text */
  --muted-2: #92A0BE;     /* secondary text when it sits on --line (a touch lighter, so it still reads) */
  --scrim: 5 7 13;        /* the Void as three numbers, for the dark veil over photographs */

  /* Fonts */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-text: "Geist", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Type sizes, phone first, growing with the screen */
  --step-small: 0.875rem;                                   /* 14px: footer, labels, the trust strip */
  --step-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);      /* 16–18px: paragraphs */
  --step-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);     /* 18–22px: the line under the headline */
  --step-head: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem);     /* 24–34px: card and timeline titles */
  --step-title: clamp(2.1rem, 1.3rem + 3.2vw, 4rem);        /* 34–64px: section headings */
  --step-display: clamp(2.4rem, 1.2rem + 5.8vw, 5.5rem);    /* 38–88px: the headline */
  --step-time: clamp(3rem, 2rem + 4vw, 5rem);               /* 48–80px: the timeline times, 24h, prices */

  /* Serif safe zone: Instrument Serif clips when set tight, so serif text gets room */
  --serif-leading: 1.2;          /* never below 1.2 */
  --serif-top: 0.08em;           /* room above ascenders */
  --serif-italic-right: 0.12em;  /* room after an italic word */

  /* Spacing */
  --margin: clamp(16px, 4vw, 48px);         /* the page's outer margin, equal on both sides */
  --content: 1240px;                        /* widest the content gets */
  --gap: 14px;                              /* between cards */
  --section: clamp(5rem, 12vw, 10rem);      /* space between sections */
  --radius: 24px;                           /* corner radius for cards and pictures */
  --radius-small: 14px;                     /* corner radius for rows and small panels */
  --measure: 52ch;                          /* width of running text */
  --nav-h: 64px;                            /* height of the sticky nav */

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-press: 140ms;
  --t-hover: 200ms;

  color-scheme: dark;
}
/* ============================================================ end EDIT ME */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--void); color: var(--star);
  font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55;
  font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, ul, ol, blockquote, fieldset { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
input { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--moon); color: var(--void); }
:focus-visible { outline: 2px solid var(--moon); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ---------- type ---------- */
h1, h2, h3, .serif {
  font-family: var(--font-display); font-weight: 400;
  line-height: var(--serif-leading); padding-top: var(--serif-top); /* serif safe zone */
  text-wrap: balance; hyphens: none; letter-spacing: -0.01em;
}
h1 em, h2 em, h3 em, .serif em { font-style: italic; color: var(--moon); padding-right: var(--serif-italic-right); }
.title { font-size: var(--step-title); max-width: 24ch; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.lead { font-size: var(--step-lead); line-height: 1.4; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }
p { max-width: var(--measure); text-wrap: pretty; }
.link { color: var(--star); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: var(--deep-line); transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* ---------- the frame: one pair of equal margins ---------- */
.wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.section { padding-top: var(--section); }

/* ---------- controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 3.25rem; padding: 0 1.6rem; border-radius: 999px;
  background: var(--moon); color: var(--void); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button:disabled { opacity: 0.6; cursor: wait; }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--star); } }
.field {
  width: 100%; min-height: 3.25rem; padding: 0 1.1rem; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--line); color: var(--star); /* taste-skill-ignore: a form field keeps its edge */
  transition: border-color var(--t-hover) ease;
}
.field::placeholder { color: var(--muted); }
.field:focus { border-color: var(--deep-line); outline-offset: 2px; }
.chip { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.9rem; border-radius: 999px; background: var(--line); color: var(--star); font-size: var(--step-small); font-weight: 500; white-space: nowrap; }
.chip--on { background: var(--moon); color: var(--void); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- navigation: sticky, one row ---------- */
.nav { position: sticky; top: 0; z-index: 20; background: var(--void); }
.nav__in { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nav a { text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; }
.wordmark svg { width: 26px; height: 26px; flex: none; }
.wordmark span { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.2; padding-top: 0.08em; }
.nav__links { display: none; gap: 28px; }
.nav__links a { font-size: var(--step-small); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; color: var(--star); transition: color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--moon); } }
.nav .button { min-height: 2.5rem; padding: 0 1.1rem; font-size: var(--step-small); }
@media (min-width: 900px) { .nav__links { display: flex; } }

/* ---------- hero: centred words, the phones fanned below, a few stars behind ---------- */
.hero { position: relative; overflow: clip; text-align: center; padding-top: clamp(2.5rem, 7vh, 5.5rem); }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__in { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.pill { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.1rem; padding: 0 0.95rem; border-radius: 999px; background: var(--panel); color: var(--star); font-size: var(--step-small); font-weight: 500; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--moon); }
.hero h1 { font-size: var(--step-display); max-width: 13.5em; }
.hero .lead { max-width: 46ch; }
.hero .small { color: var(--muted); }
.hero .small a { color: var(--star); }

/* the waitlist form, used twice (hero and the final call) */
.join { width: 100%; max-width: 580px; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; }
.join__row { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
.pick { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 0.6rem; font-size: var(--step-small); color: var(--muted); }
.pick label { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.1rem; padding: 0 0.85rem; border-radius: 999px; background: var(--panel); color: var(--star); cursor: pointer; }
.pick input { accent-color: var(--moon); margin: 0; width: 14px; height: 14px; }
.hp { position: absolute; left: -10000px; top: auto; overflow: hidden; } /* the honeypot field, off screen */
.join__done { width: 100%; max-width: 580px; background: var(--panel); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; text-align: center; }
.join__done .serif { font-size: var(--step-head); }
.join__err { width: 100%; text-align: center; font-size: var(--step-small); color: var(--star); }
@media (min-width: 560px) { .join__row { flex-direction: row; } .join__row .field { flex: 1; } }

/* the three phones, fanned, cut off by the bottom of the hero.
   The fan is one fixed 1000 x 540 px stage. Under 1000 px of room it scales down as one unit (--s),
   so the three frames always keep the same size, tilt and overlap, only smaller. */
.fan { --s: 1; position: relative; width: 100%; height: calc(540px * var(--s)); margin-top: clamp(1.5rem, 4vw, 3rem); }
.fan__stage { position: absolute; left: 50%; top: 0; width: 1000px; height: 540px; overflow: hidden; transform: translateX(-50%) scale(var(--s)); transform-origin: top center; }
@media (max-width: 999px) { .fan { --s: 0.72; } }
.fan .phone { position: absolute; top: 0; }
.fan .phone:nth-child(1) { left: 130px; top: 70px; width: 250px; height: 542px; border-radius: 34px; transform: rotate(-6deg); z-index: 1; }
.fan .phone:nth-child(2) { left: 350px; width: 300px; height: 650px; border-radius: 40px; z-index: 3; }
.fan .phone:nth-child(3) { left: 620px; top: 70px; width: 250px; height: 542px; border-radius: 34px; transform: rotate(6deg); z-index: 2; }
.fan .phone:nth-child(1) .phone__screen, .fan .phone:nth-child(3) .phone__screen { border-radius: 28px; }
.fan .phone:nth-child(2) .phone__screen { border-radius: 34px; }
/* under 600 px the stage is 600 wide and holds only the centre phone, so the screen stays readable */
@media (max-width: 599px) {
  .fan { --s: 0.6; }
  .fan__stage { width: 600px; }
  .fan .phone:nth-child(1), .fan .phone:nth-child(3) { display: none; }
  .fan .phone:nth-child(2) { left: 150px; }
}
/* browsers that can do the maths get an exact scale: room ÷ stage width, as a plain number */
@supports (transform: scale(tan(atan2(1px, 1px)))) {
  .fan { --s: min(1, tan(atan2(calc(100vw - 2 * var(--margin)), 1000px))); }
  @media (max-width: 599px) { .fan { --s: min(1, tan(atan2(calc(100vw - 2 * var(--margin)), 600px))); } }
}

/* a plain rounded phone frame, 6 px thick at every size; the app screens are real PNGs inside */
.phone { aspect-ratio: 9 / 19.5; background: var(--panel); border-radius: 13% / 6%; padding: 6px; margin: 0; }
.phone__screen { height: 100%; border-radius: 11% / 5%; overflow: clip; background: var(--void); }
.phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------- trust strip ---------- */
.trust { background: var(--panel); }
.trust ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.75rem; padding: 1.1rem 0; font-size: var(--step-small); font-weight: 500; color: var(--muted); }

/* ---------- bento: six cards, the first one large ---------- */
.bento { display: grid; gap: var(--gap); }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; min-height: 280px; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--panel); border-radius: var(--radius); overflow: clip; }
.card h3 { font-family: var(--font-text); font-size: 1.125rem; font-weight: 600; line-height: 1.3; padding: 0; letter-spacing: 0; }
.card p { max-width: 40ch; }
.card__art { margin-bottom: auto; padding-bottom: 1.25rem; }
.card--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--scrim) / 0.94) 0%, rgb(var(--scrim) / 0.6) 40%, rgb(var(--scrim) / 0) 72%); } /* taste-skill-ignore: a veil under text on a photograph */
.card--photo > :not(img) { position: relative; z-index: 1; }
.card--big { min-height: 440px; }
.card--big h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-head); line-height: var(--serif-leading); padding-top: var(--serif-top); max-width: 24ch; }
.card--big p { max-width: 50ch; }
.big { font-family: var(--font-display); font-size: var(--step-time); line-height: 1; padding-top: 0.1em; letter-spacing: -0.02em; }
.big em { font-style: italic; color: var(--moon); padding-right: var(--serif-italic-right); }
/* small drawings of the app's own parts */
.cam { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-small); background: var(--line); color: var(--muted-2); font-size: 0.8125rem; font-weight: 500; display: grid; place-items: center; }
.cam__you { position: absolute; right: 7%; top: 10%; width: 22%; aspect-ratio: 3 / 4; border-radius: 10px; background: var(--moon); color: var(--void); display: grid; place-items: center; font-weight: 600; }
.ladder { display: flex; flex-direction: column; gap: 0.7rem; font-size: var(--step-small); }
.ladder li { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.75rem; }
.ladder li span:last-child { color: var(--muted); }
.ladder i { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ladder i::after { content: ""; display: block; height: 100%; width: var(--w); background: var(--moon); border-radius: 3px; }
.quiet { display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.quiet .small { color: var(--muted); }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .card--big { grid-column: 1 / 3; grid-row: 1 / 3; min-height: 560px; }
}

/* ---------- timeline: one night, stop by stop ---------- */
.timeline { display: flex; flex-direction: column; }
.stop { display: grid; gap: 1.25rem; padding-block: clamp(2rem, 6vw, 4rem); }
.stop:first-child { padding-top: 0; }
.stop__time { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.stop__time span { color: var(--muted); font-size: var(--step-small); font-weight: 500; }
.stop__time .big { color: var(--star); font-size: var(--step-time); font-weight: 400; }
.stop__media { order: 2; min-width: 0; }
.stop__text { order: 3; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-start; }
.stop__text h3 { font-size: var(--step-head); max-width: 26ch; }
.statement { font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.125rem); max-width: 30ch; } /* a statement set in the serif: a paragraph, not a headline */
.stop__text .small { color: var(--muted); }
.scene { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: clip; background: var(--panel); }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.scene .phone { position: absolute; left: 50%; top: 9%; width: 42%; transform: translateX(-50%); z-index: 1; }
.scene .toast { position: absolute; left: 12px; top: 12px; z-index: 2; }
.toast { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2rem; padding: 0 0.8rem; border-radius: 999px; background: var(--panel); color: var(--star); font-size: 0.8125rem; font-weight: 500; max-width: calc(100% - 24px); overflow: hidden; }
.toast span { color: var(--muted); white-space: nowrap; }
.panel { background: var(--panel); border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.5rem); }
.rows { display: flex; flex-direction: column; gap: 8px; font-size: var(--step-small); }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 12px 14px; border-radius: var(--radius-small); background: var(--line); }
.rows li span:last-child { color: var(--muted-2); white-space: nowrap; }
.rows li.is-on { background: var(--moon); color: var(--void); }
.rows li.is-on span:last-child { color: var(--void); }
.rows li.is-dim { opacity: 0.55; }
.stop--wide .scene { aspect-ratio: 4 / 5; display: flex; align-items: flex-end; padding: clamp(1.25rem, 4vw, 2.5rem); }
.stop--wide .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--scrim) / 0.9) 0%, rgb(var(--scrim) / 0.45) 45%, rgb(var(--scrim) / 0) 75%); } /* taste-skill-ignore: a veil under text on a photograph */
.stop--wide .scene > :not(img) { position: relative; z-index: 1; }
.stop--wide .scene .toast { position: absolute; left: auto; right: 12px; top: 12px; }
.bullets { padding-left: 1.2em; list-style: disc; display: flex; flex-direction: column; gap: 0.35rem; }
.stop__note { margin-top: 1.5rem; color: var(--muted); }
@media (min-width: 900px) {
  .stop { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .stop__time { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
  .stop__text { grid-column: 2; grid-row: 1; order: 0; }
  .stop__media { grid-column: 3; grid-row: 1; order: 0; }
  .stop:nth-child(even) .stop__text { grid-column: 3; }
  .stop:nth-child(even) .stop__media { grid-column: 2; }
  .stop--wide .stop__media { grid-column: 2 / 4; }
  .stop--wide .scene { aspect-ratio: 21 / 9; }
  .scene--tall { aspect-ratio: 1; }
}

/* ---------- comparison: the bar on the left, the table on the right ---------- */
.compare { display: grid; gap: 1.5rem; }
.compare__photo { position: relative; aspect-ratio: 4 / 5; max-height: 560px; border-radius: var(--radius); overflow: clip; background: var(--panel); }
.compare__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.compare__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--scrim) / 0.85) 0%, rgb(var(--scrim) / 0.3) 40%, rgb(var(--scrim) / 0) 65%); } /* taste-skill-ignore: a veil so the people at the bar stay dim */
.compare__text { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.compare .title { margin-bottom: 0; }
.vs { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: var(--step-small); }
.vs th { text-align: left; font-weight: 500; color: var(--muted); padding: 0 14px 2px; }
.vs td { padding: 14px; background: var(--panel); vertical-align: top; }
.vs td:first-child { border-radius: var(--radius-small) 0 0 var(--radius-small); font-weight: 600; }
.vs td:nth-child(2) { color: var(--star); }
.vs td:last-child { border-radius: 0 var(--radius-small) var(--radius-small) 0; color: var(--muted); }
@media (min-width: 900px) {
  .compare { grid-template-columns: 5fr 7fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
  .vs { font-size: var(--step-body); }
  .vs td { padding: 16px 18px; }
}

/* ---------- testimonials ---------- */
.quotes { display: grid; gap: var(--gap); }
.quote { display: flex; flex-direction: column; gap: 0.75rem; min-height: 180px; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--panel); border-radius: var(--radius); }
.quote footer { margin-top: auto; color: var(--muted); font-size: var(--step-small); }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

/* ---------- pricing and questions, side by side ---------- */
.money { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.plans { display: grid; gap: var(--gap); align-content: start; }
.plan { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.25rem, 3vw, 1.75rem); background: var(--panel); border-radius: var(--radius); }
.plan--plus { background: var(--line); }
.plan h3 { font-family: var(--font-text); font-size: 1.125rem; font-weight: 600; padding: 0; letter-spacing: 0; line-height: 1.3; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.4em; margin-bottom: 0.5rem; font-family: var(--font-display); font-size: var(--step-time); line-height: 1; padding-top: 0.1em; letter-spacing: -0.02em; }
.plan__price .per { font-family: var(--font-text); font-size: var(--step-body); letter-spacing: 0; color: var(--muted); }
.plan--plus .per { color: var(--muted-2); }
.plan p { max-width: 44ch; }
.faq { display: flex; flex-direction: column; gap: 8px; }
.faq details { background: var(--panel); border-radius: var(--radius-small); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: 14px 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 18px; height: 18px; transition: transform 300ms var(--ease-out); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details > p { padding: 0 18px 18px; max-width: 60ch; }
@media (min-width: 900px) { .money { grid-template-columns: 5fr 7fr; align-items: start; } }

/* ---------- final call: the rooftop, darkened ---------- */
.cta { position: relative; min-height: clamp(460px, 64vh, 680px); border-radius: var(--radius); overflow: clip; display: grid; place-items: center; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 4vw, 3rem); background: var(--panel); }
.cta > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.cta::before { content: ""; position: absolute; inset: 0; background: rgb(var(--scrim) / 0.66); } /* flat dark veil so the words read and no face is clear */
.cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(var(--scrim) / 0) 50%, rgb(var(--scrim) / 0.92) 100%); } /* taste-skill-ignore: the foreground of the rooftop goes dark, so the people nearest the camera are not shown */
.cta__in { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.cta h2 { font-size: var(--step-display); max-width: 12em; }

/* ---------- footer ---------- */
.end { padding-block: clamp(3rem, 8vw, 5rem) 28px; display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--step-small); color: var(--muted); }
.end__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.end a { color: var(--star); text-underline-offset: 0.18em; text-decoration-color: var(--deep-line); }
.end__links { display: flex; gap: 1.25rem; }

/* ---------- legal pages: one calm column ---------- */
.doc { padding-bottom: var(--section); }
.doc article { max-width: 62ch; margin-inline: auto; padding-top: clamp(2rem, 6vh, 4rem); display: flex; flex-direction: column; gap: 6px; }
.doc h1 { font-size: var(--step-title); margin-bottom: 0.25rem; }
.doc .meta { color: var(--muted); font-size: var(--step-small); margin: 0 0 1.25rem; }
.doc h2 { font-size: var(--step-head); margin: 2.25rem 0 0.4rem; }
.doc p, .doc li { max-width: 62ch; }
.doc p { margin: 0 0 0.7rem; }
.doc ul { margin: 0 0 0.7rem; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.doc .box { background: var(--panel); border-radius: var(--radius); padding: 18px 22px; margin: 6px 0 14px; }
.doc .box p:last-child { margin-bottom: 0; }
.doc a { color: var(--star); text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; text-decoration-color: var(--deep-line); }
.doc a:hover { text-decoration-color: currentColor; }

/* ---------- motion: content is always in place; motion only adds arrival ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the stars breathe, each on its own beat */
  .stars circle { transform-box: fill-box; transform-origin: center; animation: twinkle 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -0.55s); }
  /* the hero arrives in reading order, settled within 1.2 s */
  .hero [data-load] { opacity: 0; translate: 0 14px; animation: rise 700ms var(--ease-out) forwards; animation-delay: calc(60ms + var(--i, 0) * 90ms); }
  .fan .phone { opacity: 0; translate: 0 48px; animation: rise 900ms var(--ease-expo) forwards; animation-delay: calc(260ms + var(--i, 0) * 110ms); }
  /* photographs drift slowly */
  .scene > img, .card--photo img, .compare__photo img, .cta > img { animation: drift 18s ease-in-out infinite alternate; }
  /* each section's parts rise as they scroll into view (browsers without scroll timelines show them in place) */
  @supports (animation-timeline: view()) {
    [data-reveal] { animation: rise-view linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
  }
  .card, .quote, .plan, .faq details { transition: translate var(--t-hover) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) { .card:hover, .quote:hover, .plan:hover { translate: 0 -3px; } }
}
@keyframes twinkle { from { opacity: 0.25; scale: 0.7; } to { opacity: 1; scale: 1.2; } }
@keyframes rise { to { opacity: 1; translate: 0 0; } }
@keyframes rise-view { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes drift { from { scale: 1; } to { scale: 1.06; } }