/* ==============================
   1. ROOT / GLOBAL
============================== */
:root {
    --yellow:#FFD400;
    --yellow-soft:#FFF4A6;
    --blue:#1726A4;
    --blue-2:#07176B;
    --red:#E51F2E;
    --ink:#111426;
    --white:#fff;
    --line:#D9DCE8;
    --muted:#666D81;
    --bg:#F7F8FC;
    --shadow:0 20px 60px rgba(21,35,117,.14)
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth
}
body {
    margin:0;
    font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--bg);
    overflow-x:hidden
}
a {
    text-decoration:none;
    color:inherit
}
button {
    font:inherit
}
img {
    max-width:100%;
    display:block
}
.container {
    width:min(1180px,calc(100% - 40px));
    margin:auto
}
/* ==============================
   2. HEADER
============================== */
.site-header {
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(12,20,56,.08)
}
.header-inner {
    height:72px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:36px
}
.brand {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    font-weight:950;
    letter-spacing:-.05em;
    justify-self:start;
    min-width:0
}
.brand-mark {
    display:grid;
    place-items:center;
    width:56px;
    height:38px;
    background:var(--blue);
    color:var(--yellow);
    font-size:25px;
    font-weight:1000;
    transform:skew(-9deg);
    box-shadow:6px 6px 0 var(--yellow)
}
.brand-name {
    display:none;
}
nav {
    display:flex;
    gap:25px;
    font-size:14px;
    font-weight:800;
    color:#4c5267
}
nav a {
    position:relative;
    padding:10px 0
}
nav a:after {
    content:"";
    position:absolute;
    left:0;
    bottom:3px;
    width:0;
    height:3px;
    background:var(--yellow);
    transition:.25s
}
nav a:hover:after {
    width:100%
}
.header-pill {
    padding:10px 16px;
    background:var(--ink);
    color:#fff;
    border-radius:999px;
    font-size:13px;
    font-weight:850
}
/* ==============================
   3. HERO
============================== */
.hero {
    position:relative;
    min-height:620px;
    background:#fff;
    overflow:hidden;
    border-bottom:1px solid #eceef6
}
.hero:before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(120deg,transparent 0 58%,var(--yellow) 58% 100%)
}
.hero:after {
    content:"EVE";
    position:absolute;
    left:-24px;
    bottom:-72px;
    font-size:280px;
    line-height:1;
    font-weight:1000;
    color:transparent;
    -webkit-text-stroke:2px rgba(23,38,164,.07);
    letter-spacing:-.09em;
    pointer-events:none
}
.hero-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1.03fr .97fr;
    align-items:center;
    min-height:620px;
    gap:50px
}
.hero-copy-block {
    max-width:620px
}
.hero .eyebrow {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:8px 13px;
    border:1px solid var(--blue);
    color:var(--blue);
    font-weight:900;
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    background:#fff;
    border-radius:0
}
.hero .eyebrow:before {
    content:"";
    width:9px;
    height:9px;
    background:var(--red);
    border-radius:50%;
    box-shadow:none
}
.hero h1 {
    margin:24px 0 20px;
    font-size:clamp(54px,7vw,104px);
    line-height:.86;
    letter-spacing:-.075em;
    color:var(--blue);
    font-weight:1000
}
.hero-title-sub {
    margin:0 0 18px;
    font-size:clamp(25px,2.8vw,38px);
    line-height:1.2;
    letter-spacing:-.05em;
    font-weight:950;
    color:var(--ink)
}
.hero-title-sub strong {
    color:var(--red)
}
.hero-copy {
    max-width:560px;
    font-size:17px;
    line-height:1.8;
    color:#5a6071;
    margin:0
}
.hero-copy strong {
    color:var(--ink)
}
.hero-actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:32px
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 22px;
    font-weight:900;
    border:0;
    cursor:pointer;
    transition:.2s
}
.hero .btn {
    min-height:52px;
    padding:0 22px;
    border-radius:0
}
.hero .btn-primary {
    background:var(--blue);
    color:#fff;
    box-shadow:7px 7px 0 var(--yellow);
    border:0
}
.hero .btn-primary:hover {
    transform:translate(-2px,-2px);
    box-shadow:10px 10px 0 var(--yellow)
}
.hero .btn-ghost {
    background:#fff;
    color:var(--ink);
    border:1px solid #cfd3df
}
.hero .btn-ghost:hover {
    background:#fff;
    border-color:#aeb4c3
}
.hero-side,.hero-visual {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:520px
}
.visual-stage {
    position:relative;
    width:min(520px,100%);
    aspect-ratio:1/1;
    display:grid;
    place-items:center
}
.visual-stage:before {
    content:"";
    position:absolute;
    width:82%;
    height:82%;
    border-radius:50%;
    background:#fff;
    box-shadow:0 36px 100px rgba(10,25,102,.2)
}
.visual-stage:after {
    content:"03";
    position:absolute;
    right:-12px;
    top:26px;
    font-size:150px;
    line-height:1;
    font-weight:1000;
    color:var(--blue);
    opacity:.1
}
.pack {
    position:relative;
    z-index:2;
    width:88%;
    filter:drop-shadow(0 25px 25px rgba(14,26,95,.25));
    transform:rotate(-4deg);
    transition:.35s
}
.hero-side:hover .pack,.hero-visual:hover .pack {
    transform:rotate(0deg) scale(1.025)
}
.shot-tag {
    position:absolute;
    left:-8px;
    bottom:52px;
    z-index:3;
    background:var(--red);
    color:#fff;
    font-weight:1000;
    padding:10px 18px;
    transform:rotate(-6deg);
    box-shadow:6px 6px 0 #fff;
    border:3px solid var(--red);
    letter-spacing:.04em
}
/* ==============================
   4. HERO INFO TICKER
============================== */
.ticker {
    background:var(--blue);
    color:#fff;
    overflow:hidden;
    border-top:7px solid var(--yellow)
}
.ticker-track {
    display:flex;
    width:max-content;
    will-change:transform;
    animation:ticker-loop 24s linear infinite
}
.ticker-group {
    display:flex;
    align-items:center;
    gap:48px;
    flex:none;
    padding:13px 48px 13px 0;
    font-weight:900;
    font-size:13px;
    letter-spacing:.02em;
    white-space:nowrap
}
.ticker-group p {
    display:inline-flex;
    align-items:center;
    flex:none
}
.ticker-group p:before {
    content:"●";
    color:var(--yellow);
    margin-right:14px;
    font-size:9px
}
@keyframes ticker-loop {
    from {
        transform:translateX(100vw)
    }
    to {
        transform:translateX(-100%)
    }
}
section {
    padding:92px 0
}
.section-head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:30px;
    margin-bottom:42px
}
.kicker {
    font-size:12px;
    font-weight:950;
    letter-spacing:.12em;
    color:var(--red);
    text-transform:uppercase;
    margin-bottom:10px
}
h2 {
    font-size:clamp(34px,4.4vw,58px);
    line-height:1.02;
    letter-spacing:-.055em;
    margin:0;
    color:var(--ink)
}
.section-head p {
    max-width:500px;
    color:var(--muted);
    line-height:1.75;
    margin:0
}
/* ==============================
   5. MAIN CONTENT
============================== */
.feature-zone {
    background:var(--ink);
    color:#fff;
    position:relative;
    overflow:hidden
}
.feature-zone:before {
    content:"";
    position:absolute;
    right:-110px;
    top:-110px;
    width:390px;
    height:390px;
    border:76px solid var(--blue);
    border-radius:50%;
    opacity:.45
}
.feature-zone h2 {
    color:#fff
}
.feature-zone .section-head p {
    color:#b9bed0
}
.three-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
.shot-card {
    position:relative;
    min-height:310px;
    padding:30px;
    background:#171b2e;
    border:1px solid #30364e;
    overflow:hidden;
    transition:.25s
}
.shot-card:hover {
    transform:translateY(-8px);
    border-color:var(--yellow)
}
.shot-no {
    font-size:72px;
    line-height:.8;
    font-weight:1000;
    color:transparent;
    -webkit-text-stroke:2px var(--yellow);
    opacity:.9
}
.shot-card h3 {
    font-size:24px;
    margin:34px 0 12px;
    color:#fff
}
.shot-card p {
    color:#aeb4c7;
    line-height:1.72;
    margin:0
}
.shot-card .bar {
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:8px;
    background:var(--yellow)
}
.shot-card:nth-child(2) .bar {
    background:var(--red)
}
.shot-card:nth-child(3) .bar {
    background:#fff
}
.info-layout {
    display:grid;
    grid-template-columns:.90fr 1.10fr;
    gap:48px;
    align-items:stretch
}
.pack-panel {
    position:relative;
    top:auto;
    align-self:stretch;
    margin-top:0;
    min-height:100%;
    padding:44px 40px 38px;
    background:linear-gradient(145deg,var(--yellow),#ffe868 54%,#fff 54%);
    box-shadow:var(--shadow);
    border:1px solid #e2d15b;
    display:flex;
    flex-direction:column;
    justify-content:center
}
.pack-panel img {
    width:100%;
    height:350px;
    object-fit:contain;
    filter:drop-shadow(0 18px 22px rgba(15,29,114,.24))
}
.mini-label {
    display:inline-block;
    margin-top:30px;
    background:var(--blue);
    color:#fff;
    padding:8px 12px;
    font-size:12px;
    font-weight:900;
    letter-spacing:.07em
}
.spec-stack {
    display:grid;
    gap:0
}
.spec-row {
    display:grid;
    grid-template-columns:150px 1fr;
    gap:28px;
    padding:23px 0;
    border-bottom:1px solid #e1e4ec
}
.spec-row:first-child {
    border-top:1px solid #e1e4ec
}
.spec-row dt {
    font-weight:900;
    color:var(--blue)
}
.spec-row dd {
    margin:0;
    color:#555c70;
    line-height:1.72
}
.notice {
    margin-top:28px;
    padding:22px 24px;
    background:#fff8da;
    border-left:5px solid var(--yellow);
    font-size:14px;
    line-height:1.75;
    color:#61677a
}
.ingredient-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px
}
.ingredient-card {
    background:#fff;
    border:1px solid #e1e4ec;
    padding:28px;
    position:relative;
    overflow:hidden
}
.ingredient-card:before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:7px;
    height:100%;
    background:var(--blue)
}
.ingredient-card:nth-child(2):before {
    background:var(--red)
}
.ingredient-card:nth-child(3):before {
    background:var(--yellow)
}
.ingredient-card:nth-child(4):before {
    background:#767b8b
}
.ingredient-card strong {
    display:block;
    font-size:22px;
    margin-bottom:8px
}
.ingredient-card em {
    font-style:normal;
    color:var(--blue);
    font-weight:900
}
.ingredient-card p {
    margin:12px 0 0;
    color:#666d7e;
    line-height:1.72
}
.effect-wrap {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:20px
}
.effect-card,.guide-card {
    background:#fff;
    border:1px solid #e1e4ec;
    padding:34px
}
.effect-card h3,.guide-card h3 {
    font-size:26px;
    margin:0 0 18px
}
.tag-list {
    display:flex;
    flex-wrap:wrap;
    gap:9px
}
.tag {
    padding:9px 12px;
    background:#f1f3f8;
    border:1px solid #e0e4ec;
    font-size:14px;
    font-weight:800;
    color:#444b60
}
.guide-list {
    margin:0;
    padding-left:20px;
    color:#5f6679;
    line-height:1.9
}
.guide-list li+li {
    margin-top:6px
}
.price-zone {
    background:#fff
}
.price-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px
}
.price-card {
    border:2px solid #e5e8ef;
    padding:28px;
    text-align:center;
    background:#fff
}
.price-card.featured {
    border-color:var(--blue);
    box-shadow:0 14px 34px rgba(23,38,164,.1)
}
.price-card .count {
    font-size:28px;
    font-weight:1000;
    color:var(--blue)
}
.price-card .price {
    font-size:24px;
    font-weight:950;
    margin-top:12px
}
.price-card small {
    display:block;
    margin-top:8px;
    color:#7a8091;
    line-height:1.6
}
.compare-zone {
    padding-top:20px
}
.compare-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px
}
.compare-card {
    background:#fff;
    border:1px solid #e1e4ec;
    padding:28px
}
.compare-card .num {
    display:inline-grid;
    place-items:center;
    width:34px;
    height:34px;
    background:var(--yellow);
    color:var(--blue);
    font-weight:1000;
    margin-bottom:17px
}
.compare-card h3 {
    font-size:21px;
    margin:0 0 10px
}
.compare-card p {
    margin:0;
    color:#676e80;
    line-height:1.75
}
/* ==============================
   6. FAQ
============================== */
.faq {
    background:#fff
}
.faq-list {
    border-top:2px solid var(--ink)
}
.faq-item {
    border-bottom:1px solid #dfe2ea
}
.faq-q {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:transparent;
    border:0;
    padding:22px 4px;
    text-align:left;
    font-size:17px;
    font-weight:900;
    color:var(--ink);
    cursor:pointer
}
.faq-q::after {
    content:"+";
    flex:0 0 auto;
    font-size:24px;
    font-weight:900;
    line-height:1;
    color:var(--blue)
}
.faq-item.open .faq-q::after {
    content:"−"
}
.faq-a {
    display:none;
    padding:0 4px 24px;
    color:#646a7c;
    line-height:1.8;
    max-width:940px
}
.faq-item.open .faq-a {
    display:block
}
/* ==============================
   7. FOOTER
============================== */
footer {
    background:var(--blue-2);
    color:#fff;
    padding:28px 0 30px;
    border-top:1px solid rgba(255,255,255,.08)
}
.footer-inner {
    display:block
}
.footer-centered {
    text-align:center;
    max-width:1100px
}
.footer-copy {
    font-size:13px;
    color:#cfd6ff;
    line-height:1.7;
    margin-bottom:12px
}
.footer-note {
    font-size:12px;
    color:#aeb7de;
    line-height:1.8;
    text-align:center;
    max-width:980px;
    margin:0 auto
}
/* ==============================
   8. RESPONSIVE
============================== */
@media(max-width:900px) {
    nav {
        display:none
    }
    .header-pill {
        display:none
    }
    .hero,.hero-grid {
        min-height:auto
    }
    .hero {
        padding:52px 0 62px
    }
    .hero:before {
        background:linear-gradient(160deg,#fff 0 58%,var(--yellow) 58% 100%)
    }
    .hero-grid {
        grid-template-columns:1fr;
        gap:10px
    }
    .hero-side,.hero-visual {
        min-height:420px
    }
    .visual-stage {
        width:min(470px,100%)
    }
    .section-head {
        display:block
    }
    .section-head p {
        margin-top:18px
    }
    .three-grid,.info-layout,.effect-wrap,.compare-grid {
        grid-template-columns:1fr
    }
    .ingredient-grid {
        grid-template-columns:1fr 1fr
    }
    .price-grid {
        grid-template-columns:1fr
    }
    .pack-panel {
        position:relative;
        top:auto;
        min-height:auto
    }
    .pack-panel img {
        height:auto
    }
    .spec-row {
        grid-template-columns:120px 1fr
    }
}
@media(max-width:600px) {
    .container {
        width:min(100% - 28px,1180px)
    }
    .header-inner {
        height:64px;
        display:flex;
        justify-content:space-between
    }
    .brand-name {
        display:none
    }
    .hero h1 {
        font-size:56px
    }
    .hero-title-sub {
        font-size:28px
    }
    .hero-copy {
        font-size:15px
    }
    .hero-actions {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px
    }
    .hero-actions .btn {
        width:100%;
        padding:0 14px;
        font-size:14px
    }
    .hero-side,.hero-visual {
        min-height:330px
    }
    .shot-tag {
        left:6px;
        bottom:24px
    }
    .visual-stage:after {
        font-size:100px;
        right:0
    }
    section {
        padding:70px 0
    }
    .three-grid {
        gap:12px
    }
    .shot-card {
        min-height:250px
    }
    .spec-row {
        grid-template-columns:1fr;
        gap:8px
    }
    .ingredient-grid {
        grid-template-columns:1fr
    }
    .footer-inner {
        display:block
    }
    .footer-note {
        text-align:center;
        margin-top:0
    }
}

/* ==============================
   9. UTILITY / PAGE-SPECIFIC
============================== */
.ingredients-section {
    padding-top:20px
}
.guide-copy {
    color:#62697b;
    line-height:1.8;
    margin:0 0 18px
}
.notice-compact {
    margin-top:0
}

/* ==============================
   10. HEADER NAV / MOBILE MENU
============================== */
.main-nav {
    display:flex;
    align-items:center;
    justify-self:center;
    gap:40px;
}

.menu-toggle {
    display: none;
    border: 1px solid #d8dce8;
    background: #ffffff;
    color: var(--ink);
    padding: 9px 13px;
    font-weight: 900;
    cursor: pointer;
}

/* ==============================
   11. SUB PAGE HERO
============================== */
.sub-hero {
    position: relative;
    padding: 74px 0;
    background: #ffffff;
    border-bottom: 8px solid var(--yellow);
    overflow: hidden;
}

.sub-hero::before {
    content: "";
    position: absolute;
    right: -110px;
    top: -150px;
    width: 520px;
    height: 520px;
    background: var(--yellow);
    transform: rotate(16deg);
}

.sub-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center;
    gap: 54px;
}

