/* ============================================================================
   Brief — landing page + the watch demo (the watch is also on the home page)
============================================================================ */

/* Registered so the page can ease between source colours */
@property --src-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #50378a;
}
@property --src-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #e9ddff;
}
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  transition: --src-bg var(--dur-slower) var(--ease), --src-fg var(--dur-slower) var(--ease);

  /* The watch face takes on the colour of whichever source is showing;
     the time stays a quiet, constant white. */
  --face-time: #f1f0ff;
  --face-accent: var(--src-fg);
  --face-dim: color-mix(in oklab, var(--src-fg) 15%, #000);
}

/* The source tones are pastels; on a black dial they read better with more
   chroma. Relative colour syntax lifts it without a second palette. */
@supports (color: oklch(from red l c h)) {
  :root {
    --face-accent: oklch(from var(--src-fg) calc(l - 0.04) calc(c * 2.4) h);
    --face-dim: oklch(from var(--src-fg) 0.24 calc(c * 1.6) h);
  }
}

/* The watch itself (case, strap, crown, dial) lives in ../style.css. */

.face-time {
  position: absolute;
  top: 5.2cqw;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 20.5cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--face-time);
  font-variant-numeric: tabular-nums;
}
.face-time .colon {
  display: inline-block;
  translate: 0 -0.06em;
  margin-inline: -0.02em;
  color: var(--face-accent);
}

.cx { position: absolute; }
.swap-stack { position: absolute; inset: 0; }
.swap-item { position: absolute; inset: 0; will-change: transform, opacity; }

.cx .cx-icon {
  width: 1em;
  height: 1em;
  fill: var(--face-accent);
  flex: none;
}

.cx-line {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* RANGED_VALUE — left */
.cx-ranged {
  left: 9.5cqw;
  top: 31.9cqw;
  width: 23cqw;
  height: 23cqw;
}

.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ring path {
  fill: none;
  stroke-width: 8.5;
  stroke-linecap: round;
}
.ring-track { stroke: var(--face-dim); }
.ring-value {
  stroke: var(--face-accent);
  stroke-dasharray: 0 100;
  transition: stroke-dasharray 0.9s var(--ease);
}
.ring-thumb {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform 0.9s var(--ease), opacity 0.3s;
  opacity: 0;
}
.ring-thumb circle { fill: #fff; stroke: #000; stroke-width: 1.5; }
.has-marker .ring-thumb { opacity: 1; }

.cx-ranged-item {
  display: grid;
  place-items: center;
  font-size: 4.4cqw;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums; /* the song timer doesn't jitter */
}
.cx-ranged-item .cx-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* In dial units, not a percentage: a percentage of the grid cell grew with
     the unwrapped title, so long names spilled out of the ring */
  width: 17cqw;
  translate: 0 -6%;
}
.cx-ranged-item.two .cx-lines { font-size: 4.7cqw; line-height: 0.95; }
.cx-ranged-item .cx-icon {
  position: absolute;
  left: 50%;
  bottom: 1.2cqw;
  translate: -50% 0;
  font-size: 5cqw;
}

/* SHORT_TEXT — right */
.cx-short {
  left: 67.75cqw;
  top: 32.15cqw;
  width: 22.5cqw;
  height: 22.5cqw;
  border-radius: 50%;
  background: var(--face-dim);
  overflow: hidden;
}

.cx-short-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2cqw;
  font-size: 4.8cqw;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}
.cx-short-item .cx-icon { font-size: 4.3cqw; }
.cx-short-item .cx-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 17.5cqw;
  gap: 0.6cqw;
}
.cx-short-item.two { gap: 0.9cqw; }
.cx-short-item.two .cx-line { font-size: 5.6cqw; }
.cx-short-item.two .cx-line-2 { font-size: 3.9cqw; }

/* LONG_TEXT — bottom */
.cx-long {
  left: 13.2cqw;
  right: 9cqw;
  top: 62cqw;
  height: 20cqw;
}

.cx-long-item {
  display: flex;
  align-items: center;
  gap: 5.2cqw;
  font-size: 5.9cqw;
  font-weight: 700;
  line-height: 1.42;
}
.cx-long-item .cx-icon { font-size: 6.2cqw; }
.cx-long-item .cx-lines { display: flex; flex-direction: column; min-width: 0; }
.cx-long-item .cx-title,
.cx-long-item .cx-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-long-item .cx-title { color: var(--face-accent); }
.cx-long-item .cx-text { color: #fff; }
.cx-long-item.single { justify-content: center; gap: 3.5cqw; }
.cx-long-item.single .cx-text { color: var(--face-accent); }

/* ----------------------------------------------------------------------------
   Source picker + caption
---------------------------------------------------------------------------- */
.chips {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-1);
}

/* The chips and ▶/⏸ are .btn .btn-icon (../style.css). Here they're sized to
   fit the row on a phone, and the chips take their source's colours, easing
   a little slower as the demo moves from one to the next. */
.chip,
.demo-toggle {
  --btn-h: 36px;
  --btn-dur: var(--dur-base);
  position: relative;
  flex: none;
}

