/* ============================================================================
   TalkWing — talkwing.co
   Palette and geometry are lifted verbatim from the iOS app so the site, the
   app, the keyboard and the extension read as one product:
     mobile/ios/Shared/TWTheme.swift  — the light/dark palettes
     mobile/ios/Shared/TWLogo.swift   — the monogram, the -13 degree lean,
                                        and the ombre tile gradient
   House rule from TWTheme.swift: surfaces and actions are GRAYSCALE. The gold
   is an attention colour only — it marks the recommended reply and nothing
   else. Do not spend it on decoration.
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* light — TWTheme.light */
  --ink: #0a0a0a;
  --ink-62: rgba(10, 10, 10, 0.62);
  --ink-42: rgba(10, 10, 10, 0.42);
  --paper: #f2f2f3;
  --white: #ffffff;
  --hair: rgba(10, 10, 10, 0.11);

  /* dark — TWTheme.dark */
  --night: #151516;
  --night-card: #212122;
  --lit: #ececec;
  --lit-62: rgba(236, 236, 236, 0.62);
  --lit-42: rgba(236, 236, 236, 0.42);
  --night-hair: rgba(236, 236, 236, 0.13);

  /* the app-icon ombre */
  --ombre-1: #e9e9e9;
  --ombre-2: #8f8f8f;
  --ombre-3: #0a0a0a;

  /* the one accent */
  --gold: #ffce4a;
  --gold-deep: #e0a52b;

  /* the logo's lean */
  --lean: -13deg;

  --display: "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1180px;
  --gutter: 24px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--ink);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- bands ---------------------------------------------------------------
   Every band declares its own semantic tokens, so components below never
   need to know whether they are sitting on paper or on night.            */

.band {
  --fg: var(--ink);
  --fg-dim: var(--ink-62);
  --fg-faint: var(--ink-42);
  --surface: var(--white);
  --hairline: var(--hair);
  --btn: var(--ink);
  --btn-fg: var(--white);
  --accent: var(--gold-deep);
  /* always a step away from --surface, so the bubble reads inside the panel
     whichever light band it lands on */
  --bubble: var(--paper);
  position: relative;
  background: var(--paper);
  color: var(--fg);
}

.band--white {
  background: var(--white);
  --surface: var(--paper);
  --bubble: var(--white);
}

.band--night {
  --fg: var(--lit);
  --fg-dim: var(--lit-62);
  --fg-faint: var(--lit-42);
  --surface: var(--night-card);
  --hairline: var(--night-hair);
  --btn: #f2f2f2;
  --btn-fg: var(--ink);
  --accent: var(--gold);
  background: var(--night);
  color: var(--fg);
}

.band--pitch {
  --fg: var(--lit);
  --fg-dim: var(--lit-62);
  --fg-faint: var(--lit-42);
  --surface: #161616;
  --hairline: var(--night-hair);
  --btn: #f2f2f2;
  --btn-fg: var(--ink);
  --accent: var(--gold);
  background: var(--ink);
  color: var(--fg);
}

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band > .wrap {
  padding-block: 104px;
}

/* --- type ---------------------------------------------------------------- */

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* the -13 degree lean, borrowed from the monogram, as the section marker */
.eyebrow::before {
  content: "";
  width: 15px;
  height: 2px;
  background: currentColor;
  transform: skewX(var(--lean));
  flex: none;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.02;
  text-wrap: balance;
}

h2 {
  font-size: clamp(32px, 4.6vw, 54px);
  margin-top: 26px;
}

h3 {
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.22;
}

.lede {
  font-size: clamp(18px, 1.85vw, 21px);
  line-height: 1.5;
  color: var(--fg-dim);
  max-width: 56ch;
  margin-top: 30px;
  text-wrap: pretty;
}

.lean {
  font-style: italic;
}

.spec {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-dim);
}

/* --- the mark ------------------------------------------------------------ */

.mark {
  display: block;
  color: currentColor;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.wordmark .mark {
  width: 25px;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--btn);
  color: var(--btn-fg);
  cursor: pointer;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    background 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  opacity: 0.9;
}

.btn--quiet {
  background: transparent;
  color: var(--fg);
  border-color: var(--hairline);
}

.btn--quiet:hover {
  background: var(--surface);
  opacity: 1;
}

/* --- header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(242, 242, 243, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hair);
}

.site-header .wrap {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  color: var(--ink-62);
}

.site-nav a:hover {
  color: var(--ink);
}

@media (max-width: 720px) {
  .site-nav {
    display: none;
  }
}

/* --- the accordion (all screens) -----------------------------------------
   With JS present (body.js-acc), every band folds to its title row on
   every screen size. The stacked titles are the site map. One open at a
   time; the rest fold. No-JS visitors get the full page, nothing hidden. */

.acc-head {
  display: none;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-top: 1px solid var(--hairline);
  color: var(--fg);
  font: inherit;
  /* text aligns with the centered .wrap column on wide screens */
  padding-block: 17px;
  padding-inline: max(
    var(--gutter),
    calc((100% - var(--measure)) / 2 + var(--gutter))
  );
  cursor: pointer;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 16px;
  align-items: center;
  scroll-margin-top: 72px;
}

.acc-title {
  font-weight: 600;
  font-size: clamp(17.5px, 1.5vw, 20px);
  letter-spacing: -0.02em;
}

.acc-teaser {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--fg-dim);
}

/* the fold marker: plus when closed, minus when open */
.acc-head::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 19px;
  color: var(--fg-dim);
}

section.acc-open .acc-head::after {
  content: "−";
  color: var(--fg);
}

.js-acc .acc-head {
  display: grid;
}

