/* Layout: the app's dotted paper as the page; each section is a stop on a day's
   journey (today, back, ahead, onward), copy on one side, device windows on the other. */
:root {
  /* Palette, Color.swift */
  --abyss: #0C2649;
  --sapphire: #004D99;
  --ruby: #EF4142;
  --slate: #7C828A;
  --gold: #EFB641;
  --nova: #FFFFFF;
  --primary: var(--abyss);
  --primary-lighten: #7B828A;
  --secondary: var(--ruby);
  --secondary-lighten: #EF9896;
  --fg: var(--abyss);
  --fg-secondary: rgba(12, 38, 73, 0.7);
  --bg: var(--nova);
  --bg-secondary: #FCFCFB;
  --bg-tertiary: #F1F0EB;
  --placeholder: rgba(60, 60, 67, 0.3);
  --overlay: rgba(0, 0, 0, 0.2);
  /* Page roles built from the palette */
  --frame: var(--abyss);
  --dot: rgba(0, 0, 0, 0.03);
  --rule: rgba(12, 38, 73, 0.12);
  --on-accent: var(--nova);
  --mood-peaceful: var(--primary);
  --mood-great: var(--secondary);
  --mood-bad: var(--slate);
  --cap-ring: 0.6px;

  /* Type, Font.swift. Rounded system face, plain system face for content */
  --face-rounded: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  --face-plain: system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --type-hero: 40px;      /* appHero 600 */
  --type-display: 36px;   /* appDisplay 400 */
  --type-large-title: 34px; /* appLargeTitle 700 */
  --type-title: 24px;     /* appTitle 600 */
  --type-headline: 17px;  /* appHeadline 600 */
  --type-body: 15px;      /* appBody 400 */
  --type-label: 14px;     /* appLabel 600 */
  --type-content: 14px;   /* appContent 300, plain */
  --type-caption: 12px;   /* appCaption 300, plain */
  --type-badge: 9px;      /* appBadge 700 */

  /* Spacing, padding, corners, Spacing.swift */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 32px;
  --pad-s: 10px;
  --pad-m: 20px;
  --radius: 6px;
  /* Display corners, DisplayCorner.swift: iPhone 16 at 55pt on 393x852,
     iPad at 18pt on a 13-inch 1376x1032 landscape screen */
  --corner-iphone: 14% / 6.46%;
  --corner-ipad: 1.74% / 1.31%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: var(--sapphire);
    --fg: var(--nova);
    --fg-secondary: rgba(255, 255, 255, 0.7);
    --bg: #20252A;
    --bg-secondary: #1A1E23;
    --cap-ring: 0px;
    --bg-tertiary: #101418;
    --placeholder: rgba(235, 235, 245, 0.3);
    --frame: rgba(255, 255, 255, 0.3);
    --dot: rgba(255, 255, 255, 0.035);
    --rule: rgba(255, 255, 255, 0.12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: var(--sapphire);
  --fg: var(--nova);
  --fg-secondary: rgba(255, 255, 255, 0.7);
  --bg: #20252A;
  --bg-secondary: #1A1E23;
  --cap-ring: 0px;
  --bg-tertiary: #101418;
  --placeholder: rgba(235, 235, 245, 0.3);
  --frame: rgba(255, 255, 255, 0.3);
  --dot: rgba(255, 255, 255, 0.035);
  --rule: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 6px 6px;
  color: var(--fg);
  font-family: var(--face-rounded);
  font-size: var(--type-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.coral { color: var(--secondary); }

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-left: max(var(--pad-m), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad-m), env(safe-area-inset-right, 0px));
}

/* Wordmark: the app's sidebar wordmark, Time Caps in the title face */
.wordmark {
  font-family: var(--face-rounded);
  font-size: var(--type-title, 24px);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--fg);
  white-space: nowrap;
}

/* Header */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--pad-m);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: baseline; flex-wrap: wrap; row-gap: var(--space-xs); }
.top-link {
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  padding: var(--space-s) var(--pad-s);
  border-radius: var(--radius);
  transition: color 160ms ease, background-color 160ms ease;
}
.top-link:hover, .top-link:focus-visible { color: var(--secondary); background: var(--bg-tertiary); }
.top-actions { display: flex; align-items: center; gap: var(--space-xs); }

