/* Interval — landing page, from the design's `Web-Landing.dc.html`.

   Two rules from the design:

   1. Fluid by construction, with NO media queries. `container-type:inline-size`
      on .page, `cqi` units inside clamp() for type and padding, flex-wrap with
      `flex:1 1 min(100%,Npx)` for column collapse, and auto-fit grids. A media
      query here would break the design's two side-by-side embeds, which are the
      same component mounted at 1280 and 420.
   2. Dark only. There is no light theme and no [data-theme]; the app has both,
      the website does not. Don't add one back. */

/* ---------- Fonts ---------------------------------------------------- */

/* Source Serif 4 Italic 600, self-hosted and subset to the characters this page
   uses — 14 KB against 92 KB for the full variable face. Self-hosted rather than
   linked from Google so the page makes no third-party request at all.
   If you change copy, check the subset still covers it. fonts/OFL.txt is the
   licence and must stay with the file. */
@font-face {
  font-family: 'Interval Serif';
  src: url('fonts/source-serif-4-italic-600.woff2') format('woff2');
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+20-22, U+25-29, U+2b-3b, U+3f, U+41-5b, U+5d, U+61-7a,
                 U+b0, U+b7, U+2013-2014, U+2019, U+201c-201d;
}

/* ---------- Tokens (from interval-theme.css, dark only) --------------- */

.iv {
  --iv-bg: #0B0B0D;
  --iv-pane: #111113;
  --iv-surface: rgba(28, 28, 31, .72);
  --iv-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 0 0 .5px rgba(255, 255, 255, .10);
  --iv-fg1: #F5F5F7;
  --iv-fg2: rgba(235, 235, 245, .62);
  --iv-fg3: rgba(235, 235, 245, .42);
  --iv-sep: rgba(255, 255, 255, .07);
  --iv-accent: #5CD0E6;
  --iv-frame-ring: rgba(255, 255, 255, .11);

  /* The device silhouettes. Every part of one — chin, neck, foot, stand —
     carries the same hairline or it vanishes against the page. */
  --iv-hairline: inset 0 0 0 .5px rgba(255, 255, 255, .10);
  --iv-metal: #1A1A1C;
  --iv-metal-dark: #141417;
}

/* ---------- Reset ----------------------------------------------------- */

html, body { margin: 0; padding: 0; }

body {
  -webkit-font-smoothing: antialiased;
  background: #0B0B0D;
}

img { max-width: 100%; }

.page a { color: var(--iv-accent); text-decoration: none; }
.page a:hover { opacity: .72; }

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

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

/* The surface caustics: an animated 102deg stripe. One of the few places the
   design allows a gradient, because it carries meaning. */
@keyframes wcDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}

@media (prefers-reduced-motion: reduce) {
  .caustics { animation: none; }
}

/* ---------- Page root ------------------------------------------------- */

.page {
  container-type: inline-size;
  width: 100%;
  background: var(--iv-bg);
  color: var(--iv-fg1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(18px, 3.2cqi, 44px);
  padding-right: clamp(18px, 3.2cqi, 44px);
}

.serif {
  font-family: 'Interval Serif', 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -.02em;
}

.eyebrow {
  font-size: clamp(10px, .82cqi, 12px);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--iv-accent);
  text-transform: uppercase;
}

h2.section-title {
  font-size: clamp(25px, 2.7cqi, 42px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--iv-fg1);
  margin: clamp(12px, 1.2cqi, 18px) 0 0;
  max-width: 22em;
  text-wrap: balance;
}

.body-copy {
  font-size: clamp(15px, 1.25cqi, 17.5px);
  line-height: 1.55;
  color: var(--iv-fg2);
  margin: clamp(13px, 1.3cqi, 18px) 0 0;
  max-width: 38em;
  text-wrap: pretty;
}

.body-copy + .body-copy { margin-top: clamp(11px, 1.1cqi, 16px); }
.body-copy strong { color: var(--iv-fg1); font-weight: inherit; }

.section { padding-top: clamp(52px, 5.6cqi, 96px); scroll-margin-top: 70px; }

/* ---------- Hero ------------------------------------------------------ */

