/* ————————————————————————————————————————————————————————————————
   Life OS · public homepage
   The page is a Personal Desktop: the chosen life's wallpaper, a menubar, one enamel window
   and a dock of lives. Below the fold, day enamel and night ink alternate, built only from
   the product's own objects. Colour enters through --p-* exactly as it does in the app.
   ———————————————————————————————————————————————————————————————— */

@property --p-primary { syntax: '<color>'; inherits: true; initial-value: #0b5c63; }
@property --p-accent { syntax: '<color>'; inherits: true; initial-value: #f39a7b; }
@property --p-ink { syntax: '<color>'; inherits: true; initial-value: #1e1b18; }

:root {
  --p-primary: #0b5c63;
  --p-accent: #f39a7b;
  --p-ink: #1e1b18;
  --p-now: #f2b33d;

  --enamel: #fcfbf9;
  --raised: #f3f2ee;
  --sunk: #ebe9e4;
  --ink: #1d1c1a;
  --muted: #5c5953;
  --line: rgba(29, 28, 26, 0.09);
  --line-strong: rgba(29, 28, 26, 0.16);
  --now-ink: #231a05;

  --n-enamel: #17191c;
  --n-raised: #1f2226;
  --n-sunk: #121417;
  --n-ground: #0f1113;
  --n-text: #eeece7;
  --n-muted: #a9a7a1;
  --n-line: rgba(255, 255, 255, 0.075);
  --n-line-strong: rgba(255, 255, 255, 0.14);

  --teal: #1f5e63;
  --teal-night: #7fc3c4;
  --teal-strip: #23484b;

  --demo: #9a4f1f;
  --fact: #286546;
  --derived: #4d5560;
  --demo-night: #f2a877;
  --fact-night: #8fd0ae;
  --derived-night: #b9c0c9;

  --shadow-sm: 0 1px 2px rgba(22, 20, 16, 0.08), 0 10px 28px -14px rgba(22, 20, 16, 0.4);
  --win-shadow: 0 0 0 1px rgba(22, 20, 16, 0.06), 0 2px 4px rgba(22, 20, 16, 0.06), 0 24px 48px -16px rgba(18, 16, 12, 0.45), 0 60px 110px -40px rgba(18, 16, 12, 0.55);
  /* On the light day band the window's deepest drop is lighter, so its blur tail fades to the ground
     instead of stopping on a visible edge where the renderer truncates it. */
  --win-shadow-day: 0 0 0 1px rgba(22, 20, 16, 0.06), 0 2px 4px rgba(22, 20, 16, 0.06), 0 24px 48px -16px rgba(18, 16, 12, 0.4), 0 60px 110px -40px rgba(18, 16, 12, 0.3);
  --win-shadow-night:0 0 0 1px rgba(255, 255, 255, 0.07), 0 2px 4px rgba(0, 0, 0, 0.3), 0 28px 56px -18px rgba(0, 0, 0, 0.75), 0 70px 120px -40px rgba(0, 0, 0, 0.8);

  --font: 'Host Grotesk', system-ui, sans-serif;
  --display: 'Bricolage Grotesque', 'Host Grotesk', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(16px, 3.2vw, 44px);
  --mb-h: 32px;

  transition: --p-primary 650ms var(--ease), --p-accent 650ms var(--ease), --p-ink 650ms var(--ease);
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

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

html { scroll-padding-top: calc(var(--mb-h) + 12px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--raised);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: 'ss01' on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
code, pre { font-family: var(--mono); font-feature-settings: normal; }

::selection { background: color-mix(in srgb, var(--p-primary) 26%, transparent); color: inherit; }
.band-night ::selection,
.get ::selection,
.foot ::selection { background: color-mix(in srgb, var(--teal-night) 34%, transparent); }

:focus-visible { outline: 2px solid var(--p-primary); outline-offset: 3px; border-radius: 8px; }
.band-night :focus-visible,
.get :focus-visible,
.foot :focus-visible,
.desk-copy :focus-visible { outline-color: #fff; }
:focus:not(:focus-visible) { outline: none; }

html { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 26%, transparent) var(--raised); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 99px; background: color-mix(in srgb, var(--ink) 26%, transparent) padding-box; }
::-webkit-scrollbar-track { background: var(--raised); }

.i { width: 16px; height: 16px; flex: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip {
  position: fixed;
  top: 6px;
  left: 6px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--enamel);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--ease);
}
.skip:focus { transform: none; }

/* ————— Buttons ————— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 6px 20px 6px 17px;
  border: 0;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.003em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms var(--ease), background-color 160ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn .i { width: 18px; height: 18px; }
.btn-solid { background: var(--enamel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 30px -14px rgba(0, 0, 0, 0.55); }
.btn-ghost { background: rgba(12, 14, 16, 0.42); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }
.btn-persona { height: 40px; padding: 5px 14px 5px 16px; border-radius: 10px; background: var(--p-primary); color: #fff; font-size: 14px; }
.btn-persona .i { width: 16px; height: 16px; }
.btn-setup { height: 44px; background: var(--n-text); color: var(--n-sunk); font-size: 14.5px; }

@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 18px 36px -14px rgba(0, 0, 0, 0.6); }
  .btn-ghost:hover { background: rgba(12, 14, 16, 0.58); }
  .btn-persona:hover { background: color-mix(in srgb, var(--p-primary) 86%, #000); }
  .btn-setup:hover { background: #fff; }
  .btn-persona:hover .i,
  .btn-setup:hover .i { transform: translateX(2px); }
  .btn .i { transition: transform 180ms var(--ease); }
}

/* Off a Mac, the browser version leads. */
html[data-platform='other'] .desk-copy .cta-web { order: -1; background: var(--enamel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 30px -14px rgba(0, 0, 0, 0.55); }
html[data-platform='other'] .desk-copy .cta-mac { background: rgba(12, 14, 16, 0.42); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34); }

/* ————— Menubar ————— */
.mb {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--mb-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 12px 0 10px;
  background: rgba(251, 250, 248, 0.94);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
  font-size: 13px;
}
.mb-mark { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px 0 6px; border-radius: 7px; font-weight: 700; text-decoration: none; letter-spacing: -0.005em; }
.mb-mark svg { width: 15px; height: 15px; color: var(--p-primary); }
.mb-nav { display: flex; align-items: center; gap: 1px; }
.mb-nav a,
.mb-try { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border-radius: 7px; text-decoration: none; font-weight: 500; }
.mb-nav a[aria-current='true'] { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.mb-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.mb-try { font-weight: 600; color: var(--p-primary); }
.mb-try .i { width: 14px; height: 14px; }
.mb-clock { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); padding-right: 2px; }
@media (hover: hover) and (pointer: fine) {
  .mb-nav a:hover,
  .mb-try:hover,
  .mb-mark:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
}

/* ————— The desktop (hero) ————— */
.desk {
  position: relative;
  height: 100svh;
  min-height: 700px;
  max-height: 1180px;
  overflow: hidden;
  isolation: isolate;
  background: #0c0e10;
  color: #fff;
}
.desk-wall { position: absolute; inset: 0; }
.walls { position: absolute; inset: 0; z-index: 0; }
.wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--wall-pos, 50% 46%);
  opacity: 0;
  transition: opacity 700ms var(--ease);
}
.wall.is-on { opacity: 1; }
.wall[data-wall='maya'] { --wall-pos: 50% 58%; }
.wall[data-wall='sam'] { --wall-pos: 50% 42%; }
.wall[data-wall='priya'] { --wall-pos: 50% 60%; }
.wall-drawn { object-position: 50% 100%; }

.scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  --pool: color-mix(in srgb, var(--p-ink) 60%, transparent);
  --pool-soft: color-mix(in srgb, var(--p-ink) 42%, transparent);
  background:
    radial-gradient(52% 38% at 20% 78%, var(--pool) 0%, var(--pool-soft) 55%, transparent 100%),
    radial-gradient(95% 78% at 0% 100%, rgba(6, 12, 10, 0.62) 0%, rgba(6, 12, 10, 0.22) 50%, transparent 74%),
    linear-gradient(to top, rgba(6, 12, 10, 0.36), transparent 28%),
    linear-gradient(to bottom, rgba(6, 12, 10, 0.18), transparent 16%);
}
body[data-life='you'] .scrim {
  background:
    radial-gradient(52% 38% at 20% 78%, rgba(18, 26, 24, 0.5) 0%, rgba(18, 26, 24, 0.3) 55%, transparent 100%),
    linear-gradient(to top, rgba(6, 12, 10, 0.34), transparent 30%);
}

.desk-copy {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: clamp(150px, 18vh, 184px);
  width: min(46vw, 660px);
  display: grid;
  gap: 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.18);
}
.desk-copy h1 {
  font-family: var(--display);
  font-size: clamp(60px, 6.6vw, 96px);
  font-weight: 650;
  font-variation-settings: 'wdth' 92, 'opsz' 96;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.desk-copy .lede {
  margin-top: 22px;
  max-width: 38ch;
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.46;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.spec {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  font-variant-numeric: tabular-nums;
}

/* The window */
.win-wrap {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  top: calc(var(--mb-h) + clamp(28px, 7vh, 84px));
  width: clamp(420px, 37vw, 560px);
  display: grid;
  gap: 10px;
}
.win {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border-radius: 14px;
  background: var(--enamel);
  color: var(--p-ink);
  box-shadow: var(--win-shadow);
  transform-origin: 50% 50%;
}
.win-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 6px 0 14px;
  background: var(--p-primary);
  color: #fff;
}
.win-strip .i { width: 15px; height: 15px; opacity: 0.9; }
.win-title { flex: 1; min-width: 0; overflow: hidden; font-family: var(--mono); font-size: 12.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.win-btn { display: grid; place-items: center; width: 30px; height: 28px; border-radius: 8px; color: rgba(255, 255, 255, 0.92); transition: background-color 120ms ease; }
.win-btn:hover { background: rgba(255, 255, 255, 0.16); }
.win-btn:focus-visible { outline-color: #fff; }
.win-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 18px 22px 20px; }
.win-foot {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 14px;
  border-top: 1px solid var(--line);
  background: var(--raised);
  color: var(--muted);
  font: 400 11.5px/1.4 var(--mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.w-greet { font-family: var(--display); font-size: 28px; font-weight: 650; line-height: 1.05; letter-spacing: -0.026em; font-variation-settings: 'wdth' 92; }
.w-chapter { margin-top: -10px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.w-block { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.w-title { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--display); font-size: 17px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.2; }
.w-meta { font-family: var(--font); font-size: 12.5px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.w-intent { font-size: 15px; font-weight: 600; line-height: 1.38; text-wrap: pretty; }
.w-open { justify-self: start; }

.prov {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--prov, var(--demo));
  white-space: nowrap;
}
.prov::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.prov[data-tone='demo'] { --prov: var(--demo); }
.prov[data-tone='fact'] { --prov: var(--fact); }
.prov[data-tone='derived'] { --prov: var(--derived); }

.today { display: grid; gap: 1px; margin: 0 -6px; font-variant-numeric: tabular-nums; }
.today li {
  display: grid;
  grid-template-columns: 40px 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 27px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 13.5px;
}
.today time { font-size: 12.5px; color: var(--muted); }
.today .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--dot, var(--p-primary)); }
.today .txt { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.today li[data-state='past'] { color: var(--muted); }
.today li[data-state='past'] .dot { opacity: 0.45; }
.today li[data-state='now'] { min-height: 32px; background: color-mix(in srgb, var(--p-now) 24%, var(--enamel)); font-weight: 600; }
.today li[data-state='now'] time,
.today li[data-state='next'] time { color: var(--p-ink); font-weight: 600; }
/* A life with steps instead of a schedule (You) reads as a plain numbered list: no time column, no dots. */
.today[data-kind='steps'] { counter-reset: step; }
.today[data-kind='steps'] li { counter-increment: step; grid-template-columns: auto minmax(0, 1fr); gap: 7px; }
.today[data-kind='steps'] li::before { content: counter(step) '.'; color: var(--muted); font-weight: 600; }
.today[data-kind='steps'] .txt { white-space: normal; }
.now-pill { padding: 1px 7px 2px; border-radius: 99px; background: var(--p-now); color: var(--now-ink); font-size: 11px; font-weight: 700; }
.next-label { font-size: 11.5px; font-weight: 600; color: var(--muted); }

.notice {
  padding: 11px 14px 12px;
  border-radius: 14px;
  background: var(--enamel);
  color: var(--p-ink);
  box-shadow: var(--shadow-sm);
}
.notice-title { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 650; }
.notice-title::before { content: ''; width: 7px; height: 7px; border-radius: 99px; background: var(--demo); }
.notice[data-tone='fact'] .notice-title::before { background: var(--fact); }
.notice-text { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* The dock */
.dock {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 10px;
}
.dock-hint { font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45); letter-spacing: 0.005em; }
.dock ul {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 10px 14px 7px;
  border-radius: 24px;
  background: rgba(251, 250, 248, 0.92);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.dock li { display: grid; }
.dock-btn {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  transition: transform 220ms var(--ease);
}
.dock-btn img,
.dock-you-art {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--enamel), 0 0 0 3px var(--line-strong);
  transition: box-shadow 220ms ease;
}
.dock-you-art {
  display: grid;
  place-items: center;
  background: url('/img/horizon-you-light.svg') 50% 100% / cover;
  color: var(--ink);
}
.dock-you-art .i { width: 22px; height: 22px; padding: 3px; border-radius: 99px; background: var(--enamel); box-sizing: content-box; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }
.dock-name { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.dock-run { width: 5px; height: 5px; margin-top: -1px; border-radius: 99px; background: transparent; }
.dock-btn[aria-pressed='true'] img,
.dock-btn[aria-pressed='true'] .dock-you-art { box-shadow: 0 0 0 2px var(--enamel), 0 0 0 4px var(--p-primary); }
.dock-btn[aria-pressed='true'] .dock-run { background: var(--p-now); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); }
.dock-btn:active { transform: scale(0.94); }
.dock-btn:focus-visible { outline: none; }
.dock-btn:focus-visible img,
.dock-btn:focus-visible .dock-you-art { box-shadow: 0 0 0 2px var(--enamel), 0 0 0 4px var(--ink); }
.dock-sep { align-self: stretch; width: 1px; margin: 4px 0 18px; background: var(--line-strong); }
@media (hover: hover) and (pointer: fine) {
  .dock-btn:hover { transform: translateY(-4px); }
}

/* ————— Bands ————— */
.band { position: relative; padding: clamp(88px, 11vw, 150px) var(--gutter); }
.band-day { background: var(--raised); color: var(--ink); }
.band-night { background: var(--n-ground); color: var(--n-text); }
.band-head { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 20px 56px; align-items: end; }
.band h2,
.get h2 {
  font-family: var(--display);
  font-size: clamp(40px, 4.8vw, 68px);
  font-weight: 650;
  font-variation-settings: 'wdth' 92, 'opsz' 96;
  line-height: 0.98;
  letter-spacing: -0.024em;
  text-wrap: balance;
}
.band-lede { max-width: 46ch; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.band-night .band-lede,
.get .band-lede { color: var(--n-muted); }

/* ————— Worlds ————— */
.controls {
  max-width: 1240px;
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--line);
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 4px 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 200ms ease;
}
.seg button .i { width: 15px; height: 15px; }
.seg button[aria-pressed='true'] { background: var(--enamel); color: var(--ink); box-shadow: 0 1px 2px rgba(22, 20, 16, 0.1), 0 4px 12px -6px rgba(22, 20, 16, 0.3); }
.seg-lives { margin-left: auto; }
.seg-lives button[aria-pressed='true'] { color: var(--p-primary); }
@media (hover: hover) and (pointer: fine) {
  .seg button:hover:not([aria-pressed='true']) { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
}

/* The desktop capture and the phone stand side by side, bottom-aligned: neither covers the other. */
.shots {
  position: relative;
  max-width: 1240px;
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(200px, 19vw, 262px);
  column-gap: clamp(20px, 2.6vw, 36px);
  align-items: end;
}
.shot-desk {
  position: relative;
  aspect-ratio: 1440 / 900;
  overflow: hidden;
  border-radius: 14px;
  background: var(--sunk);
  box-shadow: var(--win-shadow-day);
}
.shot-desk img { width: 100%; height: 100%; object-fit: cover; transition: opacity 260ms ease; }
.shots[data-loading] .shot-desk img,
.shots[data-loading] .shot-phone img { opacity: 0.55; }
.shot-phone {
  position: relative;
  padding: 9px;
  border-radius: 46px;
  background: #0e0f10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 2px 4px rgba(18, 16, 12, 0.1), 0 24px 48px -18px rgba(18, 16, 12, 0.42), 0 48px 80px -36px rgba(18, 16, 12, 0.3);
}
/* The screen keeps the capture's own 390 × 844 ratio, so nothing in it is cropped. */
.shot-phone img { width: 100%; height: auto; aspect-ratio: 390 / 844; object-fit: cover; border-radius: 37px; transition: opacity 260ms ease; }
.shot-cap {
  grid-column: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  margin-top: 20px;
}
.shot-desc { max-width: 52ch; font-size: 16px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.shot-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 14px;
  font-weight: 600;
  color: var(--p-primary);
  text-decoration: none;
}
.shot-live code { padding: 3px 7px 4px; border-radius: 6px; background: var(--sunk); color: var(--muted); font-size: 12px; font-weight: 400; }
.shot-live .i { width: 15px; height: 15px; }
.shot-live:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* ————— Ways in: the Setup window ————— */
.setup {
  max-width: 1240px;
  margin: 56px auto 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--n-enamel);
  box-shadow: var(--win-shadow-night);
}
.setup-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  background: var(--teal-strip);
  color: #eef4f3;
  font: 600 13px/1 var(--mono);
}
.setup-step { font-weight: 400; opacity: 0.8; font-variant-numeric: tabular-nums; }
.setup-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.setup-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 26px 16px;
  background: var(--n-raised);
  border-right: 1px solid var(--n-line);
  font-size: 14px;
  color: var(--n-muted);
}
.setup-rail li { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 10px; border-radius: 10px; }
.rail-dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1px var(--n-line-strong);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.rail-dot .i { width: 13px; height: 13px; }
.setup-rail li[data-state='done'] .rail-dot { background: color-mix(in srgb, var(--teal-night) 18%, transparent); color: var(--teal-night); box-shadow: none; }
.setup-rail li[data-state='now'] { background: color-mix(in srgb, var(--teal-night) 12%, transparent); color: var(--n-text); font-weight: 600; }
.setup-rail li[data-state='now'] .rail-dot { background: var(--teal-night); color: var(--n-sunk); box-shadow: none; }
.setup-rail .rail-note { margin-top: auto; align-items: flex-start; gap: 9px; padding-top: 18px; font-size: 12.5px; line-height: 1.45; }
.setup-rail .rail-note .i { width: 14px; height: 14px; margin-top: 2px; color: var(--teal-night); }

.setup-main { padding: 38px 48px 34px; }
.setup-title { font-family: var(--display); font-size: clamp(26px, 2.4vw, 34px); font-weight: 650; font-variation-settings: 'wdth' 92; letter-spacing: -0.022em; line-height: 1.05; }
.setup-lede { margin-top: 8px; font-size: 16px; color: var(--n-muted); }
.choice-group { display: grid; gap: 6px; margin-top: 28px; }
.choice-group + .choice-group { margin-top: 22px; }
.choice-label { font-size: 13px; font-weight: 600; color: var(--n-muted); margin-bottom: 2px; }
.choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 14px;
  border-radius: 13px;
  background: var(--n-raised);
  box-shadow: inset 0 0 0 1px var(--n-line);
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 200ms ease;
}
.choice-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--n-sunk); color: var(--teal-night); }
.choice-icon .i { width: 20px; height: 20px; }
.choice-text { display: grid; gap: 3px; }
.choice-text strong { font-size: 15.5px; font-weight: 650; color: var(--n-text); }
.choice-text span { font-size: 14px; line-height: 1.45; color: var(--n-muted); text-wrap: pretty; max-width: 72ch; }
.choice-go { width: 18px; height: 18px; color: var(--n-muted); transition: transform 180ms var(--ease), color 160ms ease; }
.choice:focus-visible { outline-color: var(--teal-night); }
@media (hover: hover) and (pointer: fine) {
  .choice:hover { background: color-mix(in srgb, var(--teal-night) 9%, var(--n-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--teal-night) 40%, transparent); }
  .choice:hover .choice-go { color: var(--teal-night); transform: translateX(3px); }
}
.setup-actions { display: flex; justify-content: flex-end; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--n-line); }

