/* ==========================================================================
   Shared network styles — header, footer and home page design system.
   Loaded after each page's inline <style>, so these tokens and rules win.
   Edit this file once and copy it to every site's /assets/site.css.
   ========================================================================== */

:root{
  --bg:#F7F8F5; --bg-alt:#EDF1EC; --ink:#14231F; --ink-soft:#4B5E59; --line:#D9E0D9;
  --card:#FFFFFF; --teal:#1F6F63; --teal-deep:#0F3A34; --teal-night:#0A2925;
  --burn:#E8562F; --burn-soft:#FCE3DA; --tape:#F2C230; --tape-deep:#C99A12;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(15,58,52,.06);
  --lift:0 1px 0 rgba(255,255,255,.6) inset, 0 28px 60px -30px rgba(10,41,37,.45);
  --font-display:'Bricolage Grotesque', 'Segoe UI', sans-serif;
  --font-body:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sh-h:64px;
}

body{font-family:var(--font-body); background:var(--bg); color:var(--ink);}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.015em;}
:focus-visible{outline:3px solid var(--teal); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto !important;} *{transition:none !important; animation:none !important;} }
[id]{scroll-margin-top:calc(var(--sh-h) + 16px);}

.skip-link{position:absolute; left:12px; top:-60px; z-index:100; background:var(--tape); color:var(--teal-night); font-weight:700; padding:10px 16px; border-radius:8px; text-decoration:none;}
.skip-link:focus{top:12px;}

/* ---------- Header ---------- */
.sh{position:sticky; top:0; z-index:60; background:rgba(247,248,245,.94); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);}
.sh-inner{max-width:1120px; margin:0 auto; padding:0 20px; height:var(--sh-h); display:flex; align-items:center; gap:28px;}
.sh-brand{display:flex; align-items:center; gap:10px; text-decoration:none !important; color:var(--teal-deep); flex-shrink:0; min-width:0;}
.sh-mark{width:34px; height:34px; border-radius:9px; background:var(--teal-deep); color:var(--tape); display:grid; place-items:center; flex-shrink:0;}
.sh-mark svg{width:20px; height:20px;}
.sh-name{font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1; white-space:nowrap;}
.sh-name small{display:block; font-family:var(--font-body); font-weight:500; font-size:.7rem; color:var(--ink-soft); margin-top:4px; letter-spacing:0;}
.sh-nav{display:flex; gap:4px; margin-left:auto;}
.sh-nav a, .sh-pop-pages a{color:var(--ink); font-size:.92rem; font-weight:500; padding:8px 12px; border-radius:8px; text-decoration:none;}
.sh-nav a:hover{background:var(--bg-alt); color:var(--teal-deep); text-decoration:none;}
.sh-tools-btn, .sh-burger{font:600 .9rem/1 var(--font-body); color:#fff; background:var(--teal-deep); border:0; border-radius:999px; padding:11px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; flex-shrink:0;}
.sh-tools-btn:hover, .sh-burger:hover{background:var(--teal);}
.sh-tools-btn svg{width:12px; height:12px; transition:transform .15s ease;}
.sh-tools-btn[aria-expanded="true"] svg{transform:rotate(180deg);}
.sh-burger{display:none; margin-left:auto;}
.sh-burger svg{width:16px; height:16px;}

/* one shared pop-over: dropdown on desktop, full-width drawer on mobile */
.sh-pop{position:absolute; top:calc(var(--sh-h) - 2px); right:max(20px, calc((100vw - 1120px) / 2 + 20px)); width:min(860px, calc(100vw - 40px));
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 24px 60px -24px rgba(10,41,37,.35); padding:20px;}
.sh-pop[hidden]{display:none;}
.sh-pop-pages{display:none;}
.sh-panel{display:grid; grid-template-columns:repeat(3, 1fr); gap:4px 16px;}
.sh-group{display:flex; flex-direction:column; gap:2px;}
.sh-group-title{font-family:var(--font-body); font-size:.8rem; font-weight:600; color:var(--ink-soft); margin:4px 10px 6px;}
.sh-site{display:flex; gap:10px; align-items:flex-start; padding:9px 10px; border-radius:10px; text-decoration:none !important; color:var(--ink);}
.sh-site:hover{background:var(--bg-alt);}
.sh-site .sh-mark{width:28px; height:28px; border-radius:7px;}
.sh-site .sh-mark svg{width:16px; height:16px;}
.sh-site-text strong{display:block; font-size:.9rem; font-weight:600; color:var(--teal-deep);}
.sh-site-text small{display:block; font-size:.78rem; color:var(--ink-soft); line-height:1.35;}
.sh-site[aria-current="page"]{background:var(--bg-alt);}
.sh-site[aria-current="page"] strong::after{content:" (this site)"; font-weight:500; color:var(--ink-soft);}
.sh-more{grid-column:1/-1; border-top:1px solid var(--line); margin-top:10px; padding:12px 10px 0; font-size:.86rem; font-weight:600;}

/* the ruler: tick marks every 8px, taller every 40px */
.sh-ruler{height:9px; border-bottom:1px solid var(--line);
  background-image:
    linear-gradient(90deg, var(--teal-deep) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,58,52,.35) 1px, transparent 1px);
  background-size:40px 9px, 8px 4px;
  background-repeat:repeat-x;
  background-position:20px bottom, 20px bottom;
  opacity:.55;}

@media (max-width: 1060px){
  .sh-nav, .sh-tools-btn{display:none;}
  .sh-burger{display:inline-flex;}
  .sh-pop{position:static; width:auto; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; background:var(--bg);
    padding:8px 20px 24px; max-height:calc(100vh - var(--sh-h) - 10px); overflow-y:auto;}
  .sh-pop-pages{display:flex; flex-direction:column;}
  .sh-pop-pages a{padding:12px 4px; border-bottom:1px solid var(--line); border-radius:0; font-weight:600;}
  .sh-panel{grid-template-columns:1fr; gap:0;}
  .sh-group-title{margin:20px 4px 6px;}
  .sh-site{padding:9px 4px;}
  .sh-more{padding:14px 4px 0;}
}
@media (max-width: 480px){
  .sh-inner{gap:12px; padding:0 16px;}
  .sh .sh-brand{flex-shrink:1;}
  .sh .sh-name{font-size:1rem; overflow:hidden; text-overflow:ellipsis;}
  .sh .sh-name small{display:none;}
  .sh-burger{padding:10px 14px;}
}

/* ---------- Footer ---------- */
.sf{background:var(--teal-night); color:#C3D3CE; margin-top:0; padding:0; text-align:left; font-size:.92rem;}
.sf a{color:#E7F0ED; text-decoration:none;}
.sf a:hover{color:var(--tape); text-decoration:underline;}
.sf-tape{height:14px; background-color:var(--tape);
  background-image:
    linear-gradient(90deg, rgba(10,41,37,.85) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(10,41,37,.55) 1px, transparent 1px);
  background-size:50px 14px, 10px 6px; background-repeat:repeat-x; background-position:0 0, 0 0;}
.sf-inner{max-width:1120px; margin:0 auto; padding:56px 20px 40px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:36px;}
.sf-short .sf-inner{grid-template-columns:1.5fr 1fr 1fr;}
.sf-brand .sh-brand{color:#fff;}
.sf-brand .sh-mark{background:var(--tape); color:var(--teal-night);}
.sf-brand .sh-name small{color:#9FB5AF;}
.sf-brand p{color:#A9BDB7; margin-top:16px; font-size:.88rem; line-height:1.6; max-width:34ch;}
.sf{line-height:1.5;}
.sf li, .sf p{margin:0;}
.sf .sf-brand p{margin-top:16px;}
.sf .sf-h{margin:0 0 14px;}
.sf-h{font-family:var(--font-display); font-weight:700; font-size:1rem; color:#fff; margin:0 0 14px;}
.sf-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.sf-col a[aria-current="page"]{color:var(--tape);}
.sf-bottom{border-top:1px solid rgba(255,255,255,.1);}
.sf-bottom-inner{max-width:1120px; margin:0 auto; padding:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:.82rem; color:#93AAA4;}
.sf-bottom p{color:inherit; margin:0;}
.sf-legal{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 18px;}
.sf-legal a{color:#C3D3CE;}
.sf-bottom-inner .sf-network{flex-basis:100%; color:#7F9892;}
.sf-network a{color:#C3D3CE;}
@media (max-width: 980px){ .sf-inner, .sf-short .sf-inner{grid-template-columns:1fr 1fr 1fr;} .sf-brand{grid-column:1/-1;} }
@media (max-width: 560px){ .sf-inner, .sf-short .sf-inner{grid-template-columns:1fr 1fr; gap:28px 20px; padding-top:44px;} }

/* ==========================================================================
   Home page redesign (body.home)
   ========================================================================== */
.home .hero-band{position:relative; background-color:var(--teal-deep); color:#fff; overflow:hidden;
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.075) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position:-1px -1px;
  padding-bottom:132px;}
/* measuring tape the calculator sits on */
.home .hero-band::after{content:""; position:absolute; left:0; right:0; bottom:44px; height:30px; background-color:var(--tape);
  background-image:
    linear-gradient(90deg, rgba(10,41,37,.9) 2px, transparent 2px),
    linear-gradient(90deg, rgba(10,41,37,.6) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(10,41,37,.45) 1px, transparent 1px);
  background-size:120px 18px, 60px 12px, 12px 7px; background-repeat:repeat-x; background-position:-1px 0, -1px 0, -1px 0;
  box-shadow:0 -1px 0 rgba(0,0,0,.15), 0 6px 14px -6px rgba(0,0,0,.45);}
.home .hero{text-align:left; padding:64px 20px 0; max-width:920px;}
.home .hero .eyebrow{display:none;}
.home .hero h1{color:#fff; font-weight:800; font-size:clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem); line-height:1.02; letter-spacing:-0.035em; max-width:14ch; margin-bottom:18px;}
.home .hero p.lede{color:#CBDCD7; margin:0 0 26px; max-width:60ch; font-size:1.1rem; line-height:1.6;}
.home .badges{justify-content:flex-start; gap:8px 22px;}
.home .badge{background:none; border:0; padding:0; color:#fff; font-weight:500; font-size:.92rem; border-radius:0;}
.home .badge .tick{color:var(--tape);}

.home #calculator{position:relative; z-index:2; margin-top:-118px; max-width:920px;}
.home .calc-shell{background:var(--card); padding:0; border-radius:20px; border:1px solid rgba(15,58,52,.12); box-shadow:var(--lift); margin-top:0;}
.home .calc-card{border-radius:20px;}
.home .calc-top h2{font-size:1.5rem;}
.home .field label{font-weight:600; color:var(--teal-deep);}
.home .field input, .home .field select{border-radius:10px; border-color:var(--line); background:#FBFCFA;}
.home .field input:focus, .home .field select:focus{border-color:var(--teal); box-shadow:0 0 0 3px rgba(31,111,99,.15); background:#fff;}
.home .btn{border-radius:10px;}
.home .btn-primary{box-shadow:0 8px 18px -8px rgba(232,86,47,.7);}

/* section rhythm */
.home .section{padding:80px 0;}
.home main > section.wrap + .section, .home main > section[id="results-section"] + .section{margin-top:48px;}
.home .section-alt{background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.home .eyebrow{text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:.92rem; font-weight:600; color:var(--teal); margin-bottom:8px; display:flex; align-items:center; gap:10px;}
.home .eyebrow::before{content:""; width:28px; height:8px; flex-shrink:0;
  background-image:linear-gradient(90deg, var(--tape-deep) 1.5px, transparent 1.5px); background-size:7px 8px; background-repeat:repeat-x;}
.home h2{font-weight:700; font-size:clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); color:var(--teal-deep); max-width:24ch;}
.home .section-lede{font-size:1.05rem; max-width:62ch;}

/* quieter surfaces: borders define cards, shadows only where something floats */
.home .results-card, .home .table-card, .home .formula-card, .home .steps-card, .home .tip-card,
.home .faq-item, .home .related-card, .home .use-card, .home .converter-card{box-shadow:none; border:1px solid var(--line);}
.home .results-card{border-top:4px solid var(--teal); border-radius:var(--radius);}
.home .tip-card{border-top:4px solid var(--tape);}
.home .use-card{text-align:left;}
.home .data-table th{text-transform:none; letter-spacing:0; font-family:var(--font-body); font-weight:700; font-size:.86rem;}
.home .data-table tbody tr:nth-child(even) td{background:#FAFBF9;}
.home .faq-item{border-radius:12px; margin-bottom:8px;}
.home .faq-item.open{border-color:var(--teal);}
.home .faq-q{font-size:1rem; padding:18px 20px;}
.home .faq-q .plus{color:var(--teal);}
.home .related-card{border-radius:12px; background:var(--card);}
.home .related-card:hover{border-color:var(--teal); background:#fff;}
.home .related-card .rc-title{font-weight:600;}
.home .related-card-hub{background:var(--teal-deep); border-color:var(--teal-deep);}
.home .related-card-hub .rc-title{color:#fff;}
.home .related-card-hub .rc-desc{color:#C9D8D4;}
.home .related-card-hub:hover{background:var(--teal);}

.home .final-cta{border-radius:24px; text-align:left; padding:56px 40px; position:relative; overflow:hidden;
  background-color:var(--teal-deep);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:24px 24px;}
.home .final-cta h2{color:#fff; max-width:none;}
.home .final-cta p{margin:0 0 22px; max-width:56ch;}
.home .cta-badges{justify-content:flex-start;}
.home .cta-badges span{background:rgba(242,194,48,.14); color:#FBE7A6;}
.home .final-cta .btn-primary{margin:0;}

@media (max-width: 640px){
  .home .hero{padding-top:44px;}
  .home .hero-band{padding-bottom:118px;}
  .home .hero-band::after{bottom:38px; height:24px;}
  .home #calculator{margin-top:-104px;}
  .home .section{padding:60px 0;}
  .home .final-cta{padding:40px 24px;}
}

/* ---------- Inner pages: align their surfaces with the new system ---------- */
.inner .hero h1{font-weight:800; letter-spacing:-0.03em;}
.inner .eyebrow{text-transform:none; letter-spacing:0; font-family:var(--font-body); font-size:.92rem; color:var(--teal);}
.inner .content-card{box-shadow:none; border:1px solid var(--line);}

/* ---------- Sponsored Amazon banner (home pages) ---------- */
.amz-section{padding:56px 0 !important;}
.amz-banner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
  background:#FFF8E1; border:1px solid #EBD48A; border-radius:var(--radius); padding:34px 32px 30px; overflow:hidden;}
.amz-banner::before{content:""; position:absolute; left:0; right:0; top:0; height:10px; background-color:var(--tape);
  background-image:linear-gradient(90deg, rgba(10,41,37,.7) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(10,41,37,.4) 1px, transparent 1px);
  background-size:50px 10px, 10px 5px; background-repeat:repeat-x;}
.amz-copy{flex:1 1 360px; max-width:56ch;}
.amz-label{display:inline-block; font-size:.78rem; font-weight:700; color:#7A5A00; background:rgba(242,194,48,.35); border-radius:999px; padding:3px 10px; margin:0 0 10px !important;}
.home .amz-copy h2{font-size:clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin:0 0 6px; max-width:none;}
.amz-copy p{margin:0; color:var(--ink-soft);}
.amz-btn{flex-shrink:0; display:inline-flex; align-items:center; gap:8px; background:var(--teal-deep); color:#fff !important; font-weight:700; font-size:.98rem;
  padding:14px 24px; border-radius:10px; text-decoration:none !important;}
.amz-btn:hover{background:var(--teal);}
.amz-note{font-size:.82rem; color:var(--ink-soft); margin-top:12px;}
@media (max-width:640px){ .amz-banner{padding:30px 20px 22px;} .amz-btn{width:100%; justify-content:center;} }

/* ---------- Guidelines + sources (home pages) ---------- */
.guidelines-section .table-card{margin:6px 0 18px;}
.guide-note{max-width:70ch; margin:0 0 12px; font-size:.98rem;}
.guide-list{max-width:72ch; margin:4px 0 8px; padding-left:1.2rem; display:flex; flex-direction:column; gap:10px; color:var(--ink-soft);}
.guide-list strong{color:var(--teal-deep);}
.sources-card{margin-top:28px; border-top:1px solid var(--line); padding-top:20px;}
.sources-card h3{font-size:1.05rem; margin:0 0 10px;}
.sources-list{padding-left:1.3rem; display:flex; flex-direction:column; gap:6px; font-size:.88rem; color:var(--ink-soft); max-width:80ch;}
.sources-list a{color:var(--teal); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere;}
.reviewed{font-size:.84rem; color:var(--ink-soft); margin-top:14px;}

/* ---------- Guide pages (inner) ---------- */
.inner .crumbs{font-size:.88rem; color:var(--ink-soft); margin-bottom:10px;}
.inner .crumbs a{color:var(--teal);}
.inner .content-card h3{font-family:var(--font-display); color:var(--teal-deep); font-size:1.05rem; margin:18px 0 6px;}
.inner .content-card ol{padding-left:1.3rem; margin-bottom:12px;}
.inner .content-card ol li{margin-bottom:6px;}
.guide-table{overflow-x:auto; margin:8px 0 20px; border:1px solid var(--line); border-radius:12px; background:var(--card);}
.guide-table table{width:100%; border-collapse:collapse; min-width:420px;}
.guide-table th{text-align:left; font-size:.86rem; font-weight:700; color:var(--teal-deep); background:var(--bg-alt); padding:11px 14px; border-bottom:1px solid var(--line);}
.guide-table td{padding:10px 14px; border-bottom:1px solid var(--line); font-size:.94rem; color:var(--ink);}
.guide-table tr:last-child td{border-bottom:0;}
.guide-table tbody tr:nth-child(even) td{background:#FAFBF9;}
.guide-table tr.highlight-row td{background:rgba(31,111,99,.07); font-weight:700;}
.guide-cta{margin:26px 0; padding:22px; border-radius:14px; background:#FFF8E1; border:1px solid #EBD48A; display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; justify-content:space-between;}
.guide-cta p{margin:0 !important; color:var(--ink);}
.inner .sources-list{font-size:.9rem;}
.inner .reviewed{font-size:.85rem; margin-top:22px;}
.guide-cta .btn-primary{display:inline-block; background:var(--teal-deep); color:#fff !important; font-weight:700; padding:12px 20px; border-radius:10px; text-decoration:none !important; box-shadow:none;}
.guide-cta .btn-primary:hover{background:var(--teal);}