:root {
  --ink: #15181b;
  --paper: #f5f1e8;
  --white: #fffdf8;
  --green: #a9ff68;
  --orange: #ff6b35;
  --blue: #2247e6;
  --mist: #dce6f2;
  --line: rgba(21, 24, 27, .22);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; overflow-x: hidden; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
button { font: inherit; }
.topbar, main, footer { width: min(1220px, calc(100% - 40px)); margin: auto; }
.topbar { display: flex; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid var(--ink); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.topbar a { text-decoration: none; }

.hero { min-height: 720px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: center; padding: 80px 0; }
.hero-copy, .proof-card, .section-title, .analytics-head > *, .inspector-head > * { min-width: 0; }
.eyebrow { margin: 0; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 14px 0 24px; font-size: clamp(55px, 7.5vw, 102px); line-height: .91; letter-spacing: -.075em; }
h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
.subhead { max-width: 800px; font: clamp(20px, 2.4vw, 32px)/1.25 Georgia, serif; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 34px; }
.primary-cta { padding: 16px 22px; border: 1px solid var(--ink); background: var(--green); box-shadow: 5px 5px 0 var(--ink); font-weight: 900; cursor: pointer; }
.hero-actions a { font-size: 13px; font-weight: 800; }
.microcopy { margin-top: 18px; color: #555; font-size: 11px; }
.proof-card { padding: 30px; border: 1px solid var(--ink); background: var(--white); box-shadow: 9px 9px 0 var(--blue); transform: rotate(1deg); }
.proof-card > span, .decision-panel > span, .qa-panel > span { font-size: 10px; font-weight: 900; text-transform: uppercase; }
.proof-card ul { padding: 0; list-style: none; }
.proof-card li { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 800; }
.proof-card div { margin-top: 35px; }
.proof-card strong { display: block; font-size: 65px; }
.proof-card small { font-weight: 800; }

.argument-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); background: var(--ink); color: white; }
.argument-strip p { margin: 0; padding: 28px; border-right: 1px solid #555; line-height: 1.5; }
.argument-strip p:last-child { border: 0; }
.argument-strip b { display: block; margin-bottom: 6px; color: var(--green); }
.problem-section, .how-section, .benefits-section, .comparison-section, .faq-section, .copy-ledger, .analytics-lab { padding: 100px 0; }
.problem-section > h2, .section-title h2, .comparison-section h2, .analytics-head h2, .inspector-head h2, .funnel-section h2 { max-width: 960px; margin: 10px 0 38px; font: clamp(36px, 5vw, 68px)/1 Georgia, serif; letter-spacing: -.04em; }
.problem-grid, .benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.problem-grid article, .benefit-grid article { padding: 30px; border: 1px solid var(--ink); border-left: 0; background: var(--white); }
.problem-grid article:first-child, .benefit-grid article:first-child { border-left: 1px solid var(--ink); }
.problem-grid span { color: var(--orange); font-weight: 900; }
.problem-grid h3, .benefit-grid h3 { font: 29px/1.05 Georgia, serif; }
.problem-grid p, .benefit-grid p { line-height: 1.6; }

.how-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; margin-inline: -40px; padding-inline: 40px; background: var(--mist); }
.how-section ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.how-section li { counter-increment: steps; display: grid; grid-template-columns: 65px 160px 1fr; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--ink); }
.how-section li::before { content: "0" counter(steps); color: var(--blue); font-weight: 900; }
.how-section li b { font-size: 24px; }
.how-section li span { line-height: 1.5; }
.benefit-grid article:nth-child(2) { background: var(--green); }
.benefit-grid b { display: block; margin-top: 25px; color: var(--blue); }
.benefit-grid span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; }

.comparison-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; }
.comparison-table, .event-table { border: 1px solid var(--ink); }
.row { display: grid; grid-template-columns: .7fr 1fr 1.25fr; border-bottom: 1px solid var(--line); }
.row:last-child, .event-row:last-child { border: 0; }
.row span { padding: 17px; border-right: 1px solid var(--line); line-height: 1.4; }
.row span:last-child { border: 0; background: var(--white); font-weight: 700; }
.row.head, .event-row.head { background: var(--ink); color: white; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.faq-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 55px; }
.faq-list details { padding: 20px 0; border-top: 1px solid var(--ink); }
.faq-list details:last-child { border-bottom: 1px solid var(--ink); }
.faq-list summary { font-size: 20px; font-weight: 800; cursor: pointer; }
.faq-list p { max-width: 690px; line-height: 1.6; }
.final-cta { margin: 20px 0 100px; padding: 65px; background: var(--blue); color: white; text-align: center; }
.final-cta .eyebrow { color: var(--green); }
.final-cta h2 { max-width: 900px; margin: 15px auto 30px; font: clamp(38px, 5vw, 67px)/1 Georgia, serif; }
.final-cta span { display: block; margin-top: 22px; font-size: 12px; }
.annotation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.annotation-grid article { padding: 25px; border: 1px dashed var(--ink); background: var(--white); }
.annotation-grid b { color: var(--blue); }
.annotation-grid p { font: 23px/1.2 Georgia, serif; }
.annotation-grid span { font-size: 12px; line-height: 1.5; }

