/* Approved SaveRx relief visual language. Colors live in tokens.css. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');

:root {
--ink:var(--text);
--blue:var(--teal);
--paper:var(--bg);
--muted:var(--text-2);
--line:var(--border)}
* {
box-sizing:border-box}
html {
scroll-behavior:smooth;
scroll-padding-top:30px}
body {
margin:0;
background:var(--paper);
color:var(--ink);
font:15px 'DM Sans',sans-serif}
button,input {
font:inherit}
button,a {
 -webkit-tap-highlight-color:transparent}
a {
color:inherit;
text-decoration:none}
button {
cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible {
outline:3px solid var(--relief-art-24);
outline-offset:5px}
header {
height:98px;
margin:0 5%;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line)}
.logo {
font:800 29px 'Manrope',sans-serif;
letter-spacing:-1.7px;
display:flex;
align-items:center;
gap:10px}
.mark {
width:30px;
height:34px;
display:inline-grid;
place-items:center;
color:var(--blue);
font-size:40px;
transform:rotate(-14deg)}
.logo small {
font-size:15px;
font-weight:500;
letter-spacing:-.5px;
color:var(--relief-art-21);
margin-left:-6px;
margin-top:10px}
nav {
display:flex;
gap:34px;
align-items:center;
font-weight:550;
font-size:14px}
.pill-link {
border:1px solid var(--relief-art-40);
border-radius:30px;
padding:12px 20px;
display:inline-flex;
gap:20px;
align-items:center}
.hero {
position:relative;
padding:58px 5% 24px;
min-height:690px;
overflow:hidden}
.eyebrow {
font-size:11px;
letter-spacing:1.8px;
text-transform:uppercase;
font-weight:700;
display:flex;
align-items:center;
gap:9px}
.dot {
background:var(--relief-art-12);
width:7px;
height:7px;
border-radius:100%}
h1 {
font:650 clamp(54px,5.7vw,83px)/1.04 'Manrope',sans-serif;
letter-spacing:-4.5px;
max-width:760px;
margin:26px 0 23px;
position:relative;
z-index:2}
h1 em {
font-family:Georgia,serif;
font-weight:400;
color:var(--blue);
letter-spacing:-4px}
h1 .underline {
display:inline-block;
position:relative}
h1 .underline:after {
content:'';
position:absolute;
bottom:-8px;
left:5px;
width:96%;
height:13px;
border-top:3px solid var(--blue);
border-radius:50%;
transform:rotate(-3deg)}
.intro {
color:var(--relief-art-15);
line-height:1.65;
font-size:16px;
max-width:440px;
margin:28px 0}
.search-wrap {
position:relative;
max-width:590px;
z-index:5}
.search {
background:white;
border:1px solid var(--relief-art-43);
box-shadow:0 9px 0 -5px var(--relief-art-67),0 12px 28px var(--relief-art-103);
border-radius:17px;
display:flex;
align-items:center;
padding:9px 9px 9px 20px;
gap:14px}
.search svg {
width:21px;
flex-shrink:0}
.search input {
width:100%;
min-width:0;
border:0;
outline:0;
height:42px;
background:transparent}
.search button {
border:0;
background:var(--blue);
color:white;
border-radius:11px;
padding:17px 21px;
white-space:nowrap;
font-size:13px;
font-weight:600}
.popular {
font-size:12px;
display:flex;
gap:9px;
margin-top:20px;
align-items:center;
flex-wrap:wrap;
color:var(--muted)}
.popular button {
border:1px solid var(--relief-art-53);
border-radius:20px;
background:transparent;
padding:6px 12px;
color:var(--ink);
font-size:12px}
.privacy {
font-size:11px;
color:var(--relief-art-22);
display:flex;
gap:20px;
margin-top:23px}
.results {
position:absolute;
top:76px;
left:0;
right:0;
background:white;
box-shadow:0 20px 40px var(--relief-art-102);
border:1px solid var(--relief-art-56);
border-radius:15px;
max-height:280px;
overflow:auto}
.results a {
display:flex;
justify-content:space-between;
padding:17px;
border-bottom:1px solid var(--relief-art-1)}
.results a:hover {
background:var(--relief-art-91)}
.results p {
padding:8px 18px}
.results small {
color:var(--muted)}
[hidden] {
display:none!important}
.scene {
position:absolute;
width:470px;
height:490px;
right:5%;
top:60px;
pointer-events:none}
.orbit {
position:absolute;
width:410px;
height:410px;
right:-5px;
top:10px;
border-radius:50%;
background:var(--relief-art-77)}
.orbit:after {
content:'';
position:absolute;
inset:33px;
border:1px dashed var(--relief-art-39);
border-radius:50%}
.platform {
position:absolute;
bottom:5px;
left:35px;
width:430px;
height:55px;
background:radial-gradient(ellipse,var(--relief-art-105),transparent 70%);
filter:blur(5px)}
.bottle {
width:163px;
height:213px;
background:linear-gradient(100deg,var(--relief-art-38),var(--relief-art-92) 32%,var(--relief-art-52) 75%,var(--relief-art-35));
border-radius:27px 27px 38px 38px;
position:absolute;
right:32px;
top:191px;
transform:rotate(15deg);
box-shadow:inset -10px -12px 20px var(--relief-art-114),13px 26px 22px var(--relief-art-108)}
.bottle:before {
content:'';
position:absolute;
top:-36px;
left:8px;
width:147px;
height:54px;
border-radius:12px 12px 8px 8px;
background:repeating-linear-gradient(90deg,var(--relief-art-87) 0px,var(--relief-art-2) 3px,var(--relief-art-48) 5px,var(--relief-art-89) 7px);
box-shadow:0 5px 4px var(--relief-art-110)}
.label {
position:absolute;
top:47px;
left:0;
width:100%;
background:var(--relief-art-94);
padding:18px 15px;
color:var(--relief-art-13);
font:700 27px 'Manrope';
letter-spacing:-1px;
box-shadow:0 2px 5px var(--relief-art-109)}
.label small {
display:block;
letter-spacing:1px;
font:9px 'DM Sans';
margin-top:9px}
.savings-card {
position:absolute;
top:88px;
left:22px;
width:235px;
height:163px;
border:1px solid var(--relief-art-100);
border-radius:16px;
background:linear-gradient(135deg,var(--relief-art-42),var(--relief-art-63));
box-shadow:7px 17px 24px var(--relief-art-106),inset 2px 2px 3px white;
transform:rotate(-12deg);
padding:23px;
color:var(--relief-art-4)}
.savings-card strong {
font:700 14px 'Manrope'}
.savings-card .card-icon {
float:right;
font-size:25px}
.savings-card p {
font:400 33px Georgia;
margin:23px 0 7px}
.savings-card small {
font-size:9px;
letter-spacing:1.2px}
.capsule {
position:absolute;
width:126px;
height:56px;
left:55px;
top:345px;
border-radius:50px;
transform:rotate(-29deg);
background:linear-gradient(180deg,var(--relief-art-96),var(--relief-art-62));
box-shadow:inset -5px -6px 11px var(--relief-art-115),8px 18px 15px var(--relief-art-111);
overflow:hidden}
.capsule:after {
content:'';
position:absolute;
right:0;
top:0;
height:100%;
width:50%;
background:linear-gradient(180deg,var(--relief-art-97),var(--relief-art-83));
border-left:1px solid var(--relief-art-41)}
.spark {
position:absolute;
color:var(--relief-art-5);
font-size:52px;
top:5px;
left:71px}
.note {
position:absolute;
right:-6px;
top:92px;
font:italic 17px Georgia;
color:var(--relief-art-17);
transform:rotate(7deg)}
.note:after {
content:'↙';
display:block;
font:38px Georgia;
margin-left:26px}
.scene-caption {
position:absolute;
bottom:4px;
right:45px;
font-size:10px;
color:var(--relief-art-28)}
.trustbar {
margin:5px 5% 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
display:flex;
justify-content:space-between;
gap:20px;
padding:23px 0;
font-size:12px}
.trustbar span {
display:flex;
gap:10px;
align-items:center}
.trustbar b {
font-size:19px;
font-weight:400;
color:var(--relief-art-11)}
.section {
padding:82px 5%}
.section-head {
display:flex;
justify-content:space-between;
align-items:end;
margin-bottom:32px}
.section h2 {
font:600 clamp(29px,3.1vw,43px)/1.15 'Manrope';
letter-spacing:-1.8px;
margin:12px 0}
.section-head p {
color:var(--muted);
margin-bottom:0}
.text-link {
font-size:13px;
border-bottom:1px solid var(--relief-art-29);
padding-bottom:5px;
white-space:nowrap}
.categories {
display:grid;
grid-template-columns:repeat(6,1fr);
gap:15px}
.category {
min-width:0;
display:block}
.tile {
height:150px;
display:grid;
place-items:center;
border-radius:18px;
position:relative;
overflow:hidden;
transition:transform .25s;
background:var(--relief-art-73)}
.category:hover .tile {
transform:translateY(-7px)}
.category h3 {
font-size:13px;
line-height:1.4;
margin:15px 0 5px;
font-weight:650}
.category p {
font-size:11px;
color:var(--muted);
margin:0}
.tile.rose {
background:var(--relief-art-90)}
.tile.blue {
background:var(--relief-art-59)}
.tile.yellow {
background:var(--relief-art-88)}
.tile.green {
background:var(--relief-art-64)}
.tile.peach {
background:var(--relief-art-93)}
.object {
filter:drop-shadow(6px 12px 7px var(--relief-art-104));
transition:transform .3s}
.category:hover .object {
transform:rotate(-8deg) scale(1.07)}
.heart {
width:66px;
height:60px;
position:relative;
transform:rotate(-45deg);
border-radius:10px 0 15px 0;
background:linear-gradient(40deg,var(--relief-art-30),var(--relief-art-80))}
.heart:before,.heart:after {
content:'';
position:absolute;
background:inherit;
border-radius:50%;
width:60px;
height:60px}
.heart:before {
top:-29px;
left:0}
.heart:after {
left:29px;
top:0}
.drop {
width:59px;
height:77px;
border-radius:60% 40% 55% 45%;
background:radial-gradient(at 30% 25%,var(--relief-art-86),var(--relief-art-26) 60%,var(--relief-art-9));
transform:rotate(40deg)}
.loop {
width:81px;
height:81px;
border:22px solid var(--relief-art-37);
border-radius:50%;
box-shadow:inset 3px 4px 5px var(--relief-art-112),3px 5px 8px var(--relief-art-112);
transform:rotate(-25deg);
background:var(--relief-art-73)}
.sun {
width:73px;
height:73px;
border-radius:50%;
background:radial-gradient(at 30% 20%,var(--relief-art-95),var(--relief-art-49));
outline:2px dashed var(--relief-art-33);
outline-offset:12px}
.cloud {
width:95px;
height:45px;
border-radius:50px;
background:linear-gradient(var(--relief-art-2),var(--relief-art-47));
position:relative;
margin-top:25px}
.cloud:after {
content:'';
position:absolute;
width:55px;
height:55px;
background:linear-gradient(var(--relief-art-2),var(--relief-art-60));
border-radius:50%;
top:-27px;
left:21px}
.leaf {
width:57px;
height:85px;
background:linear-gradient(110deg,var(--relief-art-32),var(--relief-art-20));
border-radius:80% 0 80% 0;
transform:rotate(-25deg)}
.leaf:after {
content:'';
position:absolute;
width:1px;
height:70px;
background:var(--relief-art-57);
left:29px;
top:15px;
transform:rotate(14deg)}
.how {
background:var(--relief-art-82);
display:grid;
grid-template-columns:1fr 1.5fr;
gap:80px;
border-radius:28px;
margin:0 5%;
padding:52px}
.how h2 {
max-width:290px}
.how .intro {
font-size:14px;
margin-bottom:0}
.steps {
display:flex;
flex-direction:column}
.step {
display:grid;
grid-template-columns:32px 1fr;
gap:22px;
padding:20px 0;
border-bottom:1px solid var(--relief-art-46)}
.step:first-child {
padding-top:3px}
.step:last-child {
border:0;
padding-bottom:0}
.num {
border:1px solid var(--relief-art-31);
border-radius:50%;
height:30px;
width:30px;
display:grid;
place-items:center;
font:12px 'Manrope'}
.step h3 {
font-size:17px;
margin:2px 0 8px;
font-weight:600}
.step p {
font-size:13px;
line-height:1.6;
color:var(--relief-art-19);
margin:0;
max-width:400px}
.story {
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center}
.story-visual {
background:var(--relief-art-58);
min-height:340px;
border-radius:22px;
position:relative;
display:grid;
place-items:center;
overflow:hidden}
.receipt {
width:220px;
background:var(--relief-art-99);
padding:25px;
transform:rotate(-7deg);
box-shadow:12px 18px 25px var(--relief-art-107);
clip-path:polygon(0 0,100% 0,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%)}
.receipt strong {
font:600 18px 'Manrope'}
.receipt p {
font-size:11px;
color:var(--relief-art-23);
line-height:1.7}
.receipt .rule {
border-top:1px dashed var(--relief-art-34);
margin:18px 0}
.receipt em {
font:italic 31px Georgia;
color:var(--blue)}
.sticker {
position:absolute;
right:26px;
bottom:32px;
background:var(--relief-art-61);
border-radius:50%;
width:100px;
height:100px;
display:grid;
place-items:center;
text-align:center;
transform:rotate(13deg);
font-size:12px;
font-weight:600;
box-shadow:3px 4px 9px var(--relief-art-113)}
.story-text h2 {
max-width:460px}
.story-text p {
font-size:15px;
line-height:1.8;
color:var(--muted);
max-width:450px}
.faq {
padding-top:0;
display:grid;
grid-template-columns:1fr 1.4fr;
gap:80px}
.faq details {
padding:21px 0;
border-bottom:1px solid var(--line)}
summary {
cursor:pointer;
list-style:none;
display:flex;
justify-content:space-between;
font-weight:550;
font-size:15px;
gap:20px}
summary:after {
content:'+';
color:var(--blue);
font-size:20px}
details[open] summary:after {
content:'−'}
details p {
font-size:14px;
color:var(--muted);
line-height:1.75;
max-width:550px}
footer {
border-top:1px solid var(--line);
margin:0 5%;
padding:34px 0 24px}
.footer-top {
display:flex;
justify-content:space-between;
align-items:center}
.footer-top p {
color:var(--muted);
font-size:12px}
.footer-nav {
display:flex;
gap:24px;
font-size:12px}
.legal {
font-size:10px;
line-height:1.8;
color:var(--relief-art-27);
max-width:850px;
margin-top:30px}
.concept {
font-size:10px;
background:var(--relief-art-78);
color:var(--relief-art-7);
padding:7px 12px;
display:inline-block;
border-radius:6px;
margin-top:12px}
.skip {
position:absolute;
top:-80px}
.skip:focus {
top:0;
background:white;
padding:12px;
z-index:20}

@media(min-width:1500px) {
body {
max-width:1600px;
margin:auto}
.hero {
min-height:740px}
.scene {
right:8%;
transform:scale(1.1);
transform-origin:top right;
top:85px}
}
@media(max-width:1050px) {
.scene {
right:0;
transform:scale(.8);
transform-origin:right center;
top:100px}
h1 {
font-size:67px;
max-width:650px}
.intro {
max-width:370px}
.search-wrap {
max-width:510px}
.hero {
min-height:670px}
.categories {
grid-template-columns:repeat(3,1fr);
gap:28px}
.tile {
height:175px}
.how,.story,.faq {
gap:40px}
.how {
padding:36px}
.scene-caption {
display:none}
}
@media(max-width:760px) {
header {
height:80px}
nav {
gap:15px}
nav>a:not(.pill-link) {
display:none}
.pill-link {
font-size:12px;
padding:10px 14px}
.logo {
font-size:25px}
.hero {
padding-top:38px;
min-height:0;
padding-bottom:33px}
h1 {
font-size:52px;
letter-spacing:-2.7px;
margin-top:20px}
h1 em {
letter-spacing:-2.7px}
.intro {
max-width:100%;
font-size:15px}
.scene {
position:relative;
right:auto;
top:auto;
width:100%;
height:310px;
transform:scale(.74);
transform-origin:top center;
margin:28px auto -70px;
max-width:450px}
.search-wrap {
max-width:100%}
.search {
gap:8px;
padding-left:15px}
.search button {
padding:16px 15px}
.search input {
font-size:13px}
.privacy {
gap:12px;
font-size:10px}
.trustbar {
flex-wrap:wrap;
gap:16px;
padding:21px 0}
.trustbar span {
width:46%;
font-size:10px;
gap:7px}
.section {
padding:52px 5%}
.section-head {
align-items:start;
gap:20px}
.section-head p {
font-size:13px;
line-height:1.6}
.section h2 {
letter-spacing:-1px;
font-size:31px}
.section-head .text-link {
margin-top:15px;
font-size:11px}
.categories {
grid-template-columns:repeat(2,1fr);
gap:25px 16px}
.tile {
height:160px}
.how {
grid-template-columns:1fr;
gap:30px;
padding:28px;
margin-top:0}
.how h2 {
max-width:100%}
.how .intro {
margin-top:16px}
.story {
grid-template-columns:1fr;
gap:30px}
.story-visual {
min-height:310px}
.faq {
grid-template-columns:1fr;
gap:10px;
padding-top:0}
.footer-top {
align-items:start;
gap:24px;
flex-direction:column}
.footer-nav {
flex-wrap:wrap}
.legal {
margin-top:20px}
.eyebrow {
font-size:10px}
.story-text p {
font-size:14px}
.note {
right:-5px}
}

@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto}
* {
transition:none!important}
}


.page {
padding:42px 5% 75px;
min-height:70vh}
.crumb {
font-size:12px;
color:var(--muted);
margin:0 0 40px}
.crumb a {
text-decoration:underline;
text-underline-offset:4px}
.page-title {
font:600 clamp(38px,5vw,65px)/1.1 Manrope,sans-serif;
letter-spacing:-2.8px;
max-width:820px;
margin:17px 0 21px}
.page-title em {
font-family:Georgia,serif;
font-weight:400;
color:var(--blue)}
.deck {
max-width:570px;
font-size:16px;
line-height:1.8;
color:var(--muted)}
.page-banner {
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
margin-bottom:38px}
.mini-art {
flex-shrink:0;
width:210px;
height:190px;
border-radius:45% 55% 57% 43%;
background:var(--relief-art-68);
display:grid;
place-items:center;
transform:rotate(-6deg)}
.mini-art .object {
transform:scale(1.2) rotate(6deg)}
.catalog-layout {
display:grid;
grid-template-columns:205px 1fr;
gap:38px}
.filter-label {
font-size:10px;
letter-spacing:1.4px;
color:var(--muted);
text-transform:uppercase;
margin:0 0 15px}
.filters {
display:flex;
flex-direction:column;
gap:6px}
.filters button {
background:none;
border:0;
text-align:left;
border-radius:9px;
padding:12px;
color:var(--relief-art-16);
font-size:13px}
.filters button.active {
background:var(--relief-art-70);
color:var(--ink);
font-weight:650}
.filters button:hover {
background:var(--relief-art-81)}
.catalog-search {
display:flex;
border:1px solid var(--relief-art-44);
border-radius:12px;
background:white;
padding:13px 17px;
gap:10px}
.catalog-search input {
border:0;
outline:0;
background:transparent;
width:100%;
font-size:14px}
.result-meta {
display:flex;
justify-content:space-between;
align-items:center;
margin:20px 0;
font-size:12px;
color:var(--muted)}
.grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px}
.drug {
background:var(--relief-art-98);
border:1px solid var(--relief-art-55);
border-radius:17px;
padding:22px;
display:flex;
flex-direction:column;
transition:transform .2s,box-shadow .2s;
min-height:230px}
.drug:hover {
transform:translateY(-4px);
box-shadow:0 12px 24px var(--relief-art-101)}
.drug-top {
display:flex;
justify-content:space-between;
align-items:center}
.drug-badge {
width:45px;
height:45px;
display:grid;
place-items:center;
border-radius:13px;
background:var(--relief-art-72);
color:var(--relief-art-18);
font-size:25px}
.drug small {
font-size:10px;
color:var(--muted)}
.drug h3 {
font:650 21px Manrope;
margin:23px 0 6px;
letter-spacing:-.7px}
.drug p {
font-size:12px;
color:var(--muted);
line-height:1.6;
margin:0 0 24px}
.drug-bottom {
display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid var(--relief-art-69);
padding-top:14px;
margin-top:auto;
font-size:11px}
.drug-bottom b {
font-size:20px;
font-weight:400;
color:var(--blue)}
.note-box {
background:var(--relief-art-79);
border:1px solid var(--relief-art-54);
border-radius:13px;
padding:19px 23px;
font-size:12px;
color:var(--relief-art-14);
line-height:1.7;
margin-top:26px}
.tag {
display:inline-block;
padding:6px 10px;
border-radius:20px;
background:var(--relief-art-75);
font-size:10px;
color:var(--relief-art-10)}
.detail-grid {
display:grid;
grid-template-columns:1.35fr 1fr;
gap:60px;
margin-top:30px}
.program {
border-radius:22px;
background:white;
border:1px solid var(--relief-art-51);
padding:30px;
align-self:start;
position:sticky;
top:24px;
box-shadow:0 8px 0 -3px var(--relief-art-74)}
.program h2 {
font:600 27px Manrope;
letter-spacing:-1px}
.official {
font-size:11px;
background:var(--relief-art-76);
border-radius:8px;
padding:12px;
margin:20px 0;
color:var(--relief-art-8)}
.primary {
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:var(--blue);
border:0;
color:white;
padding:16px 22px;
border-radius:11px;
font-size:13px;
font-weight:600}
.full {
width:100%}
.fine {
font-size:11px;
line-height:1.75;
color:var(--muted)}
.detail-copy h2 {
font:600 26px Manrope;
letter-spacing:-1px;
margin:35px 0 18px}
.tabs {
display:flex;
padding:5px;
border:1px solid var(--relief-art-50);
border-radius:13px;
gap:4px}
.tabs button {
flex:1;
border:0;
background:transparent;
padding:12px 7px;
border-radius:9px;
color:var(--muted);
font-size:12px}
.tabs button.active {
background:var(--relief-art-2);
box-shadow:0 2px 6px var(--relief-art-3);
color:var(--blue);
font-weight:600}
.eligibility {
padding:25px 0;
min-height:180px}
.eligibility h3 {
font-size:19px;
margin:0 0 12px}
.eligibility p,.body-copy p {
font-size:14px;
line-height:1.9;
color:var(--muted)}
.checklist {
list-style:none;
padding:0}
.checklist li {
border-bottom:1px solid var(--line);
padding:15px 0;
font-size:13px;
color:var(--muted);
display:flex;
gap:13px}
.checklist li:before {
content:'✓';
color:var(--relief-art-25)}
.body-copy {
max-width:730px}
.body-copy h2 {
font:600 28px Manrope;
letter-spacing:-1px;
margin-top:40px}
.article-layout {
display:grid;
grid-template-columns:200px 1fr;
gap:60px;
max-width:1100px}
.article-index {
border-left:1px solid var(--line);
display:flex;
flex-direction:column;
gap:18px;
padding:7px 20px;
font-size:12px;
color:var(--muted);
align-self:start;
position:sticky;
top:30px}
.quote-panel {
background:var(--relief-art-65);
padding:40px;
border-radius:20px;
margin:35px 0;
font:italic 28px/1.4 Georgia;
color:var(--relief-art-6)}
.values {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin:40px 0}
.values h3 {
font-size:15px}
.values p {
font-size:12px;
line-height:1.8;
color:var(--muted)}
.learn-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px}
.learn-card {
border:1px solid var(--line);
border-radius:20px;
overflow:hidden;
background:var(--relief-art-98)}
.learn-image {
height:170px;
display:grid;
place-items:center;
background:var(--relief-art-66)}
.learn-body {
padding:25px}
.learn-body h2 {
font:600 22px Manrope;
letter-spacing:-.7px;
line-height:1.4}
.learn-body p {
font-size:13px;
color:var(--muted);
line-height:1.8}
.learn-body a {
font-size:12px}
.comparison {
border:1px solid var(--line);
border-radius:18px;
overflow:auto;
background:var(--relief-art-98);
margin-top:35px}
table {
width:100%;
border-collapse:collapse;
min-width:590px}
th,td {
text-align:left;
padding:23px;
border-bottom:1px solid var(--line);
font-size:13px;
line-height:1.7}
th {
font-weight:600;
background:var(--relief-art-84)}
td:first-child {
color:var(--muted);
width:25%}
.contact-layout {
display:grid;
grid-template-columns:1fr 1fr;
gap:80px}
.contact-card {
background:var(--relief-art-85);
border-radius:20px;
padding:35px}
.contact-card label {
display:block;
font-size:12px;
margin-bottom:9px}
.contact-card input,.contact-card select,.contact-card textarea {
width:100%;
padding:13px;
border:1px solid var(--relief-art-45);
border-radius:9px;
background:var(--relief-art-98);
margin-bottom:22px;
color:var(--ink);
font:14px 'DM Sans'}
.contact-card textarea {
min-height:130px;
resize:vertical}
.contact-links {
display:flex;
flex-direction:column;
gap:22px;
margin-top:30px}
.contact-links a {
font-size:16px;
color:var(--blue)}
.contact-links small {
display:block;
font-size:11px;
color:var(--muted);
margin-bottom:6px}
.empty {
grid-column:1/-1;
padding:35px;
border:1px dashed var(--relief-art-36);
border-radius:15px}
.section-divider {
border:0;
border-top:1px solid var(--line);
margin:50px 0}
.bignum {
font:italic 60px Georgia;
color:var(--blue)}
.page-end {
margin-top:55px;
border-radius:20px;
background:var(--relief-art-71);
padding:32px;
display:flex;
justify-content:space-between;
align-items:center;
gap:25px}
.page-end h2 {
font:600 25px Manrope;
margin:0 0 9px;
letter-spacing:-1px}
.page-end p {
font-size:13px;
color:var(--muted);
margin:0}
.mobile-filter {
display:none}
nav .current {
color:var(--blue)}
@media(max-width:1000px) {
.grid {
grid-template-columns:repeat(2,1fr)}
.catalog-layout {
grid-template-columns:175px 1fr;
gap:23px}
.detail-grid {
gap:30px}
.contact-layout {
gap:35px}
}
@media(max-width:760px) {
.page {
padding-top:28px}
.crumb {
margin-bottom:28px}
.page-title {
font-size:43px;
letter-spacing:-1.8px}
.page-banner {
align-items:start}
.mini-art {
width:100px;
height:110px;
margin-top:30px}
.mini-art .object {
transform:scale(.65)}
.deck {
font-size:14px}
.catalog-layout,.detail-grid,.contact-layout,.article-layout {
grid-template-columns:1fr;
gap:25px}
.filters {
flex-direction:row;
overflow:auto;
padding-bottom:10px}
.filters button {
white-space:nowrap;
font-size:11px;
padding:10px}
.catalog-layout aside .filter-label {
display:none}
.grid {
gap:12px}
.drug {
padding:17px;
min-height:220px}
.drug h3 {
font-size:19px}
.drug small {
font-size:8px}
.drug-badge {
width:35px;
height:35px}
.program {
position:static;
order:-1}
.article-index {
position:static;
flex-direction:row;
overflow:auto;
white-space:nowrap;
padding:8px 0;
border:0;
border-bottom:1px solid var(--line);
font-size:11px}
.values {
grid-template-columns:1fr;
gap:4px}
.learn-grid {
grid-template-columns:1fr}
.learn-card {
display:grid;
grid-template-columns:100px 1fr}
.learn-image {
height:100%;
min-height:160px}
.learn-image .object {
transform:scale(.7)}
.learn-body {
padding:18px}
.learn-body h2 {
font-size:20px}
.page-end {
align-items:start;
flex-direction:column}
.tabs button {
font-size:10px}
.quote-panel {
padding:27px;
font-size:24px}
.contact-card {
padding:23px}
.footer-nav {
gap:18px}
.page-banner .mini-art {
display:none}
.result-meta {
font-size:10px}
}

/* Production integrations and accessible no-JS catalog. */
.relief-alert { display:grid; grid-template-columns:1fr 1fr; gap:45px; background:var(--brand-50); margin:20px 5%; padding:35px; border-radius:22px; }
.relief-alert h2 { font:600 32px Manrope,var(--font-sans); letter-spacing:-1.5px; }
.relief-alert form { display:grid; grid-template-columns:1fr; gap:9px; }
.relief-alert label { font-size:12px; }
.relief-alert input,.relief-category-signup input[type=email] { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); border-radius:10px; padding:13px 15px; min-width:0; }
.relief-category-signup { margin:40px 0 0; background:var(--brand-50); padding:27px; border-radius:18px; }
.relief-category-signup form { display:flex; gap:12px; flex-wrap:wrap; }
.relief-category-signup input[type=email] { flex:1; }
.relief-category-signup .form-msg { flex-basis:100%; font-size:13px; }
.relief-category-signup h2 { font:600 24px Manrope,var(--font-sans); letter-spacing:-.8px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.results a { min-height:44px; }
.search input:focus-visible,.catalog-search:focus-within { outline:2px solid var(--teal); outline-offset:3px; border-radius:5px; }
@media(max-width:760px) { .relief-alert { grid-template-columns:1fr; padding:24px; gap:15px; } .relief input,.relief select,.relief textarea { font-size:16px; } .relief .grid { grid-template-columns:1fr; } .relief .drug { min-height:180px; } }