/* ─────────────────────────────────────────────────────────────
   AutSEO — one-card audit flow
   Design language shared with capraseo.com: Inter / JetBrains Mono,
   the green accent as ink, the veil card and the pulse-wire flow.
   LIGHT since 2026-09-14: one theme for the landing page, the Deep
   Dive report and the order page — the report is a node in the same
   flow, not a different site. (The dark version is in
   backup-2026-09-14-dark/.)
   ───────────────────────────────────────────────────────────── */

@font-face { font-family: Inter; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/inter-latin.woff2) format('woff2'); }
@font-face { font-family: Wordmark; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/chillax-bold.woff2) format('woff2'); }
/* Wordmark = Chillax Bold by the Indian Type Foundry (fontshare.com, ITF Free Font License): free for commercial use and
   self-hosting, but the licence forbids subsetting and format conversion — /fonts/chillax-bold.woff2 is their file as
   downloaded, unmodified (19 KB). The logo is text set in it, not an image. */
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format('woff2'); }

:root {
  color-scheme: light;
  --bg: #fbfbfc;                 /* 2026-09-15: cvmaker-style ground — near-white, cards sit on it with hairlines + ambient shadows */
  --surface: #ffffff;
  --card-top: #ffffff;
  --card-bot: #fcfcfd;
  --line: #e6e8ee;
  --line-strong: #dfe2e9;
  --edge-hi: rgba(255, 255, 255, 0.9);
  --ink-rgb: 16, 18, 27;
  --text: #15161c;
  --muted: #54576a;
  --muted-2: #8a8d9e;
  --accent: #158444;
  --accent-strong: #106534;
  --accent-bright: #137a3f;      /* the green as ink on white */
  --green-rgb: 21, 132, 68;
  --accent-glow: rgba(21, 132, 68, 0.22);
  --blue: #3c64a0;
  --blue-bright: #3b6fc0;
  --blue-rgb: 60, 100, 160;
  --gold: #f2c14e;
  --warn: #b8720d;
  --danger: #c2372f;
  --display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wordmark: 'Wordmark', 'Chillax', var(--display);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --col: 1240px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  /* Shadows (2026-09-15, after cvmaker.uk): ambient, no offset — "0 0 16px rgba(0,0,0,.1)" is their whole system.
     card = every node; lift = the hero card and popovers; rec = the recommended node's green halo. */
  --shadow-soft: 0 0 12px rgba(var(--ink-rgb), .06);
  --shadow-card: 0 0 16px rgba(var(--ink-rgb), .08);
  --shadow-lift: 0 0 32px rgba(var(--ink-rgb), .12);
  --shadow-rec: 0 0 0 1px rgba(var(--green-rgb), .22), 0 0 40px -6px var(--accent-glow);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; }
