/* =============================================================================
   LegisGate site, v3: the premium pass (2026-10-07)
   Loaded after site.css and components.css, so it wins by order. Navy is the one
   brand field; porcelain and white carry the pages; green marks a state, not a
   decoration; brass is a hairline and never a button. Type: a serif for the
   large statements, a grotesque for the working text, a mono for data labels.
   ============================================================================= */.lg-redesign-page{
  --ink:        #041A35;
  --navy:       #041A35;
  --navy-2:     #14294D;
  --gate:       #0A6F36;
  --gate-mid:   #085A2C;
  --gate-lift:  #2BB868;
  --gate-glow:  #3FD283;

  --field:      #070d0a;
  --field-2:    #0e2019;
  --paper:      #FFFFFF;
  --paper-2:    #F3F6F8;
  --paper-3:    #E9EEF2;

  --text:       #1B2733;
  --text-soft:  #45525E;
  --text-mute:  #5A666F;

  --on-field:      #F4F6F8;
  --on-field-soft: rgba(244,246,248,.80);
  --on-field-mute: rgba(244,246,248,.58);

  --brass:      #B8924A;
  --brass-deep: #7A5A22;
  --brass-lift: #D3B374;
  --rule:       #DDE2E6;
  --rule-soft:  #E8ECEE;
  --rule-field: rgba(244,246,248,.16);

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --rail: min(1840px, 92vw);
  --rail-tight: min(1180px, 92vw);
  --band: clamp(5.5rem, 9vw, 10rem);
  --band-tight: clamp(3.5rem, 5.5vw, 6rem);
  --nav-h: 86px;
  --shadow-card: 0 1px 2px rgba(4,26,53,.05), 0 24px 60px -28px rgba(4,26,53,.22);
  --shadow-shot: 0 2px 4px rgba(4,26,53,.06), 0 50px 110px -40px rgba(4,26,53,.38);
}body{ background: var(--paper); color: var(--text); font-size: 17px; line-height: 1.6; }
@media (max-width: 640px) {body{ font-size: 16px; } }

/* Type */.lg-redesign-page h1, .lg-redesign-page h2, .lg-redesign-page h3, .lg-redesign-page h4{ font-weight: 400; color: var(--navy); }.lg-redesign-page .d1{ font-size: clamp(2.7rem, 5.4vw, 5rem); line-height: 1.02; letter-spacing: -.03em; }.lg-redesign-page .d2{ font-size: clamp(2.1rem, 3.7vw, 3.5rem); line-height: 1.07; letter-spacing: -.026em; }.lg-redesign-page .d3{ font-size: clamp(1.55rem, 2.4vw, 2.2rem); line-height: 1.14; letter-spacing: -.02em; }.lg-redesign-page .d4{ font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.3; letter-spacing: -.01em; }.lg-redesign-page .lede{ font-size: clamp(1.1rem, 1.45vw, 1.34rem); line-height: 1.55; color: var(--text-soft); max-width: 62ch; }.lg-redesign-page .small{ font-size: .88rem; }.lg-redesign-page .eyebrow{
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; color: var(--gate-mid); margin-bottom: 1.25rem;
}.lg-redesign-page .eyebrow::before{ width: 1.6rem; background: var(--brass); opacity: 1; }.lg-redesign-page .field .eyebrow, .lg-redesign-page .field-2 .eyebrow{ color: var(--brass-lift); }.lg-redesign-page .field .eyebrow::before, .lg-redesign-page .field-2 .eyebrow::before{ background: var(--brass-lift); }.lg-redesign-page .head .eyebrow::after, .lg-redesign-page .tour-head .eyebrow::after, .lg-redesign-page .turn .eyebrow::after, .lg-redesign-page .band-t .rail > .eyebrow::after, .lg-redesign-page .hero .eyebrow::after{ background: var(--brass); opacity: 1; width: 1.6rem; }.lg-redesign-page .mono{ font-family: var(--mono); }

