/* GroceryClip — clipped-coupon meets modern web aesthetic.
   Deep green + bright yellow palette. Slab-serif headlines, sans-serif body. */

:root{
  --green-900:#063f1e;
  --green-800:#0a5e2c;
  --green-700:#0a8a3a;
  --green-600:#15a04a;
  --green-200:#bfe9cc;
  --green-50:#eaf7ef;
  --yellow-500:#ffd60a;
  --yellow-400:#ffe24a;
  --yellow-200:#fff3a8;
  --yellow-50:#fffbe6;
  --cream:#fffaee;
  --paper:#fffefa;
  --ink:#101610;
  --ink-2:#3a3f3a;
  --muted:#737973;
  --line:#e7e1cf;
  --line-2:#d4cdb6;
  --shadow-sm:0 1px 2px rgba(8,40,20,.06), 0 2px 8px rgba(8,40,20,.04);
  --shadow-md:0 4px 16px rgba(8,40,20,.08), 0 12px 32px rgba(8,40,20,.05);
  --radius:14px;
  --radius-sm:8px;
  --max:1240px;
  --serif:'Roboto Slab', Georgia, 'Times New Roman', serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.55;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--green-800);text-decoration:none}
a:hover{color:var(--green-700);text-decoration:underline}

h1,h2,h3,h4,h5{font-family:var(--serif);font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:0 0 .6em}
h1{font-size:clamp(2rem, 4vw, 3rem);line-height:1.05}
h2{font-size:clamp(1.45rem, 2.4vw, 1.875rem);line-height:1.15}
h3{font-size:1.18rem;line-height:1.25}
h4{font-size:.95rem;font-family:var(--sans);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
p{margin:0 0 1em;color:var(--ink-2)}
strong{color:var(--ink);font-weight:700}
em{font-style:italic}
code{font-family:var(--mono);font-size:.92em;background:var(--yellow-50);padding:1px 6px;border-radius:4px;color:var(--green-900);border:1px solid var(--line)}

.container{max-width:var(--max);margin:0 auto;padding:0 24px}

/* ============ HEADER ============ */
.site-header{
  background:var(--paper);
  border-bottom:2px solid var(--green-700);
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 24px;flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;font-size:1.4rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-flex;align-items:center}
.brand-text{display:inline-block}
.brand-accent{color:var(--green-700)}

.primary-nav{display:flex;gap:6px;flex-wrap:wrap}
.primary-nav a{
  padding:8px 14px;
  font-weight:600;
  font-size:.93rem;
  color:var(--ink);
  border-radius:999px;
  transition:background .15s, color .15s;
}
.primary-nav a:hover{background:var(--green-50);color:var(--green-800);text-decoration:none}

.cta-pill{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--yellow-500);color:var(--ink);
  font-weight:700;font-size:.92rem;
  padding:10px 18px;border-radius:999px;
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .12s, box-shadow .12s;
}
.cta-pill:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);text-decoration:none;color:var(--ink)}

.trust-strip{
  display:flex;gap:22px;font-size:.8rem;color:var(--ink-2);
  padding:9px 24px;border-top:1px dashed var(--line-2);
  flex-wrap:wrap;
}
.trust-strip span{font-weight:500}

/* ============ LAYOUT ============ */
.layout{
  display:grid;grid-template-columns:1fr 320px;gap:36px;
  padding:32px 24px 56px;
}
.content{min-width:0}
.sidebar{display:flex;flex-direction:column;gap:18px}

@media (max-width:960px){
  .layout{grid-template-columns:1fr}
  .header-row{padding:12px 16px}
  .container{padding:0 16px}
  .primary-nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;padding:4px 0}
  .primary-nav a{flex-shrink:0}
}

