/* ==========================================================================
   Sunday Ledger — sundayledgerbudgets.com
   Single stylesheet. MOBILE FIRST: every base rule is the phone layout;
   media queries are min-width only and add to it. No frameworks, no build.
   Tested at 320 / 375 / 430 px, then 640 / 760 / 880 / 1100.
   ==========================================================================
   PAYHIP LINKS — all product URLs live in ONE place per page: the comment
   block at the top of each .html file, and they are the only external
   <a href> values in the markup. To repoint the shop (e.g. to
   shop.sundayledgerbudgets.com) search the folder for "payhip.com/b/".
   See README.md.
   ========================================================================== */

:root{
  /* light — the Sunday palette */
  --bone:#F3EFE6; --paper:#FCFBF7; --forest:#1E3D34; --pine:#3C6B58;
  --clay:#C26A43; --ink:#1A2420; --slate:#646B64; --line:#E1DBCD;
  /* clay dark enough to use as TEXT — WCAG AA 4.54 */
  --clay-text:#A9552F;
  /* dark — Midnight Pine */
  --pinewood:#131D19; --spruce:#1B2A24; --forest-lift:#5BA081;
  --clay-lift:#DB8A5F; --linen:#ECE8DC; --sage:#8A938B; --bark:#2B3A32;

  --serif:"Instrument Serif",Georgia,serif;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --wrap:1080px;

  /* ---- fluid spacing scale: one system, shrinks with the viewport ---- */
  --pad:clamp(16px, 4.6vw, 28px);     /* page gutter                     */
  --sec:clamp(42px, 9vw, 78px);       /* vertical rhythm between sections */
  --gap:clamp(14px, 3.6vw, 22px);     /* grid gaps                        */
  --cardpad:clamp(17px, 4.4vw, 22px); /* inside cards and panels          */
  --r:13px;                           /* corner radius                    */

  /* sticky-header height — anchor targets clear it via scroll-margin-top.
     Two rows on phones, one row from 560px up. */
  --header-h:112px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  font-weight:400; -webkit-font-smoothing:antialiased;
  text-wrap:pretty; overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
svg{max-width:100%}
a{color:var(--forest); text-decoration:none}
a:hover{color:var(--clay-text)}
:focus-visible{outline:2px solid var(--clay); outline-offset:3px; border-radius:2px}
[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

h1,h2,h3{
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em;
  line-height:1.1; margin:0; overflow-wrap:break-word
}
/* 320→29px · 375→30px · 430→32px · desktop→up to 67px */
h1{font-size:clamp(1.82rem, 7.4vw, 4.2rem)}
/* 375→25px · 430→27px · desktop→up to 46px */
h2{font-size:clamp(1.5rem, 5.6vw, 2.9rem)}
h3{font-size:clamp(1.08rem, 3.4vw, 1.3rem); line-height:1.22}
p{margin:0}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}
section{padding:var(--sec) 0}
.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:0
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.lede{font-size:1rem; color:var(--slate); max-width:46ch}
.italic-clay{font-style:italic; color:var(--clay-text)}

.rule{
  border:0; border-top:1.5px solid var(--line);
  box-shadow:0 3px 0 -1.5px var(--line); margin:0; height:0
}
.rule--forest{border-top-color:var(--forest); box-shadow:0 3px 0 -1.5px var(--forest)}

@media (min-width:600px){
  body{font-size:17px}
  .lede{font-size:1.08rem}
  :root{--r:14px}
}

/* ---------- wordmark ---------- */
.wordmark{
  font-family:var(--serif); font-size:1.18rem; line-height:1;
  color:var(--forest); white-space:nowrap;
  display:inline-flex; align-items:flex-end; min-height:44px;
  border-bottom:1.2px solid var(--forest);
  box-shadow:0 3px 0 -1.7px var(--forest); padding:15px 0 3px
}
.wordmark em{font-style:italic; color:var(--clay-text)}
.wordmark:hover{color:var(--forest)}
@media (min-width:420px){.wordmark{font-size:1.32rem}}
@media (min-width:560px){.wordmark{font-size:1.42rem}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  min-height:50px; padding:13px 22px; border-radius:999px;
  font-family:var(--sans); font-size:.98rem; font-weight:600; letter-spacing:.005em;
  border:1.5px solid transparent; cursor:pointer; text-align:center;
  transition:background .18s ease,color .18s ease,transform .18s ease
}
.btn--clay{background:var(--clay-text); color:#FFF8F2}
.btn--clay:hover{background:#8E4626; color:#FFF8F2; transform:translateY(-1px)}
.btn--forest{background:var(--forest); color:var(--bone)}
.btn--forest:hover{background:#152C26; color:var(--bone)}
.btn--ghost{border-color:var(--forest); color:var(--forest); background:transparent}
.btn--ghost:hover{background:var(--forest); color:var(--bone)}
/* full-width on phones — the natural mobile CTA */
.btn--lg{min-height:56px; padding:16px 24px; font-size:1rem; width:100%}
.btn--sm{min-height:44px; padding:10px 14px; font-size:.82rem}
.btn__arrow{font-family:var(--mono); font-weight:400}
@media (min-width:560px){.btn--sm{min-height:46px; padding:11px 20px; font-size:.92rem}}
@media (min-width:760px){.btn--lg{min-height:60px; padding:18px 34px; font-size:1.06rem}}

/* ---------- header ---------- *
   Phones: wordmark + compact button on row 1, nav on row 2.
   From 560px: one row, nav in the middle.                                  */
.site-header{
  position:sticky; top:0; z-index:20;
  background:rgba(243,239,230,.95); backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--line)
}
.site-header__in{
  max-width:var(--wrap); margin:0 auto; padding:9px var(--pad);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap
}
.site-header .btn{margin-left:auto; flex:0 0 auto}
.site-header__nav{
  order:3; width:100%; display:flex; flex-wrap:wrap; align-items:center;
  gap:0 16px; border-top:1px solid var(--line); margin-top:1px
}
.site-header__nav a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--slate);
  min-height:44px; display:inline-flex; align-items:center
}
.site-header__nav a:hover{color:var(--clay-text)}
@media (min-width:560px){
  :root{--header-h:70px}
  .site-header__in{padding:12px var(--pad); gap:14px}
  .site-header__nav{
    order:0; width:auto; margin-left:auto; margin-top:0;
    border-top:0; gap:0 20px
  }
  .site-header__nav a{font-size:.76rem; letter-spacing:.1em}
}

/* ---------- hero ---------- */
.hero{padding:clamp(26px,7vw,72px) 0 6px}
.hero h1{margin-bottom:14px; max-width:15ch}
.hero .lede{margin-bottom:22px; font-size:1.02rem; color:var(--ink); opacity:.8}
.hero .btn{width:100%}
.badges{
  display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none
}
.badges li{
  font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.04em;
  color:var(--forest); background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:7px 11px; white-space:nowrap
}
.hero__shot{
  margin-top:26px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:0 20px 44px -32px rgba(30,61,52,.5)
}
@media (min-width:600px){
  .hero .lede{font-size:1.12rem}
  .badges li{font-size:.72rem; padding:7px 13px}
  .hero .btn{width:auto; min-width:min(100%,300px)}
}
@media (min-width:880px){
  .hero{padding:72px 0 20px}
  .hero__in{display:grid; grid-template-columns:1fr 1.06fr; gap:clamp(32px,4.5vw,56px); align-items:center}
  .hero__shot{margin-top:0}
}

/* ---------- problem ---------- */
.problem{padding:calc(var(--sec) * .85) 0}
.problem ul{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px}
.problem li{
  font-family:var(--serif); font-size:clamp(1.28rem, 5vw, 1.95rem); line-height:1.24;
  color:var(--slate); padding-left:26px; position:relative
}
.problem li::before{
  content:""; position:absolute; left:0; top:.62em; width:15px; height:1.5px; background:var(--line)
}
.problem li:last-child{color:var(--forest)}
.problem li:last-child::before{background:var(--clay); box-shadow:0 3px 0 -.5px var(--clay)}
@media (min-width:760px){.problem li{padding-left:34px}.problem li::before{width:18px}}

/* ---------- section heads ---------- */
.section-head{margin-bottom:22px}
.section-head h2{margin:9px 0 10px}
@media (min-width:760px){.section-head{margin-bottom:30px}}

/* ---------- product grid ---------- */
.grid{display:grid; gap:var(--gap); grid-template-columns:1fr}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease
}
.card:hover{box-shadow:0 18px 34px -28px rgba(30,61,52,.55); transform:translateY(-2px)}
.card__img{background:var(--bone); border-bottom:1px solid var(--line)}
.card__img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.card__body{padding:var(--cardpad); display:flex; flex-direction:column; gap:9px; flex:1}
.card__tag{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--clay-text)
}
.card h3{color:var(--forest)}
.card p{font-size:1rem; color:var(--slate)}
.card__fact{
  font-family:var(--mono); font-size:.78rem; font-weight:500; color:var(--pine);
  border-top:1.5px solid var(--line); box-shadow:0 3px 0 -1.5px var(--line);
  padding-top:12px; margin-top:auto; line-height:1.5
}
.card .btn{margin-top:13px; width:100%}
.card--feature{border-color:var(--forest)}
.card--feature .card__tag{color:var(--forest)}
@media (min-width:640px){.card p{font-size:.97rem}.card__fact{font-size:.8rem}}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.steps li{padding-top:15px; border-top:1.5px solid var(--line); box-shadow:0 3px 0 -1.5px var(--line)}
.steps b{
  display:block; font-family:var(--mono); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; color:var(--clay-text); margin-bottom:8px
}
.steps h3{margin-bottom:5px; font-family:var(--sans); font-size:1.04rem; font-weight:700; color:var(--forest)}
.steps p{color:var(--slate); font-size:1rem}
@media (min-width:760px){
  .steps{grid-template-columns:repeat(3,1fr); gap:clamp(22px,3.4vw,34px)}
  .steps p{font-size:.97rem}
}