.js-acc section[data-acc]:not(.acc-open) > .wrap {
  display: none;
}

/* an open section doesn't need 104px of air — its title row already
   provides the top edge */
.js-acc section[data-acc] > .wrap {
  padding-block: 14px 64px;
}

/* the title row already says where we are; the eyebrow would say it twice */
.js-acc section[data-acc] > .wrap > .eyebrow,
.js-acc section[data-acc] > .wrap > div > .eyebrow {
  display: none;
}

.js-acc section[data-acc] > .wrap h2 {
  margin-top: 8px;
}

/* in accordion mode the ombre stays as a slim, non-folding divider: the
   hand-over from the light rows to the dark ones */
.js-acc .ombre > .wrap {
  padding-block: 52px;
}

.js-acc .ombre .mark {
  width: clamp(90px, 14vw, 150px);
}

/* anchors land below the sticky header */
[id] {
  scroll-margin-top: 84px;
}

@media (max-width: 720px) {
  [id] {
    scroll-margin-top: 74px;
  }
}

/* --- hero ---------------------------------------------------------------- */

.hero > .wrap {
  padding-block: 72px 88px;
}

/* the question people land on deserves more than eyebrow size */
.hero .eyebrow {
  font-size: 15px;
}

.hero-see {
  margin-top: 20px;
}

.hero-see a {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
}

.hero-see a:hover {
  color: var(--fg-dim);
}

/* copy on the left, the keyboard demo on the right; stacked on a phone */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 40px 64px;
  align-items: center;
}

@media (max-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-demo {
    max-width: 560px;
  }
}

.hero h1 {
  font-size: clamp(38px, 4.9vw, 62px);
  letter-spacing: -0.038em;
  margin-top: 22px;
  max-width: 15ch;
}

/* the 15ch cap is a desktop measure; on a phone it is narrower than the
   column and strands a word on its own line */
@media (max-width: 700px) {
  .hero h1 {
    max-width: none;
  }
}

.hero h1 .lean {
  display: block;
  color: var(--ink-62);
}

/* the 1-2-3 of what it actually does, in the plainest register on the page */
.hero-steps {
  margin-top: 32px;
  list-style: none;
  display: grid;
  gap: 12px;
  counter-reset: step;
  max-width: 54ch;
}

.hero-steps li {
  display: flex;
  gap: 13px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-dim);
}

.hero-steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(4px);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--white);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg);
}

.hero-steps b {
  color: var(--fg);
  font-weight: 600;
}

/* --- the hero demo: one 12-second loop -----------------------------------
   Every element sits in the layout the whole time and only fades, so the
   panel never changes height mid-loop. The cards and the sent-message
   sequence share one grid cell — they are never visible together.       */

.hero-demo .panel {
  box-shadow: 0 24px 60px -32px rgba(10, 10, 10, 0.28);
}

/* the demo folds behind its own header bar: open by default, the caret
   shows the way out */
.hero-demo .demo-head {
  cursor: pointer;
  user-select: none;
}

.hero-demo .demo-head::after {
  content: "\25B8";
  margin-left: auto;
  font-size: 17px;
  line-height: 1;
  color: var(--fg-dim);
  transform: rotate(90deg);
  transition: transform 0.18s ease;
}

#demo-fold:checked ~ .panel .demo-head::after {
  transform: none;
}

#demo-fold:checked ~ .panel .demo-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

#demo-fold:checked ~ .panel .thread {
  display: none;
}

.hd {
  animation-duration: 30s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* the rotation crossfade: JS dims the thread, swaps the copy, restarts */
.hero-demo .thread {
  transition: opacity 0.35s ease;
}

.hero-demo .thread.swap {
  opacity: 0;
}

/* animation names hang off .run so JS can restart the whole choreography
   (drop the class, force a reflow, put it back) when the scenario rotates */
.run .hd-msg {
  animation-name: hd-msg;
}

/* the read: one line of strategy before the replies — the part that is
   TalkWing thinking, not TalkWing writing */
.hd-read {
  font-size: 13.5px;
  line-height: 1.5;
  font-style: italic;
  color: var(--fg-dim);
  padding-left: 12px;
  border-left: 2px solid var(--fg-faint);
}

.run .hd-ask {
  animation-name: hd-ask;
}

.run .hd-read {
  animation-name: hd-read;
}

/* the context line under the incoming message is an annotation, not a
   second bubble — undo the .msg-in p bubble chrome it would inherit */
.hero-demo .msg .msg-meta {
  background: none;
  border: 0;
  padding: 2px 2px 0;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.4;
}

/* the keyboard bar the suggestions come from */
.hd-kbd {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bubble);
}

.run .hd-kbd {
  animation-name: hd-kbd;
}

.hd-key {
  flex: none;
  width: 40px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--ink);
  color: var(--lit);
}

.run .hd-key {
  animation: hd-press 30s 1 both;
}

.hd-key .mark {
  width: 18px;
}

.hd-kbd-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--fg-dim);
}

.hd-slot {
  display: grid;
}

.hd-slot > * {
  grid-area: 1 / 1;
  min-width: 0;
}

.hd-cards {
  display: grid;
  gap: 8px;
  align-content: start;
}

.run .hd-card {
  animation-name: hd-cards;
}

/* a light stagger between the three suggestions */
.hd-card:nth-child(2) {
  animation-delay: 0.5s;
}

.hd-card:nth-child(3) {
  animation-delay: 1s;
}

