/* /ai-visibility/ content cluster.
 *
 * Inherits every token from dv8.css. Nothing here redefines a colour, a font or a
 * spacing value the site already has; this file only adds the shapes the cluster
 * needs that no other page uses.
 *
 * The one deliberate exception is the MISSING poster. A photocopy pinned to a pole is
 * a physical object, so its paper stays warm white in both themes and only the wall
 * behind it changes. Inverting it for dark mode would read as a glowing screen, which
 * is the opposite of the point.
 */

/* ==========================================================================
   1. The MISSING poster
   ========================================================================== */

.poster-stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 26px 0 10px;
}

/* The pole. Drawn rather than photographed so it takes the theme with it. */
.poster-stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -14px;
  left: 50%;
  width: 34px;
  margin-left: -17px;
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .30) 0%,
      rgba(0, 0, 0, .06) 26%,
      rgba(255, 255, 255, .16) 46%,
      rgba(0, 0, 0, .10) 74%,
      rgba(0, 0, 0, .34) 100%),
    var(--bg3);
  z-index: 0;
}

.poster {
  position: relative;
  z-index: 1;
  width: min(370px, 82vw);
  padding: 20px 20px 0;
  background: #fbfaf6;
  color: #14140f;
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .18),
    0 14px 34px rgba(12, 16, 28, .30);
  transform: rotate(-1.4deg);
  font-family: var(--disp);
}

/* Photocopy grain. An SVG fractal-noise data URI rather than an image file: it is a
   few hundred bytes, scales to any poster size, and cannot 404. */
.poster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
}

/* Two strips of tape, one per top corner, at opposing angles. */
.poster .poster-tape {
  position: absolute;
  top: -13px;
  width: 92px;
  height: 27px;
  background: rgba(228, 226, 210, .72);
  border-left: 1px solid rgba(0, 0, 0, .07);
  border-right: 1px solid rgba(0, 0, 0, .07);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
  z-index: 3;
}

.poster .poster-tape.l { left: -16px; transform: rotate(-26deg); }
.poster .poster-tape.r { right: -16px; transform: rotate(23deg); }

.poster .poster-missing {
  margin: 0;
  line-height: .96;
  text-align: center;
  font-weight: 700;
  font-size: clamp(38px, 9vw, 54px);
  line-height: .96;
  letter-spacing: .13em;
  text-indent: .13em;   /* letter-spacing hangs off the last glyph; this re-centres it */
  color: #14140f;
}

.poster .poster-sub {
  margin: 4px 0 14px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #4a4a3f;
}

.poster .poster-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, .22);
  filter: contrast(1.06);
}

.poster .poster-body {
  padding: 13px 2px 15px;
  text-align: center;
}

.poster .poster-name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #14140f;
}

.poster .poster-lines {
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: #2e2e26;
}

.poster .poster-lines b { font-weight: 700; }
.poster .poster-lines .strike { text-decoration: line-through; opacity: .62; }

/* Tear-off tabs. Real links, so the poster is a working call to action and not a
   picture of one. The vertical text is what makes them read as tabs at a glance. */
.poster .poster-tabs {
  display: flex;
  gap: 3px;
  border-top: 1px dashed rgba(0, 0, 0, .4);
  padding-top: 3px;
  overflow: hidden;
}

.poster .poster-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 0 9px;
  border-left: 1px dashed rgba(0, 0, 0, .28);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: #2e2e26;
  text-decoration: none;
  writing-mode: vertical-rl;
  writing-mode: sideways-rl;
  white-space: nowrap;
  transition: .16s var(--ease);
}

.poster .poster-tab:first-child { border-left: 0; }

.poster .poster-tab:hover,
.poster .poster-tab:focus-visible {
  background: rgba(255, 106, 31, .18);
  color: #8a3407;
  transform: translateY(5px);
}

.poster .poster-tab:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .poster .poster-tab { transition: none; }
  .poster .poster-tab:hover, .poster .poster-tab:focus-visible { transform: none; }
}

