:root {
  --paper: #EEEBE5;
  --ink: #171614;
  --muted: #8A857C;
  --card: #FBFAF8;
  --well: #E9E5DE;
  --amber: #F3D9A0;
  --lavender: #D9D6FB;
  --coral: #F8C9B8;
  --green: #BFE8CD;
  --green-deep: #1F6B43;
  --sky: #BFE0F2;
  --ember: #F0623A;
  --ember-ink: #C93A14;

  --spring: cubic-bezier(.3, 1.35, .5, 1);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: clamp(20px, 5vw, 56px);
  --wide: 1120px;
  --float: 0 14px 28px rgba(23, 22, 20, .10), 0 1px 2px rgba(23, 22, 20, .05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 17px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--amber); }

h1, h2, h3, p, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
svg { display: block; }

h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h2 { font-size: clamp(27px, 3.3vw, 42px); }
h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.025em; line-height: 1.12; }

.nowrap { white-space: nowrap; }

.skip {
  position: fixed; left: 16px; top: -80px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px;
}
.skip:focus { top: 16px; }

:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 10px; }

main > section { padding-inline: max(var(--gutter), calc((100% - var(--wide)) / 2)); }

/* ---------- The island ---------- */

.island {
  position: fixed; z-index: 30; top: max(14px, env(safe-area-inset-top)); left: 50%;
  translate: -50% 0;
  display: flex; align-items: center; gap: 6px;
  height: 48px; padding: 0 6px 0 12px;
  background: var(--ink); color: var(--paper);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(23, 22, 20, .18);
  font-size: 15px; font-weight: 600; white-space: nowrap;
}
.island-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; padding-right: 10px; letter-spacing: -.01em; }
.island-brand img { border-radius: 7px; }
.island-get { display: flex; }
.island-cta {
  display: flex; align-items: center; height: 36px; padding: 0 15px 0 12px;
  background: var(--paper); color: var(--ink); border-radius: 18px;
  text-decoration: none; font-size: 14px; font-weight: 700;
  transition: scale .22s var(--spring), background-color .3s;
}
.island-cta:hover { background: #fff; }
.island-cta:active { scale: .96; }
.island-cta .apple { margin-right: 6px; }
.island-cta span { overflow: hidden; max-width: 6em; transition: max-width .45s var(--spring), opacity .3s; }
.island-cta .long { max-width: 0; opacity: 0; }
/* Hovering the island says which phone it's for. */
@media (hover: hover) {
  .island:hover .short { max-width: 0; opacity: 0; }
  .island:hover .long { max-width: 6em; opacity: 1; }
}
.island:focus-within .short { max-width: 0; opacity: 0; }
.island:focus-within .long { max-width: 6em; opacity: 1; }

.apple { flex: none; width: 1em; height: 1em; translate: 0 -.07em; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 50px; padding: 0 22px;
  background: var(--ink); color: var(--paper);
  border-radius: 18px;
  font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-decoration: none;
  transition: scale .22s var(--spring), background-color .3s, color .3s, opacity .3s;
}
.btn:hover { background: #2A2825; }
.btn:active { scale: .96; }
.btn-quiet { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(23, 22, 20, .08); }
.btn-quiet:hover { background: #fff; }
.btn:disabled { opacity: .28; cursor: default; }
.btn:disabled:hover { background: var(--ink); }

.cta-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* Where the Mac button will go: the same size as a button, but an outline you can't press. */
.btn-soon {
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  min-height: 50px; padding: 0 12px 0 20px; border-radius: 18px;
  box-shadow: inset 0 0 0 1.5px rgba(23, 22, 20, .14);
  color: #55514A; font-size: 16px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
}
.cta-center { justify-content: center; }

/* ---------- Hero: the pitch and the sentence, in one screen ---------- */

.hero {
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: 28px clamp(28px, 5vw, 76px);
  padding-block: 84px 28px;
}
.pitch { display: grid; justify-items: start; }
.lockup { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.lockup img { width: 52px; height: 52px; filter: drop-shadow(0 0 .6px rgba(23, 22, 20, .45)) drop-shadow(0 1px 1.5px rgba(23, 22, 20, .14)) drop-shadow(0 9px 14px rgba(23, 22, 20, .2)); }
h1 { max-width: 9em; font-size: clamp(36px, 4.5vw, 60px); letter-spacing: -.045em; line-height: .98; }
.lede { margin-top: 18px; max-width: 25em; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.45; color: #55514A; letter-spacing: -.008em; }
.pitch .cta-row { margin-top: 26px; }

.pitch > *, .demo { animation: rise .7s var(--ease) both; }
.pitch > :nth-child(2) { animation-delay: .05s; }
.pitch > :nth-child(3) { animation-delay: .1s; }
.pitch > :nth-child(4) { animation-delay: .15s; }
.pitch > :nth-child(5) { animation-delay: .2s; }
.demo { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; translate: 0 14px; } }

/* ---------- The scene: the sentence, taken apart ---------- */

.scene { --tone: var(--amber); }
.scene[data-stage="due"] { --tone: var(--lavender); }
.scene[data-stage="persona"], .scene[data-stage="done"] { --tone: var(--green); }
.scene[data-stage="tone"] { --tone: var(--coral); }
.scene[data-stage="cadence"] { --tone: var(--sky); }

.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 2.2vh, 20px); min-width: 0; }

.steps { display: flex; gap: 5px; flex: none; margin: 0; padding: 0; list-style: none; }
.steps button { display: block; padding: 9px 0; }
.steps i {
  display: block; position: relative; overflow: hidden; width: 16px; height: 5px; border-radius: 3px;
  background: rgba(23, 22, 20, .12); transition: width .5s var(--spring), background-color .4s;
}
.steps button:hover i { background: rgba(23, 22, 20, .3); }
.steps .past i { background: rgba(23, 22, 20, .36); }
.steps .on i { width: 44px; }
.steps .on i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink);
  transform-origin: 0 50%; animation: fill var(--dur, 3s) linear both;
}
@keyframes fill { from { scale: 0 1; } }

