/* ============================================================================
   TimeLeft — marketing site
   ----------------------------------------------------------------------------
   The palette is the app's own Midnight theme (constants/themes/midnight.ts) and
   the Periwinkle accent (constants/accents.ts). Change a colour in the app and
   change it here; nothing derives one from the other.

   One deliberate divergence: `--muted` is 0.58 alpha here, not the app's 0.45.
   Composited on `--bg` the app's value measures 4.03:1, which is under AA — it
   passes in the app because it lands on larger native type, and it does not pass
   here, where it carries the footer's legal links at 13.6px. 0.58 measures
   5.90:1. Contrast is a property of the pairing, not of the token.

   Type follows the app's two rules: Geist carries its weight in the family, and
   line-height is never equal to font-size.
   ========================================================================== */

:root {
  /* Midnight */
  --bg:            #0F1115;
  --bg-deep:       #08090b;
  --ink:           #EAECEF;
  --muted:         rgba(234, 236, 239, 0.58);  /* see header note */
  --muted-strong:  rgba(234, 236, 239, 0.72);
  --card-deep:     #12151A;
  --line:          rgba(255, 255, 255, 0.07);
  --line-soft:     rgba(255, 255, 255, 0.045);
  --track:         rgba(255, 255, 255, 0.09);

  /* Periwinkle */
  --accent:        #7ea7dc;
  --accent-dim:    rgba(126, 167, 220, 0.16);
  --accent-glow:   rgba(126, 167, 220, 0.13);

  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --measure: 1120px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(68px, 9vw, 118px);
  --radius-pill: 999px;

  /* The page's one authored moment: the bars drain in once, on load. */
  --drain: 900ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

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

::selection { background: var(--accent); color: var(--bg-deep); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Browser surfaces the design still owns. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.13); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }
html { scrollbar-color: rgba(255,255,255,.16) var(--bg); }

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

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

/* ── Shared type roles ─────────────────────────────────────────────────────*/

.serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-size: 1.1em;
  letter-spacing: 0;
}

h1, h2, h3 { font-weight: 300; letter-spacing: -0.03em; margin: 0; }

h1 {
  font-size: clamp(2.55rem, 6.2vw, 4.4rem);
  line-height: 1.07;
  text-wrap: balance;
}

.section-title {
  font-size: clamp(1.85rem, 3.6vw, 2.7rem);
  line-height: 1.15;
  max-width: 18ch;
  text-wrap: balance;
}

.lead {
  margin: 22px 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  line-height: 1.62;
  color: var(--muted-strong);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ── The live remainder ────────────────────────────────────────────────────
   The page's subject, stated with the visitor's own clock. Ships hidden and is
   revealed by JS: nothing can compute a remainder without it, so absent is the
   correct no-JS state. The digits tick every second; the bar is that same fact
   made spatial, and it drains in once on load. */

.live { margin: 30px 0 0; max-width: 400px; }
.live[hidden] { display: none; }

.live-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 11px;
}

.live-value {
  font-size: 1.34rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.live-value .u {
  font-size: 0.62em;
  color: var(--muted);
  margin: 0 0.5em 0 0.12em;
  letter-spacing: 0;
}
.live-value .u:last-child { margin-right: 0; }

.live-scope {
  font-size: 0.68rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.live-track {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--track);
  overflow: hidden;
}
.live-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.live.is-armed .live-fill { transition: width var(--drain) var(--ease); }

/* ── Buttons ───────────────────────────────────────────────────────────────*/

.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px 13px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.store-btn:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); }
.store-btn:active { transform: translateY(1px); }
.store-btn svg { flex: none; }
.store-btn .store-label { display: grid; text-align: left; line-height: 1.15; }
.store-btn .store-small {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.store-btn .store-big { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; }

/* A store link with no URL yet: visibly inert, still legible. Dimming the whole
   button put its label near 3.9:1 and its small line near 1.5:1 — the state was
   announced by making it unreadable. The container recedes; the words do not. */
.store-btn[aria-disabled='true'] {
  cursor: default;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.022);
}
.store-btn[aria-disabled='true'] .store-big { color: var(--muted-strong); font-weight: 400; }
.store-btn[aria-disabled='true'] svg { opacity: 0.45; }

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
  transition: background 180ms ease, border-color 180ms ease;
}
.btn-quiet:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.26); }