/* ---------- dark band ---------- */
.dark{background:var(--pinewood); color:var(--linen); padding:var(--sec) 0}
.dark h2{color:var(--linen)}
.dark h2 em{font-style:italic; color:var(--clay-lift)}
.dark .eyebrow{color:var(--sage)}
.dark p{color:var(--sage)}
.dark .rule{border-top-color:var(--bark); box-shadow:0 3px 0 -1.5px var(--bark)}
.dark__shot{
  margin-top:24px; border:1px solid var(--bark); border-radius:var(--r);
  overflow:hidden; background:var(--spruce)
}
.dark__list{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px}
.dark__list li{
  font-family:var(--mono); font-size:.8rem; color:var(--linen);
  padding-left:20px; position:relative; line-height:1.5
}
.dark__list li::before{
  content:""; position:absolute; left:0; top:.5em; width:9px; height:9px;
  border-radius:2px; background:var(--forest-lift)
}
@media (min-width:600px){.dark__list li{font-size:.84rem; padding-left:22px}}
@media (min-width:880px){
  .dark__in{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(32px,4.5vw,56px); align-items:center}
  .dark__shot{margin-top:0}
}

/* ---------- trust ---------- */
.trust{display:grid; gap:var(--gap); grid-template-columns:1fr; margin-top:24px}
@media (min-width:600px){.trust{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.trust{grid-template-columns:repeat(4,1fr)}}
.trust article{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--cardpad)
}
.trust svg{display:block; margin-bottom:12px}
.trust h3{font-family:var(--sans); font-size:1.02rem; font-weight:700; color:var(--forest); margin-bottom:6px}
.trust p{color:var(--slate); font-size:1rem}
.trust article.is-wide{border-color:var(--clay)}
.trust article.is-wide h3{color:var(--clay-text)}
@media (min-width:600px){.trust p{font-size:.95rem}}
@media (min-width:980px){.trust article.is-wide{grid-column:span 2}}

