:root {
    /* ═══════ LOPETTIA BRAND PALETTE ═══════ */
    --lop-bg-deep:      #0A1628;
    --lop-bg-mid:       #142847;
    --lop-bg-elev:      #1A2F52;
    --lop-bg-card:      #1F3760;
    --lop-bg-card-hi:   #243F70;

    --lop-border:       #2A4570;
    --lop-border-bright:#3D5A85;
    --lop-border-glow:  rgba(13, 148, 136, 0.2);

    --lop-teal:         #0D9488;
    --lop-teal-dark:    #0D9488;
    --lop-teal-glow:    rgba(13, 148, 136, 0.15);

    --lop-orange:       #F38281;
    --lop-orange-dark:  #F38281;
    --lop-orange-glow:  rgba(243, 130, 129, 0.15);

    --lop-purple:       #7B61FF;
    --lop-purple-dark:  #5B3FE0;
    --lop-purple-glow:  rgba(123, 97, 255, 0.15);

    --lop-text-primary: #FFFFFF;
    --lop-text-secondary:#E2E8F0;
    --lop-text-muted:   #94A3B8;
    --lop-text-dim:     #64748B;

    --lop-success:      #10B981;
    --lop-warning:      #F7B285;
    --lop-danger:       #F38281;

    --lop-radius-sm:    6px;
    --lop-radius-md:    10px;
    --lop-radius-lg:    16px;

    --lop-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
    --lop-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.4);
    --lop-shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.5);

    /* ═══════ COMPATIBILITY ALIASES ═══════ */
    /* The form body (sections 1-13) uses these class names from v2.
       Re-mapping them to the Lopettia palette keeps the structural HTML untouched. */
    --ink:        var(--lop-text-primary);
    --ink-soft:   var(--lop-text-secondary);
    --ink-faint:  var(--lop-text-muted);
    --paper:      var(--lop-bg-deep);
    --paper-warm: var(--lop-bg-mid);
    --paper-deep: var(--lop-bg-elev);
    --rule:       var(--lop-border);
    --rule-soft:  var(--lop-border);
    --accent:     var(--lop-teal);
    --accent-soft:var(--lop-teal-dark);
    --gold:       var(--lop-warning);
    --green:      var(--lop-success);
    --red:        var(--lop-danger);
    --blue:       var(--lop-purple);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    background: var(--lop-bg-deep);
    color: var(--lop-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    background-image:
      radial-gradient(circle at 15% 10%, var(--lop-teal-glow) 0%, transparent 35%),
      radial-gradient(circle at 85% 80%, var(--lop-orange-glow) 0%, transparent 35%),
      radial-gradient(circle at 50% 50%, var(--lop-purple-glow) 0%, transparent 50%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Hide v2's paper-grain overlay completely on dark theme */
  .grain { display: none; }

  /* Two-column layout: vertical stepper sidebar on the left, main
     content on the right. Sidebar is sticky so all 13 sections stay
     visible while scrolling the form. Mobile falls back to single
     column (media query at end of file). */
  .wrap {
    max-width: 1400px; margin: 0 auto;
    padding: 32px 32px 120px; position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
  }
  .wrap > form,
  .wrap > .masthead,
  .wrap > .breadcrumb-tip { grid-column: 2; }
  .wrap > .sidebar        { grid-column: 1; grid-row: 1 / span 999; }

  /* ════════ MASTHEAD ════════ */
  .masthead {
    border-bottom: 1px solid var(--lop-border);
    padding-bottom: 18px; margin-bottom: 24px;
    position: relative;
  }

  .masthead::after {
    content: '';
    position: absolute; bottom: -1px; left: 0; width: 120px; height: 1px;
    background: linear-gradient(90deg, var(--lop-teal), transparent);
  }

  .masthead-top {
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--lop-text-muted);
    padding-bottom: 18px; margin-bottom: 28px;
    border-bottom: 1px solid var(--lop-border);
    flex-wrap: wrap; gap: 12px;
  }

  /* SVG Lopettia wordmark — primary brand. The img scales to a fixed
     height; the SVG's own viewBox preserves aspect. Anchor wrapper makes
     the logo a click-target back to /app for downstream surfaces. */
  .lop-logo {
    display: inline-flex; align-items: center;
    text-decoration: none;
    line-height: 0; /* prevent inline-img descender gap */
  }
  .lop-logo img {
    height: 56px; width: auto;
    display: block;
  }
  .lop-logo--hero img { height: 56px; }   /* compact hero · was 140px */
  .lop-logo--sm img { height: 32px; }
  .lop-logo--xs img { height: 22px; }

  /* Compact hero — logo + one-line H1 side-by-side. No paragraph, no
     long tagline. All space goes to the form. */
  .masthead-hero {
    display: flex; align-items: baseline;
    gap: 18px;
    margin-bottom: 6px;
    flex-wrap: wrap;
  }
  .masthead-hero .lop-logo { flex-shrink: 0; align-self: center; }
  .masthead-hero h1 { margin-bottom: 0; }

  .masthead h1 {
    font-family: 'Inter', sans-serif; font-weight: 800;
    font-size: clamp(20px, 3vw, 32px); line-height: 1.1;
    letter-spacing: -0.02em; margin-bottom: 0;
    color: var(--lop-text-primary);
    display: inline-flex; gap: .6ch; flex-wrap: wrap;
  }
  .masthead h1 br { display: none; }        /* collapse multi-line to one */

  .masthead h1 .alt {
    font-weight: 800;
    background: linear-gradient(135deg, var(--lop-teal) 0%, var(--lop-purple) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .masthead h1 em {
    color: var(--lop-orange); font-style: normal;
  }

  /* Long description removed in the compact hero — hide instead of
     deleting the DOM node so nothing else that reads it breaks. */
  .masthead .lede { display: none; }

  .masthead .meta {
    display: flex; gap: 20px; margin-top: 10px; flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--lop-text-muted);
  }
  .masthead .meta span strong {
    color: var(--lop-text-primary); font-weight: 600;
  }

  /* Tagline still visible but slimmer — one accent line, no big block. */
  .lop-tagline {
    display: none;                          /* compact mode · dropped */
  }
  .lop-tagline .h { color: var(--lop-orange); font-weight: 600; }
  .lop-tagline .a { color: var(--lop-teal); font-weight: 600; }
  .lop-tagline .o { color: var(--lop-purple); font-weight: 600; }

  /* ════════ SIDEBAR — stepper + progress rail ════════ */
  .sidebar {
    position: sticky; top: 56px; align-self: start;
    display: flex; flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - 80px);
  }
  /* Vertical stepper stacked in the sidebar. */
  .stepper {
    display: flex; flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    background: var(--lop-bg-mid);
    padding: 10px;
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-md);
    box-shadow: var(--lop-shadow-md);
    backdrop-filter: blur(10px);
  }

  /* Each step is a horizontal row: num · label */
  .step {
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; padding: 8px 10px; transition: all 0.15s;
    border: 1px solid transparent;
    border-radius: var(--lop-radius-sm);
    text-align: left;
  }

  .step:hover {
    background: var(--lop-bg-card);
    border-color: var(--lop-border-bright);
  }

  .step.active {
    background: linear-gradient(135deg, var(--lop-teal) 0%, var(--lop-teal-dark) 100%);
    border-color: var(--lop-teal);
    color: var(--lop-bg-deep);
    box-shadow: 0 0 0 1px var(--lop-border-glow);
  }
  .step.active .step-num,
  .step.active .step-label { color: var(--lop-bg-deep); }

  .step.completed {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--lop-success);
  }
  .step.completed .step-num { color: var(--lop-success); }

  .step-num {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px;
    line-height: 1;
    color: var(--lop-text-secondary);
    min-width: 22px;                       /* aligns 01/02/… neatly */
  }

  .step-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.05em;
    line-height: 1.2; color: var(--lop-text-muted);
    flex: 1;
  }

  /* Single-column fallback under 900px — sidebar becomes horizontal
     rail on top of the content. */
  @media (max-width: 900px) {
    .wrap {
      grid-template-columns: 1fr;
    }
    .wrap > form,
    .wrap > .masthead,
    .wrap > .dock,
    .wrap > .breadcrumb-tip { grid-column: 1; }
    .stepper {
      grid-column: 1; grid-row: auto;
      flex-direction: row; overflow-x: auto; overflow-y: visible;
      max-height: none; position: sticky; top: 40px;
    }
    .step { flex: 0 0 auto; }
  }

  /* ════════ DOCK — inside sidebar, vertical progress rail ════════
     Sits below the stepper. Shows current stage, a vertical progress
     bar (height ∝ % complete), and the count. No actions — Reset /
     Generate / Save / Open / etc. all live in the topbar now. */
  .dock {
    background: var(--lop-bg-card);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-md);
    padding: 12px;
    display: flex; flex-direction: column; align-items: center;
    gap: 10px;
    box-shadow: var(--lop-shadow-md);
    backdrop-filter: blur(10px);
    font-size: 11px;
  }

  /* Vertical progress bar · 120px tall, fills upward as %. */
  .dock-vprogress {
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
  }
  .dock-vprogress-track {
    width: 8px; height: 120px;
    background: var(--lop-bg-deep);
    border-radius: 4px;
    position: relative; overflow: hidden;
  }
  .dock-vprogress-fill {
    position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
    background: linear-gradient(0deg, var(--lop-teal) 0%, var(--lop-purple) 100%);
    transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 8px var(--lop-teal-glow);
  }
  .dock-vprogress-pct {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--lop-teal); font-weight: 700;
  }

  /* Kept for backwards compat with any external caller · unused by the
     new sidebar layout. */
  .dock-progress {
    flex: 1; min-width: 120px; height: 4px;
    background: var(--lop-bg-deep);
    border-radius: 2px;
    position: relative; overflow: hidden;
  }

  .dock-progress-fill {
    position: absolute; inset: 0; width: 0%;
    background: linear-gradient(90deg, var(--lop-teal) 0%, var(--lop-purple) 100%);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 0 10px var(--lop-teal-glow);
  }

  .dock-stat {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--lop-text-muted); white-space: nowrap;
  }
  .dock-stat strong {
    color: var(--lop-teal); font-weight: 700;
  }

  .dock-stage {
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 12px;
    letter-spacing: -0.005em;
    color: var(--lop-text-primary);
    background: var(--lop-bg-deep);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-sm);
    padding: 3px 8px;
    white-space: nowrap;
  }
  .dock-stage::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--lop-teal);
    box-shadow: 0 0 8px var(--lop-teal-glow);
    margin-right: 8px;
    vertical-align: middle;
  }

  .dock-actions { display: flex; gap: 4px; flex-wrap: nowrap; }

  .dock-btn {
    background: linear-gradient(135deg, var(--lop-teal) 0%, var(--lop-teal-dark) 100%);
    color: var(--lop-bg-deep); border: none;
    padding: 4px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
    font-weight: 700;
    cursor: pointer; transition: all 0.15s;
    border-radius: var(--lop-radius-sm);
    white-space: nowrap;
  }
  .dock-btn:hover {
    background: linear-gradient(135deg, var(--lop-orange) 0%, var(--lop-orange-dark) 100%);
    color: var(--lop-text-primary);
    transform: translateY(-1px);
  }

  .dock-btn.ghost {
    background: transparent;
    color: var(--lop-text-secondary);
    border: 1px solid var(--lop-border-bright);
  }
  .dock-btn.ghost:hover {
    background: var(--lop-bg-card-hi);
    color: var(--lop-teal);
    border-color: var(--lop-teal);
    transform: translateY(-1px);
  }

  /* ════════ SECTIONS ════════ */
  .section {
    display: none;
    margin-bottom: 40px;
    animation: fadeIn 0.4s ease-out;
    /* Land the section title 480 px below the viewport top — generous
       clearance below the sticky ribbon (topbar + stepper + dock,
       ~200–220 px tall) so the big "01.", "02.", … is fully visible
       and not partially hidden behind the chrome. */
    scroll-margin-top: 480px;
  }
  .section.active { display: block; }
  /* Same offset for direct children — used if a deeper anchor is ever
     scrolled to (search highlights, deep-link targets, etc.). */
  .section > * { scroll-margin-top: 480px; }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .section-head {
    display: grid; grid-template-columns: 80px 1fr auto;
    gap: 24px; align-items: baseline;
    border-bottom: 1px solid var(--lop-border);
    padding-bottom: 18px; margin-bottom: 28px;
  }

  .section-num {
    font-family: 'Inter', sans-serif; font-weight: 900; font-size: 56px;
    line-height: 1;
    background: linear-gradient(135deg, var(--lop-teal) 0%, var(--lop-purple) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .section-num .dot {
    color: var(--lop-orange);
    -webkit-text-fill-color: var(--lop-orange);
  }

  .section-title-block .label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--lop-teal); margin-bottom: 6px; font-weight: 600;
  }

  .section-title-block h2 {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 30px;
    line-height: 1.1; letter-spacing: -0.015em;
    color: var(--lop-text-primary);
  }

  .section-title-block .subtitle {
    font-family: 'Inter', sans-serif; font-weight: 400;
    color: var(--lop-text-muted); margin-top: 8px; font-size: 15px; max-width: 580px;
    line-height: 1.5;
  }

  .section-completion {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--lop-text-muted); text-align: right;
  }
  .section-completion .pct {
    font-size: 22px; font-weight: 700; color: var(--lop-teal);
    display: block; font-family: 'Inter', sans-serif; margin-bottom: 2px;
  }

  /* ════════ FIELDS ════════ */
  .field {
    margin-bottom: 28px; padding-left: 80px; position: relative;
  }

  /* 📎 upload-and-transcribe chip — mounted on every `.field` by
     smartbriefer-upload.js. Sits at the top-right corner of the field block,
     above the field-input. POSTs the chosen file to /api/v1/transcribe
     and pastes the returned text into the underlying input/textarea. */
  .smartbriefer-upload-btn {
    position: absolute; top: 0; right: 0;
    z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    padding: 0;
    background: var(--lop-bg-elev);
    color: var(--lop-text-secondary);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-sm);
    cursor: pointer;
    font-size: 16px; line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }
  .smartbriefer-upload-btn:hover {
    background: var(--lop-bg-card);
    border-color: var(--lop-teal);
    color: var(--lop-teal);
  }
  .smartbriefer-upload-btn[disabled] { cursor: progress; opacity: 0.7; }

  .field-num {
    position: absolute; left: 0; top: 4px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--lop-text-dim); letter-spacing: 0.1em; text-transform: uppercase;
  }
  .field-num::after {
    content: ""; display: block; width: 40px; height: 1px;
    background: var(--lop-border); margin-top: 8px;
  }

  .field-label {
    font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 600;
    color: var(--lop-text-primary); margin-bottom: 4px; line-height: 1.35;
  }
  .field-label .req {
    color: var(--lop-orange); font-weight: 500;
    margin-left: 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  }

  .field-help {
    font-family: 'Inter', sans-serif; font-weight: 400;
    color: var(--lop-text-muted); font-size: 14px; margin-bottom: 14px; line-height: 1.5;
  }

  .field-input, .field-textarea, .field-select {
    width: 100%;
    background: var(--lop-bg-card);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-sm);
    padding: 12px 14px;
    font-family: 'Inter', sans-serif; font-size: 14px;
    color: var(--lop-text-primary);
    transition: all 0.2s;
  }
  .field-input::placeholder, .field-textarea::placeholder {
    color: var(--lop-text-dim);
  }
  .field-input:focus, .field-textarea:focus, .field-select:focus {
    outline: none;
    border-color: var(--lop-teal);
    background: var(--lop-bg-card-hi);
    box-shadow: 0 0 0 3px var(--lop-teal-glow);
  }
  .field-textarea {
    resize: vertical; min-height: 80px;
  }

  .field-options {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px;
  }

  .field-option {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: var(--lop-bg-card);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-sm);
    cursor: pointer; transition: all 0.15s;
    font-size: 13px; line-height: 1.4;
    color: var(--lop-text-secondary);
  }
  .field-option:hover {
    background: var(--lop-bg-card-hi);
    border-color: var(--lop-border-bright);
  }
  .field-option input {
    margin-top: 2px; flex-shrink: 0;
    accent-color: var(--lop-teal);
  }
  .field-option.selected {
    background: var(--lop-teal-glow);
    border-color: var(--lop-teal);
    color: var(--lop-text-primary);
  }
  .field-option .opt-label { font-weight: 600; color: var(--lop-text-primary); }
  .field-option .opt-desc {
    color: var(--lop-text-muted); font-size: 12px; display: block; margin-top: 2px;
  }

  .field-tag {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 2px 8px; margin-left: 8px;
    border: 1px solid currentColor;
    border-radius: 3px;
    vertical-align: middle;
    font-weight: 600;
  }
  .tag-critical { color: var(--lop-orange); }
  .tag-strategic { color: var(--lop-warning); }
  .tag-tech { color: var(--lop-teal); }
  .tag-new { color: var(--lop-purple); }

  /* ════════ DYNAMIC LISTS ════════ */
  .dyn-list {
    margin-bottom: 12px;
    padding: 16px;
    background: var(--lop-bg-mid);
    border: 1px dashed var(--lop-border);
    border-radius: var(--lop-radius-md);
  }

  .dyn-item {
    background: var(--lop-bg-card);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-sm);
    padding: 14px; margin-bottom: 10px; position: relative;
    display: grid; gap: 10px;
  }
  .dyn-item.cols-2 { grid-template-columns: 1fr 1fr; }
  .dyn-item.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
  .dyn-item.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

  .dyn-item input, .dyn-item select {
    border: none; border-bottom: 1px solid var(--lop-border);
    padding: 6px 0; background: transparent;
    font-family: 'Inter', sans-serif; font-size: 13px;
    color: var(--lop-text-primary);
  }
  .dyn-item input::placeholder { color: var(--lop-text-dim); }
  .dyn-item input:focus, .dyn-item select:focus {
    outline: none; border-color: var(--lop-teal);
  }
  .dyn-item select option {
    background: var(--lop-bg-card); color: var(--lop-text-primary);
  }

  .dyn-item-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--lop-text-muted); margin-bottom: 2px; display: block;
  }

  .dyn-remove {
    position: absolute; top: 8px; right: 8px;
    background: transparent; color: var(--lop-orange);
    border: 1px solid var(--lop-orange);
    border-radius: 50%;
    width: 22px; height: 22px;
    cursor: pointer; font-size: 14px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
  }
  .dyn-remove:hover {
    background: var(--lop-orange);
    color: var(--lop-text-primary);
  }

  .dyn-add {
    background: transparent; color: var(--lop-teal);
    border: 1px dashed var(--lop-teal);
    border-radius: var(--lop-radius-sm);
    padding: 12px 16px;
    cursor: pointer; transition: all 0.2s; width: 100%;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 600;
  }
  .dyn-add:hover {
    background: var(--lop-teal);
    color: var(--lop-bg-deep);
  }

  /* ════════ NAVIGATION ════════ */
  .nav-buttons {
    display: flex; justify-content: space-between; gap: 12px;
    margin-top: 40px; padding-top: 24px;
    border-top: 1px solid var(--lop-border);
  }

  .nav-btn {
    background: linear-gradient(135deg, var(--lop-teal) 0%, var(--lop-teal-dark) 100%);
    color: var(--lop-bg-deep);
    border: 1px solid var(--lop-teal);
    border-radius: var(--lop-radius-sm);
    padding: 14px 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.15em;
    font-weight: 700;
    cursor: pointer; transition: all 0.2s;
  }
  .nav-btn:hover {
    background: linear-gradient(135deg, var(--lop-orange) 0%, var(--lop-orange-dark) 100%);
    border-color: var(--lop-orange);
    color: var(--lop-text-primary);
  }

  .nav-btn.outline {
    background: transparent;
    color: var(--lop-text-secondary);
    border-color: var(--lop-border-bright);
  }
  .nav-btn.outline:hover {
    background: var(--lop-bg-card);
    color: var(--lop-teal);
    border-color: var(--lop-teal);
  }

  .nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
  .nav-btn:disabled:hover {
    background: transparent; border-color: var(--lop-border-bright);
    color: var(--lop-text-secondary);
  }

  /* ════════ PULL QUOTE ════════ */
  .pull {
    border-left: 3px solid var(--lop-orange);
    background: var(--lop-orange-glow);
    padding: 18px 24px;
    margin: 0 0 32px 80px;
    border-radius: 0 var(--lop-radius-md) var(--lop-radius-md) 0;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: 16px; line-height: 1.55;
    color: var(--lop-text-secondary); max-width: 740px;
  }
  .pull cite {
    display: block; font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.18em; font-style: normal;
    color: var(--lop-orange); margin-top: 12px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
  }

  /* ════════ READINESS DASHBOARD ════════ */
  .readiness {
    background: linear-gradient(135deg, var(--lop-bg-card) 0%, var(--lop-bg-mid) 100%);
    border: 1px solid var(--lop-border-bright);
    border-radius: var(--lop-radius-lg);
    padding: 32px;
    margin-bottom: 32px;
    position: relative;
    box-shadow: var(--lop-shadow-md);
  }
  .readiness::before {
    content: "READINESS DASHBOARD";
    position: absolute; top: -10px; left: 24px;
    background: var(--lop-bg-deep);
    padding: 0 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.2em; color: var(--lop-teal); font-weight: 600;
  }

  .readiness-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
  }

  .readiness-score {
    font-family: 'Inter', sans-serif; font-size: 72px; font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--lop-teal) 0%, var(--lop-purple) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .readiness-score .denom {
    font-size: 24px; color: var(--lop-text-muted);
    -webkit-text-fill-color: var(--lop-text-muted);
    font-weight: 500;
  }

  .readiness-grade {
    display: inline-block; padding: 10px 18px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.15em;
    border: 1px solid currentColor;
    border-radius: var(--lop-radius-sm);
    font-weight: 700;
  }
  .grade-a { color: var(--lop-success); }
  .grade-b { color: var(--lop-warning); }
  .grade-c { color: var(--lop-orange); }
  .grade-d { color: var(--lop-danger); }

  .readiness-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px; margin-bottom: 24px;
  }

  .readiness-dim {
    background: var(--lop-bg-deep);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-sm);
    padding: 16px;
  }

  .readiness-dim-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--lop-text-muted); margin-bottom: 10px;
  }

  .readiness-dim-bar {
    height: 6px;
    background: var(--lop-bg-mid);
    border-radius: 3px;
    position: relative; overflow: hidden; margin-bottom: 8px;
  }

  .readiness-dim-fill {
    position: absolute; inset: 0; width: 0%;
    transition: width 0.6s ease-out;
    border-radius: 3px;
  }
  .fill-good { background: linear-gradient(90deg, var(--lop-success), var(--lop-teal)); }
  .fill-fair { background: linear-gradient(90deg, var(--lop-warning), var(--lop-orange)); }
  .fill-weak { background: linear-gradient(90deg, var(--lop-orange), var(--lop-danger)); }

  .readiness-dim-pct {
    font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700;
    color: var(--lop-text-primary);
  }

  .readiness-flags { margin-top: 16px; }
  .readiness-flags h4 {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--lop-orange); margin-bottom: 12px; font-weight: 600;
  }
  .readiness-flag {
    padding: 10px 14px;
    background: var(--lop-orange-glow);
    border-left: 3px solid var(--lop-orange);
    border-radius: 0 var(--lop-radius-sm) var(--lop-radius-sm) 0;
    margin-bottom: 6px;
    font-size: 13px; color: var(--lop-text-secondary);
  }
  .readiness-flag.empty {
    color: var(--lop-text-secondary);
    border-color: var(--lop-success);
    background: rgba(16, 185, 129, 0.08);
  }

  /* ════════ OUTPUT PANEL ════════ */
  .output {
    background: linear-gradient(135deg, var(--lop-bg-card) 0%, var(--lop-bg-mid) 100%);
    border: 1px solid var(--lop-border-bright);
    border-radius: var(--lop-radius-lg);
    padding: 40px; position: relative; margin-top: 32px;
    box-shadow: var(--lop-shadow-md);
  }
  .output::before {
    content: "DELIVERABLES"; position: absolute;
    top: -10px; left: 32px;
    background: var(--lop-bg-deep);
    padding: 0 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    letter-spacing: 0.2em; color: var(--lop-orange); font-weight: 600;
  }

  .output h3 {
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 26px;
    margin-bottom: 8px; letter-spacing: -0.01em;
    color: var(--lop-text-primary);
  }
  .output .ot {
    font-family: 'Inter', sans-serif; font-weight: 400;
    color: var(--lop-text-muted); margin-bottom: 24px; font-size: 14px; line-height: 1.55;
  }

  .output-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px; margin-bottom: 24px;
  }

  .output-card {
    background: var(--lop-bg-deep);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-md);
    padding: 22px;
    transition: all 0.2s;
  }
  .output-card:hover {
    border-color: var(--lop-teal);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--lop-teal-glow);
  }

  .output-card-label {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--lop-teal); margin-bottom: 8px; font-weight: 600;
  }
  .output-card h4 {
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: 17px;
    margin-bottom: 6px; color: var(--lop-text-primary);
  }
  .output-card p {
    font-size: 13px; color: var(--lop-text-muted); line-height: 1.55;
    margin-bottom: 14px;
  }

  .output-card-btn {
    background: linear-gradient(135deg, var(--lop-teal) 0%, var(--lop-teal-dark) 100%);
    color: var(--lop-bg-deep); border: none;
    padding: 10px 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em;
    font-weight: 700;
    cursor: pointer; transition: all 0.2s; width: 100%;
    border-radius: var(--lop-radius-sm);
  }
  .output-card-btn:hover {
    background: linear-gradient(135deg, var(--lop-orange) 0%, var(--lop-orange-dark) 100%);
    color: var(--lop-text-primary);
  }

  .preview {
    background: var(--lop-bg-deep);
    border: 1px solid var(--lop-border);
    border-radius: var(--lop-radius-sm);
    padding: 24px;
    max-height: 480px; overflow-y: auto;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    line-height: 1.7; color: var(--lop-text-secondary);
    white-space: pre-wrap; word-break: break-word;
  }
  .preview::-webkit-scrollbar { width: 8px; }
  .preview::-webkit-scrollbar-track { background: var(--lop-bg-mid); }
  .preview::-webkit-scrollbar-thumb { background: var(--lop-border-bright); border-radius: 4px; }

  /* ════════ TOAST & FOOTER ════════ */
  footer {
    margin-top: 64px;
    border-top: 1px solid var(--lop-border);
    padding-top: 24px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.18em;
    color: var(--lop-text-muted);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  }
  /* footer-specific sizing — `.lop-logo--sm` modifier is applied on the
     `<a class="lop-logo lop-logo--sm">`, so this is the visual home; left
     here for symmetry with future surface tweaks. */

  .toast {
    position: fixed; bottom: 32px; right: 32px;
    background: var(--lop-bg-card);
    color: var(--lop-text-primary);
    border: 1px solid var(--lop-teal);
    padding: 16px 24px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    z-index: 100; transform: translateY(120%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: var(--lop-shadow-lg);
    border-radius: var(--lop-radius-sm);
  }
  .toast.show { transform: translateY(0); }
  .toast::before {
    content: "▸ "; color: var(--lop-teal); font-weight: 800;
  }

  /* ════════ RESPONSIVE ════════ */
  @media (max-width: 720px) {
    .wrap { padding: 32px 20px 80px; }
    .section-head { grid-template-columns: 1fr; gap: 8px; }
    .section-num { font-size: 36px; }
    .field { padding-left: 0; }
    .field-num { position: static; margin-bottom: 8px; }
    .field-num::after { display: none; }
    .pull { margin-left: 0; }
    .stepper { grid-template-columns: repeat(7, 1fr); }
    .step-label { font-size: 7px; }
    .dyn-item.cols-2, .dyn-item.cols-3, .dyn-item.cols-4 { grid-template-columns: 1fr; }
    .masthead h1 { font-size: 40px; }
  }

  @media print {
    .dock, .nav-buttons, .stepper, .output-grid, footer { display: none; }
    .section { display: block !important; }
    body {
      background: white; color: black;
    }
  }