/* =========================================================
   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
   --------------------------------------------------------- */
/* SECTION HEADS RANGE LEFT, EVERYWHERE.
   A centred heading with a centred paragraph under it, above content that
   starts at the left margin, makes the eye jump on every section — and a
   centred paragraph is harder to read than a ranged-left one because every
   line starts at a different x-position, so the return sweep has to hunt for
   the beginning.
   A `--left` modifier existed and was almost never used; it is the default
   now, and `--center` is the exception you opt into. */
.hp-head{max-width:74ch;margin:0 0 3.25rem;text-align:left}
.hp-head--center{max-width:760px;margin-left:auto;margin-right:auto;text-align:center}
/* Legal pages range everything left, headings included. */
.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)}
/* The rule and the lede were centring THEMSELVES with `margin:0 auto`, so
   text-align alone would have left them stranded in the middle of a
   left-ranged block. */
.hp-rule{width:56px;height:2px;background:var(--gold-500);border:0;margin:0 0 1.5rem}
.hp-head--center .hp-rule{margin-left:auto;margin-right:auto}
.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;max-width:70ch;font-size:1.05rem;line-height:1.75;color:var(--ink-500);
  text-align:justify;hyphens:auto}
.hp-head--center .hp-lede{margin-left:auto;margin-right:auto;text-align:center;hyphens:manual}
.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}
/* Kept as a class so a hero can still opt in, but it no longer centres inside
   a left-ranged block — the buttons follow the text they belong to. */
.hp-actions--center{justify-content:flex-start}
.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}

/* THE LIST INSIDE A DARK SECTION
   .hp-list h4 is var(--ink-900) — near-black — and works on the paper
   sections. On a dark section it was black on navy, so five headings on the
   home page were rendering invisible: present in the markup, readable by a
   screen reader, and simply not there for anybody looking at it.
   The card headings had been given a colour here; the list headings had not. */
.hp-sec--tint .hp-list h4,
.hp-sec--dark .hp-list h4{color:#fff}
.hp-sec--tint .hp-list p,
.hp-sec--dark .hp-list p{color:#9fabbb}
.hp-sec--tint .hp-list li,
.hp-sec--dark .hp-list li{border-color:var(--hp-dark-line)}
.hp-sec--tint .hp-list li::before,
.hp-sec--dark .hp-list li::before{color:var(--gold-400)}

/* Same fault, same section: the numbered steps carry ink-900 headings and sit
   on the dark band too. */
.hp-sec--tint .hp-step h3,
.hp-sec--dark .hp-step h3{color:#fff}
.hp-sec--tint .hp-step p,
.hp-sec--dark .hp-step p{color:#9fabbb}
.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
   --------------------------------------------------------- */
/* The closing block on each page ranges left with everything above it. A page
   that reads left the whole way down and then centres its last block draws the
   eye to the shift rather than to the sentence. */
.hp-close{max-width:70ch;margin:0;text-align:left}
.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;
  text-align:justify;hyphens:auto}
.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
   --------------------------------------------------------- */
/* Used for a single button under a section. Ranged left, like the section. */
.hp-center{text-align:left}
.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}
/* Ranged left. A centred hero on a legal document reads like a landing page;
   these are documents somebody may have to quote from, and a document starts
   at the left margin. */
.hp-hero--page .hp-hero-inner{position:relative;z-index:1;max-width:840px;margin:0 auto;text-align:left}
.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}
/* NOT display:grid.
   Grid makes every direct child a grid item — so an <li> written as
   "<strong>Label</strong> — description" became three items (the marker, the
   strong, and the loose text), and the strong was thrown into the next column
   while its own sentence wrapped underneath it. The list rendered correctly
   only for items with no inline markup at all, which is why it looked fine
   until a <strong> appeared.

   Absolute positioning is immune to whatever the item contains. */
.hp-def-val li{position:relative;padding:.28rem 0 .28rem 1.5rem;
  font-size:.91rem;line-height:1.6;color:var(--ink-700);text-align:left}
.hp-def-val li::before{content:"§";position:absolute;left:0;top:.28rem;
  color:var(--gold-600);font-family:var(--font-display);font-weight:700}
.hp-def-val li strong{color:var(--ink-900)}
.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}
/* Paragraphs need a gap between them. margin:0 ran two paragraphs together as
   one solid block, which is most of why this page read as cluttered — the
   sentences were there, the shape that separates one thought from the next was
   not. */
.hp-agent-detail p{margin:0 0 .85rem;font-size:.92rem;line-height:1.72;color:#9fabbb;
  text-align:justify;hyphens:auto}
.hp-agent-detail p:last-child{margin-bottom:0}

/* 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;
}


/* =========================================================
   Interior page heroes: ranged left, properly
   ---------------------------------------------------------
   `text-align: left` on the container was not enough, and the screenshot showed
   why: the pieces inside were still centring THEMSELVES with `margin: 0 auto`.
   The gold rule sat in the middle of the page and the lede was indented past
   the heading it belonged to, so the block read as centred even though every
   line in it was ranged left.
   ========================================================= */
.hp-hero--page .hp-hero-inner { text-align: left; }
.hp-hero--page .hp-hero-inner > * { margin-left: 0; margin-right: 0; }

/* Each of these carried its own `margin: 0 auto`. */
.hp-hero--page .hp-rule      { margin-left: 0; margin-right: 0; }
.hp-hero--page .hp-clause    { margin-left: 0; }
.hp-hero--page .hp-hero-lede { margin-left: 0; margin-right: 0; max-width: 64ch; }
.hp-hero--page h1            { margin-left: 0; }

/* Buttons in an interior hero follow the text rather than sitting centred
   under a left-ranged heading. */
.hp-hero--page .hp-actions--center { justify-content: flex-start; }

.legal-doc h1, .legal-doc h2, .legal-doc h3, .legal-doc h4,
.legal-doc .hp-clause, .legal-doc .hp-lede {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
}
.legal-doc .hp-lede { max-width: 72ch; }

/* And the prose inside them justified, as a printed document would be. */
.legal-doc p, .legal-doc li, .legal-doc td {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.legal-doc h1, .legal-doc h2, .legal-doc h3, .legal-doc h4,
.legal-doc th, .legal-doc .cl, .legal-doc code {
  hyphens: manual;
  text-align: left;
}

/* ---------- what a credit covers ----------
   Above the plan cards, because "how much does it cost" and "what do I get for
   it" are the same question, and answering the second one after the price is
   how people end up surprised. */
.hp-allowance{
  max-width:820px;margin:0 auto 2.6rem;padding:1.6rem 1.8rem;
  background:var(--paper-alt);border:1px solid var(--paper-line);border-radius:12px;
}
.hp-allowance h3{margin:0 0 1rem;font-size:1.1rem}
.hp-alw-table{width:100%;border-collapse:collapse;font-size:.92rem}
.hp-alw-table td{padding:.55rem .6rem;border-bottom:1px solid var(--paper-line);vertical-align:top}
.hp-alw-table tr:last-child td{border-bottom:0}
.hp-alw-table td:first-child{white-space:nowrap;color:var(--ink-500)}
.hp-alw-table td:nth-child(2){white-space:nowrap;text-align:right;padding-right:1.2rem}
.hp-alw-table td:last-child{color:var(--ink-500);font-size:.86rem;line-height:1.55;
  text-align:justify;hyphens:auto}
.hp-alw-note{margin:1.1rem 0 0;font-size:.86rem;line-height:1.65;color:var(--ink-700);
  text-align:justify;hyphens:auto}
@media (max-width:560px){
  .hp-alw-table td:last-child{display:block;padding-left:.6rem}
  .hp-alw-table td:first-child,.hp-alw-table td:nth-child(2){display:inline-block}
}

/* ---------- introductory offer ---------- */
.hp-intro-badge{
  margin:1.4rem auto 0;max-width:56ch;padding:.75rem 1.1rem;
  background:rgba(191,169,104,.12);border:1px solid rgba(191,169,104,.38);
  border-radius:10px;font-size:.92rem;line-height:1.6;color:#ede1d0;text-align:left;
}
.hp-intro-badge strong{color:var(--gold-400,#bfa968)}

/* The old price, struck through. Muted rather than red — this is a discount,
   not a correction, and a red strike reads as a mistake being fixed. */
.hp-plan-was{
  display:block;font-size:1.15rem;font-weight:400;
  color:var(--ink-500);opacity:.6;text-decoration-thickness:1px;margin-bottom:.1rem;
}
.hp-plan-save{
  margin:.35rem 0 0;font-size:.84rem;line-height:1.5;
  color:#26643f;background:#e4f0e8;border-radius:6px;padding:.35rem .6rem;display:inline-block;
}

/* ---------- the introductory offer, on the home hero ----------
   Above the buttons rather than below them: a price the reader has already
   scrolled past is a price they did not see. */
.hp-offer{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin:0 0 1.4rem;padding:.7rem 1rem;
  background:rgba(191,169,104,.13);border:1px solid rgba(191,169,104,.34);
  border-radius:10px;font-size:.95rem;line-height:1.6;color:#ede1d0;
  max-width:52ch;text-align:left;
}
.hp-offer strong{color:#fff}
.hp-offer s{opacity:.55}
.hp-offer-tag{
  flex:0 0 auto;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--gold-600,#8f7325);color:#fff;
  padding:.2rem .55rem;border-radius:5px;
}

/* ---------- founders ----------
   Two cards, no photographs. A headshot on a page like this invites the reader
   to weigh the person rather than what is written, and there are only two of
   them — a grid built for six would leave them stranded in white space. */
.hp-founders{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.6rem;max-width:860px;margin:0 auto;
}
.hp-founder{
  background:var(--paper-alt);border:1px solid var(--paper-line);
  border-radius:12px;padding:1.6rem 1.7rem;
}
.hp-founder h3{margin:0 0 .15rem;font-size:1.24rem}
.hp-founder-role{
  margin:0 0 .9rem;font-family:var(--font-mono,ui-monospace,monospace);
  font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-600,#8f7325);
}
.hp-founder p:last-child{
  margin:0;font-size:.93rem;line-height:1.75;color:var(--ink-700);
  text-align:justify;hyphens:auto;
}
.hp-founders-note{
  max-width:70ch;margin:2rem auto 0;font-size:.88rem;line-height:1.7;
  color:var(--ink-500);text-align:justify;hyphens:auto;
}
@media (max-width:720px){
  .hp-founders{grid-template-columns:minmax(0,1fr)}
}


/* =========================================================
   Definition rows: a readable measure
   ---------------------------------------------------------
   The value column was minmax(0,1fr) inside a wrap over 1200px wide, so body
   text ran to 120 characters and more. Long lines are not a style preference:
   past roughly 75 characters the eye loses the start of the next line on the
   return sweep, and the reader re-reads without knowing why. That, plus a
   narrow label sitting against a sprawling column, is the "cluttered" feeling.
   ========================================================= */
.hp-def,
.hp-agent{
  grid-template-columns:minmax(0,260px) minmax(0,72ch);
  justify-content:start;
  align-items:start;
}
/* Paragraphs justify; list items do not.
   A bullet is usually one or two lines, and justifying a two-line item
   stretches the first line to the full measure while the second sits short —
   which reads as a rendering fault rather than as typography. */
.hp-def-val p{text-align:justify;hyphens:auto}
.hp-def-val li{text-align:left;hyphens:manual}

/* The label column keeps its own alignment: short lines must not be justified,
   and a heading of two or three words stretched across 260px looks broken. */
.hp-def-key,
.hp-agent-id{text-align:left;hyphens:manual}


@media (max-width:900px){
  .hp-def,.hp-agent{grid-template-columns:minmax(0,1fr)}
}


/* ---------- the statutory block on grievance.php ----------
   Never styled. It carries the named Grievance Officer and the address, which
   is the one thing on that page a reader is looking for. */
.legal-box{
  background:var(--paper-alt);border:1px solid var(--paper-line);
  border-left:3px solid var(--gold-500);border-radius:10px;
  padding:1.4rem 1.6rem;margin:1.6rem 0;max-width:72ch;
}
.legal-box p{margin:0 0 .8rem;font-size:.94rem;line-height:1.75}
.legal-box p:last-child{margin-bottom:0}
.legal-box strong{color:var(--ink-900)}
.legal-box .muted{font-size:.82rem;color:var(--ink-500)}