/* Lucia marketing site · sub-page shared components
   Prefixed pg- to avoid collisions with sections.css.
   Every rule here uses base.css tokens. Radius = 4px (capsule buttons excepted).
   No coloured left borders, no top accent bars, no icon fonts, no shadows stacking. */


/* ============================================================================
   .pg-hero  ·  Sub-page page header
   ============================================================================
   Usage: one per sub-page, immediately after <main>. Optional right-side exhibit.
   Structure:
     <section class="pg-hero">
       <div class="container pg-hero-grid">        ← omit -grid if no exhibit
         <div class="pg-hero-copy">
           <p class="label">Desk 01 · Credit Analysis</p>
           <h1>From intake to committee, <em class="gold">in days.</em></h1>
           <p class="pg-hero-lede">…one or two sentences…</p>
         </div>
         <div class="pg-hero-exhibit">…exhibit markup…</div>   ← optional
       </div>
     </section>
   Breakpoints: ≤900 single column, exhibit stacks below. */

.pg-hero {
  position: relative;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(48px, 6vw, 88px);
  overflow: hidden;
  background: var(--cream);
}
/* horizontal rule texture — same as home hero, subtle ledger lines */
.pg-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 35px, rgba(25, 25, 24, 0.07) 35px 36px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 60%, transparent 96%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.5) 60%, transparent 96%);
}
/* gold page-edge line — 2px, opacity .85 */
.pg-hero::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); opacity: .85; pointer-events: none;
  left: calc(max(var(--gutter), (100% - var(--container)) / 2) - 28px);
}
.pg-hero > .container { position: relative; }
.pg-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.pg-hero-copy .label { margin-bottom: 16px; }
.pg-hero-copy h1 {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 0.8rem + 3.2vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pg-hero-lede {
  margin-top: 22px;
  font-size: var(--text-lede);
  color: var(--ink-2);
  max-width: 54ch;
}
@media (max-width: 900px) {
  .pg-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-hero-grid > * { min-width: 0; }
  .pg-hero-exhibit { max-width: 560px; margin-top: 32px; }
}


/* ============================================================================
   .pg-rows  ·  Numbered control rows (security controls, feature deep-dives)
   ============================================================================
   Structure:
     <div class="pg-rows">
       <div class="pg-row">
         <span class="pg-row-num num">01</span>
         <span class="pg-row-name">Each lender in its own tenant</span>
         <span class="pg-row-desc">Borrower data, documents, and models…</span>
       </div>
       …
     </div>
   Breakpoints: ≤768 two-line layout (number+name on one line, desc below). */

.pg-rows {
  margin-top: clamp(32px, 4vw, 56px);
}
.pg-row {
  display: grid;
  grid-template-columns: 72px 260px 1fr;
  gap: 12px 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.pg-row:first-child { border-top: 1px solid var(--line-strong); }
.pg-row-num {
  font-family: var(--mono);
  font-size: var(--text-small);
  color: var(--gold-ink);
  letter-spacing: 0.06em;
}
.pg-row-name {
  font-weight: 600;
  font-size: var(--text-body);
}
.pg-row-desc {
  color: var(--ink-2);
  font-size: var(--text-small);
  max-width: 52ch;
}
@media (max-width: 768px) {
  .pg-row {
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
  }
  .pg-row-desc {
    grid-column: 1 / -1;
    max-width: none;
  }
}


/* ============================================================================
   .pg-band  ·  Dark chip band (security hard-commitments, product highlights)
   ============================================================================
   Must be inside a .dark section. Centered eyebrow + h2 + chip row.
   Structure:
     <section class="dark">
       <div class="container pg-band">
         <p class="label">…eyebrow…</p>
         <h2>…</h2>
         <div class="chip-line">
           <span class="chip chip-line-item">AES-256</span>
           …
         </div>
       </div>
     </section>
   Breakpoints: chips wrap naturally. */

.pg-band {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.pg-band .label { margin-bottom: 18px; }
.pg-band h2 {
  font-family: var(--serif);
  font-size: var(--text-h2);
  line-height: 1.06;
  letter-spacing: -0.012em;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.chip-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.chip-line-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: transparent;
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ============================================================================
   .pg-four  ·  Four-cell grid (data sovereignty, four factors)
   ============================================================================
   2×2 (or 1×4 via modifier .pg-four--row). 1px gap via parent background.
   Structure:
     <div class="pg-four">
       <div class="pg-four-cell">
         <span class="pg-four-num num">01</span>
         <h3 class="pg-four-name">Residency</h3>
         <p class="pg-four-desc">All data stored…</p>
       </div>
       …×4
     </div>
   Breakpoints: ≤768 single column. */

.pg-four {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: clamp(32px, 4vw, 56px);
}
.dark .pg-four { background: var(--paper-line); }
.pg-four--row { grid-template-columns: repeat(4, 1fr); }
.pg-four-cell {
  background: var(--cream);
  padding: clamp(20px, 3vw, 32px);
}
.dark .pg-four-cell { background: var(--ink); }
.pg-four-num {
  font-family: var(--mono);
  font-size: var(--text-label);
  color: var(--gold-ink);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 10px;
}
.dark .pg-four-num { color: var(--gold); }
.pg-four-name {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 8px;
}
.pg-four-desc {
  font-size: var(--text-small);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 36ch;
}
.dark .pg-four-desc { color: var(--paper-2); }
@media (max-width: 768px) {
  .pg-four, .pg-four--row { grid-template-columns: 1fr; }
}


/* ============================================================================
   .pg-invoice  ·  Invoice / rate card table (pricing page)
   ============================================================================
   Structure:
     <table class="pg-invoice">
       <thead>
         <tr><th>Item</th><th>Description</th><th class="r">Amount</th></tr>
       </thead>
       <tbody>
         <tr><td>Platform subscription</td><td>…</td><td class="n r">$2,500<small>/mo</small></td></tr>
         <tr class="pg-invoice-waived"><td>…</td><td>…</td><td class="n r"><s>$5,000</s></td></tr>
       </tbody>
       <tfoot>
         <tr class="rule-total"><td colspan="2">…</td><td class="n r">$2,500<small>/mo</small></td></tr>
       </tfoot>
     </table>
   Breakpoints: ≤600 description column hides, item gets full width. */

.pg-invoice {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  margin-top: clamp(32px, 4vw, 56px);
}
.pg-invoice th {
  text-align: left;
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.pg-invoice td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.pg-invoice td:first-child { font-weight: 500; }
.pg-invoice .n {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pg-invoice .r { text-align: right; padding-right: 0; }
.pg-invoice .n small {
  font-size: 0.8em;
  color: var(--muted);
  margin-left: 2px;
}
.pg-invoice-waived td { color: var(--muted); }
.pg-invoice-waived s { text-decoration: line-through; }
.pg-invoice-waived .chip { margin-left: 8px; }
.pg-invoice tfoot td {
  padding-top: 12px;
  font-weight: 500;
}
@media (max-width: 600px) {
  .pg-invoice td:nth-child(2),
  .pg-invoice th:nth-child(2) { display: none; }
}


/* ============================================================================
   .pg-uc  ·  Use-case row (before / with Lucia / result)
   ============================================================================
   Structure:
     <div class="pg-uc">
       <div class="pg-uc-before">
         <p class="label">Before</p>
         <p>…one sentence…</p>
       </div>
       <div class="pg-uc-with">
         <p class="label">With Lucia</p>
         <p>…description…</p>
       </div>
       <div class="pg-uc-result">
         <span class="pg-uc-big num">4 of 4</span>
         <span class="pg-uc-unit">covenants pass</span>
       </div>
     </div>
   Breakpoints: ≤900 single column. */

.pg-uc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 220px;
  gap: 24px 32px;
  align-items: start;
  padding: clamp(24px, 3vw, 36px) 0;
  border-bottom: 1px solid var(--line);
}
.pg-uc:first-of-type { border-top: 1px solid var(--line-strong); }
.pg-uc .label { margin-bottom: 8px; }
.pg-uc-before p:not(.label) {
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.5;
}
.pg-uc-with p:not(.label) {
  font-size: var(--text-small);
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 48ch;
}
.pg-uc-result {
  text-align: right;
  padding-top: calc(var(--text-label) * 1.4 + 8px); /* align with content */
}
.pg-uc-big {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.3rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.pg-uc-unit {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
@media (max-width: 900px) {
  .pg-uc {
    grid-template-columns: 1fr;
  }
  .pg-uc-result {
    text-align: left;
    padding-top: 0;
  }
}


/* ============================================================================
   .pg-legal  ·  Legal page layout (privacy, terms)
   ============================================================================
   Structure:
     <div class="container pg-legal">
       <nav class="pg-legal-toc" aria-label="Table of contents">
         <p class="label">Contents</p>
         <ul>
           <li><a href="#s1" class="active">1. Definitions</a></li>
           …
         </ul>
       </nav>
       <article class="pg-legal-body">
         <h2 id="s1">1. Definitions</h2>
         <p>…</p>
         …
       </article>
     </div>
   Breakpoints: ≤768 TOC becomes horizontal chip row at top. */

.pg-legal {
  display: grid;
  grid-template-columns: 220px minmax(0, 720px);
  gap: clamp(40px, 6vw, 96px);
  padding-bottom: var(--section);
}
.pg-legal-toc {
  position: sticky;
  top: 96px; /* nav 72px + 24px gap */
  align-self: start;
}
.pg-legal-toc .label { margin-bottom: 16px; }
.pg-legal-toc ul { display: flex; flex-direction: column; gap: 0; }
.pg-legal-toc a {
  display: flex;
  align-items: center;
  min-height: 44px; /* touch target */
  padding: 8px 0;
  font-size: var(--text-small);
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 200ms;
}
.pg-legal-toc a:hover { color: var(--ink); }
.pg-legal-toc a.active {
  color: var(--ink);
  font-weight: 600;
}
.pg-legal-body h2 {
  font-family: var(--sans);
  font-size: 1.1875rem; /* 19px */
  font-weight: 600;
  line-height: 1.25;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.pg-legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pg-legal-body p {
  margin-top: 12px;
  font-size: var(--text-small);
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 64ch;
}
.pg-legal-body a {
  color: var(--gold-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pg-legal-body a:hover { text-decoration-color: var(--gold); }
.pg-legal-body ul {
  margin-top: 10px;
  padding-left: 20px;
  list-style: disc;
}
.pg-legal-body li {
  font-size: var(--text-small);
  color: var(--ink-2);
  line-height: 1.7;
  margin-top: 6px;
}
@media (max-width: 768px) {
  .pg-legal {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pg-legal-toc {
    position: static;
  }
  .pg-legal-toc ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pg-legal-toc a {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--text-label);
    white-space: nowrap;
  }
  .pg-legal-toc a.active {
    border-color: var(--gold-ink);
    color: var(--gold-ink);
  }
}


/* ============================================================================
   .pg-next  ·  Product page "next desk" navigation
   ============================================================================
   Structure:
     <div class="pg-next">
       <a class="textlink" href="product/underwriting.html">← Credit Analysis</a>
       <a class="textlink" href="product/operations.html">Loan Servicing →</a>
     </div>
   Centered, bookended. */

.pg-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: var(--section);
}
.pg-next .textlink {
  padding: 10px 0;
  margin: -10px 0;
}


/* ============================================================================
   .pg-dial  ·  Static Lucia Score dial exhibit
   ============================================================================
   SVG 300-degree arc, three equal zones, ink pointer, mono center number.
   Structure:
     <div class="pg-dial">
       <svg viewBox="0 0 120 120" class="pg-dial-svg">
         <circle class="pg-dial-track" cx="60" cy="60" r="50"/>
         <path class="pg-dial-zone-risk" d="…"/>
         <path class="pg-dial-zone-watch" d="…"/>
         <path class="pg-dial-zone-ok" d="…"/>
         <line class="pg-dial-pointer" x1="60" y1="60" x2="…" y2="…"/>
       </svg>
       <span class="pg-dial-value num">81</span>
       <span class="pg-dial-label label">Healthy</span>
     </div>
   Display-only, no JS interaction. */

.pg-dial {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}
.pg-dial-svg {
  width: 120px;
  height: 120px;
}
.pg-dial-track { fill: none; stroke: var(--cream-3); stroke-width: 6; }
.pg-dial-zone-risk { fill: none; stroke: var(--risk); stroke-width: 6; opacity: .7; }
.pg-dial-zone-watch { fill: none; stroke: var(--watch); stroke-width: 6; opacity: .7; }
.pg-dial-zone-ok { fill: none; stroke: var(--ok); stroke-width: 6; opacity: .7; }
.pg-dial-pointer { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.pg-dial-value {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  margin-top: 8px;
}
.pg-dial-label {
  margin-top: 4px;
}


/* ============================================================================
   .pg-board  ·  Loan Book / Billing Statement tiles (app-like board exhibit)
   ============================================================================
   Structure:
     <div class="pg-board">
       <div class="pg-board-strip">         ← yellow top strip
         <div class="pg-board-kpi">
           <span class="label">Loan Book</span>
           <span class="num">$15.7M</span>
         </div>
         …
       </div>
       <div class="pg-board-tiles">
         <div class="pg-board-tile">
           <span class="pg-board-tile-name">Harrier Logistics</span>
           <span class="chip chip-ok">Healthy</span>
           <span class="num">81</span>
         </div>
         …
       </div>
     </div>
   Breakpoints: tiles wrap at narrow widths. */

.pg-board {
  margin-top: clamp(32px, 4vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.pg-board-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
}
.pg-board-kpi {
  flex: 1 1 120px;
  background: var(--gold-wash);
  padding: 14px 16px;
  min-width: 0;
}
.pg-board-kpi .label { display: block; margin-bottom: 4px; }
.pg-board-kpi .num {
  font-family: var(--mono);
  font-size: 1.125rem;
  font-weight: 500;
}
.pg-board-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* auto-fit: no empty tracks showing the line color */
  gap: 1px;
  background: var(--line);
}
.pg-board-tile {
  background: var(--cream);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pg-board-tile-name {
  font-weight: 500;
  font-size: var(--text-small);
}
.pg-board-tile .num {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 500;
  margin-top: auto;
}


/* ============================================================================
   .pg-tabs  ·  Borrower six-tab bar exhibit
   ============================================================================
   Structure:
     <div class="pg-tabs">
       <span class="pg-tab">Overview</span>
       <span class="pg-tab active">Lucia Score</span>
       <span class="pg-tab">Loans</span>
       <span class="pg-tab">Compliance</span>
       <span class="pg-tab">Financials</span>
       <span class="pg-tab">Docs</span>
     </div>
   Exhibit only — not interactive. Active tab has gold underline. */

.pg-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-top: clamp(24px, 3vw, 40px);
  overflow-x: auto;
}
.pg-tab {
  flex: none;
  padding: 12px 18px;
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pg-tab.active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.dark .pg-tab { color: var(--paper-2); }
.dark .pg-tab.active { color: var(--paper); border-bottom-color: var(--gold); }