/* Cadence Video Player — cadencevideoplayer.com
   The app's own palette: the ground and plate of the icon, the dove's white for type, and the twelve hues of
   the wheel, measured off the icon (cyan at the apex, clockwise). One stylesheet, no framework, no fonts
   fetched from anywhere: on an Apple device the type is San Francisco, as it is in the app. */

:root {
  --ground: #0c0e12;
  --surface: #17191f;
  --raised: #1e212a;
  --hair: rgba(255, 255, 255, 0.08);
  --text: #edf1f6;
  --soft: #99a2b0;
  --faint: #6b7380;

  --cyan: hsl(180 85% 66%);
  --azure: hsl(209 85% 66%);
  --violet: hsl(259 85% 66%);
  --magenta: hsl(310 85% 66%);
  --amber: hsl(43 85% 66%);
  --green: hsl(119 85% 66%);

  /* the wheel, in the icon's order: from cyan, round, and back to cyan */
  --wheel: linear-gradient(90deg,
    hsl(180 85% 66%), hsl(210 85% 66%), hsl(240 85% 66%), hsl(270 85% 66%), hsl(300 85% 66%), hsl(330 85% 66%),
    hsl(0 85% 66%), hsl(30 85% 66%), hsl(60 85% 66%), hsl(90 85% 66%), hsl(120 85% 66%), hsl(150 85% 66%),
    hsl(180 85% 66%));

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Inter, sans-serif;
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 1120px;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.01em; margin: 0; }
h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; }
strong { color: var(--text); font-weight: 600; }
kbd, code { font-family: var(--mono); font-size: 0.9em; }
.soft { color: var(--soft); }
.faint { color: var(--faint); }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }
.vis-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---- the wordmark: each letter on a wave, set rolling by JS ------------------------------------- */
.kinetic {
  display: inline-flex;
  font-family: var(--display);
  font-weight: 700;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;
}
.kinetic > span {
  display: inline-block;
  will-change: transform, color;
  /* the landing: rise in from below with a little spring, one after the other */
  opacity: 0;
  transform: translateY(0.28em);
  transition: opacity 0.4s ease-out, transform 0.55s cubic-bezier(0.2, 1.15, 0.35, 1);
}
.kinetic.landed > span { opacity: 1; transform: translateY(0); }
.kinetic.dancing > span { transition: none; }

/* ---- the wheel as a rule, wiped on once from the left ------------------------------------------- */
.rule {
  height: 3px;
  border-radius: 2px;
  background: var(--wheel);
  opacity: 0.9;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.65s ease-out;
}
.rule.drawn { clip-path: inset(0 0 0 0); }
.rule.thin { height: 2px; opacity: 0.7; }

/* ---- the top bar ---------------------------------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(12, 14, 18, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--hair);
}
.bar .wrap { display: flex; align-items: center; gap: 18px; height: 58px; }
.bar .brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-family: var(--display); font-weight: 700; font-size: 19px; }
.bar .brand img { width: 28px; height: 28px; border-radius: 7px; }
.bar nav { margin-left: auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.bar nav::-webkit-scrollbar { display: none; }
.bar nav a { color: var(--soft); font-size: 15px; padding: 7px 11px; border-radius: 9px; white-space: nowrap; }
.bar nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); text-decoration: none; }
.bar nav a.cta { color: var(--ground); background: var(--cyan); font-weight: 600; }
.bar nav a.cta:hover { background: hsl(180 85% 72%); }

/* ---- the hero ------------------------------------------------------------------------------------- */
.hero { position: relative; padding: 72px 0 40px; overflow: hidden; }
.hero::before {
  /* a still glow of the wheel behind the word; nothing here ever redraws */
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 30%, hsl(180 85% 66% / 0.13), transparent 70%),
    radial-gradient(35% 45% at 62% 20%, hsl(259 85% 66% / 0.12), transparent 70%),
    radial-gradient(30% 40% at 88% 55%, hsl(310 85% 66% / 0.10), transparent 70%),
    radial-gradient(28% 40% at 40% 80%, hsl(43 85% 66% / 0.07), transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; }