/* ============ HERO ============ */
.hero{
  display:grid;grid-template-columns:1.2fr .9fr;gap:40px;align-items:center;
  background:
    radial-gradient(circle at 90% 10%, var(--yellow-200) 0%, transparent 45%),
    radial-gradient(circle at 5% 100%, var(--green-50) 0%, transparent 45%),
    var(--paper);
  border:2px solid var(--ink);
  border-radius:var(--radius);
  padding:48px 44px;
  margin-bottom:32px;
  position:relative;
  box-shadow:6px 6px 0 var(--ink);
}
.hero::before{
  content:"COUPON";
  position:absolute;top:18px;right:24px;
  font-family:var(--serif);font-weight:900;
  font-size:.7rem;letter-spacing:.4em;color:var(--green-700);
  border:2px solid var(--green-700);
  padding:5px 10px;border-radius:4px;
  background:var(--yellow-50);
  transform:rotate(6deg);
}
.eyebrow{
  font-family:var(--mono);text-transform:uppercase;
  font-size:.78rem;letter-spacing:.2em;color:var(--green-700);
  font-weight:700;margin:0 0 14px;
}
.hero h1{font-size:clamp(2.2rem, 4.4vw, 3.6rem);margin-bottom:18px}
.hero-sub{font-size:1.13rem;color:var(--ink-2);max-width:36em;margin-bottom:24px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.hero-trust{list-style:none;padding:0;margin:0;display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2)}
.hero-image{position:relative}
.hero-image img{width:100%;height:auto;display:block;border-radius:var(--radius);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--green-700)}
.hero-badge{
  position:absolute;bottom:14px;left:14px;
  background:var(--ink);color:var(--yellow-500);
  font-weight:700;font-size:.83rem;
  padding:8px 14px;border-radius:999px;
  border:2px solid var(--yellow-500);
}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:32px 24px}
  .hero::before{top:10px;right:14px}
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--green-700);color:#fff;
  font-weight:700;font-size:.95rem;
  padding:11px 22px;border-radius:8px;
  border:2px solid var(--green-900);
  transition:background .15s, transform .12s;
  text-decoration:none;
}
.btn:hover{background:var(--green-800);text-decoration:none;color:#fff;transform:translateY(-1px)}
.btn-primary{background:var(--green-700)}
.btn-secondary{background:var(--yellow-500);color:var(--ink);border-color:var(--ink)}
.btn-secondary:hover{background:var(--yellow-400);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--yellow-500)}
.btn-lg{padding:14px 28px;font-size:1rem}

/* ============ SECTIONS ============ */
.section{margin-bottom:42px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-more{font-weight:600;font-size:.95rem;color:var(--green-800)}
.section-foot{margin-top:14px;text-align:center}

/* ============ CARDS / GRIDS ============ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px,1fr));gap:18px}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px,1fr));gap:12px}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px,1fr));gap:12px}

.deal-card{
  position:relative;
  background:var(--paper);
  border:2px dashed var(--green-700);
  border-radius:var(--radius);
  padding:20px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .12s, box-shadow .12s;
  text-decoration:none;color:var(--ink);
  overflow:hidden;
}
.deal-card::before, .deal-card::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--cream);border:2px dashed var(--green-700);
  top:50%;transform:translateY(-50%);
}
.deal-card::before{left:-8px}
.deal-card::after{right:-8px}
.deal-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none;color:var(--ink)}
.deal-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.deal-store{font-size:.8rem;font-weight:700;color:var(--green-800);text-transform:uppercase;letter-spacing:.05em}
.deal-pct{
  background:var(--yellow-500);color:var(--ink);
  font-family:var(--serif);font-weight:900;
  font-size:1rem;padding:3px 10px;border-radius:6px;
  border:1.5px solid var(--ink);
}
.deal-title{font-family:var(--serif);font-weight:700;font-size:1.05rem;line-height:1.25;margin:4px 0;color:var(--ink)}
.deal-meta{font-size:.82rem;color:var(--muted);margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:8px}
.deal-code{font-family:var(--mono);background:var(--green-50);padding:2px 7px;border-radius:4px;color:var(--green-900);font-weight:600;font-size:.78rem;border:1px solid var(--green-200)}

.store-tile{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  transition:border-color .15s, transform .12s;text-decoration:none;color:var(--ink);
}
.store-tile:hover{border-color:var(--green-700);transform:translateY(-2px);text-decoration:none;color:var(--ink)}
.store-tile-name{font-weight:700;font-size:.97rem}
.store-tile-meta{font-size:.78rem;color:var(--muted)}
.printable-tile{border-color:var(--yellow-400);background:var(--yellow-50)}
.printable-tile:hover{border-color:var(--green-700)}

.cat-tile{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  transition:border-color .15s, transform .12s;text-decoration:none;color:var(--ink);
}
.cat-tile:hover{border-color:var(--green-700);transform:translateY(-2px);text-decoration:none}
.cat-icon{font-size:1.5rem;line-height:1}
.cat-name{font-weight:700;font-size:.97rem}
.cat-meta{font-size:.78rem;color:var(--muted)}

/* ============ PAGE HEAD / CRUMBS ============ */
.crumbs{font-size:.85rem;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--green-800)}
.crumbs span{color:var(--ink)}

.page-head{
  background:var(--paper);
  border:2px solid var(--ink);
  border-left:8px solid var(--green-700);
  border-radius:var(--radius);
  padding:28px 30px;margin-bottom:30px;
  box-shadow:4px 4px 0 var(--ink);
}
.page-head h1{margin-bottom:8px}
.page-sub{color:var(--ink-2);font-size:1.05rem;margin-bottom:16px}
.page-meta-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--green-50);color:var(--green-900);
  border:1px solid var(--green-200);
  padding:5px 11px;border-radius:999px;
  font-size:.83rem;font-weight:600;
}
.chip.primary{background:var(--yellow-500);color:var(--ink);border-color:var(--ink)}

.matchup-head{border-left-color:var(--yellow-500)}

/* ============ MATCHUP TABLE ============ */
.matchup-legend{font-size:.92rem;color:var(--ink-2);margin-bottom:14px}
.matchup-wrap{overflow-x:auto;border:2px solid var(--ink);border-radius:var(--radius);background:var(--paper);box-shadow:4px 4px 0 var(--ink)}
.matchup-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:680px}
.matchup-table th{
  background:var(--green-800);color:#fff;
  text-align:left;padding:11px 12px;
  font-family:var(--sans);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}
.matchup-table th.num{text-align:right}
.matchup-table td{padding:11px 12px;border-top:1px dashed var(--line-2);vertical-align:top}
.matchup-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.matchup-table td.muted{color:var(--muted);font-size:.84rem}
.matchup-table .strike{text-decoration:line-through;color:var(--muted);font-weight:400}
.matchup-table .coupon-cell{color:var(--green-700);font-weight:700}
.matchup-table .final-cell{background:var(--yellow-50);color:var(--green-900);font-weight:800}
.matchup-table .pct-cell{color:var(--ink);font-weight:700}
.matchup-table tr.row-best{background:var(--yellow-50)}
.matchup-table tr.row-best td:first-child::before{content:"★ ";color:var(--yellow-500);font-weight:900}
.matchup-table tfoot td{background:var(--green-50);border-top:2px solid var(--green-700);font-weight:700}

/* ============ COUPON CARDS (printable hub) ============ */
.coupon-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px,1fr));gap:16px}
.coupon-card{
  position:relative;
  background:var(--paper);
  border:2px dashed var(--ink);
  border-radius:var(--radius);
  padding:18px;
  display:flex;flex-direction:column;gap:10px;
  text-decoration:none;color:var(--ink);
  transition:transform .12s, box-shadow .12s;
}
.coupon-card::before, .coupon-card::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  background:var(--cream);border:2px dashed var(--ink);top:50%;transform:translateY(-50%);
}
.coupon-card::before{left:-8px}.coupon-card::after{right:-8px}
.coupon-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);text-decoration:none;color:var(--ink)}
.coupon-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.coupon-card-pct{
  background:var(--yellow-500);color:var(--ink);
  font-family:var(--serif);font-weight:900;font-size:1rem;
  padding:3px 10px;border-radius:6px;border:1.5px solid var(--ink);
}
.coupon-card-dept{font-size:.82rem;color:var(--green-800);font-weight:600}
.coupon-card-body{display:flex;flex-direction:column;gap:2px;font-size:.96rem}
.coupon-card-body .muted{color:var(--muted);font-size:.83rem}
.coupon-card-stack{font-size:.85rem;color:var(--ink-2);padding-top:6px;border-top:1px dashed var(--line-2)}
.coupon-card-stack .strike{text-decoration:line-through;color:var(--muted)}
.coupon-card-foot{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px dashed var(--line-2);font-size:.92rem}
.coupon-card-clip{color:var(--green-800);font-weight:700;font-size:.82rem}

/* ============ EXPLAINER (long content) ============ */
.explainer{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:28px 32px;
}
.explainer h2{margin-bottom:16px}
.explainer p{font-size:1rem;line-height:1.7;color:var(--ink-2);margin-bottom:1.1em}
.explainer p:last-child{margin-bottom:0}
.pbn-inline{color:var(--green-700);text-decoration:underline;text-decoration-style:dotted;font-style:italic}

