/* Public pages (/about, /methodology): the stratanova.io marketing language, so Strata Thesis reads as part of the
   same site. Tokens are stratanova.io's (my_flask_app/templates/landing.html, Nov 2026 redesign). Paper and white sections
   alternate with navy; Cormorant Garamond for h1 and h2; 10px corners on cards, 6px on buttons; hairlines, no card
   shadows. Mono for eyebrows and the hero stats, as on the homepage; other numbers are sans tabular, weight 500. The app shell
   (chrome.css) is not loaded on these pages. */
.lp {
  --m-cream: #f4f6f9; --m-white: #fff; --m-navy: #0e1a2b; --m-navy2: #132238;
  --m-teal: #2f6b7a; --m-teal-b: #3d7a8a; --m-teal-l: #8cc9d6; --m-ink: #14223a; --m-mid: #4f5f78; --m-muted: #5b6b82; --m-border: #dde3ea;
  --on-navy: rgba(255,255,255,.74); --on-navy-2: rgba(255,255,255,.58); --on-navy-rule: rgba(255,255,255,.12);
  --m-serif: 'Cormorant Garamond', Georgia, serif; --m-mono: 'IBM Plex Mono', ui-monospace, monospace; --m-r: 10px;
  --m-pad: 24px; --m-top: 68px;
  background: var(--m-cream); color: var(--m-ink); font-family: var(--sans); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; padding-left: 0;
}
html { scroll-behavior: smooth; }
.lp main b, .lp main .num { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.lp a { color: var(--m-teal); }
.lp-in { max-width: var(--m-wide, 1248px); margin: 0 auto; padding: 0 var(--m-pad); min-width: 0; }
.nowrap { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lp-skip { position: absolute; left: -9999px; top: 8px; z-index: 300; background: var(--m-white); color: var(--m-ink); padding: 8px 14px; border-radius: var(--m-r); }
.lp-skip:focus { left: 12px; }
[id] { scroll-margin-top: calc(var(--m-top) + 12px); }

/* ── nav: fixed, navy ── */
.lp-top { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--m-top); background: var(--m-navy); border-bottom: 1px solid #22364f; }
.lp-top-in { height: 100%; display: flex; align-items: center; gap: 24px; padding: 0 var(--m-pad); max-width: var(--m-wide, 1248px); margin: 0 auto; }
.lp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #eef3f7 !important; flex-shrink: 0; }
.lp-logo img { display: block; }
.lp-logo span { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.lp-logo em { font-style: normal; color: var(--m-teal-l); }
.lp-logo i { width: 1px; height: 18px; background: #34506f; }
.lp-logo b { font-size: 12px; font-weight: 400; font-family: var(--m-mono); letter-spacing: .1em; text-transform: uppercase; color: #a8b8c4; }
.lp-nav { flex: 1; display: flex; justify-content: center; gap: clamp(26px, 3vw, 52px); min-width: 0; }
.lp-nav a { font-size: 14px; font-weight: 500; color: #c9d5de; text-decoration: none; white-space: nowrap; transition: color .2s; }
.lp-nav a:hover { color: #fff; }
.lp-top-r { display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; }
.lp-bld-act { margin-top: 14px; }
.lp-nav-ghost, .lp-nav-btn { font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: 6px; text-decoration: none; white-space: nowrap; transition: background .2s, border-color .2s; }
.lp-nav-ghost { color: #eef3f7 !important; border: 1px solid #34506f; }
.lp-nav-ghost:hover { border-color: var(--m-teal-l); }
.lp-nav-btn { background: var(--m-teal-b); color: var(--m-white) !important; border: 1px solid var(--m-teal-b); }
.lp-nav-btn:hover { background: var(--m-teal); border-color: var(--m-teal); }

/* ── shared type: mono eyebrow, serif h2, one-measure subs ── */
.lp-eye { display: block; font-family: var(--m-mono); font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--m-teal); margin-bottom: 14px; }
.lp-eye::before { content: none; }
.lp h2 { font-family: var(--m-serif); font-size: clamp(30px, 3.4vw, 42px); font-weight: 500; line-height: 1.1; letter-spacing: -.005em; color: var(--m-ink); margin: 0 0 20px; text-transform: none; text-wrap: balance; }
.lp h2 em { color: inherit; font-style: normal; }
.lp h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--m-ink); margin: 0; }
.lp-sub { font-size: 16px; line-height: 1.72; color: var(--m-mid); max-width: 62ch; margin: 0 0 14px; text-wrap: pretty; }
.lp-sub-w { max-width: 78ch; }
.lp-note { font-size: 13px; color: var(--m-muted); margin-top: 8px; }
.lp p, .lp li { text-wrap: pretty; }

/* ── sections ── */
.lp-sec { padding: 88px 0; }
.lp-white { background: var(--m-white); }
.lp-cream { background: var(--m-cream); }
.lp-navy { background: var(--m-navy); color: var(--m-white); }
.lp-navy h2 { color: var(--m-white); }
.lp-navy .lp-eye { color: var(--m-teal-l); }
.lp-navy .lp-sub { color: var(--on-navy); }
.lp-navy .lp-note { color: var(--on-navy-2); }
.lp-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }

/* ── buttons ── */
.lp-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.lp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 22px; border-radius: 6px; font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background .2s, border-color .2s; }
.lp-btn-p { background: var(--m-teal-b); color: var(--m-white) !important; }
.lp-btn-p:hover { background: var(--m-teal); }
.lp-btn-o { background: transparent; color: var(--m-white) !important; border-color: #34506f; }
.lp-btn-o:hover { border-color: var(--m-teal-l); }

/* ── hero ── */
.lp-hero { background: var(--m-navy); color: var(--m-white); padding-top: var(--m-top); }
.lp-hero-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(40px, 4vw, 72px); align-items: center; padding: clamp(48px, 7vh, 88px) 0 clamp(36px, 5vh, 56px); }
/* the hero teaser: one live figure from the six frames as a reason to scroll, in the shape of stratanova.io's
   research strip (4px corners here, not its lozenge) */
.lp-teaser em { font-style: normal; font-weight: 600; color: var(--m-teal-l); display: inline-block; transition: transform .2s; }
.lp-teaser:hover em { transform: translateY(2px); }
.lp-teaser { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px; max-width: 100%; padding: 8px 14px 8px 8px; border: 1px solid rgba(58,154,173,.45); background: rgba(58,154,173,.10); border-radius: var(--m-r); text-decoration: none; color: #e6eef3 !important; font-size: 13.5px; line-height: 1.4; transition: background .2s, border-color .2s; }
.lp-teaser:hover { background: rgba(58,154,173,.2); border-color: rgba(58,154,173,.85); }
.lp-teaser b { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--m-white); background: var(--m-teal); border-radius: 2px; padding: 4px 9px; }
.lp-teaser b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9be3c4; margin-right: 6px; vertical-align: 1px; animation: lp-pulse 2s ease-in-out infinite; }
.lp-teaser i { font-style: normal; font-weight: 600; color: var(--m-teal-l); white-space: nowrap; }
.lp-teaser i em { font-style: normal; display: inline-block; transition: transform .2s; }
.lp-teaser:hover i em { transform: translateY(2px); }
@keyframes lp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .lp-teaser b::before { animation: none; } }
/* the section right under the hero starts close, so its heading shows on the first screen */
.lp-sec.lp-first { padding-top: 44px; }
.lp-hero .lp-eyebrow { display: block; font-family: var(--m-mono); font-size: 12px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--m-teal-l); margin-bottom: 22px; }
.lp-hero .lp-eyebrow::before { content: none; }
.lp-hero h1 { font-family: var(--m-serif); font-size: clamp(36px, 4vw, 52px); font-weight: 500; line-height: 1.06; letter-spacing: -.005em; color: var(--m-white); margin: 0 0 24px; max-width: 14em; text-wrap: balance; }
.lp-hero h1 em { color: inherit; font-style: normal; }
.lp-hero-p { font-size: clamp(17px, 1.15vw, 19px); line-height: 1.6; color: var(--on-navy); max-width: 34em; margin: 0 0 36px; }
.lp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--on-navy-rule); padding: 20px 0 24px; }
.lp-stats > div { display: grid; gap: 5px; align-content: start; padding-right: 32px; }
.lp-stats > div + div { border-left: 1px solid var(--on-navy-rule); padding-left: 32px; }
.lp-stats b { font-family: var(--m-mono); font-size: 28px; font-weight: 500; color: var(--m-white); }
.lp-stats b i { font-style: normal; color: var(--m-teal-l); }
.lp-stats span { font-size: 13px; color: #a8b8c4; line-height: 1.4; }

/* the Builder, drawn in HTML: a steel-navy panel with a teal top edge, like stratanova.io's glance panel */
.lp-bld-fig { margin: 0; min-width: 0; }
.lp-bld { background: #1c3046; border: 1px solid rgba(255,255,255,.12); border-top: 3px solid var(--m-teal-l); border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px -28px rgba(0,0,0,.6); font-size: 13px; color: var(--m-white); }
.lp-bld-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: #213851; border-bottom: 1px solid var(--on-navy-rule); }
.lp-bld-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-teal-l); }
.lp-bld-title { font-weight: 600; font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-bld-cap { margin-left: auto; font-size: 12px; color: var(--on-navy-2); white-space: nowrap; }
.lp-bld-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.lp-bld-grid section { padding: 16px 20px 18px; display: grid; gap: 8px; align-content: start; border-right: 1px solid var(--on-navy-rule); border-bottom: 1px solid var(--on-navy-rule); min-width: 0; }
.lp-bld-grid section:nth-child(2n) { border-right: 0; }
.lp-bld-grid section:nth-child(n+3) { border-bottom: 0; }
.lp-bld-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lp-bld-h span { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-white); }
.lp-bld-h em { font-style: normal; font-size: 12px; color: var(--on-navy-2); white-space: nowrap; }
.lp-bld-clause { background: rgba(13,27,42,.45); border-left: 2px solid var(--m-teal-l); border-radius: 0 4px 4px 0; padding: 10px 12px; display: grid; gap: 6px; }
.lp-bld-l { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-navy-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-bld-sel, .lp-bld-in { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 3px; padding: 6px 9px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; color: var(--m-white); }
.lp-bld-sel { padding-right: 24px; }
.lp-bld-sel::after { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--on-navy-2); border-bottom: 1.5px solid var(--on-navy-2); transform: translateY(-70%) rotate(45deg); }
.lp-bld-in.r { text-align: right; } .lp-bld-in.ph { color: var(--on-navy-2); }
.lp-bld-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lp-bld-two > div { display: grid; gap: 4px; min-width: 0; }
.lp-bld-pair { display: grid; gap: 5px; }
.lp-bld-chip { justify-self: start; border: 1px dashed rgba(58,154,173,.6); color: var(--m-teal-l); border-radius: 3px; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.lp-bld-fn { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px 28px; gap: 8px; align-items: center; font-size: 12.5px; color: var(--on-navy); }
.lp-bld-fn i { display: block; height: 4px; border-radius: 1px; background: rgba(255,255,255,.3); }
.lp-bld-fn.first i { background: var(--m-teal-l); }
.lp-bld-fn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-bld-fn b { text-align: right; font-weight: 500; color: var(--m-white); }
.lp-bld-fn b.neg { color: #e3a59d; }
.lp-bld-fig figcaption { font-size: 13px; color: var(--on-navy-2); margin-top: 12px; line-height: 1.5; }

/* ── the record ── */
.lp-figs-k { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); margin-bottom: 14px; padding-top: 6px; }
.lp-figs { border-top: 1px solid var(--m-border); }
.lp-figs > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--m-border); }
.lp-figs b { font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -.025em; color: var(--m-ink); }
.lp-figs span { font-size: 15px; line-height: 1.55; color: var(--m-mid); }
.lp-src { font-size: 12.5px; color: var(--m-muted); margin-top: 14px; line-height: 1.5; }

