@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Nunito:wght@800;900&display=swap');

:root {
    --forest: #175c43;
    --forest-dark: #0d3f31;
    --leaf: #61ad6a;
    --lime: #b9d76a;
    --cream: #f8f3e6;
    --paper: #fffdf8;
    --sand: #e9ddc3;
    --orange: #ef8354;
    --yellow: #f6c85f;
    --ink: #19342b;
    --muted: #6a786f;
    --shadow: 0 18px 50px rgba(23, 92, 67, .12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(circle at 12px 12px, rgba(23, 92, 67, .045) 2px, transparent 2.5px) 0 0 / 24px 24px,
        var(--cream);
    font-family: 'Noto Sans TC', system-ui, sans-serif;
    padding-bottom: 92px;
}
a { color: inherit; }

.site-header {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
    min-height: 92px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark {
    width: 48px; height: 48px; display: grid; place-items: center;
    border-radius: 50% 50% 46% 54%; background: var(--forest); font-size: 24px;
    box-shadow: inset 0 -5px 0 rgba(0,0,0,.1); transform: rotate(-4deg);
}
.brand > span:last-child { display: grid; }
.brand strong { font-size: 21px; font-weight: 900; letter-spacing: .04em; }
.brand small { color: var(--leaf); font: 900 9px/1.2 Nunito, sans-serif; letter-spacing: .17em; }
.nav-pill {
    display: inline-flex; align-items: center; padding: 10px 19px; border-radius: 999px;
    background: var(--paper); border: 1px solid var(--sand); text-decoration: none; font-weight: 800;
    box-shadow: 0 4px 0 var(--sand);
}

main { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.hero {
    min-height: 480px; padding: 72px 74px; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 45px;
    border-radius: 38px; color: white; background: var(--forest);
    box-shadow: var(--shadow);
}
.hero::before {
    content: ''; position: absolute; inset: 0; opacity: .18;
    background: repeating-linear-gradient(117deg, transparent 0 36px, rgba(255,255,255,.12) 37px 39px);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
    display: inline-flex; margin-bottom: 22px; padding: 8px 15px; border-radius: 999px;
    color: var(--forest-dark); background: var(--lime); font-weight: 900; letter-spacing: .13em; font-size: 12px;
}
.hero h1 { margin: 0; font-size: clamp(42px, 5.2vw, 72px); line-height: 1.12; letter-spacing: -.05em; font-weight: 900; }
.hero h1 em { color: #d9e990; font-style: normal; }
.hero-copy > p { max-width: 620px; margin: 25px 0; font-size: 17px; line-height: 1.9; color: rgba(255,255,255,.82); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-chips span { padding: 8px 13px; border-radius: 99px; background: rgba(255,255,255,.1); font-size: 13px; font-weight: 700; }
.island-card { position: relative; z-index: 1; min-height: 330px; border-radius: 47% 53% 42% 58%; background: #9bd5cf; overflow: hidden; }
.sun { position: absolute; right: 52px; top: 40px; width: 60px; height: 60px; border-radius: 50%; background: var(--yellow); }
.cloud { position: absolute; width: 85px; height: 23px; border-radius: 99px; background: rgba(255,255,255,.78); }
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 35px; height: 35px; left: 14px; bottom: 0; }
.cloud::after { width: 28px; height: 28px; right: 12px; bottom: 0; }
.cloud-one { left: 28px; top: 55px; }.cloud-two { right: 25px; top: 120px; transform: scale(.65); }
.island { position: absolute; width: 290px; height: 130px; left: 50%; bottom: 48px; transform: translateX(-50%); border-radius: 50%; background: #c6db78; box-shadow: inset 0 -28px 0 #7fb56b, 0 15px 0 rgba(13,63,49,.15); }
.tree { position: absolute; color: var(--forest); font-size: 66px; line-height: 1; text-shadow: 0 9px 0 #805f3d; }
.tree-one { left: 44px; top: -22px; }.tree-two { right: 32px; top: -2px; transform: scale(.76); }
.house { position: absolute; left: 122px; top: 11px; font: 900 74px/1 Nunito; color: #ef8354; text-shadow: inset 0 -4px #bd5130; }
.island-label { position: absolute; left: 27px; bottom: 24px; color: rgba(13,63,49,.52); font: 900 11px/1.1 Nunito; letter-spacing: .18em; }

.promo-banner {
    margin: 24px 0; padding: 21px 25px; display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 18px; border: 1px solid #edc895; border-radius: 22px; background: #fff4da;
}
.promo-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: white; font-size: 27px; }
.promo-banner strong { display: block; margin: 4px 0 1px; font-size: 19px; }.promo-banner p { margin: 0; color: #76664f; font-size: 13px; }
.ad-label { color: #b25b37; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.promo-banner > a { padding: 12px 18px; border-radius: 13px; background: var(--orange); color: white; text-decoration: none; font-weight: 900; }

.search-section { padding: 80px 0 35px; }
.section-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.section-heading p { margin: 0 0 2px; color: var(--leaf); font: 900 11px/1 Nunito; letter-spacing: .17em; }
.section-heading h2 { margin: 0; font-size: 34px; letter-spacing: -.04em; }
.step-number { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 19px; background: var(--forest); color: white; font: 900 19px Nunito; box-shadow: 0 6px 0 #c8c4a6; }
.search-panel {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end;
    padding: 30px; border: 1px solid var(--sand); border-radius: 26px; background: var(--paper); box-shadow: var(--shadow);
}
.search-panel label { display: grid; gap: 9px; }
.search-panel label > span { font-size: 13px; font-weight: 900; }
.search-panel select {
    width: 100%; height: 58px; padding: 0 44px 0 16px; border: 2px solid #e4dfd0; border-radius: 14px;
    background: white; color: var(--ink); font: 700 16px 'Noto Sans TC'; outline: none;
}
.search-panel select:focus { border-color: var(--leaf); box-shadow: 0 0 0 4px rgba(97,173,106,.14); }
.search-panel button {
    height: 58px; min-width: 180px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between;
    border: 0; border-radius: 14px; color: white; background: var(--forest); font: 900 16px 'Noto Sans TC'; cursor: pointer;
    box-shadow: 0 6px 0 var(--forest-dark); transition: transform .15s;
}
.search-panel button:hover { transform: translateY(-2px); }.search-panel button b { font-size: 24px; }

.results { margin-top: 44px; }
.results-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px; }
.results-head span { color: var(--leaf); font-size: 12px; font-weight: 900; letter-spacing: .12em; }
.results-head h2 { margin: 4px 0 0; font-size: 27px; }.results-head p { margin: 0; color: var(--muted); font-size: 13px; }
.price-list { display: grid; gap: 12px; }
.price-card {
    position: relative; padding: 23px 25px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 22px;
    border: 1px solid #e3ddce; border-radius: 20px; background: var(--paper); box-shadow: 0 7px 20px rgba(23,92,67,.06);
}
.price-card::before { content: ''; position: absolute; left: 0; top: 26px; bottom: 26px; width: 5px; border-radius: 0 9px 9px 0; background: var(--leaf); }
.card-main { min-width: 0; padding-left: 8px; }.card-main h3 { margin: 4px 0 7px; font-size: 20px; }
.location { color: var(--forest); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.note { display: inline-block; margin: 6px 0; padding: 7px 10px; border-radius: 9px; background: #f2eedf; color: #645d4c; font-size: 13px; }
.updated { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.price { min-width: 150px; text-align: right; }.price small { display: block; color: var(--muted); font-weight: 800; }.price strong { display: block; color: var(--forest); font: 900 31px Nunito, sans-serif; letter-spacing: -.03em; }.price strong span { margin-right: 5px; font-size: 13px; }
.sponsored { border-color: #efc58c; background: #fff8e8; }.sponsored::before { background: var(--orange); }.sponsor-tag { color: #b25b37; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.card-link { grid-column: 1 / -1; margin-top: -8px; color: #b25b37; font-size: 13px; font-weight: 900; }
.message { padding: 24px; border-radius: 17px; background: white; border: 1px solid var(--sand); }.error-message { color: #9d3f37; border-color: #e4b8ae; background: #fff3ef; }
.pagination { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }.pagination a { padding: 11px 17px; border: 1px solid var(--sand); border-radius: 12px; background: white; text-decoration: none; font-weight: 800; }

.disclaimer { margin: 35px 0 75px; padding: 23px 25px; border-top: 1px solid #d7cfbb; color: var(--muted); }.disclaimer strong { color: var(--ink); }.disclaimer p { margin: 8px 0 0; font-size: 12px; line-height: 1.8; }
.disclaimer-link { display: inline-block; margin-top: 12px; color: var(--forest); font-size: 13px; font-weight: 900; }
footer { width: min(1160px, calc(100% - 40px)); margin: 0 auto 26px; padding-top: 24px; display: flex; justify-content: space-between; border-top: 1px solid #d7cfbb; color: var(--muted); font-size: 12px; }
footer div { display: grid; }footer strong { color: var(--forest); font-size: 16px; }footer p { margin: 0; }
.footer-meta { display: flex; align-items: center; gap: 15px; text-align: right; }.footer-meta a { color: var(--forest); font-weight: 800; }
.bottom-ad {
    position: fixed; left: 50%; bottom: 14px; z-index: 20; transform: translateX(-50%);
    width: min(760px, calc(100% - 24px)); min-height: 70px; padding: 13px 14px 13px 23px;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px;
    color: white; background: rgba(13,63,49,.97); border: 1px solid rgba(255,255,255,.2); border-radius: 20px;
    box-shadow: 0 18px 48px rgba(5,36,27,.35); backdrop-filter: blur(10px); transition: transform .25s, opacity .25s;
}
.bottom-ad button { position: absolute; right: -7px; top: -9px; width: 27px; height: 27px; border: 0; border-radius: 50%; background: white; color: var(--forest-dark); font-size: 19px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.bottom-ad div { display: grid; }.bottom-ad span { color: var(--lime); font-size: 11px; font-weight: 900; }.bottom-ad strong { font-size: 15px; }
.bottom-ad a { padding: 11px 16px; border-radius: 11px; background: var(--yellow); color: var(--forest-dark); text-decoration: none; font-weight: 900; white-space: nowrap; }
.bottom-ad.is-closed { transform: translate(-50%, 130%); opacity: 0; pointer-events: none; }.ad-closed { padding-bottom: 0; }

.legal-page { padding-bottom: 0; }
.legal-main { margin-bottom: 70px; }
.legal-hero { padding: 70px 74px; border-radius: 35px; color: white; background: var(--forest); box-shadow: var(--shadow); }
.legal-hero .eyebrow { margin-bottom: 16px; }.legal-hero h1 { margin: 0; font-size: clamp(40px, 5vw, 66px); letter-spacing: -.05em; }
.legal-hero p { margin: 15px 0; color: rgba(255,255,255,.8); font-size: 16px; }.legal-updated { color: var(--lime); font-size: 12px; font-weight: 800; }
.legal-layout { display: grid; grid-template-columns: 210px 1fr; gap: 50px; align-items: start; padding: 55px 0; }
.legal-index { position: sticky; top: 20px; display: grid; gap: 7px; padding: 20px; border: 1px solid var(--sand); border-radius: 18px; background: var(--paper); }
.legal-index strong { margin-bottom: 5px; }.legal-index a { padding: 7px 8px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 700; }.legal-index a:hover { color: var(--forest); background: #edf3e5; }
.legal-content { display: grid; gap: 14px; }
.legal-section { scroll-margin-top: 20px; padding: 30px; display: grid; grid-template-columns: 48px 1fr; gap: 20px; border: 1px solid #e3ddce; border-radius: 22px; background: var(--paper); }
.legal-number { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: white; background: var(--forest); font: 900 14px Nunito; }
.legal-section h2 { margin: 5px 0 14px; font-size: 23px; }.legal-section p { margin: 0 0 11px; color: #53645b; line-height: 1.9; font-size: 14px; }.legal-section p:last-child { margin-bottom: 0; }
.warning-section { border-color: #e9c88e; background: #fff9ea; }.warning-section .legal-number { color: var(--forest-dark); background: var(--yellow); }
.legal-actions { display: flex; justify-content: space-between; gap: 12px; padding-top: 18px; }.legal-actions a { padding: 12px 17px; border-radius: 12px; font-weight: 900; text-decoration: none; }.legal-home-link { border: 1px solid var(--sand); background: white; }.legal-contact-link { color: white; background: var(--forest); }

@media (max-width: 820px) {
    .hero { grid-template-columns: 1fr; padding: 54px 35px; }.island-card { min-height: 260px; }.hero h1 { font-size: 48px; }
    .search-panel { grid-template-columns: 1fr 1fr; }.search-panel button { grid-column: 1 / -1; }
    .legal-layout { grid-template-columns: 1fr; gap: 20px; }.legal-index { position: static; grid-template-columns: repeat(2, 1fr); }.legal-index strong { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    body { padding-bottom: 88px; }.site-header, main, footer { width: min(100% - 24px, 1160px); }.site-header { min-height: 76px; }
    .brand strong { font-size: 17px; }.brand-mark { width: 42px; height: 42px; }.nav-pill { padding: 8px 12px; font-size: 13px; }
    .hero { min-height: auto; padding: 43px 25px 27px; border-radius: 27px; gap: 30px; }.hero h1 { font-size: 39px; }.hero-copy > p { font-size: 14px; }.island-card { min-height: 220px; }
    .island { transform: translateX(-50%) scale(.78); }.promo-banner { grid-template-columns: auto 1fr; padding: 18px; }.promo-banner > a { grid-column: 1 / -1; text-align: center; }
    .search-section { padding-top: 55px; }.search-panel { grid-template-columns: 1fr; padding: 20px; }.search-panel button { grid-column: auto; width: 100%; }
    .price-card { grid-template-columns: 1fr; gap: 10px; padding: 20px; }.price { min-width: 0; text-align: left; display: flex; align-items: baseline; gap: 10px; }.price small, .price strong { display: inline-block; }.price strong { font-size: 28px; }
    .results-head { align-items: start; }.results-head p { text-align: right; }.bottom-ad { grid-template-columns: 1fr auto; border-radius: 15px; }.bottom-ad strong { font-size: 12px; }.bottom-ad a { padding: 10px 12px; font-size: 12px; }
    footer { align-items: end; }.disclaimer { margin-bottom: 50px; }.footer-meta { display: grid; gap: 2px; }
    .legal-hero { padding: 43px 25px; border-radius: 27px; }.legal-hero h1 { font-size: 39px; }.legal-layout { padding-top: 30px; }.legal-index { grid-template-columns: 1fr 1fr; padding: 15px; }.legal-section { grid-template-columns: 1fr; padding: 22px; }.legal-section h2 { margin-top: 0; font-size: 21px; }.legal-actions { flex-direction: column; text-align: center; }
}

/* Mobile-first component theme. */
:root {
    --forest: #27885f;
    --forest-dark: #176147;
    --leaf: #65b85a;
    --lime: #c8df6a;
    --cream: #fff8df;
    --paper: #fffef8;
    --sand: #ead69b;
    --orange: #f28a3b;
    --yellow: #ffd45c;
    --ink: #315342;
    --muted: #69766d;
    --sky: #65cdf1;
    --sky-dark: #26a9d3;
    --coral: #f27661;
    --shadow: 0 13px 0 rgba(38, 132, 91, .14), 0 23px 55px rgba(43, 119, 89, .13);
}

body {
    background-color: #fff9e8;
    background-image:
        radial-gradient(circle at 5px 5px, rgba(242, 138, 59, .14) 1.7px, transparent 1.9px),
        radial-gradient(circle at 14px 14px, rgba(101, 184, 90, .10) 1.4px, transparent 1.6px);
    background-size: 19px 19px;
}

.site-header {
    position: relative;
    margin-top: 8px;
    padding: 11px 17px;
    min-height: 86px;
    border: 3px solid #fff;
    border-radius: 22px;
    background: rgba(255, 254, 248, .94);
    box-shadow: 0 5px 0 var(--sand);
}
.site-header::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: -10px;
    border-bottom: 4px dashed var(--leaf);
}
.brand-mark {
    background: linear-gradient(145deg, #88ce62, #2d9565);
    border: 3px solid #fff;
    box-shadow: 0 4px 0 #1f7352, 0 0 0 2px var(--yellow);
}
.brand small { margin-top: 6px; color: #d66d32; letter-spacing: .06em; }
.nav-pill {
    border: 2px solid #df9a38;
    background: #fff1ad;
    color: #76512f;
    box-shadow: 0 4px 0 #e3a243;
}
.nav-pill:hover { transform: translateY(-1px) rotate(-1deg); }
.nav-pill.active { background: var(--forest); border-color: #176147; box-shadow: 0 4px 0 #16533f; }

.brand-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px 5px;
    border: 3px solid var(--orange);
    border-radius: 9px 13px 8px 12px;
    outline: 2px solid #fff;
    background: #fff2b8;
    box-shadow: 3px 4px 0 #da6836;
    transform: rotate(-1deg);
    line-height: 1;
    white-space: nowrap;
}
.brand-character {
    position: relative;
    min-width: 27px;
    min-height: 28px;
    padding: 3px 4px;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.92);
    border-radius: 5px 7px 5px 8px;
    color: white;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0;
    -webkit-text-stroke: .35px rgba(29,75,62,.48);
    text-shadow: 0 2px 0 rgba(33,79,63,.35);
    box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
}
.brand-character--1 { background-color: #2a9fce; background-image: radial-gradient(circle, rgba(255,255,255,.26) 1px, transparent 1.3px); background-size: 6px 6px; }
.brand-character--2 { background-color: #ed7059; background-image: repeating-linear-gradient(45deg, transparent 0 5px, rgba(255,255,255,.14) 5px 7px); }
.brand-character--3 { background-color: #efa53d; background-image: radial-gradient(circle at 75% 25%, rgba(255,255,255,.25) 0 3px, transparent 3.5px); }
.brand-character--4 { background-color: #4aa45c; background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.5px); background-size: 7px 7px; }
.brand-character--5 { background-color: #259c86; background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,.13) 6px 8px); }
.brand-character--6 { background-color: #3c8fc5; background-image: radial-gradient(circle at 25% 70%, rgba(255,255,255,.24) 0 2px, transparent 2.5px); background-size: 11px 11px; }
.brand-wordmark--hero {
    gap: 4px;
    margin-bottom: 14px;
    padding: 7px 10px 9px;
    border-width: 4px;
    border-radius: 14px 18px 13px 17px;
    box-shadow: 6px 8px 0 #d96938, 0 0 0 4px rgba(255,255,255,.55);
}
.brand-wordmark--hero .brand-character { min-width: clamp(38px, 4.4vw, 60px); min-height: clamp(42px, 4.8vw, 65px); padding: 5px; font-size: clamp(27px, 3.3vw, 45px); border-width: 3px; }

.hero {
    margin-top: 28px;
    border: 5px solid #fff;
    outline: 4px solid var(--sky-dark);
    color: var(--ink);
    background: var(--sky);
    box-shadow: 0 12px 0 #49b786, 0 24px 55px rgba(38, 139, 173, .22);
}
.hero::before {
    opacity: .58;
    background-image: radial-gradient(circle, rgba(255,255,255,.8) 1.7px, transparent 1.9px);
    background-size: 11px 11px;
}
.hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    left: -7%;
    right: -7%;
    bottom: -105px;
    height: 205px;
    border-radius: 50% 50% 0 0;
    background: linear-gradient(180deg, #83d36a, #44ae72);
    border-top: 8px solid rgba(255,255,255,.45);
}
.hero-copy { padding: 18px; border-radius: 25px; background: rgba(255,255,255,.72); backdrop-filter: blur(3px); }
.hero-copy > p { color: #3c6456; }
.hero h1 em { color: #247554; text-shadow: 0 3px 0 #fff, 0 5px 0 rgba(242,138,59,.28); }
.hero-chips span { color: #315342; border: 2px solid rgba(255,255,255,.8); background: #fff2ad; }
.eyebrow { color: #72462c; background: var(--yellow); border: 2px solid #fff; box-shadow: 0 3px 0 var(--orange); }
.island-card { border: 5px solid #fff4b7; outline: 3px solid var(--orange); box-shadow: 0 9px 0 rgba(32,130,95,.3); background: #9de3f4; }

.promo-banner { border: 3px solid var(--orange); background: #fff3b8; box-shadow: 0 6px 0 #e5bd61; }
.promo-icon { border: 2px solid #fff; background: #7ecb70; box-shadow: 0 3px 0 #3f9e66; }
.promo-banner > a { border: 2px solid #fff; box-shadow: 0 4px 0 #bd592f; }
.community-intro, .search-panel, .calculator-card, .remaining-card, .legal-section, .guide-grid article, .calculator-faq details {
    border: 3px solid #efaa4f;
    box-shadow: 0 8px 0 #f1d693, 0 18px 40px rgba(54,117,82,.10);
}
.community-links a { border: 2px solid #8bcf74; background: #faffed; }
.community-links a:nth-child(2) { border-color: #62c5dd; background: #effcff; }
.community-links a:nth-child(3) { border-color: #f5b36a; background: #fff7e9; }
.step-number { border: 3px solid #fff; outline: 2px solid var(--orange); background: var(--coral); box-shadow: 0 5px 0 #db9d3a; }
.search-panel button, .dose-form > button { border: 2px solid #fff; background: var(--orange); box-shadow: 0 6px 0 #bd5b31; }
.search-panel select, .dose-form select, .dose-form input, .tracker-field select { border-color: #8bcf74; background: #fffef7; }
.price-card { border: 2px solid #8acb71; box-shadow: 0 6px 0 #dcebb6; }
.price-card:nth-child(3n+2) { border-color: #66c3dd; }.price-card:nth-child(3n) { border-color: #f1aa56; }
.price-card::before { width: 7px; background: var(--orange); }
.price strong, .price-value { color: #247a58; }
.sponsored { border: 3px solid var(--orange); background: #fff4c8; }
.bottom-ad { border: 3px solid #fff2a7; background: rgba(35, 130, 89, .97); box-shadow: 0 7px 0 #155e46, 0 18px 48px rgba(5,36,27,.35); }
.bottom-ad a { border: 2px solid #fff; box-shadow: 0 3px 0 #d87b36; }

.calculator-hero, .legal-hero {
    margin-top: 28px;
    border: 5px solid #fff;
    outline: 4px solid var(--sky-dark);
    background-color: var(--sky);
    background-image: radial-gradient(circle, rgba(255,255,255,.72) 1.6px, transparent 1.8px);
    background-size: 11px 11px;
    box-shadow: 0 12px 0 #49b786, 0 24px 55px rgba(38,139,173,.2);
}
.calculator-hero > div:first-child { padding: 18px; border-radius: 24px; background: rgba(255,255,255,.74); color: var(--ink); }
.calculator-hero p { color: #3c6456; }.calculator-hero h1 em { color: #267b57; text-shadow: 0 3px 0 white; }
.calculator-formula { border: 3px solid #fff; background: rgba(39,136,95,.86); }.calculator-formula strong { background: var(--yellow); }
.legal-hero { color: var(--ink); }.legal-hero p { color: #3c6456; }.legal-updated { display: inline-block; padding: 5px 9px; border-radius: 9px; color: #734c2e; background: var(--yellow); }
.legal-index { border: 3px solid #75c46a; box-shadow: 0 6px 0 #dcebb6; }
.warning-section, .dose-warning { border: 3px solid var(--orange); background: #fff5c9; }
footer { border-top: 4px dashed var(--leaf); }

@media (max-width: 700px) {
    .site-header { padding: 9px; }
    .brand-mark { display: none; }
    .brand-wordmark { gap: 1px; padding: 3px 4px 4px; }
    .brand-character { min-width: 22px; min-height: 24px; padding: 2px 3px; font-size: 15px; }
    .brand-wordmark--hero { gap: 2px; max-width: 100%; padding: 5px 6px 7px; }
    .brand-wordmark--hero .brand-character { min-width: calc((100vw - 108px) / 6); min-height: 39px; font-size: clamp(22px, 7vw, 32px); }
    .hero, .calculator-hero, .legal-hero { outline-width: 3px; }
}

/* 手機版為唯一主要版型；寬螢幕維持置中的手機閱讀比例 */
.site-header,
main,
footer {
    width: min(calc(100% - 18px), 520px);
}
.site-header { min-height: 78px; }
.site-header nav { gap: 5px; }
.nav-pill { padding: 8px 10px; font-size: 11px; }
.brand-mark { display: none; }
.brand-wordmark { gap: 1px; padding: 3px 4px 4px; }
.brand-character { min-width: 22px; min-height: 24px; padding: 2px 3px; font-size: 15px; }
.brand small { display: block; font-size: 7px; text-align: center; }

.hero {
    min-height: auto;
    padding: 28px 18px 20px;
    grid-template-columns: 1fr;
    gap: 25px;
    border-radius: 28px;
}
.hero-copy { padding: 17px 13px; text-align: center; }
.hero-copy > p { margin: 20px 0; font-size: 14px; line-height: 1.8; }
.hero-chips { justify-content: center; }
.brand-wordmark--hero { gap: 2px; max-width: 100%; padding: 5px 6px 7px; }
.brand-wordmark--hero .brand-character { min-width: calc((100vw - 108px) / 6); max-width: 54px; min-height: 40px; font-size: clamp(23px, 7vw, 34px); }
.hero h1 em { display: inline-block; margin-top: 8px; font-size: clamp(29px, 8vw, 41px); line-height: 1.25; }

.mascot-stage {
    position: relative;
    min-height: 270px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    isolation: isolate;
    background:
        radial-gradient(circle, rgba(255,255,255,.78) 1.6px, transparent 1.8px) 0 0 / 12px 12px,
        linear-gradient(180deg, #74d5f3 0 67%, #7ccf67 67% 100%);
}
.mascot-stage::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: -12%;
    right: -12%;
    bottom: -65px;
    height: 175px;
    border-radius: 50% 50% 0 0;
    background: #57b96b;
    border-top: 7px solid rgba(255,255,255,.42);
}
.mascot-stage img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 255px;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 0 rgba(31,104,75,.16));
}
.mascot-cloud { position: absolute; z-index: 0; width: 82px; height: 24px; border-radius: 99px; background: rgba(255,255,255,.85); }
.mascot-cloud::before, .mascot-cloud::after { content: ''; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }.mascot-cloud::before { left: 13px; width: 35px; height: 35px; }.mascot-cloud::after { right: 10px; width: 28px; height: 28px; }
.mascot-cloud-one { left: 22px; top: 55px; }.mascot-cloud-two { right: 18px; top: 115px; transform: scale(.72); }
.mascot-stage .island-label { z-index: 3; }

.promo-banner { grid-template-columns: auto 1fr; padding: 18px; }
.promo-banner > a { grid-column: 1 / -1; text-align: center; }
.community-intro { padding: 24px; grid-template-columns: 1fr; gap: 24px; }
.community-intro h2 { font-size: 26px; }
.search-section, .calculator-section, .dose-guide, .calculator-faq { padding-top: 52px; }
.search-panel, .dose-form { grid-template-columns: 1fr; padding: 20px; }
.search-panel button, .dose-form > button { grid-column: auto; width: 100%; }
.price-card { padding: 20px; grid-template-columns: 1fr; gap: 10px; }
.price { min-width: 0; display: flex; align-items: baseline; gap: 9px; text-align: left; }
.price small, .price strong { display: inline-block; }
.results-head { align-items: flex-start; }.results-head p { text-align: right; }

.calculator-hero { min-height: auto; padding: 35px 18px 23px; grid-template-columns: 1fr; border-radius: 28px; }
.calculator-hero > div:first-child { padding: 16px 11px; text-align: center; }
.calculator-hero h1 { font-size: 38px; }.calculator-formula { max-width: none; padding: 15px; }
.calculator-card { padding: 20px; }.dose-result { grid-template-columns: 1fr; }.result-primary { grid-row: auto; }.result-details { grid-template-columns: 1fr; }.calculation-note { align-items: flex-start; flex-direction: column; }
.guide-grid { grid-template-columns: 1fr; }.dose-warning { grid-template-columns: 1fr; }

.legal-hero { padding: 38px 22px; border-radius: 28px; }.legal-hero h1 { font-size: 37px; }.legal-layout { padding-top: 30px; grid-template-columns: 1fr; gap: 20px; }.legal-index { position: static; grid-template-columns: 1fr 1fr; padding: 15px; }.legal-index strong { grid-column: 1 / -1; }.legal-section { padding: 22px; grid-template-columns: 1fr; }.legal-actions { flex-direction: column; text-align: center; }
footer { align-items: flex-end; }.footer-meta { display: grid; gap: 2px; }

@media (min-width: 521px) {
    body { padding-top: 5px; }
    .brand-wordmark--hero .brand-character { min-width: 54px; font-size: 36px; }
}

@media (max-width: 390px) {
    .site-header { padding-inline: 7px; }
    .brand-character { min-width: 20px; font-size: 14px; }
    .nav-pill { padding-inline: 7px; }
    .mascot-stage { min-height: 235px; }
    .mascot-stage img { height: 222px; }
}

/* 查詢完成後進入精簡結果模式，第一屏直接呈現答案 */
.result-head-actions { display: grid; justify-items: end; gap: 7px; }
.result-head-actions p { margin: 0; }
.result-edit-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border: 2px solid var(--orange);
    border-radius: 999px;
    color: #a9542d;
    background: #fff8d8;
    font-size: 11px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 3px 0 #e4bd69;
}
.result-edit-link-light { margin: 13px auto 0; color: var(--forest-dark); background: var(--yellow); border-color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.14); }

.price-result-page { padding-top: 0; padding-bottom: 92px; }
.calculator-result-page { padding-top: 0; padding-bottom: 0; }
.price-result-page .hero,
.price-result-page .community-intro,
.price-result-page .search-section > .section-heading,
.calculator-result-page .calculator-hero,
.calculator-result-page .promo-banner,
.calculator-result-page .calculator-section > .section-heading,
.calculator-result-page .dose-form,
.calculator-result-page .bottom-ad { display: none; }
.price-result-page main,
.calculator-result-page main { padding-top: 9px; }
.price-result-page .search-section,
.calculator-result-page .calculator-section { padding-top: 0; }
.price-result-page .promo-banner { margin-top: 12px; }
.price-result-page .search-panel { margin-bottom: 18px; }
.price-result-page .results { margin-top: 0; }
.calculator-result-page .calculator-card { padding: 0; border: 0; background: transparent; box-shadow: none; }
.calculator-result-page .dose-result { margin-top: 0; }
.calculator-result-page .result-primary { border: 4px solid #fff; outline: 3px solid var(--orange); box-shadow: 0 8px 0 #e7c874; }

@media (max-width: 390px) {
    .results-head h2 { font-size: 23px; }
    .result-head-actions { min-width: 86px; }
}

.site-header nav { display: flex; align-items: center; gap: 9px; }
.nav-pill.active { color: white; background: var(--forest); border-color: var(--forest); box-shadow: 0 4px 0 var(--forest-dark); }

.community-intro {
    margin: 26px 0 0; padding: 38px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 38px;
    border: 1px solid var(--sand); border-radius: 28px; background: var(--paper); box-shadow: var(--shadow);
}
.community-intro .eyebrow { margin-bottom: 14px; }.community-intro h2 { margin: 0 0 12px; font-size: 31px; letter-spacing: -.04em; }
.community-intro p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.community-links { display: grid; gap: 9px; }
.community-links a { padding: 14px 16px; display: grid; grid-template-columns: 42px 1fr; column-gap: 11px; border: 1px solid #e5dfd0; border-radius: 15px; text-decoration: none; transition: transform .15s, border-color .15s; }
.community-links a:hover { transform: translateX(3px); border-color: var(--leaf); }.community-links span { grid-row: 1 / 3; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; background: var(--forest); font: 900 12px Nunito; }
.community-links strong { font-size: 14px; }.community-links small { color: var(--muted); font-size: 11px; }

.calculator-main { margin-bottom: 70px; }
.calculator-hero { min-height: 350px; padding: 66px 70px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; border-radius: 35px; color: white; background: var(--forest); box-shadow: var(--shadow); }
.calculator-hero h1 { margin: 0; font-size: clamp(42px, 5vw, 64px); line-height: 1.12; letter-spacing: -.05em; }.calculator-hero h1 em { color: var(--lime); font-style: normal; }.calculator-hero p { max-width: 620px; margin: 18px 0 0; color: rgba(255,255,255,.8); line-height: 1.8; }
.calculator-formula { padding: 25px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 9px; border-radius: 26px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.17); }
.calculator-formula span, .calculator-formula strong { padding: 13px 15px; border-radius: 12px; text-align: center; background: rgba(255,255,255,.12); font-size: 13px; }.calculator-formula strong { grid-column: 1 / -1; color: var(--forest-dark); background: var(--lime); }.calculator-formula b { color: var(--lime); }
.calculator-section, .remaining-section, .dose-guide, .calculator-faq { padding-top: 72px; }
.calculator-card, .remaining-card { padding: 32px; border: 1px solid var(--sand); border-radius: 27px; background: var(--paper); box-shadow: var(--shadow); }
.dose-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }.dose-form label { display: grid; gap: 9px; }.dose-form label > span { font-size: 13px; font-weight: 900; }.dose-form label > span b { display: inline-block; margin-right: 5px; color: var(--leaf); font: 900 10px Nunito; letter-spacing: .1em; }.dose-form label small { color: var(--muted); font-size: 10px; }
.dose-form select, .dose-form input, .tracker-field select { width: 100%; height: 58px; padding: 0 45px 0 16px; border: 2px solid #e4dfd0; border-radius: 14px; background: white; color: var(--ink); font: 700 16px 'Noto Sans TC'; outline: none; }.dose-form input { padding-right: 16px; }.dose-form select:focus, .dose-form input:focus, .tracker-field select:focus, .custom-dose input:focus { border-color: var(--leaf); box-shadow: 0 0 0 4px rgba(97,173,106,.14); }
.dose-form > button { height: 58px; min-width: 170px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 14px; color: white; background: var(--forest); font: 900 15px 'Noto Sans TC'; box-shadow: 0 6px 0 var(--forest-dark); cursor: pointer; }
.dose-result { margin-top: 34px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; }.result-primary { grid-row: 1 / 3; padding: 28px; display: flex; flex-direction: column; justify-content: center; text-align: center; border-radius: 22px; color: white; background: var(--forest); }.result-primary > span { color: var(--lime); font-size: 11px; font-weight: 900; letter-spacing: .12em; }.result-primary p { margin: 9px 0 0; font-size: 14px; }.result-primary strong { display: block; margin: 3px 0; color: var(--lime); font: 900 65px Nunito; }.result-primary strong small { margin-left: 6px; color: white; font-size: 19px; }.result-primary em { color: rgba(255,255,255,.72); font-size: 11px; font-style: normal; }
.result-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.result-details > div { padding: 21px; display: grid; gap: 4px; border: 1px solid #e5dfd0; border-radius: 17px; background: #f8f5eb; }.result-details span { color: var(--muted); font-size: 11px; font-weight: 800; }.result-details strong { color: var(--forest); font-size: 23px; }.result-details small { color: var(--muted); font-size: 10px; }
.calculation-note { padding: 17px 19px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-radius: 16px; background: #edf3e5; }.calculation-note strong { font-size: 12px; }.calculation-note code { color: var(--forest); font: 800 13px Nunito, monospace; }

.remaining-card { max-width: 720px; margin: 0 auto; }.tracker-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }.tracker-heading > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: #edf3e5; font-size: 23px; }.tracker-heading h3 { margin: 0; font-size: 23px; }.tracker-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.tracker-field { display: grid; gap: 8px; }.tracker-field > span { font-size: 13px; font-weight: 900; }.residual-toggle { margin: 15px 0 20px; display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }.residual-toggle input { width: 19px; height: 19px; accent-color: var(--forest); }.residual-toggle small { color: var(--muted); font-weight: 500; }
.remaining-meter { padding: 24px; border-radius: 20px; background: #fbf8dc; }.meter-line { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; }.meter-line > span { color: var(--muted); }.meter-line small { color: var(--muted); font-size: 11px; }.meter-track { height: 19px; margin: 16px 0; overflow: hidden; border: 2px solid #a57649; border-radius: 99px; background: white; }.meter-track > span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--yellow)); transition: width .25s; }.remaining-line strong { color: var(--forest); }
.quick-dose { margin-top: 25px; }.quick-dose > strong { display: block; margin-bottom: 12px; text-align: center; font-size: 13px; }.quick-dose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.quick-dose-grid button { min-height: 47px; border: 2px solid var(--orange); border-radius: 13px; color: #b75b35; background: white; font: 900 13px 'Noto Sans TC'; cursor: pointer; }.quick-dose-grid button:hover { color: white; background: var(--orange); }.quick-dose-grid button:disabled { opacity: .35; cursor: not-allowed; background: #eee; color: #888; border-color: #ccc; }
.custom-dose { margin-top: 24px; padding-top: 22px; border-top: 1px dashed #ddd3bf; }.custom-dose > label { display: block; margin-bottom: 9px; text-align: center; font-size: 13px; font-weight: 800; }.custom-dose > div { display: grid; grid-template-columns: 1fr auto; gap: 9px; }.custom-dose input { height: 50px; padding: 0 14px; border: 2px solid #dfd9ca; border-radius: 13px; font: 700 15px 'Noto Sans TC'; outline: none; }.custom-dose button { padding: 0 20px; border: 2px solid var(--orange); border-radius: 13px; color: #b75b35; background: white; font-weight: 900; cursor: pointer; }
.tracker-status { min-height: 19px; margin: 12px 0; color: var(--muted); text-align: center; font-size: 11px; }.tracker-status.is-error { color: #a94037; font-weight: 800; }.tracker-reset { width: 100%; min-height: 48px; border: 1px solid #d2b581; border-radius: 14px; color: var(--forest-dark); background: #f0e6d2; font-weight: 800; cursor: pointer; }

.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.guide-grid article { padding: 25px; border: 1px solid var(--sand); border-radius: 20px; background: var(--paper); }.guide-grid article > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: white; background: var(--forest); }.guide-grid h3 { margin: 16px 0 8px; }.guide-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.dose-warning { margin-top: 55px; padding: 28px; display: grid; grid-template-columns: 54px 1fr; gap: 20px; border: 1px solid #e4c184; border-radius: 22px; background: #fff8e5; }.warning-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; color: var(--forest-dark); background: var(--yellow); font: 900 26px Nunito; }.dose-warning h2 { margin: 0 0 9px; font-size: 22px; }.dose-warning p { margin: 5px 0; color: #675d49; font-size: 13px; line-height: 1.8; }.dose-warning a { display: inline-block; margin-top: 8px; color: var(--forest); font-size: 12px; font-weight: 900; }
.calculator-faq details { margin-bottom: 10px; border: 1px solid var(--sand); border-radius: 16px; background: var(--paper); }.calculator-faq summary { padding: 17px 20px; cursor: pointer; font-weight: 900; }.calculator-faq details p { margin: 0; padding: 0 20px 18px; color: var(--muted); font-size: 13px; line-height: 1.8; }

@media (max-width: 880px) {
    .community-intro { grid-template-columns: 1fr; }.calculator-hero { grid-template-columns: 1fr; }.calculator-formula { max-width: 430px; }.dose-form { grid-template-columns: 1fr 1fr; }.dose-form > button { grid-column: 1 / -1; }.dose-result { grid-template-columns: 1fr; }.result-primary { grid-row: auto; }.guide-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .site-header nav { gap: 5px; }.nav-pill { padding: 8px 9px; font-size: 11px; }.brand small { display: none; }
    .community-intro { padding: 24px; }.community-intro h2 { font-size: 25px; }.calculator-hero { min-height: auto; padding: 43px 25px; border-radius: 27px; }.calculator-hero h1 { font-size: 39px; }.calculator-formula { padding: 15px; }.calculator-card, .remaining-card { padding: 20px; }.dose-form { grid-template-columns: 1fr; }.dose-form > button { grid-column: auto; }.result-details { grid-template-columns: 1fr; }.calculation-note { align-items: flex-start; flex-direction: column; }.quick-dose-grid { grid-template-columns: repeat(2, 1fr); }.residual-toggle { align-items: flex-start; flex-wrap: wrap; }.residual-toggle small { width: 100%; padding-left: 29px; }.remaining-meter { padding: 18px; }.meter-line { display: grid; gap: 3px; text-align: center; }.custom-dose > div { grid-template-columns: 1fr auto; }.dose-warning { grid-template-columns: 1fr; }.calculator-section, .remaining-section, .dose-guide, .calculator-faq { padding-top: 52px; }
}

/* Final dose-page override: keep the feature flow inside the narrow layout. */
body.calculator-page .calculator-hero {
    width: 100%; max-width: 100%; min-width: 0; min-height: auto;
    padding: 30px 18px 22px; display: flex; flex-direction: column;
    align-items: stretch; gap: 18px; overflow: hidden;
}
body.calculator-page .calculator-hero > * {
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
body.calculator-page .calculator-hero > div:first-child {
    padding: 16px 11px; text-align: center;
}
body.calculator-page .calculator-hero h1 em {
    color: #c94f27; font-weight: 900; text-shadow: 0 2px 0 #fff5d2;
}
body.calculator-page .calculator-hero p { max-width: none; color: #234d3b; }
body.calculator-page .calculator-formula {
    width: 100%; max-width: 100%; min-width: 0; padding: 14px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); overflow: hidden;
}
body.calculator-page .calculator-formula span,
body.calculator-page .calculator-formula strong {
    min-width: 0; overflow-wrap: anywhere;
}

/* 2026 independent identity: neutral health-price information design. */
:root {
    --forest: #176b68;
    --forest-dark: #123f4a;
    --leaf: #278b83;
    --lime: #d7eee8;
    --cream: #f5f3ed;
    --paper: #ffffff;
    --sand: #dcded8;
    --orange: #e36f50;
    --yellow: #efbd62;
    --ink: #16343d;
    --muted: #617078;
    --coral: #e36f50;
    --shadow: 0 14px 40px rgba(20, 63, 72, .09);
}

body {
    background-color: #f5f3ed;
    background-image: linear-gradient(rgba(22, 52, 61, .035) 1px, transparent 1px);
    background-size: 100% 32px;
}

.site-header {
    min-height: 76px;
    margin-top: 10px;
    padding: 10px 13px;
    border: 1px solid #d9dfdc;
    border-radius: 16px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 7px 22px rgba(20, 63, 72, .07);
}
.site-header::after { display: none; }
.brand { gap: 9px; }
.brand-mark {
    width: 38px; height: 38px; flex: 0 0 38px; display: grid;
    place-items: center; border: 0; border-radius: 11px;
    color: white; background: var(--forest-dark);
    box-shadow: none; transform: none; font-size: 17px; font-weight: 900;
}
.brand > span:last-child { min-width: 0; }
.brand small {
    margin-top: 3px; color: #758187; font: 700 7px/1.2 'Noto Sans TC', sans-serif;
    letter-spacing: .06em; text-align: left;
}
.brand-wordmark,
.brand-wordmark--hero {
    display: inline-block; margin: 0; padding: 0; border: 0; outline: 0;
    border-radius: 0; background: none; box-shadow: none; transform: none;
    color: var(--ink); line-height: 1.15; white-space: nowrap;
}
.brand-name { font-weight: 900; letter-spacing: -.035em; }
.brand-wordmark--compact .brand-name { font-size: 18px; }
.brand-wordmark--hero .brand-name { font-size: clamp(34px, 10vw, 47px); }
.nav-pill {
    padding: 8px 10px; border: 1px solid #cfd8d5; border-radius: 10px;
    color: var(--forest-dark); background: white; box-shadow: none;
}
.nav-pill:hover { transform: none; border-color: var(--leaf); }
.nav-pill.active { color: white; border-color: var(--forest); background: var(--forest); box-shadow: none; }

.hero {
    margin-top: 18px; padding: 24px 18px 18px; min-height: auto;
    display: grid; grid-template-columns: 1fr; gap: 20px;
    border: 1px solid #cfded9; outline: 0; border-radius: 24px;
    color: var(--ink); background: linear-gradient(150deg, #edf7f4 0%, #fffaf1 100%);
    box-shadow: var(--shadow);
}
.hero::before, .hero::after { display: none; }
.hero-copy { padding: 8px 4px 0; border-radius: 0; background: none; backdrop-filter: none; text-align: left; }
.hero h1 { letter-spacing: -.045em; }
.hero h1 em {
    display: inline-block; margin-top: 10px; color: var(--forest);
    font-size: clamp(28px, 8vw, 39px); line-height: 1.25; text-shadow: none;
}
.hero-copy > p { margin: 17px 0; color: #50636a; font-size: 14px; line-height: 1.85; }
.hero-chips { justify-content: flex-start; gap: 7px; }
.hero-chips span {
    padding: 7px 10px; border: 1px solid #cbded8; border-radius: 8px;
    color: #31575b; background: rgba(255,255,255,.8); font-size: 11px;
}
.eyebrow {
    margin-bottom: 14px; padding: 6px 10px; border: 0; border-radius: 7px;
    color: var(--forest); background: #dcefeb; box-shadow: none;
    letter-spacing: .1em; font-size: 10px;
}
.info-visual {
    overflow: hidden; border: 1px solid #d7dfdc; border-radius: 18px;
    background: #faf6ec; aspect-ratio: 3 / 2;
}
.info-visual img { width: 100%; height: 100%; display: block; object-fit: cover; }

.promo-banner {
    border: 1px solid #edc5b7; border-radius: 17px; background: #fff4ef;
    box-shadow: none;
}
.promo-icon { border: 0; border-radius: 13px; background: #f3d8cd; box-shadow: none; }
.promo-banner > a { border: 0; border-radius: 10px; background: var(--orange); box-shadow: none; }
.ad-label, .sponsor-tag { color: #ad4f39; }

.community-intro,
.search-panel,
.calculator-card,
.remaining-card,
.legal-section,
.guide-grid article,
.calculator-faq details {
    border: 1px solid #d9dfdc; border-radius: 18px;
    background: var(--paper); box-shadow: 0 8px 28px rgba(20, 63, 72, .06);
}
.community-links a,
.community-links a:nth-child(2),
.community-links a:nth-child(3) {
    border: 1px solid #d7dfdc; border-radius: 12px; background: #f8faf9;
}
.community-links span { border-radius: 9px; background: var(--forest); }
.step-number {
    border: 0; outline: 0; border-radius: 13px; background: var(--forest-dark); box-shadow: none;
}
.search-panel select,
.dose-form select,
.dose-form input,
.tracker-field select {
    border-color: #cbd7d3; border-radius: 11px; background: white;
}
.search-panel button,
.dose-form > button {
    border: 0; border-radius: 11px; background: var(--forest); box-shadow: none;
}
.price-card,
.price-card:nth-child(3n+2),
.price-card:nth-child(3n) {
    border: 1px solid #d8dfdc; border-radius: 15px; box-shadow: 0 6px 18px rgba(20,63,72,.05);
}
.price-card::before { width: 4px; background: var(--leaf); }
.price strong, .price-value { color: var(--forest); }
.sponsored { border-color: #e6c6b8; background: #fff8f4; }
.bottom-ad {
    border: 1px solid rgba(255,255,255,.18); border-radius: 15px;
    background: rgba(18, 63, 74, .97); box-shadow: 0 15px 38px rgba(8,36,42,.28);
}
.bottom-ad a { border: 0; color: #24393d; background: #f0bd62; box-shadow: none; }

.calculator-hero,
.legal-hero {
    margin-top: 18px; border: 1px solid #cbded8; outline: 0;
    border-radius: 22px; color: var(--ink);
    background: linear-gradient(145deg, #eaf5f2, #fffaf2);
    background-image: none; box-shadow: var(--shadow);
}
body.calculator-page .calculator-hero { padding: 25px 17px 18px; gap: 15px; }
body.calculator-page .calculator-hero > div:first-child {
    padding: 4px; border-radius: 0; background: none; text-align: left;
}
body.calculator-page .calculator-hero h1 em {
    color: #bd5037; text-shadow: none; font-size: clamp(31px, 9vw, 42px);
}
body.calculator-page .calculator-hero p { color: #50636a; }
body.calculator-page .calculator-formula {
    padding: 12px; border: 0; border-radius: 13px; background: var(--forest-dark);
}
body.calculator-page .calculator-formula span { color: white; background: rgba(255,255,255,.10); }
body.calculator-page .calculator-formula b { color: #f0bd62; }
body.calculator-page .calculator-formula strong { color: #183d45; background: #d4ebe5; }
.legal-hero { padding: 34px 20px; }
.legal-hero p { color: #50636a; }
.legal-updated { color: #754735; background: #f5e5cc; }
.legal-index { border: 1px solid #d7dfdc; box-shadow: none; }
.warning-section, .dose-warning { border: 1px solid #e9cda3; background: #fff9ec; }
footer { border-top: 1px solid #ccd6d2; }

@media (max-width: 390px) {
    .brand-wordmark--compact .brand-name { font-size: 16px; }
    .brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
    .nav-pill { padding-inline: 7px; }
}