/*
 * yapp.chat — one stylesheet. Brand colours from the duck (extension/icons/icon-master.png);
 * the chat demos use the extension's own tokens and message styles
 * (extension/sc-theme.css, extension/chat.css), so they look like the real thing.
 */

@font-face {
  font-family: "Luckiest Guy";
  src: url("fonts/luckiest-guy-latin.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --duck: #ffd23f;
  --duck-deep: #ffb800;
  --badge-blue: #2f7cf6;
  --ink: #111;

  --twitch: #a970ff;
  --kick: #53fc18;
  --youtube: #ff4e45;

  --page: #0b0d12;
  --page-2: #10131a;
  --text: #eef1f6;
  --muted: #9aa3b2;
  --line: #232833;
  --card: #12151c;
  --card-2: #171b24;
  --hard-shadow: var(--badge-blue);
  --glow: 0.55;
  --link: #4f8dff;
  --faq-toggle: var(--duck-deep);

  /* The chat demos: the extension's dark theme. */
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2128;
  --surface-3: #262c34;
  --border: #30363d;
  --c-muted: #9da7b3;
  --accent: #ffd23f;
  --warn: #ff9a1f;
  --warn-soft: rgba(255, 154, 31, 0.12);
  --danger: #ff7b72;
  --danger-line: rgba(255, 123, 114, 0.45);
  --hover: rgba(255, 255, 255, 0.03);
  --name-l: 68%;

  --display: "Luckiest Guy", "Arial Black", Impact, sans-serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 16px;
  --gutter: clamp(16px, 4vw, 40px);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --page: #fff9ec;
    --page-2: #fff3d6;
    --text: #17181c;
    --muted: #5b6170;
    --line: #ecdfc2;
    --card: #ffffff;
    --card-2: #fffbf2;
    --hard-shadow: var(--ink);
    --glow: 0.28;
    --kick: #1f9c00;
    --link: #1457b8;
    --faq-toggle: #765400;

    --bg: #ffffff;
    --surface: #f6f8fa;
    --surface-2: #f3f4f6;
    --surface-3: #e5e8ec;
    --border: #d0d7de;
    --c-muted: #59636e;
    --accent: #8a6400;
    --warn: #b45309;
    --warn-soft: rgba(255, 154, 31, 0.14);
    --danger: #cf222e;
    --danger-line: rgba(207, 34, 46, 0.4);
    --hover: rgba(31, 35, 40, 0.04);
    --name-l: 38%;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --page: #fff9ec;
  --page-2: #fff3d6;
  --text: #17181c;
  --muted: #5b6170;
  --line: #ecdfc2;
  --card: #ffffff;
  --card-2: #fffbf2;
  --hard-shadow: var(--ink);
  --glow: 0.28;
  --kick: #1f9c00;
  --link: #1457b8;
  --faq-toggle: #765400;

  --bg: #ffffff;
  --surface: #f6f8fa;
  --surface-2: #f3f4f6;
  --surface-3: #e5e8ec;
  --border: #d0d7de;
  --c-muted: #59636e;
  --accent: #8a6400;
  --warn: #b45309;
  --warn-soft: rgba(255, 154, 31, 0.14);
  --danger: #cf222e;
  --danger-line: rgba(207, 34, 46, 0.4);
  --hover: rgba(31, 35, 40, 0.04);
  --name-l: 38%;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  scrollbar-color: color-mix(in srgb, var(--muted) 52%, transparent) transparent;
  scrollbar-width: thin;
  -webkit-tap-highlight-color: transparent; /* no tinted box over what you tap on phones (buttons show their own press) */
}

/* The extension's shared scrollbar model is scoped to .yc demos. Match it on the page root, with a
   WebKit fallback so the document scrollbar stays narrow, rounded and trackless everywhere. */
html::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html::-webkit-scrollbar-track,
html::-webkit-scrollbar-corner {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: color-mix(in srgb, var(--muted) 52%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 72%, transparent);
  background-clip: padding-box;
}

body {
  margin: 0;
  font: 16px/1.6 var(--font);
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

code,
kbd {
  font: 0.85em var(--mono);
}

code {
  padding: 1px 6px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 1px 7px;
  font-weight: 600;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 6px;
}

:focus-visible {
  outline: 3px solid var(--badge-blue);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 8px 14px;
  background: var(--duck);
  color: var(--ink);
  border-radius: 8px;
}

.skip:focus {
  top: 12px;
}

.wrap {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.wrap-narrow {
  width: min(800px, 100%);
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font: 700 15px/1.2 var(--font);
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
}

.btn-lg {
  padding: 15px 24px;
  font-size: 17px;
  border-radius: 14px;
}

.btn-sm {
  padding: 7px 14px;
  font-size: 14px;
  border-radius: 10px;
}

/* Yellow like the duck, outlined like the duck. */
.btn-duck {
  color: var(--ink);
  background: var(--duck);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--hard-shadow);
}

@media (hover: hover) {
  .btn-duck:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--hard-shadow);
  }
}

.btn-duck:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--hard-shadow);
}

/* Small (the header's): a smaller shadow, so its own lift and press too (the ones above would lose to this one). */
.btn-sm.btn-duck {
  box-shadow: 3px 3px 0 var(--hard-shadow);
}

@media (hover: hover) {
  .btn-sm.btn-duck:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--hard-shadow);
  }
}

.btn-sm.btn-duck:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--hard-shadow);
}

.btn-ghost:not(.yc *) {
  color: var(--text);
  background: color-mix(in srgb, var(--page) 64%, transparent);
  border-color: color-mix(in srgb, var(--muted) 28%, transparent);
  backdrop-filter: blur(8px);
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}

@media (hover: hover) {
  .btn-ghost:not(.yc *):hover {
    background: color-mix(in srgb, var(--card-2) 86%, transparent);
    border-color: color-mix(in srgb, var(--muted) 72%, transparent);
  }
}

/* While pressed (a phone's tap too, where there's no hover). */
.btn-ghost:not(.yc *):active {
  background: color-mix(in srgb, var(--card-2) 86%, transparent);
}

/* Dark text like the duck buttons (white was unreadable on the orange), and their lift and press, with a tilt. */
.btn-hype {
  color: var(--ink);
  background: linear-gradient(90deg, #f72585, #ff9a1f);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--hard-shadow);
}

@media (hover: hover) {
  .btn-hype:hover {
    transform: translate(-2px, -2px) rotate(-1deg);
    box-shadow: 5px 5px 0 var(--hard-shadow);
  }
}

.btn-hype:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--hard-shadow);
}

.btn-hype.go {
  animation: shake 0.5s;
}

@keyframes shake {
  20%, 60% { transform: translateX(-4px) rotate(-2deg); }
  40%, 80% { transform: translateX(4px) rotate(2deg); }
}

/* ---- Nav ---- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--page) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}

.nav.scrolled {
  border-bottom-color: var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1200px, 100%);
  height: 64px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 22px/1 var(--display);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand span {
  padding-top: 4px;
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-radius: 8px;
}

@media (hover: hover) {
  .nav-links a:hover {
    color: var(--text);
    background: var(--card);
  }
}

.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 18px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

@media (hover: hover) {
  .theme-toggle:hover {
    background: var(--card);
  }
}

.theme-toggle .i-sun,
:root[data-theme="light"] .theme-toggle .i-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .i-sun {
  display: block;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .i-sun {
    display: block;
  }

  :root:not([data-theme="dark"]) .theme-toggle .i-moon {
    display: none;
  }
}

/* ---- Hero ---- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}

.hero::before {
  position: absolute;
  z-index: -1;
  top: 4%;
  right: -10%;
  width: min(760px, 58vw);
  aspect-ratio: 1;
  content: "";
  background: color-mix(in srgb, var(--twitch) 55%, var(--badge-blue));
  border-radius: 50%;
  filter: blur(120px);
  opacity: calc(var(--glow) * 0.7);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(430px, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* What's new, above the eyebrow: a link to the changelog. */
.hero-new {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}

.hero-new-tag {
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-transform: uppercase;
  background: var(--duck);
  border-radius: 999px;
}

@media (hover: hover) {
  .hero-new:hover {
    color: var(--text);
  }
}

.eyebrow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 6px 14px 6px 10px;
  font-size: 14px;
  font-weight: 600;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.eyebrow .dot {
  width: 8px;
  height: 8px;
  background: #ff3b3b;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}

.eyebrow-plats {
  display: inline-flex;
  gap: 6px;
  padding-left: 8px;
  font-size: 15px;
  border-left: 1px solid var(--line);
}

/* The three platforms as tiles: the same size whatever each mark's shape, in their own colours
   (padding per mark so they look equally big; YouTube's is its play triangle, as on its app icon,
   whose path is already balanced on its centre of mass, so it needs no nudge). */
.eyebrow-plats .icon {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  padding: 4px;
  color: #fff;
  border-radius: 6px;
}

.eyebrow-plats .p-twitch {
  background: #9146ff;
}

.eyebrow-plats .p-kick {
  padding: 5px;
  color: #0b0e0f;
  background: #53fc18;
}

.eyebrow-plats .p-youtube {
  background: #ff0033;
}

.p-twitch { color: var(--twitch); }
.p-kick { color: var(--kick); }
.p-youtube { color: var(--youtube); }

h1 {
  font: clamp(3rem, 6.4vw, 5.4rem) / 0.95 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.hero-accent {
  position: relative;
  display: inline-block;
  color: var(--duck);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 5px 5px 0 var(--hard-shadow);
  transform: rotate(-3deg);
  animation: wobble 3.5s ease-in-out infinite;
}

@keyframes wobble {
  50% { transform: rotate(2deg) scale(1.04); }
}

.lead {
  max-width: 34em;
  margin-top: 24px;
  font-size: clamp(16px, 1.4vw, 18.5px);
  color: var(--muted);
  text-wrap: pretty;
}

.lead b {
  color: var(--text);
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
}

.trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Ticks and feature icons in the site's accent: the duck's yellow (dark gold on the light page). */
.trust .icon {
  color: var(--accent);
}

/* On a phone, four promises in two tidy columns rather than three and a lonely fourth. */
@media (max-width: 560px) {
  .trust {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 10px 28px;
  }
}

/* A product-first hero: the real side-panel UI, without a decorative stream. */
.hero-stage {
  position: relative;
  display: grid;
  place-items: center;
}

.hero-product {
  width: min(620px, 100%);
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 28px 80px -34px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--twitch) 12%, transparent);
}

.hero-product-bar,
.window-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 42px;
  padding: 0 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.lights {
  display: inline-flex;
  gap: 7px;
}

.lights i {
  width: 12px;
  height: 12px;
  background: #ff5f57;
  border-radius: 50%;
}

.lights i:nth-child(2) { background: #febc2e; }
.lights i:nth-child(3) { background: #28c840; }

.hero-product-title {
  display: inline-flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.hero-product-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.hero-product-mode .icon {
  width: 14px;
  height: 14px;
}

.hero-product > .hero-product-chat {
  height: 450px;
}

.hero-product-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 9px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

.hero-product-features span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 34px;
  padding: 5px 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-muted);
  text-align: center;
  background: color-mix(in srgb, var(--bg) 58%, transparent);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.hero-product-features .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* ---- Sections ---- */

.section {
  padding: clamp(56px, 7vw, 96px) 0;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: center;
}

.kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--duck);
  border-radius: 999px;
}

h2 {
  font: clamp(2rem, 4.6vw, 3.6rem) / 1.02 var(--display);
  letter-spacing: 0.01em;
  text-wrap: balance;
  text-transform: uppercase;
}

.hl-word {
  background: linear-gradient(90deg, var(--twitch), var(--youtube) 50%, var(--duck));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  margin-top: 16px;
  font-size: 18px;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- Chat window demo ---- */

#demo {
  overflow: clip;
  background:
    radial-gradient(ellipse at 50% 62%, color-mix(in srgb, var(--twitch) 6%, transparent), transparent 34rem),
    radial-gradient(ellipse at 50% 82%, color-mix(in srgb, var(--badge-blue) 5%, transparent), transparent 30rem);
}

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 22px;
  padding: 8px;
  background: color-mix(in srgb, var(--card) 76%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 10%);
  backdrop-filter: blur(10px);
}

.control-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-label {
  padding-left: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seg {
  display: inline-flex;
  padding: 4px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.seg button {
  padding: 7px 14px;
  font: 600 14px var(--font);
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.seg button[aria-checked="true"] {
  color: var(--ink);
  background: var(--duck);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 10px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s;
}

@media (hover: hover) {
  .switch:hover {
    background: var(--card-2);
    border-color: var(--line);
  }
}

.switch input {
  position: absolute;
  opacity: 0;
}

.switch .track {
  position: relative;
  width: 42px;
  height: 24px;
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.15s;
}

.switch .track::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  content: "";
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}

/* On: the duck's yellow with a dark knob, in both themes (as in the extension). */
.switch input:checked + .track {
  background: var(--duck);
  border-color: var(--duck);
}

.switch input:checked + .track::after {
  background: var(--ink);
  transform: translateX(18px);
}

.switch input:focus-visible + .track {
  outline: 3px solid var(--badge-blue);
  outline-offset: 2px;
}

/* Framed like the hero's window: the app, not a button (the hard blue offset is the buttons' and headline's). */
.window {
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 28px 80px -34px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--twitch) 12%, transparent);
}

.window-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding-right: 52px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
}

.chat-pages {
  display: none;
}