.chip {
  border: 0;
  background: var(--surface-2);
  color: var(--muted);
}
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--c-bg); color: var(--c-fg); }

/* Each source's name on hover or keyboard focus: not every icon explains
   itself (a hand for reminders) */
.chip::before {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-3));
  z-index: 3;
  padding: var(--space-1) var(--space-3);
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font: 600 var(--text-2xs)/1.3 var(--font);
  white-space: nowrap;
  translate: -50% 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease), translate var(--dur-fast) var(--ease);
}
.chip:focus-visible::before { opacity: 1; translate: -50% 0; }
@media (hover: hover) {
  .chip:hover::before { opacity: 1; translate: -50% 0; transition-delay: var(--dur-fast); }
}

/* ▶/⏸ runs the demo, so it goes first, set apart from the sources it runs
   through: a carousel's pause button comes before its slides, and keyboard
   and screen reader users reach it first too. */
.chips-sep {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--border-strong);
}

/* Before the first tap the demo waits, and ▶ in the middle of the watch
   (.watch-play, below) gives off a soft wave in the current source's colour.
   Browsers that can't play the song have no ▶ on the watch, so there this
   one gives off the wave instead. */
.no-song.demo-waiting .demo-toggle {
  --wave: light-dark(var(--src-bg), var(--src-fg));
  border-color: transparent;
  background: var(--wave);
  color: light-dark(#fff, var(--src-bg));
}
.demo-waiting .watch-play::before,
.demo-waiting .watch-play::after,
.no-song.demo-waiting .demo-toggle::before,
.no-song.demo-waiting .demo-toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--wave);
  opacity: 0;
  animation: demo-wave 2.6s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
  pointer-events: none;
}
.demo-waiting .watch-play::after,
.no-song.demo-waiting .demo-toggle::after { animation-delay: 1.3s; }
@keyframes demo-wave {
  0% { scale: 1; opacity: 0.6; }
  100% { scale: var(--wave-to, 1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-waiting .watch-play::before,
  .no-song.demo-waiting .demo-toggle::before { animation: none; opacity: 0.5; scale: 1.25; }
  .demo-waiting .watch-play::after,
  .no-song.demo-waiting .demo-toggle::after { animation: none; }
}

/* Progress ring round the active chip while the demo runs by itself */
.chip::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(var(--c-fg) calc(var(--p) * 1turn), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity: 0;
}
.chip.is-active.tick::after {
  opacity: 0.9;
  animation: chip-progress var(--hold, 3400ms) linear forwards;
}
.demo-paused .chip.is-active::after,
.demo-pinned .chip.is-active::after { opacity: 0; animation: none; }

@keyframes chip-progress {
  from { --p: 0; }
  to { --p: 1; }
}

/* The row has to fit a 360px phone: nine buttons and the divider */
@media (max-width: 359px) {
  .chip,
  .demo-toggle { --btn-h: 32px; }
}
@media (min-width: 400px) {
  .chip,
  .demo-toggle { --btn-h: 40px; }
  .chips { gap: 6px; }
}

.demo-caption {
  min-height: 2.8em;
  margin: 0 auto;
  max-width: 30ch;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.4;
  text-align: center;
}
.demo-caption strong { color: var(--text); font-weight: 600; }

/* ----------------------------------------------------------------------------
   Song (Apple Music preview): tap the watch to play or pause
---------------------------------------------------------------------------- */
.song-playing .chip.is-active::after { opacity: 0; animation: none; }

/* Tapping the watch plays or pauses, like tapping the complication on a real
   one. It only exists while "Now playing" is on the watch. */
.watch-tap {
  display: none;
  position: absolute;
  inset: 5.5%;
  z-index: 2;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root[data-source="music"] .watch-tap { display: block; }
.no-song .watch-tap,
.watch-tap:disabled { display: none !important; }
.watch-tap:focus-visible { outline: 2px solid var(--src-fg); outline-offset: 4px; }
.watch-tap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, oklch(from var(--src-fg) l c h / 0.22), transparent 62%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.watch-tap:active::after { opacity: 1; transition-duration: 0s; }

/* Before the first tap: ▶ in the middle of the dial, level with the side
   complications, like the play button on a video. The whole watch takes the
   tap; this just shows where. It shrinks away once the demo starts. */
.watch-play {
  --wave: var(--face-accent);
  --wave-to: 2.4;
  position: absolute;
  left: 50%;
  top: 43.4%;
  width: 22%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--wave);
  color: var(--src-bg);
  box-shadow: 0 0 0 5px rgb(0 0 0 / 0.6), 0 10px 32px -6px var(--wave);
  translate: -50% -50%;
  opacity: 0;
  scale: 0.5;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease), scale var(--dur-slow) var(--ease),
    visibility 0s linear var(--dur-slow);
  pointer-events: none;
}
.watch-play svg { width: 50%; height: 50%; fill: currentColor; }
.demo-waiting .watch-play::before,
.demo-waiting .watch-play::after { border-width: 2px; }
/* It pops in on a spring */
.demo-waiting .watch-play {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition: opacity var(--dur-base) var(--ease), scale var(--dur-spring) var(--ease-spring),
    visibility 0s;
}
@media (hover: hover) {
  .demo-waiting .watch-tap:hover .watch-play { scale: 1.08; }
}

.step .step-credit {
  grid-column: 2;
  margin-top: var(--space-2);
  color: var(--faint);
  font-size: var(--text-2xs);
}
.step-credit a { color: inherit; }
.step-credit a:hover { color: var(--muted); }

.no-song .step-credit { display: none; }

/* ----------------------------------------------------------------------------
   Story: hero + the sources, with the watch pinned while you scroll
---------------------------------------------------------------------------- */
.story {
  position: relative;
  overflow-x: clip; /* clip, not hidden: it keeps the pinned watch sticky */
}

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.story-intro { padding-block: var(--space-7) var(--space-2); }

.story h1 {
  font-size: var(--text-5xl);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

/* The first line takes the colour of the glance on the watch */
/* A fixed gradient, not the current source's colour: following the watch
   washed it out on some glances (blue on blue for weather, grey for the date) */
.story h1 .hl {
  background: linear-gradient(
    100deg,
    light-dark(#9c3d63, #ffb0c8),
    light-dark(#5b45a0, #d0bcff) 55%,
    light-dark(#2f6ca3, var(--brand-glow))
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.story-intro .lede { margin: var(--space-5) 0 0; line-height: 1.55; }

.story .btn-row { margin-top: var(--space-7); }

/* On phones the watch is the best pitch, so it gets onto the first screen:
   the lede's last line (the Default step says it) and "How it works" (the
   steps are the next thing a scroll shows) give way. */
@media (max-width: 420px) {
  .story .lede-more,
  .story-intro .btn-ghost { display: none; }
}

/* Sticky stage. On phones it pins under the header with the steps
   scrolling beneath it; on desktop it holds the right-hand column. */
.story-visual {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-3) var(--gutter) var(--space-6);
  /* Solid down past the buttons, so the list scrolling under them doesn't
     show through; only the padding below fades */
  background: linear-gradient(to bottom, var(--bg) calc(100% - var(--space-5)), transparent);
  container-type: scroll-state;
}

.story-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  transition: scale var(--dur-slow) var(--ease);
}

.story-visual .watch { --size: min(56vw, 320px, 33svh); }
.story-visual .demo-caption { display: none; }

/* Soft glow + dot grid behind the watch, in the current source's colour */
.story-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(150%, 720px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, light-dark(var(--src-bg), var(--src-fg)) 24%, transparent), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
.story-stage::after {
  content: "";
  position: absolute;
  inset: -10% -30%;
  background-image: radial-gradient(circle at 1px 1px, light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.09)) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent);
  mask-image: radial-gradient(closest-side, #000 30%, transparent);
  z-index: -2;
  pointer-events: none;
}

/* Pinned on a phone: tuck the stage in a little so more of the list shows */
@container scroll-state(stuck: top) {
  .story-stage { scale: 0.94; transform-origin: 50% 0; }
}

.story-steps { padding-top: var(--space-6); }

.steps {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0 0 24svh;
  display: grid;
  gap: 12svh;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: center;
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease), translate var(--dur-spring) var(--ease-spring);
}
@media (hover: hover) {
  .step:hover { border-color: var(--border-strong); }
}

.step .badge {
  grid-row: span 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-fg);
}
.step .badge svg { width: 24px; height: 24px; fill: currentColor; }

.step h3 { font-size: var(--text-lg); letter-spacing: -0.015em; padding-right: 2.5em; }
.step p { margin: var(--space-1) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }

.step .rank {
  position: absolute;
  top: var(--space-5);
  right: var(--card-pad);
  color: var(--faint);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.step.floor { border-style: dashed; background: transparent; }

/* The steps not on the watch step back: a plain card, a dimmed badge and
   quieter text. Colour rather than opacity, so their text still reads at
   4.5:1 for anyone skimming ahead. */
.step .badge,
.step h3,
.step p { transition: opacity var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease); }
.steps.has-active .step:not(.is-active) { background: transparent; }
.steps.has-active .step:not(.is-active) .badge { opacity: 0.45; }
.steps.has-active .step:not(.is-active) h3 { color: var(--muted); }
.steps.has-active .step:not(.is-active) p { color: var(--faint); }
.step.is-active {
  border-color: color-mix(in srgb, var(--c-fg) 40%, var(--border));
  box-shadow: 0 24px 60px -28px color-mix(in srgb, var(--c-bg) 90%, transparent);
}

@media (min-width: 900px) {
  .story-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-16);
  }

  .story-intro {
    grid-column: 1;
    grid-row: 1;
    min-height: calc(100svh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-10) var(--space-16);
  }

  .story-steps { grid-column: 1; grid-row: 2; padding-top: 0; }

  .story-visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    height: calc(100svh - var(--header-h));
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
    background: none;
  }

  .story-visual .watch { --size: min(34vw, 400px, 56svh); }
  .story-visual .demo-caption { display: block; }
  .story-stage { gap: var(--space-7); }

  @container scroll-state(stuck: top) {
    .story-stage { scale: 1; }
  }

  .steps { gap: 15svh; padding-bottom: 34svh; margin-top: var(--space-10); }
  .step { column-gap: var(--space-5); }
  .step h3 { font-size: var(--text-xl); }
  .step p { font-size: var(--text-base); }
  .step.is-active { translate: 8px 0; }
}

