:root {
      --paper: #f6f4ec; --white: #fffef8; --ink: #20271f; --muted: #586052;
      --line: #c5c9b9; --lime: #d6ed8a; --forest: #29472d; --forest-hover: #18341c;
      --red-paper: #f4e6df; --red-ink: #7c352a; --green-paper: #e5edd9;
      --background: var(--paper); --foreground: var(--ink); --accent: var(--forest);
      --button-bg: var(--accent); --button-fg: var(--white);
      --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
      --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem;
      --space-9: 6rem; --radius: .4rem; --rule: 1px; --focus: 3px;
      --font-body: "Segoe UI", system-ui, sans-serif; --font-display: Georgia, serif;
      --font-mono: Consolas, "Courier New", monospace; --small: .875rem;
      --body: 1rem; --lead: 1.125rem; --heading: 1.75rem; --price: 3rem;
      --hero: clamp(3rem, 5.7vw, 5rem); --measure: 72rem; --reading: 37rem;
    }
    * { box-sizing: border-box; }
    body { margin: 0; color: var(--foreground); background: var(--background); font: var(--body)/1.6 var(--font-body); }
    button, a { -webkit-tap-highlight-color: transparent; }
    button { font: inherit; cursor: pointer; }
    a { color: inherit; text-underline-offset: var(--space-1); }
    :focus-visible { outline: var(--focus) solid var(--forest); outline-offset: var(--space-1); }
    [hidden] { display: none !important; }
    h1, h2, p { margin: 0; }
    .wrap { width: min(calc(100% - var(--space-7)), var(--measure)); margin-inline: auto; }
    .skip { position: absolute; top: var(--space-4); left: var(--space-4); z-index: 2; padding: var(--space-3); background: var(--white); transform: translateY(-200%); }
    .skip:focus { transform: translateY(0); }
    .notice { background: var(--lime); border-bottom: var(--rule) solid var(--line); padding-block: var(--space-3); font-size: var(--small); }
    .notice strong { font-weight: 700; }
    header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); border-bottom: var(--rule) solid var(--line); }
    .brand { display: flex; gap: var(--space-3); align-items: center; font-size: var(--lead); font-weight: 650; letter-spacing: -.03em; }
    .mark { background: var(--ink); color: var(--lime); padding: var(--space-1) var(--space-2); font: var(--lead) var(--font-mono); letter-spacing: -.12em; }
    .eyebrow { color: var(--muted); font-size: var(--small); text-transform: uppercase; letter-spacing: .1em; }
    .hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: start; padding-block: var(--space-8); }
    h1 { margin-block: var(--space-4) var(--space-5); font: 400 var(--hero)/1.05 var(--font-display); letter-spacing: -.055em; }
    .intro { max-width: var(--reading); font-size: var(--lead); color: var(--muted); }
    .intro strong { color: var(--ink); font-weight: 600; }
    .offer { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--rule) solid var(--line); }
    .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-2); }
    .price strong { font: 400 var(--price)/1.1 var(--font-display); letter-spacing: -.04em; }
    .price span, .fine { color: var(--muted); font-size: var(--small); }
    .primary { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-3); background: var(--button-bg); color: var(--button-fg); border: var(--rule) solid var(--button-bg); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-block: var(--space-5) var(--space-3); min-height: var(--space-7); text-align: center; font-weight: 600; line-height: 1.4; }
    .primary:hover { background: var(--forest-hover); }
    .arrow { font-family: var(--font-mono); font-size: var(--lead); }
    .response { margin-top: var(--space-4); padding: var(--space-5); background: var(--green-paper); border: var(--rule) solid var(--line); border-radius: var(--radius); }
    .response h2 { font-size: var(--lead); margin-bottom: var(--space-2); }
    .response p { margin-bottom: var(--space-3); }
    .text-button { color: var(--ink); background: transparent; border: var(--rule) solid var(--muted); border-radius: var(--radius); padding: var(--space-2) var(--space-4); min-height: var(--space-7); }
    .specimen { margin-top: var(--space-3); background: var(--white); border: var(--rule) solid var(--ink); border-radius: var(--radius); overflow: hidden; }
    .specimen-heading { padding: var(--space-4) var(--space-5); border-bottom: var(--rule) solid var(--line); display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: var(--small); }
    .specimen-heading span { color: var(--muted); }
    .example-body { padding: var(--space-5); }
    .time { margin-block: var(--space-2) var(--space-3); font: var(--small)/1.6 var(--font-mono); color: var(--muted); overflow-wrap: anywhere; }
    .caption { font: 400 var(--heading)/1.45 var(--font-display); letter-spacing: -.02em; }
    del { background: var(--red-paper); color: var(--red-ink); text-decoration-thickness: var(--rule); }
    ins { background: var(--green-paper); color: var(--forest); text-decoration: none; border-bottom: var(--rule) solid currentColor; }
    .divider { height: var(--rule); background: var(--line); margin-block: var(--space-5); }
    .unchanged { padding: var(--space-3) var(--space-5); background: var(--green-paper); border-top: var(--rule) solid var(--line); font-size: var(--small); }
    .example-note { font-size: var(--small); color: var(--muted); margin-top: var(--space-4); }
    .workflow { border-top: var(--rule) solid var(--line); padding-block: var(--space-7); }
    .workflow-heading { font: 400 var(--heading)/1.3 var(--font-display); margin-bottom: var(--space-5); letter-spacing: -.025em; }
    .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-7); margin: 0; padding: 0; }
    .number { display: block; font: var(--small) var(--font-mono); color: var(--muted); margin-bottom: var(--space-3); }
    .steps h3 { font-size: var(--body); margin: 0 0 var(--space-2); }
    .steps p { font-size: var(--small); color: var(--muted); }
    .reviewer { border-top: var(--rule) solid var(--line); margin-top: var(--space-6); padding-block: var(--space-5) var(--space-7); color: var(--muted); font-size: var(--small); }
    .reviewer h2 { color: var(--ink); font-size: var(--small); margin-bottom: var(--space-2); }
    .reviewer p { max-width: var(--reading); }
    @media (max-width: 54rem) { .hero { grid-template-columns: 1fr; gap: var(--space-7); } .specimen { margin: 0; } .hero-copy { max-width: var(--reading); } .steps { gap: var(--space-5); } }
    @media (max-width: 36rem) { .wrap { width: calc(100% - var(--space-6)); } header { padding-block: var(--space-5); } header .eyebrow { display: none; } .hero { padding-block: var(--space-7); } .primary { width: 100%; } .steps { grid-template-columns: 1fr; gap: var(--space-5); } }
    @media (forced-colors: active) { .primary, .specimen, .response, .notice { border-color: CanvasText; } ins { text-decoration: underline; } }
  