/* Dark mode: the paper does not change, the wall behind it does. */
:root[data-theme="dark"] .poster {
  box-shadow:
    0 1px 0 rgba(0, 0, 0, .5),
    0 18px 44px rgba(0, 0, 0, .66);
}

:root[data-theme="dark"] .poster-stage::before {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .55) 0%,
      rgba(255, 255, 255, .05) 46%,
      rgba(0, 0, 0, .6) 100%),
    #1b2743;
}

/* ==========================================================================
   2. Bands: the page's vertical structure
   ========================================================================== */

.aiv-band { padding: 78px 0; }
.aiv-band--tight { padding: 54px 0; }
.aiv-band--tint { background: var(--bg2); }

.aiv-band--warm {
  background:
    radial-gradient(760px 420px at 12% 0%, var(--orange-soft), transparent 64%),
    var(--bg2);
}

/* The tool's band. A deep navy full-bleed break, so the one interactive thing on the
   page cannot be mistaken for more article. */
.aiv-band--deep {
  background:
    radial-gradient(900px 520px at 82% 6%, rgba(255, 106, 31, .22), transparent 62%),
    linear-gradient(180deg, #12224a 0%, #0d1830 100%);
  color: #dbe3f5;
}

.aiv-band--deep .aiv-band-head h2 { color: #ffffff; }
.aiv-band--deep .aiv-band-head p { color: #b8c4de; }

:root[data-theme="dark"] .aiv-band--deep {
  background:
    radial-gradient(900px 520px at 82% 6%, rgba(255, 106, 31, .16), transparent 62%),
    linear-gradient(180deg, #0a1220 0%, #060c16 100%);
}

.aiv-band-head { max-width: 700px; margin: 0 auto 36px; text-align: center; }
.aiv-band-head h2 { margin: 12px 0 12px; }
.aiv-band-head p { font-size: 17.5px; line-height: 1.66; color: var(--text); margin: 0 auto; max-width: 58ch; }

.aiv-eyebrow {
  display: inline-block;
  margin: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.aiv-band--deep .aiv-eyebrow { color: var(--orange2); }

/* ==========================================================================
   3. Hero
   ========================================================================== */

.aiv-hero {
  padding: 42px 0 58px;
  background:
    radial-gradient(900px 420px at 78% 0%, var(--orange-soft), transparent 62%),
    var(--bg);
}

.aiv-hero-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 46px;
  align-items: center;
}

.aiv-hero h1 { margin: 0 0 18px; }
.aiv-hero .lede { font-size: 19px; line-height: 1.62; color: var(--text); margin: 0 0 24px; max-width: 34em; }
.aiv-hero .lede strong { color: var(--head); font-weight: 700; }

/* Subpage hero: no poster beside it, so the column centres rather than being stranded
   against the left edge of a very wide container. */
.aiv-hero--solo { text-align: center; }
.aiv-hero--solo .aiv-hero-inner { max-width: 840px; margin: 0 auto; }
.aiv-hero--solo h1 { margin: 0 auto 18px; max-width: 19ch; }
.aiv-hero--solo .lede { margin: 0 auto 24px; max-width: 58ch; }
.aiv-hero--solo .aiv-cta-row { justify-content: center; }

.aiv-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.aiv-crumb {
  padding: 22px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

.aiv-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.aiv-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.aiv-crumb a { color: var(--muted); text-decoration: none; }
.aiv-crumb a:hover { color: var(--orange-ink); }

/* ==========================================================================
   4. The reading column

   Centred. Text caps at a comfortable measure; wide components cap wider on the same
   centre line, so nothing ever looks stranded to one side.
   ========================================================================== */

.aiv-prose { max-width: 1060px; margin: 0 auto; }

.aiv-prose > p,
.aiv-prose > h2,
.aiv-prose > h3,
.aiv-prose > ul,
.aiv-prose > ol,
.aiv-prose > pre,
.aiv-prose > .aiv-pull { max-width: 700px; margin-left: auto; margin-right: auto; }

.aiv-prose > .aiv-faq { max-width: 820px; margin-left: auto; margin-right: auto; }
.aiv-prose > * { min-width: 0; }

.aiv-prose h2 { font-family: var(--disp); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.14; letter-spacing: -.02em; color: var(--head); margin: 52px auto 16px; }
.aiv-prose h3 { font-family: var(--disp); font-weight: 600; font-size: 20px; color: var(--head); margin: 32px auto 10px; }
.aiv-prose p { font-size: 17px; line-height: 1.72; color: var(--text); margin: 0 auto 18px; }
.aiv-prose p strong { color: var(--head); font-weight: 700; }
.aiv-prose ul, .aiv-prose ol { margin: 0 auto 18px; padding-left: 22px; }
.aiv-prose li { font-size: 17px; line-height: 1.68; color: var(--text); margin-bottom: 9px; }
.aiv-prose li strong { color: var(--head); }
.aiv-prose > :first-child { margin-top: 0; }

/* Inline links in running prose only. The card and pill components are themselves
   anchors and text-decoration inherits, so without the :not() every word inside a card
   came out underlined. */
/* Inline links in running prose only. The cards, the closing pills and the poster's
   tear-off tabs are all anchors too, and both colour and text-decoration inherit, so
   without the exclusions every word inside a card came out underlined and the tabs on
   the poster came out orange. */
.aiv-prose a:not(.aiv-card):not(.links a):not(.poster-tab) { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.aiv-prose a:not(.aiv-card):not(.links a):not(.poster-tab):hover { text-decoration-thickness: 2px; }
.aiv-prose .aiv-card, .aiv-prose .aiv-next .links a { text-decoration: none; }

.aiv-pull {
  margin: 30px auto;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--orange);
  font-family: var(--disp);
  font-size: 21px;
  line-height: 1.38;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--head);
}

.aiv-prose pre {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.75;
  color: var(--head);
  margin: 0 auto 22px;
}

/* ==========================================================================
   5. Then / now, as two real interface mock-ups

   Drawn in HTML and SVG rather than pasted screenshots or brand marks: it themes with
   the page, stays crisp at any size, raises no licensing question, and weighs nothing.
   ========================================================================== */

.aiv-vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

.aiv-vs-side { display: flex; flex-direction: column; gap: 14px; }

.aiv-vs-era {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

.aiv-vs-title { margin: 0; font-family: var(--disp); font-weight: 600; font-size: 19px; line-height: 1.24; letter-spacing: -.01em; color: var(--head); text-align: center; text-wrap: balance; }
.aiv-vs-note { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); text-align: center; }

.aiv-vs-split { display: grid; grid-template-rows: 1fr auto 1fr; place-items: center; gap: 10px; }
.aiv-vs-split i { display: block; width: 1px; background: var(--line); align-self: stretch; }

.aiv-vs-split span {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--panel);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

/* --- shared browser chrome --- */

.mock {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.mock-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line2);
  background: var(--bg2);
}

.mock-bar .dots { display: flex; gap: 5px; flex: none; }
.mock-bar .dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }

.mock-bar .q {
  flex: 1;
  min-width: 0;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--panel);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock-body { padding: 16px; }

/* --- the local pack result --- */

.gpack { display: flex; gap: 12px; align-items: flex-start; }
.gpack + .gpack { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line2); }
.gpack.is-you { margin: 0 -8px; padding: 12px 8px; border-radius: 10px; background: var(--orange-soft); }
.gpack.is-you + .gpack { border-top: 0; }

.gpack .pin { flex: none; width: 21px; height: 25px; }
.gpack .info { flex: 1; min-width: 0; }
.gpack .nm { margin: 0 0 3px; font-family: var(--disp); font-weight: 600; font-size: 14.5px; line-height: 1.25; color: #1a56c4; }
:root[data-theme="dark"] .gpack .nm { color: #7aa7ff; }
.gpack.is-you .nm { color: var(--orange-on-soft); }

.gpack .rate { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gpack .stars { display: flex; gap: 1px; }
.gpack .stars svg { width: 12px; height: 12px; fill: #f2a52b; }
.gpack .meta { margin-top: 3px; font-size: 12px; color: var(--muted); }
.gpack .meta .open { color: #1b7a4b; font-weight: 600; }
:root[data-theme="dark"] .gpack .meta .open { color: #5fc48f; }

.mock-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line2);
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
}

/* --- the AI answer --- */

.chat { display: flex; gap: 11px; align-items: flex-start; }
.chat .ava { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--navy-soft); }
.chat .ava svg { width: 18px; height: 18px; color: var(--head); opacity: .8; }
.chat .say { min-width: 0; margin: 0; font-size: 14.5px; line-height: 1.62; color: var(--text); }
.chat .say b { color: var(--head); font-weight: 700; }
.chat .say .you { padding: 0 4px; border-radius: 4px; background: var(--orange-soft); color: var(--orange-on-soft); font-weight: 700; }

.chat-cites { display: flex; flex-wrap: wrap; gap: 6px; margin: 13px 0 0 41px; }

.chat-cites span {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--muted);
}

@media (max-width: 880px) {
  .aiv-vs { grid-template-columns: 1fr; gap: 18px; }
  .aiv-vs-split { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; width: 100%; }
  .aiv-vs-split i { width: auto; height: 1px; align-self: center; }
}

/* ==========================================================================
   6. What the crawler sees
   ========================================================================== */

.aiv-source { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; }

.src-pane { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden; }

.src-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line2);
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.src-head .tag { padding: 3px 9px; border-radius: 100px; font-size: 9.5px; letter-spacing: .08em; }
.src-head .tag.bad { background: rgba(192, 49, 26, .12); color: #a8331c; }
.src-head .tag.good { background: rgba(45, 122, 85, .13); color: #1b7a4b; }
:root[data-theme="dark"] .src-head .tag.bad { background: rgba(239, 122, 99, .16); color: #ef9a83; }
:root[data-theme="dark"] .src-head .tag.good { background: rgba(95, 196, 143, .16); color: #7fd6a8; }

.src-code { margin: 0; padding: 15px 16px; font-family: var(--mono); font-size: 11.5px; line-height: 1.9; color: var(--muted); overflow-x: auto; }
.src-code .t { color: #8a6ad0; }
:root[data-theme="dark"] .src-code .t { color: #b79bf0; }
.src-code .hit { padding: 0 3px; border-radius: 3px; background: var(--orange-soft); color: var(--orange-on-soft); font-weight: 600; }
.src-code .dim { opacity: .5; }

@media (max-width: 760px) { .aiv-source { grid-template-columns: 1fr; } }

/* ==========================================================================
   7. The signal ladder
   ========================================================================== */

.aiv-ladder { display: flex; flex-direction: column; gap: 12px; max-width: 860px; margin: 0 auto; }

.rung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.rung .n {
  width: 30px;
  padding-top: 2px;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

.rung h3 { margin: 0 0 5px; font-family: var(--disp); font-weight: 600; font-size: 17.5px; letter-spacing: -.01em; color: var(--head); }
.rung p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text); }
.rung .who { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 100px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.rung .who.us { background: var(--orange-soft); color: var(--orange-on-soft); }
.rung .who.them { background: var(--navy-soft); color: var(--muted); }

/* ==========================================================================
   8. Numbers
   ========================================================================== */

.aiv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1000px; margin: 0 auto; }

.aiv-stat { padding: 26px 22px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }

.aiv-stat .n {
  display: block;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--orange-ink);
  font-variant-numeric: tabular-nums;
}

.aiv-stat .l { display: block; margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.aiv-stat .src { display: block; margin-top: 11px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; color: var(--faint); }
.aiv-stat .src a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 860px) { .aiv-stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. Cluster navigation cards
   ========================================================================== */

.aiv-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; max-width: 1180px; margin: 0 auto; }

.aiv-card {
  display: block;
  padding: 24px 22px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  text-decoration: none;
  transition: .18s var(--ease);
}

.aiv-card:hover { border-color: var(--orange); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.aiv-card .q { display: block; margin-bottom: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.aiv-card .t { display: block; font-family: var(--disp); font-weight: 600; font-size: 18px; line-height: 1.26; letter-spacing: -.01em; color: var(--head); }
.aiv-card .d { display: block; margin-top: 9px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.aiv-card:hover .t { color: var(--orange-ink); }

/* ==========================================================================
   10. FAQ
   ========================================================================== */

.aiv-faq { border-top: 1px solid var(--line); }
.aiv-faq details { border-bottom: 1px solid var(--line); }

.aiv-faq summary {
  position: relative;
  padding: 19px 38px 19px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--disp);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.38;
  color: var(--head);
}

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

.aiv-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}

.aiv-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.aiv-faq summary:hover { color: var(--orange-ink); }
.aiv-faq .a { padding: 0 0 20px; }
.aiv-faq .a p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--text); }
.aiv-faq .a p:last-child { margin-bottom: 0; }
.aiv-faq .a a { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   11. The poster break, and the closing strip
   ========================================================================== */

/* Poster plus the line that states the stakes for this page, centred as a pair. The
   previous version put a two-line paragraph in a 1fr column beside a tall poster,
   which left a large empty rectangle to its left on every subpage. */
.aiv-break {
  display: grid;
  grid-template-columns: minmax(0, 420px) auto;
  gap: 44px;
  align-items: center;
  justify-content: center;
  max-width: 820px;
  margin: 54px auto;
  padding: 32px 36px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--bg2);
}

.aiv-break .poster-stage { padding: 0; }
.aiv-break .poster-stage::before { display: none; }   /* no pole inside a panel */
.aiv-break .poster { width: min(216px, 62vw); padding: 14px 14px 0; }
.aiv-break .poster .poster-missing { font-size: 30px; letter-spacing: .1em; text-indent: .1em; }
.aiv-break .poster .poster-sub { font-size: 8px; letter-spacing: .14em; margin-bottom: 10px; }
.aiv-break .poster .poster-name { font-size: 15px; }
.aiv-break .poster .poster-lines { font-size: 9.5px; line-height: 1.7; }
.aiv-break .poster .poster-body { padding: 10px 0 11px; }
.aiv-break .poster .poster-tab { font-size: 7.5px; padding: 8px 0 7px; }
.aiv-break .poster .poster-tape { width: 66px; height: 20px; top: -9px; }
.aiv-break-say { margin: 0 0 12px; font-family: var(--disp); font-weight: 600; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.26; letter-spacing: -.02em; color: var(--head); text-wrap: balance; }
.aiv-break-sub { margin: 0; font-size: 16px; line-height: 1.68; color: var(--text); }

@media (max-width: 820px) {
  .aiv-break { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; justify-items: center; text-align: center; }
}

.aiv-next {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  text-align: center;
}

.aiv-next h2 { margin: 0 0 8px; font-family: var(--disp); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--head); }
.aiv-next p { margin: 0 auto 18px; max-width: 54ch; font-size: 16px; line-height: 1.64; color: var(--text); }
.aiv-next .links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.aiv-next .links a {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--bg2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--head);
  text-decoration: none;
  transition: .16s var(--ease);
}

.aiv-next .links a:hover { border-color: var(--orange); color: var(--orange-ink); }

/* ==========================================================================
   12. Homepage module
   ========================================================================== */

.home-ai {
  padding: 74px 0;
  background:
    radial-gradient(760px 380px at 16% 8%, var(--orange-soft), transparent 60%),
    var(--bg2);
}

.home-ai-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: 52px; align-items: center; }
.home-ai h2 { margin: 0 0 16px; }
.home-ai p { margin: 0 0 16px; max-width: 36em; font-size: 17.5px; line-height: 1.66; color: var(--text); }
.home-ai p strong { color: var(--head); font-weight: 700; }
.home-ai .home-ai-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ==========================================================================
   13. The free banner and the embedded test
   ========================================================================== */

/* Free is the entire offer, so it is stated as a component rather than left as an
   adjective in a sentence somebody skims past. */
.aiv-free {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin: 0 auto 26px;
}

.aiv-free-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px 9px 14px;
  border-radius: 100px;
  background: var(--orange);
  color: #fff;
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .01em;
  box-shadow: var(--shadow-orange);
}

.aiv-free-tag svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.aiv-free-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.aiv-free-list span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  font-size: 13.5px;
  color: #dbe3f5;
}