/* ============ DEAL DETAIL ============ */
.deal-detail .deal-section{
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:24px 28px;margin-bottom:18px;
}
.savings-tip{background:var(--yellow-50);border-color:var(--yellow-400);border-left:6px solid var(--yellow-500)}
.stack-line{font-family:var(--serif);font-weight:700;color:var(--green-900);font-size:1.05rem;margin-top:10px}
.redeem-steps{padding-left:22px;margin:0;line-height:1.7}
.redeem-steps li{margin-bottom:8px;color:var(--ink-2)}
.deal-dl{display:grid;grid-template-columns:140px 1fr;gap:8px 18px;margin:0;font-size:.94rem}
.deal-dl dt{font-weight:700;color:var(--ink)}
.deal-dl dd{margin:0;color:var(--ink-2)}

.link-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.link-list li{padding:10px 14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm)}

/* ============ SIDEBAR ============ */
.sidebar-card{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px;
}
.sidebar-card h3{margin:0 0 12px;font-size:1.02rem}
.sidebar-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.sidebar-list li a{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:6px;
  font-size:.93rem;color:var(--ink);font-weight:500;
}
.sidebar-list li a:hover{background:var(--green-50);text-decoration:none}
.sidebar-list .dot{display:inline-flex;width:24px;text-align:center}
.sidebar-list.compact li a{padding:4px 6px;font-size:.9rem}
.sidebar-more{display:block;margin-top:10px;font-size:.85rem;font-weight:600;color:var(--green-800)}

.cta-card{background:linear-gradient(135deg, var(--yellow-50), var(--paper));border:2px solid var(--yellow-500)}
.cta-card h3{color:var(--green-900)}
.cta-card .btn{margin-top:8px}
.claim-card{background:var(--ink);color:var(--yellow-50);border-color:var(--ink)}
.claim-card h3{color:var(--yellow-500)}
.claim-card p{color:#d8d2bd}
.claim-card .btn{background:var(--yellow-500);color:var(--ink);border-color:var(--yellow-500)}

.pbn-card{background:var(--green-50);border-color:var(--green-200)}
.pbn-card h3{color:var(--green-900)}
.pbn-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.pbn-list li a,.pbn-list li .pbn-title{display:block;font-weight:700;color:var(--green-900);font-size:.93rem;line-height:1.3}
.pbn-list .pbn-blurb{display:block;font-size:.8rem;color:var(--ink-2);margin-top:2px;font-weight:400}

/* ============ LEAD FORM ============ */
.lead-form{
  background:var(--ink);color:var(--cream);
  border-radius:var(--radius);padding:22px;
  border:2px solid var(--ink);
  position:relative;
}
.lead-form::before{
  content:"📬";position:absolute;top:-14px;left:18px;
  background:var(--yellow-500);font-size:1.1rem;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--ink);
}
.lead-form h3{color:var(--cream);margin-bottom:8px;font-size:1.08rem}
.lead-form p{color:#d8d2bd;font-size:.9rem;margin-bottom:14px}
.lead-form input{
  width:100%;padding:11px 14px;margin-bottom:8px;
  border:1.5px solid #2c322c;background:#1c221c;color:var(--cream);
  border-radius:8px;font-size:.92rem;font-family:var(--sans);
}
.lead-form input::placeholder{color:#7a7e76}
.lead-form .btn{width:100%;justify-content:center;background:var(--yellow-500);color:var(--ink);border-color:var(--yellow-500)}
.lead-form .btn:hover{background:var(--yellow-400)}
.lead-fine{font-size:.78rem;color:#9c9e96;margin-top:8px}

/* ============ TESTIMONIALS ============ */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px,1fr));gap:18px}
.testimonial{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-left:5px solid var(--yellow-500);
  border-radius:var(--radius);padding:20px 22px;margin:0;
}
.testimonial blockquote{margin:0 0 12px;font-family:var(--serif);font-size:1.02rem;line-height:1.45;color:var(--ink);font-style:italic}
.testimonial blockquote::before{content:"\201C";font-size:2.5rem;color:var(--green-700);line-height:.4;display:block;font-family:var(--serif)}
.testimonial figcaption{font-size:.85rem;color:var(--muted);display:flex;flex-direction:column}
.testimonial figcaption strong{color:var(--ink)}

