/* Slide layouts. The base rules are the phone layout (one scrolling page). The STAGE block at the end
   redraws every slide on a 1920 x 1080 grid for screens in landscape and for print.
   Each slide has at most one graphic that builds: its unbuilt state sits under html.motion and
   .slide:not(.is-built), so print, reduced motion and no JavaScript always show the finished slide. */

/* ---------- Shared pieces: phone sizes ---------- */
.frame {
  position: relative; z-index: 2;
  max-width: 760px; margin: 0 auto;
  padding: 56px max(20px, env(safe-area-inset-right)) 36px max(20px, env(safe-area-inset-left));
}
.head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 14px; margin-bottom: 26px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2); font: 600 0.8125rem/1.2 var(--sans);
}
.head-num { font-weight: 500; font-variant-numeric: tabular-nums; }
.slide--night .head { color: var(--on-night-2); border-color: var(--rule-night); }

.title {
  font-family: var(--serif); font-weight: 520; font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: clamp(30px, 8.4vw, 42px); line-height: 1.04; letter-spacing: -0.022em;
  text-wrap: balance;
}
.lead { margin-top: 16px; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.55; text-wrap: pretty; }
.slide--night .lead { color: var(--on-night-2); }

.foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.slide--night .foot { border-color: var(--rule-night); }
.source { max-width: 36em; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.5; }
.slide--night .source { color: var(--on-night-2); }
.foot-logo { flex: none; width: 84px; height: auto; margin-left: auto; }

.photo { position: relative; margin: 0; overflow: hidden; background: var(--night-2); }
.photo picture { display: contents; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1 · Cover ---------- */
.s-cover { display: flex; flex-direction: column; }
.cover-photo { aspect-ratio: 4 / 5; }
.cover-photo img { object-position: 62% 40%; }
.cover-photo::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to bottom, rgb(8 26 43 / 0), var(--night));
}
.s-cover { position: relative; }
.s-cover .frame { margin-top: -96px; padding-top: 0; }
.cover-logo { position: absolute; z-index: 3; top: 18px; left: max(20px, env(safe-area-inset-left)); width: 128px; height: auto; }
.cover-title {
  font-family: var(--serif); font-weight: 560; font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: clamp(44px, 13vw, 64px); line-height: 0.96; letter-spacing: -0.03em;
}
.cover-lead { margin-top: 20px; color: var(--on-night-2); font-size: 1.0625rem; line-height: 1.55; max-width: 30em; }
.cover-meta { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--rule-night); }
.cover-meta dt { color: var(--on-night-2); font-size: 0.75rem; }
.cover-meta dd { margin-top: 2px; font-size: 0.9375rem; font-weight: 600; }

/* ---------- 2 · Who we are ---------- */
.figures { display: grid; gap: 22px; }
.figures div { display: flex; flex-direction: column; }
.figures dd {
  order: -1;
  font-family: var(--serif); font-weight: 560; font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: clamp(76px, 24vw, 112px); line-height: 0.9; letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
}
.figures dt { margin-top: 8px; color: var(--ink-2); font-size: 1rem; }
.s-scale .lead { margin-top: 26px; }
.month { margin-top: 40px; }
.month-head { font-weight: 600; font-size: 0.875rem; }
.month-grid {
  --cell: 3.2px;
  display: grid; grid-template-columns: repeat(10, calc(var(--cell) * 10)); gap: 10px 3px;
  margin-top: 14px;
}
.month-grid i { display: block; width: calc(var(--cell) * 10); height: calc(var(--cell) * 20); color: var(--cyan-ink); }
.month-grid svg { width: 100%; height: 100%; fill: currentColor; }
.month-foot { margin-top: 12px; color: var(--ink-2); font-size: 0.875rem; }
html.motion .s-scale:not(.is-built) .month-grid i { opacity: 0; transform: translateY(6px); }
html.motion .s-scale .month-grid i { transition: opacity 360ms ease calc(var(--d) * 34ms), transform 520ms var(--ease) calc(var(--d) * 34ms); }

/* ---------- 3 · What's new ---------- */
.compare { margin-top: 30px; }
.compare-row--head { display: none; }
.compare-row { padding: 20px 0; border-top: 1px solid var(--rule-strong); }
.compare-row h3 { font-family: var(--serif); font-weight: 560; font-size: 1.375rem; letter-spacing: -0.01em; }
.compare-row p { margin-top: 10px; color: var(--ink-2); font-size: 1rem; line-height: 1.45; text-wrap: balance; }
.compare-row p.is-new { padding: 12px 14px; border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 500; }
.tag { display: block; margin-bottom: 2px; color: var(--ink-2); font-size: 0.75rem; font-weight: 600; }
.is-new .tag { color: var(--cyan-ink); }

/* ---------- 4 · How it works ---------- */
.net { margin-top: 32px; }
.net-cols { display: grid; gap: 18px; }
.net-col h3 { font-family: var(--serif); font-weight: 560; font-size: 1.375rem; }
.net-col p { margin-top: 4px; color: var(--on-night-2); font-size: 0.9375rem; line-height: 1.5; }
.net-col--core h3 { color: var(--gold); }
.net-svg { width: 100%; height: auto; margin-top: 28px; overflow: visible; }
.net-in line { stroke: var(--cyan); stroke-opacity: 0.3; stroke-width: 1; }
.net-hotels circle { fill: var(--on-night); }
.net-out path { fill: none; stroke: var(--cyan); stroke-width: 1.6; }
.net-ends circle { fill: var(--cyan); }
.net-core { fill: var(--gold); }
.net-ring { fill: none; stroke: var(--gold); stroke-opacity: 0.45; stroke-width: 1.5; }
.net-node { transform-box: fill-box; transform-origin: center; }
.net-labels text { fill: var(--on-night); font: 500 26px var(--sans); }
.net-svg--phone .net-labels text { font-size: 15px; }
.net-svg--phone .net-in line { stroke-opacity: 0.22; }
.net-caption { margin-top: 14px; color: var(--on-night-2); font-size: 0.8125rem; }
.system-note { margin-top: 28px; padding-left: 18px; border-left: 3px solid var(--gold); color: var(--on-night-2); font-size: 1rem; line-height: 1.5; }
.system-note b { color: var(--on-night); font-weight: 600; }

html.motion .s-system .net-in line { stroke-dasharray: 1; transition: stroke-dashoffset 900ms var(--ease) calc(var(--c) * 42ms); }
html.motion .s-system .net-out path { stroke-dasharray: 1; transition: stroke-dashoffset 700ms var(--ease) calc(1050ms + var(--k) * 90ms); }
html.motion .s-system .net-node { transition: transform 600ms var(--ease) 800ms, opacity 300ms ease 800ms; }
html.motion .s-system .net-ends circle, html.motion .s-system .net-labels text { transition: opacity 400ms ease calc(1400ms + var(--k) * 90ms); }
html.motion .s-system:not(.is-built) .net-in line,
html.motion .s-system:not(.is-built) .net-out path { stroke-dashoffset: 1; }
html.motion .s-system:not(.is-built) .net-node { transform: scale(0.2); opacity: 0; }
html.motion .s-system:not(.is-built) .net-ends circle,
html.motion .s-system:not(.is-built) .net-labels text { opacity: 0; }

/* ---------- 5 · Booking ---------- */
.steps { margin-top: 28px; counter-reset: step; }
.steps li { position: relative; display: grid; grid-template-columns: 40px 1fr; column-gap: 8px; padding: 18px 0; border-top: 1px solid var(--rule); counter-increment: step; }
.steps li::before {
  content: counter(step); grid-row: 1 / span 2;
  font-family: var(--serif); font-weight: 560; font-size: 1.75rem; line-height: 1; color: var(--cyan-ink);
}
.steps h3 { font-family: var(--serif); font-weight: 560; font-size: 1.375rem; line-height: 1.1; }
.steps p { margin-top: 6px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.steps-note { padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.875rem; line-height: 1.5; }
.code { margin-top: 32px; }
.code-bar, .code-body { background: var(--night); color: var(--on-night); }
.code-bar {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px;
  border-radius: 12px 12px 0 0; border-bottom: 1px solid var(--rule-night);
  font: 500 0.8125rem/1.3 var(--mono);
}
.code-bar b { color: var(--cyan-soft); font-weight: 600; }
.code-status { color: var(--cyan-soft); }
.code-body {
  margin: 0; padding: 14px 0; overflow-x: auto; border-radius: 0 0 12px 12px;
  font: 400 0.75rem/1.75 var(--mono); tab-size: 2;
}
.code-body code { display: block; min-width: max-content; padding: 0 16px; }
.code-body .k { color: var(--cyan-soft); }
.code-body .s { color: var(--on-night); }
.code-body .p { color: var(--on-night-2); }
.code-body .hl {
  display: inline-block; min-width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px;
  background: rgb(250 206 28 / 0.12); box-shadow: inset 3px 0 0 var(--gold);
}
.code-body .hl .s { color: var(--gold); }
.code figcaption { margin-top: 10px; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.5; }
html.motion .s-booking .hl { transition: background-color 700ms ease 500ms, box-shadow 700ms ease 500ms; }
html.motion .s-booking:not(.is-built) .hl { background-color: transparent; box-shadow: inset 3px 0 0 transparent; }

/* ---------- 6 · What's in the API ---------- */
.spec { margin-top: 28px; }
.spec div { padding: 16px 0; border-top: 1px solid var(--rule); }
.spec dt { font-family: var(--serif); font-weight: 560; font-size: 1.25rem; }
.spec dd { margin-top: 4px; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.cal { margin-top: 28px; padding: 18px 14px 14px; border-radius: 14px; background: var(--mist); }
.cal-head b { display: block; font-size: 0.9375rem; }
.cal-head span { display: block; margin-top: 2px; color: var(--ink-2); font-size: 0.8125rem; }
.cal-table { width: 100%; margin-top: 14px; border-collapse: collapse; table-layout: fixed; text-align: center; font-variant-numeric: tabular-nums; }
.cal-table thead td { width: 64px; }
.cal-table tbody th { padding: 8px 6px 8px 0; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.75rem; font-weight: 500; text-align: left; line-height: 1.2; }
.cal-table thead th { padding: 0 0 8px; color: var(--ink-2); font-size: 0.75rem; font-weight: 500; }
.cal-table thead th b { display: block; margin-top: 2px; color: var(--ink); font-family: var(--serif); font-size: 1.125rem; font-weight: 560; }
.cal-table td { padding: 8px 0; border-top: 1px solid var(--rule); }
.cal-price td { font-weight: 650; font-size: 0.875rem; }
.cal-left td { color: var(--ink-2); font-size: 0.75rem; }
.cal-foot { margin-top: 10px; color: var(--ink-2); font-size: 0.75rem; }

/* ---------- 7 · For our hotels ---------- */
.hotels-photo { aspect-ratio: 4 / 4.4; }
.hotels-photo img { object-position: 50% 45%; }
.points { margin-top: 26px; }
.points li { padding: 16px 0; border-top: 1px solid var(--rule); font-family: var(--serif); font-weight: 560; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }
.points b { display: block; margin-bottom: 2px; color: var(--ink); font-family: var(--serif); font-weight: 560; font-size: 1.25rem; }

/* ---------- 8 · Timeline ---------- */
.time { position: relative; margin-top: 34px; padding-left: 28px; }
.time::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; border-left: 2px dashed var(--rule-night-strong); }
.time::after { content: ''; position: absolute; left: 6px; top: 6px; width: 2px; height: var(--done, 33%); background: var(--cyan); transform-origin: top; }
.time li { position: relative; padding: 0 0 26px; }
.time li::before {
  content: ''; position: absolute; left: -28px; top: 5px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--night); box-shadow: inset 0 0 0 2px var(--rule-night-strong);
}
.time li.is-done::before { background: var(--cyan); box-shadow: none; }
.time li.is-now::before { background: var(--night); box-shadow: inset 0 0 0 3px var(--cyan), 0 0 0 6px rgb(0 174 239 / 0.18); }
.time li.is-launch::before { background: var(--gold); box-shadow: 0 0 0 6px rgb(250 206 28 / 0.18); }
.when { color: var(--cyan-soft); font-size: 0.8125rem; font-weight: 600; }
.is-launch .when { color: var(--gold); }
.time h3 { margin-top: 2px; font-family: var(--serif); font-weight: 560; font-size: 1.5rem; line-height: 1.15; }
.time p:not(.when) { margin-top: 4px; color: var(--on-night-2); font-size: 1rem; line-height: 1.5; }
html.motion .s-time .time::after { transition: transform 1100ms var(--ease) 200ms; }
html.motion .s-time:not(.is-built) .time::after { transform: scaleY(0); }

