/* Household Ready — design system
   Palette sampled directly from the Field Guide PDF so site and product match.
   Sizing is deliberately generous: this audience skews older and often reads on a phone. */

:root{
  color-scheme: light;

  --paper:      #F4EDE2;   /* guide background */
  --paper-2:    #FBF7F0;   /* raised cards */
  --card:       #E4D8C4;   /* guide stat tiles */
  --line:       #D9CDB8;
  --line-soft:  #E8DECB;

  --ink:        #1E2B25;   /* 12.5:1 on paper */
  --ink-2:      #4C5A52;   /* 6.2:1 on paper  */
  --brick:      #A74631;   /* 4.9:1 on paper, 5.8:1 behind white */
  --brick-dk:   #8A3826;
  --green:      #2F5D46;

  --radius:     10px;
  --radius-lg:  16px;
  --shadow:     0 1px 2px rgba(30,43,37,.06), 0 6px 20px rgba(30,43,37,.07);
  --shadow-lg:  0 2px 4px rgba(30,43,37,.07), 0 16px 44px rgba(30,43,37,.11);

  --wrap:       68rem;
  --measure:    36rem;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Zilla Slab", "Roboto Slab", Georgia, "Iowan Old Style", "Times New Roman", serif;

  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.125rem;          /* 18px */
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:48em){ body{ font-size:1.1875rem } }  /* 19px */

img,svg{ max-width:100%; height:auto; display:block }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; text-wrap:balance }
h1{ font-size:clamp(2rem, 1.35rem + 3vw, 3.35rem) }
h2{ font-size:clamp(1.55rem, 1.2rem + 1.6vw, 2.35rem) }
h3{ font-size:clamp(1.2rem, 1.08rem + .5vw, 1.4rem) }
p{ margin:0 0 1em }
p,li{ text-wrap:pretty }

a{ color:var(--brick); text-underline-offset:.18em; text-decoration-thickness:.08em }
a:hover{ color:var(--brick-dk) }

:focus-visible{ outline:3px solid var(--brick); outline-offset:3px; border-radius:4px }

.skiplink{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.85rem 1.25rem; font-weight:700; text-decoration:none;
}
.skiplink:focus{ left:.5rem; top:.5rem }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:1.25rem }
@media (min-width:48em){ .wrap{ padding-inline:2rem } }

