/*
 * Xnnoying site. Colors come from COLORS in brand/src/brand.js (build.mjs
 * fills them in below); type and tone follow brand/guide.html.
 *
 * The demos are the brand mock (mock.css) with the extension's real
 * styles.css inside, sized here to fit the page. Rules that reach into
 * them use the same `html body` weight as styles.css.
 */

:root {
  --red: #F4212E; --ink: #0F1419; --paper: #FFFFFF; --blush: #FFF0F0; --night: #000000; --slate: #536471; --fog: #8B98A5; --mist: #EFF3F4; --amber: #FF7A00; --blue: #1D9BF0;
  --red-deep: #D1121F;    /* Block Red for small text on light grounds (5:1 on Blush) */
  --red-light: #FF5A64;   /* Block Red for small text on Ink */

  --display: "Xn Double X", "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --text: "Xn Double X", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  /* Space above and below each section, and between copy and demo. */
  --section: clamp(48px, 6vw, 80px);
  --columns: clamp(32px, 5vw, 72px);
  --gutter: max(16px, 4vw);
  --radius: 14px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
}

/* 𝕏 isn't in either brand font. Take it from Cambria Math where the
   reader has it (Windows, Microsoft Office), as the brand images do;
   everyone else sees their system's 𝕏. */
@font-face {
  font-family: "Xn Double X";
  src: local("Cambria Math"), local("CambriaMath");
  unicode-range: U+1D54F;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus, var(--red)); outline-offset: 3px; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nb { white-space: nowrap; }

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 700 15px/1 var(--text);
  text-decoration: none;
}
.skip:focus { top: 16px; }

/* ---- Grounds ------------------------------------------------------------ */