/* Sections and their headings are shared: see ../style.css */

/* ----------------------------------------------------------------------------
   Bento
---------------------------------------------------------------------------- */
.bento {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-10);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "tile   tile"
    "wear   wear"
    "widget widget"
    "batt   tick"
    "app    app"
    "priv   priv"
    "taps   auto"
    "free   quiet";
}

@media (min-width: 720px) {
  .bento {
    gap: var(--space-4);
    margin-top: var(--space-14);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      "tile   tile   wear   wear"
      "widget widget widget widget"
      "priv   priv   priv   priv"
      "app    app    batt   tick"
      "app    app    taps   auto"
      "app    app    free   quiet";
  }
}

@media (min-width: 1080px) {
  .bento {
    grid-template-areas:
      "tile wear widget widget"
      "batt tick taps   app"
      "priv priv priv   app"
      "auto free quiet  app";
  }
}

.cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.cell-body { padding: var(--card-pad); }
.cell h3 { font-size: var(--text-lg); letter-spacing: -0.015em; }
.cell p { margin: var(--space-2) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: 1.5; }

.cell-tile { grid-area: tile; }
.cell-wear { grid-area: wear; }
.cell-widget { grid-area: widget; }
.cell-app { grid-area: app; }
.cell-priv { grid-area: priv; }
.cell-batt { grid-area: batt; }
.cell-tick { grid-area: tick; }
.cell-taps { grid-area: taps; }
.cell-auto { grid-area: auto; }
.cell-free { grid-area: free; }
.cell-quiet { grid-area: quiet; }