/* ── Header ────────────────────────────────────────────────────────────────*/

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(15, 17, 21, 0.72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  transition: background 220ms ease;
}
.site-head.is-stuck { background: rgba(15, 17, 21, 0.9); }
@supports not (backdrop-filter: blur(4px)) {
  .site-head { background: rgba(15, 17, 21, 0.96); }
}

/* Today, draining, under everything you read. Same idea as the hero bar at a
   different scale — the app shows four periods at once for the same reason. */
.day-line {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line);
}
.day-line span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  opacity: 0.55;
}
.site-head.is-armed .day-line span { transition: width var(--drain) var(--ease); }

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.brand img {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.head-nav { display: flex; align-items: center; gap: 30px; }
.head-nav a {
  font-size: 0.88rem;
  color: var(--muted-strong);
  text-decoration: none;
  transition: color 160ms ease;
}
.head-nav a:hover { color: var(--ink); }
.head-nav .btn-quiet { color: var(--ink); }

@media (max-width: 720px) {
  .head-nav .nav-link { display: none; }
}

/* ── Hero ──────────────────────────────────────────────────────────────────*/

.hero {
  position: relative;
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: clamp(56px, 8vw, 104px);
  overflow: hidden;
}

/* The accent bloom behind the device — the app's ring glow, spread out. It is
   the only glow on the page: four more behind the feature shots did one job
   five times, and sat wrong behind the cream and amber themes. */
.hero::before {
  content: '';
  position: absolute;
  top: -18%;
  right: -6%;
  width: min(760px, 82vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-glow) 0%, rgba(126, 167, 220, 0) 62%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero-copy .lead { max-width: 42ch; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--muted);
}
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
}

.hero-device { justify-self: center; width: 100%; max-width: 340px; }
.hero-device img { width: 100%; height: auto; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-device { max-width: 280px; }
  .hero-copy .lead, .hero-copy h1 { max-width: none; }
  .live { max-width: none; }
}

/* ── Feature rows ──────────────────────────────────────────────────────────
   A feature is a heading, a description and one image. The rows alternate
   sides; below the breakpoint they stack with the image last every time, so
   the reading order stays heading → description → image. */

.section { padding-block: var(--section-y); }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 6vw, 88px);
}
.feature + .feature { margin-top: clamp(72px, 10vw, 132px); }
.feature.is-flipped .feature-art { order: -1; }

.feature .section-title { max-width: 15ch; }
.feature .lead { margin-top: 20px; max-width: 44ch; }

.feature-art { display: grid; justify-items: center; }
.feature-art img { width: 100%; max-width: 310px; height: auto; }

@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 36px; }
  .feature.is-flipped .feature-art { order: 0; }
  .feature .section-title, .feature .lead { max-width: none; }
  .feature-art img { max-width: 265px; }
}

/* ── Widgets ───────────────────────────────────────────────────────────────
   Laid out on the home screen's own unit: a small tile is 2 columns of 8, a
   medium tile is 4. Six tiles stacked in a half-column was a 760px sliver
   beside a 200px paragraph. */

.widgets-copy { max-width: 52ch; }
.widgets-copy .lead { max-width: 50ch; }

.widget-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(11px, 1vw, 14px);
  /* One number controls how large the tiles draw. At 440px a small tile is
     ~100px and a medium ~213px; the gap stays near 14% of a small tile, the
     proportion the home screen itself uses. Eight columns hold at every
     viewport, so the tiles never reflow into a different size, and the files
     are cut at the render's native resolution so there is headroom to go
     bigger without re-cutting. */
  max-width: 440px;
  margin: clamp(34px, 4.5vw, 52px) 0 0;
  padding: 0;
  list-style: none;
  align-items: start;
}
.widget-grid li { margin: 0; }
.widget-grid .w-sm { grid-column: span 2; }
.widget-grid .w-md { grid-column: span 4; }
/* Six tiles on an eight-wide grid leave the last row half full; centring it
   reads as a decision rather than as a gap. */
