/* =============================================================================
   Signature components
   The pieces that only this company could have. Everything here is built from
   the gate motif and the two brand colours; nothing borrows a generic SaaS shape.
   ============================================================================= */

/* ── The Determination panel ──────────────────────────────────────────────────
   The whole product in one object: five axes in, one determination out.
   It is explicitly illustrative and says so on its face — a marketing widget
   that implies it has decided something about a real deployment would be the
   same failure as a report that overstates what it verified. */.lg-redesign-page .det{
  border: 1px solid var(--rule-field);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  overflow: hidden;
}.lg-redesign-page .det-head{
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.9rem);
  border-bottom: 1px solid var(--rule-field);
  background: rgba(0,0,0,.22);
}.lg-redesign-page .det-head .t{ font-family: var(--mono); font-size: 10pt; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-lift); }.lg-redesign-page .det-badge{
  font-family: var(--sans); font-size: 10pt; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase;
  padding: .34rem .7rem; border: 1px solid rgba(196,163,90,.45); border-radius: 2px;
  color: var(--brass-lift);
}.lg-redesign-page .det-body{ display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); }
@media (max-width: 1000px) {.lg-redesign-page .det-body{ grid-template-columns: 1fr; } }.lg-redesign-page .det-axes{ padding: clamp(1.1rem, 2vw, 1.8rem); border-right: 1px solid var(--rule-field); display: grid; gap: 1.15rem; align-content: start; }
@media (max-width: 1000px) {.lg-redesign-page .det-axes{ border-right: 0; border-bottom: 1px solid var(--rule-field); } }.lg-redesign-page .det-axis > span{
  display: block; margin-bottom: .5rem;
  font-size: 10pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-field-mute);
}.lg-redesign-page .det-opts{ display: flex; flex-wrap: wrap; gap: .4rem; }.lg-redesign-page .det-opt{
  border: 1px solid var(--rule-field); background: transparent; color: var(--on-field-soft);
  font-family: var(--sans); font-size: 10pt; font-weight: 500;
  padding: .42rem .78rem; border-radius: 2px; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}.lg-redesign-page .det-opt:hover{ border-color: var(--brass); color: #fff; }.lg-redesign-page .det-opt[aria-pressed="true"]{ background: var(--gate); border-color: var(--gate); color: #fff; }.lg-redesign-page .det-sel{
  margin-top: auto; padding-top: 1.2rem;
  border-top: 1px solid var(--rule-field);
  font-size: 1rem; line-height: 1.5; color: var(--on-field-soft);
}.lg-redesign-page .det-sel b{ color: #fff; font-weight: 600; }.lg-redesign-page .det-axes{ align-content: stretch; }.lg-redesign-page .det-out{ padding: clamp(1.1rem, 2vw, 1.8rem); min-height: 340px; }.lg-redesign-page .det-out-top{ display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: baseline; margin-bottom: 1.2rem; }.lg-redesign-page .det-count{ font-family: var(--display); font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; color: #fff; }.lg-redesign-page .det-count-l{ font-size: 10pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lift); }.lg-redesign-page .det-list{ display: grid; gap: .5rem; }.lg-redesign-page .det-item{
  display: grid; grid-template-columns: 4px minmax(0,1fr) auto; gap: .9rem; align-items: center;
  padding: .72rem .9rem; border: 1px solid var(--rule-field); border-radius: 2px;
  background: rgba(0,0,0,.2);
  animation: detIn .42s var(--ease-out) both;
}
@keyframes detIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }.lg-redesign-page .det-item i{ display: block; width: 4px; height: 100%; min-height: 26px; background: var(--gate-lift); border-radius: 1px; }.lg-redesign-page .det-item.is-out i{ background: rgba(242,245,241,.2); }.lg-redesign-page .det-item .n{ font-size: 1rem; font-weight: 500; color: #fff; }.lg-redesign-page .det-item .c{ display: block; font-family: var(--mono); font-size: 10pt; color: var(--on-field-mute); margin-top: .18rem; }.lg-redesign-page .det-item.is-out .n{ color: var(--on-field-mute); }.lg-redesign-page .det-tag{
  font-family: var(--sans); font-size: 10pt; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  padding: .28rem .55rem; border-radius: 2px;
}.lg-redesign-page .det-tag.attaches{ background: rgba(8,155,56,.16); color: #7fe0a0; border: 1px solid rgba(8,155,56,.4); }.lg-redesign-page .det-tag.assessed{ background: rgba(242,245,241,.06); color: var(--on-field-mute); border: 1px solid var(--rule-field); }.lg-redesign-page .det-foot{
  margin-top: 1.3rem; padding-top: 1rem; border-top: 1px solid var(--rule-field);
  font-size: 10pt; color: var(--on-field-mute);
}

/* ── Coverage bars — the gate motif carrying data ─────────────────────────── */.lg-redesign-page .cov{ display: grid; gap: 1.15rem; }.lg-redesign-page .cov-row{ display: grid; grid-template-columns: minmax(0, 12rem) minmax(0,1fr) auto; gap: 1.2rem; align-items: center; }
@media (max-width: 700px) {.lg-redesign-page .cov-row{ grid-template-columns: minmax(0,1fr) auto; }.lg-redesign-page .cov-track{ grid-column: 1 / -1; } }.lg-redesign-page .cov-l{ font-size: 1rem; font-weight: 500; }.lg-redesign-page .cov-track{ height: 8px; background: rgba(6,11,16,.08); border-radius: 1px; overflow: hidden; }.lg-redesign-page .field .cov-track, .lg-redesign-page .field-2 .cov-track{ background: rgba(255,255,255,.09); }.lg-redesign-page .cov-fill{
  height: 100%; width: 0; border-radius: 1px;
  background: linear-gradient(90deg, var(--gate), var(--gate-lift));
  transition: width 1.25s var(--ease-out);
}.lg-redesign-page .cov-v{ font-family: var(--mono); font-size: 1rem; color: var(--text-soft); min-width: 3.5rem; text-align: right; }.lg-redesign-page .field .cov-v, .lg-redesign-page .field-2 .cov-v{ color: var(--on-field-soft); }

/* ── Chain — the credential chain, drawn as gates ─────────────────────────── */.lg-redesign-page .chain{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border: 1px solid var(--rule-field); border-radius: 3px; overflow: hidden; }
@media (max-width: 900px) {.lg-redesign-page .chain{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) {.lg-redesign-page .chain{ grid-template-columns: 1fr; } }.lg-redesign-page .chain-step{ padding: clamp(1.4rem, 2.2vw, 2.1rem); border-right: 1px solid var(--rule-field); position: relative; background: rgba(255,255,255,.02); }.lg-redesign-page .chain-step:last-child{ border-right: 0; }.lg-redesign-page .chain-step .k{ font-family: var(--mono); font-size: 10pt; color: var(--brass-lift); letter-spacing: .1em; }.lg-redesign-page .chain-step h4{ margin: .8rem 0 .55rem; font-size: 1.28rem; }.lg-redesign-page .chain-step p{ font-size: 1rem; color: var(--on-field-soft); margin: 0; }.lg-redesign-page .chain-step::after{
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--gate-lift); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}.lg-redesign-page .chain-step:nth-child(1)::after{ transition-delay: .05s; }.lg-redesign-page .chain-step:nth-child(2)::after{ transition-delay: .2s; }.lg-redesign-page .chain-step:nth-child(3)::after{ transition-delay: .35s; }.lg-redesign-page .chain-step:nth-child(4)::after{ transition-delay: .5s; }.lg-redesign-page .is-in .chain-step::after{ transform: scaleX(1); }

/* ── Product trio ─────────────────────────────────────────────────────────── */.lg-redesign-page .prod{
  position: relative; display: flex; flex-direction: column;
  min-height: clamp(400px, 44vw, 560px);
  border-radius: 3px; overflow: hidden; text-decoration: none;
  color: var(--on-field); isolation: isolate;
}.lg-redesign-page .prod img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); }.lg-redesign-page .prod::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,13,10,.32) 0%, rgba(7,13,10,.72) 52%, rgba(7,13,10,.95) 100%);
  transition: background .5s var(--ease);
}.lg-redesign-page .prod:hover img{ transform: scale(1.06); }.lg-redesign-page .prod:hover::after{ background: linear-gradient(180deg, rgba(5,94,34,.3) 0%, rgba(7,13,10,.74) 52%, rgba(7,13,10,.96) 100%); }.lg-redesign-page .prod-in{ margin-top: auto; padding: clamp(1.5rem, 2.4vw, 2.4rem); }.lg-redesign-page .prod-k{ font-family: var(--mono); font-size: 10pt; letter-spacing: .12em; color: var(--brass-lift); }.lg-redesign-page .prod h3{ margin: .7rem 0 .6rem; font-size: clamp(1.5rem, 2vw, 2.1rem); }.lg-redesign-page .prod p{ color: var(--on-field-soft); font-size: 1rem; margin: 0 0 1.1rem; max-width: 42ch; }.lg-redesign-page .prod .go{ display: inline-flex; align-items: center; gap: .5rem; font-size: 10pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-lift); }.lg-redesign-page .prod .go em{ font-style: normal; transition: transform .34s var(--ease-out); }.lg-redesign-page .prod:hover .go em{ transform: translateX(5px); }

/* ── Price table ──────────────────────────────────────────────────────────── */.lg-redesign-page .price{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1rem, 1.6vw, 1.6rem); }
@media (max-width: 1000px) {.lg-redesign-page .price{ grid-template-columns: 1fr; } }.lg-redesign-page .price-card{
  display: flex; flex-direction: column;
  padding: clamp(1.7rem, 2.4vw, 2.6rem);
  background: #fff; border: 1px solid var(--rule-soft); border-radius: 3px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}.lg-redesign-page .price-card:hover{ transform: translateY(-4px); box-shadow: 0 28px 54px -32px rgba(6,11,16,.4); }.lg-redesign-page .price-card.feature{ border-color: var(--gate); box-shadow: 0 0 0 1px var(--gate); }.lg-redesign-page .price-k{ font-family: var(--mono); font-size: 10pt; letter-spacing: .1em; color: var(--brass-deep); }.lg-redesign-page .price-card h3{ margin: .8rem 0 .3rem; font-size: 1.75rem; }.lg-redesign-page .price-n{ font-family: var(--display); font-size: clamp(2.4rem, 3.4vw, 3.3rem); line-height: 1; letter-spacing: -.03em; margin: 1rem 0 .3rem; }.lg-redesign-page .price-u{ font-size: 10pt; color: var(--text-mute); }.lg-redesign-page .price-list{ list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: .72rem; }.lg-redesign-page .price-list li{ display: grid; grid-template-columns: 1.1rem 1fr; gap: .7rem; font-size: 1rem; color: var(--text-soft); }.lg-redesign-page .price-list li::before{ content: ""; width: 9px; height: 9px; margin-top: .45rem; background: var(--gate); border-radius: 1px; }.lg-redesign-page .price-card .btn{ margin-top: auto; justify-content: center; }

/* ── Comparison / table ───────────────────────────────────────────────────── */.lg-redesign-page .tbl-wrap{ overflow-x: auto; }.lg-redesign-page .tbl{ width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 640px; }.lg-redesign-page .tbl th, .lg-redesign-page .tbl td{ text-align: left; padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--rule); vertical-align: top; }.lg-redesign-page .tbl thead th{
  font-family: var(--sans); font-size: 10pt; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep);
  border-bottom-color: var(--ink);
}.lg-redesign-page .tbl tbody tr:hover{ background: rgba(5,94,34,.035); }.lg-redesign-page .tbl td:first-child{ font-weight: 600; }.lg-redesign-page .tbl .yes{ color: var(--gate); font-weight: 700; }.lg-redesign-page .tbl .no{ color: var(--text-mute); }