.t-blush, .t-paper {
  --fg: var(--ink);
  --muted: var(--slate);
  --accent-text: var(--red-deep);
  --line: rgba(15, 20, 25, 0.1);
  --surface: var(--paper);
  color: var(--fg);
}
.t-blush { --bg: var(--blush); background: var(--blush); }
.t-paper { --bg: var(--paper); background: var(--paper); --surface: #F7F9F9; }
.t-ink {
  --bg: var(--ink);
  --fg: #E7E9EA;
  --muted: var(--fog);
  --accent-text: var(--red-light);
  --line: #27313A;
  --surface: #161C22;
  --focus: var(--paper);
  background: var(--ink);
  color: var(--fg);
  color-scheme: dark;
}
.t-red {
  --bg: var(--red);
  --fg: var(--paper);
  --muted: var(--paper);
  --line: rgba(255, 255, 255, 0.45);
  --focus: var(--paper);
  background: var(--red);
  color: var(--fg);
}

/* ---- Type ----------------------------------------------------------------- */

.headline {
  font-family: var(--display);
  font-weight: 800;
  font-optical-sizing: auto;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}
h1.headline { font-size: clamp(52px, 7vw, 96px); }
h2.headline { font-size: clamp(34px, 4.2vw, 56px); }
.headline-sm { font-size: clamp(27px, 2.7vw, 34px); letter-spacing: -0.02em; line-height: 1.04; }

.eyebrow {
  margin: 0;
  font: 700 13px/1 var(--text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.lede { font-size: clamp(20px, 2vw, 24px); line-height: 1.45; color: var(--muted); text-wrap: balance; }
.lede .phrase { display: block; }

/* X's More icon, drawn inline where the copy names the menu. */
.more { display: inline-block; vertical-align: -0.2em; }
.more svg { width: 1.15em; height: 1.15em; fill: currentColor; }

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

.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.brand { display: inline-flex; border-radius: 6px; }
.brand svg { width: auto; height: 32px; }

@media (max-width: 420px) { .brand svg { height: 28px; } }

/* ---- Store links -------------------------------------------------------
   Chrome is Google's "Available in the Chrome Web Store" badge, which
   Google allows unmodified (resized only, ratio kept), linking to the
   listing, away from other logos and never the page's main element.
   Firefox and Edge are named in plain text as coming soon and aren't
   links: their owners allow logos and badges only for a live listing. */

.disclosure { max-width: 46ch; margin-top: 22px; color: var(--fg); font: 400 16px/1.5 var(--text); }
/* Centered across their column, in the hero as in the closing section:
   the badge over the coming-soon pair, each pair item centered on its
   own label. */
.stores { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 20px; }
.stores-soon { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.store-badge { display: inline-flex; border-radius: 8px; }
.store-badge img { display: block; width: 206px; height: auto; aspect-ratio: 206 / 58; }
.store {
  display: inline-flex;
  align-items: center;
  border-radius: 16px;
  font: 700 18px/1.15 var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.store-label { display: grid; justify-items: center; gap: 5px; text-align: center; }
.store-label small { font: 600 13px/1 var(--text); }

.store.is-soon {
  min-height: 46px;
  padding: 6px 14px;
  color: var(--fg);
  font-size: 14px;
  box-shadow: inset 0 0 0 1.5px var(--line);
  cursor: default;
}
.store.is-soon .store-label small {
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--mist);
  color: var(--slate);
  font-size: 12px;
}
.t-ink .store.is-soon .store-label small { background: #27313A; color: var(--fg); }

/* Small text on Block Red: Night is 5.1:1 (Ink is 4.5:1, just short), and
   the coming-soon labels sit on a darker red where white is 5.6:1. */
.t-red .disclosure { color: var(--night); }
.t-red .store.is-soon { background: rgba(15, 20, 25, 0.18); box-shadow: none; }
.t-red .store.is-soon .store-label small { background: var(--paper); color: var(--ink); }

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

.hero { padding-block: 12px var(--section); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: var(--columns);
}
.hero-copy .lede { margin-top: 20px; max-width: 30ch; }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-copy .lede { max-width: 34ch; }
  /* One column: keep the store links with the left-aligned copy instead
     of centered across the whole page. On a phone they fill the width,
     so they still center there. */
  .hero .stores { width: fit-content; max-width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > *, .hero-demo { animation: rise 0.7s var(--ease) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero-demo { animation-delay: 0.2s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* ---- Feature sections ------------------------------------------------------ */

.feature { padding-block: var(--section); }
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--columns);
}
.feature-grid.is-flipped { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.feature-grid.is-flipped .feature-copy { order: 2; }
@media (max-width: 960px) {
  .feature-grid, .feature-grid.is-flipped { grid-template-columns: minmax(0, 1fr); }
  .feature-grid.is-flipped .feature-copy { order: 0; }
}

.feature-copy { max-width: 560px; }
.feature-copy .eyebrow + .headline { margin-top: 14px; }
.feature-copy p:not(.eyebrow) { margin-top: 16px; color: var(--muted); }
.feature-copy .headline-sm { margin-top: 32px; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature-copy, .feature .demo {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}

/* 𝕏's way and Xnnoying's, from store screenshot 2. It stacks by its own
   width (narrow phones, and the copy column next to a demo on small
   laptops) so 𝕏's three steps stay on one line. */
.compare {
  container-type: inline-size;
  margin-top: 24px;
  padding: 6px 22px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  font: 400 15px/1.3 var(--text);
}
.compare-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 62px; }
.compare-row + .compare-row { border-top: 1px solid var(--line); }
.compare-k { font: 700 12px/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.is-ours .compare-k { color: var(--accent-text); }
.compare-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); }
.compare-step {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
}
.compare-step.is-icon { padding: 0 8px; }
.compare-step .more { vertical-align: 0; }
.compare-step .more svg { width: 18px; height: 18px; }
.compare-sep svg { width: 14px; height: 14px; }
.compare-pair { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.compare-one { display: flex; align-items: center; gap: 12px; font-weight: 700; }
/* The block button's hover state, as styles.css draws it. */
.compare-btn {
  display: grid;
  place-items: center;
  width: 34.75px;
  height: 34.75px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--red) 10%, transparent);
  color: var(--red);
}
.compare-btn svg { width: 18.75px; height: 18.75px; }
@media (max-width: 420px) { .compare { padding-inline: 16px; } }
@container (max-width: 460px) {
  .compare-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 14px; }
  .compare-steps, .compare-pair { gap: 4px; }
}

/* ---- Demos -------------------------------------------------------------------
   A stage holds one browser window. demo.js gives it a layout width of
   at least --min px and scales it down to fit (--s), so on a phone the
   window shrinks like a picture instead of squashing. */

.demo { width: 100%; max-width: 640px; margin: 0; min-width: 0; }
/* In one column the demos line up with the copy's left edge. */
/* Controls that only work with demo.js running. */
html:not(.js) .demo-pause, html:not(.js) .demo-reset { display: none; }
.stage { position: relative; height: calc(var(--h) * var(--s, 1) * 1px); }
.stage-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w, 100%);
  height: calc(var(--h) * 1px);
  transform: scale(var(--s, 1));
  transform-origin: 0 0;
}

html body .stage .mk-window { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
/* The History panel fits between the address bar and its button: 44px
   bar, 16px gap, then the 68px styles.css leaves under it. */
html body .stage .mk-window { --mk-panel-h: calc(var(--h) * 1px - 128px); }
html body .stage .mk-page {
  justify-content: center;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 72px), transparent);
}
html body .stage .mk-col { position: relative; width: calc(100% - 48px); max-width: 600px; overflow: hidden; }
html body .stage .mk-tabs { position: relative; z-index: 2; background: var(--mk-bg); }

/* In a narrow column 𝕏 cuts the handle short instead of running it into
   the buttons; the mock was drawn for 𝕏's 600px column, so do the same. */
html body .mk-head { gap: 8px; }
html body .mk-who { min-width: 0; }
html body .mk-who b { flex-shrink: 0; }
html body .mk-who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html body .mk-tools { flex-shrink: 0; }
.demo-feed { will-change: transform; }
.demo-feed.is-moving { transition: transform 1.3s var(--ease); }

/* The History button and panel are position: fixed in styles.css, so
   inside the window (which has a transform) they pin to the window.
   Undo styles.css's phone-width offsets, which follow the visitor's
   screen rather than the window. */
html body .stage .xnnoying-history-btn { bottom: 16px !important; left: 36px !important; }
html body .stage .xnnoying-history { bottom: 68px !important; max-width: calc(100% - 16px) !important; }

/* Callouts over the window, never part of the UI (as in the store art). */
.stage .mk-pill { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.stage .mk-pill.is-in { animation: pill-in 0.3s var(--ease) both; }
@keyframes pill-in { from { opacity: 0; transform: translateY(4px) scale(0.92); } }
.stage .mk-pill.is-out { opacity: 0; transform: scale(0.92); }

.demo-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 8;
  width: 28px;
  height: 28px;
  pointer-events: none;
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: var(--ease);
  filter: drop-shadow(0 2px 3px rgba(15, 20, 25, 0.35));
}
.demo-cursor.is-on { opacity: 1; }
.demo-cursor svg { width: 28px; height: 28px; transition: transform 0.12s var(--ease); transform-origin: 6px 4px; }
.demo-cursor.is-down svg { transform: scale(0.82); }

/* X's own spinner while it loads a new Home feed. */
.demo-spinner {
  position: absolute;
  left: 50%;
  top: 72px;
  z-index: 3;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border: 3px solid color-mix(in srgb, var(--blue) 25%, transparent);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* The page going blank for a moment while Restore feed reloads the tab. */
.demo-reload { position: absolute; inset: 44px 0 0; z-index: 1001; background: var(--mk-bg); opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease); }
.demo-reload.is-on { opacity: 1; }
.demo-reload::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--blue);
}
.demo-reload.is-on::before { width: 100%; transition: width 0.7s var(--ease); }

