/* The checker reuses the site's typography and light/dark colour tokens. */
[hidden] { display: none !important; }
.checker-hero { background: var(--deep); color: var(--cream); padding: calc(var(--header-h) + 30px) 0 92px; position: relative; overflow: clip; }
.checker-hero::after { content: ''; position: absolute; width: 430px; height: 430px; border: 1px solid rgba(199, 219, 168, .16); box-shadow: 0 0 0 45px rgba(199, 219, 168, .035), 0 0 0 90px rgba(199, 219, 168, .025); border-radius: 50%; right: -100px; top: calc(var(--header-h) + 110px); pointer-events: none; }
.checker-hero-inner { position: relative; z-index: 1; }
.checker-breadcrumb { display: flex; gap: 12px; font-size: .78rem; color: var(--moss); margin-bottom: 48px; flex-wrap: wrap; }
.checker-breadcrumb a { text-underline-offset: 3px; }
.checker-hero h1 { font: 500 clamp(2.7rem, 6.3vw, 5rem)/1.06 var(--font-display); letter-spacing: -.04em; max-width: 780px; margin: 16px 0 22px; }
.checker-hero h1 em { color: var(--moss); font-weight: 400; }
.checker-lede { max-width: 650px; color: #d5dfd3; font-size: clamp(1rem, 2vw, 1.2rem); }
.checker-facts { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 28px; font-size: .82rem; color: var(--moss); }
.checker-facts li::before { content: '✓'; margin-right: 8px; }
.checker-section { padding-bottom: 70px; }
.checker-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.checker-card { margin-top: -34px; position: relative; z-index: 2; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-md); border-radius: 24px; padding: clamp(22px, 4vw, 42px); }
.checker-card h2 { font: 500 clamp(1.6rem, 3vw, 2.1rem)/1.15 var(--font-display); margin: 9px 0 14px; letter-spacing: -.02em; }
.checker-card > p:not(.eyebrow), .checker-aside p, .checker-info-grid p { color: var(--ink-2); }
.checker-form { margin-top: 28px; }
.checker-form label { display: block; font-size: .88rem; font-weight: 650; margin-bottom: 8px; }
.checker-input-row { display: flex; gap: 8px; }
.checker-input-row input { min-width: 0; width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--canvas); font: inherit; color: var(--ink); }
.checker-input-row input::placeholder { color: var(--ink-3); opacity: 1; }
.checker-button { border: 1px solid transparent; border-radius: 12px; padding: 14px 19px; color: var(--cream); background: var(--forest); display: inline-flex; align-items: center; justify-content: center; gap: 16px; font: 650 .9rem/1.3 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; min-height: 48px; }
.checker-button:hover { background: var(--deep); }
.checker-button:disabled { opacity: .65; cursor: progress; }
.checker-hint, .checker-form .checker-hint { font-size: .75rem; margin-top: 10px; color: var(--ink-3); }
.checker-status { margin-top: 14px; font-size: .85rem; color: var(--ink-2); }
.checker-status:empty { margin: 0; }
.checker-notice { padding: 14px 16px; background: var(--canvas); border-left: 3px solid var(--terra); border-radius: 0 10px 10px 0; color: var(--ink-2); margin-top: 18px; font-size: .85rem; }
.checker-error { border-left-color: var(--rose); }
.checker-retry { cursor: pointer; padding: 8px 0 0; background: none; border: 0; font-size: .86rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.checker-places { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.checker-places h3 { font-size: .85rem; font-weight: 650; margin-bottom: 12px; }
.checker-places li + li { margin-top: 6px; }
.checker-place { display: flex; align-items: center; justify-content: space-between; text-align: left; gap: 20px; width: 100%; padding: 13px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--canvas); cursor: pointer; min-height: 48px; }
.checker-place:hover { border-color: var(--forest-ink); }
.checker-place small { display: block; color: var(--ink-3); font-size: .7rem; }
.checker-result { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--line); }
.checker-result-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.checker-result-heading h2 { margin-bottom: 8px; }
.checker-result-tag { border: 1px solid var(--line); padding: 6px 9px; border-radius: 20px; white-space: nowrap; font-size: .65rem; color: var(--ink-2); margin-top: 5px; }
.checker-soil-value { display: flex; align-items: center; gap: 20px; margin: 16px 0; }
.checker-soil-value strong { font: 500 clamp(3.3rem, 7vw, 4.6rem)/1.15 var(--font-round); letter-spacing: -.055em; color: var(--terra); }
.checker-soil-value span { color: var(--ink-2); font-size: .82rem; line-height: 1.5; }
.checker-station { font-size: .85rem; }
.checker-stamp { color: var(--ink-3); font-size: .73rem; margin-top: 6px; }
.checker-weather { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 0; }
.checker-weather > div { padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
.checker-weather dt { font-size: .69rem; color: var(--ink-2); }
.checker-weather dd { margin: 8px 0 0; font: 600 1.35rem/1.2 var(--font-round); }
.checker-orientation { padding: 18px; background: var(--canvas); border-radius: 14px; margin-top: 24px; }
.checker-orientation h3 { font-size: .9rem; margin-bottom: 9px; }
.checker-orientation p { font-size: .88rem; color: var(--ink-2); }
.checker-orientation p + p { margin-top: 9px; }
.checker-result-limit { margin-top: 16px; color: var(--ink-2); font-size: .82rem; }
.checker-sources { font-size: .69rem; color: var(--ink-3); margin-top: 20px; }
.checker-sources a, .checker-info-grid a { text-underline-offset: 3px; }
.checker-result-cta { display: flex; align-items: center; gap: 18px; justify-content: space-between; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.checker-result-cta strong { font-size: .86rem; }
.checker-result-cta p { color: var(--ink-2); font-size: .76rem; margin-top: 5px; }
.checker-result-cta .checker-button { font-size: .78rem; white-space: normal; text-align: center; flex-shrink: 0; max-width: 180px; }
.checker-aside { padding-top: 52px; }
.checker-soil-icon { font: 300 2.8rem/1 var(--font-display); color: var(--terra); display: block; margin-bottom: 24px; }
.checker-aside h2, .checker-info-grid h2, .checker-guides h2 { font: 500 clamp(1.9rem, 3.5vw, 2.6rem)/1.13 var(--font-display); margin: 10px 0 20px; letter-spacing: -.025em; }
.checker-aside > p:not(.eyebrow) { font-size: .95rem; }
.checker-depths { margin-top: 28px; }
.checker-depths li { display: flex; gap: 18px; padding: 17px 0; border-top: 1px solid var(--line); }
.checker-depths li > span { flex: 0 0 58px; font: 650 .8rem/1.6 var(--font-round); color: var(--terra); }
.checker-depths p { font-size: .82rem; }
.checker-depths strong { display: block; color: var(--ink); margin-bottom: 4px; }
.checker-explainer { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.checker-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 7vw, 90px); }
.checker-info-grid > div > p + p { margin-top: 18px; }
.checker-guide-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 32px; }
.checker-guide-links a { padding: 22px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; background: var(--paper); }
.checker-guide-links a:hover { border-color: var(--forest-ink); }
.checker-guide-links strong { display: block; font-size: .95rem; margin-bottom: 10px; }
.checker-guide-links span { display: block; font-size: .78rem; color: var(--ink-2); }
@media (max-width: 1000px) { .checker-guide-links { grid-template-columns: 1fr 1fr; } .checker-result-cta { flex-direction: column; align-items: start; } .checker-result-cta .checker-button { max-width: none; } }
@media (max-width: 760px) { .checker-hero { padding-bottom: 64px; } .checker-breadcrumb { margin-bottom: 32px; } .checker-layout, .checker-info-grid { grid-template-columns: 1fr; } .checker-aside { padding-top: 8px; } .checker-soil-icon { display: none; } .checker-section { padding-bottom: 48px; } }
@media (max-width: 480px) { .checker-input-row { flex-direction: column; } .checker-button { width: 100%; } .checker-result-heading { flex-direction: column; gap: 0; } .checker-soil-value { gap: 14px; } .checker-weather { gap: 8px; } .checker-weather > div { padding: 13px; } .checker-guide-links { grid-template-columns: 1fr; } .checker-facts { gap: 8px 18px; } }