.form-panel { margin-block: var(--space-6); padding: var(--space-6); border: var(--rule) solid var(--line); background: var(--white); border-radius: var(--radius); max-width: var(--reading); }
.form-panel h2 { font: 400 var(--heading)/1.3 var(--font-display); margin-bottom: var(--space-4); }
fieldset { border: 0; padding: 0; margin: var(--space-5) 0 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: var(--space-3); }
label.field-label { display: block; margin-bottom: var(--space-2); font-weight: 600; }
input[type="email"], input[type="text"] { width: 100%; min-height: var(--space-7); padding: var(--space-3); border: var(--rule) solid var(--muted); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--white); }
.check { display: flex; align-items: start; gap: var(--space-3); margin-block: var(--space-4); }
.check input { flex: 0 0 auto; inline-size: var(--space-5); block-size: var(--space-5); margin-top: var(--space-1); accent-color: var(--forest); }
.check span { min-width: 0; }
button:disabled { cursor: not-allowed; opacity: .55; }
.status { margin-top: var(--space-4); padding: var(--space-3); border-left: var(--focus) solid var(--muted); color: var(--muted); }
.status:empty { display: none; }
.code { display: block; overflow-wrap: anywhere; user-select: all; padding: var(--space-4); margin-block: var(--space-4); background: var(--paper); font: var(--body)/1.6 var(--font-mono); }
.trap { position: absolute; inline-size: var(--rule); block-size: var(--rule); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.privacy-copy { max-width: var(--reading); padding-block: var(--space-7); }
.privacy-copy h1 { font-size: var(--hero); }
.privacy-copy h2 { font: 400 var(--heading)/1.3 var(--font-display); margin-block: var(--space-6) var(--space-3); }
.privacy-copy p { margin-bottom: var(--space-4); }
.contact { margin-top: var(--space-4); }
.challenge { min-height: var(--space-8); margin-top: var(--space-5); }
footer { padding-block: var(--space-5); border-top: var(--rule) solid var(--line); color: var(--muted); font-size: var(--small); }
@media (max-width: 36rem) { .form-panel { padding: var(--space-4); } }