:root {
    --ink:#17231c;
    --muted:#657269;
    --green:#245d3b;
    --lime:#e7f0d8;
    --cream:#f6f3ea;
    --line:#dfe4dc;
    --white:#fff;
    --gold:#f2b84b
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:#fbfcf8;
    color:var(--ink);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif
}
header {
    height:74px;
    background:#fff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 max(24px,calc((100% - 1120px)/2))
}
.brand {
    display:flex;
    gap:12px;
    align-items:center
}
.brand div {
    display:flex;
    flex-direction:column
}
.brand small {
    color:var(--muted);
    margin-top:2px
}
.mark {
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:10px;
    background:var(--green);
    color:#fff;
    font-weight:900
}
.pill,.eyebrow,.tag {
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em
}
.pill {
    background:var(--lime);
    padding:7px 11px;
    border-radius:99px;
    color:var(--green)
}
main {
    max-width:1120px;
    margin:auto;
    padding:42px 24px 70px
}
.hero {
    display:grid;
    grid-template-columns:1.6fr .7fr;
    gap:50px;
    align-items:center;
    margin:18px 0 42px
}
.eyebrow {
    color:var(--green)
}
h1 {
    font-family:Georgia,serif;
    font-size:50px;
    line-height:1.04;
    margin:10px 0 18px;
    letter-spacing:-.02em
}
h2 {
    font-size:22px;
    margin:0 0 5px
}
h3 {
    margin:0;
    font-size:21px
}
p {
    line-height:1.55
}
.hero p,.sub {
    color:var(--muted)
}
.hero-card {
    background:var(--green);
    color:#fff;
    border-radius:18px;
    padding:25px 28px;
    box-shadow:0 12px 30px #193b2520
}
.hero-card ul {
    padding-left:19px;
    line-height:2
}
.card {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px;
    margin:18px 0;
    box-shadow:0 3px 14px #1b2d2110
}
.grid2 {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px
}
label {
    font-weight:700;
    font-size:14px
}
label span {
    font-weight:500;
    color:#8a948d
}
select,input,textarea {
    width:100%;
    margin-top:8px;
    border:1px solid #cfd6ce;
    border-radius:9px;
    padding:12px 13px;
    font:inherit;
    background:#fff;
    color:var(--ink)
}
textarea {
    min-height:86px;
    resize:vertical
}
.choices {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px
}
.choices label input {
    display:none
}
.choices label span {
    display:block;
    border:1px solid var(--line);
    border-radius:99px;
    padding:9px 13px;
    color:var(--ink);
    cursor:pointer
}
.choices label:has(input:checked) span {
    background:var(--lime);
    border-color:#9fbc8b;
    color:var(--green)
}
.row {
    display:flex;
    justify-content:space-between;
    gap:20px;
    align-items:start
}
.item {
    display:grid;
    grid-template-columns:1fr 2fr .65fr 35px;
    gap:12px;
    padding:16px 0;
    border-bottom:1px solid #edf0eb
}
.item:first-of-type {
    margin-top:12px
}
.remove {
    border:0;
    background:none;
    font-size:20px;
    color:#8a948d;
    cursor:pointer;
    margin-top:26px
}
button,.back {
    font:inherit
}
.secondary,.add {
    border:1px solid #b9c4b9;
    background:#fff;
    color:var(--green);
    border-radius:9px;
    padding:9px 12px;
    font-weight:750;
    cursor:pointer
}
.add {
    margin-top:16px
}
.primary {
    width:100%;
    border:0;
    background:var(--green);
    color:#fff;
    border-radius:11px;
    padding:16px;
    font-size:17px;
    font-weight:800;
    cursor:pointer
}
.privacy {
    text-align:center;
    color:#89928c;
    font-size:12px
}
.back {
    color:var(--green);
    text-decoration:none;
    font-weight:750
}
.result-hero {
    background:var(--green);
    color:#fff;
    border-radius:18px;
    padding:32px;
    margin-bottom:22px
}
.result-hero h1 {
    font-size:40px;
    margin:6px 0
}
.result-hero p {
    color:#dce8df;
    max-width:760px
}
.stats {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-top:22px
}
.stat {
    background:#ffffff13;
    border:1px solid #ffffff24;
    border-radius:12px;
    padding:15px
}
.stat strong {
    font-size:24px;
    display:block
}
.stat span {
    font-size:12px;
    color:#dce8df
}
.opportunity {
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:25px;
    margin:16px 0
}
.opp-head {
    display:flex;
    justify-content:space-between;
    gap:15px
}
.score {
    background:var(--lime);
    color:var(--green);
    border-radius:99px;
    padding:7px 11px;
    height:max-content;
    font-weight:800;
    font-size:13px
}
.tags {
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:12px 0
}
.tag {
    background:#f1f4ef;
    border-radius:99px;
    padding:6px 9px;
    color:#536159
}
.metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:18px 0
}
.metric {
    background:var(--cream);
    padding:13px;
    border-radius:10px
}
.metric b {
    display:block;
    font-size:19px
}
.metric small {
    color:var(--muted)
}
.recipe {
    border-top:1px solid var(--line);
    padding-top:16px
}
.recipe summary {
    cursor:pointer;
    font-weight:800;
    color:var(--green)
}
.recipe-grid {
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:25px;
    margin-top:15px
}
.ing-row {
    display:grid;
    grid-template-columns:1fr 80px 90px;
    gap:8px;
    align-items:center;
    margin:7px 0
}
.ing-row input {
    margin:0;
    padding:8px
}
.costbox {
    background:#f7f8f4;
    border-radius:12px;
    padding:16px
}
.costline {
    display:flex;
    justify-content:space-between;
    margin:8px 0
}
.costline.total {
    border-top:1px solid var(--line);
    padding-top:10px;
    font-weight:850
}
.note {
    font-size:12px;
    color:var(--muted)
}
@media(max-width:760px) {
    .hero,.grid2,.recipe-grid {
        grid-template-columns:1fr
    }
    .hero {
        gap:15px
    }
    h1 {
        font-size:38px
    }
    .item {
        grid-template-columns:1fr
    }
    .remove {
        margin:0
    }
    .stats,.metrics {
        grid-template-columns:1fr 1fr
    }
    .row {
        flex-direction:column
    }
}
.alert,.emailnotice {
    padding:13px 16px;
    border-radius:10px;
    margin:12px 0
}
.alert {
    background:#fff0ed
}
.emailnotice {
    background:var(--lime);
    color:var(--green)
}
.consent {
    display:flex;
    gap:8px
}
.consent input {
    width:auto
}
.inputsummary,.sellergrid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px
}
.seller {
    background:var(--cream);
    padding:13px;
    border-radius:10px
}
.ing-head,.ing-row {
    display:grid;
    grid-template-columns:1.5fr .55fr .55fr .65fr;
    gap:8px;
    align-items:center
}