/* The chat window's own bar: adding a chat (for the look), the 🔔 mentions inbox, Settings. */
.window-tools {
  position: relative; /* the mentions list hangs from it */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.window-add {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.window-add-btn {
  gap: 4px;
  cursor: default;
}

.window-bell {
  display: inline-flex;
}

/* Its list under the bar, at the window's right edge and never wider than the window (the extension's is fixed
   to the page). */
.window-tools .mentions-pop {
  position: absolute;
  top: calc(100% - 2px);
  right: 8px;
  width: min(340px, calc(100% - 16px));
  max-height: min(460px, 60vh);
}

.columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr); /* the chats as tall as the window, scrolling inside (not taller, cut off) */
  height: 560px;
}

.col {
  min-height: 0;
}

.columns:focus-visible {
  outline-offset: -3px;
}

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

.columns.merged .col:not(:first-child) {
  display: none;
}

.col + .col {
  border-left: 1px solid var(--border);
}

.tips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
  font-size: 13px;
  color: var(--muted);
}

/* Things to try: each a button that shows it in the demo (js/main.js). */
.tips > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  font: inherit;
  color: inherit;
  background: color-mix(in srgb, var(--card) 72%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.tips > button:hover {
  border-color: var(--duck-deep);
  transform: translateY(-1px);
}

.tips > button:active {
  transform: none;
}

.tips .icon {
  width: 14px;
  height: 14px;
  color: var(--duck-deep);
}

.tips b {
  color: var(--text);
}

.tip-compact {
  display: none;
}

/* ---- The demo chats (js/chat-demo.js) ----
   They wear the extension's own styles: extension.css, generated from extension/sc-theme.css and chat.css
   (npm run site:sync), in .yc wrappers. Here is only what's the demos' own: their size, the duck pictures,
   name colours (the extension works them out in code), and the user card trimmed for a demo chat. */

.yc {
  --chat-size: 13.5px;
}

.yc > .pane {
  height: 100%;
}

/* A demo chat's list hands scrolling on to the page at its ends (the extension keeps it in the panel). On a
   touch screen it doesn't scroll at all: a swipe over a demo scrolls the page instead of getting stuck in
   the chat, which still follows its new messages. */
.yc .pane-list {
  overscroll-behavior: auto;
}

@media (hover: none) {
  .yc .pane-list {
    overflow-y: hidden;
  }
}

/* Names in their colour, readable in either theme (--name-l: the site's, per theme), YouTube's too as in the extension. */
.yc .name,
.yc .card-name,
.yc .reply-to[style*="--hue"] {
  color: hsl(var(--hue, 200) 85% var(--name-l));
}

/* A duck on the channel's colour for its picture (.avatar, below), not the extension's grey stand-in. */
.yc .source-pic .source-avatar {
  padding: 1.5px;
  background: hsl(var(--hue, 48) 70% 45%);
}

/* A repeat folding in: its count nudges. */
.yc .msg.bump .fold-count {
  display: inline-block; /* a transform doesn't move an inline box */
  animation: yc-nudge 0.3s;
}

/* The card in a demo chat (js/chat-demo.js fitCard): a shorter banner and smaller picture, parts left out
   where the chat is short, and only their messages give way; in a tiny chat the card scrolls (only then).
   The features' card has the same smaller top. */
.yc .usercard > :not(.card-recent) {
  flex-shrink: 0;
}

.yc .usercard .gone {
  display: none;
}

.yc .usercard.scrolls {
  overflow-y: auto;
}

.yc .usercard.tight .card-banner,
.mini-card .card-banner {
  height: 48px;
}

.yc .usercard.tight .card-head,
.mini-card .card-head {
  margin-top: -28px;
}

.yc .usercard.tight .card-avatar-frame,
.mini-card .card-avatar-frame {
  width: 52px;
  height: 52px;
  border-width: 3px;
}

/* A duck on their colour for a picture. */
.yc .card-avatar-frame {
  background: hsl(var(--hue) 60% 40%);
}

.yc .card-avatar {
  padding: 8px;
  object-fit: contain;
}

.mini-card .card-avatar {
  padding: 6px;
}

/* A cool banner separates the card chrome from the warm profile picture. */
.mini-card .card-banner {
  background: linear-gradient(120deg, #24588f, #342655);
}

/* Keep this marketing preview focused; the full card retains these details. */
.mini-card .stat-star,
.mini-card .stat-heart {
  display: none;
}

/* Stats onto a second line rather than cut, in a narrow chat. */
.yc .usercard .card-stat {
  white-space: normal;
}

/* A platform on a tile in its colour, the same size for all three (js/chat-demo.js platformTile: one svg,
   square and mark together, as in the extension); --tile sets the size. A touch below the middle of the
   line, where lowercase names have their middle. */
.platform-tile {
  position: relative;
  top: 0.08em;
  flex: 0 0 auto;
  width: var(--tile, 18px);
  height: var(--tile, 18px);
  color: #fff;
}

.platform-tile.twitch rect { fill: #9146ff; }
.platform-tile.kick rect { fill: #53fc18; }
.platform-tile.kick { color: #0b0e0f; }
.platform-tile.youtube rect { fill: #ff0033; }

.avatar {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 3px;
  background: hsl(var(--hue, 48) 70% 45%);
  border-radius: 50%;
}

.avatar img {
  width: 100%;
  height: 100%;
}

/* The two animated emotes (as 7TV's would be): duckJAM dances side to side with a hop on each beat, YAPPING
   chatters. Wherever they show (chat, picker, preview, the emote wall), so not only in the demos. In rotate,
   translate and scale, not transform, so the emote wall's hover tilt (a transform) adds to them. */
@keyframes duck-jam {
  0%,
  100% {
    rotate: -9deg;
    translate: 0 0;
  }

  25%,
  75% {
    translate: 0 -7%;
  }

  50% {
    rotate: 9deg;
    translate: 0 0;
  }
}

@keyframes duck-yapping {
  0%,
  100% {
    rotate: 0deg;
    scale: 1;
  }

  25% {
    rotate: -4deg;
    scale: 1.05 0.92;
  }

  50% {
    rotate: 0deg;
    scale: 0.98 1.04;
  }

  75% {
    rotate: 4deg;
    scale: 1.05 0.92;
  }
}

img[data-emote="duckJAM"] {
  transform-origin: 50% 85%;
  animation: duck-jam 0.6s ease-in-out infinite;
}

img[data-emote="YAPPING"] {
  transform-origin: 50% 85%;
  animation: duck-yapping 0.36s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  img[data-emote="duckJAM"],
  img[data-emote="YAPPING"] {
    animation: none;
  }
}

/* Emote preview on hover. */
.emote-tip {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px 8px;
  font: 600 12px var(--font);
  color: var(--text);
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.emote-tip img {
  width: 96px;
  height: 96px;
}

.emote-tip small {
  font-weight: 500;
  color: var(--muted);
}

/* ---- Features ---- */

#features {
  overflow: clip;
  background:
    radial-gradient(circle at 4% 8%, color-mix(in srgb, var(--badge-blue) 9%, transparent), transparent 28rem),
    radial-gradient(circle at 96% 34%, color-mix(in srgb, var(--duck) 7%, transparent), transparent 26rem);
  border-block: 1px solid var(--line);
}

.bento {
  display: grid;
  grid-auto-flow: dense;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.card {
  --card-glow: var(--duck);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 6.2vw, 24px);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--card-glow) 7%, transparent), transparent 220px),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgb(0 0 0 / 8%), inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, box-shadow 0.2s;
}

.card:nth-child(3n + 2) {
  --card-glow: #b8f35d;
}

.card:nth-child(3n) {
  --card-glow: #ff9ad5;
}

@media (hover: hover) {
  .card:hover {
    border-color: color-mix(in srgb, var(--muted) 45%, var(--line));
    box-shadow: 0 20px 48px rgb(0 0 0 / 16%), inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
    transform: translateY(-3px);
  }

  .card:hover .card-icon {
    transform: translateY(-2px) scale(1.04);
  }
}

.c-wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
}

.c-wide > :last-child {
  align-self: end;
  width: 100%;
}

.side-panel-card {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.side-panel-card > :last-child {
  align-self: start;
  margin-top: 8px;
}

.layout-features {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.layout-features .card {
  min-width: 0;
}

.layout-features .side-panel-card {
  grid-column: auto;
}

.layout-features .multi-chat-card .mini-chat {
  margin-top: 8px;
}

/* Wide cards that share a row: their title at the top, level with the card beside them; the demo in the middle. */
.user-card-feature {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.user-card-feature .mini-card {
  align-self: start;
  justify-self: center;
  width: 100%;
  max-width: 650px;
  margin-top: 8px;
}

.identity-features {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.identity-features .card {
  min-width: 0;
}

.identity-features .emote-card {
  --card-glow: #ff9ad5;
}

.identity-features .emote-card .card-icon {
  background: #ff9ad5;
}

.identity-features .user-card-feature {
  --card-glow: var(--duck);
}

.identity-features .card.user-card-feature .card-icon {
  background: var(--duck);
}

.emote-card .mini-emote-picker {
  flex: 1;
  margin-top: 8px;
}

.mini-emote-picker {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.mini-picker-search {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 8px 8px 4px;
  padding: 6px 8px;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
}

.mini-picker-search .icon {
  width: 14px;
  height: 14px;
}

.mini-picker-search kbd {
  margin-left: auto;
  padding: 1px 5px;
  font-size: 9px;
  color: var(--muted);
  background: var(--surface-3);
  border-color: var(--border-strong);
  border-bottom-width: 1px;
  border-radius: 5px;
}

.mini-emote-picker .picker-body {
  overflow: hidden;
  padding-inline: 8px;
}

.mini-emote-picker .picker-section + .picker-section {
  border-top: 1px solid var(--border-subtle);
}

.mini-emote-picker .picker-title {
  position: static;
  display: flex;
  align-items: center;
  gap: 5px;
  padding-block: 5px 3px;
  background: transparent;
}

.mini-emote-picker .picker-count {
  margin-left: auto;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.72;
}

.mini-emote-picker .picker-provider {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: #fff;
  background: #9146ff;
  border-radius: 4px;
}

.mini-emote-picker .picker-provider .icon {
  width: 10px;
  height: 10px;
}

/* Packed as the extension's picker is: small cells from the left (not six stretched across the card). */
.mini-emote-picker .picker-grid {
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 3px;
}

.mini-emote-picker .picker-emote {
  height: 38px;
  cursor: default;
}

.mini-emote-picker .picker-emote.is-active {
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.mini-emote-picker .picker-emote img {
  max-height: 31px;
}

.mini-emote-picker .picker-hovered {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text);
}

.mini-emote-picker .picker-hovered span {
  overflow: hidden;
  font-weight: 500;
  color: var(--muted);
  text-overflow: ellipsis;
}

.quick-actions-card {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
  align-items: start;
}

.quick-actions-card > :last-child {
  align-self: start;
  margin-top: 8px;
}

.action-features {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
  gap: 18px;
}

.action-features .card {
  min-width: 0;
}

.folding-card .mini-chat {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  padding: 0;
  overflow: hidden;
}

.fold-head,
.fold-hidden {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  background: var(--surface-2);
}

.fold-head {
  justify-content: space-between;
  color: var(--text);
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}

.fold-head span {
  padding: 2px 7px;
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--duck);
  border-radius: 999px;
}

.fold-messages {
  display: grid;
  gap: 5px;
  padding: 7px 12px;
}

.fold-hidden {
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  border-top: 1px solid var(--border);
}

.fold-hidden .icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

/* At the top (the title level with the card beside it), and the proof points with the copy, not stretched. */
.user-card-feature .card-copy,
.quick-actions-card .card-copy {
  align-self: start;
}

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

.card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: var(--ink);
  background: var(--duck);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--hard-shadow) 78%, transparent);
  rotate: -4deg;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:nth-child(3n + 2) .card-icon {
  background: #b8f35d;
  rotate: 3deg;
}

.card:nth-child(3n) .card-icon {
  background: #ff9ad5;
}

.card > h3,
.card-copy h3 {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
}

.card p {
  font-size: 15px;
  color: var(--muted);
}

/* The little chat bits inside cards use the demo chat's look. */
.mini-side-panel,
.mini-card,
.mini-chat,
.mini-actions {
  margin-top: auto;
  font: 13px/1.5 var(--font);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.mini-chat {
  padding: 8px 0;
}

.mini-side-panel {
  overflow: hidden;
}

.mini-stream-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(200px, 0.95fr);
  min-height: 205px;
}

.mini-stream-scene {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #111521;
  border-right: 1px solid var(--border);
}

.mini-stream-scene::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(4 7 15 / 12%), transparent 30%, transparent 72%, rgb(4 7 15 / 22%));
  content: "";
  pointer-events: none;
}

.mini-stream-scene > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-live {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 10px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #eb0400;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}

.mini-stream-chat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  background: var(--bg);
}

.mini-stream-chat .mini-panel-head {
  gap: 6px;
  padding-inline: 8px;
}

.mini-stream-chat .mini-pin {
  justify-content: center;
  width: 28px;
  padding-inline: 6px;
}

.mini-stream-chat .mini-pin-label {
  display: none;
}

.mini-stream-chat .mini-panel-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mini-stream-chat .msg {
  font-size: 11.5px;
  line-height: 1.35;
  white-space: normal;
}

.mini-browser-tabs {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding: 6px 6px 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.mini-browser-tab {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
}

.mini-browser-tab > .platform-tile {
  --tile: 14px;
}

.mini-browser-tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-browser-tab i {
  margin-left: auto;
  font-style: normal;
  opacity: 0.55;
}

.mini-browser-tab.active {
  color: var(--text);
  background: var(--bg);
  border-color: var(--border);
}

.mini-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--surface-2) 65%, var(--bg));
  border-bottom: 1px solid var(--border);
}