.sub-kicker {
    margin: 0 0 14px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .11em;
}

.sub-hero h1 {
    margin: 0;
    color: var(--blue);
    font-size: clamp(44px, 6vw, 76px);
    line-height: 1.02;
    letter-spacing: -.06em;
    font-weight: 1000;
}

.sub-lead {
    max-width: 720px;
    margin: 24px 0 0;
    color: #596074;
    font-size: 17px;
    line-height: 1.8;
}

.sub-hero-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
}

.sub-hero-image::before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(23, 38, 164, .16);
}

.sub-hero-image img {
    position: relative;
    z-index: 2;
    width: min(390px, 100%);
    filter: drop-shadow(0 20px 20px rgba(14, 26, 95, .18));
}

/* ==============================
   12. SUB PAGE CONTENT
============================== */
.page-section {
    padding: 82px 0;
}

.bg-white {
    background: #ffffff;
}

.info-card-grid {
    display: grid;
    gap: 18px;
}

.info-card-grid.three {
    grid-template-columns: repeat(3, 1fr);
}

.info-card-grid.four {
    grid-template-columns: repeat(4, 1fr);
}

.info-card {
    background: #ffffff;
    border: 1px solid #e1e4ed;
    padding: 28px;
    box-shadow: 0 14px 34px rgba(28, 38, 98, .05);
}

