/* Hero */
    .hero {
      /* Top is deliberately tight: the capability tabs are the hero's first
         child and ride just under the header, which no longer has a rule
         under it. Bottom keeps the old 80px. */
      padding: 24px 48px 80px;
    }
    .hero-kicker {
      font-family: var(--mono);
      font-size: 12px;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin: 0 0 24px 0;
    }
    .hero-title {
      font-size: clamp(40px, 6.5vw, 72px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -0.03em;
      margin: 0 0 48px 0;
      max-width: 800px;
    }

    /* Interactive Document Viewer */
    .document-viewer {
      border: 1px solid var(--line);
      background: #ffffff;
      position: relative;
      transition: box-shadow 0.4s, border-color 0.4s;
    }
    .document-viewer:hover {
      box-shadow: 0 12px 32px rgba(217, 37, 37, 0.06);
      border-color: #c7c7c4;
    }
    .viewer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 24px;
      border-bottom: 1px solid var(--line);
      background: var(--paper-dark);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--graphite);
    }
    
    .viewer-body {
      padding: 48px;
    }
    
    .dense-text {
      font-family: var(--serif);
      font-size: clamp(22px, 3vw, 36px);
      line-height: 1.5;
      color: var(--ink);
      margin: 0;
      cursor: crosshair;
    }
    .dense-text .filler {
      transition: color 0.4s;
    }
    .dense-text .entity {
      position: relative;
      display: inline-block;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      border: 1px solid transparent;
      padding: 0 2px;
      margin: 0 -2px;
      border-radius: 2px;
    }
    
    /* Hover state: Scrutiny / Extraction */
    .dense-text:hover .filler {
      color: #c0c0bc;
    }
    .dense-text:hover .entity {
      border-color: var(--accent);
      background: #ffffff;
      color: var(--accent);
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 6px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(217,37,37,0.1);
      z-index: 2;
    }
    .dense-text .entity::after {
      content: attr(data-label) " " attr(data-conf);
      position: absolute;
      bottom: calc(100% + 4px);
      left: -1px;
      font-family: var(--mono);
      font-size: 10px;
      font-weight: normal;
      letter-spacing: 0.05em;
      color: #ffffff;
      background: var(--accent);
      padding: 3px 6px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.4s, transform 0.4s;
      pointer-events: none;
      white-space: nowrap;
    }
    .dense-text:hover .entity::after {
      opacity: 1;
      transform: translateY(0);
    }
    .dense-text .entity::before {
      content: "";
      position: absolute;
      top: -4px; 
      left: -1px;
      width: 4px; 
      height: 4px;
      border-top: 1px solid var(--accent);
      border-left: 1px solid var(--accent);
      opacity: 0;
      transition: opacity 0.4s;
    }
    .dense-text:hover .entity::before {
      opacity: 1;
    }

    /* Staggered delays for scanning effect */
    .dense-text:hover .entity:nth-of-type(1) { transition-delay: 0.00s; }
    .dense-text:hover .entity:nth-of-type(2) { transition-delay: 0.06s; }
    .dense-text:hover .entity:nth-of-type(3) { transition-delay: 0.12s; }
    .dense-text:hover .entity:nth-of-type(4) { transition-delay: 0.18s; }
    .dense-text:hover .entity:nth-of-type(5) { transition-delay: 0.24s; }
    .dense-text:hover .entity:nth-of-type(6) { transition-delay: 0.30s; }
    .dense-text:hover .entity:nth-of-type(7) { transition-delay: 0.36s; }
    .dense-text:hover .entity:nth-of-type(8) { transition-delay: 0.42s; }

    /* Intake Stage */
    .intake-stage {
      position: relative;
      margin-top: 48px;
    }
    .intake-trigger {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24px 32px;
      background: var(--ink);
      color: var(--paper);
      font-family: var(--mono);
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border: 1px solid var(--ink);
      transition: background 0.2s, color 0.2s;
    }
    .intake-trigger:hover,
    .intake-stage:focus-within .intake-trigger {
      background: var(--paper);
      color: var(--ink);
    }
    .trigger-icon {
      font-size: 18px;
    }

    /* Takeover */
    .takeover {
      position: fixed;
      z-index: 30;
      inset: 24px;
      background: rgba(17, 17, 17, 0.98);
      color: var(--paper);
      display: flex;
      flex-direction: column;
      padding: 48px;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: scale(0.98);
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
      box-shadow: 0 20px 60px rgba(0,0,0,0.8);
      border: 1px solid rgba(255,255,255,0.1);
    }
    .takeover-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .takeover-kicker {
      font-family: var(--mono);
      font-size: 12px;
      color: #888;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .close {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--paper);
      font-family: var(--mono);
      font-size: 12px;
      text-transform: uppercase;
      text-decoration: none;
      z-index: 50;
      transition: color 0.2s;
    }
    .close b {
      font-size: 28px;
      font-weight: 400;
      line-height: 0.5;
      color: var(--accent);
    }
    .close:hover {
      color: var(--accent);
    }

    .dropbox {
      margin: auto;
      width: min(100%, 800px);
      height: min(60vh, 500px);
      border: 2px dashed #444;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 40px;
    }
    .dropbox-icon {
      width: 48px;
      height: 60px;
      border: 2px solid var(--paper);
      position: relative;
      margin-bottom: 32px;
    }
    .dropbox-icon::before {
      content: "";
      position: absolute;
      top: -2px; right: -2px;
      width: 16px; height: 16px;
      border-bottom: 2px solid var(--paper);
      border-left: 2px solid var(--paper);
      background: var(--desk);
    }
    .dropbox h2 {
      font-size: clamp(28px, 5vw, 48px);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin: 0 0 12px;
    }
    .dropbox p {
      color: #aaa;
      font-family: var(--mono);
      font-size: 14px;
      margin: 0 0 32px;
    }
    .formats {
      color: var(--accent);
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 32px;
    }
    .honesty-note {
      color: #666 !important;
      font-size: 11px !important;
      max-width: 420px;
      line-height: 1.5;
      margin: 0 !important;
    }

    .picker {
      position: absolute;
      z-index: 10;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    /* Intake Interaction Logic */
    .intake-stage:hover .takeover,
    .intake-stage:focus-within .takeover {
      opacity: 1; 
      pointer-events: auto; 
      visibility: visible; 
      transform: scale(1); 
      transition-delay: 0s;
    }
    .intake-stage:hover .picker,
    .intake-stage:focus-within .picker {
      position: fixed; 
      z-index: 40; 
      top: 50%; 
      left: 50%; 
      width: min(100% - 80px, 800px); 
      height: min(60vh, 500px); 
      transform: translate(-50%, -50%);
    }

    /* Target Close Logic */
    #intake-closed:target ~ .page .intake-stage .takeover {
      opacity: 0 !important; 
      pointer-events: none !important; 
      visibility: hidden !important; 
      transform: scale(0.98) !important;
    }
    #intake-closed:target ~ .page .intake-stage:not(:has(> .picker:hover, > .picker:focus-visible)) > .picker {
      position: absolute; 
      inset: 0; 
      width: 100%; 
      height: 100%; 
      transform: none;
    }
    #intake-closed:target ~ .page .intake-stage:has(> .picker:hover) .takeover,
    #intake-closed:target ~ .page .intake-stage:has(> .picker:focus-visible) .takeover {
      opacity: 1 !important; 
      pointer-events: auto !important; 
      visibility: visible !important; 
      transform: scale(1) !important;
    }

    /* Logo Strip */
    .logo-strip-section {
      padding: 36px 48px;
      border-top: 1px solid var(--line);
      background: var(--paper-dark);
    }
    .logo-strip-label {
      font-family: var(--mono);
      font-size: 11px;
      color: var(--graphite);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin: 0 0 26px 0;
      text-align: center;
    }
    .logo-strip {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: clamp(18px, 2.6vw, 44px);
      /* One unit of logo height. Each mark keeps its own --h, since they are
         different shapes and need individually tuned heights; this scales all
         six together so they stay on one row as the page narrows. .page is max
         1024px inside 4vw body padding, so the strip has about 611px to work
         with at the 768px breakpoint and 928px from 1114px up. Without the
         shrink the sixth logo wraps to a row of its own. */
      --u: clamp(0.70px, calc(0.0638vw + 0.2096px), 0.92px);
    }
    .logo-strip img {
      height: calc(var(--h) * var(--u));
      width: auto;
      filter: grayscale(1) brightness(0);
      opacity: 0.35;
      object-fit: contain;
      transition: opacity 0.3s;
    }
    .logo-strip img:hover {
      opacity: 0.7;
    }

    /* Dossier Sections (Input, Process, Output) */
    .dossier-section {
      padding: 80px 48px;
      border-top: 1px solid var(--line);
    }
    .dossier-header {
      margin-bottom: 48px;
    }
    .step-num {
      display: inline-block;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--accent);
      border: 1px solid var(--accent);
      padding: 4px 8px;
      margin-bottom: 24px;
    }
    .dossier-title {
      font-size: clamp(28px, 4vw, 42px);
      font-weight: 800;
      letter-spacing: -0.02em;
      margin: 0 0 16px 0;
    }
    .dossier-desc {
      font-size: 18px;
      color: var(--graphite);
      margin: 0;
      max-width: 600px;
      line-height: 1.4;
    }

    /* The Mess Grid */
    .mess-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
    }
    .mess-item {
      background: var(--paper);
      padding: 24px;
      font-family: var(--mono);
      font-size: 13px;
      color: var(--ink);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      position: relative;
      transition: all 0.2s;
    }
    .mess-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      background: var(--accent);
      transition: width 0.2s;
    }
    .mess-item:hover {
      background: #ffffff;
      color: var(--accent);
    }
    .mess-item:hover::before {
      width: 4px;
    }

    /* The Process Pipeline */
    .pipeline {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border: 1px solid var(--line);
      background: var(--line);
      gap: 1px;
    }
    .pipe-step {
      background: var(--paper);
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .pipe-step:hover {
      background: #ffffff;
    }
    .pipe-meta {
      font-family: var(--mono);
      font-size: 10px;
      color: var(--graphite);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 24px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--line);
      transition: border-color 0.3s;
    }
    .pipe-step:hover .pipe-meta {
      border-color: var(--accent);
      color: var(--accent);
    }
    .pipe-step h3 {
      font-size: 18px;
      font-weight: 700;
      margin: 0 0 12px 0;
      line-height: 1.2;
    }
    .pipe-step p {
      font-size: 14px;
      color: var(--graphite);
      line-height: 1.5;
      margin: 0;
    }

    /* The Output Split */
    /* --- The extraction examples switcher -----------------------
       Four payloads through the one .output-split component. It advances
       on its own so the section is never arguing from a single example,
       and it stops dead the moment a pointer or a focus ring lands on it
       -- nobody can read a block of JSON that moves under them. Every
       payload is deliberately the same number of lines, so the swap
       changes the content without changing the height. */
    .ex-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 2px 22px;
      margin: 0 0 22px 0;
      font-family: var(--mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }
    .ex-tab {
      -webkit-appearance: none;
      appearance: none;
      background: none;
      border: 0;
      border-bottom: 2px solid transparent;
      margin: 0;
      padding: 0 0 6px 0;
      font: inherit;
      letter-spacing: inherit;
      text-transform: inherit;
      color: #bcbcb6;
      white-space: nowrap;
      cursor: pointer;
      transition: color 0.3s, border-color 0.3s;
    }
    .ex-tab:hover { color: var(--graphite); border-bottom-color: #d6d6d0; }
    .ex-tab.is-on {
      color: var(--accent);
      border-bottom-color: var(--accent);
      cursor: default;
    }
    .ex-case { display: none; }
    .ex-case.is-on {
      display: block;
      animation: ex-in 0.4s ease both;
    }
    .ex-case:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
    @keyframes ex-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    /* The timer is already suppressed for reduced motion in script; this
       covers the fade on a deliberate click. */
    @media (prefers-reduced-motion: reduce) {
      .ex-case.is-on { animation: none; }
    }

    .output-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--line);
    }
    .output-text {
      padding: 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: #ffffff;
    }
    .output-text p {
      font-size: 20px;
      line-height: 1.5;
      color: var(--ink);
      margin: 0 0 24px;
    }
    .output-text p:last-child {
      margin: 0;
      color: var(--graphite);
      font-size: 16px;
    }
    .output-code {
      background: var(--ink);
      color: var(--paper);
      padding: 48px;
      overflow-x: auto;
    }
    .output-code pre {
      margin: 0;
      font-family: var(--mono);
      font-size: 13px;
      line-height: 1.6;
    }
    /* Simple pseudo syntax highlighting constrained to B/W/Red */
    .j-key { color: var(--graphite); }
    .j-val { color: var(--paper); }
    .j-num { color: var(--accent); }
    .j-bool { color: var(--accent); }