/* Landing sections. Uses tokens.css and components.css only. Layout follows the Peers landing. */

.page { display: grid; gap: var(--section-gap); padding-bottom: 10rem; }
@media (max-width: 767px) { .page { gap: 5rem; padding-bottom: 7rem; } }

.section { display: grid; gap: var(--s-4); }

/* Section titles sit half a corner radius in from the blocks below them */
.section-head, .hero__text { padding-left: calc(var(--r-card-lg) / 2); }
.section-head { gap: 1.25rem; }
.t-subhead { line-height: 1.55; }
.t-body { line-height: 1.65; }

/* ---------- 01 Hero ---------- */
.hero { display: grid; gap: var(--s-5); padding-top: var(--s-4); }
.hero__text { display: grid; gap: var(--s-4); justify-items: start; }
.hero__text > .t-small { margin-top: calc(var(--s-2) - var(--s-4)); }
.hero__lead { max-width: 62ch; }
@media (max-width: 1100px) { .hero { padding-top: var(--s-2); } }

/* Stage: the big product window on an accent-tinted backdrop */
.stage {
  margin: 0; position: relative; border-radius: var(--r-card-lg); overflow: hidden;
  padding: clamp(1rem, 4vw, 3.5rem);
  background:
    radial-gradient(110% 90% at 88% 0%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 62%),
    radial-gradient(80% 80% at 0% 100%, color-mix(in srgb, var(--glow) 10%, transparent), transparent 60%),
    var(--surface);
}
/* ---------- The island: the example the page is shown on ----------
   A dot in the corner of the screen. It opens like a phone's dynamic island into the switcher: the example channel,
   the palette (the app pictures and the page accent) and the heading font of the app pictures. js/topic.js sizes it
   for each state (--iw, --ih): dot, peek (the dot with a hint, once after the page opens) and open.
   Built from topics/topics.json by tools/topics.py build. */
.island {
  /* The island takes the page theme: white on the light page, graphite on the dark one */
  --is-bg: var(--surface); --is-text: var(--text); --is-muted: var(--muted); --is-line: rgb(3 7 18 / 0.08);
  --is-chip: rgb(3 7 18 / 0.05); --is-chip-hover: rgb(3 7 18 / 0.1); --is-edge: rgb(3 7 18 / 0.06);
  --is-dot: 3.5rem; --is-spring: cubic-bezier(.3, 1.06, .45, 1);   /* a light settle, not a bounce */
  --is-row: 2.25rem; --is-pad: 1.5rem;   /* the pill rows inside and the padding around them */
  position: fixed; z-index: calc(var(--z-fab) + 2); right: max(1.5rem, env(safe-area-inset-right, 0px)); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  width: var(--iw, var(--is-dot)); height: var(--ih, var(--is-dot)); border-radius: calc(var(--is-dot) / 2); overflow: hidden;
  background: var(--is-bg); color: var(--is-text);
  box-shadow: 0 14px 36px rgb(3 7 18 / 0.16), 0 2px 6px rgb(3 7 18 / 0.08), inset 0 0 0 1px var(--is-edge);
  font: 400 var(--fs-small)/1.25 var(--font);
  transition: width .45s var(--is-spring), height .45s var(--is-spring), border-radius .45s var(--is-spring), transform .3s var(--ease), opacity .3s var(--ease);
}
/* Open, the island is as round as its pills plus its padding (18 + 24 = 42), so the pill in its corner sits concentric */
.island[data-state="open"] { border-radius: calc(var(--is-row) / 2 + var(--is-pad)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .island { --is-bg: #1C1C1E; --is-line: rgb(255 255 255 / 0.1); --is-chip: rgb(255 255 255 / 0.08); --is-chip-hover: rgb(255 255 255 / 0.16); --is-edge: rgb(255 255 255 / 0.1);
    box-shadow: 0 14px 36px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3), inset 0 0 0 1px var(--is-edge); }
}
:root[data-theme="dark"] .island { --is-bg: #1C1C1E; --is-line: rgb(255 255 255 / 0.1); --is-chip: rgb(255 255 255 / 0.08); --is-chip-hover: rgb(255 255 255 / 0.16); --is-edge: rgb(255 255 255 / 0.1);
  box-shadow: 0 14px 36px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.3), inset 0 0 0 1px var(--is-edge); }
/* The pointer stays when the dot opens under it: the whole island is one thing to touch; only its text takes the arrow */
.island { cursor: pointer; }
.island__title, .island__why, .island__label { cursor: default; }
.island:not([data-state="open"]):hover { transform: scale(1.04); }
.island button { appearance: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.island button:focus-visible { outline: 2px solid var(--is-text); outline-offset: 2px; }
@media print { .island { display: none; } }

/* The dot: the current palette inside a ring of all palettes, turning slowly so the eye finds it */
.island__toggle { position: absolute; right: 0; bottom: 0; display: flex; flex-direction: row-reverse; align-items: center; gap: 0.625rem;
  height: var(--is-dot); padding: 0 0.5rem; background: transparent; white-space: nowrap; transition: opacity .2s var(--ease); }
.island__dot { position: relative; width: 2.5rem; height: 2.5rem; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 0deg, #005CFF, #9BE7C4, #C4A878, #0F9D6B, #CC1F30, #005CFF); animation: island-turn 9s linear infinite; }
.island__dot i { width: 1.875rem; height: 1.875rem; border-radius: 50%; animation: island-turn 9s linear infinite reverse;
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-accent) 50%); box-shadow: 0 0 0 3px var(--is-bg); }
/* A soft wave goes out of the dot now and then: something to touch here */
.island__dot::after { content: ""; position: absolute; inset: -0.5rem; border-radius: 50%; border: 2px solid #9BE7C4; opacity: 0;
  animation: island-wave 4.5s var(--ease) 2.5s infinite; }
.island__hint { padding-left: 0.875rem; font-weight: var(--fw-ui); opacity: 0; transition: opacity .2s var(--ease); }
.island[data-state="peek"] .island__hint { opacity: 1; transition-delay: .15s; }
.island[data-state="open"] .island__toggle { opacity: 0; pointer-events: none; }
.island[data-state="open"] .island__dot::after, .island[data-state="peek"] .island__dot::after { animation: none; }
/* The little app picture of the phone island: the chosen palette (--mk-*) and heading font, live.
   Its button is a 36 px pill 12 in from the sides and bottom, so the card is 18 + 12 = 30 round */
.island__preview { display: none; }
.ipre { width: min(100%, 18rem); padding: 1rem 0.75rem 0.75rem; border-radius: 1.875rem; background: var(--mk-bg); color: var(--mk-text);
  display: grid; gap: 0.75rem; box-shadow: inset 0 0 0 1px var(--mk-line, var(--is-line)); }
.ipre__title { margin: 0 0.25rem; font-family: var(--mk-title, var(--font)); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.ipre__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ipre__tile { display: grid; gap: 0.25rem; align-content: start; padding: 0.625rem; border-radius: 0.875rem; background: var(--mk-card); min-width: 0; }
.ipre__tile i { width: 1.5rem; height: 1.5rem; border-radius: 50%; margin-bottom: 0.25rem;
  background: radial-gradient(circle, var(--mk-accent) 0 0.3125rem, color-mix(in srgb, var(--mk-accent) 16%, transparent) 0.34rem); }
.ipre__tile b { font-family: var(--mk-title, var(--font)); font-size: 0.8125rem; font-weight: 600; line-height: 1.2; }
.ipre__tile small { color: var(--mk-muted); font-size: 0.6875rem; line-height: 1.3; }
.ipre__btn { display: grid; place-items: center; height: 2.25rem; border-radius: var(--r-pill); background: var(--mk-accent); color: var(--mk-on-accent);
  font-size: 0.8125rem; font-weight: var(--fw-ui); }
/* «Готово» closes the island on a phone, where it covers the screen */
.island .island__done { display: none; width: 100%; height: 3.25rem; margin-top: 0.5rem; border-radius: var(--r-pill); background: var(--is-text); color: var(--is-bg);
  font-size: 1rem; font-weight: var(--fw-ui); }
@media (prefers-reduced-motion: reduce) { .island [class] { animation: none !important; } }
/* A palette with a dark variant shows it on the dark page */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.topicbar__swatch, .island__dot i) { background: linear-gradient(135deg, var(--sw-bg-d, var(--sw-bg)) 50%, var(--sw-accent-d, var(--sw-accent)) 50%); }
}
:root[data-theme="dark"] :is(.topicbar__swatch, .island__dot i) { background: linear-gradient(135deg, var(--sw-bg-d, var(--sw-bg)) 50%, var(--sw-accent-d, var(--sw-accent)) 50%); }
@keyframes island-turn { to { transform: rotate(360deg); } }
@keyframes island-fade { from { opacity: 0; } }
@keyframes island-rise { from { opacity: 0; transform: translateY(0.75rem); } }
@keyframes island-wave { 0% { transform: scale(.85); opacity: 0; } 12% { opacity: .7; } 45%, 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .island__dot, .island__dot i, .island__dot::after { animation: none; } }

/* The open island: why it is there, the topic, then the look in one quiet line */
.island__panel { position: absolute; right: 0; bottom: 0; width: min(20rem, calc(100vw - 2rem)); padding: var(--is-pad);
  display: grid; gap: 1.25rem; opacity: 0; visibility: hidden; transform: scale(.96); transform-origin: 100% 100%;
  transition: opacity .15s var(--ease), transform .3s var(--ease), visibility 0s .15s; }