.mini-panel-platform {
  --tile: 18px;
}

.mini-panel-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.mini-panel-title b {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-panel-title small {
  font-size: 10px;
  color: var(--c-muted);
}

.mini-pin {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  margin-left: auto;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.mini-pin .icon {
  width: 13px;
  height: 13px;
}

.mini-panel-body {
  padding: 10px 0 12px;
}

/* The features' card: the extension's card (js/chat-demo.js userCard) as a picture, in the frame the other
   demos there have (above), filling its column at the bottom of the box. */
.mini-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.yc.mini-card .usercard {
  position: static;
  width: auto;
  max-height: none;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.mini-card .card-avatar-frame {
  border-color: var(--bg);
}

/* A wide marketing preview can keep the real card content without the tall popover spacing. */
.mini-card .card-banner {
  height: 36px;
}

.mini-card .card-tools {
  top: 5px;
  right: 6px;
}

/* The picture overlaps the banner; the name starts just below it, so a second line ("Previously…", wrapped on a
   phone) grows down, not up onto the banner. */
.mini-card .card-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: -20px;
  padding: 0 12px;
}

.mini-card .card-avatar-frame {
  width: 46px;
  height: 46px;
}

.mini-card .card-who {
  flex-flow: row wrap;
  align-items: center;
  gap: 3px 8px;
  margin-top: 0;
  padding-top: 24px; /* below the banner (the head's -20px), and a little */
}

.mini-card .card-name {
  font-size: 16px;
}

.mini-card .card-names {
  margin-top: 0;
  font-size: 11px;
}

.mini-card .card-note-input {
  min-height: 26px;
  margin: 6px 12px 0;
  padding: 3px 8px;
  font-size: 11px;
}

.mini-card .card-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin: 6px 12px 0;
  font-size: 11px;
}

.mini-card .card-recent {
  margin-top: 8px;
}

.mini-card .card-section {
  padding: 6px 12px 3px;
  font-size: 10px;
}

.mini-card .card-offenses {
  margin: 0 12px 3px;
}

.mini-card .offense-chip {
  padding: 2px 8px;
  font-size: 11px;
}

.mini-card .card-messages {
  padding: 0 12px 4px;
  font-size: 12px;
  line-height: 1.35;
}

.mini-card .card-day {
  display: none;
}

.mini-card .card-message {
  padding: 2px 0;
}

.mini-card .card-actions {
  padding: 7px 12px 8px;
}

.mini-card .card-day {
  background: var(--bg);
}

.mini-card .btn {
  cursor: default;
}

/* A bit of chat with the pointer on its middle line: tinted, and the message buttons on its top edge. */
.mini-actions {
  padding: 22px 0 10px;
}

.mini-actions .msg.pointed {
  margin: 8px 0;
  background: var(--hover);
}

.paint-wall {
  margin-top: auto;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.paint-wall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  color: var(--text);
  font-size: 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.paint-wall-head span {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
  color: #0b0e0f;
  background: #b8f35d;
  border-radius: 999px;
}

.paint-users {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 14px;
  padding: 14px;
}

.paint-user {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
}

.paint-user .name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.paint-badge {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 18px;
  height: 18px;
  font: 800 9px/1 var(--font);
  color: #fff;
  background: #7f3cff;
  border-radius: 5px;
}

.paint-badge-art {
  flex: 0 0 auto;
}

.paint-user:nth-child(3n + 2) .paint-badge { background: #00a35c; }
.paint-user:nth-child(3n) .paint-badge { background: #e005b9; }

/* Subscription notices use the same duck milestone art as message badges. */
.yc .notice-icon.sub-badge-notice {
  width: 22px;
  height: 22px;
  background: transparent;
  border-radius: 0;
}

.yc .notice-sub-badge {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.unread-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 10px 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

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

.mini-more {
  width: max-content;
  margin: 8px auto 0;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--duck);
  border-radius: 999px;
}

.keys {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* one to a row: a third of the width is too narrow for two */
  gap: 8px;
  margin: auto 0 0;
}

.keys div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  font-size: 12.5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.keys dt {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
}

.keys dd {
  display: flex;
  flex-shrink: 0;
  gap: 3px;
  margin: 0;
}

.key-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
  border-radius: 7px;
}

.key-icon .icon {
  width: 13px;
  height: 13px;
}

.keys kbd {
  min-width: 0;
  padding: 1px 5px;
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
}

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

.also-group {
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.also-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.also-head > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink);
  background: var(--duck);
  border-radius: 9px;
  rotate: -3deg;
}

.also-group:nth-child(2) .also-head > span {
  background: #b8f35d;
  rotate: 3deg;
}

.also-group:nth-child(3) .also-head > span {
  background: #ff9ad5;
}

.also-head .icon {
  width: 17px;
  height: 17px;
}

.also h3 {
  font-size: 16px;
  line-height: 1.2;
}

.also ul {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.also li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--muted);
}

.also li::before {
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
  content: "✓";
}

/* Between the main features and the rest: the duck, a heading in the site's font, the promises, the button. */
.feature-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 22px;
  margin: 24px 0 0;
  padding: 20px 26px 20px 20px;
  background:
    radial-gradient(circle at 7% 50%, color-mix(in srgb, var(--duck) 20%, transparent), transparent 150px),
    linear-gradient(110deg, color-mix(in srgb, var(--badge-blue) 7%, var(--card)), color-mix(in srgb, var(--duck) 8%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--duck) 45%, var(--line));
  border-radius: var(--radius);
  box-shadow: 0 18px 42px rgb(0 0 0 / 12%);
}

