/* Text Humanize design system: bright and colourful.
   Type: Geist and Geist Mono, self-hosted (SIL Open Font License, see /fonts).
   Colour: brand blue plus pastel tints (sky, mint, amber, rose, teal) for icons, tags and tiles.
   Shape rule: buttons, chips and tags are pills; cards and panels 20px; icon tiles 14px; inputs 12px.
   Light theme only, by brand choice. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --bg-soft: #f5f7fc;
  --surface: #ffffff;
  --ink: #0f172a;
  --ink-2: #334155;
  --muted: #5b6477;
  --line: #e5e9f2;
  --line-strong: #d2d8e5;

  --brand: #2355e8;
  --brand-hover: #1b45c7;
  --brand-soft: #edf2ff;
  --brand-soft-2: #dbe4ff;
  --brand-ink: #1a3fb0;

  --sky: #e3f3fd;   --sky-ink: #0b6aa2;
  --mint: #e2f7ee;  --mint-ink: #0a7a4f;
  --amber: #fff2d4; --amber-ink: #9a5b00;
  --rose: #ffe7ed;  --rose-ink: #b4234d;
  --teal: #dff6f5;  --teal-ink: #0f766e;

  --success: var(--mint-ink);  --success-soft: var(--mint);
  --warn: var(--amber-ink);    --warn-soft: var(--amber);
  --danger: var(--rose-ink);   --danger-soft: var(--rose);

  --focus: 0 0 0 3px rgb(35 85 232 / 35%);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 6%);
  --shadow-card: 0 1px 2px rgb(15 23 42 / 5%), 0 12px 32px -16px rgb(15 23 42 / 16%);
  --shadow-lift: 0 2px 4px rgb(15 23 42 / 5%), 0 22px 44px -18px rgb(15 23 42 / 22%);
  --shadow-tool: 0 2px 6px rgb(15 23 42 / 6%), 0 36px 72px -32px rgb(35 85 232 / 38%);

  --r-input: 12px;
  --r-tile: 14px;
  --r-card: 20px;
  --r-pill: 999px;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --container: 1160px;
  --header-h: 68px;
  color-scheme: light;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-hover); }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 1.5rem + 3vw, 3.5rem); line-height: 1.06; letter-spacing: -0.038em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -0.032em; }
h3 { font-size: 1.125rem; line-height: 1.35; letter-spacing: -0.015em; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; }
::selection { background: var(--brand-soft-2); }

.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 20px; }
@media (min-width: 768px) { .container { padding-inline: 32px; } }
.narrow { max-width: 860px; }
.center { text-align: center; }
.lede { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); font-size: 0.8125rem; }
.fineprint { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.fineprint a { font-weight: 500; }
.spaced { margin-top: 20px; }
.text-link { font-weight: 600; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.icon { width: 20px; height: 20px; flex: none; }

/* Tint utilities */
.tint-brand { background: var(--brand-soft); color: var(--brand-ink); }
.tint-sky { background: var(--sky); color: var(--sky-ink); }
.tint-mint { background: var(--mint); color: var(--mint-ink); }
.tint-amber { background: var(--amber); color: var(--amber-ink); }
.tint-rose { background: var(--rose); color: var(--rose-ink); }
.tint-teal { background: var(--teal); color: var(--teal-ink); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 0.9375rem; font-weight: 600; line-height: 1; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active:not([disabled]) { transform: translateY(1px) scale(.99); }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn .icon { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgb(35 85 232 / 25%), 0 10px 22px -10px rgb(35 85 232 / 65%); }
.btn-primary:hover:not([disabled]) { background: var(--brand-hover); color: #fff; }
.btn-secondary { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover:not([disabled]) { border-color: var(--brand); color: var(--brand-ink); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover:not([disabled]) { background: var(--bg-soft); color: var(--ink); }
.btn-white { background: #fff; color: var(--brand-ink); box-shadow: 0 10px 24px -12px rgb(15 23 42 / 45%); }
.btn-white:hover { background: #eef3ff; color: var(--brand-ink); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 0.875rem; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill); background: none;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.link-btn:hover:not([disabled]) { background: var(--brand-soft); color: var(--brand-ink); }
.link-btn[disabled] { opacity: .45; cursor: default; }
.link-btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-ink); }
.linklike { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgb(255 255 255 / 88%);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s;
}
.site-header.is-scrolled, .site-header.nav-open { border-bottom-color: var(--line); box-shadow: 0 6px 20px -16px rgb(15 23 42 / 30%); }
.header-inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-mark {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 10px; background: var(--brand); color: #fff; font-size: 1rem; font-weight: 800;
  box-shadow: 0 6px 14px -6px rgb(35 85 232 / 70%);
}
.brand-mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #34d399; }
.nav-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-list a:not(.btn) {
  display: block; padding: 8px 12px; border-radius: var(--r-pill);
  color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: color .15s, background-color .15s;
}
.nav-list a:not(.btn):hover { background: var(--bg-soft); color: var(--ink); }
.nav-list a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }
.header-cta { margin-left: auto; }
.nav-cta-mobile { display: none; }
.nav-toggle {
  display: none; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: auto;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; color: var(--ink); cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -20px rgb(15 23 42 / 35%); }
  .site-header.nav-open .nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 16px 18px; }
  .nav-list a:not(.btn) { padding: 12px 14px; font-size: 1rem; }
  .nav-cta-mobile { display: block; margin-top: 10px; }
  .nav-cta-mobile .btn { width: 100%; height: 48px; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden; padding: 36px 0 88px;
  background:
    radial-gradient(38% 55% at 8% 18%, rgb(35 85 232 / 13%), transparent 70%),
    radial-gradient(34% 50% at 92% 12%, rgb(52 211 153 / 18%), transparent 70%),
    radial-gradient(40% 45% at 75% 95%, rgb(251 191 36 / 16%), transparent 70%),
    radial-gradient(35% 45% at 20% 92%, rgb(244 114 182 / 10%), transparent 70%),
    linear-gradient(180deg, #f4f7ff 0%, #ffffff 85%);
}
@media (min-width: 960px) { .hero { padding: 20px 0 104px; } }
.hero-copy { max-width: 840px; margin: 0 auto 26px; text-align: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; margin-bottom: 18px; padding: 0 14px 0 5px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: rgb(255 255 255 / 85%);
  box-shadow: var(--shadow-sm); font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
}
.hero-badge .badge-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; }
.hero-badge .badge-icon .icon { width: 14px; height: 14px; }
.hero-copy h1 { margin-bottom: 14px; }
.hero-copy .lede { max-width: 760px; margin: 0 auto; }
.hl {
  color: var(--brand); padding-bottom: .1em; white-space: nowrap;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10c34-7 70-8 100-4s66 4 94-3' fill='none' stroke='%23fbbf24' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .3em;
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 6px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: rgb(255 255 255 / 80%);
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-2);
}
.chip-dot { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; }
.chip-dot .icon { width: 13px; height: 13px; stroke-width: 2.5; }
@media (max-width: 600px) {
  .hero { padding: 24px 0 64px; }
  .hero-copy { margin-bottom: 22px; }
  .chips { display: none; }
}

/* ── Humanizer tool ───────────────────────────────────────────────────────── */
.tool { position: relative; max-width: 1100px; margin: 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-tool); }
.tool-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #fbfcff, #f5f8ff);
}
.field { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.field-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.segmented { position: relative; display: inline-flex; gap: 6px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmented::-webkit-scrollbar { display: none; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented label {
  display: flex; align-items: center; height: 32px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s;
}
.segmented label:hover { border-color: var(--brand-soft-2); color: var(--brand-ink); }
.segmented input:checked + label { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 6px 14px -8px rgb(35 85 232 / 70%); }
.segmented input:focus-visible + label { box-shadow: var(--focus); }
.select {
  height: 34px; padding: 0 34px 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232355e8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink); cursor: pointer; appearance: none; -webkit-appearance: none;
}
.select:hover { border-color: var(--brand-soft-2); }
.tool-history { margin-left: auto; }
.count-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand); color: #fff; font-size: 0.6875rem; font-weight: 700; }
@media (max-width: 600px) {
  .tool-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px 12px; padding: 14px; }
  .field { flex-wrap: wrap; grid-column: 1 / -1; gap: 8px; }
  .field:has(.select) { grid-column: 1; }
  .field-label { width: 100%; }
  .segmented { flex-wrap: wrap; overflow: visible; }
  .tool-history { grid-column: 2; height: 34px; margin-left: 0; }
}

