/*
  HumanGPT website styles (v2).
  One stylesheet for every page. No build step, no web fonts. The home page adds one small
  inline script for the use-case switcher and scroll reveals; every page works without it:
  text uses the system font stack, so Apple devices show SF Pro.
  Colors are tokens on :root and are redefined for dark mode below.
  Look: white backgrounds, one primary blue (#2563EB) for filled CTAs with white text,
  light blue tints for selection and info, neutral grays for text,
  green for "sounds human" and amber/red for high AI-likeness.
*/

/* ---------- Tokens ---------- */
:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --bg-soft: #f8fafc;
  --bg-elev: #ffffff;
  --bg-sunk: #f1f5f9;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #526075;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;

  --blue: #2563eb;
  --blue-pressed: #1d4ed8;
  --on-blue: #ffffff;
  --link: #1d4ed8;
  --blue-soft: #eff6ff;
  --blue-soft-2: #dbeafe;
  --blue-ink: #1e40af;

  --green: #15803d;
  --green-fill: #16a34a;
  --green-soft: #dcfce7;
  --amber: #854d0e;
  --amber-fill: #f59e0b;
  --amber-soft: #fef3c7;
  --red: #b91c1c;
  --red-fill: #ef4444;
  --red-soft: #fee2e2;

  --del: #b91c1c;
  --del-bg: #fee2e2;
  --ins: #166534;
  --ins-bg: #dcfce7;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 10px 28px rgb(15 23 42 / 0.07);
  --shadow-lg: 0 2px 6px rgb(15 23 42 / 0.06), 0 30px 70px rgb(15 23 42 / 0.16);
  --shadow-blue: 0 1px 2px rgb(37 99 235 / 0.25), 0 8px 20px rgb(37 99 235 / 0.22);
  --scroll-shadow: rgb(15 23 42 / 0.28);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-btn: 12px;

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --bg-soft: #0e1527;
    --bg-elev: #131c31;
    --bg-sunk: #0a0f1c;
    --ink: #f1f5f9;
    --ink-2: #cbd5e1;
    --ink-3: #9aa8bc;
    --line: #223049;
    --line-strong: #34445f;

    --blue: #2563eb;
    --blue-pressed: #1d4ed8;
    --on-blue: #ffffff;
    --link: #8ab4ff;
    --blue-soft: #14234a;
    --blue-soft-2: #1b2f61;
    --blue-ink: #c7dbff;

    --green: #5ee08f;
    --green-fill: #22c55e;
    --green-soft: #0f2e1d;
    --amber: #fcc94d;
    --amber-fill: #f59e0b;
    --amber-soft: #33270b;
    --red: #ff9a9a;
    --red-fill: #f87171;
    --red-soft: #3b1418;

    --del: #ffa3a3;
    --del-bg: #3b1418;
    --ins: #7ee8a6;
    --ins-bg: #0f2e1d;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 10px 28px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 30px 70px rgb(0 0 0 / 0.55);
    --shadow-blue: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 20px rgb(37 99 235 / 0.3);
    --scroll-shadow: rgb(148 163 184 / 0.4);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  letter-spacing: -0.028em;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 1em;
}

strong {
  font-weight: 650;
}

code,
kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}

.brand svg {
  width: 32px;
  height: 32px;
  flex: none;
}

.site-nav {
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--bg-sunk);
}

.site-nav a[aria-current] {
  color: var(--blue-ink);
  background: var(--blue-soft);
  font-weight: 600;
}

.header-cta {
  flex: none;
}

/* On narrow screens the nav becomes a second, scrollable row and the header stops sticking. */
@media (max-width: 860px) {
  html {
    scroll-padding-top: 16px;
  }

  .site-header {
    position: static;
  }

  .header-inner {
    padding-top: 8px;
    row-gap: 8px;
  }

  .header-cta {
    margin-left: auto;
  }

  .site-nav {
    order: 3;
    flex: 1 0 100%;
    margin: 0 calc(-1 * var(--gutter));
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  /* Scroll shadows: the edge fades only appear while more links are hidden that way. */
  .site-nav {
    background:
      linear-gradient(to right, var(--bg) 40%, transparent) left / 28px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 40%, transparent) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right / 16px 100% no-repeat scroll;
  }

  .site-nav ul {
    padding: 2px var(--gutter);
    width: max-content;
  }

  .site-nav a {
    min-height: 44px;
    font-size: 0.9rem;
  }
}

/* Just above the phone layout, tighten the seven nav links so brand, nav and button keep one row. */
@media (min-width: 861px) and (max-width: 959px) {
  .header-inner {
    column-gap: 12px;
  }

  .site-nav a {
    padding: 0 8px;
    font-size: 0.9rem;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--blue);
  color: var(--on-blue);
  font: 600 0.98rem/1.15 var(--font-sans);
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  background: var(--blue-pressed);
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px) scale(0.99);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn-lg {
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 14px;
  font-size: 1.06rem;
  box-shadow: var(--shadow-blue);
}

.btn-lg svg {
  width: 20px;
  height: 20px;
}

.btn-secondary {
  background: var(--bg-elev);
  color: var(--blue-ink);
  border-color: var(--line-strong);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--blue-soft);
  border-color: var(--blue);
}

.btn-block {
  width: 100%;
}

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

.fine {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.92rem;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(40px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--blue-soft), var(--bg) 70%);
  opacity: 0.9;
}

/* A soft blue glow that drifts very slowly behind the hero. */
.hero::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 82%;
  z-index: -1;
  width: clamp(460px, 64vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 15%, transparent), transparent);
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0);
  animation: hero-drift 28s ease-in-out infinite alternate;
}

@keyframes hero-drift {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1);
  }
  50% {
    transform: translate3d(-57%, -41%, 0) scale(1.08);
  }
  100% {
    transform: translate3d(-46%, -36%, 0) scale(0.95);
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(48px, 7vw, 72px);
  align-items: center;
}

@media (min-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 12px 6px 8px;
  border: 1px solid var(--blue-soft-2);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--blue-ink);
  font-size: 0.85rem;
  font-weight: 600;
}

.eyebrow-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
}

.eyebrow-dot svg {
  width: 13px;
  height: 13px;
}

.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(2.7rem, 1.5rem + 5vw, 5rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.hero h1 .accent {
  color: var(--blue);
}

@media (prefers-color-scheme: dark) {
  .hero h1 .accent {
    color: var(--link);
  }
}

.lead {
  max-width: 34em;
  margin-bottom: 30px;
  color: var(--ink-2);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.28rem);
  line-height: 1.55;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 500;
}

.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-points svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--green);
}

/* ---------- Phone mock (decorative illustration of the result screen) ---------- */
.hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
}

@media (min-width: 980px) {
  .hero-art {
    justify-content: flex-end;
  }
}

.phone-wrap {
  position: relative;
}