/* ── cards: hairline, 4px, white on cream and cream on white ── */
.lp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.lp-card { background: var(--m-white); border: 1px solid var(--m-border); border-radius: var(--m-r); padding: 24px; display: grid; gap: 10px; align-content: start; }
.lp-white .lp-card { background: var(--m-cream); }
.lp-card p { font-size: 15px; line-height: 1.6; color: var(--m-mid); margin: 0; }
.lp-tag { justify-self: start; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-teal); background: rgba(45,125,140,.08); border-radius: 2px; padding: 3px 8px; }
.lp-wf-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-teal); }

/* ── how it works: two columns of numbered rows ── */
.lp-wf { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.lp-wf li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid var(--m-border); }
.lp-n { font-size: 15px; font-weight: 500; color: var(--m-teal); padding-top: 2px; }
.lp-wf h3 { font-size: 20px; margin: 4px 0 6px; }
.lp-wf p { font-size: 15.5px; line-height: 1.6; color: var(--m-mid); margin: 0; }
/* feature bullets: a short teal rule, no dots; hairline-quiet so the step titles still lead */
.lp-wf-ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.lp-wf .lp-wf-ul li { display: block; position: relative; padding: 0 0 0 20px; border: 0; font-size: 14.5px; line-height: 1.5; color: var(--m-ink); }
.lp-wf-ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--m-teal); }

