@charset "UTF-8";
:root {
--ink:#19181b;
--muted:#68656b;
--paper:#fbfaf8;
--soft:#f1efeb;
--line:#ddd9d2;
--accent:#e84b35;
--dark:#202225;
--max:1120px;
--content:720px
}
* {
box-sizing:border-box
}
html {
scroll-behavior:smooth
}
body {
margin:0;
background:var(--paper);
color:var(--ink);
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
line-height:1.6
}
h1,h2,h3,.brand {
font-family:Georgia,'Times New Roman',serif;
line-height:1.08
}
h1 {
font-size:62px;
line-height:1.15;
margin:.1em 0 .3em
}
h2 {
font-size:clamp(2rem,4vw,3.2rem);
margin:.2em 0 .35em
}
h3 {
font-size:1.35rem;
margin:.4em 0
}
p {
margin:.4em 0 1em
}
.site-header {
background:var(--dark);
color:#fff;
position:relative;
z-index:2
}
.nav-wrap,.footer-wrap {
max-width:var(--max);
margin:auto;
padding:16px 24px;
display:flex;
align-items:center;
gap:34px
}
.brand {
font-size:2rem;
color:#fff;
text-decoration:none;
font-weight:bold;
margin-right:auto
}
.brand span {
color:var(--accent)
}
nav {
display:flex;
align-items:center;
gap:26px
}
nav a,.footer-wrap a {
color:#fff;
text-decoration:none;
font-size:.9rem
}
nav a:hover,.footer-wrap a:hover,.text-link:hover {
color:var(--accent)
}
.nav-join,.button {
background:var(--accent);
color:#fff!important;
border-radius:4px;
padding:11px 20px;
font-weight:bold
}
.nav-toggle {
display:none;
background:none;
border:1px solid #777;
color:#fff;
padding:7px 10px
}
.hero {
background:var(--dark);
color:#fff
}
.hero-wrap,
.article-hero-wrap {
max-width:var(--max);
margin:auto;
padding:0 24px;
display:grid;
grid-template-columns:1.1fr .9fr;
gap:48px;
align-items:center;
min-height:510px
}
.hero-copy,
.article-hero-copy {
padding:60px 0
}
.hero-image,
.article-hero-image {
min-width:0;
height:100%;
display:flex;
align-items:center
}
.hero-image img,
.article-hero-image img,
.article-hero img {
display:block;
width:100%;
max-height:440px;
object-fit:cover;
border-radius:4px
}
.eyebrow {
color:var(--accent);
font-size:.78rem;
letter-spacing:.14em;
text-transform:uppercase;
font-weight:bold
}
.hero .eyebrow,
.article-hero .eyebrow {
color:#ff806c
}
.lead {
font-size:1.2rem;
color:var(--muted)
}
.hero .lead,
.article-hero .lead {
color:#e2dedb
}
.actions {
display:flex;
flex-wrap:wrap;
gap:14px;
margin:30px 0
}
.button {
display:inline-block;
text-decoration:none;
border:1px solid var(--accent)
}
.button-ghost {
background:transparent!important;
border-color:#fff
}
.notice {
font-size:.82rem;
color:#bab6b4
}
.feature-strip {
max-width:var(--max);
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
padding:30px 24px;
border-bottom:1px solid var(--line)
}
.feature-strip>div {
text-align:center;
padding:0 20px;
border-right:1px solid var(--line)
}
.feature-strip>div:last-child {
border:0
}
.feature-strip svg {
width:34px;
height:34px;
fill:none;
stroke:var(--accent);
stroke-width:1.6
}
.feature-strip h2 {
font-size:1.25rem;
margin:.3em
}
.feature-strip p {
font-size:.9rem;
color:var(--muted);
margin:0
}
.section {
max-width:var(--max);
margin:auto;
padding:80px 24px
}
.section-heading {
max-width:100%
}
.card-grid {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:30px
}
.info-card {
padding:24px;
border:1px solid var(--line);
background:#fff;
color:var(--ink);
text-decoration:none;
transition:.2s
}
.info-card:hover {
transform:translateY(-3px);
border-color:var(--accent)
}
.card-number {
color:var(--accent);
font-weight:bold
}
.info-card p {
color:var(--muted);
font-size:.95rem
}
.split-section {
background:var(--soft);
padding:70px 0
}
.split-wrap {
max-width:var(--max);
margin:auto;
padding:0 24px;
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center
}
.split-section img {
width:100%;
max-height:360px;
object-fit:cover;
border-radius:4px
}
.tinted {
background:#242629;
color:#fff;
padding:80px 0
}
.tinted-wrap {
max-width:var(--max);
margin:auto;
padding:0 24px
}
.tinted .eyebrow {
color:#ff806c
}
.decision-table {
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:#555;
margin-top:28px
}
.decision-table div {
background:#242629;
padding:22px;
display:flex;
flex-direction:column
}
.decision-table strong {
font-family:Georgia,serif;
font-size:1.2rem
}
.decision-table span {
color:#c8c6c5;
font-size:.95rem
}
.faq {
max-width:var(--max);
margin:auto
}
.faq details {
border-bottom:1px solid var(--line);
padding:18px 0
}
.faq summary {
cursor:pointer;
font-weight:bold;
font-size:1.08rem
}
.faq p {
color:var(--muted);
margin:.6em 0 0
}
.cta {
text-align:center;
background:var(--accent);
color:#fff;
padding:55px 24px
}
.cta h2 {
margin-top:0
}
.cta .button {
background:#fff;
color:var(--accent)!important;
border-color:#fff
}
.profile-section {
background:#fff;
padding:80px 0
}
.profile-wrap {
max-width:var(--max);
margin:auto;
padding:0 24px
}
.profile-points {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin-top:28px
}
.profile-points>div {
border-top:3px solid var(--accent);
padding:18px 0
}
.profile-points h3 {
margin-top:0
}
.profile-points p {
color:var(--muted);
font-size:.95rem
}
.reading-section {
max-width:100%
}
.reading-section h2 {
max-width:100%
}
footer {
background:var(--dark);
color:#fff
}
.footer-wrap {
flex-wrap:wrap
}
.footer-wrap>div {
display:flex;
gap:20px
}
.footer-wrap small {
width:100%;
color:#aaa;
font-size:.75rem
}
.article-hero {
background:var(--dark);
color:#fff
}
.article {
max-width:var(--max);
margin:auto;
padding:80px 24px
}
.article>*,
.article .template {
max-width:100%;
margin-left:0;
margin-right:0
}
.article h1 {
font-size:clamp(1.85rem,3.2vw,2.5rem);
line-height:1.15;
margin:.1em 0 .3em
}
.article h2 {
font-size:clamp(1.75rem,3vw,2.4rem);
margin:1.4em 0 .35em
}
.article h2:first-of-type {
margin-top:.4em
}
.article p {
font-size:17px;
line-height:1.6;
color:var(--ink)
}
.article a {
color:#bd3929;
font-weight:bold
}
.article-compact-hero {
background:var(--dark);
color:#fff;
padding:48px 0 40px
}
.article-compact-wrap {
max-width:var(--max);
margin:auto;
padding:0 24px
}
.article-compact-wrap h1 {
color:#fff;
font-size:clamp(1.9rem,3.4vw,2.6rem);
line-height:1.18;
margin:.15em 0 .3em
}
.article-compact-wrap .lead {
color:#e2dedb;
font-size:1.15rem;
max-width:820px;
margin:0 0 24px
}
.jump-nav {
display:flex;
flex-wrap:wrap;
gap:12px;
margin:24px 0 18px
}
.jump-nav a {
display:inline-block;
background:#2b2e33;
color:#fff;
text-decoration:none;
padding:8px 14px;
border-radius:4px;
font-size:.9rem;
border:1px solid #444850;
transition:.15s
}
.jump-nav a:hover,
.jump-nav a:focus-visible {
background:var(--accent);
border-color:var(--accent);
color:#fff
}
.identity-notice {
background:var(--soft);
border-left:4px solid #8e8a86;
padding:14px 18px;
margin:0 0 32px;
color:var(--muted);
font-size:.92rem
}
.identity-notice strong {
color:var(--ink)
}
.table-responsive {
width:100%;
overflow-x:auto;
margin:24px 0 32px;
border:1px solid var(--line);
background:#fff;
border-radius:4px
}
.data-table {
width:100%;
border-collapse:collapse;
text-align:left;
min-width:540px
}
.data-table th,
.data-table td {
padding:14px 16px;
border-bottom:1px solid var(--line);
font-size:.95rem;
vertical-align:top
}
.data-table th {
background:var(--soft);
color:var(--ink);
font-weight:bold;
font-size:.9rem;
text-transform:uppercase;
letter-spacing:.04em
}
.data-table tr:last-child td {
border-bottom:none
}
.data-table tr:hover td {
background:#faf8f5
}
.checklist {
margin:18px 0 24px 20px;
padding:0
}
.checklist li {
margin-bottom:10px;
line-height:1.55
}
.identity-notice-dark {
background:#2b2e33;
border-left-color:#ff806c;
color:#e2dedb;
margin:24px 0 0
}
.identity-notice-dark strong {
color:#fff
}
.support-table th:first-child,
.support-table td:first-child {
width:34%
}
.support-template {
margin:24px 0 12px;
}
.support-template pre {
margin:0;
white-space:pre-wrap;
font:inherit;
line-height:1.65;
color:var(--ink);
user-select:text
}
.copy-controls {
display:flex;
align-items:center;
gap:14px;
margin-bottom:28px
}
.copy-status {
color:var(--muted);
font-size:.9rem
}
.replacement-label {
font-weight:bold
}
.replacement-list {
margin:0 0 32px 20px;
padding:0
}
.replacement-list li {
margin-bottom:10px;
line-height:1.55
}
.follow-up-example {
background:var(--soft);
border-left:4px solid var(--accent);
padding:18px 24px;
margin-top:24px
}
.follow-up-example strong {
display:block;
margin-bottom:8px
}
.follow-up-example p {
margin:0
}
.step-list {
margin:20px 0 30px 22px;
padding:0
}
.step-list li {
margin-bottom:16px;
padding-left:6px;
line-height:1.6
}
.step-list strong {
color:var(--ink)
}
.results-table th:first-child,
.results-table td:first-child {
width:34%
}
@media(min-width:801px) {
.jump-nav {
display:grid;
grid-template-columns:repeat(4,1fr)
}
.jump-nav a {
text-align:center
}
}
.article-cta {
border-top:1px solid var(--line);
margin-top:45px;
padding-top:28px;
display:flex;
gap:24px;
align-items:center;
flex-wrap:wrap
}
.article-cta .button {
color:#fff
}
.text-link {
color:var(--accent)
}
.template {
background:var(--soft);
border-left:4px solid var(--accent);
padding:20px 24px;
margin:25px 0
}
.template p {
margin:.2em 0;
font-family:monospace;
font-size:.9rem
}
@media(max-width:800px) {
.nav-wrap {
padding:13px 18px
}
.nav-toggle {
display:block
}
nav {
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:var(--dark);
padding:18px;
flex-direction:column;
align-items:stretch
}
nav.open {
display:flex
}
.hero-wrap,
.article-hero-wrap,
.split-wrap {
grid-template-columns:1fr;
gap:30px;
min-height:auto
}
.hero-copy,
.article-hero-copy {
padding:45px 0 0
}
.hero-image,
.article-hero-image {
padding-bottom:45px
}
.feature-strip,
.card-grid,
.decision-table,
.profile-points {
grid-template-columns:1fr
}
.feature-strip>div {
border-right:0;
border-bottom:1px solid var(--line);
padding:16px 0
}
.feature-strip>div:last-child {
border-bottom:0
}
.section,
.article,
.split-section,
.tinted,
.profile-section {
padding:50px 18px
}
.hero-wrap,
.article-hero-wrap,
.split-wrap,
.tinted-wrap,
.profile-wrap,
.footer-wrap {
padding:0 18px
}
}
.article-lead-image {
width:100%;
max-height:360px;
object-fit:cover;
border-radius:18px;
margin-top:28px
}
.legal-article .legal-date {
color:var(--muted);
font-size:.95rem
}

.support-links {
grid-template-columns:repeat(3,1fr);
margin-top:24px
}
.support-links .info-card {
min-height:0
}
.checklist {
margin:20px 0 26px 22px;
padding:0
}
.checklist li {
margin-bottom:10px;
line-height:1.6
}
@media(max-width:800px) {
.support-links {
grid-template-columns:1fr
}
}
@media(max-width:500px) {
body {
font-size:16px
}
.section,
.article,
.split-section,
.tinted,
.profile-section {
padding:40px 16px
}
.hero-wrap,
.article-hero-wrap,
.split-wrap,
.tinted-wrap,
.profile-wrap,
.footer-wrap,
.nav-wrap {
padding:0 16px
}
}