.phone {
  position: relative;
  width: min(340px, 86vw);
  padding: 10px;
  border-radius: 54px;
  background: linear-gradient(150deg, #3a3d46, #101114 55%, #2a2c33);
  box-shadow: var(--shadow-lg), inset 0 0 0 1.5px rgb(255 255 255 / 0.1);
}

.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 11px;
  overflow: hidden;
  padding: 12px 15px 18px;
  border-radius: 44px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.phone-status {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2px 12px 0;
  font-size: 13px;
  font-weight: 650;
}

.phone-status .island {
  width: 92px;
  height: 27px;
  border-radius: 20px;
  background: #000;
}

.phone-status .status-icons {
  justify-self: end;
  display: flex;
  gap: 5px;
  align-items: center;
}

.phone-status .status-icons svg {
  width: 17px;
  height: 11px;
  fill: currentColor;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  color: var(--blue);
  font-size: 15px;
}

@media (prefers-color-scheme: dark) {
  .app-bar {
    color: var(--link);
  }
}

.app-bar .back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.app-bar svg {
  width: 16px;
  height: 16px;
}

.app-title {
  margin: 0;
  font: 700 25px/1.1 var(--font-sans);
  letter-spacing: -0.025em;
}

.mock-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-elev);
}

.mock-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.score-values {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.score-values svg {
  width: 15px;
  height: 15px;
  color: var(--ink-3);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  white-space: nowrap;
}

.pill-red {
  background: var(--red-soft);
  color: var(--red);
}

.pill-amber {
  background: var(--amber-soft);
  color: var(--amber);
}

.pill-green {
  background: var(--green-soft);
  color: var(--green);
}

.pill-blue {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.meter {
  position: relative;
  height: 8px;
  margin-top: 10px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--green-fill), var(--amber-fill) 55%, var(--red-fill));
  opacity: 0.95;
}

.meter-mark {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--green-fill);
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.35);
}

.meter-mark.was {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-width: 2px;
  background: var(--red-fill);
  opacity: 0.75;
}

.meter-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 11px;
}

.diff {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

del,
ins {
  padding: 0.04em 0.16em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

del {
  background: var(--del-bg);
  color: var(--del);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

ins {
  background: var(--ins-bg);
  color: var(--ins);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

.fix-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fix-chips li {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-size: 12px;
  font-weight: 600;
}

.integrity-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--green);
  font-size: 13px;
  font-weight: 600;
}

.integrity-row svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.mock-actions {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8px;
  margin-top: 2px;
}

.mock-actions span {
  display: grid;
  place-items: center;
  height: 44px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 650;
}

.mock-actions .ghost {
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--blue-ink);
}

.mock-actions .solid {
  background: var(--blue);
  color: #fff;
}

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-elev);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  animation: bob 7s ease-in-out infinite;
}

.float-card small {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.float-card .float-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue);
}

@media (prefers-color-scheme: dark) {
  .float-card .float-icon {
    color: var(--link);
  }
}

.float-card .float-icon svg {
  width: 18px;
  height: 18px;
}

.float-tone {
  top: 12%;
  right: calc(100% - 28px);
}

.float-kind {
  top: 44%;
  right: calc(100% - 20px);
  animation-delay: -2.4s;
}

.float-voice {
  bottom: 14%;
  right: calc(100% - 32px);
  animation-delay: -4.8s;
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* The floating cards sit left of the phone, so they only show where there is room. */
@media (max-width: 719px), (min-width: 980px) and (max-width: 1179px) {
  .float-card {
    display: none;
  }
}

/* ---------- Sections ---------- */
.section {
  padding: clamp(64px, 9vw, 112px) 0;
}

.section-tight {
  padding-top: 0;
}

.section-soft {
  background: var(--bg-soft);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 46rem;
  margin-bottom: clamp(32px, 5vw, 52px);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.kicker {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
  .kicker {
    color: var(--link);
  }
}

.section-head p:not(.kicker) {
  color: var(--ink-2);
  font-size: 1.125rem;
}

.section-head p:last-child {
  margin-bottom: 0;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: var(--blue-soft);
  color: var(--blue);
}

@media (prefers-color-scheme: dark) {
  .icon-tile {
    color: var(--link);
  }
}

.icon-tile svg {
  width: 24px;
  height: 24px;
}

/* ---------- Pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillar {
  padding: 28px 26px;
}

.pillar h3 {
  margin-bottom: 10px;
}

.pillar p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
}

/* ---------- Before and after samples ---------- */
.samples {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.seg {
  display: none;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-sunk);
}

.seg legend {
  padding: 0;
}

.seg input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.seg label {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.seg label:hover {
  color: var(--ink);
}

.seg input:checked + label {
  background: var(--bg-elev);
  color: var(--blue-ink);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--line);
}

.seg input:focus-visible + label {
  outline: 3px solid var(--blue);
  outline-offset: 1px;
}

.sample-panel {
  display: grid;
  gap: 16px;
}

.sample-title {
  margin: 8px 0 0;
  font-size: 1.1rem;
}

.sample-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 820px) {
  .sample-pair {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
}

.sample-arrow {
  display: grid;
  place-items: center;
  color: var(--ink-3);
}

.sample-arrow svg {
  width: 28px;
  height: 28px;
  transform: rotate(90deg);
}

@media (min-width: 820px) {
  .sample-arrow svg {
    transform: none;
  }
}

.sample-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 24px;
}

.sample-card.after {
  border-color: color-mix(in srgb, var(--green-fill) 45%, var(--line));
}

.sample-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sample-head h4 {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sample-text {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.75;
}

.s-high,
.s-mid,
.s-low {
  padding: 0.08em 0.1em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.s-high {
  background: var(--red-soft);
  box-shadow: inset 0 -2px 0 var(--red-fill);
}

.s-mid {
  background: var(--amber-soft);
  box-shadow: inset 0 -2px 0 var(--amber-fill);
}

.s-low {
  background: var(--green-soft);
}

.sample-fixes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.sample-fixes .fix-chips li {
  font-size: 0.8rem;
}

.sample-fixes-label {
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.legend .swatch {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

.swatch.s-high,
.swatch.s-mid,
.swatch.s-low {
  padding: 0;
}

.samples-note {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.92rem;
  text-align: center;
}

/* Tabs need :has(). Without it, every sample shows, one after another. */
@supports selector(:has(*)) {
  .seg {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    justify-self: center;
  }

  @media (max-width: 520px) {
    .seg {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      justify-self: stretch;
    }

    .seg label {
      justify-content: center;
      padding: 0 8px;
    }
  }

  .sample-panel {
    display: none;
  }

  .sample-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .samples:has(#tab-essay:checked) #panel-essay,
  .samples:has(#tab-email:checked) #panel-email,
  .samples:has(#tab-post:checked) #panel-post,
  .samples:has(#tab-cover:checked) #panel-cover {
    display: grid;
  }
}

/* ---------- Who it's for (use cases) ----------
  Without JavaScript every use case is shown one after another, with its AI draft above the
  rewrite. With JavaScript (html.js, set in the page head) the panels share one grid cell, so
  switching tabs never changes the section height. Motion uses opacity, transform and colors. */
.uc-stage {
  display: grid;
  gap: clamp(22px, 3.5vw, 34px);
}

.uc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
}

html:not(.js) .uc-bar {
  display: none;
}

.uc-tabs {
  display: inline-flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
}

.uc-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink-2);
  font: 600 0.97rem/1.2 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.uc-tab svg {
  width: 19px;
  height: 19px;
  flex: none;
}

.uc-tab:hover {
  background: var(--bg-sunk);
  color: var(--ink);
}

/* The selected tab always carries a blue ring, so it stays easy to spot when switching is stopped. */
.uc-tab[aria-selected="true"] {
  background: var(--blue-soft);
  color: var(--blue-ink);
  box-shadow: inset 0 0 0 1.5px var(--blue);
}

.uc-tab:focus-visible {
  border-radius: 13px;
  outline-offset: 2px;
}

/* Time left before the next use case, shown only while switching runs on its own. */
.uc-progress {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.uc-progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
}

.uc-stage.is-auto .uc-tab[aria-selected="true"] .uc-progress {
  opacity: 1;
}

.uc-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 118px;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-2);
  font: 600 0.9rem/1 var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.uc-play:hover {
  border-color: var(--blue);
  color: var(--blue-ink);
}

.uc-play:focus-visible {
  border-radius: 999px;
}

.uc-play svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.uc-play .i-play,
.uc-play.is-paused .i-pause,
.uc-stage.is-calm .uc-play {
  display: none;
}

.uc-play.is-paused .i-play {
  display: block;
}

@media (max-width: 640px) {
  .uc-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .uc-tab {
    padding: 0 10px;
  }
}

/* Panels */
.uc-panel + .uc-panel {
  margin-top: clamp(48px, 7vw, 72px);
  padding-top: clamp(48px, 7vw, 72px);
  border-top: 1px solid var(--line);
}

.js .uc-panels {
  display: grid;
}

.js .uc-panel {
  grid-area: 1 / 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: opacity 0.4s ease 0.12s;
}

.js .uc-panel:not(.is-active) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.uc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "demo" "side";
  gap: 22px;
}

@media (min-width: 920px) {
  .uc-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "intro demo" "side demo";
    column-gap: clamp(36px, 4.5vw, 64px);
    row-gap: 26px;
    align-items: start;
  }
}

.uc-intro {
  grid-area: intro;
}

.uc-intro h3 {
  margin-bottom: 10px;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  letter-spacing: -0.022em;
}

.uc-lead {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.05rem;
}

.uc-side {
  grid-area: side;
}

/* Pain points: what people say, then what HumanGPT does about it */
.uc-pains {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-pain {
  display: grid;
  justify-items: start;
  gap: 8px;
}

.uc-say {
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 10px 16px 10px 42px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}

.uc-say::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 12px;
  width: 18px;
  height: 18px;
  background-color: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5h-9l-4.5 3.5v-3.5H4A1.5 1.5 0 0 1 2.5 16V7A1.5 1.5 0 0 1 4 5.5z'/%3E%3Cpath d='M8 10.5h8M8 13.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16a1.5 1.5 0 0 1 1.5 1.5v9a1.5 1.5 0 0 1-1.5 1.5h-9l-4.5 3.5v-3.5H4A1.5 1.5 0 0 1 2.5 16V7A1.5 1.5 0 0 1 4 5.5z'/%3E%3Cpath d='M8 10.5h8M8 13.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.uc-fix {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding-left: 14px;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.55;
}

.uc-fix strong {
  color: var(--ink);
  font-weight: 650;
}

.uc-fix-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
}

.uc-fix-icon svg {
  width: 14px;
  height: 14px;
}

.uc-fix .pro-tag {
  margin-left: 4px;
  vertical-align: 0.12em;
}

/* Pains slide in one after another whenever their panel is shown, and fade out with it. */
.js .uc-say,
.js .uc-fix {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.js .uc-panels.is-visible .uc-panel.is-active .uc-say,
.js .uc-panels.is-visible .uc-panel.is-active .uc-fix {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s ease var(--d), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d);
}

.uc-pain:nth-child(1) .uc-say { --d: 0.2s; }
.uc-pain:nth-child(1) .uc-fix { --d: 0.34s; }
.uc-pain:nth-child(2) .uc-say { --d: 0.48s; }
.uc-pain:nth-child(2) .uc-fix { --d: 0.62s; }
.uc-pain:nth-child(3) .uc-say { --d: 0.76s; }
.uc-pain:nth-child(3) .uc-fix { --d: 0.9s; }

/* Demo card */
.uc-demo {
  grid-area: demo;
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 18px 20px 18px;
  box-shadow: var(--shadow);
}

.uc-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.uc-doc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 650;
}

.uc-doc svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-3);
}