.island[data-state="open"] .island__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s var(--ease) .12s, transform .35s var(--ease) .08s, visibility 0s; }
.island__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: -0.75rem; }
/* The cross is a circle on the corner's own centre: 42 from both edges, so 42 − 16 = 26 from them */
.island__head .island__close { margin: calc(var(--is-row) / 2 - 1rem) calc(var(--is-row) / 2 - 1rem) 0 0; }
.island__title { margin: 0; padding-top: 0.25rem; font-weight: var(--fw-ui); font-size: 1.0625rem; line-height: 1.3; }
.island__why { margin: 0; color: var(--is-muted); font-size: 0.875rem; line-height: 1.5; }
.island__why span { color: var(--is-text); }
.island__close { width: 2rem; height: 2rem; flex: none; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--is-muted);
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.island__close:hover { background: var(--is-chip); color: var(--is-text); }
.island__close svg { width: 0.875rem; height: 0.875rem; }
.topicbar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
/* Four even rows under a line (example, colours, page theme, font), a label on the left and a control of one width and height on the right */
.island__look { --row-h: var(--is-row); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.625rem 1.25rem;
  padding-top: 1.125rem; border-top: 1px solid var(--is-line); }
.island__label { color: var(--is-muted); font-size: 0.8125rem; white-space: nowrap; }
/* The dots stand in equal cells, so five of them share the row evenly */
.topicbar__swatches { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-items: center; height: var(--row-h); gap: 0; }
.topicbar__swatch { width: 1.5rem; height: 1.5rem; border-radius: 50%; padding: 0;
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-accent) 50%);
  box-shadow: inset 0 0 0 1px var(--is-line); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.topicbar__swatch:hover { transform: scale(1.1); }