.bg-white .info-card {
    background: var(--bg);
}

.info-card.accent {
    border-top: 6px solid var(--yellow);
}

.info-card h3 {
    margin: 0 0 12px;
    font-size: 20px;
    color: var(--blue);
}

.info-card p {
    margin: 0;
    color: #646b7d;
    line-height: 1.75;
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid #dfe2eb;
    background: #ffffff;
}

.data-table {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 16px 18px;
    border-bottom: 1px solid #e4e7ef;
    border-right: 1px solid #eef0f5;
    text-align: left;
    vertical-align: middle;
    line-height: 1.55;
}

.data-table th {
    background: var(--blue);
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.data-table td {
    color: #4f5669;
    font-size: 14px;
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}

.price-table td:last-child {
    color: var(--red);
    font-weight: 950;
}

.detail-box {
    background: var(--ink);
    color: #ffffff;
    padding: 42px;
    border-left: 8px solid var(--yellow);
}

.detail-box h2 {
    color: #ffffff;
    font-size: 34px;
    margin-bottom: 18px;
}

.detail-box p {
    margin: 0 0 16px;
    color: #d2d6e3;
    line-height: 1.8;
}

.detail-box p:last-child {
    margin-bottom: 0;
}

.warning-box {
    border-left-color: var(--red);
}

.check-list {
    margin: 24px 0 0;
    padding-left: 20px;
    color: #e2e5ef;
    line-height: 1.9;
}

.compare-list {
    display: grid;
    gap: 14px;
}

.compare-list article {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 26px;
    padding: 24px 26px;
    background: #ffffff;
    border: 1px solid #e1e4ed;
}

.compare-list h3,
.compare-list p {
    margin: 0;
}

.compare-list h3 {
    color: var(--blue);
    font-size: 19px;
}

.compare-list p {
    color: #60677a;
    line-height: 1.75;
}

.product-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.product-type-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #dfe3ed;
    padding: 30px;
    overflow: hidden;
}

