/* Glint Founding Beta
   The main site's language on white: Instrument Serif display with italic emphasis,
   system sans for reading, quiet motion. Layout rhythm borrowed from Apple's product pages. */

:root {
  --bg: #fff;
  --fg: #000;
  --fg-2: rgba(0, 0, 0, 0.64);
  --fg-3: rgba(0, 0, 0, 0.56); /* ≥ 4.5:1 on white and on the grey band */
  --rule: rgba(0, 0, 0, 0.12);
  --band: #f5f5f7;
  --hover: #ff3b30;
  --note: #8a5a00;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Inter, sans-serif;
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;

  --gutter: clamp(16px, 5vw, 72px);
  --wide: 1240px;
  --text: 46rem;
  --radius: 28px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 180ms;
  --t-slow: 900ms;

  /* Room kept free at the bottom of the page for the fixed reserve bar. */
  --bar-space: 100px;
}
@media (max-width: 639px) {
  :root { --radius: 20px; --bar-space: 84px; }
}
@media (max-width: 349px) {
  :root { --bar-space: 124px; }
}

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/InstrumentSerif-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  /* Keyboard focus and in-page jumps stop clear of the fixed reserve bar. */
  scroll-padding-bottom: var(--bar-space);
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
/* Hidden means hidden, whatever display a component sets. */
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
::selection { background: var(--fg); color: var(--bg); }

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