.cell-stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 260px;
  overflow: hidden;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--src-bg) 55%, transparent), transparent) center / 90% 90% no-repeat,
    var(--bg-raised);
}


/* Small fact cells, a little tighter than the rest */
.cell-sm .cell-body { padding: var(--space-5); }
.cell-sm .f-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-4);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-b) 20%, transparent);
  color: var(--accent);
}
.cell-sm .f-icon svg { width: 20px; height: 20px; fill: currentColor; }
.cell-sm h3 { font-size: var(--text-base); }
.cell-sm p { font-size: var(--text-xs); }

@media (min-width: 720px) {
  .cell-sm .cell-body { padding: var(--space-6); }
  .cell-sm p { font-size: var(--text-sm); }
}

/* Phone app screenshot */
.cell-app .cell-shot {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--space-1) var(--space-5) 0;
  overflow: hidden;
  min-height: 360px;
}
.app-shot {
  width: min(72vw, 290px);
  max-height: 480px;
  overflow: hidden;
  padding: 8px 8px 0;
  border-radius: 40px 40px 0 0;
  background: #1a1b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 60px -30px rgb(0 0 0 / 0.6);
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent);
  mask-image: linear-gradient(to bottom, #000 76%, transparent);
}
.app-shot img { display: block; width: 100%; height: auto; }

/* The screenshot starts at the app bar, so the status bar is drawn: the
   live clock, the camera, wifi, signal and battery, on the app's own ground */
.app-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 2px 20px 0 24px;
  border-radius: 32px 32px 0 0;
  background: #0b0f10;
  color: #e1e3e3;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-punch {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: #000;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.app-icons { display: flex; align-items: center; gap: 3px; }
.app-icons svg { width: 13px; height: 13px; fill: currentColor; }
@media (prefers-color-scheme: light) {
  .app-status { background: #e9f0f0; color: #191c1d; }
}

@media (min-width: 1080px) {
  .app-shot { width: 100%; max-width: 270px; max-height: 620px; }
}

/* Privacy */
.cell-priv {
  background:
    radial-gradient(70% 140% at 0% 0%, color-mix(in srgb, var(--brand-a) 28%, transparent), transparent 60%),
    var(--surface);
}
.cell-priv .cell-body { display: grid; gap: var(--space-6); }
.cell-priv h3 { font-size: var(--text-2xl); letter-spacing: -0.025em; }
.cell-priv .more { margin: var(--space-3) 0 0; }
.cell-priv .more a { font-weight: 600; text-decoration: none; }
.cell-priv .more a:hover { text-decoration: underline; }

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.facts li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  font-size: var(--text-sm);
  line-height: 1.45;
  color: var(--muted);
}
.facts li strong { display: block; color: var(--text); font-weight: 600; }
.facts svg { width: 20px; height: 20px; margin-top: 1px; fill: var(--accent); }

/* A list beside the text, not three cards: side by side the cards were ~150px
   wide, wrapped to six lines and stretched to one height with gaps inside */