/* Language menu */
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; color: var(--fg); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " \25BE"; color: var(--primary-lighten); }
.lang ul {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-xs));
  z-index: 10;
  min-width: 11rem;
  margin: 0;
  padding: var(--space-xs);
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(12, 38, 73, 0.12);
}
.lang a {
  display: block;
  padding: var(--space-s) var(--pad-s);
  border-radius: calc(var(--radius) - 4px);
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.lang a:hover { background: var(--bg-tertiary); }
.lang a[aria-current] { color: var(--secondary); }

/* Buttons */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--pad-m);
  border-radius: var(--radius);
  background: var(--secondary);
  color: var(--on-accent);
  font-size: var(--type-headline);
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease;
}
.cta:hover { background: color-mix(in srgb, var(--ruby) 82%, #000); }
.cta:active { transform: scale(0.98); }

/* Shared section layout */
.section { padding-block: calc(var(--space-l) * 2.5); }
.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
.split > * { min-width: 0; }
@media (min-width: 880px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--space-l) * 2); }
  .split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split.flip .copy { order: 2; }
}
.copy { display: grid; gap: var(--pad-m); max-width: 34rem; }
.tag {
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.tag + h2 { margin-top: calc(var(--space-s) * -1); }
h2 {
  font-size: clamp(32px, 3.8vw, 46px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.lead {
  font-size: clamp(var(--type-headline), 1.5vw, 20px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-secondary);
  text-wrap: pretty;
}
.points {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-s);
  padding-top: var(--pad-m);
  border-top: 1px solid var(--rule);
}
.points li { display: grid; gap: var(--space-xs); }
.points h3 { font-size: var(--type-headline); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.points p {
  font-family: var(--face-plain);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-secondary);
  text-wrap: pretty;
}

/* Device placeholders: line drawings with the real display corners */
.device {
  position: relative;
  border: 3px solid var(--frame);
  background: var(--bg-tertiary);
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 6px 6px;
  max-width: 100%;
  overflow: hidden;
  box-shadow: 0 28px 56px -32px rgba(12, 38, 73, 0.45);
}
.device.iphone { aspect-ratio: 1320 / 2868; border-radius: var(--corner-iphone); }
.device.ipad { aspect-ratio: 2064 / 2752; border-radius: var(--corner-ipad); }
.device img { display: block; width: 100%; height: 100%; object-fit: cover; }
.device { container-type: inline-size; }
@container (max-width: 150px) { .slot-badge { display: none; } }
.device .slot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-s);
  padding: var(--pad-s);
  text-align: center;
}
.slot-badge {
  font-size: var(--type-badge);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-lighten);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 2px var(--space-s);
}
.slot-label {
  font-family: var(--face-plain);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.4;
  color: var(--fg-secondary);
  max-width: 18ch;
  text-wrap: balance;
}
.ipad .slot-label { max-width: 26ch; }

/* Stages: how devices sit together */
.stage { position: relative; }
.stage-pad-phone { width: 100%; max-width: 600px; margin-inline: auto; padding-bottom: 8%; }
.stage-pad-phone .ipad { width: 78%; }
.stage-pad-phone .iphone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 31%;
  background-color: var(--bg-secondary);
  box-shadow: 0 0 0 6px var(--bg), 0 28px 56px -28px rgba(12, 38, 73, 0.5);
}
/* Side by side at one height, for a centered section: columns in the
   devices' width-to-height ratios, iPad 2064/2752 and iPhone 1320/2868 */
.stage-side {
  display: grid;
  grid-template-columns: 0.75fr 0.4603fr;
  gap: clamp(var(--space-m), 3vw, var(--space-l));
  align-items: end;
}
.stage-phones {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(var(--space-m), 4vw, var(--space-l));
}
.stage-phones .iphone { width: min(44%, 230px); }
.stage-phones .iphone:nth-child(2) { margin-top: 12%; }
.stage-pad { width: 100%; max-width: 560px; margin-inline: auto; }
.stage-three { gap: clamp(var(--space-s), 2vw, var(--pad-m)); }
.stage-three .iphone { width: 31%; }
.stage-three .iphone:nth-child(3) { margin-top: 24%; }