/* ============ FOOTER ============ */
.site-footer{
  background:var(--green-900);color:#d8eedd;
  margin-top:40px;padding:48px 0 20px;
}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4, 1fr);gap:32px;padding-bottom:28px;border-bottom:1px solid #1a4d2e}
.footer-grid h4{color:var(--yellow-400);font-size:.78rem;letter-spacing:.1em;margin-bottom:10px}
.footer-grid ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.footer-grid a{color:#cbe6d3;font-size:.9rem}
.footer-grid a:hover{color:var(--yellow-400);text-decoration:none}
.brand-footer{font-size:1.15rem;color:#fff8d6}
.brand-footer .brand-accent{color:var(--yellow-400)}
.footer-tagline{color:#a8c9b1;font-size:.88rem;margin-top:10px;line-height:1.5}
.footer-resources{margin-top:18px}
.footer-resources h4{color:var(--yellow-400);font-size:.72rem;margin-bottom:8px}
.pbn-footer-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px;font-size:.85rem}
.footer-fine{padding-top:18px;font-size:.8rem;color:#7fa089}
.footer-fine p{color:#7fa089;margin:0}

@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}
@media (max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}

/* ============ HOME-SPECIFIC ============ */
.featured-banner{
  background:var(--ink);color:var(--cream);
  border-radius:var(--radius);padding:18px 22px;
  margin-bottom:24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  border:2px solid var(--yellow-500);
  flex-wrap:wrap;
}
.featured-banner strong{color:var(--yellow-500);font-family:var(--serif);font-size:1.1rem}
.featured-banner .featured-banner-label{font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--yellow-400)}
.featured-banner .btn{background:var(--yellow-500);color:var(--ink);border-color:var(--yellow-500)}

.chain-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:20px;scrollbar-width:thin}
.chain-tabs a{
  flex-shrink:0;
  padding:9px 16px;border-radius:999px;
  background:var(--paper);border:1.5px solid var(--line);
  font-weight:600;font-size:.9rem;color:var(--ink);text-decoration:none;
  white-space:nowrap;
}
.chain-tabs a:hover{border-color:var(--green-700);background:var(--green-50);text-decoration:none}
.chain-tabs a.active{background:var(--green-700);color:#fff;border-color:var(--green-700)}

.printable-hero{
  background:linear-gradient(135deg, var(--yellow-50), var(--paper));
  border:2px dashed var(--ink);border-radius:var(--radius);
  padding:28px 30px;margin-bottom:24px;position:relative;
}
.printable-hero h2{margin-bottom:8px}
.printable-hero .print-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.printable-hero .print-chip{
  padding:8px 14px;background:var(--paper);
  border:1.5px solid var(--ink);border-radius:8px;
  font-weight:600;font-size:.88rem;color:var(--ink);text-decoration:none;
}
.printable-hero .print-chip:hover{background:var(--yellow-500);text-decoration:none}

/* utility */
.muted{color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* ============ NEW PAGE TYPES (brand/state/save/app) ============ */
.page-hero{
  background:linear-gradient(135deg, var(--green-50, #e8f5ed), var(--paper));
  border:2px solid var(--ink);border-radius:var(--radius);
  padding:34px 32px;margin-bottom:28px;position:relative;
}
.page-hero .eyebrow{
  display:inline-block;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--green-700);background:var(--yellow-500);
  padding:5px 12px;border-radius:4px;margin-bottom:14px;font-weight:700;
}
.page-hero h1{margin:0 0 12px;font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.1;letter-spacing:-.01em}
.page-hero .lede{font-size:1.05rem;line-height:1.65;color:var(--ink);max-width:62ch;margin:0}

.brand-hero{
  background:linear-gradient(135deg, var(--yellow-50), var(--paper));
  border:2px dashed var(--ink);border-radius:var(--radius);
  padding:32px;margin-bottom:24px;
}
.brand-hero .eyebrow{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--ink);background:var(--yellow-500);padding:5px 12px;border-radius:4px;margin-bottom:14px;font-weight:700;text-transform:uppercase}
.brand-hero h1{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.4rem);margin:0 0 12px;letter-spacing:-.01em}
.brand-hero .lede{font-size:1.05rem;line-height:1.65;max-width:62ch;margin:0 0 18px}
.brand-meta{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:18px;font-size:.92rem}
.brand-meta li{color:var(--muted)}
.brand-meta strong{color:var(--ink);font-weight:700}

.long-para{font-size:1rem;line-height:1.78;color:#1f2a26;margin:0 0 22px;max-width:72ch}
.long-para a.pbn-inline{color:var(--green-700);font-weight:600;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.long-para a.pbn-inline:hover{color:var(--ink);background:var(--yellow-50)}

.brand-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:14px;margin:18px 0}
.brand-grid.full{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
.brand-pill{
  display:flex;flex-direction:column;gap:4px;
  padding:16px 18px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;
  text-decoration:none;color:var(--ink);
  transition:all .15s ease;
}
.brand-pill:hover{border-color:var(--green-700);transform:translateY(-2px);box-shadow:0 6px 16px rgba(10,138,58,.12);text-decoration:none;background:linear-gradient(135deg,var(--yellow-50),var(--paper))}
.brand-pill strong{font-family:var(--serif);font-size:1.05rem}
.brand-pill span{color:var(--muted);font-size:.85rem}
.brand-pill em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--green-700);text-transform:uppercase;letter-spacing:.1em;margin-top:4px}

.state-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:12px;margin:18px 0}
.state-pill{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 16px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:8px;
  text-decoration:none;color:var(--ink);transition:all .15s ease;
}
.state-pill:hover{border-color:var(--green-700);background:var(--green-50, #e8f5ed);text-decoration:none;transform:translateY(-1px)}
.state-pill strong{font-family:var(--serif);font-size:1rem}
.state-pill span{color:var(--muted);font-size:.8rem;font-family:var(--mono);letter-spacing:.06em}

.store-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:12px;margin:18px 0}
.store-grid.compact{grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:10px}
.store-grid.full{grid-template-columns:repeat(auto-fill, minmax(240px, 1fr))}
.store-pill{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 16px;background:var(--paper);
  border:1.5px solid var(--line);border-radius:8px;
  text-decoration:none;color:var(--ink);transition:all .15s ease;
}
.store-pill:hover{border-color:var(--green-700);transform:translateY(-1px);text-decoration:none;background:var(--green-50,#e8f5ed)}
.store-pill strong{font-family:var(--serif);font-size:.98rem}
.store-pill span{color:var(--muted);font-size:.82rem;line-height:1.35}

.cross-link, .brand-stores, .brand-products, .related-brands, .state-stores, .weekly-quick{
  background:var(--paper);
  border:1.5px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin:24px 0;
}
.cross-link h2, .brand-stores h2, .brand-products h2, .related-brands h2, .state-stores h2, .weekly-quick h2{
  font-family:var(--serif);margin:0 0 14px;font-size:1.3rem;
  padding-bottom:10px;border-bottom:2px dashed var(--line);
}
.link-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px 20px}
.link-list li{padding:6px 0;border-bottom:1px dotted var(--line)}
.link-list a{color:var(--green-700);font-weight:500;text-decoration:none}
.link-list a:hover{text-decoration:underline}

.breadcrumb{font-size:.86rem;color:var(--muted);margin-bottom:14px;font-family:var(--mono);letter-spacing:.02em}
.breadcrumb a{color:var(--green-700);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--ink);font-weight:600}

@media (max-width:680px){
  .page-hero, .brand-hero{padding:22px 18px}
  .page-hero h1, .brand-hero h1{font-size:1.55rem}
  .page-hero .lede, .brand-hero .lede{font-size:.98rem}
  .brand-meta{flex-direction:column;gap:6px}
  .long-para{font-size:.98rem;line-height:1.7}
  .brand-grid, .brand-grid.full, .state-grid, .store-grid, .store-grid.compact, .store-grid.full{grid-template-columns:1fr 1fr;gap:8px}
  .brand-pill, .state-pill, .store-pill{padding:11px 12px}
  .brand-pill strong, .state-pill strong, .store-pill strong{font-size:.92rem}
  .link-list{grid-template-columns:1fr}
  .cross-link, .brand-stores, .brand-products, .related-brands, .state-stores, .weekly-quick{padding:18px 16px}
  .primary-nav{gap:6px;font-size:.85rem;flex-wrap:wrap;justify-content:center}
  .header-row{flex-wrap:wrap;gap:10px}
  .trust-strip{font-size:.72rem;gap:10px;flex-wrap:wrap;justify-content:center}
}
@media (max-width:420px){
  .brand-grid, .brand-grid.full, .state-grid, .store-grid, .store-grid.compact, .store-grid.full{grid-template-columns:1fr}
}