@media (min-width: 720px) {
  .cell-priv .cell-body { grid-template-columns: 0.9fr 1.6fr; align-items: center; gap: var(--space-7); padding: var(--space-8); }
}

/* ----------------------------------------------------------------------------
   Tile — after the watch's BriefTileRenderer: a Material 3 primaryLayout (a
   title, one main card per glance, then the edge button or the "Updated"
   line) on a 227 dp round screen. Sizes are the renderer's dp in cqw (1 dp
   is about 0.44cqw), so the whole tile scales as one. Colours follow the
   source the way the watch face's dynamic theme would: a live glance's card
   in the source's tone 30 (filled variant), the edge button in its tone 90,
   the date's card in the neutral surface (tonal).
---------------------------------------------------------------------------- */
.tile {
  --t-container: var(--src-bg);
  --t-on-container: var(--src-fg);
  --t-primary: var(--src-fg);
  --t-on-primary: color-mix(in oklab, var(--src-bg) 70%, #000);
  --t-surface: color-mix(in oklab, var(--src-fg) 10%, #1b1b1f);
  --t-on-surface: #e6e1e5;
  --t-on-surface-variant: #c9c5d0;
  position: relative;
  width: min(62vw, 240px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  overflow: hidden;
  container-type: inline-size;
  color: #fff;
  box-shadow: 0 0 0 8px #1a1b1f, 0 0 0 9px rgb(255 255 255 / 0.08), 0 24px 48px -16px rgb(0 0 0 / 0.6);
}

.tile-title {
  position: absolute;
  top: 13.4cqw;
  left: 20%;
  right: 20%;
  text-align: center;
  font-size: 6.2cqw;
  font-weight: 600;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The main slot. A card with a ring is fully rounded, so it takes the
   layout's tighter margins (3% a side); every other card keeps 7.1%. */
.tile-main {
  position: absolute;
  left: 7.1%;
  right: 7.1%;
  top: 23.5%;
  bottom: 23.5%;
  display: flex;
}
.tile-main.min { left: 3%; right: 3%; }

.tile-main svg { fill: currentColor; flex: none; }

.t-value,
.t-detail,
.t-tc-text,
.t-tc-display,
.t-app-name,
.t-cond {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.t-label,
.t-tc-title,
.t-app-title,
.t-app-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Data card with graph: the progress ring, its glyph in the middle, then the
   value over the label (event, reminder, low battery) */
.t-data {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3.5cqw;
  padding: 0 7cqw 0 5.3cqw;
  border-radius: 999px;
  background: var(--t-container);
  color: var(--t-on-container);
}
.t-graph { position: relative; flex: none; width: 28cqw; aspect-ratio: 1; }
.t-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.t-ring circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.t-track { stroke: color-mix(in oklab, var(--t-on-container) 22%, var(--t-container)); }
.t-ind { stroke: var(--t-on-container); }
.tile-main .t-glyph { position: absolute; inset: 0; margin: auto; width: 11cqw; height: 11cqw; }
.t-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t-value { font-size: 10.6cqw; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.t-label { font-size: 6.2cqw; font-weight: 500; line-height: 1.25; }
.t-detail { font-size: 5.3cqw; line-height: 1.3; opacity: 0.85; }

/* Title card: the track over its cover, or the date */
.t-tcard {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9cqw;
  padding: 4.4cqw 7cqw;
  border-radius: 13cqw;
  text-align: center;
  background: var(--t-container);
  color: var(--t-on-container);
}
.t-tcard.tonal { background: var(--t-surface); color: var(--t-on-surface); }
/* Over a cover the library dims the art to 60% black */
.t-tcard.cover {
  background: linear-gradient(rgb(0 0 0 / 0.6), rgb(0 0 0 / 0.6)), var(--cover) center / cover, #000;
  color: #fff;
}
.t-tc-title { font-size: 7.9cqw; font-weight: 600; line-height: 1.2; }
.t-tc-text { font-size: 6.2cqw; font-weight: 500; opacity: 0.8; }
.t-tc-display { font-size: 10.6cqw; font-weight: 500; line-height: 1.15; }
.t-tc-display + .t-tc-text { font-size: 7cqw; color: var(--t-on-surface-variant); opacity: 1; }

/* App card: the app's mark, name and time, then the message */
.t-app {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9cqw;
  padding: 4.4cqw 6.2cqw;
  border-radius: 11.6cqw;
  background: var(--t-container);
  color: var(--t-on-container);
}
.t-app-head { display: flex; align-items: center; gap: 1.8cqw; min-width: 0; font-size: 5.3cqw; font-weight: 500; }
.t-app-head svg { width: 7.9cqw; height: 7.9cqw; }
.t-app-name { flex: 1; }
.t-app-time { flex: none; opacity: 0.8; }
.t-app-title { font-size: 7cqw; font-weight: 600; line-height: 1.2; }
.t-app-text { font-size: 6.2cqw; line-height: 1.25; opacity: 0.9; }

/* Weather: the one hand-built layout. A hero card, and beside it the rain
   chip over today's high and low. */
.t-weather { flex: 1; min-width: 0; display: flex; gap: 1.8cqw; }
.t-hero {
  flex: 3;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5.3cqw;
  border-radius: 11.6cqw;
  background: var(--t-container);
  color: var(--t-on-container);
}
.t-hero svg { width: 14cqw; height: 14cqw; }
.t-temp { margin-top: 1.8cqw; font-size: 13.2cqw; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.t-cond { margin-top: 0.9cqw; font-size: 5.7cqw; font-weight: 500; }
.t-side { flex: 2; min-width: 0; display: flex; flex-direction: column; gap: 1.8cqw; }
.t-chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9cqw;
  padding: 3.5cqw;
  border-radius: 999px;
  font-size: 6.6cqw;
  font-weight: 500;
  line-height: 1.1;
}
.t-chip svg { width: 7cqw; height: 7cqw; }
.t-rain { background: var(--t-surface); color: var(--t-on-surface); }
.t-hilo { gap: 0.4cqw; background: var(--t-primary); color: var(--t-on-primary); }
.t-hilo span { display: flex; align-items: center; gap: 0.9cqw; }

/* Edge button: the glance's own action (play/pause, mark done), or Brief.
   Soft top corners and a deep, rounded bottom, measured from the device
   capture (48% wide, 20% tall, 78% down). */
.tile-edge {
  position: absolute;
  left: 26%;
  right: 26%;
  top: 78.4%;
  height: 20.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16% 16% 50% 50% / 34% 34% 66% 66%;
  background: var(--t-primary);
  color: var(--t-on-primary);
  font: inherit;
  font-size: 5.6cqw;
  font-weight: 600;
}
.tile-edge svg { width: 10.6cqw; height: 10.6cqw; fill: currentColor; }
button.tile-edge {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter var(--dur-fast) var(--ease), scale var(--dur-spring) var(--ease-spring);
}
button.tile-edge:hover { filter: brightness(1.08); }
button.tile-edge:active { scale: 0.94; transition-duration: 0.1s; }
button.tile-edge:focus-visible { outline: 2px solid var(--t-on-primary); outline-offset: -5px; }

.tile-foot {
  position: absolute;
  top: 80%;
  left: 20%;
  right: 20%;
  text-align: center;
  font-size: 5.7cqw;
  font-weight: 500;
  color: var(--t-on-surface-variant);
}

/* ----------------------------------------------------------------------------
   Wear OS widget — after BriefWearWidget (Glance Wear), at the code
   previews' squircle sizes: a 166 × 60 dp card and a 166 × 96 dp one, each
   inside 8 dp of container padding with 26 dp corners. Drawn at 1 dp = 1px
   and zoomed to fit. Brief's own dark scheme, which is what the widget
   always draws: each source on its tonal container, the date on the
   neutral one.
---------------------------------------------------------------------------- */
.cell-wear .cell-stage { padding: var(--space-6) var(--space-4); }
.ww-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.ww {
  --ground: #1b2122;
  --ink: #dee3e5;
  --ind: #dee3e5;
  --track: #252b2c;
  position: relative;
  flex: none;
  width: 182px;
  height: 76px;
  border-radius: 26px;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.25;
  text-align: start;
  box-shadow: 0 14px 28px -18px rgb(0 0 0 / 0.7);
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
.ww.tall { height: 112px; }
.ww[data-role="primary"] { --ground: #004f58; --ink: #9eeffd; --ind: #82d3e1; --track: #1b2122; }
.ww[data-role="secondary"] { --ground: #334b4f; --ink: #cde7ec; --ind: #b1cbd0; --track: #1b2122; }
.ww[data-role="tertiary"] { --ground: #3b4665; --ink: #dae2ff; --ind: #bac6ea; --track: #1b2122; }
.ww[data-role="error"] { --ground: #93000a; --ink: #ffdad6; --ind: #ffb4ab; --track: #1b2122; }
/* Music over its cover: Brief's ground under a scrim, 70% at the title to
   85% under the buttons, and neutral text */
.ww.cover {
  --ground: #0e1415;
  --ink: #dee3e5;
  --track: #4a5456;
  background: linear-gradient(rgb(14 20 21 / 0.7), rgb(14 20 21 / 0.85)), var(--cover) center / cover, #0e1415;
}
/* The document sits inside the container's 8 dp padding */
.ww > .swap-stack { position: absolute; inset: 8px; }

.ww svg { display: block; flex: none; }
.ww-h,
.ww-s,
.ww-d { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ww-h { font-size: 18px; font-weight: 700; }
.ww-s { font-size: 14px; font-weight: 450; line-height: 1.3; }
.ww-d { font-size: 12px; line-height: 1.3; }
.ww .two { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }

/* A row: the visual (or nothing), the lines, then a button (or nothing) */
.ww-row { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 16px; }
.ww-row.has-vis { padding-left: 12px; }
.ww-row.has-btn { padding-right: 8px; }
.ww-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 0; }
.ww-vis + .ww-lines { padding-left: 10px; }
.ww-row.has-btn .ww-lines { padding-right: 8px; }

/* Ring, gauge or disc: 44 dp, a 5 dp stroke, a 22 dp glyph */
.ww-vis { position: relative; flex: none; width: 44px; height: 44px; }
.ww-vis.disc { border-radius: 50%; background: var(--track); }
/* Visible overflow: weather's marker (and the gap round it) reaches past the
   44 dp canvas when it sits at the top of the arc */
.ww-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ww-arc .tr,
.ww-arc .in { fill: none; stroke-width: 5; stroke-linecap: round; }
.ww-arc .tr { stroke: var(--track); }
.ww-arc .in { stroke: var(--ind); }
.ww-arc.spin { rotate: -90deg; }
.ww-arc .gap { fill: var(--ground); }
.ww-arc .mk { fill: var(--ind); }
.ww-glyph { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; fill: var(--ink); }

/* Tall card with progress: the row over a bar on the card's bottom edge */
.ww-barbody { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 0; }
.ww-top { flex: 1; min-height: 0; display: flex; align-items: center; padding: 0 16px 6px 12px; }
.ww-bar { --v: 0; position: relative; flex: none; height: 8px; margin: 0 14px; border-radius: 4px; background: var(--track); }
.ww-bar i { position: absolute; inset: 0 auto 0 0; width: calc(8px + var(--v) * (100% - 8px)); border-radius: inherit; background: var(--ind); }
.ww-bar::after { content: ""; position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--ind); }
/* Weather's bar: today's low and high either side of the temperature */
.ww-mbar { flex: none; display: flex; align-items: center; height: 12px; margin: 0 12px; font-size: 12px; line-height: 1; }
.ww-mbar .trk { --v: 0; position: relative; flex: 1; height: 12px; }
.ww-mbar .trk::before { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 3.5px; height: 5px; border-radius: 3px; background: var(--track); }
.ww-mbar .trk i {
  position: absolute;
  top: 50%;
  left: calc(6px + var(--v) * (100% - 12px));
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ind);
  box-shadow: 0 0 0 1.5px var(--ground);
}

/* Buttons: a 48 dp target with the filled circle drawn inside it */
.ww-btn {
  appearance: none;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ww-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ww-fill {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #82d3e1;
  color: #00363d;
  transition: scale var(--dur-spring) var(--ease-spring);
}
.ww-btn:active .ww-fill { scale: 0.9; transition-duration: 0.1s; }
.ww-fill svg { width: 24px; height: 24px; fill: currentColor; }
.ww-btn.play .ww-fill { width: 36px; height: 36px; }
.ww-btn .ww-arc { rotate: -90deg; }
.ww-btn .ww-arc .tr,
.ww-btn .ww-arc .in { stroke-width: 3; }
.ww-btn.skip svg { width: 24px; height: 24px; fill: var(--ink); }
.ww-btn.skip:active svg { scale: 0.9; }

/* Music on a tall card: a player, centred */
.ww-player { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ww-player .ww-lines { flex: none; width: 100%; padding: 0 12px; text-align: center; }
.ww-transport { display: flex; }

/* The date: the bare lines, centred down the card */
.ww-plain { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; }
.ww.tall .ww-plain .ww-h { font-size: 24px; line-height: 1.2; }
.ww.tall .ww-plain .ww-s { font-size: 16px; font-weight: 500; }

/* ----------------------------------------------------------------------------
   Phone widget — BriefGlanceWidget, after the widget prototype: dp drawn at
   1:1 px and scaled down to fit. Colour roles arrive as custom properties on
   .bw (Brief's own light and dark schemes, the app's default, following
   the page), and the card is the scheme's surface at 70% over a wallpaper.
---------------------------------------------------------------------------- */
.cell-widget .cell-stage {
  grid-template-columns: minmax(0, 1fr);
  min-height: 300px;
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(120% 70% at 88% 6%, rgb(255 142 110 / 0.95), rgb(255 142 110 / 0) 46%),
    radial-gradient(90% 60% at 6% 96%, rgb(92 70 214 / 0.9), rgb(92 70 214 / 0) 62%),
    linear-gradient(168deg, #17183a 0%, #372a67 48%, #8c3f6f 100%);
}
@media (prefers-color-scheme: light) {
  .cell-widget .cell-stage {
    background:
      radial-gradient(100% 60% at 85% 10%, #fff, rgb(255 255 255 / 0) 55%),
      radial-gradient(100% 70% at 8% 92%, rgb(170 160 235 / 0.85), rgb(170 160 235 / 0) 60%),
      linear-gradient(170deg, #e9f0fb 0%, #cfdcf4 52%, #b5c2ea 100%);
  }
}
.pw-wall { display: grid; place-items: center; width: 100%; }

.bw {
  position: relative;
  flex: none;
  overflow: hidden;
  border-radius: 24px;
  background: var(--card);
  color: var(--on-surface);
  font-family: var(--font);
  line-height: 1.33;
  text-align: start;
  transition: background-color var(--dur-slow) var(--ease);
}
.bw > .swap-stack { position: absolute; inset: 0; }
.bw svg { display: block; flex: none; fill: currentColor; }

.bw-t { display: block; max-width: 100%; min-width: 0; margin: 0; line-height: 1.33; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-t.l2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: break-word; }
.bw-row { display: flex; flex-direction: row; align-items: center; min-width: 0; }
.bw-row.bottom { align-items: flex-end; }
.bw-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.bw-col.end { align-items: flex-end; text-align: end; }
.bw-w1 { flex: 1 1 0; min-width: 0; }
.bw-nf { flex: 0 0 auto; }
.bw-gap { flex: none; }
.bw-chip { flex: none; display: grid; place-items: center; border-radius: 50%; }

/* Templates: CompactCard (2×1), RowCard (3×1, 4×1), StackCard (two rows) */
.bw-compact,
.bw-rowc,
.bw-stack { width: 100%; height: 100%; }
.bw-compact { display: flex; align-items: center; padding: 0 12px; }
.bw-rowc { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 11px; }
.bw-rowc > .bw-row { width: 100%; }
.bw-stack { display: flex; flex-direction: column; padding: 10px 16px; }
.bw-hdr { display: flex; align-items: center; flex: none; width: 100%; min-width: 0; height: 48px; }
.bw-hdr .bw-aux { flex: 0 1 auto; min-width: 0; }
.bw-herobox { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: flex-end; overflow: hidden; }
.bw-heroslot { width: 100%; }
.bw-num { flex: none; overflow: visible; text-overflow: clip; font-weight: 400; }
.bw-sct { flex: none; }
.bw-sct .bw-t { overflow: visible; }
.bw-share { flex: 0 1 auto; }

/* Pieces */
.bw-pill { display: inline-block; flex: none; white-space: nowrap; line-height: 1.33; font-weight: 500; }
/* The countdown is a Chronometer the launcher ticks: a fixed width, the
   brand accent pair */
.bw-cd {
  display: block;
  flex: none;
  text-align: center;
  white-space: nowrap;
  line-height: 1.33;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  border-radius: 20px;
  background: var(--accent-c);
  color: var(--on-accent-c);
}
.bw-badge {
  flex: none;
  padding: 4px 8px;
  border-radius: 11px;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.33;
  white-space: nowrap;
  text-align: center;
}
/* Every action is a 40 dp disc inside a 48 dp touch target */
.bw-tt {
  appearance: none;
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bw-tt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--on-surface);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.bw-tt:hover::after { opacity: 0.08; }
.bw-tt:active::after { opacity: 0.16; }
.bw-tt:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.bw-disc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; }

/* The size picker under the phone widget */
/* Laid out like the sizes themselves: the one-row sizes, then the two-row ones */
.pw-sizes { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--space-2); margin-top: var(--space-4); }
.pw-size { --btn-px: var(--space-3); gap: 6px; font-variant-numeric: tabular-nums; }
.pw-size svg { width: 22px; height: 12px; }
.pw-size[aria-pressed="true"] { background: var(--surface-2); border-color: var(--accent); }

/* ----------------------------------------------------------------------------
   FAQ — answers open smoothly where ::details-content is supported
---------------------------------------------------------------------------- */
.faq { margin-top: var(--space-8); border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 2px;
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate var(--dur-base) var(--ease), translate var(--dur-base) var(--ease);
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }
/* Padding, not margin: a margin collapses out of the animated
   ::details-content box and pops in after the height transition ends */
.faq details p { margin: 0; padding-bottom: var(--space-5); color: var(--muted); max-width: 42em; }

.faq details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--dur-base) var(--ease), content-visibility var(--dur-base) allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

/* The answer fades in as it slides open, a beat behind the height */
@media (prefers-reduced-motion: no-preference) {
  .faq details p {
    opacity: 0;
    translate: 0 -6px;
    transition: opacity var(--dur-base) var(--ease), translate var(--dur-slow) var(--ease);
  }
  .faq details[open] p {
    opacity: 1;
    translate: 0;
    transition-delay: 0.08s;
  }
}

@media (min-width: 960px) {
  .faq-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-18); }
  .faq { margin-top: 0; }
}

/* ----------------------------------------------------------------------------
   Closing call to action
---------------------------------------------------------------------------- */
.cta { text-align: center; overflow: clip; }
.cta .wrap { position: relative; }
.cta .wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(120vw, 700px);
  aspect-ratio: 2;
  translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-b) 30%, transparent), transparent);
  z-index: -1;
}
.cta img {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--space-6);
  border-radius: 20px;
  box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--brand-b) 70%, transparent);
}
.cta h2 { font-size: var(--text-4xl); letter-spacing: -0.035em; }
.cta p { margin: var(--space-4) auto 0; color: var(--muted); max-width: 30em; }
.cta .btn-row { justify-content: center; margin-top: var(--space-7); }

/* ----------------------------------------------------------------------------
   Shared elements that morph between pages
---------------------------------------------------------------------------- */
.story-visual .watch,
.app-visual .watch { view-transition-name: brief-watch; }
.site-head .logo-mark.brief,
.app-title img.brief { view-transition-name: brief-mark; }