.feature-cta-duck {
  width: 72px;
  height: 72px;
  rotate: -8deg;
}

.feature-cta h3 {
  font: clamp(1.35rem, 2.4vw, 1.7rem) / 1.05 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* The hero's promises, here in a row under the heading. */
.feature-cta .trust {
  display: flex;
  justify-content: flex-start;
  gap: 4px 18px;
  margin-top: 8px;
}

.feature-more {
  margin-top: 18px;
}

.feature-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  min-height: 44px;
  margin: 0 auto;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 750;
  color: var(--text);
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.feature-more > summary::-webkit-details-marker {
  display: none;
}

.feature-more > summary::after {
  font-size: 18px;
  line-height: 1;
  color: var(--faq-toggle);
  content: "+";
}

.feature-more[open] > summary::after {
  content: "−";
}

.feature-more .when-open {
  display: none;
}

.feature-more[open] .when-closed {
  display: none;
}

.feature-more[open] .when-open {
  display: inline;
}

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

.feature-detail-grid .card {
  padding: 20px;
}

/* Keep this row dense: its compact demos belong with the copy. */
.feature-detail-grid .cosmetics-card .paint-wall,
.feature-detail-grid .continuity-card .mini-chat,
.feature-detail-grid .keyboard-card .keys {
  margin-top: 8px;
}

.feature-detail-grid .keyboard-card .keys {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  overflow: hidden;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.feature-detail-grid .keyboard-card .keys div {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  background: var(--bg);
  border: 0;
  border-radius: 0;
}

.feature-detail-grid .keyboard-card .keys dd {
  margin-left: 31px;
}

.feature-detail-grid .keyboard-card .keys kbd {
  padding: 0;
  color: var(--muted);
  font-size: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.feature-detail-grid .filter-card {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 52px);
}

/* Mentions and reply threads share one balanced row instead of forcing the smaller inbox into a third. */
.conversation-features {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(390px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.conversation-features .card {
  min-width: 0;
}

/* "Every mention, one inbox": the extension's inbox (chat.css .mentions-pop), in the card instead of floating. */
.mini-mentions {
  margin-top: auto;
  font: 13px/1.4 var(--font);
}

.mini-mentions .mentions-pop {
  position: static;
  width: auto;
  max-height: none;
  box-shadow: none;
}

.mini-mentions .mention-text .emote {
  width: auto;
}

/* A little tighter than the extension's, to fit its feature card. */
.mini-mentions .mentions-head {
  padding: 7px 10px;
}

.mini-mentions .mention-row {
  padding: 6px 8px;
}

/* "Follow any thread": a reply in chat, and the thread panel it opens (in the extension, floating). */
.thread-card {
  grid-column: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.thread-card > .mini-thread {
  align-self: end;
}

.mini-thread {
  display: grid;
  gap: 10px;
  padding: 12px;
  font: 13px/1.4 var(--font);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.mini-thread .thread-panel {
  position: static;
  width: auto;
  max-height: none;
}

/* The reply box, as its placeholder shows it. */
.mini-thread .thread-reply-hint {
  display: block;
  color: var(--muted);
}

/* "Highlight or hide anything": three rules as Settings shows them, and a bit of chat with them. */
.filter-card {
  align-items: start;
}

.filter-card > :last-child {
  align-self: center;
}

.mini-filters {
  display: grid;
  gap: 8px;
  padding: 12px;
  font: 13px/1.4 var(--font);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.filter-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.filter-kind {
  flex: none;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 999px;
}

.filter-kind.hide {
  color: var(--muted);
  background: var(--surface-3);
}

.filter-rule .rx {
  padding: 0;
  font-size: 13px;
  background: none;
  border: 0; /* the rule's row frames it already */
}

.filter-chat {
  margin-top: 4px;
}

.filter-chat .msg {
  padding: 3px 6px;
}

/* ---- How it works (three steps, after the hero) ---- */

.steps-section {
  padding-bottom: 0;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 22px 24px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--duck) 7%, transparent), transparent 150px),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgb(0 0 0 / 8%);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, box-shadow 0.2s;
}

@media (hover: hover) {
  .steps li:hover {
    border-color: color-mix(in srgb, var(--muted) 45%, var(--line));
    box-shadow: 0 20px 44px rgb(0 0 0 / 14%);
    transform: translateY(-3px);
  }
}

.step-n {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  font: 20px/1 var(--display);
  color: var(--ink);
  background: var(--duck);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--hard-shadow);
}

.steps li:nth-child(2) .step-n {
  background: #b8f35d;
}

.steps li:nth-child(3) .step-n {
  background: #ff9ad5;
}

.steps h3 {
  font-size: 18px;
}

.steps p {
  color: var(--muted);
}

/* ---- Privacy ---- */

.privacy {
  background:
    radial-gradient(circle at 8% 30%, color-mix(in srgb, var(--duck) 7%, transparent), transparent 24rem),
    radial-gradient(circle at 92% 65%, color-mix(in srgb, var(--badge-blue) 8%, transparent), transparent 26rem),
    var(--page-2);
  border-block: 1px solid var(--line);
}

.privacy-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.privacy .sub {
  margin-bottom: 26px;
}

.privacy-points {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.privacy-points li {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--card-2) 48%, var(--card)), var(--card));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgb(0 0 0 / 8%);
}

.privacy-points b {
  display: block;
  font-size: 17px;
}

.privacy-points span:not(.pp-icon) {
  color: var(--muted);
  font-size: 15px;
}

.pp-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 22px;
  color: #fff;
  background: var(--badge-blue);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--hard-shadow) 72%, transparent);
  rotate: -3deg;
}