/* ── how it works: one thesis in six frames. A label, one big live figure, one line, one small drawing each:
   readable in ten seconds. Frames sit on one hairline-ruled row (3x2 under 1200px, 2x3 under 900, 1 under 560). ── */
.lp-flow6 { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--m-ink); counter-reset: none; }
.lp-flow6 > li { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 20px 20px 22px 0; min-width: 0; position: relative; }
.lp-flow6 > li + li { padding-left: 20px; border-left: 1px solid var(--m-border); }
.lp-flow6 > li:nth-child(4) { border-left: 0; padding-left: 0; }
.lp-flow6 > li:nth-child(n+4) { border-top: 1px solid var(--m-border); }
.lp-f-k { display: flex; align-items: baseline; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-teal); }
.lp-f-k span { color: var(--m-muted); letter-spacing: .04em; }
.lp-f-big { font-size: clamp(24px, 2vw, 31px); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; color: var(--m-ink); white-space: nowrap; }
.lp-f-big em { font-style: normal; color: var(--m-muted); font-weight: 400; font-size: .7em; margin: 0 2px; }
.lp-flow6 p { font-size: 13.5px; line-height: 1.5; color: var(--m-mid); margin: 0; }
.lp-f-viz { margin-top: 10px; min-height: 64px; display: grid; gap: 5px; align-content: end; }
/* 01 status of every theme, this one marked */
.lp-f-status { display: flex; gap: 2px; height: 10px; }
.lp-f-status i { display: block; background: var(--m-border); border-radius: 1px; }
.lp-f-status i.ws { background: #a6d9e3; }
.lp-f-status i.on { background: var(--m-ink); }
.lp-f-cap { font-size: 12px; color: var(--m-muted); } .lp-f-cap b { color: var(--m-ink); font-weight: 600; }
/* 02 the funnel */
.lp-f-bar { height: 8px; background: var(--m-cream); border-radius: 1px; }
.lp-f-bar i { display: block; height: 100%; background: var(--m-border); border-radius: 1px; }
.lp-f-bar:first-child i { background: var(--m-teal-l); } .lp-f-bar:last-child i { background: var(--m-teal); }
/* 03 purity: the thesis against the closest funds */
.lp-f-pb { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 11.5px; color: var(--m-muted); }
.lp-f-pb i { display: block; height: 8px; background: var(--m-border); border-radius: 1px; }
.lp-f-pb.us { color: var(--m-ink); font-weight: 600; } .lp-f-pb.us i { background: var(--m-teal); }
/* 03 the basket against the closest funds */
.lp-f-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.lp-f-tbl th { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--m-muted); text-align: right; padding: 0 0 4px 6px; line-height: 1.2; vertical-align: bottom; }
.lp-f-tbl td { text-align: right; padding: 3px 0 3px 6px; border-top: 1px solid var(--m-cream); color: var(--m-mid); white-space: nowrap; }
.lp-f-tbl td:first-child, .lp-f-tbl th:first-child { text-align: left; padding-left: 0; }
.lp-f-tbl tr.us td { color: var(--m-teal); font-weight: 600; border-top: 0; }
/* 04 one dot per 2% of RIAs */
.lp-f-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 150px; }
.lp-f-dots i { aspect-ratio: 1; border-radius: 50%; background: var(--m-border); }
.lp-f-dots i.on { background: var(--m-teal); }
/* 05 pass and fail */
.lp-f-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lp-f-chips span { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 2px; }
.lp-f-chips .ok { background: rgba(45,125,140,.1); color: var(--m-teal); }
.lp-f-chips .no { background: rgba(196,103,94,.12); color: #a24b43; }
/* 06 the files */
.lp-f-files { display: grid; gap: 5px; }
.lp-f-files span { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--m-ink); }
.lp-f-files b { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: var(--m-white); background: var(--m-navy2); border-radius: 2px; padding: 2px 5px; min-width: 30px; text-align: center; }
/* everything in it: one strip of tags */
.lp-caps { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--m-border); display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; align-items: start; }
.lp-caps-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-muted); padding-top: 6px; }
.lp-caps ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-caps li { font-size: 13px; color: var(--m-ink); background: var(--m-cream); border: 1px solid var(--m-border); border-radius: 3px; padding: 4px 10px; }
@media (max-width: 1200px) {
  .lp-flow6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-flow6 > li:nth-child(4) { border-left: 0; padding-left: 0; }
  .lp-flow6 > li:nth-child(n+4) { border-top: 1px solid var(--m-border); }
}
@media (max-width: 900px) {
  .lp-flow6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-flow6 > li:nth-child(n) { border-left: 1px solid var(--m-border); padding-left: 20px; border-top: 0; }
  .lp-flow6 > li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .lp-flow6 > li:nth-child(n+3) { border-top: 1px solid var(--m-border); }
  .lp-caps { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 560px) {
  .lp-flow6 { grid-template-columns: minmax(0, 1fr); }
  .lp-flow6 > li:nth-child(n) { border-left: 0; padding-left: 0; }
  .lp-flow6 > li:nth-child(n+2) { border-top: 1px solid var(--m-border); }
}

/* ── advisor demand: four live figures on navy ── */
.lp-adopt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--on-navy-rule); }
.lp-adopt > div { display: grid; gap: 8px; align-content: start; padding: 24px 24px 26px 0; border-bottom: 1px solid var(--on-navy-rule); }
.lp-adopt > div:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--on-navy-rule); }
.lp-adopt b { font-size: 34px; font-weight: 500; letter-spacing: -.02em; line-height: 1.05; color: var(--m-white); }
.lp-adopt span { font-size: 14px; line-height: 1.55; color: var(--on-navy); }

/* ── compared ── */
.lp-cmp-wrap { margin-top: 36px; border: 1px solid var(--m-border); border-radius: var(--m-r); overflow: hidden; }
.lp-cmp { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--m-white); }
.lp-cmp th { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--m-border); background: var(--m-cream); }
.lp-cmp td { padding: 16px 20px; border-bottom: 1px solid var(--m-border); vertical-align: top; text-align: left; line-height: 1.55; color: var(--m-mid); }
.lp-cmp tr:last-child td { border-bottom: 0; }
.lp-cmp td:first-child { width: 24%; color: var(--m-ink); } .lp-cmp td:nth-child(2) { width: 40%; }
.lp-cmp td:first-child span { display: block; font-size: 13px; color: var(--m-muted); margin-top: 2px; }
.lp-cmp-us td { background: #f0f6f7; color: var(--m-ink); }
.lp-cmp-us td:first-child b { color: var(--m-teal); }
.lp-cmp-plain td:first-child { width: 20%; }
.lp-cmp-after { margin-top: 16px; font-size: 14.5px; color: var(--m-mid); }

/* ── method: one root, three readers ── */
.lp-tree { margin-top: 36px; display: grid; justify-items: center; }
.lp-root { width: min(100%, 760px); text-align: center; display: grid; gap: 8px; position: relative; background: var(--m-navy2); color: var(--m-white); border-radius: var(--m-r); padding: 22px 28px; }
.lp-root-k { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--m-teal-l); }
.lp-root-n { font-size: 14.5px; line-height: 1.55; color: var(--on-navy); }
.lp-root::after { content: ""; position: absolute; left: 50%; bottom: -28px; width: 1px; height: 28px; background: var(--m-border); }
.lp-branches { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; position: relative; padding-top: 18px; }
.lp-branches::before { content: ""; position: absolute; top: 0; left: calc(100% / 6); right: calc(100% / 6); height: 1px; background: var(--m-border); }
.lp-branches > .lp-card { position: relative; }
.lp-branches > .lp-card::before { content: ""; position: absolute; top: -18px; left: 50%; width: 1px; height: 18px; background: var(--m-border); }
.lp-more { margin-top: 28px; font-size: 15px; font-weight: 600; }
.lp-more a { text-decoration: none; }
.lp-more a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* bands for custom theme estimates (shared names with the app) */
.lp .band { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 2px; padding: 1px 7px; border: 1px solid var(--m-teal); }
.lp .band-core { background: var(--m-teal); color: var(--m-white); }
.lp .band-significant { color: var(--m-teal); background: transparent; }
.lp .band-moderate { color: var(--m-mid); border-color: var(--m-border); background: transparent; }

/* ── FAQ ── */
.lp-h2-gap { margin-top: 80px !important; }
.lp-faq { border-top: 1px solid var(--m-border); max-width: 980px; }
.lp-faq details { border-bottom: 1px solid var(--m-border); }
.lp-faq summary { cursor: pointer; padding: 20px 0; font-size: 17px; font-weight: 600; color: var(--m-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 24px; font-weight: 400; line-height: 1; color: var(--m-teal); width: 24px; text-align: center; flex-shrink: 0; transition: transform .15s; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq p { font-size: 15.5px; line-height: 1.7; color: var(--m-mid); padding: 0 0 20px; max-width: 78ch; margin: 0; }

/* ── booking ── */
.lp-cal { margin-top: 32px; position: relative; min-height: 640px; }
.lp-cal-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--m-muted); font-size: 15px; background: var(--m-cream); border-radius: var(--m-r); }
.lp-cal > div:last-child { position: relative; width: 100%; min-height: 640px; }
.lp-cal-alt { display: none; align-items: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.lp .psub { font-size: 14px; line-height: 1.55; color: var(--m-muted); }
.lp-cal-fallback { margin-top: 12px; }

/* ── close and footer: navy ── */
.lp-close { background: var(--m-navy); color: var(--m-white); padding: 100px 0; text-align: center; }
.lp-close .lp-eye { justify-content: center; color: var(--m-teal-l); }
.lp-close h2 { color: var(--m-white); max-width: 22em; margin: 0 auto 36px; }
.lp-close h2 em { color: inherit; }
.lp-close .lp-cta { justify-content: center; }
.lp-foot { background: #0b1524; color: #a8b8c4; padding: 36px 0 40px; border-top: 1px solid #1c2f47; font-size: 12.5px; }
.lp-foot .lp-in { display: grid; gap: 14px; }
.lp-foot-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; }
.lp-foot-logo { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); }
.lp-foot-logo em { font-style: normal; color: var(--m-teal-l); }
.lp-foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
.lp-foot a { color: #c9d5de; text-decoration: none; }
.lp-foot a:hover { color: var(--m-white); }
.lp-foot-dates { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.lp-foot-legal { font-size: 12px; line-height: 1.6; color: #8fa3b3; max-width: 110ch; margin: 0; }

/* ── request access modal: the app's modal and form classes, in the site's colours ── */
.lp .modal { font: 14px/1.45 var(--sans); color: var(--m-ink); z-index: 301; padding: 24px 26px; border-radius: 6px; }
.lp .modal-scrim { background: rgba(10,20,35,.58); z-index: 300; }
.lp .modal .btn.teal { background: var(--m-teal); border-color: var(--m-teal); color: var(--m-white); }
.lp .modal .btn.teal:hover { background: var(--m-teal-l); }
.lp .modal .btn.quiet { color: var(--m-teal); }
.ac-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the modal is a form, not a section: its title at form size, and the "optional" notes at label size so paired
   fields line up (the page's .psub and h2 sizes otherwise reach in) */
.lp .modal h2 { font-size: 22px; line-height: 1.25; letter-spacing: -.01em; margin: 0; }
.lp .modal .fld label .psub { font-size: 11px; line-height: inherit; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--m-muted); margin: 0; }
.lp .modal .req-two { align-items: end; }
#ac-err a { font-weight: 600; }

/* ── methodology page ── */
.lp-page-head { background: var(--m-navy); color: var(--m-white); padding: calc(var(--m-top) + 72px) 0 72px; }
.lp-page-head .lp-eye { color: var(--m-teal-l); }
.lp-page-head .lp-eye a { color: inherit; text-decoration: none; }
.lp-page-head h1 { font-family: var(--m-serif); font-size: clamp(42px, 4.2vw, 68px); font-weight: 500; line-height: 1.04; letter-spacing: -.015em; margin: 0 0 22px; max-width: 14em; }
.lp-page-head .lp-sub { color: var(--on-navy); max-width: 70ch; }
.lp-method { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lp-method li { background: var(--m-cream); border: 1px solid var(--m-border); border-radius: var(--m-r); padding: 24px; display: grid; gap: 10px; align-content: start; }
.lp-method p { font-size: 15px; line-height: 1.65; color: var(--m-mid); margin: 0; }
.lp-body { font-size: 15.5px; line-height: 1.65; color: var(--m-mid); margin-top: 20px; }

/* ── responsive ── */
@media (min-width: 1600px) {
  .lp { --m-wide: 1528px; }
  .lp-nav a { font-size: 15px; }
  .lp-hero h1 { font-size: 62px; }
  .lp h2 { font-size: 50px; }
  .lp-hero-p { font-size: 20px; }
}
@media (min-width: 1900px) {
  .lp { --m-wide: 1728px; }
  .lp-hero h1 { font-size: 68px; }
  .lp h2 { font-size: 54px; }
}
@media (max-width: 1180px) { .lp-nav { gap: 22px; } .lp-nav a { font-size: 13.5px; } }
@media (max-width: 1060px) {
  .lp-nav { display: none; }
  .lp-hero-top, .lp-split { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lp-method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .lp { --m-pad: 24px; }
  .lp-sec { padding: 64px 0; }
  .lp-grid3, .lp-branches { grid-template-columns: minmax(0, 1fr); }
  .lp-branches::before, .lp-branches > .lp-card::before, .lp-root::after { display: none; }
  .lp-branches { margin-top: 16px; padding-top: 0; }
  .lp-wf { grid-template-columns: minmax(0, 1fr); }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .lp-stats > div:nth-child(n+3) { padding-top: 18px; }
}
@media (max-width: 700px) {
  .lp { --m-pad: 16px; }
  /* the Builder is the page's strongest thing: bring it onto the first screen */
  .lp-teaser { display: none; }
  .lp-hero-top { padding: 22px 0 28px; gap: 18px; }
  .lp-hero .lp-eyebrow { font-size: 10.5px; letter-spacing: .05em; margin-bottom: 12px; }
  .lp-hero h1 { margin-bottom: 12px; }
  .lp-hero-p { font-size: 15.5px; line-height: 1.5; margin-bottom: 0; }
  .lp-top-r .lp-nav-ghost { display: none; }
  .lp-logo i, .lp-logo b { display: none; }
  .lp-bld-grid, .lp-adopt, .lp-method { grid-template-columns: minmax(0, 1fr); }
  .lp-bld-grid section { border-right: 0 !important; border-bottom: 1px solid var(--on-navy-rule) !important; }
  .lp-bld-grid section:last-child { border-bottom: 0 !important; }
  .lp-adopt > div:nth-child(2n) { padding-left: 0; border-left: 0; }
  .lp-figs > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .lp .modal .req-two { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lp-cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-cmp-wrap { border: 0; overflow: visible; }
  .lp-cmp, .lp-cmp tbody, .lp-cmp tr, .lp-cmp td { display: block; width: 100% !important; }
  .lp-cmp tr { border: 1px solid var(--m-border); border-radius: var(--m-r); margin-bottom: 12px; overflow: hidden; }
  .lp-cmp td { border-bottom: 0; padding: 8px 16px; }
  .lp-cmp td:not(:first-child)::before { content: attr(data-c); display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--m-muted); font-weight: 600; margin-bottom: 2px; }
  .lp-cmp tr.lp-cmp-us { border-color: var(--m-teal); }
  .lp-cal, .lp-cal-fallback { display: none; }
  .lp-cal-alt { display: flex; }
}
@media (max-width: 380px) {
  .lp-top-in { gap: 8px; }
  .lp-logo span { font-size: 15px; }
  .lp-nav-btn { font-size: 12.5px; padding: 8px 10px; }
}