/* ==========================================================================
   The 90-Day Emergency Pantry Blueprint — landing page
   Brand colors and type are the tokens in :root. Change them there.
   ========================================================================== */
:root {
  --cream: #F5F0E6;
  --cream-2: #EDE5D5;
  --paper: #FFFDF8;
  --charcoal: #232323;
  --ink-soft: #4A463F;      /* secondary text, 9:1 on cream */
  --green: #556B4E;         /* preparedness / primary actions */
  --green-dark: #3F5139;
  --green-tint: #E8EEE4;
  --tan: #C9A875;
  --brown: #765A3D;
  --red: #A43C2F;           /* used sparingly */
  --gold: #D3A33B;
  --line: #DCD2BF;

  --head: 'Merriweather', Georgia, 'Times New Roman', serif;
  --body: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  --fs: 1.1875rem;          /* 19px desktop */
  --lh: 1.65;
  --radius: 10px;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body { margin: 0; background: var(--cream); color: var(--charcoal); font-family: var(--body); font-size: var(--fs); line-height: var(--lh); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--head); line-height: 1.25; margin: 0 0 .5em; color: var(--charcoal); }
h1 { font-size: clamp(2rem, 4.4vw, 3.05rem); font-weight: 900; letter-spacing: -.01em; }
h2 { font-size: clamp(1.65rem, 3.2vw, 2.3rem); font-weight: 900; }
h3 { font-size: 1.22rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--green-dark); text-underline-offset: 3px; }
strong { font-weight: 700; }
ul { margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 12px; z-index: 100; background: var(--paper); padding: .6rem 1rem; border: 2px solid var(--charcoal); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 820px; }
.center { text-align: center; }
.section { padding: 4.5rem 0; }
.section-tint { background: var(--cream-2); }
.section-intro { font-size: 1.15em; color: var(--ink-soft); max-width: 46rem; margin-bottom: 2rem; }
.fine { font-size: 1rem; color: var(--ink-soft); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 56px; padding: .85rem 1.6rem; border-radius: 8px; font-family: var(--body); font-weight: 700; font-size: 1.15rem; line-height: 1.25; text-decoration: none; text-align: center; transition: background .15s, transform .15s; }
.btn-buy { background: var(--green); color: #fff; box-shadow: 0 3px 0 var(--green-dark); }
.btn-buy:hover { background: var(--green-dark); }
.btn-buy:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--green-dark); }
.btn-small { min-height: 48px; padding: .5rem 1rem; font-size: 1rem; background: var(--green); color: #fff; }
.btn-small:hover { background: var(--green-dark); }
.btn-wide { width: 100%; }
.cta-inline { text-align: center; margin-top: 2.5rem; }

.micro { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-top: .8rem; font-size: 1rem; color: var(--ink-soft); }
.micro li::before { content: "✓"; color: var(--green); font-weight: 700; margin-right: .35em; }
.micro.center { justify-content: center; }
.micro-line { margin-top: 1rem; font-size: 1rem; color: var(--ink-soft); }

/* ── header ────────────────────────────────────────────────────────────── */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--charcoal); font-family: var(--head); font-weight: 700; font-size: 1.1rem; }
.price-tag { opacity: .9; }

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { padding: 3.5rem 0 4rem; background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
.eyebrow { font-weight: 700; color: var(--brown); letter-spacing: .02em; margin-bottom: .8rem; }
.lede { font-size: 1.25em; color: var(--ink-soft); }
.cta-block { margin: 1.6rem 0 1.4rem; }
.hero-points { list-style: none; display: grid; gap: .35rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.hero-points li { padding-left: 1.7em; position: relative; }
.hero-points li::before { content: ""; position: absolute; left: 0; top: .45em; width: .95em; height: .95em; border-radius: 3px; background: var(--green); box-shadow: inset 0 0 0 3px var(--green-tint); }

.mock { position: relative; margin: 0 auto; max-width: 420px; aspect-ratio: 560 / 725; }
.mock img { border-radius: 6px; box-shadow: 0 18px 40px rgba(35,35,35,.18), 0 2px 6px rgba(35,35,35,.12); }
.mock-cover { position: absolute; inset: 0; width: 100%; z-index: 3; }
.mock-page { position: absolute; width: 86%; z-index: 1; background: #fff; }
.mock-p1 { top: -4%; right: -22%; transform: rotate(7deg); }
.mock-p2 { top: 4%; right: -12%; transform: rotate(3.5deg); z-index: 2; }
.mock-badge { position: absolute; z-index: 4; left: -8%; bottom: 7%; background: var(--paper); border: 2px solid var(--gold); border-radius: 8px; padding: .55rem .9rem; box-shadow: 0 6px 16px rgba(0,0,0,.12); font-size: 1rem; line-height: 1.3; display: grid; }
.mock-badge span { color: var(--ink-soft); }

/* ── cards and grids ───────────────────────────────────────────────────── */
.grid { display: grid; gap: 1.25rem; }
.cards-2 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.1rem; }
.card p:last-child { margin-bottom: 0; }
.problem { border-top: 4px solid var(--tan); }
.feature { position: relative; padding-top: 1.2rem; }
.feature .num { display: inline-block; font-family: var(--head); font-weight: 900; color: var(--green); font-size: 1.05rem; margin-bottom: .3rem; }
.feature h3 { margin-bottom: .4rem; }

.check-list, .x-list { list-style: none; display: grid; gap: .55rem; }
.check-list li, .x-list li { position: relative; padding-left: 2rem; }
.check-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--green); color: #fff; font-size: .85rem; font-weight: 700; display: grid; place-items: center; margin-top: .15rem; }
.x-list li::before { content: "✕"; position: absolute; left: 0; top: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--cream-2); color: var(--brown); border: 1.5px solid var(--tan); font-size: .8rem; font-weight: 700; display: grid; place-items: center; margin-top: .15rem; }
.x-list.inline { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; }