/* ---------- Shared type ---------- */
.wordmark {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
.wordmark:hover { opacity: 0.6; }

.eyebrow {
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.link {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}
.link:hover { text-decoration-color: currentColor; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 1.5rem;
  border: 1px solid var(--fg);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
/* Primary: solid black pill. */
.btn--solid {
  background: var(--fg);
  color: var(--bg);
  border-radius: 999px;
}
.btn--solid:hover { background: #2a2a2a; border-color: #2a2a2a; }
/* Secondary: the main site's square outline button, in black. */
.btn--outline {
  background: transparent;
  color: var(--fg);
  border-radius: 0;
}
.btn--outline:hover { border-color: var(--hover); }

/* ---------- Masthead ---------- */
.masthead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: max(20px, env(safe-area-inset-top)) var(--gutter) 0;
}
/* Top-right link to the other main pages (Science). */
.site-nav__link {
  color: var(--fg);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
}
.site-nav__link:hover { opacity: 0.6; }

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--fg);
  color: var(--bg);
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- 1. Hero ----------
   Apple's product-page hero: centred label, big headline, one line of support,
   then the photograph filling the rest of the first screen. The fixed reserve
   bar lands on the photograph's lower edge. */
body { padding-bottom: var(--bar-space); }
/* Program page: the footer carries the bar's space, so the floating bar ends inside the
   footer instead of over a blank strip below it. */
body.program { padding-bottom: 0; }
body.program .site-footer { padding-bottom: calc(var(--bar-space) + 8px); }

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fill the first screen below the masthead; grow if a phone is too short. */
  min-height: calc(100vh - 48px);
  min-height: calc(100svh - 48px);
  padding: 0 var(--gutter);
  text-align: center;
}
.hero__intro {
  flex: 0 0 auto;
  max-width: 76rem;
  padding: clamp(0.75rem, 3.5vh, 2.75rem) 0 clamp(1.25rem, 3.5vh, 2.5rem);
}
.hero__title {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero__sub {
  max-width: 46rem;
  margin: clamp(0.75rem, 2vh, 1.25rem) auto 0;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.4;
  color: var(--fg-2);
  text-wrap: pretty;
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0;
  margin-top: clamp(0.875rem, 2.2vh, 1.5rem);
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--fg);
}
.hero__facts li { padding: 0 1rem; }
.hero__facts li + li { border-left: 1px solid var(--rule); }
/* Stack the facts before they would wrap: a wrapped line would start with a divider. */
@media (max-width: 899px) {
  .hero__facts { flex-direction: column; }
  .hero__facts li { padding: 0; }
  .hero__facts li + li { border-left: 0; }
}
@media (max-width: 639px) {
  /* Scales with the screen so the wearables line fits on one line on phones
     (360px and up); on the smallest phones it wraps into two even lines. */
  .hero__facts { font-size: clamp(0.6875rem, 3.1vw, 0.875rem); }
  .hero__facts li { text-wrap: balance; }
}

/* The photo keeps its own shape (16:9, or 4:5 on phones) so nothing in it is
   cut off: the face and ear clip sit in the first screen and the device on the
   table comes into view on the first scroll, clear of the reserve bar. On very
   tall screens it grows to fill the space. */
.hero__media {
  position: relative;
  flex: 1 0 auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: var(--wide);
  min-height: 180px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--band);
}
.hero__media picture,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__media img { object-fit: cover; object-position: 50% 40%; }
@media (max-width: 639px) { .hero__media { aspect-ratio: 4 / 5; } }
/* Entrance, as on the main site. */
.hero__eyebrow, .hero__title, .hero__sub, .hero__facts { animation: rise var(--t-slow) var(--ease-out) both; }
.hero__title { animation-delay: 80ms; }
.hero__sub { animation-delay: 160ms; }
.hero__facts { animation-delay: 240ms; }
.hero__media { animation: fade 1.2s var(--ease-out) 200ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Sections (shared) ---------- */
/* Space between sections: about a third less than first built (founders, 21 Oct), so
   the page scrolls less. Space inside a section (heading to content) shrinks less, so
   each heading stays attached to its own content. */
.section {
  padding: clamp(3.25rem, 7vw, 6.25rem) var(--gutter);
  scroll-margin-top: 0;
}
.section--band { background: var(--band); }
.section__inner { max-width: var(--wide); margin: 0 auto; }

.section__head { max-width: 52rem; margin: 0 auto clamp(2.5rem, 4.8vw, 4rem); text-align: center; }
.h2 {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.lede {
  max-width: 54rem;
  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.45;
  color: var(--fg-2);
  text-wrap: pretty;
}
/* A longer introduction gets a wider measure so it still sits on two lines. */
.lede.lede--wide {
  --w: min(64rem, calc(100vw - 2 * var(--gutter)));
  width: var(--w);
  max-width: none;
  margin-left: calc((100% - var(--w)) / 2);
  margin-right: 0;
}
/* Placeholders for photographs only the founders can supply. */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: 1.5rem;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 14px),
    #ececef;
  color: var(--fg-3);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: center;
}
.section--band .ph { background-color: #e6e6ea; }
.ph--portrait { aspect-ratio: 1; border-radius: 50%; padding: 1rem; font-size: 0.75rem; }

/* Rounded photographs. */
.frame picture { display: block; border-radius: var(--radius); overflow: hidden; background: var(--band); }
.frame--wide { margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
.frame.frame--wide img { aspect-ratio: 21 / 9; }
@media (max-width: 639px) { .frame.frame--wide img { aspect-ratio: 3 / 2; } }
.frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Program: a day on Glint, 6 AM to 6 AM.
   Every event carries --at: hours after 6 AM. Positions run inside the band's
   rounded ends (--inset). Wide screens lay the day out left to right; phones
   and tablets run it top to bottom. */
.day {
  --inset: 28px;
  --track-h: 56px;
  --track-top: 150px;
  position: relative;
  max-width: var(--wide);
  margin: 0 auto;
}
/* Resolved per event: a custom property is computed where it is declared. */
.day__event, .day__axis span { --pos: calc(var(--inset) + var(--at) / 24 * (100% - 2 * var(--inset))); }
.day__axis span { position: absolute; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 500; color: var(--fg-3); white-space: nowrap; }
/* Wide screens show no hour labels above the band; phones keep the closing
   6 AM as the end-of-day marker under the vertical timeline. */
@media (min-width: 1024px) { .day__axis .day__axis-end { display: none; } }
.day__track {
  position: relative;
  border-radius: 999px;
  background: linear-gradient(90deg, #fbe7ad 0%, #f8eccb 14%, #f3efe4 34%, #eceef3 66%);
}
.day__sun { width: 16px; height: 16px; fill: none; stroke: #b07a1f; stroke-width: 1.8; stroke-linecap: round; }
.day__sun circle { fill: #f2c46d; }
.day__night { position: absolute; background: #000; color: #fff; }
.day__night-label { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.25; }
.day__night-label strong { display: block; font-weight: 600; }
.day__night-label span span { color: rgba(255, 255, 255, 0.72); }
.day__moon { flex: 0 0 auto; width: 20px; height: 20px; fill: #fff; }

.day__events { position: absolute; inset: 0; margin: 0; }
.day__event { position: absolute; }
.day__dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--fg);
  transform: translate(-50%, -50%);
}
.day__event--session .day__dot {
  width: 18px;
  height: 18px;
  border: 0;
  background: var(--fg);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.1), 0 0 0 12px rgba(0, 0, 0, 0.05);
}
.day__text { position: absolute; display: flex; flex-direction: column; white-space: nowrap; }
.day__time { font-size: 0.75rem; font-weight: 600; color: var(--fg-2); white-space: nowrap; }
.day__label { font-size: 0.9375rem; }
.day__card {
  position: absolute;
  display: flex;
  flex-direction: column;
  padding: 0.75rem 1.125rem 0.875rem;
  border-radius: 18px;
  background: #000;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}
.day__cue { font-size: 0.75rem; font-weight: 600; white-space: nowrap; color: rgba(255, 255, 255, 0.72); }
.day__card .day__label { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.05; }
.day__dur {
  align-self: flex-start;
  margin-top: 0.5rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Overnight: the metrics the wearable gives us each night, as chips. */
.day__metrics { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 0.375rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.day__metrics li { padding: 0.1875rem 0.625rem; border-radius: 999px; background: #fff; color: #000; font-size: 0.8125rem; font-weight: 700; text-align: center; }

/* Wide: left to right. */
@media (min-width: 1024px) {
  /* Headroom for the overnight card, the tallest above the band. */
  .day { height: 370px; margin-top: 0.5rem; --track-top: 180px; }
  .day__axis { position: absolute; left: 0; right: 0; top: calc(var(--track-top) - 26px); height: 18px; }
  .day__axis span { left: var(--pos); transform: translateX(-50%); }
  .day__track { position: absolute; left: 0; right: 0; top: var(--track-top); height: var(--track-h); }
  .day__night { left: calc(var(--inset) + 17 / 24 * (100% - 2 * var(--inset))); right: 0; top: 0; bottom: 0; border-radius: 0 999px 999px 0; display: flex; align-items: center; padding-left: 1.75rem; }
  .day__event { left: var(--pos); top: 0; bottom: 0; width: 0; }
  .day__dot { top: calc(var(--track-top) + var(--track-h) / 2); left: 0; }
  .day__text { top: calc(var(--track-top) + var(--track-h) + 22px); left: 0; transform: translateX(-50%); align-items: center; text-align: center; }
  .day__event--low .day__text { top: calc(var(--track-top) + var(--track-h) + 78px); }
  /* A hairline from the band down to each label. */
  .day__text::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 16px;
    margin-bottom: 4px;
    background: var(--rule);
  }
  .day__event--low .day__text::before { height: 72px; }
  .day__card { bottom: calc(100% - var(--track-top) + 34px); left: 0; transform: translateX(-50%); align-items: center; text-align: center; }
  .day__card .day__dur { align-self: center; }
  .day__card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 34px;
    background: var(--fg);
    transform: translateX(-50%);
  }
}

/* Phones and tablets: top to bottom. Times on the left, the band, then the day. */
@media (max-width: 1023px) {
  .day {
    --inset: 22px;
    --hour: 36px;
    --time-w: 46px;
    --band-x: calc(var(--time-w) + 14px);
    --band-w: 24px;
    --text-x: calc(var(--band-x) + var(--band-w) + 16px);
    height: calc(24 * var(--hour) + 2 * var(--inset));
    max-width: 30rem;
  }
  .day__axis { position: absolute; inset: 0; }
  .day__axis span { display: none; }
  .day__axis span:last-child { display: inline-flex; bottom: 0; left: 0; width: var(--time-w); justify-content: flex-end; color: var(--fg-2); font-weight: 600; }
  .day__track { position: absolute; top: 0; bottom: 0; left: var(--band-x); width: var(--band-w); background: linear-gradient(180deg, #fbe7ad 0%, #f8eccb 14%, #f3efe4 34%, #eceef3 66%); }
  .day__night { top: calc(var(--inset) + 17 / 24 * (100% - 2 * var(--inset))); bottom: 0; left: 0; right: 0; border-radius: 0 0 999px 999px; }
  .day__night-label { position: absolute; left: calc(var(--band-w) + 16px); top: 24px; width: min(100vw - 2 * var(--gutter) - var(--text-x), 18rem); color: var(--fg); }
  .day__night-label span span { color: var(--fg-2); }
  .day__moon { fill: var(--fg); }
  .day__event { top: var(--pos); left: 0; right: 0; height: 0; }
  .day__dot { top: 0; left: calc(var(--band-x) + var(--band-w) / 2); }
  .day__event--session .day__dot { width: 16px; height: 16px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.1); }
  .day__text { top: 0; left: 0; right: 0; flex-direction: row; align-items: baseline; transform: translateY(-50%); }
  .day__text .day__time { flex: 0 0 var(--time-w); text-align: right; }
  .day__text .day__label { margin-left: calc(var(--text-x) - var(--time-w)); }
  /* Sessions: a black pill on the day side, time inside. */
  .day__card { top: 0; left: var(--text-x); transform: translateY(-50%); flex-direction: row; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; border-radius: 999px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16); }
  .day__card .day__label { font-size: 1.25rem; }
  .day__card .day__dur { margin-top: 0; }
  /* Overnight card: stacked under the night label, inside the night stretch. */
  .day__event--overnight { --pos: calc(var(--inset) + 19 / 24 * (100% - 2 * var(--inset))); }
  .day__card--overnight { flex-direction: column; align-items: flex-start; gap: 0; transform: none; padding: 0.75rem 1rem 0.875rem; border-radius: 18px; }
  .day__card--overnight .day__metrics { justify-content: start; }
}
/* The smallest phones: a tighter pill so "Pre lunch · Session 1 · 20 min" fits. */
@media (max-width: 359px) {
  .day__card { gap: 0.4rem; padding: 0.5rem 0.7rem; }
  .day__card .day__label { font-size: 1.125rem; }
}

/* Program: measured and supported (one timeline). */
.journey-wrap { margin-top: clamp(4.5rem, 9vw, 7rem); text-align: center; }
.timeline.journey { max-width: var(--wide); }
@media (min-width: 1100px) { .journey__title { white-space: nowrap; } }
.journey__title { margin-top: 0.15rem; font-weight: 600; color: var(--fg); }
.timeline.journey li p + p.journey__title { color: var(--fg); }
.journey li p:last-child { margin-top: 0.25rem; }

.timeline {
  display: grid;
  gap: 0;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  max-width: 64rem;
  text-align: left;
}
.timeline li { position: relative; padding: 0 0 1.75rem 1.75rem; border-left: 1px solid var(--rule); }
.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 0.4em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fg);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline__when { font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); letter-spacing: 0.01em; }
.timeline li p + p { color: var(--fg-2); }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(5, 1fr); }
  .timeline li { padding: 1.75rem 1.25rem 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .timeline li:last-child { border-top-color: transparent; }
  .timeline li::before { left: 0; top: -5px; }
}

/* Science: the founders' explainer animation, 21:9 wide and 4:5 on phones. */
.how-video { margin: 0; }
.how-video video {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
@media (max-width: 759px) { .how-video video { aspect-ratio: 4 / 5; } }

/* Science: safety and the note. */
/* Same breathing room as between other big blocks: 48px on laptops, 28px on phones. */
.card.safety { margin-top: clamp(1.75rem, 4vw, 3rem); background: #000; color: #fff; }
.safety .card__title { font-size: clamp(1.5rem, 2.2vw, 1.875rem); margin-bottom: 0.75rem; }
.safety p { font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }
.safety p + p { margin-top: 0.625rem; }
.safety .link { color: #fff; font-weight: 600; text-decoration-color: rgba(255, 255, 255, 0.6); }
.safety .link:hover { text-decoration-color: #fff; }
/* The asterisk's small print, at the foot of the card. */
.safety p.safety__footnote { margin-top: 1rem; font-size: 0.8125rem; line-height: 1.45; color: rgba(255, 255, 255, 0.6); }

/* Under "How Glint works": a pointer to the full Science page. */
.science-more { margin-top: clamp(1.75rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid rgba(0, 0, 0, 0.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.science-more__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; }
.science-more__text { margin-top: 0.5rem; max-width: 34em; font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.science-more__btn { flex: 0 0 auto; font-weight: 600; }
.note {
  margin: clamp(1rem, 2.5vw, 1.5rem) auto 0;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: #000;
  color: #fff;
}
.note p:last-child { font-size: 0.9375rem; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
.note__label { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; color: #fff; }

/* Goals. */
.tiles { display: grid; gap: 1rem; margin-top: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }
.tile { padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: var(--radius); background: var(--band); }
.tile__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.375rem, 1.7vw, 1.625rem); line-height: 1.1; margin-bottom: 0.625rem; }
@media (min-width: 1040px) { .tile__title { white-space: nowrap; } }
.tile p { color: var(--fg-2); font-size: 0.9375rem; line-height: 1.55; }
/* Pricing. */
.card { padding: clamp(1.75rem, 3.5vw, 3rem); border-radius: var(--radius); background: var(--bg); }
.card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.05; margin-bottom: 1.25rem; }
.buy { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
@media (min-width: 900px) { .buy { grid-template-columns: 1fr 1fr; } }
.price__total { font-family: var(--font-display); font-size: clamp(4rem, 7.5vw, 6rem); line-height: 0.95; letter-spacing: -0.02em; }
.price__total span { font-size: 0.4em; letter-spacing: 0; color: var(--fg-2); }
.price__note { margin-top: 0.5rem; color: var(--fg-2); }
.price__rows { margin-top: clamp(1.75rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); }
.price__rows li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1.125rem 0; border-bottom: 1px solid var(--rule); }
.price__when { font-size: 0.9375rem; font-weight: 600; color: var(--fg-3); }
.price__rows strong { font-weight: 600; }
.price__fine { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--fg-2); }
a.link:not([href]) { color: var(--fg-3); text-decoration: none; cursor: default; }
/* Kit card: title with a "Tech specs" link; the specs open as a small panel over the card. */
.kit-card__head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.kit-card__head .card__title { margin-bottom: 0; }
.specs-link {
  flex: 0 0 auto;
  padding: 0.25rem 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.specs-link:hover { text-decoration-color: currentColor; }
.specs-link:focus-visible, .specs__close:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }
.kit-card { position: relative; }
/* The panel covers the kit card, so it always stays on "that section"; it scrolls if the card is shorter. */
.specs {
  position: absolute;
  inset: 10px;
  z-index: 5;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.125rem, 2.5vw, 1.75rem) clamp(1.125rem, 2.5vw, 1.75rem) 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.06);
  text-align: left;
}
.specs[hidden] { display: none; }
.specs__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.25rem; }
.specs__title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.specs__close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--band); color: var(--fg); cursor: pointer; }
.specs__close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.specs__list { margin: 0; }
.specs__list > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 0.75rem; padding: 0.625rem 0; border-top: 1px solid var(--rule); }
/* Narrow cards: each label sits above its value. */
@media (max-width: 479px) { .specs__list > div { grid-template-columns: 1fr; gap: 0.125rem; } }
.specs__list > div:first-child { border-top: 0; }
.specs__list dt { font-size: 0.8125rem; font-weight: 600; color: var(--fg-2); }
.specs__list dd { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--fg); }

/* Kit carousel: three 16:9 photos that swipe, step with the arrows or dots,
   and move on by themselves (see js/carousel.js). */
.carousel { margin-bottom: 0; }
.carousel__viewport { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--band); }
.carousel__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.carousel .frame picture { border-radius: 0; }
.carousel .frame img { display: block; aspect-ratio: 16 / 9; }
/* The current photo's caption: plain, centred, between the photo and the dots. */
.carousel__caption { margin-top: 0.875rem; font-size: 0.9375rem; font-weight: 500; color: var(--fg); text-align: center; }
.carousel__btn {
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  color: #000;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.carousel__btn:hover { background: #fff; }
.carousel__btn:active { transform: translateY(-50%) scale(0.94); }
.carousel__btn:focus-visible, .carousel__dot:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.carousel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carousel__btn--prev { left: 12px; }
.carousel__btn--next { right: 12px; }
.carousel__controls { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.carousel__dots { display: flex; padding: 0 0.25rem; border-radius: 999px; background: var(--band); }
/* 24px targets, small visible dots. */
.carousel__dot { display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.carousel__dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.28); transition: width var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.carousel__dot[aria-current="true"]::before { width: 18px; background: #000; }
/* Disclaimer under the photos: small, but plain and readable. */
.carousel__note { margin-top: 0.625rem; font-size: 0.8125rem; line-height: 1.45; color: var(--fg-2); text-align: center; text-wrap: balance; }
/* Without the script the photos still swipe; controls that would do nothing stay hidden. */
.carousel:not([data-ready]) .carousel__btn, .carousel:not([data-ready]) .carousel__controls, .carousel:not([data-ready]) .carousel__caption { display: none; }
/* Delivery estimate: highlighted under both cards. */
.delivery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding: 1.125rem 1.5rem;
  border-radius: var(--radius);
  background: #000;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  font-weight: 500;
  text-align: center;
}
.delivery svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ph--soft { border-radius: calc(var(--radius) - 8px); }

/* Founder video. */
.video {
  position: relative;
  max-width: 64rem;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.video .ph--video { aspect-ratio: auto; height: 100%; border-radius: 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: opacity var(--t-fast) var(--ease-out); }
.video__play:hover img { opacity: 1; }
.video__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: #000;
  font-size: 1.5rem;
}
.video__alt { max-width: 64rem; margin: 1rem auto 0; text-align: center; font-size: 0.9375rem; }
/* FAQs: native accordions, styled. */
.faq__list { max-width: 52rem; margin: 0 auto; border-top: 1px solid var(--rule); }
.faq__list details { border-bottom: 1px solid var(--rule); }
.faq__list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 64px;
  padding: 1.125rem 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  transition: transform 250ms var(--ease-out);
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding: 0 0 1.5rem; max-width: 44rem; color: var(--fg-2); }
.faq__a ul { margin-top: 0.75rem; display: grid; gap: 0.5rem; }
.faq__a li { position: relative; padding-left: 1.1rem; }
.faq__a li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--fg-2); }
.faq__more { max-width: 52rem; margin: 2rem auto 0; text-align: center; color: var(--fg-2); }