/* ---------- about ---------- */
.about{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.about__in{display:grid; gap:22px}
.about p{color:var(--ink); opacity:.84; margin-bottom:13px}
.about p:last-child{margin-bottom:0}
.monogram{
  width:80px; height:80px; border-radius:18px; background:var(--forest);
  display:grid; place-items:center; flex:0 0 auto
}
.monogram span{
  font-family:var(--serif); font-size:1.6rem; line-height:.94; color:var(--bone);
  text-align:center; padding-bottom:5px;
  border-bottom:1.4px solid var(--clay); box-shadow:0 3px 0 -1.6px var(--clay)
}
@media (min-width:600px){
  .monogram{width:104px; height:104px; border-radius:22px}
  .monogram span{font-size:2.05rem; padding-bottom:6px}
}
@media (min-width:760px){
  .about__in{grid-template-columns:auto 1fr; gap:clamp(28px,4vw,44px); align-items:start}
}

/* ---------- FAQ ---------- */
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; list-style:none; padding:16px 36px 16px 0; position:relative;
  font-weight:600; font-size:1rem; line-height:1.35; color:var(--forest);
  min-height:52px; display:flex; align-items:center
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:1.35rem; font-weight:400; color:var(--clay-text); line-height:1
}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--clay-text)}
.faq details > p{padding:0 0 20px; color:var(--slate); max-width:60ch}
@media (min-width:760px){
  .faq summary{padding:20px 34px 20px 0; font-size:1.02rem}
}

