/* =====================================================================
   OLDEV site.css: the single source of design tokens and component styles.
   Replaces css/style.css once the templates are applied.
   Tokens are RGB triplets so Tailwind can add opacity (see tailwind.config.js).
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root, .light {
  --c-canvas: 255 255 255;        /* #ffffff page background */
  --c-canvas-alt: 248 250 252;    /* #f8fafc alternate band */
  --c-surface: 255 255 255;       /* cards */
  --c-ink: 15 23 42;              /* #0f172a text */
  --c-muted: 71 85 105;           /* #475569 secondary text */
  --c-subtle: 100 116 139;        /* #64748b tertiary text, labels */
  --c-line: 226 232 240;          /* #e2e8f0 borders */
  --c-line-strong: 203 213 225;   /* #cbd5e1 input and button borders */
  --c-accent: 4 120 87;           /* #047857 accent TEXT and links */
  --c-mark: 5 150 105;            /* #059669 icons, bars, focus ring only */
  --c-btn: 4 120 87;              /* #047857 primary button */
  --c-btn-hover: 6 95 70;         /* #065f46 */
  --c-on-btn: 255 255 255;        /* text on primary button */
  --c-accent-soft: 236 253 245;   /* #ecfdf5 tinted backgrounds */
  --c-danger: 185 28 28;          /* #b91c1c */
  --c-danger-soft: 254 242 242;   /* #fef2f2 */
  --shadow-soft: 0 1px 2px rgba(15,23,42,.04), 0 12px 32px -16px rgba(15,23,42,.14);
  --radius: 14px;
  --radius-lg: 18px;
  --nav-h: 4rem;
  color-scheme: light;
}
.dark {
  --c-canvas: 2 6 23;             /* #020617 */
  --c-canvas-alt: 15 23 42;       /* #0f172a */
  --c-surface: 15 23 42;          /* #0f172a */
  --c-ink: 241 245 249;           /* #f1f5f9 */
  --c-muted: 148 163 184;         /* #94a3b8 */
  --c-subtle: 135 150 172;        /* #8796ac, AA on both dark backgrounds */
  --c-line: 30 41 59;             /* #1e293b */
  --c-line-strong: 51 65 85;      /* #334155 */
  --c-accent: 52 211 153;         /* #34d399 accent TEXT */
  --c-mark: 52 211 153;           /* #34d399 icons, bars, focus ring */
  --c-btn: 16 185 129;            /* #10b981 primary button */
  --c-btn-hover: 52 211 153;      /* #34d399 */
  --c-on-btn: 2 6 23;             /* #020617 text on primary button */
  --c-accent-soft: 6 44 34;       /* deep emerald tint */
  --c-danger: 248 113 113;        /* #f87171 */
  --c-danger-soft: 50 14 18;
  --shadow-soft: none;
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
/* Rule: component classes below set display. When a component must hide or show
   by breakpoint, put the Tailwind display utility (hidden, lg:block) on a wrapper,
   because this file loads after Tailwind and would win over the utility. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  margin: 0;
  background: rgb(var(--c-canvas));
  color: rgb(var(--c-ink));
  font-family: Outfit, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgb(var(--c-mark) / .25); }
:focus-visible { outline: 2px solid rgb(var(--c-mark)); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.ph-text { color: rgb(var(--c-ink)); } /* placeholder copy uses normal colors on purpose */

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  padding: .6rem 1rem; border-radius: 10px; font-weight: 600;
  background: rgb(var(--c-ink)); color: rgb(var(--c-canvas));
}
.skip-link:focus { top: 1rem; }

