/* GOAT VLESS — dark editorial: charred paper, ivory type, a single amber accent. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/Manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/Manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/Manrope-rub.woff2") format("woff2");
  unicode-range: U+20BD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-italic-rub.woff2") format("woff2");
  unicode-range: U+20BD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/SourceSerif4-rub.woff2") format("woff2");
  unicode-range: U+20BD;
}

:root {
  /* One (dark) scheme; native UI follows it. */
  color-scheme: dark;

  --paper: #100e0c;
  --paper-2: #17140f;
  --card: #1b1713;
  --ink: #ede5d8;
  --ink-2: #cfc4b3;
  --muted: #9a8f80;
  --line: #2c2620;
  --line-strong: #463d33;
  --clay: #d9a15b;
  --loss: #e07a63;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Manrope", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, ui-monospace, monospace;

  /* The accent as a material: brushed gold that catches light from the upper left. */
  --gold-hi: #f3d9ac;
  --gold: linear-gradient(100deg, #f3d9ac 0%, #d9a15b 48%, #b9783a 100%);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --radius: 12px;
  --wrap: 70rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  accent-color: var(--clay);
  scrollbar-color: var(--line-strong) var(--paper);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* Fallback fonts take the web font's x-height, so swapping in Manrope does not shift text. */
  font-size-adjust: from-font;
  font-size: 1.0625rem;
  line-height: 1.7;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
}

/* Fine film grain over everything: keeps the dark surfaces from looking like flat fills. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.055;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size-adjust: cap-height from-font;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 4.8rem); }
h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.2rem); }
h3 { font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.005em; }
h1 em, h2 em { font-style: italic; color: var(--clay); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 em, h2 em, .gilt {
    background: var(--gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Room for the italic overhang, and a full gradient on every wrapped line. */
    padding-inline-end: 0.08em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  h1 em::selection, h2 em::selection, .gilt::selection { -webkit-text-fill-color: var(--paper); }
}

p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }

a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { color: var(--clay); text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--clay); color: var(--paper); }

img, svg { max-inline-size: 100%; block-size: auto; }