.uc-status {
  display: inline-grid;
  flex: none;
}

.uc-st {
  grid-area: 1 / 1;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.uc-st::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.uc-st[data-st="draft"] { background: var(--red-soft); color: var(--red); }
.uc-st[data-st="scan"] { background: var(--amber-soft); color: var(--amber); }
.uc-st[data-st="morph"] { background: var(--blue-soft); color: var(--blue-ink); }
.uc-st[data-st="after"] { background: var(--green-soft); color: var(--green); }

.uc-demo:not([data-state]) .uc-st[data-st="after"],
.uc-demo[data-state="before"] .uc-st[data-st="draft"],
.uc-demo[data-state="scan"] .uc-st[data-st="scan"],
.uc-demo[data-state="morph"] .uc-st[data-st="morph"],
.uc-demo[data-state="after"] .uc-st[data-st="after"] {
  opacity: 1;
  transition: opacity 0.25s ease 0.12s;
}

.uc-demo[data-state="scan"] .uc-st[data-st="scan"]::before,
.uc-demo[data-state="morph"] .uc-st[data-st="morph"]::before {
  animation: uc-blink 0.9s ease-in-out infinite;
}

@keyframes uc-blink {
  50% {
    opacity: 0.25;
  }
}

.uc-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.uc-score .mock-label {
  margin: 0;
  font-size: 11.5px;
}

.uc-pill {
  justify-content: center;
  gap: 0;
  min-width: 3.4em;
  font-size: 13px;
}

/* AI-likeness bar: the colored scale is covered from the right, so the visible part ends at the score. */
.uc-meter {
  position: relative;
  height: 10px;
  margin-top: 12px;
}

.uc-meter-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 99px;
  background: linear-gradient(to right, var(--green-fill), var(--amber-fill) 55%, var(--red-fill));
}

.uc-meter-mask {
  position: absolute;
  inset: 0;
  background: var(--line);
  transform: scaleX(calc(1 - var(--p) / 100));
  transform-origin: right center;
}

/* The knobs ride on full-width layers that move sideways; the rail clips what slides past the end. */
.uc-meter-rail {
  position: absolute;
  inset: -10px -12px;
  overflow: hidden;
  pointer-events: none;
}

.uc-meter-pos,
.uc-meter-was {
  position: absolute;
  inset: 10px 12px;
  transform: translate3d(calc(var(--p) * 1%), 0, 0);
}

.uc-meter-was {
  transform: translate3d(calc(var(--from) * 1%), 0, 0);
  transition: opacity 0.4s ease;
}

.uc-meter-pos > span,
.uc-meter-was > span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 1px 4px rgb(15 23 42 / 0.35);
}

.uc-meter-was > span {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-width: 2px;
  background: var(--red-fill);
  opacity: 0.8;
}

.uc-demo[data-state]:not([data-state="after"]) .uc-meter-was {
  opacity: 0;
}