.hero {
  position: relative;
  background: #0B0B0D;
  overflow: hidden;
  box-shadow: inset 0 -.5px 0 rgba(255, 255, 255, .09);
}

.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(64% 72% at 76% 16%,
    rgba(92, 208, 230, .20) 0%, rgba(31, 117, 134, .08) 44%, rgba(11, 11, 13, 0) 72%);
}

.caustics {
  position: absolute;
  left: 0; top: 0;
  height: 220px;
  width: 300%;
  opacity: .2;
  background: repeating-linear-gradient(102deg,
    rgba(255, 255, 255, .07) 0 2px, rgba(255, 255, 255, 0) 2px 26px);
  mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, transparent 100%);
  animation: wcDrift 40s linear infinite;
}

.nav {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: clamp(15px, 1.6cqi, 24px) clamp(18px, 3.2cqi, 44px) 0;
}

.nav-inner {
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2cqi, 16px);
}

.nav-icon {
  width: clamp(25px, 2cqi, 28px);
  height: clamp(25px, 2cqi, 28px);
  border-radius: clamp(6.5px, .56cqi, 7.5px);
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14);
}
.nav-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.wordmark {
  font-size: clamp(18px, 1.55cqi, 22px);
  color: #F5F5F7;
  white-space: nowrap;
  font-variation-settings: 'opsz' 32;
}
.wordmark .dot { color: #5CD0E6; }

.nav-spacer { flex: 1; }

.nav a {
  font-size: clamp(13px, 1.05cqi, 15px);
  color: rgba(235, 235, 245, .66);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.nav a.is-cta { color: #5CD0E6; }

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(18px, 3.2cqi, 44px);
  min-height: clamp(560px, 60cqi, 780px);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: clamp(24px, 3cqi, 64px);
}

.hero-copy {
  flex: 1 1 min(100%, 340px);
  min-width: 0;
  align-self: center;
  padding: clamp(94px, 9.5cqi, 148px) 0 clamp(48px, 5cqi, 88px);
}

.hero-copy h1 {
  font-size: clamp(36px, 4.9cqi, 74px);
  font-weight: 700;
  letter-spacing: -.036em;
  line-height: 1.02;
  color: #F5F5F7;
  margin: 0;
  max-width: 15em;
  text-wrap: balance;
}

.hero-copy p {
  font-size: clamp(15.5px, 1.35cqi, 19.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .76);
  margin: clamp(16px, 1.6cqi, 24px) 0 0;
  max-width: 32em;
  text-wrap: pretty;
}

.get {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 1.7cqi, 24px);
  margin-top: clamp(26px, 2.8cqi, 40px);
  scroll-margin-top: 80px;
}

/* Apple's own artwork, white variant, for dark backgrounds.
   Never redraw it and never recolour it in our teal. */
.badge { display: block; flex-shrink: 0; }
.badge img { display: block; width: clamp(150px, 13cqi, 186px); height: auto; }

/* No listing yet, so the badge states the case without offering a link. */
.badge-pending { opacity: .5; }

.get-note {
  font-size: clamp(13px, 1.05cqi, 14.5px);
  line-height: 1.4;
  color: rgba(255, 255, 255, .5);
}

.hero-device {
  flex: 0 1 393px;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-self: flex-end;
}

.hero-device-clip {
  width: 100%;
  max-width: 393px;
  height: clamp(460px, 50cqi, 690px);
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.hero-device-body {
  flex: 0 0 393px;
  border-radius: 56px 56px 0 0;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .5);
}
.hero-device-body img { display: block; width: 393px; height: auto; }

/* ---------- The three promises ---------------------------------------- */

.promises {
  background: var(--iv-pane);
  box-shadow: inset 0 -.5px 0 var(--iv-sep);
}

.promises-inner { padding-top: clamp(44px, 4.6cqi, 78px); padding-bottom: clamp(44px, 4.6cqi, 78px); }

.promises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 3cqi, 56px);
}

.promise-k {
  font-size: clamp(20px, 1.9cqi, 29px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.12;
  color: var(--iv-fg1);
  text-wrap: balance;
}

.promise-v {
  font-size: clamp(14.5px, 1.2cqi, 16.5px);
  line-height: 1.55;
  color: var(--iv-fg2);
  margin: clamp(10px, 1cqi, 15px) 0 0;
  max-width: 32em;
  text-wrap: pretty;
}

/* ---------- Split sections (computers / the dive) --------------------- */

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(30px, 3.4cqi, 66px);
}