.wrap {
  inline-size: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus { inset-block-start: 1rem; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-block-end: 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
}
.eyebrow::before { content: ""; flex: none; inline-size: 2rem; block-size: 1px; background: var(--gold); }

.lead { font-size: 1.15rem; color: var(--muted); max-inline-size: 38rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  min-block-size: 2.9rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  /* Buttons speak in small mono capitals, like the eyebrows above headings. */
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s, translate 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* Ivory enamel: lit from above, with a warm glow underneath. Hover turns it to gold. */
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #fbf6ec, #ddd1bd);
  color: var(--paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 1px 0 rgb(0 0 0 / 0.5),
    0 16px 32px -16px color-mix(in srgb, var(--clay) 60%, transparent);
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #f6dfb6, #d9a15b);
  opacity: 0;
  transition: opacity 0.3s;
}
.btn-primary:hover {
  color: var(--paper);
  translate: 0 -1px;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    0 1px 0 rgb(0 0 0 / 0.5),
    0 20px 40px -14px color-mix(in srgb, var(--clay) 75%, transparent);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { translate: 0; }
/* Arrow that leans forward on hover (drawn as a mask: the mono subset has no arrow glyph). */
.btn-primary:not(.header-cta)::after {
  content: "";
  inline-size: 1.1em;
  block-size: 1.1em;
  margin-inline-start: 0.4em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: translate 0.4s var(--ease);
}
.btn-primary:hover::after { translate: 4px 0; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: rgb(255 255 255 / 0.015); }
.btn-ghost:hover {
  border-color: var(--clay);
  color: var(--gold-hi);
  background: color-mix(in srgb, var(--clay) 9%, transparent);
}
.btn-lg { min-block-size: 3.4rem; padding-inline: 2rem; font-size: 0.82rem; }

.text-link {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.text-link:hover { color: var(--clay); }

/* ---------- header / navigation ---------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  container-type: inline-size;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
/* Phones repaint the blur on every scroll frame; a near-opaque bar looks the same and stays smooth. */
@media (width < 52rem) {
  .site-header { background: color-mix(in srgb, var(--paper) 94%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.site-header {
  border-block-end: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--line-strong) 20% 80%, transparent) 1;
  view-transition-name: site-header;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-block-size: 4.75rem;
}
.header-inner > * { flex-shrink: 0; white-space: nowrap; }

/* The hero carries the same call to action; a narrow header keeps the logo and menu. */
@container (width < 30rem) { .header-cta { display: none; } }

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  /* The wordmark speaks in the headline serif: upright GOAT, italic amber VLESS. */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
/* A narrow gap: the change to italic amber already separates the words. */
.site-logo span { margin-inline-start: 0.12em; font-style: italic; font-weight: 500; color: var(--clay); }
.site-logo img {
  margin-inline-end: 0.7rem;
  inline-size: 38px;
  block-size: auto;
  filter: drop-shadow(0 4px 14px color-mix(in srgb, var(--clay) 35%, transparent));
}

.site-nav { display: flex; align-items: center; gap: 0.75rem; }

.menu-button {
  anchor-name: --menu-button;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  min-block-size: 2.6rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}
.menu-button svg { inline-size: 1.1em; block-size: 1.1em; }

.site-menu {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.7);

  /* Browsers without anchor() keep the first value. */
  position: fixed;
  inset: auto;
  inset-block-start: 4.75rem;
  inset-block-start: anchor(--menu-button bottom);
  inset-inline-end: 1rem;
  inline-size: min(80dvw, 20rem);
  max-block-size: calc(100dvh - 6rem);
  margin-block-start: 0.5rem;
  overflow: auto;
}
.site-menu a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: 6px;
  color: var(--ink);
  font-size: 0.95rem;
  text-decoration: none;
}
.site-menu a:hover { background: var(--paper-2); color: var(--ink); }
.site-menu a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 1px;
}

.site-header.is-measuring * { transition: none !important; }

.site-header.is-wide {
  .menu-button { display: none; }
  .site-menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    inline-size: auto;
    max-block-size: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .site-menu::backdrop { display: none; }
  .site-menu a { position: relative; padding: 0.45rem 0.75rem; color: var(--muted); transition: color 0.25s; }
  .site-menu a::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-end: 0.2rem;
    block-size: 1px;
    background: var(--gold);
    scale: 0 1;
    transform-origin: left;
    transition: scale 0.4s var(--ease);
  }
  .site-menu a:hover::after { scale: 1 1; }
  .site-menu a:hover { background: transparent; color: var(--ink); }
  .site-menu a[aria-current="page"] { color: var(--ink); }
}

.header-cta { min-block-size: 2.4rem; padding: 0.45rem 1.1rem; font-size: 0.72rem; }

/* ---------- sections ---------- */
main { flex: 1; }

.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
/* Hairlines fade out toward the edges instead of running wall to wall. */
.section + .section {
  border-block-start: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--line-strong) 25% 75%, transparent) 1;
}
.section-alt {
  background:
    radial-gradient(50rem 20rem at 50% 0, color-mix(in srgb, var(--clay) 5%, transparent), transparent 70%),
    var(--paper-2);
}