/* before / after */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.compare-col { border-radius: var(--radius); padding: 1.6rem; }
.before { background: var(--paper); border: 1px solid var(--line); }
.after { background: var(--green-tint); border: 2px solid var(--green); }
.tag { display: inline-block; font-family: var(--body); font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 4px; }
.tag-before { background: var(--cream-2); color: var(--brown); }
.tag-after { background: var(--green); color: #fff; }

/* sample pages */
.preview-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.preview-strip figure, .sheet-preview { margin: 0; }
.preview-strip img, .sheet-preview img { border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 8px 22px rgba(35,35,35,.12); background: #fff; }
.preview-strip figcaption, .sheet-preview figcaption { margin-top: .6rem; font-size: 1rem; color: var(--ink-soft); text-align: center; }
.sourcing { margin-top: 2rem; padding: 1rem 1.2rem; background: var(--paper); border-left: 5px solid var(--green); border-radius: 6px; font-size: 1.05rem; }

/* who */
.who-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.who-grid li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; grid-template-columns: 44px 1fr; column-gap: .9rem; align-items: start; }
.who-grid .ic { grid-row: span 2; width: 44px; height: 44px; padding: 8px; border-radius: 50%; background: var(--green-tint); stroke: var(--green-dark); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.who-grid strong { font-family: var(--head); font-size: 1.1rem; }
.who-grid span { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.45; }
.dont-need { margin-top: 2rem; background: var(--paper); border-radius: var(--radius); padding: 1.3rem 1.5rem; border: 1px dashed var(--tan); }
.dont-need h3 { margin-bottom: .7rem; }

/* stages */
.stages { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; counter-reset: st; }
.stage { position: relative; background: var(--paper); border-radius: var(--radius); padding: 1.3rem 1.2rem; border: 1px solid var(--line); display: grid; gap: .3rem; }
.stage:not(:last-child)::after { content: "→"; position: absolute; right: -1rem; top: 1.6rem; transform: translateX(50%); font-size: 1.5rem; color: var(--brown); font-weight: 700; z-index: 2; }
.stage .days { font-family: var(--head); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--green-dark); }
.stage .days small { display: block; font-family: var(--body); font-size: 1rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--ink-soft); margin-top: .2rem; }
.stage strong { font-family: var(--head); font-size: 1.1rem; margin-top: .3rem; }
.stage > span:last-child { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; }
.s1 { border-top: 6px solid var(--tan); } .s2 { border-top: 6px solid var(--gold); } .s3 { border-top: 6px solid #7E9374; } .s4 { border-top: 6px solid var(--green); }
.callout { background: var(--gold); background: #F6E7C1; border-left: 6px solid var(--gold); border-radius: 6px; padding: 1rem 1.3rem; margin-bottom: 1.5rem; }
.callout p { margin: 0; }

/* Frank's note (max three on the page) */
.frank-note { display: flex; gap: 1.1rem; align-items: center; background: var(--green-tint); border-left: 6px solid var(--green); border-radius: 8px; padding: 1.1rem 1.3rem; max-width: 760px; margin-top: 1.5rem; }
.frank-note img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid var(--paper); }
.frank-label { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 1rem; color: var(--green-dark); margin-bottom: .2rem; }
.frank-note p:last-child { margin: 0; font-family: var(--head); font-size: 1.12rem; line-height: 1.5; }

/* budget */
.budget .amount { font-family: var(--head); font-weight: 900; font-size: 1.9rem; color: var(--green-dark); margin-bottom: .2rem; line-height: 1.2; }
.budget .amount small { font-family: var(--body); font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.timeline-wrap { margin-top: 2rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem 1rem; }
.table-title { margin-bottom: .8rem; }
.table-scroll { overflow-x: auto; }
table.timeline { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 1.05rem; }
.timeline th, .timeline td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; }
.timeline thead th { background: var(--green); color: #fff; font-weight: 700; }
.timeline tbody th { font-weight: 700; }
.timeline-wrap .fine { margin-top: 1rem; }

/* rotation */
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.sheet-preview img { max-width: min(400px, 100%); margin: 0 auto; }

/* meals */
.meal { border-left: 5px solid var(--brown); }
.meal-type { display: inline-block; font-size: 1rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brown); margin-bottom: .3rem; }

/* frank */
.frank { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: center; }
.frank-photo { margin: 0; }
.frank-photo img { border-radius: 14px; border: 6px solid var(--paper); box-shadow: 0 10px 28px rgba(35,35,35,.16); }
.frank-photo figcaption { font-size: 1rem; color: var(--ink-soft); margin-top: .6rem; }

/* what you get */
.stack { background: var(--paper); border: 2px solid var(--green); border-radius: 14px; padding: 2rem; }
.stack-main { display: grid; grid-template-columns: 180px 1fr; gap: 1.6rem; align-items: center; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); }
.stack-main img { border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.stack-label, .bonus-label { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: 1rem; color: var(--brown); margin-bottom: .2rem; }
.stack-plus { font-family: var(--head); font-weight: 700; font-size: 1.2rem; margin: 1.4rem 0 1rem; }
.stack-list { list-style: none; columns: 2; column-gap: 2rem; }
.stack-list li { break-inside: avoid; padding: .35rem 0 .35rem 1.9rem; position: relative; border-bottom: 1px dotted var(--line); }
.stack-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 1rem; height: 1rem; border: 2px solid var(--green); border-radius: 3px; background: var(--green-tint); }
.stack .fine { margin: 1.2rem 0 0; }