.uc-demo[data-state="morph"] .uc-meter-mask,
.uc-demo[data-state="morph"] .uc-meter-pos {
  transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.uc-score .meter-caption {
  margin-top: 8px;
}

/* Before and after texts sit in the same grid cell, so the card keeps its height. */
.uc-texts {
  position: relative;
  margin: 0 -6px;
  padding: 2px 6px;
  overflow: hidden;
}

.uc-texts > p {
  margin: 0;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.72;
}

.js .uc-texts {
  display: grid;
}

.js .uc-texts > p {
  grid-area: 1 / 1;
}

.uc-before {
  isolation: isolate;
  opacity: 0;
}

/* "AI draft" and "HumanGPT version" labels: read out by screen readers, and shown as tags
   when the script doesn't run and both texts are stacked. */
.js .uc-tag {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html:not(.js) .uc-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html:not(.js) .uc-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-fill);
}

html:not(.js) .uc-after .uc-tag::before {
  background: var(--green-fill);
}

html:not(.js) .uc-before {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line-strong);
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 1;
}

html:not(.js) .uc-tell::before {
  opacity: 1;
  transform: none;
}

.uc-demo[data-state="before"] .uc-before,
.uc-demo[data-state="scan"] .uc-before {
  opacity: 1;
}

.uc-demo[data-state="morph"] .uc-before {
  transition: opacity 0.35s ease;
}

.uc-demo[data-state]:not(.is-static) .uc-after,
.uc-demo.is-static:not([data-state="after"]) .uc-after {
  opacity: 0;
}

.uc-demo.is-static .uc-after-anim {
  display: none;
}

.uc-after-anim,
.uc-after-anim .w {
  opacity: 0;
}

.uc-demo[data-state="morph"] .uc-after-anim,
.uc-demo[data-state="after"] .uc-after-anim {
  opacity: 1;
}

.uc-demo[data-state="morph"] .uc-after-anim .w,
.uc-demo[data-state="after"] .uc-after-anim .w {
  opacity: 1;
  transition: opacity 0.35s ease calc(150ms + var(--w) * var(--step, 30ms));
}

.uc-after-anim .uc-kept {
  background-color: transparent;
}

.uc-demo[data-state="morph"] .uc-after-anim .uc-kept,
.uc-demo[data-state="after"] .uc-after-anim .uc-kept {
  background-color: var(--green-soft);
  transition: background-color 0.35s ease calc(150ms + var(--w, 0) * var(--step, 30ms));
}

.uc-tell {
  position: relative;
  padding: 0;
  background: none;
  color: inherit;
  white-space: nowrap;
}

.uc-tell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.06em -0.1em;
  border-radius: 4px;
  background: var(--red-soft);
  box-shadow: inset 0 -2px 0 var(--red-fill);
  opacity: 0;
  transform: scaleX(0.25);
  transform-origin: left center;
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.uc-tell.is-lit::before {
  opacity: 1;
  transform: none;
}

.uc-kept {
  padding: 0.04em 0.14em;
  border-radius: 4px;
  background: var(--green-soft);
  white-space: nowrap;
}

.uc-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, -100%, 0);
  background: linear-gradient(to bottom, transparent calc(100% - 72px), color-mix(in srgb, var(--blue) 8%, transparent) calc(100% - 3px), color-mix(in srgb, var(--blue) 55%, transparent) calc(100% - 2px), transparent);
}

.uc-demo[data-state="morph"] .uc-sweep {
  animation: uc-sweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes uc-sweep {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  15%,
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

.uc-demo-foot {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.uc-chips-label {
  display: inline-grid;
  justify-self: start;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.uc-chips-label > span {
  grid-area: 1 / 1;
  transition: opacity 0.14s ease;
}

.uc-chips-label [data-l="found"],
.uc-demo:is([data-state="before"], [data-state="scan"], [data-state="morph"]) .uc-chips-label [data-l="fixed"] {
  opacity: 0;
}

.uc-demo:is([data-state="before"], [data-state="scan"], [data-state="morph"]) .uc-chips-label [data-l="found"],
.uc-demo[data-state="after"] .uc-chips-label [data-l="fixed"] {
  opacity: 1;
  transition: opacity 0.25s ease 0.12s;
}

.uc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-chips li {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-size: 0.8rem;
  font-weight: 600;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1.3);
}

.uc-demo:is([data-state="before"], [data-state="scan"], [data-state="morph"]) .uc-chips li {
  background: var(--red-soft);
  color: var(--red);
}

.uc-demo[data-state] .uc-chips li:not(.is-on) {
  opacity: 0;
  transform: scale(0.85);
}

.uc-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.uc-kept-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--green);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.uc-kept-line svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.uc-demo[data-state]:not([data-state="after"]) .uc-kept-line {
  opacity: 0;
  transform: translate3d(0, 4px, 0);
}

.uc-replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--bg-elev);
  color: var(--blue-ink);
  font: 600 0.88rem/1 var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.uc-replay:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.uc-replay:focus-visible {
  border-radius: var(--radius-btn);
}

.uc-replay svg {
  width: 16px;
  height: 16px;
}

html:not(.js) .uc-replay {
  display: none;
}

/* Resets between runs happen without transitions. */
.uc-demo.no-anim,
.uc-demo.no-anim *,
.uc-demo.no-anim *::before,
.uc-demo.no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* Student assignments */
.uc-school {
  display: grid;
  gap: 22px;
  margin-top: clamp(32px, 5vw, 56px);
}

.uc-school-head {
  max-width: 42rem;
}

.uc-school-head h3 {
  margin-bottom: 8px;
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.7rem);
}

.uc-school-head p {
  margin: 0;
  color: var(--ink-2);
}

.uc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uc-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px 20px;
}

.uc-card .icon-tile {
  margin-bottom: 8px;
}

.uc-card h4 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.uc-card > p {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.uc-flip {
  display: grid;
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Cards in one row share their row heights, so descriptions and example boxes line up. */
@supports (grid-template-rows: subgrid) {
  .uc-card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 6px;
  }

  .uc-flip {
    margin-top: 0;
  }
}

.uc-flip > div {
  grid-area: 1 / 1;
}

.uc-flip p {
  margin: 0;
}

.uc-flip-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.uc-flip-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-fill);
}

.uc-flip-b .uc-flip-tag::before {
  background: var(--green-fill);
}

.uc-flip-a {
  opacity: 0;
}

.js .uc-card .uc-flip-a {
  opacity: 1;
}

.js .uc-card .uc-flip-b {
  opacity: 0;
}

.js .uc-card.is-visible .uc-flip-a {
  opacity: 0;
  transition: opacity 0.4s ease calc(1.2s + var(--i, 0) * 0.3s);
}

.js .uc-card.is-visible .uc-flip-b {
  opacity: 1;
  transition: opacity 0.5s ease calc(1.3s + var(--i, 0) * 0.3s);
}

.uc-notes {
  display: grid;
  gap: 12px;
}

@media (min-width: 860px) {
  .uc-notes {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  }
}

.uc-note,
.uc-rule {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  line-height: 1.5;
}

.uc-note {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  color: var(--ink-2);
}

.uc-note strong {
  color: var(--ink);
}

.uc-rule {
  align-items: center;
  border: 1px solid var(--blue-soft-2);
  background: var(--blue-soft);
  color: var(--ink);
  font-weight: 650;
}

.uc-note svg,
.uc-rule svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--blue);
}

.uc-cta {
  display: grid;
  justify-items: center;
  gap: 14px;
  margin-top: clamp(40px, 6vw, 60px);
  text-align: center;
}

.uc-cta .fine {
  max-width: 34em;
}