.widget-grid li:last-child { grid-column: 3 / span 4; }
.widget-grid img { width: 100%; height: auto; }

/* Side by side above 1000px, on the feature rows' own geometry: two equal
   columns, the same gap, the same measures on the heading and the lead. The
   tiles take the left half because the row above them is copy-left — the
   section is the fourth feature row and alternates like one.

   Markup order stays copy-then-tiles so the stacked layout below this reads
   heading → description → tiles; `order` does the swap, exactly as
   `.feature.is-flipped` does it. */
@media (min-width: 1000px) {
  .widgets .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 88px);
    align-items: center;
  }
  .widget-grid { order: -1; justify-self: center; margin-top: 0; }
  .widgets-copy { max-width: none; }
  .widgets-copy .section-title { max-width: 15ch; }
  .widgets-copy .lead { max-width: 44ch; }
}

/* ── Download ──────────────────────────────────────────────────────────────*/

.download { padding-block: clamp(80px, 11vw, 130px); text-align: center; }
.download-inner { max-width: 640px; margin-inline: auto; }
.download .section-title { max-width: none; margin-inline: auto; }
.download .lead { margin-inline: auto; }
.download .store-row { justify-content: center; }

/* ── Quote ─────────────────────────────────────────────────────────────────
   One of the 43 quotes that ship in the app, at reading weight rather than as
   a caption under a button. */

.quote-band {
  margin: 0;
  padding-block: clamp(72px, 10vw, 120px);
  padding-inline: var(--gutter);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.quote-band blockquote { margin: 0; }
.quote-band p {
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  line-height: 1.28;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.quote-band p::before { content: '\201C'; }
.quote-band p::after  { content: '\201D'; }
.quote-band figcaption { margin-top: 22px; }
.quote-band cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── Footer ────────────────────────────────────────────────────────────────*/

.site-foot {
  border-top: 1px solid var(--line);
  padding-block: 40px 48px;
  font-size: 0.85rem;
  color: var(--muted);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
}
.foot-copy { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a {
  text-decoration: none;
  transition: color 160ms ease;
}
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ── Legal pages ───────────────────────────────────────────────────────────*/

.legal { padding-block: clamp(52px, 7vw, 88px) clamp(64px, 9vw, 110px); }
.legal-inner { max-width: 680px; }
.legal h1 { font-size: clamp(2.1rem, 4.6vw, 3.1rem); margin-bottom: 10px; }
.legal .updated {
  font-size: 0.72rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 clamp(34px, 5vw, 52px);
}
.legal h2 {
  font-size: 1.22rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: clamp(38px, 5vw, 54px) 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal h3 {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 26px 0 8px;
}
.legal p, .legal li { color: var(--muted-strong); font-size: 0.97rem; line-height: 1.72; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 20px; }
.legal li { margin-bottom: 9px; }
.legal li::marker { color: var(--accent); }
.legal a { color: var(--accent); text-decoration-color: var(--accent-dim); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: var(--accent); }
.legal strong { color: var(--ink); font-weight: 500; }
.legal .toc {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  columns: 2;
  column-gap: 32px;
}
.legal .toc li { margin-bottom: 7px; font-size: 0.9rem; }
.legal .toc a { text-decoration: none; color: var(--muted-strong); }
.legal .toc a:hover { color: var(--accent); }
@media (max-width: 560px) { .legal .toc { columns: 1; } }

/* ── Reduced motion ────────────────────────────────────────────────────────
   Reduced means not animated, never not updated: the bars still show the true
   remainder, they just arrive at it instead of travelling to it. */

@media (prefers-reduced-motion: reduce) {
  .live.is-armed .live-fill,
  .site-head.is-armed .day-line span { transition: none; }
  .store-btn, .btn-quiet, .head-nav a, .foot-links a, .site-head { transition: none; }
}