.topicbar__swatch[aria-checked="true"] { box-shadow: inset 0 0 0 1px var(--is-line), 0 0 0 2px var(--is-bg), 0 0 0 3.5px var(--is-text); }
/* The example, light or dark page and the heading font: the same pill, the same height */
.topicbar__topics, .topicbar__modes, .topicbar__stepper { display: grid; height: var(--row-h); padding: 0.1875rem; border-radius: var(--r-pill); background: var(--is-chip); gap: 0; }
.topicbar__modes { grid-template-columns: 1fr 1fr; }
.topicbar__topics { grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
/* The halves fill the track's height: 36 − 2 × 3 = 30, round 15 in the track's 18 */
.topicbar__topics, .topicbar__modes { align-items: stretch; }
.topicbar__topic, .topicbar__mode { display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: 0.375rem; border-radius: var(--r-pill); background: transparent;
  color: var(--is-muted); font-size: 0.8125rem; font-weight: var(--fw-ui); transition: background-color .2s var(--ease), color .2s var(--ease); }
.topicbar__mode svg { width: 0.9375rem; height: 0.9375rem; flex: none; }
.topicbar__topic:hover, .topicbar__mode:hover { color: var(--is-text); }
/* The chosen half is a plain solid fill in the text colour: no shadow, no edge, the same in both themes */
.topicbar__topic[aria-checked="true"], .topicbar__mode[aria-checked="true"] { background: var(--is-text); color: var(--is-bg); }
.topicbar__stepper { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.topicbar__step { width: 1.875rem; height: 100%; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--is-muted);
  transition: background-color .2s var(--ease), color .2s var(--ease); }
.topicbar__step:hover { background: var(--is-chip-hover); color: var(--is-text); }
.topicbar__step svg { width: 0.875rem; height: 0.875rem; }
.topicbar__fontname { text-align: center; font-size: 0.8125rem; font-weight: var(--fw-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topicbar__aa { font-size: 0.9375rem; font-weight: 600; margin-right: 0.125rem; }

/* Desktop: the dot is as tall as the floating bar (56) and sits on the same line, level with the menu.
   Open, the island lies over the end of the menu for a moment; the hint does not show while the bottom menu is out. */
/* Tablets: no floating bar, the island as on desktop */
@media (max-width: 767px) {
  /* Phone: the dot lives in the «Попробовать» pill; the island opens over the whole screen, plainly, without the spring */
  .island__dot { width: 2.25rem; height: 2.25rem; }
  .island__dot i { width: 1.625rem; height: 1.625rem; }
  .island { display: none; }
  .island[data-state="open"] { display: block; inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none; transform: none;
    transition: none; overflow-y: auto; overscroll-behavior: contain; animation: island-fade .2s var(--ease); }
  /* One strict column, centred, no wider than 20rem: every block starts and ends on the same two lines */
  .island[data-state="open"] .island__panel { position: static; width: min(20rem, 100% - 2.5rem); margin: 0 auto; transform: none; transition: none;
    padding: calc(1.25rem + env(safe-area-inset-top, 0px)) 0 calc(2rem + env(safe-area-inset-bottom, 0px)); gap: 1.5rem; }
  .island[data-state="open"] .island__title { font-size: 1.375rem; }
  .island[data-state="open"] .island__why { font-size: 0.9375rem; }
  .island[data-state="open"] .island__look { --row-h: 2.75rem; gap: 0.875rem 1.25rem; }
  :root.is-island-open { overflow: hidden; }
  /* The page shows faintly through; the content sits at the bottom, by the thumb and the dot it came from,
     and comes in row by row */
  .island[data-state="open"] { background: color-mix(in srgb, var(--is-bg) 86%, transparent);
    backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); }
  .island[data-state="open"] .island__panel { min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
  .island[data-state="open"] :is(.island__head, .island__why, .island__look > *, .island__done) { animation: island-rise .4s var(--ease) both; }
  .island[data-state="open"] .island__why { animation-delay: .04s; }
  .island[data-state="open"] .island__look > :nth-child(-n+2) { animation-delay: .08s; }
  .island[data-state="open"] .island__look > :nth-child(n+3):nth-child(-n+4) { animation-delay: .12s; }
  .island[data-state="open"] .island__look > :nth-child(n+5):nth-child(-n+6) { animation-delay: .16s; }
  .island[data-state="open"] .island__look > :nth-child(n+7) { animation-delay: .2s; }
  .island[data-state="open"] .island__done { animation-delay: .26s; display: block; }
  .island[data-state="open"] .island__preview { display: block; animation: island-rise .4s var(--ease) .06s both; }
  /* The controls fill their column (as on desktop), the picture and «Готово» the whole column */
  .island[data-state="open"] .ipre { width: 100%; }
}

/* Phone: the map of how a post travels is too wide to read on a small screen, so section 04 is left out there */
@media (max-width: 767px) { #flow { display: none; } }

/* While a topic loads, the pictures that change dim for a moment */
.is-topic-swap [data-tx-scope] { opacity: .4; transition: opacity .18s var(--ease); }
[data-tx-scope] { transition: opacity .3s var(--ease); }
@media (prefers-reduced-motion: reduce) { .is-topic-swap [data-tx-scope] { opacity: 1; } }

.stage__note { margin-top: 0.875rem; text-align: center; font-size: 0.8125rem; color: var(--muted); }

/* The window is a picture of the product: Telegram in the page theme (--tg-* in tokens.css) */
.win {
  --w-bg: var(--tg-bg); --w-chat: var(--tg-chat); --w-line: var(--tg-line); --w-text: var(--tg-text); --w-muted: var(--tg-muted); --w-link: var(--tg-link);
  max-width: 68rem; margin: 0 auto; border-radius: 1.25rem; overflow: hidden; background: var(--w-bg);
  box-shadow: 0 30px 80px rgba(3, 7, 18, 0.18), 0 2px 8px rgba(3, 7, 18, 0.06);
  color: var(--w-text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Arial, sans-serif;
  display: grid; grid-template-rows: 2.5rem minmax(0, 1fr);
}
.win__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0 0.875rem; border-bottom: 1px solid var(--w-line); background: var(--tg-bar); }
.win__bar i { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.win__bar i:nth-child(1) { background: #FF5F57; } .win__bar i:nth-child(2) { background: #FEBC2E; } .win__bar i:nth-child(3) { background: #28C840; }
.win__body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); height: 36rem; min-height: 0; }

/* Left: the Telegram channel */
.chan { background: var(--w-chat); display: grid; grid-template-rows: auto minmax(0, 1fr); border-right: 1px solid var(--w-line); min-width: 0; min-height: 0; }
.chan__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.5rem; background: var(--w-bg); border-bottom: 1px solid var(--w-line); }
.ava { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 0.8125rem; font-weight: 600; flex: none; }
.ava--chan { background: var(--demo-accent); color: #fff; font-size: 0.875rem; }
.chan__name { font-weight: 600; font-size: 0.9375rem; }
.chan__meta { font-size: 0.8125rem; color: var(--w-muted); }
.chan__open { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: var(--w-link); }

/* The feed: a track inside a fixed window. hero.js moves the track (transform, not scroll) so the current post
   glides to the middle; the edges fade out, so posts come in and leave softly. The wheel over it scrolls the page. */
.feed { position: relative; overflow: hidden; min-height: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(transparent, #000 3rem, #000 calc(100% - 3rem), transparent); }
.feed__track { position: relative; display: flex; flex-direction: column; gap: 1.125rem; padding: 2.5rem 1.75rem; will-change: transform;
  transition: transform 1.1s cubic-bezier(.65, 0, .35, 1); }
.tl-day { align-self: center; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--tg-day-text); background: var(--tg-day);
  padding: 0.25rem 0.75rem; border-radius: 999px; margin-top: 0.5rem; }
.tl-event { display: grid; gap: 0.5rem; cursor: pointer; opacity: .32; transform: scale(.985); transform-origin: left center;
  transition: opacity .9s var(--ease), transform .9s var(--ease); }
.tl-event.is-active { opacity: 1; transform: none; }

/* A channel post, as Telegram draws it in a channel: no author line, just the text, tags and the time */
.post { align-self: flex-start; width: min(100%, 23.5rem); background: var(--tg-bubble); border-radius: 1.125rem 1.125rem 1.125rem 0.375rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05); font-size: 0.875rem; line-height: 1.5; color: var(--tg-bubble-text);
  transition: box-shadow .9s var(--ease); }
.tl-event.is-active .post { box-shadow: 0 18px 40px var(--tg-shadow), 0 1px 2px rgba(15, 23, 42, .05); }
.post__body { padding: 0.75rem 1rem 0.5rem; display: grid; gap: 0.375rem; }
.post__text b { font-weight: 600; color: var(--tg-strong); }
.post__tags { color: var(--w-link); }
.post__foot { display: flex; justify-content: flex-end; gap: 0.5rem; font-size: 0.6875rem; color: var(--tg-meta); }
.post__foot em { font-style: normal; }
.post__btn { display: block; width: min(100%, 23.5rem); text-align: center; font-size: 0.8125rem; font-weight: 600; color: var(--w-link);
  background: var(--tg-btn); border-radius: 0.875rem; padding: 0.625rem; }

/* Attachments inside a post */
.att-audio { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.875rem 1rem 0; }
.att-audio__play { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--w-link); display: grid; place-items: center; }
.att-audio__play::after { content: ""; margin-left: 3px; border-left: 0.6875rem solid #fff; border-top: 0.4375rem solid transparent; border-bottom: 0.4375rem solid transparent; }
.att-audio__wave { display: flex; align-items: center; gap: 2px; height: 1.25rem; }
.att-audio__wave i { width: 2px; border-radius: 999px; background: var(--tg-wave); }
.att-audio small { display: block; font-size: 0.6875rem; color: var(--w-muted); margin-top: 0.125rem; }
/* Video preview: a lesson slide on the left, the speaker on the right */
.att-video { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; background: linear-gradient(90deg, var(--tg-media) 0 64%, var(--tg-media-2) 64%); overflow: hidden; }
.att-video::before { content: ""; position: absolute; right: 6%; bottom: -12%; width: 24%; aspect-ratio: 1 / 1.25;
  background: radial-gradient(circle at 50% 28%, var(--tg-figure) 0 21%, transparent 22%), radial-gradient(ellipse 60% 42% at 50% 100%, var(--tg-figure-2) 0 98%, transparent 100%); }
.att-video__slide { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 44%; display: grid; gap: 0.125rem; color: var(--tg-slide); font-weight: 700; font-size: 0.9375rem; line-height: 1.15; }
.att-video__slide small { font-size: 0.625rem; font-weight: 500; color: var(--tg-slide-2); }
.att-video__play { position: relative; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(15, 23, 42, .35); display: grid; place-items: center; }
.att-video__play::after { content: ""; margin-left: 4px; border-left: 0.875rem solid #fff; border-top: 0.5625rem solid transparent; border-bottom: 0.5625rem solid transparent; }
.att-video__len { position: absolute; left: 0.625rem; top: 0.625rem; font-size: 0.6875rem; color: #fff; background: rgba(15, 23, 42, .35); padding: 0.0625rem 0.375rem; border-radius: 0.375rem; }
.att-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.att-photos span { aspect-ratio: 1; background: var(--tg-media); display: grid; place-items: center; }
.att-photos svg { width: 70%; height: 60%; }

/* Right: a piece of the mini app in the page theme: its light palette (gray page, white plates, Incetro blue)
   or its dark one (black page, #171717 plates). Colours come from --mk-* in tokens.css. */
.pieces {
  --demo-accent: var(--mk-accent); --on-demo-accent: var(--mk-on-accent); --app-bg: var(--mk-bg); --app-card: var(--mk-card); --app-soft: var(--mk-soft); --app-text: var(--mk-text); --app-muted: var(--mk-muted);
  --app-title: var(--mk-title, var(--font)); --app-font: var(--font);
  position: relative; background: var(--app-bg); color: var(--app-text); font-family: var(--app-font);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.5rem; padding: 1.25rem 1.75rem 1.5rem; min-width: 0; min-height: 0;
  --na-size: 2.25rem; --na-bg: var(--mk-card); --na-ink: var(--mk-ink); --na-line: var(--mk-line); --na-line-hover: var(--mk-line-hover);
}
.win { --demo-accent: var(--mk-accent); --demo-tag: var(--tg-link); }

.pieces__bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.25rem; }
.pieces__bar { appearance: none; border: 0; background: none; padding: 0.375rem 0; cursor: pointer; }
.pieces__bar i { display: block; height: 3px; border-radius: 2px; background: var(--mk-line); overflow: hidden; position: relative; }
.pieces__bar i::after { content: ""; position: absolute; inset: 0; background: var(--mk-ink); border-radius: inherit; clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 999px); }
.pieces__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.pieces__stage { position: relative; min-height: 0; }
/* One piece leaves quickly, the next one comes in after it: they never show through each other */
.piece { position: absolute; inset: 0; margin: 0; display: grid; align-content: start; gap: 1rem;
  opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .4s var(--ease); pointer-events: none; }
.piece.is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity .7s var(--ease) .2s, transform .9s var(--ease) .2s; }
.pieces__nav { display: flex; align-items: center; gap: 0.5rem; }
.pieces__count { margin-right: auto; padding-left: 0.25rem; font-size: 0.8125rem; color: var(--app-muted); font-variant-numeric: tabular-nums; }

/* Route of the post: hashtag → section, card type */
/* Route of the post: one quiet line, the hashtag in the link colour and the section it went to */
.route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 500; color: var(--app-muted); }
.route__tag { color: var(--w-link, var(--accent)); }
.route__arrow { width: 1rem; height: 0.75rem; color: var(--mk-line-hover); }
.route__to { color: var(--app-text); font-weight: 600; }
.route__kind { display: none; }

/* App pieces: real mini app sizes (card 16 radius and padding), set in the page font */
.a-head { display: grid; gap: 0.375rem; }
.a-head__title { font: 600 1.5rem/1.15 var(--app-title); letter-spacing: -0.02em; }
.a-head__desc { font-size: 0.8125rem; line-height: 1.4; color: var(--app-muted); }
/* Numbered steps: small even squares, centred on the first line of text; the list sits a little in from the card edge
   (about 40 % of the 16 px card radius) */
.a-steps { list-style: none; margin: 0.25rem 0 0; padding: 0 0 0 0.375rem; display: grid; gap: 0.625rem; font-size: 0.8125rem; line-height: 1.35; }
.a-steps li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.625rem; align-items: start; }
.a-steps b { width: 1rem; height: 1rem; margin-top: calc((1.35em - 1rem) / 2); border-radius: 0.3125rem; background: var(--demo-accent); color: var(--on-demo-accent);
  display: grid; place-items: center; font-size: 0.625rem; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.a-card { background: var(--app-card); border-radius: 1rem; padding: 1rem; display: grid; gap: 0.625rem; min-width: 0; position: relative; }
/* The card that just arrived rises in and keeps a soft lift */
.a-card--new { box-shadow: 0 14px 34px rgba(15, 23, 42, .07); }
.js .piece.is-active .a-card--new { animation: newCard 1s var(--ease) .25s both; }
@keyframes newCard { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.a-card--ghost { opacity: .55; }
.a-title { font: 600 1.0625rem/1.3 var(--app-title); letter-spacing: -0.01em; }
.a-title em { font-style: normal; color: var(--demo-accent); }
.a-desc { font-size: 0.8125rem; line-height: 1.4; color: var(--app-muted); }
.a-row { display: grid; grid-template-columns: 2.625rem minmax(0, 1fr); gap: 0.75rem; align-items: center; }
.a-ico { width: 2.625rem; height: 2.625rem; border-radius: 1rem; display: grid; place-items: center; background: color-mix(in srgb, var(--demo-accent) 10%, transparent); color: var(--demo-accent); }
.a-ico svg { width: 1.25rem; height: 1.25rem; }
.a-meta { font-size: 0.75rem; color: var(--app-muted); }
.a-times { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; font-size: 0.8125rem; color: var(--app-muted); }
.a-times b { color: var(--app-text); font-weight: 500; font-variant-numeric: tabular-nums; margin-right: 0.375rem; }
.a-times--new li { animation: rowIn .5s var(--ease) both; }
.a-times--new li:nth-child(2) { animation-delay: .15s; } .a-times--new li:nth-child(3) { animation-delay: .3s; }
.piece:not(.is-active) .a-times--new li { animation: none; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.a-media { aspect-ratio: 2.2 / 1; border-radius: 0.5rem; }
.a-media .att-video__slide { left: 0.75rem; }

.a-book { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.a-cover { aspect-ratio: 2 / 3; border-radius: 0.375rem; padding: 0.5rem; display: flex; flex-direction: column; justify-content: space-between;
  background: linear-gradient(160deg, #F4E7D3, #E9CFA8); color: #3B2A16; }
.a-cover b { font: 600 0.75rem/1.15 var(--app-title); }
.a-cover small { font-size: 0.5rem; letter-spacing: 0.04em; text-transform: uppercase; }
.a-author { font-size: 0.8125rem; color: var(--demo-accent); }

.a-date { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--app-muted); }
.a-date svg { width: 1rem; height: 1rem; }
.a-port { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--app-muted); }
.a-port b { color: var(--demo-accent); font-weight: 600; }
.a-gallery { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0.375rem; }
.a-gallery span { height: 5.25rem; border-radius: 0.5rem; background: var(--app-soft); display: grid; place-items: center; }
.a-gallery svg { width: 80%; height: 70%; }

.a-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.a-plate { background: var(--app-card); border-radius: 1rem; padding: 0.875rem; min-height: 6.75rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.125rem; position: relative; }
.a-plate .a-ico { position: absolute; top: 0.75rem; left: 0.75rem; width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; }
.a-plate .a-ico svg { width: 1.125rem; height: 1.125rem; }
.a-plate b { font: 600 0.9375rem/1.2 var(--app-title); letter-spacing: -0.01em; }
.a-plate small { font-size: 0.6875rem; color: var(--app-muted); }
.a-plate--wide { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; }
.a-plate--wide .a-ico { position: static; }
.js .piece.is-active .a-plate { animation: plateIn .5s var(--ease) both; }
.js .piece.is-active .a-plate:nth-child(2) { animation-delay: .08s; } .js .piece.is-active .a-plate:nth-child(3) { animation-delay: .16s; }
.js .piece.is-active .a-plate:nth-child(4) { animation-delay: .24s; } .js .piece.is-active .a-plate:nth-child(5) { animation-delay: .32s; }
@keyframes plateIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .a-card--new, .a-times--new li, .js .piece.is-active .a-plate { animation: none; }
}

@media (max-width: 1023px) {
  .win__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: 19rem auto; height: auto; }
  .chan { border-right: 0; border-bottom: 1px solid var(--w-line); }
  .pieces__stage { height: 27rem; }
}
@media (max-width: 767px) {
  .stage { border-radius: var(--r-card); }
  .pieces { padding: 0.875rem 0.875rem 1rem; }
  .pieces__stage { height: 29rem; }
  .a-book { grid-template-columns: 4.5rem minmax(0, 1fr); }
}

/* ---------- 02 Compare: "how it usually is" vs "in the product" ---------- */
.compare {
  background: var(--surface); border-radius: var(--r-card-lg);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  display: grid; grid-template-columns: 15rem minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-4);
}
.compare__row { display: contents; }
.compare__cell { padding-block: 1.375rem; border-top: 1px solid var(--border); min-width: 0; }
.compare__cell--ours { background: var(--accent-soft); padding-inline: 1.5rem; border-top-color: color-mix(in srgb, var(--accent) 8%, transparent); }
.compare__head .compare__cell { border-top: 0; padding-block: 1.25rem 0.75rem; }
.compare__head .compare__cell--ours { border-radius: 1.5rem 1.5rem 0 0; }
.compare__row:last-child .compare__cell--ours { border-radius: 0 0 1.5rem 1.5rem; }
.compare__head + .compare__row .compare__cell { border-top: 0; }
.compare__label { font-size: 1.25rem; line-height: 1.3; font-weight: var(--fw-heading); letter-spacing: -0.01em; }
.compare__was, .compare__now { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: 1.0625rem; line-height: 1.5; }
.compare__was { color: var(--muted); }
.compare__now { color: var(--text); }
.compare__col { display: inline-flex; align-items: baseline; gap: 0.5rem; font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--muted); }
.compare__col .logo { font-size: 1.25rem; }

/* 20 px mark centred on the first line's lowercase letters */
.ico { width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 0.25em; }
.ico svg { width: 0.75rem; height: 0.75rem; }
.ico--was { background: var(--fill); color: var(--muted); }
.ico--now { background: var(--accent-tint); color: var(--accent); }

@media (max-width: 1100px) {
  .compare { grid-template-columns: 11rem minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-3); padding-left: var(--s-3); }
}