.privacy-points li:nth-child(2) .pp-icon {
  background: #7c4dff;
  rotate: 3deg;
}

.privacy-points li:nth-child(3) .pp-icon {
  background: #238636;
  rotate: -2deg;
}

/* ---- FAQ ---- */

.faq {
  display: grid;
  gap: 12px;
  interpolate-size: allow-keywords;
}

.faq details {
  background: linear-gradient(120deg, color-mix(in srgb, var(--card-2) 34%, var(--card)), var(--card));
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.faq details::details-content {
  block-size: 0;
  overflow: clip;
  opacity: 0;
  transition:
    block-size 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease,
    content-visibility 0.26s allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.faq details[open] {
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--duck) 8%, transparent), transparent 180px),
    var(--card);
  border-color: color-mix(in srgb, var(--duck) 50%, var(--line));
  box-shadow: 0 16px 38px rgb(0 0 0 / 10%);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-size: 17px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  font: 21px/1 var(--display);
  content: "+";
  color: var(--faq-toggle);
  background: color-mix(in srgb, var(--duck) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--duck) 30%, var(--line));
  border-radius: 9px;
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  padding: 0 22px 20px;
  color: var(--muted);
}

/* ---- Support ---- */

.support {
  background: var(--page-2);
  border-block: 1px solid var(--line);
}

.support-inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: clamp(32px, 6vw, 80px);
  width: min(1000px, 100% - 2 * var(--gutter)); /* a box, not a .wrap's padding: the page's gutter is outside it */
  padding: clamp(30px, 4vw, 48px);
  background:
    radial-gradient(circle at 0 50%, color-mix(in srgb, var(--badge-blue) 16%, transparent), transparent 38%),
    radial-gradient(circle at 100% 30%, color-mix(in srgb, #5865f2 12%, transparent), transparent 42%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 22px 54px rgb(0 0 0 / 16%);
}

.support-heading {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.support-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: #5865f2;
  border: 2px solid var(--ink);
  border-radius: 13px;
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--hard-shadow) 78%, transparent);
  rotate: -4deg;
}

.support-mark .icon {
  width: 21px;
  height: 21px;
}

