/*
       * THREE-DIRECTION CONTRACT
       * Signal Field: a teal editorial observatory; the page network moves and the flagged sentence holds still.
       * The Margin: an almost empty white issue sheet; pacing and typographic interruption do the persuasion.
       * Voice Instrument: a warm black tuning console; four honest measures reshape one live specimen.
       * All three preserve Revisi black, paper and correction pink. Teal is a committed field only in Direction A.
       * Illustrative audit data is labelled. Primary action remains a website URL audit in every direction.
       */
      :root {
        --ink: #111210;
        --paper: #fafaf7;
        --white: #fff;
        --pink: #ff2d6f;
        --pink-dark: #c91650;
        --pink-soft: #ffe4ed;
        --teal: #073f3f;
        --teal-deep: #032f30;
        --teal-light: #b8e7dc;
        --mint: #dff3ea;
        --line: #d9dad4;
        --muted: #666960;
        --ease: cubic-bezier(.16, 1, .3, 1);
        --sans: "Manrope", sans-serif;
        --soft: "Onest", sans-serif;
        --mono: "DM Mono", monospace;
      }

      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
      button, input { font: inherit; }
      button, a { -webkit-tap-highlight-color: transparent; }
      button { cursor: pointer; }
      a { color: inherit; }
      h1, h2, h3, p { margin: 0; text-wrap: pretty; }
      ::selection { background: var(--pink); color: var(--white); }
      .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
      .margin-skip {
        position: fixed;
        z-index: 200;
        top: 12px;
        left: 12px;
        padding: 10px 14px;
        transform: translateY(-160%);
        border: 1px solid var(--black);
        background: var(--paper);
        color: var(--black);
        font-weight: 700;
        text-decoration: none;
      }
      .margin-skip:focus { transform: translateY(0); }
      :focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

      .direction-switcher {
        position: sticky;
        z-index: 100;
        top: 0;
        display: grid;
        min-height: 62px;
        grid-template-columns: minmax(150px, .7fr) minmax(420px, 1.6fr) minmax(190px, .7fr);
        align-items: center;
        border-bottom: 1px solid #353632;
        background: #111210;
        color: #f8f8f4;
        box-shadow: 0 8px 28px rgb(0 0 0 / 12%);
      }
      .switcher-title { padding: 0 22px; font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
      .switcher-tabs { display: grid; height: 100%; grid-template-columns: 1fr; border-inline: 1px solid #353632; }
      .switcher-tabs button {
        position: relative;
        border: 0;
        border-right: 1px solid #353632;
        background: transparent;
        color: #9fa099;
        font-size: 12px;
        transition: background .2s ease, color .2s ease;
      }
      .switcher-tabs button:last-child { border-right: 0; }
      .switcher-tabs button:hover { background: #1d1e1b; color: #fff; }
      .switcher-tabs button:active { background: #282925; }
      .switcher-tabs button[aria-selected="true"] { background: #f7f7f2; color: #111210; }
      .switcher-tabs button[aria-selected="true"]::after { position: absolute; right: 14px; bottom: 11px; left: 14px; height: 2px; background: var(--pink); content: ""; }
      .switcher-note { padding: 0 22px; color: #a9aaa4; font-size: 11px; text-align: right; }
      .switcher-note strong { color: var(--pink); font-weight: 600; }

      .concept { display: none; min-height: 100vh; }
      .concept.is-active { display: block; animation: concept-in .55s var(--ease) both; }
      @keyframes concept-in { from { opacity: .01; clip-path: inset(0 0 12% 0); } to { opacity: 1; clip-path: inset(0); } }

      .mini-wordmark { display: inline-flex; width: 76px; align-items: center; text-decoration: none; }
      .mini-wordmark img { display: block; width: 100%; height: auto; }
      .product-wordmark { display: block; width: 68px; height: auto; }
      .audit-status { min-height: 18px; font-family: var(--mono); font-size: 10px; line-height: 1.5; }
      .audit-status[data-state="error"] { color: #a80e40; }
      .audit-status[data-state="success"] { color: #14704a; }
      .audit-button[aria-busy="true"] { cursor: wait; opacity: .72; }
      .audit-button[aria-busy="true"]::after { display: inline-block; width: 12px; height: 12px; margin-left: 9px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; content: ""; vertical-align: -2px; }
      @keyframes spin { to { rotate: 360deg; } }

      /* Direction A — Signal Field */
      .signal { --signal-paper: #eaf1ed; background: var(--signal-paper); color: #082e2f; font-family: var(--soft); }
      .signal ::selection { background: var(--pink); }
      .signal-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 76px; border-bottom: 1px solid rgb(5 57 58 / 24%); padding: 0 clamp(20px, 4vw, 64px); }
      .signal-nav nav { display: flex; gap: 28px; font-size: 12px; }
      .signal-nav nav a { text-decoration: none; }
      .signal-nav nav a:hover { color: var(--pink-dark); }
      .signal-nav .nav-action { justify-self: end; border-bottom: 1px solid currentColor; padding: 8px 0; font-size: 12px; font-weight: 650; text-decoration: none; }
      .signal-hero { min-height: calc(100svh - 138px); background: var(--teal-deep); color: #eef7f3; overflow: hidden; }
      .signal-hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 470px); gap: 48px; align-items: end; padding: clamp(62px, 8vw, 118px) clamp(20px, 4vw, 64px) 34px; }
      .signal-hero h1 { max-width: 830px; font-size: clamp(56px, 7.5vw, 116px); font-weight: 500; letter-spacing: -.04em; line-height: .9; }
      .signal-hero h1 span { color: var(--teal-light); }
      .signal-intro { display: grid; gap: 26px; align-content: end; padding-bottom: 8px; }
      .signal-intro p { max-width: 42ch; color: #c7dbd5; font-size: 17px; line-height: 1.55; }
      .signal-form { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid #8bb8ae; }
      .signal-form input { min-width: 0; border: 0; background: transparent; color: #f1f8f5; outline: 0; padding: 13px 0; }
      .signal-form input::placeholder { color: #a4c0b9; }
      .signal-form button { min-width: 120px; border: 0; background: var(--pink); color: #fff; padding: 10px 16px; font-weight: 650; transition: background .2s ease, transform .2s ease; }
      .signal-form button:hover { background: #ff4b83; transform: translateY(-2px); }
      .signal-form button:active { transform: translateY(0) scale(.98); }
      .signal .audit-status { color: #9ebcb4; }
      .signal .audit-status[data-state="error"] { color: #ff92b5; }
      .signal .audit-status[data-state="success"] { color: #b8f0d5; }

      .signal-stage { position: relative; min-height: 560px; border-top: 1px solid rgb(184 231 220 / 16%); overflow: hidden; isolation: isolate; }
      .signal-stage::before {
        position: absolute; inset: 0;
        background-image: radial-gradient(circle at center, rgb(184 231 220 / 14%) 0 1px, transparent 1.5px);
        background-size: 34px 34px;
        mask-image: radial-gradient(circle at center, #000, transparent 72%);
        content: "";
      }
      .orbit { position: absolute; border: 1px solid rgb(184 231 220 / 16%); border-radius: 50%; animation: orbit-breathe 8s ease-in-out infinite alternate; }
      .orbit.one { inset: 8% 19%; }
      .orbit.two { inset: 20% 30%; animation-delay: -3s; }
      @keyframes orbit-breathe { to { scale: 1.035; border-color: rgb(184 231 220 / 34%); } }
      .signal-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: min(360px, 42vw); translate: -50% -50%; background: #eff7f3; color: #0a3737; box-shadow: 0 26px 70px rgb(0 20 20 / 36%); }
      .signal-core header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #b7cec7; padding: 13px 16px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .signal-core .sentence { padding: 24px 26px 18px; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.2; }
      .signal-core .sentence mark { background: var(--pink-soft); color: inherit; text-decoration: underline wavy var(--pink) 1.5px; text-underline-offset: 4px; }
      .signal-core footer { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #b7cec7; }
      .signal-core footer span { padding: 12px 8px; border-right: 1px solid #b7cec7; font-family: var(--mono); font-size: 8px; text-align: center; text-transform: uppercase; }
      .signal-core footer span:last-child { border-right: 0; }
      .signal-node { position: absolute; z-index: 4; min-width: 126px; border: 1px solid rgb(184 231 220 / 40%); background: #073a3b; color: #dcece7; padding: 12px 14px; text-align: left; transition: border-color .25s ease, background .25s ease, transform .25s var(--ease); }
      .signal-node:hover, .signal-node[aria-pressed="true"] { border-color: var(--pink); background: #0b4948; transform: translateY(-4px); }
      .signal-node b { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; }
      .signal-node small { color: #93b7ae; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .signal-node.flagged small { color: #ff87ae; }
      .signal-node.n1 { top: 12%; left: 8%; }
      .signal-node.n2 { top: 9%; right: 11%; }
      .signal-node.n3 { bottom: 18%; left: 13%; }
      .signal-node.n4 { right: 8%; bottom: 16%; }
      .signal-node.n5 { top: 48%; left: 3%; }
      .signal-node.n6 { top: 44%; right: 2%; }
      .signal-thread { position: absolute; z-index: 2; height: 1px; background: linear-gradient(90deg, transparent, rgb(184 231 220 / 70%), transparent); transform-origin: left center; animation: signal-pulse 4.8s ease-in-out infinite; }
      .t1 { top: 31%; left: 14%; width: 39%; rotate: 14deg; }
      .t2 { top: 31%; right: 14%; width: 38%; rotate: -14deg; }
      .t3 { bottom: 28%; left: 16%; width: 39%; rotate: -14deg; animation-delay: -2s; }
      .t4 { right: 15%; bottom: 27%; width: 38%; rotate: 14deg; animation-delay: -1s; }
      @keyframes signal-pulse { 0%, 100% { opacity: .25; filter: blur(0); } 50% { opacity: 1; filter: drop-shadow(0 0 4px #b8e7dc); } }
      .signal-stage-legend { position: absolute; right: 20px; bottom: 18px; color: #86aaa2; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }

      .signal-proof { display: grid; grid-template-columns: .7fr 1.3fr; min-height: 720px; border-bottom: 1px solid rgb(5 57 58 / 24%); }
      .signal-proof > header { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(70px, 9vw, 132px) clamp(20px, 5vw, 76px); }
      .signal-proof h2 { max-width: 8ch; font-size: clamp(48px, 6vw, 90px); font-weight: 450; letter-spacing: -.04em; line-height: .94; }
      .signal-proof h2 em { color: var(--pink-dark); font-style: normal; }
      .signal-proof > header p { max-width: 36ch; color: #486464; line-height: 1.55; }
      .signal-ledger { display: grid; align-content: center; border-left: 1px solid rgb(5 57 58 / 24%); background: #f4f8f5; padding: clamp(38px, 6vw, 90px); }
      .ledger-row { display: grid; grid-template-columns: 110px 1fr 58px; gap: 24px; align-items: baseline; border-bottom: 1px solid #cbd9d3; padding: 27px 0; }
      .ledger-row span, .ledger-row b { font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; }
      .ledger-row p { font-size: clamp(18px, 2vw, 27px); line-height: 1.35; }
      .ledger-row.is-flagged p { text-decoration: underline wavy var(--pink) 1.5px; text-underline-offset: 5px; }
      .ledger-row.is-flagged b { color: var(--pink-dark); }
      .signal-final { display: grid; min-height: 520px; place-items: center; background: var(--teal-deep); color: #edf7f3; padding: 72px 20px; text-align: center; }
      .signal-final h2 { max-width: 12ch; font-size: clamp(54px, 7vw, 104px); font-weight: 450; letter-spacing: -.04em; line-height: .92; }
      .signal-final a { display: inline-block; margin-top: 40px; border-bottom: 2px solid var(--pink); padding: 12px 2px; font-size: 16px; font-weight: 650; text-decoration: none; }

      /* Direction B — The Margin */
      .margin-world { background: #fbfbf8; color: #141512; font-family: var(--sans); }
      .margin-nav { display: grid; min-height: 74px; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 clamp(20px, 3.5vw, 58px); }
      .margin-nav nav { display: flex; gap: 30px; font-size: 14px; }
      .margin-nav nav a { text-decoration-color: transparent; text-underline-offset: 5px; }
      .margin-nav nav a:hover { text-decoration-color: var(--pink); }
      .margin-nav-actions { display: flex; gap: 10px; justify-self: end; }
      .margin-nav-action { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border: 1px solid #111210; padding: 0 18px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
      .margin-nav-action:hover { background: #111210; color: #fff; }
      .margin-nav-action.is-primary { border-color: var(--pink); background: var(--pink); color: #fff; }
      .margin-nav-action.is-primary:hover { border-color: var(--pink-dark); background: var(--pink-dark); }
      .margin-hero { display: grid; min-height: calc(100svh - 136px); grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); gap: 64px; align-items: center; padding: clamp(68px, 7vw, 108px) clamp(20px, 3.5vw, 58px); }
      .margin-hero h1 { max-width: 10ch; align-self: center; font-size: clamp(64px, 8.2vw, 124px); font-weight: 500; letter-spacing: -.04em; line-height: .95; transform: translateY(-20px); }
      .margin-hero h1 .margin-line { display: block; overflow: hidden; margin-block: -.03em -.09em; padding-block: .08em .16em; }
      .margin-hero h1 .margin-line > span { display: block; }
      .margin-hero h1 .really { position: relative; display: inline-block; font-style: normal; }
      .margin-hero h1 .really::after { position: absolute; right: 0; bottom: -.1em; left: 0; height: .09em; background: var(--pink); content: ""; transform-origin: left; animation: draw-line 1.2s .45s var(--ease) both; }
      @keyframes draw-line { from { transform: scaleX(0); } }
      .margin-hero-aside { display: grid; min-height: 390px; align-self: center; align-content: space-between; }
      .margin-hero-aside > p { max-width: 36ch; color: #50524c; font-size: 16px; line-height: 1.6; }
      .margin-form { display: grid; gap: 10px; }
      .margin-form label { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
      .margin-field { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid #181916; }
      .margin-field input { min-width: 0; border: 0; background: transparent; outline: 0; padding: 17px 0; font-size: 17px; }
      .margin-field button { min-width: 118px; border: 0; background: transparent; color: #111; font-weight: 650; text-align: right; transition: color .2s ease, transform .2s ease; }
      .margin-field button:hover { color: var(--pink-dark); transform: translateX(3px); }
      .margin-field button:active { transform: translateX(0); }
      .margin-world .audit-status { color: #74766f; }

      .margin-live-read {
        --read-progress: 0;
        --read-scale: .97;
        --read-y: 18%;
        position: relative;
        min-height: 210svh;
        overflow: clip;
        background: #171815;
        color: #f7f7f1;
      }
      .margin-read-sticky {
        position: sticky;
        top: 62px;
        display: grid;
        height: calc(100svh - 62px);
        min-height: 620px;
        grid-template-rows: auto minmax(0, 1fr) auto;
        gap: 24px;
        padding: 30px clamp(20px, 3.5vw, 58px);
      }
      .margin-read-head,
      .margin-read-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
      .margin-read-head span:last-child,
      .margin-read-footer > span:first-child { color: #aeb0a8; }
      .margin-read-head i { display: inline-block; width: 6px; height: 6px; margin-right: 8px; background: var(--pink); border-radius: 50%; }
      .margin-read-stage { position: relative; min-height: 0; margin: 0; }
      .margin-specimen-shell {
        position: absolute;
        inset: 0;
        overflow: hidden;
        border: 1px solid #5b5c56;
        background: #f8f8f4;
        color: #161714;
        box-shadow: 0 32px 90px rgb(0 0 0 / 32%);
        scale: var(--read-scale);
        transform-origin: center;
        transition: scale .16s linear;
      }
      .margin-platform-bar { display: grid; height: 52px; grid-template-columns: 178px 1fr auto; align-items: center; border-bottom: 1px solid #d4d5cf; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
      .margin-platform-bar > * { display: flex; height: 100%; align-items: center; border-right: 1px solid #d4d5cf; padding: 0 16px; }
      .margin-platform-bar span { color: #656761; }
      .margin-platform-bar b { border-right: 0; color: var(--pink-dark); font-weight: 500; }
      .margin-platform-body { display: grid; height: calc(100% - 52px); grid-template-columns: 178px minmax(0, 1fr); }
      .margin-platform-pages { border-right: 1px solid #d4d5cf; padding: 18px 12px; background: #f1f1ec; }
      .margin-platform-pages > span { display: flex; justify-content: space-between; margin-bottom: 14px; color: #696b64; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-platform-page { display: grid; grid-template-columns: 1fr auto; gap: 5px; border-top: 1px solid #d4d5cf; padding: 12px 5px; font-size: 10px; }
      .margin-platform-page small { grid-column: 1 / -1; color: #7b7d75; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .margin-platform-page.is-current { margin-inline: -12px; border-color: var(--pink); background: #fff4f8; padding-inline: 17px; }
      .margin-platform-page.is-current b { color: var(--pink-dark); }
      .margin-platform-workspace { display: grid; min-width: 0; grid-template-rows: 96px minmax(0, 1fr); }
      .margin-platform-summary { display: grid; grid-template-columns: 126px repeat(4, 1fr); border-bottom: 1px solid #d4d5cf; }
      .margin-platform-score,
      .margin-platform-metric { display: flex; min-width: 0; flex-direction: column; justify-content: center; border-right: 1px solid #d4d5cf; padding: 12px 16px; }
      .margin-platform-summary > :last-child { border-right: 0; }
      .margin-platform-score span,
      .margin-platform-metric span { display: flex; justify-content: space-between; color: #60625a; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .margin-platform-score strong { position: relative; display: block; min-height: 40px; margin-top: 6px; font-size: 38px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
      .margin-platform-score strong b,
      .margin-platform-score strong del { position: absolute; inset: 0 auto auto 0; transition: opacity .4s ease, translate .4s var(--ease); }
      .margin-platform-score strong b { color: var(--pink-dark); opacity: 1; }
      .margin-platform-score strong del { opacity: 0; text-decoration-color: var(--pink); translate: 0 -8px; }
      .margin-live-read[data-state="scanning"] .margin-platform-score strong b,
      .margin-live-read[data-state="flagged"] .margin-platform-score strong b { opacity: 0; translate: 0 8px; }
      .margin-live-read[data-state="scanning"] .margin-platform-score strong del,
      .margin-live-read[data-state="flagged"] .margin-platform-score strong del { opacity: 1; translate: 0; }
      .margin-platform-metric i { display: block; height: 3px; margin-top: 16px; background: #dedfd9; }
      .margin-platform-metric i::after { display: block; width: 100%; height: 100%; background: #232420; content: ""; scale: var(--metric) 1; transform-origin: left; transition: scale .7s var(--ease), background .5s ease; }
      .margin-live-read[data-state="revised"] .margin-platform-metric i::after { background: var(--pink-dark); }
      .margin-platform-audit { display: grid; min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(270px, .42fr); }
      .margin-platform-sentences { min-width: 0; overflow: hidden; border-right: 1px solid #d4d5cf; padding: 18px clamp(16px, 2.5vw, 36px); }
      .margin-platform-sentences > header { display: flex; justify-content: space-between; margin-bottom: 14px; color: #6f716a; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-platform-sentence { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 36px; gap: 14px; align-items: start; border-top: 1px solid #dedfd9; padding: 15px 8px; color: #5e6059; font-size: clamp(10px, .9vw, 13px); line-height: 1.35; }
      .margin-platform-sentence > span,
      .margin-platform-sentence > b { font-family: var(--mono); font-size: 7px; font-weight: 400; }
      .margin-platform-sentence > b { color: #777970; text-align: right; }
      .margin-platform-sentence.is-selected { border-color: var(--pink); background: #fff2f6; color: #151613; }
      .margin-platform-sentence.is-selected > b { color: var(--pink-dark); }
      .margin-sentence-state-score { position: relative; display: grid; min-height: 12px; place-items: start end; }
      .margin-sentence-state-score del,
      .margin-sentence-state-score span { grid-column: 1; grid-row: 1; transition: opacity .4s ease, translate .4s var(--ease); }
      .margin-sentence-state-score del { opacity: 0; text-decoration-color: var(--pink); translate: 0 -6px; }
      .margin-sentence-state-score span { opacity: 1; }
      .margin-live-read[data-state="scanning"] .margin-sentence-state-score del,
      .margin-live-read[data-state="flagged"] .margin-sentence-state-score del { opacity: 1; translate: 0; }
      .margin-live-read[data-state="scanning"] .margin-sentence-state-score span,
      .margin-live-read[data-state="flagged"] .margin-sentence-state-score span { opacity: 0; translate: 0 6px; }
      .margin-platform-sentence-copy { position: relative; min-height: 38px; }
      .margin-platform-sentence-copy em { position: absolute; inset: 0; font-style: normal; transition: opacity .48s var(--ease), translate .48s var(--ease), clip-path .5s var(--ease); }
      .margin-platform-sentence-copy .sentence-before { opacity: 0; translate: 0 -9px; clip-path: inset(0 0 100% 0); }
      .margin-platform-sentence-copy .sentence-after { opacity: 1; }
      .margin-live-read[data-state="scanning"] .margin-platform-sentence-copy .sentence-before,
      .margin-live-read[data-state="flagged"] .margin-platform-sentence-copy .sentence-before { opacity: 1; translate: 0; clip-path: inset(0); }
      .margin-live-read[data-state="scanning"] .margin-platform-sentence-copy .sentence-after,
      .margin-live-read[data-state="flagged"] .margin-platform-sentence-copy .sentence-after { opacity: 0; translate: 0 9px; clip-path: inset(100% 0 0); }
      .margin-platform-inspector { min-width: 0; background: #fff; padding: 20px; opacity: 1; translate: 0; transition: opacity .4s ease, translate .52s var(--ease); }
      .margin-live-read[data-state="scanning"] .margin-platform-inspector { opacity: 0; translate: 28px 0; }
      .margin-platform-inspector > header { display: flex; justify-content: space-between; border-bottom: 1px solid var(--pink-soft); padding-bottom: 12px; color: var(--pink-dark); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-platform-inspector h3 { margin-top: clamp(24px, 4vh, 48px); font-size: clamp(22px, 2.3vw, 36px); font-weight: 480; letter-spacing: -.03em; line-height: 1; }
      .margin-platform-inspector > p { margin-top: 16px; color: #5d5f58; font-size: 12px; line-height: 1.5; }
      .margin-platform-compare { display: grid; gap: 8px; margin-top: 26px; }
      .margin-platform-compare div { border: 1px solid #dedfd9; padding: 10px; }
      .margin-platform-compare div:last-child { border-color: var(--pink); background: #fff5f8; }
      .margin-platform-compare small { display: block; margin-bottom: 6px; color: #6d6f68; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .margin-platform-compare p { font-size: 10px; line-height: 1.35; }
      .margin-scan-line { position: absolute; z-index: 3; top: var(--read-y); right: 0; left: 0; height: 2px; background: var(--pink); box-shadow: 0 0 0 1px rgb(255 45 111 / 12%); opacity: .78; pointer-events: none; transition: opacity .35s ease; }
      .margin-scan-line::after { position: absolute; top: 8px; left: 10px; color: var(--pink); content: "READING LINE"; font-family: var(--mono); font-size: 7px; letter-spacing: .06em; }
      .margin-live-read[data-state="revised"] .margin-scan-line { opacity: 0; }
      .margin-read-score { position: relative; display: inline-grid; min-width: 82px; grid-template-columns: auto 30px; gap: 10px; align-items: baseline; }
      .margin-read-score > span { color: #aeb0a8; }
      .margin-read-score b { grid-column: 2; grid-row: 1; color: var(--pink); font-size: 18px; font-weight: 500; opacity: 1; translate: 0; transition: opacity .4s ease, translate .4s var(--ease); }
      .margin-read-score del { grid-column: 2; grid-row: 1; color: #f7f7f1; font-size: 18px; opacity: 0; text-decoration-color: var(--pink); translate: 0 -8px; transition: opacity .4s ease, translate .4s var(--ease); }
      .margin-live-read[data-state="scanning"] .margin-read-score b,
      .margin-live-read[data-state="flagged"] .margin-read-score b { opacity: 0; translate: 0 8px; }
      .margin-live-read[data-state="scanning"] .margin-read-score del,
      .margin-live-read[data-state="flagged"] .margin-read-score del { opacity: 1; translate: 0; }

      .margin-manifesto { min-height: 1260px; border-top: 1px solid #dedfd9; padding: 170px clamp(20px, 8vw, 124px); }
      .margin-manifesto .statement { max-width: 920px; font-size: clamp(45px, 6.2vw, 94px); font-weight: 420; letter-spacing: -.04em; line-height: .98; }
      .margin-manifesto .statement mark { background: linear-gradient(transparent 58%, var(--pink-soft) 58%); background-position: left center; background-repeat: no-repeat; color: inherit; }
      .margin-finding { display: grid; max-width: 760px; grid-template-columns: 112px 1fr; gap: 44px; margin: 430px 0 0 auto; }
      .margin-finding > span { padding-top: 5px; font-family: var(--mono); font-size: 9px; line-height: 1.5; text-transform: uppercase; }
      .margin-finding blockquote { margin: 0; }
      .margin-finding blockquote p { font-size: clamp(25px, 3vw, 40px); line-height: 1.35; }
      .margin-finding blockquote p:first-child { text-decoration: underline wavy var(--pink) 1.5px; text-underline-offset: 6px; }
      .margin-finding blockquote footer { display: flex; justify-content: space-between; margin-top: 28px; border-top: 1px solid #dedfd9; padding-top: 13px; color: #666861; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .margin-capabilities { position: relative; overflow: hidden; border-top: 1px solid #dedfd9; background: #efefe9; padding: clamp(78px, 8vw, 124px) clamp(20px, 5vw, 78px); }
      .margin-capabilities > header { display: grid; max-width: 1560px; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .55fr); gap: clamp(42px, 8vw, 130px); align-items: end; margin: 0 auto; }
      .margin-capabilities h2 { max-width: 17ch; font-size: clamp(46px, 5.3vw, 78px); font-weight: 460; letter-spacing: -.04em; line-height: .96; }
      .margin-capabilities > header p { max-width: 43ch; justify-self: end; color: #555750; font-size: 17px; line-height: 1.55; }
      .margin-capability-grid { display: grid; max-width: 1560px; grid-template-areas: "voice priority evidence evidence" "history monitoring evidence evidence"; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 275px); gap: 16px; margin: clamp(48px, 5vw, 70px) auto 0; }
      .capability-card { position: relative; display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid #c9cac3; background: #f8f8f4; padding: clamp(18px, 1.8vw, 28px); transition: border-color .25s ease, box-shadow .25s ease, translate .25s var(--ease); }
      .capability-card::after { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--pink); content: ""; scale: 0 1; transform-origin: left; transition: scale .35s var(--ease); }
      .capability-card:hover { border-color: #aeb0a8; box-shadow: 0 22px 50px rgb(30 31 27 / 9%); translate: 0 -3px; }
      .capability-card:hover::after { scale: 1 1; }
      .capability-card--voice { grid-area: voice; background: #fff2f6; }
      .capability-card--priority { grid-area: priority; background: #f2edff; }
      .capability-card--evidence { grid-area: evidence; min-height: 566px; background: #f8f8f4; }
      .capability-card--history { grid-area: history; background: #e9f7fb; }
      .capability-card--monitoring { grid-area: monitoring; background: #eaf6ef; }
      .capability-copy { margin-top: auto; padding-top: clamp(14px, 2vw, 28px); }
      .capability-copy h3 { font-size: clamp(21px, 1.7vw, 28px); font-weight: 560; letter-spacing: -.035em; line-height: 1.02; }
      .capability-copy p { max-width: 36ch; margin-top: 8px; color: #4f514a; font-size: 12px; line-height: 1.45; }
      .capability-card--evidence .capability-copy { display: grid; grid-template-columns: minmax(0, .65fr) minmax(240px, .7fr); gap: 42px; align-items: end; }
      .capability-ui { overflow: hidden; border: 1px solid rgb(30 31 27 / 18%); background: rgb(255 255 255 / 72%); color: #1b1c19; }
      .capability-ui-bar { display: flex; min-height: 28px; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgb(30 31 27 / 15%); padding: 0 10px; color: #686a63; font-family: var(--mono); font-size: 7px; letter-spacing: .03em; text-transform: uppercase; }
      .capability-ui-bar b { color: var(--pink-dark); font-weight: 500; }
      .cap-profile { display: grid; gap: 4px; padding: 8px; }
      .cap-profile-name { display: flex; min-height: 32px; align-items: center; justify-content: space-between; border: 1px solid #d2d3cd; background: #fff; padding: 0 9px; font-size: 10px; font-weight: 650; }
      .cap-profile-name span:last-child { color: #197b4c; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .cap-profile-row { display: flex; min-height: 18px; align-items: center; justify-content: space-between; border-bottom: 1px solid #d9dad4; padding: 2px 1px; color: #60625b; font-size: 8px; }
      .cap-profile-row b { color: #20211e; font-weight: 540; }
      .cap-page-list { display: grid; padding: 5px; }
      .cap-page { display: grid; min-height: 22px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid #d9dad4; padding: 0 7px; font-size: 8px; }
      .cap-page:last-child { border-bottom: 0; }
      .cap-page b { font-family: var(--mono); font-size: 8px; font-weight: 500; }
      .cap-page.is-priority { border: 1px solid var(--pink); background: #fff1f6; color: var(--pink-dark); }
      .cap-history-chart { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 9px 10px 5px; }
      .cap-history-scale { display: flex; flex-direction: column; justify-content: space-between; color: #777970; font-family: var(--mono); font-size: 6px; }
      .cap-history-chart svg { display: block; width: 100%; height: 60px; overflow: visible; }
      .cap-history-meta { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #d9dad4; }
      .cap-history-meta div { padding: 6px 8px; border-right: 1px solid #d9dad4; }
      .cap-history-meta div:last-child { border-right: 0; }
      .cap-history-meta small { display: block; color: #74766f; font-family: var(--mono); font-size: 6px; text-transform: uppercase; }
      .cap-history-meta b { display: block; margin-top: 3px; font-size: 11px; font-weight: 580; }
      .cap-monitor { display: grid; gap: 5px; padding: 9px; }
      .cap-monitor-row { display: grid; min-height: 29px; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; border-bottom: 1px solid #d9dad4; font-size: 8px; }
      .cap-monitor-row i { width: 7px; height: 7px; border-radius: 50%; background: #197b4c; }
      .cap-monitor-row small { color: #666861; font-family: var(--mono); font-size: 6px; text-transform: uppercase; }
      .cap-monitor-summary { display: flex; min-height: 31px; align-items: center; justify-content: space-between; margin-top: 1px; border: 1px solid #bfd8ca; background: #f7fcf9; padding: 7px 8px; font-size: 8px; }
      .cap-monitor-summary b { color: #105b37; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .cap-evidence-ui { display: grid; min-height: 320px; grid-template-columns: minmax(0, 1.05fr) minmax(220px, .75fr); }
      .cap-evidence-document { min-width: 0; border-right: 1px solid #d1d2cc; background: #fff; padding: 16px; }
      .cap-evidence-document > header { display: flex; justify-content: space-between; border-bottom: 1px solid #d9dad4; padding-bottom: 11px; color: #6b6d65; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .cap-evidence-lines { display: grid; margin-top: 8px; }
      .cap-evidence-line { display: grid; min-height: 40px; grid-template-columns: 22px minmax(0, 1fr) 24px; gap: 9px; align-items: center; border-bottom: 1px solid #e0e1dc; color: #4e5049; font-size: 8px; line-height: 1.35; }
      .cap-evidence-line span, .cap-evidence-line b { font-family: var(--mono); font-size: 7px; font-weight: 400; }
      .cap-evidence-line.is-flagged { margin-inline: -16px; border-top: 1px solid var(--pink); border-bottom-color: var(--pink); background: #fff0f5; padding-inline: 16px; color: #1b1c19; }
      .cap-evidence-line.is-flagged p { text-decoration: underline var(--pink) 2px; text-underline-offset: 4px; }
      .cap-evidence-line.is-flagged b { color: var(--pink-dark); }
      .cap-evidence-finding { display: flex; min-width: 0; flex-direction: column; background: #fff4f8; padding: clamp(20px, 2.4vw, 36px); }
      .cap-evidence-finding > small { color: var(--pink-dark); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .cap-evidence-finding h4 { max-width: 11ch; margin: 24px 0 0; font-size: clamp(23px, 2vw, 34px); font-weight: 520; letter-spacing: -.035em; line-height: 1; }
      .cap-evidence-finding > p { max-width: 30ch; margin-top: 13px; color: #555750; font-size: 11px; line-height: 1.45; }
      .cap-rewrite { margin-top: auto; border-top: 1px solid #efb3c7; padding-top: 15px; }
      .cap-rewrite small { color: var(--pink-dark); font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .cap-rewrite p { margin-top: 8px; font-size: 13px; font-weight: 580; line-height: 1.35; }
      .margin-progress { position: fixed; z-index: 30; top: 50%; right: 13px; display: grid; width: 18px; height: 190px; grid-template-rows: 1fr auto; translate: 0 -50%; pointer-events: none; }
      .margin-progress-track { position: relative; justify-self: center; width: 1px; background: #d3d4ce; }
      .margin-progress-track i { position: absolute; inset: 0; background: var(--pink); transform: scaleY(var(--margin-progress, 0)); transform-origin: top; transition: transform .12s linear; }
      .margin-progress span { margin-top: 11px; color: #74766f; font-family: var(--mono); font-size: 7px; letter-spacing: .08em; writing-mode: vertical-rl; }
      .motion-ready [data-margin-reveal="headline"] .margin-line > span { transform: translateY(112%); }
      .motion-ready [data-margin-reveal="headline"].is-inview .margin-line > span { animation: margin-line-in .72s var(--ease) both; }
      .motion-ready [data-margin-reveal="headline"].is-inview .margin-line:nth-child(2) > span { animation-delay: .08s; }
      .motion-ready [data-margin-reveal="headline"].is-inview .margin-line:nth-child(3) > span { animation-delay: .16s; }
      .motion-ready [data-margin-reveal="headline"].is-inview .margin-line:nth-child(4) > span { animation-delay: .24s; }
      .motion-ready .margin-manifesto .statement mark { background-size: 0 100%; transition: background-size .9s .15s var(--ease); }
      .motion-ready .margin-manifesto .statement.is-inview mark { background-size: 100% 100%; }
      .motion-ready .margin-finding blockquote p { clip-path: inset(0 100% 0 0); }
      .motion-ready .margin-finding.is-inview blockquote p { animation: margin-read-across .85s var(--ease) both; }
      .motion-ready .margin-finding.is-inview blockquote p:nth-child(2) { animation-delay: .36s; }
      .motion-ready .margin-capability-grid .capability-card { opacity: .35; translate: 0 18px; transition: opacity .55s ease, translate .65s var(--ease), border-color .25s ease, box-shadow .25s ease; }
      .motion-ready .margin-capabilities.is-inview .capability-card { opacity: 1; translate: 0; }
      .motion-ready .margin-capabilities.is-inview .capability-card:nth-child(2) { transition-delay: .08s; }
      .motion-ready .margin-capabilities.is-inview .capability-card:nth-child(3) { transition-delay: .16s; }
      .motion-ready .margin-capabilities.is-inview .capability-card:nth-child(4) { transition-delay: .24s; }
      .motion-ready .margin-capabilities.is-inview .capability-card:nth-child(5) { transition-delay: .32s; }
      .motion-ready .margin-capabilities.is-inview .cap-evidence-line.is-flagged p { animation: evidence-mark-in .8s .5s var(--ease) both; }
      @keyframes margin-line-in { from { transform: translateY(112%); } to { transform: translateY(0); } }
      @keyframes margin-read-across { from { clip-path: inset(0 100% 0 0); filter: blur(5px); } to { clip-path: inset(0); filter: blur(0); } }
      @keyframes evidence-mark-in { from { text-decoration-color: transparent; } }
      .margin-quote { display: grid; min-height: 680px; place-items: center; border-top: 1px solid var(--pink-dark); background: var(--pink); color: #fff; padding: 90px 24px; text-align: center; }
      .margin-quote blockquote { max-width: 1120px; margin: 0; font-size: clamp(52px, 7vw, 104px); font-weight: 540; letter-spacing: -.04em; line-height: .92; }
      .margin-quote small { display: block; margin-top: 34px; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
      .margin-final { display: grid; min-height: 760px; place-items: center; border-top: 1px solid #dedfd9; padding: 90px 20px; text-align: center; }
      .margin-final h2 { max-width: 10ch; font-size: clamp(62px, 8vw, 120px); font-weight: 450; letter-spacing: -.045em; line-height: .88; }
      .margin-final a { display: inline-block; margin-top: 50px; background: var(--pink); color: #fff; padding: 17px 26px; font-weight: 650; text-decoration: none; transition: background .2s ease, transform .2s ease; }
      .margin-final a:hover { background: var(--pink-dark); transform: translateY(-3px); }

      /* Direction C — Voice Instrument */
      .instrument { background: #161714; color: #f3f3ed; font-family: var(--soft); }
      .instrument-nav { display: grid; min-height: 78px; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #3a3b35; padding: 0 clamp(20px, 4vw, 64px); }
      .instrument-nav .mini-wordmark { color: #f3f3ed; }
      .instrument-nav nav { display: flex; gap: 28px; color: #a8aaa1; font-size: 11px; }
      .instrument-nav nav a { text-decoration: none; }
      .instrument-nav nav a:hover { color: #fff; }
      .instrument-nav > a:last-child { justify-self: end; color: var(--pink); font-size: 12px; text-decoration: none; }
      .instrument-hero { min-height: calc(100svh - 140px); }
      .instrument-title { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 56px; align-items: end; border-bottom: 1px solid #3a3b35; padding: clamp(68px, 8vw, 120px) clamp(20px, 4vw, 64px) 54px; }
      .instrument-title h1 { max-width: 950px; font-family: var(--sans); font-size: clamp(58px, 7.6vw, 116px); font-weight: 420; letter-spacing: -.04em; line-height: .9; }
      .instrument-title h1 em { color: var(--pink); font-style: normal; }
      .instrument-title p { max-width: 41ch; color: #b6b8af; font-size: 17px; line-height: 1.55; }
      .instrument-console { display: grid; grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); min-height: 600px; }
      .instrument-controls { display: grid; align-content: start; border-right: 1px solid #3a3b35; padding: 42px clamp(20px, 4vw, 64px); }
      .instrument-controls > header { display: flex; justify-content: space-between; margin-bottom: 42px; color: #9fa198; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .dial { display: grid; grid-template-columns: 110px 1fr 34px; gap: 20px; align-items: center; border-top: 1px solid #3a3b35; padding: 22px 0; }
      .dial label { font-size: 13px; }
      .dial output { color: var(--pink); font-family: var(--mono); font-size: 11px; text-align: right; }
      .dial input { width: 100%; height: 18px; appearance: none; background: transparent; }
      .dial input::-webkit-slider-runnable-track { height: 1px; background: #777970; }
      .dial input::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -7px; appearance: none; border: 2px solid #171815; background: var(--pink); box-shadow: 0 0 0 1px var(--pink); border-radius: 50%; }
      .dial input::-moz-range-track { height: 1px; background: #777970; }
      .dial input::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid #171815; background: var(--pink); box-shadow: 0 0 0 1px var(--pink); border-radius: 50%; }
      .instrument-form { display: grid; grid-template-columns: 1fr auto; margin-top: 44px; border: 1px solid #60625a; }
      .instrument-form input { min-width: 0; border: 0; background: transparent; color: #f2f2ed; outline: 0; padding: 15px; }
      .instrument-form input::placeholder { color: #8d8f86; }
      .instrument-form button { border: 0; border-left: 1px solid #60625a; background: var(--pink); color: #fff; padding: 10px 17px; font-weight: 650; transition: background .2s ease; }
      .instrument-form button:hover { background: #ff4c83; }
      .instrument .audit-status { margin-top: 10px; color: #989a91; }
      .instrument .audit-status[data-state="error"] { color: #ff8fb2; }
      .instrument .audit-status[data-state="success"] { color: #aee0c7; }
      .specimen { display: flex; min-width: 0; flex-direction: column; justify-content: space-between; background: #ecece4; color: #151613; padding: 42px clamp(22px, 5vw, 78px); }
      .specimen header { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .specimen-copy { max-width: 980px; font-family: var(--sans); font-size: clamp(44px, 6vw, 92px); font-variation-settings: "wght" var(--specimen-weight, 540); font-weight: var(--specimen-weight, 540); letter-spacing: var(--specimen-track, -0.035em); line-height: var(--specimen-leading, .94); transition: font-weight .28s var(--ease), letter-spacing .28s var(--ease), line-height .28s var(--ease); }
      .specimen-copy span { position: relative; }
      .specimen-copy span::after { position: absolute; right: 0; bottom: -.04em; left: 0; height: 4px; background: var(--pink); content: ""; transform: scaleX(var(--underline, .65)); transform-origin: left; transition: transform .35s var(--ease); }
      .specimen footer { display: flex; justify-content: space-between; gap: 22px; border-top: 1px solid #bebfb8; padding-top: 15px; color: #5f615a; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .instrument-method { background: #ecece4; color: #151613; }
      .instrument-method > header { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; border-top: 1px solid #b9bbb3; padding: 120px clamp(20px, 5vw, 80px) 68px; }
      .instrument-method h2 { max-width: 8ch; font-family: var(--sans); font-size: clamp(52px, 7vw, 104px); font-weight: 450; letter-spacing: -.04em; line-height: .92; }
      .instrument-method header p { max-width: 42ch; justify-self: end; color: #555750; font-size: 17px; line-height: 1.6; }
      .method-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #b9bbb3; border-bottom: 1px solid #b9bbb3; }
      .method-strip article { display: flex; min-height: 470px; flex-direction: column; padding: 32px clamp(22px, 3.2vw, 52px); }
      .method-strip article + article { border-left: 1px solid #b9bbb3; }
      .method-strip small { font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .method-strip h3 { max-width: 11ch; margin-top: auto; font-size: clamp(26px, 3vw, 43px); font-weight: 480; line-height: 1; }
      .method-strip p { max-width: 35ch; margin-top: 20px; color: #5f615a; line-height: 1.55; }
      .method-strip .mini-readout { display: flex; justify-content: space-between; margin-top: 36px; border-top: 1px solid #b9bbb3; border-bottom: 1px solid #b9bbb3; padding: 10px 0; color: #696b64; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .instrument-quote { display: grid; min-height: 680px; place-items: center; background: var(--pink); color: #171815; padding: 80px 20px; text-align: center; }
      .instrument-quote blockquote { max-width: 1100px; margin: 0; font-family: var(--sans); font-size: clamp(48px, 7vw, 104px); font-weight: 570; letter-spacing: -.04em; line-height: .92; }
      .instrument-quote small { display: block; margin-top: 32px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .instrument-final { display: grid; min-height: 600px; grid-template-columns: 1.2fr .8fr; gap: 50px; align-items: end; padding: 90px clamp(20px, 5vw, 80px); }
      .instrument-final h2 { max-width: 9ch; font-family: var(--sans); font-size: clamp(58px, 7vw, 108px); font-weight: 430; letter-spacing: -.04em; line-height: .9; }
      .instrument-final > div { display: grid; gap: 12px; }
      .instrument-final a { display: block; border: 1px solid #6b6d64; padding: 16px 20px; text-align: center; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
      .instrument-final a:first-child { border-color: var(--pink); background: var(--pink); color: #fff; }
      .instrument-final a:hover { background: #f2f2ed; color: #171815; transform: translateY(-2px); }
      .instrument-final small { color: #96988f; font-family: var(--mono); font-size: 9px; text-align: center; text-transform: uppercase; }

      @media (max-width: 900px) {
        .direction-switcher { grid-template-columns: 118px 1fr; }
        .switcher-title { padding-inline: 14px; }
        .switcher-note { display: none; }
        .signal-nav, .instrument-nav { grid-template-columns: 1fr auto; }
        .signal-nav nav, .instrument-nav nav { display: none; }
        .signal-hero-copy, .margin-hero, .instrument-title, .signal-proof, .margin-capabilities > header, .instrument-console, .instrument-method > header, .instrument-final { grid-template-columns: 1fr; }
        .signal-stage { min-height: 620px; }
        .signal-core { width: min(420px, 70vw); }
        .signal-proof > header { min-height: 560px; }
        .signal-ledger, .instrument-controls { border-top: 1px solid currentColor; border-left: 0; }
        .margin-hero-aside { min-height: 310px; }
        .margin-platform-bar { grid-template-columns: 150px 1fr auto; }
        .margin-platform-body { grid-template-columns: 150px minmax(0, 1fr); }
        .margin-platform-summary { grid-template-columns: 110px repeat(4, 1fr); }
        .margin-platform-score, .margin-platform-metric { padding-inline: 10px; }
        .margin-platform-audit { grid-template-columns: minmax(0, 1fr) minmax(250px, .46fr); }
        .margin-manifesto { min-height: 1100px; }
        .margin-finding { margin-top: 330px; }
        .margin-capabilities > header p { justify-self: start; }
        .margin-capability-grid { grid-template-areas: "voice priority" "evidence evidence" "history monitoring"; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
        .capability-card { min-height: 280px; }
        .capability-card--evidence { min-height: 540px; }
        .instrument-controls { border-right: 0; }
        .specimen { min-height: 600px; }
      }

      @media (max-width: 620px) {
        .direction-switcher { position: relative; min-height: 66px; grid-template-columns: 1fr; }
        .switcher-title { display: none; }
        .switcher-tabs { min-height: 66px; border-inline: 0; }
        .switcher-tabs button { padding: 10px 8px; font-size: 10px; }
        .switcher-tabs button[aria-selected="true"]::after { right: 8px; bottom: 10px; left: 8px; }
        .signal-nav, .margin-nav, .instrument-nav { min-height: 66px; padding-inline: 17px; }
        .margin-nav nav, .signal-nav .nav-action { display: none; }
        .signal-hero-copy { padding-inline: 17px; }
        .signal-hero h1 { font-size: 56px; }
        .signal-stage { min-height: 680px; }
        .signal-core { top: 47%; width: calc(100% - 66px); }
        .signal-core footer { grid-template-columns: repeat(2, 1fr); }
        .signal-core footer span:nth-child(2) { border-right: 0; }
        .signal-core footer span:nth-child(-n+2) { border-bottom: 1px solid #b7cec7; }
        .signal-node { min-width: 112px; padding: 10px; }
        .signal-node.n1 { top: 5%; left: 17px; }
        .signal-node.n2 { top: 6%; right: 17px; }
        .signal-node.n3 { bottom: 8%; left: 17px; }
        .signal-node.n4 { right: 17px; bottom: 7%; }
        .signal-node.n5, .signal-node.n6, .signal-thread { display: none; }
        .signal-proof > header, .signal-ledger { padding-inline: 17px; }
        .ledger-row { grid-template-columns: 80px 1fr; gap: 14px; }
        .ledger-row b { grid-column: 2; }
        .margin-hero { min-height: auto; gap: 86px; align-items: start; padding: 82px 17px; }
        .margin-hero h1 { align-self: start; font-size: 60px; line-height: .96; transform: translateY(-8px); }
        .margin-live-read { min-height: auto; }
        .margin-read-sticky { position: relative; top: auto; height: auto; min-height: 0; gap: 18px; padding: 72px 17px; }
        .margin-read-head { align-items: flex-start; }
        .margin-read-head span:last-child { max-width: 15ch; text-align: right; }
        .margin-read-stage { display: grid; gap: 16px; }
        .margin-specimen-shell { position: relative; inset: auto; min-height: 760px; scale: 1; }
        .margin-platform-bar { grid-template-columns: 1fr auto; }
        .margin-platform-bar > span { display: none; }
        .margin-platform-bar > * { border-right: 0; }
        .margin-platform-bar b { border-left: 1px solid #d4d5cf; }
        .margin-platform-body { height: calc(100% - 52px); grid-template-columns: 1fr; }
        .margin-platform-pages { display: none; }
        .margin-platform-workspace { grid-template-rows: 110px minmax(0, 1fr); }
        .margin-platform-summary { grid-template-columns: 88px repeat(2, 1fr); }
        .margin-platform-summary > :nth-child(n + 4) { display: none; }
        .margin-platform-score, .margin-platform-metric { padding-inline: 9px; }
        .margin-platform-score strong { font-size: 32px; }
        .margin-platform-audit { grid-template-columns: 1fr; grid-template-rows: 290px minmax(0, 1fr); }
        .margin-platform-sentences { border-right: 0; border-bottom: 1px solid #d4d5cf; padding: 14px 12px; }
        .margin-platform-sentence { grid-template-columns: 22px minmax(0, 1fr) 30px; gap: 8px; padding: 11px 4px; font-size: 10px; }
        .margin-platform-sentence:nth-of-type(n + 4) { display: none; }
        .margin-platform-inspector { padding: 18px; }
        .margin-platform-inspector h3 { margin-top: 22px; font-size: 28px; }
        .margin-platform-compare { grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 18px; }
        .margin-scan-line { display: none; }
        .margin-live-read .sentence-before { opacity: 0 !important; translate: 0 -9px !important; clip-path: inset(0 0 100% 0) !important; }
        .margin-live-read .sentence-after { opacity: 1 !important; translate: 0 !important; clip-path: inset(0) !important; }
        .margin-live-read .margin-platform-inspector { opacity: 1 !important; translate: 0 !important; }
        .margin-live-read .margin-read-score b { opacity: 1 !important; translate: 0 !important; }
        .margin-live-read .margin-read-score del { opacity: 0 !important; translate: 0 -8px !important; }
        .margin-manifesto { min-height: 980px; padding: 120px 17px; }
        .margin-finding { grid-template-columns: 1fr; gap: 22px; margin-top: 280px; }
        .margin-capabilities { padding: 72px 17px; }
        .margin-capabilities h2 { font-size: 48px; }
        .margin-capability-grid { grid-template-areas: "voice" "priority" "evidence" "history" "monitoring"; grid-template-columns: 1fr; gap: 12px; margin-top: 42px; }
        .capability-card { min-height: 290px; padding: 18px; }
        .capability-card--evidence { min-height: 630px; }
        .capability-card--evidence .capability-copy { grid-template-columns: 1fr; gap: 11px; }
        .cap-evidence-ui { min-height: 430px; grid-template-columns: 1fr; }
        .cap-evidence-document { border-right: 0; border-bottom: 1px solid #d1d2cc; }
        .cap-evidence-finding { min-height: 255px; }
        .cap-evidence-finding h4 { margin-top: 22px; font-size: 30px; }
        .margin-progress { right: 5px; height: 150px; }
        .margin-quote { min-height: 540px; padding-inline: 17px; }
        .margin-quote blockquote { font-size: 49px; }
        .instrument-title { padding-inline: 17px; }
        .instrument-title h1 { font-size: 58px; }
        .instrument-controls, .specimen, .instrument-method > header, .instrument-final { padding-inline: 17px; }
        .dial { grid-template-columns: 96px 1fr 28px; gap: 10px; }
        .specimen-copy { font-size: 45px; }
        .method-strip { grid-template-columns: 1fr; }
        .method-strip article { min-height: 390px; }
        .method-strip article + article { border-top: 1px solid #b9bbb3; border-left: 0; }
        .instrument-quote blockquote { font-size: 49px; }
      }

      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
        .margin-progress { display: none; }
        .motion-ready [data-margin-reveal="headline"] .margin-line > span,
        .motion-ready .margin-finding blockquote p { clip-path: none !important; filter: none !important; opacity: 1 !important; transform: none !important; }
        .motion-ready .margin-manifesto .statement mark { background-size: 100% 100% !important; }
        .motion-ready .margin-capability-grid .capability-card { opacity: 1 !important; translate: 0 !important; }
        .margin-specimen-shell { scale: 1 !important; }
        .margin-scan-line { display: none !important; }
        .margin-live-read .sentence-before { opacity: 0 !important; translate: 0 -9px !important; clip-path: inset(0 0 100% 0) !important; }
        .margin-live-read .sentence-after { opacity: 1 !important; translate: 0 !important; clip-path: inset(0) !important; }
        .margin-live-read .margin-platform-inspector { opacity: 1 !important; translate: 0 !important; }
      }

      /* The Margin — product-led narrative rebuild */
      .margin-world {
        --margin-paper: #f7f7f1;
        --margin-sheet: #fff;
        --margin-rule: #c9cac3;
        background: var(--margin-paper);
      }
      .margin-nav {
        min-height: 72px;
        border-bottom: 1px solid rgb(20 21 18 / 26%);
        background: var(--margin-paper);
      }
      .margin-nav nav { gap: clamp(18px, 2.2vw, 34px); }
      .margin-nav nav a { font-weight: 650; }
      .margin-hero {
        min-height: calc(100svh - 72px);
        grid-template-columns: minmax(360px, .82fr) minmax(520px, 1.18fr);
        gap: clamp(42px, 6vw, 100px);
        align-items: center;
        overflow: hidden;
        background: var(--margin-paper);
        padding: clamp(56px, 6vw, 94px) clamp(20px, 3.5vw, 58px);
      }
      .margin-hero-copy { position: relative; z-index: 2; display: grid; align-content: center; }
      .margin-hero h1 {
        max-width: none;
        align-self: auto;
        color: #111210;
        font-size: clamp(64px, 7.1vw, 96px);
        font-weight: 520;
        letter-spacing: -.04em;
        line-height: .96;
        transform: none;
      }
      .margin-hero h1 .margin-line { overflow: visible; margin: 0; padding: .04em .02em .16em; }
      .margin-hero h1 .margin-line > span { white-space: nowrap; }
      .margin-hero h1 .really::after { height: .055em; background: var(--pink); }
      .margin-hero-copy > p { max-width: 42ch; margin-top: 34px; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.55; }
      .margin-hero .margin-form { max-width: 610px; margin-top: 38px; }
      .margin-hero .margin-form label { color: rgb(20 21 18 / 70%); }
      .margin-hero .margin-field { border-color: #111210; }
      .margin-hero .margin-field input::placeholder { color: rgb(20 21 18 / 62%); }
      .margin-hero .margin-field button { align-self: stretch; background: var(--pink); color: #fff; padding: 0 18px; text-align: center; }
      .margin-hero .margin-field button:hover { background: var(--pink-dark); color: #fff; }
      .margin-hero .audit-status { color: #60625a; }
      .margin-hero-note { display: flex; gap: 18px; align-items: center; margin-top: 22px; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
      .margin-hero-note i { width: 42px; height: 1px; background: var(--pink); }

      .margin-hero-product {
        position: relative;
        z-index: 1;
        min-width: 0;
        margin: 0;
      }
      .margin-hero-product::before {
        position: absolute;
        z-index: -1;
        top: -20%;
        right: -20%;
        width: 76%;
        aspect-ratio: 1;
        border: 1px solid rgb(255 45 111 / 22%);
        border-radius: 50%;
        content: "";
      }
      .margin-hero-app {
        position: relative;
        min-height: clamp(520px, 62vh, 690px);
        overflow: hidden;
        border: 1px solid #111210;
        border-radius: 14px;
        background: var(--margin-sheet);
        box-shadow: 0 30px 90px rgb(20 21 18 / 14%);
      }
      .margin-hero-appbar { display: grid; height: 54px; grid-template-columns: 148px 1fr auto; align-items: center; border-bottom: 1px solid var(--margin-rule); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-hero-appbar > * { display: flex; height: 100%; align-items: center; border-right: 1px solid var(--margin-rule); padding: 0 14px; }
      .margin-hero-appbar span { color: #62645d; }
      .margin-hero-appbar b { border-right: 0; color: var(--pink-dark); font-weight: 500; }
      .margin-hero-appbody { display: grid; min-height: calc(clamp(520px, 62vh, 690px) - 54px); grid-template-columns: 148px minmax(0, 1fr); }
      .margin-hero-pages { border-right: 1px solid var(--margin-rule); background: #f0f0eb; padding: 20px 12px; }
      .margin-hero-pages > span { display: flex; justify-content: space-between; margin-bottom: 14px; color: #696b64; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-hero-page { display: grid; grid-template-columns: 1fr auto; gap: 5px; border-top: 1px solid var(--margin-rule); padding: 14px 5px; font-size: 10px; }
      .margin-hero-page small { grid-column: 1 / -1; color: #777970; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .margin-hero-page.is-current { margin-inline: -12px; border-color: var(--pink); background: #fff1f6; padding-inline: 17px; }
      .margin-hero-page.is-current b { color: var(--pink-dark); }
      .margin-hero-workspace { display: grid; min-width: 0; grid-template-rows: 112px minmax(0, 1fr); }
      .margin-hero-summary { display: grid; grid-template-columns: 118px repeat(2, 1fr); border-bottom: 1px solid var(--margin-rule); }
      .margin-hero-summary > div { display: flex; min-width: 0; flex-direction: column; justify-content: center; border-right: 1px solid var(--margin-rule); padding: 14px; }
      .margin-hero-summary > div:last-child { border-right: 0; }
      .margin-hero-summary span { color: #666861; font-family: var(--mono); font-size: 7px; text-transform: uppercase; }
      .margin-hero-summary strong { margin-top: 8px; font-size: 40px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
      .margin-hero-summary b { margin-top: 8px; font-size: 15px; font-weight: 520; }
      .margin-hero-summary i { height: 3px; margin-top: 13px; background: #dedfd9; }
      .margin-hero-summary i::after { display: block; width: 64%; height: 100%; background: var(--pink-dark); content: ""; transform-origin: left; animation: hero-metric 1.1s .55s var(--ease) both; }
      .margin-hero-audit { display: grid; min-height: 0; grid-template-columns: minmax(0, 1.05fr) minmax(190px, .65fr); }
      .margin-hero-sentences { border-right: 1px solid var(--margin-rule); padding: 22px 18px; }
      .margin-hero-sentences > span { color: #696b64; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-hero-sentence { display: grid; grid-template-columns: 24px 1fr 28px; gap: 10px; border-top: 1px solid #dedfd9; padding: 15px 2px; color: #555750; font-size: clamp(9px, .75vw, 12px); line-height: 1.35; }
      .margin-hero-sentence:first-of-type { margin-top: 14px; }
      .margin-hero-sentence > span,
      .margin-hero-sentence > b { font-family: var(--mono); font-size: 7px; font-weight: 400; }
      .margin-hero-sentence > b { text-align: right; }
      .margin-hero-sentence.is-flagged { position: relative; border-color: var(--pink); background: #fff1f6; color: #151613; }
      .margin-hero-sentence.is-flagged::after { position: absolute; right: 0; bottom: 6px; left: 34px; height: 2px; background: var(--pink); content: ""; transform-origin: left; animation: hero-mark 1s .9s var(--ease) both; }
      .margin-hero-sentence.is-flagged > b { color: var(--pink-dark); }
      .margin-hero-inspector { padding: 22px 18px; }
      .margin-hero-inspector > span { color: var(--pink-dark); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-hero-inspector h2 { max-width: 10ch; margin-top: clamp(30px, 6vh, 70px); font-size: clamp(24px, 2.25vw, 38px); font-weight: 500; letter-spacing: -.03em; line-height: 1; }
      .margin-hero-inspector p { margin-top: 18px; color: #5e6059; font-size: 12px; line-height: 1.5; }
      .margin-hero-scan { position: absolute; z-index: 3; top: 24%; right: 0; left: 0; height: 2px; background: var(--pink); opacity: .72; animation: hero-scan 5.8s 1.1s var(--ease) infinite; pointer-events: none; }
      .margin-hero-product figcaption { margin-top: 12px; color: rgb(20 21 18 / 68%); font-family: var(--mono); font-size: 8px; text-align: right; text-transform: uppercase; }
      .motion-ready .margin-hero-product { clip-path: inset(0 0 100% 0); translate: 0 38px; }
      .motion-ready .margin-hero-product.is-inview { clip-path: inset(0); translate: 0; transition: clip-path 1s .18s var(--ease), translate 1s .18s var(--ease); }
      @keyframes hero-scan { 0%, 8% { top: 16%; opacity: 0; } 15% { opacity: .72; } 70% { top: 82%; opacity: .72; } 82%, 100% { top: 82%; opacity: 0; } }
      @keyframes hero-mark { from { transform: scaleX(0); } }
      @keyframes hero-metric { from { transform: scaleX(0); } }

      .margin-definition-band {
        display: grid;
        min-height: clamp(260px, 28vw, 380px);
        place-items: center;
        background: var(--pink);
        color: #fff;
        padding: clamp(52px, 6vw, 84px) clamp(20px, 5vw, 80px);
      }
      .margin-definition-band p {
        max-width: 20ch;
        margin: 0;
        font-size: clamp(38px, 4.6vw, 64px);
        font-weight: 520;
        letter-spacing: -.04em;
        line-height: .98;
        text-align: center;
      }

      .margin-metric-map {
        border-top: 1px solid var(--margin-rule);
        border-bottom: 1px solid var(--margin-rule);
        background: var(--margin-sheet);
        padding: clamp(72px, 7vw, 112px) clamp(20px, 5vw, 80px);
      }
      .margin-metric-map > header {
        display: grid;
        width: min(100%, 1120px);
        grid-template-columns: minmax(300px, .8fr) minmax(280px, .55fr);
        gap: clamp(40px, 10vw, 180px);
        align-items: end;
        margin: 0 auto clamp(40px, 5vw, 64px);
      }
      .margin-metric-map h2 { max-width: 9ch; font-size: clamp(46px, 5.5vw, 80px); font-weight: 470; letter-spacing: -.04em; line-height: .95; }
      .margin-metric-map > header p { max-width: 42ch; color: #555750; font-size: 17px; line-height: 1.62; }
      .margin-metric-grid {
        display: grid;
        overflow: hidden;
        width: min(100%, 1120px);
        aspect-ratio: 2 / 1;
        grid-auto-flow: dense;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 1px;
        border: 1px solid #1b1c19;
        background: #1b1c19;
        margin-inline: auto;
      }
      .margin-metric-block {
        position: relative;
        display: grid;
        min-width: 0;
        grid-template-rows: auto 1fr auto;
        overflow: hidden;
        border: 0;
        background: var(--margin-sheet);
        color: #171815;
        padding: clamp(18px, 2.3vw, 36px);
        text-align: left;
        cursor: pointer;
        transition: background-color .24s ease, color .24s ease, box-shadow .24s ease;
      }
      .margin-metric-block.is-active { grid-column: span 2; grid-row: span 2; background: var(--metric-soft); cursor: default; }
      .margin-metric-block:not(.is-active):hover { background: var(--metric-soft); box-shadow: inset 0 4px 0 var(--metric); }
      .margin-metric-block:focus-visible { z-index: 2; outline: 3px solid var(--metric); outline-offset: -4px; }
      .margin-metric-name { display: flex; gap: 11px; align-items: center; }
      .margin-metric-name i { width: 14px; height: 14px; flex: 0 0 auto; background: var(--metric); }
      .margin-metric-name strong { font-size: clamp(14px, 1.15vw, 18px); font-weight: 650; letter-spacing: -.02em; line-height: 1.15; }
      .margin-metric-definition {
        display: grid;
        grid-row: 3;
        align-self: end;
        border-top: 1px solid color-mix(in srgb, var(--metric) 28%, transparent);
        padding-top: clamp(12px, 1.4vw, 18px);
      }
      .margin-metric-block.is-active .margin-metric-name strong { font-size: clamp(20px, 1.9vw, 30px); }
      .margin-metric-block.is-active .margin-metric-name i { width: 18px; height: 18px; }
      .margin-metric-block.is-active .margin-metric-definition {
        display: grid;
        grid-row: 3;
        grid-template-columns: minmax(0, .9fr) minmax(180px, .72fr);
        gap: clamp(24px, 4vw, 68px);
        align-self: end;
        align-items: end;
        border-top: 1px solid color-mix(in srgb, var(--metric) 34%, transparent);
        padding-top: clamp(18px, 2.2vw, 34px);
        animation: metric-copy-in .42s .08s var(--ease) both;
      }
      .margin-metric-definition > p { max-width: 32ch; font-size: clamp(12px, 1vw, 15px); line-height: 1.45; }
      .margin-metric-block.is-active .margin-metric-definition > p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.48; }
      .margin-metric-finding { display: none; gap: 7px; }
      .margin-metric-block.is-active .margin-metric-finding { display: grid; }
      .margin-metric-finding small { color: var(--metric-ink); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-metric-finding strong { max-width: 24ch; font-size: clamp(12px, 1vw, 15px); font-weight: 650; line-height: 1.38; }
      @keyframes metric-copy-in { from { opacity: 0; translate: 0 16px; } }

      .margin-why { display: grid; min-height: 780px; grid-template-columns: minmax(270px, .56fr) minmax(0, 1.44fr); gap: clamp(32px, 4vw, 72px); align-items: center; border-bottom: 1px solid var(--margin-rule); padding: clamp(100px, 10vw, 160px) clamp(20px, 3vw, 58px); }
      .margin-why > header h2 { max-width: 9ch; font-size: clamp(52px, 6.3vw, 94px); font-weight: 470; letter-spacing: -.04em; line-height: .94; }
      .margin-why > header p { max-width: 39ch; margin-top: 34px; color: #565851; font-size: 17px; line-height: 1.6; }
      .margin-step-accordion { display: flex; min-height: 520px; overflow: hidden; border: 1px solid #1b1c19; background: #1b1c19; }
      .margin-step {
        display: flex;
        min-width: 0;
        flex: 0 0 clamp(62px, 5.2vw, 88px);
        flex-direction: column;
        border-right: 1px solid #1b1c19;
        background: var(--step-surface, var(--margin-sheet));
        transition: flex-basis .48s var(--ease), flex-grow .48s var(--ease), background-color .24s ease;
      }
      .margin-step:last-child { border-right: 0; }
      .margin-step.is-open { flex: 1 1 540px; background: var(--step-active, var(--pink-soft)); }
      .margin-step-button {
        display: flex;
        width: 100%;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border: 0;
        background: transparent;
        color: #171815;
        padding: 24px 18px;
        text-align: left;
        cursor: pointer;
      }
      .margin-step-button:hover { background: rgb(255 45 111 / 7%); }
      .margin-step-button:focus-visible { position: relative; z-index: 2; outline: 3px solid var(--pink); outline-offset: -4px; }
      .margin-step-button strong { font-size: clamp(17px, 1.45vw, 22px); font-weight: 520; letter-spacing: -.025em; line-height: 1.15; writing-mode: vertical-rl; transform: rotate(180deg); }
      .margin-step-toggle { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
      .margin-step-toggle::before,
      .margin-step-toggle::after { position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; background: currentColor; content: ""; translate: -50% -50%; transition: transform .24s var(--ease); }
      .margin-step-toggle::after { transform: rotate(90deg); }
      .margin-step.is-open .margin-step-toggle::after { transform: rotate(90deg) scaleX(0); }
      .margin-step.is-open .margin-step-button { min-height: 88px; flex: 0 0 auto; flex-direction: row; gap: 18px; justify-content: flex-start; padding: 24px clamp(24px, 3vw, 42px); }
      .margin-step.is-open .margin-step-button strong { font-size: clamp(22px, 2.1vw, 32px); writing-mode: horizontal-tb; transform: none; }
      .margin-step.is-open .margin-step-toggle { margin-left: auto; }
      .margin-step-panel { min-height: 0; flex: 0 0 0; overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .18s ease, visibility 0s .18s; }
      .margin-step.is-open .margin-step-panel { flex: 1 1 auto; visibility: visible; opacity: 1; transition: opacity .24s .18s ease, visibility 0s; }
      .margin-step-panel-inner {
        display: grid;
        height: 100%;
        align-content: end;
        gap: 22px;
        border-top: 1px solid rgb(201 22 80 / 30%);
        margin: 0 clamp(24px, 3vw, 42px);
        padding: clamp(32px, 5vw, 72px) 0 clamp(28px, 4vw, 52px);
      }
      .margin-step-panel h3 { max-width: 16ch; font-size: clamp(25px, 2.2vw, 38px); font-weight: 480; letter-spacing: -.035em; line-height: 1.02; }
      .margin-step-panel p { max-width: 54ch; color: #444640; font-size: 15px; line-height: 1.55; }
      .margin-step-detail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgb(27 28 25 / 22%); }
      .margin-step-detail div { display: grid; align-content: start; gap: 8px; min-height: 88px; border-right: 1px solid rgb(27 28 25 / 22%); padding: 14px 16px 0 0; }
      .margin-step-detail div + div { padding-left: 16px; }
      .margin-step-detail div:last-child { border-right: 0; }
      .margin-step-detail dt { color: #686a63; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-step-detail dd { max-width: 18ch; font-size: 12px; font-weight: 570; line-height: 1.35; }

      .margin-quote { min-height: 620px; }
      .margin-quote blockquote { max-width: 13ch; font-size: clamp(52px, 7vw, 96px); }
      .margin-final {
        display: grid;
        min-height: 440px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(60px, 9vw, 160px);
        align-items: center;
        justify-items: stretch;
        border-top: 0;
        padding-block: clamp(64px, 6vw, 88px);
        padding-inline: max(clamp(20px, 5vw, 80px), calc((100vw - 1320px) / 2));
        text-align: left;
      }
      .margin-final h2 { max-width: 8ch; justify-self: start; font-size: clamp(60px, 7vw, 96px); }
      .margin-final-copy { display: grid; width: min(100%, 480px); gap: 28px; align-self: center; justify-self: end; }
      .margin-final-copy > p { max-width: 39ch; color: #555750; font-size: 17px; line-height: 1.6; }
      .margin-final .margin-form { margin-top: 8px; }
      .margin-final .margin-field button { padding-left: 18px; }
      .margin-footer { display: flex; min-height: 160px; align-items: flex-end; justify-content: space-between; gap: 34px; border-top: 1px solid #343530; background: #171815; color: #f6f6f0; padding: 42px clamp(20px, 5vw, 80px); }
      .margin-footer .mini-wordmark { width: 92px; margin-bottom: 12px; }
      .margin-footer p { max-width: 44ch; color: #aeb0a8; font-size: 12px; line-height: 1.5; }
      .margin-footer span { color: #888a82; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .margin-read-sticky { top: 0; height: 100svh; }

      .margin-product-story {
        background: #171815;
        color: #f7f7f1;
        padding: clamp(72px, 7vw, 112px) clamp(20px, 3.5vw, 58px);
      }
      .story-heading { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 26px; }
      .story-heading-copy { display: grid; gap: 12px; }
      .story-heading-copy > span { font-family: var(--mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
      .story-heading-copy > span::before { display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--pink); border-radius: 50%; content: ""; }
      .story-heading-copy p { max-width: 46ch; color: #aeb0a8; font-size: 13px; line-height: 1.5; }
      .story-tabs { display: grid; grid-template-columns: repeat(3, auto); border: 1px solid #555750; }
      .story-tab { min-height: 48px; border: 0; border-right: 1px solid #555750; background: transparent; color: #aeb0a8; padding: 0 clamp(14px, 2vw, 26px); font-family: var(--mono); font-size: 9px; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
      .story-tab:last-child { border-right: 0; }
      .story-tab:hover { color: #fff; }
      .story-tab[aria-selected="true"] { background: var(--pink); color: #fff; }
      .story-tab:focus-visible { position: relative; z-index: 2; outline-offset: -4px; }
      .story-frame { overflow: hidden; border: 1px solid #5b5c56; background: #f8f8f4; color: #161714; box-shadow: 0 32px 90px rgb(0 0 0 / 32%); }
      .story-appbar { display: grid; height: 54px; grid-template-columns: 178px 1fr auto; align-items: center; border-bottom: 1px solid #d4d5cf; font-family: var(--mono); font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
      .story-appbar > * { display: flex; height: 100%; align-items: center; border-right: 1px solid #d4d5cf; padding: 0 16px; }
      .story-appbar > :last-child { border-right: 0; color: var(--pink-dark); }
      .story-appbar span { color: #656761; }
      .story-viewport { display: grid; height: clamp(520px, 42vw, 640px); min-height: 0; overflow: hidden; }
      .story-screen {
        display: grid;
        height: 100%;
        min-width: 0;
        min-height: 0;
        align-content: start;
        overflow: auto;
        padding: clamp(28px, 3.3vw, 52px);
      }
      .story-screen[hidden] { display: none; }
      .story-screen.is-active { animation: story-screen-in .34s var(--ease) both; }
      @keyframes story-screen-in { from { opacity: .01; transform: translateX(22px); } }
      .margin-product-story[data-direction="back"] .story-screen.is-active { animation-name: story-screen-in-back; }
      @keyframes story-screen-in-back { from { opacity: .01; transform: translateX(-22px); } }
      .story-screen-title { display: flex; align-items: end; justify-content: space-between; gap: 32px; border-bottom: 1px solid #c9cac3; padding-bottom: 22px; }
      .story-screen-title small { color: #696b64; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .story-screen-title h3 { max-width: 17ch; margin-top: 11px; font-size: clamp(30px, 3.4vw, 52px); font-weight: 480; letter-spacing: -.04em; line-height: .98; }
      .story-screen-title > span { color: #696b64; font-family: var(--mono); font-size: 8px; text-transform: uppercase; }

      .story-page-list { display: grid; margin-top: 18px; }
      .story-page-row { display: grid; min-height: 72px; grid-template-columns: 42px minmax(0, 1fr) auto auto; gap: clamp(16px, 2.5vw, 42px); align-items: center; border-bottom: 1px solid #d4d5cf; padding: 0 14px; }
      .story-page-row > span:first-child { color: #777970; font-family: var(--mono); font-size: 8px; }
      .story-page-row strong { font-size: clamp(17px, 1.45vw, 22px); font-weight: 550; }
      .story-page-row small { min-width: 90px; color: #777970; font-family: var(--mono); font-size: 8px; text-align: right; text-transform: uppercase; }
      .story-page-row b { min-width: 40px; font-size: 24px; font-weight: 500; letter-spacing: -.04em; text-align: right; }
      .story-page-row.is-lowest { border-color: var(--pink); background: #fff0f5; }
      .story-page-row.is-lowest > span:first-child,
      .story-page-row.is-lowest small,
      .story-page-row.is-lowest b { color: var(--pink-dark); }
      .story-page-row.is-lowest strong { text-decoration: underline var(--pink) 2px; text-underline-offset: 8px; }

      .story-sentence-list { display: grid; margin-top: 18px; }
      .story-sentence-row { display: grid; min-height: 58px; grid-template-columns: 40px minmax(0, 1fr) 46px; gap: 18px; align-items: center; border-bottom: 1px solid #d4d5cf; padding: 0 12px; color: #555750; }
      .story-sentence-row > span,
      .story-sentence-row > b { font-family: var(--mono); font-size: 8px; font-weight: 400; }
      .story-sentence-row > b { text-align: right; }
      .story-sentence-row p { font-size: clamp(13px, 1.2vw, 17px); line-height: 1.35; }
      .story-sentence-row.is-flagged { border-color: var(--pink); background: #fff0f5; color: #171815; }
      .story-sentence-row.is-flagged > b { color: var(--pink-dark); }
      .story-sentence-row.is-flagged p { text-decoration: underline var(--pink) 2px; text-underline-offset: 6px; }

      .story-finding-screen { grid-template-columns: minmax(0, 1.15fr) minmax(330px, .75fr); padding: 0; }
      .story-finding-source { min-width: 0; padding: clamp(28px, 3vw, 48px); }
      .story-finding-source .story-screen-title h3 { font-size: clamp(27px, 3vw, 44px); }
      .story-finding-source .story-sentence-row { min-height: 52px; }
      .story-finding-panel { display: grid; align-content: start; border-left: 1px solid var(--pink); background: #fff5f8; padding: clamp(30px, 3.5vw, 56px); }
      .story-finding-panel > header { display: flex; justify-content: space-between; border-bottom: 1px solid #f2b9cc; padding-bottom: 14px; color: var(--pink-dark); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .story-finding-panel h3 { max-width: 12ch; margin-top: clamp(34px, 5vh, 64px); font-size: clamp(28px, 3vw, 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1; }
      .story-finding-panel > p { max-width: 38ch; margin-top: 20px; color: #555750; font-size: 14px; line-height: 1.55; }
      .story-recommendation { margin-top: clamp(34px, 5vh, 62px); border-top: 1px solid var(--pink); border-bottom: 1px solid var(--pink); padding: 18px 0; }
      .story-recommendation small { color: var(--pink-dark); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
      .story-recommendation p { margin-top: 12px; font-size: clamp(17px, 1.8vw, 25px); font-weight: 550; line-height: 1.2; }

      .story-controls { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 20px; }
      .story-status { color: #aeb0a8; font-family: var(--mono); font-size: 9px; text-transform: uppercase; }
      .story-control-buttons { display: flex; }
      .story-control { min-width: 92px; min-height: 42px; border: 1px solid #555750; background: transparent; color: #f7f7f1; font-size: 12px; }
      .story-control + .story-control { border-left: 0; }
      .story-control:hover:not(:disabled) { border-color: var(--pink); background: var(--pink); color: #fff; }
      .story-control:disabled { color: #6f716a; cursor: default; }

      @media (max-width: 1100px) {
        .margin-hero { grid-template-columns: minmax(320px, .8fr) minmax(470px, 1.2fr); gap: 38px; }
        .margin-hero h1 { font-size: clamp(58px, 7vw, 76px); }
        .margin-hero-app { min-height: 560px; }
        .margin-hero-appbody { min-height: 506px; }
        .margin-hero-audit { grid-template-columns: 1fr; }
        .margin-hero-inspector { display: none; }
      }

      @media (max-width: 900px) {
        .margin-nav { grid-template-columns: 1fr auto; }
        .margin-nav nav { display: none; }
        .margin-hero { display: flex; min-height: auto; flex-direction: column; gap: 0; align-items: stretch; padding-block: 84px; }
        .margin-hero-copy { display: contents; }
        .margin-hero h1 { order: 1; max-width: none; font-size: clamp(58px, 9vw, 76px); }
        .margin-hero .margin-form { order: 2; width: min(100%, 610px); margin-top: 34px; }
        .margin-hero-product { order: 3; width: 100%; margin-top: 46px; }
        .margin-hero-copy > p { order: 4; max-width: 46ch; margin-top: 46px; }
        .margin-hero-note { order: 5; }
        .margin-hero-app { min-height: 600px; }
        .margin-hero-appbody { min-height: 546px; }
        .margin-metric-map > header { grid-template-columns: 1fr; gap: 28px; }
        .margin-metric-map h2 { max-width: 10ch; }
        .margin-metric-map > header p { max-width: 48ch; }
        .margin-metric-block { padding: 20px; }
        .margin-metric-block.is-active .margin-metric-definition { grid-template-columns: 1fr; gap: 16px; }
        .margin-why { grid-template-columns: 1fr; }
        .margin-why > header { max-width: 760px; }
        .margin-final { min-height: auto; grid-template-columns: 1fr; align-items: center; padding-block: 80px; }
        .margin-final-copy { justify-self: start; }
        .story-heading { grid-template-columns: 1fr; }
        .story-tabs { justify-self: start; }
        .story-finding-screen { grid-template-columns: 1fr; overflow: auto; }
        .story-finding-panel { border-top: 1px solid var(--pink); border-left: 0; }
      }

      @media (max-width: 620px) {
        .margin-nav { background: var(--margin-paper); }
        .margin-nav .mini-wordmark { width: 64px; }
        .margin-nav-actions { gap: 6px; }
        .margin-nav-action { min-height: 38px; padding-inline: 11px; font-size: 11px; }
        .margin-hero { gap: 0; padding: 64px 17px; }
        .margin-hero h1 { font-size: clamp(44px, 13.5vw, 60px); line-height: .98; }
        .margin-hero-copy > p { margin-top: 26px; }
        .margin-hero .margin-field,
        .margin-final .margin-field { grid-template-columns: 1fr; }
        .margin-hero .margin-field button,
        .margin-final .margin-field button { min-height: 48px; border-top: 1px solid #111210; text-align: left; }
        .margin-hero-product { margin-top: 34px; }
        .margin-hero-copy > p { margin-top: 38px; }
        .margin-hero-product::before { display: none; }
        .margin-hero-app { min-height: 550px; border-radius: 10px; }
        .margin-hero-appbar { grid-template-columns: 1fr auto; }
        .margin-hero-appbar > span { display: none; }
        .margin-hero-appbody { min-height: 496px; grid-template-columns: 1fr; }
        .margin-hero-pages { display: none; }
        .margin-hero-workspace { grid-template-rows: 104px minmax(0, 1fr); }
        .margin-hero-summary { grid-template-columns: 92px 1fr 1fr; }
        .margin-hero-summary > div { padding: 10px; }
        .margin-hero-summary strong { font-size: 32px; }
        .margin-hero-sentences { border-right: 0; padding: 18px 14px; }
        .margin-hero-sentence { font-size: 10px; }
        .margin-metric-map { padding: 64px 17px; }
        .margin-definition-band { min-height: 280px; padding: 52px 17px; }
        .margin-definition-band p { font-size: 34px; }
        .margin-metric-map > header { margin-bottom: 32px; }
        .margin-metric-map h2 { font-size: 46px; }
        .margin-metric-map > header p { font-size: 16px; }
        .margin-metric-grid { aspect-ratio: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
        .margin-metric-block { aspect-ratio: 1; padding: 16px; }
        .margin-metric-block.is-active { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 1; padding: 22px; }
        .margin-metric-name { gap: 9px; }
        .margin-metric-name i { width: 11px; height: 11px; }
        .margin-metric-name strong { max-width: 8ch; font-size: 14px; line-height: 1.1; }
        .margin-metric-block.is-active .margin-metric-definition { padding-top: 16px; }
        .margin-metric-definition > p { font-size: 11px; }
        .margin-metric-block.is-active .margin-metric-definition > p { font-size: 15px; }
        .margin-why { min-height: auto; gap: 76px; padding: 110px 17px; }
        .margin-why > header h2 { font-size: 54px; }
        .margin-step-accordion { min-height: 560px; }
        .margin-step { flex-basis: 44px; }
        .margin-step.is-open { flex-basis: 220px; }
        .margin-step-button { padding: 16px 10px; }
        .margin-step-button strong { font-size: 14px; }
        .margin-step-toggle { width: 14px; height: 14px; }
        .margin-step.is-open .margin-step-button { min-height: 78px; gap: 10px; padding: 18px 16px; }
        .margin-step.is-open .margin-step-button strong { font-size: 18px; }
        .margin-step-panel-inner { gap: 14px; margin-inline: 16px; padding: 24px 0 20px; }
        .margin-step-panel h3 { font-size: 21px; }
        .margin-step-panel p { font-size: 13px; }
        .margin-step-detail { grid-template-columns: 1fr; }
        .margin-step-detail div { min-height: 0; border-right: 0; border-bottom: 1px solid rgb(27 28 25 / 18%); padding: 9px 0; }
        .margin-step-detail div + div { padding-left: 0; }
        .margin-step-detail div:last-child { border-bottom: 0; }
        .margin-final { min-height: auto; gap: 48px; padding: 72px 17px; }
        .margin-final h2 { font-size: 62px; }
        .margin-footer { min-height: 210px; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding-inline: 17px; }
        .margin-product-story { padding: 64px 17px; }
        .story-heading { gap: 22px; }
        .story-tabs { width: 100%; grid-template-columns: repeat(3, 1fr); }
        .story-tab { padding-inline: 8px; }
        .story-appbar { grid-template-columns: 1fr auto; }
        .story-appbar > span:nth-child(2) { display: none; }
        .story-viewport { height: 720px; min-height: 0; }
        .story-screen { overflow: auto; padding: 24px 18px; }
        .story-screen-title { align-items: start; }
        .story-screen-title h3 { font-size: 31px; }
        .story-page-row { min-height: 78px; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; padding-inline: 4px; }
        .story-page-row small { display: none; }
        .story-page-row b { font-size: 20px; }
        .story-sentence-row { min-height: 72px; grid-template-columns: 24px minmax(0, 1fr) 32px; gap: 8px; padding-inline: 4px; }
        .story-sentence-row p { font-size: 13px; }
        .story-finding-screen { padding: 0; }
        .story-finding-source,
        .story-finding-panel { padding: 24px 18px; }
        .story-finding-source .story-sentence-row:nth-child(n + 5) { display: none; }
        .story-finding-panel h3 { margin-top: 28px; font-size: 31px; }
        .story-recommendation { margin-top: 28px; }
        .story-controls { grid-template-columns: 1fr; }
        .story-control-buttons { width: 100%; }
        .story-control { flex: 1; }
      }

      @media (prefers-reduced-motion: reduce) {
        .story-screen.is-active { animation: none; }
        .motion-ready .margin-hero-product { clip-path: inset(0) !important; translate: 0 !important; }
        .margin-hero-scan { display: none; }
        .margin-hero-sentence.is-flagged::after,
        .margin-hero-summary i::after { animation: none; }
      }