.split-copy { flex: 1 1 min(100%, 330px); min-width: 0; }

.split-art {
  flex: 0 1 344px;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.settings-card {
  width: 100%;
  max-width: 344px;
  border-radius: clamp(16px, 1.5cqi, 22px);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 .5px var(--iv-sep);
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: clamp(26px, 2.6cqi, 40px) 0;
}
.settings-card img { display: block; width: 267px; height: auto; flex-shrink: 0; }

/* ---------- The dive: readouts + depth profile ------------------------ */

.dive-split { gap: clamp(24px, 2.8cqi, 56px); }
.dive-copy { flex: 1 1 min(100%, 320px); min-width: 0; }
.dive-art { flex: 1 1 min(100%, 300px); min-width: 0; }

.readouts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(24px, 2.8cqi, 52px);
  margin-top: clamp(24px, 2.4cqi, 36px);
  padding-top: clamp(18px, 1.8cqi, 26px);
  box-shadow: inset 0 .5px 0 var(--iv-sep);
}

.readout { padding-bottom: 6px; }

.readout-v {
  font-family: 'Interval Serif', 'Source Serif 4', Georgia, serif;
  font-variation-settings: 'opsz' 40;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(23px, 2.2cqi, 34px);
  line-height: 1;
  color: var(--iv-fg1);
  letter-spacing: -.024em;
  font-variant-numeric: tabular-nums;
}

.readout-k {
  font-size: clamp(9.5px, .78cqi, 11px);
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--iv-fg3);
  text-transform: uppercase;
  margin-top: clamp(6px, .6cqi, 9px);
}

/* The water column — the other place a gradient carries meaning. */
.profile-band {
  position: relative;
  height: clamp(230px, 24cqi, 340px);
  border-radius: clamp(14px, 1.3cqi, 20px);
  overflow: hidden;
  background:
    linear-gradient(180deg,
      rgba(92, 208, 230, .20) 0%, rgba(31, 117, 134, .09) 42%,
      rgba(9, 9, 11, .92) 88%, #09090B 100%),
    #0B1A22;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 0 0 .5px rgba(255, 255, 255, .1);
}

.profile-band .caustics { height: 130px; opacity: .34; animation-duration: 34s; }

.profile-svg { position: absolute; inset: 0; color: #5CD0E6; }
.profile-svg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- The device lineup ----------------------------------------- */

/* The row is authored at its natural 1124px (widths + 4x16px gaps) inside a
   container-type box, and one transform fits the whole row at once.
   tan(atan2(a,b)) is CSS's way of getting the unitless ratio a/b, so the scale
   tracks the box width with no script. The sizer carries the same expression so
   the scaled row reserves no dead space.

   Do NOT reintroduce a ResizeObserver here — its callbacks are frame-driven and
   this starves frames, so it silently never fires.

   Base widths are fixed and are not to be shrunk to make the row fit. Each
   device's inner scale is wellWidth / deviceWidth; change a base width and that
   factor, the well height, the row width and the row height all have to be
   recomputed together. */

.lineup {
  container-type: inline-size;
  width: 100%;
  overflow: hidden;
  margin-top: clamp(30px, 3cqi, 50px);
}

.lineup-sizer { height: calc(278px * min(1, tan(atan2(100cqi, 1124px)))); }

.lineup-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: center;
  gap: 16px;
  width: 1124px;
  transform-origin: top left;
  transform: scale(min(1, tan(atan2(100cqi, 1124px))));
}

.dev { flex: 0 0 auto; }
.dev-stack { display: flex; flex-direction: column; align-items: center; }

.dev-body {
  background: var(--iv-metal);
  box-shadow: var(--iv-hairline), 0 24px 54px rgba(0, 0, 0, .5);
}

.dev-screen { position: relative; overflow: hidden; }
.dev-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Apple TV — 460 total */
.dev-tv .dev-body { padding: 5px; border-radius: 10px; }
.dev-tv .dev-screen { width: 450px; height: 253px; border-radius: 6px; }
.dev-tv .neck { width: 46px; height: 9px; background: var(--iv-metal-dark); box-shadow: var(--iv-hairline); }
.dev-tv .foot { width: 146px; height: 6px; border-radius: 4px; background: var(--iv-metal); box-shadow: var(--iv-hairline); }

/* iMac — 262 total */
.dev-mac .dev-body { padding: 5px 5px 0; border-radius: 10px 10px 0 0; }
.dev-mac .dev-screen { width: 252px; height: 158px; border-radius: 5px; }
.dev-mac .chin { width: 262px; height: 24px; border-radius: 0 0 10px 10px; background: var(--iv-metal); box-shadow: var(--iv-hairline); }
.dev-mac .neck { width: 55px; height: 14px; background: var(--iv-metal-dark); box-shadow: var(--iv-hairline); }
.dev-mac .foot { width: 111px; height: 5px; border-radius: 3px; background: var(--iv-metal); box-shadow: var(--iv-hairline); }

/* iPad — 172 total */
.dev-ipad { padding: 7px; border-radius: 13px; background: var(--iv-metal); box-shadow: var(--iv-hairline), 0 24px 54px rgba(0, 0, 0, .5); }
.dev-ipad .dev-screen { width: 158px; height: 110px; border-radius: 7px; }

/* iPhone — 92 total */
.dev-iphone { position: relative; padding: 3px; border-radius: 16px; background: var(--iv-metal); box-shadow: var(--iv-hairline), 0 24px 54px rgba(0, 0, 0, .5); }
.dev-iphone .dev-screen { width: 86px; height: 186px; border-radius: 13px; }
.dev-iphone .button { position: absolute; right: -2px; top: 29%; width: 3px; height: 19px; border-radius: 2px; background: #33333A; }

/* Watch — 74 total */
.dev-watch { position: relative; padding: 4px; border-radius: 22px; background: var(--iv-metal); box-shadow: var(--iv-hairline), 0 24px 54px rgba(0, 0, 0, .5); }
.dev-watch .dev-screen { width: 66px; height: 81px; border-radius: 18px; }
.dev-watch .crown { position: absolute; right: -3px; top: 34%; width: 4px; height: 15px; border-radius: 2px; background: #33333A; }

/* ---------- Keep card ------------------------------------------------- */

.keep { padding-top: clamp(46px, 4.8cqi, 80px); }

.keep-card {
  border-radius: clamp(16px, 1.5cqi, 22px);
  background: var(--iv-pane);
  box-shadow: 0 0 0 .5px var(--iv-sep);
  padding: clamp(26px, 2.8cqi, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 2.2cqi, 44px);
}

.keep-copy { flex: 1 1 min(100%, 280px); min-width: 0; }

.keep-title {
  font-size: clamp(21px, 2cqi, 31px);
  font-weight: 700;
  letter-spacing: -.026em;
  line-height: 1.1;
  color: var(--iv-fg1);
  text-wrap: balance;
}

.keep-body {
  font-size: clamp(14.5px, 1.2cqi, 16.5px);
  line-height: 1.55;
  color: var(--iv-fg2);
  margin: clamp(9px, .9cqi, 13px) 0 0;
  max-width: 34em;
  text-wrap: pretty;
}

.keep-card .badge img { width: clamp(150px, 13cqi, 180px); }

/* ---------- Footer ---------------------------------------------------- */

.site-footer {
  padding-top: clamp(38px, 3.8cqi, 60px);
  padding-bottom: clamp(38px, 3.8cqi, 60px);
}

.footer-rule { height: .5px; background: var(--iv-sep); }

.footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 2.4cqi, 44px);
  padding-top: clamp(24px, 2.6cqi, 38px);
}

.footer-brand { flex: 1 1 min(100%, 260px); min-width: 0; }

.footer-wordmark {
  font-size: clamp(17px, 1.4cqi, 20px);
  color: var(--iv-fg1);
  font-variation-settings: 'opsz' 28;
}
.footer-wordmark .dot { color: var(--iv-accent); }

.footer-tagline {
  font-size: clamp(13px, 1.05cqi, 14.5px);
  line-height: 1.5;
  color: var(--iv-fg3);
  margin: 8px 0 0;
  max-width: 30em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(15px, 1.7cqi, 28px);
  align-items: flex-start;
  flex-shrink: 0;
}

.footer-links a {
  font-size: clamp(13px, 1.05cqi, 14.5px);
  color: var(--iv-fg2);
  white-space: nowrap;
}

/* Verbatim, and nothing longer. */
.footer-licence {
  font-size: clamp(12px, .98cqi, 13.5px);
  line-height: 1.5;
  color: var(--iv-fg3);
  margin: clamp(20px, 2.2cqi, 32px) 0 0;
  max-width: 44em;
}

/* ---------- Document pages (Privacy, Licences) ------------------------ */

.doc { min-height: 100vh; }

.doc-head {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(18px, 2cqi, 30px) clamp(18px, 3.2cqi, 44px) 0;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2cqi, 14px);
}