.support-label {
  margin: 1px 0 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
}

.support h2 {
  font-size: clamp(38px, 4.5vw, 56px);
}

.support .sub {
  max-width: 580px;
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18px);
}

.support-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

/* ---- Get it ---- */

.get {
  position: relative;
}

.get-inner {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 5vw, 64px);
  width: min(1000px, 100% - 2 * var(--gutter)); /* as .support-inner */
  padding: clamp(32px, 4vw, 48px);
  overflow: hidden;
  text-align: left;
  background:
    radial-gradient(circle at 8% 50%, color-mix(in srgb, var(--hard-shadow) 22%, transparent), transparent 34%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--duck) 12%, transparent), transparent 32%),
    var(--card);
  border: 1px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 24px 64px rgb(0 0 0 / 18%);
}

.get-art {
  position: relative;
  display: grid;
  place-items: center;
  width: 190px;
  aspect-ratio: 1;
}

.get-art::before {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  content: "";
  background: color-mix(in srgb, var(--duck) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--duck) 36%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 14px color-mix(in srgb, var(--duck) 5%, transparent),
    0 18px 45px color-mix(in srgb, var(--hard-shadow) 24%, transparent);
}

/* The YAPPING duck (the logo duck is in the header and footer): it chatters while you point at the box, or tap it. */
.get-duck {
  position: relative;
  width: 132px;
  height: auto;
  filter: drop-shadow(0 14px 22px rgb(0 0 0 / 28%));
  transform-origin: 50% 85%;
}

@media (hover: hover) {
  .get-inner:hover .get-duck {
    animation: duck-yapping 0.36s linear infinite;
  }
}

.get-inner:active .get-duck {
  animation: duck-yapping 0.36s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .get-duck {
    animation: none !important;
  }
}

.get-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.get-copy h2 {
  max-width: 700px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: .98;
}

.get .sub {
  max-width: 620px;
  margin: 14px 0 26px;
  font-size: clamp(16px, 1.5vw, 19px);
}

.get-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* ---- Footer ---- */

.footer {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}

/* The brand and its tagline, two groups of links beside it, the small print under a line. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: start;
}

.footer .brand {
  font-size: 18px;
}

.footer-tagline {
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}

.footer-links {
  display: flex;
  gap: 56px;
}

.footer-group {
  display: grid;
  align-content: start;
  justify-items: start;
}

.footer-head {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--text);
  text-transform: uppercase;
}

/* With room to tap. */
.footer-group a {
  padding: 5px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .footer-group a:hover {
    color: var(--text);
  }
}

/* Each sentence wraps as a whole; both on the left (the back-to-top button sits bottom right). */
.fine {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  grid-column: 1 / -1;
  padding-top: 20px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

/* A phone: the groups under the brand (still side by side), and the back-to-top button (bottom right) keeps
   clear of the footer's last lines. */
@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-links {
    gap: 48px;
  }
}

@media (max-width: 760px) {
  .footer {
    padding-bottom: 88px;
  }

  .to-top {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 40px;
    height: 40px;
    font-size: 18px;
    background: color-mix(in srgb, var(--card) 86%, transparent);
    backdrop-filter: blur(10px);
  }
}

/* Back to top (js/theme.js): bottom right once you're a screen down, over everything else. */
.to-top {
  position: fixed;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--text);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgb(0 0 0 / 22%);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity 0.2s, translate 0.2s, visibility 0s 0.2s, border-color 0.12s;
}

.to-top.shown {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity 0.2s, translate 0.2s, border-color 0.12s;
}

@media (hover: hover) {
  .to-top:hover {
    border-color: color-mix(in srgb, var(--muted) 60%, var(--line));
    translate: 0 -2px;
  }
}

.to-top:active {
  translate: 0 1px;
}

/* ---- The privacy policy (privacy.html, from PRIVACY.md) ---- */

