:root { color-scheme: light; --er-navy: #06384c; --er-orange: #d7410b; --er-orange-dark: #a6330d; --er-orange-ink: #a93816; --er-ink: #333; --er-muted: #646464; --er-line: #e5e6e7; --er-canvas: #f7f8f8; --er-paper: #fff; --er-max: 1170px; }
* { box-sizing: border-box; }
html { font-family: Arial, Helvetica, sans-serif; background: var(--er-canvas); color: var(--er-ink); line-height: 1.58; }
body { margin: 0; }
a { color: var(--er-navy); text-decoration: none; }
a:hover, a:focus-visible { color: var(--er-orange); text-decoration: underline; }
:focus-visible { outline: 3px solid #ffb000; outline-offset: 3px; }
.eRna-skip { position: absolute; left: -10000px; top: auto; }
.eRna-skip:focus { left: 1rem; top: 1rem; z-index: 100; background: #fff; padding: .7rem 1rem; border: 2px solid var(--er-navy); }
.eRna-shell { width: min(calc(100% - 2rem), var(--er-max)); margin-inline: auto; }
.eRna-header { background: #fff; border-bottom: 1px solid var(--er-line); box-shadow: 0 0 2px rgb(0 0 0 / .1); padding: 12px 0; position: relative; z-index: 10; }
.eRna-header__inner { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.eRna-brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--er-navy); font-size: 1.55rem; font-weight: 800; letter-spacing: .035em; }
.eRna-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--er-navy); color: #fff; font-family: Georgia, serif; font-size: 1.5rem; }
.eRna-insight { padding-left: .75rem; border-left: 1px solid #cdd8dc; color: var(--er-orange-ink); font-size: .67rem; font-weight: 700; letter-spacing: .11em; }
.eRna-nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.eRna-nav a { color: var(--er-ink); font-size: 1rem; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.eRna-nav a[aria-current=page], .eRna-nav a:hover, .eRna-nav a:focus-visible { color: var(--er-orange); text-decoration: none; }
.eRna-contact { border: 1px solid var(--er-orange); padding: 0 .8rem; color: var(--er-orange-ink)!important; }
.eRna-contact:hover, .eRna-contact:focus-visible { background: var(--er-orange); color: #fff!important; }
.eRna-main { padding: 0 0 4rem; }
.eRna-hero { min-height: 390px; margin-bottom: 0; background: radial-gradient(circle at 18% 32%, rgb(255 255 255 / .14) 0 7%, transparent 7.2%), radial-gradient(circle at 27% 64%, rgb(255 255 255 / .08) 0 13%, transparent 13.2%), linear-gradient(115deg, #06384c 0 58%, #0a647b 100%); display: flex; align-items: center; }
.eRna-hero__card { width: min(100%, 560px); margin-left: auto; background: #fff; padding: clamp(2rem, 4vw, 3.25rem); text-align: left; border-top: 5px solid var(--er-orange); box-shadow: -24px 24px 0 rgb(255 255 255 / .14); }
.eRna-eyebrow { margin: 0 0 .45rem; color: var(--er-orange-ink); font-size: .79rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.eRna-hero h1 { margin: 0 0 .7rem; color: var(--er-orange-ink); font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: .03em; line-height: 1; text-transform: uppercase; }
.eRna-hero p { margin: 0; color: #555; font-size: 1.08rem; }
.eRna-main-grid, .eRna-article-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 3rem; align-items: start; }
.eRna-section-title { margin: 0 0 1.3rem; color: var(--er-navy); font-size: 1.6rem; font-weight: 600; }
.eRna-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.eRna-card { display: flex; flex-direction: column; min-width: 0; background: var(--er-paper); border: 1px solid #dce4e7; border-radius: 4px; box-shadow: 0 10px 28px rgb(6 56 76 / .07); overflow: hidden; }
.eRna-card:first-child { grid-column: 1 / -1; }
.eRna-card__visual { display: grid; place-items: end start; min-height: 138px; padding: 1rem; background: linear-gradient(135deg, #0a647b, #06384c); position: relative; overflow: hidden; }
.eRna-card:first-child .eRna-card__visual { min-height: 215px; }
.eRna-card__visual::before { content: ""; position: absolute; width: 210px; height: 210px; right: -55px; top: -72px; border: 1px solid rgb(255 255 255 / .22); border-radius: 50%; box-shadow: 0 0 0 28px rgb(255 255 255 / .045), 0 0 0 62px rgb(255 255 255 / .03); }
.eRna-card__visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .42), transparent 68%); }
.eRna-card:nth-child(3n+2) .eRna-card__visual { background: linear-gradient(135deg, #0b5368, #073247); }
.eRna-card:nth-child(3n) .eRna-card__visual { background: linear-gradient(135deg, #135064, #062f41); }
.eRna-card__topic { position: relative; z-index: 1; padding: .34rem .65rem; background: var(--er-orange); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.eRna-card__content { padding: 1.35rem 1.45rem 1.4rem; }
.eRna-card h2 { margin: 0 0 .65rem; font-size: 1.28rem; line-height: 1.3; }
.eRna-card h2 a { color: var(--er-navy); }
.eRna-meta { display: flex; flex-wrap: wrap; gap: .4rem .85rem; color: var(--er-muted); font-size: .79rem; text-transform: uppercase; }
.eRna-badge { color: var(--er-orange-ink); font-weight: 700; }
.eRna-summary { margin: 1rem 0; color: #4e5558; }
.eRna-readmore { display: inline-flex; align-items: center; gap: .38rem; color: var(--er-orange-ink); font-weight: 700; }
.eRna-readmore::after { content: "→"; font-size: 1.2rem; line-height: 1; }
.eRna-sidebar { display: grid; gap: 1.75rem; }
.eRna-sidebox { background: #fff; border: 1px solid var(--er-line); }
.eRna-sidebox__heading { display: block; padding: .8rem 1rem; background: var(--er-navy); color: #fff; font-size: .92rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.eRna-sidebox__content { padding: 1rem; }
.eRna-topic-list, .eRna-trend-list { margin: 0; padding: 0; list-style: none; }
.eRna-topic-list li + li, .eRna-trend-list li + li { border-top: 1px solid #edf0f1; }
.eRna-topic-list a { display: block; padding: .72rem 0; color: var(--er-navy); font-weight: 600; }
.eRna-topic-list a::before { content: "›"; color: var(--er-orange); font-size: 1.2rem; margin-right: .5rem; }
.eRna-trend-list a { display: block; padding: .8rem 0; color: var(--er-ink); font-size: .92rem; font-weight: 600; }
.eRna-trend-list small { display: block; margin-top: .25rem; color: var(--er-orange-ink); font-size: .7rem; text-transform: uppercase; }
.eRna-contact-card { background: linear-gradient(145deg, #06384c, #0a5369); border-top: 4px solid var(--er-orange); border-radius: 4px; padding: 1.4rem; box-shadow: 0 12px 28px rgb(6 56 76 / .15); }
.eRna-contact-card .eRna-eyebrow { color: #f6c5b2; }
.eRna-contact-card h2 { margin: 0 0 .65rem; color: #fff; font-size: 1.35rem; line-height: 1.28; }
.eRna-contact-card p { margin: .35rem 0 1.1rem; color: #e2eef1; }
.eRna-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .58rem .9rem; background: var(--er-orange); color: #fff; font-weight: 700; }
.eRna-button:hover, .eRna-button:focus-visible { background: var(--er-orange-dark); color: #fff; text-decoration: none; }
.eRna-discover-card { padding: 1.25rem; background: #fff; border: 1px solid var(--er-line); border-top: 3px solid var(--er-navy); }
.eRna-discover-card h2 { margin: 0 0 .45rem; color: var(--er-navy); font-size: 1.18rem; }
.eRna-discover-card p { margin: 0 0 .85rem; color: #535d60; font-size: .9rem; }
.eRna-discover-card div { display: flex; gap: .7rem 1rem; flex-wrap: wrap; }
.eRna-discover-card a { color: var(--er-orange-ink); font-weight: 700; }
.eRna-breadcrumb { margin: 2.4rem 0 1.9rem; color: #647074; font-size: .88rem; }
.eRna-breadcrumb a { color: var(--er-navy); }
.eRna-breadcrumb span { padding: 0 .45rem; color: #464f52; }
.eRna-article { background: #fff; border: 1px solid #dfe5e7; border-radius: 4px; box-shadow: 0 14px 38px rgb(6 56 76 / .06); padding: clamp(1.25rem, 3vw, 2.5rem); }
.eRna-article h1 { margin: .15rem 0 1rem; color: var(--er-navy); font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.16; }
.eRna-body { max-width: 74ch; font-size: 1.04rem; overflow-wrap: anywhere; }
.eRna-body h2, .eRna-body h3, .eRna-body h4 { color: var(--er-navy); line-height: 1.28; margin-top: 1.8em; }
.eRna-body img, .eRna-body video { display: block; max-width: 100%; height: auto; margin: 1.4rem auto; }
.eRna-body table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.eRna-body th, .eRna-body td { border: 1px solid #d6dddf; padding: .65rem; text-align: left; }
.eRna-body blockquote { margin: 1.5rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--er-orange); background: #f8fafb; }
.eRna-body pre { overflow: auto; background: #0b2e3c; color: #fff; padding: 1rem; }
.eRna-body .ctaSec { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: clamp(1.35rem, 3vw, 2.25rem); align-items: center; margin: 2.25rem 0; padding: clamp(1.4rem, 3vw, 2rem); overflow: hidden; background: linear-gradient(135deg, #06384c 0%, #06445a 62%, #0a6176 100%); border: 1px solid #0a5267; border-left: 6px solid var(--er-orange); border-radius: 8px; box-shadow: 0 16px 34px rgb(6 56 76 / .18); color: #fff; }
.eRna-body .ctaSec .ctaLeft, .eRna-body .ctaSec .ctaRight { min-width: 0; }
.eRna-body .ctaSec .ctaLeft h2 { margin: 0 0 .7rem; color: #fff; font-size: clamp(1.35rem, 2.5vw, 1.7rem); line-height: 1.22; }
.eRna-body .ctaSec .ctaLeft p { margin: 0; color: #e2eef1; line-height: 1.6; }
.eRna-body .ctaSec .ctaRight { padding-left: clamp(1.15rem, 2.5vw, 1.8rem); border-left: 1px solid rgb(255 255 255 / .24); }
.eRna-body .ctaSec .ctaRight h3 { margin: 0 0 1rem; color: #fff; font-size: 1.08rem; line-height: 1.45; }
.eRna-body .ctaSec .ctaButton { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1.05rem; background: var(--er-orange); border: 2px solid var(--er-orange); border-radius: 3px; box-shadow: 0 7px 18px rgb(0 0 0 / .18); color: #fff; font-weight: 800; line-height: 1.25; text-align: center; }
.eRna-body .ctaSec .ctaButton:hover, .eRna-body .ctaSec .ctaButton:focus-visible { background: #fff; border-color: #fff; color: var(--er-navy); text-decoration: none; }
.eRna-governance, .eRna-related { margin-top: 2.2rem; padding: clamp(1.2rem, 3vw, 1.8rem); background: #f3f7f8; border-top: 3px solid var(--er-orange); border-radius: 3px; }
.eRna-governance h2 { margin: .1rem 0 0; color: var(--er-navy); font-size: 1.35rem; line-height: 1.25; }
.eRna-trust-head p:last-child { max-width: 62ch; margin: .55rem 0 0; color: #4d5d61; }
.eRna-trust-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.eRna-trust-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .75rem; margin: 1.15rem 0; }
.eRna-trust-grid p { margin: 0; padding: .85rem; background: #fff; border: 1px solid #dbe5e8; }
.eRna-trust-grid strong, .eRna-trust-grid span { display: block; }
.eRna-trust-grid strong { color: var(--er-navy); font-size: .86rem; }
.eRna-trust-grid span { margin-top: .25rem; color: #59676b; font-size: .78rem; }
.eRna-trust-grid small { display: block; margin-top: .18rem; color: #667478; font-size: .73rem; }
.eRna-citations { margin: .75rem 0; padding: .8rem 1rem; background: #fff; border: 1px solid #dbe5e8; }
.eRna-citations summary { cursor: pointer; color: var(--er-navy); font-weight: 700; }
.eRna-citations ul { margin: .75rem 0 0; padding-left: 1.1rem; }
.eRna-citations li + li { margin-top: .5rem; }
.eRna-citations span { display: block; color: var(--er-muted); font-size: .75rem; }
.eRna-next-step { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 1.25rem; margin-top: 1.35rem; padding: 1.3rem; background: #fff; border: 1px solid #d8e3e6; border-left: 4px solid var(--er-orange); }
.eRna-next-step h3 { margin: .1rem 0 .35rem; color: var(--er-navy); font-size: 1.2rem; line-height: 1.3; }
.eRna-next-step p { margin: 0; color: #566468; }
.eRna-next-step__actions { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; }
.eRna-secondary { display: inline-flex; align-items: center; min-height: 42px; padding: .55rem .75rem; border-bottom: 2px solid var(--er-orange); color: var(--er-navy); font-weight: 700; }
.eRna-related h2 { margin-top: 0; font-size: 1.3rem; }
.eRna-related ul { margin: 0; padding-left: 1.1rem; }
.eRna-related li + li { margin-top: .55rem; }
.eRna-decision { margin: 0 0 2.5rem; padding: 1.45rem 0; background: #052f40; color: #fff; border-bottom: 4px solid var(--er-orange); }
.eRna-decision__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.eRna-decision .eRna-eyebrow { color: #f6c5b2; }
.eRna-decision h2 { margin: 0 0 .3rem; font-size: 1.4rem; }
.eRna-decision p { margin: 0; color: #dbe8ec; }
.eRna-decision .eRna-button { white-space: nowrap; }
.eRna-page-intro { margin: 2.5rem 0 2rem; padding: 1.75rem; background: #fff; border-left: 4px solid var(--er-orange); }
.eRna-page-intro h1 { margin: .1rem 0 .45rem; color: var(--er-navy); }
.eRna-wiki-section { border-top: 1px solid var(--er-line); padding: 1.2rem 0; }
.eRna-wiki-section:first-of-type { border-top: 0; }
.eRna-wiki-section h2 { color: var(--er-navy); font-size: 1.35rem; }
.eRna-links { columns: 2; gap: 2rem; }
.eRna-links li { break-inside: avoid; margin-bottom: .5rem; }
.eRna-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 2rem; }
.eRna-pagination a, .eRna-pagination span { min-width: 2.25rem; padding: .4rem .6rem; border: 1px solid #d8e0e2; text-align: center; }
.eRna-pagination [aria-current=page] { background: var(--er-navy); border-color: var(--er-navy); color: #fff; }
.eRna-pagination .eRna-pagination__direction { min-width: 5.2rem; color: var(--er-navy); font-weight: 700; }
.eRna-pagination .eRna-pagination__ellipsis { min-width: auto; border: 0; }
.eRna-footer { background: var(--er-navy); color: #dedede; padding: 1.65rem 0; font-size: .77rem; text-transform: uppercase; }
.eRna-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.eRna-footer a { color: #fff; }
.eRna-footer nav { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (min-width: 901px) { .eRna-article-sidebar { position: sticky; top: 1.5rem; } }
@media (max-width: 900px) { .eRna-main-grid, .eRna-article-grid { grid-template-columns: 1fr; gap: 2rem; } .eRna-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eRna-contact-card { height: 100%; } }
@media (max-width: 720px) { .eRna-header__inner { align-items: flex-start; flex-direction: column; } .eRna-nav { gap: .85rem; } .eRna-hero { min-height: 320px; } .eRna-hero__card { margin-left: 0; box-shadow: none; } .eRna-grid, .eRna-sidebar, .eRna-trust-grid, .eRna-next-step, .eRna-body .ctaSec { grid-template-columns: 1fr; } .eRna-card:first-child { grid-column: auto; } .eRna-card:first-child .eRna-card__visual { min-height: 150px; } .eRna-decision__inner { align-items: flex-start; flex-direction: column; } .eRna-next-step__actions { justify-content: flex-start; } .eRna-body .ctaSec .ctaRight { padding: 1.15rem 0 0; border-top: 1px solid rgb(255 255 255 / .24); border-left: 0; } .eRna-links { columns: 1; } .eRna-trust-head { align-items: flex-start; flex-direction: column; } }
@media (max-width: 460px) { .eRna-shell { width: min(calc(100% - 1rem), var(--er-max)); } .eRna-header { padding-block: .65rem; } .eRna-brand { font-size: 1.3rem; } .eRna-insight { font-size: .58rem; } .eRna-nav { gap: .55rem; } .eRna-nav a { font-size: .9rem; } .eRna-hero__card, .eRna-card__content, .eRna-article { padding: 1rem; } .eRna-contact-card .eRna-button, .eRna-next-step__actions, .eRna-next-step__actions .eRna-button, .eRna-next-step__actions .eRna-secondary, .eRna-body .ctaSec .ctaButton { width: 100%; } .eRna-body .ctaSec { margin-inline: -.25rem; padding: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none!important; scroll-behavior: auto!important; transition: none!important; } }