/* =========================================================================
   Hub shell — the neutral editorial register for pages that route to all
   three practice lines (index, about, contact, resources, regulatory-watch,
   privacy, terms, 404).

   It commits to neither world. It borrows what the two registers SHARE:
   Söhne weight-400 display type, hairline structure, quiet radii, patient
   reveals. Register color appears only in the "doorway" components that
   are literally about one practice line. Fully theme-reactive: everything
   here is token-driven or carries explicit dark rules.
   ========================================================================= */

body.reg-hub{
  --hub-ink:#0e2724;                 /* register A's teal-ink, for the startup doorway */
  --hub-forest:#0b211c;              /* register B forest, for the FINRA doorway */
  --hub-oxblood:#1f0d0b;             /* register B burgundy, for the PI doorway */
  --hub-ivory:#f7f4eb;
}

/* ---- Type discipline: the shared display voice ---- */
/* Leading: 1.0 set the line box to exactly the font size, so on any headline
   that wraps past two lines the descenders of one line met the ascenders of
   the next ("law practice / understandable" on About). 1.07 keeps the display
   tight without letting the lines touch. */
body.reg-hub h1{
  font-weight:400;letter-spacing:-.028em;line-height:1.07;
  font-size:clamp(2.5rem,1.6rem + 3.9vw,4.9rem);
}
body.reg-hub h2{font-weight:500;letter-spacing:-.025em}
body.reg-hub .hero h1,body.reg-hub .page-hero h1{max-width:17ch}
body.reg-hub .page-hero h1{font-size:clamp(2.2rem,1.5rem + 3vw,4rem);line-height:1.07}

/* ---- Buttons: settle, don't bounce ---- */
body.reg-hub .btn{border-radius:11px}
body.reg-hub .btn:hover{transform:none}
/* one primary colour across every register — the teal-ink, never the bright green */
body.reg-hub .btn-primary{background:var(--hub-ink);color:#f7f4eb;box-shadow:var(--shadow-xs)}
body.reg-hub .btn-primary:hover{background:#143430;color:#fff;box-shadow:var(--shadow-sm)}
body.reg-hub .btn-secondary{background:transparent;box-shadow:none}
body.reg-hub .btn-secondary:hover{background:var(--surface);box-shadow:none}

/* ---- Cards: hairline first, shadow only on hover ---- */
body.reg-hub .card{box-shadow:none;border-color:var(--line-strong)}
body.reg-hub .card-link:hover,body.reg-hub .card.lift{box-shadow:var(--shadow-sm)}
body.reg-hub .card-link:hover{transform:translateY(-2px)}

/* =========================================================================
   Doorways — the one sanctioned register moment on hub pages.
   Each door is a preview of the world behind it.
   ========================================================================= */
body.reg-hub .hub-doors{display:flex;flex-direction:column;gap:.9rem}
body.reg-hub .hub-door{
  position:relative;display:flex;flex-direction:column;gap:.45rem;
  border-radius:16px;padding:1.35rem 3.2rem 1.25rem 1.5rem;
  color:var(--hub-ivory);border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
[data-theme="dark"] body.reg-hub .hub-door{border-color:rgba(247,244,235,.14)}
body.reg-hub .hub-door:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
body.reg-hub .hub-door--a{background:var(--hub-ink)}
body.reg-hub .hub-door--b{background:var(--hub-forest)}
body.reg-hub .hub-door--pi{background:var(--hub-oxblood)}
body.reg-hub .hub-door h3{color:var(--hub-ivory);font-size:1.14rem;font-weight:500;letter-spacing:-.015em}
body.reg-hub .hub-door p{color:rgba(247,244,235,.72);font-size:.92rem;line-height:1.5;max-width:44ch}
body.reg-hub .hub-door-fact{
  margin-top:.35rem;font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:rgba(247,244,235,.55);
}
body.reg-hub .hub-door-arr{
  position:absolute;right:1.3rem;top:50%;translate:0 -50%;
  color:var(--hub-ivory);font-size:1.25rem;opacity:.45;
  transition:opacity .35s var(--ease),translate .35s var(--ease);
}
body.reg-hub .hub-door:hover .hub-door-arr{opacity:1;translate:4px -50%}

/* about page: the who-we-serve cards become doors that keep their stats */
body.reg-hub .who-card.hub-door{padding:1.5rem}
body.reg-hub .who-card.hub-door .who-stat{color:var(--hub-ivory);font-weight:400;letter-spacing:-.02em}
body.reg-hub .who-card.hub-door .who-stat-label{color:rgba(247,244,235,.55)}
body.reg-hub .who-card.hub-door h3{margin-top:.8rem}
body.reg-hub .who-card.hub-door p{color:rgba(247,244,235,.72)}
body.reg-hub .who-card.hub-door .arrow{color:var(--hub-ivory);margin-top:1rem}

/* =========================================================================
   Resource library — the index telegraphs which world each guide opens
   ========================================================================= */
/* Category is a label, not an object — no capsule around two words. */
body.reg-hub .resource-card .tag-list{margin-bottom:.9rem}
body.reg-hub .resource-card .tag{
  background:transparent;border:0;border-radius:0;padding:0;
  font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
body.reg-hub .res-b .tag{color:var(--hub-forest)}
body.reg-hub .ledger .tag{
  background:transparent;border:0;border-radius:0;padding:0;margin-right:1.2rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
body.reg-hub .ledger .status-comment-open,body.reg-hub .ledger .status-proposed{
  background:transparent;border:0;color:var(--persimmon-600);
}
body.reg-hub .resource-card:hover{border-color:color-mix(in oklab,var(--ink) 30%,var(--line))}

/* =========================================================================
   Regulatory Watch — dated ledger, not a card wall
   (tracker.js keeps rendering the same markup; only the clothes change)
   ========================================================================= */
body.reg-hub .ledger{display:block;border-top:1px solid var(--line-strong)}
body.reg-hub .ledger .tracker-card{
  display:flex;flex-direction:column;gap:.7rem;
  background:transparent;border:0;border-radius:0;box-shadow:none;
  border-bottom:1px solid var(--line);
  padding:clamp(1.6rem,1.2rem + 1.4vw,2.4rem) .2rem;
}
body.reg-hub .ledger .tracker-card:hover{transform:none;box-shadow:none}
body.reg-hub .ledger .tracker-date{margin-top:0;font-size:.78rem}
body.reg-hub .ledger .tracker-card h3{
  font-size:clamp(1.2rem,1.05rem + .8vw,1.65rem);font-weight:500;letter-spacing:-.02em;max-width:34ch;
}
body.reg-hub .ledger .tracker-card p{max-width:70ch}
body.reg-hub .ledger .tracker-actions{max-width:68ch}
body.reg-hub .ledger .tracker-footer{border-top:0;margin-top:.2rem;padding-top:0}
body.reg-hub .ledger .tracker-sifma{border-left:1px solid var(--line-strong)}

/* filters as quiet text tabs (Linear-changelog grammar) */
body.reg-hub .tracker-filters{gap:0;border-bottom:1px solid var(--line);margin-bottom:0}
body.reg-hub .tracker-filters .filter-pill{
  background:transparent;border:0;border-radius:0;box-shadow:none;
  font-family:var(--font);font-size:.95rem;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--muted);padding:.7rem 0;margin-right:1.6rem;position:relative;
}
body.reg-hub .tracker-filters .filter-pill::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
body.reg-hub .tracker-filters .filter-pill:hover{color:var(--ink)}
body.reg-hub .tracker-filters .filter-pill[aria-pressed="true"]{background:transparent;color:var(--ink);border-color:transparent}
body.reg-hub .tracker-filters .filter-pill[aria-pressed="true"]::after{transform:scaleX(1)}

/* =========================================================================
   Legal documents (privacy, terms) — a well-set document, nothing more
   ========================================================================= */
body.reg-hub .legal{max-width:70ch}
body.reg-hub .legal p{line-height:1.7}
body.reg-hub .legal h2{
  font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);font-weight:500;letter-spacing:-.02em;
  margin-top:2.8rem;padding-top:1.8rem;
}
body.reg-hub .legal h3{font-weight:500}

/* =========================================================================
   Contact — Operate mode: the form is the page
   ========================================================================= */
body.reg-hub form.card{box-shadow:none;border-color:var(--line-strong);padding:1.7rem}
body.reg-hub .form-field label{font-size:.88rem}
body.reg-hub input,body.reg-hub select,body.reg-hub textarea{border-radius:10px;background:var(--surface)}
body.reg-hub input:focus,body.reg-hub select:focus,body.reg-hub textarea:focus{
  border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in oklab,var(--teal) 16%,transparent);
}

/* ---- quiet the old hero decoration on hub pages ---- */
body.reg-hub .glow-orb{display:none}

/* ---- responsive ---- */
@media (max-width:960px){
  body.reg-hub .hub-doors{max-width:560px}
}
@media (prefers-reduced-motion:reduce){
  body.reg-hub .hub-door:hover,body.reg-hub .card-link:hover{transform:none}
  body.reg-hub .tracker-filters .filter-pill::after{transition:none}
}

/* =========================================================================
   About — founder note. Heading holds the left column, the narrative runs in
   one readable measure on the right, and it closes on the real signature.
   (Structure after incident.io's "A note from the founders".)
   ========================================================================= */
body.reg-hub .about-note{
  display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1fr);
  gap:clamp(2rem,1.2rem + 3vw,5rem);align-items:start;
}
body.reg-hub .about-note-head{position:sticky;top:100px}
body.reg-hub .about-note-head h2{
  font-size:clamp(1.7rem,1.3rem + 1.6vw,2.6rem);font-weight:400;letter-spacing:-.03em;max-width:12ch;
}
body.reg-hub .about-note .letter{gap:1.1rem;max-width:66ch}
body.reg-hub .about-note .letter p{font-size:1.03rem;line-height:1.72}
/* No rule above the sign-off: it cut the letter in two. A note that ends with
   a photograph and a signature already reads as signed. */
body.reg-hub .about-sign{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.6rem 2.2rem;
  margin-top:2.6rem;
}
body.reg-hub .about-sign-photo{margin:0;width:clamp(150px,20vw,210px);flex:0 0 auto}
body.reg-hub .about-sign-photo img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:2px;
}
body.reg-hub .about-sign .letter-sign{margin:0}
@media (max-width:820px){
  body.reg-hub .about-note{grid-template-columns:1fr;gap:1.4rem}
  body.reg-hub .about-note-head{position:static}
}