/* Has AI Heard of You? — warm, light, flat "calm report card" theme (loop 2).
   Owner reference: outbid.lol's calm/soothing visual recipe, adapted to our
   brand — warm near-white background, warm near-black ink, ONE warm
   terracotta accent used sparingly, flat cards (no box-shadow) with
   accent-tinted backgrounds/borders instead of shadow depth, full-pill
   buttons, large border-radius. Colors painted explicitly (one committed
   look, no dark remnants, no prefers-color-scheme dual theme).

   Font: Build #1c (2026-08-26) — owner granted explicit permission to
   download DM Sans; self-hosted, latin-subset, variable-weight woff2
   (fonts/dmsans-variable-latin.woff2, 62,724 bytes), preloaded from both
   HTML pages. Loop 2 shipped a system-stack fallback only because no live
   user was available to grant the download permission at the time — this
   supersedes that deviation. */

/* DM Sans — SIL Open Font License 1.1 (https://openfontlicense.org). Source:
   Google Fonts (fonts.google.com/specimen/DM+Sans), latin subset only,
   self-hosted per the owner's explicit download approval (2026-08-26). */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("fonts/dmsans-variable-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #fdfcfa;
  --surface: #fffefb;
  --surface-raised: #f6f1e9;
  --border: rgba(184, 72, 36, 0.16);
  --border-strong: rgba(184, 72, 36, 0.34);
  --fg: #232224;
  --fg-muted: #5c564f;
  --fg-subtle: #6d675e;
  --accent: #b84824;
  --accent-strong: #99391a;
  --accent-fg: #ffffff;
  --accent-soft: rgba(184, 72, 36, 0.07);
  --accent-soft-strong: rgba(184, 72, 36, 0.13);
  --grade-a: #1f7a4d;
  --grade-a-soft: #e2f2e8;
  --grade-b: #74760f;
  --grade-b-soft: #f0f1dd;
  --grade-c: #a06a10;
  --grade-c-soft: #f6ecd9;
  --grade-d: #a8500f;
  --grade-d-soft: #f5e7dc;
  --grade-f: #a3271f;
  --grade-f-soft: #fbe6e3;
  --danger-bg: #fbeae7;
  --danger-fg: #9a2e26;
  --danger-border: rgba(163, 39, 31, 0.3);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --font: "DM Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Roboto, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji";
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 64px;
}

a {
  color: var(--accent);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.2s ease;
}

a:hover,
a:focus-visible {
  background-size: 100% 1px;
}

.brand-mark,
.affiliate-list a {
  background-image: none;
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

/* ---- Header ---- */

header.site {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 0;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  background: rgba(253, 252, 250, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

@supports not (backdrop-filter: blur(1px)) {
  header.site {
    background: var(--bg);
  }
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--fg);
}

.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--accent-soft-strong);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.85rem;
}

/* ---- Hero ---- */

.hero {
  text-align: center;
  margin-bottom: 28px;
}

.hero-glow {
  position: relative;
}

.hero-glow::before {
  content: "";
  position: absolute;
  inset: -32px -16px auto -16px;
  height: 220px;
  background: radial-gradient(
    60% 100% at 50% 20%,
    var(--accent-soft-strong),
    transparent 72%
  );
  pointer-events: none;
}

.hero-glow > * {
  position: relative;
}

.hero.hero-left {
  text-align: left;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--fg);
}

.hero p {
  color: var(--fg-muted);
  font-size: 1.05rem;
  max-width: 60ch;
  margin: 0 auto;
}

.hero.hero-left p {
  margin: 0;
}

/* ---- Form card ---- */

.check-form {
  display: grid;
  gap: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--fg-muted);
  transition: color 0.15s ease;
}

.field:focus-within label {
  color: var(--accent);
}

.field input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--fg);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.field input::placeholder {
  color: var(--fg-subtle);
}

.field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  background: var(--surface);
}

button {
  font-family: inherit;
}

#submit-btn {
  position: relative;
  overflow: hidden;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  border: none;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

#submit-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

#submit-btn:not(:disabled):hover::after {
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  #submit-btn::after {
    display: none;
  }
}

#submit-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

#submit-btn:not(:disabled):hover {
  background: var(--accent-strong);
}

#submit-btn:not(:disabled):active {
  transform: translateY(1px);
}

.hint {
  font-size: 0.82rem;
  color: var(--fg-subtle);
  margin: 0;
}

/* ---- Turnstile widget (Build #3, 2026-08-27) ----
   The widget renders inside an iframe we cannot restyle internally, so it
   must sit calmly in the warm/flat/light system on its own: no card, no
   border of its own — just breathing room. min-height reserves the
   default "normal" widget's rendered size (300x65) up front so its
   appearance never shifts layout (CLS must stay 0) whether the script is
   still loading, blocked, or already rendered. */
.turnstile-wrap {
  display: flex;
  justify-content: center;
  min-height: 65px;
}

.turnstile-wrap .cf-turnstile {
  max-width: 100%;
}

/* ---- Example scorecard (first-load preview, hidden once a real check runs) ---- */

.example-section {
  margin-bottom: 24px;
}

.example-section[hidden] {
  display: none;
}

.example-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  margin: 0 0 10px;
}

.example-card {
  border-style: dashed;
  border-color: var(--border-strong);
  opacity: 0.95;
}

.example-caption {
  font-size: 0.85rem;
  color: var(--fg-subtle);
  margin: 10px 0 0;
}

/* ---- Loading skeleton ---- */

.loading {
  display: none;
  padding: 4px 0 24px;
}

.loading.visible {
  display: block;
}

.skeleton-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
}

.skeleton-badge {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--surface-raised);
}

.skeleton-lines {
  flex: 1;
  display: grid;
  gap: 10px;
}

.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: var(--surface-raised);
}

.skeleton-line.w60 {
  width: 60%;
}

.skeleton-line.w40 {
  width: 40%;
}

.skeleton-line.w80 {
  width: 85%;
}

.skeleton-badge,
.skeleton-line {
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-badge,
  .skeleton-line {
    animation: none;
    opacity: 0.75;
  }
}

.loading-copy {
  text-align: center;
  color: var(--fg-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* ---- Error / status banner ---- */

.banner {
  display: none;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-fg);
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.banner.visible {
  display: block;
}

/* ---- Results ---- */

#result {
  display: none;
}

#result.visible {
  display: block;
}

.grade-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  margin-bottom: 22px;
}

.grade-badge {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5px;
  background: conic-gradient(
    var(--ring-color, var(--accent)) calc(var(--ring-pct, 70) * 1%),
    var(--border) 0
  );
}

.grade-badge::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--surface-raised);
}

.grade-badge[data-grade="A"] {
  --ring-pct: 96;
  --ring-color: var(--grade-a);
}

.grade-badge[data-grade="B"] {
  --ring-pct: 80;
  --ring-color: var(--grade-b);
}

.grade-badge[data-grade="C"] {
  --ring-pct: 60;
  --ring-color: var(--grade-c);
}

.grade-badge[data-grade="D"] {
  --ring-pct: 38;
  --ring-color: var(--grade-d);
}

.grade-badge[data-grade="F"] {
  --ring-pct: 18;
  --ring-color: var(--grade-f);
}

.grade-letter {
  position: relative;
  z-index: 1;
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
}

.grade-letter[data-grade="A"] {
  color: var(--grade-a);
}

.grade-letter[data-grade="B"] {
  color: var(--grade-b);
}

.grade-letter[data-grade="C"] {
  color: var(--grade-c);
}

.grade-letter[data-grade="D"] {
  color: var(--grade-d);
}

.grade-letter[data-grade="F"] {
  color: var(--grade-f);
}

@media (prefers-reduced-motion: no-preference) {
  #result.visible .grade-badge {
    animation: gradeReveal 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
}

@keyframes gradeReveal {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.grade-body {
  min-width: 0;
}

.grade-eyebrow {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.grade-headline {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--fg);
}

/* On-card evidence qualifier (Build #1d, FIX 2): only shown when fewer
   models answered than were asked, so a grade never reads as if it came
   from a full unanimous panel when it didn't. Lives on the grade card
   itself (not only in .partial-note below it) so the evidence base is
   visible at the exact moment someone reads the grade. */
.grade-basis {
  font-size: 0.8rem;
  font-weight: 600;
  margin: 6px 0 0;
  color: var(--fg-muted);
}

.partial-note {
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin: -10px 0 22px;
}

section.block {
  margin-bottom: 30px;
}

section.block h2 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  color: var(--fg);
}

.results-source-note {
  font-size: 0.85rem;
  color: var(--fg-subtle);
  margin: 0 0 10px;
}

.model-disclosure {
  margin: 0 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  padding: 4px 16px;
}

.model-disclosure summary {
  cursor: pointer;
  padding: 10px 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  list-style: revert;
}

.model-disclosure summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.model-disclosure ul {
  margin: 0;
  padding: 0 0 14px 20px;
  display: grid;
  gap: 6px;
  list-style: disc;
}

.model-disclosure li {
  font-size: 0.88rem;
  color: var(--fg-muted);
}

.model-disclosure code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--fg-subtle);
  word-break: break-all;
}

.model-cards {
  display: grid;
  gap: 12px;
}

.model-card {
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: var(--surface);
  transition: border-color 0.15s ease;
}

.model-card:has(.verdict.yes) {
  border-top-color: var(--grade-a);
}

.model-card:has(.verdict.no) {
  border-top-color: var(--grade-f);
}

@media (min-width: 640px) {
  .model-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.model-card .model-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fg);
  margin-bottom: 10px;
}

.model-card .verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  margin-bottom: 8px;
}

.model-card .verdict.yes {
  color: var(--grade-a);
  background: var(--grade-a-soft);
}

.model-card .verdict.no {
  color: var(--grade-f);
  background: var(--grade-f-soft);
}

.model-card p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--fg-muted);
}

ol.recommend-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  color: var(--fg);
}

.fixit ul {
  margin: 0 0 16px;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  color: var(--fg);
}

.affiliate-list {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.affiliate-list a {
  display: block;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.affiliate-list a:hover {
  background: var(--accent-soft);
  border-color: var(--border-strong);
}

.disclosure {
  font-size: 0.78rem;
  color: var(--fg-subtle);
}

/* ---- Share block ---- */

.share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.share-actions button {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.share-actions button:hover {
  background: var(--accent-soft);
}

#share-canvas {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: block;
  margin-bottom: 12px;
}

.copy-status {
  font-size: 0.82rem;
  color: var(--fg-muted);
  min-height: 1.2em;
}

/* ---- Footer ---- */

footer.site {
  text-align: center;
  margin-top: 44px;
  font-size: 0.85rem;
  color: var(--fg-subtle);
}

footer.site a {
  color: var(--fg-muted);
}

noscript .noscript-note {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

/* ---- Breadcrumb (guides pages, Build #2) ---- */

.breadcrumb {
  margin: 0 0 20px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--fg-subtle);
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 6px;
  color: var(--fg-subtle);
}

.breadcrumb a {
  color: var(--fg-muted);
}

.breadcrumb li[aria-current="page"] {
  color: var(--fg-subtle);
}

/* ---- Article/guide prose (Build #2) ---- */

.prose h1 {
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--fg);
}

.prose .lead {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--fg);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 0 0 30px;
}

.prose h2 {
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 34px 0 12px;
  color: var(--fg);
}

.prose p {
  margin: 0 0 16px;
  color: var(--fg);
}

.prose ul,
.prose ol {
  margin: 0 0 16px;
  padding-left: 22px;
  display: grid;
  gap: 8px;
  color: var(--fg);
}

.prose strong {
  color: var(--fg);
}

.guide-cta {
  margin: 40px 0 8px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.guide-cta p {
  margin: 0 0 14px;
  color: var(--fg-muted);
}

.guide-cta a.button {
  display: inline-block;
  min-height: 44px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  text-decoration: none;
  background-image: none;
}

.guide-cta a.button:hover {
  background: var(--accent-strong);
}

/* ---- Guides index (Build #2) ---- */

.guide-list {
  display: grid;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.guide-list a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  text-decoration: none;
  background-image: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.guide-list a:hover,
.guide-list a:focus-visible {
  border-color: var(--border-strong);
  background: var(--accent-soft);
}

.guide-list h2 {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
}

.guide-list p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--fg-muted);
}

/* ---- Wider viewports ---- */

@media (min-width: 640px) {
  .wrap {
    max-width: 720px;
    padding-top: 44px;
  }

  header.site {
    justify-content: space-between;
  }

  .prose {
    max-width: 68ch;
  }
}