/* =========================================================
   LITORA AI  |  Home page (chambers edition)
   Scoped entirely under .hp- prefixes so no other page is
   affected. Inherits palette + type tokens from theme.css.

   Alignment contract for this file:
     - one container width          .hp-wrap  (1180px / 28px gutter)
     - one vertical rhythm          --hp-sec  (96px desktop)
     - every grid child            min-width:0  (no overflow)
     - every card is a flex column (equal heights, footers pinned)
     - every section head uses the same 4-part block
   ========================================================= */

:root{
  --hp-sec:96px;
  --hp-gap:22px;
  --hp-max:1180px;
  --hp-gutter:28px;
  --hp-line:#e4ddcf;
  --hp-line-soft:#efe9dc;
  --hp-dark-line:rgba(220,195,126,.18);
  --hp-dark-line-2:rgba(220,195,126,.30);
}

/* ---------------------------------------------------------
   1. Shell primitives
   --------------------------------------------------------- */
.hp-wrap{width:100%;max-width:var(--hp-max);margin:0 auto;padding:0 var(--hp-gutter)}
.hp-wrap-tight{width:100%;max-width:920px;margin:0 auto;padding:0 var(--hp-gutter)}

.hp-sec{padding:var(--hp-sec) 0;position:relative}
.hp-sec--paper{background:var(--paper)}
.hp-sec--white{background:var(--paper-card);border-top:1px solid var(--hp-line);border-bottom:1px solid var(--hp-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
/* --tint is now a navy band, so light and dark sections alternate down the page:
   white -> blue -> white -> blue. It shares every rule with --dark below. */
.hp-sec--tint,
.hp-sec--dark{background:var(--maroon-900);color:#bcc5d3;position:relative;overflow:hidden}
.hp-sec--tint::before,
.hp-sec--dark::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:repeating-linear-gradient(90deg,transparent 0 46px,rgba(220,195,126,.7) 46px 47px);
}
.hp-sec--tint > *,
.hp-sec--dark > *{position:relative;z-index:1}

/* ---------------------------------------------------------
   2. Section head — identical block on every section
   --------------------------------------------------------- */
.hp-head{max-width:760px;margin:0 auto 3.25rem;text-align:center}
.hp-head--left{text-align:left;margin-left:0;margin-right:0}
.hp-clause{
  display:inline-block;font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-600);margin:0 0 .95rem;
}
.hp-sec--tint .hp-clause{color:var(--gold-300)}
.hp-sec--dark .hp-clause{color:var(--gold-300)}
.hp-rule{width:56px;height:2px;background:var(--gold-500);border:0;margin:0 auto 1.5rem}
.hp-head--left .hp-rule{margin-left:0}
.hp-head h2{
  font-family:var(--font-display);font-weight:600;color:var(--ink-900);
  font-size:clamp(1.9rem,3.3vw,2.65rem);line-height:1.16;letter-spacing:.004em;margin:0 0 .85rem;
}
.hp-sec--tint .hp-head h2{color:#fff}
.hp-sec--dark .hp-head h2{color:#fff}
.hp-head h2 em{font-style:italic;color:var(--maroon-700)}
.hp-sec--tint .hp-head h2 em{color:var(--gold-300)}
.hp-sec--dark .hp-head h2 em{color:var(--gold-300)}
.hp-lede{margin:0 auto;max-width:64ch;font-size:1.05rem;line-height:1.75;color:var(--ink-500)}
.hp-head--left .hp-lede{margin-left:0}
.hp-sec--tint .hp-lede{color:#9fabbb}
.hp-sec--dark .hp-lede{color:#9fabbb}

/* ---------------------------------------------------------
   3. Hero
   --------------------------------------------------------- */
.hp-hero{
  position:relative;overflow:hidden;color:#e3e8f0;
  padding:5.75rem 0 5.25rem;
  background:
    radial-gradient(820px 480px at 80% -18%,var(--maroon-600),transparent 62%),
    linear-gradient(158deg,var(--maroon-900) 0%,var(--maroon-800) 56%,var(--maroon-700) 100%);
}
.hp-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:repeating-linear-gradient(90deg,transparent 0 46px,rgba(220,195,126,.7) 46px 47px);
}
.hp-hero-grid{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:4rem;align-items:center;
}
.hp-hero-col{min-width:0}
.hp-hero .hp-clause{color:var(--gold-300);margin-bottom:1.1rem}
.hp-hero h1{
  font-family:var(--font-display);color:#fff;font-weight:600;
  font-size:clamp(2.35rem,4.5vw,3.55rem);line-height:1.12;letter-spacing:.004em;margin:0 0 1.35rem;
}
.hp-hero h1 em{font-style:italic;color:var(--gold-300)}
.hp-hero-lede{font-size:1.08rem;line-height:1.75;color:#c4ccd8;max-width:54ch;margin:0 0 2.1rem}
.hp-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin:0 0 1.6rem}
.hp-actions--center{justify-content:center}
.hp-hero .btn-ghost{color:#e3e8f0;border-color:rgba(220,195,126,.32)}
.hp-hero .btn-ghost:hover{border-color:var(--gold-400);color:#fff;background:rgba(220,195,126,.06)}
.hp-terms{
  display:flex;flex-wrap:wrap;align-items:center;gap:.55rem .9rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:#8b97a8;margin:0;
}
.hp-terms span{display:inline-flex;align-items:center;gap:.5rem}
.hp-terms span::before{content:"§";color:var(--gold-500);font-family:var(--font-display);font-weight:700}

/* --- Signature panel: the deliberation record --- */
.hp-record{
  background:rgba(255,255,255,.045);border:1px solid var(--hp-dark-line-2);
  border-radius:var(--r-lg);backdrop-filter:blur(4px);overflow:hidden;
}
.hp-record-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.05rem 1.5rem;border-bottom:1px solid var(--hp-dark-line-2);
  background:rgba(0,0,0,.14);
}
.hp-record-head strong{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:#fff;letter-spacing:.01em}
.hp-record-head span{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;color:var(--gold-300);white-space:nowrap}
.hp-record-body{padding:1.35rem 1.5rem}
.hp-issue{font-size:.86rem;line-height:1.65;color:#b7a68c;margin:0 0 1.15rem;padding-bottom:1.1rem;border-bottom:1px dashed var(--hp-dark-line)}
.hp-issue b{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-300);font-weight:500;margin-bottom:.45rem}

.hp-op{display:grid;grid-template-columns:9px minmax(0,1fr);gap:.9rem;padding:.85rem 0;border-top:1px solid rgba(255,255,255,.07)}
.hp-op:first-of-type{border-top:0;padding-top:0}
.hp-dot{width:9px;height:9px;border-radius:50%;margin-top:.45rem}
.hp-op-name{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.84rem;font-weight:600;color:#f0e6d6;line-height:1.3}
.hp-op-text{margin:.35rem 0 0;font-size:.79rem;line-height:1.6;color:#b1a289}
.hp-tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;padding:.14rem .42rem;border-radius:3px;font-weight:500}
.hp-c-concur{background:#5bb98c}.hp-c-partial{background:#d8ab4c}.hp-c-dissent{background:#d98b80}
.hp-t-concur{background:rgba(47,111,79,.25);color:#8fd6b3}
.hp-t-partial{background:rgba(154,107,18,.28);color:#e6c675}
.hp-t-dissent{background:rgba(160,42,32,.28);color:#e8a99f}

.hp-record-foot{padding:1.05rem 1.5rem;border-top:1px solid var(--hp-dark-line-2);background:rgba(0,0,0,.14)}
.hp-meter{display:flex;height:5px;border-radius:4px;overflow:hidden;margin-bottom:.7rem}
.hp-meter i{display:block;height:100%}
.hp-meter-note{display:flex;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;color:#8b97a8}
.hp-meter-note b{color:var(--gold-300);font-weight:500}

/* ---------------------------------------------------------
   4. Statute strip (under hero)
   --------------------------------------------------------- */
.hp-strip{background:var(--maroon-800);border-bottom:1px solid rgba(220,195,126,.16);padding:1.15rem 0}
.hp-strip-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem 2.1rem}
.hp-strip-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);white-space:nowrap}
.hp-strip-item{font-family:var(--font-display);font-size:.98rem;color:#c8d0dc;letter-spacing:.02em;white-space:nowrap}

/* ---------------------------------------------------------
   5. Grids + cards (equal height, pinned footers)
   --------------------------------------------------------- */
.hp-grid{display:grid;gap:var(--hp-gap);align-items:stretch}
.hp-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hp-grid > *{min-width:0}

.hp-card{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper-card);border:1px solid var(--hp-line);border-radius:var(--r-lg);
  padding:1.75rem 1.6rem;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.hp-card:hover{border-color:var(--gold-400);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.hp-card h3{font-family:var(--font-display);font-size:1.22rem;font-weight:600;color:var(--ink-900);line-height:1.28;margin:0 0 .5rem}
.hp-card p{margin:0;font-size:.93rem;line-height:1.68;color:var(--ink-500)}
.hp-card p + p{margin-top:.7rem}
.hp-card-mark{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-600);margin:0 0 .85rem;
}
.hp-card-foot{margin-top:auto;padding-top:1.1rem}
.hp-glyph{
  width:44px;height:44px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--maroon-900);color:var(--gold-300);
  font-family:var(--font-display);font-size:1.25rem;font-weight:700;line-height:1;margin:0 0 1.05rem;
}
.hp-card--accent{border-color:var(--gold-400);background:linear-gradient(180deg,#fffdf9,var(--paper-card))}
.hp-card--accent .hp-card-mark{color:var(--maroon-700)}

.hp-sec--tint .hp-card{background:rgba(255,255,255,.045);border-color:var(--hp-dark-line)}
.hp-sec--dark .hp-card{background:rgba(255,255,255,.045);border-color:var(--hp-dark-line)}
.hp-sec--tint .hp-card:hover{border-color:var(--gold-400)}
.hp-sec--dark .hp-card:hover{border-color:var(--gold-400)}
.hp-sec--tint .hp-card h3{color:#fff}
.hp-sec--dark .hp-card h3{color:#fff}
.hp-sec--tint .hp-card p{color:#9fabbb}
.hp-sec--dark .hp-card p{color:#9fabbb}
.hp-sec--tint .hp-glyph{background:rgba(220,195,126,.12);color:var(--gold-300)}
.hp-sec--dark .hp-glyph{background:rgba(220,195,126,.12);color:var(--gold-300)}

/* ---------------------------------------------------------
   6. Procedure (ordered — numbering carries real sequence)
   --------------------------------------------------------- */
.hp-steps{counter-reset:hpstep;display:grid;gap:0;border:1px solid var(--hp-line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper-card)}
.hp-step{
  display:grid;grid-template-columns:64px minmax(0,1fr);gap:1.5rem;align-items:start;
  padding:1.7rem 1.9rem;border-top:1px solid var(--hp-line-soft);
}
.hp-step:first-child{border-top:0}
.hp-step-n{
  counter-increment:hpstep;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--maroon-900);color:var(--gold-300);font-family:var(--font-display);
  font-size:1.28rem;font-weight:700;line-height:1;
}
.hp-step-n::before{content:counter(hpstep,decimal-leading-zero)}
.hp-step-body{min-width:0}
.hp-step h3{font-family:var(--font-display);font-size:1.22rem;font-weight:600;color:var(--ink-900);margin:0 0 .4rem;line-height:1.3}
.hp-step p{margin:0;font-size:.94rem;line-height:1.7;color:var(--ink-500)}
.hp-step-meta{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-600);margin-top:.7rem}

/* ---------------------------------------------------------
   7. The bench (agent roster)
   --------------------------------------------------------- */
.hp-benches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hp-gap);align-items:start}
/* Three speakers, not four benches. Wider columns because each card now carries
   the agent's full instruction rather than a one-line brief. */
.hp-benches--three{grid-template-columns:repeat(3,minmax(0,1fr))}
.hp-benches--three .hp-chip h4{font-size:1rem;margin-bottom:.5rem}
.hp-benches--three .hp-chip p{font-size:.84rem}
.hp-benches > *{min-width:0}
.hp-bench{display:flex;flex-direction:column;gap:.75rem}
.hp-bench-head{padding-bottom:.8rem;margin-bottom:.35rem;border-bottom:1px solid var(--hp-dark-line-2)}
.hp-bench-name{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);margin-bottom:.4rem}
.hp-bench-count{display:block;font-size:.79rem;line-height:1.5;color:#8b97a8}
.hp-bench-count b{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;color:#bcc5d3;font-weight:500}
.hp-chip{
  display:flex;flex-direction:column;height:100%;
  background:rgba(255,255,255,.04);border:1px solid var(--hp-dark-line);
  border-radius:var(--r-md);padding:1.05rem 1.15rem;transition:border-color .2s ease,background .2s ease;
}
.hp-chip:hover{border-color:var(--gold-400);background:rgba(255,255,255,.07)}
.hp-chip h4{font-family:var(--font-body);font-size:.9rem;font-weight:700;color:#e9edf3;margin:0 0 .3rem;line-height:1.35}
.hp-chip p{margin:0;font-size:.79rem;line-height:1.58;color:#96a2b3}
.hp-chip-engine{margin-top:auto;padding-top:.75rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-600)}

/* ---------------------------------------------------------
   8. The record / report anatomy (two-column split)
   --------------------------------------------------------- */
.hp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.2rem;align-items:center}
/* Form-beside-sidebar variant. Must be a class, not an inline style, or the
   responsive collapse below cannot override it. */
.hp-split--form{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start;gap:2.8rem}
.hp-split-col{min-width:0}
.hp-list{list-style:none;margin:0;padding:0}
.hp-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;align-items:start;
  padding:1rem 0;border-top:1px solid var(--hp-line);
}
.hp-list li:first-child{border-top:0;padding-top:0}
.hp-list li::before{
  content:"§";font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.35;
  color:var(--gold-600);
}
.hp-list h4{font-family:var(--font-body);font-size:.97rem;font-weight:700;color:var(--ink-900);margin:0 0 .22rem}
.hp-list p{margin:0;font-size:.9rem;line-height:1.65;color:var(--ink-500)}

/* Docket / exhibit ledger mock */
.hp-ledger{background:var(--paper-card);border:1px solid var(--hp-line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md)}
.hp-ledger-head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.95rem 1.3rem;background:var(--maroon-900);color:var(--gold-300);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
}
.hp-ledger table{width:100%;border-collapse:collapse;font-size:.83rem}
.hp-ledger th{
  text-align:left;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;padding:.7rem 1.3rem;background:var(--paper-alt);
  border-bottom:1px solid var(--hp-line);
}
.hp-ledger td{padding:.72rem 1.3rem;border-bottom:1px solid var(--hp-line-soft);color:var(--ink-700);vertical-align:top;line-height:1.5}
.hp-ledger tr:last-child td{border-bottom:0}
.hp-ledger td:first-child{font-family:var(--mono);font-size:.74rem;color:var(--ink-500);white-space:nowrap}
.hp-pill{display:inline-block;font-family:var(--mono);font-size:.56rem;letter-spacing:.09em;text-transform:uppercase;padding:.16rem .45rem;border-radius:3px;font-weight:500;white-space:nowrap}
.hp-p-ok{background:var(--ok-bg);color:#1c5039}
.hp-p-warn{background:var(--warn-bg);color:#7a5410}
.hp-p-bad{background:var(--danger-bg);color:#7d201a}
.hp-ledger-foot{padding:.8rem 1.3rem;background:var(--paper-alt);border-top:1px solid var(--hp-line);font-size:.75rem;color:var(--ink-500);line-height:1.55}

/* ---------------------------------------------------------
   9. Matters covered
   --------------------------------------------------------- */
.hp-matter{
  display:flex;flex-direction:column;height:100%;
  background:var(--paper-card);border:1px solid var(--hp-line);border-left:3px solid var(--maroon-700);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1.25rem 1.35rem;transition:border-left-color .2s ease,box-shadow .2s ease;
}
.hp-matter:hover{border-left-color:var(--gold-500);box-shadow:var(--shadow-sm)}
.hp-matter h4{font-family:var(--font-display);font-size:1.08rem;font-weight:600;color:var(--ink-900);margin:0 0 .35rem}
.hp-matter p{margin:0;font-size:.84rem;line-height:1.6;color:var(--ink-500)}

/* ---------------------------------------------------------
   10. Custody / security rows
   --------------------------------------------------------- */
.hp-custody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.hp-custody-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.15rem 0;border-top:1px solid var(--hp-dark-line)}
.hp-custody-row .hp-ic{
  width:34px;height:34px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(220,195,126,.12);color:var(--gold-300);font-family:var(--font-display);font-size:1rem;font-weight:700;
}
.hp-custody-row h4{font-family:var(--font-body);font-size:.95rem;font-weight:700;color:#e9edf3;margin:0 0 .25rem}
.hp-custody-row p{margin:0;font-size:.86rem;line-height:1.62;color:#9fabbb}

/* ---------------------------------------------------------
   11. Pricing
   --------------------------------------------------------- */
.hp-plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.15rem;align-items:stretch}
.hp-plan{
  display:flex;flex-direction:column;height:100%;position:relative;
  background:var(--paper-card);border:1px solid var(--hp-line);border-radius:var(--r-lg);padding:2rem 1.55rem;
}
.hp-plan--hi{border-color:var(--maroon-700);box-shadow:var(--shadow-md)}
.hp-plan--hi::before{
  content:"Most instructed";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--maroon-700);color:var(--gold-300);font-family:var(--mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.28rem .75rem;border-radius:3px;white-space:nowrap;
}
.hp-plan-name{font-family:var(--font-display);font-size:1.35rem;font-weight:600;color:var(--ink-900);margin:0 0 .3rem;line-height:1.25}
.hp-plan-tag{font-size:.81rem;line-height:1.5;color:var(--ink-500);margin:0 0 1.15rem;min-height:3em}
.hp-plan-amt{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--maroon-800);line-height:1;margin:0}
.hp-plan-amt small{font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--ink-500)}
.hp-plan-note{font-size:.75rem;color:var(--ink-300);margin:.4rem 0 1.3rem;min-height:2.2em;line-height:1.45}
.hp-plan-feats{list-style:none;margin:0 0 1.5rem;padding:0;flex:1 1 auto}
.hp-plan-feats li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.55rem;align-items:start;padding:.38rem 0;font-size:.86rem;line-height:1.55;color:var(--ink-700)}
.hp-plan-feats li::before{content:"§";color:var(--gold-600);font-family:var(--font-display);font-weight:700;line-height:1.4}
.hp-plan .btn{width:100%;margin-top:auto}

/* ---------------------------------------------------------
   12. FAQ
   --------------------------------------------------------- */
.hp-faq{display:grid;gap:.7rem}
.hp-faq details{border:1px solid var(--hp-line);border-radius:var(--r-md);background:var(--paper-card);overflow:hidden}
.hp-faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;
  padding:1.05rem 1.3rem;font-size:.98rem;font-weight:600;color:var(--ink-900);
}
.hp-faq summary::-webkit-details-marker{display:none}
.hp-faq summary::after{content:"+";font-family:var(--font-display);font-size:1.5rem;font-weight:600;color:var(--gold-600);line-height:1;transition:transform .2s ease}
.hp-faq details[open] summary::after{transform:rotate(45deg)}
.hp-faq details[open] summary{border-bottom:1px solid var(--hp-line-soft)}
.hp-faq .hp-ans{padding:1rem 1.3rem 1.25rem}
.hp-faq .hp-ans p{margin:0;font-size:.92rem;line-height:1.72;color:var(--ink-500)}

/* ---------------------------------------------------------
   13. Limits (statutory notice block)
   --------------------------------------------------------- */
.hp-notice{background:var(--paper-card);border:1px solid var(--hp-line);border-top:3px solid var(--maroon-700);border-radius:0 0 var(--r-lg) var(--r-lg)}
.hp-notice-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;padding:1.4rem 1.9rem;border-top:1px solid var(--hp-line-soft)}
.hp-notice-item:first-child{border-top:0}
.hp-notice-n{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--gold-600);padding-top:.28rem;white-space:nowrap}
.hp-notice-item h4{font-family:var(--font-body);font-size:.98rem;font-weight:700;color:var(--ink-900);margin:0 0 .3rem}
.hp-notice-item p{margin:0;font-size:.92rem;line-height:1.72;color:var(--ink-500)}

/* ---------------------------------------------------------
   14. Closing instruction band
   --------------------------------------------------------- */
.hp-close{max-width:680px;margin:0 auto;text-align:center}
.hp-close h2{font-family:var(--font-display);color:#fff;font-size:clamp(1.85rem,3.4vw,2.55rem);line-height:1.18;margin:0 0 .9rem}
.hp-close p{color:#c4ccd8;font-size:1.04rem;line-height:1.7;margin:0 0 1.9rem}
.hp-close .btn-ghost{color:#e3e8f0;border-color:rgba(220,195,126,.32)}
.hp-close .btn-ghost:hover{border-color:var(--gold-400);color:#fff;background:rgba(220,195,126,.06)}
.hp-close-foot{margin-top:1.9rem;padding-top:1.4rem;border-top:1px solid var(--hp-dark-line);font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#7d8798;line-height:1.7}

/* ---------------------------------------------------------
   15. Utilities
   --------------------------------------------------------- */
.hp-center{text-align:center}
.hp-after{margin-top:2.6rem}
.hp-after--sm{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.hp-center.hp-after--sm{justify-content:center}

/* ---------------------------------------------------------
   16. Responsive — one ladder, no orphan cards
   --------------------------------------------------------- */
@media (max-width:1080px){
  :root{--hp-sec:80px}
  .hp-hero-grid{gap:3rem}
  .hp-g4,.hp-benches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-benches{gap:2.4rem var(--hp-gap)}
  .hp-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 1.15rem}
  .hp-split{gap:2.4rem}
}
@media (max-width:900px){
  .hp-hero{padding:4.25rem 0 4rem}
  .hp-hero-grid,.hp-split,.hp-split--form,.hp-custody{grid-template-columns:minmax(0,1fr)}
  .hp-custody{gap:0}
  .hp-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-hero-lede{max-width:none}
  .hp-strip-inner{gap:.5rem 1.4rem}
}
@media (max-width:640px){
  :root{--hp-sec:60px;--hp-gutter:20px}
  .hp-g2,.hp-g3,.hp-g4,.hp-plans,.hp-benches{grid-template-columns:minmax(0,1fr)}
  .hp-head{margin-bottom:2.4rem}
  .hp-card{padding:1.5rem 1.35rem}
  .hp-step{grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.5rem 1.35rem}
  .hp-notice-item{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:1.3rem 1.35rem}
  .hp-record-head,.hp-record-body,.hp-record-foot{padding-left:1.15rem;padding-right:1.15rem}
  .hp-actions .btn{width:100%}
  .hp-ledger td,.hp-ledger th{padding-left:1rem;padding-right:1rem}
  .hp-plan-tag,.hp-plan-note{min-height:0}
  .hp-meter-note{flex-direction:column;gap:.3rem}
  .hp-strip-item{white-space:normal}
  .hp-ledger{overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  .hp-card,.hp-chip,.hp-matter{transition:none}
  .hp-card:hover{transform:none}
}

/* =========================================================
   17. Shared interior-page furniture
   Used by about / features / agents / how-it-works / use-cases /
   security / faq / contact / demo and the legal documents.
   ========================================================= */

/* Short centred hero for interior pages */
.hp-hero--page{padding:4.25rem 0 3.75rem}
.hp-hero--page .hp-hero-inner{position:relative;z-index:1;max-width:840px;margin:0 auto;text-align:center}
.hp-hero--page h1{font-size:clamp(2.05rem,4vw,3.05rem);margin:0 0 1.05rem}
.hp-hero--page .hp-hero-lede{margin:0 auto;max-width:64ch}
.hp-hero--page .hp-rule{margin-bottom:1.4rem}

/* Two-column definition rows (features, security) */
.hp-def{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:1.6rem 2.4rem;
  padding:1.75rem 0;border-top:1px solid var(--hp-line)}
.hp-def:first-of-type{border-top:0;padding-top:0}
.hp-def-key{min-width:0}
.hp-def-key h3{font-family:var(--font-display);font-size:1.28rem;font-weight:600;color:var(--ink-900);margin:0 0 .35rem;line-height:1.25}
.hp-def-key .hp-card-mark{margin-bottom:.5rem}
.hp-def-val{min-width:0}
.hp-def-val p{margin:0 0 .8rem;font-size:.95rem;line-height:1.72;color:var(--ink-500)}
.hp-def-val p:last-child{margin-bottom:0}
.hp-def-val ul{list-style:none;margin:.4rem 0 0;padding:0}
.hp-def-val li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;padding:.28rem 0;
  font-size:.91rem;line-height:1.6;color:var(--ink-700)}
.hp-def-val li::before{content:"§";color:var(--gold-600);font-family:var(--font-display);font-weight:700}
.hp-sec--tint .hp-def{border-top-color:var(--hp-dark-line)}
.hp-sec--dark .hp-def{border-top-color:var(--hp-dark-line)}
.hp-sec--tint .hp-def-key h3{color:#fff}
.hp-sec--dark .hp-def-key h3{color:#fff}
.hp-sec--tint .hp-def-val p{color:#9fabbb}
.hp-sec--dark .hp-def-val p{color:#9fabbb}
.hp-sec--tint .hp-def-val li{color:#aeb8c6}
.hp-sec--dark .hp-def-val li{color:#aeb8c6}

/* Agent detail rows */
.hp-agent{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:1.2rem 2.2rem;
  padding:1.5rem 0;border-top:1px solid var(--hp-dark-line)}
.hp-agent:first-of-type{border-top:0}
.hp-agent-id{min-width:0}
.hp-agent-id h3{font-family:var(--font-body);font-size:1rem;font-weight:700;color:#e9edf3;margin:0 0 .3rem}
.hp-agent-id .hp-agent-engine{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-600)}
.hp-agent-brief{font-size:.86rem;color:#aeb8c6;margin:.4rem 0 0;line-height:1.55;font-style:italic}
.hp-agent-detail{min-width:0}
.hp-agent-detail p{margin:0;font-size:.92rem;line-height:1.72;color:#9fabbb}

/* Numbered stat band */
.hp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.4rem;text-align:center}
.hp-stats > div{min-width:0}
.hp-stats .n{font-family:var(--font-display);font-size:2.5rem;font-weight:700;color:var(--gold-300);line-height:1}
.hp-stats .l{margin-top:.5rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:#8b97a8;line-height:1.6}

/* Contact routes */
.hp-route{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;
  padding:1.15rem 0;border-top:1px solid var(--hp-line)}
.hp-route:first-of-type{border-top:0;padding-top:0}
.hp-route .hp-ic2{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--maroon-900);color:var(--gold-300);font-family:var(--font-display);font-size:1.05rem;font-weight:700}
.hp-route h4{font-family:var(--font-body);font-size:.96rem;font-weight:700;color:var(--ink-900);margin:0 0 .22rem}
.hp-route p{margin:0;font-size:.9rem;line-height:1.62;color:var(--ink-500)}
.hp-route a{font-weight:600;overflow-wrap:anywhere;word-break:break-word}
.hp-route p{overflow-wrap:anywhere}
/* Long email addresses must never push a narrow viewport sideways */
.hp-doc a,.hp-doc dd,.hp-def-val a{overflow-wrap:anywhere}

/* Form panel */
.hp-form{background:var(--paper-card);border:1px solid var(--hp-line);border-radius:var(--r-lg);padding:2rem}
.hp-form h3{font-family:var(--font-display);font-size:1.3rem;margin:0 0 .4rem}
.hp-form .lede{font-size:.9rem;color:var(--ink-500);margin:0 0 1.5rem;line-height:1.65}
.hp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Legal documents ---------- */
.hp-legal-meta{background:var(--paper-alt);border:1px solid var(--hp-line);border-left:3px solid var(--gold-500);
  border-radius:0 var(--r-md) var(--r-md) 0;padding:1.15rem 1.35rem;font-size:.86rem;line-height:1.72;
  color:var(--ink-700);margin-bottom:2.4rem}
.hp-legal-meta strong{color:var(--ink-900)}
.hp-legal-meta .dates{display:block;margin-top:.5rem;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.08em;color:var(--ink-500)}

.hp-toc{background:var(--paper-card);border:1px solid var(--hp-line);border-radius:var(--r-lg);
  padding:1.5rem 1.7rem;margin-bottom:2.8rem}
.hp-toc h2{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-600);margin:0 0 1rem}
.hp-toc ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.15rem 2.2rem;counter-reset:toc}
.hp-toc li{margin:0;font-size:.9rem;line-height:1.5;break-inside:avoid}
.hp-toc a{display:block;color:var(--ink-700);text-decoration:none;padding:.45rem .2rem;
  border-bottom:1px solid var(--hp-line-soft)}
.hp-toc a:hover{color:var(--maroon-700)}

.hp-doc{max-width:none}
.hp-doc h2{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--ink-900);
  margin:3rem 0 .9rem;padding-top:1.9rem;border-top:1px solid var(--hp-line-soft);line-height:1.3}
.hp-doc h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.hp-doc h2 .cl{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-600);font-weight:500;margin-bottom:.45rem}
.hp-doc h3{font-family:var(--font-body);font-size:1.02rem;font-weight:700;color:var(--ink-900);margin:1.5rem 0 .5rem}
.hp-doc p{font-size:1rem;line-height:1.78;color:var(--ink-700);margin:0 0 1rem}
.hp-doc ul,.hp-doc ol{margin:0 0 1.2rem;padding-left:1.35rem}
.hp-doc li{margin-bottom:.55rem;line-height:1.72;font-size:.98rem;color:var(--ink-700)}
.hp-doc strong{color:var(--ink-900)}
.hp-doc .keypoint{background:var(--paper-alt);border-left:3px solid var(--maroon-700);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:1.1rem 1.3rem;margin:1.4rem 0}
.hp-doc .keypoint p{margin:0;font-size:.95rem}
.hp-doc table{width:100%;border-collapse:collapse;font-size:.9rem;margin:1.2rem 0 1.6rem}
.hp-doc th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-500);font-weight:500;padding:.65rem .8rem;background:var(--paper-alt);
  border-bottom:1px solid var(--hp-line)}
.hp-doc td{padding:.7rem .8rem;border-bottom:1px solid var(--hp-line-soft);vertical-align:top;line-height:1.6}
.hp-doc dl{margin:0 0 1.2rem}
.hp-doc dt{font-weight:700;color:var(--ink-900);font-size:.96rem;margin-top:.9rem}
.hp-doc dd{margin:.25rem 0 0;font-size:.95rem;line-height:1.7;color:var(--ink-500)}

@media (max-width:900px){
  .hp-def,.hp-agent{grid-template-columns:minmax(0,1fr);gap:.75rem}
  .hp-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.4rem}
  .hp-toc ol{columns:1}
}
@media (max-width:640px){
  /* Long button labels must wrap rather than push the viewport sideways */
  .hp-sec .btn,.hp-hero .btn,.hp-close .btn,.hp-after--sm .btn{
    white-space:normal;max-width:100%;text-align:center;line-height:1.35}
  .hp-after--sm{flex-direction:column;align-items:stretch}
  .hp-after--sm .btn{width:100%}
  /* Paired form fields stack; side-by-side inputs overflow a 360px screen */
  .hp-form .form-row{grid-template-columns:minmax(0,1fr)}
  .hp-form .form-control,.hp-form select,.hp-form textarea{max-width:100%}
  .hp-hero--page{padding:3.25rem 0 2.75rem}
  .hp-form{padding:1.5rem 1.25rem}
  .hp-doc h2{font-size:1.28rem}
  .hp-doc table{display:block;overflow-x:auto}
}

/* =========================================================
   18. Legibility on navy bands (tint + dark)
   When --tint became a navy band, ghost buttons, plain links,
   list text and small print inside it kept their light-mode dark
   colours and vanished against the navy. These rules fix every
   such element in one place, for BOTH --tint and --dark.
   ========================================================= */

/* Ghost / outline buttons */
.hp-sec--tint .btn-ghost,
.hp-sec--dark .btn-ghost{
  color:#e9edf3;
  border-color:rgba(214,196,147,.34);
  background:transparent;
}
.hp-sec--tint .btn-ghost:hover,
.hp-sec--dark .btn-ghost:hover{
  color:#fff;
  border-color:var(--gold-400);
  background:rgba(214,196,147,.08);
}

/* Plain in-flow links (e.g. inside .hp-doc, notices, list items) */
.hp-sec--tint a:not(.btn),
.hp-sec--dark a:not(.btn){color:var(--gold-300)}
.hp-sec--tint a:not(.btn):hover,
.hp-sec--dark a:not(.btn):hover{color:#fff}

/* Body copy, list items, small print that default to dark ink */
.hp-sec--tint p,
.hp-sec--dark p,
.hp-sec--tint li,
.hp-sec--dark li,
.hp-sec--tint .muted,
.hp-sec--dark .muted,
.hp-sec--tint .hp-doc,
.hp-sec--dark .hp-doc{color:#bcc5d3}

.hp-sec--tint .hp-doc strong,
.hp-sec--dark .hp-doc strong,
.hp-sec--tint strong,
.hp-sec--dark strong{color:#fff}

.hp-sec--tint .hp-doc h2,
.hp-sec--dark .hp-doc h2,
.hp-sec--tint .hp-doc h3,
.hp-sec--dark .hp-doc h3{color:#fff}
.hp-sec--tint .hp-doc h2,
.hp-sec--dark .hp-doc h2{border-top-color:var(--hp-dark-line)}

/* Definition-list / dl rows used on some legal-style sections */
.hp-sec--tint dt,
.hp-sec--dark dt{color:#fff}
.hp-sec--tint dd,
.hp-sec--dark dd{color:#aeb8c6}

/* Tables inside navy bands */
.hp-sec--tint .hp-doc th,
.hp-sec--dark .hp-doc th{color:#c4ccd8;background:rgba(255,255,255,.04);border-bottom-color:var(--hp-dark-line)}
.hp-sec--tint .hp-doc td,
.hp-sec--dark .hp-doc td{color:#bcc5d3;border-bottom-color:var(--hp-dark-line)}

/* Keypoint / callout blocks */
.hp-sec--tint .keypoint,
.hp-sec--dark .keypoint{background:rgba(255,255,255,.05);border-left-color:var(--gold-500)}
.hp-sec--tint .keypoint p,
.hp-sec--dark .keypoint p{color:#d0d7e0}

/* FAQ accordion sits on white cards even inside a navy band, so its text
   must stay dark — force it back regardless of the band it sits in. */
.hp-sec--tint .hp-faq summary,
.hp-sec--dark .hp-faq summary{color:var(--ink-900)}
.hp-sec--tint .hp-faq .hp-ans p,
.hp-sec--dark .hp-faq .hp-ans p{color:var(--ink-700)}
.hp-sec--tint .hp-faq a:not(.btn),
.hp-sec--dark .hp-faq a:not(.btn){color:var(--maroon-700)}

/* -------------------------------------------------------------
   18b. White cards that sit INSIDE a navy band keep dark text.
   .hp-matter, .hp-plan and the FAQ accordion all paint their own
   light background, so the navy-band light-text rules above must
   not apply to their contents. Re-assert dark ink on them.
   ------------------------------------------------------------- */
.hp-sec--tint .hp-matter p,
.hp-sec--dark .hp-matter p{color:var(--ink-500)}
.hp-sec--tint .hp-matter h4,
.hp-sec--dark .hp-matter h4{color:var(--ink-900)}

.hp-sec--tint .hp-plan p,
.hp-sec--dark .hp-plan p,
.hp-sec--tint .hp-plan li,
.hp-sec--dark .hp-plan li{color:var(--ink-500)}
.hp-sec--tint .hp-plan h3,
.hp-sec--dark .hp-plan h3,
.hp-sec--tint .hp-plan .hp-plan-name,
.hp-sec--dark .hp-plan .hp-plan-name,
.hp-sec--tint .hp-plan strong,
.hp-sec--dark .hp-plan strong{color:var(--ink-900)}
.hp-sec--tint .hp-plan a:not(.btn),
.hp-sec--dark .hp-plan a:not(.btn){color:var(--maroon-700)}

/* Notice / callout cards are also white-on-navy */
.hp-sec--tint .hp-notice p,
.hp-sec--dark .hp-notice p,
.hp-sec--tint .hp-notice-item p,
.hp-sec--dark .hp-notice-item p{color:var(--ink-500)}
.hp-sec--tint .hp-notice-item h4,
.hp-sec--dark .hp-notice-item h4,
.hp-sec--tint .hp-notice h4,
.hp-sec--dark .hp-notice h4{color:var(--ink-900)}
.hp-sec--tint .hp-notice strong,
.hp-sec--dark .hp-notice strong{color:var(--ink-900)}
.hp-sec--tint .hp-notice a:not(.btn),
.hp-sec--dark .hp-notice a:not(.btn){color:var(--maroon-700)}
.hp-sec--tint .hp-notice-n,
.hp-sec--dark .hp-notice-n{color:var(--maroon-700)}

/* =========================================================
   Justified prose on the public pages
   ---------------------------------------------------------
   Always paired with hyphens:auto. Justifying without it stretches the spaces
   rather than breaking words, and a paragraph carrying words like
   "notwithstanding" or "identification" opens rivers of white down the column.
   Short text is left ragged: a stretched two-line card reads as a mistake.
   ========================================================= */
.hp-lede,
.hp-card p,
.hp-matter p,
.hp-step-body p,
.hp-custody-row p,
.hp-notice-item p,
.hp-agent-detail p,
.hp-def-val p,
.hp-ans p,
.hp-op-text,
.hp-close p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Headings, labels and anything monospace stay ragged-right. */
.hp-clause, .hp-card-mark, .hp-step-meta, .hp-bench-name, .hp-bench-count,
.hp-chip-engine, .hp-ledger-head, .hp-ledger-foot, .hp-plan-note, .hp-terms,
.hp-agent-engine, .hp-notice-n, .hp-strip-item, .hp-strip-label {
  text-align: left;
  hyphens: manual;
}