/* AI Data Firm theme. Navy ink, ivory paper, one muted brass accent; a serif for headings and figures, a plain sans for
   reading; thin rules and soft navy shadows instead of glows.
   No green anywhere: landing.css's money-green tokens point at navy and brass below, and every landing.css rule that
   hard-codes a green (glows, tints, the calculator display, the step-1 button, the pinned button) is restated here.
   Fonts (SIL OFL 1.1, Latin subsets, renamed; fonts/aidf-fonts-OFL.txt): AIDF Serif = Source Serif 4, AIDF Sans = Source
   Sans 3. Loaded after landing.css, so equal selectors here win. */
@font-face { font-family: "AIDF Serif"; src: url("/assets/fonts/aidf-serif.woff2") format("woff2"); font-style: normal; font-weight: 500 800; font-display: swap; }
@font-face { font-family: "AIDF Sans"; src: url("/assets/fonts/aidf-sans-300.woff2") format("woff2"); font-style: normal; font-weight: 100 399; font-display: swap; }
@font-face { font-family: "AIDF Sans"; src: url("/assets/fonts/aidf-sans-400.woff2") format("woff2"); font-style: normal; font-weight: 400 589; font-display: swap; }
@font-face { font-family: "AIDF Sans"; src: url("/assets/fonts/aidf-sans-400i.woff2") format("woff2"); font-style: italic; font-weight: 400 900; font-display: swap; }
@font-face { font-family: "AIDF Sans"; src: url("/assets/fonts/aidf-sans-700.woff2") format("woff2"); font-style: normal; font-weight: 590 900; font-display: swap; }

:root {
  --brand-ink: #10233a;
  --brand-paper: #f8f6f1;
  --brand-accent: #a8854a;
  --brand-font-display: "AIDF Serif", Georgia, "Times New Roman", serif;
  --brand-font-text: "AIDF Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --adf-navy-2: #1d3757;        /* the lighter end of navy gradients, button hover */
  --adf-deep: #0b1a2c;          /* the darker end */
  --adf-brass-ink: #7a5b26;     /* brass as text on white or ivory (6.2:1 / 5.8:1) */
  --adf-brass-bright: #dcc08a;  /* brass as text on navy (9.1:1) */
  --adf-brass-soft: #f4eee1;    /* tint behind small notes */
  --adf-brass-line: #e3d5b6;    /* the tint's border */
  --adf-steel: #edf1f6;         /* cool tint: tick icons, notes */
  --adf-shadow: 16, 35, 58;     /* navy, for rgba() shadows */
  /* landing.css's own tokens */
  --paper: #ffffff;
  --ink: var(--brand-ink);
  --ink-2: #3c4a5b;             /* 9.3:1 on white */
  --ink-3: #5a6677;             /* 5.9:1 on white */
  --line: #e6e2d9;
  --line-2: #d7d1c5;
  --control: #868d99;           /* field borders, 3.4:1 on white */
  --green: var(--adf-brass-ink);
  --green-deep: #5f461c;
  --cash: var(--brand-accent);
  --cash-hi: #95743c;
  --mint: var(--adf-brass-soft);
  --focus: #2b5fae;
  --font: var(--brand-font-text);
  --font-logo: var(--brand-font-display);
  --deep: var(--brand-ink);
  --deep-2: var(--adf-navy-2);
  --glow: var(--adf-brass-bright);
  --amber: var(--brand-accent); /* the "Invented example" dot and the warning note's icon (review 10-14: leftover orange) */
}