.hd-after {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* the typing dots and her reply take the same slot in turn, so the dots
   don't leave a hole in the layout once the reply lands */
.hd-turn {
  display: grid;
}

.hd-turn > * {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
}

.run .hd-sent {
  animation-name: hd-sent;
}

.run .hd-typing {
  animation-name: hd-typing;
}

.run .hd-reply {
  animation-name: hd-reply;
}

.run .hd-verdict {
  animation-name: hd-verdict;
}

@keyframes hd-msg {
  0%,
  2% {
    opacity: 0;
    transform: translateY(8px);
  }
  5%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes hd-kbd {
  0%,
  9% {
    opacity: 0;
    transform: translateY(8px);
  }
  12%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes hd-press {
  0%,
  13%,
  17%,
  100% {
    transform: none;
  }
  15% {
    transform: scale(0.86);
  }
}

@keyframes hd-ask {
  0%,
  16% {
    opacity: 0;
    transform: translateY(8px);
  }
  19%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes hd-read {
  0%,
  23% {
    opacity: 0;
    transform: translateY(6px);
  }
  26%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes hd-cards {
  0%,
  29% {
    opacity: 0;
    transform: translateY(10px);
  }
  33%,
  65% {
    opacity: 1;
    transform: none;
  }
  69%,
  100% {
    opacity: 0;
    transform: translateY(-6px);
  }
}

@keyframes hd-sent {
  0%,
  69% {
    opacity: 0;
    transform: translateY(10px);
  }
  73%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes hd-typing {
  0%,
  74% {
    opacity: 0;
  }
  76%,
  82% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
  }
}

@keyframes hd-reply {
  0%,
  83% {
    opacity: 0;
    transform: translateY(10px);
  }
  87%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes hd-verdict {
  0%,
  91% {
    opacity: 0;
  }
  94%,
  100% {
    opacity: 1;
  }
}

/* motion off: freeze the demo on its most explanatory frame — the message
   and the three replies — and drop the send sequence entirely */
@media (prefers-reduced-motion: reduce) {
  .run .hd,
  .run .hd-key {
    animation: none;
  }

  .hd {
    opacity: 1;
    transform: none;
  }

  .hero-demo .hd-after {
    display: none;
  }
}

.hero-actions {
  margin-top: 40px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: 24px;
  font-size: 15.5px;
  color: var(--fg-faint);
}

.hero-note a {
  color: var(--fg-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.hero-note a:hover {
  color: var(--fg);
}

/* --- the three intelligences ---------------------------------------------
   Editorial rows, not a card grid. The name is set at display scale so it
   carries the same authority as the section head — three feature cards with
   21px titles read like a template, which is exactly what this is not.
   No numbering: these run simultaneously, they are not a sequence.        */

.intel {
  margin-top: 76px;
  border-top: 1px solid var(--hairline);
}

.intel-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 28px 64px;
  padding: 54px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}

.intel-row h3 {
  font-size: clamp(27px, 3.2vw, 39px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.04;
  max-width: 11ch;
}

.intel-body p {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 56ch;
}

/* scoped tighter than `.intel-body p` so the colour and rhythm actually win */
.intel-body .intel-asks {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-dim);
  line-height: 1.6;
}

/* The technical half, set under the question it answers. Separated by weight
   rather than opacity — a lighter grey here drops under 3:1 and stops being
   readable at 12px. */
.intel-body .intel-asks span {
  display: block;
  margin-top: 2px;
  font-weight: 400;
  color: var(--fg-dim);
}

@media (max-width: 860px) {
  .intel-row {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 36px 0;
  }

  .intel-row h3 {
    max-width: none;
  }
}

.intel-close {
  margin-top: 68px;
  max-width: 30ch;
  font-size: clamp(24px, 2.9vw, 34px);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.028em;
  color: var(--fg-faint);
  text-wrap: balance;
}

.intel-close .lean {
  color: var(--fg);
}

/* --- the moment: thread + read ------------------------------------------- */

.moment {
  margin-top: 64px;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 28px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .moment {
    grid-template-columns: 1fr;
  }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

/* the empty composer sits at the foot of the panel, so the two panels
   agree on height and the silence is the point */
.panel .composer {
  margin-top: auto;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}

.bubble {
  max-width: 30ch;
  padding: 13px 16px;
  border-radius: 18px 18px 18px 5px;
  background: var(--bubble);
  border: 1px solid var(--hairline);
  font-size: 16px;
  line-height: 1.45;
}

.composer {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px dashed var(--hairline);
  color: var(--fg-faint);
  font-size: 15.5px;
}

.caret {
  width: 2px;
  height: 18px;
  background: var(--fg-dim);
  animation: blink 1.15s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

/* what it worked out */
.read {
  display: grid;
  gap: 0;
}

.read-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15.5px;
  align-items: baseline;
}

.read-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.read-row dt {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

@media (max-width: 480px) {
  .read-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
}

/* --- replies ------------------------------------------------------------- */

.replies {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px) {
  .replies {
    grid-template-columns: 1fr;
  }
}

.reply {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.reply-label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* the lean again, marking each angle */
.reply-label::before {
  content: "";
  width: 11px;
  height: 2px;
  background: var(--fg-faint);
  transform: skewX(var(--lean));
  flex: none;
}

.reply-text {
  font-size: 16.5px;
  line-height: 1.48;
  flex: 1;
}

.reply-why {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-dim);
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
}

/* the single permitted use of gold */
.reply--pick {
  border-color: var(--accent);
}

.reply--pick .reply-label::before {
  background: var(--accent);
}

.pick-tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- moments list -------------------------------------------------------- */

.moments {
  margin-top: 52px;
  border-top: 1px solid var(--hairline);
}

.moment-item {
  display: grid;
  grid-template-columns: 265px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: baseline;
}

.moment-item p {
  color: var(--fg-dim);
  font-size: 17px;
  line-height: 1.55;
  max-width: 60ch;
}

@media (max-width: 720px) {
  .moment-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* --- the ombre band ------------------------------------------------------
   The app icon is a diagonal ombre from #e9e9e9 to #0a0a0a. The page walks
   the same diagonal here, once, at its midpoint: light copy on the light
   corner, the white mark on the dark corner. This is where the site hands
   over from paper to night.                                              */

/* Angled steeply enough that the whole bottom edge lands on --night, so the
   band joins the one below it without a seam, while the diagonal still reads
   as the icon's ombre. */
.ombre {
  background: linear-gradient(
    152deg,
    var(--ombre-1) 0%,
    var(--ombre-2) 46%,
    var(--night) 100%
  );
  color: var(--ink);
}

.ombre > .wrap {
  padding-block: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.ombre h2 {
  margin-top: 14px;
  max-width: 18ch;
}

.ombre .eyebrow {
  color: rgba(10, 10, 10, 0.55);
}

.ombre p {
  margin-top: 16px;
  max-width: 54ch;
  color: rgba(10, 10, 10, 0.68);
}

.ombre .mark {
  width: clamp(120px, 20vw, 210px);
  color: var(--white);
  opacity: 0.96;
}

@media (max-width: 820px) {
  .ombre {
    background: linear-gradient(
      170deg,
      var(--ombre-1) 0%,
      var(--ombre-2) 52%,
      var(--night) 100%
    );
  }

  .ombre > .wrap {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

/* --- surfaces ------------------------------------------------------------ */

/* Six cards, so the columns are explicit rather than auto-fit — auto-fit
   orphans the last card on tablet widths. 3 / 2 / 1 always fills a row. */
.surfaces {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1000px) {
  .surfaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .surfaces {
    grid-template-columns: 1fr;
  }
}

.surface {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.16s ease;
}

.surface:hover {
  border-color: var(--fg-faint);
}

/* only the description grows — :not(.spec) keeps the store line pinned to
   the link below it, otherwise the free space splits between the two */
.surface p:not(.spec) {
  color: var(--fg-dim);
  font-size: 15.5px;
  line-height: 1.52;
  flex: 1;
}

.surface-get {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg);
}

.surface-get::after {
  content: "→";
  transition: transform 0.16s ease;
}

.surface:hover .surface-get::after {
  transform: translateX(3px);
}

.surface-get[aria-disabled="true"] {
  color: var(--fg-faint);
  cursor: default;
}

.surface-get[aria-disabled="true"]::after {
  content: "";
}

/* --- the objection, answered ---------------------------------------------
   A 2x2 of statements. Deliberately not the label|prose row used twice
   already on this page — the claim leads at heading scale and the prose
   answers under it.                                                       */

.contrast {
  margin-top: 76px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 60px 72px;
}

.contrast-item {
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}

.contrast-item h3 {
  font-size: clamp(21px, 2.1vw, 26px);
  letter-spacing: -0.026em;
  line-height: 1.16;
  max-width: 22ch;
}

.contrast-item p {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-dim);
  max-width: 48ch;
}

@media (max-width: 820px) {
  .contrast {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

/* --- engineering --------------------------------------------------------- */

.cols {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 40px;
}

@media (max-width: 1000px) {
  .cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .cols {
    grid-template-columns: 1fr;
  }
}

.col {
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}

.col p {
  margin-top: 12px;
  color: var(--fg-dim);
  font-size: 15.5px;
  line-height: 1.55;
}

/* --- never --------------------------------------------------------------- */

.never {
  margin-top: 46px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 40px;
}

.never li {
  list-style: none;
  padding: 17px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 16px;
  display: flex;
  gap: 13px;
  align-items: baseline;
}

.never li::before {
  content: "—";
  color: var(--fg-faint);
  flex: none;
}

/* --- footer -------------------------------------------------------------- */

.site-footer > .wrap {
  padding-block: 46px;
  display: flex;
  align-items: center;
  gap: 18px 26px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--fg-dim);
}

.site-footer .footer-links {
  margin-left: auto;
  display: flex;
  gap: 22px;
}

.site-footer a:hover {
  color: var(--fg);
}

/* --- long-form pages (privacy, terms) ------------------------------------ */

.doc {
  max-width: 760px;
}

.doc h1 {
  font-size: clamp(34px, 5vw, 50px);
  margin-top: 18px;
}

.doc h2 {
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-top: 44px;
}

.doc p,
.doc li {
  color: var(--fg-dim);
  margin-top: 14px;
  font-size: 16.5px;
}

.doc li {
  margin-left: 20px;
}

.doc strong {
  color: var(--fg);
  font-weight: 600;
}

.doc a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.callout {
  margin-top: 26px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.callout p:first-child {
  margin-top: 0;
}

/* --- entrance ------------------------------------------------------------
   One orchestrated reveal, nothing more.                                  */

.rise {
  opacity: 0;
  transform: translateY(14px);
}

.rise.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .rise,
  .rise.in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .caret {
    animation: none;
  }

  .btn:hover {
    transform: none;
  }
}

/* --- the proof section: tabs, threads, doors, drawer -------------------
   Ported from the approved proposal (artifact v15). Components ride the
   band tokens; entrance choreography waits for the .rise observer's .in
   and replays on every tab re-select. Zero JavaScript beyond the
   existing observer.                                                  */
  /* --- the scene switcher -------------------------------------------------- */
  .scenes { margin-top: 52px; }

  .scenes > input {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .scene-bar {
    display: flex;
    align-items: center;
    gap: 16px 20px;
    flex-wrap: wrap;
  }

  .scene-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface);
    max-width: 100%;
    overflow-x: auto;
  }

  .scene-tabs label {
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg-dim);
    padding: 9px 16px;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.16s ease, background 0.16s ease;
  }

  .scene-tabs label:hover { color: var(--fg); }

  .scene-step { margin-left: auto; }

  .pair { display: none; align-items: center; gap: 14px; }

  .pair .count {
    font-family: var(--mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--fg-faint);
    letter-spacing: 0.06em;
  }

  .pair label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface);
    color: var(--fg-dim);
    font-size: 16px;
    cursor: pointer;
    user-select: none;
    transition: color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
  }

  .pair label:hover {
    color: var(--fg);
    border-color: var(--fg-faint);
    transform: translateY(-1px);
  }

  #sc-opener:checked ~ .scene-bar .scene-tabs label[for="sc-opener"],
  #sc-client:checked ~ .scene-bar .scene-tabs label[for="sc-client"],
  #sc-public:checked ~ .scene-bar .scene-tabs label[for="sc-public"] {
    background: var(--btn);
    color: var(--btn-fg);
  }

  #sc-opener:checked ~ .scene-bar .pair[data-p="opener"],
  #sc-client:checked ~ .scene-bar .pair[data-p="client"],
  #sc-public:checked ~ .scene-bar .pair[data-p="public"] { display: inline-flex; }

  #sc-opener:focus-visible ~ .scene-bar .scene-tabs label[for="sc-opener"],
  #sc-client:focus-visible ~ .scene-bar .scene-tabs label[for="sc-client"],
  #sc-public:focus-visible ~ .scene-bar .scene-tabs label[for="sc-public"] {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
  }

  .scene { display: none; }

  #sc-opener:checked ~ .scene[data-s="opener"],
  #sc-client:checked ~ .scene[data-s="client"],
  #sc-public:checked ~ .scene[data-s="public"] { display: block; }

  /* --- the conversation ----------------------------------------------------
     Grey bubbles left: them. Ink bubbles right: what TalkWing wrote with you.
     Each thread child carries an inline --d entrance delay; toggling
     display on tab switch restarts the whole choreography. The typing dots
     hide at the payoff's --d, so the reply appears to replace them.        */
  .convo {
    margin-top: 26px;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 18px;
    align-items: start;
  }

  .panel {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    padding: 20px;
  }

  .panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--hairline);
  }

  .thread {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .in .scene[data-s] .thread > * {
    animation: rise-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--d, 0s);
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  .profile-chip {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--hairline);
    background: var(--bubble);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--fg-dim);
  }

  .profile-chip .spec { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }

  .msg { max-width: 82%; }

  .msg p {
    padding: 12px 15px;
    font-size: 15.5px;
    line-height: 1.45;
  }

  .msg-in { align-self: flex-start; }

  .msg-in p {
    background: var(--bubble);
    border: 1px solid var(--hairline);
    border-radius: 18px 18px 18px 5px;
  }

  .msg-out {
    align-self: flex-end;
    text-align: left;
    display: flex;
    flex-direction: column;
  }

  .msg-out p {
    background: var(--ink);
    color: var(--lit);
    border-radius: 18px 18px 5px 18px;
  }

  /* the credit is page annotation, not part of the message — it sits below,
     in the chrome row where timestamps live, so nobody thinks the product
     prints a label on what they send */
  .msg-out .wrote {
    order: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    background: none;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .msg-out .wrote::before {
    content: "";
    width: 11px; height: 2px;
    background: var(--accent);
    transform: skewX(var(--lean));
  }

  .msg-meta {
    margin-top: 4px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
  }

  .msg-in .msg-meta { text-align: left; }
  .msg-out .msg-meta { text-align: right; }

  .gap-line {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--fg-faint);
    width: 100%;
  }

  .gap-line::before, .gap-line::after {
    content: "";
    height: 1px;
    background: var(--hairline);
    flex: 1;
  }

  .typing {
    align-self: flex-start;
    display: inline-flex;
    gap: 5px;
    padding: 13px 15px;
    border-radius: 18px 18px 18px 5px;
    background: var(--bubble);
    border: 1px solid var(--hairline);
  }

  .typing i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fg-faint);
    animation: tick 1.1s infinite;
  }

  .typing i:nth-child(2) { animation-delay: 0.18s; }
  .typing i:nth-child(3) { animation-delay: 0.36s; }

  @keyframes tick {
    0%, 60%, 100% { opacity: 0.35; transform: none; }
    30% { opacity: 1; transform: translateY(-3px); }
  }

  .in .scene[data-s] .typing {
    animation: rise-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both,
      vanish 0.01s var(--hide, 4s) both;
  }

  @keyframes vanish { to { display: none; } }

  .verdict {
    align-self: center;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    color: var(--fg-dim);
  }

  /* a scene can hold several numbered examples: nested radios, same trick */
  input.vh {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .sub-bar {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .sub-bar .spec { margin-right: 4px; }

  .sub-bar label {
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.03em;
    color: var(--fg-dim);
    padding: 7px 13px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
  }

  .sub-bar label:hover { color: var(--fg); }

  #pub-1:checked ~ .sub-bar label[for="pub-1"],
  #pub-2:checked ~ .sub-bar label[for="pub-2"],
  #pub-3:checked ~ .sub-bar label[for="pub-3"],
  #cli-1:checked ~ .sub-bar label[for="cli-1"],
  #cli-2:checked ~ .sub-bar label[for="cli-2"],
  #cli-3:checked ~ .sub-bar label[for="cli-3"],
  #op-1:checked ~ .sub-bar label[for="op-1"],
  #op-2:checked ~ .sub-bar label[for="op-2"],
  #op-3:checked ~ .sub-bar label[for="op-3"] {
    color: var(--btn-fg);
    background: var(--btn);
    border-color: var(--btn);
  }

  .subscene { display: none; }

  #pub-1:checked ~ .subscene[data-sub="1"],
  #pub-2:checked ~ .subscene[data-sub="2"],
  #pub-3:checked ~ .subscene[data-sub="3"],
  #cli-1:checked ~ .subscene[data-sub="1"],
  #cli-2:checked ~ .subscene[data-sub="2"],
  #cli-3:checked ~ .subscene[data-sub="3"],
  #op-1:checked ~ .subscene[data-sub="1"],
  #op-2:checked ~ .subscene[data-sub="2"],
  #op-3:checked ~ .subscene[data-sub="3"] { display: block; }

  /* the social page: a generic feed card — your post, the comment, your reply
     threaded under it. Unbranded on purpose; the layout does the recognising. */
  .post-head { display: flex; align-items: center; gap: 10px; }

  .avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bubble);
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--fg-dim);
    flex: none;
  }

  .post-name { font-size: 14.5px; font-weight: 600; }
  .post-name .spec { font-weight: 500; margin-left: 6px; }

  .post-text { margin-top: 10px; font-size: 15.5px; }

  .post-img {
    margin-top: 12px;
    height: 110px;
    border-radius: 12px;
    background: var(--bubble);
    border: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
  }

  .post-acts {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--hairline);
    display: flex;
    gap: 22px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
  }

  .comment {
    display: flex;
    gap: 10px;
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--hairline);
  }

  .comment-body { flex: 1; min-width: 0; }
  .comment-body > p { font-size: 15px; line-height: 1.45; margin-top: 2px; }

  .comment .who { font-size: 13.5px; font-weight: 600; }
  .comment .who .spec { font-weight: 500; margin-left: 6px; }

  .comment-likes {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-faint);
  }

  .comment--reply { margin-left: 42px; border-top: 0; padding-top: 10px; margin-top: 0; }

  .comment--reply .chip {
    background: var(--ink);
    color: var(--lit);
    border-radius: 14px 14px 14px 5px;
    padding: 11px 14px;
    font-size: 15px;
    line-height: 1.45;
    margin-top: 4px;
  }

  .comment--reply .comment-body { display: flex; flex-direction: column; }

  .comment--reply .wrote {
    order: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    background: none;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
  }

  .comment--reply .wrote::before {
    content: "";
    width: 11px; height: 2px;
    background: var(--accent);
    transform: skewX(var(--lean));
  }

  /* the extension moment: the reply box with the TalkWing icon, and the
     drawer that opens under it after "read this thread" */
  .replybox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 42px;
    padding: 11px 14px;
    border: 1px dashed var(--hairline);
    border-radius: 14px;
    color: var(--fg-faint);
    font-size: 14.5px;
  }

  .replybox .tw-btn {
    margin-left: auto;
    width: 32px; height: 27px;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fg);
  }

  .replybox .tw-btn .mark { width: 16px; }

  .tw-drawer {
    margin-left: 42px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--bubble);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .tw-drawer-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
  }

  .tw-drawer-head .mark { width: 16px; }
  .tw-drawer-head b { font-size: 13px; letter-spacing: -0.01em; }
  .tw-drawer-head .spec { margin-left: auto; font-size: 10.5px; }

  .tw-read { font-size: 14px; line-height: 1.5; color: var(--fg-dim); }
  .tw-read strong { color: var(--fg); font-weight: 600; }

  .vcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

  .vcard {
    border: 1px solid var(--hairline);
    border-radius: 12px;
    padding: 12px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .vcard-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  .vcard-label::before {
    content: "";
    width: 10px; height: 2px;
    background: var(--fg-faint);
    transform: skewX(var(--lean));
    flex: none;
  }

  .vcard--pick { border-color: var(--accent); }
  .vcard--pick .vcard-label::before { background: var(--accent); }

  .vcard-text { font-size: 14px; line-height: 1.45; flex: 1; }

  .vcard-why {
    font-size: 12px;
    line-height: 1.5;
    color: var(--fg-dim);
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
  }

  @media (max-width: 620px) {
    .vcards { grid-template-columns: 1fr; }
    .replybox, .tw-drawer, .comment--reply { margin-left: 20px; }
  }

  /* the rail: the read + the alternatives */
  .rail { display: flex; flex-direction: column; gap: 18px; }

  .read-line {
    font-size: 16px;
    line-height: 1.58;
    color: var(--fg-dim);
  }

  .read-line strong { color: var(--fg); font-weight: 600; }

  .alts {
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--fg-faint);
  }

  .alts em { font-style: italic; color: var(--fg-dim); }

  /* what it knew without being told — the anti-chatbot receipt */
  .knew {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 14px;
  }

  .knew .knew-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    color: var(--fg-faint);
    margin-right: 2px;
  }

  .knew span:not(.knew-tag) {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    color: var(--fg-dim);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--bubble);
  }

  .knew b {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
  }

  /* sliding doors: the same profile through both timelines */
  .doors {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
  }

  .in .scene[data-s] .anim {
    animation: rise-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--d, 0s);
  }

  /* you, unassisted — outline bubble, so dark stays "TalkWing wrote this" */
  .msg-out--raw p {
    background: transparent;
    color: var(--fg);
    border: 1.5px solid var(--ink);
  }

  .loadseq { display: grid; gap: 7px; padding: 2px 0; }

  .loadseq span {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--fg-dim);
    display: flex;
    align-items: center;
    gap: 9px;
  }

  .loadseq span::before {
    content: "";
    width: 9px; height: 2px;
    background: var(--fg-faint);
    transform: skewX(var(--lean));
    flex: none;
  }

  .loadseq span:last-child { color: var(--fg); font-weight: 600; }

  .chips-row { display: flex; flex-wrap: wrap; gap: 6px; }

  .chips-row span {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    color: var(--fg-dim);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--bubble);
  }

  .door .vcards { grid-template-columns: 1fr; }

  /* the payload strip */
  .pay-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px 14px;
    align-items: center;
    margin-top: 12px;
  }

  .pay-row .bar {
    height: 10px;
    border-radius: 999px;
    background: var(--bubble);
    border: 1px solid var(--hairline);
    position: relative;
    overflow: hidden;
  }

  .pay-row .bar i {
    position: absolute;
    inset: 0;
    width: var(--w, 50%);
    background: var(--ink);
    border-radius: inherit;
  }

  .pay-row .pay-note { grid-column: 2; }

  .pay .kick { margin-top: 14px; font-size: 15.5px; font-weight: 600; }

  .tomb {
    font-style: italic;
    color: var(--fg-faint);
    font-size: 14.5px;
    line-height: 1.5;
    padding: 14px 16px;
    border: 1px dashed var(--hairline);
    border-radius: 14px;
  }

  .resume-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: start;
    margin-top: 14px;
  }

  @media (max-width: 900px) {
    .doors, .resume-grid { grid-template-columns: 1fr; }
  }

  /* the playbook line: what was considered, what was dropped, and why */
  .played {
    margin-bottom: 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    line-height: 1.7;
    color: var(--fg-faint);
  }

  .played b { color: var(--fg-dim); font-weight: 600; }

  .after-note {
    margin-top: 44px;
    font-size: clamp(19px, 2vw, 24px);
    line-height: 1.45;
    color: var(--fg-dim);
    max-width: 52ch;
    text-wrap: pretty;
  }

  .after-note em { font-style: italic; color: var(--fg); }

  /* --- responsive ---------------------------------------------------------- */
  @media (max-width: 980px) {
    .convo { grid-template-columns: 1fr; }
  }

  @media (max-width: 720px) {
    .scene-step { margin-left: 0; }
    .msg { max-width: 94%; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .typing i { animation: none; }
    .in .scene[data-s] .thread > * { animation: none; }
    .in .scene[data-s] .anim { animation: none; }
    .in .scene[data-s] .typing { animation: none; display: none; }
    .pair label:hover { transform: none; }
  }

  /* no-JS: dots would bounce forever next to the visible payoff */
  .scenes:not(.in) .typing { display: none; }

  /* The two doors wear their makers. Cold slate chrome depicts "a chatbot" —
     it is a prop for the foreign product, not an addition to the TalkWing
     palette. TalkWing's door answers with the house paper, the monogram and
     an ink chip. */
  .door--bot {
    background: #edf0f4;
    border-color: rgba(35, 55, 80, 0.18);
  }

  .door--bot .panel-head { border-bottom-color: rgba(35, 55, 80, 0.14); }
  .door--bot .spec, .door--bot .verdict, .door--bot .msg-meta { color: rgba(35, 55, 80, 0.6); }

  .door--bot .msg-bot p {
    background: #ffffff;
    border: 1px solid rgba(35, 55, 80, 0.18);
    border-radius: 6px;
  }

  .door--bot .msg-in:not(.msg-bot) p { background: #ffffff; }
  .door--bot .msg-out--raw p { border-color: rgba(35, 55, 80, 0.5); color: rgba(20, 30, 45, 0.92); }
  .door--bot .gap-line::before, .door--bot .gap-line::after { background: rgba(35, 55, 80, 0.14); }

  .door--tw { border-color: var(--fg-faint); }
  .door--tw .panel-head .mark { color: var(--fg); flex: none; }

  .hl {
    font-weight: 600;
    padding: 2.5px 9px;
    border-radius: 7px;
    letter-spacing: 0.02em;
  }

  .hl--bot { background: #dde3eb; color: #33445a; }
  .hl--tw { background: var(--btn); color: var(--btn-fg); }

  /* The story frame. Story-shaped, not Instagram-cloned: the gradient ring
     and segmented progress bar are the recognisers; the ring's colour is a
     diegetic prop for the platform, not a TalkWing palette addition. */
  .story-card { max-width: 300px; display: grid; gap: 10px; }

  .ig-row { display: flex; align-items: center; gap: 10px; }

  .story-ring {
    flex: none;
    padding: 2.5px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7);
  }

  .story-ring .avatar { border-color: var(--surface); background: var(--surface); }

  .ig-name { font-size: 14px; font-weight: 600; }

  .ig-bio {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--fg-dim);
  }

  .story-frame {
    position: relative;
    border-radius: 16px;
    height: 190px;
    background: linear-gradient(160deg, var(--ombre-1), var(--ombre-2));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .story-top {
    position: absolute;
    top: 8px; left: 10px; right: 10px;
    display: flex;
    gap: 4px;
  }

  .story-top i {
    height: 2.5px;
    flex: 1;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
  }

  .story-top i.on { background: rgba(255, 255, 255, 0.95); }

  .story-glyph { font-size: 44px; transform: rotate(-8deg); }

  .story-cap {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    white-space: nowrap;
    background: var(--ink);
    color: var(--lit);
    font-size: 12.5px;
    padding: 6px 12px;
    border-radius: 8px;
  }

/* --- the scenes, vertically (mobile) -------------------------------------
   The horizontal tab bar disappears under 720px; these stacked label rows
   drive the same radios, so the open scene sits directly under its row.
   Radios mean exactly one scene is open — the accordion rule for free.  */

.scene-row,
.door-row {
  display: none;
}

@media (max-width: 720px) {
  .scenes .scene-bar {
    display: none;
  }

  .scenes {
    margin-top: 30px;
    border-bottom: 1px solid var(--hairline);
  }

  /* Deliberately NOT the section-row style: half the height, one line,
     numbered, indented, and a rotating caret instead of plus and minus.
     Big row means chapter; this row means a page inside it. */
  .scene-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 10px 14px;
    border-top: 1px solid var(--hairline);
    cursor: pointer;
  }

  .scene-row .n {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--fg-faint);
  }

  .scene-row .t {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  .scene-row .s {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.03em;
    color: var(--fg-faint);
  }

  .scene-row::after {
    content: "\25B8";
    font-size: 17px;
    line-height: 1;
    color: var(--fg-dim);
    transition: transform 0.18s ease;
  }

  #sc-opener:checked ~ .scene-row[for="sc-opener"]::after,
  #sc-client:checked ~ .scene-row[for="sc-client"]::after,
  #sc-public:checked ~ .scene-row[for="sc-public"]::after {
    transform: rotate(90deg);
    color: var(--fg);
  }

  #sc-opener:checked ~ .scene-row[for="sc-opener"] .t,
  #sc-client:checked ~ .scene-row[for="sc-client"] .t,
  #sc-public:checked ~ .scene-row[for="sc-public"] .t {
    font-weight: 600;
  }

  .scene {
    padding-bottom: 28px;
  }

  /* the two doors inside the opener: same sub-level grammar as the scene
     rows. The radio pair means opening one closes the other; the panel's
     own head is hidden because the row already names it. */
  .door-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px 10px 14px;
    border-top: 1px solid var(--hairline);
    cursor: pointer;
  }

  .door-row .t {
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.01em;
  }

  .door-row::after {
    content: "\25B8";
    margin-left: auto;
    font-size: 17px;
    line-height: 1;
    color: var(--fg-dim);
    transition: transform 0.18s ease;
  }

  #door-bot:checked ~ .door-row[for="door-bot"]::after,
  #door-tw:checked ~ .door-row[for="door-tw"]::after {
    transform: rotate(90deg);
    color: var(--fg);
  }

  #door-bot:checked ~ .door-row[for="door-bot"] .t,
  #door-tw:checked ~ .door-row[for="door-tw"] .t {
    font-weight: 600;
  }

  #door-bot:not(:checked) ~ .door--bot {
    display: none;
  }

  #door-tw:not(:checked) ~ .door--tw {
    display: none;
  }

  .doors {
    gap: 0;
  }

  .doors .door {
    margin-bottom: 12px;
  }

  .doors .door > .panel-head {
    display: none;
  }
}