.legal {
  padding-top: clamp(40px, 6vw, 72px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.legal h1 {
  margin-bottom: 14px;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1;
}

.legal h1 + p {
  color: var(--muted);
}

.legal h2 {
  margin: 44px 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

.legal p,
.legal li {
  color: var(--muted);
}

.legal p + p {
  margin-top: 14px;
}

.legal b {
  color: var(--text);
}

.legal ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
}

.legal li::marker {
  color: var(--duck-deep);
}

/* Links in the text: the text's colour, underlined in the duck's (not a page of browser blue). */
.legal a:not(.btn) {
  color: var(--text);
  text-decoration-color: var(--duck-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .legal a:not(.btn):hover {
    color: var(--duck-deep);
  }
}

/* ---- The changelog (changelog.html, from extension/CHANGELOG.md): each version beside its notes ---- */

.release {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.changelog-github + .release {
  margin-top: 32px;
}

.legal .release h2 {
  position: sticky;
  top: 88px;
  align-self: start;
  margin: 0;
  font: 700 1.05rem/1.4 var(--mono);
}

.legal .release h2 a {
  color: var(--text);
  text-decoration: none;
}

.legal .release h2 a:hover {
  color: var(--duck-deep);
}

.release-notes ul ul {
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .release {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .legal .release h2 {
    position: static;
  }
}

/* ---- Page not found (404.html): the hero's headline, and chat having opinions about it ---- */

.lost {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  min-height: calc(100vh - 220px);
  padding-block: clamp(40px, 7vw, 96px);
}

/* The check at the door of the Discord server (verify.html): nothing but it, in the middle of the page: the duck,
   a few words, Cloudflare's check, and what came of it. */
.verify-page {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
}

.verify {
  display: grid;
  justify-items: center;
  width: min(560px, 100%);
  padding: 32px var(--gutter);
  text-align: center;
}

.verify-duck {
  margin-bottom: 20px;
}

.verify h1 {
  font-size: clamp(2.4rem, 9vw, 3.6rem);
}

.verify .lead {
  margin-top: 18px;
}

.verify-check {
  min-height: 65px; /* the check's own height: nothing jumps when it comes */
  margin-top: 28px;
}

.verify .lead.done {
  font-weight: 600;
  color: var(--kick);
}

.verify-status {
  margin-top: 16px;
  font-weight: 600;
  color: var(--warn);
}

.verify-status:empty {
  display: none;
}

.verify-back {
  margin-top: 28px;
}

.lost-code {
  margin-bottom: 18px;
  font: 700 14px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.lost-chat {
  margin: 0;
  padding: 10px 0;
  font-size: 14px;
  box-shadow: 0 24px 60px var(--shadow); /* the chat's own shadow token (extension.css) */
}

@media (max-width: 760px) {
  .lost {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
}

/* ---- Reveal on scroll ---- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s, transform 0.6s;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---- Narrower screens ---- */

@media (max-width: 1080px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-new {
    margin-inline: auto;
  }

  .feature-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-copy {
    text-align: center;
  }

  .lead {
    margin-inline: auto;
  }

  .hero-ctas,
  .trust {
    justify-content: center;
  }

  .hero-stage {
    width: min(680px, 100%);
    margin: 0 auto;
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-wide {
    grid-column: span 2;
  }

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

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

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

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

  .identity-features .user-card-feature {
    grid-column: auto;
  }

  .multi-chat-card .multi-extra {
    display: none;
  }

  .conversation-features .thread-card {
    grid-column: auto;
  }

  .quick-actions-card {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav-links {
    display: none;
  }

  .theme-toggle {
    margin-left: auto;
  }

  .hero-product > .hero-product-chat {
    height: 420px;
  }

  .controls {
    width: 100%;
  }

  .chat-pages {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
  }

  .chat-pages[hidden] {
    display: none;
  }

  .chat-pages button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 36px;
    padding: 6px 8px;
    font: 700 12px var(--font);
    color: var(--c-muted);
    white-space: nowrap;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
  }

  @media (hover: hover) {
    .chat-pages button:hover {
      color: var(--text);
      background: var(--surface-3);
    }
  }

  .chat-pages button .platform-tile {
    --tile: 16px;
  }

  .chat-pages button[aria-pressed="true"] {
    color: var(--text);
    background: var(--bg);
    border-color: var(--duck);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--duck) 55%, transparent), 0 2px 8px rgba(0, 0, 0, 0.22);
  }

  /* Columns side by side still, swiped one at a time. */
  .columns {
    display: flex;
    height: 480px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .col {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }

  .columns.merged .col:first-child {
    flex-basis: 100%;
  }

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

  .c-wide {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .mini-stream-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mini-stream-scene {
    aspect-ratio: 16 / 9;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .mini-stream-chat .mini-panel-body {
    min-height: 108px;
  }

  .mini-stream-chat .mini-pin {
    width: auto;
  }

  .mini-stream-chat .mini-pin-label {
    display: inline;
  }

  .user-card-feature .mini-card {
    width: 100%;
    max-width: none;
  }

  /* The duck beside the heading, the promises on one line under them, then the button, the whole width. */
  .feature-cta {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 14px;
    padding: 18px;
  }

  .feature-cta-duck {
    width: 52px;
    height: 52px;
  }

  .feature-cta-copy {
    display: contents;
  }

  /* One line: dots between them instead of the ticks. */
  .feature-cta .trust {
    grid-column: 1 / -1;
    gap: 4px 8px;
    margin: 0;
    font-size: 13px;
  }

  .feature-cta .trust li {
    gap: 0;
  }

  .feature-cta .trust .icon {
    display: none;
  }

  .feature-cta .trust li + li::before {
    margin-right: 8px;
    color: var(--accent);
    content: "·";
  }

  .feature-cta > .btn {
    grid-column: 1 / -1;
  }

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

  .feature-detail-grid .filter-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

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

  .keys div {
    flex-direction: column;
    align-items: flex-start;
  }

  .keys dd {
    margin-left: 31px;
  }

  .paint-users {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .paint-user {
    font-size: 12px;
  }

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

  .support-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 26px 20px;
    border-radius: 20px;
  }

  .support-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .support-actions .btn {
    width: 100%;
  }

  .section.get {
    padding-block: 40px;
  }

  .get-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px;
    text-align: center;
    border-radius: 20px;
  }

  .get-art {
    width: 92px;
    margin-inline: auto;
  }

  .get-duck {
    width: 88px;
  }

  .get-copy h2 {
    max-width: 300px;
    margin-inline: auto;
    font-size: 34px;
    line-height: 1;
  }

  .get .sub {
    max-width: 320px;
    margin: 10px auto 20px;
    font-size: 15px;
  }

  .get-actions {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  .get-actions .btn {
    justify-content: center;
    width: 100%;
    max-width: 250px;
    padding: 12px 18px;
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  .controls {
    align-items: stretch;
  }

  .control-speed,
  .control-options {
    flex: 1 1 100%;
    justify-content: center;
  }

  .control-speed {
    flex-wrap: wrap;
  }

  .control-label {
    width: 100%;
    padding: 0 4px;
    text-align: left;
  }

  .seg {
    flex: 1;
  }

  .seg button {
    flex: 1;
    padding-inline: 8px;
  }

  /* Three switches don't fit side by side: a row each, its name on the left and the switch on the right (as
     a setting's). */
  .control-options {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .control-options .switch {
    flex-direction: row-reverse;
    justify-content: space-between;
    min-width: 0;
    font-size: 14px;
    white-space: nowrap;
    background: var(--page);
    border-color: var(--line);
  }

  .controls .btn-hype {
    justify-content: center;
    width: 100%;
  }

  .tips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin-top: 14px;
  }

  .tips > button {
    justify-content: flex-start;
    min-height: 38px;
    padding: 6px 9px;
    border-radius: 10px;
  }

  .tips .tip-full {
    display: none;
  }

  .tips .tip-compact {
    display: inline;
  }
}

/* A phone: the name and badges level with the bottom of the picture, "Previously…" on a line of its own below
   (beside the name it wraps, and the name climbs onto the banner). */
@media (max-width: 520px) {
  .user-card-feature .mini-card .card-who {
    display: contents;
  }

  .user-card-feature .mini-card .card-name-row {
    align-self: end;
  }

  .user-card-feature .mini-card .card-names {
    grid-column: 1 / -1;
    margin-top: 6px;
  }
}

@media (max-width: 420px) {
  /* Keep the compact profile's controls clear of the identity row on phones. */
  .user-card-feature .mini-card .card-banner {
    height: 42px;
  }

  .user-card-feature .mini-card .card-head {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 8px;
    margin-top: -10px;
  }

  .user-card-feature .mini-card .card-avatar-frame {
    width: 42px;
    height: 42px;
  }

  .nav .btn-sm {
    padding: 6px 10px;
    font-size: 13px;
  }

  .brand {
    font-size: 19px;
  }

  .hero-product-features {
    gap: 4px;
    padding: 7px;
  }

  .hero-product-features span {
    gap: 4px;
    min-height: 36px;
    padding: 5px 4px;
    font-size: 10.5px;
    white-space: nowrap;
  }

  .hero-product-features .icon {
    width: 13px;
    height: 13px;
  }

  .mini-browser-tab {
    gap: 4px;
    padding-inline: 5px;
    font-size: 10px;
  }

  .mini-browser-tab i {
    display: none;
  }

  .mini-panel-title small {
    display: none;
  }
}

@media (max-width: 340px) {
  .nav-inner {
    gap: 10px;
  }

  .nav .brand span {
    display: none;
  }

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

  .paint-user {
    font-size: 13px;
  }

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

  /* The verified mark carries the important signal at this width. */
  .user-card-feature .mini-card .card-name-row .badges {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

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