/* =====================================================================
   Page families: reading (paper), proof (ice, data heroes), convert (calm, form first).
   Showroom pages (products, How it works) stay dark and use rm-show.css.
   ===================================================================== */
.fam { color: var(--text-l); }
.fam-read { background: #F4F1EA !important; --surf: #F4F1EA; --surf2: #EDE7DA; }
.fam-proof { background: #E8EEFB !important; --surf: #E8EEFB; --surf2: #DCE5F8; }
.fam-conv { background: #FBFAF7 !important; --surf: #FBFAF7; --surf2: #F3F0E9; }
.fam .k { color: #2348C4; }
.fam .fx-ink .k { color: #7FA3FF; }

/* one continuous surface: bands lose their own backgrounds and hard edges */
.fam .rm-band.fx { background: transparent !important; background-image: none !important; border: 0 !important; }
.fam .rm-band.fx > .rm-wrap > .h-sec { padding-top: 112px; padding-bottom: 112px; }
.fam .rm-band.fx-alt { background: linear-gradient(180deg, transparent, var(--surf2) 140px, var(--surf2) calc(100% - 140px), transparent) !important; }
.fam-read .rm-band.fx + .rm-band.fx > .rm-wrap > .h-sec { border-top: 1px solid rgba(14,18,38,.12); }
/* a contained ink slab instead of a full dark band */
.fam .rm-band.fx-ink { width: auto; margin: 24px max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); border-radius: 28px; overflow: hidden; border: 0 !important; background: #0E1226 !important; box-shadow: 0 40px 100px rgba(15,24,70,.22); }
.fam .rm-band.fx-ink > .rm-wrap > .h-sec { padding: 96px 64px; }
@media (max-width: 640px) { .fam .rm-band.fx-ink > .rm-wrap > .h-sec { padding: 64px 24px; } .fam .rm-band.fx > .rm-wrap > .h-sec { padding-top: 72px; padding-bottom: 72px; } }

/* section heads: retire "headline left, paragraph right" */
.fam .p-head { display: block; }
.fam .p-head .v-lede { justify-self: auto; margin-top: 24px; max-width: 58ch; }
.fam-conv .p-head { text-align: center; } .fam-conv .p-head .v-h2, .fam-conv .p-head .v-lede { margin-left: auto; margin-right: auto; }
.fam-read .v-lede, .fam-read .p-sub, .fam-read .tp-sub { font-family: var(--serif); }
.fam-read .v-lede { font-size: clamp(20px, 1.5vw, 25px); line-height: 1.5; color: #4A4740; }
.fam .v-lede { color: #3E4256; }
.fam-read .v-lede { color: #4A4740; }

/* ---------- hero 2: the title page (reading) ---------- */
.tp-in { padding: 136px var(--pad) 112px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tp-run { margin: 0; font: 600 13px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #766332; }
.tp-run a { text-decoration: none; }
.tp-h { margin: 26px 0 0; font: 800 clamp(64px, 9vw, 176px)/.88 var(--sans); letter-spacing: -.06em; color: #0E1226; max-width: 11ch; }
.tp-sub { margin: 34px 0 0; font: italic 400 clamp(22px, 1.9vw, 32px)/1.38 var(--serif); color: #4A4740; max-width: 32ch; }
.tp-sub b { font-style: normal; font-weight: 600; color: #0E1226; }
.tp-orn { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; color: #A79976; }
.tp-orn i { width: 88px; height: 1px; background: currentColor; } .tp-orn b { width: 9px; height: 9px; transform: rotate(45deg); background: currentColor; }
.tp-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 30px 0 0; font: 500 16px var(--sans); color: #4A4740; }
.tp-meta b { font-weight: 800; color: #0E1226; margin-right: 6px; }
.tp .p-cta { justify-content: center; margin-top: 40px; }
.tp-book { margin: 80px auto -40px; width: min(420px, 72%); transform: rotate(-2.5deg); filter: drop-shadow(0 50px 60px rgba(42,30,22,.32)); }
.tp-book img { width: 100%; border-radius: 3px 10px 10px 3px; }
.tp-split .tp-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; text-align: left; }
.tp-split .tp-in > div { display: flex; flex-direction: column; align-items: flex-start; }
.tp-split .p-cta, .tp-split .tp-meta { justify-content: flex-start; }
.tp-split .tp-book { margin: 0 0 0 auto; transform: rotate(3deg); }
.tp-roman { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 48px 0 0; font: italic 500 22px var(--serif); color: #766332; }
@media (max-width: 1100px) { .tp-split .tp-in { grid-template-columns: minmax(0, 1fr); gap: 56px; } .tp-split .tp-book { margin: 0 auto; } .tp-in { padding: 88px var(--pad) 80px; } }

/* dictionary hero (glossary) */
.dict-w { margin: 28px 0 0; font: 800 clamp(56px, 8.6vw, 168px)/.9 var(--sans); letter-spacing: -.055em; color: #0E1226; }
.dict-w i { font-style: normal; color: #A79976; font-weight: 400; }
.dict-pos { margin: 22px 0 0; font: italic 400 22px var(--serif); color: #766332; }
.dict-def { margin: 28px 0 0; font: 400 clamp(26px, 2.4vw, 40px)/1.32 var(--serif); color: #0E1226; max-width: 30ch; }
.dict-src { margin: 22px 0 0; font-size: 15px; color: #66625A; }
.dict-az { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 48px; }
.dict-az span { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; font: 700 15px var(--sans); color: #B4AD9E; }
.dict-az span.on { color: #0E1226; background: #FFFFFF; box-shadow: 0 1px 0 rgba(14,18,38,.08); }

/* ---------- hero 3: data hero (proof) ---------- */
.dh-in { padding: 112px var(--pad) 104px; }
.dh-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: end; }
.dh-crumb { margin: 0 0 22px; font: 600 14px var(--sans); color: #5A6180; } .dh-crumb a { text-decoration: none; }
.dh-h { margin: 0; font: 800 clamp(56px, 6.6vw, 128px)/.9 var(--sans); letter-spacing: -.056em; color: #0E1226; }
.dh-sub { margin: 0; font-size: clamp(19px, 1.4vw, 23px); line-height: 1.5; color: #3E4256; max-width: 42ch; }
.dh-sub b { color: #0E1226; }
.dh-top .p-cta { margin-top: 28px; }
.dh-viz { margin-top: 80px; }
.dh-src { margin: 18px 0 0; font-size: 13px; color: #5A6180; }
/* method: five seen, one picked */
.dh-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: end; height: 360px; }
.dh-five > div { position: relative; height: 62%; border-radius: 18px; border: 2px dashed rgba(35,72,196,.35); background: rgba(255,255,255,.5); display: flex; flex-direction: column; justify-content: space-between; padding: 22px; }
.dh-five > div.win { height: 100%; border: 0; background: linear-gradient(180deg, #3B6CFF, #2348C4); color: #FFFFFF; box-shadow: 0 30px 70px rgba(35,72,196,.35); }
.dh-five small { font: 700 13px var(--sans); color: #5A6180; } .dh-five .win small { color: #DCE4FF; }
.dh-five b { font: 800 clamp(48px, 5vw, 96px)/1 var(--sans); letter-spacing: -.05em; color: #9AA6CC; } .dh-five .win b { color: #FFFFFF; }
.dh-five-key { display: flex; justify-content: space-between; gap: 24px; margin-top: 22px; font: 700 18px var(--sans); color: #0E1226; }
.dh-five-key span:last-child { color: #2348C4; }
/* customer zero: the scoreboard */
.dh-zero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 72px; align-items: center; }
.dh-zero .n { font: 800 clamp(220px, 26vw, 440px)/.8 var(--sans); letter-spacing: -.08em; color: #0E1226; }
.dh-zero .n small { font-size: .16em; letter-spacing: -.02em; color: #5A6180; margin-left: 10px; }
.dh-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 14px; max-width: 560px; }
.dh-dots i { aspect-ratio: 1; border-radius: 50%; border: 2px dashed rgba(35,72,196,.35); }
.dh-zero p { margin: 26px 0 0; font-size: 18px; line-height: 1.5; color: #3E4256; max-width: 44ch; } .dh-zero p b { color: #0E1226; }
.dh-tl { margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid #0E1226; }
.dh-tl > div { padding: 20px 20px 0 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.dh-tl > div::before { content: ""; position: absolute; left: 0; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: #0E1226; }
.dh-tl > div.next::before { background: #E8EEFB; border: 2px solid #2348C4; }
.dh-tl small { font: 700 13px var(--sans); color: #5A6180; } .dh-tl b { font-size: 20px; letter-spacing: -.02em; } .dh-tl span { font-size: 15px; color: #3E4256; }
/* compare: the size of doing nothing */
.dh-bar { position: relative; height: 120px; border-radius: 18px; overflow: hidden; display: flex; background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(14,18,38,.08); }
.dh-bar .nd { width: 40%; background: #2348C4; color: #FFFFFF; display: flex; align-items: flex-end; padding: 18px 22px; font: 800 22px var(--sans); }
.dh-bar .rg { width: 20%; background: repeating-linear-gradient(135deg, rgba(35,72,196,.55) 0 8px, rgba(35,72,196,.25) 8px 16px); }
.dh-bar .dc { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; padding: 18px 22px; font: 700 18px var(--sans); color: #3E4256; }
.dh-scale { display: flex; justify-content: space-between; margin-top: 12px; font: 500 13px var(--mono); color: #5A6180; }
.dh-alts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.dh-alts div { padding: 22px; border-radius: 16px; background: rgba(255,255,255,.7); border: 1px solid rgba(14,18,38,.08); }
.dh-alts div.nothing { background: #0E1226; color: #EEF1F8; }
.dh-alts b { display: block; font-size: 19px; letter-spacing: -.01em; } .dh-alts span { display: block; margin-top: 6px; font-size: 14px; color: #5A6180; } .dh-alts .nothing span { color: #A9B1CF; }
/* trust: the ledger */
.dh-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 22px; overflow: hidden; background: #FFFFFF; box-shadow: 0 30px 80px rgba(15,24,70,.12); }
.dh-ledger > div { padding: 34px 32px; border-right: 1px solid rgba(14,18,38,.08); display: flex; flex-direction: column; gap: 14px; }
.dh-ledger > div:last-child { border-right: 0; background: #0E1226; color: #EEF1F8; }
.dh-ledger h3 { margin: 0 0 6px; font: 800 26px var(--sans); letter-spacing: -.025em; }
.dh-ledger p { margin: 0; padding: 14px 0 0; border-top: 1px solid rgba(14,18,38,.08); font-size: 16px; line-height: 1.45; color: #3E4256; }
.dh-ledger > div:last-child p { border-color: rgba(207,224,255,.14); color: #C6CBDD; }
.dh-ledger p b { display: block; color: #0E1226; margin-bottom: 2px; } .dh-ledger > div:last-child p b { color: #FFFFFF; }
/* research: fourteen open questions */
.dh-gaps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.dh-gaps div { aspect-ratio: 1 / 1.05; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255,255,255,.65); border: 1.5px dashed rgba(35,72,196,.32); }
.dh-gaps div::before { content: "?"; font: 800 34px/1 var(--sans); color: rgba(35,72,196,.4); }
.dh-gaps div.run { background: #0E1226; border: 0; color: #EEF1F8; } .dh-gaps div.run::before { content: "→"; color: #CDBF97; }
.dh-gaps b { font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.dh-gaps small { display: block; margin-top: 4px; font: 700 11px var(--sans); color: #CDBF97; }
@media (max-width: 1100px) {
  .dh-top, .dh-zero { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dh-five { height: 260px; gap: 8px; } .dh-five > div { padding: 12px; border-radius: 12px; }
  .dh-tl, .dh-alts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .dh-ledger { grid-template-columns: minmax(0, 1fr); } .dh-ledger > div { border-right: 0; border-bottom: 1px solid rgba(14,18,38,.08); }
  .dh-gaps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dh-in { padding: 80px var(--pad); } .dh-viz { margin-top: 48px; }
}
@media (max-width: 640px) { .dh-gaps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dh-bar { height: 88px; } .dh-bar .nd { font-size: 15px; padding: 12px; } .dh-bar .dc { display: none; } .dh-dots { gap: 8px; } }

/* ---------- hero 5: the typographic statement (about) ---------- */
.ty-in { padding: 120px var(--pad) 112px; }
.ty-h { margin: 0; font: 800 clamp(72px, 13.5vw, 260px)/.84 var(--sans); letter-spacing: -.07em; color: #0E1226; }
.ty-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; margin-top: 64px; align-items: start; }
.ty-row .dh-sub { max-width: 40ch; }
.ty-quote { margin: 0; padding-left: 28px; border-left: 3px solid #A79976; font: italic 400 clamp(24px, 2vw, 34px)/1.35 var(--serif); color: #0E1226; }
.ty-quote cite { display: block; margin-top: 16px; font: 600 14px var(--sans); font-style: normal; color: #5A6180; }
@media (max-width: 1100px) { .ty-row { grid-template-columns: minmax(0, 1fr); gap: 40px; } .ty-in { padding: 80px var(--pad); } }

/* ---------- hero 4: form first (convert) ---------- */
.fh-in { padding: 104px var(--pad) 96px; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.fh-in.top { align-items: start; }
.fh-crumb { margin: 0 0 20px; font: 600 14px var(--sans); color: #66625A; }
.fh-h { margin: 0; font: 800 clamp(52px, 5.8vw, 112px)/.92 var(--sans); letter-spacing: -.055em; color: #0E1226; }
.fh-sub { margin: 26px 0 0; font-size: clamp(19px, 1.4vw, 23px); line-height: 1.5; color: #3E4256; max-width: 40ch; } .fh-sub b { color: #0E1226; }
.fh-card { background: #FFFFFF; border-radius: 24px; padding: 40px; border: 1px solid rgba(14,18,38,.08); box-shadow: 0 30px 80px rgba(14,18,38,.10); }
.fh-card h2 { margin: 0; font: 800 28px var(--sans); letter-spacing: -.03em; color: #0E1226; }
.fh-card > p { margin: 8px 0 22px; font-size: 15px; line-height: 1.5; color: #4A4740; }
.fh-f { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.fh-f label { font: 700 13px var(--sans); color: #0E1226; }
.fh-f input, .fh-f select, .fh-f textarea { height: 50px; padding: 0 14px; border-radius: 11px; border: 1px solid rgba(14,18,38,.18); background: #FBFAF7; font: 500 16px var(--sans); color: #0E1226; }
.fh-f textarea { height: 110px; padding: 12px 14px; resize: vertical; }
.fh-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.fh-card .rm-btn { width: 100%; justify-content: center; margin-top: 22px; min-height: 54px; font-size: 17px; }
.fh-note { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #66625A; text-align: center; }
.fh-url { display: flex; gap: 10px; margin-top: 36px; padding: 10px; border-radius: 18px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.12); box-shadow: 0 24px 60px rgba(14,18,38,.10); max-width: 640px; }
.fh-url input { flex: 1; min-width: 0; height: 60px; border: 0; padding: 0 16px; font: 600 20px var(--sans); color: #0E1226; background: transparent; outline: none; }
.fh-url .rm-btn { min-height: 60px; padding: 0 28px; font-size: 18px; }
.fh-ticks { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 20px 0 0; padding: 0; list-style: none; font: 600 15px var(--sans); color: #3E4256; }
.fh-ticks li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #A79976; margin-right: 9px; vertical-align: 1px; }
.fh-big { font: 800 clamp(120px, 14vw, 260px)/.85 var(--sans); letter-spacing: -.07em; color: #0E1226; text-align: right; }
.fh-big span { display: block; margin-top: 22px; font: 700 21px/1.35 var(--sans); letter-spacing: -.01em; color: #4A4740; }
.fh-big em { font-style: normal; color: #A79976; }
@media (max-width: 1100px) { .fh-in { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 80px var(--pad); } .fh-big { text-align: left; } }
@media (max-width: 640px) { .fh-row { grid-template-columns: minmax(0, 1fr); } .fh-card { padding: 26px; } .fh-url { flex-direction: column; } .fh-url input { height: 52px; } }

/* calm versions of existing dark widgets */
.fam-conv .bt-form { background: #FFFFFF; color: #0E1226; border: 1px solid rgba(14,18,38,.08); box-shadow: 0 30px 80px rgba(14,18,38,.10); }
.fam-conv .bt-form h2, .fam-conv .bt-form label { color: #0E1226; } .fam-conv .bt-form p { color: #4A4740; }
.fam-conv .bt-form input, .fam-conv .bt-form select, .fam-conv .bt-form textarea { background: #FBFAF7; border-color: rgba(14,18,38,.18); color: #0E1226; }
.fam-conv .bt-form .bt-hint, .fam-conv .bt-form .bt-opt { color: #5E5A50; }
.fam-conv .bt-form input::placeholder, .fam-conv .bt-form textarea::placeholder { color: #8A8577; }
.fam-conv .bt-30 i { border-color: rgba(14,18,38,.25); } .fam-conv .bt-wave .lab, .fam-conv .bt-key { color: #3E4256; }

/* ---------- endings ---------- */
.end-in { padding: 120px var(--pad) 136px; }
.end-h { margin: 0; font: 800 clamp(44px, 5vw, 96px)/.95 var(--sans); letter-spacing: -.05em; color: #0E1226; max-width: 16ch; }
.end-read .end-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.end-card { display: flex; flex-direction: column; gap: 10px; padding: 30px; border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.08); text-decoration: none; color: #0E1226; transition: transform .2s, box-shadow .2s; }
.end-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(42,30,22,.14); }
.end-card small { font: 600 13px var(--sans); color: #766332; } .end-card b { font: 800 26px/1.1 var(--sans); letter-spacing: -.025em; } .end-card span { font: 400 17px/1.5 var(--serif); color: #4A4740; } .end-card em { margin-top: auto; padding-top: 14px; font: 700 15px var(--sans); font-style: normal; color: #2348C4; }
.end-card.first { background: #0E1226; color: #EEF1F8; } .end-card.first span { color: #C6CBDD; } .end-card.first em { color: #A9C0FF; } .end-card.first small { color: #CDBF97; }
.end-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; padding-top: 40px; border-top: 2px solid #0E1226; }
.end-next small { font: 600 14px var(--sans); color: #766332; } .end-next b { display: block; margin-top: 10px; font: 800 clamp(40px, 4.4vw, 84px)/.95 var(--sans); letter-spacing: -.05em; color: #0E1226; }
.end-next .rm-btn { min-height: 56px; padding: 0 28px; font-size: 17px; }
.end-proof .end-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.end-proof .fh-url { margin-top: 0; }
.end-proof p { margin: 22px 0 0; font-size: 19px; line-height: 1.5; color: #3E4256; max-width: 44ch; }
.end-quiet { text-align: center; }
.end-quiet .end-h { margin: 0 auto; }
.end-quiet p { margin: 22px auto 0; font-size: 19px; color: #3E4256; max-width: 46ch; }
.end-quiet .p-cta { justify-content: center; margin-top: 32px; }
@media (max-width: 1100px) { .end-read .end-grid, .end-proof .end-in { grid-template-columns: minmax(0, 1fr); gap: 32px; } .end-next { grid-template-columns: minmax(0, 1fr); } .end-in { padding: 88px var(--pad); } }

/* ---------- long-form legal / policy reading ---------- */
.lg-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 80px; padding: 40px var(--pad) 120px; }
.lg-toc { position: sticky; top: 32px; align-self: start; display: flex; flex-direction: column; gap: 4px; }
.lg-toc b { font: 700 13px var(--sans); color: #766332; margin-bottom: 10px; }
.lg-toc a { font: 600 15px var(--sans); color: #4A4740; text-decoration: none; padding: 7px 0; border-bottom: 1px solid rgba(14,18,38,.08); }
.lg-body { max-width: 72ch; }
.lg-body h2 { margin: 56px 0 14px; font: 800 30px/1.15 var(--sans); letter-spacing: -.03em; color: #0E1226; } .lg-body h2:first-child { margin-top: 0; }
.lg-body p, .lg-body li { font: 400 20px/1.6 var(--serif); color: #2A2B33; } .lg-body ul { padding-left: 22px; }
.lg-sum { padding: 26px 30px; border-radius: 18px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.08); margin-bottom: 48px; }
.lg-sum p { margin: 0; font-size: 19px; }
@media (max-width: 1100px) { .lg-wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } .lg-toc { position: static; } }

/* ---------- research and contact pieces ---------- */
.rs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin-top: 56px; }
.rs-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid rgba(14,18,38,.12); }
.rs-item span { font: 800 15px var(--mono); color: #2348C4; } .rs-item b { display: block; font-size: 20px; letter-spacing: -.015em; color: #0E1226; } .rs-item p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: #3E4256; }
.rs-test { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.fx-ink .rs-test .v-lede { color: #C6CBDD; }
.rs-ax { position: relative; height: 340px; border-left: 2px solid rgba(207,224,255,.35); border-bottom: 2px solid rgba(207,224,255,.35); }
.rs-ax i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: rgba(127,163,255,.25); border: 1.5px dashed #7FA3FF; }
.rs-ax span { position: absolute; font: 600 13px var(--sans); color: #A9B1CF; } .rs-ax .x { right: 0; bottom: -30px; } .rs-ax .y { left: 12px; top: -4px; }
.rs-ax em { position: absolute; left: 12%; right: 8%; top: 46%; border-top: 2px dashed #CDBF97; font: 700 13px var(--sans); font-style: normal; color: #E3D5AE; padding-top: 8px; transform: rotate(-16deg); transform-origin: left; }
.ct-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.ct-routes div { padding: 28px; border-radius: 20px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.08); }
.ct-routes b { display: block; font-size: 21px; letter-spacing: -.02em; color: #0E1226; } .ct-routes p { margin: 8px 0 14px; font-size: 16px; line-height: 1.5; color: #4A4740; } .ct-routes a { font: 700 15px var(--sans); color: #2348C4; text-decoration: none; }
.ct-people { display: flex; gap: 28px; margin-top: 40px; }
.ct-people div { display: flex; align-items: center; gap: 14px; } .ct-people i { width: 52px; height: 52px; border-radius: 50%; background: #0E1226; color: #EEF1F8; display: inline-flex; align-items: center; justify-content: center; font: 800 16px var(--sans); font-style: normal; }
.ct-people b { display: block; font-size: 17px; color: #0E1226; } .ct-people span { font-size: 14px; color: #4A4740; }
.sc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 56px; counter-reset: s; }
.sc-steps div { padding: 28px 28px 0 0; border-top: 2px solid #0E1226; position: relative; }
.sc-steps div::before { counter-increment: s; content: "0" counter(s); font: 800 14px var(--mono); color: #2348C4; }
.sc-steps b { display: block; margin-top: 14px; font-size: 22px; letter-spacing: -.02em; color: #0E1226; } .sc-steps p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: #3E4256; }
.sc-get { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.sc-get > div { padding: 32px; border-radius: 22px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.08); }
.sc-get b { display: block; font-size: 24px; letter-spacing: -.02em; color: #0E1226; } .sc-get p { margin: 10px 0 0; font-size: 17px; line-height: 1.5; color: #3E4256; }
.sc-shot { border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px rgba(14,18,38,.22); transform: rotate(1.5deg); }
@media (max-width: 1100px) { .rs-list, .rs-test, .ct-routes, .sc-get { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; } .ct-people { flex-direction: column; gap: 16px; } }
/* page-level text on light families */
.fam .p-link { color: #2348C4; }
.fam .p-h1 { color: #0E1226; } .fam .p-sub { color: #3E4256; } .fam .p-sub b { color: #0E1226; } .fam .p-crumb, .fam .p-crumb a { color: #66625A; }
.fam .rm-btn-ghost.rm-btn-ink, .fam .rm-btn-ink { color: #0E1226; }
/* light versions of widgets that used to sit on dark bands */
.fam .rm-light .pb-part > span { color: #2348C4; border-color: rgba(14,18,38,.14); } .fam .rm-light .pb-part > span b { color: #0E1226; }
.fam .rm-light .pb-step { color: #4A4740; background: #FFFFFF; border-color: rgba(14,18,38,.1); }
.fam .rm-light .pb-step i { background: rgba(14,18,38,.06); color: #4A4740; }
.fam .rm-light .pb-step.done { color: #0E1226; } .fam .rm-light .pb-step.done i { background: #A79976; color: #0E1226; }
.fam .rm-light .pb-step.on { color: #FFFFFF; background: var(--btn); border-color: var(--btn); } .fam .rm-light .pb-step.on i { background: #FFFFFF; color: var(--btn); }
.fam .rm-light .pb-q .n { color: #2348C4; }
.fam .rm-light .b-path { border-color: #2348C4; } .fam .rm-light .b-path p { color: #4A4740; }
.fam .rm-light .mf-b > b { color: rgba(14,18,38,.14); }
.fam-read .gl-bar { background: linear-gradient(#F4F1EA 80%, transparent) !important; }
.fam .rm-light .p-unknown { border-color: rgba(14,18,38,.14); } .fam .rm-light .p-unknown p { color: #4A4740; }
.fam .fx-ink .v-lede, .fam .fx-ink .p-sub { color: #C6CBDD; } .fam .fx-ink .v-lede b { color: #FFFFFF; }