/* --- show-all folds (mobile) ---------------------------------------------
   The moments list and the surface cards fold to their first three on a
   phone; a checkbox label reveals the rest. Pure CSS, works without JS. */

.show-more {
  display: none;
}

@media (max-width: 720px) {
  .show-more {
    display: inline-flex;
    margin-top: 24px;
    padding: 10px 18px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    color: var(--fg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  input.vh:checked ~ .show-more .when-closed,
  input.vh:not(:checked) ~ .show-more .when-open {
    display: none;
  }

  #more-moments:not(:checked) ~ .moments .moment-item:nth-child(n + 4),
  #more-surfaces:not(:checked) ~ .surfaces .surface:nth-child(n + 4) {
    display: none;
  }
}

/* --- meta lines are annotations, not bubbles -----------------------------
   .msg p wins the specificity fight against .msg-meta, so every timestamp
   and context line was inheriting bubble chrome. Undo it in one place. */

.msg p.msg-meta {
  background: none;
  border: 0;
  padding: 2px 2px 0;
  border-radius: 0;
  font-size: 11px;
  line-height: 1.4;
}

/* --- mobile spacing pass -------------------------------------------------
   The desktop rhythm is too airy on a phone. One block, late in the file
   so it wins ties, tightening every vertical gap under 720px. */

@media (max-width: 720px) {
  .js-acc section[data-acc] > .wrap {
    padding-block: 4px 34px;
  }

  /* the eyebrow above the h1 is hidden in accordion mode, so the h1's
     desktop top margin becomes dead air right under the title row */
  .js-acc .hero h1 {
    margin-top: 4px;
  }

  /* the demo panel is the hero's last element and carries its own internal
     air, so the section needs almost none below it */
  .js-acc #top > .wrap {
    padding-bottom: 10px;
  }

  .acc-head {
    padding-block: 13px;
  }

  h2 {
    margin-top: 14px;
  }

  .lede {
    margin-top: 16px;
  }

  .hero-grid {
    gap: 26px;
  }

  .hero-steps {
    margin-top: 20px;
    gap: 9px;
  }

  .hero-actions {
    margin-top: 24px;
  }

  .hero-note,
  .hero-see {
    margin-top: 14px;
  }

  .intel {
    margin-top: 26px;
  }

  .intel-close {
    margin-top: 30px;
  }

  .scenes {
    margin-top: 18px;
  }

  .convo {
    margin-top: 16px;
  }

  .after-note {
    margin-top: 22px;
  }

  .contrast {
    margin-top: 22px;
  }

  .moments {
    margin-top: 18px;
  }

  .moment-item {
    padding: 18px 0;
  }

  .surfaces,
  .cols {
    margin-top: 20px;
  }

  .never {
    margin-top: 18px;
  }

  .scene {
    padding-bottom: 18px;
  }
}