/* Buttons: navy is the action. White on the dark ground. */.lg-redesign-page .btn{
  border-radius: 8px; padding: .92rem 1.45rem;
  font-family: var(--sans); font-size: .98rem; font-weight: 650;
  letter-spacing: 0; text-transform: none;
}.lg-redesign-page .btn-primary{ background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 10px 24px -12px rgba(4,26,53,.55); }.lg-redesign-page .btn-primary:hover{ background: var(--navy-2); border-color: var(--navy-2); box-shadow: 0 14px 30px -12px rgba(4,26,53,.6); }.lg-redesign-page .btn-ghost{ background: #fff; border-color: #C7CFD5; color: var(--navy); }.lg-redesign-page .btn-ghost:hover{ border-color: var(--navy); background: #fff; }.lg-redesign-page .field .btn-primary, .lg-redesign-page .field-2 .btn-primary{ background: #fff; border-color: #fff; color: var(--navy); box-shadow: none; }.lg-redesign-page .field .btn-primary:hover, .lg-redesign-page .field-2 .btn-primary:hover{ background: #E9EEF3; border-color: #E9EEF3; }.lg-redesign-page .field .btn-ghost, .lg-redesign-page .field-2 .btn-ghost{ background: transparent; border-color: rgba(255,255,255,.42); color: #fff; }.lg-redesign-page .field .btn-ghost:hover, .lg-redesign-page .field-2 .btn-ghost:hover{ border-color: #fff; background: rgba(255,255,255,.08); }.lg-redesign-page .tlink{ color: var(--navy); font-weight: 650; }.lg-redesign-page .tlink::after{ opacity: .5; }.lg-redesign-page .field .tlink, .lg-redesign-page .field-2 .tlink{ color: #fff; }.lg-redesign-page a:focus-visible, .lg-redesign-page button:focus-visible{ outline-color: var(--gate); }

/* Bands */.lg-redesign-page .head{ max-width: 56rem; }.lg-redesign-page .head .d2{ text-wrap: balance; }.lg-redesign-page .head .lede{ margin-top: 1.25rem; }

/* The split hero: words left, the real screen right, on the dark photograph */.lg-redesign-page .hero--split .hero-cols{ grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 5vw, 5.5rem); }.lg-redesign-page .hero-shot{ border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 60px 100px -45px rgba(0,0,0,.9), 0 0 0 7px rgba(255,255,255,.04); }.lg-redesign-page .hero--split h1{ font-size: clamp(2.3rem, 4vw, 3.8rem); max-width: 18ch; }
@media (max-width: 1100px) {.lg-redesign-page .hero--split .hero-cols{ grid-template-columns: 1fr; } }