@media (max-width: 420px) {
  .uc-cta .btn {
    width: 100%;
    gap: 6px;
    padding-inline: 12px;
    font-size: 1rem;
  }

  .uc-cta .btn svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-color-scheme: dark) {
  .uc-progress > span {
    background: var(--link);
  }

  .uc-tab[aria-selected="true"] {
    box-shadow: inset 0 0 0 1.5px var(--link);
  }

  .uc-note svg,
  .uc-rule svg {
    color: var(--link);
  }
}

/* Scroll reveal for the use-case section */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  padding: 26px 24px 28px;
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
}

.step-top svg {
  width: 28px;
  height: 28px;
  color: var(--ink-3);
}

.step h3 {
  margin-bottom: 8px;
}

.step p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
}

/* ---------- Features ---------- */
.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature-wide {
    grid-column: span 2;
  }
}

@media (min-width: 720px) and (max-width: 1039px) {
  .feature-fill {
    grid-column: span 2;
  }
}

@media (min-width: 1040px) {
  .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.feature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px;
}

.feature h3 {
  margin-bottom: 8px;
}

.feature p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1rem;
}

.feature p + p {
  margin-top: 0.75em;
}

.wide-inner {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 900px) {
  .wide-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 36px;
  }
}

.pro-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 700 0.68rem/1.2 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 0.25em;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.chips li {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.4;
}

.chips li.is-pro {
  border-color: var(--blue-soft-2);
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.chips-label {
  display: block;
  margin: 16px 0 -6px;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.estimate-demo {
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.estimate-demo figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.estimate-demo p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.85;
}

.tap-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.88rem;
  box-shadow: var(--shadow-sm);
}

.tap-hint svg {
  width: 16px;
  height: 16px;
  color: var(--blue);
}

.voice-demo {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}

.voice-demo figcaption {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.voice-demo figcaption span:last-child {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
}

.voice-demo p {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
}

.mini-diff {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 0.98rem;
  line-height: 1.7;
}

.check-list {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--green-soft);
  color: var(--ink);
}

.check-list li.warn {
  background: var(--amber-soft);
}

.check-list svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--green);
}

.check-list li.warn svg {
  color: var(--amber);
}

/* ---------- Pattern groups ---------- */
.pattern-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 16px;
}

.pgroup {
  padding: 24px 24px 20px;
}

.pgroup h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.12rem;
}

.pgroup-letter {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-size: 0.95rem;
  font-weight: 800;
}

.pgroup ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 2.1em;
  color: var(--ink-2);
  font-size: 0.97rem;
}

.pgroup li::marker {
  color: var(--ink-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.source-note {
  margin: 28px 0 0;
  color: var(--ink-3);
  font-size: 0.95rem;
}

/* ---------- Pricing ---------- */
.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

@media (min-width: 820px) {
  .plans {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 4vw, 36px);
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.plan h3 {
  margin: 0;
  font-size: 1.6rem;
}

.plan-tag {
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--ink-2);
  font-size: 0.8rem;
  font-weight: 650;
  white-space: nowrap;
}

.plan-price {
  margin: 0;
  font-size: clamp(2.4rem, 2rem + 1.6vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
}

.plan-unit {
  margin: 8px 0 0;
  color: var(--ink-2);
}

.plan-list {
  display: grid;
  gap: 11px;
  margin: 24px 0 28px;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.plan-list li {
  position: relative;
  padding-left: 30px;
}

.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 20px;
  height: 20px;
  background-color: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.plan .btn {
  margin-top: auto;
}

.plan-note {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.plan-pro {
  border: 2px solid var(--blue);
  box-shadow: var(--shadow-lg);
}

.plan-pro .plan-tag {
  background: var(--blue);
  color: #fff;
}

.plan-pro .plan-list li::before {
  background-color: var(--blue);
}

@media (prefers-color-scheme: dark) {
  .plan-pro .plan-list li::before {
    background-color: var(--link);
  }
}

.price-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 12px;
  margin: 4px 0 0;
}

.price-option {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.price-option.best {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.price-option h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 700;
}

.price-option .badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.price-option .amount {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.price-option .amount small {
  color: var(--ink-2);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
}

.price-option .sub {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 0.9rem;
  line-height: 1.45;
}

.plans-fine {
  max-width: 64rem;
  margin: 28px 0 0;
  color: var(--ink-3);
  font-size: 0.92rem;
}

/* ---------- Responsible use ---------- */
.notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: clamp(26px, 4vw, 44px);
  border: 1px solid var(--blue-soft-2);
  border-radius: var(--radius-lg);
  background: var(--blue-soft);
}

@media (min-width: 720px) {
  .notice {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 28px;
  }
}

.notice-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--blue);
  color: #fff;
}

.notice-icon svg {
  width: 28px;
  height: 28px;
}

.notice h2 {
  margin-bottom: 12px;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
}

.notice .rule-line {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 700;
}

.notice p {
  max-width: 44em;
  color: var(--ink-2);
}

.notice p:last-child {
  margin-bottom: 0;
}

/* ---------- FAQ ---------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .faq-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
    gap: 64px;
    align-items: start;
  }

  .faq-layout .section-head {
    position: sticky;
    top: calc(var(--header-h) + 32px);
  }
}

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

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

.faq summary {
  position: relative;
  padding: 20px 52px 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 620;
  line-height: 1.4;
}

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

.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background-color: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--blue);
}

.faq summary:hover {
  color: var(--link);
}

.faq .answer {
  max-width: 46em;
  padding: 0 0 22px;
  color: var(--ink-2);
}

.faq .answer p:last-child {
  margin-bottom: 0;
}

/* ---------- Closing call to action ---------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(44px, 7vw, 84px) clamp(22px, 5vw, 64px);
  border: 1px solid var(--blue-soft-2);
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg, var(--blue-soft), var(--bg-elev) 75%);
  text-align: center;
}

.cta-band h2 {
  max-width: 16em;
  margin-inline: auto;
}

.cta-band p {
  max-width: 34em;
  margin: 0 auto 28px;
  color: var(--ink-2);
  font-size: 1.12rem;
}

.cta-band .cta-row {
  justify-content: center;
  margin-bottom: 14px;
}

.cta-band .fine {
  margin: 0 auto;
  font-size: 0.9rem;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 52px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 760px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.footer-about p {
  max-width: 26em;
  margin: 12px 0 0;
}

.footer-col h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-col ul {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink-2);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--link);
  text-decoration: underline;
}

.footer-col a[aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.footer-legal {
  display: grid;
  gap: 8px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.86rem;
}

.footer-legal p {
  margin: 0;
}

.footer-legal.solo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.footer-legal a {
  color: var(--ink-2);
}

/* ---------- Document pages (privacy, terms, support) ---------- */
.doc-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(40px, 7vw, 76px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--blue-soft), var(--bg));
}

.doc-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.doc-hero .lead {
  margin-bottom: 18px;
}

.doc-hero .quick-links {
  margin-top: 30px;
}

.doc-meta {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.92rem;
}

.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(64px, 9vw, 112px);
}

@media (min-width: 1000px) {
  .doc-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 64px;
  }

  .toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
  }
}

.toc {
  font-size: 0.93rem;
}