/* ---------- 04 Flow: every way a post can take, drawn as a map ----------
   Nodes are laid out by CSS (columns on desktop, rows on narrow screens); flow.js draws the lines between
   their edges and moves posts along them. The map is a page element, so it follows the page theme. */
.flow {
  background:
    radial-gradient(70% 60% at 100% 0%, color-mix(in srgb, var(--glow) 10%, transparent), transparent 65%),
    var(--surface);
  border-radius: var(--r-card-lg); padding: var(--s-4); display: grid; gap: var(--s-4);
}
.flow__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.flow__tab {
  position: relative; overflow: hidden; appearance: none; border: 0; cursor: pointer;
  padding: 0.625rem 1rem; border-radius: var(--r-pill); background: var(--canvas); color: var(--text-2);
  font: var(--fw-ui) var(--fs-small)/1.2 var(--font); transition: background-color .3s var(--ease), color .3s var(--ease);
}
.flow__tab:hover { color: var(--text); }
.flow__tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.flow__tab span { position: relative; }
/* The current path fills its tab from left to right while it plays */
.flow__tab i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 999px); opacity: 0; }
.flow__tab[aria-selected="true"] i { opacity: 1; }
.flow__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.flow__map { position: relative; }
.flow__lines, .flow__tokens { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.flow__cols { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(2.5rem, 5vw, 5rem); }
/* Every column: its label on one shared line at the top, nodes centred in the height of the tallest column */
.fcol { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1rem; min-width: 0; }
.fcol__label { font-size: 0.75rem; font-weight: var(--fw-ui); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-left: 0.25rem; }
.fcol__nodes { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; min-width: 0; }

.fnode {
  position: relative; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.875rem 0.75rem 0.75rem; border-radius: 1.25rem; background: var(--canvas);
  transition: background-color .6s var(--ease), box-shadow .6s var(--ease), opacity .6s var(--ease);
}
.fnode__ico { width: 2.25rem; height: 2.25rem; border-radius: 0.875rem; display: grid; place-items: center; background: var(--surface); color: var(--muted); transition: color .6s var(--ease), background-color .6s var(--ease); }
.fnode__ico svg { width: 1.25rem; height: 1.25rem; }
.fnode__text { display: grid; gap: 0.375rem; min-width: 0; }
.fnode__text b { font-weight: var(--fw-heading); font-size: 0.9375rem; line-height: 1.25; letter-spacing: -0.01em; }
/* The second line is exactly as tall as the badge that replaces it, so the badge never comes near the title */
.fnode__text small { height: 1.25rem; font-size: 0.8125rem; line-height: 1.25rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnode__count { min-width: 1.5rem; text-align: right; font-size: 0.875rem; font-weight: var(--fw-ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.fnode__count { transition: color .4s var(--ease); }
.fnode__count.is-bumped { color: var(--accent); }
/* What happened at a node: a small pill laid over the node's second line. The line keeps its place,
   so the node never changes height and nothing on the map moves when a badge appears. */
.fnode__text { position: relative; }
.fnode__badge { position: absolute; left: 0; bottom: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  height: 1.25rem; font-size: 0.6875rem; font-weight: var(--fw-ui); line-height: 1.25rem; padding: 0 0.5rem; border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent); opacity: 0; transform: translateY(3px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease); }
.fnode__text small { transition: opacity .4s var(--ease); }
.fnode.has-badge .fnode__text small { opacity: 0; }
.fnode.has-badge .fnode__badge { opacity: 1; transform: none; }
.fnode__badge--muted { background: var(--inverse); color: var(--on-inverse); }

/* A path is playing: nodes off the path step back, nodes on it light up when a post reaches them */
.flow.is-playing .fnode { opacity: .45; }
.flow.is-playing .fnode.is-on { opacity: 1; }
.fnode.is-on { background: var(--surface); box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(3, 7, 18, .06); }
.fnode.is-on .fnode__ico { color: var(--accent); background: var(--accent-soft); }
.fnode.is-hit { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent), 0 12px 32px color-mix(in srgb, var(--accent) 14%, transparent); }

/* Lines: only the current path is drawn. A quiet route first, then an accent trail grows behind the post */
.fline, .ftrail { fill: none; stroke-linecap: round; opacity: 0; transition: opacity .6s var(--ease); }
.fline { stroke: color-mix(in srgb, var(--text) 14%, transparent); stroke-width: 1.5; }
.ftrail { stroke: var(--accent); stroke-width: 2; }
.fline.is-on, .ftrail.is-on { opacity: 1; }

/* A post on its way: a pill that rides the line */
.ftoken { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; will-change: transform, opacity;
  font-size: 0.75rem; font-weight: var(--fw-ui); line-height: 1; padding: 0.4375rem 0.625rem; border-radius: var(--r-pill);
  background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
  opacity: 0; transition: opacity .45s var(--ease); }
.ftoken.is-shown { opacity: 1; }
.ftoken--muted { background: var(--inverse); color: var(--on-inverse); box-shadow: 0 6px 18px rgba(3, 7, 18, .18); }

.flow__note { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); transition: opacity .3s var(--ease); }
.flow.is-swapping .flow__note { opacity: 0; }
.flow__lead { display: grid; gap: 0.625rem; align-content: start; }
.flow__kicker { font-size: var(--fs-small); font-weight: var(--fw-ui); color: var(--accent); }
.flow__title { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.15; letter-spacing: -0.02em; }
.flow__text { color: var(--text-2); font-size: 1.0625rem; line-height: 1.6; max-width: 52ch; }
.flow__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; align-content: start; }
.flow__facts li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; line-height: 1.55; color: var(--text); }
.flow__facts li::before { content: ""; position: absolute; left: 0.25rem; top: 0.55em; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); }

/* Narrow screens: the four columns become four rows, lines run top to bottom */
@media (max-width: 1100px) {
  .flow__cols { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
  .fcol { gap: 0.625rem; }
  .fcol__nodes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0.5rem; }
  .fcol:nth-child(1) { --n: 3; } .fcol:nth-child(2) { --n: 2; } .fcol:nth-child(3) { --n: 2; } .fcol:nth-child(4) { --n: 2; }
  /* Lines to the lower row of sections pass between the two rows: room for a soft turn, not a corner */
  .fcol:nth-child(4) .fcol__nodes { row-gap: 1.75rem; }
  .flow__note { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}
@media (max-width: 767px) {
  .flow { padding: var(--m-card-pad); gap: var(--s-3); margin-left: calc(-1 * var(--bleed-l)); margin-right: calc(-1 * var(--bleed-r)); border-radius: var(--m-card-r); }
  .flow__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--m-card-pad)); padding-inline: var(--m-card-pad); }
  .flow__tabs::-webkit-scrollbar { display: none; }
  .flow__tab { flex: none; }
  .flow__cols { row-gap: 2.25rem; }
  .fnode { grid-template-columns: minmax(0, 1fr) auto; padding: 0.625rem 0.75rem; border-radius: 1rem; }
  .fnode__ico { display: none; }
  .fnode__text b { font-size: 0.875rem; }
  .fnode__text small { font-size: 0.75rem; }
  .fcol:nth-child(1) .fnode { grid-template-columns: minmax(0, 1fr); }
  .flow__text { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fline, .ftrail, .ftoken, .fnode { transition: none; }
}

/* ---------- Pictures of the app outside the hero: the same palette as .pieces, in the page theme ---------- */
.appbox { --demo-accent: var(--mk-accent); --on-demo-accent: var(--mk-on-accent); --app-bg: var(--mk-bg); --app-card: var(--mk-card); --app-soft: var(--mk-soft); --app-text: var(--mk-text); --app-muted: var(--mk-muted);
  --app-title: var(--mk-title, var(--font)); --app-font: var(--font); --w-link: var(--tg-link); color: var(--app-text); font-family: var(--app-font); }

