/* v8 plan page. Component styles from brand-kit v3 plan-reference.html, scoped to .p8. */
.p8 { max-width: 480px; margin: 0 auto; padding: 14px 16px 128px; display: grid; gap: 16px; }
.p8 .ic { width: 1em; height: 1em; flex: none; }
.p8 .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.p8 .topbar .logo svg { display: block; height: 26px; width: auto; }
.p8 .btn--small { padding: 0 16px; font-size: 0.9375rem; }
.p8 .btn--wide { width: 100%; }
.p8 .p8hero { display: grid; gap: 14px; padding: 6px 4px 4px; }
.p8 .p8hero h1 { font-size: 2.125rem; }
.p8 .tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.p8 .tags li { padding: 5px 12px; border: 2px solid var(--ink); border-radius: 999px; font-size: 0.875rem; font-weight: 500; }
.p8 .scene svg { display: block; width: 100%; height: auto; }
.p8 .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p8 .legend li { display: flex; gap: 10px; align-items: center; font-size: 0.9375rem; line-height: 1.35; }
.p8 .legend .n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--lamp); font-size: 0.8125rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.p8 .card { padding: 24px 20px; display: grid; gap: 16px; }
.p8 .card h2 { font-size: 1.5rem; }
.p8 .sub { font-size: 0.9375rem; line-height: 1.45; color: var(--dim); }
.p8 .fine { font-size: 0.8125rem; line-height: 1.45; color: var(--dim); }
.p8 .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.p8 .tile { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 92px; padding: 10px 4px; border: 2px solid var(--ink); border-radius: 18px; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color var(--quick), color var(--quick); }
.p8 .tile .ic { width: 34px; height: 34px; }
.p8 .tile[aria-pressed="true"] { background: var(--ink); color: var(--lamp); --ic-accent: var(--daylight); }
.p8 .load { display: grid; gap: 8px; }
.p8 .load-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.p8 .load-top strong { font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -0.02em; }
.p8 .load-top span { font-size: 0.9375rem; color: var(--dim); text-align: right; }
.p8 .load-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--rail); }
.p8 .load-bar i { display: block; height: 100%; transition: width var(--flip); }
.p8 .load-bar .run { background: var(--ink); }
.p8 .load-bar .surge { background: var(--dim); }
.p8 .load.over .load-top strong, .p8 .load.over .load-top span { color: var(--ember); }
.p8 .key { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8125rem; color: var(--dim); }
.p8 .key span { display: inline-flex; align-items: center; gap: 6px; }
.p8 .key i { width: 10px; height: 10px; border-radius: 3px; }
.p8 .bars { display: grid; gap: 18px; }
.p8 .bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.p8 .bar-head b { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; white-space: nowrap; }
.p8 .range { position: relative; height: 18px; border-radius: 9px; background: var(--rail); }
.p8 .range i { position: absolute; top: 0; bottom: 0; border-radius: 9px; }
.p8 .rows-ic { list-style: none; margin: 0; padding: 0; display: grid; }
.p8 .rows-ic > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 2px solid var(--ink); }
.p8 .rows-ic > li:first-child { border-top: 0; padding-top: 0; }
.p8 .rows-ic > li:last-child { padding-bottom: 0; }
.p8 .badge { width: 52px; height: 52px; border-radius: 16px; background: var(--lamp); display: grid; place-items: center; --ic-accent: var(--daylight); }
.p8 .badge .ic { width: 30px; height: 30px; }
.p8 .rows-ic h3 { font-size: 1.125rem; }
.p8 .rows-ic p { font-size: 0.9375rem; line-height: 1.45; color: var(--dim); margin-top: 2px; }
.p8 .act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; }
.p8 .done { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-size: 0.9375rem; cursor: pointer; }
.p8 .done input { width: 22px; height: 22px; accent-color: var(--ink); }
.p8 .photo { aspect-ratio: 16 / 10; border-radius: 20px; background: var(--lamp); display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-items: center; gap: 4px; padding: 14px 14px 12px; --ic-accent: var(--daylight); }
.p8 .photo .ic { height: 100%; width: auto; max-width: 46%; }
.p8 .photo small { text-align: center; font-size: 0.75rem; line-height: 1.3; color: var(--dim); }
.p8 .specs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.p8 .specs li { padding: 5px 12px; border: 2px solid var(--ink); border-radius: 999px; font-size: 0.875rem; font-weight: 700; }
.p8 .fits { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.p8 .fits li { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; }
.p8 .fits .ic { width: 20px; height: 20px; }
.p8 .more { display: grid; }
.p8 details { border-top: 2px solid var(--ink); }
.p8 summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; font-weight: 700; cursor: pointer; list-style: none; }
.p8 summary::-webkit-details-marker { display: none; }
.p8 summary::after { content: "+"; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; }
.p8 details[open] summary::after { content: "\2212"; }
.p8 details ul { margin: 0 0 16px; padding-left: 20px; font-size: 0.9375rem; line-height: 1.5; display: grid; gap: 6px; }
.p8 .kit { list-style: none; margin: 0; padding: 0; display: grid; }
.p8 .kit a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 18px; gap: 14px; align-items: center; min-height: 72px; padding: 10px 0; border-top: 2px solid var(--ink); text-decoration: none; }
.p8 .kit li:first-child a { border-top: 0; }
.p8 .thumb { width: 48px; height: 48px; border-radius: 14px; background: var(--lamp); display: grid; place-items: center; --ic-accent: var(--daylight); }
.p8 .thumb .ic { width: 28px; height: 28px; }
.p8 .kit .txt { display: block; min-width: 0; }
.p8 .kit .txt b { display: block; font-size: 1rem; line-height: 1.25; }
.p8 .kit .txt small { display: block; font-size: 0.875rem; line-height: 1.35; color: var(--dim); }
.p8 .chev { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.p8 .card--ink { background: var(--ink); }
.p8 .card--ink .sub, .p8 .card--ink .fine { color: var(--ash-light); }
.p8 .opts { display: grid; gap: 10px; }
.p8 .opt { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 68px; padding: 10px 16px; border: 2px solid var(--ash); border-radius: 18px; background: transparent; color: var(--daylight); font-family: var(--font-body); text-align: left; cursor: pointer; }
.p8 .opt .ic { width: 34px; height: 34px; }
.p8 .opt b { display: block; font-size: 1rem; line-height: 1.25; }
.p8 .opt small { display: block; font-size: 0.875rem; line-height: 1.35; color: var(--ash-light); }
.p8 .range .mid { opacity: 1; }
.p8 .quote { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 2px solid var(--ink); font-size: 0.9375rem; }
.p8 .quote b { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; white-space: nowrap; }
.p8 .flow [hidden], .p8 [hidden] { display: none !important; }
.p8 .flow > div { display: grid; gap: 16px; }
.p8 .bill svg { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto; }
.p8 .link { justify-self: start; min-height: 48px; padding: 0; border: 0; background: none; color: var(--daylight); font: inherit; font-size: 0.9375rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
.p8 .read { margin: 0; display: grid; }
.p8 .read > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-top: 2px solid var(--ink-2); }
.p8 .read > div:first-child { border-top: 0; padding-top: 0; }
.p8 .read dt { color: var(--ash-light); font-size: 0.9375rem; }
.p8 .read dd { margin: 0; font-weight: 700; text-align: right; }
.p8 .q { margin: 0; padding: 0; border: 0; display: grid; gap: 10px; }
.p8 .q legend { padding: 0; margin-bottom: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.p8 .ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.p8 .ladder li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 18px; }
.p8 .ladder .yes { background: var(--ink); color: var(--daylight); }
.p8 .ladder .no { border: 2px dashed var(--ink); }
.p8 .ladder .mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
.p8 .ladder .yes .mark { background: var(--lamp); color: var(--ink); }
.p8 .ladder .no .mark { border: 2px solid var(--ink); }
.p8 .ladder .mark .ic { width: 20px; height: 20px; }
.p8 .ladder b { display: block; font-size: 1.0625rem; line-height: 1.25; }
.p8 .ladder small { display: block; font-size: 0.875rem; line-height: 1.35; }
.p8 .ladder .yes small { color: var(--ash-light); }
.p8 .ladder .no small { color: var(--dim); }
.p8 .fits .ic { --ic-accent: var(--ink); }
.p8 .save { display: grid; gap: 12px; padding-top: 18px; border-top: 2px solid var(--ink); }
.p8 .save h3 { font-size: 1.25rem; }
.p8 .save .field label { font-size: 0.9375rem; font-weight: 700; }
.p8 .tick { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; min-height: 48px; font-size: 0.9375rem; line-height: 1.4; cursor: pointer; }
.p8 .tick input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }
.p8 .keep-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.p8 .keep-row .btn { padding: 0 6px; font-size: 0.9375rem; }
.p8 .what { padding-top: 16px; border-top: 2px solid var(--ink); }
.p8 .foot { padding: 4px 4px 0; }
.sticky8 { position: fixed; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--daylight); }
.sticky8-in { max-width: 480px; margin: 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sticky8 b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.sticky8 small { font-size: 0.8125rem; color: var(--ash); }
.sticky8 .btn { background: var(--lamp); border-color: var(--lamp); color: var(--ink); white-space: nowrap; }
.sticky8 :focus-visible { outline-color: var(--lamp); }
.p8 { --rail: #E9DFC0; max-width: 480px; margin: 0 auto; padding: 14px 0 128px; display: grid; gap: 16px; color: var(--ink); }
.p8 .card h3 { margin: 0; }
.p8 .card { background: var(--daylight); border-radius: 28px; }
.p8 .card--ink { background: var(--ink); color: var(--daylight); }
.p8 .card--ink .btn { background: var(--lamp); color: var(--ink); border-color: var(--lamp); }
.p8 .card--ink .btn--quiet { background: transparent; color: var(--daylight); border-color: var(--ash); }
.p8 .card--ink details, .p8 .card--ink summary { border-color: var(--ash); }
.p8 .card--ink .chip { color: var(--daylight); border-color: var(--ash); }
.p8 .card--ink .chip[aria-pressed="true"] { background: var(--lamp); color: var(--ink); border-color: var(--lamp); }
.p8 .ic { width: 1em; height: 1em; }
.p8 .p8hero h1 { font-size: 2.125rem; line-height: 1.05; margin: 0; }
.p8 .scene { background: var(--daylight); border-radius: 22px; padding: 6px 8px 0; }
.p8 .btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.p8 .mbody { font-size: .9375rem; line-height: 1.5; padding-bottom: 14px; }
.p8 .mbody ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.p8 .mbody p + p { margin-top: 8px; }
.p8 .src { font-size: .8125rem; line-height: 1.45; color: var(--dim); }
.p8 .src a, .p8 .fine a { color: inherit; }
.p8 .alts { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; }
.p8 .alts li { display: grid; gap: 4px; padding-top: 12px; border-top: 2px solid var(--rail); font-size: .9375rem; }
.p8 .alts li:first-child { border-top: 0; padding-top: 0; }
.p8 .alts .role { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.p8 .alts a.go { font-weight: 700; }
.p8 .fits .no { color: var(--dim); }
.p8 .fits .ic { --ic-accent: var(--lamp); }
.p8 .safe8 { background: var(--ink); color: var(--daylight); border-radius: 28px; padding: 20px; display: grid; gap: 8px; font-size: .9375rem; }
.p8 .safe8 .fine { color: var(--ash-light); }
.p8 .endpic { border-radius: 22px; overflow: hidden; }
.p8 .endpic img { display: block; width: 100%; height: auto; }
.p8 .field input, .p8 .field textarea { min-height: 48px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 16px; background: transparent; color: inherit; font: inherit; }
.p8 .card--ink .field input, .p8 .read input, .p8 .read select { border-color: var(--ash); color: var(--daylight); background: transparent; }
.p8 .read input { width: 7.5em; min-height: 40px; padding: 0 10px; border: 2px solid var(--ash); border-radius: 12px; font: inherit; font-weight: 700; text-align: right; }
.p8 .read select { min-height: 40px; border: 2px solid var(--ash); border-radius: 12px; font: inherit; padding: 0 8px; background: var(--ink); color: var(--daylight); }
.p8 .busy { display: flex; align-items: center; gap: 12px; font-size: .9375rem; color: var(--ash-light); }
.p8 .busy i { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ash); border-top-color: var(--lamp); animation: p8spin 900ms linear infinite; }
@keyframes p8spin { to { transform: rotate(360deg); } }
.p8 .err { color: var(--ember-out); font-size: .9375rem; }
.p8 .card .err { color: var(--ember); }
.p8 .card--ink .err { color: var(--ember-out); }
.p8 .okmsg { font-size: .9375rem; font-weight: 700; }
.p8 .toast { font-size: .875rem; color: var(--dim); min-height: 1.2em; }
.p8 .whyn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9375rem; }
.p8 .whatif { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .875rem; }
.p8 .whatif .chip { min-height: 40px; font-size: .9375rem; }
.p8 .kit-extra summary { font-size: .9375rem; }
.sticky8 { z-index: 60; }
.sticky8[hidden] { display: none !important; }
@media print { .sticky8, .p8 .keep, .p8 #usage, .p8 .quote-form, .p8 .whatif { display: none !important; } .p8 details { break-inside: avoid; } .p8 details > *:not(summary) { display: block !important; } }
@media (min-width: 900px) { .p8 { max-width: 560px; } }
.p8 .badge { color: var(--ink); padding: 0; font-size: inherit; letter-spacing: 0; text-transform: none; display: grid; }
.p8 .fits li > span { min-width: 0; }
/* Near you (ZIP block), from plan-reference.html v4 */
.p8 .area { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 14px; align-items: end; }
.p8 .area .zip label { font-size: 0.8125rem; font-weight: 700; }
.p8 .area .zip input { width: 100%; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; padding: 0 8px; }
.p8 #local h3 { margin: 18px 0 4px; font-size: 1.125rem; line-height: 1.25; }