/* LAYER 1/3 design tokens - generated from design/tokens.css; edit the design, re-run the build */ :root { --c-brand: #0E6E68; --c-brand-strong: #0A4F4B; --c-brand-ink: #12302E; --c-brand-ink-panel: #083F3C; --c-brand-mid: #9CC9C3; --c-brand-line: #1F6E68; --c-brand-line-soft: #7FB8B2; --c-ground: #F9FCFC; --c-ground-alt: #F4FAF9; --c-surface: #FFFFFF; --c-hairline: #E3EFED; --c-border: #CFE3E0; --c-border-strong: #C9DDDA; --c-band-a: #F7E7C4; --c-band-a-ink: #4A4330; --c-band-a-bar: #C98A12; --c-band-b: #EAF5F3; --c-band-b-strong: #DCEFEC; --c-band-c: #CDEBE5; --c-text: #12302E; --c-text-muted: #3A5553; --c-text-quiet: #4A6361; --c-text-on-soft: #2C4745; --c-on-brand: #FFFFFF; --c-on-brand-muted: #D6ECE9; --c-on-brand-quiet: #C6E2DE; --c-on-brand-soft: #E6F4F2; --c-on-brand-faint: #B9DAD5; --c-cta: #F4B740; --c-cta-ink: #12302E; --c-cta-press: #E2A72C; --c-ok: #1C7A4E; --c-ok-soft: #E2F3EA; --c-stop: #8E2419; --c-stop-soft: #FBEBE8; --c-focus: #F4B740; --c-focus-contrast: #083F3C; --focus-ring: 3px; --focus-offset: 3px; --font-display: "Plus Jakarta Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: "Atkinson Hyperlegible", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; --t-h1: 44px; --t-h2: 30px; --t-h2-lg: 34px; --t-h3: 20px; --t-gate: 22px; --t-h4: 18px; --t-numeral: 34px; --t-numeral-sm: 28px; --t-price: 40px; --t-wordmark: clamp(34px, 11vw, 148px); --t-body-lg: 18px; --t-body: 17px; --t-small: 15px; --t-xs: 14px; --t-2xs: 13px; --lh-tight: 1.05; --lh-heading: 1.15; --lh-snug: 1.35; --lh-body: 1.6; --ls-tight: -0.025em; --ls-heading: -0.02em; --ls-caps: 0.08em; --measure: 68ch; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 14px; --s-5: 16px; --s-6: 20px; --s-7: 24px; --s-8: 28px; --s-9: 32px; --s-10: 40px; --s-11: 48px; --s-12: 56px; --s-13: 64px; --s-14: 72px; --s-15: 96px; --s-16: 104px; --band-pad-y: 64px; --gutter: 20px; --col-gap: 40px; --container: 1240px; --container-tight: 1080px; --container-text: 760px; --r-xs: 8px; --r-sm: 12px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px; --r-2xl: 28px; --r-3xl: 32px; --r-pill: 999px; --r-circle: 50%; --r-arch: 250px; --r-arch-sm: 200px; --sh-card: 0 20px 44px rgba(4, 40, 37, 0.35); --sh-float: 0 12px 28px rgba(4, 40, 37, 0.30); --sh-soft: 0 10px 28px rgba(4, 40, 37, 0.20); --control-min: 44px; --control-h: 52px; --control-h-lg: 58px; --dot: 34px; --dot-lg: 40px; --icon-tile: 52px; --icon-size: 26px; --bar-h: 6px; --rule-h: 8px; --dur: 220ms; --dur-slow: 260ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --bp-tablet: 768px; --bp-desktop: 1024px; } @media (min-width: 768px) and (max-width: 1023px) { :root { --t-h1: 56px; --t-h2: 38px; --t-h2-lg: 42px; --t-h3: 21px; --t-gate: 25px; --t-body: 18px; --t-numeral: 44px; --t-price: 46px; --t-body-lg: 18px; --band-pad-y: 80px; --gutter: 24px; --col-gap: 48px; } } @media (min-width: 1024px) { :root { --t-h1: 72px; --t-h2: 46px; --t-h2-lg: 52px; --t-h3: 22px; --t-gate: 28px; --t-body: 18px; --t-numeral: 52px; --t-numeral-sm: 34px; --t-price: 52px; --t-body-lg: 19px; --band-pad-y: 104px; --gutter: 24px; --col-gap: 56px; } } /* LAYER 2/3 components - generated from design/dingo-home.html */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--c-ground); color: var(--c-text); font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-body); overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--c-text); margin: 0; } h1 { font-size: var(--t-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); } h2 { font-size: var(--t-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); } h3 { font-size: var(--t-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } h4 { font-size: var(--t-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { max-width: 100%; } a { color: var(--c-brand); } a:hover { color: var(--c-brand-strong); } a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--focus-ring) solid var(--c-focus); outline-offset: var(--focus-offset); box-shadow: 0 0 0 calc(var(--focus-ring) + var(--focus-offset)) var(--c-focus-contrast); border-radius: var(--r-xs); } .band { padding: var(--band-pad-y) var(--gutter); } .band--ground { background: var(--c-ground); } .band--alt { background: var(--c-ground-alt); } .band--a { background: var(--c-band-a); color: var(--c-band-a-ink); } .band--b { background: var(--c-band-b); } .band--b-strong { background: var(--c-band-b-strong); } .band--c { background: var(--c-band-c); } .band--brand { background: var(--c-brand-strong); color: var(--c-on-brand); } .band--ink { background: var(--c-brand-ink-panel); color: var(--c-on-brand); } .band--ink h2, .band--ink h3, .band--brand h1, .band--brand h2, .band--brand h3 { color: var(--c-on-brand); } .shell { max-width: var(--container); margin: 0 auto; } .shell--tight { max-width: var(--container-tight); margin: 0 auto; } .split { display: flex; flex-wrap: wrap; align-items: center; gap: var(--col-gap); } .split__main { flex: 1 1 440px; min-width: 0; } .split__aside { flex: 1 1 400px; min-width: 0; display: flex; justify-content: center; } .band-head { margin-bottom: var(--s-11); } .band-head--center{ text-align: center; } .band-head__lede { margin: var(--s-3) auto 0; max-width: var(--measure); color: var(--c-text-muted); } .band--ink .band-head__lede { color: var(--c-on-brand-quiet); } .measure { max-width: var(--measure); } .eyebrow { display: inline-flex; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--c-band-b-strong); color: var(--c-brand-strong); font-size: var(--t-xs); font-weight: var(--fw-bold); line-height: 1.3; } .eyebrow--onwhite { background: var(--c-surface); } .eyebrow--ondark { background: var(--c-brand); color: var(--c-on-brand); } .pill { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--control-h); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-7); border: 0; border-radius: var(--r-pill); font-family: var(--font-text); font-size: var(--t-small); font-weight: var(--fw-bold); text-decoration: none; cursor: pointer; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .pill:hover { transform: translateY(-2px); } .pill:active { transform: translateY(0); } .pill--cta { background: var(--c-cta); color: var(--c-cta-ink); } .pill--cta:hover { color: var(--c-cta-ink); } .pill--brand { background: var(--c-brand); color: var(--c-on-brand); } .pill--brand:hover { color: var(--c-on-brand); } .pill--light { background: var(--c-surface); color: var(--c-brand-strong); } .pill--light:hover { color: var(--c-brand-strong); } .pill--ghost { background: transparent; border: 1.5px solid var(--c-brand-line-soft); color: var(--c-on-brand); } .pill--ghost:hover { color: var(--c-on-brand); } .pill--outline { background: transparent; border: 1.5px solid var(--c-brand); color: var(--c-brand); } .pill--lg { min-height: var(--control-h-lg); font-size: var(--t-body-lg); padding-left: var(--s-8); } .pill--block { display: flex; justify-content: space-between; width: 100%; } .pill__dot { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--dot); height: var(--dot); border-radius: var(--r-circle); } .pill--lg .pill__dot { width: var(--dot-lg); height: var(--dot-lg); } .pill--cta .pill__dot { background: var(--c-cta-ink); color: var(--c-cta); } .pill--brand .pill__dot { background: var(--c-cta); color: var(--c-cta-ink); } .pill--light .pill__dot { background: var(--c-cta); color: var(--c-cta-ink); } .pill--ghost .pill__dot { background: var(--c-brand); color: var(--c-on-brand); } .pill--outline .pill__dot { background: var(--c-brand); color: var(--c-on-brand); } .quiet-link { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-min); font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: 4px; } .ticks { display: flex; flex-direction: column; gap: var(--s-4); } .ticks__item { display: flex; align-items: flex-start; gap: var(--s-3); } .ticks__mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--r-circle); background: var(--c-brand); color: var(--c-on-brand); } .ticks--ondark .ticks__item { color: var(--c-on-brand-soft); } .ticks--ondark .ticks__mark { background: transparent; color: var(--c-cta); } .arch { width: 100%; max-width: 500px; border-radius: var(--r-arch) var(--r-arch) var(--r-3xl) var(--r-3xl); background: var(--c-brand); padding: var(--s-13) var(--s-8) var(--s-9); position: relative; } .arch--figure { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 4 / 4.4; overflow: hidden; padding: var(--s-10) var(--s-9) 0; background: var(--c-band-c); border-radius: var(--r-arch-sm) var(--r-arch-sm) var(--r-3xl) var(--r-3xl); } .arch--cta { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 4.3; max-width: 440px; padding: var(--s-11) var(--s-9) var(--s-7); } .skip { position: absolute; left: -9999px; top: 0; z-index: 10; padding: var(--s-3) var(--s-6); background: var(--c-cta); color: var(--c-cta-ink); font-weight: var(--fw-bold); } .skip:focus { left: var(--s-3); top: var(--s-3); } .topbar { background: var(--c-brand-strong); padding: 0 var(--gutter); } .topbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; } .brand { display: inline-flex; align-items: center; gap: var(--s-3); min-height: var(--control-min); text-decoration: none; color: var(--c-on-brand); } .brand__mark { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--dot-lg); width: var(--dot-lg); height: var(--dot-lg); border-radius: var(--r-sm); background: var(--c-cta); color: var(--c-cta-ink); } .brand__word { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-small); line-height: 1.15; } .brand--onlight { color: var(--c-text); } .topnav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); } .topnav__link { display: inline-flex; align-items: center; min-height: var(--control-min); padding: 0 var(--s-2); margin: 0 calc(var(--s-2) * -1); color: var(--c-on-brand-muted); text-decoration: none; font-size: var(--t-small); } .topnav__link:hover { color: var(--c-on-brand); text-decoration: underline; text-underline-offset: 4px; } .independence { padding: var(--s-2) var(--gutter); background: var(--c-brand-ink-panel); color: var(--c-on-brand-quiet); font-size: var(--t-2xs); text-align: center; } .hero { background: var(--c-brand-strong); padding: var(--s-10) var(--gutter) var(--s-15); } .hero__text { flex: 1 1 520px; min-width: 0; } .hero h1 { color: var(--c-on-brand); margin-bottom: var(--s-6); } .hero__accent { color: var(--c-cta); } .hero__lede { margin: 0 0 var(--s-9); max-width: var(--measure); font-size: var(--t-body-lg); color: var(--c-on-brand-muted); } .hero__flags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-7); } .hero__flag-dots { display: inline-flex; gap: var(--s-2); } .hero__flag-dot { display: inline-flex; align-items: center; justify-content: center; width: var(--dot); height: var(--dot); border-radius: var(--r-circle); background: var(--c-brand); border: 2px solid var(--c-brand-strong); color: var(--c-cta); } .hero__flag-text { font-size: var(--t-small); color: var(--c-on-brand-muted); line-height: var(--lh-snug); } .hero__flag-text strong { color: var(--c-on-brand); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); } .qcard { background: var(--c-surface); border-radius: var(--r-xl); padding: var(--s-7); box-shadow: var(--sh-card); color: var(--c-text); } .qcard__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); } .qcard__part { font-size: var(--t-2xs); font-weight: var(--fw-bold); color: var(--c-brand); text-transform: uppercase; letter-spacing: 0.06em; } .qcard__count { font-size: var(--t-2xs); color: var(--c-text-quiet); } .qcard__progress { height: var(--bar-h); border-radius: var(--r-pill); background: var(--c-band-b); margin-bottom: var(--s-5); overflow: hidden; } .qcard__progress-fill { display: block; width: 30%; height: 100%; border-radius: var(--r-pill); background: var(--c-brand); } .qcard__q { margin: 0 0 var(--s-5); font-size: var(--t-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); } .qcard__options { display: flex; flex-direction: column; gap: var(--s-3); } .qopt { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: var(--control-min); padding: var(--s-3) var(--s-4); border: 1.5px solid var(--c-border-strong); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font-family: var(--font-text); font-size: var(--t-small); text-align: left; cursor: pointer; transition: transform var(--dur) var(--ease); } .qopt:hover { transform: translateY(-1px); } .qopt__letter { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--r-circle); background: var(--c-band-b); color: var(--c-brand); font-weight: var(--fw-bold); font-size: var(--t-2xs); } .qopt[data-state="ok"] { border-color: var(--c-ok); background: var(--c-ok-soft); } .qopt[data-state="ok"] .qopt__letter { background: var(--c-ok); color: var(--c-surface); } .qopt[data-state="stop"] { border-color: var(--c-stop); background: var(--c-stop-soft); } .qopt[data-state="stop"] .qopt__letter { background: var(--c-stop); color: var(--c-surface); } .qcard__why { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-band-b); } .qcard__verdict { margin: 0 0 var(--s-1); font-weight: var(--fw-bold); color: var(--c-ok); } .qcard__why-body { margin: 0; font-size: var(--t-small); color: var(--c-text-on-soft); } .qcard-float { position: absolute; right: calc(var(--s-4) * -1); bottom: var(--s-14); display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3); border-radius: var(--r-lg); background: var(--c-surface); color: var(--c-text); box-shadow: var(--sh-float); } .qcard-float__mark { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 var(--dot-lg); width: var(--dot-lg); height: var(--dot-lg); border-radius: var(--r-sm); background: var(--c-cta); color: var(--c-cta-ink); } .qcard-float__text { font-weight: var(--fw-bold); font-size: var(--t-xs); line-height: 1.25; } .parts-strip { padding: var(--s-8) var(--gutter); background: var(--c-surface); border-bottom: 1px solid var(--c-hairline); } .parts-strip__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-5) var(--s-9); } .part-chip { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-small); color: var(--c-text-muted); } .part-chip__n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: var(--r-circle); background: var(--c-band-b-strong); color: var(--c-brand); font-size: var(--t-2xs); font-weight: var(--fw-bold); } .facts__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-7); margin-bottom: var(--s-8); } .fact__n { display: block; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-numeral); line-height: 1; letter-spacing: var(--ls-heading); color: var(--c-brand-strong); } .fact__label { display: block; margin-top: var(--s-2); font-size: var(--t-small); color: var(--c-band-a-ink); } .facts__trap { display: flex; align-items: flex-start; gap: var(--s-3); padding-top: var(--s-6); border-top: var(--rule-h) solid var(--c-band-a-bar); border-top-width: 2px; font-weight: var(--fw-bold); color: var(--c-band-a-ink); } .tiles { display: grid; grid-template-columns: 1fr; gap: var(--s-6); } .tile { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-8); border-radius: var(--r-xl); background: var(--c-band-b-strong); color: var(--c-text); text-decoration: none; transition: transform var(--dur) var(--ease); } .tile:hover { transform: translateY(-3px); color: var(--c-text); } .tile--b { background: var(--c-band-c); } .tile--c { background: var(--c-band-b); } .tile--d { background: var(--c-band-a); color: var(--c-band-a-ink); } .tile--d .tile__body { color: var(--c-band-a-ink); } .tile--d .tile__rule { background: var(--c-band-a-bar); } .tile__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--icon-tile); height: var(--icon-tile); border-radius: var(--r-md); background: var(--c-surface); } .tile__icon img { width: var(--icon-size); height: var(--icon-size); display: block; } .tile__body { margin: 0; color: var(--c-text-muted); font-size: var(--t-body); } .tile__badge { align-self: flex-start; padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-brand-strong); font-size: var(--t-2xs); font-weight: var(--fw-bold); } .tile__rule { margin-top: auto; height: var(--rule-h); width: 60%; border-radius: var(--r-pill); background: var(--c-brand); } .tiles__more { margin-top: var(--s-9); } .why__lede { margin: 0 0 var(--s-8); max-width: var(--measure); color: var(--c-text-muted); } .why__ticks { margin-bottom: var(--s-9); } .steps { display: flex; flex-direction: column; } .step { display: flex; gap: var(--s-6); padding: var(--s-7) 0; border-bottom: 1px solid var(--c-brand-line); } .step:last-child { border-bottom: 0; } .step__n { flex: 0 0 auto; padding-top: var(--s-1); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-small); color: var(--c-cta); } .step h3 { margin-bottom: var(--s-1); } .step p { color: var(--c-on-brand-quiet); } .figure-panel { width: 100%; max-width: 500px; aspect-ratio: 1 / 1; border-radius: var(--r-3xl); background: var(--c-brand); display: flex; align-items: center; justify-content: center; padding: var(--s-9); } .quad { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-10); } .quad__side { flex: 1 1 240px; min-width: 0; max-width: 300px; display: flex; flex-direction: column; gap: var(--s-11); } .quad__side--left { text-align: left; } .quad__n { margin: 0 0 var(--s-1); font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--c-brand); } .quad__item h3 { margin-bottom: var(--s-1); } .quad__item p { font-size: var(--t-small); color: var(--c-text-muted); } .quad__wheel { flex: 0 1 420px; min-width: 0; position: relative; } .quad__ring { width: 100%; max-width: 420px; aspect-ratio: 1 / 1; border-radius: var(--r-circle); overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); background: var(--c-band-b); } .quad__cell { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-numeral); } .quad__cell--1 { background: var(--c-brand); color: var(--c-cta); } .quad__cell--2 { background: var(--c-brand-mid); color: var(--c-brand-ink-panel); } .quad__cell--3 { background: var(--c-band-c); color: var(--c-brand-ink-panel); } .quad__cell--4 { background: var(--c-brand-ink-panel); color: var(--c-cta); } .quad__hub { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34%; aspect-ratio: 1 / 1; border-radius: var(--r-circle); background: var(--c-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--sh-soft); text-align: center; } .quad__hub-n { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-numeral-sm); line-height: 1; color: var(--c-brand); } .quad__hub-l { font-size: var(--t-2xs); font-weight: var(--fw-bold); color: var(--c-text-muted); } .gates { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: var(--s-7); } .gate { flex: 1 1 320px; max-width: 460px; padding: var(--s-12) var(--s-9) var(--s-9); border-radius: 230px 230px var(--r-2xl) var(--r-2xl); background: var(--c-brand-strong); color: var(--c-on-brand); text-align: center; } .gate h3 { color: var(--c-on-brand); margin-bottom: var(--s-3); font-size: var(--t-gate); font-weight: var(--fw-bold); line-height: var(--lh-heading); } .gate p { color: var(--c-on-brand-quiet); } .gate__mark { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: var(--r-circle); background: var(--c-brand); color: var(--c-cta); margin-bottom: var(--s-5); } .gate__label { margin: 0 0 var(--s-2); font-size: var(--t-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--c-cta); } .gates__and { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .gates__and span { display: inline-flex; align-items: center; justify-content: center; width: var(--control-min); height: var(--control-min); border-radius: var(--r-circle); background: var(--c-cta); color: var(--c-cta-ink); font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-small); } .gates__note { margin: var(--s-8) 0 0; text-align: center; font-size: var(--t-xs); color: var(--c-text-on-soft); } .price-card { max-width: 620px; margin: 0 auto; padding: var(--s-10); border-radius: var(--r-2xl); background: var(--c-ground-alt); border: 1.5px solid var(--c-border); } .price-card__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); } .price-card__badge { padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--c-band-b-strong); color: var(--c-brand-strong); font-size: var(--t-2xs); font-weight: var(--fw-bold); } .price-card__fig { margin: var(--s-3) 0 var(--s-7); font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-price); line-height: 1.1; color: var(--c-text); } .price-card__once { font-size: var(--t-body); font-weight: var(--fw-medium); color: var(--c-text-quiet); } .price-card__list { margin-bottom: var(--s-7); } .price-card__small { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--c-text-quiet); } .price-card__free { margin: 0 0 var(--s-6); font-weight: var(--fw-bold); color: var(--c-brand-strong); } .faq__row { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: flex-start; } .faq__aside { flex: 1 1 300px; min-width: 0; max-width: 380px; padding: var(--s-10) var(--s-8); border-radius: var(--r-arch-sm) var(--r-arch-sm) var(--r-2xl) var(--r-2xl); background: var(--c-surface); text-align: center; } .faq__aside-mark { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: var(--r-circle); background: var(--c-cta); color: var(--c-cta-ink); margin: var(--s-2) 0 var(--s-5); } .faq__aside h3 { margin-bottom: var(--s-2); } .faq__aside p { margin: 0 0 var(--s-6); color: var(--c-text-muted); } .faq__list { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-3); } .faq__item { border-radius: var(--r-lg); background: var(--c-surface); padding: var(--s-6) var(--s-7); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--control-min); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--t-h4); list-style: none; cursor: pointer; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; flex: 0 0 14px; width: 14px; height: 14px; border-right: 2.5px solid var(--c-brand); border-bottom: 2.5px solid var(--c-brand); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease); } .faq__item[open] .faq__q::after { transform: rotate(225deg) translate(-2px, -2px); } .faq__a { margin: var(--s-3) 0 0; max-width: var(--measure); color: var(--c-text-muted); } .checks { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-9); border-radius: var(--r-2xl); background: var(--c-band-a); color: var(--c-band-a-ink); } .checks__body { flex: 1 1 420px; min-width: 0; } .checks__body p { margin-top: var(--s-2); font-size: var(--t-small); } .checks h3 { color: var(--c-band-a-ink); } .final__text { flex: 1 1 480px; min-width: 0; } .final h2 { margin-bottom: var(--s-5); font-size: var(--t-h2-lg); line-height: var(--lh-tight); } .final__lede { margin: 0 0 var(--s-9); color: var(--c-on-brand-quiet); max-width: var(--measure); } .foot { padding: var(--s-14) var(--gutter) var(--s-9); background: var(--c-ground); } .foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-10); margin-bottom: var(--s-11); } .foot__brand { flex: 1 1 340px; min-width: 0; } .foot__note { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--c-text-muted); max-width: var(--measure); } .foot__col { flex: 0 1 200px; display: flex; flex-direction: column; gap: var(--s-2); font-size: var(--t-small); } .foot__col-head { font-size: var(--t-2xs); font-weight: var(--fw-bold); color: var(--c-text-quiet); text-transform: uppercase; letter-spacing: var(--ls-caps); } .foot__col a { display: inline-flex; align-items: center; min-height: var(--control-min); } .wordmark { margin: 0; font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--t-wordmark); line-height: 0.9; letter-spacing: -0.04em; color: var(--c-band-b-strong); overflow: hidden; } @supports (-webkit-text-stroke: 2px currentColor) { .wordmark { color: transparent; -webkit-text-stroke: 2px var(--c-band-b-strong); } } .foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--c-hairline); font-size: var(--t-2xs); color: var(--c-text-quiet); } @media (min-width: 768px) { .facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-9); } .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero { padding: var(--s-12) var(--gutter) var(--s-15); } .quad__side--left { text-align: right; } } @media (min-width: 1024px) { .facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .band-head { margin-bottom: var(--s-12); } .foot { padding-top: var(--s-15); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .pill:hover, .tile:hover, .qopt:hover { transform: none; } } /* LAYER 3/3 engine surfaces - the classes the shared blocks and page bodies emit */ .navtoggle { display: none; } @media (max-width: 767px) { .navtoggle { display: inline-flex; align-items: center; justify-content: center; width: var(--control-min); height: var(--control-min); margin-left: auto; padding: 0; background: transparent; border: 1px solid var(--c-on-brand-soft); border-radius: var(--r-md); color: var(--c-on-brand); cursor: pointer; } .navtoggle__bars, .navtoggle__bars::before, .navtoggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .navtoggle__bars { position: relative; } .navtoggle__bars::before, .navtoggle__bars::after { content: ""; position: absolute; left: 0; } .navtoggle__bars::before { top: -6px; } .navtoggle__bars::after { top: 6px; } #site-head .topnav { display: none; } #site-head.nav-open .topnav { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); width: 100%; padding-block: var(--s-4) var(--s-2); } #site-head.nav-open .topnav__link { padding-block: var(--s-3); } } .independence { padding-inline: var(--gutter); } .crumbbar { border-bottom: 1px solid var(--c-hairline); background: var(--c-ground-alt); } .crumbs { padding: var(--s-3) var(--gutter); } .crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font: var(--fw-medium) var(--t-small)/var(--lh-snug) var(--font-display); } .crumbs li + li::before { content: "/"; margin-right: var(--s-2); color: var(--c-text-quiet); } .crumbs a { color: var(--c-text-muted); text-decoration: none; } .crumbs a:hover { color: var(--c-brand-strong); text-decoration: underline; } .crumbs [aria-current="page"] { color: var(--c-text); font-weight: var(--fw-semibold); } .pg-section { padding: var(--s-8) var(--gutter); } .pg-section + .pg-section { border-top: 1px solid var(--c-hairline); } .pg-section > * { max-width: var(--container-text); margin-inline: auto; } .pg-section h2 { font: var(--fw-bold) var(--t-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--ls-heading); color: var(--c-text); margin-block: 0 var(--s-4); } .pg-section h3 { font: var(--fw-semibold) var(--t-h3)/var(--lh-snug) var(--font-display); color: var(--c-text); margin-block: var(--s-6) var(--s-3); } .pg-section p { margin-block: 0 var(--s-4); } .pg-section ul, .pg-section ol { margin-block: 0 var(--s-4); padding-left: var(--s-6); } .pg-section li { margin-block: 0 var(--s-2); } .pg-section--hero { padding-top: var(--s-10); } .pg-hero-h1 { font: var(--fw-black) var(--t-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-tight); color: var(--c-text); margin-block: 0 var(--s-4); } .pg-hero-italic { font-style: italic; color: var(--c-text-muted); } .pg-hero-desc { font-size: var(--t-body-lg); color: var(--c-text-muted); } .pg-cta { margin-block: var(--s-6) 0; } .pg-faq > * { max-width: var(--container-text); } .pg-faq h3 { margin-top: var(--s-5); } .btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: 0 var(--s-5); border-radius: var(--r-pill); border: 0; background: var(--c-cta); color: var(--c-cta-ink); font: var(--fw-bold) var(--t-body)/1 var(--font-display); text-decoration: none; } .btn:hover { background: var(--c-cta-press); } .cr-lead { font-size: var(--t-body-lg); color: var(--c-text-muted); } .cr-definition { margin-block: var(--s-5); padding: var(--s-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); } .cr-def-term { font: var(--fw-bold) var(--t-h4)/var(--lh-snug) var(--font-display); color: var(--c-text); } .cr-def-body { margin-block: var(--s-2) 0; } .cr-def-note { margin-block: var(--s-2) 0; font-size: var(--t-small); color: var(--c-text-quiet); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- the generic component tokens, mapped to THIS design's own palette ---- */ :root{ --accent: var(--c-brand); --accent-soft: var(--c-on-brand-soft); --ink: var(--c-text); --h1: var(--c-brand-strong); --muted: var(--c-text-muted); --border: var(--c-border); --surface: var(--c-surface); --bg: var(--c-ground); --soft: var(--c-ground-alt); --ok: var(--c-ok); --ok-soft: var(--c-ok-soft); --fail: var(--c-stop); --fail-soft: var(--c-stop-soft); --cta: var(--c-cta); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --shadow-1: var(--sh-soft); --sp-16: var(--s-5); --sp-24: var(--s-7); --sp-32: var(--s-9); --sp-48: var(--s-11); } /* ---- the content-block vocabulary ---- */ .pg-hero-eyebrow,.pg-verify-label,.cr-def-term,.ad-unit .lab{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem} .pg-hero-stats,.cr-stats{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.6rem 0} .pg-hero-stat,.cr-stat,.cr-card,.cr-definition{border:1px solid var(--border);background:var(--surface);border-radius:.9rem;padding:1.2rem} .stat-label,.cr-stat-l{display:block;font-weight:600;color:var(--h1)} .stat-value,.cr-stat-v{display:block;font-size:1.4rem;font-weight:800;line-height:1.15;color:var(--accent)} .stat-note,.cr-stat-n{display:block;font-size:.85rem;color:var(--muted);margin-top:.2rem} .cr-cards{display:grid;grid-template-columns:1fr;gap:1.1rem;margin:1.4rem 0} .cr-card h3,.cr-step-t h3,.cr-callout h3,.cr-cat-head h3{margin:.3rem 0 .35rem;font-size:1.0625rem} .cr-card p,.cr-step-t p,.cr-callout p,.cr-def-body{margin:0;font-size:.98rem;line-height:1.6} .cr-card-chip{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:.7rem;color:var(--accent);background:var(--bg);background:color-mix(in srgb,var(--accent) 10%,var(--surface))} .cr-card-chip svg{width:1.3rem;height:1.3rem} .site-main a.cr-cat--link{display:block;color:inherit;text-decoration:none} .site-main a.cr-cat--link:hover{border-color:var(--accent)} .site-main a.cr-cat--link:hover h3{color:var(--accent)} .cr-cat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem} .cr-cat-right{display:flex;align-items:center;gap:.5rem;flex:none} .cr-cat-meta{font-size:.8rem;color:var(--muted)} .cr-cat-badge{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.16rem .55rem;border-radius:999px;border:1px solid var(--border);color:var(--muted)} .cr-cat-badge--easy{color:var(--accent);border-color:var(--accent)} .cr-cat-badge--hard{color:var(--ink);border-color:var(--ink)} .cr-cat-thumb svg,.cr-cat-thumb img{width:3rem;height:3rem} .cr-steps{list-style:none;padding:0;margin:1.4rem 0;display:grid;gap:1rem} .cr-step{display:flex;gap:1rem;align-items:flex-start;margin:0} .cr-step-n{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700} .cr-callout{border-left:3px solid var(--accent);border-radius:0 .7rem .7rem 0;padding:1rem 1.2rem;margin:1.4rem 0;background:var(--bg);background:color-mix(in srgb,var(--accent) 8%,var(--surface))} .cr-callout--reassure{border-left-color:var(--muted);background:color-mix(in srgb,var(--muted) 8%,var(--surface))} .cr-callout--warning{border-left-color:var(--ink);background:color-mix(in srgb,var(--border) 40%,var(--surface))} .cr-callout h3{margin-top:0} .cr-def-note{margin:.5rem 0 0;font-size:.85rem;color:var(--muted)} @media(min-width:40rem){ .pg-hero-stats,.cr-stats{grid-template-columns:repeat(3,1fr)} .cr-cards{grid-template-columns:repeat(2,1fr)} .cr-cards--n3,.cr-cards--n5,.cr-cards--n6{grid-template-columns:repeat(3,1fr)} .cr-cards--cat{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr))} } .cr-score-matrix{margin:var(--sp-48) 0;padding:var(--sp-32);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)} .cr-sm-row{margin:0 0 var(--sp-32)} .cr-sm-row:last-of-type{margin-bottom:var(--sp-16)} .cr-sm-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .7rem} .cr-sm-label{font-weight:800;color:var(--h1);font-size:1.05rem;letter-spacing:-.01em} .cr-sm-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;font-weight:700;padding:.3rem .75rem;border-radius:999px;border:1px solid var(--border);color:var(--h1);background:var(--soft)} .cr-sm-badge svg{width:1rem;height:1rem} .cr-sm-badge--pass{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)} .cr-sm-badge--fail{color:var(--fail);border-color:var(--fail);background:var(--fail-soft)} .cr-sm-track{position:relative;height:1.35rem;background:var(--soft);border:1px solid var(--border);border-radius:999px} .cr-sm-fill{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--h1);min-width:1.35rem} .cr-sm-row--pass .cr-sm-fill{background:var(--ok)} .cr-sm-row--fail .cr-sm-fill{background:var(--fail)} .cr-sm-tick{position:absolute;top:-.35rem;bottom:-.35rem;width:3px;margin-left:-1.5px;background:var(--accent);border-radius:2px} .cr-sm-tick::before{content:"";position:absolute;top:-.34rem;left:50%;transform:translateX(-50%);border-left:.32rem solid transparent;border-right:.32rem solid transparent;border-top:.36rem solid var(--accent)} .cr-sm-scale{display:flex;justify-content:space-between;margin:.7rem 0 0;font-size:.76rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums} .cr-sm-total{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--border);font-size:.98rem;color:var(--muted)} .cr-sm-note{margin:.6rem 0 0;font-size:.92rem;color:var(--h1);font-weight:600} .cr-source-strip{margin:var(--sp-32) 0;padding:var(--sp-24);background:var(--soft);border:1px solid var(--border);border-radius:var(--radius-lg);display:grid;gap:.65rem} .cr-ss-row{display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;line-height:1.55;color:var(--h1)} .cr-ss-ic{flex:none;color:var(--muted);display:inline-flex;margin-top:.05rem} .cr-ss-ic svg{width:1.15rem;height:1.15rem} .site-main .cr-source-strip a{color:var(--accent);font-weight:600} .cr-timeline{list-style:none;margin:var(--sp-48) 0;padding:0} .cr-tl-node{position:relative;display:grid;grid-template-columns:5.5rem 1fr;gap:var(--sp-24);padding:0 0 var(--sp-24)} .cr-tl-rail{position:relative;display:flex;justify-content:center} .cr-tl-rail::before{content:"";position:absolute;top:2.5rem;bottom:-.7rem;left:50%;width:2px;transform:translateX(-50%);background:var(--border)} .cr-tl-node:last-child .cr-tl-rail::before{display:none} .cr-tl-day{position:relative;z-index:1;align-self:start;display:inline-flex;align-items:center;justify-content:center;text-align:center;width:100%;padding:.55rem .4rem;background:var(--accent);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.02em;border-radius:999px} .cr-tl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;box-shadow:var(--shadow-1)} .cr-tl-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem} .cr-tl-head h3{margin:0;font-size:1.05rem;color:var(--h1)} .cr-tl-time{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums} .cr-tl-time svg{width:.95rem;height:.95rem} .cr-tl-card p{margin:.4rem 0 0;color:var(--muted);font-size:.95rem;line-height:1.6} .site-main .cr-tl-cta{display:inline-flex;align-items:center;gap:.35rem;margin-top:.75rem;font-weight:700;font-size:.9rem;color:var(--accent);text-decoration:none} .site-main .cr-tl-cta:hover{text-decoration:underline} .site-main .cr-tl-cta .arr{display:inline-block;transition:transform .15s} .site-main .cr-tl-cta:hover .arr{transform:translateX(3px)} .cr-topic-grid{list-style:none;margin:var(--sp-48) 0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr} .cr-topic-cell{margin:0} .cr-topic{position:relative;display:block;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;transition:border-color .2s,transform .2s,box-shadow .2s} .site-main a.cr-topic--link{text-decoration:none;color:inherit} .site-main a.cr-topic--link:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-1)} .cr-topic .cr-card-chip{margin:0 0 .8rem} .cr-topic-tt{display:block;font-weight:800;color:var(--h1);font-size:1.05rem;margin:0 0 .3rem;letter-spacing:-.01em} .cr-topic-bd{display:block;color:var(--muted);font-size:.93rem;line-height:1.55} .cr-topic-tag{display:inline-block;margin-top:.75rem;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--soft);border:1px solid var(--border);padding:.2rem .55rem;border-radius:999px} @media(min-width:40rem){.cr-topic-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:56rem){.cr-topic-grid{grid-template-columns:repeat(3,1fr)}} .cr-verdict{margin:var(--sp-48) 0;padding:var(--sp-32);border:1px solid var(--border);border-top:4px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-1)} .cr-verdict--pass{border-top-color:var(--ok)} .cr-verdict--gk-fail,.cr-verdict--rs-fail{border-top-color:var(--accent)} .cr-verdict--dual-fail{border-top-color:var(--fail)} .cr-vd-head{display:flex;gap:1rem;align-items:flex-start} .cr-vd-badge{flex:none;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--h1)} .cr-verdict--pass .cr-vd-badge{background:var(--ok-soft);color:var(--ok)} .cr-verdict--gk-fail .cr-vd-badge,.cr-verdict--rs-fail .cr-vd-badge,.cr-verdict--dual-fail .cr-vd-badge{background:var(--fail-soft);color:var(--fail)} .cr-vd-badge svg{width:1.6rem;height:1.6rem} .cr-vd-state{display:block;font-size:1.3rem;font-weight:800;color:var(--h1);letter-spacing:-.02em;line-height:1.15} .cr-vd-body{margin:.35rem 0 0;color:var(--muted);font-size:.98rem;line-height:1.6} .cr-vd-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.15rem 0 0} .cr-vd-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:700;padding:.35rem .75rem;border-radius:999px;border:1px solid var(--border);color:var(--h1);background:var(--soft);font-variant-numeric:tabular-nums} .cr-vd-chip svg{width:1rem;height:1rem} .cr-vd-chip--pass{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)} .cr-vd-chip--fail{color:var(--fail);border-color:var(--fail);background:var(--fail-soft)} .cr-vd-missed{margin:1.15rem 0 0;padding:1rem 1.1rem;background:var(--soft);border:1px solid var(--border);border-radius:var(--radius-md)} .cr-vd-missed-l{display:block;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem} .cr-vd-missed ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .9rem} .site-main .cr-vd-missed a{color:var(--accent);font-weight:700;font-size:.92rem;text-decoration:none;border-bottom:1.5px solid currentColor} .site-main .cr-vd-cta{margin-top:1.25rem} .site-main .cr-vd-cta .arr{display:inline-block;transition:transform .15s} .site-main .cr-vd-cta:hover .arr{transform:translateX(3px)} .pg-faq{margin:1.2rem 0 0;border-top:1px solid var(--border)} .hero-cta-wrap,.pg-hero-cta-row{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;margin-top:1.2rem} .pg-section>h2:first-child{margin-top:0} .pg-hero-eyebrow,.pg-verify-label,.cr-def-term,.ad-unit .lab{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem} .pg-hero-h1{font-size:clamp(1.8rem,4.5vw,2.6rem);line-height:1.15;margin:0 0 .5rem} .pg-hero-media{display:block;width:100%;height:auto;border-radius:.75rem;margin:1.2rem 0} .stat-label,.cr-stat-l{display:block;font-weight:600;color:var(--h1)} .stat-value,.cr-stat-v{display:block;font-size:1.4rem;font-weight:800;line-height:1.15;color:var(--accent)} .stat-value--mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem} .stat-note,.cr-stat-n{display:block;font-size:.85rem;color:var(--muted);margin-top:.2rem} .stat-dot{display:inline-block;width:.6em;height:.6em;border-radius:50%;background:var(--accent);margin-right:.4em;vertical-align:middle} .pg-verify{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.2rem} .pg-verify-label{margin:0 .25rem 0 0} .pg-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .75rem;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:.85rem;font-weight:600;color:var(--h1);text-decoration:none} .pg-chip-tick{color:var(--accent)} .pg-faq dt{padding:1rem 0 .3rem;font-size:1.05rem;font-weight:700;color:var(--h1)} .pg-faq dd{margin:0;padding:0 0 1rem;border-bottom:1px solid var(--border);line-height:1.7} /* ============================================================================ DINGO v2 LAYOUT — the assembler's markup wearing the v2 landing design. Values transcribed from "DINGO landing - pass 1 sample (v2)" (Abdul, 2026-10-24). Colours and spacing come from THIS design's own tokens, never a literal. ============================================================================ */ /* ---- 1. THE HERO BAND -------------------------------------------------- */ .pg-section--hero{ background:var(--c-brand-strong); padding:var(--s-10) var(--gutter) var(--s-15); margin:0; } .pg-section--hero > *{max-width:var(--container);} .pg-section--hero .pg-hero-h1{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:clamp(34px,5.2vw,60px); line-height:1.05; letter-spacing:-0.025em; color:var(--c-on-brand); margin:0 0 var(--s-6); max-width:16ch; } .pg-section--hero .pg-hero-italic{ font-style:normal; font-size:var(--t-body-lg); line-height:1.5; color:var(--c-on-brand-muted); max-width:540px; margin:0 0 var(--s-5); } .pg-section--hero .pg-hero-italic em{font-style:normal} .pg-section--hero .pg-hero-desc{ font-size:var(--t-small); color:var(--c-on-brand-quiet); max-width:540px; margin:0 0 var(--s-7); } .pg-section--hero .btn.pg-cta, .pg-section--hero .btn.pg-cta:hover{ min-height:var(--control-h-lg); padding:0 var(--s-7); border-radius:var(--r-pill); background:var(--c-cta); color:var(--c-cta-ink); font-weight:var(--fw-bold); font-size:var(--t-body); filter:none; } .pg-section--hero .btn.pg-cta:hover{background:var(--c-cta-press)} /* ---- 2. SECTION BANDS, CHOSEN BY WHAT THE SECTION HOLDS ---------------- The band follows the BLOCK TYPE, not the position, so a reordered page keeps its rhythm and a page without that block never gets an empty band. :has() is the whole mechanism; a browser without it simply renders the plain white page the door serves today, which is why this degrades to "correct but plainer". */ .pg-section:has(.cr-steps){background:var(--c-brand-strong)} .pg-section:has(.cr-score-matrix){background:var(--c-band-c)} .pg-section:has(.cr-cards){background:var(--c-band-b)} .pg-section:has(.pg-faq){background:var(--c-band-b)} .pg-section:has(.cr-stats){background:var(--c-ground-alt)} .pg-section:has(.cr-source-strip){background:var(--c-ground-alt)} .pg-section:has(.cr-steps), .pg-section:has(.cr-score-matrix), .pg-section:has(.cr-cards), .pg-section:has(.pg-faq), .pg-section:has(.cr-stats), .pg-section:has(.cr-source-strip){ padding-block:var(--s-13); } /* a hairline between two coloured bands reads as a seam — the band IS the divide */ .pg-section + .pg-section:has(.cr-steps), .pg-section + .pg-section:has(.cr-score-matrix), .pg-section + .pg-section:has(.cr-cards), .pg-section + .pg-section:has(.pg-faq), .pg-section + .pg-section:has(.cr-stats), .pg-section + .pg-section:has(.cr-source-strip), .pg-section--hero + .pg-section{border-top:0} /* ---- 3. THE SECTION HEADING ------------------------------------------- */ .pg-section > h2{ font-family:var(--font-display); font-weight:var(--fw-bold); font-size:clamp(26px,3.4vw,46px); line-height:1.12; letter-spacing:-0.02em; color:var(--c-brand-strong); /* margin-inline:auto is how this template centres the children of a section (.pg-section > *). A shorthand margin here silently removed it and the heading sat LEFT of its own paragraph - seen on dev before it shipped anywhere. */ margin:0 auto var(--s-7); } /* a block section is a STATEMENT — centre it, like the mockup's band headings */ .pg-section:has(.cr-steps) > h2, .pg-section:has(.cr-score-matrix) > h2, .pg-section:has(.cr-cards) > h2, .pg-section:has(.cr-stats) > h2{ text-align:center; max-width:22ch; margin-inline:auto; margin-bottom:var(--s-11); } /* ---- 4. DARK BANDS INVERT THEIR INK ------------------------------------ */ .pg-section:has(.cr-steps) > h2{color:var(--c-on-brand)} .pg-section:has(.cr-steps) p, .pg-section:has(.cr-steps) li{color:var(--c-on-brand-muted)} .pg-section:has(.cr-steps) .cr-step-t h3{color:var(--c-on-brand)} .pg-section:has(.cr-steps) .cr-step-n{background:var(--c-cta);color:var(--c-cta-ink)} /* ---- 5. THE BLOCKS, IN THIS DESIGN'S CLOTHES --------------------------- */ .cr-stat,.cr-card,.cr-definition,.cr-score-matrix{ border-radius:var(--r-xl); border-color:var(--c-hairline); box-shadow:none; } .cr-stat-v{font-family:var(--font-display);font-size:var(--t-numeral);letter-spacing:-0.02em} .cr-card-chip{border-radius:var(--r-md)} .cr-cat-badge{border-radius:var(--r-pill)} .cr-callout{border-radius:0 var(--r-lg) var(--r-lg) 0} .cr-sm-track{border-radius:var(--r-pill);overflow:hidden} .cr-source-strip{border-radius:var(--r-xl);border-color:var(--c-hairline)} /* ---- 6. THE FAQ, AS AN OPEN LIST OF CARDS ------------------------------ */ .pg-faq{border-top:0} .pg-faq dt{ font-family:var(--font-display); font-size:var(--t-h4); color:var(--c-brand-strong); padding:var(--s-5) var(--s-6) var(--s-2); background:var(--c-surface); border-radius:var(--r-lg) var(--r-lg) 0 0; margin-top:var(--s-3); } .pg-faq dd{ padding:0 var(--s-6) var(--s-5); background:var(--c-surface); border-bottom:0; border-radius:0 0 var(--r-lg) var(--r-lg); color:var(--c-text-muted); } /* ---- 7. MOBILE ---------------------------------------------------------- */ @media (max-width:48rem){ .pg-section--hero{padding:var(--s-8) var(--gutter) var(--s-11)} .pg-section:has(.cr-steps), .pg-section:has(.cr-score-matrix), .pg-section:has(.cr-cards), .pg-section:has(.pg-faq), .pg-section:has(.cr-stats), .pg-section:has(.cr-source-strip){padding-block:var(--s-10)} } /* ---- 8. BLOCKS SHARE THE PROSE COLUMN ----------------------------------- This template centres the children of a section with `.pg-section > * {max-width: var(--container-text); margin-inline:auto}`. The shared block vocabulary sets its own vertical rhythm as a SHORTHAND — `.cr-cards{margin:1.4rem 0}`, `.cr-stats{margin:1.6rem 0}`, `.cr-score-matrix{margin:var(--sp-48) 0}` — and that trailing `0` is a horizontal margin, so it overwrites the auto and the block falls back to the gutter. Measured on the served page: every prose section began at x=260, every block at x=24. A 236px step, alternating down the page, which is what "the section is not align" names. Only the inline half is restored; each block keeps the vertical rhythm it declares. */ .pg-section > .cr-stats, .pg-section > .cr-cards, .pg-section > .cr-steps, .pg-section > .cr-score-matrix, .pg-section > .cr-source-strip, .pg-section > .cr-callout, .pg-section > .cr-definition, .pg-section > .cr-timeline, .pg-section > .cr-topic-grid, .pg-section > .cr-verdict, .pg-section > .pg-faq{margin-inline:auto} /* ---- 9. ONE SHELL FOR HEADER, HERO AND BODY ----------------------------- Measured at a 2000px viewport before this rule existed: header / independence / footer 380 .. 1620 (1240, the shell) hero text 24 .. 704 (ignored the shell) body 620 .. 1380 (760, the reading column) Three columns on one page. The hero escaped because .pg-section--hero was given a max-width without the centring that goes with it, so its children anchored to the raw gutter. Rather than centre each child - which would also centre the headline and lose the left edge the design wants - the SECTION now carries the shell inset as padding. Children then begin exactly where the header begins, at any width, with no magic numbers: inset = max(gutter, (100% - container) / 2) At 2000px that is 380, matching the header. At 1280px it is 24, also matching. Below the container width it collapses to the gutter, so small screens are untouched. Blocks then take the full shell, as they do in the v2 mockup, while prose keeps the 760 reading column centred inside it. Two widths sharing one centre line, which is an editorial layout - not three competing ones. */ .pg-section{ padding-inline:max(var(--gutter), calc((100% - var(--container)) / 2)); } .pg-section > .cr-stats, .pg-section > .cr-cards, .pg-section > .cr-steps, .pg-section > .cr-score-matrix, .pg-section > .cr-source-strip, .pg-section > .cr-timeline, .pg-section > .cr-topic-grid{max-width:var(--container)} /* ---- 10. ONE LEFT EDGE, PLUS DELIBERATE CENTRING ------------------------ Measured at 2000px before this rule, left edges on ONE page: 380, 620 and 642. block sections heading 642 (centred over the shell) block 380 Official sources heading 620 (NOT centred) card 380 <- mismatched FAQ heading 620 list 620 <- never widened prose heading 620 text 620 Three columns reads as three accidents even when two of them were intentional. The rule now: everything LEFT-ALIGNED hangs off the shell edge, and the only thing that is not left-aligned is a block heading, which is centred over its block on purpose. Two states, both explicable, instead of three positions. The reading column keeps its 760 measure - that is reading comfort, not alignment - but it starts at the shell edge rather than floating in the middle of it. */ .pg-section > *{margin-inline:0} /* `.pg-section > *` is specificity (0,1,0) and 0489 set `margin:0 auto` on `.pg-section > h2`, which is (0,1,1) - so the universal rule could never win and every prose heading stayed centred. Measured after the first attempt: six H2 still computed margin-left 240px. The element has to be named. The centred overrides below use :has(), which is (0,2,1), so they still win over this. */ .pg-section > h2{margin-inline:0} .pg-section > p, .pg-section > ul, .pg-section > ol, .pg-section > dl, .pg-section > blockquote, .pg-section > table{max-width:var(--container-text)} /* a block takes the shell; its heading centres over it */ .pg-section:has(.cr-stats) > h2, .pg-section:has(.cr-cards) > h2, .pg-section:has(.cr-steps) > h2, .pg-section:has(.cr-score-matrix) > h2, .pg-section:has(.cr-source-strip) > h2, .pg-section:has(.cr-timeline) > h2, .pg-section:has(.cr-topic-grid) > h2, .pg-section:has(.pg-faq) > h2{ max-width:22ch; margin-inline:auto; text-align:center; } /* the FAQ was the one block never widened to the shell */ .pg-section > .pg-faq{max-width:var(--container-text)} /* a prose heading stays on the shell edge, above its own column */ .pg-section > h2{max-width:var(--container-text)} /*ds0507*/.topbar__row{min-height:76px;gap:28px}.topnav__link{position:relative;padding:10px 14px;border-radius:var(--r-pill);transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}.topnav__link:hover{background:rgba(255,255,255,.08);color:var(--c-on-brand)}.topnav__link[aria-current]{color:var(--c-on-brand)}.topnav__link[aria-current]::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;background:var(--c-cta);border-radius:2px}.pill,.btn,.pg-cta{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}.pill--light,.pg-cta{box-shadow:0 2px 0 var(--c-cta-press)}.pill--light:hover,.pg-cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(244,183,64,.40),0 2px 0 var(--c-cta-press)}.pill--light:active,.pg-cta:active{transform:translateY(1px);box-shadow:none}.pill:focus-visible,.btn:focus-visible,.pg-cta:focus-visible,.topnav__link:focus-visible,summary:focus-visible{outline:var(--focus-ring) solid var(--c-focus);outline-offset:var(--focus-offset);border-radius:var(--r-sm)}.btn--ghost{background:transparent;color:var(--c-on-brand);box-shadow:inset 0 0 0 1.5px var(--c-brand-mid)}.btn--ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--c-on-brand-faint)}.btn--quiet{background:var(--c-surface);color:var(--c-brand);box-shadow:inset 0 0 0 1.5px var(--c-border)}.btn--quiet:hover{background:var(--c-ground-alt);box-shadow:inset 0 0 0 1.5px var(--c-brand-mid)}.foot__col-head{font-family:var(--font-display);font-size:var(--t-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-brand-mid);margin-bottom:var(--s-5);display:block}.foot__col a{display:block;padding:var(--s-1) 0;transition:color var(--dur) var(--ease)}.foot__col a:hover{color:var(--c-on-brand);text-decoration:underline;text-underline-offset:3px}.foot__bar{border-top:1px solid var(--c-brand-line);padding-top:var(--s-6);display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-8);align-items:center;font-size:var(--t-xs)}.foot__byline{margin-right:auto}.foot__byline b{font-family:var(--font-display);color:var(--c-on-brand-muted)}.pg-faq details{border-bottom:1px solid var(--c-border)}.pg-faq summary{display:flex;align-items:flex-start;gap:var(--s-5);padding:var(--s-7) 2px;cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h4);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);color:var(--c-text);transition:color var(--dur) var(--ease)}.pg-faq summary::-webkit-details-marker{display:none}.pg-faq summary:hover{color:var(--c-brand)}.pg-faq summary::after{content:"";margin-left:auto;flex:none;width:30px;height:30px;border-radius:var(--r-circle);background:var(--c-band-b);transition:transform var(--dur-slow) var(--ease),background var(--dur) var(--ease);background-image:linear-gradient(var(--c-brand),var(--c-brand)),linear-gradient(var(--c-brand),var(--c-brand));background-size:9px 2px,2px 9px;background-position:center;background-repeat:no-repeat}.pg-faq details[open] summary::after{transform:rotate(45deg);background-size:9px 2px,0 0;background-color:var(--c-band-c)}.ad-unit{margin:var(--s-10) 0;padding:0;border:0;background:none;text-align:center}.ad-unit:empty{display:none}.ad-unit .lab{margin-bottom:var(--s-3)}.qcard{background:var(--c-surface);border-radius:var(--r-2xl);box-shadow:var(--sh-card);overflow:hidden}.qcard__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-5) var(--s-7);background:var(--c-ground-alt);border-bottom:1px solid var(--c-hairline)}.qcard__step{font-family:var(--font-display);font-size:var(--t-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-text-quiet)}.qcard__pips{display:flex;gap:5px}.qcard__pip{width:7px;height:7px;border-radius:var(--r-circle);background:var(--c-border)}.qcard__pip--on{background:var(--c-brand)}.qcard__body{padding:var(--s-7)}.qcard__q{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h3);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);color:var(--c-text);margin:0 0 var(--s-6)}.qcard__opts{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}.qcard__opt{display:flex;align-items:center;gap:var(--s-3);padding:13px 15px;border-radius:var(--r-md);border:1.5px solid var(--c-border);background:var(--c-surface);font-size:var(--t-small);color:var(--c-text)}.qcard__key{width:26px;height:26px;border-radius:var(--r-circle);flex:none;display:flex;align-items:center;justify-content:center;background:var(--c-ground-alt);color:var(--c-text-quiet);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:12.5px;border:1px solid var(--c-border)}.qcard__opt--right{border-color:var(--c-ok);background:var(--c-ok-soft)}.qcard__opt--right .qcard__key{background:var(--c-ok);color:#fff;border-color:var(--c-ok)}.qcard__why{margin:var(--s-5) 0 0;padding:var(--s-4) var(--s-5);background:var(--c-band-b);border-radius:var(--r-md);font-size:var(--t-small);line-height:var(--lh-snug);color:var(--c-text-muted)}.qcard__why b{font-family:var(--font-display);color:var(--c-text)}.pg-section--hero-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);column-gap:var(--col-gap);align-items:center}.pg-section--hero-split>*{grid-column:1}.pg-section--hero-split>.pg-hero-aside{grid-column:2;grid-row:1/span 30;align-self:center}.ctaband{position:relative;overflow:hidden;background:var(--c-brand-strong);border-radius:var(--r-2xl);padding:var(--s-12) var(--s-12);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-10);align-items:center}.ctaband::after{content:"";position:absolute;right:-120px;bottom:-200px;width:420px;height:420px;border-radius:var(--r-arch);background:rgba(156,201,195,.12);pointer-events:none}.ctaband>*{position:relative;z-index:1}@media (max-width:1000px){.pg-section--hero-split{grid-template-columns:1fr;row-gap:var(--s-6)}.pg-section--hero-split>.pg-hero-aside{grid-column:1;grid-row:auto;margin-top:var(--s-7)}.ctaband{grid-template-columns:1fr;padding:var(--s-11) var(--s-9)}}@media (prefers-reduced-motion:reduce){.pill,.btn,.pg-cta,.topnav__link,.pg-faq summary::after{transition:none}}/*ds0514*/.pg-section--hero{position:relative;overflow:hidden}.pg-section--hero::before{content:"";position:absolute;right:-180px;top:-150px;width:620px;height:620px;border-radius:var(--r-arch);background:radial-gradient(circle at 32% 32%,rgba(156,201,195,.16),transparent 62%);pointer-events:none}.pg-section--hero>*{position:relative;z-index:1}.pg-hero-eyebrow{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--font-display);font-size:var(--t-2xs);font-weight:var(--fw-bold);letter-spacing:.11em;text-transform:uppercase;color:var(--c-cta);margin:0 0 var(--s-5)}.pg-hero-eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--c-cta)}.pg-section--hero .pg-hero-desc{color:var(--c-on-brand-muted);max-width:46ch}.pg-section--hero .pg-hero-italic{color:var(--c-on-brand-muted);max-width:48ch}.hero-ticks{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-7);margin:var(--s-8) 0 0;padding:0;list-style:none}.hero-ticks li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-small);color:var(--c-on-brand-muted)}.hero-ticks li::before{content:"";flex:none;width:19px;height:19px;border-radius:var(--r-circle);background:var(--c-ok);background-image:linear-gradient(45deg,transparent 46%,#fff 46%,#fff 54%,transparent 54%),linear-gradient(-45deg,transparent 60%,#fff 60%,#fff 68%,transparent 68%);background-size:11px 2px,11px 2px;background-position:center,center;background-repeat:no-repeat}.qcard__opts li{margin:0}.qcard__opt{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:var(--control-min);text-decoration:none;cursor:pointer;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease)}.qcard__opt:hover{border-color:var(--c-brand-mid);background:var(--c-ground-alt);transform:translateX(2px)}.qcard__opt--right:hover{border-color:var(--c-ok);background:var(--c-ok-soft)}.qcard__opt:active{transform:translateX(0) scale(.995)}.qcard__opt:focus-visible{outline:var(--focus-ring) solid var(--c-brand);outline-offset:2px}.qcard__opt::after{content:"";margin-left:auto;flex:none;width:17px;height:17px;opacity:0;transition:opacity var(--dur) var(--ease);background-image:linear-gradient(45deg,transparent 44%,var(--c-brand) 44%,var(--c-brand) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--c-brand) 44%,var(--c-brand) 56%,transparent 56%);background-size:9px 2px,9px 2px;background-position:center 4px,center 11px;background-repeat:no-repeat}.qcard__opt:hover::after,.qcard__opt:focus-visible::after{opacity:1}@media (prefers-reduced-motion:reduce){.qcard__opt,.qcard__opt::after{transition:none}.qcard__opt:hover{transform:none}}/*ds0515*/.pg-hero-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}.pg-section--hero .pg-cta-ghost{background:transparent;color:var(--c-on-brand);height:var(--control-h-lg);padding:0 var(--s-7);box-shadow:inset 0 0 0 1.5px var(--c-brand-mid);transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}.pg-section--hero .pg-cta-ghost:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--c-on-brand-faint)}.pg-section--hero .pg-cta-ghost:focus-visible{outline:var(--focus-ring) solid var(--c-cta);outline-offset:var(--focus-offset)}@media (max-width:620px){.pg-hero-cta-row{flex-direction:column;align-items:stretch}.pg-hero-cta-row>*{width:100%}}/*ds0516*/.pg-hero-eyebrow{letter-spacing:.18em;font-size:12px}.pg-hero-eyebrow::before{display:none}.pg-section--hero .pg-hero-desc{margin:0 0 var(--s-4)}.pg-section--hero .pg-hero-italic{margin:0 0 var(--s-5)}.pg-section--hero .pg-hero-cta-row{margin-top:var(--s-9)} /* R3 */@media(min-width:1024px){.pg-section--hero:not(.pg-section--hero-split){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:var(--col-gap);align-items:center;padding-block:var(--s-9)}.pg-section--hero:not(.pg-section--hero-split)>.pg-hero-h1{grid-column:1;grid-row:1/-1;align-self:center;margin:0}.pg-section--hero:not(.pg-section--hero-split)>.pg-hero-italic{grid-column:2;grid-row:1;font-size:clamp(20px,2vw,27px);line-height:1.35;color:var(--c-on-brand);border-left:3px solid var(--c-cta);padding-left:var(--s-5);max-width:none;margin:0 0 var(--s-4)}.pg-section--hero:not(.pg-section--hero-split)>.pg-hero-desc{grid-column:2;grid-row:2;padding-left:calc(var(--s-5) + 3px);max-width:none;margin:0 0 var(--s-6)}.pg-section--hero:not(.pg-section--hero-split)>.btn.pg-cta{grid-column:2;grid-row:3;justify-self:start;margin-left:calc(var(--s-5) + 3px)}}.pg-section--hero-split{grid-template-columns:minmax(0,1fr) minmax(0,540px);align-items:start}.pg-section--hero-split>.pg-hero-aside{align-self:start;margin-top:var(--s-2)}.qcard__top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-5)}.qcard__count{font-family:var(--font-display);font-size:var(--t-2xs);font-weight:var(--fw-semibold);color:var(--c-text-quiet);white-space:nowrap}.qcard__step{color:var(--c-brand);letter-spacing:.09em}.qcard__key{border-radius:var(--r-circle);background:transparent;border:2px solid var(--c-border);color:transparent;font-size:0;width:22px;height:22px;position:relative}.qcard__opt--right .qcard__key{background:transparent;border-color:var(--c-ok)}.qcard__opt--right .qcard__key::after{content:"";position:absolute;inset:3px;border-radius:var(--r-circle);background:var(--c-ok)}.qcard__opt:hover .qcard__key{border-color:var(--c-brand-mid)}.pg-cta::after{content:"";margin-left:var(--s-2);width:22px;height:22px;flex:none;border-radius:var(--r-circle);background:var(--c-brand-strong);background-image:linear-gradient(90deg,#fff,#fff),linear-gradient(45deg,transparent 42%,#fff 42%,#fff 58%,transparent 58%),linear-gradient(-45deg,transparent 42%,#fff 42%,#fff 58%,transparent 58%);background-size:9px 2px,7px 2px,7px 2px;background-position:center,7px 8px,7px 12px;background-repeat:no-repeat}.pg-section--hero .pg-cta-ghost::after{content:"";margin-left:var(--s-2);width:22px;height:22px;flex:none;border-radius:var(--r-circle);border:1.5px solid var(--c-on-brand-faint);background-image:linear-gradient(45deg,transparent 45%,var(--c-on-brand) 45%,var(--c-on-brand) 55%,transparent 55%);background-size:7px 7px;background-position:center;background-repeat:no-repeat}.btn,.pg-cta,.pg-cta-ghost{display:inline-flex;align-items:center;justify-content:center}@media (max-width:1000px){.pg-section--hero-split{grid-template-columns:1fr}}/*ds0517*/.pg-section--content{padding:var(--s-15) max(var(--gutter),calc((100% - var(--container)) / 2))}.pg-section--content>h2{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--t-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);color:var(--c-brand-strong);margin:0 0 var(--s-7);max-width:var(--container-text)}.pg-section--content>p{max-width:var(--container-text);font-size:var(--t-body);line-height:var(--lh-body);color:var(--c-text-muted);margin:0 0 var(--s-5)}.pg-section--content>p:last-of-type{margin-bottom:0}.pg-section--content>p strong{color:var(--c-text)}.cr-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin:0}.cr-stat{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-8);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);box-shadow:0 1px 2px rgba(4,40,37,.04)}.cr-stat-v{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--t-numeral);line-height:1;letter-spacing:-.03em;color:var(--c-brand-strong);font-variant-numeric:tabular-nums}.cr-stat-l{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h4);color:var(--c-text)}.cr-stat-n{font-size:var(--t-small);color:var(--c-text-quiet);line-height:var(--lh-snug)}.cr-score-matrix{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--s-9);box-shadow:var(--sh-soft)}.cr-cards--n4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6)}.cr-card{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-7);background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);text-decoration:none;color:inherit;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}.cr-card:hover{transform:translateY(-3px);box-shadow:var(--sh-soft);border-color:var(--c-brand-mid)}.cr-card:focus-visible{outline:var(--focus-ring) solid var(--c-cta);outline-offset:3px}.cr-cat-head{display:flex;flex-direction:column;gap:var(--s-4)}.cr-cat-head h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h4);line-height:var(--lh-snug);color:var(--c-brand-strong);margin:0}.cr-card-chip{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-tile);height:var(--icon-tile);flex:none;border-radius:var(--r-md);background:var(--c-accent-soft,var(--c-band-b));color:var(--c-brand)}.cr-card-chip svg{width:var(--icon-size);height:var(--icon-size)}.cr-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-7);max-width:var(--measure)}.cr-step{display:flex;align-items:flex-start;gap:var(--s-5)}.cr-step-n{flex:none;width:30px;height:30px;border-radius:var(--r-circle);background:var(--c-cta);color:var(--c-cta-ink);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-xs);margin-top:2px}.cr-step-t h3{font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h4);color:var(--c-text);margin:0 0 var(--s-2)}.cr-step-t p{margin:0;color:var(--c-text-muted);font-size:var(--t-small);line-height:var(--lh-body)}.cr-source-strip{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--s-7);display:flex;flex-direction:column;gap:var(--s-4)}.cr-ss-row{display:flex;align-items:flex-start;gap:var(--s-4);font-size:var(--t-small);color:var(--c-text-muted)}.cr-ss-ic{flex:none;display:inline-flex;color:var(--c-brand)}.cr-ss-ic svg{width:19px;height:19px}@media (max-width:1000px){.cr-stats{grid-template-columns:1fr}.cr-cards--n4{grid-template-columns:repeat(2,1fr)}.pg-section--content{padding:var(--s-13) max(var(--gutter),calc((100% - var(--container)) / 2))}}@media (max-width:620px){.cr-cards--n4{grid-template-columns:1fr}.cr-score-matrix{padding:var(--s-6)}.cr-stat{padding:var(--s-6)}}/*ds0522*/.site-nav>ul{display:flex;align-items:center;gap:var(--s-1);list-style:none;margin:0;padding:0}.site-nav li{position:relative}.site-nav a,.nav-par{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:var(--t-small);font-weight:var(--fw-semibold);color:var(--c-on-brand-muted);text-decoration:none;background:none;border:0;cursor:pointer;padding:10px 14px;border-radius:var(--r-pill);white-space:nowrap;transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}.site-nav a:hover,.nav-par:hover{color:var(--c-on-brand);background:rgba(255,255,255,.08)}.site-nav a:focus-visible,.nav-par:focus-visible{outline:var(--focus-ring) solid var(--c-cta);outline-offset:2px}.nav-chev{width:15px;height:15px;transition:transform var(--dur) var(--ease)}.nav-par[aria-expanded="true"]{color:var(--c-on-brand);background:rgba(255,255,255,.10)}.nav-par[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}.nav-sub{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:208px;display:none;flex-direction:column;gap:2px;margin:0;padding:var(--s-3);list-style:none;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);box-shadow:var(--sh-card)}.site-nav li.has-sub:has(.nav-par[aria-expanded="true"])>.nav-sub{display:flex}.nav-sub a{display:block;width:100%;color:var(--c-text);font-weight:var(--fw-medium);border-radius:var(--r-sm);padding:9px 12px}.nav-sub a:hover{color:var(--c-brand);background:var(--c-band-b)}@media (max-width:1000px){.site-nav>ul{flex-direction:column;align-items:stretch;gap:var(--s-1)}.site-nav li{position:static}.nav-sub{position:static;display:none;box-shadow:none;border:0;background:rgba(255,255,255,.06);padding:var(--s-2) var(--s-2) var(--s-2) var(--s-6)}.nav-sub a{color:var(--c-on-brand-muted)}.nav-sub a:hover{color:var(--c-on-brand);background:rgba(255,255,255,.08)}.site-nav li.has-sub:has(.nav-par[aria-expanded="true"])>.nav-sub{display:flex}}@media (prefers-reduced-motion:reduce){.nav-chev,.site-nav a,.nav-par{transition:none}}/*ds0524*/.pg-section--content .pricing-plans{max-width:none;margin:var(--s-7) 0 0;padding:0}.pg-section--content .pricing-plan-sub{color:var(--c-text-muted);max-width:var(--measure);margin:0 0 var(--s-8)}.pg-section--content .pricing-plan-grid{gap:var(--s-6)}.pg-section--content .pricing-plan-card{border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--s-8);background:var(--c-surface);box-shadow:0 1px 2px rgba(4,40,37,.04)}.pg-section--content .pricing-plan-card--paid{border:2px solid var(--c-brand);box-shadow:var(--sh-soft)}.pg-section--content .pricing-plan-name{font-family:var(--font-display);font-size:var(--t-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-text-quiet)}.pg-section--content .pricing-plan-card--paid .pricing-plan-name{color:var(--c-brand)}.pg-section--content .pricing-plan-price{font-family:var(--font-display);font-weight:var(--fw-black);font-size:var(--t-price);line-height:1;letter-spacing:-.03em;color:var(--c-brand-strong);font-variant-numeric:tabular-nums}.pg-section--content .pricing-plan-once{color:var(--c-text-quiet);font-size:var(--t-small)}.pg-section--content .pricing-plan-items{margin:var(--s-6) 0 var(--s-7);padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--s-4)}.pg-section--content .pricing-plan-items li{font-size:var(--t-small);color:var(--c-text-muted);line-height:var(--lh-snug)}.pg-section--content .pricing-plan-cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);width:auto;min-height:var(--control-h);padding:0 var(--s-8);margin-top:auto;border-radius:var(--r-pill);font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-small);text-decoration:none;white-space:nowrap;background:var(--c-surface);color:var(--c-brand);box-shadow:inset 0 0 0 1.5px var(--c-border);transition:box-shadow var(--dur) var(--ease),background var(--dur) var(--ease)}.pg-section--content .pricing-plan-cta:hover{background:var(--c-ground-alt);box-shadow:inset 0 0 0 1.5px var(--c-brand-mid)}.pg-section--content .pricing-plan-card--paid .pricing-plan-cta{background:var(--c-cta);color:var(--c-cta-ink);box-shadow:0 2px 0 var(--c-cta-press)}.pg-section--content .pricing-plan-card--paid .pricing-plan-cta:hover{background:#F7C45E;box-shadow:0 4px 14px rgba(244,183,64,.40),0 2px 0 var(--c-cta-press)}.pg-section--content .pricing-plan-cta:focus-visible{outline:var(--focus-ring) solid var(--c-cta);outline-offset:var(--focus-offset)}.pg-section--content .pricing-plan-cta svg{width:17px;height:17px;flex:none}.pg-section--content .pricing-plan-note,.pg-section--content .pricing-plan-guarantee{font-size:var(--t-xs);color:var(--c-text-quiet);max-width:var(--measure)}/*ds0524end*//*ds0522end*//*ds0517end*//*ds0516end*//*ds0515end*//*ds0514end*//*ds0507end*//*ds0548*/main .qt-takeover{max-width:var(--container)}.pg-faq--acc dt{position:relative;display:flex;align-items:flex-start;gap:var(--s-5);padding:var(--s-6) 72px var(--s-6) var(--s-7);cursor:pointer;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--t-h4);line-height:var(--lh-snug);letter-spacing:var(--ls-heading);color:var(--c-text);border-bottom:0;border-radius:var(--r-lg)}.pg-faq--acc dt:hover{color:var(--c-brand)}.pg-faq--acc dt::after{content:"";position:absolute;right:var(--s-5);top:50%;margin-top:-15px;width:30px;height:30px;border-radius:var(--r-circle);background-color:var(--c-band-b);background-image:linear-gradient(var(--c-brand),var(--c-brand)),linear-gradient(var(--c-brand),var(--c-brand));background-size:9px 2px,2px 9px;background-position:center;background-repeat:no-repeat;transition:transform var(--dur-slow) var(--ease),background-color var(--dur) var(--ease)}.pg-faq--acc dt[aria-expanded="true"]::after{transform:rotate(45deg);background-size:9px 2px,0 0;background-color:var(--c-band-c)}.pg-faq--acc dd{padding:0 var(--s-7) var(--s-6) var(--s-7);border-bottom:0;margin:0;border-radius:0 0 var(--r-lg) var(--r-lg)}.pg-faq--acc dt[aria-expanded="true"]{border-radius:var(--r-lg) var(--r-lg) 0 0}@media (prefers-reduced-motion:reduce){.pg-faq--acc dt::after{transition:none}}/*ds0548end*//*ds0550*/.pg-section--content:has(>.cr-figure){background:var(--c-band-b);text-align:center;padding-top:var(--s-12);padding-bottom:var(--s-12)}.pg-section--content:has(>.cr-figure)>h2{max-width:none;text-align:center;margin:0 auto var(--s-8)}.cr-figure{margin:0 auto;max-width:680px;display:grid;justify-items:center;gap:var(--s-6)}.cr-figure img{display:block;width:100%;height:auto;aspect-ratio:1200/760;object-fit:contain;background:var(--c-surface);border-radius:340px 340px var(--r-2xl) var(--r-2xl);padding:var(--s-10) var(--s-9) var(--s-7);box-shadow:var(--sh-soft)}.cr-figure figcaption{max-width:52ch;margin:0 auto;font-size:var(--t-small);line-height:var(--lh-body);color:var(--c-text-muted)}@media (max-width:620px){.cr-figure img{border-radius:200px 200px var(--r-xl) var(--r-xl);padding:var(--s-7) var(--s-6) var(--s-5)}}/*ds0550end*//*ds0551*/.content-region{padding:0}.content-region>.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}.content-region>.wrap:has(>.page-rail){display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s-10);align-items:start}.content-region>.wrap:has(>.page-rail)>*{grid-column:1;min-width:0}.content-region>.wrap>.page-rail{grid-column:2;grid-row:1/span 400;position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:var(--s-5);margin:var(--s-13) 0 0}.rail-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-soft)}.rail-card .rail-head,.rail-card .rail-cta-head{font-family:var(--font-display);font-size:var(--t-2xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--c-text-quiet);margin:0 0 var(--s-4)}.rail-card ul{list-style:none;margin:0;padding:0}.rail-card ul a{display:block;padding:var(--s-2) 0;font-size:var(--t-small);line-height:var(--lh-snug);color:var(--c-text-muted);text-decoration:none}.rail-card ul a:hover,.rail-card ul a[aria-current="page"]{color:var(--c-brand)}.rail-kin ul a{color:var(--c-brand);font-weight:var(--fw-bold)}.rail-toc{max-height:min(46vh,30rem);overflow:auto;overscroll-behavior:contain}.rail-cta{background:var(--c-brand-strong);border:0}.rail-cta .rail-cta-head{color:var(--c-on-brand);text-transform:none;letter-spacing:var(--ls-heading);font-size:var(--t-h4);margin:0 0 var(--s-3)}.rail-cta-body{color:var(--c-on-brand-muted);font-size:var(--t-small);margin:0 0 var(--s-5)}.rail-cta .btn{width:100%;justify-content:center}main:has(.pg-section--hero-split) .content-region>.wrap{max-width:none;padding:0;display:block}main:has(.pg-section--hero-split) .page-rail{display:none}@media (max-width:1000px){.content-region>.wrap:has(>.page-rail){display:flex;flex-direction:column}.content-region>.wrap>.page-rail{order:99;position:static;grid-row:auto;margin:var(--s-8) 0 0}.rail-toc{display:none}}/*ds0551end*//*ds0555*/.hero-ticks li::before{background:var(--c-ok);background-image:none;width:18px;height:18px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2712%27 fill=%27black%27/%3E%3Cpath d=%27M7 12.5l3.2 3.2L17 9%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2712%27 fill=%27black%27/%3E%3Cpath d=%27M7 12.5l3.2 3.2L17 9%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center/contain no-repeat}.cr-stat{container-type:inline-size;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}.cr-stat:hover{transform:translateY(-2px);box-shadow:var(--sh-soft)}.cr-stat-v{font-size:clamp(30px,17cqw,var(--t-numeral));text-wrap:balance}.rail-toc ul a{position:relative;padding:6px 0 6px 12px;transition:color var(--dur) var(--ease)}.rail-toc ul a::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--c-brand);opacity:0;transition:opacity var(--dur) var(--ease)}.rail-toc ul a:hover::before,.rail-toc ul a[aria-current]::before{opacity:1}.rail-toc ul a[aria-current]{color:var(--c-brand-strong);font-weight:var(--fw-bold)}.rail-kin ul a,.rail-cta .btn,.cr-card,.cr-cat{transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),color var(--dur) var(--ease)}.cr-card:hover,.cr-cat:hover{transform:translateY(-2px);box-shadow:var(--sh-soft)}.content-region>.wrap:has(>.page-rail) .pg-section--content{padding-top:var(--s-9);padding-bottom:var(--s-9)}.content-region>.wrap:has(>.page-rail) .pg-section--content:first-child{padding-top:var(--s-11)}.content-region>.wrap:has(>.page-rail) .pg-section--content+.pg-section--content{border-top:1px solid var(--c-hairline)}.content-region>.wrap:has(>.page-rail) .pg-section--content>h2{margin-bottom:var(--s-6)}.cr-figure img{transition:transform var(--dur-slow) var(--ease)}.cr-figure:hover img{transform:translateY(-3px)}@media (prefers-reduced-motion:reduce){.cr-stat,.cr-card,.cr-cat,.rail-toc ul a,.rail-toc ul a::before,.cr-figure img{transition:none}.cr-stat:hover,.cr-card:hover,.cr-cat:hover,.cr-figure:hover img{transform:none}}/*ds0555end*//*ds0556*/main:has(.pg-section--hero-split) .content-region>.wrap{display:block;max-width:none;padding:0}main:has(.pg-section--hero-split) .content-region>.wrap>.page-rail{display:none}main .content-region .cr-figure{margin:0 auto;max-width:680px;width:auto;border:0;border-radius:0;background:transparent;overflow:visible;display:grid;justify-items:center;gap:var(--s-6)}main .content-region .cr-figure>img{display:block;width:100%;height:auto;aspect-ratio:1200/760;object-fit:contain;background:var(--c-surface);border-radius:340px 340px var(--r-2xl) var(--r-2xl);padding:var(--s-10) var(--s-9) var(--s-7);box-shadow:var(--sh-soft)}main .content-region .cr-figure>figcaption{margin:0 auto;padding:0;border:0;background:transparent;max-width:52ch;font-size:var(--t-small);line-height:var(--lh-body);color:var(--c-text-muted);text-align:center}.content-region>.wrap:has(>.page-rail) .pg-section--content:first-of-type{padding-top:var(--s-11)}@media (max-width:620px){main .content-region .cr-figure>img{border-radius:200px 200px var(--r-xl) var(--r-xl);padding:var(--s-7) var(--s-6) var(--s-5)}.pg-section--hero .pg-hero-h1{font-size:clamp(1.65rem,7.4vw,2.1rem)}}/*ds0556end*//*ds0557*/.hero-ticks li::before{-webkit-mask:none;mask:none;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2712%27 fill=%27%231C7A4E%27/%3E%3Cpath d=%27M7 12.5l3.2 3.2L17 9%27 fill=%27none%27 stroke=%27%23ffffff%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");background-size:18px 18px;background-position:center;background-repeat:no-repeat}@media (max-width:620px){.pg-section--hero .pg-hero-italic,.pg-section--hero .pg-hero-desc{max-width:100%}}/*ds0557end*//*ds0558*/@media (max-width:1000px){.pg-section--hero-split{grid-template-columns:minmax(0,1fr)}.pg-section--hero-split>*{min-width:0;max-width:100%}}/*ds0558end*//*ds0573*/.pg-section--content:not(:has(.cr-stats,.cr-cards,.cr-steps,.cr-score-matrix,.cr-source-strip,.cr-timeline,.cr-topic-grid,.cr-figure,.pg-faq))>:is(h2,p,ul,ol,dl,blockquote,table){margin-inline:auto}/*ds0573end*/ /* -- STEP 1 (2026-09-25): the split hero, figures, method list and the pass-mark scorecard. Moved from BLITZ template 8 into the SHARED layout so every door renders the same blocks Mother emits. Colours are the theme variables, not a palette. -- */ .hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:1.15rem 0 0;font-size:.92rem;color:var(--ink-muted)} .hero-trust .pill{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .7rem;border-radius:999px;background:rgba(51,70,92,.08);font-weight:700;font-size:.82rem;color:var(--ink)} .hero-trust .pill i{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(190,18,60,.25)} /* 1. DARK - the front-door face, for the pages that carry the niche's head terms */ .content-hero--dark{background:var(--slate-deep);border-bottom-color:rgba(255,255,255,.08)} .content-hero--dark::before{background:radial-gradient(42rem 20rem at 100% 0%,rgba(190,18,60,.22),transparent 62%),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 30px)} .content-hero--dark h1{color:var(--surface)} .content-hero--dark .lead{color:rgba(255,255,255,.78)} .hero--dark .hero-trust,.content-hero--dark .hero-trust{color:rgba(255,255,255,.6)} .hero--dark .hero-trust .pill,.content-hero--dark .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)} /* the landing hero is dark by design, so its badges take the dark treatment without a modifier */ .hero .hero-trust{color:rgba(255,255,255,.62);margin-bottom:1.35rem} .hero .hero-trust .pill{background:rgba(255,255,255,.1);color:var(--surface)} .content-hero--dark .hero-cta-wrap a:not(.btn-primary){color:var(--surface)} .content-hero--dark .btn-ghost,.content-hero--dark .btn-outline{color:var(--surface);border-color:rgba(255,255,255,.42)} .content-hero--dark .btn-ghost:hover,.content-hero--dark .btn-outline:hover{color:var(--surface);border-color:var(--surface);background:rgba(255,255,255,.07)} /* the copy column is ONE grid child however much the hero carries inside it */ .content-hero--split .hero-copy{min-width:0} .content-hero--split .hero-figure svg.hero-art{display:block;width:100%;height:auto} .content-hero--split .hero-figure{margin:2rem 0 0;border-radius:1rem;border:1px solid var(--border);background:var(--surface);overflow:hidden;box-shadow:0 20px 45px -25px rgba(16,24,40,.45)} .content-hero--split .hero-figure img{display:block;width:100%;height:auto} .content-hero--split .hero-figure figcaption{padding:.9rem 1.1rem;font-size:.92rem;line-height:1.5;color:var(--ink-muted);border-top:1px solid var(--border);margin:0} .content-hero--split .hero-figure figcaption b{color:var(--ink)} /* 3. RULE - the headline plus the numbers the page exists to explain */ .content-hero--rule .hero-facts{display:grid;gap:.7rem;margin:1.5rem 0 0;grid-template-columns:1fr} .content-hero--rule .hero-fact{padding:.8rem 1rem;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:0 .6rem .6rem 0;background:rgba(255,255,255,.72)} .content-hero--rule .hero-fact b{display:block;font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.1} .content-hero--rule .hero-fact span{display:block;font-size:.85rem;color:var(--ink-muted);margin-top:.15rem} /* 4. COMPACT - a utility page carries less air than a landing page */ .content-hero--compact{padding:2.4rem 0 2rem} .content-hero--compact h1{font-size:clamp(1.8rem,3.4vw,2.5rem)} .content-hero--compact .lead{font-size:1.08rem} .content-region .cr-figure{margin:1.75rem auto .25rem;max-width:30rem} .content-region .cr-figure svg{display:block;width:100%;height:auto} .content-region .cr-figure--wide{max-width:46rem} .content-region .cr-figure--tight{max-width:18rem} .content-region .cr-figure figcaption{margin:.7rem 0 0;font-size:.85rem;color:var(--ink-muted);text-align:center;line-height:1.5} .content-region .cr-illus-band{margin:1.75rem 0 .5rem;padding:1.6rem 1.5rem 1.25rem;background:var(--slate-soft);border:1px solid var(--border);border-radius:var(--radius-lg)} .content-region .cr-illus-band svg{display:block;width:100%;height:auto;max-width:40rem;margin:0 auto} .content-region .cr-illus-band figcaption{margin:1rem auto 0;max-width:40rem;font-size:.86rem;color:var(--ink-muted);text-align:center;line-height:1.55} /* two-section split */ .content-region .cr-split{display:grid;gap:1px;margin:1.75rem 0 .5rem;background:var(--border-mid);border:1px solid var(--border-mid);border-radius:var(--radius-lg);overflow:hidden} .content-region .cr-split-col{background:var(--surface);padding:1.4rem 1.5rem} .content-region .cr-split-top{display:flex;align-items:center;gap:.9rem;margin:0 0 1.15rem} .content-region .cr-split-n{font-size:2.9rem;font-weight:800;line-height:.9;letter-spacing:-.05em;color:var(--head);font-variant-numeric:tabular-nums} .content-region .cr-split-col--rs .cr-split-n{color:var(--accent)} .content-region .cr-split-l{font-weight:800;color:var(--head);font-size:1.05rem;letter-spacing:-.01em;line-height:1.2} .content-region .cr-split-l small{display:block;font-weight:600;font-size:.8rem;color:var(--ink-muted);letter-spacing:0;margin-top:.2rem} .content-region .cr-split-topics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem} .content-region .cr-split-topics li{display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;color:var(--head);margin:0} .content-region .cr-split-topics svg{flex:none;width:1.5rem;height:1.5rem} /* method row */ .content-region .cr-method{list-style:none;margin:1.6rem 0 .5rem;padding:0;display:grid;gap:1.1rem} .content-region .cr-method li{display:flex;gap:.9rem;align-items:flex-start;margin:0} .content-region .cr-method .cr-m-ic{flex:none;width:2.9rem;height:2.9rem;border-radius:.7rem;background:var(--accent-soft);display:grid;place-items:center} .content-region .cr-method .cr-m-ic svg{width:1.55rem;height:1.55rem} .content-region .cr-method h3{margin:.15rem 0 .3rem;font-size:1.02rem} .content-region .cr-method p{margin:0;font-size:.95rem;color:var(--ink-muted);line-height:1.55} /* --- in-content launch CTA row --- */ .cr-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.4rem 0 .4rem} /* ================================================================== THE FIGURE SYSTEM (2026-09-23) Append near the END of the site stylesheet, after the "FIGURES ALIGN TO THE COLUMN" block it supersedes. THE RULE: a figure BLOCK is the reading column. Always. The art inside it may be any size; the block never is. Why this replaces the left-anchor fix. That fix was right about the fault (four figures centred at four different left edges = nothing lines up) and it fixed alignment by anchoring each figure left at its own natural width. Alignment came back and DEAD SPACE arrived with it: in a 912px column a 480px figure leaves 432px of nothing, a 352px figure leaves 560px, a 240px figure leaves 672px. Both faults have ONE cause - the ART was deciding the BLOCK width. So the block stops asking. It takes the column, every time, and the left edge is the text's left edge because it is the same edge. Three treatments, one job each: 1 PLATE (default .cr-figure) - framed art at full column width. For art drawn 16:9 to 2:1. Zero dead space by construction. 2 BAND (.cr-illus-band) - the plate on a soft ground, for art that wants air around it. Also full column. 3 STAGE (.cr-figure--stage, and legacy --tight) - the deliberate treatment for art that is GENUINELY small: a full-column soft panel with the art held left at a cap and the caption set beside it. A small drawing then reads as presented, not stranded, and the block still starts at the text's left edge. No page needs CSS of its own for any of this. Page-authored style="max-width:..." on a figure is the bug, not the fix - strip it; these rules cannot out-rank an inline style and must not try (no !important anywhere in this file). ================================================================== */ /* ---- 1. THE PLATE: the default ----------------------------------- */ .content-region .cr-figure{ margin:2rem 0 .5rem; max-width:none; width:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); overflow:hidden; } /* the legacy width modifier stops setting a width - the column sets it */ .content-region .cr-figure--wide{max-width:none} .content-region .cr-figure>svg, .content-region .cr-figure>img{ display:block; width:100%; height:auto; border-radius:0; /* the plate does the clipping */ } .content-region .cr-figure>figcaption{ margin:0; padding:.8rem 1.15rem .85rem; border-top:1px solid var(--border); background:var(--surface); color:var(--ink-muted); font-size:.85rem; line-height:1.55; text-align:left; } .content-region .cr-figure>figcaption strong, .content-region .cr-figure>figcaption b{color:var(--head)} /* ---- 2. THE BAND: the plate on a soft ground ---------------------- */ /* Already full-column and already working. Kept, and made explicit so it can never fall back to a 40rem art cap inside a 57rem column. */ .content-region .cr-illus-band{ margin:2rem 0 .5rem; max-width:none; padding:1.75rem 1.75rem 1.35rem; background:var(--slate-soft); border:1px solid var(--border); border-radius:var(--radius-lg); } .content-region .cr-illus-band>svg, .content-region .cr-illus-band>img{ display:block; width:100%; height:auto; max-width:none; margin:0; } .content-region .cr-illus-band>figcaption{ margin:1rem 0 0; max-width:44rem; padding:0; border-top:0; background:none; color:var(--ink-muted); font-size:.86rem; line-height:1.55; text-align:left; } /* ---- 3. THE STAGE: for art that is genuinely small ---------------- */ /* Art left at a cap, caption beside it. The panel is the column, so the small drawing sits ON something instead of floating in white space. */ .content-region .cr-figure--stage, .content-region .cr-figure--tight{ display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:1.25rem; margin:2rem 0 .5rem; max-width:none; padding:1.6rem 1.75rem; background:var(--slate-soft); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:visible; } .content-region .cr-figure--stage>svg, .content-region .cr-figure--stage>img, .content-region .cr-figure--tight>svg, .content-region .cr-figure--tight>img{ display:block; width:100%; max-width:20rem; height:auto; margin:0; border-radius:0; } .content-region .cr-figure--stage>figcaption, .content-region .cr-figure--tight>figcaption{ margin:0; padding:0; border-top:0; background:none; color:var(--ink-muted); font-size:.95rem; line-height:1.6; text-align:left; } /* ---- 4. RHYTHM: a figure that opens a section sits closer to it --- */ .content-region .pg-section>h2+.cr-figure, .content-region .pg-section>h2+.cr-illus-band{margin-top:1.25rem} /* ---- 5. SMALL SCREENS: tighter frames, smaller staged art ---------- */ @media(max-width:40rem){ .content-region .cr-figure, .content-region .cr-illus-band, .content-region .cr-figure--stage, .content-region .cr-figure--tight{margin:1.5rem 0 .35rem} .content-region .cr-figure>figcaption{padding:.7rem .9rem .75rem} .content-region .cr-illus-band{padding:1.1rem 1.1rem .95rem} .content-region .cr-figure--stage, .content-region .cr-figure--tight{padding:1.15rem 1.15rem 1.25rem} .content-region .cr-figure--stage>svg, .content-region .cr-figure--stage>img, .content-region .cr-figure--tight>svg, .content-region .cr-figure--tight>img{max-width:14rem} .content-region .cr-figure--stage>figcaption, .content-region .cr-figure--tight>figcaption{font-size:.88rem} } /* ================================================================== THE GOAL BAND - "what passing takes, and how to get there" A page's second section: the threshold a test is marked against, drawn to scale, and the route to it. Names no page and no niche. Any door with a two-gate exam mark reskins this for free: every colour comes from the design's own custom properties (hex fallbacks only, so a door that has not set a var still renders). Nothing is force-overridden. No fixed pixel widths. Motif follows the house: the THRESHOLD (crimson rule, crimson numerals) and hairlines, not boxes inside boxes. Palette in use: --head var(--h1), --muted var(--muted), --accent var(--accent), --slate-soft var(--soft), --border var(--border), --border-mid var(--border), white. ================================================================== */ .goal-band{ background:var(--surface,var(--surface)); border-bottom:1px solid var(--border,var(--border)); padding:4.25rem 0 3.5rem; } .goal-band .goal-head{max-width:48rem;margin:0 0 2.25rem} /* ---------- THE GOAL: two gates, side by side ---------- */ .goal-gates{display:grid;grid-template-columns:1fr;gap:1rem} .goal-gate{ display:flex; flex-direction:column; margin:0; padding:1.5rem 1.5rem 1.4rem; background:var(--slate-soft,var(--soft)); border:1px solid var(--border,var(--border)); border-radius:var(--radius-lg,1rem); } .goal-gate-k{ margin:0; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted,var(--muted)); } .goal-gate-n{ margin:.4rem 0 0; font-size:1.25rem; font-weight:800; line-height:1.2; letter-spacing:-.015em; color:var(--head,var(--h1)); } /* the pass mark itself: the number is the point of the card */ .goal-mark{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem .65rem;margin:1.05rem 0 1.3rem} .goal-mark-k{ flex:0 0 100%; margin-bottom:.3rem; font-size:.7rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--accent,var(--accent)); } .goal-mark-v{ font-size:clamp(2.75rem,5.5vw,3.75rem); font-weight:800; line-height:.88; letter-spacing:-.045em; color:var(--head,var(--h1)); font-variant-numeric:tabular-nums; } /* --gk carries the default treatment and needs no rule; both modifiers exist so a door can re-colour either gate without touching the markup. */ .goal-gate--rs .goal-mark-v{color:var(--accent,var(--accent))} .goal-mark-u{font-size:1rem;font-weight:700;color:var(--muted,var(--muted))} /* the scorecard. ONE question = ONE cell, always 15 to a row, so the two gates read at the same scale and road safety honestly takes two rows to the general-knowledge one. Filled = must be right; hollow = the margin you have. Never colour alone: the shapes differ, the legend counts them, and the track carries its own aria-label. */ .goal-track{ --goal-gap:4px; display:grid; grid-template-columns:repeat(15,1fr); column-gap:var(--goal-gap); row-gap:.9rem; margin:0; } .goal-cell{ aspect-ratio:1; border-radius:3px; background:var(--head,var(--h1)); } .goal-cell--spare{ background:var(--surface,var(--surface)); box-shadow:inset 0 0 0 2px var(--muted,var(--muted)); } /* the pass mark, drawn where it falls: a crimson rule in the gap before the first question you are allowed to get wrong. */ .goal-cell--edge{position:relative} .goal-cell--edge::before{ content:""; position:absolute; top:-.35rem; bottom:-.35rem; left:calc((var(--goal-gap) / -2) - 1.5px); width:3px; border-radius:2px; background:var(--accent,var(--accent)); } .goal-legend{ display:flex; flex-wrap:wrap; gap:.4rem 1.35rem; margin:auto 0 0; /* pins to the foot of the card, so both cards agree */ padding-top:1.15rem; font-size:.85rem; font-weight:700; line-height:1.4; color:var(--head,var(--h1)); } .goal-key-item{display:inline-flex;align-items:center;gap:.5rem} .goal-key{ flex:none; width:.7rem; height:.7rem; border-radius:2px; background:var(--head,var(--h1)); } .goal-key--spare{ background:var(--surface,var(--surface)); box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted)); } /* ---------- the consequence of two separate marks ---------- */ .goal-both{ max-width:54rem; margin:1.6rem 0 0; padding:.1rem 0 .1rem 1.25rem; border-left:3px solid var(--accent,var(--accent)); } .goal-both-h{ margin:0 0 .4rem; font-size:1.2rem; font-weight:800; line-height:1.3; letter-spacing:-.015em; color:var(--head,var(--h1)); } .goal-both-p{margin:0;font-size:1.02rem;line-height:1.68;color:var(--ink,var(--ink))} .goal-both-p b{color:var(--head,var(--h1));font-weight:800} /* ---------- THE ROUTE ---------- */ .goal-path{margin:3.25rem 0 0} .goal-path-h{ margin:0 0 .4rem; font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:800; line-height:1.15; letter-spacing:-.025em; color:var(--head,var(--h1)); } .goal-path-l{margin:0;max-width:44rem;font-size:1.05rem;line-height:1.6;color:var(--muted,var(--muted))} .goal-steps{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--border-mid,var(--border)); } .goal-step{ display:flex; gap:1.1rem; align-items:flex-start; margin:0; padding:1.45rem 0; border-bottom:1px solid var(--border-mid,var(--border)); } .goal-step-n{ flex:none; min-width:1.8rem; font-size:2rem; font-weight:800; line-height:.95; letter-spacing:-.045em; color:var(--accent,var(--accent)); font-variant-numeric:tabular-nums; } .goal-step-b{min-width:0} .goal-step-t{ margin:.12rem 0 .4rem; font-size:1.08rem; font-weight:800; line-height:1.3; letter-spacing:-.015em; color:var(--head,var(--h1)); } .goal-step-b p{margin:0;font-size:.98rem;line-height:1.62;color:var(--muted,var(--muted))} /* ---------- the action ---------- */ .goal-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:2.4rem 0 0} .goal-note{margin:1rem 0 0;font-size:.9rem;line-height:1.55;color:var(--muted,var(--muted))} /* gates: side by side once there is room for two */ @media(min-width:48rem){ .goal-gates{grid-template-columns:1fr 1fr;gap:1.25rem} } /* steps: two columns, hairline between them (the house pattern) */ @media(min-width:40rem) and (max-width:71.99rem){ .goal-steps{grid-template-columns:1fr 1fr} .goal-step:nth-child(odd){padding-right:2rem;border-right:1px solid var(--border-mid,var(--border))} .goal-step:nth-child(even){padding-left:2rem} } /* steps: four across, the number stacked over its line */ @media(min-width:72rem){ .goal-steps{grid-template-columns:repeat(4,minmax(0,1fr))} .goal-step{flex-direction:column;gap:.55rem;padding:1.7rem 1.6rem 1.7rem 0} .goal-step+.goal-step{padding-left:1.6rem;border-left:1px solid var(--border-mid,var(--border))} .goal-step:last-child{padding-right:0} .goal-step-n{font-size:2.4rem} .goal-gate{padding:1.75rem 1.75rem 1.5rem} } @media(max-width:39.99rem){ .goal-band{padding:3rem 0 2.75rem} .goal-band .goal-head{margin-bottom:1.75rem} .goal-gate{padding:1.25rem 1.15rem 1.2rem} .goal-track{--goal-gap:3px} .goal-cell{border-radius:2px} .goal-cell--spare{box-shadow:inset 0 0 0 1.5px var(--muted,var(--muted))} .goal-cell--edge::before{top:-.25rem;bottom:-.25rem;width:2px;left:calc((var(--goal-gap) / -2) - 1px)} .goal-both{padding-left:1rem} .goal-path{margin-top:2.5rem} .goal-cta{margin-top:2rem;gap:.6rem} .goal-cta .btn{width:100%;justify-content:center} } /* the hover lift on the primary is the site's; nothing here animates */ @media(prefers-reduced-motion:reduce){ .goal-band *{transition:none} } /* ---- what used to be inline on the page ---------------------------- */ .cr-cta--center{justify-content:center;margin-top:1.6rem} @media(min-width:60rem){ .content-hero--split .wrap{max-width:var(--wrap);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3rem;align-items:center} .content-hero--split .hero-figure{margin:0} } @media(min-width:40rem){ .content-hero--rule .hero-facts{grid-template-columns:repeat(3,minmax(0,1fr));max-width:44rem} .content-region .cr-split{grid-template-columns:1fr 1fr} } @media(min-width:48rem){ .content-region .cr-method{grid-template-columns:repeat(3,1fr)} .content-region .cr-method li{flex-direction:column} .content-region .cr-figure--stage, .content-region .cr-figure--tight{ /* a FIXED first track, not minmax(0,20rem): a content-sized track would shrink to the art's intrinsic width and the stage would wander again */ grid-template-columns:20rem minmax(0,1fr); gap:2rem; } } /* classes the Mother renderer emits that the BLITZ template never needed: gate counts other than two, a gate sub-line, and the per-gate topic list */ .goal-gates--n1{grid-template-columns:1fr} .goal-gates--n3{grid-template-columns:repeat(3,1fr)} .goal-gates--n4{grid-template-columns:repeat(2,1fr)} .goal-gate-s{margin:.1rem 0 .6rem;color:var(--muted);font-size:.95rem} .goal-topics{list-style:none;margin:.9rem 0 0;padding:.8rem 0 0;border-top:1px solid var(--border);display:grid;gap:.45rem} .goal-topics li{display:flex;align-items:center;gap:.55rem;font-size:.95rem;color:var(--ink)} .goal-topics .cr-card-chip{width:1.5rem;height:1.5rem;flex:0 0 1.5rem} @media(max-width:40rem){.goal-gates--n3,.goal-gates--n4{grid-template-columns:1fr}} /* -- SHARED-BLOCK DEFAULTS (2026-10-20, IQ cut K9b). scroll-to-content.cfm prints its link with utility class names (inline-flex, items-center, gap-2, text-sm, font-semibold, text-brand-700, h-5, w-5) and the shared CSS defined none of them, so a door whose own stylesheet never had them rendered the svg at its 300x150 replaced-element default and the hero CTA row stretched to that height on every page (SAGE dev, Abdul: "hero section broke", 117 pages). The doors that DO define them (the DKT rows) must keep their own values whatever the cascade order, so these are written at ZERO specificity with :where() - any door rule wins. Colour is the theme variable, not a palette. -- */ :where(.inline-flex){display:inline-flex} :where(.items-center){align-items:center} :where(.gap-2){gap:.5rem} :where(.text-sm){font-size:.9rem} :where(.font-semibold){font-weight:600} :where(.text-brand-700){color:var(--accent);text-decoration:none} :where(.h-5){height:1.25rem} :where(.w-5){width:1.25rem} /* -- MOTHER'S CARD CHIP (2026-10-20, IQ cut K15 seed). content-blocks.ts prints an inline svg inside span.cr-card-chip on category cards, topic grids and section summaries. The sizes lived only in the DKT door rows, so a door without them rendered each icon at the column's full width (SAGE /iq-scores: fifteen 748px icons, Abdul's QC). Zero specificity, so every door row that already sizes the chip keeps its own values; the numbers are THUNDER's (its row, 2026-10-20). The rest of the card family (98 rules) stays a tracked move: IQ_KING_DOOR_WORK_ORDER K15. -- */ :where(.cr-card-chip){display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;flex:0 0 auto;border-radius:.5rem;background:var(--accent-soft);color:var(--accent-text,var(--accent))} :where(.cr-card-chip) svg{width:1.3rem;height:1.3rem;stroke-width:1.8} /* -- SOURCES / EVIDENCE BOX (2026-10-20): a page whose spec carries verified sources renders a citations box after its body (lib/mother/evidence-box.ts). NICHE-NEUTRAL — the door's own palette tokens style it (SAGE renders it warm/terracotta). Zero specificity (:where), so any door row can override a rule without a fight. External citation links are nofollow in the markup. -- */ :where(.evidence-sources){margin:2.5rem 0 0;padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg,.75rem)} :where(.evidence-sources__title){margin:0 0 .75rem;font-size:1rem;font-weight:700;color:var(--head,var(--ink))} :where(.evidence-sources__list){margin:0;padding:0;list-style:none;display:grid;gap:.6rem} :where(.evidence-source){font-size:.92rem;line-height:1.45;color:var(--ink-muted,var(--muted));display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem} :where(.evidence-source a){color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-soft)} :where(.evidence-source a:hover){border-bottom-color:var(--accent)} :where(.evidence-tier){font-size:.72rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-muted,var(--muted));background:var(--accent-soft);padding:.1rem .45rem;border-radius:.3rem;white-space:nowrap}