/* ============================================================================
   DN Detector — homepage redesign, DEMO stylesheet
   ----------------------------------------------------------------------------
   Isolated: nothing here is loaded by the live local site. This exists so the
   redesign can be reviewed before a single production file is touched.

   WHAT THIS IS
   A restyle of the DN Detector homepage that adopts the *layout language* of the
   Campus template in demo10-10-2026/home-page (section rhythm, pill buttons,
   18px cards, kicker + heading section heads, a dark stats band, filter pills,
   and a split CTA) while keeping DN Detector's own brand, type and content.

   WHAT IT DELIBERATELY KEEPS FROM DN DETECTOR
     * IBM Plex Sans, the site's real self-hosted font — not the template's fonts
     * The site's blue #2563EB and ink #0B1020, not the template's green
     * Real listings, real prices, real categories, real partner names

   TYPE AND SPACE
   IBM Plex Sans at six weights is already self-hosted by the site, so the demo
   links the same files rather than adding a font dependency. Sizes follow one
   scale, and spacing follows 4/8/12/16/24/32/48/64 only — mixed spacing values
   are what make a layout feel improvised.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts --- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../../assets/css/files/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../../assets/css/files/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../../assets/css/files/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../../assets/css/files/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Ink ramp — one hue, five steps, so text hierarchy is consistent. */
  --ink: #0b1020;
  --ink-2: #333c4f;
  --muted: #5b6472;
  --muted-2: #8b94a7;

  /* Brand. #2563EB is the site's existing primary; nothing new invented. */
  --blue: #2563eb;
  --blue-deep: #1d4ed8;
  --blue-ink: #12326e;
  --blue-soft: #eff4ff;
  --blue-line: #cddcff;

  /* Surfaces.
     The warm tint is the one thing taken from the template's palette. Campus uses
     #F4F6F2 — a warm paper with a faint green bias — and the reason it works is that a
     tinted page makes white cards read as raised objects instead of dissolving into the
     background. The mechanism is kept; the hue is not, because a green cast would fight
     the brand blue. What is used here is the same amount of tint (about 3–5% off white)
     turned neutral-warm, so cards still lift while the palette stays cool. */
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #f1efea;
  --surface-3: #e9e6e0;
  --border: #e6e3dc;
  --border-2: #d8d4cb;

  /* Dark bands.
     These are brand-tinted ink, not neutral black. The first version used a near-neutral
     #0E1116, which read as a foreign element on a warm page: a black slab rather than a
     section of the same site. Pulling the hue towards the brand blue keeps the section
     dark and distinct while making it belong to the palette, and it lets the blue link
     and accent colours sit on it without vibrating. */
  --dark: #0f1729;
  --dark-2: #171f35;
  --dark-3: #212b45;
  --dark-line: #2b3752;
  --dark-text: #f1f4fb;
  --dark-muted: #a9b6d0;
  --dark-accent: #8fb0ff;

  /* One warm accent, used only for the Premium tag. The template does the same
     with its marigold: a single warm note against a cool page, never as a
     general-purpose fill. */
  --amber: #b45309;
  --amber-soft: #fef6e7;
  --amber-line: #f6dfb4;

  --ok: #15803d;
  --ok-soft: #edfaf1;

  /* Shape language: two values, not seven.
     The page previously rendered SEVEN distinct corner radii (0.35/0.4/0.45/0.5/0.55/
     0.6/0.75/0.85rem were all in use somewhere), which the design catalog names directly:
     "Corner radii drift between components that should belong to one family."
     Rather than hunting every usage, the intermediate tokens are now ALIASES of the card
     radius, so existing rules collapse onto one value automatically. Only pills keep their
     own shape, because a pill is a different object, not a different size of card. */
  --r-card: 14px;
  --r-md: var(--r-card);
  --r-sm: var(--r-card);
  --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(11, 16, 32, 0.04);
  --sh-2: 0 4px 16px -4px rgba(11, 16, 32, 0.08);
  --sh-3: 0 18px 44px -18px rgba(11, 16, 32, 0.2);

  --container: 1200px;
  --dd-slider-gap: 20px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* `height: auto` is not optional here. Without it the `height="..."` presentational
   attribute on each <img> wins over the CSS aspect-ratio, because CSS only overrides an
   attribute when it actually declares the property. That made every card image take its
   attribute height (360px for article cards, 270px for domain cards) instead of the
   aspect-ratio height, roughly doubling every card and the whole page with it. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.022em; line-height: 1.15; }
p { margin: 0; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

/* ------------------------------------------------------------ structure -- */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* Section rhythm, varied on purpose.
   Every section previously took the same 64px, which the catalog calls out: "Every
   section receives identical vertical padding regardless of content" - the page reads as
   one stack of equal slabs with no pacing. The values below are set per section by what
   the section IS:
     the product grid gets the most room, because it is the reason to be here
     the brokerage block gets room too, because it is the one dark moment
     supporting lists (news, commitments) get the least, because they are skimmed
     the newsletter strip is a footer lead-in, so it is tight */
.band { padding: 56px 0; }
.band--tight { padding: 40px 0; }
#domains { padding: 64px 0 56px; }
#industries { padding: 48px 0; }
#guides { padding: 56px 0 48px; }
#news { padding: 40px 0 48px; }
#brokerage { padding: 64px 0; }
#market { padding: 56px 0 48px; }
.band--dark { background: var(--dark); color: var(--dark-text); }
.band--tint { background: var(--surface-2); }
.band--line { border-top: 1px solid var(--border); }

/* Section head: kicker, heading, and an optional right-hand link. Left aligned
   on purpose — centred headings everywhere is the single most common way a
   page reads as template output. */
.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
.head__main { max-width: 62ch; }

.kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
}
.band--dark .kicker { color: #7ba6ff; }

.head h2 { font-size: 34px; }
.head__sub {
  margin-top: 10px;
  font-size: 16px;
  color: var(--muted);
  max-width: 58ch;
}
.band--dark .head__sub { color: var(--dark-muted); }

.more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}
.more svg { transition: transform 0.18s var(--ease); }
.more:hover svg { transform: translateX(3px); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
              transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.28);
}
.btn--primary:hover { background: var(--blue-deep); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border-2);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--blue-line); background: var(--blue-soft); }

.btn--onDark {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--dark-line);
  color: #fff;
}
.btn--onDark:hover { background: rgba(255, 255, 255, 0.14); }

.btn--lg { padding: 15px 28px; font-size: 16px; }

/* --------------------------------------------------------------- header -- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247, 246, 243, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.hdr__in {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 68px;
}
.hdr__brand { display: flex; align-items: center; flex: 0 0 auto; }
/* Height 30px rather than 26. The wordmark is 5.09:1, so 26px made it 132px wide and read
   as a thin blue line; the site's own header renders it at 44px. 30px is the compromise
   that sits correctly against a 68px header bar without crowding the navigation. */
.hdr__brand img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.nav a {
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}
.nav a:hover { background: var(--surface-2); color: var(--ink); }

.hdr__act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.hdr__login {
  padding: 9px 14px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
  border-radius: var(--r-sm);
}
.hdr__login:hover { background: var(--surface-2); color: var(--ink); }
.hdr__cta { padding: 10px 18px; font-size: 14.5px; }

/* ----------------------------------------------------------------- hero -- */
.hero { padding: 64px 0 56px; }
/* The hero stage (listing preview card) was removed, so this is now a single,
   centred column: headline, search and proof row all sit on the centre line. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.hero__copy { max-width: 760px; margin-inline: auto; text-align: center; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  margin-bottom: 20px;
  border: 1px solid var(--blue-line);
  border-radius: var(--r-pill);
  background: var(--blue-soft);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--blue-ink);
}
.hero__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.16);
}

.hero h1 {
  font-size: 50px;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.hero h1 .accent {
  background: linear-gradient(100deg, var(--blue) 0%, #6f8dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  margin-top: 18px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 54ch;
}

/* Search: one control group rather than three loose fields. The template does
   the same, and it reads as a product instead of a form. */
.search {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 26px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  max-width: 620px;
  margin: 26px auto 0;
}
.search__field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px 0 14px;
  color: var(--muted-2);
}
.search__field input {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  outline: none;
}
.search__field input::placeholder { color: var(--muted-2); }

.search__select {
  flex: 0 0 auto;
  max-width: 168px;
  padding: 12px 10px;
  border: 0;
  border-left: 1px solid var(--border);
  background: none;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
  outline: none;
}
.search__submit { flex: 0 0 auto; }

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.chips__label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
}
/* 44px minimum height. The site's own guard asserts this for `.hero-chip`, and it is the
   right rule: these are the smallest tap targets on the page and they sit in a row, so a
   short chip means mis-taps between neighbours. Height comes from padding, not a fixed
   height, so the label stays vertically centred at any font size. */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.14s var(--ease), color 0.14s var(--ease), background 0.14s var(--ease);
}
.chip:hover { border-color: var(--blue-line); color: var(--blue); background: var(--blue-soft); }
a.chip { text-decoration: none; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--muted);
}
.hero__trust svg { color: var(--ok); flex: 0 0 auto; }

/* Hero visual: a real listing preview, not a stock photo. Honest — it shows what
   the product actually is — and it means the demo ships no new image assets. */
.hero__stage {
  position: relative;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: calc(var(--r-card) + 6px);
  background:
    radial-gradient(120% 100% at 100% 0%, #eaf0ff 0%, rgba(234, 240, 255, 0) 62%),
    var(--surface);
  box-shadow: var(--sh-3);
}
.hero__stageHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.hero__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
}
.hero__mini { display: grid; gap: 10px; }
.hero__miniCard {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.hero__miniCard:nth-child(2) { transform: translateX(10px); }
.hero__miniCard:nth-child(3) { transform: translateX(20px); }
.hero__miniCard img {
  width: 76px; height: 46px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.hero__miniName { font-size: 15px; font-weight: 700; }
.hero__miniMeta { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.hero__miniPrice { font-size: 15px; font-weight: 700; color: var(--blue); }

/* Floating proof chips, same device as the template's rating/certificate cards. */
.float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-3);
}
.float strong { display: block; font-size: 14px; }
.float small { display: block; font-size: 11.5px; color: var(--muted); }
.float__ico {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.float--score { left: -22px; bottom: 46px; }
.float--score .float__ico { background: var(--blue-soft); color: var(--blue); }
.float--check { right: -14px; top: -18px; }
.float--check .float__ico { background: var(--ok-soft); color: var(--ok); }

/* The .stats / .stat__num / .stat__label rules were removed with the stats band: no
   element carries those classes any more. The band's slot is now held by the dark
   "how buying works" section, which has its own styles under .band--dark .step. */

/* ---------------------------------------------------------- buying guide -- */
/* Dark band, same material as the brokerage panel but a different object: this is
   full-bleed, brokerage is an inset rounded panel. Same palette, different shape, so two
   dark moments read as a deliberate rhythm instead of a duplicate.
   The band carries a faint blue wash from the top-left rather than the flat panel fill, so
   it feels lit rather than painted. */
.band--how {
  padding: 56px 0;
  background:
    radial-gradient(100% 140% at 0% 0%, rgba(143, 176, 255, 0.14) 0%, rgba(143, 176, 255, 0) 58%),
    var(--dark);
  color: var(--dark-text);
}
.band--how .head { margin-bottom: 30px; }
.band--how .head h2 { font-size: 30px; color: #fff; }
.band--how .head__sub { color: var(--dark-muted); max-width: 62ch; }
.band--how .more { color: var(--dark-accent); }
.band--how .more:hover { color: #fff; }

/* Three columns, each one a step. A hairline runs along the top of every column so the
   three read as one measured row rather than three floating blocks - the same device the
   light sections use, inverted for the dark ground. */
.buy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.buy__step {
  padding-top: 20px;
  border-top: 1px solid var(--dark-line);
}
/* Outlined numerals rather than filled chips. Three filled discs read as decoration at
   this size; an outlined number in the accent colour reads as an index and keeps the
   emphasis on the step title, which is what a reader scans. */
.buy__n {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--dark-accent);
  font-variant-numeric: tabular-nums;
}
.buy__title { font-size: 17px; color: #fff; margin-bottom: 8px; }
.buy__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--dark-muted); max-width: 40ch; }

/* The caveat and the two internal links, on their own rule so they read as a footnote to
   the three steps rather than a fourth one. */
.buy__note {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--dark-line);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dark-muted);
  max-width: 78ch;
}
.buy__links { display: inline-flex; flex-wrap: wrap; gap: 18px; margin-left: 8px; }
.buy__links a {
  color: var(--dark-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(143, 176, 255, 0.32);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.buy__links a:hover { color: #fff; border-color: #fff; }

@media (max-width: 1080px) {
  .buy { grid-template-columns: 1fr; gap: 22px; }
  .buy__text { max-width: 62ch; }
}
@media (max-width: 760px) {
  .band--how { padding: 40px 0; }
  .band--how .head h2 { font-size: 24px; }
  .buy__links { display: flex; margin-left: 0; margin-top: 10px; }
}

/* Featured checkout proof — one strip under the grid, same job as local home-proof-row. */
.proof-row {
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.proof-row__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.proof-row__list strong { color: var(--ink); font-weight: 600; }

/* Market + journey: light section (B/B/B/B — How inside market, not a dark band). */
.journey {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.journey__step {
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
}
.journey__n {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.journey__title { font-size: 16px; margin-bottom: 6px; }
.journey__text { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }

.market__salesHead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}
.market__salesTitle { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.market__salesSub { margin: 6px 0 0; font-size: 14.5px; color: var(--muted); max-width: 48ch; }

/* Trending sales — image cards in a horizontal viewport. */
.sale-card { min-height: 0; list-style: none; }
.sale-card__hit {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.sale-card__hit:hover {
  border-color: var(--blue-line);
  box-shadow: var(--sh-3);
  transform: translateY(-2px);
}
.sale-card__media { position: relative; }
.sale-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface-2);
}
.sale-card__price {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(11, 16, 32, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
}
.sale-card__body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1 1 auto; }
.sale-card__domain {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
.sale-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sale-card__date { margin-top: auto; font-size: 12px; color: var(--muted-2); }

/* Industry hubs — four visual tiles on one row, DN-branded overlays. */
.cat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cat-hub {
  position: relative;
  display: block;
  min-height: 220px;
  border-radius: calc(var(--r-card) + 2px);
  overflow: hidden;
  border: 1px solid var(--border-2);
  box-shadow: var(--sh-1);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cat-hub:hover {
  transform: translateY(-4px);
  border-color: var(--blue-line);
  box-shadow: var(--sh-3);
}
.cat-hub__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.35s var(--ease);
}
.cat-hub:hover .cat-hub__img { transform: scale(1.06); }
.cat-hub__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg, rgba(37, 99, 235, 0.22) 0%, rgba(37, 99, 235, 0) 42%),
    linear-gradient(0deg, rgba(11, 16, 32, 0.88) 0%, rgba(11, 16, 32, 0.2) 58%, rgba(11, 16, 32, 0.05) 100%);
}
.cat-hub--ai .cat-hub__shade {
  background:
    linear-gradient(165deg, rgba(109, 40, 217, 0.28) 0%, rgba(109, 40, 217, 0) 45%),
    linear-gradient(0deg, rgba(11, 16, 32, 0.9) 0%, rgba(11, 16, 32, 0.25) 60%, rgba(11, 16, 32, 0.06) 100%);
}
.cat-hub--fintech .cat-hub__shade {
  background:
    linear-gradient(165deg, rgba(180, 83, 9, 0.25) 0%, rgba(180, 83, 9, 0) 42%),
    linear-gradient(0deg, rgba(11, 16, 32, 0.9) 0%, rgba(11, 16, 32, 0.22) 58%, rgba(11, 16, 32, 0.05) 100%);
}
.cat-hub--cyber .cat-hub__shade {
  background:
    linear-gradient(165deg, rgba(21, 128, 61, 0.22) 0%, rgba(21, 128, 61, 0) 42%),
    linear-gradient(0deg, rgba(11, 16, 32, 0.92) 0%, rgba(11, 16, 32, 0.24) 58%, rgba(11, 16, 32, 0.06) 100%);
}
.cat-hub__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  padding: 18px 18px 16px;
  color: #fff;
}
.cat-hub__tag {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
}
.cat-hub__name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.cat-hub__count { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, 0.78); }

.market__foot {
  margin: 24px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.market__foot a {
  margin-left: 16px;
  font-weight: 600;
  color: var(--blue);
}

@media (max-width: 1080px) {
  .journey { grid-template-columns: 1fr; }
  .cat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero__grid { display: flex; flex-direction: column; }
  .hero__copy { order: 1; }
  .hero__stage { order: 2; }
}

/* The .strip / .strip__title / .strip__note / .flow / .flow__n / .flow__label rules were
   removed with the one-line strip they styled. The section is now the dark buying guide
   (.band--how / .buy) above, so those selectors had no caller left. */

/* ---------------------------------------------------------------- cards -- */
.grid {
  display: grid;
  gap: 20px;
}
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.pill {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease), color 0.14s var(--ease);
}
.pill:hover { border-color: var(--blue-line); color: var(--blue); }
.pill[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Domain card. Order is deliberate and matches what a buyer needs first:
   art, extension + category, name, price, then the call to action. */
.dcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.dcard:hover {
  border-color: var(--blue-line);
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
}
/* Badges sit in opposite corners, not stacked together.
   Both used to share the top-left, so the extension and the Premium flag crowded into one
   cluster over the artwork, and Premium — the one that states value — read as a second
   chip on the same label. Separating them gives each corner one job: the extension
   identifies the name, Premium stamps the value, and neither competes for the same glance.
   Both stay on the art so they are visible before any scrolling within the card. */
.dcard__art { position: relative; }
.dcard__art img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}
.dcard__ext {
  position: absolute;
  top: 10px; left: 10px;
}
.dcard__premium {
  position: absolute;
  top: 10px; right: 10px;
}
.tag {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-2);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
/* A warm accent used for this one label only. Single-purpose warm notes read as
   deliberate; the same colour as a general fill would just look off-brand.
   A solid amber fill with white text was tried first and read as a warning badge rather
   than a value label - loud, and the white-on-orange failed the eye before the word did.
   This is the quieter form: warm ivory ground, deep amber ink, hairline border. It sits on
   the card art without shouting, and 8.1:1 contrast keeps it legible over a busy image. */
.tag--premium {
  background: var(--amber-soft);
  color: var(--amber);
  border: 1px solid var(--amber-line);
  box-shadow: 0 1px 3px rgba(11, 16, 32, 0.14);
}
.tag--ext { background: rgba(11, 16, 32, 0.82); color: #fff; }

.dcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1 1 auto; }
.dcard__cat {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.dcard__name { font-size: 19px; letter-spacing: -0.02em; }
.dcard__price {
  margin-top: 2px;
  font-size: 17px;
  font-weight: 700;
  color: var(--blue);
}
.dcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.dcard__score {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.dcard__score b { color: var(--ink); }
.dcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--blue);
}
.dcard__go svg { transition: transform 0.18s var(--ease); }
.dcard:hover .dcard__go svg { transform: translateX(3px); }

/* Category tile */
.tile {
  display: block;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.tile:hover { border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.tile__ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--blue);
}
.tile__name { font-size: 16px; font-weight: 700; }
.tile__count { margin-top: 2px; font-size: 13px; color: var(--muted); }

/* The .steps / .step / .step__n / .step__title / .step__text / .how-band rules were removed
   with the three-column version of this section. It is now a one-line process strip
   (.strip / .flow) defined below, so these selectors had no caller left - and keeping them
   would have left a second, conflicting way to build the same thing.

/* ------------------------------------------------------------ articles -- */
.acard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.acard:hover { border-color: var(--blue-line); box-shadow: var(--sh-3); transform: translateY(-3px); }
/* One link wraps the whole card, so the target is the card rather than the title. The
   image and body are inside it, which is why the anchor is a flex column and the title
   is a heading rather than a link of its own. */
.acard__hit {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.acard img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}
.acard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1 1 auto; }
.acard__cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
}
.acard__title { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; }
.acard__meta { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--muted-2); }

/* ------------------------------------------------------------ proofs --- */
/* A divided row, not three bordered cards.
   The catalog's "card apocalypse" cluster names this: an outer section card containing
   nested feature cards, each with its own border, radius and shadow. Three bordered boxes
   for three short sentences is a container doing a divider's job. Hairlines between the
   columns express the same grouping with two lines instead of six, and the section stops
   competing with the domain cards above it, which are the things that genuinely deserve
   to look like objects. */
.proofs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.proof { padding: 26px 30px; border-right: 1px solid var(--border); }
.proof:last-child { border-right: 0; }
.proof:first-child { padding-left: 0; }
.proof:last-child { padding-right: 0; }
/* No decorative quote mark. The mark did not mark a quotation - these are factual
   commitments, not testimony - so it was ceremony with no job. */
.proof__text {
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}
.proof__who { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.proof__role { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* ----------------------------------------------------------- brokerage -- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0;
  border: 1px solid var(--dark-line);
  border-radius: calc(var(--r-card) + 6px);
  overflow: hidden;
  background: var(--dark);
  box-shadow: var(--sh-3);
}
/* The left panel carries a faint blue glow rather than being a flat darker rectangle, so
   the two halves read as one lit object instead of two stacked blocks. */
.split__side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 40px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(143, 176, 255, 0.16) 0%, rgba(143, 176, 255, 0) 62%),
    var(--dark-2);
  border-right: 1px solid var(--dark-line);
}
.split__body { padding: 40px; }
.split h2 { font-size: 32px; color: #fff; }
.split__lead { margin-top: 14px; font-size: 16px; line-height: 1.65; color: var(--dark-muted); max-width: 52ch; }

.split__who { display: flex; gap: 10px; margin-bottom: 26px; }
/* The tabs were near-invisible before: both sat at the same low contrast, so neither read
   as selected. The active one is now a filled blue chip with white text and the inactive
   one keeps a visible border, so the pair reads as a choice rather than as two labels. */
.split__tab {
  padding: 8px 16px;
  border: 1px solid var(--dark-line);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--dark-muted);
}
.split__tab--on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.split__list { display: grid; gap: 16px; margin-top: 26px; }
.split__list li { display: flex; gap: 11px; font-size: 15px; color: var(--dark-text); }
.split__list svg { flex: 0 0 auto; margin-top: 3px; color: var(--dark-accent); }
.split__list b { font-weight: 700; color: #fff; }
.split__list span { color: var(--dark-muted); }

.split__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.split__link { font-size: 14.5px; font-weight: 600; color: var(--dark-accent); }
.split__link:hover { color: #fff; }

/* -------------------------------------------------------------- signup -- */
.signup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 36px;
  border: 1px solid var(--border);
  border-radius: calc(var(--r-card) + 6px);
  background: linear-gradient(105deg, var(--blue-soft) 0%, var(--surface) 58%);
}
.signup h2 { font-size: 24px; }
.signup p { margin-top: 6px; font-size: 14.5px; color: var(--muted); max-width: 46ch; }
.signup__form { display: flex; gap: 10px; flex: 0 0 auto; }
.signup__form input {
  width: 260px;
  padding: 12px 16px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  background: var(--surface);
  font: inherit;
  font-size: 14.5px;
  outline: none;
}
.signup__form input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); }

