:root { color-scheme: light; --two-ink: #1e2933; --two-blue: #263c91; --two-accent: #5369d9; --two-muted: #626d77; --two-line: #dce1e5; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; color: var(--two-ink); background: #fff; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--two-blue); outline-offset: 4px; }
.two-header { min-height: 86px; padding: 12px 7%; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid #e6e9ec; background: #fff; }
.two-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--two-ink); text-decoration: none; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.two-brand img { display: block; width: 42px; height: 42px; object-fit: contain; }
.two-brand small { display: block; margin-top: 4px; color: var(--two-muted); font-size: 11px; font-weight: 400; letter-spacing: .01em; }
.two-header nav { display: flex; align-items: center; gap: clamp(17px,2.5vw,34px); }
.two-header nav a { color: #3d4852; text-decoration: none; font-size: 14px; transition: color .18s ease, transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.two-header nav a:hover { color: var(--two-blue); transform: translateY(-2px); }
.two-header nav .two-back { padding: 11px 14px; border: 1px solid var(--two-blue); background: #fff; color: var(--two-blue); }
.two-header nav .two-back:hover { background: var(--two-blue); color: #fff; box-shadow: 0 4px 12px #263c9126; }
.two-nav-soon { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: #9aa3ab; font: inherit; font-size: 14px; cursor: not-allowed; }
.two-nav-soon small, .two-soon small { padding: 2px 7px; border-radius: 999px; background: #eceff2; color: #737e88; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.two-eyebrow, .two-type { margin: 0; color: var(--two-blue); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.two-eyebrow { display: flex; align-items: center; gap: 10px; color: #5d6873; letter-spacing: .07em; }
.two-eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: var(--two-blue); }

.two-hero { min-height: 560px; min-height: clamp(540px,calc(100svh - 124px),680px); padding-left: max(7%,calc((100% - 1200px) / 2)); display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: stretch; gap: 5%; background: #f3f5f7; }
.two-hero-copy { max-width: 590px; padding: 58px 0; align-self: center; }
.two-hero h1 { max-width: 610px; margin: 20px 0 17px; font-size: clamp(37px,4.1vw,55px); line-height: 1.08; letter-spacing: -.045em; font-weight: 600; }
.two-hero-copy > p:not(.two-eyebrow) { max-width: 520px; margin: 0 0 26px; color: #56616b; font-size: 17px; line-height: 1.75; }
.two-hero-links { display: flex; flex-wrap: wrap; gap: 10px; }
.two-hero-links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 46px; padding: 9px 16px; border: 1px solid var(--two-blue); background: var(--two-blue); color: #fff; text-decoration: none; font-size: 14px; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.two-hero-links a:hover { transform: translateY(-2px); background: #fff; color: var(--two-blue); box-shadow: 0 4px 12px #263c9126; }
.two-soon { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 9px 16px; border: 1px dashed #b9c1c9; background: transparent; color: #87919a; font: inherit; font-size: 14px; cursor: not-allowed; }

/* The hero shelf shows the two papers as covers on a navy blueprint. */
.two-shelf { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: radial-gradient(circle at 68% 32%, #3a56a8 0, transparent 58%), linear-gradient(160deg, var(--two-blue), #15235a); }
.two-shelf::before { position: absolute; inset: 0; background-image: linear-gradient(#ffffff14 1px, transparent 1px), linear-gradient(90deg, #ffffff14 1px, transparent 1px); background-size: 44px 44px; content: ''; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%); }
.two-shelf .two-cover { --cover: clamp(180px, 21vw, 280px); position: absolute; top: 50%; left: 50%; }
.two-shelf-back { transform: translate(-6%, -58%) rotate(5deg); }
.two-shelf-front { transform: translate(-94%, -42%) rotate(-4deg); }

/* A paper cover, sized entirely from --cover so it scales from the hero down to a phone card. */
.two-cover { --cover: 240px; position: relative; display: flex; flex-direction: column; width: var(--cover); aspect-ratio: 17 / 22; padding: calc(var(--cover) * .11) calc(var(--cover) * .1) calc(var(--cover) * .09) calc(var(--cover) * .15); overflow: hidden; background: #fff; color: var(--two-ink); box-shadow: 0 1px 2px #0f1a3a1f, 0 22px 44px -20px #0f1a3a80; font-size: calc(var(--cover) * .05); line-height: 1.3; }
.two-cover::before { position: absolute; inset: 0 auto 0 0; width: calc(var(--cover) * .055); background: var(--two-blue); content: ''; }
.two-cover-brand { display: flex; align-items: center; gap: .45em; font-weight: 700; letter-spacing: -.03em; }
.two-cover-brand img { width: 1.6em; height: 1.6em; }
.two-cover-kicker { margin-top: calc(var(--cover) * .14); color: var(--two-accent); font-size: .78em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.two-cover-title { margin-top: .45em; font-size: 1.75em; font-weight: 600; line-height: 1.12; letter-spacing: -.035em; }
.two-cover-sub { margin-top: .6em; color: var(--two-muted); font-size: .85em; line-height: 1.35; }
.two-cover-trace { display: block; flex: 0 0 auto; width: 100%; height: calc(var(--cover) * .19); margin-top: auto; padding-top: .8em; overflow: visible; }
.two-cover-trace polyline { fill: none; stroke: var(--two-blue); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.two-cover-grid { fill: none; stroke: var(--two-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.two-cover-foot { margin-top: 1em; padding-top: .7em; border-top: 1px solid var(--two-line); color: var(--two-muted); font-size: .72em; letter-spacing: .02em; }

.two-papers { padding: 76px max(7%,calc((100% - 1200px) / 2)) 84px; background: #fff; }
.two-section-heading { margin-bottom: 34px; display: grid; grid-template-columns: 1fr .8fr; align-items: end; gap: 8%; }
.two-section-heading h2 { margin: 10px 0 0; font-size: clamp(30px,3.3vw,42px); line-height: 1.13; letter-spacing: -.04em; font-weight: 600; }
.two-section-heading > p { margin: 0 0 2px; color: var(--two-muted); font-size: 16px; line-height: 1.75; }
.two-paper-list { display: grid; gap: 22px; }
.two-paper { display: grid; grid-template-columns: 250px minmax(0,1fr); border: 1px solid var(--two-line); background: #fff; transition: border-color .2s ease, box-shadow .2s ease; }
.two-paper:hover { border-color: #c3cbd3; box-shadow: 0 18px 40px -28px #1e293366; }
.two-cover-link { display: grid; place-items: center; padding: 34px 28px; border-right: 1px solid var(--two-line); background: #f3f5f7; text-decoration: none; }
.two-cover-link .two-cover { --cover: 176px; transition: transform .35s ease; }
.two-paper:hover .two-cover-link .two-cover { transform: translateY(-4px) rotate(-1.5deg); }
.two-paper-body { min-width: 0; padding: 32px 36px 30px; }
.two-paper-tags { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.two-badge { padding: 3px 10px; border-radius: 999px; background: var(--two-blue); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .03em; }
.two-badge-quiet { background: #e8ecfa; color: var(--two-blue); }
.two-paper h3 { margin: 12px 0; font-size: 23px; line-height: 1.32; font-weight: 600; letter-spacing: -.02em; }
.two-paper-body > p:not(.two-paper-tags):not(.two-inside-label) { max-width: 760px; margin: 0; color: #59646e; font-size: 16px; line-height: 1.75; }
.two-inside-label { margin: 22px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.two-inside { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 28px; list-style: none; }
.two-inside li { position: relative; padding-left: 22px; color: #4f5b66; font-size: 15px; line-height: 1.6; }
.two-inside li::before { position: absolute; top: calc(.8em - 3px); left: 0; width: 6px; height: 6px; background: var(--two-blue); content: ''; }
.two-paper-foot { margin-top: 26px; padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; border-top: 1px solid var(--two-line); }
.two-paper-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.two-paper-actions a { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 46px; padding: 9px 16px; border: 1px solid var(--two-blue); color: var(--two-blue); background: transparent; font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .18s ease, color .18s ease; }
.two-paper-actions a:first-child { color: #fff; background: var(--two-blue); }
.two-paper-actions a:hover { color: #fff; background: #1c2e76; }
.two-paper-meta { margin: 0; color: var(--two-muted); font-size: 14px; }

.two-cta { padding: 40px max(7%,calc((100% - 1200px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 25px; background: var(--two-blue); color: #fff; }
.two-cta .two-eyebrow { color: #dce2ff; }
.two-cta h2 { margin: 10px 0 0; font-size: clamp(24px,2.7vw,34px); letter-spacing: -.035em; }
.two-cta p:not(.two-eyebrow) { max-width: 560px; margin: 8px 0 0; color: #dce2ff; font-size: 16px; line-height: 1.7; }
.two-cta > a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 23px; min-height: 46px; padding: 13px 16px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 15px; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; }
.two-cta > a:hover { transform: translateY(-2px); background: #fff; color: var(--two-blue); box-shadow: 0 4px 12px #101d5526; }
.two-cta > a:hover span { color: var(--two-blue); }
.two-cta > a span { font-size: 17px; }
.two-cta a:focus-visible { outline-color: #fff; }
.two-footer { padding: 25px 7%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; border-top: 1px solid var(--two-line); background: #fff; }
.two-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; color: #515d68; font-size: 14px; }
.two-footer > div a { text-decoration: none; transition: color .18s ease, transform .18s ease; }
.two-footer > div a:hover { color: var(--two-blue); transform: translateY(-2px); }
.two-footer > small { grid-column: 1/-1; padding-top: 13px; border-top: 1px solid var(--two-line); color: #626d77; font-size: 12px; }
@media (max-width: 1000px) {
  .two-paper { grid-template-columns: 200px minmax(0,1fr); }
  .two-cover-link { padding: 28px 22px; }
  .two-cover-link .two-cover { --cover: 150px; }
  .two-inside { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 900px) {
  .two-hero { padding-left: 6%; gap: 5%; }
  .two-hero-copy { padding: 42px 0; }
  .two-header nav a:not(.two-back), .two-nav-soon { display: none; }
  .two-header nav { gap: 0; }
  .two-papers { padding: 60px 6% 66px; }
  .two-footer { grid-template-columns: 1fr; align-items: start; }
  .two-footer > div { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .two-header { min-height: 66px; padding: 10px 17px; gap: 10px; }
  .two-brand { gap: 7px; font-size: 16px; }
  .two-brand img { width: 32px; height: 32px; }
  .two-header .two-brand small { display: none; }
  .two-header nav .two-back { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
  .two-back span { margin-left: 6px; }
  .two-hero { min-height: 0; padding: 41px 6% 0; grid-template-columns: minmax(0,1fr); gap: 32px; }
  .two-hero-copy { padding: 0; }
  .two-hero h1 { margin: 17px 0 14px; font-size: clamp(34px,9vw,48px); }
  .two-hero-copy > p:not(.two-eyebrow) { font-size: 16px; }
  .two-shelf { height: 320px; }
  .two-shelf .two-cover { --cover: 160px; }
  .two-papers { padding: 48px 6%; }
  .two-section-heading { margin-bottom: 24px; grid-template-columns: 1fr; gap: 11px; }
  .two-paper { grid-template-columns: minmax(0,1fr); }
  .two-cover-link { padding: 26px 20px; border-right: 0; border-bottom: 1px solid var(--two-line); }
  .two-cover-link .two-cover { --cover: 136px; }
  .two-paper-body { padding: 24px 20px 22px; }
  .two-paper h3 { font-size: 20px; }
  .two-paper-foot { align-items: flex-start; flex-direction: column; }
  .two-cta { align-items: flex-start; flex-direction: column; padding: 37px 6%; }
  .two-footer { padding: 22px 6%; grid-template-columns: 1fr; align-items: start; }
  .two-footer > div { justify-content: flex-start; gap: 10px 16px; }
  .two-footer > small { grid-column: auto; }
}
@media (max-width: 380px) {
  .two-header { padding-inline: 14px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .two-cover-link .two-cover { transition: none; }
}