/* ---------- 3. Layout and type ---------- */
.container-site { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px) { .container-site { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .container-site { padding-inline: 2rem; } }
.section { padding-block: 5rem; }
@media (min-width: 1024px) { .section { padding-block: 7rem; } }
.section-alt { background: rgb(var(--c-canvas-alt) / .6); }
.dark .section-alt { background: rgb(var(--c-canvas-alt) / .45); }
.section-rule { border-top: 1px solid rgb(var(--c-line)); }

.eyebrow { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--c-accent)); }
.t-hero { font-size: 2.5rem; line-height: 1.06; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
@media (min-width: 640px) { .t-hero { font-size: 3.75rem; } }
@media (min-width: 1024px) { .t-hero { font-size: 4.5rem; line-height: 1.02; } }
.t-h1 { font-size: 2.25rem; line-height: 1.08; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
@media (min-width: 640px) { .t-h1 { font-size: 3rem; } }
.t-h2 { font-size: 1.875rem; line-height: 1.15; letter-spacing: -.02em; font-weight: 600; text-wrap: balance; }
@media (min-width: 640px) { .t-h2 { font-size: 2.25rem; } }
.t-h3 { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.t-lead { font-size: 1.125rem; line-height: 1.65; color: rgb(var(--c-muted)); }
@media (min-width: 640px) { .t-lead { font-size: 1.25rem; } }
.t-body { font-size: 1rem; line-height: 1.7; color: rgb(var(--c-muted)); }
.t-small { font-size: .875rem; line-height: 1.6; color: rgb(var(--c-muted)); }
.t-meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .75rem; color: rgb(var(--c-subtle)); }
.section-head { max-width: 42rem; }
.section-head .t-h2 { margin-top: .75rem; }
.section-head .t-body { margin-top: 1rem; font-size: 1.0625rem; }
.break-anywhere { overflow-wrap: anywhere; }
.grid > * { min-width: 0; } /* lets tables and code blocks scroll inside grid columns instead of widening the page */

/* ---------- 4. Header ---------- */
#navbar { height: var(--nav-h); background: rgb(var(--c-canvas) / .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgb(var(--c-line) / .7); }
#navbar.shadow-lg { box-shadow: var(--shadow-soft); }
.logo { display: inline-flex; align-items: center; gap: .625rem; border-radius: 8px; }
.logo-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 9px; background: rgb(var(--c-ink)); color: rgb(var(--c-canvas)); font: 500 11px/1 "JetBrains Mono", monospace; }
.dark .logo-mark { background: rgb(var(--c-line)); color: rgb(var(--c-accent)); }
.logo-word { font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em; color: rgb(var(--c-ink)); }
.logo-word span { color: rgb(var(--c-accent)); }
.nav-link { position: relative; padding: .5rem .75rem; border-radius: 8px; font-size: .9375rem; color: rgb(var(--c-muted)); transition: color .15s; }
.nav-link:hover { color: rgb(var(--c-ink)); }
.nav-link.active { color: rgb(var(--c-ink)); font-weight: 500; }
.nav-link.active::after { content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .15rem; height: 2px; border-radius: 2px; background: rgb(var(--c-mark)); }
.nav-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 10px; font-size: .875rem; font-weight: 600; background: rgb(var(--c-btn)); color: rgb(var(--c-on-btn)); transition: background .15s; white-space: nowrap; }
.nav-cta:hover, .nav-cta.active { background: rgb(var(--c-btn-hover)); }
.icon-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-muted)); background: transparent; cursor: pointer; transition: color .15s, border-color .15s; }
.icon-btn:hover { color: rgb(var(--c-ink)); border-color: rgb(var(--c-line-strong)); }
.theme-icon-dark { display: none; }
.dark .theme-icon-light { display: none; }
.dark .theme-icon-dark { display: inline; }
.lang-switch { padding: .4rem .6rem; border-radius: 8px; font: 500 .75rem/1 "JetBrains Mono", monospace; color: rgb(var(--c-muted)); }
.lang-switch:hover { color: rgb(var(--c-ink)); }
.avail { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: rgb(var(--c-muted)); }
.status-dot { position: relative; width: .5rem; height: .5rem; border-radius: 999px; background: rgb(var(--c-mark)); display: inline-block; }
.status-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: dot-pulse 1.8s ease-out infinite; }
@keyframes dot-pulse { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3); } }
#mobile-menu { border-top: 1px solid rgb(var(--c-line)); background: rgb(var(--c-canvas)); }
.mobile-nav-link { display: block; padding: .75rem .75rem; border-radius: 10px; font-size: 1rem; color: rgb(var(--c-ink)); }
.mobile-nav-link:hover, .mobile-nav-link.active { background: rgb(var(--c-canvas-alt)); }
.mobile-nav-link.active { font-weight: 600; }
.mobile-nav-cta { display: block; margin-top: .5rem; padding: .85rem 1rem; border-radius: 12px; text-align: center; font-weight: 600; background: rgb(var(--c-btn)); color: rgb(var(--c-on-btn)); }
.has-fixed-nav { padding-top: var(--nav-h); }