.toc h2 {
  margin: 0 0 10px;
  color: var(--ink-3);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toc ol {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc a {
  display: block;
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--ink-2);
  line-height: 1.35;
  text-decoration: none;
}

.toc a:hover {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

@media (max-width: 999px) {
  .toc {
    padding: 18px 18px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-soft);
  }

  .toc ol {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    column-gap: 8px;
  }
}

.prose {
  max-width: 47rem;
  min-width: 0;
}

.prose > :first-child {
  margin-top: 0;
}

.prose h2 {
  margin: 2.3em 0 0.6em;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.85rem);
  line-height: 1.2;
}

.prose section:first-of-type > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin: 1.8em 0 0.5em;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0;
}

.prose p,
.prose li {
  color: var(--ink-2);
}

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

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li {
  margin: 0.4em 0;
}

.prose li::marker {
  color: var(--ink-3);
}

.summary-box {
  margin: 0 0 8px;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--blue-soft-2);
  border-radius: var(--radius-lg);
  background: var(--blue-soft);
}

.summary-box h2 {
  margin: 0 0 12px !important;
  font-size: 1.3rem;
}

.summary-box ul {
  margin: 0;
}

.summary-box li {
  color: var(--ink);
}

.table-scroll {
  overflow-x: auto;
  margin: 1.2em 0 1.6em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.table-scroll table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.table-scroll th,
.table-scroll td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  text-align: left;
  vertical-align: top;
}

.table-scroll th {
  color: var(--ink);
  font-weight: 650;
  background: var(--bg-soft);
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

.table-scroll td:first-child {
  color: var(--ink);
  font-weight: 600;
}

.table-compact table {
  min-width: 0;
}

@media (max-width: 560px) {
  .table-compact th,
  .table-compact td {
    padding: 10px;
  }

  .table-stack table,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td {
    display: block;
    min-width: 0;
  }

  .table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .table-stack tr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }

  .table-stack tr:last-child {
    border-bottom: 0;
  }

  .table-stack td {
    padding: 2px 0;
    border: 0;
  }

  .table-stack td:first-child {
    margin-bottom: 4px;
  }

  .table-stack td:not(:first-child)::before {
    content: attr(data-label) ": ";
    color: var(--ink-3);
    font-weight: 600;
  }
}

.placeholder {
  padding: 0.05em 0.3em;
  border-radius: 4px;
  background: var(--amber-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.callout {
  margin: 1.4em 0;
  padding: 16px 18px;
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--blue-soft);
}

.callout p {
  color: var(--ink);
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout-warn {
  border-left-color: var(--amber-fill);
  background: var(--amber-soft);
}

/* Support page */
.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quick-links a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.quick-links a:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.quick-links svg {
  width: 26px;
  height: 26px;
  margin-bottom: 8px;
  color: var(--blue);
}

@media (prefers-color-scheme: dark) {
  .quick-links svg {
    color: var(--link);
  }
}

.quick-links strong {
  font-size: 1.05rem;
}

.quick-links span {
  color: var(--ink-2);
  font-size: 0.93rem;
  line-height: 1.45;
}

.numbered {
  counter-reset: n;
  list-style: none;
  padding-left: 0 !important;
}

.numbered > li {
  position: relative;
  min-height: 32px;
  margin: 0.9em 0;
  padding-left: 46px;
  counter-increment: n;
}

.numbered > li::before {
  content: counter(n);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
}

.issue-list {
  display: grid;
  gap: 12px;
  margin: 1.2em 0;
}

.issue {
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
}

.issue dt {
  margin-bottom: 4px;
  color: var(--ink);
  font-weight: 700;
}

.issue dd {
  margin: 0;
  color: var(--ink-2);
}

.contact-card {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin: 1.2em 0;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--blue-soft-2);
  border-radius: var(--radius-lg);
  background: var(--blue-soft);
}

.contact-card p {
  margin: 0;
  color: var(--ink-2);
}

.contact-card .btn {
  word-break: break-word;
}

/* ---------- 404 ---------- */
.not-found {
  display: grid;
  place-items: center;
  padding-block: clamp(64px, 12vw, 140px);
  text-align: center;
}

.not-found .code {
  margin: 0 0 8px;
  color: var(--blue);
  font-size: clamp(4rem, 3rem + 6vw, 7.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

@media (prefers-color-scheme: dark) {
  .not-found .code {
    color: var(--link);
  }
}

.not-found h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.not-found .diff-demo {
  max-width: 36em;
  margin: 8px auto 32px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  font-size: 1.05rem;
  line-height: 1.75;
  text-align: left;
}

.not-found .cta-row {
  justify-content: center;
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero::after {
    animation: none;
  }

  /* The use-case section shows its finished state without motion. */
  .js .reveal,
  .js .uc-say,
  .js .uc-fix {
    opacity: 1;
    transform: none;
  }

  .js .uc-card .uc-flip-a {
    opacity: 0;
  }

  .js .uc-card .uc-flip-b {
    opacity: 1;
  }
}

/* ---------- Print ---------- */
@media print {
  .site-header,
  .site-footer,
  .toc,
  .skip-link {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .doc-layout {
    display: block;
  }
}

/* ---------- Compare pages (HumanGPT vs <competitor>) ----------
   Used by /compare/*.html (for example compare/zerogpt.html) and the /compare hub.
   The comparison table turns into stacked cards under 640px. Its rows carry explicit
   ARIA roles so screen readers keep the table semantics when the layout changes.
   Marks (Yes, Partly, No, Not stated) always show a text label; the icon is decoration.
   Competitor marks never use red: "No" and "Not stated" are neutral gray. */

.cmp-wrap {
  max-width: calc(1000px + 2 * var(--gutter));
}

.cmp-hero {
  padding-top: clamp(24px, 4vw, 40px);
  padding-bottom: clamp(36px, 5vw, 56px);
}

.cmp-hero h1 {
  max-width: 19em;
  font-size: clamp(2.15rem, 1.45rem + 3vw, 3.4rem);
}

.cmp-hero h1 .h1-sub {
  display: block;
  margin-top: 0.3em;
  color: var(--ink-2);
  font-size: 0.52em;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.cmp-hero .lead {
  max-width: 40em;
  margin-bottom: 20px;
}

/* Breadcrumb */
.breadcrumb {
  margin: 0 0 clamp(18px, 3vw, 28px);
  font-size: 0.9rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--ink-3);
}

.breadcrumb li + li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0 6px;
  background-color: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.breadcrumb a {
  color: var(--ink-2);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--link);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* "Last checked" line */
.cmp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: 0.92rem;
}

.cmp-meta li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.cmp-meta svg {
  flex: none;
  width: 17px;
  height: 17px;
}

/* Source reference: a small numbered badge after a claim, linking to the sources list.
   Badges are inline. The word joiner in ::before keeps a badge on the same line as the
   word before it, so a badge never starts a line like a list number. In the narrow columns
   of the hub matrix, a zero-width space after a badge that another badge follows lets a
   run of badges wrap between badges instead of splitting one. */
.cite {
  display: inline;
  margin-left: 3px;
  padding: 0.1em 0.42em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ink-3) 14%, transparent);
  color: var(--ink-2);
  font-size: 0.7em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-decoration: none;
  vertical-align: 0.35em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.cite::before {
  content: "\2060";
}

.cite + .cite {
  margin-left: 2px;
}

@media (min-width: 1001px) {
  .hub-matrix td .cite:has(+ .cite)::after {
    content: "\200B";
  }
}

.cite:hover {
  background: var(--blue-soft-2);
  color: var(--blue-ink);
}

/* Verdict box */
.verdict {
  margin-top: clamp(28px, 4vw, 40px);
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow);
}

.verdict > h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  letter-spacing: -0.015em;
}