/* ---------- email ---------- */
.signup{
  background:var(--forest); color:var(--bone);
  border-radius:var(--r); padding:var(--cardpad) var(--cardpad) calc(var(--cardpad) + 6px)
}
.signup h2{color:var(--bone); margin-bottom:9px}
.signup p{color:#BFCFC7; font-size:1rem}
.signup form{display:grid; gap:11px; margin-top:20px; max-width:460px}
.signup input[type=email]{
  min-height:52px; padding:13px 18px; border-radius:999px;
  border:1.5px solid rgba(243,239,230,.28); background:rgba(252,251,247,.06);
  color:var(--bone); font-family:var(--sans); font-size:16px; width:100%
}
.signup input[type=email]::placeholder{color:#94A79E}
.signup input[type=email]:focus{border-color:var(--clay-lift); background:rgba(252,251,247,.1); outline:none}
.signup .btn{min-height:52px}
.form-note{font-family:var(--mono); font-size:.72rem; color:#94A79E; margin-top:2px; line-height:1.5}
.form-msg{
  font-family:var(--mono); font-size:.78rem; border-radius:10px;
  padding:11px 14px; margin-top:12px; line-height:1.5
}
.form-msg--ok{background:rgba(91,160,129,.16); color:#A9D7C0; border:1px solid rgba(91,160,129,.4)}
.form-msg--err{background:rgba(219,138,95,.14); color:#EEB394; border:1px solid rgba(219,138,95,.42)}
.is-hidden{display:none}
@media (min-width:640px){
  .signup{padding:clamp(28px,4vw,44px) clamp(24px,4vw,40px)}
  .signup form{grid-template-columns:1fr auto; align-items:center}
  .signup .form-note{grid-column:1/-1}
}

/* ---------- closing ---------- */
.closing{text-align:center; padding:calc(var(--sec) * 1.05) 0}
.closing h2{margin-bottom:20px}
.closing .btn{width:100%}
.closing__sig{
  font-family:var(--serif); font-style:italic; font-size:1.12rem;
  color:var(--slate); margin-top:22px
}
@media (min-width:600px){
  .closing .btn{width:auto; min-width:300px}
  .closing__sig{font-size:1.2rem}
}

/* ==========================================================================
   PRODUCT PAGES
   ========================================================================== */
.crumbs{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; line-height:2;
  text-transform:uppercase; color:var(--slate); padding:16px 0 0
}
.crumbs a{color:var(--slate)}
.crumbs a:hover{color:var(--clay-text)}
.crumbs span{margin:0 .4em; opacity:.6}
@media (min-width:600px){.crumbs{font-size:.72rem; letter-spacing:.08em; padding:22px 0 0}}

.phero{padding:20px 0 6px}
.phero h1{margin:10px 0 14px}
.phero .lede{font-size:1.02rem; color:var(--ink); opacity:.82; margin-bottom:22px}
.phero .btn{width:100%}
.phero__shot{
  margin-top:24px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:0 20px 44px -32px rgba(30,61,52,.5)
}
@media (min-width:600px){
  .phero .lede{font-size:1.1rem}
  .phero .btn{width:auto; min-width:min(100%,300px)}
}
@media (min-width:880px){
  .phero{padding:34px 0 16px}
  .phero__in{display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(32px,4.4vw,52px); align-items:center}
  .phero__shot{margin-top:0}
}

/* real figures strip — one column at 320, two from 380, four from 760 */
.figs{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin-top:14px
}
.figs div{background:var(--paper); padding:14px var(--cardpad)}
.figs dt{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--slate); margin-bottom:6px
}
.figs dd{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(1.02rem, 4.2vw, 1.24rem); font-weight:500;
  color:var(--forest); margin:0; line-height:1.3
}
.figs dd.is-clay{color:var(--clay-text)}
.figs-note{font-family:var(--mono); font-size:.7rem; line-height:1.65; color:var(--slate); margin-top:12px}
@media (min-width:380px){.figs{grid-template-columns:1fr 1fr}}
@media (min-width:760px){.figs{grid-template-columns:repeat(4,1fr)}.figs div{padding:18px}}

/* gallery */
.gallery{display:grid; gap:var(--gap); margin-top:24px}
@media (min-width:700px){.gallery{grid-template-columns:1fr 1fr}}
.gallery figure{
  margin:0; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden
}
.gallery img{width:100%}
.gallery figcaption{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; color:var(--slate);
  padding:11px 14px; border-top:1px solid var(--line)
}
@media (min-width:600px){.gallery figcaption{font-size:.72rem; padding:12px 16px}}

/* included list */
.two-col{display:grid; gap:32px}
@media (min-width:860px){.two-col{grid-template-columns:1fr 1fr; gap:clamp(34px,4.4vw,52px)}}
.ticks{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:11px}
.ticks li{position:relative; padding-left:24px; color:var(--ink); opacity:.88; font-size:1rem}
.ticks li::before{
  content:""; position:absolute; left:0; top:.44em; width:10px; height:10px;
  border-radius:2px; background:var(--pine)
}
.ticks--clay li::before{background:var(--clay)}
@media (min-width:600px){.ticks li{padding-left:28px}.ticks li::before{width:11px; height:11px}}
.tabstrip{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0; padding:0; list-style:none}
.tabstrip li{
  font-family:var(--mono); font-size:.72rem; color:var(--forest);
  background:var(--paper); border:1px solid var(--line);
  border-radius:6px; padding:8px 11px
}

/* star feature */
.star{
  background:var(--paper); border:1px solid var(--forest);
  border-radius:var(--r); padding:var(--cardpad); margin-top:6px
}
.star h2{font-size:clamp(1.42rem, 5.2vw, 2.3rem); margin:9px 0 13px}
.star p{color:var(--ink); opacity:.86}
.star p + p{margin-top:12px}
@media (min-width:700px){.star{padding:clamp(28px,3.4vw,40px)}}

/* compatibility */
.compat{display:grid; gap:13px; margin-top:22px}
@media (min-width:700px){.compat{grid-template-columns:repeat(3,1fr); gap:18px}}
.compat div{
  background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:16px var(--cardpad)
}
.compat b{display:block; color:var(--forest); font-weight:700; margin-bottom:4px}
.compat span{color:var(--slate); font-size:.96rem}

/* big CTA band */
.buy{background:var(--forest); color:var(--bone); padding:var(--sec) 0; text-align:center}
.buy h2{color:var(--bone); margin-bottom:11px}
.buy p{color:#BFCFC7; max-width:44ch; margin:0 auto 22px}
.buy .btn{width:100%}
.buy__meta{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.04em; line-height:1.7;
  color:#94A79E; margin-top:18px
}
@media (min-width:600px){.buy .btn{width:auto; min-width:320px}}

/* cross links */
.cross{display:grid; gap:12px; margin-top:22px}
@media (min-width:640px){.cross{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.cross{grid-template-columns:repeat(3,1fr)}}
.cross a{
  display:block; background:var(--paper); border:1px solid var(--line);
  border-radius:12px; padding:15px var(--cardpad); min-height:44px
}
.cross a:hover{border-color:var(--forest)}
.cross b{display:block; font-family:var(--serif); font-size:1.14rem; font-weight:400; color:var(--forest); margin-bottom:3px}
.cross span{font-size:.95rem; color:var(--slate)}

/* ==========================================================================
   WHICH ONE + COMPARISON
   ========================================================================== */
.pick{
  list-style:none; margin:20px 0 0; padding:0; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden
}
.pick li{
  background:var(--paper); padding:12px var(--cardpad) 14px;
  display:flex; flex-direction:column; gap:2px
}
.pick b{
  font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--slate)
}
.pick .pick__go{
  font-weight:600; font-size:1rem; color:var(--forest);
  display:inline-flex; align-items:center; gap:.45em; min-height:44px
}
.pick .pick__go:hover{color:var(--clay-text)}
.pick .pick__go span{font-family:var(--mono); color:var(--clay-text)}
@media (min-width:700px){
  .pick li{
    flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:6px 16px; padding:10px var(--cardpad)
  }
  .pick b{flex:1 1 16ch; font-size:.8rem}
}

/* --- comparison: STACKED CARDS on phones, real table from 760px --- */
.cmp{margin-top:22px}
.cmp table{width:100%; border-collapse:collapse}
.cmp caption{
  display:block; width:100%;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); text-align:left; padding:0 0 10px
}
.cmp thead{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.cmp table,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block; width:100%}
.cmp tbody tr{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:4px 0 12px; margin-bottom:12px
}
.cmp tbody tr:last-child{margin-bottom:0}
.cmp tbody tr.is-flag{border-color:var(--forest); background:#F9F7F1}
.cmp tbody th{
  font-family:var(--serif); font-weight:400; font-size:1.2rem; color:var(--forest);
  line-height:1.2; text-align:left; padding:4px var(--cardpad) 10px;
  border-bottom:1px solid var(--line)
}
.cmp tbody th a{color:var(--forest); display:flex; align-items:center; min-height:44px}
.cmp tbody th a:hover{color:var(--clay-text)}
.cmp td{padding:11px var(--cardpad) 0; text-align:left; font-size:.98rem}
.cmp td::before{
  content:attr(data-label); display:block;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--slate); margin-bottom:3px
}
.cmp td.is-num{
  font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); font-size:.92rem
}
.cmp td.is-num br{display:none}
.cmp-note{
  margin-top:16px; font-size:.98rem; color:var(--slate);
  border-top:1.5px solid var(--line); box-shadow:0 3px 0 -1.5px var(--line); padding-top:14px
}
@media (min-width:760px){
  .cmp{
    margin-top:28px; border:1px solid var(--line);
    border-radius:var(--r); overflow:hidden; background:var(--paper)
  }
  .cmp table{font-size:.95rem}
  .cmp caption{padding:18px 20px 0; display:table-caption}
  .cmp thead{position:static; width:auto; height:auto; clip-path:none; display:table-header-group}
  .cmp table{display:table}
  .cmp tbody{display:table-row-group}
  .cmp tr{display:table-row}
  .cmp th,.cmp td{
    display:table-cell; width:auto; text-align:left; vertical-align:top;
    padding:14px 16px; border-bottom:1px solid var(--line)
  }
  .cmp thead th{
    font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.12em;
    text-transform:uppercase; color:var(--slate); background:var(--bone); white-space:nowrap
  }
  .cmp tbody tr{
    background:transparent; border:0; border-radius:0; padding:0; margin:0
  }
  .cmp tbody tr.is-flag{background:#F7F4EC; border:0}
  .cmp tbody th{font-size:1.1rem; padding:14px 16px}
  .cmp tbody th a{display:inline-block; min-height:44px; padding-top:2px}
  .cmp td::before{display:none}
  .cmp td.is-num{white-space:nowrap; font-size:.95rem}
  .cmp td.is-num br{display:inline}
  .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
  .cmp-note{font-size:.95rem}
}

/* ==========================================================================
   404
   ========================================================================== */
.oops{display:grid; place-items:center; text-align:center; padding:var(--sec) 0}
.oops h1{margin-bottom:14px}
.oops .num-big{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.2em;
  color:var(--clay-text); margin-bottom:16px
}
.oops p{color:var(--slate); max-width:44ch; margin:0 auto 26px}
.oops .btn{width:100%}
@media (min-width:600px){.oops{min-height:56vh}.oops .btn{width:auto; min-width:320px}}

/* ---------- footer ---------- */
.site-footer{
  background:var(--pinewood); color:var(--sage);
  padding:calc(var(--sec) * .8) 0 30px; font-size:.94rem
}
.site-footer a{color:var(--linen)}
.site-footer a:hover{color:var(--clay-lift)}
.site-footer .wordmark{color:var(--linen); border-bottom-color:var(--linen); box-shadow:0 3px 0 -1.7px var(--linen)}
.site-footer .wordmark em{color:var(--clay-lift)}
.footer__tag{font-family:var(--serif); font-style:italic; font-size:1.04rem; color:var(--sage); margin-top:12px}
.footer__cols{display:grid; gap:24px; margin-top:30px}
@media (min-width:700px){.footer__cols{grid-template-columns:1.2fr 1fr 1fr; gap:30px; margin-top:36px}}
.footer__cols h3{
  font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--sage); margin-bottom:8px
}
.footer__cols ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.footer__cols li a{display:inline-flex; align-items:center; min-height:44px}
.pin-link{display:inline-flex; align-items:center; gap:9px; min-height:44px}
.footer__base{
  margin-top:30px; padding-top:18px; border-top:1px solid var(--bark);
  display:flex; flex-direction:column; gap:7px;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.03em; line-height:1.6; color:var(--sage)
}
@media (min-width:700px){
  .footer__base{flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 22px; margin-top:38px}
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */
.skip-link{
  position:absolute; left:12px; top:-72px; z-index:60;
  background:var(--forest); color:var(--bone);
  font-family:var(--sans); font-size:.95rem; font-weight:600;
  padding:14px 22px; border-radius:0 0 10px 10px;
  border:1.5px solid var(--clay-text); border-top:0;
  min-height:44px; display:inline-flex; align-items:center;
  transition:top .15s ease
}
.skip-link:focus{top:0; color:var(--bone)}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}