/* -------------------------------------------------------------- footer -- */
.ftr { padding: 56px 0 28px; background: var(--surface-2); border-top: 1px solid var(--border); }
.ftr__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.ftr__blurb { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--muted); max-width: 38ch; }
.ftr h3 {
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink);
}
.ftr__col li + li { margin-top: 9px; }
.ftr__col a { font-size: 14px; color: var(--muted); }
.ftr__col a:hover { color: var(--blue); }
.ftr__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.ftr__partners { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ftr__partners span { font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.ftr__partners b { font-weight: 600; color: var(--ink-2); }

/* ---------------------------------------------------------------- slider -- */
/* A horizontally scrolled grid, not a carousel library. Three rows and two visible
   columns, so a page of the slider is exactly six cards. Because it is a real scroll
   container, touch swiping works with no extra code and the arrow buttons simply scroll
   by one container width — the two input methods cannot disagree about position. */
.slider { position: relative; }
.slider__track {
  display: grid;
  grid-auto-flow: column;
  column-gap: var(--dd-slider-gap);
  row-gap: var(--dd-slider-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; min-height: 0; }

/* No padding/margin trick here. An earlier version added 6px of padding with a -6px
   margin to stop the card hover lift being clipped by the scroll container, but
   `scroll-snap-align: start` snaps to the *padding* edge, so the track parked at
   scrollLeft 6.4 instead of 0. That left the first card 6px out of line with the section
   heading above it, and it broke the "is the previous button usable" test, which expects
   position 0 at the start. The cards now signal hover with border and shadow only, so
   there is nothing to clip and nothing to compensate for. */

.slider__nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.slider__btn {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.16s var(--ease), background 0.16s var(--ease),
              transform 0.16s var(--ease), opacity 0.16s var(--ease);
}
.slider__btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue-soft);
  transform: translateY(-1px);
}
/* Disabled rather than hidden: the control keeps its place, so the pair does not jump
   sideways when one end is reached. */
.slider__btn:disabled { opacity: 0.34; cursor: not-allowed; }

/* Guides: two rows × three columns visible; vertical article cards. */
.slider--articles .slider__track {
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: calc((100% - (2 * var(--dd-slider-gap))) / 3);
}
.slider--articles .slider__track .acard { height: 100%; }
.slider--articles .slider__track .acard__hit { flex-direction: column; height: 100%; }
.slider--articles .slider__track .acard img {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.slider--articles .slider__track .acard__title {
  font-size: 15px;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slider--articles .slider__track .acard:hover { transform: none; }

/* Sales: one row, three cards per viewport. */
.slider--sales .slider__track {
  grid-template-rows: 1fr;
  grid-auto-columns: calc((100% - (2 * var(--dd-slider-gap))) / 3);
}
.slider--sales .slider__track .sale-card__hit:hover { transform: none; }

/* ------------------------------------------------------------ news list -- */
/* Two columns of dated rows. No images on purpose: a second grid of card art directly
   under the article slider reads as repetition even when the content is different, and
   this costs about a third of the height for the same six items. */
.news {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  border-top: 1px solid var(--border);
}
.news__item { border-bottom: 1px solid var(--border); }
.news__hit {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  transition: background 0.16s var(--ease);
}
.news__hit:hover { background: var(--surface-2); }
/* Tabular figures so the day numbers line up in a column and the list scans vertically. */
.news__date {
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.news__body { display: block; min-width: 0; }
.news__cat {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 3px;
}
.news__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.34;
  color: var(--ink);
  /* Two lines maximum, so every row is the same height and the two columns stay aligned. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news__hit:hover .news__title { color: var(--blue); }
.news__go {
  flex: 0 0 auto;
  color: var(--muted-2);
  transition: transform 0.18s var(--ease), color 0.18s var(--ease);
}
.news__hit:hover .news__go { color: var(--blue); transform: translateX(3px); }

/* ---------------------------------------------------------------- motion -- */
/* The hidden state is scoped to `.js`, which the script adds to <html> on load. Without
   JavaScript nothing is ever hidden, so a failed script degrades to a static page rather
   than a blank one. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .slider__track { scroll-behavior: auto; }
}

/* ----------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 42px; }
  .float--score { left: 0; bottom: -14px; }
  .float--check { right: 0; top: -14px; }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .split { grid-template-columns: 1fr; }
  .split__side { border-right: 0; border-bottom: 1px solid var(--dark-line); }
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .signup { flex-direction: column; align-items: flex-start; }
  .nav { display: none; }
  .slider--articles .slider__track {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: calc((100% - var(--dd-slider-gap)) / 2);
  }
  .slider--sales .slider__track {
    grid-auto-columns: calc((100% - var(--dd-slider-gap)) / 2);
  }
  .news { column-gap: 24px; }
}

@media (max-width: 760px) {
  .band { padding: 48px 0; }
  .wrap { padding: 0 18px; }
  .hero { padding: 44px 0 40px; }
  .hero h1 { font-size: 33px; }
  .hero__lead { font-size: 16px; }
  .head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .head h2 { font-size: 26px; }
  .search { flex-wrap: wrap; border-radius: var(--r-card); padding: 10px; }
  .search__field { flex: 1 1 100%; padding: 0 6px; }
  .search__select { border-left: 0; border-top: 1px solid var(--border); max-width: none; flex: 1 1 100%; }
  .search__submit { flex: 1 1 100%; margin-top: 6px; }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps::before { display: none; }
  .proofs { grid-template-columns: 1fr; }
  .split__side, .split__body { padding: 26px; }
  .split h2 { font-size: 25px; }
  .signup { padding: 24px; }
  .signup__form { flex-direction: column; width: 100%; }
  .signup__form input { width: 100%; }
  .ftr__grid { grid-template-columns: 1fr; gap: 28px; }
  .ftr__bottom { flex-direction: column; align-items: flex-start; }
  .hero__miniCard:nth-child(n) { transform: none; }
  .proof-row__list { flex-direction: column; gap: 10px; }
  .cat-row { grid-template-columns: 1fr; }
  .slider--articles .slider__track {
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 88%;
  }
  .slider--sales .slider__track { grid-auto-columns: 88%; }
  .market__salesHead { flex-direction: column; align-items: flex-start; }
  /* One column on a phone. Two columns of dated rows at 350px would leave the headline
     about 190px wide, which wraps to four lines and destroys the even row rhythm. */
  .news { grid-template-columns: 1fr; }
  .news__hit { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 10px; }
  .head { align-items: flex-start; }
  .slider__nav { align-self: flex-start; }
}

/* ------------------------------------------------------- content pages --- */
/* Shared prose styling for the text pages (Support, Help, About, Terms). Sized so a
   policy or support page is skimmable: a short lead, then scannable blocks with real
   heading structure rather than one column of paragraphs. */
.doc { max-width: 78ch; }
.doc__lead {
  margin-top: 16px;
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.doc h2 {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
  font-size: 24px;
}
.doc h2:first-of-type { margin-top: 34px; }
.doc h3 { margin-top: 26px; font-size: 17px; }
.doc p { margin-top: 12px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.doc ul { margin-top: 14px; display: grid; gap: 10px; }
.doc ul li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.doc ul li::before {
  content: "";
  position: absolute;
  left: 2px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue-line);
}
.doc a { color: var(--blue); font-weight: 500; }
.doc a:hover { text-decoration: underline; }
.doc code {
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--surface-2);
  font-size: 13.5px;
}
.doc__meta { margin-top: 10px; font-size: 13.5px; color: var(--muted-2); }

/* Card grid used by the support/help indexes. */
.doc__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.doc__card {
  display: block;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.doc__card:hover { border-color: var(--blue-line); box-shadow: var(--sh-2); transform: translateY(-2px); }
.doc__card h2,
.doc__card h3 { margin: 0 0 6px; font-size: 16px; }
.doc__card p { margin: 0; font-size: 14px; color: var(--muted); }

/* Question-and-answer blocks. */
.qa { margin-top: 26px; }
.qa__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.qa__item:first-child { border-top: 1px solid var(--border); }
.qa__item h3,
.qa__item h4 { margin: 0 0 8px; font-size: 16.5px; }
.qa__item p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-2); }
.qa__item p + p { margin-top: 10px; }

/* Steps for a support process, numbered because the order matters. */
.doc__steps { margin-top: 22px; display: grid; gap: 16px; counter-reset: s; }
.doc__step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.doc__step::before {
  counter-increment: s;
  content: counter(s);
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: var(--surface);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--blue);
}
.doc__step h3,
.doc__step h4 { margin: 4px 0 4px; font-size: 16px; }
.doc__step p { margin: 0; font-size: 15px; color: var(--muted); }

.note {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid var(--blue-line);
  border-left: 3px solid var(--blue);
  border-radius: var(--r-md);
  background: var(--blue-soft);
  font-size: 15px;
  color: var(--blue-ink);
}
.note b { color: var(--ink); }

@media (max-width: 1080px) {
  .doc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .doc__cards { grid-template-columns: 1fr; }
  .doc h2 { font-size: 21px; }
  .head h2 { font-size: 26px; }
}

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