/* ---------- 03 App: tabs on the left, the app in a phone on the right (Peers showcase) ---------- */
.showcase {
  border-radius: var(--r-card-lg); overflow: hidden; padding: clamp(1.5rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-5); align-items: center;
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--glow) 14%, transparent), transparent 65%),
    radial-gradient(60% 70% at 70% 100%, color-mix(in srgb, var(--glow) 7%, transparent), transparent 60%),
    var(--surface);
}
.showcase__side { display: grid; gap: var(--s-2); align-content: center; max-width: 30rem; padding-left: calc(var(--r-card-lg) / 2 - clamp(1.5rem, 4vw, 3.5rem) + 1.5rem); }
.showcase__count { font-size: var(--fs-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.showcase__title { font-size: var(--fs-heading); line-height: 1.1; font-weight: var(--fw-heading); letter-spacing: -0.02em; }
.showcase__text { font-size: var(--fs-subhead); line-height: 1.55; color: var(--text-2); min-height: calc(3 * 1.55em); }
.showcase__title, .showcase__text { transition: opacity .3s var(--ease); }
.showcase.is-swapping .showcase__title, .showcase.is-swapping .showcase__text { opacity: 0; }
.showcase__ctrl { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--s-1); }
.showcase__bars { flex: 1; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.25rem; min-width: 0; }
.showcase__bar { appearance: none; border: 0; background: none; padding: 0.625rem 0; cursor: pointer; }
.showcase__bar i { display: block; height: 3px; border-radius: 2px; background: var(--border); position: relative; overflow: hidden; }
.showcase__bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--text); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 999px); }
.showcase__bar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

/* Desktop: the list of app screens beside the phone, as in Peers. The compact bars and arrows are for ≤1100 px */
.tabs { display: grid; gap: 0.25rem; align-content: center; }
.tab { display: grid; text-align: left; padding: 1.5rem; border-radius: 1.5rem; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  transition: background-color .5s var(--ease), color .5s var(--ease); font: inherit; }
.tab:hover { color: var(--text); }
.tab__title { font-size: 1.5rem; line-height: 1.2; font-weight: var(--fw-heading); letter-spacing: -0.01em; }
.tab__more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--ease), opacity .45s var(--ease); }
.tab__more > span { overflow: hidden; }
.tab__text { display: block; padding-top: 0.375rem; font-size: var(--fs-body); line-height: 1.5; color: var(--text-2); max-width: 46ch; }
.tab[aria-selected="true"] { background: var(--canvas); color: var(--text); }
.tab[aria-selected="true"] .tab__more { grid-template-rows: 1fr; opacity: 1; transition-delay: 0s, .1s; }
.tab__progress { display: block; height: 0; margin-top: 0; border-radius: 2px; background: var(--border); overflow: hidden; opacity: 0;
  transition: height .4s var(--ease), margin-top .4s var(--ease), opacity .4s var(--ease); }
.tab[aria-selected="true"] .tab__progress { height: 2px; margin-top: 1.125rem; opacity: 1; }
.tab__progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 999px); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.showcase__side { display: none; }
@media (max-width: 1100px) {
  .tabs { display: none; }
  .showcase__side { display: grid; }
}