/* Cards, ledgers, notices */.lg-redesign-page .card{ border-radius: 14px; border: 1px solid var(--rule); box-shadow: var(--shadow-card); padding: clamp(1.6rem, 2.4vw, 2.3rem); }.lg-redesign-page .card::before{ display: none; }.lg-redesign-page .card:hover{ transform: translateY(-3px); border-color: #C7CFD5; box-shadow: 0 2px 4px rgba(4,26,53,.06), 0 30px 70px -30px rgba(4,26,53,.3); }.lg-redesign-page .card-k{ font-family: var(--mono); color: var(--gate-mid); }.lg-redesign-page .field .card, .lg-redesign-page .field-2 .card{ background: rgba(255,255,255,.05); border-color: var(--rule-field); box-shadow: none; }.lg-redesign-page .ledger{ border-top-color: var(--rule); }.lg-redesign-page .ledger-n{ font-family: var(--mono); font-size: 1rem; color: var(--gate-mid); }.lg-redesign-page .ledger-q{ font-size: clamp(1.25rem, 1.7vw, 1.65rem); color: var(--navy); }.lg-redesign-page .field .ledger-q, .lg-redesign-page .field-2 .ledger-q{ color: #fff; }.lg-redesign-page .ledger-row:hover{ background: rgba(7,143,63,.035); }.lg-redesign-page .notice{ border-radius: 10px; background: #F3F6F8; border-left-color: var(--navy); }.lg-redesign-page .field .notice, .lg-redesign-page .field-2 .notice{ background: rgba(255,255,255,.07); border-left-color: var(--brass-lift); }

/* Product frames: one treatment everywhere */.lg-redesign-page .feat-frame, .lg-redesign-page .shot, .lg-redesign-page .tour-shot{ border-radius: 12px; border: 1px solid var(--rule); background: #fff; box-shadow: var(--shadow-shot); }.lg-redesign-page .feat{ border-top-color: var(--rule); }.lg-redesign-page .feat-list li::before{ background: var(--gate); height: 2px; }

/* Statistics */.lg-redesign-page .stat{ border-top: 2px solid var(--navy); }.lg-redesign-page .field .stat, .lg-redesign-page .field-2 .stat{ border-top-color: rgba(255,255,255,.4); }.lg-redesign-page .stat-n{ font-family: var(--display); font-weight: 400; color: var(--navy); }.lg-redesign-page .stat-n.stat-word{ font-size: clamp(1.9rem, 2.9vw, 2.9rem); line-height: 1.1; padding-top: .35rem; }.lg-redesign-page .field .stat-n, .lg-redesign-page .field-2 .stat-n{ color: #fff; }.lg-redesign-page .stat-l{ font-family: var(--mono); font-weight: 500; letter-spacing: .1em; font-size: .72rem; color: var(--text-mute); }.lg-redesign-page .field .stat-l, .lg-redesign-page .field-2 .stat-l{ color: var(--brass-lift); }

/* Pricing panel */.lg-redesign-page .tiers{ border-radius: 16px; border: 1px solid var(--rule); box-shadow: var(--shadow-card); }.lg-redesign-page .tier-k{ font-family: var(--mono); color: var(--text-mute); }.lg-redesign-page .tier-amt{ color: var(--navy); }.lg-redesign-page .tier--free{ background: linear-gradient(180deg, rgba(7,143,63,.1), rgba(7,143,63,.02)); }.lg-redesign-page .tier-meter i.on{ background: var(--gate); }

/* Home hero: the product, large and legible, cropped from the top */.lg-redesign-page .hero--home .hero-cols{ grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; }.lg-redesign-page .hero--home h1{ font-size: clamp(2.3rem, 4vw, 3.8rem); max-width: 18ch; }.lg-redesign-page .hero--home .hero-shot img{ aspect-ratio: 1.3; object-fit: cover; object-position: 0 0; height: auto; }
@media (max-width: 1100px) {.lg-redesign-page .hero--home .hero-cols{ grid-template-columns: 1fr; } }.lg-redesign-page .hero--split h1{ font-size: clamp(2.3rem, 4vw, 3.8rem); max-width: 18ch; }.lg-redesign-page .intel-bar{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr); gap: clamp(1rem, 3vw, 3rem); align-items: start; width: 100%; padding-top: .4rem; }.lg-redesign-page .intel-stat{ align-content: start; }.lg-redesign-page .intel-l{ font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .1em; line-height: 1.4; min-height: 2.8em; }.lg-redesign-page .intel-asof .k{ font-family: var(--mono); font-weight: 500; font-size: .7rem; letter-spacing: .1em; }.lg-redesign-page .intel-asof .v{ font-size: .84rem; }
@media (max-width: 1000px) {.lg-redesign-page .intel-bar{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hero screens are pre-cut crops of the working area; the frame only sizes them */.lg-redesign-page .hero-shot img{ display: block; width: 100%; height: auto; }.lg-redesign-page .hero--home .hero-shot img{ aspect-ratio: auto; object-fit: initial; }

/* The closing band is light, so its text link and primary button are navy, not white */.lg-redesign-page .hero:not(.hero--lead) .tlink{ color: var(--navy); }.lg-redesign-page .hero:not(.hero--lead) .btn-primary{ background: var(--navy); border-color: var(--navy); color: #fff; }.lg-redesign-page .hero:not(.hero--lead) .btn-primary:hover{ background: var(--navy-2); border-color: var(--navy-2); }.lg-redesign-page .foot h4{ font-family: var(--mono); font-weight: 500; letter-spacing: .12em; font-size: .72rem; }

/* No beige anywhere: the page ground is white and the host app's parchment never shows through */.lg-redesign-page{ background: var(--paper); }

/* Form fields are white: the host app's cream field colour is not used on these pages */.lg-redesign-page .input, .lg-redesign-page .select, .lg-redesign-page .textarea, .lg-redesign-page input[type="text"], .lg-redesign-page input[type="email"], .lg-redesign-page input[type="search"], .lg-redesign-page input[type="tel"], .lg-redesign-page textarea, .lg-redesign-page select{ background-color: #fff !important; }

/* A plain list of laws: name left, place right, one hairline each */.lg-redesign-page .law-list{ list-style: none; margin: 2rem auto 0; padding: 0; max-width: 62rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); }.lg-redesign-page .law-list li{ display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .95rem 0; border-top: 1px solid var(--rule); }.lg-redesign-page .law-n{ color: var(--navy); font-weight: 600; }.lg-redesign-page .law-j{ color: var(--text-mute); font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 800px) {.lg-redesign-page .law-list{ grid-template-columns: 1fr; }.lg-redesign-page .law-j{ white-space: normal; text-align: right; } }

/* The walkthrough player: a clean frame, a control strip, a step rail beside it */
/* The frame (picture plus controls) is capped by the viewport height so it fits on screen while it plays:
   the picture is 16:10, the controls and the sticky header take about 11rem. */
@media (min-width: 701px) {.lg-redesign-page .player{ max-width: min(100%, calc((100vh - 11rem) * 1.6)); margin-left: auto; margin-right: auto; } }.lg-redesign-page .player{ display: block; margin-top: clamp(2rem, 3vw, 3rem); outline: none; }.lg-redesign-page .player:focus-visible{ outline: 2px solid var(--gate); outline-offset: 6px; border-radius: 14px; }.lg-redesign-page .player-frame{ position: relative; border: 1px solid var(--rule); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(4,26,53,.05), 0 24px 60px -32px rgba(4,26,53,.28); }.lg-redesign-page .player-screen{ position: relative; aspect-ratio: 16 / 10; background: #fff; }.lg-redesign-page .player-screen img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .45s ease; border: 0; border-radius: 0; }.lg-redesign-page .player-screen img.is-on{ opacity: 1; }.lg-redesign-page .player-screen video{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #fff; }.lg-redesign-page .player-start{ position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .8rem; padding: .55rem 1.4rem .55rem .6rem; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font-family: var(--sans); font-size: 1rem; font-weight: 650; cursor: pointer; box-shadow: 0 18px 44px -14px rgba(4,26,53,.7); transition: transform .2s ease, background-color .2s ease; }.lg-redesign-page .player-start:hover{ background: var(--navy-2); transform: translate(-50%, -50%) scale(1.03); }.lg-redesign-page .player-start-ic{ width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--navy); display: grid; place-items: center; }.lg-redesign-page .player-start-ic svg{ width: 22px; height: 22px; margin-left: 2px; }.lg-redesign-page .player.is-started .player-start{ display: none; }.lg-redesign-page .player:not(.is-started) .player-screen::after{ content: ""; position: absolute; inset: 0; background: rgba(4,26,53,.06); }.lg-redesign-page .player-controls{ display: flex; align-items: center; gap: .45rem; padding: .7rem .9rem; border-top: 1px solid var(--rule); background: #fff; }.lg-redesign-page .player-controls button{ width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .15s ease; }.lg-redesign-page .player-controls button:hover{ border-color: var(--navy); }.lg-redesign-page .player-controls svg{ width: 18px; height: 18px; }.lg-redesign-page .player-controls .ic-pause{ display: none; }.lg-redesign-page .player.is-playing .player-controls .ic-pause{ display: block; }.lg-redesign-page .player.is-playing .player-controls .ic-play{ display: none; }.lg-redesign-page .player-vol{ display: flex; align-items: center; gap: .3rem; margin-left: .4rem; }.lg-redesign-page .vol-range{ width: 0; opacity: 0; padding: 0; margin: 0; accent-color: var(--gate); cursor: pointer; transition: width .2s ease, opacity .2s ease; }.lg-redesign-page .player-vol:hover .vol-range, .lg-redesign-page .player-vol:focus-within .vol-range{ width: 96px; opacity: 1; }
@media (hover: none) {.lg-redesign-page .vol-range{ width: 80px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .vol-range{ transition: none; } }.lg-redesign-page .vol-range:focus-visible{ outline: 2px solid var(--gate); outline-offset: 3px; }.lg-redesign-page .player-controls .ic-muted{ display: none; }.lg-redesign-page .player.is-muted .player-controls .ic-muted{ display: block; }.lg-redesign-page .player.is-muted .player-controls .ic-sound{ display: none; }.lg-redesign-page .player-count{ font-family: var(--sans); font-size: .8rem; font-weight: 600; color: var(--text-mute); margin-left: .5rem; min-width: 3.4rem; font-variant-numeric: tabular-nums; }.lg-redesign-page .player-progress{ flex: 1; height: 2px; background: var(--rule); margin-left: .5rem; overflow: hidden; }.lg-redesign-page .player-progress i{ display: block; height: 100%; width: 0; background: var(--navy); }.lg-redesign-page .player-n{ font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--text-mute); padding-top: .25rem; }.lg-redesign-page .player-t{ font-weight: 700; font-size: 1rem; color: var(--navy); }.lg-redesign-page .player-c{ grid-column: 2; font-size: .9rem; line-height: 1.5; color: var(--text-soft); }
@media (max-width: 1000px) {.lg-redesign-page .player{ grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .player-screen img{ transition: none; }.lg-redesign-page .player-start{ transition: none; } }

/* A plain list of laws: name left, place right, one hairline each */.lg-redesign-page .law-list{ list-style: none; margin: 2rem auto 0; padding: 0; max-width: 62rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 4rem); }.lg-redesign-page .law-list li{ display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .95rem 0; border-top: 1px solid var(--rule); }.lg-redesign-page .law-n{ color: var(--navy); font-weight: 600; }.lg-redesign-page .law-j{ color: var(--text-mute); font-size: .8rem; letter-spacing: .04em; white-space: nowrap; }
@media (max-width: 800px) {.lg-redesign-page .law-list{ grid-template-columns: 1fr; }.lg-redesign-page .law-j{ white-space: normal; text-align: right; } }

/* The silent demo: scenes cross-fade in turn; the bar shows where in the loop it is */.lg-redesign-page .demo{ margin: clamp(2rem, 3vw, 3rem) auto 0; max-width: 1000px; }.lg-redesign-page .demo-stage{ position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--rule); box-shadow: var(--shadow-shot); }.lg-redesign-page .demo-scene{ position: absolute; inset: 0; margin: 0; opacity: 0; animation-name: demoScene; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }.lg-redesign-page .demo-scene img{ width: 100%; height: 100%; object-fit: cover; object-position: top left; transform-origin: 30% 20%; animation: demoDrift 9s ease-in-out infinite alternate; }.lg-redesign-page .demo-scene figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem 1.8rem 1.4rem; display: grid; gap: .25rem; color: #fff; background: linear-gradient(0deg, rgba(4,26,53,.94), rgba(4,26,53,.0)); }.lg-redesign-page .demo-scene figcaption .mono{ font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-lift); }.lg-redesign-page .demo-scene figcaption span:last-child{ font-size: clamp(1rem, 1.5vw, 1.3rem); max-width: 60ch; }.lg-redesign-page .demo-bar{ height: 3px; background: var(--rule); margin-top: 1rem; border-radius: 2px; overflow: hidden; }.lg-redesign-page .demo-bar i{ display: block; height: 100%; width: 100%; background: var(--gate); transform-origin: left; animation: demoBar linear infinite; }
@keyframes demoScene { 0% { opacity: 0; } 2.5% { opacity: 1; } 13% { opacity: 1; } 15.5% { opacity: 0; } 100% { opacity: 0; } }
@keyframes demoDrift { from { transform: scale(1); } to { transform: scale(1.04); } }
@keyframes demoBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .demo-stage{ aspect-ratio: auto; overflow: visible; background: none; border: 0; box-shadow: none; display: grid; gap: 1.6rem; }.lg-redesign-page .demo-scene{ position: relative; opacity: 1; animation: none; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }.lg-redesign-page .demo-scene img{ animation: none; height: auto; }.lg-redesign-page .demo-scene figcaption{ position: static; background: var(--navy); }.lg-redesign-page .demo-bar{ display: none; }
}

/* No cream tints: the menu panel is white and the pending pill is a cool grey */.lg-redesign-page .pill--pending, .lg-redesign-page .field .pill--pending{ background: #eef2f5; color: var(--text-soft); border-color: #cfd8df; }.lg-redesign-page .nav-panel{ background-image: none; }

/* Hero screens: drawn flat and at their own pixels, never transformed, so they stay sharp */.lg-redesign-page .hero-shot{ transform: none !important; will-change: auto; }.lg-redesign-page .hero-shot img{ image-rendering: auto; backface-visibility: visible; }

/* The four verbs of the mantra carry the brand green; the rest of the line stays ink */.lg-redesign-page .mantra{ color: var(--gate); }

/* ── Section grid (2026-10-07): heads and lists share one edge ─────────────────
   A centred headline floating over a full-width list is the tell of a template. Every section
   now sits on one content measure inside the rail; the head runs title left and lede right,
   and the ledger rows below use the same split, so the headline, the lede and the rows line up. */.lg-redesign-page .rail > .head, .lg-redesign-page .rail > .ledger, .lg-redesign-page .rail > .feats, .lg-redesign-page .rail > .notice, .lg-redesign-page .rail > .help-cta, .lg-redesign-page .rail > .help-for, .lg-redesign-page .rail > .grid, .lg-redesign-page .rail > .tiers, .lg-redesign-page .rail > .tier-foot, .lg-redesign-page .rail > .tier-actions, .lg-redesign-page .rail > .stats, .lg-redesign-page .rail > .law-list, .lg-redesign-page .rail > .demo, .lg-redesign-page .rail > .flow, .lg-redesign-page .rail > .api-grid, .lg-redesign-page .rail > .small, .lg-redesign-page .rail > .lede{ max-width: 1320px; margin-inline: auto; }.lg-redesign-page .head{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; text-align: left; max-width: 1320px; padding-bottom: clamp(1.6rem, 2.5vw, 2.4rem); border-bottom: 1px solid var(--rule); }.lg-redesign-page .field .head, .lg-redesign-page .field-2 .head{ border-bottom-color: var(--rule-field); }.lg-redesign-page .head .eyebrow{ justify-content: flex-start; }.lg-redesign-page .head .eyebrow::after{ content: none; }.lg-redesign-page .head .d2{ margin: 0; max-width: 22ch; font-size: clamp(2rem, 3.2vw, 3.1rem); line-height: 1.1; }.lg-redesign-page .head .lede{ margin: 0; max-width: 52ch; font-size: clamp(1.05rem, 1.25vw, 1.2rem); }.lg-redesign-page .head--line{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }.lg-redesign-page .ledger{ margin-top: 0; border-top: 0; }.lg-redesign-page .ledger-row{ grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); padding: clamp(1.5rem, 2.2vw, 2rem) 0; align-items: start; }.lg-redesign-page .ledger-n{ display: none; }.lg-redesign-page .ledger-q{ font-size: clamp(1.35rem, 1.8vw, 1.75rem); display: flex; gap: 1rem; align-items: baseline; }.lg-redesign-page .ledger-q::before{ content: counter(ledger, decimal-leading-zero); counter-increment: ledger; font-family: var(--mono); font-size: .85rem; color: var(--gate); flex: none; min-width: 2.2rem; }.lg-redesign-page .ledger{ counter-reset: ledger; }.lg-redesign-page .ledger-a{ font-size: 1.08rem; line-height: 1.6; color: var(--text); }.lg-redesign-page .field .ledger-a, .lg-redesign-page .field-2 .ledger-a{ color: var(--on-field-soft); }.lg-redesign-page .feats{ margin-top: 0; }.lg-redesign-page .feat:first-child{ border-top: 0; }
@media (max-width: 900px) {.lg-redesign-page .head, .lg-redesign-page .head--line{ grid-template-columns: 1fr; gap: 1rem; align-items: start; }.lg-redesign-page .head .d2{ max-width: none; }.lg-redesign-page .ledger-row{ grid-template-columns: 1fr; gap: .6rem; }.lg-redesign-page .ledger-q{ font-size: 1.3rem; }
}
/* A ledger inside a half-width column (the API page) stacks each row: title above its text */.lg-redesign-page .api-grid .ledger-row{ grid-template-columns: 1fr; gap: .5rem; padding: 1.4rem 0; }.lg-redesign-page .api-grid .ledger-q{ font-size: 1.3rem; }.lg-redesign-page .api-grid .ledger-a{ font-size: 1rem; }

/* ── The OneTrust pass (2026-10-07): one bold sans, flat blocks, screens in panels ───────────
   Headings are the body face set heavy; eyebrows lose their rules and mono; buttons are pills;
   every product screen sits inside a soft grey panel with air around it; cards are flat. */.lg-redesign-page{ --display: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; }.lg-redesign-page h1, .lg-redesign-page h2, .lg-redesign-page h3, .lg-redesign-page h4, .lg-redesign-page .d1, .lg-redesign-page .d2, .lg-redesign-page .d3, .lg-redesign-page .d4, .lg-redesign-page .ledger-q, .lg-redesign-page .stat-n, .lg-redesign-page .tier-amt, .lg-redesign-page .intel-n, .lg-redesign-page .verdict, .lg-redesign-page .quote p, .lg-redesign-page .flow-h{
  font-family: var(--sans) !important; font-weight: 700 !important; letter-spacing: -.025em; font-style: normal;
}.lg-redesign-page .d1{ font-size: clamp(2.6rem, 4.6vw, 4.2rem); line-height: 1.04; }.lg-redesign-page .d2{ font-size: clamp(2rem, 3.1vw, 2.9rem); line-height: 1.08; }.lg-redesign-page .d3{ font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.18; letter-spacing: -.02em; }.lg-redesign-page .d4{ font-size: clamp(1.1rem, 1.3vw, 1.25rem); line-height: 1.3; letter-spacing: -.012em; }.lg-redesign-page .hero--split h1, .lg-redesign-page .hero--home h1{ font-size: clamp(2.4rem, 3.9vw, 3.7rem); max-width: 16ch; }.lg-redesign-page .head .d2{ max-width: 22ch; font-size: clamp(1.9rem, 2.9vw, 2.7rem); }.lg-redesign-page .ledger-q{ font-size: clamp(1.2rem, 1.5vw, 1.4rem); font-weight: 650; }.lg-redesign-page .stat-n, .lg-redesign-page .intel-n, .lg-redesign-page .tier-amt{ font-weight: 700; letter-spacing: -.03em; }

/* Eyebrows: a small bold label, no rule, no mono */.lg-redesign-page .eyebrow{ font-family: var(--sans); font-weight: 700; font-size: .78rem; letter-spacing: .08em; color: var(--text-mute); }.lg-redesign-page .eyebrow::before, .lg-redesign-page .eyebrow::after, .lg-redesign-page .head .eyebrow::after, .lg-redesign-page .tour-head .eyebrow::after, .lg-redesign-page .turn .eyebrow::after, .lg-redesign-page .band-t .rail > .eyebrow::after, .lg-redesign-page .hero .eyebrow::after{ content: none !important; display: none; }.lg-redesign-page .field .eyebrow, .lg-redesign-page .field-2 .eyebrow, .lg-redesign-page .hero .eyebrow{ color: rgba(244,246,248,.72); }.lg-redesign-page .hero:not(.hero--lead) .eyebrow{ color: var(--text-mute); }.lg-redesign-page .card-k, .lg-redesign-page .tier-k, .lg-redesign-page .stat-l, .lg-redesign-page .intel-l, .lg-redesign-page .hero-foot .k, .lg-redesign-page .intel-asof .k, .lg-redesign-page .foot h4, .lg-redesign-page .law-j, .lg-redesign-page .field-l{
  font-family: var(--sans); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem;
}

/* Buttons: pills */.lg-redesign-page .btn, .lg-redesign-page .nav-act .btn, .lg-redesign-page .tier .btn{ border-radius: 999px; padding: .85rem 1.5rem; font-weight: 650; }.lg-redesign-page .btn-primary, .lg-redesign-page .hero--lead .btn-primary{ background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: none; }.lg-redesign-page .btn-ghost{ background: transparent; border: 1px solid #C7CFD5; color: var(--navy); }.lg-redesign-page .field .btn-primary, .lg-redesign-page .field-2 .btn-primary, .lg-redesign-page .hero .btn-primary{ background: #fff; border-color: #fff; color: var(--navy); }.lg-redesign-page .field .btn-ghost, .lg-redesign-page .field-2 .btn-ghost, .lg-redesign-page .hero .btn-ghost{ border-color: rgba(255,255,255,.55); color: #fff; }.lg-redesign-page .hero:not(.hero--lead) .btn-primary{ background: var(--navy); border-color: var(--navy); color: #fff; }.lg-redesign-page .hero:not(.hero--lead) .btn-ghost{ border-color: #C7CFD5; color: var(--navy); background: #fff; }

/* Product screens sit in a soft panel, flat, with air */.lg-redesign-page .feat-frame, .lg-redesign-page .hero-shot, .lg-redesign-page .tour-stage, .lg-redesign-page .demo-stage{
  background: #F3F6F8; border: 0; border-radius: 16px; box-shadow: none; padding: clamp(1rem, 2vw, 1.75rem);
}.lg-redesign-page .feat-frame img, .lg-redesign-page .hero-shot img{ border-radius: 8px; border: 1px solid var(--rule); background: #fff; }.lg-redesign-page .hero .hero-shot{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }.lg-redesign-page .hero .hero-shot img{ border-color: rgba(255,255,255,.2); }.lg-redesign-page .feat{ padding-block: clamp(3rem, 5.5vw, 5.5rem); border-top: 0; }.lg-redesign-page .feat:last-child{ border-bottom: 0; }.lg-redesign-page .feat-list li::before{ background: var(--navy); }.lg-redesign-page .feat-p{ font-size: 1.08rem; color: var(--text); }

/* Cards: flat, bordered, no lift */.lg-redesign-page .card{ box-shadow: none; border-radius: 12px; border: 1px solid var(--rule); }.lg-redesign-page .card:hover{ transform: none; box-shadow: none; border-color: #B7C0C8; }.lg-redesign-page .tiers{ box-shadow: none; }.lg-redesign-page .notice{ border-left: 0; background: #F3F6F8; padding: 1.4rem 1.6rem; }

/* Section rhythm */.lg-redesign-page .band{ padding-block: clamp(5rem, 8vw, 8.5rem); }.lg-redesign-page .head{ padding-bottom: clamp(1.4rem, 2vw, 2rem); }.lg-redesign-page .head .lede{ font-size: 1.1rem; color: var(--text); }

/* Header actions: a quiet Log in, an outlined Request a demo, a navy Start free; all pills */.lg-redesign-page .nav-act{ gap: .7rem; }.lg-redesign-page .nav-act .btn{ padding: .62rem 1.15rem; font-size: .92rem; border-radius: 999px; }.lg-redesign-page .nav-act .nav-demo{ background: transparent; border: 1px solid #B7C0C8; color: var(--navy); }.lg-redesign-page .nav-act .nav-demo:hover{ border-color: var(--navy); }.lg-redesign-page .nav-act .quiet{ margin-right: .4rem; }
@media (max-width: 1180px) {.lg-redesign-page .nav-act .nav-demo{ display: none; } }.lg-redesign-page .drawer-panel .btn{ margin-top: .6rem; }

/* The host app's own stylesheet also colours .eyebrow, as it did the heading face; override it the same way */.lg-redesign-page .eyebrow, .lg-redesign-page .head .eyebrow, .lg-redesign-page .feat-text .eyebrow{ color: var(--text-mute) !important; }.lg-redesign-page .hero .eyebrow, .lg-redesign-page .field .eyebrow, .lg-redesign-page .field-2 .eyebrow, .lg-redesign-page .foot .eyebrow{ color: rgba(244,246,248,.72) !important; }.lg-redesign-page .hero:not(.hero--lead) .eyebrow{ color: var(--text-mute) !important; }

/* Worked-example pages: a practitioner's question on the left, the determination's answer on the right */.lg-redesign-page .asks{ border-top: 1px solid var(--rule); }.lg-redesign-page .ask{ display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 5rem); padding: clamp(2rem, 3vw, 3rem) 0; border-bottom: 1px solid var(--rule); align-items: start; }.lg-redesign-page .ask-q{ display: flex; gap: 1rem; align-items: baseline; }.lg-redesign-page .ask-n{ font-size: .85rem; font-weight: 700; color: var(--gate); min-width: 2.2rem; }.lg-redesign-page .ask-q h3{ font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.2; margin: 0; max-width: 20ch; }.lg-redesign-page .ask-a p{ margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.6; color: var(--text); }.lg-redesign-page .ob-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }.lg-redesign-page .ob-list li{ background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--gate); border-radius: 8px; padding: .75rem .95rem; display: grid; gap: .2rem; }.lg-redesign-page .ob-t{ font-size: .95rem; line-height: 1.45; color: var(--navy); }.lg-redesign-page .ob-l{ font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); }.lg-redesign-page .paper-2 .ob-list li{ background: #fff; }.lg-redesign-page .cmp-table{ width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }.lg-redesign-page .cmp-table th, .lg-redesign-page .cmp-table td{ text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule); vertical-align: top; font-size: .98rem; line-height: 1.5; }.lg-redesign-page .cmp-table thead th{ font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-mute); background: #F3F6F8; }.lg-redesign-page .cmp-table tbody th{ font-weight: 650; color: var(--navy); width: 26%; }.lg-redesign-page .cmp-table tr:last-child td, .lg-redesign-page .cmp-table tr:last-child th{ border-bottom: 0; }
@media (max-width: 900px) {.lg-redesign-page .ask{ grid-template-columns: 1fr; gap: 1rem; }.lg-redesign-page .cmp-table thead{ display: none; }.lg-redesign-page .cmp-table tr{ display: grid; }.lg-redesign-page .cmp-table th, .lg-redesign-page .cmp-table td{ border-bottom: 0; padding: .5rem 1rem; }.lg-redesign-page .cmp-table tr{ border-bottom: 1px solid var(--rule); padding: .5rem 0; }
}.lg-redesign-page .ob-list li{ grid-template-columns: 1fr; }.lg-redesign-page .ob-c{ font-family: var(--mono); font-size: .74rem; color: var(--text-soft); letter-spacing: 0; }.lg-redesign-page .ob-when{ display: inline-block; margin-left: .5rem; font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--brass-deep); }

/* The guided tour: a card over the screen, a leader line to the element in use, a hold to read it */.lg-redesign-page .player-screen{ overflow: hidden; }.lg-redesign-page .player-pointer{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .3s ease; }.lg-redesign-page .player-pointer line{ stroke: var(--gate); stroke-width: 3px; stroke-dasharray: 6 5; }.lg-redesign-page .player-target{ position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: rgba(10,111,54,.2); box-shadow: 0 0 0 3px var(--gate), 0 0 0 9px rgba(10,111,54,.2); opacity: 0; transition: opacity .3s ease; pointer-events: none; }.lg-redesign-page .player.is-reading .player-pointer, .lg-redesign-page .player.is-reading .player-target{ opacity: 1; }.lg-redesign-page .player.is-reading .player-screen video{ filter: saturate(.9) brightness(.92); }.lg-redesign-page .player-callout{
  position: absolute; width: min(470px, 54%); max-width: calc(100% - 2rem); padding: 1.5rem 1.7rem 1.35rem; margin: 0;
  background: #EEF8F2; color: var(--navy); border-radius: 14px; border: 2px solid var(--gate);
  box-shadow: 0 2px 4px rgba(4,26,53,.08), 0 30px 70px -24px rgba(4,26,53,.6);
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; z-index: 2;
}.lg-redesign-page .player-callout[hidden]{ display: block; }.lg-redesign-page .player.is-reading .player-callout{ opacity: 1; transform: none; pointer-events: auto; }.lg-redesign-page .callout-k{ display: block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gate); margin-bottom: .4rem; }.lg-redesign-page .callout-t{ margin: 0 0 .55rem; font-size: 1.4rem; line-height: 1.25; }.lg-redesign-page .callout-p{ margin: 0; font-size: 1.1rem; line-height: 1.55; color: var(--navy); }.lg-redesign-page .callout-foot{ display: flex; align-items: center; gap: .9rem; margin-top: 1.1rem; }.lg-redesign-page .callout-bar{ flex: 1; height: 3px; background: #C5DFD0; overflow: hidden; }.lg-redesign-page .callout-bar i{ display: block; height: 100%; width: 0; background: var(--gate); }.lg-redesign-page .callout-go{ border: 0; border-radius: 999px; background: var(--gate); color: #fff; font-family: var(--sans); font-size: .95rem; font-weight: 650; padding: .6rem 1.2rem; cursor: pointer; }.lg-redesign-page .callout-go:hover{ background: var(--gate-mid); }
/* On a phone the picture is too short to carry a card, so the card sits under the picture, inside the frame. */
@media (max-width: 700px) {.lg-redesign-page .player-screen{ aspect-ratio: auto !important; }.lg-redesign-page .player-screen video{ position: static; inset: auto; display: block; width: 100%; height: auto; aspect-ratio: 1920 / 1200; }.lg-redesign-page .player-callout{ position: relative; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto; max-width: none; margin: .75rem; min-height: 20rem; padding: 1.1rem 1.2rem 1.05rem; box-sizing: border-box; display: none; }.lg-redesign-page .player.is-started .player-callout{ display: block; }.lg-redesign-page .callout-t{ font-size: 1.2rem; }.lg-redesign-page .callout-p{ font-size: 1.02rem; }.lg-redesign-page .player-pointer, .lg-redesign-page .player-target{ display: none; }
}
@media (prefers-reduced-motion: reduce) {.lg-redesign-page .player-callout, .lg-redesign-page .player-pointer, .lg-redesign-page .player-target{ transition: none; } }