.hero h1.kinetic { font-size: clamp(64px, 11vw, 132px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 8px; }
.hero .rule { max-width: 420px; margin: 4px 0 14px; }
.hero .tag { font-size: 20px; color: var(--soft); margin-bottom: 22px; }
.hero .lede { font-size: 20px; line-height: 1.5; max-width: 34em; }
.hero .lede strong { color: var(--text); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 18px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px; border-radius: 13px; font-weight: 600; font-size: 16px;
  color: var(--text); background: var(--raised); border: 1px solid var(--hair);
  transition: transform 0.18s ease, background 0.18s ease;
}
.btn:hover { text-decoration: none; background: #262a35; transform: translateY(-1px); }
.btn.primary { color: var(--ground); background: var(--cyan); border-color: transparent; }
.btn.primary:hover { background: hsl(180 85% 72%); }
.btn svg { width: 18px; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 14px; color: var(--soft); padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--hair);
}
.chip i { font-style: normal; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amber); margin-left: 6px; }

/* the stage: a tablet with a phone in front of it */
.stage { position: relative; aspect-ratio: 4 / 3; }
.device { position: absolute; border-radius: 22px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.07); overflow: hidden; }
.device img { display: block; width: 100%; height: 100%; object-fit: cover; }
.device.tablet { inset: 6% 0 auto 4%; width: 88%; aspect-ratio: 4 / 3; padding: 2.4%; }
.device.tablet img { border-radius: 8px; }
.device.phone { right: 0; bottom: 0; width: 44%; aspect-ratio: 1200 / 555; padding: 1.6%; border-radius: 18px; }
.device.phone img { border-radius: 12px; }
.device.window { position: static; border-radius: 12px; padding: 0; }

/* ---- sections ------------------------------------------------------------------------------------- */
section { padding: 64px 0; }
section + section { border-top: 1px solid var(--hair); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.eyebrow.cyan { color: var(--cyan); } .eyebrow.azure { color: var(--azure); } .eyebrow.violet { color: var(--violet); }
.eyebrow.magenta { color: var(--magenta); } .eyebrow.amber { color: var(--amber); } .eyebrow.green { color: var(--green); }
.intro { font-size: 19px; color: var(--soft); max-width: 46em; margin: 14px 0 0; }
.intro strong { color: var(--text); }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.card {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: 24px; position: relative; overflow: hidden;
}
.card::after {
  /* a hairline of the wheel along the top, revealed on hover: the app's own rule */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--wheel);
  opacity: 0; transition: opacity 0.35s ease;
}
.card:hover::after { opacity: 0.8; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--soft); font-size: 16px; margin-bottom: 0.6em; }
.card p:last-child { margin-bottom: 0; }
.card ul { color: var(--soft); font-size: 15.5px; margin: 8px 0 0; padding-left: 18px; }
.card li { margin: 3px 0; }
.card li strong { color: var(--text); font-weight: 500; }

.icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--hue) 14%, transparent); color: var(--hue);
}
.icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.features .card.wide { grid-column: span 2; }

/* ---- what it does not do -------------------------------------------------------------------------- */
.plain { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; margin-top: 28px; }
.plain ul.no { list-style: none; padding: 0; margin: 0; }
.plain ul.no li { padding: 12px 0; border-top: 1px solid var(--hair); color: var(--soft); }
.plain ul.no li:first-child { border-top: 0; }
.plain ul.no li strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.plain blockquote { margin: 0; padding: 20px 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--hair); color: var(--soft); font-size: 17px; }
.plain blockquote p:last-child { margin: 0; }

/* ---- formats ---------------------------------------------------------------------------------------- */
.formats { margin-top: 28px; border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.formats .row { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 18px 22px; border-top: 1px solid var(--hair); }
.formats .row:first-child { border-top: 0; }
.formats .row h4 { font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); padding-top: 3px; }
.formats .row p { margin: 0; color: var(--soft); }
.formats .row p strong { font-weight: 500; }
.formats .row .note { font-size: 14.5px; color: var(--faint); margin-top: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-family: var(--mono); font-size: 13.5px; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--hair); border-radius: 7px; padding: 3px 8px; }
.tags span.hw { border-color: color-mix(in srgb, var(--green) 45%, transparent); color: var(--green); }

/* ---- devices ---------------------------------------------------------------------------------------- */
.devices { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; margin-top: 36px; }
.devices figure { margin: 0; }
.devices figcaption { color: var(--soft); font-size: 15px; margin-top: 12px; }
.devices figcaption strong { color: var(--text); }
.devices .tall { display: grid; grid-template-rows: auto 1fr; }
.devices .phone-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.devices .phone-pair .device { position: static; border-radius: 22px; padding: 4%; aspect-ratio: 640 / 1385; }
.devices .phone-pair img { border-radius: 16px; }
.devices .mac { margin-top: 24px; }
.devices .mac .device img { border-radius: 12px; }