/* Phone: a thin, even bezel. The screen is drawn at 390 × 844 and scaled down, like the real app */
.phone {
  --ph-w: 21.25rem; --ph-scale: calc(340 / 390); --bezel: 0.3125rem; --screen-r: 2.75rem;
  position: relative; padding: var(--bezel); border-radius: calc(var(--screen-r) + var(--bezel));
  background: linear-gradient(145deg, #2A2B2E, #0B0B0C 40%, #1C1D20);
  box-shadow: 0 40px 90px rgba(3, 7, 18, 0.2), 0 2px 6px rgba(3, 7, 18, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.phone__screen { position: relative; width: var(--ph-w); height: calc(844px * var(--ph-scale)); border-radius: var(--screen-r); overflow: hidden; background: var(--mk-bg); isolation: isolate; }
.phone__ui { position: absolute; top: 0; left: 0; width: 390px; height: 844px; transform: scale(var(--ph-scale)); transform-origin: 0 0; background: var(--app-bg); }
.ui-status { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 34px 0 42px;
  font: 600 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; color: var(--mk-status); }
.ui-status i { display: inline-block; width: 26px; height: 12px; border-radius: 4px; border: 1.5px solid var(--mk-status); position: relative; }
.ui-status i::after { content: ""; position: absolute; inset: 1.5px; right: 5px; background: var(--mk-status); border-radius: 1.5px; }
.ui-tg { position: absolute; z-index: 3; top: 58px; left: 16px; right: 16px; display: flex; justify-content: space-between; pointer-events: none; }
.ui-tg span { height: 34px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--mk-chip-text); background: var(--mk-chip); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.scr { position: absolute; inset: 0; padding: 112px 16px 24px; display: grid; align-content: start; gap: 12px; overflow: hidden;
  opacity: 0; transform: translateY(10px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.scr.is-active { opacity: 1; transform: none; transition: opacity .6s var(--ease) .18s, transform .8s var(--ease) .18s; }
.scr .a-head { padding: 4px 4px 6px; gap: 8px; }
.scr .a-head__title { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; }
.scr .a-head__desc { font-size: 14px; line-height: 1.45; }
.scr .a-steps { font-size: 14px; gap: 12px; padding-left: 6px; }
.scr .a-steps li { grid-template-columns: 18px minmax(0, 1fr); gap: 12px; }
.scr .a-steps b { width: 18px; height: 18px; margin-top: calc((1.35 * 14px - 18px) / 2); border-radius: 5.5px; font-size: 11px; }
.scr .a-card { border-radius: 16px; padding: 16px; gap: 10px; }
.scr .a-title { font-size: 17px; }
.scr .a-desc, .scr .a-times { font-size: 13.5px; }
.scr .a-grid { gap: 6px; }
.scr .a-plate { min-height: 132px; border-radius: 16px; padding: 14px; }
.scr .a-plate .a-ico { width: 40px; height: 40px; border-radius: 13px; top: 14px; left: 14px; }
.scr .a-plate b { font-size: 16.5px; }
.scr .a-plate small { font-size: 12.5px; }
.scr .a-plate--wide { min-height: 0; }
.ui-label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--app-muted); padding: 6px 4px 0; }
.ui-links { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-links span { font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 999px; background: var(--app-card); color: var(--demo-accent); }
.ui-topic-grid .a-plate { min-height: 158px; justify-content: flex-end; }
.ui-topic-grid .a-plate small { line-height: 1.4; }
.ui-topic { display: grid; grid-template-columns: 1fr; gap: 4px; }
.ui-topic .a-plate { min-height: 150px; }
.ui-topic .a-plate small { line-height: 1.35; }
/* Audio that plays in the picture: a thin progress line under the card head */
.ui-progress { height: 4px; border-radius: 999px; background: var(--app-soft); overflow: hidden; }
.ui-progress i { display: block; height: 100%; width: 38%; border-radius: inherit; background: var(--demo-accent); }
.ui-faq { display: grid; gap: 6px; }
.ui-q { background: var(--app-card); border-radius: 16px; padding: 15px 16px; display: grid; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ui-q span { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ui-q span::after { content: "+"; flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--app-soft); color: var(--app-muted); font-weight: 500; }
.ui-q.is-open span::after { content: "–"; color: var(--demo-accent); }
.ui-q p { margin: 0; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--app-muted); }
.ui-lock { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--app-soft); color: var(--app-muted); }
.ui-lock svg { width: 14px; height: 14px; }
.a-plate.is-locked { opacity: .6; }
.ui-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ui-months i { height: 6px; border-radius: 999px; background: var(--app-soft); }
.ui-months i.on { background: var(--demo-accent); }
.ui-gift { background: linear-gradient(135deg, color-mix(in srgb, var(--demo-accent) 92%, #fff), color-mix(in srgb, var(--demo-accent) 70%, #000)); color: #fff; border-radius: 16px; padding: 16px; display: grid; gap: 4px; }
.ui-gift b { font-size: 17px; letter-spacing: -0.01em; }
.ui-gift small { font-size: 13px; opacity: .8; }

@media (max-width: 1100px) {
  .showcase { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-4); }
  .showcase__side { justify-items: center; text-align: center; padding-left: 0; width: 100%; }
  .showcase__ctrl { width: min(100%, 24rem); }
}
/* App showcase on a phone, as in Peers: no arrows and no count (the phone itself is swiped, the bars show the place),
   a tight vertical rhythm so the phone fits under the screen's name, and a smaller phone by its own scale */
@media (max-width: 767px) {
  .phone { --ph-w: 18.25rem; --ph-scale: calc(292 / 390); --screen-r: 2.375rem; }
  .showcase { gap: var(--s-2); padding-top: var(--m-card-pad); }
  .showcase__side { gap: 0.375rem; }
  .showcase__count { display: none; }
  .showcase__title { font-size: 1.5rem; }
  .showcase__text { font-size: 0.9375rem; line-height: 1.45; min-height: calc(3 * 1.45em); }
  .showcase__ctrl { margin-top: 0; width: min(100%, 16rem); }
  .showcase__ctrl .nav-arrow:not(.nav-arrow--pause) { display: none; }
}
@media (max-width: 359px) {
  .phone { --ph-w: 17.5rem; --ph-scale: calc(280 / 390); --screen-r: 2.25rem; }
}

/* ---------- Bento tiles: sections 05–07 ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-2); }
.bento > * { min-width: 0; }
.b-7 { grid-column: span 7; } .b-5 { grid-column: span 5; } .b-4 { grid-column: span 4; } .b-6 { grid-column: span 6; } .b-8 { grid-column: span 8; } .b-12 { grid-column: span 12; }
.tile { background: var(--surface); border-radius: var(--r-card); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
.tile__title { font-size: 1.25rem; line-height: 1.25; font-weight: var(--fw-heading); letter-spacing: -0.01em; }
.tile__text { color: var(--text-2); font-size: 0.9375rem; line-height: 1.65; max-width: 48ch; }
.tile__pic { margin-top: auto; }
.tile__head { display: grid; gap: 0.5rem; }

/* ---------- 05 Cards you can touch ---------- */
/* Every card stands on a piece of the app background, at the app's own size */
.stand { margin-top: auto; border-radius: 1.5rem; padding: 1.5rem; background: var(--app-bg); display: grid; place-items: center; min-height: 15rem; }
.stand > * { width: 100%; max-width: 24rem; }
.lc-play { appearance: none; border: 0; cursor: pointer; width: 2.75rem; height: 2.75rem; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--demo-accent); color: var(--on-demo-accent); transition: transform .3s var(--ease), background-color .3s var(--ease); }
.lc-play:hover { transform: scale(1.05); }
.lc-play:active { transform: scale(.96); }
.lc-play svg { width: 1.125rem; height: 1.125rem; }
.lc-play .i-pause, .is-playing .lc-play .i-play { display: none; }
.is-playing .lc-play .i-pause { display: block; }
.lc-time { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--app-muted); font-variant-numeric: tabular-nums; }
.lc-track { position: relative; height: 0.25rem; border-radius: 999px; background: var(--app-soft); overflow: hidden; cursor: pointer; }
.lc-track i { position: absolute; inset: 0; border-radius: inherit; background: var(--demo-accent); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 999px); }
.lc-stamps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; }
.lc-stamps button { appearance: none; border: 0; background: none; padding: 0.3125rem 0.5rem; margin-inline: -0.5rem; border-radius: 0.5rem; width: calc(100% + 1rem); text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.5rem; font: 400 0.8125rem/1.4 var(--app-font); color: var(--app-muted); transition: background-color .25s var(--ease), color .25s var(--ease); }
.lc-stamps button b { font-weight: 500; color: var(--demo-accent); font-variant-numeric: tabular-nums; }
.lc-stamps button:hover { background: var(--app-soft); color: var(--app-text); }
.lc-stamps button.is-now { color: var(--app-text); }
.lc-wave { display: flex; align-items: center; gap: 3px; height: 1.75rem; }
.lc-wave i { flex: 1; border-radius: 999px;   /* bars with fully round ends */ background: color-mix(in srgb, var(--demo-accent) 22%, transparent); transition: background-color .2s linear; }
.lc-wave i.on { background: var(--demo-accent); }
/* Video in a card: a poster, a play button, a line that fills while it plays */
.lc-media { position: relative; aspect-ratio: 16 / 9; border-radius: 0.625rem; overflow: hidden; cursor: pointer; }
.lc-media .lc-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: rgba(15, 23, 42, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lc-media .lc-track { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; background: rgba(255,255,255,.35); opacity: 0; transition: opacity .3s var(--ease); }
.lc-media .lc-track i { background: #fff; }
.is-playing .lc-media .lc-track { opacity: 1; }
.is-playing .lc-media .lc-play { opacity: 0; transition: opacity .4s var(--ease); }
.is-playing .lc-media:hover .lc-play { opacity: 1; }
.lc-len { position: absolute; left: 0.625rem; top: 0.625rem; font-size: 0.6875rem; color: #fff; background: rgba(15, 23, 42, .4); padding: 0.125rem 0.375rem; border-radius: 0.375rem; }
.lc-poster-dark { background: radial-gradient(90% 120% at 80% 10%, #44444A, #141416 70%); }
.lc-poster-dark::after { content: ""; position: absolute; left: 1rem; bottom: 1rem; width: min(45%, calc(50% - 3rem)); height: 0.5rem; border-radius: 999px; background: rgba(255,255,255,.18); box-shadow: 0 -0.875rem 0 rgba(255,255,255,.3); }
/* Book: the cover leans towards the cursor */
.lc-book .a-title { overflow-wrap: break-word; hyphens: auto; }
.lc-book { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.125rem; align-items: start; perspective: 600px; }
.lc-book .a-cover { transition: transform .6s var(--ease), box-shadow .6s var(--ease); transform-style: preserve-3d; box-shadow: 0 8px 18px rgba(15, 23, 42, .12); }
.lc-book:hover .a-cover { transform: rotateY(-14deg) rotateX(4deg) translateZ(6px); box-shadow: 14px 18px 28px rgba(15, 23, 42, .18); }
.lc-more { appearance: none; border: 0; background: none; padding: 0.375rem 0; margin-block: -0.25rem; min-height: 2rem; cursor: pointer; font: 500 0.8125rem/1.4 var(--app-font); color: var(--demo-accent); justify-self: start; }
.lc-clip { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.lc-clip > div { overflow: hidden; }
.is-open .lc-clip { grid-template-rows: 1fr; }
/* Movie: a poster card, the picture slowly comes closer on hover */
.lc-movie { position: relative; border-radius: 1rem; overflow: hidden; aspect-ratio: 4 / 3; color: #fff; }
.lc-movie__img { position: absolute; inset: 0; transition: transform 1.2s var(--ease);
  background: radial-gradient(60% 50% at 70% 30%, #F6C177 0, transparent 60%), radial-gradient(70% 60% at 20% 80%, color-mix(in srgb, var(--demo-accent) 75%, #000) 0, transparent 60%), linear-gradient(160deg, #232326, #111113); }
.lc-movie:hover .lc-movie__img { transform: scale(1.06); }
.lc-movie__body { position: absolute; inset: auto 0 0 0; padding: 1rem; display: grid; gap: 0.25rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.lc-movie__body .a-title { color: #fff; }
.lc-movie__body .a-desc { color: rgba(255,255,255,.75); }
/* Portfolio: the gallery slides sideways */
.lc-gal { position: relative; border-radius: 0.625rem; overflow: hidden; background: var(--app-soft); touch-action: pan-y; }
.lc-gal__track { display: flex; transition: transform .6s var(--ease); }
.lc-gal__track > span { flex: 0 0 100%; aspect-ratio: 2.6 / 1; display: grid; place-items: center; }
.lc-gal__track svg { width: 78%; height: 70%; }
.lc-dots { display: flex; justify-content: center; gap: 0.375rem; }
.lc-dots button { appearance: none; border: 0; padding: 0; width: 0.4375rem; height: 0.4375rem; border-radius: 999px; background: color-mix(in srgb, var(--app-text) 18%, transparent); cursor: pointer; transition: width .4s var(--ease), background-color .4s var(--ease); }
.lc-dots button.is-on { width: 1.25rem; background: var(--demo-accent); }
/* Wide card: text and a picture on the right */
.lc-wide { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 1rem; align-items: start; }
.lc-wide__img { aspect-ratio: 1; border-radius: 0.75rem; background: linear-gradient(135deg, color-mix(in srgb, var(--demo-accent) 14%, #fff), color-mix(in srgb, var(--demo-accent) 45%, #fff) 60%, var(--demo-accent)); position: relative; overflow: hidden; }
.lc-wide__img::after { content: ""; position: absolute; inset: 22% 18% auto auto; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.55); }

/* ---------- 06 Control: the dashboard in small pictures ---------- */
.mini { background: var(--canvas); border-radius: 1.125rem; padding: 0.75rem; display: grid; gap: 0.375rem; font-size: 0.875rem; }
.mini__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--surface); }
.mini__row b { font-weight: var(--fw-heading); }
.mini__row small { color: var(--muted); font-size: 0.8125rem; }
.mini__row--3 { grid-template-columns: auto minmax(0, 1fr) auto; }
.mini__row--3 small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grip { width: 0.625rem; height: 0.875rem; background: radial-gradient(circle, var(--muted) 1px, transparent 1.5px) 0 0 / 0.3125rem 0.3125rem; opacity: .6; }
.pill { font-size: 0.75rem; font-weight: var(--fw-ui); padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--canvas); color: var(--text-2); white-space: nowrap; }
.pill--accent { background: var(--accent-soft); color: var(--accent); }
.tg { position: relative; width: 2.25rem; height: 1.375rem; border-radius: 999px; background: var(--fill); flex: none; transition: background-color .3s var(--ease); }
.tg::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .3s var(--ease); }
.tg.on { background: var(--accent); }
.tg.on::after { transform: translateX(0.875rem); }
.swatches-ui { display: flex; gap: 0.5rem; }
.swatches-ui button { appearance: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid transparent; padding: 0.1875rem; background: none; cursor: pointer; transition: border-color .3s var(--ease); }
.swatches-ui button span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.swatches-ui button[aria-pressed="true"] { border-color: var(--text); }
.pal-demo { border-radius: 1.125rem; padding: 0.875rem; background: var(--app-bg); display: grid; gap: 0.375rem; transition: background-color .5s var(--ease); }
.pal-demo .a-plate { min-height: 7rem; transition: background-color .5s var(--ease), color .5s var(--ease); }
.pal-demo .a-plate b { color: var(--app-text); transition: color .5s var(--ease); }
.pal-demo .a-ico { transition: background-color .5s var(--ease), color .5s var(--ease); }
.log { display: grid; }
.log__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border); font-size: 0.875rem; line-height: 1.45; }
.log__row:first-child { border-top: 0; padding-top: 0; }
.log__row time { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }
.bc { background: var(--canvas); border-radius: 1.125rem; padding: 1.25rem 1rem; font-size: 0.875rem; line-height: 1.5; display: grid; gap: 0.875rem; }
.bc__btn { min-height: 2.75rem; display: grid; place-items: center; text-align: center; font-weight: var(--fw-ui); font-size: 0.8125rem; padding: 0 0.75rem; border-radius: 0.75rem; background: var(--surface); color: var(--accent); }
.bc__meta { font-size: 0.75rem; color: var(--muted); }
.projects { display: grid; gap: 0.375rem; }
.project { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.625rem 0.875rem 0.625rem 0.625rem; border-radius: 1rem; background: var(--canvas); font-size: 0.875rem; }
.project__dot { width: 2.25rem; height: 2.25rem; border-radius: 0.75rem; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 0.8125rem; }
.project b { font-weight: var(--fw-heading); display: block; }
.project small { color: var(--muted); font-size: 0.8125rem; }
.project.is-on { background: var(--accent-soft); }
.hdr { display: grid; gap: 0.5rem; background: var(--canvas); border-radius: 1.125rem; padding: 0.875rem; font-size: 0.875rem; }
.hdr__f { background: var(--surface); border-radius: 0.75rem; padding: 0.625rem 0.75rem; display: grid; gap: 0.125rem; }
.hdr__f small { color: var(--muted); font-size: 0.75rem; }

/* ---------- 07 Access ---------- */
.access-pic { margin-top: auto; display: grid; gap: 0.5rem; }
.lockrow { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; border-radius: 1rem; background: var(--canvas); font-size: 0.875rem; }
.lockrow b { font-weight: var(--fw-heading); flex: 1; }
.lockrow svg { width: 1.125rem; height: 1.125rem; color: var(--muted); flex: none; }
.lockrow .pill { margin-left: auto; }
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.25rem; }
.months i { position: relative; height: 0.5rem; border-radius: 999px; background: var(--fill); }
/* A paid month fills with a round leading edge (a mask, not a stretch), one month after another */
.months i.on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); clip-path: inset(0 0 0 0 round 999px); }
.js .months i.on::after { clip-path: inset(0 100% 0 0 round 999px); transition: clip-path .5s var(--ease); transition-delay: inherit; }   /* each month's delay is on the month (index.html) */
.js .is-in .months i.on::after { clip-path: inset(0 0 0 0 round 999px); }

/* ---------- 08 Data: dark band (Peers) ---------- */
.dark { background: var(--deep); color: #F9FAFB; border-radius: var(--r-card-lg); padding: clamp(1.5rem, 5vw, 4rem); display: grid; gap: var(--s-4);
  --d-line: rgba(255, 255, 255, 0.1); --d-muted: rgba(249, 250, 251, 0.62); --d-card: rgba(255, 255, 255, 0.04); }
.dark .section-head { padding-left: 0; }
.dark .t-heading { color: #F9FAFB; }
.dark .t-subhead { color: var(--d-muted); }
.dark__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.dcard { border: 1px solid var(--d-line); background: var(--d-card); border-radius: var(--r-card); padding: var(--s-3); display: grid; gap: 0.625rem; align-content: start; }
.dcard--wide { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem var(--s-3); align-items: center;
  background: radial-gradient(80% 160% at 100% 0%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 60%), var(--d-card); }
.dcard__ico { width: 2.5rem; height: 2.5rem; border-radius: 0.875rem; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; }
.dcard__ico svg { width: 1.25rem; height: 1.25rem; }
.dcard--wide .dcard__ico { grid-row: span 2; width: 3.25rem; height: 3.25rem; }
.dcard__title { font-size: 1.125rem; font-weight: var(--fw-heading); line-height: 1.3; }
.dcard__text { color: var(--d-muted); font-size: 0.9375rem; line-height: 1.65; }

/* ---------- 09 Platforms ---------- */
.plat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
.pcard { background: var(--surface); border-radius: var(--r-card); padding: var(--s-3); display: grid; gap: 0.625rem; align-content: start; }
.pcard__ico { width: 2.75rem; height: 2.75rem; border-radius: 1rem; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 0.25rem; }
.pcard__ico svg { width: 1.375rem; height: 1.375rem; }
.pcard__title { font-size: 1.125rem; font-weight: var(--fw-heading); }
.pcard__text { color: var(--text-2); font-size: 0.9375rem; line-height: 1.65; }

/* ---------- 10 FAQ (Peers) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-5); align-items: start; }
.faq__aside { display: grid; gap: var(--s-2); position: sticky; top: 7rem; padding-left: calc(var(--r-card-lg) / 2); }
.faq__aside a { color: var(--accent); text-decoration: none; }
.qa { background: var(--surface); border-radius: var(--r-card); transition: background-color .3s var(--ease); }
.qa + .qa { margin-top: 0.5rem; }
.qa:hover { background: color-mix(in srgb, var(--surface) 94%, var(--text)); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.375rem 1.5rem; font-size: 1.125rem; font-weight: var(--fw-heading); line-height: 1.35; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 2rem; height: 2rem; border-radius: 50%; transition: transform .4s var(--ease);
  background: var(--canvas) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 5v10M5 10h10' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round'/></svg>") center / 1rem no-repeat; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa__a { padding: 0 1.5rem 1.5rem; color: var(--text-2); line-height: 1.7; max-width: 62ch; overflow: hidden; }

/* ---------- 11 Start and footer (Peers) ---------- */
.start { background: var(--deep); color: #F9FAFB; border-radius: var(--r-card-lg); padding: clamp(1.5rem, 6vw, 5rem); display: grid; gap: var(--s-4); justify-items: center; text-align: center; position: relative; overflow: hidden; }
.start::before { content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%; background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--glow) 35%, transparent), transparent 70%); pointer-events: none; }
.start > * { position: relative; }
.start .t-title { color: #F9FAFB; max-width: 18ch; }
.start .t-subhead { color: rgba(249,250,251,.68); max-width: 48ch; }
.lead { width: min(100%, 40rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; text-align: left; }
.field { display: grid; gap: 0.375rem; font-size: 0.8125rem; color: rgba(249,250,251,.7); }
.field input { height: 3.25rem; border-radius: 1rem; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #F9FAFB; padding: 0 1rem; font: var(--fw-text) 1rem var(--font); transition: border-color .25s ease, background-color .25s ease; }
.field input::placeholder { color: rgba(249,250,251,.35); }
.field input:hover { border-color: rgba(255,255,255,.28); }
.field input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.09); }
.field input[aria-invalid="true"] { border-color: #F87171; }
.lead__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 0.375rem; }
.lead__note { font-size: 0.8125rem; color: rgba(249,250,251,.5); }
.lead__done { grid-column: 1 / -1; text-align: center; padding: 1rem; border-radius: 1rem; background: rgba(46,192,85,.12); color: #A7F3C0; }
.lead__error { grid-column: 1 / -1; text-align: center; padding: 1rem; border-radius: 1rem; background: rgba(248,113,113,.12); color: #FECACA; }
.lead__error a { color: inherit; }
/* Consent: a real checkbox, unchecked by default; the form is not sent without it */
.lead__consent { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; margin-top: 0.25rem;
  font-size: 0.8125rem; line-height: 1.5; color: rgba(249,250,251,.7); cursor: pointer; }
/* The box is drawn like the fields above it: a soft square with a thin check; the real input lies on top, invisible */
.lead__consent input { grid-area: 1 / 1; z-index: 1; width: 1.25rem; height: 1.25rem; margin: 0.0625rem 0 0; opacity: 0; cursor: pointer; }
.lead__box { grid-area: 1 / 1; width: 1.25rem; height: 1.25rem; margin-top: 0.0625rem; display: grid; place-items: center; border-radius: 0.375rem;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: var(--on-accent);
  transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.lead__box svg { width: 0.875rem; height: 0.875rem; opacity: 0; transform: scale(.6); transition: opacity .15s var(--ease), transform .2s var(--ease); }
.lead__consent:hover .lead__box { border-color: rgba(255,255,255,.45); }
.lead__consent input:checked + .lead__box { background: var(--accent-fill); border-color: transparent; }
.lead__consent input:checked + .lead__box svg { opacity: 1; transform: none; }
.lead__consent input:focus-visible + .lead__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.lead__consent input[aria-invalid="true"] + .lead__box { border-color: #F87171; }
.lead__consent > span:last-child { grid-column: 2; grid-row: 1; }
.lead__consent a { color: #F9FAFB; text-decoration: underline; text-decoration-color: rgba(249,250,251,.35); text-underline-offset: 2px; }
.lead__consent a:hover { text-decoration-color: currentColor; }
/* A field for bots only: off screen, out of the tab order, hidden from screen readers */
.lead__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead .btn[disabled] { opacity: .6; cursor: progress; }
.footer { display: grid; gap: var(--s-3); padding-block: var(--s-4) 0; }
.footer__mark { font-size: clamp(3.5rem, 15vw, 14rem); line-height: .85; font-weight: var(--fw-heading); letter-spacing: -0.06em; color: var(--text); text-align: center; user-select: none; }
.footer__mark { position: relative; }
/* The dot stands outside the centring, so the letters themselves sit on the page axis, like the lines below */
.footer__mark span { position: absolute; color: var(--accent); }
/* Everything on one axis under the big word: who made it and the note, then the links in one line */
.footer__row { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; text-align: center; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }
.footer__row a { color: var(--text-2); text-decoration: none; }
.footer__row a:hover, .footer__row a.footer__brand { color: var(--accent); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; }

@media (max-width: 1100px) {
  .bento .b-7, .bento .b-5, .bento .b-8 { grid-column: span 12; }
  .bento .b-4 { grid-column: span 6; }
  .bento .b-4.b-last { grid-column: span 12; }
  .bento .b-6 { grid-column: span 12; }
  .dark__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .faq__aside { position: static; }
}
@media (max-width: 767px) {
  .bento .b-4 { grid-column: span 12; }
  .stand { padding: 1rem; min-height: 0; }
  .dark__grid { grid-template-columns: minmax(0, 1fr); }
  .dcard--wide { grid-template-columns: minmax(0, 1fr); }
  .dcard--wide .dcard__ico { grid-row: auto; }
  .plat { grid-template-columns: minmax(0, 1fr); }
  .faq__aside { padding-left: 0; }
  .qa summary { padding: 1.125rem 0; font-size: 1rem; }
  .qa__a { padding: 0 0 1.25rem; }
  .lead { grid-template-columns: minmax(0, 1fr); }
  .lead__foot { flex-direction: column; align-items: stretch; }
  .lc-book { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .mini__row:not(.mini__row--3) { grid-template-columns: minmax(0, 1fr) auto; }
  .mini__row:not(.mini__row--3) > .pill:last-child { display: none; }
  .lc-wide { grid-template-columns: minmax(0, 1fr) 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scr, .scr.is-active, .lc-gal__track, .lc-movie__img, .lc-book .a-cover { transition: none; }
}

/* ---------- Reveal on scroll: content is visible without JS; with JS it rises in once ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Phone: main cards go edge to edge, like the plates of the mini app home ---------- */
@media (max-width: 767px) {
  :root {
    --page-gutter: 1.25rem;
    --bleed-l: max(var(--page-gutter), env(safe-area-inset-left, 0px));
    --bleed-r: max(var(--page-gutter), env(safe-area-inset-right, 0px));
    --m-card-r: 1.25rem;
    --m-card-pad: 1.25rem;
  }
  .section-head, .hero__text { padding-left: 0; }
  .stage, .compare, .flow, .showcase, .tile, .dark, .pcard, .qa, .start {
    margin-left: calc(-1 * var(--bleed-l));
    margin-right: calc(-1 * var(--bleed-r));
    border-radius: var(--m-card-r);
    padding-left: calc(var(--m-card-pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--m-card-pad) + env(safe-area-inset-right, 0px));
  }
  .stage { padding: 0.75rem; }
  .win { border-radius: 1rem; }
  .bento, .plat { gap: 4px; }
  .qa + .qa { margin-top: 4px; }
  .tile, .pcard { padding-block: var(--m-card-pad); }
  .showcase { padding-block: var(--m-card-pad) calc(var(--m-card-pad) + 0.5rem); }
  .start { padding-block: 2.5rem; }

  /* Compare, phone: each row is the area, then the two answers on one rail */
  .compare { grid-template-columns: minmax(0, 1fr); padding-block: 0.25rem var(--m-card-pad); }
  .compare__head { display: none; }
  .compare__cell, .compare__cell--ours { border-top: 0; padding: 0; background: none; border-radius: 0; }
  .compare__label { padding-top: var(--m-card-pad); margin-top: 0.75rem; border-top: 1px solid var(--border); font-size: 1.125rem; }
  .compare__head + .compare__row .compare__label { border-top: 0; margin-top: 0; }
  .compare__cell + .compare__cell { padding-top: 0.625rem; }
  .compare__was, .compare__now { font-size: 1rem; }
  .compare__row:last-child .compare__cell--ours { border-radius: 0; }
}


/* ---------- Concentric corners ----------
   An inner surface at a gap from its frame gets the frame's radius minus the gap (as in Peers).
   Cards are 40 with 24 inside, so the plates that stand in them are 16; what stands in a plate takes 16 minus the
   plate's own padding (8). Where the gap is a whole corner or more (the stand keeps 24 of air around an app card),
   the inner corner is free but always smaller than its frame's: the app card on a 16 stand is 12, and what sits in
   the app card's corner stays under 12.
   Icons, round buttons and pills are shapes of their own and keep their radius. */
.tile, .pcard, .dcard { border-radius: var(--r-card-lg); }
.tile { --plate-r: calc(var(--r-card-lg) - var(--s-3)); }                       /* 16 */
.tile .stand, .tile .mini, .tile .pal-demo, .tile .hdr, .tile .bc, .tile .project, .tile .lockrow { border-radius: var(--plate-r); }
.tile { --app-r: 12px; }
.tile > .stand .a-card { border-radius: var(--app-r); }
.tile > .stand .a-card :is(.lc-wide__img) { border-radius: 10px; }
.mini { --pad: 0.5rem; padding: var(--pad); }
.mini__row { border-radius: calc(var(--plate-r, 1.5rem) - var(--pad)); }          /* 12 */
.pal-demo { --pad: 0.5rem; padding: var(--pad); }
.pal-demo .a-plate { border-radius: calc(var(--plate-r, 1.5rem) - var(--pad)); }   /* 16, the app's own plate */
.hdr { --pad: 0.5rem; padding: var(--pad); }
.hdr__f { border-radius: calc(var(--plate-r, 1.5rem) - var(--pad)); }              /* 12 */
.bc { --pad: 0.5rem; padding: var(--pad); }
.bc__btn { border-radius: calc(var(--plate-r, 1.5rem) - var(--pad)); }             /* 12 */
.lockrow { padding-inline: 0.75rem; }
.project { --pad: 0.625rem; padding-left: var(--pad); }
.project__dot { border-radius: calc(var(--plate-r, 1.5rem) - var(--pad)); }        /* 14 */
/* Text inside the message keeps its air: the button is the only thing at the plate's inset */
.bc > span:first-child { padding: 0.5rem 0.25rem 0; }
.bc > .bc__meta { padding: 0 0.25rem 0.25rem; }
@media (max-width: 767px) {
  /* Phone, as in Peers: cards are 20; a plate that ends a card stands 6 px from its sides and bottom (20 − 6 = 14),
     and an app card in it keeps its air and a smaller corner (10). The hero window: 20 − 12 = 8. */
  .tile, .pcard { border-radius: var(--m-card-r); }
  .tile { --m-gap: 6px; --plate-r: calc(var(--m-card-r) - var(--m-gap)); }
  .tile > .stand, .tile > .mini, .tile > .hdr, .tile > .bc, .tile > .projects, .tile > .access-pic, .tile__pic > .pal-demo {
    margin-left: calc(var(--m-gap) - var(--m-card-pad)); margin-right: calc(var(--m-gap) - var(--m-card-pad)); margin-bottom: calc(var(--m-gap) - var(--m-card-pad));
  }
  /* The stand is 14 and keeps 16 of air, so the app card in it is free but smaller: 10, its pictures 8 */
  .tile { --app-r: 10px; }
  .tile .stand { border-radius: var(--plate-r); }
  .tile > .stand .a-card :is(.lc-media, .lc-wide__img, .att-video) { border-radius: 8px; }
  .tile .mini, .tile .hdr, .tile .bc, .tile__pic > .pal-demo { --pad: 0.375rem; }
  .stage .win { border-radius: calc(var(--m-card-r) - 0.75rem); }
  /* Dark band: its cards are the plates, 6 px from the band's sides and bottom; the heading keeps the card inset */
  .dark { --m-gap: 6px; padding: var(--m-card-pad) var(--m-gap) var(--m-gap); }
  .dark > :not(.dark__grid) { padding-inline: calc(var(--m-card-pad) - var(--m-gap)); }
  .dcard { border-radius: calc(var(--m-card-r) - var(--m-gap)); padding: calc(var(--m-card-pad) - var(--m-gap)); }
}
/* Desktop: the window and the dark cards stand at least a corner radius from the frame, so their corners are free.
   Tablet: a fixed 24 px inset, and the corners inside take 48 − 24 = 24. */
@media (min-width: 1101px) {
  .stage { padding: clamp(3rem, 4vw, 3.5rem); }
  /* A free corner is still smaller than its frame: the dark cards are 24 in the band's 40 */
  .dcard { border-radius: var(--s-3); }
}
@media (max-width: 1100px) and (min-width: 768px) {
  .stage, .dark { padding: 1.5rem; }
  .stage .win, .dcard { border-radius: calc(var(--r-card-lg) - 1.5rem); }
  /* The app in the window (16) stays under the window's own corner */
  .stage .win :is(.a-plate, .a-card) { border-radius: 12px; }
}
@media (max-width: 767px) {
  /* The window is 8 here, so the app pieces near its corner are 6 and what sits in their corners 4 */
  .stage .win :is(.a-plate, .a-card) { border-radius: 6px; }
  .stage .win .a-card :is(.a-media, .att-video, .a-cover, .lc-media, .a-gallery > span) { border-radius: 4px; }
}

/* ---------- Pause for the blocks that play by themselves (hero pieces, app screens, post paths) ----------
   Hovering already pauses them; this button stops the play for keyboard and touch too, until pressed again. */
.nav-arrow--pause .i-play, .tabs__pause .i-play { display: none; }
[aria-pressed="true"] .i-pause { display: none; }
[aria-pressed="true"] .i-play { display: block; }
.nav-arrow--pause svg { width: 1rem; height: 1rem; }
.tabs__pause { justify-self: start; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 0 1.5rem; padding: 0.5rem 0;
  border: 0; background: none; font: var(--fw-ui) var(--fs-small)/1 var(--font); color: var(--muted); cursor: pointer; transition: color .3s var(--ease); }
.tabs__pause:hover { color: var(--text); }
.tabs__pause svg { width: 1rem; height: 1rem; }
.flow__head { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.flow__head .flow__tabs { flex: 1; min-width: 0; }
@media (max-width: 1100px) {
  .flow__head .flow__tabs { margin-right: 0; padding-right: 0; }
}
.footer__note { margin: 0; font-size: 0.8125rem; color: var(--muted); }
/* Text near a big corner: 24 px from the edges leaves only ~14 px to the 48 px arc along the diagonal, so the first
   letter looks pressed into the curve. Text in such cards sits 8 px deeper (32 px: ~25 px to the arc), as section
   titles sit deeper than their blocks; plates keep their 24 px, so their corners stay concentric. */
@media (min-width: 768px) {
  .tile__head { padding: 0.5rem 0.5rem 0; }
  .pcard { padding: 2rem; }
}
@media (min-width: 1101px) {
  .dcard { padding: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .js .months i.on::after { transition: none; } }
/* App plates: the icon stands at the top in the flow and the text at the bottom, so a long title or a two-line
   description makes the plate taller instead of running over the icon */
.a-plate:not(.a-plate--wide) > .a-ico { position: static; margin-bottom: auto; flex: none; }
.a-plate:not(.a-plate--wide) > .a-ico + * { margin-top: 0.75rem; }