.analytics-lab { border-top: 10px solid var(--ink); }
.analytics-head { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; padding-bottom: 30px; border-bottom: 2px solid var(--ink); }
.analytics-head p:last-child { font: 20px/1.5 Georgia, serif; }
.analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 35px; }
.decision-panel, .consent-panel { padding: 30px; border: 1px solid var(--ink); background: var(--white); }
.decision-panel ol { padding-left: 22px; }
.decision-panel li { padding: 9px 0; line-height: 1.45; }
.consent-panel { background: var(--green); }
.consent-panel > div { display: flex; justify-content: space-between; }
.consent-panel strong { font-size: 24px; }
.consent-panel p { line-height: 1.5; }
.consent-panel button, .inspector-head button { padding: 11px 14px; border: 1px solid var(--ink); background: var(--white); cursor: pointer; font-weight: 800; }
.tracking-plan, .live-inspector, .funnel-section { margin-top: 85px; }
.event-row { display: grid; grid-template-columns: .7fr 1fr 1.3fr 1fr; border-bottom: 1px solid var(--line); }
.event-row > * { padding: 14px; border-right: 1px solid var(--line); font-size: 12px; }
.event-row > *:last-child { border: 0; }
.event-row code { color: var(--blue); font-weight: 900; }
.inspector-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.inspector-head h2 { margin-bottom: 0; }
.inspector-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; margin-top: 25px; }
.event-log { min-height: 370px; max-height: 480px; overflow: auto; padding: 18px; background: var(--ink); color: white; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.empty-log { color: #aaa; }
.log-item { padding: 12px 0; border-bottom: 1px solid #444; }
.log-item b { color: var(--green); }
.log-item code { display: block; color: #ccd3da; white-space: pre-wrap; }
.qa-panel { padding: 25px; border: 1px solid var(--ink); background: var(--white); }
.qa-panel ul { padding: 0; list-style: none; }
.qa-panel li { position: relative; padding: 10px 0 10px 25px; border-bottom: 1px solid var(--line); }
.qa-panel li::before { content: "✓"; position: absolute; left: 0; color: #3f8e22; font-weight: 900; }
.utm-card { margin-top: 28px; padding: 18px; background: var(--mist); }
.utm-card p { font-family: ui-monospace, monospace; line-height: 1.5; }
.funnel { display: grid; grid-template-columns: repeat(4, 1fr); }
.funnel article { padding: 25px; border: 1px solid var(--ink); border-left: 0; background: var(--white); }
.funnel article:first-child { border-left: 1px solid var(--ink); }
.funnel b { color: var(--orange); }
.funnel span { display: block; margin: 30px 0 8px; font-weight: 900; }
.attribution-note { padding: 20px; background: var(--mist); line-height: 1.5; }
.analytics-ledger { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 85px; }
.analytics-ledger article { padding: 30px; border: 1px solid var(--ink); background: var(--white); }
.analytics-ledger article > div { display: flex; justify-content: space-between; font-weight: 900; }
.analytics-ledger strong { color: var(--blue); font: 40px Georgia, serif; }
.analytics-ledger h3 { font: 28px Georgia, serif; }
.analytics-ledger ul { padding: 0; list-style: none; }
.analytics-ledger li { position: relative; padding: 11px 0 11px 25px; border-bottom: 1px solid var(--line); line-height: 1.45; }
.analytics-ledger li::before { position: absolute; left: 0; font-weight: 900; }
.analytics-ledger .done::before { content: "✓"; color: #3f8e22; }
.analytics-ledger .skip::before { content: "○"; color: var(--orange); }

dialog { max-width: 560px; padding: 38px; border: 1px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); }
dialog::backdrop { background: rgba(21, 24, 27, .7); }
dialog h2 { font: 42px/1 Georgia, serif; }
dialog p { line-height: 1.55; }
dialog a { color: var(--blue); font-weight: 900; }
.dialog-close { position: absolute; top: 10px; right: 15px; border: 0; background: none; font-size: 28px; cursor: pointer; }
footer { display: flex; justify-content: space-between; padding: 30px 0 50px; border-top: 1px solid var(--ink); font-size: 12px; font-weight: 900; }

@media (max-width: 820px) {
  .topbar, main, footer { width: calc(100% - 24px); }
  .topbar span { display: none; }
  .hero, .how-section, .comparison-section, .faq-section, .analytics-head, .inspector-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; gap: 46px; }
  .proof-card { transform: none; }
  .argument-strip, .problem-grid, .benefit-grid, .funnel { grid-template-columns: 1fr; }
  .argument-strip p, .problem-grid article, .benefit-grid article, .funnel article { border-left: 1px solid var(--ink); border-bottom: 0; }
  .argument-strip p:last-child, .problem-grid article:last-child, .benefit-grid article:last-child, .funnel article:last-child { border-bottom: 1px solid var(--ink); }
  .how-section { margin-inline: -12px; padding-inline: 24px; }
  .analytics-grid, .analytics-ledger, .annotation-grid { grid-template-columns: 1fr; }
  .event-row { grid-template-columns: 1fr 1.3fr; }
  .event-row > *:nth-child(n + 3) { display: none; }
}

@media (max-width: 520px) {
  h1, h2, .subhead, .eyebrow { max-width: 100%; overflow-wrap: anywhere; }
  h1 { font-size: 47px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .how-section li { grid-template-columns: 45px 1fr; }
  .how-section li span { grid-column: 2; }
  .final-cta { padding: 40px 22px; }
  .inspector-head, footer { align-items: flex-start; flex-direction: column; }
  .row { grid-template-columns: .65fr 1fr; }
  .row span:nth-child(2) { display: none; }
}

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