.measure{ max-width:var(--measure) }
.center{ text-align:center }
.center .measure{ margin-inline:auto }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(244,237,226,.94);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; gap:1rem; min-height:64px }
.brand{ display:flex; align-items:center; gap:.55rem; color:var(--ink); text-decoration:none; font-weight:700; flex:0 0 auto }
.brand-mark{ color:var(--brick); flex:0 0 auto }
.brand-name{ font-family:var(--serif); font-size:1.15rem; letter-spacing:-.01em; white-space:nowrap }
.site-nav{ margin-left:auto; display:none }
@media (min-width:60em){ .site-nav{ display:block } }
.site-nav ul{ display:flex; gap:.35rem; list-style:none; margin:0; padding:0 }
.site-nav a{
  display:block; padding:.6rem .85rem; border-radius:var(--radius);
  color:var(--ink); text-decoration:none; font-weight:600; font-size:1.0625rem;
}
.site-nav a:hover{ background:var(--card) }
.site-nav a[aria-current="page"]{ color:var(--brick); box-shadow:inset 0 -3px 0 var(--brick) }
.header-cta{ margin-left:auto }
@media (min-width:60em){ .header-cta{ margin-left:1rem } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.15rem; text-align:center; text-decoration:none; font-weight:700;
  border-radius:var(--radius); border:2px solid transparent; cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active{ transform:translateY(1px) }
.btn-lg{ min-height:60px; padding:.9rem 1.9rem; font-size:1.15rem; width:100% }
@media (min-width:36em){ .btn-lg{ width:auto; flex:0 0 auto } }
.btn-md{ min-height:54px; padding:.8rem 1.5rem; font-size:1.05rem }
.btn-sm{ min-height:46px; padding:.55rem 1.1rem; font-size:1rem; flex-direction:row }

.btn-buy{ background:var(--brick); color:#fff }
.btn-buy:hover{ background:var(--brick-dk); color:#fff }
.btn-sub{ font-size:.8125rem; font-weight:600; opacity:.88; letter-spacing:.01em; white-space:nowrap }
.btn-sm .btn-sub{ display:none }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); white-space:nowrap }
.btn-ghost:hover{ background:var(--ink); color:var(--paper) }

.cta-group{ display:flex; flex-direction:column; gap:.85rem; margin:1.75rem 0 1.1rem }
@media (min-width:36em){ .cta-group{ flex-direction:row; align-items:stretch } }
.center .cta-group{ justify-content:center }

.trustrow{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem 1.15rem; font-size:.98rem; color:var(--ink-2); font-weight:600 }
.center .trustrow{ justify-content:center }
.trustrow li{ display:flex; align-items:center; gap:.4rem }
.trustrow li::before{
  content:""; flex:0 0 auto; width:1.05em; height:1.05em; background:var(--green);
  -webkit-mask:var(--tick) center/contain no-repeat; mask:var(--tick) center/contain no-repeat;
}

/* ---------- sections ---------- */
section{ padding-block:clamp(3rem, 2rem + 4vw, 5.5rem) }
.sec-alt{ background:var(--paper-2); border-block:1px solid var(--line-soft) }
.sec-ink{ background:var(--ink); color:var(--paper) }
.sec-ink h2{ color:var(--paper) }
.sec-ink a{ color:#F0B9A6 }
.eyebrow{
  font-family:var(--sans); font-size:.8125rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--brick); margin:0 0 .75rem;
}
.sec-ink .eyebrow{ color:#E9A48F }
.lead{ font-size:1.1875rem; color:var(--ink-2); max-width:var(--measure) }
@media (min-width:48em){ .lead{ font-size:1.3125rem } }
.center .lead{ margin-inline:auto }
.sec-ink .lead{ color:#C9D3CC }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(2.25rem, 1.5rem + 4vw, 4.5rem) }
.hero-grid{ display:grid; gap:2.5rem }
@media (min-width:62em){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:4rem; align-items:center } }
.hero h1{ margin-bottom:.4em }
.hero .lead{ font-size:1.1875rem }
@media (min-width:48em){ .hero .lead{ font-size:1.375rem } }
.hero-fig{ position:relative; margin:0 }
.hero-fig img{
  width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border:1px solid var(--line); background:#fff;
}
.pricetag{
  display:inline-flex; align-items:baseline; gap:.6rem; margin:.4rem 0 0;
  font-family:var(--serif); font-weight:700;
}
.pricetag b{ font-size:2.35rem; color:var(--brick); line-height:1 }
.pricetag span{ font-family:var(--sans); font-size:1rem; font-weight:600; color:var(--ink-2) }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; list-style:none; margin:0; padding:0 }
@media (min-width:48em){ .stats{ grid-template-columns:repeat(5,1fr) } }
.stats li{ background:var(--card); border-radius:var(--radius); padding:1.15rem 1rem }
.stats b{ display:block; font-family:var(--serif); font-size:2.1rem; line-height:1; color:var(--brick) }
.stats span{ display:block; margin-top:.35rem; font-size:.8125rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-2) }

/* ---------- generic card grid ---------- */
.grid{ display:grid; gap:1.25rem; margin-top:2.5rem }
.grid-2{ grid-template-columns:1fr }
.grid-3{ grid-template-columns:1fr }
@media (min-width:44em){ .grid-2{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:56em){ .grid-3{ grid-template-columns:repeat(3,1fr) } }

.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.6rem 1.5rem; box-shadow:var(--shadow);
}
.sec-alt .card{ background:var(--paper) }
.card h3{ margin-bottom:.4em }
.card p:last-child{ margin-bottom:0 }
.card .num{
  font-family:var(--serif); font-size:1rem; font-weight:700; color:#fff; background:var(--brick);
  width:2.1rem; height:2.1rem; border-radius:50%; display:grid; place-items:center; margin-bottom:.9rem;
}

/* ---------- method steps ---------- */
.steps{ list-style:none; margin:2.5rem 0 0; padding:0; display:grid; gap:1rem }
@media (min-width:56em){ .steps{ grid-template-columns:repeat(5,1fr) } }
.steps li{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.4rem 1.25rem }
.sec-alt .steps li{ background:var(--paper) }
.steps .rn{ font-family:var(--serif); font-weight:700; color:var(--brick); font-size:1.05rem; letter-spacing:.04em }
.steps h3{ margin:.35rem 0 .35rem; font-size:1.25rem }
.steps p{ margin:0; font-size:1rem; color:var(--ink-2) }

/* ---------- previews ---------- */
.previews{ display:grid; gap:1.5rem; margin-top:2.5rem; grid-template-columns:1fr }
@media (min-width:40em){ .previews{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:60em){ .previews{ grid-template-columns:repeat(3,1fr) } }
.previews figure{ margin:0 }
.previews img{
  width:100%; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); background:#fff;
}
.previews figcaption{ margin-top:.7rem; font-size:1rem; font-weight:600; color:var(--ink-2) }