/* Heading on the left, content on the right (FAQ). */
@media (width >= 60rem) {
  .split { display: grid; grid-template-columns: 1fr 1.75fr; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
  .split .section-head { position: sticky; inset-block-start: 7rem; margin: 0; }
  .split .section-head .lead { margin-block-start: 1rem; font-size: 1.05rem; }
}

.section-head { max-inline-size: 46rem; margin-block-end: clamp(2.5rem, 5vw, 3.5rem); }
.section-head .lead { margin: 0; }

/* hero */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 9vw, 7rem);
}
/* Stage light: a warm pool behind the emblem and a faint one over the headline. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52rem 34rem at 80% 40%, color-mix(in srgb, var(--clay) 15%, transparent), transparent 65%),
    radial-gradient(40rem 24rem at 5% -10%, color-mix(in srgb, var(--clay) 7%, transparent), transparent 70%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
@media (width < 52rem) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; justify-self: start; }
}

.hero h1 { margin-block-end: 1.5rem; }
.hero .lead { margin-block-end: 2.25rem; font-size: 1.2rem; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

/* A spec strip across the full width of the hero, like the caseback of a watch. */
.facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0;
  padding: 1.75rem 0 0;
  list-style: none;
  border-block-start: 1px solid;
  border-image: linear-gradient(90deg, var(--line-strong), var(--line) 70%, transparent) 1;
}
.facts li { padding-inline: clamp(1rem, 3vw, 2rem); border-inline-start: 1px solid var(--line); }
.facts li:first-child { padding-inline-start: 0; border: 0; }
.facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); line-height: 1.25; white-space: nowrap; }
.facts span { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
@media (width < 40rem) {
  .facts { grid-template-columns: 1fr 1fr; row-gap: 1.25rem; }
  .facts li:nth-child(odd) { padding-inline-start: 0; border: 0; }
}

/* The emblem sits on a dark plate inside a watch-like bezel. */
.hero-art {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: min(100% - 3rem, 24rem);
  aspect-ratio: 1;
  margin: 1.5rem;
  justify-self: end;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--clay) 18%, var(--paper-2)) 0, var(--paper-2) 62%);
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 2px 30px rgb(0 0 0 / 0.6),
    0 0 0 10px var(--paper),
    0 0 0 11px var(--line),
    0 50px 120px -30px color-mix(in srgb, var(--clay) 40%, transparent);
}
/* A glint of light that travels slowly around the bezel. */
.hero-art::before {
  content: "";
  position: absolute;
  inset: -11px;
  padding: 1px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, transparent 0 18%, var(--gold-hi) 27%, transparent 38% 68%, color-mix(in srgb, var(--clay) 70%, transparent) 78%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
/* Amber halo behind the shield that slowly breathes. */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  /* A wide soft gradient instead of filter: blur, so the breathing animation stays on the compositor. */
  background: radial-gradient(circle, color-mix(in srgb, var(--clay) 40%, transparent), color-mix(in srgb, var(--clay) 12%, transparent) 45%, transparent 72%);
  opacity: 0.55;
  will-change: opacity, scale;
}
.hero-art img { position: relative; z-index: 1; inline-size: 66%; filter: drop-shadow(0 18px 28px rgb(0 0 0 / 0.55)); }
.dial {
  position: absolute;
  inset: -13%;
  inline-size: 126%;
  block-size: 126%;
  /* The global svg cap would shrink the bezel to the plate and pull it off-centre. */
  max-inline-size: none;
  overflow: visible;
}
.dial-ring { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.dial .tick { stroke: var(--line-strong); stroke-width: 1; }
.dial .tick-major { stroke: var(--clay); stroke-width: 1.5; }
/* The text ring is its own <svg>, so the browser rotates it as one layer on the GPU. */
.dial-spin { will-change: rotate; }
.dial-text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  fill: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  .dial-spin { animation: dial-turn 90s linear infinite; }
  .hero-art::after { animation: breathe 6s ease-in-out infinite; }
  .hero-art::before { animation: dial-turn 18s linear infinite; }
  /* The copy arrives line by line; the emblem (the largest paint) is never hidden. */
  .hero-copy > *, .facts { animation: enter 0.9s var(--ease) backwards; }
  .hero-copy > :nth-child(2) { animation-delay: 0.07s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.14s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.21s; }
  .facts { animation-delay: 0.3s; }
}
@keyframes enter { from { opacity: 0; translate: 0 1.25rem; } }
@keyframes dial-turn { to { rotate: 1turn; } }
@keyframes breathe {
  0%, 100% { opacity: 0.4; scale: 0.92; }
  50% { opacity: 0.8; scale: 1.04; }
}

@media (width < 52rem) {
  .hero-art { inline-size: 14rem; margin: 2.25rem auto 1rem; justify-self: center; }
  .dial-text { font-size: 12px; }
}

