.page-main { max-width: 1040px; margin: auto; padding: 70px 28px 100px; }
.page-hero { text-align: center; max-width: 720px; margin: 0 auto 55px; }
.page-hero h1 { font-size: 46px; line-height: 1.35; margin: 10px 0 20px; letter-spacing: -.04em; }
.page-hero p { color: #68766f; line-height: 1.9; }
.page-actions { display: flex; justify-content: center; gap: 12px; margin-top: 24px; }
.page-actions a, .print-list { border: 0; padding: 12px 18px; border-radius: 12px; background: var(--green); color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; }
.page-actions .ghost { background: #fff; color: var(--green); border: 1px solid #b8cabf; }
.list-progress { background: #fff; border-radius: 20px; padding: 22px 26px; box-shadow: var(--shadow); margin-bottom: 22px; display: flex; align-items: center; gap: 20px; }
.list-progress strong { font: 700 36px "DM Sans"; color: var(--green); }
.list-progress div { flex: 1; }
.list-progress p { margin: 0 0 7px; color: #66736c; font-size: 13px; }
.list-progress-bar { height: 9px; border-radius: 9px; background: #e2e8e3; overflow: hidden; }
.list-progress-bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: .25s; }
.list-section { background: #fff; border-radius: 22px; padding: 28px; margin: 15px 0; box-shadow: 0 10px 35px rgba(39,64,52,.06); }
.list-section h2 { margin: 0 0 5px; font-size: 21px; }
.list-section > p { margin: 0 0 18px; color: #7b857f; font-size: 13px; }
.base-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.base-list label { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.needed-qty { margin-left: auto; color: var(--green); background: #edf6f0; border-radius: 99px; padding: 4px 8px; font-size: 11px; font-style: normal; font-weight: 700; text-decoration: none!important; white-space: nowrap; }
.print-meta { display: none; }
.base-list label:has(input:checked) { background: #edf6f0; border-color: #8bb39f; text-decoration: line-through; color: #708077; }
.base-list input { width: 18px; height: 18px; accent-color: var(--green); }
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.guide-card { background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 10px 35px rgba(39,64,52,.06); }
.guide-icon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: #e8f2ec; font-size: 25px; }
.guide-card h2 { font-size: 20px; margin: 18px 0 8px; }
.guide-card p { color: #66736c; line-height: 1.8; font-size: 14px; }
.guide-card dl { margin: 18px 0 0; border-top: 1px solid var(--line); padding-top: 15px; }
.guide-card dt { font-weight: 700; font-size: 13px; color: var(--green); }
.guide-card dd { margin: 4px 0 13px; color: #68746e; font-size: 13px; line-height: 1.7; }
.guide-note { margin-top: 28px; padding: 24px; background: #fff4e9; border-radius: 18px; color: #625c55; line-height: 1.8; font-size: 13px; }
.guide-cta { margin-top: 28px; padding: 24px 26px; border-radius: 20px; background: #e8f2ec; border: 1px solid #bad0c2; display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 18px; }
.guide-cta > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: var(--green); color: #fff; font: 700 25px "DM Sans"; }
.guide-cta small { display: block; color: var(--orange); font-weight: 700; margin-bottom: 4px; }
.guide-cta strong { display: block; }
.guide-cta p { color: #66736c; font-size: 12px; margin: 4px 0 0; }
.guide-cta a { background: var(--green); color: #fff; padding: 13px 18px; border-radius: 12px; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .page-main { padding: 45px 16px 70px; } .page-hero h1 { font-size: 34px; } .page-actions { flex-wrap: wrap; } .base-list, .guide-grid { grid-template-columns: 1fr; } .list-section, .guide-card { padding: 22px 18px; } .needed-qty { white-space: normal; text-align: right; } .guide-cta { grid-template-columns: 44px 1fr; padding: 20px 18px; } .guide-cta a { grid-column: 1 / -1; text-align: center; } }
@media print { @page { size: A4; margin: 12mm; } .site-header, footer, .page-actions, .journey, .family-summary { display: none!important; } .page-main { padding: 0; } body { background: #fff; } .page-hero { margin: 0 0 10mm; } .page-hero h1 { font-size: 25px; margin: 0; } .page-hero .eyebrow, .page-hero p { display: none; } .print-meta { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #9eaaa3; margin-bottom: 6mm; } .print-meta div { padding: 3mm; border-right: 1px solid #c8ceca; } .print-meta div:last-child { border: 0; } .print-meta small { display: block; color: #68746e; } .print-meta strong { font-size: 13px; } .list-progress { box-shadow: none; border: 1px solid #bfc8c2; padding: 4mm; margin-bottom: 4mm; } .list-section { box-shadow: none; border: 1px solid #cdd3cf; break-inside: avoid; padding: 4mm; margin: 3mm 0; } .list-section h2 { font-size: 16px; } .list-section>p { display: none; } .base-list { gap: 2mm; } .base-list label { padding: 2.5mm; font-size: 11px; } .needed-qty { font-size: 9px; padding: 1mm 2mm; } .guide-note { display: none; } }