.tool-panes { display: grid; }
@media (min-width: 960px) { .tool-panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pane + .pane { border-left: 1px solid var(--line); } }
@media (max-width: 959px) { .pane + .pane { border-top: 1px solid var(--line); } }
.pane { display: flex; flex-direction: column; min-width: 0; }
.pane-output { background: linear-gradient(180deg, #f6fbf8 0%, #ffffff 160px); }
.pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 52px; padding: 10px 12px 2px 18px; }
.pane-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.pane-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.pane-icon .icon { width: 16px; height: 16px; }
.pane-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px; }
.editor, .output { flex: 1; width: 100%; min-height: 240px; padding: 8px 18px 16px; font-size: 1rem; line-height: 1.7; color: var(--ink); }
@media (min-width: 960px) { .editor, .output { min-height: 200px; max-height: 540px; } }
.editor { border: 0; background: transparent; resize: vertical; }
.editor:focus { outline: none; box-shadow: none; }
.editor::placeholder { color: #8a93a6; }
.output { overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.output:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 3px rgb(35 85 232 / 30%); }
.pane-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 6px 18px 10px; font-size: 0.8125rem; color: var(--muted); }
.count { font-variant-numeric: tabular-nums; }
.count.is-over { color: var(--danger); font-weight: 600; }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: #fff; font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-2); }
.empty-state { white-space: normal; color: var(--muted); }
.empty-state p { margin: 0 0 10px; font-weight: 600; color: var(--ink-2); }
.empty-state ol { margin: 0; padding: 0; list-style: none; counter-reset: tip; font-size: 0.875rem; }
.empty-state li { position: relative; padding-left: 30px; counter-increment: tip; }
.empty-state li + li { margin-top: 8px; }
.empty-state li::before { content: counter(tip); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-ink); font-size: 0.6875rem; font-weight: 700; }
.skeleton { display: grid; gap: 12px; padding-top: 8px; }
.skeleton span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef2fb 25%, #dfe6f7 50%, #eef2fb 75%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton span:nth-child(3n) { width: 74%; }
.skeleton span:nth-child(4n) { width: 88%; }
.status { display: inline-flex; align-items: center; gap: 8px; text-align: right; }
.spinner { display: inline-block; width: 14px; height: 14px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.tool-notice { border-width: 1px 0 0; border-radius: 0; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); background: #fbfcff; }
.stat { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--brand-soft); }
.stat:nth-child(2) { background: var(--mint); }
.stat:nth-child(3) { background: var(--amber); }
.stat:nth-child(4) { background: var(--sky); }
.stat dt { font-size: 0.75rem; color: var(--ink-2); }
.stat dd { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.feedback { position: relative; display: grid; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-2); }
.feedback-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.feedback-label { font-weight: 600; }
.feedback-options { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff;
  font: inherit; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, opacity .15s;
}
.chip-btn .icon { width: 16px; height: 16px; }
.chip-btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.chip-btn[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.feedback.is-rated [data-rating][aria-pressed="false"] { opacity: .45; }
.feedback-thanks { margin: 0; font-weight: 600; color: var(--success); }
/* Stays in the accessibility tree while empty, so the message is announced when it appears. */
.feedback-thanks:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tool-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 12px 12px 18px; border-top: 1px solid var(--line); background: linear-gradient(180deg, #ffffff, #f7f9ff); }
.run-group { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 600px) { .run-group { width: 100%; } .run-group .btn-primary { flex: 1; } .hide-sm { display: none; } }

.diff { white-space: normal; line-height: 1.9; }
.diff del, .diff-legend del { padding: 1px 3px; border-radius: 5px; background: var(--rose); color: var(--rose-ink); text-decoration: line-through; text-decoration-color: rgb(180 35 77 / 55%); }
.diff ins, .diff-legend ins { padding: 1px 3px; border-radius: 5px; background: var(--mint); color: var(--mint-ink); text-decoration: none; }
.diff-legend { display: flex; gap: 14px; margin: 0 0 10px; font-size: 0.75rem; color: var(--muted); }

/* ── Alerts, tags, toast ──────────────────────────────────────────────────── */
.alert { display: block; padding: 12px 16px; border: 1px solid transparent; border-radius: var(--r-input); font-size: 0.875rem; line-height: 1.5; }
.alert p { margin: 0 0 10px; }
.alert p:last-child { margin: 0; }
.alert-error { background: var(--rose); color: var(--rose-ink); border-color: rgb(180 35 77 / 18%); }
.alert-warn { background: var(--amber); color: var(--amber-ink); border-color: rgb(154 91 0 / 18%); }
.alert-info { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand-soft-2); }
.tool-msg { margin: 0 18px 18px; }
.tag, .tag-brand {
  display: inline-flex; align-items: center; align-self: flex-start; height: 26px; padding: 0 11px;
  border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink); font-size: 0.75rem; font-weight: 700;
}
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 80; padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff; font-size: 0.875rem; font-weight: 600; box-shadow: var(--shadow-lift);
  opacity: 0; transform: translate(-50%, 12px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── History drawer ───────────────────────────────────────────────────────── */
dialog.drawer { width: min(420px, 100%); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 0; border: 0; background: #fff; color: var(--ink); box-shadow: -20px 0 60px -30px rgb(15 23 42 / 40%); }
dialog.drawer::backdrop { background: rgb(15 23 42 / 35%); }
.drawer-inner { display: flex; flex-direction: column; height: 100%; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 16px 22px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 1.125rem; letter-spacing: -0.015em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 14px 18px; background: var(--bg-soft); }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }
.history-item { margin-bottom: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; font-size: 0.75rem; color: var(--muted); }
.history-preview { display: -webkit-box; margin: 0 0 8px; overflow: hidden; font-size: 0.875rem; color: var(--ink-2); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.history-actions { display: flex; gap: 2px; margin-left: -10px; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding-block: 88px; }
@media (min-width: 960px) { .section { padding-block: 112px; } }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 700px; margin: 0 auto 52px; text-align: center; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { margin: 0; font-size: 1.125rem; color: var(--muted); }
.kicker { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin-bottom: 16px; padding: 0 14px; border-radius: var(--r-pill); font-size: 0.8125rem; font-weight: 700; }
.icon-tile { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: var(--r-tile); }
.icon-tile .icon { width: 24px; height: 24px; }

/* How it works */
.steps { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.step-num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 50%; font-size: 1rem; font-weight: 800; }
.step h3 { margin-bottom: 6px; font-size: 1.1875rem; }
.step p { margin: 0 0 22px; color: var(--muted); }
.step-visual { margin-top: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--bg-soft); }
.mini-lines span { display: block; height: 9px; border-radius: 5px; background: #d9e1f2; }
.mini-lines span + span { margin-top: 9px; }
.mini-lines span:nth-child(2) { width: 88%; }
.mini-lines span:nth-child(3) { width: 64%; background: var(--brand-soft-2); }
.mini-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.mini-pill.on { border-color: var(--brand); background: var(--brand); color: #fff; }
.mini-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); }
.mini-checks li { display: flex; align-items: center; gap: 8px; }

/* Features */
.feature-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature { padding: 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feature h3 { margin-bottom: 8px; }
.feature p { margin: 0; color: var(--muted); }

/* Before and after */
.compare { display: grid; gap: 18px; align-items: center; }
@media (min-width: 900px) { .compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 22px; } }
.compare-card { margin: 0; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.compare-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.compare-card p { margin: 0; font-size: 1.0625rem; line-height: 1.8; color: var(--ink-2); }
.compare-card mark { padding: 1px 4px; border-radius: 6px; color: inherit; }
.compare-card mark.flag { background: var(--rose); text-decoration: line-through; text-decoration-color: rgb(180 35 77 / 50%); }
.compare-card mark.good { background: var(--mint); }
.compare-arrow { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; background: var(--brand); color: #fff; box-shadow: 0 10px 22px -10px rgb(35 85 232 / 70%); }
@media (max-width: 899px) { .compare-arrow { transform: rotate(90deg); } }
.compare-note { margin: 26px 0 0; text-align: center; font-size: 0.875rem; color: var(--muted); }

/* Use cases */
.usecases { display: grid; gap: 22px; }
@media (min-width: 700px) { .usecases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .usecases { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.usecase { padding: 28px 26px; border: 1px solid var(--line); border-radius: var(--r-card); }
.usecase h3 { margin-bottom: 8px; }
.usecase p { margin: 0; color: var(--ink-2); }
.usecase .icon-tile { background: #fff; box-shadow: var(--shadow-sm); }
.card-sky { background: linear-gradient(165deg, #e5f4fe 0%, #ffffff 80%); }
.card-mint { background: linear-gradient(165deg, #e2f7ee 0%, #ffffff 80%); }
.card-amber { background: linear-gradient(165deg, #fff1d1 0%, #ffffff 80%); }
.card-rose { background: linear-gradient(165deg, #ffe6ec 0%, #ffffff 80%); }

/* Promise */
.promise { display: grid; gap: 22px; }
@media (min-width: 860px) { .promise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.promise-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.promise-card h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 1.25rem; }
.promise-card h3 .chip-dot { width: 32px; height: 32px; }
.promise-card h3 .chip-dot .icon { width: 17px; height: 17px; }

/* Cards (guides) */
.card-grid { display: grid; gap: 22px; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card {
  display: flex; flex-direction: column; gap: 12px; height: 100%; padding: 26px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card);
  color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-4px); border-color: var(--brand-soft-2); box-shadow: var(--shadow-lift); color: inherit; }
.post-card h3 { font-size: 1.1875rem; line-height: 1.35; }
.post-card p { margin: 0; font-size: 0.9375rem; color: var(--muted); }
.post-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; font-size: 0.8125rem; color: var(--muted); }
.post-card-meta .go { font-weight: 700; color: var(--brand); }
.section-foot { margin-top: 36px; text-align: center; }

/* Guides index: topic chips and one section per category */
.guide-jump { margin-top: 26px; }
.guide-jump ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide-jump a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: #fff; box-shadow: var(--shadow-sm);
  font-size: 0.875rem; font-weight: 600; color: var(--ink-2); text-decoration: none; transition: border-color .2s ease, color .2s ease;
}
.guide-jump a:hover { border-color: var(--brand-soft-2); color: var(--brand); }
.guide-jump .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.guide-jump .dot.tint-sky { background: var(--sky-ink); }
.guide-jump .dot.tint-mint { background: var(--mint-ink); }
.guide-jump .dot.tint-amber { background: var(--amber-ink); }
.guide-jump .dot.tint-rose { background: var(--rose-ink); }
.guide-jump .count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--r-pill); background: var(--bg-soft); font-size: 0.75rem; color: var(--muted); }
.guide-group { padding-block: 56px; }
@media (min-width: 960px) { .guide-group { padding-block: 72px; } }
.guide-group-head { margin-bottom: 28px; }
.guide-group-head h2 { margin-bottom: 6px; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); }
.guide-group-head p { margin: 0; color: var(--muted); }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 820px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); transition: border-color .2s, box-shadow .2s; }
.faq details[open] { border-color: var(--brand-soft-2); box-shadow: var(--shadow-card); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 18px 24px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; border-radius: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--brand-soft); color: var(--brand); font-size: 1.25rem; font-weight: 500; line-height: 1; transition: transform .2s ease, background-color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--brand); color: #fff; }
.faq details > div { max-width: 68ch; padding: 0 24px 20px; color: var(--ink-2); }
.faq details > div > :last-child { margin-bottom: 0; }
.faq-group + .faq-group { margin-top: 56px; }
.faq-group > h2 { max-width: 820px; margin: 0 auto 18px; font-size: 1.5rem; }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; padding: 64px 28px; border-radius: 28px; text-align: center; color: #fff;
  background:
    radial-gradient(50% 120% at 100% 0%, rgb(52 211 153 / 45%), transparent 60%),
    radial-gradient(40% 90% at 0% 100%, rgb(251 191 36 / 30%), transparent 60%),
    linear-gradient(125deg, #2355e8 0%, #1d4bd6 50%, #0f6f8a 100%);
  box-shadow: 0 34px 70px -34px rgb(35 85 232 / 70%);
}
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 540px; margin: 14px auto 28px; font-size: 1.125rem; color: rgb(255 255 255 / 90%); }

/* ── Inner pages ──────────────────────────────────────────────────────────── */
.page-header {
  position: relative; overflow: hidden; padding: 48px 0 44px; border-bottom: 1px solid var(--line);
  background:
    radial-gradient(40% 90% at 95% 0%, rgb(52 211 153 / 16%), transparent 70%),
    radial-gradient(40% 90% at 0% 0%, rgb(35 85 232 / 12%), transparent 70%),
    linear-gradient(180deg, #f4f7ff, #fbfcff);
}
@media (min-width: 960px) { .page-header { padding: 64px 0 56px; } }
.page-header h1 { max-width: 22ch; margin-bottom: 14px; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); }
.page-header .lede { max-width: 62ch; margin: 0; }
.page-header .tag { margin-bottom: 14px; }
.updated, .byline { margin: 18px 0 0; font-size: 0.875rem; color: var(--muted); }
.byline a { font-weight: 600; text-decoration: none; }
.byline span { display: block; }
@media (min-width: 600px) { .byline span { display: inline; } .byline span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 3px; border-radius: 50%; background: var(--line-strong); } }
.breadcrumb { margin-bottom: 18px; font-size: 0.875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); }
.page-body { padding-block: 56px 104px; }

.doc-layout { display: grid; gap: 32px; padding-block: 52px 104px; }
@media (min-width: 1040px) { .doc-layout { grid-template-columns: 220px minmax(0, 740px); gap: 72px; } .doc-layout.no-toc { grid-template-columns: minmax(0, 740px); } }
.toc { padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; font-size: 0.875rem; box-shadow: var(--shadow-sm); }
.toc-title { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--ink-2); line-height: 1.4; text-decoration: none; }
.toc a:hover { background: var(--brand-soft); color: var(--brand-ink); }
@media (min-width: 1040px) { .toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; max-height: calc(100vh - var(--header-h) - 56px); overflow-y: auto; } }