/* ---------- 9 · Contact ---------- */
.s-contact { display: flex; flex-direction: column; }
.contact-photo { aspect-ratio: 3 / 2; }
.contact-photo img { object-position: 70% 50%; }
.contact-photo::after { content: ''; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(to bottom, rgb(8 26 43 / 0), var(--night)); }
.card { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--rule-night-strong); }
.card-name { font-family: var(--serif); font-weight: 560; font-size: 1.75rem; line-height: 1.1; }
.card-org { margin-top: 2px; color: var(--on-night-2); font-size: 0.9375rem; }
.card-lines { margin-top: 18px; }
.card-lines div { display: grid; grid-template-columns: 76px 1fr; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule-night); }
.card-lines dt { color: var(--on-night-2); font-size: 0.875rem; }
.card-lines dd { font-size: 1.0625rem; font-weight: 500; overflow-wrap: anywhere; }
.card-lines a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.card-lines a:hover { color: var(--cyan-soft); }
.s-contact .download { margin-top: 30px; }
.download:hover { background: var(--on-night); color: var(--night); border-color: var(--on-night); }

/* ================= STAGE: 1920 x 1080 ================= */
@media print, screen and (min-width: 900px) and (min-height: 500px) and (orientation: landscape) {
  html.js .frame {
    position: absolute; inset: 0; max-width: none; margin: 0;
    display: flex; flex-direction: column;
    padding: 64px 112px 56px;
  }
  html.js .head { margin: 0; padding-bottom: 18px; font-size: 20px; }
  html.js .body { position: relative; flex: 1; min-height: 0; padding-top: 52px; }
  html.js .title { font-size: 78px; line-height: 1.02; letter-spacing: -0.026em; max-width: 1480px; }
  html.js .lead { margin-top: 26px; font-size: 30px; line-height: 1.45; max-width: 1000px; }
  html.js .foot { margin-top: 0; padding-top: 18px; }
  html.js .source { max-width: 1240px; font-size: 18px; }
  html.js .foot-logo { width: 116px; }

  /* 1 · Cover: the photo fills the slide; the words sit on its quiet left side. */
  html.js .s-cover { display: block; }
  html.js .cover-photo { position: absolute; inset: 0; aspect-ratio: auto; }
  html.js .cover-photo img { object-position: 70% 50%; }
  html.js .cover-photo::after {
    inset: 0; height: auto;
    background:
      linear-gradient(90deg, rgb(8 26 43 / 0.94) 0%, rgb(8 26 43 / 0.82) 30%, rgb(8 26 43 / 0.28) 58%, rgb(8 26 43 / 0) 74%),
      linear-gradient(0deg, rgb(8 26 43 / 0.55) 0%, rgb(8 26 43 / 0) 38%);
  }
  html.js .s-cover .frame { margin: 0; padding: 72px 112px 88px; justify-content: flex-end; }
  html.js .cover-logo { top: 72px; left: 112px; width: 236px; }
  html.js .cover-title { font-size: 132px; line-height: 0.94; letter-spacing: -0.035em; max-width: 1200px; }
  html.js .cover-lead { margin-top: 40px; font-size: 36px; line-height: 1.4; max-width: 820px; color: #c4d3de; }
  html.js .cover-meta { width: 800px; margin-top: 52px; padding-top: 24px; gap: 72px; border-color: rgb(255 255 255 / 0.18); }
  html.js .cover-meta dt { font-size: 17px; }
  html.js .cover-meta dd { font-size: 21px; }
  html.motion .s-cover .cover-photo img { transition: transform 2600ms cubic-bezier(0.16, 0.8, 0.2, 1); }
  html.motion .s-cover:not(.is-built) .cover-photo img { transform: scale(1.07); }

  /* 2 · Who we are: two figures, and the month they add up to. */
  html.js .s-scale .body { display: grid; grid-template-columns: 1fr 1000px; column-gap: 96px; align-items: center; padding-top: 0; }
  html.js .figures { gap: 64px; }
  html.js .figures dd { font-size: 228px; line-height: 0.84; letter-spacing: -0.045em; }
  html.js .figures dt { margin-top: 18px; font-size: 32px; }
  html.js .s-scale .lead { margin-top: 64px; font-size: 26px; max-width: 600px; }
  html.js .s-scale .figures, html.js .s-scale .lead { grid-column: 1; }
  html.js .month { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  html.js .month-head { font-size: 22px; }
  html.js .month-grid { --cell: 8px; grid-template-columns: repeat(10, 80px); gap: 30px 22px; margin-top: 24px; }
  html.js .month-foot { margin-top: 22px; font-size: 20px; }

  /* 3 · What's new: a three-row comparison, the new column lifted out on white. */
  html.js .s-compare .body { display: flex; flex-direction: column; }
  html.js .compare { margin: auto 0; padding-top: 24px; }
  html.js .compare-row { display: grid; grid-template-columns: 360px 1fr 1fr; padding: 0; border-top: 1px solid var(--rule-strong); }
  html.js .compare-row--head { border-top: 0; }
  html.js .compare-row--head [role='columnheader'] { padding: 0 40px 20px; color: var(--ink-2); font-size: 22px; font-weight: 600; }
  html.js .compare-row--head [role='columnheader']:first-child { padding-left: 0; }
  html.js .compare-row--head [role='columnheader']:last-child { padding-top: 24px; border-radius: 16px 16px 0 0; background: var(--paper); color: var(--cyan-ink); box-shadow: inset 0 4px 0 var(--cyan); }
  html.js .compare-row h3 { padding: 36px 0; font-size: 42px; line-height: 1.1; }
  html.js .compare-row p { margin: 0; padding: 36px 40px; font-size: 32px; line-height: 1.32; }
  html.js .compare-row p.is-new { border-radius: 0; background: var(--paper); font-weight: 550; }
  html.js .compare-row:last-child p.is-new { border-radius: 0 0 16px 16px; }
  html.js .compare .tag { display: none; }

  /* 4 · How it works: the 150 hotels wired through one node to every kind of platform. */
  html.js .s-system .body { display: flex; flex-direction: column; }
  html.js .net { margin-top: auto; }
  html.js .net-cols { grid-template-columns: 440px 188px 440px 112px 516px; gap: 0; }
  html.js .net-col--hotels { grid-column: 1; }
  html.js .net-col--core { grid-column: 3; text-align: center; }
  html.js .net-col--out { grid-column: 5; padding-left: 24px; }
  html.js .net-col h3 { font-size: 36px; }
  html.js .net-col p { margin-top: 8px; font-size: 25px; line-height: 1.4; }
  html.js .net-svg { margin-top: 12px; width: 1696px; height: 340px; }
  html.js .system-note { margin-bottom: auto; margin-top: 44px; padding-left: 24px; border-left-width: 4px; font-size: 32px; }

  /* 5 · Booking: three steps on the left, the real answer on the right. */
  html.js .s-booking .body { display: grid; grid-template-columns: 700px 1fr; grid-template-rows: auto 1fr; column-gap: 104px; }
  html.js .s-booking .title { grid-column: 1 / -1; }
  html.js .steps { grid-column: 1; grid-row: 2; margin: 0; align-self: center; }
  html.js .steps li { grid-template-columns: 76px 1fr; padding: 24px 0; }
  html.js .steps li::before { font-size: 58px; }
  html.js .steps h3 { font-size: 46px; }
  html.js .steps p { margin-top: 10px; font-size: 30px; line-height: 1.4; }
  html.js .steps-note { grid-column: 1; grid-row: 3; padding-top: 22px; font-size: 21px; }
  html.js .code { grid-column: 2; grid-row: 2; margin: 0; align-self: center; }
  html.js .code-bar { padding: 18px 32px; border-radius: 18px 18px 0 0; font-size: 21px; }
  html.js .code-body { padding: 18px 0; border-radius: 0 0 18px 18px; font-size: 22px; line-height: 1.55; overflow: hidden; }
  html.js .code-body code { padding: 0 32px; }
  html.js .code-body .hl { min-width: calc(100% + 64px); margin: 0 -32px; padding: 0 32px; box-shadow: inset 5px 0 0 var(--gold); }
  html.motion .s-booking:not(.is-built) .hl { box-shadow: inset 5px 0 0 transparent; }
  html.js .code figcaption { margin-top: 16px; font-size: 19px; }

  /* 6 · What's in the API: the list, and one rate plan's week as a partner sees it. */
  html.js .s-spec .body { display: grid; grid-template-columns: 1fr 680px; grid-template-rows: auto 1fr; column-gap: 104px; }
  html.js .s-spec .title { grid-column: 1 / -1; }
  html.js .spec { grid-column: 1; grid-row: 2; margin: 0; align-self: center; }
  html.js .spec div { display: grid; grid-template-columns: 300px 1fr; align-items: baseline; padding: 22px 0; }
  html.js .spec dt { font-size: 36px; }
  html.js .spec dd { margin: 0; font-size: 28px; line-height: 1.38; }
  html.js .cal { grid-column: 2; grid-row: 2; margin: 0; align-self: center; padding: 36px 36px 28px; border-radius: 20px; }
  html.js .cal-head b { font-size: 27px; }
  html.js .cal-head span { margin-top: 4px; font-size: 20px; }
  html.js .cal-table { margin-top: 28px; }
  html.js .cal-table thead th { padding-bottom: 14px; font-size: 18px; }
  html.js .cal-table thead th b { font-size: 34px; margin-top: 4px; }
  html.js .cal-table td { padding: 18px 0; }
  html.js .cal-price td { font-size: 26px; }
  html.js .cal-left td { font-size: 19px; }
  html.js .cal-table thead td { width: 128px; }
  html.js .cal-table tbody th { padding: 18px 8px 18px 0; font-size: 18px; }
  html.js .cal-foot { margin-top: 20px; font-size: 18px; }

  /* 7 · For our hotels: the room on the left, the three points on the right. */
  html.js .hotels-photo { position: absolute; top: 0; bottom: 0; left: 0; width: 780px; aspect-ratio: auto; }
  html.js .s-hotels .frame { padding-left: 892px; }
  html.js .s-hotels .title { font-size: 70px; }
  html.js .s-hotels .body { display: flex; flex-direction: column; }
  html.js .points { margin: auto 0; }
  html.js .points li { padding: 32px 0; font-size: 40px; line-height: 1.18; }
  html.js .points b { margin-bottom: 6px; font-size: 38px; }

  /* 8 · Timeline: one line across, solid up to now, dashed after. */
  html.js .s-time .body { display: flex; flex-direction: column; }
  html.js .time { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 56px; margin: auto 0; padding: 64px 0 0; }
  html.js .time::before { left: 0; right: 0; top: 7px; bottom: auto; border-left: 0; border-top: 2px dashed var(--rule-night-strong); }
  html.js .time::after { left: 0; top: 7px; width: calc(25% + 14px); height: 2px; transform-origin: left; }
  html.motion .s-time:not(.is-built) .time::after { transform: scaleX(0); }
  html.js .time li { padding: 0; }
  html.js .time li::before { left: 0; top: -64px; width: 16px; height: 16px; }
  html.js .time li.is-launch::before { width: 22px; height: 22px; top: -67px; }
  html.js .when { font-size: 22px; }
  html.js .time h3 { margin-top: 12px; font-size: 50px; white-space: nowrap; }
  html.js .time p:not(.when) { margin-top: 18px; font-size: 28px; line-height: 1.42; max-width: 370px; }

  /* 9 · Contact: the coast behind, the details on its dark side. */
  html.js .s-contact { display: block; }
  html.js .contact-photo { position: absolute; inset: 0; aspect-ratio: auto; }
  html.js .contact-photo img { object-position: 60% 50%; }
  html.js .contact-photo::after {
    inset: 0; height: auto;
    background: linear-gradient(90deg, rgb(8 26 43 / 0.95) 0%, rgb(8 26 43 / 0.86) 34%, rgb(8 26 43 / 0.3) 62%, rgb(8 26 43 / 0.05) 80%);
  }
  html.js .s-contact .title { font-size: 112px; line-height: 0.96; letter-spacing: -0.035em; max-width: 900px; }
  html.js .s-contact .lead { max-width: 900px; margin-top: 22px; }
  html.js .card { width: 760px; margin-top: 40px; padding-top: 28px; }
  html.js .card-name { font-size: 52px; }
  html.js .card-org { margin-top: 6px; font-size: 22px; }
  html.js .card-lines { margin-top: 28px; }
  html.js .card-lines div { grid-template-columns: 150px 1fr; padding: 12px 0; }
  html.js .card-lines dt { font-size: 21px; }
  html.js .card-lines dd { font-size: 30px; }
  html.js .s-contact .download { min-height: 56px; padding: 0 28px; font-size: 20px; }
  html.js .s-contact .foot { align-items: center; }
  html.js .s-contact .download .icon { width: 24px; height: 24px; }
}

@media print { .s-contact .download { display: none !important; } }

/* Short lines break evenly, so no line ends with a single stranded word. */
p, li, dd, dt, figcaption { text-wrap: pretty; }
.steps p, .points li, .spec dd, .net-col p, .time p, .figures dt, .system-note { text-wrap: balance; }