/* ---------- compare table ---------- */
.compare {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1rem;
}
.compare th, .compare td {
  padding: 1.2rem 1rem;
  text-align: start;
  vertical-align: baseline;
  border-block-end: 1px solid var(--line);
}
.compare th:first-child, .compare td:first-child { padding-inline-start: 0; }
/* The GOAT VLESS column stands as a lit gold-edged panel. */
.compare :is(th, td):last-child {
  padding-inline: clamp(0.75rem, 2.5vw, 1.75rem);
  background: color-mix(in srgb, var(--clay) 7%, transparent);
  border-inline: 1px solid color-mix(in srgb, var(--clay) 30%, transparent);
}
.compare thead th:last-child {
  border-block-start: 1px solid var(--clay);
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--clay) 18%, transparent), color-mix(in srgb, var(--clay) 7%, transparent));
}
.compare tbody tr:last-child td:last-child {
  border-block-end-color: color-mix(in srgb, var(--clay) 30%, transparent);
  border-end-start-radius: var(--radius);
  border-end-end-radius: var(--radius);
}
.compare tbody tr { transition: background-color 0.3s; }
.compare tbody tr:hover { background: rgb(255 255 255 / 0.02); }
.compare thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border-block-end-color: var(--ink);
}
.compare thead th:last-child { color: var(--clay); }
.compare tbody th { font-weight: 400; color: var(--ink-2); inline-size: 46%; }
.compare .no { color: color-mix(in srgb, var(--loss) 85%, var(--muted)); white-space: nowrap; }
.compare .yes { color: var(--ink); font-weight: 500; }
.compare :is(.no, .yes)::before {
  content: "";
  display: inline-block;
  inline-size: 0.95em;
  aspect-ratio: 1;
  margin-inline-end: 0.6rem;
  vertical-align: -0.12em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") no-repeat center / contain;
}
.compare .yes::before {
  background-color: var(--clay);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E");
}
@media (width < 40rem) {
  .compare { font-size: 0.92rem; }
  .compare th, .compare td { padding: 0.9rem 0.5rem; }
  .compare tbody th { inline-size: auto; }
}

/* ---------- tunnel: requests go right, responses come back left ---------- */
.tunnel {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.node {
  display: grid;
  justify-items: center;
  flex: 0 0 auto;
  inline-size: 11rem;
  text-align: center;
}
.node b { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; text-wrap: balance; }
.pipe small { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted); }
.node-dot {
  inline-size: 1rem;
  aspect-ratio: 1;
  margin-block: 1.2rem 0.9rem;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.node-hot .node-dot {
  background: var(--gold);
  border-color: var(--clay);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--clay) 18%, transparent), 0 0 28px 4px color-mix(in srgb, var(--clay) 45%, transparent);
}
.node-hot b { color: var(--gold-hi); }
.pipe {
  flex: 1;
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding-block-start: 1.45rem;
}
.lanes { display: grid; gap: 0.6rem; inline-size: 100%; }
.pipe-line {
  position: relative;
  container-type: inline-size;
  inline-size: 100%;
  block-size: 1px;
  background: var(--line-strong);
}
.pipe-line i {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: 0;
  inline-size: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold-hi);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--clay) 80%, transparent);
}
.pipe-line.back { background: var(--line); }
.pipe-line.back i { background: var(--ink-2); box-shadow: none; }
.pipe-line i:nth-child(2) { translate: 45cqi 0; }
.pipe-line i:nth-child(3) { translate: 90cqi 0; }

.tunnel-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.tunnel-legend span::before {
  content: "";
  display: inline-block;
  inline-size: 1.5rem;
  block-size: 1px;
  margin-inline-end: 0.6rem;
  vertical-align: 0.3em;
}
.tunnel-legend .fwd::before { background: var(--clay); }
.tunnel-legend .ret::before { background: var(--ink-2); }
.tunnel-legend .fwd::after { content: " →"; color: var(--clay); }
.tunnel-legend .ret::after { content: " ←"; color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .pipe-line i { animation: packet 3.6s linear infinite; }
  .pipe-line i:nth-child(2) { animation-delay: -1.2s; }
  .pipe-line i:nth-child(3) { animation-delay: -2.4s; }
  .pipe-line.back i { animation-direction: reverse; animation-duration: 4.2s; }
  .pipe-line.back i:nth-child(1) { animation-delay: -0.6s; }
  .pipe-line.back i:nth-child(2) { animation-delay: -2s; }
  .pipe-line.back i:nth-child(3) { animation-delay: -3.4s; }
}
@keyframes packet {
  from { translate: 0 0; opacity: 0; }
  15%, 85% { opacity: 1; }
  to { translate: calc(100cqi - 5px) 0; opacity: 0; }
}

