:root{
  --cream:#fff8f0;--navy:#1f2a44;--mint:#9be3c9;--peach:#ffb59a;--sun:#ffd166;--ink:#2b2b2b;--muted:#6b7280;--white:#fff;
  --radius:18px;--shadow:0 10px 30px rgba(31,42,68,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Nunito","Segoe UI",system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.6}
a{color:var(--navy)}
img{max-width:100%;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* header */
header{background:var(--white);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{font-weight:900;font-size:1.6rem;text-decoration:none;color:var(--navy);letter-spacing:-.5px}
.logo span{color:#ff7a59}
.nav ul{list-style:none;display:flex;gap:26px;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:700;color:var(--navy)}
.nav ul a:hover,.nav ul a.active{color:#ff7a59}
.burger{display:none;background:none;border:0;font-size:1.8rem;cursor:pointer}
@media(max-width:720px){
  .burger{display:block}
  .nav ul{display:none;position:absolute;left:0;right:0;top:72px;background:var(--white);flex-direction:column;padding:16px 20px;gap:14px;box-shadow:var(--shadow)}
  .nav ul.open{display:flex}
}

/* buttons */
.btn{display:inline-block;padding:12px 24px;border-radius:999px;font-weight:800;text-decoration:none;border:0;cursor:pointer;font-size:1rem;transition:transform .12s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--navy);color:var(--white)}
.btn-accent{background:#ff7a59;color:var(--white)}
.btn-light{background:var(--white);color:var(--navy);border:2px solid var(--navy)}

/* hero */
.hero{background:linear-gradient(135deg,var(--mint) 0%,#dff7ee 50%,var(--peach) 100%);padding:80px 0 70px}
.hero .container{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;margin:0 0 16px;color:var(--navy)}
.hero p{font-size:1.15rem;margin:0 0 26px;color:#33405e}
.hero-art{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;text-align:center;font-size:6rem}
.hero-art small{display:block;font-size:1rem;color:var(--muted);margin-top:8px}
@media(max-width:820px){.hero .container{grid-template-columns:1fr}.hero-art{font-size:4rem}}

/* sections */
section{padding:60px 0}
.section-title{font-size:2rem;margin:0 0 8px;color:var(--navy)}
.section-sub{margin:0 0 30px;color:var(--muted)}
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

/* cards */
.card{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card .thumb{height:170px;display:flex;align-items:center;justify-content:center;font-size:4rem;background:#f4f1ff}
.card .body{padding:20px;flex:1;display:flex;flex-direction:column}
.card h3{margin:0 0 8px;font-size:1.2rem;color:var(--navy)}
.card p{margin:0 0 16px;color:#4b5563;flex:1}
.tag{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;background:var(--sun);color:var(--navy);padding:4px 10px;border-radius:999px;margin-bottom:10px;width:max-content}
.price{font-weight:900;font-size:1.25rem;color:var(--navy);margin-bottom:12px}
.price s{color:var(--muted);font-weight:400;font-size:.95rem;margin-left:6px}
.meta{font-size:.85rem;color:var(--muted);margin-bottom:8px}

/* newsletter */
.newsletter{background:var(--navy);color:var(--white);border-radius:var(--radius);padding:40px;text-align:center}
.newsletter h2{margin:0 0 8px}
.newsletter form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.newsletter input{padding:12px 18px;border-radius:999px;border:0;min-width:260px;font-size:1rem}
.newsletter .note{font-size:.85rem;opacity:.75;margin-top:12px}

/* article */
article.post{max-width:760px;margin:0 auto;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:40px}
article.post h1{color:var(--navy);line-height:1.15;margin-top:0}
article.post h2{color:var(--navy);margin-top:36px}
article.post ul li{margin-bottom:8px}
.callout{background:#e9fbf3;border-left:5px solid var(--mint);padding:16px 20px;border-radius:8px;margin:24px 0}
.disclosure{font-size:.85rem;color:var(--muted);border-top:1px dashed #ddd;padding-top:16px;margin-top:36px}

/* footer */
footer{background:#14203a;color:#c9d1e3;padding:40px 0;margin-top:40px;font-size:.95rem}
footer .cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
footer a{color:#fff;text-decoration:none}
footer h4{color:#fff;margin:0 0 10px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:6px}
.copy{margin-top:30px;text-align:center;font-size:.8rem;opacity:.6}

/* ===== v2: must-haves, kits, kit builder ===== */
.card.product .brand{font-size:.8rem;font-weight:800;color:#ff7a59;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.card.product .price small{display:block;font-size:.7rem;font-weight:600;color:var(--muted)}
.card .actions{display:flex;flex-direction:column;gap:10px}
.kit-add{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.9rem;color:var(--navy);cursor:pointer;padding:8px 12px;border:2px dashed #cfd6e4;border-radius:12px;user-select:none}
.kit-add input{accent-color:#ff7a59;width:18px;height:18px}
.kit-add.on{border-style:solid;border-color:var(--mint);background:#e9fbf3}

/* category tiles (home) */
.cat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.cat-tile{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 14px;text-align:center;text-decoration:none;color:var(--navy);transition:transform .12s}
.cat-tile:hover{transform:translateY(-3px)}
.cat-tile .cat-emoji{display:block;font-size:2.4rem;margin-bottom:8px}
.cat-tile strong{display:block;font-size:1rem;line-height:1.2}
.cat-tile small{color:var(--muted)}

/* shop chips + sections */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;position:sticky;top:72px;z-index:40;background:var(--cream);padding:10px 0}
.chip{padding:8px 14px;border-radius:999px;background:var(--white);border:2px solid #e5e7eb;font-weight:800;font-size:.9rem;text-decoration:none;color:var(--navy)}
.chip.active,.chip:hover{border-color:var(--navy);background:var(--navy);color:#fff}
.cat-section{margin-bottom:50px}
.cat-title{font-size:1.6rem;scroll-margin-top:140px}
.shop .section-sub strong{color:var(--navy)}

/* kits */
.kit-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.kit{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column;scroll-margin-top:90px}
.kit-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.kit-emoji{font-size:2.4rem;line-height:1;background:#f4f1ff;border-radius:14px;padding:10px}
.kit h3{margin:0 0 4px;color:var(--navy);font-size:1.25rem}
.kit-tagline{margin:0;color:#4b5563;font-size:.95rem}
.kit-items{list-style:none;padding:0;margin:0 0 14px;border-top:1px solid #eef0f4}
.kit-items li{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eef0f4;font-size:.92rem}
.ki-emoji{width:26px;text-align:center}
.ki-name{flex:1;color:var(--ink)}
.ki-price{font-weight:800;color:var(--navy)}
.kit-why{font-size:.9rem;color:#4b5563;background:#fff8e6;border-left:4px solid var(--sun);padding:10px 14px;border-radius:8px;margin:0 0 16px}
.kit-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kit-total{font-weight:900;font-size:1.4rem;color:var(--navy)}
.kit-total small{display:block;font-size:.72rem;font-weight:600;color:var(--muted)}
.btn-cart{white-space:nowrap}

/* builder */
.builder{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.b-cat{background:var(--cream);border-radius:var(--radius);padding:6px 14px 10px}
.b-cat summary{cursor:pointer;font-weight:900;color:var(--navy);padding:10px 0;font-size:1.05rem;list-style:none}
.b-cat summary::-webkit-details-marker{display:none}
.b-cat summary small{color:var(--muted);font-weight:700;margin-left:6px}
.b-rows{display:flex;flex-direction:column;gap:6px}
.b-row{display:flex;align-items:center;gap:10px;background:var(--white);border:2px solid transparent;border-radius:12px;padding:8px 10px;cursor:pointer;font-size:.9rem}
.b-row.on{border-color:var(--mint);background:#e9fbf3}
.b-row input{accent-color:#ff7a59;width:18px;height:18px;flex-shrink:0}
.b-emoji{width:24px;text-align:center}
.b-name{flex:1;line-height:1.25;color:var(--ink)}
.b-name small{display:block;color:var(--muted);font-size:.75rem}
.b-price{font-weight:800;color:var(--navy)}

/* sticky kit bar */
.kit-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);color:#fff;box-shadow:0 -6px 24px rgba(0,0,0,.18)}
.kit-bar .container{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
.kit-bar-actions{display:flex;gap:10px;align-items:center}
.btn-sm{padding:8px 16px;font-size:.9rem}
.kit-bar .btn-light{background:transparent;color:#fff;border-color:#fff}
body.has-kit-bar{padding-bottom:90px}
@media(max-width:600px){.kit-bar .container{justify-content:center;text-align:center}}

/* ===== v3: Base / Deluxe tiers ===== */
.kit-group{margin-bottom:56px;scroll-margin-top:90px}
.group-title{font-size:1.7rem;color:var(--navy);margin:0 0 4px}
.group-sub{color:var(--muted);margin:0 0 18px}
.group-sub strong{color:var(--navy)}
.kit-pair{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.tier{display:inline-block;font-size:.7rem;font-weight:900;letter-spacing:1px;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:6px}
.tier-base{background:#e9fbf3;color:#1b7a52;border:1.5px solid var(--mint)}
.tier-deluxe{background:#fff3e0;color:#b4531f;border:1.5px solid #ffb59a}
.kit.tier-card-deluxe{border:2px solid #ffd7c4}
.kit.tier-card-base{border:2px solid #cdefe0}

/* product photos */
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:14px;background:#fff}

/* ===== Prime / registry bounty banners ===== */
.nav-prime{background:#ff7a59;color:#fff!important;padding:8px 14px;border-radius:999px;font-size:.9rem}
.nav-prime:hover{background:#e8663f}
.bounty-wrap{padding:20px 0 40px}
.bounty-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.bounty{display:flex;align-items:center;gap:18px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;flex-wrap:wrap}
.bounty.prime{border-left:6px solid #ff7a59}
.bounty.registry{border-left:6px solid var(--mint)}
.bounty-emoji{font-size:2.4rem}
.bounty > div:not(.bounty-emoji){flex:1;min-width:200px}
.bounty h3{margin:0 0 4px;color:var(--navy);font-size:1.1rem}
.bounty p{margin:0;color:#4b5563;font-size:.92rem}
.bounty .btn{white-space:nowrap}

/* ===== in-app browser escape bar ===== */
.inapp-bar{background:#fff3e0;border-bottom:3px solid #ff7a59;font-size:.9rem;color:var(--navy);position:sticky;top:0;z-index:70}
.inapp-bar .container{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.inapp-bar span{flex:1;min-width:200px;line-height:1.35}
.inapp-bar .btn-sm{padding:8px 14px;font-size:.85rem;white-space:nowrap}
.inapp-x{background:none;border:0;font-size:1.1rem;cursor:pointer;color:var(--muted);padding:4px}
body.has-inapp-bar header{top:auto;position:relative}

/* ===== accessibility pass ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:800;z-index:100;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid #1f2a44;outline-offset:3px;border-radius:6px}
.newsletter :focus-visible,.kit-bar :focus-visible,footer :focus-visible,.inapp-bar .btn:focus-visible{outline-color:#ffd166}
/* contrast: brand orange fails with white text — use navy text on orange, darker orange for small text */
.btn-accent{background:#ff7a59;color:var(--navy)}
.nav-prime{color:var(--navy)!important}
.card.product .brand{color:#c8461f}
.logo span{color:#f2643d}
.nav ul a:hover,.nav ul a.active{color:#c8461f}
.kit-bar .btn-accent{color:var(--navy)}
.section-sub,.meta,.cat-tile small,.price small,.kit-total small,.b-name small,.copy{color:#5b6472}
.copy{opacity:1;color:#b6bfd1}
.newsletter .note{opacity:1;color:#c9d1e3}
/* keyboard users can see which card a blog link jumped to */
.card.product{scroll-margin-top:150px}
.card.product:target{outline:4px solid #ff7a59;outline-offset:4px;animation:flash 1.6s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 12px rgba(255,122,89,.45)}100%{box-shadow:var(--shadow)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.burger{padding:8px 12px}
.card .thumb img{font-size:.9rem;color:var(--muted)}
article.post.legal h2{font-size:1.2rem;margin-top:28px}
article.post.legal .meta{margin-bottom:20px}
.copy a{color:#c9d1e3;text-decoration:underline}
.oos{font-size:.7rem;font-weight:800;color:#b4531f;background:#fff3e0;padding:2px 8px;border-radius:999px;vertical-align:middle}