/* Page-scoped styles for the cost guide and sandy loam pages (body.guide). Fluid 375 to 2560. */
body.guide{--g-accent:#1f3fd0;--g-ink:#161b2e;--g-line:#d6dbe8;--g-base:#b9a27c;--g-soil:#7b5b3e;--g-gap:24px}
@media (min-width:1600px){body.guide .wrap{max-width:max(1440px,88vw)}}
body.guide main p,body.guide main li,body.guide main td,body.guide main th,body.guide main summary,body.guide main dd{font-size:clamp(16px,calc(.42vw + 10px),22px)}
body.guide main .bx-hero h1{font-size:clamp(48px,5.6vw,190px)}
body.guide main .bx-hero h1 small{font-size:clamp(18px,1.3vw,40px)}
body.guide main h2{font-size:clamp(30px,2.8vw,84px)}
body.guide main h3{font-size:clamp(19px,1.15vw,32px)}
body.guide main .bx-lede{font-size:clamp(17px,calc(.5vw + 10px),24px)}
body.guide .bx-ticket dt,body.guide .bx-ticket dd{font-size:clamp(13px,.7vw,19px)}

/* Answer block */
.gx-answer{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g-gap)}
body.guide main .gx-answer .gx-big{font-family:var(--display);font-weight:800;font-size:clamp(40px,4.4vw,140px);line-height:1;color:var(--g-ink);margin:0}
.gx-answer .gx-big span{display:block;font-size:.34em;letter-spacing:.06em;color:var(--muted);margin-top:16px}
@media (min-width:1024px){.gx-answer{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:end}}
.gx-answer p{margin:0 0 24px;max-width:62ch;line-height:1.7}
.gx-answer p:last-child{margin-bottom:0}

/* Calculator */
.gx-calc{display:grid;grid-template-columns:minmax(0,1fr);gap:48px;margin-top:48px;align-items:stretch}
@media (min-width:1100px){.gx-calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.gx-controls{display:flex;flex-direction:column;gap:48px}
.gx-field{display:flex;flex-direction:column;gap:24px}
.gx-head{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap}
.gx-head label,.gx-head .gx-lab{font-family:var(--display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(15px,.9vw,26px);color:var(--g-ink)}
.gx-head small{font-size:clamp(13px,.75vw,20px);color:var(--muted)}
.rf-row{display:grid;grid-template-columns:minmax(0,1fr) clamp(128px,8vw,220px);gap:24px;align-items:center}
.rf-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;--p:50%;margin:0}
.rf-range:focus-visible{outline:3px solid var(--g-accent);outline-offset:4px;border-radius:8px}
.rf-range::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--g-accent) var(--p),#cdd3e2 var(--p))}
.rf-range::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:44px;margin-top:-18px;border-radius:50%;border:0;background:radial-gradient(circle,#fff 0 10px,var(--g-accent) 10.5px 14px,transparent 14.5px);cursor:pointer}
.rf-range::-moz-range-track{height:8px;border-radius:999px;background:#cdd3e2}
.rf-range::-moz-range-progress{height:8px;border-radius:999px;background:var(--g-accent)}
.rf-range::-moz-range-thumb{width:44px;height:44px;border:0;border-radius:50%;background:radial-gradient(circle,#fff 0 10px,var(--g-accent) 10.5px 14px,transparent 14.5px)}
.rf-box{display:flex;align-items:center;gap:8px;min-height:52px;border:1px solid #9aa3bd;border-radius:12px;padding:0 16px;background:#fff}
.rf-box:focus-within{border-color:var(--g-accent);box-shadow:0 0 0 3px rgba(31,63,208,.18)}
.rf-box input{flex:1;min-width:0;border:0;background:transparent;text-align:right;font:600 clamp(16px,.9vw,24px)/1 var(--body);font-variant-numeric:tabular-nums;color:var(--g-ink);padding:12px 0;-moz-appearance:textfield}
.rf-box input::-webkit-outer-spin-button,.rf-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rf-box input:focus{outline:0}
.rf-box span{font-size:clamp(13px,.75vw,20px);color:var(--muted)}
.rf-chips{display:flex;flex-wrap:wrap;gap:24px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border:1px solid #9aa3bd;border-radius:999px;background:#fff;color:var(--g-ink);font:600 clamp(14px,.8vw,21px)/1.2 var(--body);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--g-ink)}
.chip[aria-pressed=true]{background:var(--g-ink);border-color:var(--g-ink);color:#fff}
.chip:focus-visible,.seg label:focus-within{outline:3px solid var(--g-accent);outline-offset:3px}
.seg{display:flex;border:1px solid #9aa3bd;border-radius:999px;padding:4px;background:#fff;width:max-content;max-width:100%}
.seg label{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px clamp(16px,1.4vw,36px);border-radius:999px;cursor:pointer;font:600 clamp(14px,.85vw,22px)/1.2 var(--body);color:var(--g-ink);white-space:nowrap}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg label:has(input:checked){background:var(--g-ink);color:#fff}

/* Result card: a pavement cross section */
.gx-out{background:var(--g-ink);color:#fff;border-radius:20px;padding:clamp(24px,2.6vw,64px);display:flex;flex-direction:column;gap:32px}
body.guide main .gx-out .gx-tag{font-family:var(--display);font-weight:800;letter-spacing:.12em;font-size:clamp(13px,.75vw,20px);color:#aab1c7;margin:0}
body.guide main .gx-total{font-family:var(--display);font-weight:800;font-size:clamp(40px,3.6vw,112px);line-height:1;margin:0;font-variant-numeric:tabular-nums}
.gx-out p{margin:0;color:#d5d9e6;line-height:1.6}
.gx-stack{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid #3a4160}
.gx-layer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:24px;min-height:72px}
.gx-layer b{display:block;font-size:clamp(16px,.95vw,26px)}
.gx-layer em{display:block;font-style:normal;font-size:clamp(13px,.75vw,20px);opacity:.85;margin-top:4px}
.gx-layer output{font:700 clamp(16px,.95vw,26px)/1.2 var(--body);font-variant-numeric:tabular-nums;text-align:right}
.gx-surface{background:#2b2f36;color:#fff}
.gx-surface.is-concrete{background:#c9ccd2;color:var(--g-ink)}
.gx-base{background:var(--g-base) radial-gradient(circle at 20% 30%,rgba(0,0,0,.14) 0 2px,transparent 2.5px) 0 0/18px 18px;color:var(--g-ink);transition:min-height .2s}
.gx-grade{background:var(--g-soil);color:#fff}
.gx-grade[hidden]{display:none}
.gx-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#ff6b63;color:var(--g-ink);font:800 clamp(11px,.6vw,16px)/1.2 var(--body);letter-spacing:.06em;margin-left:8px;vertical-align:middle}
.gx-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin:0}
@media (min-width:600px){.gx-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.gx-facts div{border-top:1px solid #3a4160;padding-top:16px}
.gx-facts dt{font-size:clamp(13px,.75vw,20px);color:#aab1c7;margin:0 0 8px}
.gx-facts dd{margin:0;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.gx-out .gx-actions{display:flex;flex-wrap:wrap;gap:24px;margin-top:auto}
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:12px 24px;border-radius:999px;font:700 clamp(15px,.85vw,22px)/1.2 var(--body);text-decoration:none}
.gx-btn.pri{background:#ff6b63;color:var(--g-ink)}
.gx-btn.sec{border:1px solid #8a93ad;color:#fff}
.gx-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
body.guide main .gx-note{font-size:clamp(13px,.75vw,20px)!important;color:#aab1c7!important}

/* Who does what */
.gx-who{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:48px}
@media (min-width:900px){.gx-who{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
.gx-who article{border:1px solid var(--g-line);border-radius:16px;padding:clamp(24px,2.2vw,56px);display:flex;flex-direction:column;gap:16px}
.gx-who article.ours{border-color:var(--g-ink);box-shadow:inset 0 6px 0 var(--g-base)}
body.guide main .gx-who .gx-kick{font-family:var(--display);font-weight:800;letter-spacing:.12em;font-size:clamp(13px,.75vw,20px);color:var(--red);margin:0}
.gx-who h3{margin:0}
.gx-who p{margin:0;line-height:1.7}

/* Table */
.gx-tablewrap{margin-top:48px;overflow-x:auto}
.gx-table{width:100%;border-collapse:collapse;min-width:300px}
.gx-table th,.gx-table td{text-align:left;padding:16px 16px 16px 0;border-bottom:1px solid var(--g-line);vertical-align:top;line-height:1.5}
.gx-table thead th{font-family:var(--display);font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:2px solid var(--g-ink)}
.gx-table td:last-child,.gx-table th:last-child{padding-right:0}
.gx-table tbody th{font-weight:600}
.gx-table sup a{color:var(--g-accent);text-decoration:none;font-size:.75em}
.gx-table-note{margin:24px 0 0;color:var(--muted);line-height:1.6}

/* Quotes */
.gx-quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:48px}
@media (min-width:900px){.gx-quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
.gx-quotes figure{margin:0;border-top:2px solid var(--g-ink);padding-top:24px;display:flex;flex-direction:column;gap:16px}
.gx-quotes blockquote{margin:0}
.gx-quotes blockquote p{margin:0;line-height:1.6}
body.guide main .gx-quotes figcaption{font-size:clamp(13px,.75vw,20px);color:var(--muted);margin-top:auto}

/* Sources */
.gx-sources{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:16px}
.gx-sources li{line-height:1.6;padding-left:8px}
.gx-sources a{color:var(--g-accent)}

/* Photo strip */
.gx-photos{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:48px}
@media (min-width:768px){.gx-photos{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
.gx-photos figure{margin:0;display:flex;flex-direction:column;gap:16px}
.gx-photos img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:16px;display:block}
body.guide main .gx-photos figcaption{font-size:clamp(13px,.75vw,20px);color:var(--muted)}

/* Prose helpers */
body.guide .bx-prose p{line-height:1.7}
.gx-inline{color:var(--g-accent);text-decoration:underline;text-underline-offset:.15em}
.gx-lede-wide{max-width:62ch;margin:24px 0 0;line-height:1.7}

/* Corey's 24px rule on shared components, scoped to these pages */
body.guide #main{margin-top:12px}
body.guide .bx-actions{gap:24px}
body.guide .final-cta .text-link{margin-top:24px}
/* Ticket values were inheriting white text on the white ticket (site-wide bug); fix here */
body.guide .bx-ticket dd{color:var(--g-ink)}
@media (min-width:1100px){#lot-calc .gx-controls{justify-content:space-between}}

body.guide .gx-out sup a{color:#a9b8ff}
@media (max-width:599px){.gx-layer{grid-template-columns:minmax(0,1fr);gap:8px}.gx-layer output{text-align:left}body.guide .gx-layer .gx-badge{display:flex;width:max-content;margin:8px 0 0}}

body.guide .gx-formula{margin-top:auto;padding:24px;border:1px solid var(--g-line,#d9dce3);border-radius:12px}
body.guide main .gx-formula p{margin:0}
body.guide main .gx-formula .gx-kick{font-family:var(--display);font-weight:800;letter-spacing:.12em;font-size:clamp(13px,.75vw,20px);color:var(--red);margin:0 0 8px}
body.guide .bx-actions .vx-btn{flex:1 1 220px;font-size:max(14px,.62vw);min-height:max(52px,2.6vw)}
body.guide .bx-actions .vx-btn>i{width:max(32px,1.4vw);height:max(32px,1.4vw)}
body.guide .bx-actions .vx-btn svg{width:max(20px,.9vw);height:max(20px,.9vw)}
body.guide .gx-badge[hidden]{display:none!important}
/* v4: bands, tighter rhythm, simple hero, what-is */
body.guide{--g-band:#eef1f8}
body.guide main>section.bx-section,body.guide main>section.related{position:relative;isolation:isolate;padding-block:clamp(48px,4.5vw,112px);margin-block:0}
body.guide main>section.bx-section:nth-of-type(odd)::before,body.guide main>section.related:nth-of-type(odd)::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--g-band)}
body.guide .bx-hero{padding-bottom:clamp(48px,4.5vw,112px)}
body.guide .bx-hero .bx-media img{aspect-ratio:3/2;object-fit:cover;height:auto}
body.guide .gx-hfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:24px 0 0;padding-top:24px;border-top:1px solid var(--hx-rule,rgba(255,255,255,.2))}
body.guide .gx-hfacts div{margin:0}
body.guide .gx-hfacts dt{font:700 clamp(11px,.6vw,16px)/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--hx-muted,#aab3cc);margin:0 0 8px}
body.guide .gx-hfacts dd{margin:0;font:700 clamp(15px,.9vw,26px)/1.3 var(--body);color:#fff}
@media (min-width:1001px){
 body.guide .bx-hero .bx-hero-grid{grid-template-rows:auto auto auto auto 1fr}
 body.guide .bx-hero .bx-lede{grid-column:1/6;grid-row:3}
 body.guide .bx-hero .bx-actions{grid-column:1/6;grid-row:4;align-self:start;margin:0}
 body.guide .bx-hero .gx-hfacts{grid-column:1/6;grid-row:5;align-self:end}
 body.guide .bx-hero .bx-media{grid-column:7/13;grid-row:3/6;align-self:end;margin:0}
}
@media (max-width:1000px){body.guide .bx-hero .gx-hfacts{grid-column:1/-1}}
@media (max-width:599px){body.guide .gx-hfacts{grid-template-columns:minmax(0,1fr)}}
body.guide .gx-mix{margin:24px 0 0}
body.guide .gx-bar{display:flex;gap:3px;height:clamp(28px,2.2vw,60px);border-radius:999px;overflow:hidden}
body.guide .gx-bar .sand,body.guide .gx-legend .sand{background:var(--g-base)}
body.guide .gx-bar .silt,body.guide .gx-legend .silt{background:#8d93a6}
body.guide .gx-bar .clay,body.guide .gx-legend .clay{background:var(--g-soil)}
body.guide .gx-legend{display:flex;flex-wrap:wrap;gap:24px;list-style:none;padding:0;margin:24px 0 0}
body.guide main .gx-legend li{display:flex;align-items:center;gap:8px;margin:0}
body.guide .gx-legend i{display:block;width:clamp(14px,.8vw,22px);height:clamp(14px,.8vw,22px);border-radius:4px}
body.guide main .gx-mix figcaption{margin-top:24px;font-size:clamp(13px,.75vw,20px);color:#5b6275}
body.guide .gx-facts3{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;margin-top:48px}
@media (min-width:900px){body.guide .gx-facts3{grid-template-columns:repeat(3,minmax(0,1fr))}}
body.guide .gx-facts3 article{background:#fff;border:1px solid var(--g-line);border-radius:12px;padding:clamp(24px,1.8vw,48px)}
body.guide main .gx-facts3 .gx-kick{font-family:var(--display);font-weight:800;letter-spacing:.12em;font-size:clamp(13px,.75vw,20px);color:var(--red);margin:0 0 8px}
body.guide main .gx-facts3 .gx-stat{font-family:var(--display);font-weight:800;font-size:clamp(30px,2.4vw,72px);line-height:1.05;color:var(--g-ink);margin:0 0 24px;white-space:nowrap}
body.guide main .gx-facts3 p{margin:0}
body.guide .bx-uses.gx-uses6{border-top:0;gap:24px;margin-top:24px}
body.guide .bx-uses.gx-uses6 article,body.guide .bx-uses.gx-uses6 article+article{padding:clamp(24px,1.8vw,48px);border:1px solid var(--g-line);border-radius:12px;background:#fff}
@media (min-width:1001px){
 body.guide .bx-hero .bx-hero-grid{grid-template-rows:auto auto auto auto auto}
 body.guide .bx-hero .bx-media{align-self:stretch;display:flex}
 body.guide .bx-hero .bx-media picture{display:block;flex:1;height:100%}
 body.guide .bx-hero .bx-media img{aspect-ratio:auto;height:100%;min-height:clamp(300px,22vw,760px)}
}
@media (min-width:1001px){
 body.guide .bx-hero .bx-media{display:block;position:relative;min-height:clamp(300px,22vw,760px)}
 body.guide .bx-hero .bx-media picture{position:absolute;inset:0;height:auto}
 body.guide .bx-hero .bx-media img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
}