/* ---------- sample action ---------- */
.sample{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; margin-top:2.5rem }
.sample-hd{ background:var(--ink); color:var(--paper); padding:1.15rem 1.5rem; display:flex; flex-wrap:wrap; gap:.35rem 1rem; align-items:baseline }
.sample-hd .tag{ font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#E9A48F }
.sample-hd h3{ margin:0; color:var(--paper); font-size:1.35rem; width:100% }
.sample-bd{ padding:1.5rem; display:grid; gap:1.35rem }
@media (min-width:52em){ .sample-bd{ grid-template-columns:repeat(2,1fr); padding:2rem } }
.sample-bd .full{ grid-column:1/-1 }
.sample dt{ font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--brick); margin-bottom:.4rem }
.sample dd{ margin:0; font-size:1.0625rem }
.sample ol{ margin:0; padding-left:1.25rem }
.sample li{ margin-bottom:.35rem }
.sample .evidence{ background:var(--card); border-radius:var(--radius); padding:1rem 1.15rem; font-size:1rem }

/* ---------- checklists ---------- */
.checklist{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.7rem }
@media (min-width:44em){ .checklist.two{ grid-template-columns:repeat(2,1fr); column-gap:2rem } }
.checklist li{ display:flex; gap:.7rem; align-items:flex-start; font-size:1.0625rem }
.checklist li::before{
  content:""; flex:0 0 auto; margin-top:.32em; width:1.05em; height:1.05em; background:var(--green);
  -webkit-mask:var(--tick) center/contain no-repeat; mask:var(--tick) center/contain no-repeat;
}
.checklist.no li::before{ background:var(--brick); -webkit-mask-image:var(--cross); mask-image:var(--cross) }

/* index of all 47 actions */
.actionlist{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:.1rem; counter-reset:a }
@media (min-width:44em){ .actionlist{ grid-template-columns:repeat(2,1fr); column-gap:2.5rem } }
.actionlist li{ display:flex; gap:.85rem; padding:.55rem 0; border-bottom:1px solid var(--line-soft); font-size:1.0625rem }
.actionlist li::before{ counter-increment:a; content:counter(a,decimal-leading-zero); font-family:var(--serif); font-weight:700; color:var(--brick); flex:0 0 2ch }