.product-type-card.featured {
    border: 3px solid var(--yellow);
}

.product-number {
    color: rgba(23, 38, 164, .12);
    font-size: 64px;
    line-height: 1;
    font-weight: 1000;
    margin-bottom: 6px;
}

.product-type-card h3 {
    margin: 0 0 12px;
    color: var(--blue);
    font-size: 24px;
}

.product-type-card p {
    margin: 0 0 22px;
    color: #62697b;
    line-height: 1.75;
}

.product-type-card dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 0;
}

.product-type-card dl div {
    background: var(--bg);
    padding: 12px;
    text-align: center;
}

.product-type-card dt {
    color: #858b9c;
    font-size: 11px;
    font-weight: 800;
}

.product-type-card dd {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 900;
}

.step-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.step-grid article {
    min-height: 220px;
    padding: 26px;
    background: var(--bg);
    border-top: 5px solid var(--blue);
}

.step-no {
    color: var(--red);
    font-size: 13px;
    font-weight: 950;
    margin-bottom: 26px;
}

.step-grid h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.step-grid p {
    margin: 0;
    color: #62697b;
    line-height: 1.75;
}

.import-highlight {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 30px;
    align-items: center;
    background: var(--blue);
    color: #ffffff;
    padding: 34px 42px;
}

.big-number {
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--blue);
    font-size: 72px;
    line-height: 1;
    font-weight: 1000;
}

