/* ============================================================================
   Simply Tab Manager Pro — tabmanager.simplyapphub.com
   ---------------------------------------------------------------------------
   Same design system as the other Simply AppHub product sites: identical
   container, section rhythm, class names, breakpoints (980px / 720px) and
   reveal-on-scroll behaviour. Retinted to the extension's own palette, taken
   from src/shared/tokens.css: primary #1668d6 / #0b57d0, the nine Chrome tab
   group hues, and the #14171c / #1b1f26 deep plate for dark bands.

   No @import, no webfont link, no remote asset of any kind — the site is
   served under `default-src 'self'`, so anything remote simply would not load.

   Components available to the markup
   ---------------------------------------------------------------------------
   Shell        .container .skip-link .site-header .nav .brand .nav-links
                .nav-cta .site-footer .footer-inner .footer-brand
   Hero         .hero .hero-grid .hero-copy .hero-media .eyebrow .tagline
                .lead .hero-actions .button.primary .button.secondary
                .trust-row .fact-strip
   Sections     .section .section-heading .dark-band .control-section
                .privacy-section .themes-section .all-features .promo-section
   Content      .mode-grid/.layout-grid + .mode-card, .feature-row(.reverse)
                (.balanced) + .feature-copy + .product-shot, .wide-shot,
                .check-list, .cross-list, .mini-grid, .export-row/.pill-row,
                .privacy-points, .perm-grid, .text-link, .feature-grid
   New here     .hue-rail (9 segments, no classes needed)
                .swatch-strip + .swatch[data-hue] (the nine hues)
                .theme-strip + .theme-chip[data-theme] (the six real themes)
                .shortcut-grid + .shortcut + .keys + kbd
                .syntax-list (query prefix + what it matches)
                .callout
   Policy page  .policy-page .policy-back .policy-main .policy-hero
                .policy-hero-inner .policy-updated .policy-layout
                .policy-summary .policy-content
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #eff2f6;
  --bg-2: #f7f9fb;
  --surface: #ffffff;
  --surface-soft: #e4edfb;
  --ink: #14181f;
  --ink-blue: #0d3d80;
  --muted: #4a5160;
  --line: #dde2e9;
  --line-blue: #c6dafa;

  --blue: #1668d6;
  --blue-dark: #0b57d0;
  --blue-light: #8ab4f8;
  --blue-pale: #cfe0fb;

  --deep: #14171c;
  --deep-2: #1b1f26;
  --deep-3: #101318;
  --deep-4: #0b0e12;

  --green: #089b39;
  --white: #ffffff;

  /* The nine window and group hues, light values (tokens.css :root). */
  --g-grey: #6b7280;
  --g-blue: #3486f2;
  --g-red: #e0453a;
  --g-yellow: #b17d05;
  --g-green: #089b39;
  --g-pink: #e0408f;
  --g-purple: #a855f7;
  --g-cyan: #0792ae;
  --g-orange: #db6409;

  --max: 1180px;
  --radius: 8px;
  --shadow: 0 18px 50px rgba(11, 23, 44, 0.13);
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
}

/* On a dark plate the same nine hues take their dark values, exactly as the
   extension does when a dark theme is active. Anything nested in one of these
   bands picks them up automatically. */
.hero,
.dark-band,
.promo-section,
.site-footer,
.policy-hero {
  --g-grey: #939db1;
  --g-blue: #599ef8;
  --g-red: #f7736a;
  --g-yellow: #cd9105;
  --g-green: #0fb546;
  --g-pink: #f66bb0;
  --g-purple: #c57ff7;
  --g-cyan: #0babcb;
  --g-orange: #f97612;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

img {
  display: block;
  max-width: 100%;
}

code,
kbd,
samp {
  font-family: var(--mono);
}

.container {
  width: min(calc(100% - 40px), var(--max));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 14px;
  color: var(--white);
  background: var(--blue-dark);
  border-radius: var(--radius);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

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

.hero :focus-visible,
.dark-band :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.policy-hero :focus-visible {
  outline-color: var(--blue-light);
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  color: var(--white);
  background: rgba(20, 23, 28, 0.93);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.nav {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  font-weight: 700;
}

.nav-links a,
.nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--white);
}

.nav-cta {
  padding: 0 15px;
  color: var(--white);
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 800;
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: 54px 0 30px;
  color: var(--white);
  background:
    linear-gradient(120deg, rgba(22, 104, 214, 0.22), transparent 38%),
    linear-gradient(180deg, var(--deep), var(--deep-3) 72%, #131c2b);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000, transparent 75%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px, 0.78fr) minmax(560px, 1.22fr);
  align-items: center;
  gap: 42px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--blue-dark);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero .eyebrow,
.dark-band .eyebrow,
.policy-hero .eyebrow {
  color: var(--blue-light);
}

.hero h1 {
  margin: 0;
  font-size: clamp(42px, 5vw, 70px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.tagline {
  margin: 16px 0 0;
  color: var(--white);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 750;
  line-height: 1.15;
}

.lead {
  max-width: 610px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 800;
}

.button.primary {
  color: var(--white);
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: 0 14px 32px rgba(11, 87, 208, 0.34);
}

.button.secondary {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

.button:hover,
.button:focus-visible,
.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-2px);
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.trust-row span {
  padding: 7px 10px;
  color: var(--blue-pale);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
}

.hero-media,
.product-shot,
.wide-shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero-media {
  transform: perspective(1200px) rotateY(-2deg);
}

.hero-media img,
.product-shot img,
.wide-shot img {
  width: 100%;
  height: auto;
}

/* --- The nine-hue rail ----------------------------------------------------
   A decorative nine-segment rule. Needs no classes on the children: the nine
   spans take the nine hues in the order tokens.css declares them. */

.hue-rail {
  display: flex;
  overflow: hidden;
  height: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 999px;
}

.hue-rail > * {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0;
  line-height: 0;
}

.hue-rail > :nth-child(1) { background: var(--g-grey); }
.hue-rail > :nth-child(2) { background: var(--g-blue); }
.hue-rail > :nth-child(3) { background: var(--g-red); }
.hue-rail > :nth-child(4) { background: var(--g-yellow); }
.hue-rail > :nth-child(5) { background: var(--g-green); }
.hue-rail > :nth-child(6) { background: var(--g-pink); }
.hue-rail > :nth-child(7) { background: var(--g-purple); }
.hue-rail > :nth-child(8) { background: var(--g-cyan); }
.hue-rail > :nth-child(9) { background: var(--g-orange); }

.hero .hue-rail,
.section .hue-rail {
  margin-top: 26px;
}

/* --- Fact strip ----------------------------------------------------------- */

.fact-strip {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
}

.fact-strip div {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px;
  border-right: 1px solid rgba(255, 255, 255, 0.11);
}

.fact-strip div:last-child {
  border-right: 0;
}

.fact-strip strong {
  font-size: 23px;
}

.fact-strip span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.25;
}

/* --- Section shells ------------------------------------------------------- */

.section {
  padding: 66px 0;
  scroll-margin-top: 78px;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 28px;
}

.section-heading h2,
.feature-copy h2 {
  margin: 0;
  font-size: clamp(32px, 4.2vw, 54px);
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.section-heading > p:last-child,
.feature-copy > p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

.mode-grid,
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.mode-card,
.feature-grid article,
.privacy-points article,
.perm-grid article {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(11, 23, 44, 0.05);
}

.mode-card span {
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.mode-card h3,
.feature-grid h3 {
  margin: 26px 0 8px;
  font-size: 18px;
}

.mode-card p,
.feature-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Two-column feature row ----------------------------------------------- */

.feature-row {
  display: grid;
  grid-template-columns: minmax(320px, 0.72fr) minmax(560px, 1.28fr);
  align-items: center;
  gap: 48px;
}

/* For a row whose right-hand side is a component rather than a screenshot. */
.feature-row.balanced {
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  align-items: start;
}

.feature-row.reverse .feature-copy {
  order: 2;
}

.feature-row.reverse .product-shot,
.feature-row.reverse .feature-aside {
  order: 1;
}

.dark-band {
  color: var(--white);
  background: linear-gradient(135deg, var(--deep), var(--deep-2));
}

.dark-band .feature-copy > p,
.dark-band .section-heading > p:last-child {
  color: rgba(255, 255, 255, 0.72);
}

/* --- Lists ---------------------------------------------------------------- */

.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--blue-dark);
  border-bottom: 2px solid var(--blue-dark);
  transform: rotate(-45deg);
}

.dark-band .check-list li {
  color: rgba(255, 255, 255, 0.86);
}

.dark-band .check-list li::before {
  border-color: var(--blue-light);
}

/* The "what it does not do" list — a rule rather than a tick. */
.cross-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.cross-list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.cross-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 2px;
  background: currentColor;
  opacity: 0.5;
}

.dark-band .cross-list li {
  color: rgba(255, 255, 255, 0.82);
}

.control-section,
.privacy-section,
.search-section {
  background: var(--surface);
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 22px;
}

.mini-grid span {
  padding: 10px 12px;
  color: var(--ink-blue);
  background: var(--surface-soft);
  border: 1px solid var(--line-blue);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 750;
}

.dark-band .mini-grid span {
  color: var(--blue-pale);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

.export-row,
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.export-row span,
.pill-row span {
  padding: 8px 12px;
  color: var(--ink-blue);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.dark-band .export-row span,
.dark-band .pill-row span {
  color: var(--blue-pale);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

/* --- The nine hues, as a swatch strip -------------------------------------
   Labels are set in the body ink and the hue is carried by a dot, so a chip is
   legible at every hue including yellow. Order matches tokens.css; a
   data-hue attribute overrides position if the markup reorders them. */

.swatch-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.swatch {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 750;
}

.swatch::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--swatch, var(--g-grey));
}

.swatch-strip .swatch:nth-child(1) { --swatch: var(--g-grey); }
.swatch-strip .swatch:nth-child(2) { --swatch: var(--g-blue); }
.swatch-strip .swatch:nth-child(3) { --swatch: var(--g-red); }
.swatch-strip .swatch:nth-child(4) { --swatch: var(--g-yellow); }
.swatch-strip .swatch:nth-child(5) { --swatch: var(--g-green); }
.swatch-strip .swatch:nth-child(6) { --swatch: var(--g-pink); }
.swatch-strip .swatch:nth-child(7) { --swatch: var(--g-purple); }
.swatch-strip .swatch:nth-child(8) { --swatch: var(--g-cyan); }
.swatch-strip .swatch:nth-child(9) { --swatch: var(--g-orange); }

.swatch-strip .swatch[data-hue="grey"]   { --swatch: var(--g-grey); }
.swatch-strip .swatch[data-hue="blue"]   { --swatch: var(--g-blue); }
.swatch-strip .swatch[data-hue="red"]    { --swatch: var(--g-red); }
.swatch-strip .swatch[data-hue="yellow"] { --swatch: var(--g-yellow); }
.swatch-strip .swatch[data-hue="green"]  { --swatch: var(--g-green); }
.swatch-strip .swatch[data-hue="pink"]   { --swatch: var(--g-pink); }
.swatch-strip .swatch[data-hue="purple"] { --swatch: var(--g-purple); }
.swatch-strip .swatch[data-hue="cyan"]   { --swatch: var(--g-cyan); }
.swatch-strip .swatch[data-hue="orange"] { --swatch: var(--g-orange); }

.dark-band .swatch,
.hero .swatch {
  color: var(--white);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

/* A group band: the hue as a rule above a labelled row, the way the grid
   draws a tab group. */
.group-band {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.group-band::before {
  content: "";
  height: 3px;
  border-radius: 999px;
  background: var(--swatch, var(--g-blue));
}

.group-band strong {
  font-size: 13px;
}

.group-band span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

/* --- The six themes -------------------------------------------------------
   Each chip is painted in that theme's own real token values, so the strip is
   a sample rather than an illustration. */

.themes-section {
  background: linear-gradient(180deg, var(--surface-soft), var(--bg));
}

.theme-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.theme-chip {
  --c-bg: #eff2f6;
  --c-surface: #ffffff;
  --c-border: #dde2e9;
  --c-text: #14181f;
  --c-muted: #5f6775;
  --c-primary: #1668d6;

  display: grid;
  gap: 3px;
  padding: 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(11, 23, 44, 0.05);
}

.theme-chip strong,
.theme-chip b {
  color: var(--c-text);
  font-size: 14px;
  font-weight: 800;
}

.theme-chip span {
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.4;
}

.theme-chip::after {
  content: "";
  display: block;
  height: 8px;
  margin-top: 11px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--c-primary) 0 38%,
    var(--c-surface) 38% 72%,
    var(--c-border) 72% 100%
  );
}

.theme-chip[data-theme="daylight"] {
  --c-bg: #eff2f6; --c-surface: #ffffff; --c-border: #dde2e9;
  --c-text: #14181f; --c-muted: #5f6775; --c-primary: #1668d6;
}

.theme-chip[data-theme="paper"] {
  --c-bg: #f3ece1; --c-surface: #fffdf9; --c-border: #e0d8c9;
  --c-text: #241e14; --c-muted: #6b6150; --c-primary: #9c4a21;
}

.theme-chip[data-theme="midnight"] {
  --c-bg: #101318; --c-surface: #1b1f26; --c-border: #333a45;
  --c-text: #e6e9ef; --c-muted: #98a1b0; --c-primary: #8ab4f8;
}

.theme-chip[data-theme="graphite"] {
  --c-bg: #0c0d10; --c-surface: #17191d; --c-border: #2c2f35;
  --c-text: #e9ecf1; --c-muted: #9aa2af; --c-primary: #d8d8dc;
}

.theme-chip[data-theme="carbon"] {
  --c-bg: #000000; --c-surface: #0a0c0f; --c-border: #262b33;
  --c-text: #eceff4; --c-muted: #99a2b0; --c-primary: #8ab4f8;
}

.theme-chip[data-theme="beacon"] {
  --c-bg: #000000; --c-surface: #161616; --c-border: #ffffff;
  --c-text: #ffffff; --c-muted: #c7c7c7; --c-primary: #ffd400;
}

/* --- Keyboard ------------------------------------------------------------- */

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  color: var(--ink);
  background: linear-gradient(180deg, var(--surface), #eef1f6);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.keys {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.shortcut > .keys,
.shortcut > kbd {
  flex: none;
  min-width: 112px;
  justify-content: flex-start;
}

.shortcut p,
.shortcut span:not(.keys) {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.dark-band kbd {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.26);
}

.dark-band .keys {
  color: rgba(255, 255, 255, 0.66);
}

.dark-band .shortcut {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.dark-band .shortcut p,
.dark-band .shortcut span:not(.keys) {
  color: rgba(255, 255, 255, 0.8);
}

/* --- Search syntax -------------------------------------------------------- */

.syntax-list {
  display: grid;
  gap: 6px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.syntax-list > * {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.syntax-list code {
  justify-self: start;
  padding: 3px 8px;
  color: var(--ink-blue);
  background: var(--surface-soft);
  border: 1px solid var(--line-blue);
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
}

.syntax-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.dark-band .syntax-list > * {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}

.dark-band .syntax-list code {
  color: #dce9fd;
  background: rgba(138, 180, 248, 0.14);
  border-color: rgba(138, 180, 248, 0.32);
}

.dark-band .syntax-list span {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Callout -------------------------------------------------------------- */

.callout {
  margin: 24px 0 0;
  padding: 16px 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line-blue);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}

.callout strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13px;
}

.callout p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.callout p + p {
  margin-top: 8px;
}

.dark-band .callout {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  border-left-color: var(--blue-light);
}

.dark-band .callout strong {
  color: var(--white);
}

.dark-band .callout p {
  color: rgba(255, 255, 255, 0.78);
}

/* --- Privacy points and permissions --------------------------------------- */

.privacy-points,
.perm-grid {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.privacy-points article,
.perm-grid article {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 13px;
}

.perm-grid article {
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
}

.privacy-points strong {
  font-size: 13px;
}

.privacy-points span,
.perm-grid span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.perm-grid code {
  justify-self: start;
  padding: 3px 8px;
  color: var(--ink-blue);
  background: var(--surface-soft);
  border: 1px solid var(--line-blue);
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
}

.text-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--blue-dark);
  font-size: 14px;
  font-weight: 850;
}

.dark-band .text-link {
  color: var(--blue-light);
}

.text-link::after {
  content: "→";
  margin-left: 8px;
}

.all-features {
  background: #e8ecf1;
}

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

.feature-grid article {
  min-height: 166px;
}

.feature-grid h3 {
  margin-top: 0;
}

.promo-section {
  padding: 54px 0;
  background: var(--deep);
}

.promo-section img {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

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

.site-footer {
  padding: 28px 0;
  color: rgba(255, 255, 255, 0.7);
  background: var(--deep-4);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-brand {
  color: var(--white);
}

.footer-brand img {
  width: 30px;
  height: 30px;
}

.footer-inner p {
  margin: 0 auto 0 0;
  font-size: 12px;
}

.footer-inner > div {
  display: flex;
  gap: 18px;
  font-size: 12px;
  font-weight: 700;
}

/* --- Policy page ---------------------------------------------------------- */

.policy-back {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 750;
}

.policy-back:hover,
.policy-back:focus-visible {
  color: var(--white);
}

.policy-main {
  min-height: 70vh;
}

.policy-hero {
  padding: 58px 0 54px;
  color: var(--white);
  background:
    linear-gradient(120deg, rgba(22, 104, 214, 0.28), transparent 48%),
    linear-gradient(180deg, var(--deep), #131c2b);
}

.policy-hero-inner {
  max-width: 860px;
}

.policy-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.policy-hero p:not(.eyebrow) {
  max-width: 650px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 17px;
  line-height: 1.6;
}

.policy-updated {
  display: block;
  margin-top: 18px;
  color: var(--blue-pale);
  font-size: 12px;
  font-weight: 750;
}

.policy-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  align-items: start;
  gap: 34px;
  padding-top: 54px;
  padding-bottom: 70px;
}

.policy-summary {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 10px;
  padding: 18px;
  background: var(--surface-soft);
  border: 1px solid var(--line-blue);
  border-radius: var(--radius);
}

.policy-summary strong {
  margin-bottom: 4px;
  font-size: 13px;
}

.policy-summary span {
  position: relative;
  padding-left: 18px;
  color: #3d4657;
  font-size: 12px;
  line-height: 1.4;
}

.policy-summary span::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 7px;
  height: 4px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

.policy-content {
  padding: 8px 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.policy-content section {
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.policy-content section:last-child {
  border-bottom: 0;
}

.policy-content h2 {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
}

.policy-content h3 {
  margin: 20px 0 8px;
  font-size: 15px;
  line-height: 1.35;
}

.policy-content p,
.policy-content li {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}

.policy-content p {
  margin: 0;
}

.policy-content p + p {
  margin-top: 12px;
}

.policy-content ul {
  margin: 0;
  padding-left: 20px;
}

.policy-content li + li {
  margin-top: 8px;
}

.policy-content strong {
  color: var(--ink);
}

.policy-content code {
  padding: 2px 6px;
  color: var(--ink-blue);
  background: var(--surface-soft);
  border: 1px solid var(--line-blue);
  border-radius: 5px;
  font-size: 13px;
}

.policy-content pre {
  overflow-x: auto;
  margin: 14px 0 0;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.6;
}

.policy-content pre code {
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
}

.policy-content a {
  color: var(--blue-dark);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Reveal on scroll -----------------------------------------------------
   Paired with assets/app.js: the class is only armed once the script has
   confirmed motion is welcome, so the page is fully readable without it. */

.reveal {
  opacity: 1;
}

body.motion-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.motion-ready .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-grid,
  .feature-row,
  .feature-row.balanced {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 720px;
  }

  .hero-media {
    transform: none;
  }

  .feature-copy {
    max-width: 720px;
  }

  .feature-row.reverse .feature-copy,
  .feature-row.reverse .product-shot,
  .feature-row.reverse .feature-aside {
    order: initial;
  }

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

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

  .theme-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .policy-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(calc(100% - 28px), var(--max));
  }

  .nav {
    min-height: auto;
    padding: 9px 0;
    flex-wrap: wrap;
  }

  .brand {
    font-size: 13px;
  }

  .brand img {
    width: 34px;
    height: 34px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    gap: 16px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .nav-links a {
    min-height: 34px;
  }

  .nav-cta {
    min-height: 36px;
    padding-inline: 11px;
  }

  .hero {
    padding-top: 36px;
  }

  .hero h1 {
    font-size: clamp(38px, 12vw, 52px);
  }

  .tagline {
    font-size: 21px;
  }

  .hero-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

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

  .fact-strip div {
    min-height: 66px;
    justify-content: flex-start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  }

  .fact-strip div:nth-child(even) {
    border-right: 0;
  }

  .fact-strip div:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }

  .fact-strip div:last-child,
  .fact-strip div:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }

  .section {
    padding: 44px 0;
  }

  .section-heading h2,
  .feature-copy h2 {
    font-size: clamp(30px, 9vw, 42px);
  }

  .mode-grid,
  .layout-grid,
  .feature-grid,
  .check-list,
  .mini-grid,
  .shortcut-grid {
    grid-template-columns: 1fr;
  }

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

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

  .mode-card h3 {
    margin-top: 14px;
  }

  .privacy-points article,
  .perm-grid article,
  .syntax-list > * {
    grid-template-columns: 1fr;
  }

  .syntax-list > * {
    align-items: start;
    gap: 7px;
  }

  .shortcut {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .shortcut > .keys,
  .shortcut > kbd {
    min-width: 0;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .footer-inner p {
    margin: 0;
  }

  .policy-hero {
    padding: 42px 0 38px;
  }

  .policy-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-top: 28px;
    padding-bottom: 44px;
  }

  .policy-summary {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .policy-summary strong {
    grid-column: 1 / -1;
  }

  .policy-content {
    padding: 2px 20px 16px;
  }
}

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

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #363c48;
    --line: #858f9e;
    --line-blue: #6f97d6;
  }

  .lead,
  .hero .lead,
  .dark-band .feature-copy > p,
  .dark-band .section-heading > p:last-child,
  .policy-hero p:not(.eyebrow) {
    color: #ffffff;
  }
}

@media (forced-colors: active) {
  .button,
  .nav-cta,
  .swatch,
  .theme-chip,
  .shortcut,
  kbd {
    border: 1px solid ButtonBorder;
  }

  .hue-rail,
  .theme-chip::after,
  .group-band::before {
    forced-color-adjust: none;
  }
}

/* ============================================================================
   LAYER 2 — the striking pass
   ---------------------------------------------------------------------------
   Everything below is additive. It is appended rather than woven in so the
   original layer, and privacy.html which shares it, keep working untouched;
   where a rule below restates an earlier selector it wins on source order, not
   on specificity, which keeps the cascade readable.

   New components
   ---------------------------------------------------------------------------
   Hero        .hero-stage .tab-crush .crush-note
   Frame       .browser-frame (+ .hero-shot) .browser-bar .browser-dots
               .browser-chip
   Demo band   .demo-band .demo-head .demo-note .demo-fallback
   Demo shell  .demo and the .demo__* set assets/demo.js builds — see the
               block near the end of this file for the full list
   Search      .query-sheet  (dl / dt / dd inside, no extra classes)
   Bulk        .shortcut-grid.three  (modifier on the existing grid)
   Tidy        .rule-ladder .rule-step
   Themes      .theme-band .theme-wall .theme-card .theme-card-name .theme-mini
               .theme-mini-bar .theme-mini-row .theme-mini-dot .theme-mini-cta
   Privacy     .privacy-band .zero-wall .zero-card
   Everything  .feature-grid.tight  (modifier)
   Close       .close-band .close-inner

   Contrast — every new pair, computed, AA or better
   ---------------------------------------------------------------------------
   #ffffff@.80 on #101318 .......... 12.05:1   band body copy
   #ffffff@.72 on #0b0e12 .......... 10.17:1   demo band body copy
   #aecbfa on #101318 .............. 11.28:1   query sheet keys
   #c8cfdb on #101318 .............. 11.88:1   query sheet glosses
   #dce9fd on #14171c .............. 14.64:1   pill and chip text on dark
   #8ab4f8 on #1a1c20 ............... 8.10:1   accent on a demo tile
   #ffffff@.92 on #0b0e12 tile ..... 14.9 :1   demo tile title, matching
   #ffffff@.80 on #0b0e12 tile ..... 12.4 :1   demo tile host, matching
   the same two at .62 tile opacity . 5.5 / 5.1 demo tile, not matching
   #ffffff@.40 on #14171c ........... 3.83:1   theme-card ring (boundary, 3:1)
   #4a5160 on #dfe5ee ............... 6.29:1   quiet plate body copy
   #14181f on #dfe5ee .............. 14.05:1   quiet plate headings
   #0b57d0 on #ffffff ............... 6.39:1   links and accents on white
   Theme cards are painted from tokens.css itself; the tightest text pair in
   the six is Daylight muted #5f6775 on #eff2f6 at 5.08:1.
   ========================================================================== */

/* The dark hue set applies on every dark plate, new ones included. */
.demo-band,
.theme-band,
.close-band {
  --g-grey: #939db1;
  --g-blue: #599ef8;
  --g-red: #f7736a;
  --g-yellow: #cd9105;
  --g-green: #0fb546;
  --g-pink: #f66bb0;
  --g-purple: #c57ff7;
  --g-cyan: #0babcb;
  --g-orange: #f97612;
}

.demo-band :focus-visible,
.theme-band :focus-visible,
.close-band :focus-visible {
  outline-color: var(--blue-light);
}

/* --- Header: slimmer ------------------------------------------------------ */

.nav {
  min-height: 58px;
}

.brand img {
  width: 32px;
  height: 32px;
}

/* --- Hero: one centred stage ---------------------------------------------- */

.hero {
  padding: 30px 0 46px;
}

.hero-stage {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
}

/* The tab strip at the point where it stops being useful. Decorative: the
   markup carries aria-hidden, and nothing here is a claim about the product. */
.tab-crush {
  display: flex;
  gap: 2px;
  width: 100%;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  mask-image: linear-gradient(90deg, #000 58%, rgba(0, 0, 0, 0.18));
  -webkit-mask-image: linear-gradient(90deg, #000 58%, rgba(0, 0, 0, 0.18));
}

.tab-crush li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 30px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.tab-crush li::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 2px;
  background: var(--g-grey);
}

.tab-crush li:nth-child(9n + 1)::before { background: var(--g-blue); }
.tab-crush li:nth-child(9n + 2)::before { background: var(--g-red); }
.tab-crush li:nth-child(9n + 3)::before { background: var(--g-yellow); }
.tab-crush li:nth-child(9n + 4)::before { background: var(--g-green); }
.tab-crush li:nth-child(9n + 5)::before { background: var(--g-pink); }
.tab-crush li:nth-child(9n + 6)::before { background: var(--g-purple); }
.tab-crush li:nth-child(9n + 7)::before { background: var(--g-cyan); }
.tab-crush li:nth-child(9n + 8)::before { background: var(--g-orange); }
.tab-crush li:nth-child(9n + 9)::before { background: var(--g-grey); }

.crush-note {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hero-stage h1 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(40px, 7.4vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.hero-stage .tagline {
  max-width: 26ch;
  margin-top: 20px;
  font-size: clamp(19px, 2.3vw, 27px);
}

.hero-stage .lead {
  max-width: 62ch;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.hero-stage .hero-actions {
  justify-content: center;
  margin-top: 28px;
}

.hero-stage .button {
  padding-inline: 24px;
}

.hero-stage .browser-frame {
  width: 100%;
  margin-top: 44px;
}

.hero .fact-strip {
  margin-top: 26px;
}

/* --- The browser frame ----------------------------------------------------
   Drawn, not photographed: none of the screenshots carries chrome of its own,
   so the outline, the bar and the three dots are all CSS and the shot inside
   stays exactly the 1280x800 the store was given. */

.browser-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--deep-2);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow:
    0 2px 4px rgba(6, 12, 24, 0.3),
    0 12px 24px rgba(6, 12, 24, 0.28),
    0 48px 90px rgba(6, 12, 24, 0.42);
}

.section .browser-frame,
.privacy-band .browser-frame {
  border-color: var(--line);
  box-shadow:
    0 2px 4px rgba(11, 23, 44, 0.06),
    0 12px 24px rgba(11, 23, 44, 0.09),
    0 44px 80px rgba(11, 23, 44, 0.16);
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  background: var(--deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section .browser-bar {
  background: #e9edf3;
  border-bottom-color: var(--line);
}

/* One element, three dots: two of them are box-shadows, so the markup stays a
   single empty span. */
.browser-dots {
  flex: none;
  width: 10px;
  height: 10px;
  margin-right: 26px;
  border-radius: 50%;
  background: var(--g-red);
  box-shadow: 18px 0 0 var(--g-yellow), 36px 0 0 var(--g-green);
}

.browser-chip {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 340px;
  padding: 4px 12px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section .browser-chip {
  color: #3d4657;
  background: var(--white);
  border-color: var(--line);
}

.browser-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.browser-frame figcaption {
  padding: 12px 16px 14px;
  color: rgba(255, 255, 255, 0.68);
  background: var(--deep);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  line-height: 1.5;
}

.section .browser-frame figcaption {
  color: var(--muted);
  background: #e9edf3;
  border-top-color: var(--line);
}

/* --- The demo band — second big moment ------------------------------------ */

.demo-band {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  scroll-margin-top: 70px;
  color: var(--white);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(22, 104, 214, 0.24), transparent 62%),
    linear-gradient(180deg, var(--deep-4), #07090c);
}

.demo-head {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}

.demo-head h2 {
  margin: 0;
  font-size: clamp(32px, 5.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.demo-note {
  max-width: 58ch;
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.6;
}

.demo-fallback {
  max-width: 900px;
  margin: 0 auto;
}

/* --- The query sheet ------------------------------------------------------ */

.query-sheet {
  display: grid;
  gap: 2px;
  margin: 26px 0 0;
  padding: 8px;
  background: linear-gradient(180deg, var(--deep-3), var(--deep-4));
  border: 1px solid #262b33;
  border-radius: 12px;
  box-shadow: 0 22px 54px rgba(11, 23, 44, 0.22);
}

.query-sheet > div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 11px 14px;
  border-radius: 8px;
}

.query-sheet > div:nth-child(odd) {
  background: rgba(255, 255, 255, 0.035);
}

.query-sheet dt {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #aecbfa;
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 600;
}

.query-sheet dd {
  margin: 0;
  color: #c8cfdb;
  font-size: 13.5px;
  line-height: 1.5;
}

/* --- Keycap wall ---------------------------------------------------------- */

.shortcut-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.shortcut-grid.three .shortcut {
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  padding: 11px 12px;
}

.shortcut-grid.three .shortcut > .keys,
.shortcut-grid.three .shortcut > kbd {
  min-width: 0;
}

.shortcut-grid.three .shortcut span:not(.keys) {
  font-size: 12.5px;
}

/* --- The keeper rule, as a ladder ----------------------------------------- */

.rule-ladder {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: rung;
}

.rule-step {
  position: relative;
  padding: 15px 14px 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
}

.rule-step::before {
  counter-increment: rung;
  content: counter(rung);
  display: block;
  margin-bottom: 7px;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.rule-step strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

.rule-step span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

/* --- The theme wall — third big moment ------------------------------------ */

.theme-band {
  padding: 80px 0;
  scroll-margin-top: 70px;
  color: var(--white);
  background:
    radial-gradient(90% 70% at 78% 6%, rgba(22, 104, 214, 0.2), transparent 60%),
    linear-gradient(180deg, var(--deep), var(--deep-3));
}

.theme-band .section-heading > p:last-child,
.theme-band .feature-copy > p {
  color: rgba(255, 255, 255, 0.8);
}

.theme-band .export-row span {
  color: #dce9fd;
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}

.theme-band .callout {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  border-left-color: var(--blue-light);
}

.theme-band .callout strong {
  color: var(--white);
}

.theme-band .callout p {
  color: rgba(255, 255, 255, 0.8);
}

.theme-wall {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

/* Every value below comes out of src/shared/tokens.css unchanged, so a card is
   a sample of the theme rather than a picture of one. The 1px ring is the
   page's, not the theme's: it has to separate a black card from a near-black
   band, which a theme's own border token is not there to do. */
.theme-card {
  --c-bg: #eff2f6;
  --c-surface: #ffffff;
  --c-surface-2: #f4f6f9;
  --c-border: #dde2e9;
  --c-text: #14181f;
  --c-muted: #5f6775;
  --c-primary: #1668d6;
  --c-on-primary: #ffffff;
  --c-sel: #e4edfb;

  overflow: hidden;
  padding: 16px 16px 18px;
  background: var(--c-bg);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.42);
}

.theme-card-name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 13px;
  color: var(--c-text);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: -0.01em;
}

.theme-card-name span {
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-mini {
  display: grid;
  gap: 7px;
  padding: 8px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 9px;
}

.theme-mini-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  color: var(--c-muted);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
}

.theme-mini-bar::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-primary);
}

.theme-mini-row {
  display: flex;
  gap: 5px;
}

.theme-mini-dot {
  flex: 1 1 0;
  height: 20px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 5px;
}

.theme-mini-row .theme-mini-dot:first-child {
  background: var(--c-sel);
  border-color: var(--c-primary);
}

.theme-mini-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  color: var(--c-on-primary);
  background: var(--c-primary);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

.theme-card[data-theme="daylight"],
.demo__themechip[data-theme="daylight"] {
  --c-bg: #eff2f6; --c-surface: #ffffff; --c-surface-2: #f4f6f9;
  --c-border: #dde2e9; --c-text: #14181f; --c-muted: #5f6775;
  --c-primary: #1668d6; --c-on-primary: #ffffff; --c-sel: #e4edfb;
}

.theme-card[data-theme="paper"],
.demo__themechip[data-theme="paper"] {
  --c-bg: #f3ece1; --c-surface: #fffdf9; --c-surface-2: #f4efe6;
  --c-border: #e0d8c9; --c-text: #241e14; --c-muted: #6b6150;
  --c-primary: #9c4a21; --c-on-primary: #fffaf3; --c-sel: #f0e0cb;
}

.theme-card[data-theme="midnight"],
.demo__themechip[data-theme="midnight"] {
  --c-bg: #101318; --c-surface: #1b1f26; --c-surface-2: #232830;
  --c-border: #333a45; --c-text: #e6e9ef; --c-muted: #98a1b0;
  --c-primary: #8ab4f8; --c-on-primary: #0b0e12; --c-sel: #22314b;
}

.theme-card[data-theme="graphite"],
.demo__themechip[data-theme="graphite"] {
  --c-bg: #0c0d10; --c-surface: #17191d; --c-surface-2: #1f2124;
  --c-border: #2c2f35; --c-text: #e9ecf1; --c-muted: #9aa2af;
  --c-primary: #d8d8dc; --c-on-primary: #17181a; --c-sel: #303338;
}

.theme-card[data-theme="carbon"],
.demo__themechip[data-theme="carbon"] {
  --c-bg: #000000; --c-surface: #0a0c0f; --c-surface-2: #14171c;
  --c-border: #262b33; --c-text: #eceff4; --c-muted: #99a2b0;
  --c-primary: #8ab4f8; --c-on-primary: #000000; --c-sel: #152238;
}

.theme-card[data-theme="beacon"],
.demo__themechip[data-theme="beacon"] {
  --c-bg: #000000; --c-surface: #161616; --c-surface-2: #0d0d0d;
  --c-border: #ffffff; --c-text: #ffffff; --c-muted: #c7c7c7;
  --c-primary: #ffd400; --c-on-primary: #000000; --c-sel: #332b00;
}

/* --- Privacy: the loud white one ------------------------------------------ */

.privacy-band {
  padding: 88px 0;
  scroll-margin-top: 70px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.privacy-band .section-heading {
  max-width: 20ch;
}

.privacy-band .section-heading h2 {
  font-size: clamp(36px, 6.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.privacy-band .section-heading > p:last-child {
  max-width: 62ch;
  font-size: 17px;
}

.privacy-band h3 {
  margin: 46px 0 0;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.zero-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.zero-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 20px 18px 22px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.zero-card strong {
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.zero-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

/* --- Everything else: compact --------------------------------------------- */

.feature-grid.tight article {
  min-height: 0;
  padding: 15px 16px 16px;
}

.feature-grid.tight h3 {
  margin-bottom: 6px;
  font-size: 15px;
}

.feature-grid.tight p {
  font-size: 12.5px;
}

/* --- Close ---------------------------------------------------------------- */

.close-band {
  padding: 70px 0 64px;
  color: var(--white);
  background:
    radial-gradient(100% 80% at 50% 100%, rgba(22, 104, 214, 0.22), transparent 62%),
    linear-gradient(180deg, var(--deep-3), var(--deep-4));
}

.close-inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.close-inner h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(32px, 5.4vw, 62px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.close-inner p {
  max-width: 56ch;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.6;
}

.close-inner .hero-actions {
  justify-content: center;
}

.close-band .promo-shot {
  width: 100%;
  margin: 40px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
}

/* --- Responsive: the striking pass ---------------------------------------- */

@media (max-width: 1080px) {

  .query-sheet > div {
    grid-template-columns: 170px minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .theme-wall,
  .zero-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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




}

@media (max-width: 720px) {
  .demo-band,
  .theme-band,
  .privacy-band,
  .close-band {
    padding: 52px 0;
  }

  .tab-crush {
    height: 26px;
    margin-bottom: 20px;
  }

  .tab-crush li {
    height: 26px;
  }

  .tab-crush li:nth-child(n + 15) {
    display: none;
  }

  .hero-stage h1 {
    max-width: none;
  }

  .hero-stage .browser-frame {
    margin-top: 28px;
  }

  .browser-bar {
    height: 34px;
    padding-inline: 11px;
  }

  .browser-frame {
    border-radius: 10px;
  }

  .demo-head h2,
  .close-inner h2 {
    font-size: clamp(28px, 8.6vw, 40px);
  }

  .privacy-band .section-heading h2 {
    font-size: clamp(32px, 9.6vw, 44px);
  }





  .query-sheet > div {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 6px;
  }

  .theme-wall,
  .zero-wall,
  .rule-ladder,
  .shortcut-grid.three {
    grid-template-columns: 1fr;
  }

  .shortcut-grid.three .shortcut {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .privacy-band .section-heading,
  .close-inner h2,
  .hero-stage h1,
  .hero-stage .tagline {
    max-width: none;
  }
}

@media (prefers-contrast: more) {
  .demo-note,
  .close-inner p,
  .theme-band .section-heading > p:last-child,
  .theme-band .feature-copy > p {
    color: #ffffff;
  }


  .theme-card {
    border-color: #ffffff;
  }
}

@media (forced-colors: active) {
  .browser-frame,
  .demo__shell,
  .demo__tile,
  .demo__card,
  .demo__querychip,
  .demo__themechip,
  .demo__iconbtn,
  .demo__field,
  .theme-card,
  .zero-card,
  .rule-step,
  .query-sheet {
    border: 1px solid ButtonBorder;
  }

  .browser-dots,
  .demo__avatar,
  .tab-crush li::before,
  .theme-mini-cta,
  .demo__rail,
  .demo__banddot {
    forced-color-adjust: none;
  }

}

/* --- Layer 2, corrections and joins --------------------------------------
   Rules the new bands need from the original layer but do not inherit, plus
   the two small helpers the markup uses in place of inline style. */

/* Accent-coloured eyebrows on the new dark plates. #8ab4f8 on #0b0e12 is
   9.18:1; the light-section #0b57d0 would have been 1.6:1 here. */
.demo-band .eyebrow,
.theme-band .eyebrow,
.close-band .eyebrow {
  color: var(--blue-light);
}

.demo-band .text-link,
.theme-band .text-link,
.close-band .text-link {
  color: var(--blue-light);
}

/* A card on a section that is already white needs its own ground.
   --muted #4a5160 on --bg #eff2f6 is 7.03:1. */
.control-section .feature-grid article,
.control-section .privacy-points article,
.control-section .perm-grid article,
.control-section .mode-card,
.control-section .rule-step,
.privacy-band .feature-grid article,
.privacy-band .privacy-points article,
.privacy-band .perm-grid article {
  background: var(--bg);
}

.rule-step {
  background: var(--bg-2);
}

.spaced {
  margin-top: 46px;
}

.keymap-note {
  max-width: 72ch;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.62;
}

@media (max-width: 720px) {
  .spaced {
    margin-top: 32px;
  }
}


/* --- Centring inside the two stacked stages -------------------------------
   `justify-items: center` sizes a grid item to its content, so a child with a
   max-width still hugs the item's left edge unless it is told otherwise. Both
   stages therefore fill the column and centre their own blocks. */

.hero-stage > *,
.close-inner > * {
  width: 100%;
}

.hero-stage h1,
.hero-stage .tagline,
.hero-stage .lead,
.close-inner h2,
.close-inner p {
  margin-inline: auto;
}

.hero-stage .hero-actions,
.close-inner .hero-actions {
  width: auto;
}

/* ============================================================================
   The live demo — assets/demo.js
   ---------------------------------------------------------------------------
   demo.js builds the whole component and brings no CSS of its own, so this is
   the stylesheet for it. The class names are its; the palette is the
   extension's, lifted from src/shared/tokens.css under a --d- prefix so a
   theme here is the same re-declaration of one semantic set that a theme is in
   the product. Six blocks, six themes, and demo.js stamps the choice on
   #demo[data-demo-theme] when a visitor presses a theme chip.

   Element map (all built by demo.js)
   ---------------------------------------------------------------------------
   .demo                 #demo itself, carrying data-demo-theme / -view / -motion
   .demo__shell            the panel
   .demo__status             .demo__line1 (counts) .demo__line2 (live line)
   .demo__hovertitle .demo__hoverhost   inside line 2 on hover
   .demo__searchrow          .demo__field > .demo__input + .demo__count
   .demo__strip              .demo__iconbtn x3 (aria-pressed on two)
   .demo__grid               .demo__card
   .demo__cardhead             .demo__rail[data-hue] .demo__cardname .demo__cardcount
   .demo__tiles              .demo__group > .demo__band > .demo__banddot[data-hue]
                             .demo__bandtitle .demo__bandcount
   .demo__tile               .demo__avatar (style --hue, a number)
                             .demo__label > .demo__title + .demo__host
                             .demo__chips > .demo__chip(--pin|--audible|--muted)
   States on a tile       .is-dim .is-picked .is-dupe .is-pinned .is-active
                          .is-audible .is-muted .is-discarded .is-grouped
                          .is-loading
   .demo__controls         .demo__chipset > .demo__chipsetlabel
                           .demo__querychip .demo__themechip[data-theme]
                           .demo__note

   Contrast, computed over all six themes; the figure quoted is the tightest
   of the six. Every one clears AA.
     title on a tile   --d-text on --d-surface-2 ....... 12.18:1 (midnight)
     host on a tile    --d-text-2 on --d-surface-2 ...... 7.01:1 (midnight)
     a dimmed tile     --d-muted on --d-surface ......... 5.70:1 (daylight)
     status line 1     --d-text on --d-bg .............. 14.08:1 (paper)
     status line 2     --d-text-2 on --d-bg ............. 6.98:1 (paper)
     window count      --d-muted on --d-bg .............. 5.08:1 (daylight)
     field text        --d-text on --d-surface ......... 13.59:1 (midnight)
     placeholder       --d-muted on --d-surface ......... 5.70:1 (daylight)
     match count       --d-primary on --d-surface-2 ..... 4.87:1 (daylight)
     pressed button    --d-on-primary on --d-primary .... 5.27:1 (daylight)
     idle button       --d-text-2 on --d-surface-2 ...... 7.01:1 (midnight)
     Pinned chip       --d-warn on --d-surface-3 ........ 4.99:1 (paper)
     Playing chip      --d-ok on --d-surface-3 .......... 5.16:1 (daylight)
     Muted chip        --d-muted on --d-surface-3 ....... 4.76:1 (daylight)
     picked tile       --d-text on --d-sel-bg .......... 10.71:1 (graphite)
     control boundary  --d-border-strong on --d-surface . 3.22:1 (carbon), 3:1
   Dimming is done in colour, not in opacity: a non-matching tile drops its
   title from --d-text to --d-muted and desaturates its avatar, which is a
   plain visual difference that still leaves every string above 4.5:1. Fading
   text to 60% would not.
   ========================================================================== */

.demo {
  /* Daylight, and the fallback for an unknown value. */
  --d-bg: #eff2f6;
  --d-bg-2: #f7f9fb;
  --d-surface: #ffffff;
  --d-surface-2: #f4f6f9;
  --d-surface-3: #e7ebf1;
  --d-border: #dde2e9;
  --d-border-2: #e8ecf1;
  --d-border-strong: #858f9e;
  --d-text: #14181f;
  --d-text-2: #4a5160;
  --d-muted: #5f6775;
  --d-primary: #1668d6;
  --d-primary-soft: #e4edfb;
  --d-on-primary: #ffffff;
  --d-focus: #0b57d0;
  --d-sel-bg: #e4edfb;
  --d-sel-edge: #1668d6;
  --d-ok: #12703a;
  --d-warn: #7d5100;
  --d-danger: #c5221f;
  --d-avatar-s: 68%;
  --d-avatar-l: 74%;
  --d-avatar-fg: #14181f;
  --d-shadow: 0 18px 40px rgba(24, 33, 51, 0.14);

  /* The nine window and group hues, light values. */
  --dg-grey: #6b7280;
  --dg-blue: #3486f2;
  --dg-red: #e0453a;
  --dg-yellow: #b17d05;
  --dg-green: #089b39;
  --dg-pink: #e0408f;
  --dg-purple: #a855f7;
  --dg-cyan: #0792ae;
  --dg-orange: #db6409;

  /* Geometry, at the shipped default density (Balanced). */
  --d-tile: 28px;
  --d-gap: 6px;
  --d-pad: 10px;
  --d-bar: 38px;

  display: block;
}

.demo[data-demo-theme="paper"] {
  --d-bg: #f3ece1; --d-bg-2: #faf6ef;
  --d-surface: #fffdf9; --d-surface-2: #f4efe6; --d-surface-3: #ebe4d8;
  --d-border: #e0d8c9; --d-border-2: #ede6da; --d-border-strong: #998b70;
  --d-text: #241e14; --d-text-2: #574e3e; --d-muted: #6b6150;
  --d-primary: #9c4a21; --d-primary-soft: #f7e9d8; --d-on-primary: #fffaf3;
  --d-focus: #823c18; --d-sel-bg: #f0e0cb; --d-sel-edge: #9c4a21;
  --d-ok: #46671f; --d-warn: #7f5900; --d-danger: #a32626;
  --d-avatar-s: 62%; --d-avatar-l: 76%; --d-avatar-fg: #241e14;
  --d-shadow: 0 18px 40px rgba(60, 47, 28, 0.16);
}

.demo[data-demo-theme="midnight"] {
  --d-bg: #101318; --d-bg-2: #14171c;
  --d-surface: #1b1f26; --d-surface-2: #232830; --d-surface-3: #2c323c;
  --d-border: #333a45; --d-border-2: #282e38; --d-border-strong: #657081;
  --d-text: #e6e9ef; --d-text-2: #aab3c2; --d-muted: #98a1b0;
  --d-primary: #8ab4f8; --d-primary-soft: #22314b; --d-on-primary: #0b0e12;
  --d-focus: #aecbfa; --d-sel-bg: #22314b; --d-sel-edge: #8ab4f8;
  --d-ok: #81c995; --d-warn: #fdd663; --d-danger: #f28b82;
  --d-avatar-s: 58%; --d-avatar-l: 42%; --d-avatar-fg: #0b0e12;
  --d-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.demo[data-demo-theme="graphite"] {
  --d-bg: #0c0d10; --d-bg-2: #101114;
  --d-surface: #17191d; --d-surface-2: #1f2124; --d-surface-3: #2a2c31;
  --d-border: #2c2f35; --d-border-2: #1e2126; --d-border-strong: #686c76;
  --d-text: #e9ecf1; --d-text-2: #b0b8c4; --d-muted: #9aa2af;
  --d-primary: #d8d8dc; --d-primary-soft: #2a2c31; --d-on-primary: #17181a;
  --d-focus: #d8d8dc; --d-sel-bg: #303338; --d-sel-edge: #d8d8dc;
  --d-ok: #7fc08a; --d-warn: #d1a355; --d-danger: #e5707a;
  --d-avatar-s: 34%; --d-avatar-l: 40%; --d-avatar-fg: #0b0e12;
  --d-shadow: 0 18px 40px rgba(0, 0, 0, 0.56);
}

.demo[data-demo-theme="carbon"] {
  --d-bg: #000000; --d-bg-2: #06080a;
  --d-surface: #0a0c0f; --d-surface-2: #14171c; --d-surface-3: #1d2129;
  --d-border: #262b33; --d-border-2: #17191e; --d-border-strong: #5a6370;
  --d-text: #eceff4; --d-text-2: #aab3c0; --d-muted: #99a2b0;
  --d-primary: #8ab4f8; --d-primary-soft: #152238; --d-on-primary: #000000;
  --d-focus: #aecbfa; --d-sel-bg: #152238; --d-sel-edge: #8ab4f8;
  --d-ok: #81c995; --d-warn: #fdd663; --d-danger: #f28b82;
  --d-avatar-s: 58%; --d-avatar-l: 38%; --d-avatar-fg: #000000;
  --d-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}

/* Beacon expresses elevation as 1px borders and never as shadow, exactly as
   the extension does, and its accent picker is locked. */
.demo[data-demo-theme="beacon"] {
  --d-bg: #000000; --d-bg-2: #000000;
  --d-surface: #000000; --d-surface-2: #0d0d0d; --d-surface-3: #161616;
  --d-border: #ffffff; --d-border-2: #ffffff; --d-border-strong: #ffffff;
  --d-text: #ffffff; --d-text-2: #e8e8e8; --d-muted: #c7c7c7;
  --d-primary: #ffd400; --d-primary-soft: #332b00; --d-on-primary: #000000;
  --d-focus: #00e5ff; --d-sel-bg: #332b00; --d-sel-edge: #ffd400;
  --d-ok: #69f0ae; --d-warn: #ffd400; --d-danger: #ff8a80;
  --d-avatar-s: 0%; --d-avatar-l: 100%; --d-avatar-fg: #000000;
  --d-shadow: none;
}

.demo[data-demo-theme="midnight"],
.demo[data-demo-theme="graphite"],
.demo[data-demo-theme="carbon"],
.demo[data-demo-theme="beacon"] {
  --dg-grey: #939db1;
  --dg-blue: #599ef8;
  --dg-red: #f7736a;
  --dg-yellow: #cd9105;
  --dg-green: #0fb546;
  --dg-pink: #f66bb0;
  --dg-purple: #c57ff7;
  --dg-cyan: #0babcb;
  --dg-orange: #f97612;
}

.demo [data-hue="grey"]   { --band: var(--dg-grey); }
.demo [data-hue="blue"]   { --band: var(--dg-blue); }
.demo [data-hue="red"]    { --band: var(--dg-red); }
.demo [data-hue="yellow"] { --band: var(--dg-yellow); }
.demo [data-hue="green"]  { --band: var(--dg-green); }
.demo [data-hue="pink"]   { --band: var(--dg-pink); }
.demo [data-hue="purple"] { --band: var(--dg-purple); }
.demo [data-hue="cyan"]   { --band: var(--dg-cyan); }
.demo [data-hue="orange"] { --band: var(--dg-orange); }

/* demo.js hides tiles and cards with the hidden attribute; every display
   declaration below would otherwise win against it. */
.demo [hidden] {
  display: none !important;
}

.demo :focus-visible {
  outline: 3px solid var(--d-focus);
  outline-offset: 2px;
}

/* --- The shell ------------------------------------------------------------ */

.demo__shell {
  overflow: hidden;
  color: var(--d-text);
  background: var(--d-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 16px 32px rgba(0, 0, 0, 0.36),
    0 56px 100px rgba(0, 0, 0, 0.5);
}

.demo__status {
  display: grid;
  gap: 1px;
  padding: 9px var(--d-pad) 7px;
  background: var(--d-bg-2);
  border-bottom: 1px solid var(--d-border);
}

.demo__line1 {
  color: var(--d-text);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.demo__line2 {
  min-height: 17px;
  overflow: hidden;
  color: var(--d-text-2);
  font-size: 12px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo__hovertitle {
  color: var(--d-text);
  font-weight: 700;
}

.demo__hoverhost {
  color: var(--d-muted);
  font-family: var(--mono);
  font-size: 11px;
}

.demo__searchrow {
  display: flex;
  align-items: center;
  gap: var(--d-gap);
  padding: var(--d-gap) var(--d-pad);
  background: var(--d-bg-2);
  border-bottom: 1px solid var(--d-border);
}

.demo__field {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: var(--d-bar);
  padding: 0 10px;
  background: var(--d-surface);
  border: 1px solid var(--d-border-strong);
  border-radius: var(--r, 8px);
}

.demo__field:focus-within {
  border-color: var(--d-sel-edge);
  box-shadow: 0 0 0 1px var(--d-sel-edge);
}

.demo__input {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--d-text);
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 13px;
  outline: none;
}

.demo__input::placeholder {
  color: var(--d-muted);
  opacity: 1;
}

.demo__count {
  flex: none;
  padding: 3px 7px;
  color: var(--d-primary);
  background: var(--d-surface-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.demo__strip {
  display: flex;
  flex: none;
  gap: 4px;
}

.demo__iconbtn {
  display: grid;
  place-items: center;
  width: var(--d-bar);
  height: var(--d-bar);
  padding: 0;
  color: var(--d-text-2);
  background: var(--d-surface);
  border: 1px solid var(--d-border-strong);
  border-radius: var(--r, 8px);
  cursor: pointer;
}

.demo__iconbtn svg {
  display: block;
  fill: currentColor;
}

.demo__iconbtn:hover {
  color: var(--d-text);
  background: var(--d-surface-2);
}

.demo__iconbtn[aria-pressed="true"] {
  color: var(--d-on-primary);
  background: var(--d-primary);
  border-color: var(--d-primary);
}

/* --- The grid ------------------------------------------------------------- */

.demo__grid {
  display: grid;
  gap: var(--d-gap);
  max-height: 430px;
  padding: var(--d-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--d-bg);
}

.demo__card {
  padding: 8px 9px 9px;
  background: var(--d-surface);
  border: 1px solid var(--d-border);
  border-radius: 10px;
}

.demo__cardhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  min-width: 0;
}

.demo__rail {
  flex: none;
  width: 4px;
  height: 14px;
  border-radius: 999px;
  background: var(--band, var(--dg-grey));
}

.demo__cardname {
  min-width: 0;
  overflow: hidden;
  color: var(--d-text);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo__cardcount {
  flex: none;
  margin-left: auto;
  color: var(--d-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.demo__tiles {
  display: grid;
  gap: var(--d-gap);
}

.demo__group {
  display: grid;
  gap: var(--d-gap);
  grid-column: 1 / -1;
  padding: 6px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-border);
  border-radius: 8px;
}

.demo__band {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.demo__banddot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--band, var(--dg-grey));
}

.demo__bandtitle {
  min-width: 0;
  overflow: hidden;
  color: var(--d-text);
  font-size: 11.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo__bandcount {
  flex: none;
  margin-left: auto;
  color: var(--d-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* --- A tile --------------------------------------------------------------- */

.demo__tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 7px;
  background: var(--d-surface-2);
  border: 1px solid var(--d-border-2);
  border-radius: 7px;
}

.demo__avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--d-tile);
  height: var(--d-tile);
  border-radius: 6px;
  color: var(--d-avatar-fg);
  background: hsl(var(--hue, 210) var(--d-avatar-s) var(--d-avatar-l));
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.demo__label {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.demo__title {
  overflow: hidden;
  color: var(--d-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo__host {
  overflow: hidden;
  color: var(--d-text-2);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.demo__chips {
  display: flex;
  flex: none;
  gap: 4px;
}

.demo__chip {
  padding: 2px 6px;
  background: var(--d-surface-3);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.demo__chip--pin { color: var(--d-warn); }
.demo__chip--audible { color: var(--d-ok); }
.demo__chip--muted { color: var(--d-muted); }

/* States. The current tab wears the accent edge; a sleeping tab loses the
   colour in its avatar, which is what "discarded" looks like in the grid. */

.demo__tile.is-active {
  border-color: var(--d-sel-edge);
}

.demo__tile.is-discarded .demo__avatar {
  filter: grayscale(1);
  opacity: 0.72;
}

.demo__tile.is-picked {
  background: var(--d-sel-bg);
  border-color: var(--d-sel-edge);
  box-shadow: inset 0 0 0 1px var(--d-sel-edge);
}

/* Not a match. Colour carries it, so every string stays above 4.5:1 — see the
   contrast table at the top of this block. */
.demo__tile.is-dim {
  background: transparent;
  border-color: transparent;
}

.demo__tile.is-dim .demo__title,
.demo__tile.is-dim .demo__host {
  color: var(--d-muted);
  font-weight: 400;
}

.demo__tile.is-dim .demo__avatar {
  filter: grayscale(1);
  opacity: 0.7;
}

.demo__tile.is-dim .demo__chips {
  opacity: 0.7;
}

/* --- The four layouts ----------------------------------------------------- */

.demo[data-demo-view="tiles"] .demo__tiles {
  grid-template-columns: repeat(auto-fill, minmax(var(--d-tile), 1fr));
}

.demo[data-demo-view="tiles"] .demo__tile {
  justify-content: center;
  padding: 3px;
  aspect-ratio: 1;
}

/* Clipped, not removed: forty titles are still in the DOM for a screen reader
   and for find-in-page when the eye is only seeing forty coloured squares. */
.demo[data-demo-view="tiles"] .demo__label,
.demo[data-demo-view="tiles"] .demo__chips,
.demo[data-demo-view="rows"] .demo__host,
.demo[data-demo-view="large"] .demo__host {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.demo[data-demo-view="large"] .demo__tiles {
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}

.demo[data-demo-view="large"] .demo__tile {
  align-items: center;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  text-align: center;
}

.demo[data-demo-view="large"] .demo__avatar {
  width: 34px;
  height: 34px;
  font-size: 15px;
}

.demo[data-demo-view="large"] .demo__label {
  flex: 0 0 auto;
  width: 100%;
}

.demo[data-demo-view="large"] .demo__title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

.demo[data-demo-view="rows"] .demo__tiles {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.demo[data-demo-view="list"] .demo__tiles {
  grid-template-columns: minmax(0, 1fr);
}

/* --- The controls under the shell ----------------------------------------
   These sit on the page's dark band rather than inside the panel, so they keep
   the site palette while the panel changes theme underneath them. */

.demo__controls {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.demo__chipset {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.demo__chipsetlabel {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.demo__querychip,
.demo__themechip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 11px;
  color: #dce9fd;
  background: rgba(138, 180, 248, 0.12);
  border: 1px solid rgba(138, 180, 248, 0.34);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.demo__querychip {
  font-family: var(--mono);
  font-weight: 500;
}

.demo__querychip:hover,
.demo__themechip:hover {
  background: rgba(138, 180, 248, 0.22);
}

.demo__themechip::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--c-bg, #eff2f6);
  border: 1px solid var(--c-primary, #1668d6);
}

.demo__themechip[aria-pressed="true"] {
  color: var(--deep-4);
  background: var(--blue-light);
  border-color: var(--blue-light);
  font-weight: 800;
}

.demo__note {
  max-width: 68ch;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .demo__grid {
    max-height: 58vh;
  }

  .demo__searchrow {
    flex-wrap: wrap;
  }

  .demo__field {
    flex: 1 1 100%;
  }

  .demo[data-demo-view="rows"] .demo__tiles,
  .demo[data-demo-view="large"] .demo__tiles {
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo *,
  .demo *::before,
  .demo *::after {
    transition: none !important;
  }
}

.demo[data-demo-motion="reduced"] *,
.demo[data-demo-motion="reduced"] *::before,
.demo[data-demo-motion="reduced"] *::after {
  transition: none !important;
}

@media (prefers-contrast: more) {
  .demo__tile {
    border-color: var(--d-border-strong);
  }

  .demo__note,
  .demo__chipsetlabel {
    color: #ffffff;
  }
}

@media (forced-colors: active) {
  .demo__avatar,
  .demo__rail,
  .demo__banddot {
    forced-color-adjust: none;
  }
}

/* --- Layer 2, alignment pass ----------------------------------------------
   Three corrections that only show up once the page is drawn.

   1. `.section-heading` and `.container` are the same element, and the
      heading's max-width was narrowing the container itself — so
      `margin-inline: auto` centred a 760px box inside a 1180px column and the
      headings floated away from the grids underneath them. The container
      stays full width now; the measure moves onto the h2 and the paragraph,
      where a `ch` is also relative to the type it is measuring.
   2. Three of the new components are container elements whose `margin`
      shorthand reset the container's own auto side margins.
   3. `.feature-row.reverse` reorders its children but was still handing the
      wide column to the copy, which left every reversed screenshot at half
      the size of an un-reversed one. */

.section-heading,
.privacy-band .section-heading {
  max-width: none;
}

.section-heading h2 {
  max-width: 24ch;
  text-wrap: balance;
}

.section-heading > p:last-child {
  max-width: 68ch;
  text-wrap: pretty;
}

.privacy-band .section-heading h2 {
  max-width: 15ch;
}

.privacy-band .section-heading > p:last-child {
  max-width: 60ch;
}

.hero-stage h1,
.hero-stage .tagline,
.demo-head h2,
.close-inner h2 {
  text-wrap: balance;
}

.hero-stage .lead,
.demo-note,
.close-inner p,
.keymap-note {
  text-wrap: pretty;
}

.rule-ladder,
.theme-wall,
.zero-wall {
  margin-inline: auto;
}

.feature-row.reverse {
  grid-template-columns: minmax(560px, 1.28fr) minmax(320px, 0.72fr);
}

.perm-grid strong {
  font-size: 13px;
}

.demo {
  --d-tile: 30px;
}

@media (max-width: 980px) {
  .feature-row.reverse {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .section-heading h2,
  .privacy-band .section-heading h2,
  .section-heading > p:last-child {
    max-width: none;
  }
}

/* --- The hero shot --------------------------------------------------------
   The one screenshot on the page that is the subject rather than an
   illustration: wider corner, deeper lift, and it keeps its own scale on a
   very large display rather than growing to fill it. */

.hero-shot {
  width: min(100%, 1180px);
  margin-inline: auto;
  border-radius: 18px;
  box-shadow:
    0 2px 4px rgba(4, 8, 18, 0.4),
    0 18px 36px rgba(4, 8, 18, 0.38),
    0 70px 130px rgba(4, 8, 18, 0.55);
}

.hero-shot .browser-bar {
  height: 46px;
}

@media (max-width: 720px) {
  .hero-shot {
    border-radius: 12px;
  }

  .hero-shot .browser-bar {
    height: 34px;
  }
}