body { background: #fff; color: var(--ink); font-family: var(--font); }
::selection { background: #e9dcc0; color: var(--ink); }
/* One link style: navy words, a brass underline. --focus stays blue, it draws the keyboard focus ring. */
a, .inv-help-btn, .inv-addcat, .review-wrap summary, .rv-edit { color: var(--brand-ink); }
a { text-decoration-color: var(--brand-accent); }

/* ---- Wordmark: a navy tile with the serif capital A over a short brass rule (scripts/aidf_mark.py), then "AI Data Firm" in the serif */
.wordmark, .foot-brand { font: inherit; letter-spacing: 0; color: var(--ink); text-decoration: none; }
.adf-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); white-space: nowrap; }
.adf-mark { flex: none; width: 34px; height: 34px; }
.adf-tile { fill: var(--brand-ink); }
.adf-a { fill: #fff; }
.adf-rule { fill: var(--adf-brass-bright); }
.adf-word { font: 600 25px/1 var(--brand-font-display); letter-spacing: -0.01em; }
.adf-firm { font-weight: inherit; color: inherit; } /* one-tone name (review 10-14: a brass "Firm" read as a template move) */
.foot-brand .adf-mark { width: 28px; height: 28px; }
.foot-brand .adf-word { font-size: 21px; }
.top-mail { font-weight: 600; }
.top-mail .ic { color: var(--brand-ink); }

/* ---- The monogram (the team line, the step notes) is the brand mark, not letters */
.mono { border-radius: 4px; color: transparent; font-size: 0; letter-spacing: 0;
  background: var(--brand-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M7.61 22.5V21.58L9.97 21.25H10.46L13.01 21.58V22.5ZM9.18 22.5 15.13 4.5H17.03L23.03 22.5H19.5L14.72 7.29H15.23L15.12 7.67L10.33 22.5ZM11.81 16.72V15.63H19.32V16.72ZM16.9 22.5V21.61L19.99 21.23H21.56L24.39 21.61V22.5Z' fill='%23ffffff'/%3E%3Crect x='10' y='25.1' width='12' height='2.4' rx='.6' fill='%23dcc08a'/%3E%3C/svg%3E") center / 100% no-repeat; }

/* ---- Buttons: flat navy with white words, square-ish corners; the ghost button stays white */
.btn { color: #fff; background: var(--brand-ink); border-color: var(--brand-ink); border-radius: 6px; font-weight: 700; letter-spacing: 0; box-shadow: none; }
.btn:hover { background: var(--adf-navy-2); border-color: var(--adf-navy-2); }
.btn--ghost { color: var(--ink); background: #fff; border-color: var(--control); }
.btn--ghost:hover { background: #fff; border-color: var(--ink); }
form[data-step="1"] .step-nav .btn { border: 0; border-radius: 6px; color: #fff; font-weight: 700; letter-spacing: 0; background: var(--brand-ink); box-shadow: none; }
form[data-step="1"] .step-nav .btn:hover { background: var(--adf-navy-2); }

/* ---- Controls: the same square-ish corners as the buttons */
.opts span, .kind-tile, input:not([type="radio"]):not([type="checkbox"]), select, textarea, .consent, .react, .nudge { border-radius: 6px; }
.inv-chip { border-radius: 6px; }
.ctl-val { border-radius: 8px; }

/* ---- The first screen: ivory fading to white, no dot grid, no glow */
.hero { background: linear-gradient(180deg, var(--brand-paper) 0%, #fbfaf7 55%, #fff 100%); }
.hero::before { display: none; }
/* The "for" line is a plain small-caps line with a brass diamond, not a pill */
.hero-for { border: 0; border-radius: 0; background: none; padding: 0; font: 700 14px/1.2 var(--font); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--adf-brass-ink); }
.hero-for::before { width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); background: var(--brand-accent); box-shadow: none; }
/* Calmer than GIGAOffer's 92px: the button and its reassurance line stay above a 1440x900 fold */
h1 { font: 600 clamp(38px, 4.2vw, 64px)/1.06 var(--brand-font-display); letter-spacing: -0.02em; color: var(--ink); }
h1 .hl { color: var(--adf-brass-ink); }
.hero-sub { color: var(--ink-2); }
.hero-sub strong { color: var(--ink); font-weight: 700; }
.paid-k { font-weight: 700; color: var(--ink-2); }
.paid-i b { font: 600 1.08em/1 var(--brand-font-display); letter-spacing: -0.005em; color: var(--ink); }
.with-team strong { font-weight: 700; }
.ticks li { font-weight: 600; }
.ticks .ic { background: var(--adf-steel); color: var(--brand-ink); }

/* ---- The card */
.card { border: 1px solid rgba(var(--adf-shadow), 0.1); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(var(--adf-shadow), 0.05), 0 2px 8px rgba(var(--adf-shadow), 0.04), 0 36px 80px -46px rgba(var(--adf-shadow), 0.5); }
.card-head h2 { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.01em; }
.progress { background: #ecebe6; }
.progress span { background: var(--brand-ink); }

/* Step 1, the display: navy, the range in serif figures, a brass gauge */
.calc { background: radial-gradient(520px 320px at 12% 0%, rgba(220, 192, 138, 0.12), rgba(220, 192, 138, 0) 70%),
  linear-gradient(155deg, var(--adf-deep) 0%, var(--brand-ink) 50%, var(--adf-navy-2) 100%); }
.calc-k { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.calc-k span { color: var(--adf-brass-bright); }
.calc-v, .calc-v.is-off { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: lining-nums proportional-nums; }
.calc-v.is-off { color: rgba(255, 255, 255, 0.4); }
.gauge-track { background: rgba(255, 255, 255, 0.14); }
.gauge-fill { background: linear-gradient(90deg, #c2a062, #ead7aa); box-shadow: none; }
.calc-multi { border-color: rgba(220, 192, 138, 0.35); background: rgba(220, 192, 138, 0.08); }
.calc-multi b { color: var(--adf-brass-bright); }
.calc-x { background: var(--adf-brass-bright); color: var(--adf-deep); } /* brand pages leave the multiplier note out; restated in case */
form[data-step="1"] .calc-multi--below { border-color: var(--adf-brass-line); background: var(--adf-brass-soft); }
.calc-mini { background: linear-gradient(135deg, var(--adf-deep), var(--brand-ink)); color: #dbe2eb; }
.calc-mini b { font-family: var(--brand-font-display); font-weight: 600; color: #fff; }

/* Step 1, the controls */
.ctl-note { background: var(--adf-steel); }
.nudge:active { background: var(--adf-steel); }
.slide::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--brand-ink) var(--p), #e2e5ea var(--p)); }
.slide::-webkit-slider-thumb { border-color: var(--brand-ink); box-shadow: 0 4px 12px rgba(var(--adf-shadow), 0.25), 0 0 0 6px rgba(var(--adf-shadow), 0.08); }
.slide:hover::-webkit-slider-thumb { box-shadow: 0 4px 12px rgba(var(--adf-shadow), 0.25), 0 0 0 9px rgba(var(--adf-shadow), 0.1); }
.slide::-moz-range-progress { background: var(--brand-ink); }
.slide::-moz-range-thumb { border-color: var(--brand-ink); box-shadow: 0 4px 12px rgba(var(--adf-shadow), 0.25); }

/* Steps 2-7 */
.step-h { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.012em; }
.consent input { accent-color: var(--brand-ink); }
.kind-tile[aria-pressed="true"]::before { border-color: var(--adf-brass-bright); background-color: var(--adf-brass-bright); }
.inv-chip[aria-pressed="true"]::before { color: var(--adf-brass-bright); }
.react { background: #f9f7f2; border-color: #e9e3d7; }
.react-ic { background: var(--brand-ink); }
.pay { box-shadow: 0 18px 40px -26px rgba(var(--adf-shadow), 0.35); }

/* ---- The result */
.result h3 { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.015em; }
.payout { border-block: 1px solid var(--adf-brass-line); background-color: var(--adf-brass-soft); background-image: none; }
.result .payout { background: radial-gradient(520px 300px at 10% 0%, rgba(220, 192, 138, 0.12), rgba(220, 192, 138, 0) 70%),
  linear-gradient(155deg, var(--adf-deep) 0%, var(--brand-ink) 50%, var(--adf-navy-2) 100%); }
.result .po-k { color: var(--adf-brass-bright); }
.result .po-v { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.015em; }
.next-step h4 { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.01em; }
.result-list li::before { background-color: var(--brand-ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); background-position: center; background-size: 12px; background-repeat: no-repeat; }
.result-list--hold li::before { background: var(--hold-soft); box-shadow: inset 0 0 0 1.5px var(--hold); background-image: none; }
.result-list--plain li::before { background: #eef1f5; background-image: none; box-shadow: inset 0 0 0 1.5px var(--control); }

/* ---- How it works */
.eyebrow { color: var(--adf-brass-ink); font-weight: 700; }
.how2-head h2, .sec-head h2, .faq h2, .last h2, main h2 { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.02em; }
main > section.how2 { background: linear-gradient(180deg, #ffffff 0%, var(--brand-paper) 100%); }
.h2s { border-radius: 10px; }
.h2s.is-live { border-color: var(--adf-brass-line); box-shadow: 0 0 0 4px rgba(168, 133, 74, 0.12), 0 28px 56px -34px rgba(var(--adf-shadow), 0.45); }
.h2s-n { background: linear-gradient(135deg, var(--adf-deep), var(--brand-ink)); font-family: var(--brand-font-display); font-weight: 600; }
.h2s-when { padding: 0; border-radius: 0; background: none; font-weight: 700; letter-spacing: 0.02em; color: var(--adf-brass-ink); }
.h2s h3 { font-family: var(--brand-font-display); font-weight: 600; letter-spacing: -0.01em; }
.vig { background: linear-gradient(180deg, #f8f6f1 0%, #fdfcfa 100%); border-color: #ebe5d9; }
.v1-chip.on { border-color: var(--adf-brass-line); background: var(--adf-brass-soft); }
.v1-panel { background: radial-gradient(240px 140px at 10% 0%, rgba(220, 192, 138, 0.12), rgba(220, 192, 138, 0) 70%),
  linear-gradient(155deg, var(--adf-deep) 0%, var(--brand-ink) 50%, var(--adf-navy-2) 100%); }
.v1-k { color: var(--adf-brass-bright); }
.v1-range { font-family: var(--brand-font-display); font-weight: 600; }
.v1-badge { background: var(--adf-brass-soft); border-color: var(--adf-brass-line); color: var(--adf-brass-ink); }
.v2-a { background: var(--adf-brass-soft); color: var(--adf-brass-ink); }
.v2-row.done:not(.v2-keep) { border-color: var(--adf-brass-line); }
.v3-offer.pick { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(168, 133, 74, 0.2); }
.v4-note { box-shadow: 0 16px 34px -22px rgba(var(--adf-shadow), 0.45); }
.v4-amt { font-family: var(--brand-font-display); font-weight: 600; }
.v4-done { background: var(--adf-brass-soft); color: var(--adf-brass-ink); }

/* Older sections that GIGAOffer's page may bring back: the same palette */
.mid-cta { background: var(--adf-brass-soft); border-color: var(--adf-brass-line); }
.tl::before { background: var(--line-2); }
.case-ic { background: linear-gradient(135deg, var(--adf-deep), var(--brand-ink)); color: var(--adf-brass-bright); }
.demo-stage { background: linear-gradient(180deg, #f8f6f1 0%, #ffffff 70%); border-color: #ebe5d9; }
.kind.on { border-color: var(--brand-accent); background: #fbf8f1; box-shadow: 0 0 0 3px rgba(168, 133, 74, 0.16); }
.clean mark, .st-done { background: var(--adf-brass-soft); color: var(--adf-brass-ink); }

/* ---- The before/after record */
.tag { border-color: var(--adf-brass-line); border-radius: 4px; }
.tag::before { border-radius: 1px; transform: rotate(45deg); background: var(--brand-accent); } /* the hero's diamond */
.wo mark { background: var(--adf-brass-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--adf-brass-line); white-space: nowrap; }
.controls .ic { background: var(--brand-ink); color: #fff; }

/* ---- The last call and the footer: ivory, a thin rule */
.last { background: var(--brand-paper); border-top: 1px solid var(--line); }
.foot { background: var(--brand-paper); }

/* ---- The pinned button: flat navy, a brass icon square, no pulsing ring; one soft shadow so it lifts off the page */
.fab { border-radius: 8px; color: #fff; background: var(--brand-ink); box-shadow: 0 10px 28px -12px rgba(var(--adf-shadow), 0.55); }
.fab:hover { background: var(--adf-navy-2); transform: none; }
.fab::after { content: none; display: none; animation: none; }
.fab-ic { border-radius: 4px; background: var(--adf-brass-bright); color: var(--adf-deep); }
.fab-txt small { opacity: 0.85; }

@media (max-width: 640px) {
  .adf-word { font-size: 22px; }
  .adf-mark { width: 30px; height: 30px; }
  .foot-brand .adf-word { font-size: 19px; }
  .hero-for { font-size: 11.5px; letter-spacing: 0.06em; }
  /* A 375x667 phone shows a slider and the button in its first screen */
  h1 { font-size: 34px; }
  /* The paid examples stack, so no separator dot hangs at a line end */
  .paid-line { flex-direction: column; align-items: flex-start; gap: 2px; }
  .paid-i::after, .paid-i:not(:last-child)::after { content: none; }
}
@media (max-width: 380px) {
  .adf-word { font-size: 20px; }
}