/* ── Timeline / cadence ───────────────────────────────────────────────────── */.lg-redesign-page .tl{ position: relative; display: grid; gap: 0; }.lg-redesign-page .tl::before{ content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 1px; background: var(--rule); }.lg-redesign-page .field .tl::before, .lg-redesign-page .field-2 .tl::before{ background: var(--rule-field); }.lg-redesign-page .tl-item{ position: relative; padding: 0 0 2.2rem 2.6rem; }.lg-redesign-page .tl-item::before{
  content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px;
  border: 2px solid var(--gate); background: var(--paper); border-radius: 2px;
}.lg-redesign-page .field .tl-item::before, .lg-redesign-page .field-2 .tl-item::before{ background: var(--field); border-color: var(--gate-lift); }.lg-redesign-page .tl-item:last-child{ padding-bottom: 0; }.lg-redesign-page .tl-k{ font-family: var(--mono); font-size: 10pt; color: var(--brass-deep); letter-spacing: .08em; }.lg-redesign-page .field .tl-k, .lg-redesign-page .field-2 .tl-k{ color: var(--brass-lift); }.lg-redesign-page .tl-item h4{ margin: .45rem 0 .5rem; font-size: 1.3rem; }.lg-redesign-page .tl-item p{ margin: 0; color: var(--text-soft); font-size: 1rem; max-width: 68ch; }.lg-redesign-page .field .tl-item p, .lg-redesign-page .field-2 .tl-item p{ color: var(--on-field-soft); }

/* ── Form ─────────────────────────────────────────────────────────────────── */.lg-redesign-page .form{ display: grid; gap: 1.1rem; }.lg-redesign-page .form-row{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
@media (max-width: 700px) {.lg-redesign-page .form-row{ grid-template-columns: 1fr; } }.lg-redesign-page .field-l{ display: block; font-size: 10pt; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .5rem; }.lg-redesign-page .input, .lg-redesign-page .select, .lg-redesign-page .textarea{
  width: 100%; padding: .85rem 1rem;
  border: 1px solid var(--rule); border-radius: 2px; background: #fff;
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}.lg-redesign-page .input:focus, .lg-redesign-page .select:focus, .lg-redesign-page .textarea:focus{
  outline: 0; border-color: var(--gate); box-shadow: 0 0 0 3px rgba(5,94,34,.12);
}.lg-redesign-page .textarea{ min-height: 150px; resize: vertical; }

/* ── Notice / disclosure ──────────────────────────────────────────────────── */.lg-redesign-page .notice{
  border-left: 3px solid var(--brass);
  background: rgba(196,163,90,.09);
  padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.2rem, 2vw, 1.8rem);
  border-radius: 0 3px 3px 0;
  font-size: 1rem; color: var(--text-soft);
}.lg-redesign-page .field .notice, .lg-redesign-page .field-2 .notice{ background: rgba(196,163,90,.1); color: var(--on-field-soft); }.lg-redesign-page .notice strong{ color: var(--text); }.lg-redesign-page .field .notice strong, .lg-redesign-page .field-2 .notice strong{ color: #fff; }

/* ── Marquee band of instrument names ─────────────────────────────────────── */.lg-redesign-page .strip{ overflow: hidden; border-block: 1px solid var(--rule-field); padding-block: 1.15rem; }.lg-redesign-page .strip-in{ display: flex; gap: 3.5rem; width: max-content; animation: stripMove 46s linear infinite; }.lg-redesign-page .strip:hover .strip-in{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .strip-in{ animation: none; } }
@keyframes stripMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }.lg-redesign-page .strip span{ font-family: var(--mono); font-size: 10pt; letter-spacing: .04em; color: var(--on-field-mute); white-space: nowrap; }.lg-redesign-page .strip span::before{ content: "▍"; color: var(--gate-lift); margin-right: .7rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Navigation panels
   Hover opens them, focus opens them, Escape closes them. A panel that only
   answers to hover is a panel a keyboard user cannot reach, and this audience
   has more keyboard users than most.
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .nav-item{ position: relative; display: flex; align-items: center; }.lg-redesign-page .nav-trigger{
  display: inline-flex; align-items: center; gap: .38rem;
  border: 0; background: none; cursor: pointer; padding: 4px 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  letter-spacing: .01em; color: var(--text); position: relative;
  transition: color .18s var(--ease);
}.lg-redesign-page .nav-trigger svg{ width: 10px; height: 7px; transition: transform .28s var(--ease-out); }.lg-redesign-page .nav-trigger::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gate); transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--ease-out);
}.lg-redesign-page .nav-trigger:hover, .lg-redesign-page .nav-trigger[aria-expanded="true"]{ color: var(--gate); }.lg-redesign-page .nav-trigger:hover::after, .lg-redesign-page .nav-trigger[aria-expanded="true"]::after{ transform: scaleX(1); }.lg-redesign-page .nav-trigger[aria-expanded="true"] svg{ transform: rotate(180deg); }.lg-redesign-page .nav-trigger[data-owns]{ color: var(--gate); font-weight: 600; }.lg-redesign-page .nav-trigger[data-owns]::after{ transform: scaleX(1); }

/* The dropdowns were a plain white box with a hairline — correct, and the only
   part of the site that looked like a default. They now carry the same three
   signals every other surface does: paper rather than white, a brass rule at
   the head, and a hover that moves rather than just tints. */.lg-redesign-page .nav-panel{
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 430px; padding: .75rem .7rem .6rem;
  background:
    linear-gradient(180deg, rgba(196,163,90,.09), rgba(196,163,90,0) 90px),
    var(--paper);
  border: 1px solid var(--rule-soft);
  border-top: 2px solid var(--brass);
  border-radius: 3px;
  box-shadow: 0 34px 70px -34px rgba(6,11,16,.46), 0 2px 6px rgba(6,11,16,.06);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .28s var(--ease-out), visibility .22s;
  z-index: 95;
}
/* The wide panel is anchored to the VIEWPORT, not to its trigger.
   Centring a 1020px panel on a ~90px "Resources" button works at 1600 and
   hangs 55px off the left edge at 1200 — measured, not guessed. Fixed
   positioning centres it on the window instead, so it cannot leave the screen
   whichever trigger opens it. */.lg-redesign-page .nav-panel--wide{
  position: fixed;
  top: calc(var(--nav-h) + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(1120px, 94vw);
  min-width: 0;
  padding: 1.1rem 1rem .9rem;
}.lg-redesign-page .nav-item:hover .nav-panel--wide, .lg-redesign-page .nav-item:focus-within .nav-panel--wide, .lg-redesign-page .nav-panel--wide.is-open{ transform: translateX(-50%) translateY(0); }
/* THE HOVER BRIDGE FOR A WIDE PANEL HANGS OFF THE TRIGGER, NOT THE PANEL.
   Measured failure: the trigger ends at y=57 and the fixed panel starts at
   y=86. Hover on .nav-item is lost the pixel below the trigger, and the
   panel's own ::before only began at y=64 — a 7px dead gap in which the menu
   closed before the pointer could reach it. The narrow panels never showed this
   because their bridge started ABOVE their trigger's bottom edge and overlapped
   it.
   Widening the panel's own bridge would fix the gap and lay an invisible 1120px
   strip across the header, so travelling from one trigger to another would drag
   the wrong panel with it. Anchoring to .nav-item keeps the bridge the width of
   its own trigger. It exists only while that item is hovered, so it never sits
   over the hero waiting to swallow a click. */.lg-redesign-page .nav-panel--wide::before{ content: none; }.lg-redesign-page .nav-item--wide::after{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: 38px;
  display: none;
}.lg-redesign-page .nav-item--wide:hover::after, .lg-redesign-page .nav-item--wide:focus-within::after{ display: block; }
/* Bridges the gap between trigger and panel so the pointer does not fall
   through it on the way down and close the thing it is travelling to. */.lg-redesign-page .nav-panel::before{ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }.lg-redesign-page .nav-item:hover .nav-panel, .lg-redesign-page .nav-item:focus-within .nav-panel, .lg-redesign-page .nav-panel.is-open{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}.lg-redesign-page .np-grid{ display: grid; gap: 2px; }.lg-redesign-page .np-grid--cols{
  /* Sized from the content, not a fixed count: the fourth column is a dense
     list of artefact names with no blurbs, so it needs far less width than the
     three prose columns beside it. */
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .82fr);
  gap: 0 clamp(.9rem, 1.6vw, 1.9rem);
}

/* The free-artefacts column: no descriptions, so the rows tighten up and read
   as a list of things you can have rather than more paragraphs. */.lg-redesign-page .np-col--tight .np-item{ padding-top: .34rem; padding-bottom: .34rem; }.lg-redesign-page .np-col--tight .np-t{ font-size: 1rem; font-weight: 500; }.lg-redesign-page .np-d:empty{ display: none; }
/* Hairlines between columns rather than around them — the panel should read as
   one plate divided, not three cards in a row. */.lg-redesign-page .np-grid--cols .np-col + .np-col{
  border-left: 1px solid var(--rule-soft);
  padding-left: clamp(1rem, 2vw, 2.2rem);
}.lg-redesign-page .np-h{
  display: block;
  margin: 0 0 .5rem .85rem;
  font-family: var(--mono);
  font-size: 10pt;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}.lg-redesign-page .np-item{
  display: block; padding: .62rem .85rem; border-radius: 3px;
  text-decoration: none;
  /* The 2px inset line is the hover state; it is transparent until then so the
     text never shifts. A hover that moves the label is worse than no hover. */
  box-shadow: inset 2px 0 0 transparent;
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease);
}.lg-redesign-page .np-item:hover, .lg-redesign-page .np-item:focus-visible{
  background: rgba(5,94,34,.055);
  box-shadow: inset 2px 0 0 var(--brass);
}.lg-redesign-page .np-t{
  display: flex; align-items: baseline; gap: .4rem;
  font-size: 1rem; font-weight: 600; color: var(--text);
}.lg-redesign-page .np-t em{
  font-style: normal; color: var(--gate);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .18s var(--ease), transform .22s var(--ease-out);
}.lg-redesign-page .np-item:hover .np-t{ color: var(--gate); }.lg-redesign-page .np-item:hover .np-t em, .lg-redesign-page .np-item:focus-visible .np-t em{ opacity: 1; transform: translateX(0); }.lg-redesign-page .np-d{ display: block; margin-top: .16rem; font-size: 10pt; line-height: 1.5; color: var(--text-mute); }.lg-redesign-page .drawer-sub{
  display: block;
  margin: 1rem 0 .15rem;
  font-family: var(--mono);
  font-size: 10pt;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

@media (max-width: 1240px) {.lg-redesign-page .np-grid--cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Column dividers are wrong once the grid wraps — a left border on an item
     that starts a row draws a line down the middle of nothing. */.lg-redesign-page .np-grid--cols .np-col:nth-child(odd){ border-left: 0; padding-left: .85rem; }.lg-redesign-page .np-grid--cols .np-col:nth-child(n+3){
    margin-top: .7rem; border-top: 1px solid var(--rule-soft); padding-top: .85rem;
  }
}.lg-redesign-page .drawer-h{
  display: block; margin: 1.3rem 0 .2rem;
  font-size: 10pt; font-weight: 700; letter-spacing: .17em;
  text-transform: uppercase; color: var(--brass-deep);
}.lg-redesign-page .drawer-h:first-of-type{ margin-top: .4rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Writing
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .posts{ display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }.lg-redesign-page .posts.g2{ grid-template-columns: repeat(2, minmax(0,1fr)); }.lg-redesign-page .posts.g3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1000px) {.lg-redesign-page .posts.g3{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px)  {.lg-redesign-page .posts.g2, .lg-redesign-page .posts.g3{ grid-template-columns: 1fr; } }.lg-redesign-page .post{
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 2vw, 2rem);
  background: #fff; border: 1px solid var(--rule-soft); border-radius: 3px;
  text-decoration: none; position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}.lg-redesign-page .post::before{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--gate); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease-out);
}.lg-redesign-page .post:hover{ transform: translateY(-4px); box-shadow: 0 26px 50px -30px rgba(6,11,16,.4); }.lg-redesign-page .post:hover::before{ transform: scaleY(1); }.lg-redesign-page .field .post, .lg-redesign-page .field-2 .post{ background: rgba(255,255,255,.04); border-color: var(--rule-field); }.lg-redesign-page .field .post::before, .lg-redesign-page .field-2 .post::before{ background: var(--gate-lift); }.lg-redesign-page .post-meta{
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  margin-bottom: .9rem; font-family: var(--mono); font-size: 10pt;
  letter-spacing: .04em; color: var(--brass-deep);
}.lg-redesign-page .field .post-meta, .lg-redesign-page .field-2 .post-meta{ color: var(--brass-lift); }.lg-redesign-page .post-cat{
  padding: .2rem .5rem; border: 1px solid rgba(196,163,90,.45);
  border-radius: 2px; text-transform: uppercase; letter-spacing: .1em; font-size: 10pt;
}.lg-redesign-page .post h3{
  font-size: clamp(1.1rem, 1.35vw, 1.4rem); line-height: 1.26;
  margin: 0 0 .8rem; color: var(--text);
}.lg-redesign-page .field .post h3, .lg-redesign-page .field-2 .post h3{ color: #fff; }.lg-redesign-page .post .go{
  margin-top: auto; padding-top: 1rem;
  font-size: 10pt; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gate);
  display: inline-flex; align-items: center; gap: .45rem;
}.lg-redesign-page .field .post .go, .lg-redesign-page .field-2 .post .go{ color: var(--brass-lift); }.lg-redesign-page .post .go em{ font-style: normal; transition: transform .3s var(--ease-out); }.lg-redesign-page .post:hover .go em{ transform: translateX(4px); }