.verdict-note {
  margin: 0 0 18px;
  color: var(--ink-2);
}

.verdict-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 720px) {
  .verdict-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.verdict-col {
  display: flex;
  flex-direction: column;
  padding: 20px 22px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.verdict-col.is-us {
  border-color: var(--blue-soft-2);
  background: var(--blue-soft);
}

.verdict-col h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
}

.verdict-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 0.98rem;
  line-height: 1.5;
}

.verdict-list li {
  position: relative;
  padding-left: 28px;
}

.verdict-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 19px;
  height: 19px;
  background-color: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.verdict-col.is-us .verdict-list li::before {
  background-color: var(--blue);
}

.verdict-col .btn {
  align-self: flex-start;
  margin-top: 20px;
}

@media (max-width: 480px) {
  .verdict {
    padding: 18px 14px 14px;
  }

  .verdict > h2,
  .verdict-note {
    padding-inline: 4px;
  }

  .verdict-col {
    padding: 18px 16px;
  }

  .verdict-col .btn {
    align-self: stretch;
  }
}

/* "On this page" jump links */
.cmp-jump {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.cmp-jump ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
}

.cmp-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.cmp-jump a:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-ink);
}

/* On phones the jump links become one scrollable row. */
@media (max-width: 639px) {
  .cmp-jump .wrap {
    padding-inline: 0;
  }

  .cmp-jump ol {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
    padding: 12px var(--gutter);
  }

  .cmp-jump > .wrap {
    overflow-x: auto;
    scrollbar-width: none;
    background:
      linear-gradient(to right, var(--bg) 40%, transparent) left / 28px 100% no-repeat local,
      linear-gradient(to left, var(--bg) 40%, transparent) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right / 14px 100% no-repeat scroll;
  }

  .cmp-jump > .wrap::-webkit-scrollbar {
    display: none;
  }
}

/* Sections */
.cmp-section {
  padding: clamp(48px, 7vw, 80px) 0;
}

.cmp-section:not(.section-soft) + .cmp-section-line {
  padding-top: 0;
}

.cmp-section:not(.section-soft) + .cmp-section-line > .wrap::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: clamp(48px, 7vw, 80px);
  background: var(--line);
}

.cmp-section h2 {
  margin-bottom: 0.45em;
  font-size: clamp(1.65rem, 1.25rem + 1.5vw, 2.25rem);
}

.cmp-intro {
  max-width: 44em;
  margin-bottom: clamp(22px, 3vw, 30px);
  color: var(--ink-2);
  font-size: 1.08rem;
}

.cmp-prose {
  max-width: 46em;
}

.cmp-prose p {
  color: var(--ink-2);
}

.cmp-fine {
  margin: 18px 0 0;
  color: var(--ink-3);
  font-size: 0.9rem;
}

/* Legend for the marks, under the table */
.cmp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-3);
  font-size: 0.9rem;
}

.cmp-legend li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Marks: Yes / Partly / No / Not stated, always with their text label */
.mark {
  --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 4px 2px 0;
  padding: 1px 8px 1px 5px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 0.06em;
}

.mark::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--mark-icon) center / contain no-repeat;
  mask: var(--mark-icon) center / contain no-repeat;
}

.mark-yes {
  background: var(--green-soft);
  color: var(--green);
}

.mark-partial {
  --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
  background: var(--amber-soft);
  color: var(--amber);
}

.mark-no {
  --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  background: var(--bg-sunk);
  color: var(--ink-2);
}

.mark-unknown {
  --mark-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9.2a3 3 0 1 1 4.2 2.8c-.8.4-1.2 1-1.2 1.8v.6'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");
  background: var(--bg-sunk);
  color: var(--ink-3);
}

/* Comparison table */
.cmp-table table {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  font-size: 0.96rem;
  line-height: 1.5;
  table-layout: fixed;
}

.cmp-table col.cmp-col-feature {
  width: 23%;
}

.cmp-table th,
.cmp-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.cmp-table td {
  color: var(--ink-2);
}

.cmp-table tbody th {
  color: var(--ink);
  font-weight: 650;
}

.cmp-table tbody tr:last-child > * {
  border-bottom: 0;
}

.cmp-table .cmp-us {
  background: color-mix(in srgb, var(--blue-soft) 55%, var(--bg-elev));
}

.cmp-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 14px;
  border-bottom-color: var(--line-strong);
  background: var(--bg-elev);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
}

.cmp-table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
  color: var(--ink-3);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp-table thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.cmp-table thead th.cmp-us {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.cmp-table tbody tr:last-child > :first-child {
  border-bottom-left-radius: var(--radius-lg);
}

.cmp-table tbody tr:last-child > :last-child {
  border-bottom-right-radius: var(--radius-lg);
}

.cmp-th-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cmp-th-brand svg {
  flex: none;
  width: 22px;
  height: 22px;
}

@media (min-width: 861px) {
  .cmp-table thead th {
    top: var(--header-h);
  }
}

/* Under 640px every row becomes a card: the feature on top, then one block per product. */
@media (max-width: 639px) {
  .cmp-table table,
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table th,
  .cmp-table td {
    display: block;
    width: auto;
  }

  .cmp-table table {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    table-layout: auto;
  }

  .cmp-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .cmp-table tbody {
    display: grid;
    gap: 12px;
  }

  .cmp-table tbody tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elev);
    box-shadow: var(--shadow-sm);
  }

  .cmp-table tbody th {
    padding: 13px 16px 11px;
    border-bottom: 1px solid var(--line);
    font-size: 1.02rem;
  }

  .cmp-table td {
    padding: 11px 16px 13px;
  }

  .cmp-table td + td {
    border-top: 1px solid var(--line);
  }

  .cmp-table tbody tr > *,
  .cmp-table tbody tr:last-child > * {
    border-bottom-width: 0;
    border-radius: 0;
  }

  .cmp-table tbody th {
    border-bottom-width: 1px;
  }

  .cmp-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--ink-3);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .cmp-table td.cmp-us::before {
    color: var(--blue-ink);
  }
}

/* Strengths and differences */
.cmp-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-point {
  padding: 22px 24px 24px;
}

.cmp-point h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.cmp-point p {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.99rem;
}

/* Rewriting example (reuses .sample-pair, .sample-card and .fix-chips from the home page) */
.cmp-example {
  margin: clamp(26px, 4vw, 38px) 0 0;
}

.cmp-example-title {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 700;
}

.cmp-example .sample-head h3 {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cmp-example .sample-fixes + .sample-fixes {
  margin-top: 0;
}

.cmp-kept .fix-chips li {
  background: var(--green-soft);
  color: var(--green);
}

.cmp-example-note {
  margin: 14px 0 0;
  color: var(--ink-3);
  font-size: 0.9rem;
}

/* Pricing compared */
.cmp-prices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

@media (min-width: 760px) {
  .cmp-prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cmp-price {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 28px);
}

.cmp-price.is-us {
  border-color: var(--blue-soft-2);
}

.cmp-price h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.cmp-price-list {
  display: grid;
  margin: 0 0 14px;
}

.cmp-price-list > div {
  display: grid;
  grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr);
  gap: 2px 16px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}