/* ── Prose ────────────────────────────────────────────────────────────────── */
.prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.8; color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.2em 0 .65em; font-size: 1.625rem; letter-spacing: -0.025em; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { margin: 1.8em 0 .5em; font-size: 1.25rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.15em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .45em 0; }
.prose li::marker { color: var(--brand); }
.prose strong { font-weight: 650; color: var(--ink); }
.prose a { font-weight: 500; text-decoration: underline; text-decoration-color: var(--brand-soft-2); text-decoration-thickness: 2px; }
.prose a:hover { text-decoration-color: var(--brand); }
.prose blockquote, .callout { margin: 1.8em 0; padding: 18px 22px; border: 1px solid var(--brand-soft-2); border-radius: 16px; background: var(--brand-soft); color: var(--ink); }
.prose blockquote > :last-child, .callout > :last-child { margin-bottom: 0; }
.callout-title { display: block; margin-bottom: 6px; font-weight: 700; color: var(--brand-ink); }
.callout-warn { border-color: #fbe2a6; background: var(--amber); }
.callout-warn .callout-title { color: var(--amber-ink); }
.prose code { padding: .12em .4em; border-radius: 6px; background: var(--bg-soft); font-family: var(--mono); font-size: .85em; color: var(--ink); }
.table-wrap { margin: 1.8em 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table-wrap th, .table-wrap td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap th { font-weight: 700; color: var(--ink); background: var(--bg-soft); }
.example { display: grid; gap: 14px; margin: 1.8em 0; }
@media (min-width: 700px) { .example { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.example > div { padding: 16px 18px; border-radius: 16px; font-size: 0.96875rem; line-height: 1.7; }
.example > div > p:last-child { margin: 0; }
.example .before { background: var(--rose); }
.example .after { background: var(--mint); }
.example .label { display: inline-flex; align-items: center; height: 24px; margin-bottom: 8px; padding: 0 10px; border-radius: var(--r-pill); background: #fff; font-size: 0.75rem; font-weight: 700; }
.example .before .label { color: var(--rose-ink); }
.example .after .label { color: var(--mint-ink); }
.checklist { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.prose .checklist { margin: 0 0 1.2em; padding: 0; }
.checklist li { position: relative; margin: 0; padding-left: 34px; color: var(--ink-2); }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7a4f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 13px;
}
.checklist.no li::before { background: var(--rose) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4234d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / 12px; }
.article-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; max-width: 70ch; margin-top: 56px; padding: 28px 30px;
  border-radius: var(--r-card); background: linear-gradient(125deg, var(--brand-soft) 0%, #e8f8f1 100%); border: 1px solid var(--brand-soft-2);
}
.author-box { display: flex; align-items: flex-start; gap: 14px; max-width: 70ch; margin-top: 48px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow-sm); }
.author-box .brand-mark { flex: none; margin-top: 2px; }
.author-box p { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }
.author-box + .article-cta { margin-top: 20px; }
.practice { margin: 0 0 1.2em; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.practice summary { font-weight: 600; color: var(--brand-ink); cursor: pointer; }
.practice p { margin: 10px 0 0; }
.article-cta h2 { margin: 0 0 4px; font-size: 1.3125rem; }
.article-cta p { margin: 0; color: var(--ink-2); }

/* ── AI detector ──────────────────────────────────────────────────────────── */
.detector-wrap { padding-block: 44px 96px; }
.detector-results { display: grid; gap: 24px; padding: 22px 18px; border-top: 1px solid var(--line); }
.score { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.ring { --p: 0; --c: var(--brand); display: grid; place-items: center; width: 112px; height: 112px; flex: none; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1%), #e8edf8 0); }
.ring > span { display: grid; place-items: center; width: 94px; height: 94px; border-radius: 50%; background: #fff; line-height: 1.1; text-align: center; }
.ring strong { display: block; font-size: 1.75rem; font-weight: 800; color: var(--ink); }
.ring small { display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 600; color: var(--muted); }
.verdict { margin: 0 0 4px; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
.result-label { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.signals { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.signals li { display: flex; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 0.9375rem; color: var(--ink-2); }
.dot { width: 8px; height: 8px; margin-top: .55em; flex: none; border-radius: 50%; background: var(--line-strong); }
.dot-flag { background: #f59e0b; }
.dot-ok { background: #10b981; }
.sentences { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-input); font-size: 0.9375rem; line-height: 1.9; }
.s-high { border-radius: 4px; background: var(--rose); }
.s-mid { border-radius: 4px; background: var(--amber); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 0.75rem; color: var(--muted); }
.legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 4px; vertical-align: -2px; }
.info-grid { display: grid; gap: 22px; margin-top: 56px; }
@media (min-width: 960px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info-card { padding: 30px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-card); }
.info-card h3 { margin-bottom: 18px; font-size: 1.25rem; }
.info-card .table-wrap { margin: 0; }

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.notfound { padding-block: 104px 128px; text-align: center; background: radial-gradient(40% 60% at 50% 0%, rgb(35 85 232 / 10%), transparent 70%); }
.notfound h1 { margin-bottom: 16px; }
.notfound .lede { max-width: 520px; margin: 0 auto 30px; }
.link-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin: 36px 0 0; padding: 0; list-style: none; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer { padding: 64px 0 30px; border-top: 1px solid var(--line); background: var(--bg-soft); font-size: 0.9375rem; }
.footer-grid { display: grid; gap: 36px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); } }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 960px) { .footer-brand { grid-column: auto; } }
.footer-brand p { max-width: 32ch; margin: 14px 0 0; color: var(--muted); }
.site-footer h2 { margin-bottom: 14px; font-size: 0.875rem; font-weight: 700; letter-spacing: 0; color: var(--ink); }
.site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer ul a, .site-footer .linklike { color: var(--muted); text-decoration: none; }
.site-footer ul a:hover, .site-footer .linklike:hover { color: var(--brand); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }
.footer-bottom p { margin: 0; }

/* ── Consent banner ───────────────────────────────────────────────────────── */
.consent {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow-lift); font-size: 0.875rem;
}
.consent p { flex: 1 1 240px; margin: 0; color: var(--ink-2); }
.consent-actions { display: flex; gap: 8px; }
@media (min-width: 768px) { .consent { left: 20px; right: auto; bottom: 20px; max-width: 420px; } }
@media (max-width: 600px) { .consent-actions { width: 100%; } .consent-actions .btn { flex: 1; } }

/* ── Motion ───────────────────────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}