/* ---- price ------------------------------------------------------------------------------------------ */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-top: 8px; }
.price .big { font-family: var(--display); font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.price .big em { font-style: normal; background: var(--wheel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.price ul { list-style: none; padding: 0; margin: 0; }
.price li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hair); color: var(--soft); }
.price li:first-child { border-top: 0; }
.price li svg { flex: none; width: 22px; height: 22px; stroke: var(--green); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.price li strong { color: var(--text); }

/* ---- faq -------------------------------------------------------------------------------------------- */
.faq { margin-top: 28px; columns: 2; column-gap: 40px; }
.faq details { break-inside: avoid; border-top: 1px solid var(--hair); padding: 14px 0; }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 17px; list-style: none; display: flex; gap: 12px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "–"; color: var(--cyan); font-family: var(--mono); flex: none; width: 1em; }
.faq details:not([open]) summary::before { content: "+"; }
.faq details p { color: var(--soft); margin: 10px 0 0 calc(1em + 12px); font-size: 16px; }

/* ---- support / contact ------------------------------------------------------------------------------ */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 28px; }
.contact .card .email { font-family: var(--display); font-size: 24px; font-weight: 700; word-break: break-all; }
.contact ol { color: var(--soft); padding-left: 20px; margin: 8px 0 0; }
.contact li { margin: 4px 0; }

/* ---- footer ----------------------------------------------------------------------------------------- */
footer { border-top: 1px solid var(--hair); padding: 40px 0 60px; color: var(--faint); font-size: 14.5px; }
footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; }
footer .kinetic { font-size: 34px; color: var(--text); }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer nav a { color: var(--soft); }
footer p { margin: 8px 0 0; }

/* ---- documents (privacy, terms, licences, support) --------------------------------------------------- */
.doc { padding: 56px 0 80px; }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.1; margin-bottom: 8px; }
.doc .updated { color: var(--faint); font-size: 15px; margin-bottom: 28px; }
.doc h2 { font-size: 24px; margin: 36px 0 10px; }
.doc h3 { font-size: 18px; margin: 22px 0 6px; }
.doc p, .doc li { color: var(--soft); }
.doc li { margin: 4px 0; }
.doc strong { color: var(--text); }
.doc .box { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 18px 22px; margin: 18px 0; }
.doc .box p:last-child { margin: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 15.5px; }
.doc th, .doc td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--hair); vertical-align: top; color: var(--soft); }
.doc th { color: var(--faint); font-weight: 500; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; border-top: 0; }
.doc td strong { color: var(--text); font-weight: 500; }

/* ---- reveal on scroll ------------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .kinetic > span { transition: none; }
  .rule { transition: none; }
}

/* ---- narrow screens --------------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .stage { max-width: 640px; }
  .three, .features { grid-template-columns: 1fr 1fr; }
  .features .card.wide { grid-column: span 2; }
  .devices { grid-template-columns: 1fr; }
  .faq { columns: 1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 40px; }
  .hero .lede, .hero .tag { font-size: 17px; }
  .three, .features { grid-template-columns: 1fr; }
  .features .card.wide { grid-column: auto; }
  .plain, .price, .contact { grid-template-columns: 1fr; gap: 24px; }
  .formats .row { grid-template-columns: 1fr; gap: 6px; }
  footer .wrap { grid-template-columns: 1fr; }
  section { padding: 48px 0; }
}

/* the television, and the family of four (2026-09-18): the television gets a thin dark frame; the family picture draws its own devices */
#devices figure.tv { margin: 24px 0 0; }
#devices figure.tv .device { position: static; border-radius: 10px; padding: 0.7%; aspect-ratio: 16 / 9; }
#devices figure.tv .device img { border-radius: 4px; }
#devices figure.tv figcaption, #devices figure.family figcaption { color: var(--soft); font-size: 15px; margin-top: 12px; }
#devices figure.tv figcaption strong, #devices figure.family figcaption strong { color: var(--text); }
#devices figure.family { margin: 24px 0 0; }
#devices figure.family img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }