@charset "UTF-8";
:root { --ink:#10203a; --ink-soft:#42506a; --ink-faint:#7b869a; --paper:#ffffff; --shade:#eef1f5; --shade-deep:#e2e8f0; --rule:#c8d2de; --archive:#1a4f8f; --archive-pale:#e7eff8; --ochre:#a96b14; --serif:"Newsreader",Georgia,"Times New Roman",serif; --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --measure:34rem; --pad:clamp(1.25rem,5vw,3rem); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.62; font-synthesis-weight: none; }

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -.012em; line-height: 1.16; }

p { margin: 0 0 1.15em; }

a { color: inherit; }

.wrap { max-width: 70rem; margin: 0 auto; padding-inline: var(--pad); }

.col { max-width: var(--measure); }

.ui { font-family: var(--sans); letter-spacing: 0; }

:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

.skip { position: absolute; left: -999px; }

.skip:focus { left: 1rem; top: 1rem; z-index: 20; background: var(--ink); color: #fff; padding: .6rem 1rem; font-family: var(--sans); font-size: .9rem; }

/* header */
.site { border-bottom: 1px solid var(--rule); }

.site .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-block: 1.1rem; }

.mark { font-family: var(--sans); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; }

.mark span { color: var(--archive); }

.nav { font-family: var(--sans); font-size: .875rem; display: flex; gap: 1.6rem; color: var(--ink-soft); }

.nav a { text-decoration: none; }

.nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* hero */
.hero { padding-block: clamp(2.5rem, 6vw, 4.25rem) 0; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.hero-main { min-width: 0; }

.eyebrow { font-family: var(--sans); font-size: .8125rem; color: var(--ink-soft); margin: 0 0 1.5rem; }

.eyebrow b { font-weight: 600; color: var(--ink); }

h1 { font-size: clamp(2.1rem, 5.4vw, 3.35rem); max-width: 19ch; text-wrap: balance; }

.answer { font-size: clamp(1.1875rem, 2.1vw, 1.375rem); line-height: 1.55; max-width: 38rem; margin-top: 1.6rem; }

.answer strong { font-weight: 600; }

/* call-to-action rail The primary conversion point, beside the answer on a wide screen and directly under it on a narrow one.  It is deliberately the only ochre-topped box on the page: the archive component is blue, the conversion bands are ink, and nothing else competes with it above the fold. */
.cta-rail { border: 1px solid var(--shade-deep); border-top: 3px solid var(--ochre); background: var(--shade); padding: 1.35rem 1.3rem 1.4rem; }

.cta-rail-h { font-family: var(--sans); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink); }

.cta-rail-d { font-family: var(--sans); font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); margin: .6rem 0 0; }

.cta-rail .btn { display: block; width: 100%; text-align: center; margin-top: 1.15rem; }

.cta-rail-sub { font-family: var(--sans); font-size: .8125rem; color: var(--ink-faint); margin: .7rem 0 0; text-align: center; }

/* seller's answer strip - no longer rendered.  scenario.html stopped emitting .states when the call to action took the top of the page; the rules are kept so that restoring the block is a template change on its own. */
.states { margin: 2.25rem 0 0; border: 1px solid var(--rule); display: flex; max-width: 38rem; font-family: var(--sans); }

.states-label { font-size: .75rem; color: var(--ink-soft); padding: .85rem 1rem; border-right: 1px solid var(--rule); align-self: center; flex: 0 0 auto; }

.state { flex: 1 1 0; font-size: .9375rem; padding: .85rem .75rem; text-align: center; border-right: 1px solid var(--rule); text-decoration: none; color: var(--ink-soft); }

.states .state:last-child { border-right: 0; }

a.state:hover { background: var(--shade); color: var(--ink); }

.state--on { background: var(--ink); color: #fff; font-weight: 500; }

.state--on::before { content: "✓"; color: #e0a94b; margin-right: .45rem; font-size: .875rem; }

.states-note { font-family: var(--sans); font-size: .8125rem; color: var(--ink-faint); margin: .65rem 0 0; max-width: 38rem; }

/* provenance marker */
.prov { margin: 2.5rem 0 0; padding: 1.05rem 1.25rem; background: var(--archive-pale); border-left: 3px solid var(--archive); max-width: 38rem; font-size: 1rem; line-height: 1.5; }

.prov p { margin: 0; }

.prov .lede { font-family: var(--sans); font-size: .8125rem; font-weight: 600; color: var(--archive); margin-bottom: .35rem; }

.prov .meta { font-family: var(--sans); font-size: .8125rem; color: var(--ink-soft); margin-top: .5rem; }

.prov .meta i { font-style: italic; font-family: var(--serif); font-size: .9375rem; }

.prov a { color: var(--archive); text-underline-offset: 3px; }

/* fork */
.fork { padding-block: clamp(2.75rem, 6vw, 4rem); }

.fork h2 { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: 1.1rem; }

.cards { display: grid; grid-template-columns: 1.25fr 1.1fr .95fr; gap: 1rem; }

/* Two cards is now the normal case - the IfIBuy card is no longer built - so the three-column track would otherwise leave a hole where it used to be. */
.cards--two { grid-template-columns: 1.2fr 1fr; }

.card { display: flex; flex-direction: column; gap: .55rem; padding: 1.4rem 1.35rem; text-decoration: none; border: 1px solid var(--rule); }

.card .t { font-size: 1.3rem; line-height: 1.2; }

.card .d { font-family: var(--sans); font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }

.card .go { font-family: var(--sans); font-size: .9375rem; font-weight: 600; margin-top: auto; padding-top: .9rem; }

.card .go em { display: block; font-style: normal; font-weight: 400; font-size: .8125rem; color: var(--ink-faint); margin-top: .15rem; }

.card--1 { background: var(--ink); border-color: var(--ink); color: #fff; }

.card--1 .d { color: #b9c4d6; }

.card--1 .go em { color: #8b99b2; }

.card--2 { background: var(--shade); border-color: var(--shade-deep); }

.card--3 { background: var(--paper); }

.card:hover { box-shadow: inset 0 0 0 2px var(--ochre); }

.card--1:hover { box-shadow: inset 0 0 0 2px #e0a94b; }

/* prose */
.prose { padding-block: 0 clamp(2.5rem, 6vw, 3.5rem); }

.prose--resume { padding-top: clamp(2.5rem, 6vw, 3.5rem); }

.prose h2 { font-size: clamp(1.55rem, 3vw, 1.95rem); max-width: 24ch; margin: 2.75rem 0 1.1rem; }

.prose h2:first-child { margin-top: 0; }

.prose p { max-width: var(--measure); }

.prose .col p:last-child { margin-bottom: 0; }

/* conversion bands */
.band { padding-block: clamp(2.5rem, 6vw, 3.75rem); }

.wib { background: var(--ink); color: #fff; }

.wib h2 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); max-width: 20ch; }

.wib p { color: #c3cdde; max-width: 36rem; margin-top: 1rem; font-size: 1.125rem; }

.ifb { background: var(--shade); border-block: 1px solid var(--shade-deep); }

.ifb h2 { font-size: clamp(1.4rem, 2.6vw, 1.75rem); }

.ifb p { max-width: 36rem; margin-top: .8rem; font-size: 1.0625rem; }

.btn { display: inline-block; font-family: var(--sans); font-size: 1rem; font-weight: 600; text-decoration: none; padding: .85rem 1.3rem; margin-top: 1.4rem; border: 1.5px solid var(--ink); }

.btn--light { background: #fff; color: var(--ink); border-color: #fff; }

.btn--light:hover { background: #e0a94b; border-color: #e0a94b; }

.btn--solid { background: var(--ink); color: #fff; }

.btn--solid:hover { background: #1c3560; }

.btn--quiet { border-color: var(--rule); color: var(--ink); font-weight: 500; padding: .7rem 1.1rem; font-size: .9375rem; }

.btn--quiet:hover { border-color: var(--ink); }

/* lender */
.lender { padding-block: clamp(2.5rem, 6vw, 3.5rem); }

.lender h2 { font-size: clamp(1.55rem, 3vw, 1.95rem); max-width: 24ch; margin-bottom: 1.1rem; }

.lender p { max-width: var(--measure); }

/* archive */
.arch-sec { padding-block: clamp(2.5rem, 6vw, 3.5rem); border-top: 1px solid var(--rule); }

.arch-h { font-family: var(--sans); font-size: .875rem; font-weight: 600; color: var(--archive); margin-bottom: 1rem; }

.doc { max-width: 44rem; border: 1px solid #bed1e6; background: var(--archive-pale); }

.chrome { display: flex; align-items: center; gap: .4rem; padding: .6rem .8rem; background: #d7e4f2; border-bottom: 1px solid #bed1e6; }

.chrome i { width: .6rem; height: .6rem; border-radius: 50%; background: #a9c1dc; display: block; }

.chrome span { margin-left: auto; font-family: var(--sans); font-size: .6875rem; color: #5c7899; }

.doc-body { padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 0; }

.doc-kicker { font-family: var(--sans); font-size: .75rem; color: var(--archive); margin-bottom: .4rem; }

.doc-title { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15; margin-bottom: .9rem; }

.doc-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; font-family: var(--sans); font-size: .8125rem; color: var(--ink-soft); padding-bottom: 1.2rem; border-bottom: 1px solid #cddcec; }

.doc-meta b { font-weight: 600; color: var(--ink); }

.extract { position: relative; padding: 1.3rem 0 0; font-size: 1.0625rem; line-height: 1.6; color: #22344f; max-height: 11rem; overflow: hidden; }

.extract::after { content: ""; position: absolute; inset: auto 0 0 0; height: 5.5rem; background: linear-gradient(to bottom, rgba(231, 239, 248, 0), var(--archive-pale)); }

.warn { margin: 0; padding: 1rem clamp(1.25rem, 3vw, 2rem); border-top: 1px solid #cddcec; font-family: var(--sans); font-size: .875rem; line-height: 1.5; color: #2c4a71; background: #dde9f6; }

.warn b { font-weight: 600; }

/* professional */
.pro { padding-block: clamp(2.5rem, 6vw, 3.5rem); border-top: 1px solid var(--rule); }

.pro h2 { font-size: clamp(1.55rem, 3vw, 1.95rem); max-width: 22ch; margin-bottom: 1.5rem; }

.tiers { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }

.tier { border: 1px solid var(--rule); padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }

.tier--lead { border-color: var(--ink); border-width: 1.5px; }

.tier h3 { font-family: var(--sans); font-size: 1rem; font-weight: 600; }

.tier p { font-family: var(--sans); font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }

.tier .btn { margin-top: auto; }

/* siblings */
.sibs { padding-block: clamp(2.5rem, 6vw, 3.5rem); border-top: 1px solid var(--rule); }

.sibs h2 { font-size: clamp(1.55rem, 3vw, 1.95rem); margin-bottom: 1.4rem; }

.sib-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; list-style: none; margin: 0; padding: 0; }

.sib-list li { border-top: 1px solid var(--rule); }

.sib-list a { display: block; padding: 1.05rem 0; text-decoration: none; }

.sib-list a:hover .st { text-decoration: underline; text-underline-offset: 3px; }

.st { font-size: 1.1875rem; line-height: 1.3; display: block; }

.sd { font-family: var(--sans); font-size: .875rem; color: var(--ink-soft); display: block; margin-top: .3rem; line-height: 1.45; }

/* footer */
.foot { border-top: 1px solid var(--rule); padding-block: 2rem 3rem; font-family: var(--sans); font-size: .875rem; color: var(--ink-soft); }

.foot nav { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-bottom: 1rem; }

.foot a { text-decoration: none; }

.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

.foot .dis { max-width: 44rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-faint); }

@media (max-width: 60rem) { .hero-grid { grid-template-columns: 1fr; }
  .cta-rail { margin-top: 2.25rem; }
  .cards, .cards--two, .tiers { grid-template-columns: 1fr; }
  .sib-list { grid-template-columns: 1fr; }
  .states { flex-wrap: wrap; max-width: none; }
  .states-label { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--rule); padding-block: .6rem; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }