/* The same four planning levels connect the front page to practical help. */
.planning-overview { background:#f3f5ed; }
.planning-levels { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:32px 0; }
.planning-level { display:block; padding:26px; background:#fff; border:1px solid #dce2d5; border-radius:14px; color:var(--ink); text-decoration:none; transition:transform .2s,border-color .2s,box-shadow .2s; }
.planning-index { display:flex; justify-content:space-between; font-size:13px; font-weight:700; color:#8b4829; margin-bottom:24px; }
.planning-level small { color:#627064; font-size:12px; }
.planning-level h3 { font-size:21px; line-height:1.3; margin:8px 0 12px; }
.planning-level p { font-size:14px; line-height:1.65; margin:0; }
.support-hero { padding:88px 0 76px; background:radial-gradient(ellipse at 85% 10%,#354b3d,#1e322a 70%); color:#fff; }
.support-hero .eyebrow { color:#ffa571; }
.support-hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:80px; align-items:center; }
.support-hero h1 { font-size:clamp(40px,4.4vw,66px); line-height:1.06; letter-spacing:-.045em; margin:18px 0 26px; max-width:700px; }
.support-hero .intro { color:#d5ded6; max-width:600px; font-size:19px; }
.support-hero .button-row { margin-top:30px; gap:26px; }
.support-play { display:flex; gap:12px; align-items:center; color:#fff; text-decoration:none; min-height:48px; }
.support-play svg,.support-chapter svg { width:21px; height:21px; fill:currentColor; flex-shrink:0; }
.support-play small,.support-chapter small { display:block; font-size:12px; opacity:.75; }
.support-map { background:#ffffff05; border:1px solid #ffffff20; border-radius:20px; padding:16px 28px 20px; box-shadow:0 20px 60px #0a201f30; }
.support-map a { display:flex; align-items:center; gap:20px; color:#fff; text-decoration:none; padding:20px 0; border-bottom:1px solid #ffffff1c; }
.support-map a>span:first-child { font-size:12px; color:#edb388; border:1px solid #e4cbb040; display:grid; place-items:center; border-radius:50%; width:38px; height:38px; flex-shrink:0; }
.support-map a>span:last-child { margin-left:auto; }
.support-map strong { display:block; font-size:20px; font-weight:550; }
.support-map small { color:#c4cfc3; font-size:12px; }
.support-map p { font-size:13px; color:#c6d2c9; margin:20px 0 0; }
.support-overview { padding-bottom:56px; }
.support-context { max-width:900px; color:var(--muted); font-size:14px; }
.support-library { background:#f5f5f0; }
.support-library-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:28px; }
.support-library-heading h2 { margin-bottom:0; }
.support-tools { margin-bottom:24px; }
.support-tools[hidden],.support-guide[hidden],.support-empty[hidden] { display:none; }
.support-search { display:block; max-width:740px; }
.support-search>span { display:block; font-size:13px; font-weight:650; margin-bottom:8px; }
.support-search input { width:100%; min-height:56px; font:inherit; padding:12px 18px; border:1px solid #adb9aa; border-radius:10px; background:white; color:var(--ink); }
.support-filters { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.support-filters button { min-height:44px; border:1px solid #ccd4c5; border-radius:8px; padding:8px 17px; color:#344537; background:#fff; }
.support-filters button[aria-pressed="true"] { background:#244333; border-color:#244333; color:white; box-shadow:inset 0 -3px #d8aa76; font-weight:650; }
.support-results { font-size:13px; color:#59635a; margin:12px 0 0; }
.support-guide { scroll-margin-top:110px; margin-bottom:12px; border:1px solid #d7ddd0; border-radius:12px; background:#fff; overflow:hidden; }
.support-guide>summary { display:flex; gap:22px; align-items:center; padding:24px 28px; cursor:pointer; list-style:none; }
.support-guide>summary::-webkit-details-marker,.support-faq summary::-webkit-details-marker { display:none; }
.support-guide-number { align-self:flex-start; color:#a0522f; font-size:13px; padding-top:4px; }
.support-guide summary strong { display:block; font-size:21px; font-weight:600; line-height:1.4; }
.support-guide summary small { display:block; color:#687066; font-size:14px; margin-top:6px; }
.support-plus { margin-left:auto; font-size:24px; width:40px; height:40px; display:grid; place-items:center; border:1px solid #d5ddce; border-radius:50%; flex-shrink:0; }
.support-guide[open]>summary { background:#f0f4e9; border-bottom:1px solid #d7dfcf; }
.support-guide[open] .support-plus { transform:rotate(45deg); color:#8d3c1f; }
.support-guide-body { padding:30px; }
.support-instructions { display:grid; grid-template-columns:1.7fr 1fr; gap:24px 40px; align-items:start; }
.support-instructions ol { margin:0; padding-left:23px; }
.support-instructions li { padding:0 0 18px 10px; }
.support-instructions li::marker { color:#a24c27; font-weight:650; }
.support-instructions aside { padding:20px 24px; background:#f5f4ec; border-left:3px solid #c7b38a; border-radius:0 8px 8px 0; font-size:14px; line-height:1.75; }
.support-chapter { grid-column:2; display:flex; align-items:center; gap:14px; text-decoration:none; color:#224530; background:#eef3e7; border:1px solid #cfddc7; border-radius:10px; padding:16px; min-height:64px; }
.support-chapter time { margin-left:auto; font-size:12px; }
.support-related { display:flex; flex-wrap:wrap; gap:20px; }
.support-related a { color:#80411f; text-underline-offset:5px; }
.support-figure { margin:28px 0 0; }
.support-image { display:block; overflow:hidden; border:1px solid #cbd5c8; border-radius:10px; background:#eef2e9; color:#3c4d3c; text-decoration:none; }
.support-image img { display:block; width:100%; height:auto; }
.support-image>span { display:block; font-size:13px; text-align:right; border-top:1px solid #d7dfd3; padding:9px 16px; }
.support-figure figcaption { color:#697368; font-size:12px; margin-top:10px; }
.support-mobile-figure { width:min(100%,350px); margin-inline:auto; }
.support-mobile-figure .support-image { max-height:600px; overflow:auto; border:9px solid #24392e; border-radius:32px; scrollbar-width:thin; }
.support-mobile-figure .support-image>span { background:#edf1e8; position:sticky; bottom:0; }
.support-empty { padding:36px; text-align:center; background:#fff; border:1px dashed #afbeaa; border-radius:12px; }
.support-video { background:#ecf0e5; }
.support-video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.support-video-card { display:block; background:#fff; border:1px solid #d8dfd1; border-radius:14px; overflow:hidden; text-decoration:none; color:var(--ink); }
.support-video-thumb { display:block; position:relative; height:190px; overflow:hidden; background:#213c30; }
.support-video-thumb img { width:100%; height:100%; object-fit:cover; object-position:top; opacity:.85; }
.support-video-card:last-child .support-video-thumb img { width:145px; height:auto; margin-inline:auto; display:block; }
.support-video-thumb .film-play { position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%; background:#f9f8ed; color:#233b2e; display:grid; place-items:center; box-shadow:0 4px 24px #18342b44; }
.support-video-thumb .film-play svg { width:20px; }
.support-video-thumb time { position:absolute; right:12px; bottom:12px; background:#1e352bea; color:white; padding:3px 9px; font-size:12px; border-radius:5px; }
.support-video-card h3 { font-size:20px; line-height:1.3; margin:20px 22px 12px; }
.support-video-card p { margin:0 22px 24px; color:#677063; font-size:14px; }
.support-faq .shell { max-width:960px; }
.support-faq details { border-bottom:1px solid #dae0d4; }
.support-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:24px 0; font-size:19px; font-weight:550; }
.support-faq p { margin:0 0 24px; color:#586256; }
.support-contact { padding:64px 0; background:#243c30; color:white; }
.support-contact>.shell { display:flex; justify-content:space-between; gap:48px; align-items:center; }
.support-contact .eyebrow { color:#e5b58b; }
.support-contact h2 { font-size:36px; margin:12px 0; }
.support-contact p { max-width:690px; color:#d4dfd3; }
.support-phone { display:block; color:white; margin-top:16px; text-align:center; text-underline-offset:5px; }
#support-image-dialog { width:min(96vw,1600px); max-height:94dvh; padding:0; border:1px solid #d3dacc; border-radius:14px; overflow:auto; }
#support-image-dialog::backdrop { background:#10221cdb; }
#support-image-dialog>div { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:14px 20px; position:sticky; top:0; background:#fffefa; border-bottom:1px solid #d6dfd0; z-index:1; }
#support-image-dialog h2 { font-size:18px; margin:0; }
#support-image-dialog button { min-height:44px; border:1px solid #c6d0bf; border-radius:8px; background:#eff3e9; padding:8px 14px; }
#support-image-dialog>img { display:block; max-width:100%; height:auto; margin:auto; }
@media(hover:hover) { .planning-level:hover { transform:translateY(-4px); border-color:#adba9f; box-shadow:0 12px 30px #29423212; } .support-map a:hover { color:#ffc294; } .support-guide>summary:hover,.support-faq summary:hover { background:#f4f6ef; } .support-filters button:hover { border-color:#708869; } .support-play:hover,.support-chapter:hover { text-decoration:underline; text-underline-offset:4px; } .support-video-card:hover { border-color:#78966b; box-shadow:0 8px 24px #254a2912; } }
@media(max-width:1050px) { .planning-levels { grid-template-columns:repeat(2,minmax(0,1fr)); } .support-hero-grid { gap:36px; } .support-video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .support-hero { padding:48px 0; } .support-hero-grid { grid-template-columns:1fr; } .support-hero h1 { font-size:42px; } .support-map { padding:8px 22px 18px; } .support-map a { padding:15px 0; } .support-overview { padding-block:48px; } .planning-level { padding:20px; } .planning-level h3 { font-size:19px; } .planning-index { margin-bottom:16px; } .support-library-heading { align-items:start; flex-direction:column; } .support-guide>summary { padding:20px 16px; gap:12px; } .support-guide summary strong { font-size:19px; } .support-guide-number { display:none; } .support-plus { width:32px; height:32px; } .support-guide-body { padding:22px 16px; } .support-instructions { display:flex; flex-direction:column; gap:12px; } .support-chapter { width:100%; } .support-contact>.shell { flex-direction:column; align-items:start; gap:24px; } .support-contact h2 { font-size:30px; } }
@media(max-width:480px) { .planning-levels { grid-template-columns:1fr; gap:10px; } .planning-level { display:grid; grid-template-columns:28px 1fr; gap:0 14px; } .planning-index { grid-row:1/4; display:block; margin:0; padding-top:2px; } .planning-index span { display:block; margin-top:14px; } .planning-level h3 { margin-block:4px 8px; } .support-video-grid { grid-template-columns:1fr; } .support-hero .button-row { flex-wrap:wrap; } }
@media(prefers-reduced-motion:reduce) { .planning-level { transition:none; } .planning-level:hover { transform:none; } }