/* Hero */
.hero { padding-block: var(--pad-m) calc(var(--space-l) * 2.5); }
.hero h1 {
  font-size: clamp(44px, 6.4vw, 80px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero .lead { font-size: clamp(18px, 1.7vw, 21px); max-width: 30rem; }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-m); align-items: center; margin-top: var(--space-s); }
@media (prefers-reduced-motion: no-preference) {
  .hero .stage .ipad { animation: rise 700ms cubic-bezier(.2, .8, .2, 1) both; }
  .hero .stage .iphone { animation: rise 700ms 140ms cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes rise { from { transform: translateY(18px); } to { transform: none; } }
}

/* Today band uses the app's paper */
.paper-band { background: var(--bg-tertiary); }
.paper-band .device { background-color: var(--bg); }
.paper-band .stage-pad-phone .iphone { box-shadow: 0 0 0 6px var(--bg-tertiary), 0 28px 56px -28px rgba(12, 38, 73, 0.5); }

/* Mood legend */
.moods { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--pad-m); }
.mood {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--type-label);
  font-weight: 600;
}
/* The app's CapView: a capsule twice as tall as wide, white over the mood
   color, with a hairline in the mood color on light paper */
.mood i {
  width: 12px;
  height: 24px;
  border-radius: 12px;
  background: linear-gradient(var(--nova) 50%, var(--c) 50%);
  box-shadow: inset 0 0 0 var(--cap-ring) var(--c);
  flex: none;
}

/* Journey grid */
.journey-head { display: grid; gap: var(--space-m); max-width: 52rem; margin-bottom: calc(var(--space-l) * 1.5); }
.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--space-l) var(--space-l);
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}
.features li { display: grid; gap: var(--space-xs); align-content: start; }
.features h3 { font-size: var(--type-body); font-weight: 600; line-height: 1.3; }
.features p {
  font-family: var(--face-plain);
  font-size: var(--type-content);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg-secondary);
  text-wrap: pretty;
}

/* Footer */
.end { background: var(--bg-tertiary); padding-block: calc(var(--space-l) * 2.5) var(--space-l); }
.end-grid { display: grid; gap: var(--space-l); }
.end-call { display: grid; gap: var(--pad-m); justify-items: start; }
.app-icon {
  width: 72px;
  height: 72px;
  border-radius: 22.4%;
  box-shadow: 0 0 0 1px var(--rule);
}
.end-call .slogan {
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-m);
  padding-top: var(--pad-m);
  border-top: 1px solid var(--rule);
  font-size: var(--type-caption);
  color: var(--fg-secondary);
}
.fine nav { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--pad-m); }
.fine a { text-decoration: none; }
.fine a:hover { color: var(--secondary); }
@media (max-width: 879px) {
  .section { padding-block: calc(var(--space-l) * 1.75); }
  .hero { padding-bottom: calc(var(--space-l) * 1.75); }
  .split { gap: calc(var(--space-l) * 1.25); }
  .copy { max-width: 40rem; }
  .journey-head { margin-bottom: var(--space-l); }
}
@media (max-width: 599px) {
  .section { padding-block: calc(var(--space-l) * 1.5); }
  .hero { padding-top: var(--space-s); }
  .hero .actions .cta, .end-call .cta { width: 100%; }
  .end-call { justify-items: stretch; }
  .stage-pad-phone .ipad { width: 76%; }
  .stage-pad-phone .iphone { width: 36%; }
  .stage-pad-phone .iphone, .paper-band .stage-pad-phone .iphone { box-shadow: 0 0 0 4px var(--bg), 0 20px 40px -24px rgba(12, 38, 73, 0.5); }
  .paper-band .stage-pad-phone .iphone { box-shadow: 0 0 0 4px var(--bg-tertiary), 0 20px 40px -24px rgba(12, 38, 73, 0.5); }
  .device { border-width: 2px; }
  .stage-phones .iphone { width: 46%; }
  .stage-three .iphone { width: 32%; }
  .features { gap: var(--pad-m); padding-top: var(--pad-m); }
  .end { padding-top: calc(var(--space-l) * 1.75); }
  .fine { flex-direction: column; }
}

/* Localized pages: CJK headlines break between phrases, at punctuation and at the
   <wbr> the build puts before the accent, never inside a word */
:is(:lang(ja), :lang(zh), :lang(ko)) :is(h1, h2, .slogan) { word-break: keep-all; overflow-wrap: break-word; }