/* bonuses */
.bonus { border-top: 5px solid var(--gold); }

/* objections */
.obj h3 { font-size: 1.15rem; color: var(--green-dark); }

/* pricing */
.pricing { background: linear-gradient(180deg, var(--cream-2), var(--cream)); }
.price-card { max-width: 560px; margin: 0 auto; background: var(--paper); border: 3px solid var(--green); border-radius: 16px; padding: 2.2rem 2rem 1.6rem; text-align: center; box-shadow: 0 14px 34px rgba(35,35,35,.12); }
.price { display: flex; flex-direction: column; align-items: center; margin: .3rem 0 1.2rem; }
.price > span:first-child { font-family: var(--head); font-weight: 900; font-size: 3.4rem; line-height: 1.1; color: var(--charcoal); }
.price-note { font-size: 1rem; color: var(--ink-soft); }
.price-list { text-align: left; max-width: 360px; margin: 0 auto 1.6rem; }
.checkout-note { margin-top: 1rem; font-size: 1rem; background: #F6E7C1; border-radius: 6px; padding: .6rem .8rem; }
.policy-note { text-align: center; color: var(--ink-soft); margin: 1.5rem 0 0; font-size: 1rem; }

/* faq */
.faq { display: grid; gap: .7rem; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 3rem 1rem 1.2rem; font-weight: 700; font-size: 1.1rem; position: relative; min-height: 48px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: 1.6rem; font-weight: 400; color: var(--green-dark); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 1.2rem 1.1rem; margin: 0; color: var(--ink-soft); }

/* final */
.final { background: var(--green); color: #fff; }
.final h2 { color: #fff; }
.final .lede { color: #EEF2EB; }
.final .btn-buy { background: var(--paper); color: var(--green-dark); box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.final .btn-buy:hover { background: #fff; }
.final .micro-line { color: #EEF2EB; }
.final :focus-visible { outline-color: var(--gold); }

/* footer */
.site-footer { background: var(--charcoal); color: #E6E1D6; padding: 2.5rem 0 6rem; font-size: 1rem; }
.footer-brand { font-family: var(--head); font-weight: 700; font-size: 1.15rem; color: #fff; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-bottom: 1.4rem; }
.footer-links a { color: #fff; display: inline-block; padding: .5rem 0; min-height: 44px; }
.disclaimer { color: #CFC8BA; max-width: 60rem; }
.copyright { color: #CFC8BA; margin: 0; }

/* sticky mobile CTA (appears after the hero, hidden near the price) */
.sticky-cta { display: none; }

/* ── responsive ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-grid, .split, .frank { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .hero-visual { order: 2; padding: 0 12% 0 8%; }
  .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .stages { grid-template-columns: repeat(2, 1fr); }
  .stage:nth-child(2)::after { display: none; }
  .frank-photo { max-width: 420px; }
}
@media (max-width: 640px) {
  :root { --fs: 1.0625rem; }  /* 17px mobile */
  .section { padding: 3rem 0; }
  .hero { padding: 2rem 0 2.5rem; }
  .btn-buy { width: 100%; }
  .cards-2, .cards-3, .cards-4, .compare, .stages, .preview-strip { grid-template-columns: minmax(0, 1fr); }
  .stage:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -1.35rem; transform: translateX(50%); }
  .stages { gap: 1.6rem; }
  .preview-strip { max-width: 360px; margin-left: auto; margin-right: auto; }
  .stack { padding: 1.3rem; }
  .stack-main { grid-template-columns: 1fr; }
  .stack-main img { max-width: 200px; }
  .stack-list { columns: 1; }
  .frank-note { flex-direction: column; align-items: flex-start; }
  .header-inner .brand span { font-size: 1rem; }
  .btn-small .price-tag { display: none; }
  .price-card { padding: 1.6rem 1.1rem 1.2rem; }
  .sticky-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,253,248,.97); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .2s; }
  .sticky-cta.show { transform: translateY(0); }
  .sticky-cta .btn { width: 100%; min-height: 52px; }
  .mock-badge { left: -4%; }
}
.footer-links a.pending { color: #CFC8BA; text-decoration: none; }
.hero { overflow-x: clip; }
@media (max-width: 640px) {
  table.timeline { min-width: 0; font-size: 1rem; }
  .timeline th, .timeline td { padding: .55rem .45rem; }
  .timeline-wrap { padding: 1.1rem .9rem .8rem; }
}