.demo-fade { transition: opacity 0.35s var(--ease); }
.demo-fade.is-hidden { opacity: 0; }

html body .stage .mk-lens, html body .stage .mk-lens .xnnoying-btn { pointer-events: none !important; }
/* The magnifier's row is scaled with a transform (see Lens in demo.js). */
.demo-zoom { position: relative; }
html body .demo-zoom .mk-lens-row { width: max-content; transform: scale(2.4); transform-origin: 0 0; }
/* The mute button's own focus ring is Mute Amber, 2.6:1 on white. */
html body .mk-light .xnnoying-mute:focus-visible { outline-color: var(--ink) !important; }

.demo-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}
.demo-hint { padding-top: 6px; }
.demo-reset, .demo-pause {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg);
  font: 600 14px/1 var(--text);
  cursor: pointer;
}
.demo-reset:hover, .demo-pause:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.demo-reset[hidden] { display: none; }
.demo-pause { margin-left: auto; padding: 0; width: 36px; min-width: 36px; }
.demo-pause svg { width: 16px; height: 16px; fill: currentColor; }
.demo-pause .i-play, .demo-pause[aria-pressed="true"] .i-pause { display: none; }
.demo-pause[aria-pressed="true"] .i-play { display: block; }

/* Home history steps: captions and controls in one. */
.steps { display: grid; gap: 4px; flex: 1; counter-reset: step; }
/* Two by two wherever the captions still fit two to three lines. */
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.steps button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font: 400 14px/1.45 var(--text);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.steps button:hover { color: var(--fg); }
.steps b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--fg);
  font: 700 13px/1 var(--text);
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.steps span { padding-top: 2px; text-wrap: pretty; }
.demo-hint { text-wrap: pretty; }
.steps button[aria-current] { background: var(--surface); color: var(--fg); }
.steps button[aria-current] b { background: var(--red-deep); box-shadow: none; color: var(--paper); }
.demo-bar.is-steps { align-items: flex-start; }

