/* ==========================================================================
   OkieNerd sitewide component language, 2026-09-08.
   The homepage set it; every customer and Nerd page loads this AFTER its own
   inline stylesheet so the same rules win everywhere by order:

     * no card kit: the only boxes are SHEETS (2px navy border, hard navy offset
       shadow) and they are for things you pick or fill in
     * feature grids are TICK LISTS (a pumpkin marker tick above each item)
     * FAQ rows are hairlines with a pumpkin plus, never boxes
     * Pine BANDS with a Paper starburst fan for the pull sections
     * a pumpkin fan behind every hero, a marker SQUIGGLE rule instead of hairlines
     * buttons carry the hard shadow, never a lift
     * sequences get crayon-circled marker digits

   Tokens fall back to the kit values because a few pages never defined them.
   ========================================================================== */
:root{--shadow:6px 6px 0 var(--ink,#1E2A3A)}

/* ---- the fan and the rule ---- */
.burst{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
/* The hero fan dissolves into the page instead of stopping on a hard horizontal edge at
   the hero's bottom (2026-09-08, Branden: "kill all of these stupid harsh boundaries").
   The Pine band keeps its fan whole: the band is a solid block and its edges are meant. */
section.hero .burst{-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 16%,#000 45%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0,#000 16%,#000 45%,rgba(0,0,0,0) 100%)}
/* The footer meets the last section directly. Its 48px top margin (site-footer.css) drew a
   cream strip between a closing Pine band and the navy bar on every page that ends in a
   band (2026-09-08, the FAQ). Sections carry their own bottom padding. */
footer{margin-top:0!important}
/* The canvas under a short page is painted footer navy, so a page that ends above the
   bottom of a tall window runs footer to edge instead of showing a cream strip. */
html{background:#142031}
section.hero,section.band{position:relative;overflow:hidden}
section.hero>.wrap,section.band>.wrap{position:relative;z-index:1}
.mrule{display:block;width:100%;height:12px;margin:0 0 36px}
section.band .mrule path{stroke:#F2ECE0;opacity:.55}

/* ---- sections: no hairlines between them ---- */
section{border-top:0!important;border-bottom:0!important}

/* ---- buttons: sentence case, hard shadow, no lift ---- */
.btn{border:2px solid var(--ink,#1E2A3A)!important;border-radius:10px!important;box-shadow:var(--shadow-sm,3px 3px 0 rgba(30,42,58,.16));transition:background .14s ease,color .14s ease}
.btn-primary{color:var(--paper,#F2ECE0)!important}
.btn-primary:hover{background:var(--accent-deep,#A53E1B)!important}
.btn-ghost{background:transparent;color:var(--ink,#1E2A3A)}
.btn-ghost:hover{background:var(--ink,#1E2A3A);color:var(--page,#F6EFE2)}
section.band .btn-ghost{color:#FFFFFF;border-color:#F2ECE0!important;box-shadow:none}
section.band .btn-ghost:hover{background:#F2ECE0;color:var(--pine,#1E4D45)}
section.band .btn-primary{border-color:transparent!important;box-shadow:4px 4px 0 rgba(0,0,0,.28)}

/* ---- tick lists: a feature grid with no boxes ---- */
.rs-list{gap:22px 36px!important}
.rs-list>.card,.rs-list>div{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
.rs-list>.card::before,.rs-list>div::before{content:"";display:block;width:46px;height:9px;margin-bottom:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 9'%3E%3Cpath d='M1.5 6.5 C9 2.5 14 2 20 5 C26 8 32 7.5 44.5 2.5' fill='none' stroke='%23D2542A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center/contain}
.rs-list h3{font-size:20px!important;margin:0 0 4px!important}
.rs-list h3 .dot{display:none}
.rs-list .tier{font-size:14px;font-weight:700;color:var(--pine,#1E4D45);margin-bottom:4px}

/* ---- FAQ: hairline rows, pumpkin plus ---- */
details{background:none!important;border:0!important;border-bottom:1px solid var(--line,rgba(30,42,58,.14))!important;border-radius:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
.faq-list,.faq{border-top:0}
details:first-of-type{border-top:1px solid var(--line,rgba(30,42,58,.14))!important}
summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0!important;position:relative;font-family:"Bricolage Grotesque",sans-serif!important;font-weight:700!important;font-size:19px!important;letter-spacing:-.01em;color:var(--ink,#1E2A3A)}
summary::-webkit-details-marker{display:none}
summary::marker{content:""}
summary::after{content:"+";position:absolute;right:8px;top:18px;font-family:"Hanken Grotesk",sans-serif;font-weight:400;font-size:24px;color:var(--accent,#D2542A)}
details[open] summary::after{content:"\2212"}
details p{padding:0 44px 22px 0!important;color:var(--muted,#5D6B7E);font-size:15.5px;margin:0!important}
@media(max-width:560px){summary{font-size:17px!important;padding-right:36px!important}details p{padding-right:0!important}}

/* ---- the status line under a market hero: a check, not a box ---- */
.statusband{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:2px 0 0 36px!important;position:relative;margin-top:24px}
.statusband::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231E4D45'/%3E%3Cpath d='M6.5 12.3 L10.2 16 L17.6 8.4' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.statusband.soon::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%23D2542A' stroke-width='3' stroke-dasharray='4 3'/%3E%3C/svg%3E")}

/* ---- the pull: a Pine band, not a navy box ---- */
section.band{background:var(--pine,#1E4D45);color:#F2ECE0;padding:72px 0}
section.band .pull{background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:0!important;box-shadow:none!important}
section.band .pull h2,section.band h2{color:#FFFFFF}
section.band .pull p,section.band p{color:rgba(242,236,224,.9)}
section.band .pull p .hl{color:#FFD9C4}
section.band .eyebrow{display:none}

/* ---- sequences: crayon-circled marker digits ---- */
.steps li::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M24 5 C34 3.5 43 12 43.5 23 C44 34 35.5 43.5 24.5 43.5 C13 43.5 4.5 35 4.5 24 C4.5 13 13.5 6.5 24 5 Z' fill='%23D2542A'/%3E%3Cpath d='M24 4.5 C35 4 44 13 43.5 24 C43 35.5 34 44 23.5 43.5 C12.5 43 4 34 4.5 23 C5 12 13.5 5 24 4.5' fill='none' stroke='%231E2A3A' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat!important;color:#FFFFFF!important;font-family:"Bricolage Grotesque",sans-serif!important;font-weight:800!important;border:0!important;box-shadow:none!important;width:36px!important;height:36px!important;line-height:36px!important;text-align:center;font-size:17px!important}
.steps li{padding-left:52px!important}

/* ---- eyebrows: the section label goes, the headline carries it ---- */
section .eyebrow{display:none}
section.hero .eyebrow,.hero .eyebrow{display:block}

/* ---- tables read as sheets ---- */
table.towns,table.rates{border:2px solid var(--ink,#1E2A3A)!important;box-shadow:var(--shadow)!important;border-radius:14px!important}

/* ---- the map's status line reads as one sentence, wrapping like prose ---- */
.ok-status{display:block!important;text-align:center;line-height:1.45}
.ok-status .os-line,.ok-status>span{display:inline!important}
.ok-status b{white-space:nowrap}

/* ---- the chip strip label, sentence case ---- */
.ok-chips::before{content:"Pick a city"!important;letter-spacing:0;font-size:12px}

/* ---- any pull box that is not a band yet: its ghost button stays readable on navy ---- */
.pull .btn-ghost{color:#FFFFFF!important;border-color:rgba(255,255,255,.6)!important}
.pull .btn-ghost:hover{background:#FFFFFF;color:var(--pine,#1E4D45)!important}

/* ---- the cream scrim under the sticky bar reads as a pale band on Pine; gone sitewide ---- */
header.nav::after,header.bar::after{display:none!important}

/* ---- informational panels are not boxes ----
   The card kit is gone sitewide (2026-09-08); a `.panel` that only tells you something sits
   on the cream ground under a pumpkin marker tick, like the homepage's feature list. A panel
   somebody fills in or picks from (a form, a plan) keeps its sheet. Browsers without :has()
   keep the boxes; nothing breaks. */
.panel:not(.primary):not(:has(input,select,textarea,.btn,button)){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important;margin-top:40px!important}
.panel:not(.primary):not(:has(input,select,textarea,.btn,button))>h2::before,.panel:not(.primary):not(:has(input,select,textarea,.btn,button))>h3::before{content:"";display:block;width:46px;height:9px;margin-bottom:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 9'%3E%3Cpath d='M1.5 6.5 C9 2.5 14 2 20 5 C26 8 32 7.5 44.5 2.5' fill='none' stroke='%23D2542A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center/contain}