/* Help landing page. Shared navigation, footer and wizard styles remain unchanged. */
.help-landing { --container: var(--site-container-width); padding-bottom: 1.75rem; }
.help-landing h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin-bottom: .5rem; }
.help-landing p { color: var(--muted); }
.help-landing .button { min-height: 3rem; font-size: .9375rem; }
.help-hero { background: #edf7fc; }
.help-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem); align-items: center; gap: 2rem; padding-block: 2.6rem 2.25rem; }
.help-hero-copy { min-width: 0; }
.help-hero h1 { margin: .5rem 0 .8rem; font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.08; }
.help-hero-copy > p { max-width: 36rem; color: var(--ink); font-size: 1.0625rem; line-height: 1.5; }
.help-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.help-benefits { display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; padding: 0; margin: 1.5rem 0 0; list-style: none; color: var(--muted); font-size: .8125rem; }
.help-benefits li { display: flex; align-items: center; gap: .55rem; }
.help-benefits .icon { width: 1.6rem; height: 1.6rem; padding: .35rem; border-radius: 50%; color: var(--teal-dark); background: #d7f0eb; }
.help-hero-visual { margin: 0; align-self: center; }
.help-hero-visual img { display: block; width: 100%; height: auto; }
.help-section { padding-block: 2rem; }
.help-section-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.help-section-heading h2, .help-section-heading p { margin-bottom: 0; }
.help-section-heading p { margin-top: .4rem; font-size: .9375rem; }
.help-section-heading > .text-link { flex: 0 0 auto; font-size: .875rem; }
.help-theme-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.help-landing form { margin: 0; min-width: 0; }
.help-round-icon { display: grid; width: 3.1rem; height: 3.1rem; place-items: center; border-radius: 1rem; color: var(--help-color, var(--teal-dark)); background: var(--help-icon-bg, #ddf1f7); }
.help-round-icon .icon { width: 1.8rem; height: 1.8rem; }
.help-theme { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .85rem .4rem; align-content: start; width: 100%; height: 100%; min-height: 9.7rem; padding: 1.1rem 1.2rem; border: 1px solid transparent; border-radius: .9rem; color: var(--navy); background: var(--help-bg); font-size: .9375rem; line-height: 1.35; font-weight: 700; text-align: left; cursor: pointer; }
.help-theme > .help-round-icon { grid-column: 1 / -1; }
.help-theme > .icon { width: 1rem; align-self: end; color: var(--teal-dark); }
.help-theme:hover { border-color: var(--teal); }
.help-tone-amber { --help-bg: #fff7ea; --help-icon-bg: #ffedcb; --help-color: #a65b00; }
.help-tone-blue { --help-bg: #eef8ff; --help-icon-bg: #dcedff; --help-color: #056abd; }
.help-tone-purple { --help-bg: #f5f2fd; --help-icon-bg: #eae2ff; --help-color: #6844c5; }
.help-tone-pink { --help-bg: #fff2f6; --help-icon-bg: #ffe3ee; --help-color: #bd2465; }
.help-tone-mint { --help-bg: #ecf8f4; --help-icon-bg: #d4f0e7; --help-color: #007c62; }
.help-how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.85fr); align-items: start; gap: 2rem; padding: 2rem; border-radius: 1rem; background: #edf8fa; }
.help-how > div > p { max-width: 27rem; margin: 0; font-size: .9375rem; }
.help-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.3rem; padding: 0; margin: 0; list-style: none; }
.help-steps li { position: relative; text-align: center; }
.help-steps li:not(:last-child)::after { content: '→'; position: absolute; top: 1.8rem; right: -1.1rem; color: var(--navy); }
.help-step-visual { position: relative; display: grid; place-items: center; width: 5.3rem; height: 5.3rem; margin: 0 auto 1rem; border-radius: 50%; background: white; color: var(--teal-dark); }
.help-step-visual > .icon { width: 2.2rem; height: 2.2rem; }
.help-step-number { position: absolute; left: -.35rem; top: 0; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: white; background: var(--teal); font-size: .875rem; }
.help-steps h3 { font-size: .9375rem; letter-spacing: -.015em; line-height: 1.2; margin: 0 0 .45rem; }
.help-steps p { margin: 0; font-size: .8125rem; line-height: 1.45; }
.help-start { position: relative; display: flex; align-items: center; justify-content: space-between; isolation: isolate; overflow: hidden; gap: 2rem; min-height: 17rem; margin-top: 1rem; padding: 2rem; border-radius: 1rem; background: #fff5e4; }
.help-start-photo { position: absolute; z-index: -2; inset: 0 0 0 auto; width: 53%; height: 100%; object-fit: cover; object-position: center 6%; }
/* The photo starts at 47%; keep its edge fully covered before fading out gently. */
.help-start::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(90deg, #fff5e4 0%, #fff5e4 48%, #fff5e4fa 51%, #fff5e4de 56%, #fff5e4a3 61%, #fff5e44d 67%, #fff5e400 75%); }
.help-start-copy { width: 42%; }
.help-start h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.help-start-copy p { color: var(--ink); max-width: 24rem; }
.help-start-copy .button { min-width: 15rem; }
.help-start .help-start-note { align-self: end; display: grid; gap: .5rem; width: 13rem; margin: 0; padding: 1.2rem; border-radius: 1rem; background: white; color: var(--ink); font-size: .875rem; line-height: 1.45; }
.help-start-note > .icon { color: var(--teal); width: 1.6rem; height: 1.6rem; }
.help-situation-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.help-situation { display: grid; grid-template-columns: 5.1rem minmax(0, 1fr); grid-template-rows: 1fr auto; gap: .6rem .85rem; width: 100%; height: 100%; min-height: 9rem; padding: .85rem; border: 1px solid var(--line); border-radius: .8rem; background: white; color: var(--navy); text-align: left; cursor: pointer; }
.help-situation:hover { border-color: var(--teal); background: #f8fcfe; }
.help-situation-photo { grid-row: 1 / -1; width: 100%; height: 100%; min-height: 7rem; border-radius: .7rem; object-fit: cover; }
.help-crop-conversation { object-position: 38% center; }
.help-crop-neighbor { object-position: 47% 30%; }
.help-crop-family { object-position: 76% center; }
.help-situation-label { align-self: start; font-size: .9375rem; font-weight: 600; line-height: 1.45; }
.help-situation-link { display: flex; align-items: center; gap: .25rem; color: #0066b2; font-size: .75rem; line-height: 1.35; }
.help-situation-link > .icon { width: .9rem; height: .9rem; }
.help-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; padding-block: .5rem 2rem; }
.help-faq > div > p { margin: 0; font-size: .9375rem; }
.help-faq-list { display: grid; gap: .65rem; }
.help-faq details { border: 1px solid var(--line); border-radius: .7rem; background: white; }
.help-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3rem; padding: .85rem 1.2rem; color: var(--navy); font-size: .9375rem; font-weight: 600; cursor: pointer; list-style: none; }
.help-faq summary::-webkit-details-marker { display: none; }
.help-faq summary > .icon { color: var(--teal-dark); width: 1rem; height: 1rem; }
.help-faq details[open] summary > .icon { transform: rotate(45deg); }
.help-faq details p { margin: 0; padding: 0 1.2rem 1rem; font-size: .9375rem; }
.help-faq details > a { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; margin: 0 1.2rem 1rem; font-size: .9375rem; }
.help-closing { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: 2.25rem clamp(1.5rem, 5vw, 5rem); border-radius: 1rem; color: white; background: #006b81; }
.help-closing h2 { color: white; font-size: 1.65rem; }
.help-closing p { max-width: 42rem; margin: 0; color: white; font-size: .9375rem; }
.help-closing .button { flex: 0 0 auto; }
@media (max-width: 72rem) {
    .help-hero-grid { gap: 1.5rem; }
    .help-theme { padding: 1rem; }
    .help-how { grid-template-columns: 1fr; gap: 1.5rem; }
    .help-how > div > p { max-width: none; }
    .help-situation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 56rem) {
    .help-hero-grid { grid-template-columns: 1fr; }
    .help-hero-visual { display: block; width: min(100%, 21rem); margin: 0 auto; }
    .help-hero h1 { font-size: 3rem; }
    .help-theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .help-start-copy { width: 60%; }
    .help-start .help-start-note { display: none; }
    .help-start::before { background: linear-gradient(90deg, #fff5e4 0%, #fff5e4 60%, #fff5e4f2 65%, #fff5e4a6 78%, #fff5e440 89%, #fff5e400 100%); }
    .help-faq { grid-template-columns: 1fr; gap: 1rem; }
    .help-closing { align-items: start; flex-direction: column; gap: 1rem; }
}
@media (max-width: 36rem) {
    .help-section { padding-block: 1.5rem; }
    .help-hero-grid { padding-block: 1rem 1.75rem; }
    .help-hero h1 { font-size: 2.6rem; }
    .help-actions { flex-direction: column; align-items: stretch; }
    .help-benefits { gap: .65rem; flex-direction: column; }
    .help-section-heading { flex-direction: column; align-items: start; gap: .35rem; }
    .help-theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .help-theme { padding: .9rem; min-height: 9rem; }
    .help-how, .help-start { padding: 1.3rem; }
    .help-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 1rem; }
    .help-steps li::after { display: none; }
    .help-start-copy { width: 100%; }
    .help-start-photo, .help-start::before { display: none; }
    .help-situation-grid { grid-template-columns: 1fr; }
    .help-faq { padding-bottom: 1.5rem; }
    .help-closing { padding: 1.5rem; }
}
html[data-text-size="200"] .help-hero-grid,
html[data-text-size="200"] .help-how,
html[data-text-size="200"] .help-faq { grid-template-columns: minmax(0, 1fr); }
html[data-text-size="200"] .help-hero-visual { display: none; }
html[data-text-size="200"] :is(.help-theme-grid, .help-situation-grid, .help-steps) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
html[data-text-size="200"] .help-section-heading,
html[data-text-size="200"] .help-closing { flex-direction: column; align-items: start; }
html[data-text-size="200"] .help-section-heading > .text-link { flex-shrink: 1; }
html[data-text-size="200"] .help-start-copy { width: 100%; }
html[data-text-size="200"] :is(.help-start-photo, .help-start::before, .help-start .help-start-note, .help-steps li::after) { display: none; }
html[data-text-size="200"] .help-landing .button { min-width: 0; max-width: 100%; }
html.display-contrast .help-start-photo, html.display-contrast .help-start::before { display: none; }
@media (forced-colors: active) {
    .help-theme, .help-step-number, .help-benefits .icon { border: 1px solid ButtonText; }
    .help-start-photo, .help-start::before { display: none; }
}