.doc-home { display: flex; align-items: center; gap: clamp(9px, 1cqi, 13px); }

.doc-home .nav-icon {
  width: clamp(24px, 2cqi, 27px);
  height: clamp(24px, 2cqi, 27px);
  border-radius: clamp(6px, .55cqi, 7px);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12);
}

.doc-home .wordmark { font-size: clamp(17px, 1.5cqi, 21px); color: var(--iv-fg1); }
.doc-home .wordmark .dot { color: var(--iv-accent); }

.doc-body {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(44px, 5cqi, 86px) clamp(18px, 3.2cqi, 44px) clamp(50px, 5cqi, 84px);
}

.doc-body h1 {
  font-size: clamp(32px, 3.6cqi, 54px);
  font-weight: 700;
  letter-spacing: -.032em;
  line-height: 1.04;
  color: var(--iv-fg1);
  margin: 0;
}

.doc-lede {
  font-size: clamp(16px, 1.4cqi, 20px);
  line-height: 1.5;
  color: var(--iv-fg1);
  margin: clamp(16px, 1.6cqi, 24px) 0 0;
  max-width: 34em;
  text-wrap: pretty;
}

.doc-stamp {
  font-size: clamp(13px, 1.05cqi, 14.5px);
  line-height: 1.5;
  color: var(--iv-fg3);
  margin: clamp(14px, 1.4cqi, 20px) 0 0;
}

.doc-sections {
  margin-top: clamp(34px, 3.6cqi, 58px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 2.8cqi, 44px);
}

.doc-section {
  padding-top: clamp(20px, 2cqi, 30px);
  box-shadow: inset 0 .5px 0 var(--iv-sep);
}

.doc-section h2 {
  font-size: clamp(18px, 1.6cqi, 23px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--iv-fg1);
  margin: 0;
}

.doc-section p {
  font-size: clamp(15px, 1.25cqi, 17px);
  line-height: 1.6;
  color: var(--iv-fg2);
  margin: clamp(9px, .9cqi, 13px) 0 0;
  max-width: 40em;
  text-wrap: pretty;
}

.doc-card {
  margin-top: clamp(34px, 3.6cqi, 58px);
  border-radius: clamp(14px, 1.3cqi, 18px);
  background: var(--iv-pane);
  box-shadow: 0 0 0 .5px var(--iv-sep);
  padding: clamp(22px, 2.2cqi, 34px);
}

.doc-card-title {
  font-size: clamp(19px, 1.7cqi, 25px);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.2;
  color: var(--iv-fg1);
}

.doc-card p {
  font-size: clamp(15px, 1.25cqi, 17px);
  line-height: 1.6;
  color: var(--iv-fg2);
  margin: clamp(10px, 1cqi, 14px) 0 0;
  max-width: 40em;
  text-wrap: pretty;
}

.doc-foot {
  margin-top: clamp(44px, 4.4cqi, 72px);
  padding-top: clamp(22px, 2.2cqi, 32px);
  box-shadow: inset 0 .5px 0 var(--iv-sep);
}

.doc-foot .footer-licence { margin: 0 0 clamp(14px, 1.4cqi, 20px); }

.doc-foot-links { display: flex; flex-wrap: wrap; gap: clamp(15px, 1.7cqi, 26px); }
.doc-foot-links a { font-size: clamp(13px, 1.05cqi, 14.5px); color: var(--iv-fg2); }