.aiv-free-list svg { width: 14px; height: 14px; fill: none; stroke: #6fd39b; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.ait-embed { padding: 0; background: none; }

/* Built for a dedicated page, where a 640px column centred in the viewport is right.
   Inside the tool band it keeps that centred column, which lines up with the band
   heading above it. */
.ait-embed .ait-wrap { max-width: 720px; margin: 0 auto; padding-left: 0; padding-right: 0; }

/* The band supplies the heading, so the widget's own header is not repeated. */
.ait-embed .ait-embed-head { display: none; }

.aitr-inline .aitr-wrap { padding-top: 26px; }
.aitr-inline .aitr-loadmsg { margin: 14px 0 0; font-family: var(--disp); font-weight: 600; font-size: 18px; color: var(--head); text-align: center; }

.aiv-tool-note { max-width: 580px; margin: 24px auto 0; font-size: 14px; line-height: 1.6; color: #93a3c4; text-align: center; }
.aiv-tool-note strong { color: #fff; font-weight: 600; }

#ai-test { scroll-margin-top: 92px; }

/* ==========================================================================
   14. Motion
   ========================================================================== */

/* Counters animate once, when scrolled into view. They start at their final value in
   the HTML so the number is correct with JavaScript off, and correct for a crawler. */
.aiv-stat .n[data-count] { font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .home-ai-grid, .aiv-hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .home-ai-grid .poster-stage { order: -1; }
  .home-ai { padding: 56px 0; }
  .aiv-band { padding: 58px 0; }
  .aiv-band--tight { padding: 44px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .poster .poster-tab, .aiv-card, .aiv-faq summary::after, .aiv-next .links a { transition: none; }
  .aiv-card:hover, .poster .poster-tab:hover, .poster .poster-tab:focus-visible { transform: none; }
}

/* ==========================================================================
   15. The recent-results ticker on a dark band

   The ticker was written for a light card on the homepage. Inside the deep band its
   own light greys vanish, so only the surfaces and the muted text are restated here.
   The verdict colours are left alone in light contexts and lifted for dark ones.
   ========================================================================== */

.aiv-band--deep .aic-ticker { max-width: 640px; margin: 26px auto 0; }
.aiv-band--deep .aic-ticker-head { color: #8ea0c6; }
.aiv-band--deep .aic-ticker-rows { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .15); }
.aiv-band--deep .aic-row { background: rgba(255, 255, 255, .05); }
.aiv-band--deep .aic-row .cat { color: #cdd8ee; }
.aiv-band--deep .aic-row .verdict.v-bad { color: #ef9a83; }
.aiv-band--deep .aic-row .verdict.v-mid { color: #e0ab4a; }
.aiv-band--deep .aic-row .verdict.v-good { color: #6fd39b; }

/* The homepage's own starter form, once it sits on the navy band. */
.aiv-band--deep .aic-form { max-width: 520px; margin: 0 auto; }
.aiv-band--deep .aic-fine { color: #8ea0c6; }