/* ---------- 5. Footer ---------- */
.site-footer { border-top: 1px solid rgb(var(--c-line)); background: rgb(var(--c-canvas-alt)); }
.dark .site-footer { background: rgb(var(--c-canvas)); }
.footer-link { color: rgb(var(--c-muted)); font-size: .9375rem; }
.footer-link:hover { color: rgb(var(--c-ink)); }
.wa-float { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: inline-flex; align-items: center; gap: .5rem; height: 2.75rem; padding: 0 1rem 0 .85rem; border-radius: 999px; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); box-shadow: var(--shadow-soft); font-size: .875rem; font-weight: 500; }
.wa-float i { font-size: 1.125rem; color: rgb(var(--c-mark)); }
.wa-float:hover { border-color: rgb(var(--c-line-strong)); }
@media (max-width: 639px) { .wa-float { width: 2.75rem; padding: 0; justify-content: center; } .wa-float-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- 6. Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .8rem 1.4rem; border-radius: 12px; font-size: 1rem; font-weight: 600; line-height: 1.25; text-align: center; border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn-primary { background: rgb(var(--c-btn)); color: rgb(var(--c-on-btn)); }
.btn-primary:hover:not(:disabled) { background: rgb(var(--c-btn-hover)); }
.btn-secondary { background: rgb(var(--c-surface)); color: rgb(var(--c-ink)); border-color: rgb(var(--c-line-strong)); }
.dark .btn-secondary { background: transparent; }
.btn-secondary:hover:not(:disabled) { border-color: rgb(var(--c-subtle)); background: rgb(var(--c-canvas-alt)); }
.btn-ghost { background: transparent; color: rgb(var(--c-ink)); padding-inline: .75rem; }
.btn-ghost:hover { background: rgb(var(--c-canvas-alt)); }
.btn-sm { min-height: 2.5rem; padding: .55rem 1rem; font-size: .9375rem; border-radius: 10px; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn.is-loading, button[type="submit"]:disabled { cursor: progress; }
.btn.is-loading::before, .lead-magnet-form button[type="submit"]:disabled::before, #contact-form button[type="submit"]:disabled::before {
  content: ""; width: 1rem; height: 1rem; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite;
}
#contact-form button[type="submit"]:disabled i { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-note { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .875rem; color: rgb(var(--c-muted)); }
.btn-note i { color: rgb(var(--c-mark)); }
.link { color: rgb(var(--c-accent)); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgb(var(--c-accent) / .35); }
.link:hover { text-decoration-color: currentColor; }
.link-arrow { display: inline-flex; align-items: center; gap: .4rem; color: rgb(var(--c-accent)); font-weight: 600; }
.link-arrow i { font-size: .75rem; transition: transform .15s; }
.link-arrow:hover i { transform: translateX(2px); }
.ext-mark { font-size: .7em; margin-left: .15em; }

/* ---------- 7. Surfaces ---------- */
.card { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.dark .card { background: rgb(var(--c-surface) / .7); }
.card-quiet { background: rgb(var(--c-canvas-alt)); border: 1px solid rgb(var(--c-line)); border-radius: var(--radius); }
.dark .card-quiet { background: rgb(var(--c-canvas-alt) / .4); }
.card-link { transition: border-color .15s; }
.card-link:hover { border-color: rgb(var(--c-line-strong)); }
.icon-tile { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 12px; background: rgb(var(--c-canvas-alt)); color: rgb(var(--c-ink)); border: 1px solid rgb(var(--c-line)); flex-shrink: 0; }
.dark .icon-tile { background: rgb(var(--c-line) / .6); }
.ph { display: grid; place-items: center; width: 100%; border: 1.5px dashed rgb(var(--c-line-strong)); border-radius: var(--radius); background: rgb(var(--c-canvas-alt)); color: rgb(var(--c-subtle)); font: .75rem/1.4 "JetBrains Mono", monospace; text-align: center; padding: 1rem; }
.dark .ph { background: rgb(var(--c-canvas-alt) / .5); }

/* ---------- 8. Chips, tags, status ---------- */
.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 6px; font: 500 .6875rem/1.4 "JetBrains Mono", monospace; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--c-muted)); background: rgb(var(--c-canvas-alt)); border: 1px solid rgb(var(--c-line)); }
.tag-lg { padding: .4rem .75rem; border-radius: 999px; font-family: Outfit, sans-serif; font-size: .8125rem; text-transform: none; letter-spacing: 0; color: rgb(var(--c-ink)); }
.tag-lg:hover { border-color: rgb(var(--c-line-strong)); }
.status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: rgb(var(--c-muted)); }
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: rgb(var(--c-mark)); }
.status-paused::before { background: rgb(var(--c-subtle)); }
.chip-cert { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; border-radius: 999px; font-size: .8125rem; font-weight: 500; color: rgb(var(--c-ink)); background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line-strong)); }
.chip-cert i { color: rgb(var(--c-mark)); }
.chip-cert-pending { font-weight: 400; color: rgb(var(--c-muted)); background: transparent; border: 1px dashed rgb(var(--c-subtle)); }
.chip-cert-pending i { color: rgb(var(--c-subtle)); font-size: .7em; }
.chip-cert-pending .pending-label { flex-shrink: 0; white-space: nowrap; padding: .1rem .45rem; border-radius: 999px; font: 500 .625rem/1.4 "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--c-muted)); background: rgb(var(--c-line) / .7); }
.chip-result { display: block; padding: 1rem; border-radius: var(--radius); background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line)); box-shadow: var(--shadow-soft); }
.chip-result .label { font-size: .75rem; color: rgb(var(--c-muted)); }
.chip-result .value { margin-top: .4rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: rgb(var(--c-accent)); font-variant-numeric: tabular-nums; }

