/* Static SEO pages (build-pages.mjs). Notebook theme (29 Sep 2026), matching the app (styles.css):
   cream graph paper, mint green for savings, peach/butter accents, Fredoka headings, Nunito text,
   rounded cards with ink outlines and small offset shadows, pill buttons, tag badges. */
:root{--ink:#1f2b2d;--muted:#56625f;--mint:#0b7a57;--deep:#085f44;--pale:#dcf4e9;--peach:#ffb59e;--butter:#ffe07a;--paper:#fbf6ec;--white:#fff;--line:#e6dccb;--body:'Nunito',system-ui,sans-serif;--display:'Fredoka','Nunito',system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:17px/1.65 var(--body);-webkit-font-smoothing:antialiased;background-color:var(--paper);background-image:linear-gradient(#efe4d0 1px,transparent 1px),linear-gradient(90deg,#efe4d0 1px,transparent 1px);background-size:32px 32px}
a{color:var(--mint);font-weight:700;text-underline-offset:3px}a:hover{color:var(--deep)}
a:focus-visible{outline:3px solid var(--butter);outline-offset:3px}
h1,h2,h3{font-family:var(--display);line-height:1.12;color:var(--ink);letter-spacing:-.4px}
h1{font-size:clamp(34px,5vw,54px);font-weight:700;margin:10px 0 14px}
h2{font-size:clamp(24px,3.2vw,30px);font-weight:600;margin:40px 0 14px}
h3{font-size:21px;font-weight:600;margin:24px 0 8px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.small,small{color:var(--muted);font-size:14px}
td small{display:block}
.top{background:#fffdf8;border-bottom:2px solid var(--ink)}
.top-inner{display:flex;align-items:center;gap:24px;min-height:74px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px}
.logo{display:inline-flex;align-items:center;gap:9px;font:700 28px/1.1 var(--display);letter-spacing:-.5px;color:var(--ink);text-decoration:none}
.logo img{width:36px;height:36px}.logo span{color:var(--mint);margin-left:-7px}
.top nav{display:flex;gap:6px;flex-wrap:wrap}
.top nav a{color:var(--ink);font:600 16px var(--display);text-decoration:none;padding:6px 14px;border:2px solid transparent;border-radius:999px}.top nav a:hover{background:var(--pale)}
.crumbs{font-size:14px;color:var(--muted);margin-top:24px}.crumbs a{color:var(--muted);font-weight:600}
.lede{font-size:19px;max-width:800px}
.saving-banner,.stale-note,.family-note{background:var(--white);border:2px solid var(--ink);border-radius:18px;box-shadow:4px 4px 0 var(--ink);padding:14px 18px;max-width:800px}
.saving-banner{background:var(--butter)}.family-note{background:#ffe9df}
.model-top{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px;align-items:start;margin-top:26px}
.hero-img{margin:0;background:var(--white);border:2px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:contain}
.facts{background:var(--pale);border:2px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:18px 24px}
.facts h2{margin-top:0}
.facts dl{margin:0;display:grid;gap:8px}.facts dl div{display:grid;grid-template-columns:120px 1fr;gap:12px}
.facts dt{font-weight:800}.facts dd{margin:0}
.table-scroll{overflow-x:auto;background:var(--white);border:2px solid var(--ink);border-radius:20px;box-shadow:5px 5px 0 var(--ink)}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:16px}
th{text-align:left;font:800 13px var(--body);letter-spacing:.8px;text-transform:uppercase;color:var(--ink);background:var(--pale);padding:12px 14px;border-bottom:2px solid var(--ink)}
td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
tbody tr:first-child td{border-top:0}
td.price{font:700 21px var(--display);white-space:nowrap}td.price small{font:400 14px var(--body);white-space:normal}
td.price a{color:var(--ink)}td.price a:hover{color:var(--mint)}
.save{color:var(--mint)!important;font-weight:800}
small.same{color:var(--mint);font-weight:700}small.near{color:#8a5200}
.button{display:inline-block;background:var(--mint);color:var(--white);border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);padding:9px 20px;font:800 16px var(--body);text-decoration:none;margin:6px 10px 6px 0}
.button:hover{background:var(--deep);color:var(--white)}.button.ghost{background:var(--white);color:var(--ink)}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.card{background:var(--white);border:2px solid var(--ink);border-radius:22px;box-shadow:4px 4px 0 var(--ink);padding:12px;display:flex;flex-direction:column;gap:4px;transition:transform .12s,box-shadow .12s}
.card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.cards .card:nth-child(4n+1) img,.cards .card:nth-child(4n+1) .no-photo{background:#dcf4e9}.cards .card:nth-child(4n+2) img,.cards .card:nth-child(4n+2) .no-photo{background:#ffe9df}.cards .card:nth-child(4n+3) img,.cards .card:nth-child(4n+3) .no-photo{background:#fff4c7}.cards .card:nth-child(4n) img,.cards .card:nth-child(4n) .no-photo{background:#e4ecfb}
.card a{text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.card img,.no-photo{width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;border-radius:14px}
.no-photo{display:block}
.card-name{font:600 20px/1.15 var(--display);letter-spacing:-.3px}
.card a:hover .card-name{color:var(--mint)}
.card-price{font:700 21px var(--display)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{background:var(--white);border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);padding:5px 15px;text-decoration:none;color:var(--ink);font:700 15px var(--body)}
.chips a:hover{background:var(--pale)}
.pager{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}.pager a,.pager span{min-width:44px;text-align:center;padding:6px 12px;border:2px solid var(--ink);border-radius:999px;background:var(--white);text-decoration:none;color:var(--ink);font:700 16px var(--body)}.pager span{background:var(--mint);color:var(--white)}
.prose,.related,.before,.notes,.guide-list{background:var(--white);border:2px solid var(--ink);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:8px 28px 14px;max-width:820px}
.prose{padding-top:14px}.prose h2:first-child{margin-top:10px}.prose p,.prose li{margin:0 0 12px}.prose table{min-width:0}.prose a{font-weight:700}
.prose aside.note{background:var(--pale);border-radius:14px;padding:12px 16px;margin:16px 0}
.related,.before,.notes{margin-top:30px}.related h2,.before h2,.notes h2{margin-top:16px}
.notes{background:#fff4c7}.notes ul{padding-left:20px}.notes li{margin:8px 0}
.guide-list{list-style:none;padding:6px 28px}.guide-list li{padding:14px 0;border-bottom:1px solid var(--line)}.guide-list li:last-child{border-bottom:0}.guide-list a{font:600 21px var(--display);color:var(--ink);text-decoration:none}.guide-list a:hover{color:var(--mint)}.guide-list p{margin:4px 0 0}
.foot{margin-top:70px;background:var(--ink);color:#f3ecdc;padding:36px 0 26px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px}
.foot h2{font-size:19px;margin:0 0 8px;color:var(--butter)}.foot ul{list-style:none;margin:0;padding:0}.foot li{margin:4px 0;font-size:15px}.foot a{color:#f3ecdc;font-weight:600}.foot a:hover{color:var(--butter)}.foot .small{color:#c9c2b1;margin-top:20px}
@media (max-width:720px){.model-top{grid-template-columns:1fr}.top-inner{gap:10px;justify-content:center}
/* One scrollable line: the header's height must not depend on when the heading font arrives. */
.top nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;gap:4px;white-space:nowrap;scrollbar-width:none}.top nav a{font-size:15px;line-height:26px;padding:4px 12px}h2{margin-top:30px}
/* Phones: each table row becomes a card with the price on the right, so no sideways scrolling. */
table{min-width:0}thead{display:none}tr{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:2px 14px;padding:12px 14px;border-top:1px solid var(--line)}tbody tr:first-child{border-top:0}
td{border:0;padding:0}td.price{grid-column:2;grid-row:1/span 4;text-align:right}td:not(.price){grid-column:1}td:first-child{font-weight:800}
.prose tr{grid-template-columns:1fr}.prose td:first-child{padding-top:2px}
.prose,.related,.before,.notes,.guide-list{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}

/* ===== Pastel mix (29 Sep 2026, owner-approved) for static pages: notebook base + lilac blobs, plum ink, violet links, coral highlights. ===== */
:root{--ink:#2a2140;--muted:#5d5470;--violet:#6538d6;--coral:#bf432d;--lilac:#efe8ff;--line:#e5dccd}
body{background-image:radial-gradient(circle at 3% 18%,#e9e0ffcc 0 190px,transparent 191px),radial-gradient(circle at 98% 44%,#fff0c2cc 0 230px,transparent 231px),radial-gradient(circle at 2% 82%,#ffe3d8cc 0 170px,transparent 171px),radial-gradient(circle at 97% 95%,#dcf4e9cc 0 200px,transparent 201px),linear-gradient(#efe4d0 1px,transparent 1px),linear-gradient(90deg,#efe4d0 1px,transparent 1px);background-size:auto,auto,auto,auto,32px 32px,32px 32px;background-attachment:fixed,fixed,fixed,fixed,scroll,scroll}
a{color:var(--violet)}a:hover{color:var(--ink)}.logo span{color:var(--coral)}
.top nav a:hover{background:var(--lilac)}
.facts{background:linear-gradient(135deg,#efe8ff,#ffe9df)}.family-note{background:#ffe9df}.notes{background:#fff4c7}
.cards .card:nth-child(4n+1) img,.cards .card:nth-child(4n+1) .no-photo{background:#efe8ff}.cards .card:nth-child(4n+2) img,.cards .card:nth-child(4n+2) .no-photo{background:#dcf4e9}.cards .card:nth-child(4n+3) img,.cards .card:nth-child(4n+3) .no-photo{background:#ffe9df}.cards .card:nth-child(4n) img,.cards .card:nth-child(4n) .no-photo{background:#fff4c7}
th{background:#efe8ff}.pager span{background:var(--mint)}
.foot{background:var(--ink)}