/* Native look: one post per 𝕏 theme. */
.strips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.strip { min-width: 0; margin: 0; }
.strip-label { margin-bottom: 10px; font: 700 13px/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
html body .strip .mk-window { position: relative; padding: 6px 12px; border-radius: 16px; }
html body .strip .mk-post { border-bottom: 0; }
@media (max-width: 359px) { .strip .mk-window { zoom: 0.88; } }

/* ---- Call to action -------------------------------------------------------- */

.cta { padding-block: var(--section); text-align: center; }
.cta-inner { display: flex; flex-direction: column; align-items: center; }
.cta-mark svg { width: 56px; height: 56px; }
.cta .headline { margin-top: 18px; font-size: clamp(44px, 6vw, 80px); }
/* Centered as a block, but set left: centered lines leave a ragged,
   hanging last line. */
.cta .disclosure { margin-inline: auto; text-align: left; }

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

.foot { padding-block: 36px; font-size: 14px; line-height: 1.5; }
/* The C.S. Assets monogram as a faint watermark under the copyright line. */
.foot-mark { grid-area: mark; justify-self: end; align-self: start; height: 72px; margin-top: 12px; color: var(--paper); opacity: 0.14; }
.foot-mark svg { width: auto; height: 100%; }
.foot-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand nav copy" "legal legal mark";
  align-items: center;
  gap: 20px 32px;
}
.foot .brand { grid-area: brand; }
.foot .brand svg { height: 26px; }
.foot nav { grid-area: nav; }
.foot nav a { font-weight: 600; color: var(--fg); text-decoration: none; transition: color 0.15s var(--ease); }
.foot nav a:hover, .foot nav a:focus-visible { color: var(--red-light); }
.foot-copy { grid-area: copy; color: var(--muted); }
.foot-legal { grid-area: legal; display: grid; gap: 8px; max-width: 900px; color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
  .foot-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "nav" "legal" "copy" "mark"; }
  .foot-mark { justify-self: start; height: 56px; margin-top: 4px; }
}

/* ---- Privacy Policy page (PRIVACY.md) ------------------------------------- */

.policy { max-width: 760px; padding-block: 40px clamp(72px, 9vw, 120px); }
.policy h1 { margin-top: 16px; font: 800 clamp(44px, 6vw, 72px)/0.98 var(--display); letter-spacing: -0.025em; }
.policy h2 { margin-top: 48px; font: 800 clamp(26px, 3vw, 32px)/1.1 var(--display); letter-spacing: -0.015em; }
.policy > p:not(.eyebrow), .policy ul { margin-top: 16px; color: #3B4A55; }
.policy h1 + p em { color: var(--slate); font-style: normal; font-size: 15px; }
.policy ul { padding-left: 1.2em; list-style: disc; }
.policy li + li { margin-top: 8px; }
.policy li::marker { color: var(--red); }
.policy strong { color: var(--ink); }
.policy code { padding: 1px 6px; border-radius: 6px; background: var(--mist); font: 500 0.86em/1 ui-monospace, "Cascadia Mono", Consolas, monospace; }