/* ---------- 9. KPI row ---------- */
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; }
.kpi-value { font-size: 1.75rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; color: rgb(var(--c-ink)); }
[data-count-up] .kpi-value { color: rgb(var(--c-accent)); font-variant-numeric: tabular-nums; }
.kpi-label { margin-top: .5rem; font-size: .8125rem; line-height: 1.4; color: rgb(var(--c-muted)); }
@media (min-width: 640px) {
  .kpis { display: flex; gap: 0; }
  .kpis > div { padding-inline: 2rem; border-left: 1px solid rgb(var(--c-line)); }
  .kpis > div:first-child { padding-left: 0; border-left: 0; }
  .kpi-value { font-size: 2rem; }
}

/* ---------- 10. Before and after card ---------- */
.ba-legend { display: flex; gap: 1rem; font-size: .75rem; color: rgb(var(--c-muted)); }
.ba-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.ba-legend span::before { content: ""; width: 1rem; height: .375rem; border-radius: 999px; background: rgb(var(--c-line-strong)); }
.ba-legend span.after::before { background: rgb(var(--c-mark)); }
.ba-row + .ba-row { border-top: 1px solid rgb(var(--c-line)); }
.ba-value { white-space: nowrap; font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ba-value .before { color: rgb(var(--c-subtle)); }
.ba-value .after { color: rgb(var(--c-accent)); }
.bar { height: .375rem; border-radius: 999px; background: rgb(var(--c-canvas-alt)); overflow: hidden; }
.dark .bar { background: rgb(var(--c-line)); }
.bar > span { display: block; height: 100%; border-radius: inherit; background: rgb(var(--c-line-strong)); }
.dark .bar > span { background: rgb(var(--c-subtle) / .6); }
.bar.after > span, .dark .bar.after > span { background: rgb(var(--c-mark)); }

/* ---------- 11. Offer cards ---------- */
.offer { display: flex; flex-direction: column; height: 100%; }
.offer-highlight { padding: 2rem; border-top: 3px solid rgb(var(--c-mark)); }
@media (min-width: 1024px) { .offer-highlight { padding: 2.5rem; } }
.offer-quiet { padding: 1.5rem; }
.check-list { display: grid; gap: .65rem; }
.check-list li { display: flex; gap: .65rem; align-items: flex-start; font-size: .9375rem; line-height: 1.55; color: rgb(var(--c-muted)); }
.check-list li::before { content: "\f00c"; font: 900 .75rem/1.9 "Font Awesome 6 Free"; color: rgb(var(--c-mark)); flex-shrink: 0; }
.cross-list li::before { content: "\f00d"; color: rgb(var(--c-subtle)); }

/* ---------- 12. Starting-point choices ---------- */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
@media (min-width: 1024px) { .choices { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.choice { display: flex; height: 100%; align-items: center; gap: .75rem; padding: 1rem; border-radius: 12px; border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-surface)); font-size: .9375rem; font-weight: 500; line-height: 1.35; transition: border-color .15s; }
.dark .choice { background: rgb(var(--c-surface) / .5); }
.choice .ic { width: 1.25rem; text-align: center; color: rgb(var(--c-subtle)); transition: color .15s; }
.choice .arrow { margin-left: auto; font-size: .75rem; color: rgb(var(--c-subtle)); }
.choice:hover { border-color: rgb(var(--c-mark)); }
.choice:hover .ic, .choice:hover .arrow { color: rgb(var(--c-accent)); }

/* ---------- 13. Trust strip ---------- */
.trust { border-top: 1px solid rgb(var(--c-line)); background: rgb(var(--c-canvas-alt) / .8); }
.dark .trust { background: rgb(var(--c-canvas-alt) / .3); }
.trust ul { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding-block: 1rem; font-size: .8125rem; }
.trust li { display: flex; align-items: center; gap: .5rem; }
.trust .ic { color: rgb(var(--c-accent)); }

/* ---------- 14. Tool list ---------- */
.tool-groups { display: grid; gap: 2rem 2.5rem; grid-template-columns: repeat(1, minmax(0,1fr)); }
@media (min-width: 640px) { .tool-groups { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .tool-groups { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.tool-group h3 { display: flex; align-items: center; gap: .5rem; padding-bottom: .65rem; margin-bottom: .75rem; border-bottom: 1px solid rgb(var(--c-line)); font-size: .9375rem; font-weight: 600; }
.tool-group h3 i { color: rgb(var(--c-mark)); font-size: .8125rem; width: 1rem; }
.tool-group h3 .count { margin-left: auto; font: 400 .6875rem "JetBrains Mono", monospace; color: rgb(var(--c-subtle)); }
.tool-list { display: grid; gap: .4rem; font-size: .9375rem; color: rgb(var(--c-muted)); }

/* ---------- 15. FAQ (native details) ---------- */
.faq { border-top: 1px solid rgb(var(--c-line)); }
.faq details { border-bottom: 1px solid rgb(var(--c-line)); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "\2b"; font: 900 .75rem "Font Awesome 6 Free"; color: rgb(var(--c-subtle)); transition: transform .2s; flex-shrink: 0; }
.faq details[open] summary::after { transform: rotate(45deg); color: rgb(var(--c-accent)); }
.faq .answer { padding: 0 2rem 1.5rem 0; color: rgb(var(--c-muted)); line-height: 1.7; }

/* ---------- 16. Forms ---------- */
.field-label, .lead-magnet-form label { display: block; margin-bottom: .45rem; font-size: .875rem; font-weight: 500; color: rgb(var(--c-ink)); }
.req, .lead-magnet-form .lm-required { color: rgb(var(--c-accent)); margin-left: 2px; }
.field, .lead-magnet-form input[type="email"], .lead-magnet-form input[type="text"] {
  display: block; width: 100%; min-height: 3rem; padding: .75rem 1rem; border-radius: 12px; font: inherit; font-size: 1rem;
  color: rgb(var(--c-ink)); background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line-strong)); transition: border-color .15s, box-shadow .15s;
}
.dark .field, .dark .lead-magnet-form input { background: rgb(var(--c-canvas)); }
.field::placeholder, .lead-magnet-form input::placeholder { color: rgb(var(--c-subtle)); }
.field:hover, .lead-magnet-form input:hover { border-color: rgb(var(--c-subtle)); }
.field:focus, .field.is-focus, .lead-magnet-form input:focus { outline: none; border-color: rgb(var(--c-mark)); box-shadow: 0 0 0 3px rgb(var(--c-mark) / .22); }
.field[aria-invalid="true"], .lead-magnet-form input[aria-invalid="true"] { border-color: rgb(var(--c-danger)); box-shadow: 0 0 0 3px rgb(var(--c-danger) / .15); }
.field:disabled { opacity: .6; cursor: not-allowed; }
select.field { appearance: none; padding-right: 2.75rem; background-image: linear-gradient(45deg, transparent 50%, rgb(var(--c-subtle)) 50%), linear-gradient(135deg, rgb(var(--c-subtle)) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - .9rem) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
textarea.field { min-height: 9rem; resize: vertical; }
.field-hint { margin-top: .4rem; font-size: .8125rem; color: rgb(var(--c-subtle)); }
.field-error, .lead-magnet-form .lm-error { margin-top: .4rem; font-size: .8125rem; font-weight: 500; color: rgb(var(--c-danger)); }
.field-error:empty, .lm-error:empty { display: none; }
.check { display: flex; gap: .65rem; align-items: flex-start; font-size: .9375rem; color: rgb(var(--c-muted)); cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; margin-top: .2rem; accent-color: rgb(var(--c-btn)); flex-shrink: 0; }
.form-alert, .cf-form-error, .lead-magnet-form .lm-form-error { display: flex; gap: .6rem; padding: .85rem 1rem; border-radius: 12px; font-size: .9375rem; color: rgb(var(--c-danger)); background: rgb(var(--c-danger-soft)); border: 1px solid rgb(var(--c-danger) / .3); }
.hp, .lead-magnet-form .lm-honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-success, #contact-form-success, .lead-magnet-success { display: flex; gap: .85rem; align-items: flex-start; padding: 1.5rem; border-radius: var(--radius); background: rgb(var(--c-accent-soft)); border: 1px solid rgb(var(--c-mark) / .35); color: rgb(var(--c-ink)); }
.form-success i, .lead-magnet-success > i, #contact-form-success i { color: rgb(var(--c-accent)); font-size: 1.25rem; margin-top: .15rem; }
/* Lead magnet form (classes are JS hooks in js/lead-magnet.js: keep them) */
.lead-magnet { position: relative; }
.lead-magnet-form { display: grid; gap: 1.1rem; }
.lead-magnet-form .lm-row { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .lead-magnet-form .lm-row.lm-row-2 { grid-template-columns: 1fr 1fr; } }
.lead-magnet-form .lm-optional { font-weight: 400; color: rgb(var(--c-subtle)); }
.lead-magnet-form button[type="submit"] { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .8rem 1.4rem; border: 0; border-radius: 12px; font: inherit; font-weight: 600; background: rgb(var(--c-btn)); color: rgb(var(--c-on-btn)); cursor: pointer; }
.lead-magnet-form button[type="submit"]:hover:not(:disabled) { background: rgb(var(--c-btn-hover)); }
.lead-magnet-form button[type="submit"]:disabled { opacity: .7; }
.lead-magnet-form .lm-microcopy, .lead-magnet-form .lm-consent, .lead-magnet-form .lm-handled-link { font-size: .8125rem; line-height: 1.6; color: rgb(var(--c-muted)); }
.lead-magnet-form a { color: rgb(var(--c-accent)); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 17. Breadcrumb, table, code, callout ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8125rem; color: rgb(var(--c-subtle)); }
.breadcrumb a:hover { color: rgb(var(--c-ink)); }
.breadcrumb li + li::before { content: "/"; margin-right: .4rem; color: rgb(var(--c-line-strong)); }
.table-wrap { overflow-x: auto; border: 1px solid rgb(var(--c-line)); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.table th { text-align: left; padding: .85rem 1rem; font-weight: 600; font-size: .8125rem; color: rgb(var(--c-ink)); background: rgb(var(--c-canvas-alt)); border-bottom: 1px solid rgb(var(--c-line)); white-space: nowrap; }
.table td { padding: .85rem 1rem; color: rgb(var(--c-muted)); border-bottom: 1px solid rgb(var(--c-line)); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .yes { color: rgb(var(--c-accent)); }
.table .no { color: rgb(var(--c-subtle)); }
.code { margin: 0; overflow-x: auto; padding: 1.1rem 1.25rem; border-radius: var(--radius); font: .8125rem/1.7 "JetBrains Mono", ui-monospace, monospace; color: #e2e8f0; background: #0f172a; border: 1px solid rgb(var(--c-line)); }
.dark .code { background: #0b1222; }
.code-title { display: flex; justify-content: space-between; padding: .55rem 1rem; font: .75rem "JetBrains Mono", monospace; color: rgb(var(--c-muted)); background: rgb(var(--c-canvas-alt)); border: 1px solid rgb(var(--c-line)); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.code-title + .code { border-top-left-radius: 0; border-top-right-radius: 0; }
:not(pre) > code { padding: .1rem .35rem; border-radius: 6px; font: .875em "JetBrains Mono", monospace; background: rgb(var(--c-canvas-alt)); border: 1px solid rgb(var(--c-line)); color: rgb(var(--c-ink)); }
.callout { display: flex; gap: .85rem; padding: 1.1rem 1.25rem; border-radius: var(--radius); border: 1px solid rgb(var(--c-line)); background: rgb(var(--c-canvas-alt)); font-size: .9375rem; line-height: 1.65; color: rgb(var(--c-muted)); }
.callout > i { margin-top: .25rem; color: rgb(var(--c-subtle)); }
.callout strong { color: rgb(var(--c-ink)); }
.callout-accent { background: rgb(var(--c-accent-soft)); border-color: rgb(var(--c-mark) / .3); }
.callout-accent > i { color: rgb(var(--c-accent)); }
.callout-warn { border-left: 3px solid rgb(var(--c-danger)); }
.callout-warn > i { color: rgb(var(--c-danger)); }

/* ---------- 18. CTA band ---------- */
.cta-band { border-radius: 24px; padding: 3rem 1.5rem; text-align: center; background: rgb(var(--c-canvas-alt)); border: 1px solid rgb(var(--c-line)); }
.dark .cta-band { background: rgb(var(--c-surface) / .6); }
@media (min-width: 1024px) { .cta-band { padding: 4.5rem 3rem; } }

/* ---------- 19. Steps ---------- */
.steps { display: grid; gap: 1.5rem; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(var(--steps, 4), minmax(0,1fr)); gap: 2rem; } }
.step { counter-increment: step; padding-top: 1.25rem; border-top: 1px solid rgb(var(--c-line)); }
.step::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: .75rem; font: 500 .75rem "JetBrains Mono", monospace; color: rgb(var(--c-accent)); }

/* ---------- 20. Long-form reading ---------- */
.prose-long { max-width: 42rem; font-size: 1.0625rem; line-height: 1.75; color: rgb(var(--c-muted)); }
.prose-long > * + * { margin-top: 1.25rem; }
.prose-long section + section { margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgb(var(--c-line)); }
.prose-long h2 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.02em; font-weight: 600; color: rgb(var(--c-ink)); }
.prose-long h3 { margin-top: 2rem; font-size: 1.1875rem; font-weight: 600; color: rgb(var(--c-ink)); }
.prose-long p { margin-top: 1rem; }
.prose-long strong { color: rgb(var(--c-ink)); font-weight: 600; }
.prose-long ul, .prose-long ol { margin-top: 1rem; padding-left: 1.25rem; display: grid; gap: .5rem; }
.prose-long ul { list-style: disc; } .prose-long ol { list-style: decimal; }
.prose-long li::marker { color: rgb(var(--c-subtle)); }
.prose-long .table-wrap, .prose-long pre, .prose-long .callout, .prose-long figure, .prose-long .card { margin-top: 1.5rem; }
.prose-long a { color: rgb(var(--c-accent)); text-decoration: underline; text-underline-offset: 3px; }
.prose-long .eyebrow + h2 { margin-top: .5rem; }
.toc { position: sticky; top: calc(var(--nav-h) + 2rem); }
.toc a { display: block; padding: .4rem 0 .4rem .9rem; border-left: 2px solid rgb(var(--c-line)); font-size: .875rem; color: rgb(var(--c-muted)); }
.toc a:hover { color: rgb(var(--c-ink)); }
.toc a[aria-current="true"] { color: rgb(var(--c-ink)); font-weight: 500; border-left-color: rgb(var(--c-mark)); }
.toc-mobile summary { list-style: none; cursor: pointer; }
.toc-mobile summary::-webkit-details-marker { display: none; }

/* ---------- 21. Product grid (looks intentional with 1, 2, 3 or more cards) ---------- */
.product-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .product-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .product-grid > :last-child:nth-child(odd) .product-card { flex-direction: row; align-items: center; gap: 2rem; }
  .product-grid > :last-child:nth-child(odd) .product-card .product-foot { margin-top: 0; padding-top: 0; border-top: 0; margin-left: auto; flex-shrink: 0; }
}
.product-card { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; padding: 1.75rem; }
.product-foot { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid rgb(var(--c-line)); }
.product-mark { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: rgb(var(--c-ink)); color: rgb(var(--c-canvas)); font-size: 1.1rem; flex-shrink: 0; }
.dark .product-mark { background: rgb(var(--c-line)); color: rgb(var(--c-accent)); }

/* ---------- 22. Page background ---------- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 36rem at 88% -8%, rgb(16 185 129 / .13), transparent 62%),
    radial-gradient(48rem 30rem at -6% 18%, rgb(14 165 233 / .08), transparent 60%),
    radial-gradient(56rem 34rem at 60% 108%, rgb(16 185 129 / .08), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f4f8f8 100%);
}
.dark body::before {
  background:
    radial-gradient(60rem 36rem at 88% -8%, rgb(16 185 129 / .16), transparent 62%),
    radial-gradient(48rem 30rem at -6% 18%, rgb(14 165 233 / .10), transparent 60%),
    radial-gradient(56rem 34rem at 60% 108%, rgb(16 185 129 / .09), transparent 62%),
    linear-gradient(180deg, #020617 0%, #0a1324 100%);
}

/* ---------- 23. Light mode separation, neon hover ---------- */
html:not(.dark) .section-alt { background: rgb(241 245 249 / .92); border-block: 1px solid rgb(var(--c-line-strong) / .7); }
@media (min-width: 1024px) and (max-width: 1100px) { .offer-highlight { padding: 1.75rem; } .offer-highlight .btn { padding-inline: 1rem; } }
.portrait { border-radius: var(--radius-lg); border: 1px solid rgb(var(--c-line)); box-shadow: var(--shadow-soft); }
:root { --neon: 52 211 153; }
.card-link, .choice, .offer-highlight, .tag-lg, .icon-btn, .wa-float { transition: border-color .15s, box-shadow .15s; }
.card-link:hover, .choice:hover, .offer-highlight:hover, .tag-lg:hover, .icon-btn:hover, .wa-float:hover, .btn-secondary:hover:not(:disabled) {
  border-color: rgb(var(--neon)); box-shadow: 0 0 10px rgb(var(--neon) / .16);
}

/* ---------- 24. Motion ---------- */
.rise { animation: rise .6s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}