a { color: var(--accent-bright); }
::selection { background: rgba(var(--green-rgb), .18); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.grn { color: var(--accent-bright); }
[hidden] { display: none !important; }

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, footer { position: relative; z-index: 2; }

/* ── Brand ─────────────────────────────────────────────────── */
/* The logo (2026-09-16) is LIVE TEXT, not an image: "autseo" set in Chillax Bold (--wordmark) —
   rounded geometric, the user's brief was "something cooler, like this" with a rounded display
   wordmark. "aut" in ink, "seo" in the green. Sized by font-size;
   markup is <a class="brand" href="/">aut<span>seo</span></a>. */
.brand {
  display: inline-flex; align-items: baseline; text-decoration: none; white-space: nowrap;
  font: 700 26px/1 var(--wordmark); letter-spacing: -.028em; color: var(--text);
}
.brand span { color: var(--accent-bright); }
.brand:hover span { color: var(--accent-strong); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 42px; padding: 0 22px; border-radius: var(--r-lg); border: 0; cursor: pointer;
  font: 600 14px/1 var(--display); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s, border-color .18s, opacity .18s;
}
.btn .arrow { font-family: var(--mono); transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-sm { height: 36px; padding: 0 16px; font-size: 13px; }
.btn-lg { height: 54px; padding: 0 32px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn-light { background: #15161c; color: #fff; }
.btn-light:hover { background: #26283a; transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(var(--ink-rgb), .6); }
.btn-green { color: #fff; background: var(--accent); }
.btn-green:hover { background: var(--accent-strong); transform: translateY(-1px); box-shadow: 0 10px 24px -12px var(--accent-glow); }
.btn-green:disabled { opacity: .7; cursor: progress; transform: none; box-shadow: none; }
.btn-ghost { background: #f0f1f4; border: 1px solid transparent; color: var(--text); font-weight: 600; }
.btn-ghost:hover { background: #e6e8ee; }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost.added { border-color: rgba(var(--green-rgb), .5); color: var(--accent-bright); background: rgba(var(--green-rgb), .08); }

/* ── Veil: the card every node is made of ──────────────────── */
.veil { position: relative; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.veil::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: rgba(var(--ink-rgb), .11);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude;
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(56px, 9vh, 104px) var(--gutter) clamp(70px, 10vh, 120px); overflow: clip; }
.hero-glow { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(var(--ink-rgb), .05), transparent 60%),
    radial-gradient(40% 40% at 30% 60%, rgba(var(--green-rgb), .08), transparent 70%),
    radial-gradient(35% 35% at 85% 55%, rgba(var(--blue-rgb), .07), transparent 70%); }
.hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .7;
  background-image: linear-gradient(rgba(var(--ink-rgb), .05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink-rgb), .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000 20%, transparent 75%); }
.horizon {
  position: absolute; bottom: -24vw; left: 50%; transform: translateX(-50%); width: 150%; min-width: 900px; aspect-ratio: 3.4 / 1;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-top: 1px solid rgba(var(--green-rgb), .35); pointer-events: none; opacity: .6;
  background: radial-gradient(58% 100% at 50% 0%, rgba(var(--green-rgb), .1) 0%, rgba(var(--green-rgb), .02) 42%, transparent 68%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .8), 0 -18px 60px -8px rgba(var(--green-rgb), .18), inset 0 26px 60px -30px rgba(var(--green-rgb), .18);
}
.hero-copy { position: relative; max-width: 820px; margin: 0 auto; text-align: center; }
/* Pastel shapes (2026-09-15, cvmaker's yellow blob + grey circle): flat, partly off-canvas, always behind the flow */
.blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.blob-gold { background: #ffe9a3; }
.blob-grey { background: #ebecf0; }
.blob-green { background: #d9efe1; }
.blob-blue { background: #dfe7f7; }
.blob-drop { border-radius: 50% 50% 50% 0; }
.hero .blob-1 { width: 300px; height: 300px; left: -110px; bottom: 6%; transform: rotate(-20deg); }
.hero .blob-2 { width: 220px; height: 220px; right: -60px; top: 30%; }
.hero .blob-3 { width: 120px; height: 120px; right: 12%; bottom: 12%; }
.hero .blob-4 { width: 90px; height: 90px; left: 9%; top: 26%; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 13px 6px 11px; border-radius: 999px;
  border: 1px solid rgba(var(--green-rgb), .3); background: rgba(var(--green-rgb), .07);
  font: 500 11px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--accent-bright); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--green-rgb), .4); } 50% { box-shadow: 0 0 0 5px rgba(var(--green-rgb), 0); } }
.hero h1 { margin: 0 0 22px; font-size: clamp(38px, 5.6vw, 72px); font-weight: 700; line-height: 1.03; letter-spacing: -.04em; color: var(--text); text-wrap: balance; }
.hero-sub { margin: 0 auto; max-width: 660px; font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.7; color: var(--muted); text-wrap: pretty; }

/* ── The flow: domain card → agents → results → products ──────
   One column; the SVG strings are drawn by js/flow.js from the real
   element boxes, so any layout (incl. phone) stays connected. */
.flow { position: relative; max-width: 1800px; margin: clamp(36px, 5vh, 56px) auto 0; display: flex; flex-direction: column; align-items: center; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.wire { fill: none; stroke-width: 1.2; stroke: rgba(var(--blue-rgb), .32); transition: stroke .5s; }
.wg-mid .wire, .wg-bot .wire { stroke: rgba(var(--green-rgb), .3); }
.wg.on .wire { stroke: rgba(var(--blue-rgb), .75); }
.wg.lit .wire { stroke: rgba(var(--green-rgb), .7); }
.node { stroke-width: 1.2; fill: #fff; stroke: rgba(var(--blue-rgb), .7); transition: fill .4s, stroke .4s; }
.wg-mid .node, .wg-bot .node { stroke: rgba(var(--green-rgb), .6); }
.wg.lit .node { fill: var(--accent); stroke: var(--accent); }

/* Pulses: dash 7 on a 200 gap over pathLength 100, so a dash only exists
   between offset 7 (just before the start) and -100 (just past the end).
   Idle: top, middle and bottom strings take turns — the flow, rehearsed. */
.pulse { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 200; stroke-dashoffset: 7; animation: 4.8s linear infinite; animation-delay: var(--d, 0s); }
.wg-top .pulse { stroke: rgba(var(--blue-rgb), .9); animation-name: amb-top; }
.wg-mid .pulse, .wg-bot .pulse { stroke: rgba(var(--green-rgb), .85); }
.wg-mid .pulse { animation-name: amb-mid; }
.wg-bot .pulse { animation-name: amb-bot; }
@keyframes amb-top { 0% { stroke-dashoffset: 7; } 30%, 100% { stroke-dashoffset: -100; } }
@keyframes amb-mid { 0%, 34% { stroke-dashoffset: 7; } 64%, 100% { stroke-dashoffset: -100; } }
@keyframes amb-bot { 0%, 68% { stroke-dashoffset: 7; } 98%, 100% { stroke-dashoffset: -100; } }
@keyframes amb-run { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -100; } }
.flow.scanning .wg-top .pulse { animation: amb-run 1.05s linear infinite; animation-delay: var(--d, 0s); stroke: var(--blue-bright); filter: drop-shadow(0 0 3px rgba(var(--blue-rgb), .6)); }
.flow.scanning .wg-mid .pulse, .flow.scanning .wg-bot .pulse,
.flow.done .wg-top .pulse, .flow.done .wg-mid .pulse, .flow .wg.off .pulse { animation: none; stroke-dashoffset: 7; }
.flow.done .wg-bot .pulse { animation: amb-run 2.8s linear infinite; animation-delay: var(--d, 0s); stroke: var(--accent); }
.fire { fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-dasharray: 16 200; stroke-dashoffset: 16; stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(var(--green-rgb), .7)); }
.wg-top .fire { stroke: var(--blue-bright); filter: drop-shadow(0 0 4px rgba(var(--blue-rgb), .7)); }
.fire.go { animation: fire-down .8s cubic-bezier(.45, 0, .55, 1) forwards; }
@keyframes fire-down { from { stroke-dashoffset: 16; } to { stroke-dashoffset: -100; } }

/* 1 · domain card */
.domain-card { position: relative; z-index: 2; width: min(100%, 580px); padding: 18px 18px 16px; box-shadow: var(--shadow-lift); }
.domain-card::after { content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--green-rgb), .8), transparent); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.card-title { font-weight: 650; font-size: 14px; color: var(--text); }
.card-meta { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.domain-row { display: flex; gap: 10px; }
.input-wrap, .modal-fields input, .modal-fields textarea {
  border-radius: var(--r-md); border: 1px solid var(--line-strong); background: #fff;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input-wrap { flex: 1; min-width: 0; display: flex; align-items: center; height: 52px; padding: 0 14px; }
.input-wrap:focus-within, .modal-fields input:focus, .modal-fields textarea:focus {
  border-color: rgba(var(--green-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--green-rgb), .14); outline: none;
}
.input-wrap.invalid { border-color: rgba(194, 55, 47, .6); box-shadow: 0 0 0 3px rgba(194, 55, 47, .12); }
.prefix { font: 500 13px var(--mono); color: var(--muted-2); margin-right: 2px; }
.input-wrap input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: 500 15px var(--mono); letter-spacing: -.005em; }
.input-wrap input:read-only { color: var(--muted); }
input::placeholder, textarea::placeholder { color: #a3a6b6; }
.field-err { margin: 8px 0 0; font-size: 12.5px; color: var(--danger); }
.opt { font-weight: 400; color: var(--muted-2); font-size: 11.5px; margin-left: 4px; }
#run-btn { height: 52px; padding: 0 22px; font-size: 15px; flex: 0 0 auto; }
#run-btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 2 · agents */
.agents { position: relative; z-index: 2; list-style: none; margin: 88px 0 0; padding: 0; width: min(100%, 1120px); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.agent { position: relative; padding: 13px 14px 12px; border-radius: 16px; border: 1px solid var(--line-strong);
  background: #fff; box-shadow: var(--shadow-soft);
  will-change: transform; transition: border-color .35s, box-shadow .35s; }
.agent-top { display: flex; align-items: center; gap: 10px; }
.agent-ic { position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  color: var(--blue); background: #eef2f9; border: 1px solid rgba(var(--blue-rgb), .3); transition: background .35s, color .35s, border-color .35s, box-shadow .35s; }
.agent-ic svg { width: 18px; height: 18px; }
.agent-ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid transparent; }
.agent-id { min-width: 0; }
.agent-id b { display: block; font-size: 13.5px; font-weight: 650; color: var(--text); }
.agent-st { display: block; margin-top: 2px; font: 500 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); white-space: nowrap; }
.agent-log { margin: 10px 0 0; min-height: 2.9em; font: 10.5px/1.45 var(--mono); color: var(--muted-2); overflow: hidden; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.agent-log.tick { animation: log-in .3s var(--ease); }
.agent-log.warn { color: var(--warn); }
@keyframes log-in { from { opacity: 0; transform: translateY(3px); } }
.agent.running { border-color: rgba(var(--blue-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--blue-rgb), .12), 0 0 28px -4px rgba(var(--blue-rgb), .3); }
.agent.running .agent-ic::after { border-color: rgba(var(--blue-rgb), .18); border-top-color: var(--blue-bright); animation: spin .8s linear infinite; }
.agent.running .agent-st { color: var(--blue-bright); }
.agent.running .agent-log { color: var(--text); }
.agent.done { border-color: rgba(var(--green-rgb), .45); }
.agent.done .agent-ic { color: #fff; background: var(--accent); border-color: var(--accent); }
.agent.done .agent-st { color: var(--accent-bright); }
.agent.done .agent-st::before { content: "✓ "; }
.agent.skipped { border-color: rgba(184, 114, 13, .4); }
.agent.skipped .agent-ic { color: var(--warn); border-color: rgba(184, 114, 13, .45); background: #fff8ec; }
.agent.skipped .agent-st { color: var(--warn); }
.agents-ticker { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 3 · results card */
.rcard { position: relative; z-index: 2; margin-top: 88px; width: min(100%, 780px); padding: 24px 26px 18px; transition: box-shadow .6s; }
.rcard.final { box-shadow: var(--shadow-card), var(--shadow-rec); }
.rc-head { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 12px; }
.rc-head .gauge { width: 124px; height: 124px; }
.rc-head .gauge-num b { font-size: 38px; }
.rc-head .gauge-num span { margin-top: 5px; font-size: 9px; letter-spacing: .14em; }
.gauge.idle .gauge-num b, .gauge.idle .gauge-num span { color: var(--muted-2); }
.rcard.scanning .gauge.idle .track { stroke: rgba(var(--blue-rgb), .55); stroke-dasharray: 70 483; }
.rcard.scanning .gauge.idle svg { animation: spin 1.6s linear infinite; }
.rc-title { min-width: 0; }
.rc-kicker { margin: 0 0 4px; font: 600 10.5px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-bright); }
.rc-title h2 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); font-weight: 650; letter-spacing: -.02em; word-break: break-word; }
.rc-meta { margin: 6px 0 0; font: 500 11.5px var(--mono); color: var(--muted-2); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.rc-title .sum-counts { margin: 12px 0 0; }
.rrows { list-style: none; margin: 0; padding: 0; }
.rrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) 64px; gap: 14px; align-items: center; margin: 0 -10px; padding: 12px 10px; border-top: 1px solid var(--line); border-radius: 10px; }
.rrow-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted-2); border: 1px dashed rgba(var(--ink-rgb), .25); transition: all .35s; }
.rrow-ic svg { width: 15px; height: 15px; }
.rrow-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rrow-name { font: 600 9.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.rrow-sum { min-height: 1.35em; font-size: 14px; font-weight: 600; color: var(--text); }
.rrow-top { min-height: 1.3em; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the fix for the row's worst check — visible as soon as the rows are expanded */
.rrow-fix { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--text); }
.rrow-fix::before, .ck-fix::before { content: "Fix"; margin-right: 8px; padding: 1px 6px; border-radius: 5px; font: 600 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-bright); background: rgba(var(--green-rgb), .09); border: 1px solid rgba(var(--green-rgb), .3); vertical-align: 1px; }
.rrow-fix[hidden] { display: none; }
.rcard.expanded .rrow[data-check] { cursor: pointer; transition: background .2s; }
.rcard.expanded .rrow[data-check]:hover { background: rgba(var(--ink-rgb), .03); }
.sk { display: block; width: 62%; height: 9px; margin-top: 5px; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--ink-rgb),.05), rgba(var(--ink-rgb),.11), rgba(var(--ink-rgb),.05)); background-size: 200% 100%; }
.sk-2 { width: 38%; height: 7px; margin-top: 4px; }
.rcard.scanning .sk { animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rrow-score { text-align: right; font: 600 18px var(--mono); color: var(--muted-2); }
.rrow-score b { font-weight: 600; }
.rrow-score i { display: block; height: 4px; margin-top: 6px; border-radius: 99px; background: rgba(var(--ink-rgb), .08); overflow: hidden; }
.rrow-score i::after { content: ""; display: block; height: 100%; width: var(--v); background: var(--c); border-radius: inherit; animation: grow .9s var(--ease); }
@keyframes grow { from { width: 0; } }
.rrow-score .badge { display: inline-block; padding: 3px 8px; border-radius: 7px; font-size: 12px; color: var(--accent-bright); background: rgba(var(--green-rgb), .08); border: 1px solid rgba(var(--green-rgb), .25); }
.rrow.fail .rrow-score .badge { color: var(--danger); background: rgba(194, 55, 47, .07); border-color: rgba(194, 55, 47, .3); }
.rrow.filled { animation: row-in 1s var(--ease); }
@keyframes row-in { 0% { background: rgba(var(--green-rgb), .14); } 100% { background: transparent; } }
.rrow.filled .rrow-ic { border-style: solid; }
.rrow.pass .rrow-ic { color: #fff; background: var(--accent); border-color: var(--accent); }
.rrow.warn .rrow-ic { color: var(--warn); background: #fff8ec; border-color: rgba(184, 114, 13, .5); }
.rrow.fail .rrow-ic { color: var(--danger); background: #fdf1f0; border-color: rgba(194, 55, 47, .5); }
.rrow.skip .rrow-sum { color: var(--warn); font-weight: 550; }
.rc-foot:empty { display: none; }
/* compact results: the five rows are icon tiles until "Show details" */
.rcard:not(.expanded) .rrows { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.rcard:not(.expanded) .rrow { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 0; padding: 12px 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; text-align: center; }
.rcard:not(.expanded) .rrow-main { align-items: center; max-width: 100%; }
.rcard:not(.expanded) .rrow-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rcard:not(.expanded) .rrow-sum, .rcard:not(.expanded) .rrow-top, .rcard:not(.expanded) .rrow-fix, .rcard:not(.expanded) .all-checks { display: none; }
.rcard:not(.expanded) .rrow-score { text-align: center; font-size: 16px; }
.rcard:not(.expanded) .rrow-score i { width: 40px; margin: 5px auto 0; }
.rcard.final:not(.expanded) .rrow { cursor: pointer; transition: border-color .2s, background .2s; }
.rcard.final:not(.expanded) .rrow:hover { border-color: var(--line-strong); background: #f3f5f8; }
.rc-more span { display: inline-block; margin-left: 2px; transition: transform .2s; }
.rcard.expanded .rc-more span { transform: rotate(180deg); }
.all-checks { margin-top: 6px; border-top: 1px solid var(--line); }
.all-checks > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding: 14px 0 4px; font-size: 14px; font-weight: 600; color: var(--accent-bright); }
.all-checks > summary::-webkit-details-marker { display: none; }
.all-checks > summary span::before { content: "＋ "; font-family: var(--mono); }
.all-checks[open] > summary span::before { content: "－ "; }
.all-checks > summary small { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.all-checks .filters { margin-top: 12px; }
.capra-note { margin: 12px 0 14px; padding: 13px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; color: var(--muted); background: rgba(var(--green-rgb), .06); border: 1px solid rgba(var(--green-rgb), .25); }
.capra-note b { color: var(--text); }
.capra-note a { color: var(--accent-bright); font-weight: 600; }
.ck-capra { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; line-height: 1.6; color: var(--muted); }
.ck-capra b { color: var(--accent-bright); font-weight: 600; }
.ck-capra a { color: var(--accent-bright); font-weight: 600; white-space: nowrap; }
/* "Your Google traffic today" — measured numbers from the audit's own calls (trafficPanel in app.js) */
.tr { margin: 14px 0 4px; padding: 16px 18px; border-radius: 14px; background: #fafbfc; border: 1px solid var(--line); }
.tr-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.tr-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
.tr-head small, .tr-k { font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.tr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 12px; }
.tr-stats > div { padding: 11px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--line); }
.tr-stats b { display: block; font: 700 20px/1.1 var(--display); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.tr-stats span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.tr-stats em { font-style: normal; font-weight: 600; }
.tr-stats em.up { color: var(--accent-bright); } .tr-stats em.down { color: var(--danger); }
.tr-k { margin: 16px 0 8px; }
.tr-bar { display: flex; gap: 2px; height: 12px; border-radius: 99px; overflow: hidden; }
.tr-bar i, .tr-legend i { background: rgba(var(--ink-rgb), .14); }
.tr-bar i { min-width: 4px; }
.tr .p1 i, .tr-bar i.p1 { background: #0f6b36; }
.tr .p2_3 i, .tr-bar i.p2_3 { background: var(--accent); }
.tr .p4_10 i, .tr-bar i.p4_10 { background: #5fb883; }
.tr .p11_20 i, .tr-bar i.p11_20 { background: var(--gold); }
.tr .p21_30 i, .tr-bar i.p21_30 { background: rgba(var(--ink-rgb), .22); }
.tr-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 0; font-size: 11.5px; color: var(--muted); }
.tr-legend li { display: flex; align-items: center; gap: 5px; }
.tr-legend i { width: 8px; height: 8px; border-radius: 2px; }
.tr-legend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-legend li.p11_20 { color: var(--text); font-weight: 600; }
.tr-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.tr-note b { color: var(--text); }
.tr-note small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted-2); }
.tr-free { padding-top: 10px; border-top: 1px dashed var(--line); }
.tr-near table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tr-near th { padding: 0 8px 6px 0; text-align: left; font: 600 9px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.tr-near td { padding: 7px 8px 7px 0; border-top: 1px solid var(--line); color: var(--muted); }
.tr-near td:first-child { color: var(--text); font-weight: 550; overflow-wrap: anywhere; }
.tr-near th:not(:first-child), .tr-near td:not(:first-child) { text-align: right; white-space: nowrap; }
.tr-near td.gain { color: var(--accent-bright); font-weight: 600; }
@media (max-width: 600px) {
  .tr { padding: 14px; }
  .tr-stats { grid-template-columns: 1fr 1fr; }
  .tr-near th:nth-child(3), .tr-near td:nth-child(3) { display: none; }
}
.rc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* the Deep Dive preview — the mock report inside the report product node.
   Honest: the audit's real numbers are shown, the paid ones blurred. */
.dd-prev { align-self: start; margin: 12px 0 14px; padding: 12px 12px 10px; border-radius: 12px; background: #fff; color: var(--text); box-shadow: var(--shadow-card), 0 0 0 1px var(--line); transform: rotate(-1.2deg); font-size: 11px; }
.dd-prev-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font: 600 9px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dd-prev-head i { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #6fe0a0, #128a45); }
.dd-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--muted); }
.dd-row b { font: 700 12px var(--mono); color: var(--accent-bright); }
.dd-row b.blur { filter: blur(4px); color: var(--text); user-select: none; }
.dd-prev-foot { margin-top: 8px; font: 500 8.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }

/* 4 · products */
.products { position: relative; z-index: 2; margin-top: 88px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.prod { transition: box-shadow .5s, opacity .5s; }
.prod-cta { display: flex; flex-direction: column; gap: 8px; padding: 0 22px 20px; }
.prod-cta .btn-lg { height: 52px; font-size: 15px; }
.prod-cta-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); text-align: center; }
.prod-toggle { align-self: center; margin-top: 2px; padding: 4px 8px; border: 0; background: none; cursor: pointer;
  font: 600 12px var(--display); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(var(--ink-rgb), .25); }
.prod-toggle:hover { color: var(--accent-bright); }
.prod-toggle i { font-style: normal; font-size: 10px; }
.prod.open .prod-toggle i { display: inline-block; transform: rotate(180deg); }
/* the final step under each product: what it does for the site (renderOut in app.js) */
.prod-col { min-width: 0; display: flex; flex-direction: column; gap: 46px; }
/* the last step: its own card on its own string under each product (renderOut in app.js; flow.js draws the string) */
.prod-out { align-self: center; width: min(100%, 340px); padding: 15px 18px 14px; }
.prod-out:empty { display: none; }
.prod-out-k { display: block; font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); }
.prod-out-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.prod-out-row b { flex: 0 0 auto; min-width: 48px; font: 700 30px/1 var(--display); color: var(--accent-bright); letter-spacing: -.02em; }
.prod-out-row span { font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.prod-out-row strong { display: block; margin-bottom: 1px; font-size: 13.5px; font-weight: 650; color: var(--text); }
.prod-out small { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; line-height: 1.4; color: var(--muted-2); }
.prod-cta .prod-seg { margin: 0 0 4px; }
/* the publisher's three steps, under its button: today · ≈ 5 days · you approve */
.prod-q { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 2px; }
.prod-q > div { border: 1px solid var(--line, #e6e8ec); border-radius: 12px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.prod-q b { font-size: 20px; line-height: 1.1; font-weight: 700; color: var(--accent-bright); letter-spacing: -.01em; }
.prod-q span { font-size: 12px; color: var(--muted); }
.prod-q p { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.prod-total { margin: 10px 0 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.prod-total b { color: var(--text); font-weight: 600; }
.prod-path { list-style: none; counter-reset: pp; margin: 6px 0 2px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.prod-path li { counter-increment: pp; display: grid; grid-template-columns: 20px 86px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 12px; line-height: 1.45; color: var(--muted); }
.prod-path li::before { content: counter(pp); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 600 10px var(--mono); color: var(--accent-bright); border: 1px solid rgba(var(--green-rgb), .35); align-self: start; }
.prod-path b { font-weight: 600; color: var(--text); white-space: nowrap; }
.prod-ask { display: flex; flex-direction: column; gap: 9px; }
.prod-ask label { font: 600 12.5px var(--display); color: var(--text); }
.prod-ask .input-wrap { height: 44px; }
.prod.rec { box-shadow: var(--shadow-card), var(--shadow-rec); }
.prod.rec::before { background: linear-gradient(140deg, rgba(var(--green-rgb), .35), rgba(var(--green-rgb), .25) 40%, rgba(var(--green-rgb), .7)); }
.prod-face { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 20px 22px 18px; border-radius: var(--r-lg); cursor: pointer; }
.prod-face:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.prod.rec .prod-face, .prod.ready .prod-face, .prod.muted .prod-face { cursor: default; }
.prod-kicker { font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); }
.prod-face b { margin-top: 4px; font-size: 17px; font-weight: 650; color: var(--text); }
.prod-line { font-size: 13px; color: var(--muted-2); }
.prod-chip { align-self: flex-start; margin-top: 10px; padding: 4px 10px; border-radius: 999px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); border: 1px dashed rgba(var(--ink-rgb), .28); }
.prod.rec .prod-chip { color: #fff; background: var(--accent); border: 1px solid var(--accent); }
.prod.muted .prod-chip, .prod.ready .prod-chip, .prod.preview .prod-chip { border-style: solid; color: var(--muted); }
.prod-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.prod.open .prod-body { grid-template-rows: 1fr; }
.prod-inner { min-height: 0; overflow: hidden; padding: 0 22px; }
.prod.open .prod-inner { padding-bottom: 20px; }
.prod-seg { display: flex; gap: 3px; margin: 10px 0 14px; padding: 3px; border-radius: var(--r-pill); border: 1px solid transparent; background: #f0f1f4; }
.prod-seg button { position: relative; flex: 1; min-width: 0; height: 32px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: 600 12px var(--display); cursor: pointer; transition: background .15s, color .15s; }
.prod-seg button:hover { color: var(--text); }
.prod-seg button.on { background: #fff; color: var(--accent-bright); box-shadow: 0 1px 2px rgba(var(--ink-rgb), .08), inset 0 0 0 1px rgba(var(--green-rgb), .35); }
.prod-seg button i { margin-left: 4px; font-style: normal; font-size: 10px; color: #c9a227; }
.prod-seg button em { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; font: 600 8.5px var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: #2a1e05; background: var(--gold); white-space: nowrap; }
.prod-for { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.prod-price { display: flex; align-items: baseline; gap: 10px; }
.prod-price b { font-size: 34px; font-weight: 650; letter-spacing: -.03em; }
.prod-price s { font: 500 13px var(--mono); color: var(--muted-2); }
.prod-price span { font: 500 12px var(--mono); color: var(--muted-2); }
.prod-steps { margin: 0 0 12px; padding: 12px 0 0 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.prod-steps li::marker { color: var(--accent-bright); font: 600 11px var(--mono); }
.prod-steps b { color: var(--text); font-weight: 600; }
.prod-incl { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.prod .prod-incl + .ticks { padding-top: 10px; border-top: 0; }
.prod-fine { margin: -4px 0 14px; font-size: 11.5px; line-height: 1.5; color: var(--muted-2); }
.prod-unit { margin: 2px 0 12px; font: 500 12px var(--mono); color: var(--accent-bright); }
.prod-mix { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.prod-mix li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 2px; background: #1f9a55; }
.prod .ticks { margin-bottom: 14px; padding-top: 14px; }
.prod-why { margin: 0 0 14px; padding: 10px 12px; border-radius: 11px; font-size: 12.5px; line-height: 1.55; color: #1f5135; background: rgba(var(--green-rgb), .07); border: 1px solid rgba(var(--green-rgb), .22); }
.prod-why.dim { color: var(--muted); background: #fafbfc; border-color: var(--line); }
.prod-why b { color: var(--text); }
.prod-ideas { margin: 0 0 14px; }
.prod-ideas span { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.prod-ideas ol { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.45; color: var(--text); }
/* "How do we write your articles?" — jumps to the how-we-write section */
.prod-how { display: flex; align-items: center; gap: 12px; margin: -2px 0 14px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--line-strong); background: #fafbfc; color: var(--text); text-decoration: none; transition: border-color .18s, background .18s; }
.prod-how:hover { border-color: rgba(var(--green-rgb), .45); background: rgba(var(--green-rgb), .06); }
.prod-how span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prod-how b { font-size: 13px; font-weight: 600; }
.prod-how small { font-size: 11.5px; color: var(--muted-2); }
.prod-how i { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 13px var(--mono); font-style: normal; color: var(--accent-bright); border: 1px solid rgba(var(--green-rgb), .35); transition: transform .18s var(--ease); }
.prod-how:hover i { transform: translateY(2px); }
.prod-order { margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; color: var(--muted-2); }
.prod-order b { color: var(--accent-bright); font-weight: 600; }
/* one button per product, straight to Stripe (2026-09-17) */
.prod-buy { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.prod-price-row { display: flex; align-items: baseline; gap: 8px; }
.prod-price-row:empty { display: none; }
.prod-price-row b { font-size: 19px; font-weight: 650; letter-spacing: -.02em; color: var(--text); }
.prod-price-row span { font: 500 11.5px var(--mono); color: var(--muted-2); }
.prod-buy .btn { height: 44px; }
.prod-buy + .prod-fine { margin-top: 12px; }
.prod-err { margin: 8px 0 0; }
.prod-report .prod-price b { font-size: 30px; }

/* ── Sections ──────────────────────────────────────────────── */
.section { position: relative; max-width: var(--col); margin: 0 auto; padding: clamp(84px, 12vh, 150px) var(--gutter) 0; }
.kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; font: 500 11px var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--accent-bright); }
.kicker::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.section h2 { margin: 0 0 16px; font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; line-height: 1.06; letter-spacing: -.028em; color: var(--text); max-width: 860px; text-wrap: balance; }
.section-sub { margin: 0 0 44px; max-width: 680px; font-size: 15.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; }
.sub-h { margin: 46px 0 16px; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in-view { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

.ticks { list-style: none; margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.ticks li { position: relative; padding-left: 22px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-bright); font-weight: 700; }
.ticks em { font-style: normal; color: var(--text); }

/* ── How we write (the content package, step by step) ──────── */
#how-we-write { scroll-margin-top: calc(-1 * clamp(84px, 12vh, 150px)); }
.code-chip { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 5px; font: 600 9px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; white-space: nowrap;
  color: var(--accent-bright); background: rgba(var(--green-rgb), .09); border: 1px solid rgba(var(--green-rgb), .3); }
.how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(28px, 5vw, 64px); align-items: start; }
.how-steps { list-style: none; margin: 0; padding: 0; }
.how-step { position: relative; padding: 0 0 34px 66px; }
.how-step:not(:last-child)::before { content: ""; position: absolute; left: 19.5px; top: 38px; bottom: -2px; width: 1px; background: linear-gradient(180deg, rgba(var(--green-rgb), .5), rgba(var(--blue-rgb), .4)); }
.how-step:last-child { padding-bottom: 0; }
.how-num { position: absolute; left: 0; top: -2px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); color: var(--accent-bright);
  background: #fff; border: 1px solid rgba(var(--green-rgb), .45); box-shadow: 0 0 0 5px var(--bg), 0 8px 24px -8px var(--accent-glow); }
.how-step h3 { margin: 4px 0 6px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; }
/* the report page: steps the Deep Dive has already done vs. the ones that run per order / per article */
.how-done, .how-when { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: 3px; white-space: nowrap; }
.how-done { color: #fff; background: var(--accent); }
.how-when { color: var(--muted-2); border: 1px dashed rgba(var(--ink-rgb), .28); }
.how-step:has(.how-done) .how-num { color: #fff; background: var(--accent); border-color: var(--accent); }
.how-step:has(.how-done) .how-num::before { content: "✓"; }
.how-step:has(.how-done) .how-num span, .how-step:has(.how-done) .how-num { font-size: 0; }
.how-step:has(.how-done) .how-num::before { font-size: 13px; }
.how-from { margin: -4px 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.55; color: #1f5135; background: rgba(var(--green-rgb), .07); border: 1px solid rgba(var(--green-rgb), .22); }
.how-from b { color: var(--text); }
.how-step > p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.how-bg { list-style: none; margin: 0; padding: 12px 16px 13px; border-radius: 12px; border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 7px; }
.how-bg::before { content: "In the background"; margin-bottom: 2px; font: 600 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.how-bg li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.how-bg li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--blue-rgb), .7); }
.how-bg li.hard { color: var(--text); }
.how-bg li.hard::before { background: var(--accent); }
.how-aside { position: sticky; top: 28px; }
.how-card { padding: 22px 22px 20px; }
.how-card-k { margin: 0 0 6px; font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); }
.how-card h3 { margin: 0; font-size: 18px; font-weight: 650; }
.how-card .ticks { margin: 14px 0 18px; }
.how-note { margin: 14px 4px 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.faq details { border-radius: 16px; border: 1px solid var(--line-strong); background: #fff; padding: 0 20px; transition: box-shadow .2s; }
.faq details[open] { box-shadow: var(--shadow-soft); }
.faq summary { list-style: none; cursor: pointer; padding: 17px 0; font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 20px/1 var(--mono); color: var(--accent-bright); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--muted); }

/* ── Closing + footer ──────────────────────────────────────── */
/* The closing is a dark full-bleed band (2026-09-15, after cvmaker's "Land your perfect job"): #111, white title,
   the green span brightened for contrast, one pill button, pastel shapes cut off at two corners. */
.closing { position: relative; text-align: center; padding: clamp(96px, 14vh, 140px) 22px clamp(96px, 14vh, 140px); overflow: clip; margin-top: clamp(84px, 12vh, 150px); background: #111214; color: #fff; }
.closing .horizon-top { display: none; }
.closing h2 { position: relative; margin: 0 auto 16px; max-width: 860px; font-size: clamp(28px, 4.6vw, 50px); font-weight: 700; letter-spacing: -.028em; line-height: 1.1; text-wrap: balance; color: #f4f4f5; }
.closing h2 .grn { color: #4fd58a; }
.closing-sub { position: relative; margin: 0 auto 34px; max-width: 520px; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); text-wrap: pretty; }
.closing .btn { position: relative; }
.closing .btn-green:hover { box-shadow: 0 10px 30px -10px rgba(var(--green-rgb), .7); }
.note { position: relative; margin: 22px 0 0; font: 500 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.closing .note { color: rgba(255, 255, 255, .5); }
.closing .blob-1 { width: 170px; height: 170px; left: -70px; bottom: -40px; background: #ffe58a; }
.closing .blob-2 { width: 96px; height: 96px; right: 4%; top: -20px; background: #f6b7a3; }
.closing .blob-3 { width: 34px; height: 34px; right: 12%; bottom: 18%; background: #4fd58a; opacity: .8; }
@media (max-width: 760px) {
  .closing .blob-1 { width: 120px; height: 120px; left: -50px; bottom: -50px; }
  .closing .blob-2 { width: 72px; height: 72px; right: -10px; top: -14px; }
  .closing .blob-3 { right: 6%; bottom: 6%; width: 22px; height: 22px; }
  .closing .note { position: relative; z-index: 1; }
}

/* ── Footer (2026-09-15, after cvmaker's): brand + tagline, four link columns, then copyright · back-to-top, and one fine line ── */
/* 2026-09-15 polish: the footer is its own white ground under a hairline, links nudge on hover, external ones carry ↗,
   and a big faint wordmark closes the page, cut off at the bottom edge (a pseudo-element — no markup on the four pages). */
.foot { position: relative; overflow: clip; background: #fff; border-top: 1px solid var(--line); padding: clamp(56px, 8vh, 84px) var(--gutter) env(safe-area-inset-bottom); }
.foot::after { content: "autseo"; content: "autseo" / ""; display: block; max-width: var(--col); height: .6em; margin: clamp(36px, 5vh, 56px) auto 0; overflow: hidden; font: 700 clamp(84px, 19vw, 270px)/.8 var(--wordmark); letter-spacing: -.04em; text-align: center; white-space: nowrap; color: transparent; background: linear-gradient(180deg, rgba(var(--ink-rgb), .075), rgba(var(--ink-rgb), .015) 75%); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; }
.foot-inner { max-width: var(--col); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, 1.3fr) repeat(4, minmax(0, 1fr)); gap: 36px clamp(24px, 4vw, 56px); align-items: start; }
.foot-brand { display: flex; flex-direction: column; gap: 14px; }
.foot-tag { margin: 0; max-width: 300px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
/* the goat, comfortable, bottom left of the footer (2026-09-16) */
.foot-goat { display: block; margin: -6px 0 -18px -20px; width: min(300px, 100%); }
.foot-goat img { display: block; width: 100%; height: auto; animation: goat-sit 7s var(--ease) infinite; }
@keyframes goat-sit { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-.7deg); } }
@media (prefers-reduced-motion: reduce) { .foot-goat img { animation: none; } }
.foot-col h4 { margin: 4px 0 16px; font-size: 14px; font-weight: 700; letter-spacing: -.005em; color: var(--text); }
.foot-col a { display: block; width: fit-content; margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color .15s, transform .2s var(--ease); }
.foot-col a:hover { color: var(--accent-bright); transform: translateX(3px); }
.foot-col a[href^="https://"]::after { content: "↗"; margin-left: 5px; font: 500 11px var(--mono); color: var(--muted-2); transition: color .15s; }
.foot-col a[href^="https://"]:hover::after { color: var(--accent-bright); }
.foot-col a small { display: inline-block; margin-left: 6px; font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.foot-bottom { max-width: var(--col); margin: clamp(40px, 6vh, 64px) auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; }
.foot-copy { margin: 0; font-size: 13px; color: var(--muted); }
.foot-copy a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.foot-copy a:hover { color: var(--text); }
.foot-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.foot-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: #f3f4f6; font: 500 12px var(--display); color: var(--muted); white-space: nowrap; }
.foot-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: .75; }
.foot-top { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: var(--r-pill); background: #f0f1f4; color: var(--text); font: 600 13px var(--display); text-decoration: none; transition: background .15s; }
.foot-top:hover { background: #e6e8ee; }
.foot-top span { font-family: var(--mono); }
.foot-fine { max-width: var(--col); margin: 18px auto 0; font-size: 12px; line-height: 1.6; color: var(--muted-2); }
body.has-cart .foot { padding-bottom: 110px; }

/* ── Gauge, counts, checklist (inside the results card) ─────── */
.gauge { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gauge .track { fill: none; stroke: rgba(var(--ink-rgb), .08); stroke-width: 10; }
.gauge .val { fill: none; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); filter: drop-shadow(0 2px 6px var(--gc-glow, rgba(var(--green-rgb), .3))); }
.gauge-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge-num b { font-size: 56px; font-weight: 650; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.gauge-num span { margin-top: 6px; font: 600 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.sum-counts { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 20px; }
.count { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1px solid var(--line-strong); background: #fff; }
.count b { font: 700 14px var(--mono); }
.count.fail b { color: var(--danger); } .count.warn b { color: var(--warn); } .count.pass b { color: var(--accent-bright); }
.banner { margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: 13.5px; line-height: 1.6; color: #6b4307; background: #fff8ec; border: 1px solid #efd3a6; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.filters button { height: 34px; padding: 0 13px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; color: var(--muted); font: 550 12.5px var(--display); cursor: pointer; }
.filters button b { font-family: var(--mono); margin-left: 6px; color: var(--text); }
.filters button.on { color: var(--text); border-color: rgba(var(--green-rgb), .5); background: rgba(var(--green-rgb), .08); }
.groups { display: flex; flex-direction: column; gap: 14px; }
.group { overflow: hidden; }
.group-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.group-head h4 { margin: 0; font-size: 15px; font-weight: 650; }
.group-head .g-score { margin-left: auto; font: 600 13px var(--mono); }
.group-head .g-bar { width: 120px; height: 5px; border-radius: 999px; background: rgba(var(--ink-rgb), .08); overflow: hidden; }
.group-head .g-bar i { display: block; height: 100%; width: var(--v); background: var(--c); border-radius: inherit; }
.check { border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: 0; }
.check summary { list-style: none; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; padding: 13px 20px; cursor: pointer; }
.check summary::-webkit-details-marker { display: none; }
.check summary:hover { background: rgba(var(--ink-rgb), .025); }
.ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.ck.pass { background: var(--accent); } .ck.pass::after { content: "✓"; }
.ck.warn { background: var(--warn); } .ck.warn::after { content: "!"; }
.ck.fail { background: var(--danger); } .ck.fail::after { content: "✕"; }
.ck.info { background: rgba(var(--blue-rgb), .7); } .ck.info::after { content: "i"; }
.ck-title { min-width: 0; }
.ck-title b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.ck-title span { display: block; margin-top: 2px; font: 12px var(--mono); color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-fix { display: block; margin-top: 5px; font-size: 13px; font-style: normal; line-height: 1.5; color: var(--text); white-space: normal; }
.check.flash { animation: ck-flash 1.6s var(--ease); }
@keyframes ck-flash { 0%, 35% { background: rgba(var(--green-rgb), .12); } 100% { background: transparent; } }
.tag { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; }
.tag.high { color: var(--danger); border-color: rgba(194, 55, 47, .35); background: #fdf1f0; }
.check summary::after { content: "+"; font: 400 17px/1 var(--mono); color: var(--muted-2); transition: transform .2s; }
.check[open] summary::after { transform: rotate(45deg); }
.check .ck-body { padding: 0 20px 16px 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check .ck-body.one { grid-template-columns: 1fr; }
.ck-body div { font-size: 13px; line-height: 1.6; color: var(--muted); }
.ck-body h5 { margin: 0 0 4px; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.ck-body .fix h5 { color: var(--accent-bright); }
.check.appear { animation: ck-in .45s var(--ease) both; }
@keyframes ck-in { from { opacity: 0; transform: translateX(-8px); } }
.all-checks .group { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
/* passed checks collapse per group */
.show-pass { display: block; width: 100%; padding: 12px 20px; border: 0; border-top: 1px solid var(--line); background: #fafbfc; color: var(--accent-bright); font: 600 12.5px var(--display); text-align: left; cursor: pointer; }
.show-pass::before { content: "＋ "; font-family: var(--mono); }
.show-pass.open::before { content: "－ "; }
.show-pass:hover { background: rgba(var(--green-rgb), .05); }
.all-pass { margin: 0; padding: 13px 20px; font-size: 13px; color: var(--accent-bright); }

/* ── Modal ─────────────────────────────────────────────────── */
.modal { padding: 0; border: 0; background: transparent; color: var(--text); max-width: min(560px, calc(100vw - 32px)); width: 100%; }
.modal::backdrop { background: rgba(var(--ink-rgb), .42); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .3s var(--ease); }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal-card { padding: 28px; margin: 0; }
.modal-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-size: 22px; cursor: pointer; z-index: 2; }
.modal-x:hover { background: rgba(var(--ink-rgb), .06); color: var(--text); }
.modal h3 { margin: 0 0 8px; font-size: 22px; font-weight: 650; }
.modal-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.modal-items { list-style: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fafbfc; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.modal-items li { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.modal-items li b { font-family: var(--mono); color: var(--text); font-weight: 600; }
.modal-items li.tot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 2px; color: var(--text); font-weight: 600; }
.modal-items li.later { font-size: 12px; color: var(--muted-2); }
.modal-items li.later b { color: var(--muted); font-weight: 500; }
.modal-items small { color: var(--muted-2); font-size: 11.5px; }
.modal-next { margin: 0 0 18px; padding: 0 0 0 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.modal-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.modal-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 550; color: var(--muted); }
.modal-fields .full { grid-column: 1 / -1; }
.modal-fields input, .modal-fields textarea { height: 44px; padding: 0 12px; color: var(--text); font: 500 14px var(--display); }
.modal-fields textarea { height: auto; padding: 10px 12px; resize: vertical; }
.modal-fine { margin: 10px 0 0; text-align: center; font-size: 11.5px; color: var(--muted-2); }
.modal-done { text-align: center; padding: 20px 0 6px; }
.modal-done .big-check { width: 60px; height: 60px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; background: var(--accent); box-shadow: 0 12px 34px -10px var(--accent-glow); }
.modal-done .big-check.muted { background: rgba(var(--ink-rgb), .08); box-shadow: none; color: var(--muted); }

/* the sandbox replica (sandbox.autseo.com) announces itself */
.sb-banner { position: sticky; top: 0; z-index: 70; padding: 8px var(--gutter); text-align: center; font: 500 12.5px/1.5 var(--display); color: #2a1e05; background: #f2c14e; }
.sb-banner b { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-right: 6px; }
.sb-banner a { color: inherit; font-weight: 600; }

/* ── Sign-in (js/login.js): the badge top right, the popover, the email → code form ──
   Also used inside /account/ (the form) and the report header ("Sign in" when signed out). */
.lg-badge { position: fixed; top: calc(var(--sb-h, 0px) + 14px); right: var(--gutter); z-index: 65; opacity: 0; transition: opacity .25s; }
.lg-badge.ready { opacity: 1; }
.lg-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--muted); font: 550 12.5px var(--display); text-decoration: none; cursor: pointer; box-shadow: 0 1px 2px rgba(var(--ink-rgb), .04), 0 8px 24px -16px rgba(var(--ink-rgb), .25); transition: color .15s, border-color .15s, background .15s; }
.lg-pill:hover { color: var(--text); border-color: #c3c7d2; background: #fff; }
.lg-pill .lg-key { font-size: 8px; color: var(--muted-2); }
.lg-pill.on { color: var(--accent-bright); border-color: #b9dcc6; }
.lg-pill.on:hover { background: #f0f9f3; }
.lg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.lg-mail { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-pill.on .lg-lbl { display: none; }
.lg-pop { position: fixed; top: calc(var(--sb-h, 0px) + 56px); right: var(--gutter); z-index: 66; width: min(400px, calc(100vw - 2 * var(--gutter))); padding: 20px 20px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lift); animation: lg-in .22s var(--ease); }
@keyframes lg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lg-x { position: absolute; top: 8px; right: 10px; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.lg-x:hover { background: rgba(var(--ink-rgb), .06); color: var(--text); }
.lg-title { margin: 0 0 10px; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.lg-lead { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.lg-lead b { color: var(--text); font-weight: 600; }
.lg-row { display: flex; gap: 8px; flex-wrap: wrap; }
.lg-row input { flex: 1 1 180px; height: 44px; padding: 0 13px; border-radius: 11px; border: 1px solid var(--line-strong); background: #fff; font: 500 15px var(--display); color: var(--text); min-width: 0; }
.lg-row input:focus { outline: 2px solid rgba(var(--green-rgb), .35); border-color: var(--accent); }
.lg-row input.lg-code { font: 700 22px var(--mono); letter-spacing: .22em; text-align: center; }
.lg-row .btn { height: 44px; }
.lg-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.5; }
.lg-msg.err { color: var(--danger); }
.lg-msg.ok { color: var(--accent-bright); }
.lg-fine { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted-2); }
.lg-fine a { color: var(--accent-bright); }
.rp-nav-signin { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: #fff; color: var(--muted); font: 550 12.5px var(--display); cursor: pointer; }
.rp-nav-signin:hover { color: var(--text); background: #f1f3f6; }
.rp-page .lg-pop { top: calc(var(--sb-h) + var(--nav-h) + 6px); }
@media (max-width: 600px) {
  .lg-badge { top: calc(var(--sb-h, 0px) + 10px); }
  .lg-mail { max-width: 110px; }
  .lg-pop { top: calc(var(--sb-h, 0px) + 52px); }
}

/* ── The Deep Dive report page (/report/<token>) ──────────────
   The same flow, continued: the domain card (with Step 1 done) →
   five analysis steps on strings → the report card → the two
   packages, ordered from the findings. Rendered by js/report.js. */
.hero-report { padding-top: clamp(20px, 3vh, 32px); }
.rp-top { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto clamp(20px, 4vh, 36px); display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
.rp-top:empty, .rp-top:has(.rp-pills:empty) { margin-bottom: 0; }
.rp-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* sticky header: brand · section links (filled once the report has rendered) · PDF.
   --sb-h is the sandbox banner's height (it is sticky above us on sandbox.autseo.com); --nav-h feeds scroll-padding. */
:root { --sb-h: 0px; --nav-h: 56px; }
html.rp-page { scroll-padding-top: calc(var(--sb-h) + var(--nav-h) + 14px); }
.rp-nav { position: sticky; top: var(--sb-h); z-index: 60; background: rgba(251, 251, 252, .86); -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.rp-nav.stuck { border-bottom-color: var(--line); box-shadow: 0 8px 24px -20px rgba(var(--ink-rgb), .35); }
.rp-nav-in { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); min-height: var(--nav-h); display: flex; align-items: center; gap: 18px; }
.rp-nav .brand { flex: 0 0 auto; }
.rp-nav .brand { font-size: 22px; }
.rp-nav-links { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; }
.rp-nav-links a { flex: 0 0 auto; padding: 7px 10px; border-radius: 8px; font: 550 12.5px/1.2 var(--display); color: var(--muted); text-decoration: none; white-space: nowrap; transition: color .15s, background .15s; }
.rp-nav-links a:hover { color: var(--text); background: rgba(var(--ink-rgb), .05); }
.rp-nav-links a.on { color: var(--accent-bright); background: rgba(var(--green-rgb), .1); }
.rp-nav-links a .k { font: 600 10px var(--mono); letter-spacing: .06em; color: var(--muted-2); margin-right: 7px; }
.rp-nav-links a.on .k { color: inherit; }
/* the Report dropdown: one item for the six sections; while inside the report it names the current section */
.rp-nav-dd { position: relative; flex: 0 0 auto; }
.rp-nav-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; font: 550 12.5px/1.2 var(--display); color: var(--muted); cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; }
.rp-nav-btn:hover, .rp-nav-dd.open .rp-nav-btn { color: var(--text); background: rgba(var(--ink-rgb), .05); }
.rp-nav-btn.on { color: var(--accent-bright); background: rgba(var(--green-rgb), .1); }
.rp-nav-btn .cur { font-weight: 500; }
.rp-nav-btn .car { font-size: 10px; margin-left: 2px; transition: transform .2s; }
.rp-nav-dd.open .rp-nav-btn .car { transform: rotate(180deg); }
.rp-nav-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 210px; padding: 6px; border-radius: 12px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px -18px rgba(var(--ink-rgb), .35); display: none; flex-direction: column; z-index: 5; }
.rp-nav-dd.open .rp-nav-menu { display: flex; }
.rp-nav-menu a { display: flex; align-items: center; padding: 8px 10px; border-radius: 8px; }
.rp-nav-menu a .k { min-width: 12px; }
.rp-nav-state { font: 500 12.5px var(--display); color: var(--muted); white-space: nowrap; }
.rp-nav-act { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.rp-nav-act .btn { height: 34px; padding: 0 13px; font-size: 12.5px; }
.rp-nav-acct { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px; font: 550 12.5px/1.2 var(--display); color: var(--muted); text-decoration: none; white-space: nowrap; }
.rp-nav-acct:hover { color: var(--text); background: rgba(var(--ink-rgb), .05); }
.rp-nav-acct .ico { display: none; }
.rp-pill.link { text-decoration: none; color: var(--accent-bright); border-color: #b9dcc6; }
.rp-pill.link:hover { background: #f0f9f3; }
.rsec, #rcard, #products { scroll-margin-top: calc(var(--sb-h) + var(--nav-h) + 14px); }
.rp-page #how-we-write { scroll-margin-top: calc(var(--sb-h) + var(--nav-h) - clamp(84px, 12vh, 150px) + 24px); }
.rp-pill { display: inline-block; font: 600 10.5px var(--mono); letter-spacing: .06em; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--line-strong); background: #fff; color: var(--muted); white-space: nowrap; }
.rp-pill.test { color: var(--warn); border-color: #efd3a6; background: #fff8ec; }
.rp-pill.ok { color: var(--accent-bright); border-color: #b9dcc6; background: #f0f9f3; }
.hero-report h1 { font-size: clamp(30px, 4.4vw, 52px); }
.hero-report .hero-sub { max-width: 720px; }
/* the anchor card: your site, step 1 done */
.dd-anchor { display: flex; align-items: center; gap: 12px; }
.dd-anchor .input-wrap { height: 52px; }
.dd-anchor .input-wrap span:last-child { flex: 1; min-width: 0; font: 500 15px var(--mono); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step1 { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px 0 8px; border-radius: var(--r-md); border: 1px solid rgba(var(--green-rgb), .35); background: rgba(var(--green-rgb), .06); text-decoration: none; color: var(--text); }
.step1 .mini { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--mono); color: #fff; background: var(--sc, var(--accent)); }
.step1 span { display: flex; flex-direction: column; gap: 1px; }
.step1 small { font: 600 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); }
.step1 b { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rp-note-card { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted-2); }
/* the report card */
.rcard-report { width: min(100%, 940px); }
/* the report page keeps the old, narrower flow — only the landing page's three products want 1800px */
.rp-page .flow { max-width: 1120px; }
.rp-page .products { width: min(100%, 1000px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rcard-report .rc-head { display: block; }
.rcard-report .rc-title h2 { font-size: clamp(20px, 2.6vw, 28px); text-wrap: balance; }
.rc-idle { padding: 6px 0 4px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.rp-err { color: var(--danger); font-size: 13.5px; margin: 10px 0 0; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 16px 0 6px; padding-top: 16px; border-top: 1px solid var(--line); }
.tile { padding: 14px 14px 12px; border-radius: 12px; border: 1px solid #cfe7d8; background: #f2faf5; }
.tile b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--accent); font-variant-numeric: tabular-nums; }
.tile span { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.tile small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.rp-sum { margin: 14px 0 0; padding: 0 0 0 4px; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.rp-sum li { position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.55; counter-increment: s; }
.rp-sum li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px var(--mono); display: grid; place-items: center; }
.rp-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.rp-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #fafbfc; border: 1px solid var(--line); color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.rp-note b { color: var(--text); }
.rp-note.ok { background: #f0f9f3; border-color: #cfe7d8; color: #1f5135; }
.rp-note.warn { background: #fff8ec; border-color: #efd3a6; color: #6b4307; }
/* the findings: numbered sections inside the report card, each collapsible */
.rsecs { margin-top: 14px; }
.rsec { border-top: 1px solid var(--line); }
.rsec > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; padding: 16px 0 12px; }
.rsec > summary::-webkit-details-marker { display: none; }
.rsec > summary .n { flex: 0 0 auto; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); }
.rsec > summary h3 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.rsec > summary::after { content: "+"; font: 400 19px/1 var(--mono); color: var(--muted-2); transition: transform .2s; }
.rsec[open] > summary::after { transform: rotate(45deg); }
.rsec-body { padding: 0 0 18px; }
.rsec h4 { margin: 20px 0 4px; font-size: 15px; font-weight: 650; }
.rsec .lead { margin: 0 0 12px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.rp-facts { display: grid; grid-template-columns: 140px 160px minmax(0, 1fr); gap: 10px; margin: 6px 0 12px; }
.rp-facts div { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fafbfc; }
.rp-facts span { display: block; font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.rp-facts b { display: block; margin-top: 3px; font-size: 14px; }
.rp-desc { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }
.rp-desc.muted { color: var(--muted); font-size: 13.5px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.rp-chips .chip { display: inline-block; font: 600 11px var(--mono); padding: 4px 9px; border-radius: 99px; border: 1px solid #b9dcc6; background: #f0f9f3; color: var(--accent-bright); }
.tbl-wrap { overflow-x: auto; margin: 6px 0 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--muted-2); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.you { font-weight: 650; }
.tbl .sub { display: block; color: var(--muted-2); font-size: 11.5px; overflow-wrap: anywhere; }
.tbl .bar { display: inline-block; height: 10px; border-radius: 3px; background: #b3bac9; vertical-align: middle; min-width: 3px; }
.tbl tr.you .bar { background: var(--accent); }
.tbl .chip { display: inline-block; font: 600 10.5px var(--mono); padding: 2px 7px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted); margin-right: 4px; white-space: nowrap; }
.tbl .chip.ok { color: var(--accent-bright); border-color: #b9dcc6; background: #f0f9f3; }
.tbl .act { display: block; min-width: 220px; }
.tbl .act .chip { margin-bottom: 3px; }
.tbl td b { font-weight: 650; display: block; font-size: 12.5px; }
.tbl .chip.kd-lo { color: var(--accent-bright); border-color: #b9dcc6; } .tbl .chip.kd-mid { color: var(--warn); border-color: #efd3a6; } .tbl .chip.kd-hi { color: var(--danger); border-color: #f1c3bf; }
.more { margin-top: 8px; }
.rp-form { margin: 14px 0 0; padding: 16px 18px; border-radius: 12px; border: 1px solid #cfe7d8; background: #f2faf5; }
.rp-form h3 { margin: 0 0 4px; font-size: 16px; }
.rp-form .lead { margin-bottom: 10px; }
.rp-form label { display: flex; flex-direction: column; gap: 5px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rp-form input { height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: #fff; font: 500 14px var(--display); color: var(--text); }
.rp-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--green-rgb), .14); }
.rp-form .rp-actions { margin-top: 4px; }
.pk-fine { font-size: 12px; line-height: 1.5; color: var(--muted-2); }
p.pk-fine { margin: 10px 0 0; }
/* package bodies on the report page (inside .prod-inner) */
.pk-list { margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.pk-list-k { font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 6px; }
.pk-list ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.pk-list ol li span { color: var(--muted-2); font-size: 12px; }
.pk-prof { margin: 0 0 8px; padding: 9px 11px; border-radius: 10px; background: #f0f9f3; border: 1px solid #cfe7d8; font-size: 12.5px; line-height: 1.5; color: #1f5135; }
.pk-prof b { font-weight: 700; }
.pk-grp { margin: 12px 0 4px; font-size: 12.5px; color: var(--muted); }
.pk-grp b { color: var(--text); }
.pk-note { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--line); background: #fafbfc; color: var(--muted); }
.pk-note.ok { background: #f0f9f3; border-color: #cfe7d8; color: #1f5135; }
.pk-note.warn { background: #fff8ec; border-color: #efd3a6; color: #6b4307; }
.pk-topic { display: block; font-size: 11.5px; color: var(--muted-2); }
.pk-topic.on { color: var(--accent-bright); }
.prod .btn-block { margin-top: 4px; }
.fallback { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.fallback input { flex: 1; min-width: 180px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); font: 500 14px var(--display); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
  .foot-goat { width: 210px; margin-bottom: -10px; }
  .hero .blob-1 { width: 220px; height: 220px; left: -100px; }
  .hero .blob-2 { width: 160px; height: 160px; right: -70px; }
  .hero .blob-4 { display: none; }
  .agents { gap: 10px; }
  .agent { padding: 11px 11px 10px; }
  .agent-top { gap: 8px; }
  .agent-ic { width: 30px; height: 30px; }
  .agent-ic svg { width: 16px; height: 16px; }
  .agent-id b { font-size: 12.5px; }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .products .prod:first-child, .products .prod-col:first-child { grid-column: 1 / -1; }   /* the report leads, the two packages sit under it */
  .prod-face, .prod-inner { padding-left: 18px; padding-right: 18px; }
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .how-aside { position: static; max-width: 560px; }
}
@media (max-width: 760px) {
  /* agents become five pods on one row; one shared ticker carries their log */
  .agents { margin-top: 64px; gap: 4px; }
  .agent { padding: 0; border: 0; background: none; box-shadow: none !important; display: flex; justify-content: center; }
  .agent-top { flex-direction: column; gap: 6px; text-align: center; }
  .agent-ic { width: 44px; height: 44px; background: #fff; }
  .agent-ic svg { width: 20px; height: 20px; }
  .agent-id b { font-size: 11px; }
  .agent-st { font-size: 8px; letter-spacing: .06em; }
  .agent-log { display: none; }
  .agents-ticker { position: relative; z-index: 2; width: auto; height: auto; margin: 16px 0 0; clip: auto; overflow: hidden; white-space: normal;
    max-width: 100%; min-height: 2.9em; padding: 0 10px; font: 10.5px/1.45 var(--mono); color: var(--muted); text-align: center; background: var(--bg);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
  .rcard { margin-top: 48px; padding: 18px 16px 14px; }
  .rc-head { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; }
  .rc-head .gauge { width: 90px; height: 90px; }
  .rc-head .gauge-num b { font-size: 28px; }
  .rc-head .gauge-num span { font-size: 7.5px; letter-spacing: .1em; }
  .rrow { grid-template-columns: 28px minmax(0, 1fr) 46px; gap: 10px; }
  .rrow-ic { width: 28px; height: 28px; }
  .rrow-sum { font-size: 13px; }
  .rrow-score { font-size: 16px; }
  .rrow-score .badge { font-size: 10.5px; padding: 2px 6px; }
  .rcard:not(.expanded) .rrows { gap: 6px; }
  .rcard:not(.expanded) .rrow { padding: 10px 2px 8px; gap: 6px; }
  .rcard:not(.expanded) .rrow-name { font-size: 8px; letter-spacing: .04em; }
  .rcard:not(.expanded) .rrow-score { font-size: 14px; }
  .rcard:not(.expanded) .rrow-score i { width: 32px; }
  .products { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 64px; }
  .products .prod:first-child, .products .prod-col:first-child { grid-column: auto; }
  .prod-col { gap: 30px; }
  .dd-prev { transform: none; max-width: 300px; }
  .prod:not(.open) { opacity: .9; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-facts { grid-template-columns: 1fr 1fr; }
  .dd-anchor { flex-direction: column; align-items: stretch; }
  .step1 { justify-content: center; }
}
@media (max-width: 600px) {
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot-goat { width: 170px; }
  .hero .blob-3 { display: none; }
  .domain-row { flex-direction: column; }
  .domain-row .input-wrap { flex: 0 0 auto; }
  #run-btn { width: 100%; }
  .domain-card { padding: 16px 14px 14px; }
  .check summary { grid-template-columns: 22px minmax(0, 1fr) 16px; padding: 12px 14px; gap: 10px; }
  .check summary .tag { display: none; }
  .check .ck-body { grid-template-columns: 1fr; padding: 0 14px 14px 46px; }
  .group-head { padding: 14px; }
  .group-head .g-bar { display: none; }
  .modal-fields { grid-template-columns: 1fr; }
  .modal-card { padding: 22px 18px; }
  .foot-top { margin-left: 0; }
  .how-step { padding-left: 52px; }
  .how-step:not(:last-child)::before { left: 17.5px; top: 34px; }
  .how-num { width: 36px; height: 36px; font-size: 11px; }
  .how-step h3 { font-size: 17.5px; }
  .how-bg { padding: 11px 13px 12px; }
  .rp-top { flex-direction: column; align-items: flex-start; }
  .rp-pills { justify-content: flex-start; }
  .rp-nav-in { gap: 10px; }
  .rp-nav-links { gap: 0; }
  .rp-nav-links a, .rp-nav-btn { padding: 7px 7px; font-size: 12px; }
  .rp-nav-btn .cur { display: none; }
  .rp-nav-act .btn .lbl { display: none; }
  .rp-nav-acct .lbl { display: none; }
  .rp-nav-acct .ico { display: inline; font-size: 15px; }
}
@media (max-width: 400px) {
  .agent-id b { font-size: 10px; }
  .agent-st { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── a content order's articles (js/articles.js): report node, order page, dashboard ── */
.art { margin: 6px 0 0; }
.art-head h3 { font-size: 16px; margin: 0 0 2px; letter-spacing: -.01em; }
.art-sum { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.art-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 0; }
.art-steps li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; color: var(--muted-2); font-size: 13.5px; padding: 6px 0; position: relative; }
.art-steps li::before { content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); background: #fff; z-index: 1; }
.art-steps li::after { content: ''; position: absolute; left: 10px; top: 50%; height: 100%; width: 2px; background: var(--line); }
.art-steps li:last-child::after { display: none; }
.art-steps li.done { color: var(--text); }
.art-steps li.done::before { background: var(--accent-bright); border-color: var(--accent-bright); box-shadow: inset 0 0 0 2px #fff; }
.art-steps li.done::after { background: #bfe0cc; }
.art-steps li.current { color: var(--text); font-weight: 600; }
.art-steps li.current::before { border-color: var(--accent-bright); box-shadow: 0 0 0 4px rgba(var(--green-rgb), .15); }
.art-steps .cnt { font: 500 12px var(--mono); color: var(--muted); }
.art-thoughts { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(var(--green-rgb), .06); border: 1px solid rgba(var(--green-rgb), .2); font-size: 13px; line-height: 1.55; color: #1f5135; }
.art-thoughts summary { cursor: pointer; color: var(--text); font-size: 13px; }
.art-thoughts summary b { color: var(--accent-bright); }
.art-thoughts p { margin: 8px 0 2px; }
.art-thoughts.brief { background: #fafbfc; border-color: var(--line); color: var(--muted); }
.art-pre { white-space: pre-line; }
.art-pre.dim { color: var(--muted-2); }
.art-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.art-row { padding: 11px 0; border-bottom: 1px solid var(--line); }
.art-row-head { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; }
.art-n { font: 600 12px var(--mono); color: var(--muted-2); padding-top: 3px; }
.art-title { min-width: 0; font-size: 14px; line-height: 1.4; }
.art-title b { font-weight: 600; }
.art-kw { display: block; color: var(--muted-2); font-size: 12px; }
.art-chip { display: inline-block; white-space: nowrap; font: 500 11px var(--mono); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted); background: #fff; }
.art-chip.busy { color: #1e5aa8; border-color: #bcd2f0; background: #eef4fd; }
.art-chip.warn { color: #6b4307; border-color: #efd3a6; background: #fff8ec; }
.art-chip.ok { color: var(--accent-bright); border-color: #b9dcc6; background: #f0f9f3; }
.art-why-line { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0 36px; font-size: 12px; color: var(--muted-2); line-height: 1.5; }
.art-angle { color: var(--muted); }
.art-angle.on { color: #1f5135; }
.art-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0 36px; }
.art-date { font-size: 12px; color: var(--muted-2); }
.art-reader { margin: 0 0 0 0; }
.art-reader:not(:empty) { margin-top: 10px; }
.art-meta-grid { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px 12px; align-items: center; font-size: 13px; margin: 10px 0; }
.art-meta-grid .k { color: var(--muted-2); }
.art-meta-grid .v { overflow-wrap: anywhere; }
.art-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.art-article { background: #fff; color: #1b1b22; border: 1px solid var(--line); border-radius: 12px; padding: 24px 26px; line-height: 1.65; font-size: 15px; margin-bottom: 12px; }
.art-article h1 { font-size: 24px; line-height: 1.25; margin: 0 0 14px; color: #111; }
.art-article h2 { font-size: 19px; margin: 24px 0 8px; color: #111; }
.art-article h3 { font-size: 16px; margin: 18px 0 6px; color: #111; }
.art-article img { border-radius: 10px; margin: 0 0 16px; display: block; max-width: 100%; }
.art-article table { border-collapse: collapse; width: 100%; } .art-article td, .art-article th { border: 1px solid #ddd; padding: 6px 8px; }
.art-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 0; }
.art-note { color: var(--muted-2); font-size: 12.5px; line-height: 1.5; }
.art-err { color: var(--danger); font-size: 13px; }
.art.compact .art-steps, .art.compact .art-head { display: none; }
.rep-chip.busy { color: #1e5aa8; border-color: #bcd2f0; background: #eef4fd; }
@media (max-width: 640px) { .art-meta-grid { grid-template-columns: 1fr auto; } .art-meta-grid .k { grid-column: 1 / -1; } .art-why-line, .art-acts { margin-left: 0; } }
/* the article reader as a modal (2026-09-15): wider than the lead modal, a fixed head with ×, the body scrolls */
.art-modal { max-width: min(860px, calc(100vw - 32px)); }
.art-modal .modal-card { display: flex; flex-direction: column; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); padding: 0; overflow: hidden; }
.art-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 24px; border-bottom: 1px solid var(--line); }
.art-modal-k { font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.art-modal .modal-x { position: static; flex: none; }
.art-modal-body { overflow: auto; overscroll-behavior: contain; padding: 18px 24px 24px; }
.art-modal .art-article { margin-bottom: 0; }
.art-modal .art-article img { width: 100%; height: auto; }
@media (max-width: 640px) { .art-modal-body { padding: 14px 16px 18px; } .art-modal .art-article { padding: 18px 16px; } }

/* ── /account: the ordered articles as page previews (2026-09-15; the state IS the page's look) ── */
.ac-arts-wrap { margin: 12px 0 4px; padding: 14px 16px 16px; border-radius: 14px; background: #f6f7f9; }
.ac-arts-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.ac-arts-top b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.ac-arts-top b.some { color: #8a5a06; }
.ac-arts-top b.ok { color: var(--accent-bright); }
.ac-arts-bar { display: flex; gap: 4px; height: 6px; margin: 0 0 16px; }
.ac-arts-bar i { flex: 1; border-radius: 3px; background: #dfe2e9; }
.ac-arts-bar i.writing { background: #7fa8e0; }
.ac-arts-bar i.review { background: #e3b45a; }
.ac-arts-bar i.ready { background: var(--accent-bright); }
.ac-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 10px; }
.ac-art { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; text-align: center; color: var(--muted); }
.ac-page { position: relative; display: block; width: 60px; height: 76px; border-radius: 7px; background: #fff; border: 1px solid #e0e2e8; box-shadow: 0 1px 2px rgba(16,18,27,.04), 0 6px 16px -10px rgba(16,18,27,.18); transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.ac-page-h, .ac-page-l { position: absolute; left: 11px; right: 11px; height: 3px; border-radius: 2px; background: #d9dce4; }
.ac-page-h { top: 14px; height: 5px; right: 18px; background: #c3c7d2; }
.ac-page-l:nth-child(2) { top: 27px; } .ac-page-l:nth-child(3) { top: 36px; } .ac-page-l:nth-child(4) { top: 45px; }
.ac-page-l.short { right: 26px; }
.ac-page-mark { position: absolute; display: none; }
.ac-art-t { font-size: 12px; line-height: 1.3; color: var(--text); font-weight: 500; max-height: 2.6em; overflow: hidden; }
.ac-art-st { font-size: 11.5px; color: var(--muted-2); }
/* queued: a ghost of a page */
.ac-art.queued .ac-page { background: transparent; border: 1.5px dashed #cdd0d9; box-shadow: none; }
.ac-art.queued .ac-page-h, .ac-art.queued .ac-page-l { display: none; }
.ac-art.queued .ac-art-t { color: var(--muted); font-weight: 400; }
/* writing: lines appear with a blinking cursor */
.ac-art.writing .ac-page { border-color: #bcd2f0; }
.ac-art.writing .ac-page-h { background: #8db0e0; }
.ac-art.writing .ac-page-l:nth-child(3) { right: 30px; }
.ac-art.writing .ac-page-l:nth-child(4) { display: none; }
.ac-art.writing .ac-page-mark { display: block; left: 11px; top: 45px; width: 2px; height: 8px; border-radius: 1px; background: #1e5aa8; animation: ac-blink 1s steps(2, start) infinite; }
.ac-art.writing .ac-art-st { color: #1e5aa8; }
/* being read: an amber bookmark hangs over the top edge */
.ac-art.review .ac-page { border-color: #e8d3a3; }
.ac-art.review .ac-page-mark { display: block; right: 9px; top: -1px; width: 10px; height: 20px; background: #e3a83a; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.ac-art.review .ac-art-st { color: #8a5a06; }
/* ready: the page lifts, its lines turn green, a check sits on the corner */
.ac-art.ready .ac-page { border-color: rgba(var(--green-rgb), .45); box-shadow: 0 1px 2px rgba(16,18,27,.04), 0 10px 22px -12px rgba(var(--green-rgb), .5); }
.ac-art.ready .ac-page-h { background: var(--accent-bright); }
.ac-art.ready .ac-page-l { background: #bfe0cc; }
.ac-art.ready .ac-page-mark { display: block; right: -8px; bottom: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-bright); border: 2px solid #f6f7f9; }
.ac-art.ready .ac-page-mark::after { content: ''; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ac-art.ready .ac-art-st { color: var(--accent-bright); font-weight: 600; }
a.ac-art:hover .ac-page, a.ac-art:focus-visible .ac-page { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(16,18,27,.04), 0 16px 26px -12px rgba(var(--green-rgb), .55); }
a.ac-art:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; border-radius: 10px; }
@keyframes ac-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ac-art.writing .ac-page-mark { animation: none; } .ac-page { transition: none; } }
@media (max-width: 640px) { .ac-arts { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); } .ac-page { width: 52px; height: 66px; } }

/* ── the dock (2026-09-15): the report page's floating "your next step" card, bottom right (js/report.js renderDock).
   ONE thing to do now — the money-making step first: choose the sites of your link plan, order the package the report
   picked, read the delivered articles — then the two packages with their live state, one click away from anywhere.
   `.act` = an action is waiting (gold dot, "To do now"); `.min` = folded to a pill; `.away` = the package nodes are on
   screen, so it slides out of the way. Phones: a bottom bar, the two package rows side by side. ── */
.dock { position: fixed; right: var(--gutter); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 62; width: min(340px, calc(100vw - 2 * var(--gutter))); display: flex; justify-content: flex-end; transition: transform .3s var(--ease), opacity .3s; }
.dock[hidden] { display: none; }
.dock.away { opacity: 0; transform: translateY(14px); pointer-events: none; }
.dock-card { width: 100%; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lift); overflow: hidden; animation: dock-in .32s var(--ease); }
@keyframes dock-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.dock-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 12px 0 16px; }
.dock-k { display: inline-flex; align-items: center; gap: 8px; font: 600 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-bright); }
.dock-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.2s infinite; }
.dock.act .dock-k { color: var(--warn); }
.dock.act .dock-k::before { background: var(--gold); animation: dock-pulse-gold 2.2s infinite; }
@keyframes dock-pulse-gold { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 193, 78, .55); } 50% { box-shadow: 0 0 0 5px rgba(242, 193, 78, 0); } }
.dock-min { all: unset; box-sizing: border-box; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 500 16px/1 var(--mono); color: var(--muted-2); cursor: pointer; }
.dock-min:hover { color: var(--text); background: rgba(var(--ink-rgb), .06); }
.dock-min:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dock-todo { padding: 8px 16px 14px; }
.dock-todo h3 { margin: 0; font-size: 15.5px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--text); text-wrap: pretty; }
.dock-todo p { margin: 6px 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.dock-todo .btn { width: 100%; height: 38px; padding: 0 16px; font-size: 13px; }
.dock-rows { border-top: 1px solid var(--line); background: #fafbfc; }
.dock-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px 9px 16px; cursor: pointer; }
.dock-row.muted { cursor: default; }
.dock-row + .dock-row { border-top: 1px solid var(--line); }
.dock-row .ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--accent-bright); background: #fff; border: 1px solid var(--line-strong); }
.dock-row .ic svg { width: 15px; height: 15px; }
.dock-row.muted .ic { color: var(--muted-2); border-style: dashed; }
.dock-row-t { min-width: 0; }
.dock-row-t b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-row-t span { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-row.ok .dock-row-t span { color: var(--accent-bright); }
.dock-row.warn .dock-row-t span { color: var(--warn); font-weight: 600; }
.dock-ctl { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line-strong); font: 600 11.5px var(--display); color: var(--text); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.dock-ctl:hover { background: #f1f3f6; border-color: #cfd3dc; }
.dock-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock-ctl.hot { color: #fff; background: var(--accent); border-color: var(--accent); }
.dock-ctl.hot:hover { background: var(--accent-bright); border-color: var(--accent-bright); }
/* folded: a pill with the step's name */
.dock-pill { display: none; align-items: center; gap: 8px; max-width: 100%; height: 40px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-lift); font: 550 12.5px var(--display); color: var(--text); cursor: pointer; animation: dock-in .32s var(--ease); }
.dock-pill:hover { background: #f7f8fa; }
.dock-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dock-pill i { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse-dot 2.2s infinite; }
.dock.act .dock-pill i { background: var(--gold); animation: dock-pulse-gold 2.2s infinite; }
.dock-pill .k { flex: 0 0 auto; font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-bright); }
.dock.act .dock-pill .k { color: var(--warn); }
.dock-pill .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock.min { width: auto; max-width: min(360px, calc(100vw - 2 * var(--gutter))); }
.dock.min .dock-pill { display: inline-flex; }
.dock.min .dock-card { display: none; }
/* the node the dock sent you to: one ring pulse */
@keyframes dock-hi { 0% { box-shadow: var(--shadow-card), 0 0 0 0 rgba(var(--green-rgb), 0); } 30% { box-shadow: var(--shadow-card), 0 0 0 7px rgba(var(--green-rgb), .3); } 100% { box-shadow: var(--shadow-card), 0 0 0 0 rgba(var(--green-rgb), 0); } }
.prod.dock-hi { animation: dock-hi 1.5s var(--ease) 1; }
@media (max-width: 600px) {
  .dock { left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: auto; }
  .dock.min { left: auto; max-width: calc(100vw - 20px); }
  .dock-todo h3 { font-size: 14.5px; }
  .dock-todo p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .dock-rows { display: grid; grid-template-columns: 1fr 1fr; }
  .dock-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px 9px 14px; }
  .dock-row .ic { display: none; }
  .dock-row + .dock-row { border-top: 0; border-left: 1px solid var(--line); }
  .dock-row-t b { font-size: 12px; white-space: normal; }
  .dock-row-t span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 11px; }
  .dock-ctl { padding: 0 10px; height: 26px; font-size: 11px; }
}