*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f7f2;color:#1f2d24;line-height:1.6}.site-header{background:#0f2a1c;color:#fff;display:flex;justify-content:space-between;align-items:center;padding:18px 8%;position:sticky;top:0;z-index:10}.site-header a{color:#fff;text-decoration:none;margin-left:18px}.brand{font-weight:700;font-size:22px}#hero{
min-height:0;
background:#f4f7f2;
padding:25px 8%;
text-align:center;
}
#hero::before{
content:"";
display:block;
width:100%;
max-width:1200px;
height:520px;
margin:0 auto;
background:url("assets/images/na%20main%20page.png") center/contain no-repeat;
}
#hero div{
display:none;
} }.content-section,.page-hero{background:#fff}.page-hero{text-align:center}.page-hero h1,.content-section h2,.legal-block h2{text-align:center;color:#0f2a1c}.hero-category-image{display:block;max-width:1000px;width:100%;margin:0 auto 30px;border-radius:18px}.card-grid{display:grid;gap:28px;max-width:1180px;margin:30px auto}.card-grid.three{grid-template-columns:repeat(3,1fr)}.category-card{background:#f1f6ef;border:2px solid #d8e8d4;border-radius:18px;padding:24px;box-shadow:0 8px 20px rgba(0,0,0,.08)}.featured-card{max-width:900px;margin:0 auto 28px}.stack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1180px;margin:30px auto}.stack-card{grid-column:auto}.stack-card.center-left{grid-column:auto}.stack-card.center-right{grid-column:auto}.legal-block{background:#e7f1e7;border-top:4px solid #1d5b36;border-bottom:4px solid #1d5b36}.legal-block p{max-width:1100px;margin:0 auto 18px}.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1180px;margin:30px auto}.home-card{background:#f1f6ef;border:2px solid #d8e8d4;border-radius:18px;padding:12px;text-align:center;text-decoration:none;color:#0f2a1c;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.08)}.home-card img{width:100%;border-radius:12px;display:block;margin-bottom:12px}.button{display:inline-block;background:#1d5b36;color:#fff;padding:14px 24px;border-radius:999px;text-decoration:none;font-weight:700}.center{text-align:center}footer{background:#0f2a1c;color:#fff;text-align:center;padding:35px 8%}footer a,footer span{color:#fff;text-decoration:none;display:inline-block;margin:10px 16px}@media(max-width:900px){.card-grid.three,.home-grid,.stack-grid{grid-template-columns:1fr}.stack-card,.stack-card.center-left,.stack-card.center-right{grid-column:auto}#hero h1{font-size:40px}}
 .content-section h3{
color:#0f2a1c;
font-size:24px;
margin-top:30px;
margin-bottom:10px;
}
.content-section hr{
border:none;
border-top:1px solid #d8e8d4;
margin:25px 0;
}
.content-section p{
max-width:1100px;
line-height:1.8;
} 
.age-gate {
position: fixed;
inset: 0;
background: rgba(15, 42, 28, 0.96);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.age-gate-box {
background: #ffffff;
color: #0f2a1c;
max-width: 560px;
width: 100%;
text-align: center;
border-radius: 18px;
padding: 36px;
box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.age-gate-check {
display: block;
text-align: left;
margin: 14px 0;
line-height: 1.5;
}
.age-gate-box button {
width: 100%;
margin-top: 14px;
padding: 14px;
border: none;
border-radius: 999px;
background: #1d5b36;
color: #fff;
font-weight: 700;
}
.age-gate-box button:disabled {
background: #999;
} 
 .home-action-row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
max-width: 1180px;
margin: 30px auto 0;
}
.home-feature-card {
position: relative;
}
.home-feature-card img {
aspect-ratio: 1 / 1;
object-fit: contain;
background: #f8fbf6;
}
.home-feature-card small {
display: block;
margin-top: 4px;
font-size: 13px;
font-weight: 700;
opacity: .78;
}
.home-lab-ad-card {
background: #f1f6ef;
}
.lab-reel-link {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background: #ffffff;
border: 1px solid #d8e8d4;
margin-bottom: 12px;
}
.lab-reel-video {
width: 100% !important;
height: 100% !important;
display: block;
object-fit: cover;
}
.lab-ad-link {
display: block;
text-decoration: none;
color: #0f2a1c;
}
.ad-badge {
position: absolute;
top: 12px;
left: 14px;
font-size: 12px;
font-weight: 800;
color: #1d5b36;
border: 1px solid #1d5b36;
border-radius: 999px;
padding: 3px 8px;
}

.reconstitution-guide-card {
background: #f1f6ef;
border-color: #d8e8d4;
}
.reconstitution-guide-card img {
aspect-ratio: 1 / 1;
object-fit: contain;
background: #e7f1e7;
}
@media (max-width: 900px) {
.home-action-row {
grid-template-columns: 1fr;
max-width: 420px;
}
} 


.guide-hero {
padding: 56px 8% 40px;
}
.guide-hero h1 {
font-size: clamp(34px, 5vw, 58px);
margin: 0 0 12px;
}
.guide-hero p {
max-width: 900px;
margin: 0 auto;
font-size: clamp(18px, 2vw, 24px);
font-weight: 700;
color: #1f2d24;
}
.guide-section p,
.guide-section li {
font-size: 17px;
}
.guide-table-wrap {
max-width: 1180px;
margin: 28px auto 0;
overflow-x: auto;
border: 1px solid #d8e8d4;
border-radius: 10px;
background: #fff;
box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.reconstitution-table {
width: 100%;
border-collapse: collapse;
min-width: 760px;
}
.reconstitution-table th,
.reconstitution-table td {
padding: 13px 16px;
text-align: left;
border-bottom: 1px solid #d8e8d4;
vertical-align: top;
}
.reconstitution-table th {
background: #e7f1e7;
color: #0f2a1c;
font-weight: 800;
}
.reconstitution-table tbody tr:nth-child(odd):not(.blend-note) {
background: #f8fbf4;
}
.reconstitution-table td:first-child {
font-weight: 800;
color: #0f2a1c;
}
.reconstitution-table .blend-note td {
background: #eef6ed;
color: #244f37;
font-size: 14px;
font-weight: 700;
padding-top: 8px;
}
.guide-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
max-width: 1180px;
margin: 28px auto 0;
}
.guide-info-card {
background: #f1f6ef;
border: 2px solid #d8e8d4;
border-radius: 10px;
padding: 22px;
box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.guide-info-card h3 {
margin-top: 0;
}
.guide-info-card ul,
.guide-list {
max-width: 1100px;
margin: 14px auto 0;
padding-left: 24px;
}
.guide-info-card li,
.guide-list li {
margin-bottom: 8px;
}
.guide-notice p {
max-width: 1100px;
}
@media(max-width:900px){
.guide-card-grid{grid-template-columns:1fr}
.reconstitution-table{min-width:680px}
}


.guide-centered-section {
text-align: center;
}
.guide-centered-section p {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.guide-centered-section .guide-list {
display: inline-block;
text-align: left;
margin-left: auto;
margin-right: auto;
}


.reference-panel-section {
background: #f8fbf4;
}
.reference-panel {
max-width: 900px;
margin: 26px auto;
background: #f1f6ef;
border: 2px solid #d8e8d4;
border-radius: 10px;
padding: 24px;
box-shadow: 0 8px 20px rgba(0,0,0,.06);
}
.reference-panel h3 {
margin: 0 0 18px;
font-size: 22px;
color: #0f2a1c;
}
.reference-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.reference-item {
background: #ffffff;
border: 1px solid #d8e8d4;
border-left: 5px solid #1d5b36;
border-radius: 8px;
padding: 14px 16px;
font-weight: 800;
color: #0f2a1c;
text-align: left;
}
@media(max-width:900px){
.reference-grid{grid-template-columns:1fr}
}

footer .social-links {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 8px 16px;
vertical-align: middle;
}
footer .social-link {
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
background: #f4f7f2;
border: 1px solid rgba(216,232,212,.7);
box-shadow: 0 4px 12px rgba(0,0,0,.18);
transition: transform .18s ease, background .18s ease;
}
footer .social-link:hover,
footer .social-link:focus {
background: #d8e8d4;
transform: translateY(-2px);
}
footer .social-link img {
width: 21px;
height: 21px;
display: block;
margin: 0;
border-radius: 0;
}
@media(max-width:700px){
footer .social-links {
display: flex;
margin: 14px auto;
}
}