.sentence {
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start;
  gap: .2em .24em; min-height: 4.2em;
  font-size: clamp(24px, min(2.9vw, 5.2vh), 38px); font-weight: 700; letter-spacing: -.024em; line-height: 1.12;
  transform-origin: 0 50%;
  transition: color .45s, opacity .6s, filter .6s, scale .6s var(--ease);
}
.sentence > span, .line > span { padding-block: .06em; }
.sentence > .line { display: flex; flex-wrap: wrap; align-items: center; gap: inherit; flex: 0 0 100%; min-width: 0; padding-block: 0; }
.brk { display: none; }

.chip {
  --bg: var(--amber);
  position: relative;
  display: inline-flex; align-items: center; gap: .2em;
  padding: .06em .3em .08em; border-radius: .42em;
  background: var(--bg); color: var(--ink);
  font-weight: inherit; letter-spacing: inherit; line-height: inherit; white-space: nowrap;
  transition: scale .5s var(--spring), box-shadow .45s, color .45s, background-color .45s;
}
.chip.lavender { --bg: var(--lavender); }
.chip.green { --bg: var(--green); }
.chip.coral { --bg: var(--coral); }
.chip.sky { --bg: var(--sky); }
.chip .ico { width: .58em; height: .58em; flex: none; }
.chip .av-chip { width: .8em; height: .8em; flex: none; transition: opacity .45s, filter .45s; }
.pop { animation: pop .5s var(--spring); }
@keyframes pop { from { scale: .3; rotate: -40deg; opacity: 0; } }

.roll { position: relative; display: inline-grid; justify-items: start; transition: width .5s var(--spring); }
.roll > span { grid-area: 1 / 1; white-space: nowrap; }
.roll > .in { animation: rollin .42s var(--ease) both; }
.roll > .out { position: absolute; left: 0; top: 0; animation: rollout .28s var(--ease) both; }
@keyframes rollin { from { opacity: 0; filter: blur(7px); translate: 0 calc(var(--d, 1) * .55em); } }
@keyframes rollout { to { opacity: 0; filter: blur(7px); translate: 0 calc(var(--d, 1) * -.55em); } }

.swap { animation: swap .36s var(--ease); }
@keyframes swap { from { opacity: 0; filter: blur(8px); translate: 0 .18em; } }

.chip.heated { color: var(--ember-ink); box-shadow: 0 .16em .5em -.08em rgba(240, 98, 58, .75); }
.chip.heated .roll { color: var(--ink); }
.flinch { animation: flinch .42s var(--ease); }
@keyframes flinch { 30% { rotate: -2.5deg; scale: 1.05; } 60% { rotate: 1.5deg; } }

.chip-task { gap: 0; min-width: .7em; min-height: 1.26em; }
.chip-task .val { white-space: pre; }
.chip-task::after {
  content: ""; width: .06em; height: .84em; margin: 0 -.1em 0 .04em; border-radius: 1px; background: var(--ink);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* While one field is under the needle, the rest of the sentence steps back. */
.scene:not([data-stage="task"], [data-stage="done"]) .sentence { color: #B9B4AA; }
.scene:not([data-stage="task"], [data-stage="done"]) .chip:not(.focus) { --bg: var(--well); color: #A49F95; box-shadow: none; }
.scene:not([data-stage="task"], [data-stage="done"]) .chip:not(.focus) .roll { color: inherit; }
.scene:not([data-stage="task"], [data-stage="done"]) .chip:not(.focus) .av-chip { opacity: .5; filter: grayscale(1); }
.scene:not([data-stage="task"], [data-stage="done"]) .chip-task::after { opacity: 0; animation: none; }
.chip.focus { z-index: 1; scale: 1.06; box-shadow: 0 .34em .7em -.34em rgba(23, 22, 20, .34); }
.scene[data-stage="task"] .chip.focus { scale: 1; box-shadow: none; }
.scene[data-got] .sentence { opacity: .28; filter: blur(3px); scale: .97; }

.demo-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-inline: 4px; }
.caption { min-width: 0; }
.caption h2 { display: flex; align-items: baseline; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; text-wrap: nowrap; }
.caption .num { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.caption p { margin-top: 3px; padding-left: 28px; max-width: 32em; min-height: 2.9em; color: #6B665E; font-size: 14.5px; line-height: 1.45; }
.caption.swap { animation: none; }
.caption.swap > * { animation: swap .5s var(--ease) both; }
.caption.swap > p { animation-delay: .06s; }

.exhibit {
  --heat: 0; --R: 430px; --lens: 120px;
  position: relative; height: clamp(272px, 37vh, 300px); overflow: hidden;
  background: var(--card); border-radius: clamp(26px, 3.4vw, 38px);
  box-shadow: 0 30px 60px -30px rgba(23, 22, 20, .18), 0 44px 90px -40px rgb(240 98 58 / calc(var(--heat) * .8));
  transition: box-shadow .5s;
}
.exhibit::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: -70px; height: 130px; border-radius: 50%;
  background: var(--tone); filter: blur(46px); opacity: .6; transition: background-color .6s;
}
.ex {
  position: absolute; inset: 0; opacity: 0; visibility: hidden; filter: blur(8px);
  transition: opacity .32s, filter .32s, visibility 0s .32s;
}
.scene[data-stage="task"] [data-on~="task"],
.scene[data-stage="due"] [data-on~="due"],
.scene[data-stage="persona"] [data-on~="persona"],
.scene[data-stage="tone"] [data-on~="tone"],
.scene[data-stage="cadence"] [data-on~="cadence"],
.scene[data-stage="done"] [data-on~="done"] { opacity: 1; visibility: visible; filter: none; transition: opacity .45s .08s, filter .45s .08s; }

/* Loose thoughts */
.ex-task { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 12px 8px; padding: 22px clamp(14px, 4vw, 48px); }
.thought {
  padding: 7px 14px; border-radius: 14px; background: var(--well); color: #A49F95;
  font-size: 15px; font-weight: 600; white-space: nowrap; filter: blur(1.4px); opacity: .8;
  transition: background-color .5s, color .5s, filter .5s, opacity .5s, scale .6s var(--spring), box-shadow .5s;
  animation: bob 5.2s ease-in-out infinite alternate;
}
.thought:nth-child(odd) { animation-duration: 6.6s; animation-delay: -2.1s; }
.thought:nth-child(3n) { animation-duration: 7.6s; animation-delay: -4.3s; }
.thought.on { background: var(--amber); color: var(--ink); filter: none; opacity: 1; scale: 1.12; box-shadow: var(--float); }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 6px; } }

/* The curved ruler */
.dial {
  inset: 0 0 auto; height: 128px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent max(4%, calc(50% - 205px)), #000 max(27%, calc(50% - 105px)), #000 min(73%, calc(50% + 105px)), transparent min(96%, calc(50% + 205px)));
  mask-image: linear-gradient(90deg, transparent max(4%, calc(50% - 205px)), #000 max(27%, calc(50% - 105px)), #000 min(73%, calc(50% + 105px)), transparent min(96%, calc(50% + 205px)));
}
.wheel { position: absolute; left: 50%; top: calc(16px + var(--R)); width: 0; height: 0; rotate: var(--turn, 0deg); transition: rotate .75s var(--spring); }
.wheel > * { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.wheel i { width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: rgba(23, 22, 20, .16); transform: rotate(var(--a)) translateY(calc(var(--R) * -1)); }
.wheel i.major { height: 14px; background: rgba(23, 22, 20, .42); }
.wheel .stop {
  transform: rotate(var(--a)) translate(-50%, calc(48px - var(--R) - 50%));
  white-space: nowrap; font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: #A8A39A;
  transition: color .35s;
}
.wheel .stop.on { color: var(--ink); }
.wheel .av { width: 40px; height: 40px; opacity: .55; transition: scale .5s var(--spring), opacity .35s; }
.wheel .stop.on .av { scale: 1.3; opacity: 1; }
.lens {
  inset: 64px auto auto 50%; translate: -50% -50%; width: var(--lens); height: 40px; border-radius: 14px;
  background: var(--tone);
  transition: opacity .32s, filter .32s, visibility 0s .32s, width .5s var(--spring), height .5s var(--spring), border-radius .5s, background-color .5s;
}
.scene[data-stage="persona"] .lens { height: 66px; border-radius: 33px; }
.scene [data-on].lens { transition: opacity .45s, filter .45s, width .5s var(--spring), height .5s var(--spring), border-radius .5s, background-color .5s; }
.needle { inset: 6px auto auto 50%; width: 3px; height: 26px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }

/* What sits under the ruler */
.panel { inset: 128px 0 0; display: grid; align-content: center; padding: 0 clamp(18px, 3vw, 32px) clamp(16px, 2.4vw, 24px); }

.panel-due { --reach: .18; padding-inline: clamp(28px, 5vw, 56px); }
.span { position: relative; height: 10px; border-radius: 5px; background: var(--well); }
.span::before { content: ""; position: absolute; left: -4px; top: -3px; z-index: 1; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); }
.span-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--reach) * 100%); border-radius: 5px; background: #A7A1EE; transition: width .75s var(--spring); }
.panel-due.open .span-fill { background: repeating-linear-gradient(90deg, #A7A1EE 0 10px, transparent 10px 19px); }
.span-flag {
  position: absolute; top: 50%; left: calc(var(--reach) * 100%); width: 34px; height: 34px; margin: -17px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ink); color: var(--paper);
  box-shadow: 0 6px 14px rgba(23, 22, 20, .25);
  transition: left .75s var(--spring);
}
.span-flag .ico { width: 16px; height: 16px; }
.span-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.span-ends span:last-child { color: var(--ink); }

.note { background: var(--paper); border-radius: 24px; padding: 16px; }
.note-head { display: flex; align-items: center; gap: 10px; }
.av { width: 36px; height: 36px; flex: none; overflow: visible; }
.note-who { display: grid; line-height: 1.25; flex: 1; min-width: 0; }
.note-who b { font-size: 15px; font-weight: 600; }
.note-who span, .note-when { font-size: 13px; color: var(--muted); }
.note-body { margin-top: 10px; font-size: 16px; line-height: 1.38; min-height: 2.76em; }
.panel .note { padding: 14px 16px; transition: box-shadow .45s; }
.panel .note-body { margin-top: 8px; font-size: 15.5px; }
.panel .note.hot { box-shadow: 0 0 0 1.5px rgba(240, 98, 58, .7), 0 16px 30px -16px rgba(240, 98, 58, .7); }

.cad-read { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-inline: 4px; font-weight: 600; color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.cad-read b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); vertical-align: baseline; }
.cad-ends { font-size: 13.5px; }
.track { position: relative; height: 52px; margin-top: 12px; background: var(--well); border-radius: 17px; overflow: hidden; }
.track i {
  position: absolute; top: 50%; width: var(--w, 10px); height: var(--h, 10px); margin: calc(var(--h, 10px) / -2) 0 0 calc(var(--w, 10px) / -2);
  background: var(--ink); border-radius: 99px;
  animation: pip .4s var(--spring) both;
}
@keyframes pip { from { scale: 0; } }
.exhibit.max .track i { animation: pip .4s var(--spring) both, jitter .5s linear infinite; }
@keyframes jitter { 25% { translate: 0 -2px; } 75% { translate: 0 2px; } }

/* Handed over */
.ex-done { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 6px; padding: clamp(16px, 2.6vw, 24px); }
.got {
  justify-self: start; display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 6px 18px 6px 7px; border-radius: 23px;
  background: var(--green); font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
  transform-origin: 0 50%; scale: .6; opacity: 0; transition: scale .55s var(--spring), opacity .3s;
}
.scene[data-got] .got { scale: 1; opacity: 1; }
.got .av { width: 32px; height: 32px; }
.got .dim { opacity: .55; font-weight: 600; }
.stamp { min-height: 1.5em; padding-left: 8px; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pings { position: relative; }
.pings .note {
  position: absolute; left: 0; right: 0; bottom: 0; transform-origin: 50% 0;
  box-shadow: 0 0 0 1.5px var(--card), 0 10px 20px -14px rgba(23, 22, 20, .3);
  animation: drop .55s var(--spring) both;
  transition: translate .5s var(--spring), scale .5s var(--spring), opacity .4s, filter .4s;
}
.pings .note[data-depth="1"] { translate: 0 -12px; scale: .955; filter: brightness(.975); }
.pings .note[data-depth="2"] { translate: 0 -23px; scale: .91; filter: brightness(.95); }
@keyframes drop { from { opacity: 0; translate: 0 -28px; scale: .94; } }

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

/* ---------- Why ---------- */

.why {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end;
  gap: 14px clamp(24px, 5vw, 72px); padding-block: clamp(44px, 6vw, 84px);
}
.why p { max-width: 30em; color: #55514A; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; }

/* ---------- Where ---------- */

.where { padding-bottom: clamp(84px, 11vw, 150px); }
.where-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(12px, 1.6vw, 20px); }
.device { background: var(--card); border-radius: clamp(26px, 3.4vw, 36px); overflow: hidden; display: flex; flex-direction: column; }
.device-copy { padding: clamp(20px, 2.4vw, 28px); display: grid; gap: 8px; }
.device-copy h3 { font-size: clamp(19px, 1.9vw, 23px); }
.device-soon { justify-self: start; margin-bottom: 2px; }
.device-copy p { color: #55514A; max-width: 30em; font-size: 15.5px; line-height: 1.45; }

/* The shortcut sits in the scene. Clicking it (or pressing it) summons the overlay again. */
.keycaps { position: absolute; left: 50%; bottom: 16px; translate: -50% 0; display: flex; gap: 5px; cursor: pointer; }
.keycaps kbd {
  display: grid; place-items: end start; width: 38px; height: 38px; padding: 0 0 5px 7px;
  background: var(--card); border-radius: 10px; box-shadow: inset 0 -3px 0 rgba(23, 22, 20, .09), 0 3px 8px rgba(23, 22, 20, .08);
  font: 700 12.5px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", sans-serif; color: #55514A;
  transition: translate .12s, box-shadow .12s;
}
.keycaps .wide { width: 108px; }
.keycaps:active kbd { translate: 0 2px; box-shadow: inset 0 -1px 0 rgba(23, 22, 20, .09), 0 1px 2px rgba(23, 22, 20, .08); }
@keyframes press { 35%, 60% { translate: 0 3px; box-shadow: inset 0 -1px 0 rgba(23, 22, 20, .09), 0 1px 2px rgba(23, 22, 20, .08); } }
@keyframes summon { from { opacity: 0; scale: .9; translate: 0 16px; } }
@keyframes surface { from { opacity: 0; translate: 0 56px; } }
.where.armed:not(.live) .mac-overlay, .where.armed:not(.live) .phone { opacity: 0; }
.where.live .keycaps kbd { animation: press .42s .2s; }
.where.live .keycaps .wide { animation-delay: .27s; }
.where.live .mac-overlay { animation: summon .6s var(--spring) .45s backwards; }
.where.live .phone { animation: surface .8s var(--ease) .15s backwards; }

.mac { position: relative; height: clamp(290px, 28vw, 320px); padding: 0 0 54px; background: var(--well); display: grid; place-items: center; overflow: hidden; }
.mac-bg { position: absolute; inset: 22px; display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows: 1fr; gap: 10px; opacity: .55; filter: blur(1.5px); }
.mac-bg i { background: #DDD8CF; border-radius: 12px; }
.mac-bg i:nth-child(2) { grid-row: span 2; }
.mac-bg i:nth-child(4) { grid-column: span 2; }
.mac-overlay {
  position: relative; width: min(84%, 440px); background: var(--paper); border-radius: 26px;
  padding: 16px 20px 18px; box-shadow: 0 40px 70px -24px rgba(23, 22, 20, .38), 0 2px 4px rgba(23, 22, 20, .06);
  display: grid; gap: 12px;
}
.mini-island {
  justify-self: center; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px;
  background: var(--ink); color: var(--paper); border-radius: 13px; font-size: 11.5px; font-weight: 600;
}
.mini-island i { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.mini-sentence { font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; letter-spacing: -.022em; line-height: 1.5; }
.mini-sentence b { font-weight: inherit; padding: .06em .3em .08em; border-radius: .42em; white-space: nowrap; }
.mini-sentence .amber { background: var(--amber); }
.mini-sentence .lavender { background: var(--lavender); }
.mini-sentence .green { background: var(--green); }
.mini-sentence .coral { background: var(--coral); }
.mini-sentence .sky { background: var(--sky); }
.mini-btn { height: 40px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 14px; font-size: 13.5px; font-weight: 600; }

.phone-wrap { height: clamp(290px, 28vw, 320px); background: var(--well); display: grid; justify-items: center; align-items: start; padding-top: 22px; overflow: hidden; }
.phone {
  width: min(78%, 270px); height: 130%; background: var(--paper);
  border: 8px solid var(--ink); border-bottom: 0; border-radius: 42px 42px 0 0;
  padding: 44px 16px 0; display: flex; flex-direction: column; gap: 14px; position: relative;
  box-shadow: 0 30px 60px -20px rgba(23, 22, 20, .35);
}
.phone::before { content: ""; position: absolute; top: 11px; left: 50%; translate: -50% 0; width: 76px; height: 22px; background: var(--ink); border-radius: 11px; }
.phone .mini-sentence { font-size: 18px; }
.kb { margin: 2px -16px 0; padding: 9px 5px 0; background: #DDD8CF; display: grid; gap: 7px; }
.kb div { display: flex; justify-content: center; gap: 4px; }
.kb i { flex: 0 1 9%; height: 30px; border-radius: 5px; background: var(--card); box-shadow: 0 1px 0 rgba(23, 22, 20, .18); }

/* ---------- Pricing ---------- */

.pricing { padding-bottom: clamp(84px, 11vw, 150px); }
.pricing-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 14px clamp(24px, 5vw, 72px); }
.pricing-head p { max-width: 30em; color: #55514A; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; }

.plans { margin-top: clamp(22px, 3vw, 36px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: stretch; }
.plan {
  display: flex; flex-direction: column; gap: 22px;
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--card); border-radius: clamp(26px, 3.4vw, 36px);
}
.plan-top { display: grid; gap: 10px; }
.plan h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: clamp(19px, 1.9vw, 23px); }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price b { font-size: clamp(40px, 4.4vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 15px; font-weight: 600; color: var(--muted); }
/* Shown while the launch price is on; launch.json decides. */
.plan-launch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 14px; font-weight: 600; color: rgba(238, 235, 229, .62); }
.plan-launch .tag { padding: 3px 9px; border-radius: 999px; background: var(--amber); color: var(--ink); font-size: 12.5px; font-weight: 800; }
[hidden] { display: none !important; }
.plan-pitch { color: #55514A; font-size: 15.5px; line-height: 1.45; text-wrap: pretty; }

.plan-list { display: grid; gap: 12px; padding-top: 20px; border-top: 1.5px solid rgba(23, 22, 20, .07); font-size: 15.5px; line-height: 1.35; }
.plan-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; }
.plan-list .ico { width: 20px; height: 20px; padding: 3px; margin-top: -.5px; border-radius: 50%; background: var(--green); color: var(--green-deep); }

.cast { display: flex; gap: 4px; margin-top: 10px; }
.cast svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 1.5px rgba(23, 22, 20, .12)); }

/* The one to buy reads as the app's own button: ink on paper, flipped. */
.plan-main { background: var(--ink); color: var(--paper); box-shadow: var(--float); }
.plan-main .plan-price span, .plan-main .plan-pitch { color: rgba(238, 235, 229, .62); }
.plan-main .plan-list { border-top-color: rgba(238, 235, 229, .12); }
.plan-main .plan-list .ico { background: var(--amber); color: var(--ink); }
.plan-main .plan-list li:nth-child(2) .ico { background: var(--coral); color: var(--ember-ink); }

/* Not out yet, so it sits back: no price, an outline instead of a card. */
.plan-soon { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(23, 22, 20, .14); }
.plan-soon .plan-list .ico { background: var(--well); color: var(--muted); }
.plan-soon .plan-list li { color: #55514A; }
.soon { padding: 4px 10px; border-radius: 999px; background: var(--lavender); font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; line-height: 1.2; }

.plans-foot { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--muted); font-weight: 600; }

.price-note { margin-top: 14px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.price-note a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(23, 22, 20, .25); }
.price-note a:hover { text-decoration-color: currentColor; }

/* ---------- Facts ---------- */

.facts { padding-bottom: clamp(84px, 11vw, 150px); }
.faq { margin-top: clamp(18px, 2.4vw, 28px); background: var(--card); border-radius: clamp(24px, 3vw, 32px); padding: 6px clamp(20px, 2.8vw, 34px); }
/* Question on the left, its answer opens beside it, so a row never runs the full width as one line. */
.qa { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 28px; column-gap: clamp(20px, 4vw, 56px); align-items: start; }
.qa + .qa { border-top: 1.5px solid rgba(23, 22, 20, .07); }
.qa h3 { padding: 21px 0; font-size: clamp(17.5px, 1.7vw, 20px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.qa button { display: block; text-align: left; font-weight: inherit; letter-spacing: inherit; }
.qa button::after { content: ""; position: absolute; inset: 0; }
.qa button span { display: block; transition: translate .35s var(--spring); }
.qa button i { position: absolute; right: 0; top: 19px; width: 28px; height: 28px; border-radius: 50%; background: var(--well); transition: background-color .3s, rotate .45s var(--spring); }
.qa button i::before, .qa button i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 2.2px; margin-top: -1.1px; border-radius: 2px; background: var(--ink); transition: rotate .45s var(--spring), background-color .3s; }
.qa button i::after { rotate: 90deg; }
.qa.open button i { background: var(--ink); rotate: 180deg; }
.qa.open button i::before, .qa.open button i::after { background: var(--paper); }
.qa.open button i::after { rotate: 0deg; }
@media (hover: hover) {
  .qa button:hover span { translate: 3px 0; }
  .qa:not(.open) button:hover i { background: #DDD8CF; }
}
.ans { position: relative; z-index: 1; display: grid; grid-template-rows: 1fr; }
.ans > div { min-height: 0; overflow: hidden; }
.ans p { padding: 22px 0 24px; max-width: 32em; color: #55514A; font-size: 16px; line-height: 1.5; }
.faq.ready .ans { transition: grid-template-rows .45s var(--ease), visibility 0s; }
.faq.ready .ans p { transition: opacity .35s .08s, translate .45s var(--ease); }
.faq.ready .qa:not(.open) .ans { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .4s var(--ease), visibility 0s .4s; }
.faq.ready .qa:not(.open) .ans p { opacity: 0; translate: 0 -6px; transition: opacity .2s, translate .4s var(--ease); }

/* ---------- Final ---------- */

.final { text-align: center; padding-block: 0 clamp(56px, 8vw, 96px); }
.final img { display: block; width: 84px; height: 84px; margin-inline: auto; filter: drop-shadow(0 0 .6px rgba(23, 22, 20, .45)) drop-shadow(0 1px 1.5px rgba(23, 22, 20, .14)) drop-shadow(0 16px 22px rgba(23, 22, 20, .2)); }
.final h2 { margin: 24px auto 0; font-size: clamp(30px, 4.4vw, 54px); letter-spacing: -.045em; line-height: 1; max-width: 12em; }
.final > p { margin-top: 12px; font-size: clamp(16px, 1.5vw, 18px); color: #55514A; }
.final .cta-row { margin-top: 22px; }
.final .fine { font-size: 13.5px; color: var(--muted); margin-top: 16px; }

/* Equal side columns keep the links on the page's centre line, whatever the side texts' widths. */
.foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px 24px;
  max-width: calc(var(--wide) + var(--gutter) * 2); margin-inline: auto; padding: 24px var(--gutter) 40px;
  font-size: 14px; color: var(--muted); font-weight: 600;
}
.foot-links { display: flex; gap: 20px; }
.foot > :last-child { justify-self: end; text-align: right; }
@media (max-width: 720px) {
  .foot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 12px; }
  .foot > :last-child { justify-self: center; text-align: center; }
  .foot-links { order: -1; }
}
.foot a { text-decoration: none; transition: color .2s; }
.foot a:hover { color: var(--ink); }
.ans p a { text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(23, 22, 20, .25); }

/* ---------- Support and privacy: one column of reading ---------- */

.doc { max-width: 720px; margin-inline: auto; padding: 120px var(--gutter) clamp(56px, 8vw, 96px); }
.doc h1 { max-width: none; font-size: clamp(34px, 4.4vw, 52px); }
.doc .lede { max-width: 32em; }
.doc .stamp-line { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--muted); }
.doc section { margin-top: 18px; padding: clamp(22px, 2.8vw, 30px); background: var(--card); border-radius: clamp(24px, 3vw, 32px); }
.doc section:first-of-type { margin-top: clamp(28px, 4vw, 40px); }
.doc h2 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.025em; line-height: 1.15; }
.doc h3 { margin-top: 20px; font-size: 17px; letter-spacing: -.015em; }
.doc section p, .doc section li { color: #55514A; font-size: 16px; line-height: 1.55; }
.doc section p { margin-top: 10px; }
.doc section ul { margin-top: 10px; display: grid; gap: 8px; }
.doc section li { position: relative; padding-left: 20px; }
.doc section li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.doc section b { color: var(--ink); font-weight: 650; }
.doc section a, .doc .lede a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(23, 22, 20, .25); }
.doc section a:hover, .doc .lede a:hover { text-decoration-color: currentColor; }
.mail { margin-top: 18px; }
.island-back { display: flex; align-items: center; height: 36px; padding: 0 15px; background: var(--paper); color: var(--ink); border-radius: 18px; text-decoration: none; font-size: 14px; font-weight: 700; transition: scale .22s var(--spring), background-color .3s; }
.island-back:hover { background: #fff; }
.island-back:active { scale: .96; }

/* ---------- Small screens ---------- */

@media (max-width: 1100px) { .sentence { min-height: 5.6em; } }
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 26px; padding-block: 80px 24px; }
  .lockup { gap: 10px; margin-bottom: 14px; font-size: 23px; }
  .lockup img { width: 40px; height: 40px; }
  h1 { max-width: none; }
  .lede { margin-top: 12px; max-width: 30em; }
  .pitch .cta-row { margin-top: 18px; }
  .sentence { min-height: 4.2em; font-size: clamp(24px, 4.6vw, 36px); }
  .why, .where-grid, .pricing-head, .plans { grid-template-columns: minmax(0, 1fr); }
  .plan-main { order: -1; }
  /* Stacked, the phone you can get today goes before the Mac that's still coming. */
  .device-later { order: 1; }
  .price-note { margin-top: 12px; }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .qa h3 { padding: 18px 44px 18px 0; }
  .qa button i { top: 15px; }
  .ans p { padding: 0 0 20px; }
  .mac { height: 320px; }
}
@media (max-width: 600px) {
  h1 { font-size: 34px; }
  .pitch, .pitch .cta-row { width: 100%; }
  .pitch .btn-soon { gap: 8px; min-height: 46px; padding: 0 8px 0 14px; font-size: 14.5px; }
  .pitch .btn { flex: 1 1 auto; gap: 6px; min-height: 46px; padding: 0 10px; font-size: 14.5px; white-space: nowrap; }
  /* Sized so "Remind me to" and the longest task still share the first line. */
  .sentence { min-height: 5.5em; font-size: clamp(17px, calc((100vw - 40px) / 15.4), 25px); }
  .sentence > .line { flex-wrap: nowrap; }
  .caption p { display: none; }
  .got { gap: 7px; padding-right: 14px; font-size: 13.5px; white-space: nowrap; }
  .exhibit { --R: 380px; height: 252px; }
  .panel { inset: 104px 0 0; padding-bottom: 14px; }
  .panel .note { padding: 12px 14px; }
  .panel .note-body { margin-top: 6px; font-size: 14.5px; }
  /* The step bars become one full-width strip above the caption, so the two never share a row. */
  .demo-foot { flex-direction: column; align-items: stretch; gap: 2px; }
  .steps { order: -1; }
  .steps li { flex: 1; transition: flex-grow .5s var(--spring); }
  .steps .on { flex-grow: 2.6; }
  .steps button { width: 100%; padding: 6px 0; }
  .steps i, .steps .on i { width: 100%; }
  .wheel .stop { font-size: 16.5px; }
  .thought { font-size: 14px; padding: 6px 12px; }
}

@media (max-width: 350px) {
  .got .dim { display: none; }
  .caption h2 { gap: 8px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}