/* Phones keep the horizontal diagram, just tighter: small nodes, captions under the lanes. */
@media (width < 46rem) {
  .tunnel { gap: 0.4rem; }
  .node { inline-size: 5.6rem; }
  .node b { font-size: 0.95rem; }
  .node-dot { inline-size: 0.8rem; margin-block: 1rem 0.6rem; }
  .pipe { padding-block-start: 1.35rem; min-inline-size: 1.5rem; }
  /* Too narrow to read here; screen readers still get the captions. */
  .pipe small { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tunnel-legend { gap: 1.25rem; margin-block-start: 2rem; }
}

/* ---------- features: an editorial index, not boxes ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 2.75rem;
}
.tile { padding-block-start: 1.25rem; }
/* Rules above tiles, steps and article cards: a short gold stroke that runs the full width on hover. */
.tile, .steps li, .card { position: relative; border-block-start: 1px solid var(--line-strong); }
:is(.tile, .steps li, .card)::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 2.5rem;
  block-size: 1px;
  background: var(--gold);
  transition: inline-size 0.7s var(--ease);
}
:is(.tile, .steps li, .card):hover::before { inline-size: 100%; }
.tile h3 { transition: color 0.3s; }
.tile:hover h3 { color: var(--gold-hi); }
.tile-index { display: block; margin-block-end: 1.25rem; font-family: var(--mono); font-size: 0.75rem; color: var(--clay); }
.tile h3 { margin-block-end: 0.5rem; }
.tile p { margin: 0; color: var(--muted); }

/* steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 2.5rem;
  counter-reset: step;
}
.steps li { counter-increment: step; padding-block-start: 1.25rem; }
.steps li::after {
  content: counter(step);
  display: block;
  order: -1;
  inline-size: fit-content;
  margin-block-end: 0.75rem;
  padding-inline-end: 0.12em;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4rem;
  line-height: 1;
  color: var(--clay);
}
.steps li { display: flex; flex-direction: column; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .steps li::after {
    background: var(--gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.steps h3 { margin-block-end: 0.4rem; }
.steps p { margin: 0; color: var(--muted); }

/* ---------- pricing: cards share row tracks via subgrid ---------- */
.plans {
  display: grid;
  gap: 1rem;
  /* Four in a row, then two by two, then a column: never three and an orphan. */
  grid-template-columns: repeat(4, 1fr);
}
@media (width < 60rem) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (width < 34rem) { .plans { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: 0.9rem;
  padding: 1.75rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, #1f1a15, #171310);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 24px 50px -30px rgb(0 0 0 / 0.8);
  transition: translate 0.5s var(--ease), border-color 0.3s, box-shadow 0.5s var(--ease);
}
/* A soft light that follows the pointer across the card (site.js sets --mx / --my). */
.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--clay) 16%, transparent), transparent 65%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.plan:hover { translate: 0 -4px; border-color: var(--line-strong); }
.plan:hover::before { opacity: 1; }
.plan h3 { margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.plan .price { margin: 0; font-family: var(--serif); font-size: 2.8rem; line-height: 1; letter-spacing: -0.02em; }
.plan .price small { display: block; margin-block-start: 0.6rem; font-family: var(--sans); font-size: 0.88rem; letter-spacing: 0; color: var(--muted); }
.plan ul { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.92rem; }
.plan ul li:first-child {
  display: flex;
  justify-content: space-between;
  padding-block: 0.6rem;
  margin-block-end: 0.5rem;
  border-block: 1px solid var(--line);
  color: var(--ink-2);
}
.plan ul li:first-child b { font-weight: 500; color: var(--ink); }
.plan .star { inline-size: 0.95em; block-size: 0.95em; vertical-align: -0.1em; fill: var(--clay); }
.plan .badge {
  position: absolute;
  inset-block-start: 1.35rem;
  inset-inline-end: 1.1rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--clay) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--clay) 14%, transparent);
  font-family: var(--mono);
  font-size: 0.64rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-hi);
}
/* The yearly plan: a gold rim, a warm interior and a glow on the floor beneath it. */
.plan.featured {
  border-color: transparent;
  background:
    radial-gradient(22rem 14rem at 50% 0, color-mix(in srgb, var(--clay) 20%, transparent), transparent 70%) padding-box,
    linear-gradient(180deg, #211a12, #14110d) padding-box,
    linear-gradient(155deg, #f3d9ac, #d9a15b 28%, #5c4427 58%, #d9a15b) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 36px 80px -36px color-mix(in srgb, var(--clay) 65%, transparent);
}
.plan.featured:hover { border-color: transparent; }
.plan.featured h3 { color: var(--gold-hi); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .plan.featured .amount {
    background: var(--gold);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.trial {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-block-start: 1rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, #1d1711, var(--paper-2)) padding-box,
    linear-gradient(90deg, color-mix(in srgb, var(--clay) 60%, transparent), var(--line) 55%) border-box;
}
.trial p { margin: 0; color: var(--ink-2); }
.trial code {
  margin-inline-end: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
}
.trial strong { font-family: var(--serif); font-weight: 400; font-size: 1.3rem; }
.pay-note { margin-block-start: 1.25rem; color: var(--muted); font-size: 0.92rem; }

/* ---------- FAQ: native details, findable while closed ---------- */
.faq { max-inline-size: 50rem; border-block-start: 1px solid var(--line-strong); }
.faq summary { transition: color 0.25s; }
.faq details { border-block-end: 1px solid var(--line); }
.faq summary {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 1ch;
  padding-block: 1.3rem;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.3;
  cursor: pointer;

  &::-webkit-details-marker { display: none; }

  &::before {
    content: "";
    inline-size: 0.7em;
    block-size: 0.7em;
    flex-shrink: 0;
    background-color: var(--clay);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 4v16M4 12h16'/%3E%3C/svg%3E") no-repeat center / contain;
  }

  details[open] > &::before { rotate: 45deg; }

  &:hover { color: var(--clay); }
}
.faq details > div { padding: 0 0 1.4rem 1.7em; color: var(--muted); max-inline-size: 44rem; }
.faq details > div p:last-child { margin: 0; }

.faq details::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  contain: layout;
}
.faq details:not([open])::details-content { block-size: 0; }

@media (prefers-reduced-motion: no-preference) {
  .faq summary::before { transition: rotate 0.25s; }
  .faq details::details-content {
    transition: block-size, content-visibility;
    transition-duration: 0.35s;
    transition-timing-function: ease-in-out;
    transition-behavior: allow-discrete;
  }
}

/* ---------- article cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  column-gap: clamp(1.5rem, 4vw, 3rem);
  row-gap: 2.5rem;
}
.card { padding-block-start: 1.25rem; }
.card h2, .card h3 { margin-block-end: 0.5em; font-size: 1.45rem; line-height: 1.2; }
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; transition: color 0.3s; }
.card p { margin: 0; color: var(--muted); font-size: 0.98rem; }
.card .card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 1.1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay);
}
.card .card-meta::after {
  content: "";
  inline-size: 1.1em;
  block-size: 1.1em;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: translate 0.4s var(--ease);
}
.card:hover .card-meta::after { translate: 5px 0; }
.card a.card-link::after { content: ""; position: absolute; inset: 0; }
.card a.card-link:focus-visible { outline: none; }
.card:has(a.card-link:focus-visible) { outline: 2px solid var(--clay); outline-offset: 6px; }
.card:has(a.card-link:hover) a.card-link { color: var(--gold-hi); }

.more-link { margin-block-start: 2.5rem; }

/* ---------- final call to action ---------- */
.final-cta { padding-block: clamp(3rem, 7vw, 5rem) clamp(4.5rem, 10vw, 7.5rem); }
/* One centred, gold-rimmed panel lit from above: the last thing on the page. */
.final-inner {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  padding: clamp(3rem, 8vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) * 2);
  background:
    radial-gradient(46rem 22rem at 50% 0, color-mix(in srgb, var(--clay) 24%, transparent), transparent 70%) padding-box,
    linear-gradient(180deg, #1c1610, #13100d) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--clay) 80%, transparent), var(--line) 45%, var(--line)) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 60px 120px -60px color-mix(in srgb, var(--clay) 45%, transparent);
}
.final-inner img { inline-size: 150px; filter: drop-shadow(0 14px 40px color-mix(in srgb, var(--clay) 45%, transparent)); }
.final-inner h2 { margin-block-end: 0.35em; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 3.8rem); }
.final-inner p { max-inline-size: 34rem; margin-inline: auto; margin-block-end: 2rem; color: var(--muted); font-size: 1.1rem; }
@media (width < 40rem) {
  .final-inner img { inline-size: 110px; }
}

/* ---------- article page ---------- */
:is(.prose, .wrap) .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6ch;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--clay); }
:is(.prose, .wrap) .breadcrumbs li { margin: 0; } /* .prose li + li spacing would push later crumbs down. */
.breadcrumbs li + li::before { content: "/"; margin-inline-end: 0.6ch; color: var(--line-strong); }