/* ————— Trust ————— */
.trust-grid {
  max-width: 1240px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.sheet {
  overflow: hidden;
  border-radius: 14px;
  background: var(--enamel);
  box-shadow: var(--win-shadow-day);
}
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 22px 16px; border-bottom: 1px solid var(--line); }
.sheet-path { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.sheet-file { margin-top: 3px; font-family: var(--display); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
/* Prose paragraphs are single source lines, so they soft-wrap at any width like an editor would. */
.md { margin: 0; padding: 20px 22px 22px; font-size: 13px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.md code { font-size: inherit; }
.md-fence { color: var(--muted); }
.md-k { color: var(--muted); }
.md-prov { padding: 1px 6px 2px; border-radius: 4px; background: color-mix(in srgb, var(--derived) 12%, transparent); color: var(--derived); font-weight: 600; }
.md-url { color: var(--fact); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.md-h { font-weight: 600; }
.md-q { color: var(--demo); }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 22px 14px; border-top: 1px solid var(--line); background: var(--raised); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.legend { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 7px; height: 7px; border-radius: 99px; background: var(--demo); }
.legend i[data-tone='fact'] { background: var(--fact); }
.legend i[data-tone='derived'] { background: var(--derived); }

.promises { display: grid; }
.promises > div { padding: 22px 0 24px; border-top: 1px solid var(--line-strong); }
.promises > div:last-child { border-bottom: 1px solid var(--line-strong); }
.promises dt { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 21px; font-weight: 650; letter-spacing: -0.018em; line-height: 1.2; }
.promises dt .i { width: 19px; height: 19px; color: var(--p-primary); }
.promises dd { margin-top: 7px; padding-left: 30px; font-size: 15.5px; line-height: 1.52; color: var(--muted); text-wrap: pretty; }
/* Notes that keep a reading measure (about 75 characters) while starting on the 1240px grid's left edge. */
.trust-note { max-width: 62ch; margin: 40px 0 0 max(0px, calc((100% - 1240px) / 2)); font-size: 14px; color: var(--muted); }

/* ————— Download ————— */
.get {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(96px, 10vw, 140px) var(--gutter) clamp(230px, 24vw, 380px);
  background: #0b1116;
  color: var(--n-text);
}
.get-wall-pic { display: contents; }
.get-wall { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.get::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(11, 17, 22, 0.55), transparent 42%); }
.get-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: clamp(32px, 6vw, 88px); align-items: start; }
.get-copy .band-lede { margin-top: 20px; }
.get .ctas { margin-top: 30px; }
.get .spec { color: rgba(238, 236, 231, 0.74); }
.get-alt { margin-top: 26px; max-width: 46ch; font-size: 15px; color: var(--n-muted); text-wrap: pretty; }
.get-alt a { color: var(--n-text); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.btn[data-recommended='true']::after { content: 'Your Mac'; margin-left: 2px; padding: 2px 7px 3px; border-radius: 99px; background: color-mix(in srgb, currentColor 12%, transparent); font-size: 11.5px; font-weight: 600; }

.win-night { background: var(--n-enamel); color: var(--n-text); box-shadow: var(--win-shadow-night); }
.win-night .win-strip { background: var(--teal-strip); }
.win-night .win-foot { background: var(--n-raised); border-top-color: var(--n-line); color: var(--n-muted); white-space: normal; padding-top: 8px; padding-bottom: 8px; }
.install .win-body,
.mac .win-body { gap: 14px; padding: 20px 22px 22px; }

/* Life OS for Mac.md: the soon state's window, the same night enamel as First launch.md. It sits just
   below the copy's last line, so the drawn moon rises clear above it instead of grazing its title strip. */
.mac { align-self: end; margin-bottom: -28px; }
.mac-status { display: flex; align-items: flex-start; gap: 11px; font-family: var(--display); font-size: 22px; font-weight: 650; font-variation-settings: 'wdth' 92; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.mac-dot { flex: none; width: 9px; height: 9px; margin-top: 8px; border-radius: 99px; background: var(--p-now); }
.mac-lede { font-size: 14.5px; line-height: 1.45; color: var(--n-muted); }
.mac-adds { display: grid; gap: 10px; }
.mac-adds li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; font-size: 15px; line-height: 1.4; }
.mac-adds .tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--teal-night) 16%, transparent); color: var(--teal-night); }
.mac-adds .tick .i { width: 13px; height: 13px; }
.install-lede { font-size: 15px; line-height: 1.5; }
.install-steps { counter-reset: step; display: grid; gap: 10px; }
/* The number hangs in the margin, so a step's text (with its bold UI names) flows as one paragraph. */
.install-steps li { counter-increment: step; position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.45; color: var(--n-muted); text-wrap: pretty; }
.install-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--teal-night) 16%, transparent); color: var(--teal-night); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.install-steps strong { color: var(--n-text); font-weight: 600; }
.install-alt { margin-top: 4px; font-size: 13.5px; color: var(--n-muted); }
.cmd { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--n-sunk); box-shadow: inset 0 0 0 1px var(--n-line); }
.cmd code { flex: 1; min-width: 0; overflow-x: auto; font-size: 12px; color: var(--n-text); white-space: nowrap; scrollbar-width: none; }
.cmd code::-webkit-scrollbar { display: none; }
.cmd-copy { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--n-raised); color: var(--n-text); font-size: 12.5px; font-weight: 600; }
.cmd-copy .i { width: 14px; height: 14px; }
.cmd-copy[data-done] { color: var(--fact-night); }
.cmd-copy:hover { background: color-mix(in srgb, #fff 10%, var(--n-raised)); }

/* ————— Footer ————— */
.foot { padding: 44px var(--gutter) 40px; background: var(--n-sunk); color: var(--n-muted); font-size: 13px; }
.foot-top { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-bottom: 22px; border-bottom: 1px solid var(--n-line); }
.foot-mark { display: inline-flex; align-items: center; gap: 9px; color: var(--n-text); font-weight: 700; font-size: 15px; text-decoration: none; }
.foot-mark svg { width: 18px; height: 18px; color: var(--p-now); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-nav a { color: var(--n-text); text-decoration: none; font-weight: 500; }
.foot-nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot-legal { max-width: 62ch; margin: 18px 0 0 max(0px, calc((100% - 1240px) / 2)); line-height: 1.55; text-wrap: pretty; }
.foot-legal + .foot-legal { margin-top: 8px; font-variant-numeric: tabular-nums; }
.foot-legal a { color: var(--n-text); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ————— Mid widths ————— */
@media (max-width: 1180px) {
  .dock-hint { display: none; }
  .win-wrap { width: clamp(400px, 40vw, 480px); }
  .win-body { gap: 14px; padding: 16px 18px 18px; }
  .today li:nth-child(n + 6) { display: none; }
  .band-head { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .promises { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .promises > div:nth-last-child(2) { border-bottom: 1px solid var(--line-strong); }
  .get-inner { grid-template-columns: minmax(0, 1fr); }
  .install,
  .mac { max-width: 560px; }
  .mac { margin-bottom: 0; }
}
@media (max-width: 1180px) and (max-height: 820px) {
  .notice { display: none; }
}
/* Short laptop viewports: the window and its provenance notice stay clear of the dock. Today keeps
   its past, now and next rows; below 740px tall the notice folds away as it does at 1180px. */
@media (min-width: 881px) and (max-height: 900px) and (max-width: 1280px) {
  .today li:nth-child(n + 6) { display: none; }
}
@media (min-width: 881px) and (max-height: 860px) {
  .win-wrap { top: calc(var(--mb-h) + clamp(16px, 4vh, 84px)); }
  .today li:nth-child(n + 5) { display: none; }
}
@media (min-width: 881px) and (max-height: 780px) {
  .dock-hint { display: none; }
}
@media (min-width: 881px) and (max-height: 740px) {
  .notice { display: none; }
}

/* ————— Stacked (tablet portrait and phone) ————— */
@media (max-width: 880px) {
  :root { --mb-h: 52px; }
  .mb { gap: 10px; padding: 0 8px 0 10px; font-size: 15px; }
  .mb-mark { height: 40px; font-size: 16px; }
  .mb-mark svg { width: 18px; height: 18px; }
  .mb-nav,
  .mb-clock { display: none; }
  .mb-try { height: 40px; padding: 0 12px; border-radius: 10px; background: var(--p-primary); color: #fff; font-size: 14.5px; }

  .desk { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; overflow: visible; background: var(--raised); color: var(--ink); }
  .desk .dock { order: 1; }
  .desk .win-wrap { order: 2; }
  .desk [data-announce] { order: 3; }
  .desk-wall { position: relative; inset: auto; height: min(82svh, 760px); min-height: 560px; overflow: hidden; background: #0c0e10; color: #fff; }
  .scrim {
    background:
      linear-gradient(to top, color-mix(in srgb, var(--p-ink) 80%, transparent) 0%, color-mix(in srgb, var(--p-ink) 62%, transparent) 44%, color-mix(in srgb, var(--p-ink) 22%, transparent) 66%, transparent 82%),
      linear-gradient(to bottom, rgba(6, 12, 10, 0.24), transparent 20%);
  }
  .desk-copy { left: var(--gutter); right: var(--gutter); bottom: 64px; width: auto; }
  .desk-copy h1 { font-size: clamp(50px, 13.5vw, 76px); }
  .desk-copy .lede { margin-top: 16px; font-size: 17px; }
  .ctas { margin-top: 22px; }
  .desk-copy .ctas .btn { flex: 1 1 220px; }

  .dock { position: relative; left: auto; bottom: auto; transform: none; margin: -38px auto 0; width: max-content; max-width: calc(100% - 2 * var(--gutter)); }
  .dock-hint { display: none; }
  .dock ul { overflow-x: auto; scrollbar-width: none; }
  .dock ul::-webkit-scrollbar { display: none; }
  .dock-btn img,
  .dock-you-art { width: 50px; height: 50px; border-radius: 14px; }

  .win-wrap { position: relative; top: auto; right: auto; width: auto; max-width: 620px; margin: 22px auto 0; padding: 0 var(--gutter); }
  .notice { display: block; }
  .today li:nth-child(n + 6) { display: grid; }

  .band { padding-top: 96px; padding-bottom: 96px; }
  .desk + .band { padding-top: 80px; }
  .controls { margin-top: 32px; }
  .seg-lives { margin-left: 0; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { flex: none; height: 40px; padding: 4px 13px; }
  .shots { grid-template-columns: minmax(0, 1fr); }
  .shot-desk { border-radius: 10px; }
  .shot-phone { justify-self: center; width: min(62vw, 260px); margin-top: 18px; }
  .shot-cap { grid-column: auto; }

  .setup-grid { grid-template-columns: 1fr; }
  .setup-rail { flex-direction: row; gap: 6px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--n-line); }
  .setup-rail li { flex: 1; min-height: 0; padding: 0; font-size: 0; }
  .setup-rail li .rail-dot { width: 100%; height: 4px; border-radius: 99px; font-size: 0; background: var(--n-line-strong); box-shadow: none; }
  .setup-rail li .rail-dot .i { display: none; }
  .setup-rail li[data-state='done'] .rail-dot,
  .setup-rail li[data-state='now'] .rail-dot { background: var(--teal-night); }
  .setup-rail li[data-state='now'] { background: none; }
  .setup-rail .rail-note { display: none; }
  .setup-main { padding: 26px 18px 22px; }
  .choice { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .choice-go { display: none; }
  .setup-actions { justify-content: stretch; }
  .setup-actions .btn { width: 100%; }

  .promises { grid-template-columns: 1fr; }
  .promises > div:nth-last-child(2) { border-bottom: 0; }
  .promises dd { padding-left: 0; }
  .md { font-size: 12px; padding: 16px; }
  .sheet-head { padding: 16px; }
  .sheet-foot { padding: 12px 16px; }

  .get .ctas .btn { flex: 1 1 260px; }

  /* The drawn landscape becomes its own band under the copy, so the moon never sits behind text. */
  .get { display: flex; flex-direction: column; padding-bottom: 0; }
  .get-wall { position: relative; inset: auto; z-index: 0; order: 2; width: calc(100% + 2 * var(--gutter)); height: auto; max-width: none; aspect-ratio: 1600 / 1000; margin: 48px calc(-1 * var(--gutter)) 0; }
  .shot-live code { display: none; }
}

@media (max-width: 420px) {
  .dock ul { gap: 9px; padding: 9px 11px 6px; }
  .dock-btn img,
  .dock-you-art { width: 46px; height: 46px; border-radius: 13px; }
  .w-greet { font-size: 24px; }
  .w-head { flex-wrap: wrap; row-gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .wall { transition-duration: 1ms; }
  .dock-btn,
  .btn,
  .choice,
  .choice-go { transition: none; }
}

/* ————— Until the Mac download is hosted, the browser version leads ————— */
html[data-downloads='soon'] .cta-mac,
html[data-downloads='soon'] .get-ready,
html[data-downloads='soon'] .install,
html[data-downloads='soon'] .when-ready,
html[data-downloads='ready'] .cta-mac-soon,
html[data-downloads='ready'] .get-soon,
html[data-downloads='ready'] .when-soon { display: none !important; }
html[data-downloads='soon'] .desk-copy .cta-web { background: var(--enamel); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 14px 30px -14px rgba(0, 0, 0, 0.55); }