.cmp-price-list dt {
  color: var(--ink);
  font-weight: 650;
}

.cmp-price-list dd {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

.cmp-price-list .amount {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 1.12rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

@media (max-width: 420px) {
  .cmp-price-list > div {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cmp-price-src {
  margin: auto 0 0;
  color: var(--ink-3);
  font-size: 0.88rem;
}

/* Sources and disclaimer */
.cmp-sources {
  display: grid;
  gap: 12px;
  max-width: 46em;
  margin: 0;
  padding-left: 1.7em;
  color: var(--ink-2);
}

.cmp-sources li {
  padding: 2px 6px;
  border-radius: 8px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.cmp-sources li::marker {
  color: var(--ink-3);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cmp-sources li:target {
  background: var(--blue-soft);
}

.cmp-sources a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* External-link arrow: an inline box (a word joiner plus padding) so it never wraps onto a line by itself. */
.cmp-sources a[target="_blank"]::after {
  content: "\2060";
  margin-left: 4px;
  padding-left: 0.8em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 0.8em 0.8em no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16L17 7M9 7h8v8'/%3E%3C/svg%3E") center / 0.8em 0.8em no-repeat;
}

.cmp-src-meta {
  display: block;
  color: var(--ink-3);
  font-size: 0.86rem;
}

.cmp-disclaimer {
  max-width: 46em;
  margin-top: clamp(28px, 4vw, 40px);
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
  color: var(--ink-2);
  font-size: 0.92rem;
}

.cmp-section .cmp-disclaimer h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cmp-disclaimer p {
  margin: 0 0 0.7em;
}

.cmp-disclaimer p:last-child {
  margin-bottom: 0;
}

/* Other comparisons */
.cmp-more {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 10px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.cmp-more a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  height: 100%;
  padding: 16px 44px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cmp-more a::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -9px;
  width: 18px;
  height: 18px;
  background-color: var(--ink-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cmp-more a:hover {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.cmp-more a:hover::after {
  background-color: var(--blue);
}

.cmp-more .cmp-more-all {
  border-style: dashed;
  color: var(--link);
}

.cmp-cta {
  padding-top: 0;
}

@media (prefers-color-scheme: dark) {
  .verdict-col.is-us .verdict-list li::before,
  .cmp-more a:hover::after {
    background-color: var(--link);
  }

  .cmp-table .cmp-us {
    background: color-mix(in srgb, var(--blue-soft) 45%, var(--bg-elev));
  }
}

@media print {
  .cmp-jump,
  .cmp-cta {
    display: none !important;
  }

  .cmp-table thead th {
    position: static;
  }
}

/* Short description under each "Other comparisons" link */
.cmp-more-kind {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- Compare hub (/compare) ----------
   compare.html: an overview matrix of every compared tool, then link cards by type.
   The matrix is a table above 1000px and one card per tool at 1000px and below (six
   columns get too narrow below that). Its rows
   keep explicit ARIA roles so screen readers keep the table semantics in card layout. */

.hub-matrix table {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  box-shadow: var(--shadow-sm);
  font-size: 0.9rem;
  line-height: 1.45;
  table-layout: fixed;
}

.hub-matrix col.hub-col-tool {
  width: 19%;
}

.hub-matrix th,
.hub-matrix td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}

.hub-matrix td {
  color: var(--ink-2);
}

.hub-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 12px;
  border-bottom-color: var(--line-strong);
  background: var(--bg-elev);
  color: var(--ink-3);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hub-matrix tbody th {
  color: var(--ink);
  font-weight: 650;
}

.hub-matrix tbody th > a {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.hub-matrix tbody th > a:hover {
  color: var(--link);
  text-decoration: underline;
}

.hub-kind {
  display: block;
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.4;
}

.hub-us-tag {
  display: inline-block;
  margin-left: 7px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--blue-soft-2);
  color: var(--blue-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.hub-matrix tr.is-us > * {
  background: color-mix(in srgb, var(--blue-soft) 55%, var(--bg-elev));
}

.hub-matrix tr.is-us th > a {
  color: var(--blue-ink);
}

@media (min-width: 1001px) {
  .hub-matrix thead th {
    top: var(--header-h);
  }

  .hub-matrix thead th:first-child {
    border-top-left-radius: var(--radius-lg);
  }

  .hub-matrix thead th:last-child {
    border-top-right-radius: var(--radius-lg);
  }

  .hub-matrix tbody tr:last-child > * {
    border-bottom: 0;
  }

  .hub-matrix tbody tr:last-child > :first-child {
    border-bottom-left-radius: var(--radius-lg);
  }

  .hub-matrix tbody tr:last-child > :last-child {
    border-bottom-right-radius: var(--radius-lg);
  }
}

@media (max-width: 1000px) {
  .hub-matrix table,
  .hub-matrix tbody,
  .hub-matrix tr,
  .hub-matrix th,
  .hub-matrix td {
    display: block;
    width: auto;
  }

  .hub-matrix table {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-size: 0.95rem;
    table-layout: auto;
  }

  .hub-matrix thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .hub-matrix tbody {
    display: grid;
    gap: 12px;
  }

  .hub-matrix tbody tr {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg-elev);
    box-shadow: var(--shadow-sm);
  }

  .hub-matrix tbody tr.is-us {
    border-color: var(--blue-soft-2);
  }

  .hub-matrix tbody th {
    padding: 14px 16px 12px;
    border-bottom: 0;
  }

  .hub-matrix td {
    padding: 10px 16px 12px;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }

  .hub-matrix td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink-3);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }
}

/* Tablets: two data blocks side by side inside each tool card */
@media (min-width: 560px) and (max-width: 1000px) {
  .hub-matrix tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-matrix tbody th {
    grid-column: 1 / -1;
  }

  .hub-matrix td:nth-of-type(even) {
    border-left: 1px solid var(--line);
  }

  .hub-matrix td:last-child:nth-of-type(odd) {
    grid-column: 1 / -1;
  }
}

/* Comparison cards, grouped by tool type */
.hub-group + .hub-group {
  margin-top: clamp(32px, 5vw, 48px);
}

.hub-group > h3 {
  margin: 0 0 6px;
  font-size: 1.3rem;
}

.hub-group > p {
  max-width: 44em;
  margin: 0 0 16px;
  color: var(--ink-2);
}

.hub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  transition: border-color 0.15s ease;
}

.hub-card h4 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.hub-card h4 a {
  color: var(--ink);
  text-decoration: none;
}

/* The title link covers the whole card; source badges sit above it and stay clickable. */
.hub-card h4 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.hub-card .cite {
  position: relative;
  z-index: 1;
}

.hub-card p {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 0.97rem;
}

.hub-card-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
  color: var(--link);
  font-size: 0.92rem;
  font-weight: 600;
}

.hub-card-go::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hub-card:hover,
.hub-card:focus-within {
  border-color: var(--blue);
}

.hub-card:hover h4 a {
  color: var(--blue-ink);
}

@media (prefers-color-scheme: dark) {
  .hub-matrix tr.is-us > * {
    background: color-mix(in srgb, var(--blue-soft) 45%, var(--bg-elev));
  }
}

@media print {
  .hub-matrix thead th {
    position: static;
  }
}