/* Footer. */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 2.5rem var(--gutter) 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  color: var(--fg-3);
}
.footer__meta a { color: var(--fg-2); }
.footer .wordmark { color: var(--fg); }

/* Reveal on scroll (only when JavaScript runs and motion is welcome). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Reserve bar (glass) ----------
   Fixed from first paint. In the hero it sits on the photograph like Apple's
   "Pre-order" pill; once the hero is behind you it docks (a touch firmer). */
.reserve-bar {
  position: fixed;
  z-index: 50;
  left: 50%;
  bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 1.75rem;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 8px 8px 8px 24px;
  border-radius: 999px;
  /* Clear glass: a light tint, a deep blur that brightens what's behind it,
     and a lit rim along the top edge. */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.22) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(190%) brightness(1.08);
  backdrop-filter: blur(28px) saturate(190%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.25),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.06),
    0 10px 30px rgba(0, 0, 0, 0.14),
    0 2px 6px rgba(0, 0, 0, 0.06);
  transition: box-shadow 300ms var(--ease-out), background 300ms var(--ease-out);
}
/* A soft specular sheen across the top half. */
.reserve-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* A soft light falling on the top edge: no hard shape, it simply fades out. */
  background: radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.reserve-bar > * { position: relative; }
/* Over the white page, a touch more body so the glass still reads. */
.reserve-bar[data-docked="true"] {
  background: linear-gradient(180deg, rgba(250, 250, 252, 0.72) 0%, rgba(240, 240, 244, 0.6) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.08),
    0 12px 36px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .reserve-bar, .reserve-bar[data-docked="true"] { background: rgba(255, 255, 255, 0.96); }
}
/* "Today | Total ledger": TODAY ₹2,499 | the deal over ~~₹29,999~~ ₹14,999 total */
.reserve-bar__price { display: flex; align-items: center; white-space: nowrap; line-height: 1.15; }
.reserve-bar__today, .reserve-bar__total { display: flex; flex-direction: column; justify-content: center; }
.reserve-bar__label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.reserve-bar__now { margin-top: 2px; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.reserve-bar__total { margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(0, 0, 0, 0.14); align-items: flex-start; }
.reserve-bar__deal {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #a04f27;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}
.reserve-bar__deal[hidden] { display: none; }
.reserve-bar__sum { margin-top: 3px; font-size: 0.8125rem; color: var(--fg-2); }
.reserve-bar__sum strong { font-size: 1rem; font-weight: 600; color: var(--fg); }
.reserve-bar__was { margin-right: 0.15em; text-decoration-thickness: 1px; }
.reserve-bar__price strong { font-weight: 600; }
.reserve-bar__btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 1.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
/* Glossy black glass pill ("Reserve my device", and the page's other buttons):
   a lit top edge and a faint highlight, like a glass key. */
.reserve-bar__btn, .btn--glass {
  background: linear-gradient(180deg, #3a3a3c 0%, #111 46%, #000 100%);
  border-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 4px 12px rgba(0, 0, 0, 0.22);
}
.reserve-bar__btn:hover, .btn--glass:hover { background: linear-gradient(180deg, #48484a 0%, #1c1c1e 46%, #0a0a0a 100%); border-color: transparent; }

@media (max-width: 639px) {
  /* Phones: "★ BETA · 50% OFF" as coloured text, no "total", and "Reserve device". */
  .reserve-bar__wide { display: none; }
  .reserve-bar { gap: 0.75rem; padding: 6px 6px 6px 16px; }
  .reserve-bar__label { font-size: 0.5625rem; }
  .reserve-bar__now { margin-top: 1px; font-size: 1rem; }
  .reserve-bar__total { margin-left: 0.75rem; padding-left: 0.75rem; }
  .reserve-bar__deal { padding: 0; background: none; color: #a04f27; font-size: 0.5625rem; }
  .reserve-bar__sum { margin-top: 2px; font-size: 0.6875rem; }
  .reserve-bar__sum strong { font-size: 0.875rem; }
  .reserve-bar__btn { min-height: 38px; padding: 0 0.875rem; font-size: 0.875rem; }
}
@media (max-width: 379px) {
  .reserve-bar { padding-left: 14px; }
  .reserve-bar__btn { padding: 0 0.75rem; }
}
/* Very narrow phones: the ledger over the button. */
@media (max-width: 349px) {
  .reserve-bar { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 10px 8px 8px; border-radius: 20px; }
  .reserve-bar__price { justify-content: center; }
}

@media print {
  .js .reveal { opacity: 1; transform: none; }
  .reserve-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Holding page (/founding-beta/reserve, until chunk 2) ---------- */
.holding__main {
  max-width: var(--text);
  padding: clamp(4rem, 14vh, 9rem) var(--gutter) 4rem;
}
.holding__title {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.75rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.holding__text {
  margin: 1.5rem 0 2.5rem;
  max-width: 34rem;
  font-size: 1.1875rem;
  color: var(--fg-2);
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero__title, .hero__sub, .hero__facts, .hero__media { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- Beta Purchase Terms and Privacy Notice ---------- */
.legal { max-width: 44rem; margin: 0 auto; padding: clamp(2.5rem, 7vh, 4.5rem) var(--gutter) 5rem; }
.legal h1 { margin-top: 0.5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; letter-spacing: -0.01em; }
.legal__meta { margin-top: 0.75rem; font-size: 0.875rem; color: var(--fg-3); }
.legal__lede { margin-top: 1.5rem; font-size: 1.125rem; color: var(--fg-2); }
.legal h2 { margin-top: 2.75rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.legal p, .legal ul { margin-top: 0.75rem; color: var(--fg-2); line-height: 1.6; }
.legal ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; list-style: disc; }
.legal strong { color: var(--fg); font-weight: 600; }