/* The lead piece gets the room its headline deserves. */.lg-redesign-page .post--lead{ grid-column: span 2; }
@media (max-width: 700px) {.lg-redesign-page .post--lead{ grid-column: span 1; } }.lg-redesign-page .post--lead h3{ font-size: clamp(1.45rem, 2.1vw, 2.15rem); }

/* ═══════════════════════════════════════════════════════════════════════════
   Resource tiles — the gate bars carrying a second job
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .res{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1rem, 1.8vw, 1.8rem); }
@media (max-width: 900px) {.lg-redesign-page .res{ grid-template-columns: 1fr; } }.lg-redesign-page .res-item{
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1.3rem;
  padding: clamp(1.5rem, 2.2vw, 2.2rem);
  border: 1px solid var(--rule-soft); border-radius: 3px; background: #fff;
  text-decoration: none;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}.lg-redesign-page .res-item:hover{ transform: translateY(-3px); border-color: var(--rule); box-shadow: 0 24px 48px -30px rgba(6,11,16,.4); }.lg-redesign-page .field .res-item, .lg-redesign-page .field-2 .res-item{ background: rgba(255,255,255,.04); border-color: var(--rule-field); }.lg-redesign-page .field .res-item:hover, .lg-redesign-page .field-2 .res-item:hover{ border-color: rgba(196,163,90,.5); }.lg-redesign-page .res-bars{ display: flex; align-items: flex-end; gap: 3px; height: 30px; padding-top: .4rem; }.lg-redesign-page .res-bars i{ display: block; width: 4px; background: var(--gate); border-radius: 1px; }.lg-redesign-page .res-bars i:nth-child(1){ height: 38%; }.lg-redesign-page .res-bars i:nth-child(2){ height: 62%; }.lg-redesign-page .res-bars i:nth-child(3){ height: 84%; }.lg-redesign-page .res-bars i:nth-child(4){ height: 100%; }.lg-redesign-page .field .res-bars i, .lg-redesign-page .field-2 .res-bars i{ background: var(--gate-lift); }.lg-redesign-page .res-item h3{ font-size: clamp(1.2rem, 1.5vw, 1.55rem); margin: 0 0 .5rem; }.lg-redesign-page .field .res-item h3, .lg-redesign-page .field-2 .res-item h3{ color: #fff; }.lg-redesign-page .res-item p{ margin: 0; font-size: 1rem; color: var(--text-soft); }.lg-redesign-page .field .res-item p, .lg-redesign-page .field-2 .res-item p{ color: var(--on-field-soft); }.lg-redesign-page .res-tag{
  display: inline-block; margin-top: .9rem;
  font-family: var(--mono); font-size: 10pt; letter-spacing: .06em; color: var(--brass-deep);
}.lg-redesign-page .field .res-tag, .lg-redesign-page .field-2 .res-tag{ color: var(--brass-lift); }

/* ═══════════════════════════════════════════════════════════════════════════
   Order configurator
   Arithmetic in the open. A price you have to request is a price you are being
   softened up for — every figure here is list, and the panel shows its working.
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .cfg{ display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0, 380px); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 1000px) {.lg-redesign-page .cfg{ grid-template-columns: 1fr; } }.lg-redesign-page .cfg-line{
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem 1.5rem; align-items: center;
  padding: clamp(1.2rem, 1.8vw, 1.7rem) 0; border-bottom: 1px solid var(--rule);
}.lg-redesign-page .cfg-line:first-child{ border-top: 1px solid var(--rule); }.lg-redesign-page .cfg-line h3{ font-size: clamp(1.15rem, 1.4vw, 1.45rem); margin: 0 0 .35rem; }.lg-redesign-page .cfg-line p{ margin: 0; font-size: 1rem; color: var(--text-mute); max-width: 58ch; }.lg-redesign-page .cfg-unit{ font-family: var(--mono); font-size: 10pt; color: var(--brass-deep); margin-top: .45rem; display: block; }.lg-redesign-page .stepper{ display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: #fff; }.lg-redesign-page .stepper button{
  width: 42px; height: 42px; border: 0; background: #fff; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--text);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}.lg-redesign-page .stepper button:hover:not(:disabled){ background: var(--gate); color: #fff; }.lg-redesign-page .stepper button:disabled{ opacity: .3; cursor: not-allowed; }.lg-redesign-page .stepper input{
  width: 62px; height: 42px; border: 0; border-inline: 1px solid var(--rule);
  text-align: center; font-family: var(--mono); font-size: 1rem; color: var(--text);
  background: #fff; -moz-appearance: textfield;
}.lg-redesign-page .stepper input::-webkit-outer-spin-button, .lg-redesign-page .stepper input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }.lg-redesign-page .cart{
  position: sticky; top: calc(var(--nav-h) + 20px);
  padding: clamp(1.5rem, 2.2vw, 2.1rem);
  background: var(--field); color: var(--on-field);
  border-radius: 4px; border: 1px solid rgba(196,163,90,.28);
}
/* Same lockup treatment as .auth-mark (login's dark aside) — a bare
   .brand-mark ignores its parent's width (fixed size in site.css) and
   renders alone at full nav size with nothing else on the card, which read
   as a missing logo rather than a signature. Full lockup instead. */.lg-redesign-page .cart-mark{ margin-bottom: 1.4rem; }.lg-redesign-page .cart-mark .brand{ pointer-events: none; }.lg-redesign-page .cart h3{ font-size: 1.4rem; margin: 0 0 1.2rem; color: #fff; }.lg-redesign-page .cart-rows{ display: grid; gap: .7rem; margin-bottom: 1.2rem; min-height: 2.5rem; }.lg-redesign-page .cart-row{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; font-size: 1rem; }.lg-redesign-page .cart-row .l{ color: var(--on-field-soft); }.lg-redesign-page .cart-row .v{ font-family: var(--mono); color: #fff; }.lg-redesign-page .cart-row.is-discount .l, .lg-redesign-page .cart-row.is-discount .v{ color: #7fe0a0; }.lg-redesign-page .cart-empty{ font-size: 1rem; color: var(--on-field-mute); }.lg-redesign-page .cart-total{
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: baseline;
  padding-top: 1.1rem; border-top: 1px solid var(--rule-field);
}.lg-redesign-page .cart-total .l{ font-size: 10pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-lift); }.lg-redesign-page .cart-total .v{ font-family: var(--display); font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; color: #fff; }.lg-redesign-page .cart-note{ margin-top: 1rem; font-size: 10pt; color: var(--on-field-mute); }.lg-redesign-page .cart .btn{ width: 100%; justify-content: center; margin-top: 1.4rem; }.lg-redesign-page .cart-total-est{ margin-top: .5rem; font-size: 10pt; color: var(--on-field-mute); font-family: var(--mono); }

/* ── Currency picker ───────────────────────────────────────────────────────
   Picking a currency rewrites every marked price on the page in place — the
   figures themselves change, not a second number next to them. This is the
   control plus its one honesty caveat (data-curr-note, empty until a
   non-USD currency is active). Works on both paper and dark (.field/
   .field-2, .cart) grounds since pricing.html and order.html use both. */.lg-redesign-page .curr-pick{ display: inline-flex; align-items: center; gap: .6rem; font-size: 10pt; color: var(--text-mute); flex-wrap: wrap; }.lg-redesign-page .curr-pick label{ font-weight: 700; letter-spacing: .02em; }.lg-redesign-page .curr-pick select.select{ width: auto; padding: .5rem .8rem; font-size: 10pt; }.lg-redesign-page .curr-pick-note{ font-family: var(--mono); font-size: 10pt; color: var(--brass-deep); }.lg-redesign-page .field .curr-pick, .lg-redesign-page .field-2 .curr-pick{ color: var(--on-field-mute); }.lg-redesign-page .field .curr-pick select.select, .lg-redesign-page .field-2 .curr-pick select.select{
  background: rgba(255,255,255,.06); border-color: var(--rule-field); color: #fff;
}.lg-redesign-page .field .curr-pick-note, .lg-redesign-page .field-2 .curr-pick-note{ color: var(--brass-lift); }

/* ═══════════════════════════════════════════════════════════════════════════
   API endpoint sample
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .code{
  border: 1px solid var(--rule-field); border-radius: 4px; overflow: hidden;
  background: rgba(0,0,0,.28);
}.lg-redesign-page .code-head{
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between;
  padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule-field); background: rgba(0,0,0,.25);
}.lg-redesign-page .code-head .m{
  font-family: var(--mono); font-size: 10pt; font-weight: 500;
  letter-spacing: .1em; padding: .22rem .5rem; border-radius: 2px;
  background: rgba(8,155,56,.18); color: #7fe0a0; border: 1px solid rgba(8,155,56,.4);
}.lg-redesign-page .code-head .u{ font-family: var(--mono); font-size: 10pt; color: var(--on-field-soft); }.lg-redesign-page .code pre{
  margin: 0; padding: clamp(1rem, 1.6vw, 1.5rem); overflow-x: auto;
  font-family: var(--mono); font-size: 10pt; line-height: 1.65; color: var(--on-field-soft);
}.lg-redesign-page .code .k{ color: var(--brass-lift); }.lg-redesign-page .code .s{ color: #9fe3b6; }.lg-redesign-page .code .n{ color: #f2f5f1; }

/* ═══════════════════════════════════════════════════════════════════════════
   Filters — Library and Tracker
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .filters{ display: grid; gap: 1rem; }.lg-redesign-page .filter-row{ display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: center; }.lg-redesign-page .filter-lab{
  font-size: 10pt; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-deep); flex: none; min-width: 5.5rem;
}.lg-redesign-page .field .filter-lab, .lg-redesign-page .field-2 .filter-lab{ color: var(--brass-lift); }.lg-redesign-page .chips{ display: flex; flex-wrap: wrap; gap: .4rem; }.lg-redesign-page .chip{
  border: 1px solid var(--rule); background: #fff; color: var(--text-soft);
  font-family: var(--sans); font-size: 10pt; font-weight: 500;
  padding: .38rem .8rem; border-radius: 2px; cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}.lg-redesign-page .chip:hover{ border-color: var(--ink); color: var(--text); }.lg-redesign-page .chip[aria-pressed="true"]{ background: var(--gate); border-color: var(--gate); color: #fff; }.lg-redesign-page .field .chip, .lg-redesign-page .field-2 .chip{ background: rgba(255,255,255,.04); border-color: var(--rule-field); color: var(--on-field-soft); }.lg-redesign-page .field .chip:hover, .lg-redesign-page .field-2 .chip:hover{ border-color: var(--brass); color: #fff; }.lg-redesign-page .field .chip[aria-pressed="true"], .lg-redesign-page .field-2 .chip[aria-pressed="true"]{ background: var(--gate-lift); border-color: var(--gate-lift); color: #04140a; }.lg-redesign-page .searchbar{ position: relative; }.lg-redesign-page .searchbar input{
  width: 100%; padding: 1rem 1.2rem 1rem 3rem;
  border: 1px solid var(--rule); border-radius: 3px; background: #fff;
  font-family: var(--sans); font-size: 1rem; color: var(--text);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}.lg-redesign-page .searchbar input:focus{ outline: 0; border-color: var(--gate); box-shadow: 0 0 0 3px rgba(5,94,34,.12); }.lg-redesign-page .searchbar svg{ position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--text-mute); }.lg-redesign-page .result-count{ font-family: var(--mono); font-size: 10pt; color: var(--text-mute); }.lg-redesign-page .field .result-count, .lg-redesign-page .field-2 .result-count{ color: var(--on-field-mute); }

/* ═══════════════════════════════════════════════════════════════════════════
   Instrument rows — the Library
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .inst-list{ border-top: 1px solid var(--rule); }.lg-redesign-page .inst{
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1.15fr) auto auto;
  gap: 1rem 1.6rem; align-items: center;
  padding: 1.15rem .4rem; border-bottom: 1px solid var(--rule);
  text-decoration: none; transition: background-color .2s var(--ease);
}.lg-redesign-page .inst:hover{ background: rgba(5,94,34,.04); }.lg-redesign-page .inst-name{ font-weight: 600; font-size: 1rem; color: var(--text); }.lg-redesign-page .inst-sub{ display: block; margin-top: .18rem; font-family: var(--mono); font-size: 10pt; color: var(--text-mute); }.lg-redesign-page .inst-meta{ font-size: 1rem; color: var(--text-soft); }.lg-redesign-page .inst-pins{ font-family: var(--mono); font-size: 10pt; color: var(--brass-deep); white-space: nowrap; }
@media (max-width: 1100px) {.lg-redesign-page .inst{ grid-template-columns: minmax(0,1fr) auto; }.lg-redesign-page .inst-meta, .lg-redesign-page .inst-pins{ display: none; }
}.lg-redesign-page .pill{
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--sans); font-size: 10pt; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: .28rem .58rem; border-radius: 2px; border: 1px solid;
}.lg-redesign-page .pill--active{ background: rgba(5,94,34,.1);  color: #0a5f26; border-color: rgba(5,94,34,.35); }.lg-redesign-page .pill--pending{ background: rgba(196,163,90,.14); color: var(--brass-deep); border-color: rgba(196,163,90,.45); }.lg-redesign-page .pill--horizon{ background: rgba(6,11,16,.05); color: var(--text-mute); border-color: var(--rule); }.lg-redesign-page .field .pill--active{ background: rgba(8,155,56,.16); color: #7fe0a0; border-color: rgba(8,155,56,.4); }.lg-redesign-page .field .pill--pending{ background: rgba(196,163,90,.14); color: var(--brass-lift); border-color: rgba(196,163,90,.4); }.lg-redesign-page .field .pill--horizon{ background: rgba(242,245,241,.06); color: var(--on-field-mute); border-color: var(--rule-field); }

/* Entry preview — what one Library record actually holds */.lg-redesign-page .entry{
  border: 1px solid var(--rule-field); border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
}.lg-redesign-page .entry-head{
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start;
  padding: clamp(1.2rem,2vw,1.8rem); border-bottom: 1px solid var(--rule-field); background: rgba(0,0,0,.22);
}.lg-redesign-page .entry-head h3{ font-size: clamp(1.3rem,1.8vw,1.85rem); margin: 0 0 .4rem; color: #fff; }.lg-redesign-page .entry-head .sub{ font-family: var(--mono); font-size: 10pt; color: var(--brass-lift); }.lg-redesign-page .entry-grid{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 800px) {.lg-redesign-page .entry-grid{ grid-template-columns: 1fr; } }.lg-redesign-page .entry-f{ padding: 1.05rem clamp(1.2rem,2vw,1.8rem); border-bottom: 1px solid var(--rule-field); }.lg-redesign-page .entry-f:nth-child(odd){ border-right: 1px solid var(--rule-field); }
@media (max-width: 800px) {.lg-redesign-page .entry-f:nth-child(odd){ border-right: 0; } }.lg-redesign-page .entry-k{ display: block; font-family: var(--mono); font-size: 10pt; letter-spacing: .1em; text-transform: uppercase; color: var(--on-field-mute); margin-bottom: .35rem; }.lg-redesign-page .entry-v{ font-size: 1rem; color: #fff; }.lg-redesign-page .entry-v a{ color: var(--brass-lift); }

/* ═══════════════════════════════════════════════════════════════════════════
   Tracker
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .tabs{ display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--rule-field); }.lg-redesign-page .tab{
  border: 0; background: none; cursor: pointer; position: relative;
  padding: .85rem 1.1rem; font-family: var(--sans); font-size: 1rem; font-weight: 500;
  color: var(--on-field-soft); transition: color .18s var(--ease);
}.lg-redesign-page .tab::after{
  content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px;
  background: var(--gate-lift); transform: scaleX(0); transition: transform .3s var(--ease-out);
}.lg-redesign-page .tab:hover{ color: #fff; }.lg-redesign-page .tab[aria-selected="true"]{ color: #fff; font-weight: 600; }.lg-redesign-page .tab[aria-selected="true"]::after{ transform: scaleX(1); }.lg-redesign-page .tpanel{ display: none; padding-top: clamp(1.8rem, 3vw, 2.8rem); }.lg-redesign-page .tpanel[data-open]{ display: block; }.lg-redesign-page .dl-row{
  display: grid; grid-template-columns: 8.5rem minmax(0,1.8fr) minmax(0,1fr) auto;
  gap: 1rem 1.5rem; align-items: center;
  padding: 1.05rem .3rem; border-bottom: 1px solid var(--rule-field);
}.lg-redesign-page .dl-row:first-child{ border-top: 1px solid var(--rule-field); }.lg-redesign-page .dl-date{ font-family: var(--mono); font-size: 1rem; color: var(--brass-lift); }.lg-redesign-page .dl-what{ font-size: 1rem; color: #fff; font-weight: 500; }.lg-redesign-page .dl-sub{ display: block; margin-top: .18rem; font-family: var(--mono); font-size: 10pt; color: var(--on-field-mute); }.lg-redesign-page .dl-where{ font-size: 1rem; color: var(--on-field-soft); }
@media (max-width: 900px) {.lg-redesign-page .dl-row{ grid-template-columns: minmax(0,1fr) auto; }.lg-redesign-page .dl-date{ grid-column: 1 / -1; }.lg-redesign-page .dl-where{ display: none; }
}

/* Bill progress, drawn with the gate bars */.lg-redesign-page .bill{ padding: 1.15rem .3rem; border-bottom: 1px solid var(--rule-field); }.lg-redesign-page .bill:first-child{ border-top: 1px solid var(--rule-field); }.lg-redesign-page .bill-top{ display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline; justify-content: space-between; }.lg-redesign-page .bill-name{ font-size: 1rem; font-weight: 500; color: #fff; }.lg-redesign-page .bill-sub{ font-family: var(--mono); font-size: 10pt; color: var(--on-field-mute); }.lg-redesign-page .bill-stages{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: .9rem; }.lg-redesign-page .bill-stage{ height: 5px; border-radius: 1px; background: rgba(255,255,255,.1); }.lg-redesign-page .bill-stage.is-done{ background: var(--gate-lift); }.lg-redesign-page .bill-labels{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: .45rem; }.lg-redesign-page .bill-labels span{ font-family: var(--mono); font-size: 10pt; letter-spacing: .05em; color: var(--on-field-mute); }
@media (max-width: 700px) {.lg-redesign-page .bill-labels{ display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Long-form article
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .article-shell{ display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (max-width: 1000px) {.lg-redesign-page .article-shell{ grid-template-columns: 1fr; } }.lg-redesign-page .toc{ position: sticky; top: calc(var(--nav-h) + 28px); }
@media (max-width: 1000px) {.lg-redesign-page .toc{ position: static; } }.lg-redesign-page .toc-k{ font-size: 10pt; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .9rem; }.lg-redesign-page .toc a{
  display: block; padding: .45rem 0 .45rem .9rem; border-left: 2px solid var(--rule);
  font-size: 1rem; color: var(--text-soft); text-decoration: none;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}.lg-redesign-page .toc a:hover{ color: var(--gate); border-left-color: var(--gate); }.lg-redesign-page .article{ max-width: 74ch; }.lg-redesign-page .article > p, .lg-redesign-page .article > ul, .lg-redesign-page .article > ol{ font-size: clamp(1.04rem, 1.18vw, 1.18rem); line-height: 1.72; color: #23302b; }.lg-redesign-page .article h2{
  font-size: clamp(1.5rem, 2.1vw, 2.15rem); line-height: 1.16;
  margin: clamp(2.6rem, 4vw, 3.6rem) 0 1rem; scroll-margin-top: calc(var(--nav-h) + 24px);
}.lg-redesign-page .article h3{ font-size: clamp(1.2rem, 1.5vw, 1.5rem); margin: 2.2rem 0 .8rem; }.lg-redesign-page .article ul, .lg-redesign-page .article ol{ padding-left: 1.3rem; }.lg-redesign-page .article li{ margin-bottom: .6rem; }.lg-redesign-page .article strong{ color: var(--ink); }.lg-redesign-page .article a{ color: var(--gate); text-underline-offset: 3px; }.lg-redesign-page .article-lead{ font-size: clamp(1.2rem, 1.55vw, 1.5rem); line-height: 1.5; color: var(--text-soft); }.lg-redesign-page .article blockquote{
  margin: 2.2rem 0; padding: .2rem 0 .2rem 1.6rem;
  border-left: 2px solid var(--brass);
  font-family: var(--display); font-size: clamp(1.3rem, 1.8vw, 1.75rem);
  line-height: 1.32; color: var(--ink);
}.lg-redesign-page .article-cite{
  margin: 2.2rem 0; padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--gate); border-radius: 0 3px 3px 0;
  background: rgba(5,94,34,.035);
}.lg-redesign-page .article-cite .k{ display: block; font-family: var(--mono); font-size: 10pt; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-deep); margin-bottom: .5rem; }.lg-redesign-page .article-cite p{ margin: 0; font-size: 1rem; color: var(--text-soft); }.lg-redesign-page .article-cite .src{ display: block; margin-top: .6rem; font-family: var(--mono); font-size: 10pt; color: var(--gate); }.lg-redesign-page .byline{
  display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center;
  padding-top: 1.2rem; margin-top: 1.4rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10pt; color: var(--text-mute);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Sales flyer — a print artefact that happens to have a URL
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page .fl-head{ display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  padding-bottom: 1.2rem; border-bottom: 2px solid var(--ink); }.lg-redesign-page .fl-brand{ display: flex; align-items: center; gap: .9rem; }.lg-redesign-page .fl-brand .brand-mark{ width: 48px; height: 49px; flex: none; }.lg-redesign-page .fl-name{ font-family: "Montserrat", var(--sans); font-size: 27px; font-weight: 800; letter-spacing: -.018em; line-height: 1; }.lg-redesign-page .fl-name .l{ color: var(--ink); }.lg-redesign-page .fl-name .g{ color: var(--gate); }.lg-redesign-page .fl-name .tm{ font-size: 10px; vertical-align: super; color: var(--brass); }.lg-redesign-page .fl-tag{ margin-top: .4em; font-size: 10px; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--brass-deep); }.lg-redesign-page .fl-url{ font-size: 1rem; color: var(--text-mute); }.lg-redesign-page .fl-price{ margin-top: .9rem; font-size: 10pt; color: var(--brass-deep); }.lg-redesign-page .fl-split{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(1.5rem,3vw,3rem); margin-top: clamp(2rem,4vw,3rem); align-items: start; }
@media (max-width: 800px) {.lg-redesign-page .fl-split{ grid-template-columns: 1fr; } }.lg-redesign-page .fl-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }.lg-redesign-page .fl-list li{ display: grid; grid-template-columns: 1rem 1fr; gap: .7rem;
  font-size: 1rem; color: var(--text-soft); }.lg-redesign-page .fl-list li::before{ content: ""; width: 8px; height: 8px; margin-top: .48rem;
  background: var(--gate); border-radius: 1px; }.lg-redesign-page .fl-foot{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.4rem;
  margin-top: clamp(2rem,3vw,2.6rem); padding-top: 1.3rem; border-top: 1px solid var(--rule); }
@media (max-width: 700px) {.lg-redesign-page .fl-foot{ grid-template-columns: 1fr; } }.lg-redesign-page .fl-k{ display: block; font-size: 10pt; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-deep); margin-bottom: .35rem; }.lg-redesign-page .fl-v{ font-size: 1rem; color: var(--text-soft); }

/*
 * Print. The flyer exists to be printed, so this is the primary medium, not an
 * afterthought — a page that prints as grey boxes with invisible text is worse
 * than no page, and that is the default outcome for screen-only design.
 */
@media print {.lg-redesign-page .nav, .lg-redesign-page .drawer, .lg-redesign-page .foot, .lg-redesign-page .progress, .lg-redesign-page .site-contact-fab{ display: none !important; }.lg-redesign-page .rv{ opacity: 1 !important; transform: none !important; }body{ background: #fff !important; font-size: 10.5pt; }.lg-redesign-page .flyer{ padding: 0 !important; background: #fff !important; }.lg-redesign-page .rail{ width: 100% !important; }.lg-redesign-page .card{ break-inside: avoid; border-color: #ccc !important; box-shadow: none !important; }.lg-redesign-page .notice{ break-inside: avoid; background: #f4f1ea !important; }.lg-redesign-page a{ text-decoration: none; color: inherit; }
}.lg-redesign-page .cart-step{ margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-field); }.lg-redesign-page .cart-step-row{ display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: baseline; }.lg-redesign-page .cart-step-row .l{ font-size: 10pt; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-lift); }.lg-redesign-page .cart-step-row .v{ font-family: var(--mono); font-size: 1.25rem; color: #fff; }.lg-redesign-page .cart-step .cart-note{ margin-top: .7rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   US AI Safety Map

   Three layers need three colours that are distinguishable at 10px, legible on
   both grounds, and inside the palette. The live map uses purple for companion
   safety; purple is banned brand-wide, so the set here is the mark's green, the
   detail brass, and one cool slate — which also happens to be the only trio
   that survives the common forms of colour blindness, because they differ in
   lightness as well as hue rather than only in hue.

   Colour is never the sole carrier: every tile has a title and an aria-label,
   and every law row is labelled in words with its layer.
   ═══════════════════════════════════════════════════════════════════════════ */.lg-redesign-page{
  --lay-companion:    #055e22;
  --lay-frontier:     #7d5d23;
  --lay-transparency: #2f6b7d;
  --lay-companion-l:    #12d155;
  --lay-frontier-l:     #dcc48c;
  --lay-transparency-l: #7fc4d8;
}.lg-redesign-page .mdot{
  width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none;
  background: var(--text-mute);
}.lg-redesign-page .mdot--companion{ background: var(--lay-companion); }.lg-redesign-page .mdot--frontier{ background: var(--lay-frontier); }.lg-redesign-page .mdot--transparency{ background: var(--lay-transparency); }.lg-redesign-page .mdot--on{ background: var(--gate); }.lg-redesign-page .mdot--off{ background: transparent; border: 1px solid var(--rule); }.lg-redesign-page .field .mdot--companion, .lg-redesign-page .field-2 .mdot--companion{ background: var(--lay-companion-l); }.lg-redesign-page .field .mdot--frontier, .lg-redesign-page .field-2 .mdot--frontier{ background: var(--lay-frontier-l); }.lg-redesign-page .field .mdot--transparency, .lg-redesign-page .field-2 .mdot--transparency{ background: var(--lay-transparency-l); }

/* ── Legend, which doubles as the layer filter ───────────────────────────── */.lg-redesign-page .mlegend-row{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }.lg-redesign-page .mlegend{
  display: grid; gap: .45rem; text-align: left; cursor: pointer;
  padding: 1.1rem 1.2rem; border: 1px solid var(--rule); border-radius: 3px;
  background: #fff; font-family: var(--sans);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease);
}.lg-redesign-page .mlegend:hover{ border-color: var(--ink); }.lg-redesign-page .mlegend[aria-pressed="true"]{ border-color: var(--gate); box-shadow: 0 0 0 2px rgba(5,94,34,.14); background: rgba(5,94,34,.035); }.lg-redesign-page .mlegend-top{ display: flex; align-items: center; gap: .5rem; }.lg-redesign-page .mlegend-l{ font-weight: 600; font-size: 1rem; color: var(--text); }.lg-redesign-page .mlegend-n{ font-family: var(--mono); font-size: 10pt; color: var(--brass-deep); }.lg-redesign-page .mlegend-d{ font-size: 1rem; line-height: 1.5; color: var(--text-soft); }
@media (max-width: 900px) {.lg-redesign-page .mlegend-row{ grid-template-columns: 1fr; } }

/* ── The tile grid ──────────────────────────────────────────────────────────
   Twelve columns by seven rows, matching US_STATE_GRID_LAYOUT so this map and
   the live one place a state in the same square. Tiles keep a 1:1 ratio and
   shrink with the rail rather than scrolling sideways. */.lg-redesign-page .usmap{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  gap: clamp(3px, .5vw, 7px);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}.lg-redesign-page .mtile{
  aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--rule); border-radius: 2px; background: transparent;
  font-family: var(--mono); cursor: default; padding: 0;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease);
}.lg-redesign-page .mtile-c{ font-size: clamp(.6rem, .82vw, .8rem); font-weight: 700; color: var(--text-mute); letter-spacing: .02em; }.lg-redesign-page .mtile-d{ display: flex; gap: 2px; min-height: 7px; align-items: center; }.lg-redesign-page .mtile.is-on{
  background: rgba(5,94,34,.07); border-color: rgba(5,94,34,.32); cursor: pointer;
}.lg-redesign-page .mtile.is-on .mtile-c{ color: var(--text); }.lg-redesign-page .mtile.is-on:hover{ background: rgba(5,94,34,.14); border-color: var(--gate); }.lg-redesign-page .mtile.is-dim{ opacity: .26; }.lg-redesign-page .mtile:focus-visible{ outline: 2px solid var(--gate); outline-offset: 2px; }
@media (max-width: 720px) {.lg-redesign-page .mtile-d{ display: none; } }.lg-redesign-page .mkey{
  display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
  margin-top: 1.1rem; font-size: 10pt; color: var(--text-mute);
}.lg-redesign-page .mkey span{ display: inline-flex; align-items: center; gap: .45rem; }

/* ── The laws, grouped by state ─────────────────────────────────────────── */.lg-redesign-page .mfilters{ display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: center; }.lg-redesign-page .mstates{ display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }.lg-redesign-page .mstate{
  border: 1px solid var(--rule-field); border-radius: 3px;
  background: rgba(255,255,255,.025); padding: clamp(1.2rem, 2vw, 1.7rem);
}.lg-redesign-page .mstate.is-hidden{ display: none; }.lg-redesign-page .mstate-h{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .9rem; margin-bottom: .3rem; border-bottom: 1px solid var(--rule-field);
}.lg-redesign-page .mstate-h h3{ font-family: var(--serif); font-size: clamp(1.15rem, 1.7vw, 1.45rem); color: var(--on-field); margin: 0; }.lg-redesign-page .mstate-n{ font-family: var(--mono); font-size: 10pt; color: var(--on-field-mute); white-space: nowrap; }.lg-redesign-page .mlaw{
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto;
  gap: 1rem 1.6rem; align-items: start;
  padding: 1.15rem 0; border-bottom: 1px solid var(--rule-field);
}.lg-redesign-page .mlaw:last-child{ border-bottom: 0; padding-bottom: 0; }.lg-redesign-page .mlaw.is-hidden{ display: none; }.lg-redesign-page .mlaw-tag{
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: 10pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-field-mute); line-height: 1.4;
}.lg-redesign-page .mlaw-b{ display: grid; gap: .3rem; min-width: 0; }.lg-redesign-page .mlaw-c{ font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--on-field); }.lg-redesign-page .mlaw-f{ font-size: 10pt; line-height: 1.5; color: var(--on-field-mute); }.lg-redesign-page .mlaw-x{ font-size: 1rem; line-height: 1.6; color: var(--on-field-soft); }.lg-redesign-page .mlaw-m{ font-size: 10pt; color: var(--on-field-mute); }.lg-redesign-page .mlaw-r{ display: grid; gap: .45rem; justify-items: end; text-align: right; }.lg-redesign-page .mlaw-e{ font-family: var(--mono); font-size: 10pt; color: var(--brass-lift); max-width: 15rem; line-height: 1.5; }
@media (max-width: 900px) {.lg-redesign-page .mlaw{ grid-template-columns: minmax(0, 1fr); gap: .55rem; }.lg-redesign-page .mlaw-r{ justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: .9rem; align-items: center; }.lg-redesign-page .mlaw-e{ max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI Tracker — the register, convergence, themes, bills

   The live tracker's authority comes from density done carefully: a date rail
   on the left, the instrument and its duty in the middle, exposure on the
   right, and enough air between rows that thirty-four of them still scan. That
   structure is kept. What changes is the typography and the palette, so the
   page belongs to the same site as everything else.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Secondary stat row ─────────────────────────────────────────────────── */.lg-redesign-page .minis{ display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--rule-field); border: 1px solid var(--rule-field); }.lg-redesign-page .mini{ background: var(--field); padding: 1.1rem 1.2rem; display: grid; gap: .3rem; align-content: start; }.lg-redesign-page .mini-n{ font-family: var(--mono); font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 700; color: var(--brass-lift); line-height: 1; }.lg-redesign-page .mini-l{ font-size: 10pt; line-height: 1.45; color: var(--on-field-mute); }.lg-redesign-page .paper-2 .minis, .lg-redesign-page .paper .minis{ background: var(--rule); border-color: var(--rule); }.lg-redesign-page .paper-2 .mini, .lg-redesign-page .paper .mini{ background: var(--paper-2); }.lg-redesign-page .paper-2 .mini-n{ color: var(--brass-deep); }.lg-redesign-page .paper-2 .mini-l{ color: var(--text-soft); }
@media (max-width: 1000px) {.lg-redesign-page .minis{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {.lg-redesign-page .minis{ grid-template-columns: 1fr; } }

/* ── Upcoming vs already-in-effect ──────────────────────────────────────── */.lg-redesign-page .split-count{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }.lg-redesign-page .sc{ background: #fff; padding: 1.1rem 1.3rem; display: grid; gap: .25rem; }.lg-redesign-page .sc.is-on{ background: var(--gate); }.lg-redesign-page .sc-l{ font-size: 10pt; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); }.lg-redesign-page .sc.is-on .sc-l{ color: rgba(255,255,255,.72); }.lg-redesign-page .sc-v{ font-family: var(--mono); font-size: 1rem; color: var(--text); }.lg-redesign-page .sc.is-on .sc-v{ color: #fff; }
@media (max-width: 640px) {.lg-redesign-page .split-count{ grid-template-columns: 1fr; } }.lg-redesign-page .chip-n{ font-family: var(--mono); font-size: 10pt; opacity: .62; margin-left: .3rem; }

/* ── Deadline register ──────────────────────────────────────────────────── */.lg-redesign-page .dl2-list{ border-top: 1px solid var(--rule); margin-top: clamp(1.8rem, 3vw, 2.4rem); }.lg-redesign-page .dl2{
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 11rem);
  gap: 1rem 1.8rem; align-items: start;
  padding: 1.5rem .3rem; border-bottom: 1px solid var(--rule);
}.lg-redesign-page .dl2.is-hidden{ display: none; }.lg-redesign-page .dl2-when{ display: grid; gap: .25rem; }.lg-redesign-page .dl-date2{ font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--gate); white-space: nowrap; }.lg-redesign-page .dl-in{ font-family: var(--mono); font-size: 10pt; color: var(--text-mute); }.lg-redesign-page .dl2-what h4{ font-family: var(--sans); font-size: 1.02rem; font-weight: 600; color: var(--text); margin: 0 0 .2rem; line-height: 1.4; }.lg-redesign-page .dl-full{ display: block; font-size: 10pt; line-height: 1.5; color: var(--text-mute); margin-bottom: .5rem; }.lg-redesign-page .dl2-tags{ display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 .6rem; }.lg-redesign-page .tag{
  font-family: var(--mono); font-size: 10pt; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-soft); background: rgba(6,11,16,.045);
  border: 1px solid var(--rule); border-radius: 2px; padding: .18rem .45rem;
}.lg-redesign-page .dl2-label{ font-weight: 600; font-size: 1rem; color: var(--text); margin: 0 0 .3rem; }.lg-redesign-page .dl2-ctx{ font-size: 1rem; line-height: 1.6; color: var(--text-soft); margin: 0; }.lg-redesign-page .dl2-pen{ justify-self: end; text-align: right; }.lg-redesign-page .dl-pen{ display: grid; gap: .2rem; }.lg-redesign-page .dl-pen-k{ font-size: 10pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }.lg-redesign-page .dl-pen-v{ font-family: var(--mono); font-size: 1rem; font-weight: 700; color: #8a2f2f; line-height: 1.35; }
/* An enforcement mechanism is a phrase, not a figure. */.lg-redesign-page .dl-pen-v--words{ font-family: var(--sans); font-size: 1rem; font-weight: 600; }
@media (max-width: 900px) {.lg-redesign-page .dl2{ grid-template-columns: minmax(0, 1fr); gap: .6rem; }.lg-redesign-page .dl2-when{ grid-auto-flow: column; justify-content: start; gap: .7rem; align-items: baseline; }.lg-redesign-page .dl2-pen{ justify-self: start; text-align: left; }
}

/* ── Cross-jurisdiction convergence ─────────────────────────────────────── */.lg-redesign-page .cvg-list{ border-top: 1px solid var(--rule-field); }.lg-redesign-page .cvg{
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 9rem);
  gap: .6rem 1.6rem; align-items: center;
  padding: .95rem .2rem; border-bottom: 1px solid var(--rule-field);
}.lg-redesign-page .cvg-t{ font-size: 1rem; color: var(--on-field); }.lg-redesign-page .cvg-bar{ position: relative; display: flex; align-items: center; gap: .7rem; height: 20px; }.lg-redesign-page .cvg-bar i{ display: block; height: 10px; border-radius: 1px; background: linear-gradient(90deg, var(--gate-lift), var(--gate-glow)); }.lg-redesign-page .cvg-bar b{ font-family: var(--mono); font-size: 10pt; color: var(--on-field); font-weight: 700; }.lg-redesign-page .cvg-n{ font-family: var(--mono); font-size: 10pt; color: var(--on-field-mute); text-align: right; }
@media (max-width: 820px) {.lg-redesign-page .cvg{ grid-template-columns: minmax(0, 1fr) auto; }.lg-redesign-page .cvg-bar{ grid-column: 1 / -1; }
}

/* ── Legislation by industry ────────────────────────────────────────────── */.lg-redesign-page .ind-list{ border-top: 1px solid var(--rule); margin-top: .9rem; }.lg-redesign-page .ind{
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) minmax(0, 7.5rem);
  gap: .5rem 1.2rem; align-items: center;
  padding: .75rem .2rem; border-bottom: 1px solid var(--rule);
}.lg-redesign-page .ind-l{ font-size: 1rem; color: var(--text); }.lg-redesign-page .ind-bar{ height: 8px; background: rgba(6,11,16,.06); border-radius: 1px; overflow: hidden; }.lg-redesign-page .ind-bar i{ display: block; height: 100%; background: var(--gate); }.lg-redesign-page .ind-n{ font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--text); text-align: right; display: grid; gap: .1rem; }.lg-redesign-page .ind-n em{ font-style: normal; font-size: 10pt; font-weight: 400; color: var(--text-mute); }
@media (max-width: 620px) {.lg-redesign-page .ind{ grid-template-columns: minmax(0, 1fr) auto; }.lg-redesign-page .ind-bar{ grid-column: 1 / -1; }
}

/* ── Emerging themes ────────────────────────────────────────────────────── */.lg-redesign-page .thm-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1px; background: var(--rule-field); border: 1px solid var(--rule-field); }.lg-redesign-page .thm{ background: var(--field-2); padding: 1.3rem 1.4rem; display: grid; gap: .5rem; align-content: start; }.lg-redesign-page .thm-h{ display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }.lg-redesign-page .thm-h h4{ font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--on-field); margin: 0; }.lg-redesign-page .thm-n{ font-family: var(--mono); font-size: 10pt; color: var(--brass-lift); white-space: nowrap; }.lg-redesign-page .thm-s{ font-family: var(--mono); font-size: 10pt; line-height: 1.6; color: var(--on-field-mute); margin: 0; }

/* ── Bills to watch ─────────────────────────────────────────────────────── */.lg-redesign-page .bil-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: clamp(1rem, 1.6vw, 1.4rem); }.lg-redesign-page .bil{ border: 1px solid var(--rule); border-radius: 3px; background: #fff; padding: 1.25rem 1.35rem; display: grid; gap: .5rem; align-content: start; }.lg-redesign-page .bil-h{ display: flex; align-items: center; gap: .6rem; }.lg-redesign-page .bil-id{ font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--gate); }.lg-redesign-page .bil-st{ font-family: var(--mono); font-size: 10pt; letter-spacing: .1em; color: var(--text-soft); border: 1px solid var(--rule); border-radius: 2px; padding: .1rem .38rem; }.lg-redesign-page .bil h4{ font-family: var(--sans); font-size: .96rem; font-weight: 600; line-height: 1.5; color: var(--text); margin: 0; }.lg-redesign-page .bil-act{ font-size: 10pt; line-height: 1.5; color: var(--text-soft); margin: 0; }.lg-redesign-page .bil-act span{ color: var(--text-mute); font-family: var(--mono); font-size: 10pt; }.lg-redesign-page .bil-why{ list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .3rem; }.lg-redesign-page .bil-why li{
  font-size: 10pt; line-height: 1.45; color: var(--brass-deep);
  padding-left: 1rem; position: relative;
}.lg-redesign-page .bil-why li::before{ content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }

/* ═══════════════════════════════════════════════════════════════════════════
   Intelligence Library — category browse, popular entry points, counsel depth
   ═══════════════════════════════════════════════════════════════════════════ */

/* Popular entry points. Visually lighter than a facet chip on purpose: these
   are shortcuts into the search box, not a filter state you can be left
   stranded in, and making them look identical to the facet chips implied a
   fourth facet that does not exist. */.lg-redesign-page .pop{
  border: 1px dashed var(--rule); background: transparent; color: var(--text-soft);
  font-family: var(--sans); font-size: 10pt; padding: .34rem .75rem;
  border-radius: 2px; cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}.lg-redesign-page .pop:hover{ border-style: solid; border-color: var(--gate); color: var(--gate); background: rgba(5,94,34,.05); }

/* Category browse */.lg-redesign-page .cat-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1px; background: var(--rule-field); border: 1px solid var(--rule-field); }.lg-redesign-page .cat{
  background: var(--field); padding: 1.4rem 1.4rem 1.5rem; text-align: left;
  display: grid; gap: .3rem; align-content: start; cursor: pointer;
  font-family: var(--sans); border: 0;
  transition: background-color .2s var(--ease);
}.lg-redesign-page .cat:hover{ background: rgba(8,155,56,.07); }.lg-redesign-page .cat[aria-pressed="true"]{ background: rgba(8,155,56,.12); }.lg-redesign-page .cat-n{ font-family: var(--display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; color: #fff; letter-spacing: -.03em; }.lg-redesign-page .cat-t{ font-size: 1rem; font-weight: 600; color: var(--on-field); margin-top: .35rem; }.lg-redesign-page .cat-s{ font-size: 10pt; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-lift); line-height: 1.4; }.lg-redesign-page .cat-d{ font-size: 1rem; line-height: 1.55; color: var(--on-field-mute); margin-top: .3rem; }

/* What the full entry carries */.lg-redesign-page .get-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.1rem, 2vw, 1.8rem); }.lg-redesign-page .get{ display: grid; gap: .35rem; align-content: start; padding-top: 1rem; border-top: 1px solid var(--rule-field); }.lg-redesign-page .get-t{ font-size: 1rem; font-weight: 600; color: var(--on-field); }.lg-redesign-page .get-d{ font-size: 1rem; line-height: 1.55; color: var(--on-field-mute); }

/* ── Coverage map ──────────────────────────────────────────────────────────
   Two stacked equirectangular SVGs: a faint land silhouette under a corpus
   choropleth. The land layer exists only so tiny island nations missing from
   the 110m polygons do not read as holes in the ocean.

   Built for the dark field. The green (--gate-lift) is the one that survives a
   dark ground; on paper it would vibrate against the brass.                  */.lg-redesign-page .covmap{
  margin: 0;
  border: 1px solid var(--rule-field);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(8,155,56,.05), rgba(7,13,10,0) 55%), var(--field-2);
  padding: clamp(1.1rem, 1.6vw, 1.7rem);
}.lg-redesign-page .covmap__head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.2rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--rule-field);
}.lg-redesign-page .covmap__title{
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  color: var(--on-field);
  letter-spacing: -.01em;
}.lg-redesign-page .covmap__sub{
  font-family: var(--mono);
  font-size: 10pt;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-field-mute);
}.lg-redesign-page .covmap__canvas{
  position: relative;
  margin-top: 1rem;
  /* Crop the poles.

     The source is equirectangular and spans -90..90 latitude, but inhabited
     land runs about -56..72. At a true 2:1 that leaves roughly a third of the
     plate as empty ocean and a faint Antarctica the README explicitly puts out
     of scope — so the map reads as mostly nothing, which is the opposite of
     the argument it is here to make. Cropping to the populated band is the same
     decision the live map makes with its arctic/antarctic masks. */
  aspect-ratio: 1000 / 360;
  overflow: hidden;
  border-radius: 2px;
}.lg-redesign-page .covmap__land, .lg-redesign-page .covmap__fill{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* cover + a centre biased north of the equator keeps the crop on inhabited
     latitudes; contain would letterbox the poles straight back in. */
  object-fit: cover;
  object-position: center 43%;
}

/* Faint underlay only — at full strength it competes with the data. */.lg-redesign-page .covmap__land{ opacity: .13; filter: grayscale(1) brightness(2.4); }.lg-redesign-page .covmap__fill{ opacity: .95; }

/* Corners darkened so the plate reads as an instrument rather than a texture. */.lg-redesign-page .covmap__vig{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, rgba(7,13,10,0) 55%, rgba(7,13,10,.55) 100%);
}.lg-redesign-page .covmap__legend{
  list-style: none;
  margin: 1.05rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
}.lg-redesign-page .covmap__legend li{
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-size: 10pt;
  color: var(--on-field-soft);
}.lg-redesign-page .covmap__legend b{ color: var(--on-field); font-weight: 600; }.lg-redesign-page .covmap__sw{
  width: .62rem;
  height: .62rem;
  border-radius: 1px;
  flex: none;
  transform: translateY(1px);
}.lg-redesign-page .covmap__sw--in{ background: var(--gate-lift); }.lg-redesign-page .covmap__sw--watch{ background: var(--brass); }.lg-redesign-page .covmap__foot{
  margin: .95rem 0 0;
  font-size: 10pt;
  line-height: 1.62;
  color: var(--on-field-mute);
  max-width: 78ch;
}.lg-redesign-page .covmap--compact{ padding: clamp(.9rem, 1.2vw, 1.2rem); }.lg-redesign-page .covmap--compact .covmap__foot{ display: none; }

@media (max-width: 700px) {.lg-redesign-page .covmap__legend{ gap: .45rem 1rem; }.lg-redesign-page .covmap__legend li{ font-size: 10pt; }
}

/* Starting-point notice in the order cart.
   Brass rule rather than a coloured alert box: this is a clarification, not a
   warning, and an alert would make the default configuration look like an error
   the buyer had committed. */.lg-redesign-page .cart-start{
  margin: 0 0 1rem;
  padding-left: .8rem;
  border-left: 2px solid var(--brass);
  font-size: 10pt;
  line-height: 1.6;
  color: var(--on-field-soft);
}.lg-redesign-page .cart-start[hidden]{ display: none; }

/* A CTA for an empty order. Kept visible rather than removed so the panel does
   not reflow as the first item is added, but visibly inert and unreachable by
   keyboard — an enabled-looking button that does nothing is worse than a
   dimmed one. */.lg-redesign-page .cart .btn-primary.is-disabled{
  opacity: .38;
  pointer-events: none;
}

/* `hidden` is only `display:none` at author-origin default strength, so any
   component rule that sets `display` beats it. .cart-total is a flex row, so it
   kept rendering "$0" after being hidden. Restate it at the same specificity. */.lg-redesign-page .cart-total[hidden]{ display: none; }

/* An empty rows container still contributed its border and padding, leaving a
   stray rule floating above the CTA in the empty state. */.lg-redesign-page .cart-rows:empty{ display: none; }

/* ── Handbook ──────────────────────────────────────────────────────────────
   Long-form reading, which is a different job from the rest of the site: the
   measure is tighter, the rhythm is looser, and headings have to survive being
   skimmed by somebody looking for one section.                              */.lg-redesign-page .hb-layout{
  display: grid;
  /* Size both columns to their content and centre the pair, rather than giving
     the prose a 1fr track it then refuses to fill.
     Long-form reading needs a measure — ~74 characters — so the prose will not
     stretch however much room it is handed. With a 1fr track the leftover
     ~400px pooled between the text and the contents list, which reads as a
     layout that broke rather than a document with a margin. Centring puts the
     same space on the outside, where it looks intended. */
  grid-template-columns: minmax(0, 74ch) minmax(0, 15rem);
  justify-content: center;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: start;
}.lg-redesign-page .hb-layout > .hb-toc{ order: 2; }
@media (max-width: 1000px) {.lg-redesign-page .hb-layout{ grid-template-columns: minmax(0, 1fr); justify-content: stretch; }.lg-redesign-page .hb-layout > .hb-toc{ order: 0; }
}.lg-redesign-page .hb-prose{ max-width: 74ch; }.lg-redesign-page .hb-p{ margin: 0 0 1.15rem; font-size: 1rem; line-height: 1.72; color: var(--text); }.lg-redesign-page .hb-h2{
  font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.18; letter-spacing: -.015em; color: var(--text);
  margin: clamp(2.6rem, 4vw, 3.6rem) 0 1rem;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}.lg-redesign-page .hb-h3{
  font-family: var(--display); font-size: clamp(1.12rem, 1.5vw, 1.32rem);
  line-height: 1.3; color: var(--text);
  margin: clamp(1.8rem, 2.6vw, 2.4rem) 0 .7rem;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}.lg-redesign-page .hb-h4{ font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .55rem; color: var(--text); }.lg-redesign-page .hb-list{ margin: 0 0 1.15rem; padding-left: 1.15rem; display: grid; gap: .48rem; }.lg-redesign-page .hb-list li{ font-size: 1rem; line-height: 1.65; color: var(--text); }.lg-redesign-page .hb-quote{
  margin: 1.6rem 0; padding: .1rem 0 .1rem 1.1rem;
  border-left: 2px solid var(--brass);
  font-size: 1rem; line-height: 1.68; color: var(--text-soft);
}.lg-redesign-page .hb-rule{ border: 0; border-top: 1px solid var(--rule); margin: clamp(2.4rem, 4vw, 3.4rem) 0; }.lg-redesign-page .hb-pre{
  margin: 1.4rem 0; padding: 1rem 1.1rem; overflow-x: auto;
  background: var(--paper-3); border: 1px solid var(--rule-soft); border-radius: 3px;
  font-family: var(--mono); font-size: 10pt; line-height: 1.6;
}.lg-redesign-page .hb-prose code{
  font-family: var(--mono); font-size: 1rem;
  background: var(--paper-3); padding: .08em .32em; border-radius: 2px;
}.lg-redesign-page .hb-pre code{ background: none; padding: 0; }

/* Tables scroll inside their own box; the page must never scroll sideways. */.lg-redesign-page .hb-tablewrap{ overflow-x: auto; margin: 1.5rem 0; }.lg-redesign-page .hb-table{ border-collapse: collapse; width: 100%; min-width: 32rem; font-size: 1rem; }.lg-redesign-page .hb-table th{
  text-align: left; padding: .7rem .9rem .6rem 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--mono); font-size: 10pt; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-mute);
}.lg-redesign-page .hb-table td{
  padding: .78rem .9rem .78rem 0; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top; line-height: 1.55;
}.lg-redesign-page .hb-toc{ position: sticky; top: calc(var(--nav-h) + 26px); display: grid; gap: .1rem; }.lg-redesign-page .hb-toc-h{
  font-family: var(--mono); font-size: 10pt; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-deep); margin-bottom: .55rem;
}.lg-redesign-page .hb-toc a{
  display: block; padding: .3rem 0 .3rem .7rem; text-decoration: none;
  border-left: 2px solid var(--rule-soft);
  font-size: 10pt; line-height: 1.45; color: var(--text-mute);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}.lg-redesign-page .hb-toc a:hover{ color: var(--gate); border-left-color: var(--brass); }.lg-redesign-page .hb-toc-3{ padding-left: 1.4rem; font-size: 10pt; }.lg-redesign-page .hb-actions{ display: flex; flex-wrap: wrap; gap: .7rem; }.lg-redesign-page .hb-back{ color: inherit; text-decoration: none; border-bottom: 1px solid var(--brass); }.lg-redesign-page .hb-pn-row{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; margin-top: clamp(3rem, 5vw, 4.5rem);
}.lg-redesign-page .hb-pn{
  display: grid; gap: .3rem; padding: 1.1rem 1.2rem; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--paper);
  transition: border-color .2s var(--ease), transform .2s var(--ease-out);
}.lg-redesign-page .hb-pn:hover{ border-color: var(--brass); transform: translateY(-2px); }.lg-redesign-page .hb-pn--next{ text-align: right; }.lg-redesign-page .hb-pn .k{
  font-family: var(--mono); font-size: 10pt; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass-deep);
}.lg-redesign-page .hb-pn .t{ font-family: var(--display); font-size: 1rem; color: var(--text); }
@media (max-width: 640px) {.lg-redesign-page .hb-pn-row{ grid-template-columns: 1fr; } }.lg-redesign-page .hb-nav{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: clamp(1.4rem, 3vw, 3rem); margin-top: clamp(2rem, 3vw, 3rem); }
@media (max-width: 860px) {.lg-redesign-page .hb-nav{ grid-template-columns: 1fr; } }.lg-redesign-page .hb-nav-h{
  display: block; font-family: var(--mono); font-size: 10pt; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-lift); margin-bottom: .7rem;
}.lg-redesign-page .hb-nav-item{
  display: grid; grid-template-columns: 1.5rem 1fr; gap: .5rem; align-items: baseline;
  padding: .42rem 0; text-decoration: none; font-size: 1rem;
  color: var(--on-field-soft); transition: color .18s var(--ease);
}.lg-redesign-page .hb-nav-item:hover{ color: #fff; }.lg-redesign-page .hb-nav-item.is-here{ color: var(--gate-glow); }.lg-redesign-page .hb-nav-n{ font-family: var(--mono); font-size: 10pt; color: var(--on-field-mute); }

/* ── Print: one chapter, on paper ──────────────────────────────────────────
   "Save as PDF" is the browser's own print, so this stylesheet IS the PDF.
   Everything that is navigation, decoration or a dark ground gets dropped;
   what remains is the prose, its tables, and a footer saying where it came
   from — because a printed sheet with no provenance is worth very little to
   the person who finds it on a desk.                                        */
@media print {.lg-redesign-page .nav, .lg-redesign-page .foot, .lg-redesign-page .hb-nav, .lg-redesign-page .hb-toc, .lg-redesign-page .hb-pn-row, .lg-redesign-page .hb-actions, .lg-redesign-page .progress, .lg-redesign-page .drawer, .lg-redesign-page .band.field, .lg-redesign-page .hb-back{ display: none !important; }.lg-redesign-page .band-t, .lg-redesign-page .band{ padding: 0 !important; background: #fff !important; }.lg-redesign-page .rail{ width: 100% !important; }.lg-redesign-page .hb-layout{ display: block !important; }.lg-redesign-page .hb-prose{ max-width: none !important; }.lg-redesign-page .rv{ opacity: 1 !important; transform: none !important; }.lg-redesign-page .hb-h2, .lg-redesign-page .hb-h3{ break-after: avoid; }.lg-redesign-page .hb-tablewrap, .lg-redesign-page .hb-table tr, .lg-redesign-page .hb-quote, .lg-redesign-page .hb-pre{ break-inside: avoid; }.lg-redesign-page .hb-head .lede{ font-size: 1rem; }body{ background: #fff; }.lg-redesign-page .hb-body::after{
    content: "The AI Regulatory Obligations Handbook · LegisGate · legisgate.com";
    display: block; margin-top: 2rem; padding-top: .8rem;
    border-top: 1px solid #ccc; font-size: 10pt; color: #666;
  }
}

/* ── Handbook: set as a book, not as a landing page ────────────────────────
   The difference between "a web page with long text on it" and "a text" is
   almost entirely typographic: a serif reading face, a wider leading, a real
   chapter opener, and nothing in the margins asking for the sale.            */.lg-redesign-page .hb-opener{ background: var(--paper); border-bottom: 1px solid var(--rule-soft); }.lg-redesign-page .hb-open{ display: flex; align-items: baseline; gap: .75rem; }.lg-redesign-page .hb-open-kind{
  font-family: var(--mono); font-size: 10pt; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass-deep);
}.lg-redesign-page .hb-open-num{
  font-family: var(--display); font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: .9; color: var(--brass); font-variant-numeric: lining-nums;
}.lg-redesign-page .hb-open-of{ font-family: var(--mono); font-size: 10pt; color: var(--text-mute); }.lg-redesign-page .hb-title{
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.022em; color: var(--text);
  max-width: 20ch; margin: .5rem 0 0;
  padding-top: 1rem; border-top: 2px solid var(--ink);
}.lg-redesign-page .hb-stand{
  font-family: var(--display); font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  line-height: 1.5; font-style: italic; color: var(--text-soft);
  max-width: 56ch; margin: 1.1rem 0 0;
}

/* Downloads as a utility line, not a call to action. */.lg-redesign-page .hb-actions{ display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: clamp(1.8rem, 3vw, 2.6rem); }.lg-redesign-page .hb-act{
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 10pt; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute); text-decoration: none;
  border-bottom: 1px solid var(--rule); transition: color .18s var(--ease), border-color .18s var(--ease);
}.lg-redesign-page .hb-act:hover{ color: var(--gate); border-bottom-color: var(--brass); }

/* Body copy in the serif. This is the single biggest reason the page read as a
   web page rather than a book: a sans body at 1.02rem is interface text. */.lg-redesign-page .hb-prose{ font-family: var(--display); }.lg-redesign-page .hb-p{ font-size: 1.25rem; line-height: 1.78; letter-spacing: .002em; }.lg-redesign-page .hb-list li{ font-family: var(--display); font-size: 1.25rem; line-height: 1.7; }

/* Opening paragraph: a raised initial, the oldest signal in the form that a
   text has begun. Suppressed on worksheets, which open with instructions. */.lg-redesign-page .hb-prose > .hb-p:first-child::first-letter{
  float: left; font-size: 3.5em; line-height: .84;
  padding: .06em .1em 0 0; color: var(--gate);
}.lg-redesign-page .hb-prose--plain > .hb-p:first-child::first-letter{ float: none; font-size: inherit; color: inherit; padding: 0; }.lg-redesign-page .hb-h2{ border-top: 1px solid var(--rule); padding-top: 1.3rem; }.lg-redesign-page .hb-h3{ font-style: italic; color: var(--text-soft); }.lg-redesign-page .hb-quote{ font-family: var(--display); font-style: italic; font-size: 1.25rem; }

/* Tables read as figures: a rule above, a rule below, nothing vertical. */.lg-redesign-page .hb-table td{ font-family: var(--display); font-size: 1rem; }.lg-redesign-page .hb-tablewrap{ border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }.lg-redesign-page .hb-contents{ background: var(--paper-3); }.lg-redesign-page .hb-contents-h{
  font-family: var(--mono); font-size: 10pt; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brass-deep); margin: 0 0 .4rem;
}.lg-redesign-page .hb-contents .hb-nav-h{ color: var(--brass-deep); }.lg-redesign-page .hb-contents .hb-nav-item{ color: var(--text-soft); }.lg-redesign-page .hb-contents .hb-nav-item:hover{ color: var(--gate); }.lg-redesign-page .hb-contents .hb-nav-item.is-here{ color: var(--gate); font-weight: 600; }.lg-redesign-page .hb-contents .hb-nav-n{ color: var(--text-mute); }

/* Quiet chrome */.lg-redesign-page .nav--quiet .nav-actions{ display: none; }.lg-redesign-page .foot--quiet .colophon{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 3rem);
}
@media (max-width: 800px) {.lg-redesign-page .foot--quiet .colophon{ grid-template-columns: 1fr; } }.lg-redesign-page .colophon-k{
  display: block; font-family: var(--mono); font-size: 10pt; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-lift); margin-bottom: .6rem;
}.lg-redesign-page .foot--quiet .colophon p{ color: var(--on-field-soft); font-size: 1rem; line-height: 1.65; margin: 0; }.lg-redesign-page .foot--quiet .colophon a{ color: var(--on-field); text-decoration: none; border-bottom: 1px solid var(--rule-field); }.lg-redesign-page .foot--quiet .colophon a:hover{ border-bottom-color: var(--brass); }

@media print {.lg-redesign-page .hb-opener{ border: 0; }.lg-redesign-page .hb-open-num{ color: #999; }.lg-redesign-page .hb-contents{ display: none !important; }
}

/* A markdown `---` immediately before a section heading drew two rules a few
   pixels apart — the author's divider plus the heading's own. Keep one. */.lg-redesign-page .hb-rule + .hb-h2{ border-top: 0; padding-top: 0; margin-top: 0; }

/* Worksheet checkboxes. Drawn, not typed — these sheets exist to be printed and
   filled in by hand, and "[ ]" in the body text is not something you can tick. */.lg-redesign-page .hb-list--tasks{ list-style: none; padding-left: 0; gap: .62rem; }.lg-redesign-page .hb-task{ display: grid; grid-template-columns: 1.05rem 1fr; gap: .7rem; align-items: start; }.lg-redesign-page .hb-box{
  width: 1.05rem; height: 1.05rem; margin-top: .38em;
  border: 1.5px solid var(--text-mute); border-radius: 2px; background: #fff;
}.lg-redesign-page .hb-box.is-done{ border-color: var(--gate); background: var(--gate); }
@media print {.lg-redesign-page .hb-box{ border-color: #444; } }

/* Direct routes on the contact page — for the people who should not be filling
   in a form at all. Set as a quiet list, not as cards: they are an escape
   hatch from the form beside them, not six competing offers. */.lg-redesign-page .routes{ margin-top: clamp(2.4rem, 4vw, 3.4rem); border-top: 1px solid var(--rule); padding-top: 1.4rem; }.lg-redesign-page .routes-h{
  display: block; font-family: var(--mono); font-size: 10pt; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-deep); margin-bottom: 1rem;
}.lg-redesign-page .route{
  display: block; padding: .8rem 0; text-decoration: none;
  border-bottom: 1px solid var(--rule-soft);
  box-shadow: inset 2px 0 0 transparent; padding-left: 0;
  transition: box-shadow .18s var(--ease), padding-left .18s var(--ease);
}.lg-redesign-page .route:last-child{ border-bottom: 0; }.lg-redesign-page .route:hover{ box-shadow: inset 2px 0 0 var(--brass); padding-left: .7rem; }.lg-redesign-page .route-t{ display: block; font-weight: 600; font-size: 1rem; color: var(--text); }.lg-redesign-page .route:hover .route-t{ color: var(--gate); }.lg-redesign-page .route-d{ display: block; margin-top: .18rem; font-size: 10pt; line-height: 1.55; color: var(--text-mute); }

/* Reach line on the contact page — the corpus, stated as the corpus. */.lg-redesign-page .reach{ display: flex; flex-wrap: wrap; gap: .5rem 1.9rem; }.lg-redesign-page .reach span{ font-size: 1rem; color: var(--text-soft); }.lg-redesign-page .reach b{ font-family: var(--display); font-size: 1.25rem; color: var(--text); font-weight: 500; }.lg-redesign-page .form-row--single{ grid-template-columns: 1fr !important; }

/* ── Sign in ───────────────────────────────────────────────────────────────
   Two panels: the form, and a reminder of what is behind it. The aside is not
   decoration — somebody who has been signed out mid-task wants to know their
   register is still there.                                                  */.lg-redesign-page .auth-band{ min-height: 68vh; }.lg-redesign-page .auth{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
  max-width: 62rem; margin-inline: auto;
}
@media (max-width: 860px) {.lg-redesign-page .auth{ grid-template-columns: 1fr; } }.lg-redesign-page .auth-form{ max-width: 32rem; }.lg-redesign-page .auth-pw{ position: relative; }.lg-redesign-page .auth-pw .input{ padding-right: 4.2rem; }.lg-redesign-page .auth-reveal{
  position: absolute; right: .55rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: .3rem .4rem;
  font-family: var(--mono); font-size: 10pt; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute);
}.lg-redesign-page .auth-reveal:hover{ color: var(--gate); }.lg-redesign-page .auth-error{
  margin: 1rem 0 0; padding: .7rem .9rem;
  border-left: 2px solid #a4372a; background: rgba(164,55,42,.06);
  font-size: 1rem; line-height: 1.55; color: #7d2a20;
}.lg-redesign-page .auth-notice{
  margin: 1.2rem 0 0; padding: .7rem .9rem;
  border-left: 2px solid var(--brass); background: rgba(196,163,90,.1);
  font-size: 1rem; line-height: 1.55; color: var(--text-soft);
}.lg-redesign-page .auth-error[hidden], .lg-redesign-page .auth-notice[hidden]{ display: none; }

/* ── Contact form: honeypot, hCaptcha, send states ─────────────────────────
   .form-error reuses .auth-error's exact treatment (a red-bordered inline
   banner) — same meaning, same place other forms on this site show it. */.lg-redesign-page .hp-trap{ position: absolute; left: -9999px; width: 0; height: 0; opacity: 0; pointer-events: none; }.lg-redesign-page .form-error{
  margin: 1rem 0 0; padding: .7rem .9rem;
  border-left: 2px solid #a4372a; background: rgba(164,55,42,.06);
  font-size: 1rem; line-height: 1.55; color: #7d2a20;
}.lg-redesign-page .form-error[hidden]{ display: none; }.lg-redesign-page .form-success{
  margin: 1rem 0; padding: clamp(1.2rem,2vw,1.6rem);
  border: 1px solid rgba(5,94,34,.25); border-radius: 4px; background: rgba(5,94,34,.06);
}.lg-redesign-page .form-success h3{ margin: 0 0 .4rem; font-size: 1.25rem; }.lg-redesign-page .form-success p{ margin: 0; color: var(--text-soft); font-size: 1rem; }.lg-redesign-page .form-success[hidden]{ display: none; }.lg-redesign-page .contact-hcaptcha-error{ font-size: 1rem; color: #7d2a20; margin: .6rem 0 0; }.lg-redesign-page .contact-hcaptcha-legal{ margin-top: .6rem; font-size: 10pt; color: var(--text-mute); line-height: 1.5; max-width: 46ch; }.lg-redesign-page .auth-aside{
  background: var(--field); border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 2px solid var(--brass);
}
/* Was a bare mark forced into a 2.2rem box with nothing else on the card —
   .brand-mark ignores its parent's width (fixed at 52px in site.css), so the
   icon rendered at full nav size, alone, with a large gap below it before the
   quote started. Now the full lockup (mark + wordmark + tagline), unconstrained,
   so it reads as a signature rather than an orphaned icon floating in a corner. */.lg-redesign-page .auth-mark{ margin-bottom: 1.6rem; }.lg-redesign-page .auth-mark .brand{ pointer-events: none; }.lg-redesign-page .auth-quote{
  font-family: var(--display); font-size: 1rem; line-height: 1.6;
  color: var(--on-field); margin: 0;
}.lg-redesign-page .auth-list{ list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; }.lg-redesign-page .auth-list li{
  font-size: 1rem; color: var(--on-field-soft); padding-left: 1rem; position: relative;
}.lg-redesign-page .auth-list li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: .32rem; height: .32rem; border-radius: 50%; background: var(--gate-lift);
}.lg-redesign-page .auth-foot{
  margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule-field);
  font-size: 10pt; line-height: 1.55; color: var(--on-field-mute);
}.lg-redesign-page .auth-foot a{ color: var(--on-field); }

/* ── Obligation theme pages ────────────────────────────────────────────────
   One duty, every instrument that carries it. The row is the unit: name,
   jurisdiction, and the instrument's OWN trigger text — carried across rather
   than summarised, because a summary of a trigger condition is a new claim. */.lg-redesign-page .thm-region{ margin-top: clamp(2.4rem, 4vw, 3.4rem); }.lg-redesign-page .thm-region-h{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 10pt; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brass-deep);
  padding-bottom: .6rem; border-bottom: 2px solid var(--ink); margin: 0;
}.lg-redesign-page .thm-count{ font-size: 10pt; color: var(--text-mute); letter-spacing: .1em; }.lg-redesign-page .thm-list{ display: grid; }.lg-redesign-page .thm-row{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .75fr) minmax(0, 1.6fr);
  gap: .3rem 1.4rem;
  padding: .95rem 0 .95rem .7rem;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  box-shadow: inset 2px 0 0 transparent;
  transition: box-shadow .18s var(--ease), background-color .18s var(--ease);
}.lg-redesign-page .thm-row:hover{ background: rgba(5,94,34,.04); box-shadow: inset 2px 0 0 var(--brass); }.lg-redesign-page .thm-name{ font-weight: 600; font-size: 1rem; color: var(--text); line-height: 1.4; }.lg-redesign-page .thm-row:hover .thm-name{ color: var(--gate); }.lg-redesign-page .thm-juris{ font-size: 10pt; color: var(--text-soft); }.lg-redesign-page .thm-trigger{ font-size: 10pt; line-height: 1.55; color: var(--text-mute); }.lg-redesign-page .thm-meta{
  grid-column: 1 / -1; font-family: var(--mono); font-size: 10pt;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute);
}
@media (max-width: 900px) {.lg-redesign-page .thm-row{ grid-template-columns: minmax(0, 1fr); gap: .25rem; }
}.lg-redesign-page .stats--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) {.lg-redesign-page .stats--3{ grid-template-columns: 1fr; } }

/* Browse-by-duty grid on the obligations hub. */.lg-redesign-page .duty-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
             background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 820px) {.lg-redesign-page .duty-grid{ grid-template-columns: 1fr; } }.lg-redesign-page .duty{ display: grid; gap: .35rem; padding: 1.1rem 1.25rem; background: var(--paper);
        text-decoration: none; transition: background-color .18s var(--ease); }.lg-redesign-page .duty:hover{ background: #fff; }.lg-redesign-page .duty-t{ font-family: var(--display); font-size: 1rem; color: var(--text); line-height: 1.3; }.lg-redesign-page .duty:hover .duty-t{ color: var(--gate); }.lg-redesign-page .duty-d{ font-size: 10pt; line-height: 1.55; color: var(--text-mute); }.lg-redesign-page .duty-n{ font-family: var(--mono); font-size: 10pt; letter-spacing: .1em;
          text-transform: uppercase; color: var(--brass-deep); margin-top: .2rem; }

/* A theme row whose instrument cannot be found in the library snapshot. Same
   layout, no hover, no pointer — an honest dead end beats a link that lands on
   an empty result. */.lg-redesign-page .thm-row--plain{ cursor: default; }.lg-redesign-page .thm-row--plain:hover{ background: none; box-shadow: inset 2px 0 0 transparent; }