:root {
    --paper: #f4efe6;
    --paper-2: #ebe4d6;
    --ink: #161512;
    --ink-2: #3a3733;
    --muted: #6b6660;
    --rule: #2a2825;
    --accent: #0f6b6b;       /* clinical teal */
    --accent-2: #d94f1e;     /* signal orange */
    --highlight: #f0d878;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  body {
    background: var(--paper);
    background-image:
      radial-gradient(circle at 1px 1px, rgba(22,21,18,0.06) 1px, transparent 0);
    background-size: 24px 24px;
    color: var(--ink);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* ─── Typography ─────────────────────────────────────────── */
  h1, h2, h3, h4 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  h1 {
    font-size: clamp(48px, 8vw, 112px);
    line-height: 0.92;
    font-weight: 300;
    font-variation-settings: "opsz" 144;
  }

  h2 {
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1.0;
    font-weight: 400;
  }

  h3 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .italic { font-style: italic; }

  /* ─── Nav ────────────────────────────────────────────────── */
  nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid rgba(22,21,18,0.12);
    backdrop-filter: blur(8px);
  }
  nav .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 32px;
    max-width: 1240px;
    margin: 0 auto;
  }
  .logo {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -0.02em;
  }
  .logo .dot {
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--accent-2);
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: 2px;
  }
  nav ul {
    display: flex;
    gap: 28px;
    list-style: none;
  }
  nav ul a {
    color: var(--ink-2);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s;
  }
  nav ul a:hover { color: var(--accent); }

  @media (max-width: 720px) {
    nav ul { display: none; }
  }

  /* ─── Hero ───────────────────────────────────────────────── */
  .hero {
    padding: 80px 0 100px;
    position: relative;
  }
  .hero .meta-row {
    display: flex;
    gap: 24px;
    align-items: center;
    color: var(--muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 40px;
  }
  .hero .meta-row span { display: flex; align-items: center; gap: 8px; }
  .hero .meta-row .pill {
    border: 1px solid var(--ink);
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--ink);
  }

  .hero h1 .acronym {
    background: linear-gradient(180deg, transparent 60%, var(--highlight) 60%, var(--highlight) 90%, transparent 90%);
    padding: 0 6px;
  }
  .hero h1 .ampersand {
    font-style: italic;
    font-weight: 300;
    color: var(--accent);
  }

  .hero .expansion {
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-size: clamp(20px, 2.4vw, 30px);
    line-height: 1.25;
    color: var(--ink-2);
    max-width: 720px;
    margin-top: 36px;
    font-weight: 300;
  }
  .hero .expansion strong {
    font-weight: 500;
    font-style: normal;
    color: var(--ink);
  }

  .hero .lede {
    max-width: 640px;
    margin-top: 40px;
    font-size: 19px;
    line-height: 1.6;
    color: var(--ink-2);
  }

  .hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 44px;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: transform 0.15s, background 0.2s;
  }
  .btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
  .btn.ghost {
    background: transparent;
    color: var(--ink);
  }
  .btn.ghost:hover { background: var(--ink); color: var(--paper); }

  .hero .marginalia {
    position: absolute;
    right: 32px;
    top: 200px;
    width: 240px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-left: 2px solid var(--accent-2);
    padding-left: 16px;
  }
  @media (max-width: 1100px) { .hero .marginalia { display: none; } }

  /* ─── Section frame ──────────────────────────────────────── */
  section { padding: 100px 0; border-top: 1px solid rgba(22,21,18,0.15); position: relative; }
  .section-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--accent-2);
    letter-spacing: 0.1em;
    margin-bottom: 16px;
    display: block;
  }
  .section-head {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 64px;
    align-items: start;
  }
  .section-head .right p {
    font-size: 18px;
    color: var(--ink-2);
    max-width: 640px;
  }
  @media (max-width: 880px) {
    .section-head { grid-template-columns: 1fr; gap: 24px; }
  }

  /* ─── Why developers (section 1) ─────────────────────────── */
  .reasons {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  .reason {
    border-top: 1px solid var(--ink);
    padding: 28px 0;
    position: relative;
  }
  .reason .num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 14px;
  }
  .reason h3 {
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: 14px;
    font-weight: 400;
  }
  .reason p {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.55;
  }
  .reason.r1 { grid-column: span 5; }
  .reason.r2 { grid-column: span 4; }
  .reason.r3 { grid-column: span 3; }
  .reason.r4 { grid-column: span 4; }
  .reason.r5 { grid-column: span 4; }
  .reason.r6 { grid-column: span 4; }
  @media (max-width: 880px) {
    .reasons { grid-template-columns: 1fr; }
    .reason { grid-column: span 1 !important; }
  }

  /* ─── Architecture (section 2) ───────────────────────────── */
  .arch-diagram {
    background: var(--paper-2);
    border: 1px solid var(--ink);
    padding: 40px;
    margin-bottom: 60px;
    position: relative;
  }
  .arch-diagram::before {
    content: "FIG. 01 — PHRAME REFERENCE ARCHITECTURE";
    position: absolute;
    top: -10px;
    left: 32px;
    background: var(--paper);
    padding: 0 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--accent-2);
  }
  .arch-diagram svg { width: 100%; height: auto; display: block; }

  .components {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
  }
  .component {
    padding: 32px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    background: var(--paper);
    transition: background 0.2s;
  }
  .component:hover { background: var(--paper-2); }
  .component .label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .component h3 {
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
  }
  .component h3 .tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    background: var(--accent);
    color: var(--paper);
    padding: 3px 8px;
    vertical-align: 6px;
    letter-spacing: 0.1em;
    margin-left: 8px;
  }
  .component p { color: var(--ink-2); font-size: 15px; }
  .component .stack {
    margin-top: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
  }
  .component .gh-link {
    display: inline-block;
    margin-top: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--accent);
    text-decoration: none;
    text-transform: uppercase;
  }
  .component .gh-link:hover { text-decoration: underline; }
  .component .paper-card {
    display: block;
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    text-decoration: none;
    transition: background 0.2s;
  }
  .component .paper-card:hover { background: #d8d2c4; }
  .component .paper-card-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px;
  }
  .component .paper-card-title {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.4;
  }
  @media (max-width: 720px) {
    .components { grid-template-columns: 1fr; }
  }

  /* ─── Comparison (section 3) ─────────────────────────────── */
  .ohdsi-relation {
    background: var(--ink);
    color: var(--paper);
    padding: 60px;
    margin-bottom: 80px;
    position: relative;
  }
  .ohdsi-relation h3 {
    font-family: 'Fraunces', serif;
    font-size: 36px;
    color: var(--paper);
    margin-bottom: 24px;
    font-weight: 400;
  }
  .ohdsi-relation .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 32px;
  }
  .ohdsi-relation .col h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--highlight);
    margin-bottom: 14px;
  }
  .ohdsi-relation .col p {
    color: #d6d2c9;
    font-size: 15px;
  }
  @media (max-width: 720px) { .ohdsi-relation .row { grid-template-columns: 1fr; } .ohdsi-relation { padding: 36px 28px; } }

  table.compare {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  table.compare th, table.compare td {
    text-align: left;
    padding: 16px 14px;
    border-bottom: 1px solid rgba(22,21,18,0.18);
    vertical-align: top;
  }
  table.compare th {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    border-bottom: 1px solid var(--ink);
  }
  table.compare td strong {
    font-family: 'Fraunces', serif;
    font-weight: 500;
    font-size: 17px;
  }
  table.compare tr.phrame { background: rgba(15,107,107,0.07); }
  table.compare tr.phrame td:first-child strong { color: var(--accent); }
  .check { color: var(--accent); font-weight: 700; }
  .x { color: var(--accent-2); }
  .dash { color: var(--muted); }

  /* ─── Engagement (section 4) ─────────────────────────────── */
  .paths {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: 40px;
  }
  .path {
    padding: 40px 32px;
    border: 1px solid var(--ink);
    background: var(--paper);
    position: relative;
    transition: transform 0.2s;
  }
  .path:not(:last-child) { border-right: none; }
  .path:hover { background: var(--paper-2); }
  .path .badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--accent-2);
    margin-bottom: 24px;
  }
  .path h3 {
    font-size: 30px;
    line-height: 1.1;
    margin-bottom: 8px;
    font-weight: 400;
  }
  .path .tagline {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--accent);
    margin-bottom: 24px;
    font-size: 16px;
  }
  .path ul {
    list-style: none;
    margin-bottom: 28px;
  }
  .path ul li {
    padding: 10px 0;
    border-top: 1px dashed rgba(22,21,18,0.2);
    font-size: 14px;
    color: var(--ink-2);
    display: flex;
    gap: 10px;
  }
  .path ul li::before {
    content: "→";
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
  }
  .path .price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--muted);
    padding-top: 12px;
    border-top: 1px solid var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  @media (max-width: 880px) {
    .paths { grid-template-columns: 1fr; }
    .path:not(:last-child) { border-right: 1px solid var(--ink); border-bottom: none; }
  }

  .scope-note {
    margin-top: 40px;
    padding: 24px 28px;
    background: var(--paper-2);
    border-left: 4px solid var(--accent-2);
    font-size: 15px;
    color: var(--ink-2);
    max-width: 820px;
  }
  .scope-note strong { color: var(--ink); font-family: 'Fraunces', serif; font-weight: 500; }

  /* ─── Footer ─────────────────────────────────────────────── */
  footer {
    padding: 80px 0 40px;
    border-top: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
  }
  footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
  footer h4 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--highlight);
    margin-bottom: 16px;
  }
  footer .brand {
    font-family: 'Fraunces', serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--paper);
    margin-bottom: 12px;
  }
  footer .brand .dot { display: inline-block; width: 10px; height: 10px; background: var(--accent-2); border-radius: 50%; margin-right: 8px; vertical-align: 4px; }
  footer p, footer ul { color: #b8b3a9; font-size: 14px; }
  footer ul { list-style: none; }
  footer ul li { padding: 4px 0; }
  footer ul a { color: #d6d2c9; text-decoration: none; }
  footer ul a:hover { color: var(--highlight); }
  footer .legal {
    grid-column: 1 / -1;
    border-top: 1px solid #333;
    padding-top: 24px;
    margin-top: 24px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #807c75;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }
  @media (max-width: 880px) { footer .container { grid-template-columns: 1fr 1fr; } }

  /* ─── Animations ─────────────────────────────────────────── */
  @keyframes rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero h1, .hero .expansion, .hero .lede, .hero-actions, .hero .meta-row {
    animation: rise 0.9s ease-out backwards;
  }
  .hero .meta-row { animation-delay: 0s; }
  .hero h1 { animation-delay: 0.1s; }
  .hero .expansion { animation-delay: 0.3s; }
  .hero .lede { animation-delay: 0.5s; }
  .hero-actions { animation-delay: 0.7s; }

  /* SVG diagram styles */
  .arch-svg .box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
  .arch-svg .box-accent { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
  .arch-svg .box-warm { fill: #f5e3c8; stroke: var(--ink); stroke-width: 1.5; }
  .arch-svg .box-data { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.5; }
  .arch-svg text { font-family: 'JetBrains Mono', monospace; font-size: 11px; fill: var(--ink); }
  .arch-svg .title { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 500; }
  .arch-svg .title-light { fill: var(--paper); }
  .arch-svg .arrow { stroke: var(--ink-2); stroke-width: 1.2; fill: none; }
  .arch-svg .section-label { font-size: 10px; fill: var(--accent-2); letter-spacing: 0.1em; }

  /* ─── Hero building frame ─────────────────────────────────── */
  .hero-frame {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 62%;
    pointer-events: none;
    overflow: hidden;
    color: var(--accent);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 22%, black 52%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 22%, black 52%);
  }
  .hero-frame svg {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    opacity: 0.13;
  }
  @media (max-width: 960px) { .hero-frame { display: none; } }

  /* ─── Case Studies ───────────────────────────────────────── */
  .cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid var(--ink);
    border-left: 1px solid var(--ink);
    margin-top: 64px;
  }
  .case {
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    padding: 48px 40px;
    background: var(--paper);
  }
  .case .case-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--accent-2);
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .case h3 {
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
  }
  .case .case-tagline {
    font-family: 'Fraunces', serif;
    font-style: italic;
    color: var(--accent);
    font-size: 17px;
    margin-bottom: 28px;
  }
  .case .case-body {
    font-size: 15px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 28px;
  }
  .case .metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
  }
  .case .metric {
    border-top: 1px solid var(--ink);
    padding-top: 12px;
  }
  .case .metric .val {
    font-family: 'Fraunces', serif;
    font-size: 30px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1;
    margin-bottom: 4px;
  }
  .case .metric .desc {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .case .components-used {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--muted);
    border-top: 1px solid rgba(22,21,18,0.15);
    padding-top: 16px;
    margin-bottom: 16px;
  }
  .case .components-used span {
    color: var(--accent);
  }
  .case-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    text-decoration: none;
  }
  .case-link:hover { text-decoration: underline; }
  @media (max-width: 880px) {
    .cases { grid-template-columns: 1fr; }
  }


/* ---------------------------------------------------------------------
   Promoted from inline style attributes so the CSP can drop
   'unsafe-inline' from style-src. Declarations are unchanged.
   --------------------------------------------------------------------- */
.ohdsi-lede { color:#d6d2c9; max-width:840px; }
.muted-inline { color:var(--muted); }
.table-legend { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-top:16px; letter-spacing:0.05em; }
.cta-band { margin-top:60px; padding:48px; background:var(--ink); color:var(--paper); display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; }
.cta-band-title { color:var(--paper); font-size:32px; margin-bottom:8px; }
.cta-band-text { color:#b8b3a9; font-size:16px; }
.cta-band-actions { display:flex; gap:12px; flex-wrap:wrap; }
/* Compound `.btn.x` selectors are deliberate, not stylistic. These two rules
   replace inline style attributes, which outrank every selector. `.btn.ghost`
   sets color at (0,2,0), so a bare `.btn-on-ink` at (0,1,0) would lose and the
   button would render dark text on the dark CTA band. Matching (0,2,0) and
   appearing later in this file restores the original result. */
.btn.btn-accent { background:var(--accent); border-color:var(--accent); }
.btn.btn-on-ink { color:var(--paper); border-color:var(--paper); }