.article { padding-block: clamp(3rem, 7vw, 5rem) clamp(4.5rem, 9vw, 7rem); }
.prose { max-inline-size: 42rem; font-size: 1.1rem; line-height: 1.75; }
.prose h1 { font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.8rem); margin-block: 1.75rem 1.25rem; }
.prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); margin-block: 2.75rem 0.75rem; }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose li { padding-inline-start: 0.3rem; }
.prose li + li { margin-block-start: 0.45rem; }
.prose li::marker { color: var(--clay); }
.prose strong { font-weight: 600; }
.prose code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: 0.85em;
}
.prose .meta { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-block-end: 2.5rem; }

.note {
  margin-block: 2rem;
  padding: 1.25rem 1.5rem;
  border-inline-start: 2px solid var(--clay);
  background: var(--paper-2);
  border-radius: 0;
}
.note p:last-child { margin: 0; }

.flow {
  display: grid;
  gap: 0.5rem;
  margin-block: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 1rem;
}
.flow p { margin: 0; }

.cta-box {
  margin-block-start: 3.5rem;
  padding: 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    radial-gradient(30rem 12rem at 0 0, color-mix(in srgb, var(--clay) 16%, transparent), transparent 70%) padding-box,
    linear-gradient(180deg, #1f1a15, #171310) padding-box,
    linear-gradient(135deg, var(--clay), var(--line) 50%) border-box;
}
.cta-box h2 { margin-block-start: 0; font-size: 1.8rem; }
.cta-box p { color: var(--muted); }

.related { margin-block-start: 5rem; }
.related > h2 { font-size: 1.8rem; margin-block-end: 1.5rem; }

/* ---------- footer ---------- */
.site-footer {
  padding-block: 3rem 2.25rem;
  border-block-start: 1px solid;
  border-image: linear-gradient(90deg, transparent, var(--line-strong) 25% 75%, transparent) 1;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer-note {
  margin-block-start: 2rem;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--clay); }
.site-footer p { margin: 0; }

/* ---------- reveal on scroll (decorative, so no script fallback) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes rise {
      from { opacity: 0; translate: 0 1.5rem; }
    }
    .reveal {
      animation: rise auto ease-out backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 60%;
    }
  }
}

/* ---------- page transitions (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@media (forced-colors: active) {
  body::before { display: none; }
  h1 em, h2 em, .gilt, .steps li::after, .plan.featured .amount { background: none; -webkit-text-fill-color: currentColor; }
  .site-menu a[aria-current="page"] { text-decoration-color: LinkText; }
  .faq summary::before { background-color: CanvasText; }
}