/* ---------- sources ---------- */
.sources{ list-style:none; margin:2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem }
.sources li{
  background:var(--card); border-radius:999px; padding:.5rem 1.05rem;
  font-size:.95rem; font-weight:700; color:var(--ink);
}
.sec-ink .sources li{ background:#2C3A33; color:var(--paper) }

/* ---------- FAQ ---------- */
.faq{ margin-top:2.25rem; border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  cursor:pointer; list-style:none; padding:1.2rem .5rem 1.2rem 0; min-height:60px;
  font-family:var(--serif); font-weight:700; font-size:1.15rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; flex:0 0 auto; width:1.15rem; height:1.15rem;
  border-right:3px solid var(--brick); border-bottom:3px solid var(--brick);
  transform:rotate(45deg) translate(-25%,-25%); transition:transform .2s ease; margin-right:.4rem;
}
.faq details[open] summary::after{ transform:rotate(225deg) translate(-25%,-25%) }
.faq .answer{ padding:0 0 1.35rem; max-width:var(--measure) }
.faq .answer p:last-child{ margin-bottom:0 }

/* ---------- forms ---------- */
.form{ max-width:34rem; margin-top:2rem }
.field{ margin-bottom:1.35rem }
.field label{ display:block; font-weight:700; margin-bottom:.4rem }
.field .hint{ font-size:.95rem; color:var(--ink-2); margin:.3rem 0 0 }
.field input,.field textarea,.field select{
  width:100%; font:inherit; color:var(--ink); background:var(--paper-2);
  border:2px solid var(--line); border-radius:var(--radius); padding:.85rem 1rem; min-height:56px;
}
.field textarea{ min-height:11rem; resize:vertical }
.field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--brick); outline:none; box-shadow:0 0 0 3px rgba(167,70,49,.2) }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:var(--brick) }
.field .err{ color:var(--brick); font-weight:700; font-size:.98rem; margin:.35rem 0 0 }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.formnote{ font-size:1rem; color:var(--ink-2) }
.status{ margin-top:1.25rem; padding:1.1rem 1.25rem; border-radius:var(--radius); font-weight:600 }
.status.ok{ background:#E3EFE6; border:1px solid #B6D4BF; color:#204731 }
.status.bad{ background:#F6E2DC; border:1px solid #E0B6A9; color:#7A2E1D }

/* ---------- guarantee panel ---------- */
.panel{
  background:var(--card); border-radius:var(--radius-lg); padding:1.75rem 1.6rem;
  display:grid; gap:1rem; align-items:start; margin-top:2.5rem;
}
@media (min-width:44em){ .panel{ grid-template-columns:auto 1fr; gap:1.5rem; padding:2rem } }
.panel .seal{ width:3.5rem; height:3.5rem; color:var(--brick) }
.panel h3{ margin-bottom:.35em }
.panel p:last-child{ margin-bottom:0 }

/* ---------- buy box ---------- */
.buybox{
  background:var(--paper-2); border:2px solid var(--ink); border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem; box-shadow:var(--shadow-lg);
}
@media (min-width:44em){ .buybox{ padding:2.25rem 2rem } }
.buybox h2{ margin-bottom:.25em }
.buybox .price{ display:flex; align-items:baseline; gap:.7rem; margin:.75rem 0 1.25rem }
.buybox .price b{ font-family:var(--serif); font-size:3rem; line-height:1; color:var(--brick) }
.buybox .price span{ font-weight:600; color:var(--ink-2) }
.buybox .checklist{ margin-top:0 }

/* ---------- prose (legal + long copy) ---------- */
.prose{ max-width:42rem }
.prose h2{ margin-top:2.25em; font-size:clamp(1.35rem,1.15rem + .8vw,1.7rem) }
.prose h3{ margin-top:1.75em }
.prose ul,.prose ol{ padding-left:1.35rem; margin:0 0 1.15em }
.prose li{ margin-bottom:.5em }
.prose .updated{ color:var(--ink-2); font-size:1rem; font-weight:600 }
.prose table{ width:100%; border-collapse:collapse; margin:0 0 1.5em; font-size:1rem }
.prose th,.prose td{ text-align:left; padding:.7rem .6rem; border-bottom:1px solid var(--line) }
.prose th{ font-weight:800; font-size:.8125rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2) }
.tablescroll{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#C9D3CC; padding-block:3rem 2.25rem }
.site-footer a{ color:#F0B9A6 }
.foot-grid{ display:grid; gap:2rem; margin-bottom:2.25rem }
@media (min-width:48em){ .foot-grid{ grid-template-columns:2fr 1fr 1fr } }
.site-footer .brand-name{ color:var(--paper); display:block; margin-bottom:.6rem; font-size:1.2rem }
.foot-brand p{ max-width:26rem; font-size:1rem; margin:0 }
.site-footer h2{ font-family:var(--sans); font-size:.8125rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--paper); margin:0 0 .8rem }
.site-footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem }
.site-footer li a{ display:block; padding:.4rem 0; font-size:1.0625rem }
.foot-note{ border-top:1px solid #33413A; padding-top:1.5rem; font-size:.95rem; max-width:52rem; color:#AFBBB3 }
.foot-note strong{ color:var(--paper) }
.foot-legal{ font-size:.95rem; margin:0; color:#95A29A }

/* ---------- sticky mobile buy bar ---------- */
.stickybuy{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--paper-2); border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(30,43,37,.12);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
}
@media (min-width:60em){ .stickybuy{ display:none } }
.stickybuy-in{ display:flex; align-items:center; gap:1rem; max-width:var(--wrap); margin-inline:auto }
.stickybuy-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0 }
.stickybuy-txt strong{ font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.stickybuy-txt span{ font-size:.9rem; color:var(--ink-2); font-weight:600 }
.stickybuy .btn{ margin-left:auto; flex:0 0 auto }
@media (max-width:59.99em){ body.has-stickybuy .site-footer{ padding-bottom:5.5rem } }

@media print{
  .site-header,.stickybuy,.site-footer,.cta-group{ display:none }
  body{ background:#fff; font-size:11pt }
}

/* ---------- utilities ----------
   The site ships a strict Content-Security-Policy with no 'unsafe-inline',
   so every one-off adjustment lives here as a class rather than a style
   attribute. Keep this list short and boring. */
.band{ padding-block:2.5rem }
.eyebrow.tight{ margin:.15rem 0 .7rem }
.eyebrow.snug{ margin-bottom:.35rem }
.pricetag.center{ justify-content:center }
.panel-wrap{ max-width:44rem; margin-inline:auto; text-align:left }
.wide-table{ max-width:none }
.opt{ font-weight:400 }
.mt-1{ margin-top:1rem }
.mt-2{ margin-top:2rem }
.mt-3{ margin-top:2.5rem }
.m-0{ margin:0 }
.show{ display:block }