.import-highlight h3 {
    margin: 0 0 10px;
    font-size: 28px;
}

.import-highlight p {
    margin: 0;
    color: #d9def7;
    line-height: 1.8;
}

.small-copy {
    font-size: 13px;
}

/* ==============================
   13. SUB PAGE RESPONSIVE
============================== */
@media (max-width: 900px) {
    .main-nav {
        display: none;
        position: absolute;
        left: 14px;
        right: 14px;
        top: 70px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #ffffff;
        border: 1px solid #dfe2ea;
        box-shadow: var(--shadow);
        padding: 10px;
    }

    .main-nav.open {
        display: flex;
    }

    .main-nav a {
        padding: 13px 12px;
        border-bottom: 1px solid #eef0f5;
    }

    .main-nav a:last-child {
        border-bottom: 0;
    }

    .menu-toggle {
        display: block;
    }

    .brand {
        justify-self: start;
        min-width: 0;
    }

    .sub-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sub-hero::before {
        right: -260px;
        top: 140px;
    }

    .sub-hero-image {
        min-height: 240px;
    }

    .info-card-grid.three,
    .info-card-grid.four,
    .product-list-grid,
    .step-grid {
        grid-template-columns: 1fr 1fr;
    }

    .compare-list article {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

@media (max-width: 600px) {
    .sub-hero {
        padding: 54px 0 44px;
    }

    .sub-hero h1 {
        font-size: 42px;
    }

    .sub-lead {
        font-size: 15px;
    }

    .sub-hero-image {
        min-height: 200px;
    }

    .sub-hero-image::before {
        width: 220px;
        height: 220px;
    }

    .page-section {
        padding: 64px 0;
    }

    .info-card-grid.three,
    .info-card-grid.four,
    .product-list-grid,
    .step-grid {
        grid-template-columns: 1fr;
    }

    .detail-box {
        padding: 28px 24px;
    }

    .detail-box h2 {
        font-size: 28px;
    }

    .product-type-card dl {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .import-highlight {
        grid-template-columns: 1fr;
        padding: 28px 24px;
    }

    .big-number {
        width: 110px;
        height: 110px;
        font-size: 58px;
    }
}


/* ==============================
   14. UNIQUE EXPANDED SECTIONS
============================== */
.ingredient-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid #dfe3ed;background:#fff}.ingredient-flow article{padding:30px 24px;border-right:1px solid #dfe3ed}.ingredient-flow article:last-child{border-right:0}.flow-index{display:inline-grid;place-items:center;width:42px;height:42px;background:var(--blue);color:var(--yellow);font-size:12px;font-weight:1000;margin-bottom:22px}.ingredient-flow h3{margin:0 0 10px;font-size:20px}.ingredient-flow p{margin:0;color:#62697b;line-height:1.75}.guide-footnote{margin-top:18px;padding:18px 22px;border:1px dashed #bdc3d1;color:#62697b;line-height:1.7}
.symptom-panel{display:grid;gap:14px}.symptom-panel article{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:24px 28px;background:#fff;border-left:6px solid var(--red);box-shadow:0 10px 30px rgba(17,20,38,.06)}.symptom-panel span{font-size:34px;font-weight:1000;color:rgba(229,31,46,.24)}.symptom-panel h3{margin:0 0 8px;font-size:21px}.symptom-panel p{margin:0;color:#62697b;line-height:1.75}.symptom-alert{margin-top:18px;padding:24px 28px;background:var(--ink);color:#fff}.symptom-alert strong{display:block;color:var(--yellow);font-size:19px;margin-bottom:8px}.symptom-alert p{margin:0;color:#d7dbea;line-height:1.75}
.package-check-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}.package-check{padding:28px;background:#fff;border:1px solid #dfe3ed;min-height:230px}.package-check.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.package-code{display:inline-block;padding:6px 10px;background:var(--yellow);color:var(--blue);font-size:11px;font-weight:1000;letter-spacing:.08em;margin-bottom:34px}.package-check h3{margin:0 0 10px;font-size:21px}.package-check p{margin:0;color:#62697b;line-height:1.75}.package-check.primary p{color:#dfe3ff}.package-tip{display:flex;gap:16px;align-items:flex-start;margin-top:16px;padding:18px 22px;border-left:5px solid var(--yellow);background:#fff}.package-tip b{color:var(--red)}.package-tip span{color:#62697b;line-height:1.7}
.cost-breakdown{display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--ink);border-bottom:1px solid #dfe3ed}.cost-breakdown article{padding:26px 22px;border-right:1px solid #dfe3ed;background:#fff}.cost-breakdown article:last-child{border-right:0}.cost-label{font-size:11px;font-weight:1000;color:var(--red);letter-spacing:.08em;margin-bottom:28px}.cost-breakdown h3{margin:0 0 10px;font-size:20px}.cost-breakdown p{margin:0;color:#62697b;line-height:1.75}.cost-summary{display:grid;grid-template-columns:180px 1fr;margin-top:18px;background:var(--yellow)}.cost-summary span{padding:20px;background:var(--blue);color:#fff;font-size:12px;font-weight:1000;letter-spacing:.08em}.cost-summary p{margin:0;padding:18px 22px;color:#303548;line-height:1.7}
.dose-timeline{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.dose-timeline:before{content:"";position:absolute;left:5%;right:5%;top:23px;height:2px;background:#d8dce8}.dose-timeline article{position:relative;padding:0 14px 20px}.dose-dot{position:relative;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--blue);font-size:12px;font-weight:1000;margin-bottom:26px}.dose-timeline h3{margin:0 0 10px;font-size:20px}.dose-timeline p{margin:0;color:#62697b;line-height:1.75}.dose-note{margin-top:18px;padding:18px 22px;background:#f0f2f8;border-left:5px solid var(--blue);color:#62697b;line-height:1.7}
.import-prep-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.import-prep-grid article{display:grid;grid-template-columns:64px 1fr;gap:20px;padding:26px;background:#fff;border:1px solid #dfe3ed}.import-prep-grid strong{display:grid;place-items:center;width:54px;height:54px;background:var(--ink);color:var(--yellow);font-size:18px}.import-prep-grid h3{margin:2px 0 8px;font-size:20px}.import-prep-grid p{margin:0;color:#62697b;line-height:1.75}.import-note{display:flex;gap:18px;align-items:flex-start;margin-top:18px;padding:20px 24px;background:var(--blue);color:#fff}.import-note b{color:var(--yellow)}.import-note p{margin:0;color:#dfe3ff;line-height:1.7}
@media(max-width:900px){.ingredient-flow,.cost-breakdown,.dose-timeline{grid-template-columns:1fr 1fr}.ingredient-flow article:nth-child(2){border-right:0}.package-check-grid{grid-template-columns:1fr}.dose-timeline:before{display:none}}
@media(max-width:600px){.ingredient-flow,.cost-breakdown,.dose-timeline,.import-prep-grid{grid-template-columns:1fr}.ingredient-flow article,.cost-breakdown article{border-right:0;border-bottom:1px solid #dfe3ed}.symptom-panel article{grid-template-columns:48px 1fr;padding:22px 20px}.cost-summary{grid-template-columns:1fr}.import-prep-grid article{grid-template-columns:50px 1fr}.import-prep-grid strong{width:44px;height:44px}.package-tip,.import-note{display:block}.package-tip b,.import-note b{display:block;margin-bottom:8px}}

/* ==============================
   14. MOBILE HEADER / OVERVIEW PRIORITY FIX
   - Mobile-only visual refinements
============================== */
@media (max-width: 900px) {
    .main-nav {
        left: 14px;
        right: 14px;
        top: 64px;
        width: auto;
        justify-self: stretch;
        align-items: stretch;
        display: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 8px;
        background: rgba(255,255,255,.98);
        border: 1px solid #dfe2ea;
        box-shadow: 0 16px 40px rgba(17,20,38,.14);
    }

    .main-nav.open {
        display: grid;
    }

    .main-nav a {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        padding: 12px 10px;
        border-bottom: 1px solid #eef0f5;
        border-right: 1px solid #eef0f5;
        background: #fff;
        text-align: center;
    }

    .main-nav a:nth-child(2n) {
        border-right: 0;
    }

    .main-nav a:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .main-nav a:last-child {
        grid-column: 1 / -1;
        border-right: 0;
        border-top: 1px solid #eef0f5;
    }

    .feature-zone .container {
        position: relative;
        z-index: 2;
    }

    .feature-zone:before {
        right: -185px;
        top: -135px;
        width: 340px;
        height: 340px;
        border-width: 54px;
        opacity: .22;
        z-index: 0;
    }

    .feature-zone .section-head {
        position: relative;
        z-index: 2;
    }

    .feature-zone .section-head h2 {
        position: relative;
        z-index: 2;
    }

    .feature-zone .section-head p {
        position: relative;
        z-index: 2;
        max-width: 620px;
        color: #d6daea;
    }
}

@media (max-width: 600px) {
    .main-nav {
        left: 10px;
        right: 10px;
        top: 64px;
        padding: 7px;
    }

    .main-nav a {
        min-height: 48px;
        font-size: 14px;
    }

    .feature-zone:before {
        right: -205px;
        top: -120px;
        width: 300px;
        height: 300px;
        border-width: 46px;
        opacity: .18;
    }

    .feature-zone .section-head {
        margin-bottom: 34px;
    }

    .feature-zone .kicker {
        margin-bottom: 9px;
    }

    .feature-zone .section-head h2 {
        font-size: 38px;
        line-height: 1.08;
    }

    .feature-zone .section-head p {
        margin-top: 14px;
        font-size: 15px;
        line-height: 1.8;
        color: #d8dced;
    }
}

/* ==============================
   15. DIRECT PAGE / PAGE LINK NAV
============================== */
.direct-checkout-grid {
    grid-template-columns:repeat(3,1fr);
}


.quick-guide-bar {
    padding:0;
    background:#fff;
    border-top:1px solid #e1e4ec;
    border-bottom:1px solid #e1e4ec;
}
.quick-guide-inner {
    display:grid;
    grid-template-columns:1.15fr repeat(8,1fr);
    width:min(1180px,calc(100% - 40px));
    min-height:74px;
    padding:0;
}
.quick-guide-label,
.quick-guide-inner a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:14px 10px;
    border-right:1px solid #e1e4ec;
}
.quick-guide-label {
    justify-content:flex-start;
    color:var(--red);
    font-size:11px;
    font-weight:950;
    letter-spacing:.15em;
}
.quick-guide-inner a {
    color:var(--ink);
    font-size:13px;
    font-weight:900;
    transition:.2s;
}
.quick-guide-inner a:first-of-type {
    border-left:1px solid #e1e4ec;
}
.quick-guide-inner a:hover {
    background:var(--blue);
    color:#fff;
}


.quick-guide-inner a::after {
    display:none;
}

@media (max-width:900px) {
    .direct-checkout-grid {
        grid-template-columns:1fr 1fr 1fr;
    }
    .quick-guide-inner {
        grid-template-columns:repeat(4,1fr);
        width:100%;
        min-height:0;
    }
    .quick-guide-label {
        grid-column:1 / -1;
        min-height:42px;
        justify-content:center;
        border-right:0;
        border-bottom:1px solid #e1e4ec;
    }
    .quick-guide-inner a {
        min-height:50px;
        border-bottom:1px solid #e1e4ec;
    }
    .quick-guide-inner a:nth-of-type(4n+1) {
        border-left:0;
    }
    .main-nav a:last-child {
        grid-column:auto;
        border-top:0;
    }
}
@media (max-width:600px) {
    .direct-checkout-grid {
        grid-template-columns:1fr;
    }
    .quick-guide-inner {
        grid-template-columns:repeat(2,1fr);
    }
    .quick-guide-inner a {
        min-height:48px;
        font-size:13px;
    }
}