/* ============================================================
   Pet Blanket Book Co. — bright, playful, picture-book
   Palette pulled straight off the logo.
   ============================================================ */

:root{
  --ink:      #4E2C15;
  --brown:    #7A4A28;
  --brown-2:  #9B6C45;
  --sky:      #7FC2E4;
  --sky-lite: #CDE9F5;
  --sky-pale: #EAF6FC;
  --sky-deep: #3E8FBF;
  --gold:     #F2A83B;
  --gold-lite:#FFD07A;
  --gold-pale:#FFF1D6;
  --cream:    #FFF6E3;
  --paper:    #FDF7EA;
  --white:    #FFFDF8;
  --blush:    #F6B9A2;

  --line: 3px solid var(--ink);
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --shadow:      0 6px 0 rgba(78,44,21,.18);
  --shadow-card: 0 10px 0 rgba(78,44,21,.10), 0 18px 40px rgba(78,44,21,.10);
  --wrap: 1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Nunito",ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:var(--sky-deep)}

h1,h2,h3,h4,.display{
  font-family:"Baloo 2",ui-rounded,"Segoe UI",system-ui,sans-serif;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--brown);
  overflow-wrap:break-word;
}
h1{font-size:clamp(1.95rem,7vw,4.3rem)}
h2{font-size:clamp(1.7rem,5vw,3.1rem)}
h3{font-size:clamp(1.22rem,3.4vw,1.6rem)}
p{margin:0 0 1em}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
/* grid/flex children default to min-content width — that's what pushes pages wide on phones */
.hero-grid>*,.steps>*,.cards>*,.tiles>*,.quotes>*,.gallery>*,.foot-grid>*,.form-grid>*,.dos>*{min-width:0}
.center{text-align:center}
.narrow{max-width:720px; margin-left:auto; margin-right:auto}
.eyebrow{
  display:inline-block; font-family:"Baloo 2",sans-serif; font-weight:700;
  font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sky-deep); background:var(--sky-pale);
  border:2px solid var(--sky); border-radius:999px;
  padding:.32em 1em; margin-bottom:1rem;
}
.lede{font-size:clamp(1.02rem,1.9vw,1.28rem); color:#6a4a30; max-width:min(60ch,100%)}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.05rem;
  padding:.85em 1.7em; border-radius:999px; border:var(--line);
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary{background:var(--gold); color:var(--ink); box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--gold-lite); transform:translateY(-3px); box-shadow:0 9px 0 rgba(78,44,21,.2)}
.btn-sky{background:var(--sky); color:var(--ink); box-shadow:var(--shadow)}
.btn-sky:hover{background:var(--sky-lite); transform:translateY(-3px); box-shadow:0 9px 0 rgba(78,44,21,.2)}
.btn-ghost{background:var(--white); color:var(--ink); box-shadow:var(--shadow)}
.btn-ghost:hover{background:var(--cream); transform:translateY(-3px)}
.btn:active{transform:translateY(1px); box-shadow:0 3px 0 rgba(78,44,21,.2)}
.btn-sm{font-size:.95rem; padding:.6em 1.2em; border-width:2.5px}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--sky-deep); outline-offset:3px;
}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(253,247,234,.92); backdrop-filter:blur(10px);
  border-bottom:3px solid rgba(78,44,21,.12);
}
.nav-in{display:flex; align-items:center; gap:1.2rem; padding:.6rem 22px; max-width:var(--wrap); margin:0 auto}
.brand{display:flex; align-items:center; margin-right:auto; text-decoration:none}
.brand img{height:54px; width:auto}
.nav-links{display:flex; align-items:center; gap:1.4rem}
.nav-links a{
  font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--brown);
  text-decoration:none; font-size:1rem;
}
.nav-links a:hover{color:var(--sky-deep)}
.nav-toggle{display:none}

/* ---------- hero ---------- */
.hero{
  position:relative; padding:clamp(2.5rem,6vw,5rem) 0 clamp(3rem,7vw,5.5rem);
  background:
    radial-gradient(900px 480px at 78% 8%, var(--sky-pale) 0%, transparent 62%),
    radial-gradient(700px 420px at 8% 22%, var(--gold-pale) 0%, transparent 60%),
    var(--paper);
  overflow:hidden;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center}
.hero h1 .hl{
  color:var(--ink);
  background:linear-gradient(transparent 62%, var(--gold-lite) 62%, var(--gold-lite) 92%, transparent 92%);
  padding:0 .06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.6rem}
.hero-note{margin-top:1rem; font-size:.95rem; color:var(--brown-2)}
.hero-art{position:relative}
.hero-art img{
  width:100%; height:auto; filter:drop-shadow(0 18px 34px rgba(78,44,21,.18));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.hero-art img{animation:none}}

/* sparkles */
.spark{position:absolute; width:22px; height:22px; opacity:.85; animation:tw 3.4s ease-in-out infinite}
.spark svg{width:100%;height:100%}
.spark.s1{top:6%; left:4%; animation-delay:.2s}
.spark.s2{top:18%; right:8%; width:16px; animation-delay:1.1s}
.spark.s3{bottom:14%; left:12%; width:14px; animation-delay:2s}
@keyframes tw{0%,100%{transform:scale(.85);opacity:.5}50%{transform:scale(1.15);opacity:1}}
@media (prefers-reduced-motion:reduce){.spark{animation:none}}

/* ---------- trust strip ---------- */
.trust{background:var(--ink); color:var(--cream); padding:.9rem 0}
.trust-in{display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem 2.4rem; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.98rem}
.trust-in span{display:flex; align-items:center; gap:.5em}
.trust-in svg{width:18px;height:18px; flex:none}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:clamp(3.2rem,7vw,5.5rem) 0}
.sec-cream{background:var(--cream)}
.sec-sky{background:var(--sky-pale)}
.sec-head{max-width:720px; margin:0 auto clamp(2rem,4vw,3rem); text-align:center}

/* blanket wave divider */
.wave{display:block; width:100%; height:auto; margin-bottom:-1px}
.wave.flip{transform:rotate(180deg); margin-bottom:0; margin-top:-1px}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.step{
  background:var(--white); border:var(--line); border-radius:var(--r-lg);
  padding:1.8rem 1.3rem 1.5rem; text-align:center; box-shadow:var(--shadow-card);
  position:relative;
}
.step .num{
  position:absolute; top:-19px; left:50%; transform:translateX(-50%);
  width:44px; height:44px; border-radius:50%; border:var(--line);
  background:var(--gold); color:var(--ink);
  font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.25rem;
  display:grid; place-items:center;
}
.step h3{margin-top:.9rem; font-size:1.22rem}
.step p{font-size:.99rem; color:#6a4a30; margin:0}
.step .ico{width:56px; height:56px; margin:.5rem auto 0}

/* ---------- product cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; align-items:start}
.card{
  background:var(--white); border:var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
  transition:transform .15s ease;
}
.card:hover{transform:translateY(-6px)}
.card.featured{border-color:var(--sky-deep); box-shadow:0 10px 0 rgba(62,143,191,.22), 0 18px 40px rgba(78,44,21,.12)}
.card-media{position:relative; aspect-ratio:4/3; background:var(--sky-pale); overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover}
.ribbon{
  position:absolute; top:14px; right:-42px; transform:rotate(34deg);
  background:var(--sky-deep); color:#fff; font-family:"Baloo 2",sans-serif; font-weight:800;
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.4em 3.4em; box-shadow:0 3px 8px rgba(0,0,0,.18);
}
.card-body{padding:1.5rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1}
.card h3{margin-bottom:.25rem}
.price{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.9rem; color:var(--ink); line-height:1; margin:.2rem 0 .1rem}
.price small{font-size:.9rem; font-weight:700; color:var(--brown-2)}
.strike{text-decoration:line-through; color:var(--brown-2); font-size:1.05rem; font-weight:700; margin-left:.4em}
.feat{list-style:none; padding:0; margin:1rem 0 1.4rem; font-size:1rem}
.feat li{display:flex; gap:.6em; align-items:flex-start; padding:.28em 0; color:#6a4a30}
.feat li::before{content:"✓"; color:var(--sky-deep); font-weight:800; flex:none}
.card .btn{margin-top:auto; justify-content:center}

/* ---------- styles grid ---------- */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem}
.tile{background:var(--white); border:var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-card)}
.tile img{aspect-ratio:1; object-fit:cover; width:100%; height:auto; background:var(--sky-pale)}
.tile .t-body{padding:.9rem 1rem 1.1rem}
.tile h4{margin:0 0 .2rem; font-size:1.08rem}
.tile p{margin:0; font-size:.92rem; color:#6a4a30}

/* ---------- gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.gallery img{
  aspect-ratio:1; object-fit:cover; width:100%; height:auto; align-self:start;
  border:var(--line); border-radius:var(--r-md); box-shadow:var(--shadow);
  background:var(--sky-pale);
}

/* ---------- quotes ---------- */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.quote{background:var(--white); border:var(--line); border-radius:var(--r-lg); padding:1.6rem 1.4rem; box-shadow:var(--shadow-card)}
.stars{color:var(--gold); font-size:1.1rem; letter-spacing:.12em; margin-bottom:.5rem}
.quote p{font-size:1.02rem; margin-bottom:.9rem}
.quote .who{font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--brown-2); font-size:.95rem; margin:0}

/* ---------- faq ---------- */
.faq{max-width:820px; margin:0 auto}
.faq details{
  background:var(--white); border:var(--line); border-radius:var(--r-md);
  margin-bottom:.9rem; box-shadow:0 4px 0 rgba(78,44,21,.10);
}
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.3rem;
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1.1rem; color:var(--brown);
  position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+"; position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  font-size:1.7rem; line-height:1; color:var(--sky-deep); font-weight:800;
}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 1.3rem 1.2rem; color:#6a4a30}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- big cta ---------- */
.cta-band{
  background:linear-gradient(160deg,var(--sky) 0%, var(--sky-deep) 100%);
  color:#fff; padding:clamp(3rem,6vw,4.5rem) 0; text-align:center;
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.94); font-size:1.12rem}

/* ---------- footer ---------- */
.foot{background:var(--ink); color:#E9D9C6; padding:3rem 0 2rem; font-size:.96rem}
.foot a{color:var(--sky-lite); text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; margin-bottom:2rem}
.foot img{height:76px; width:auto; margin-bottom:.8rem}
.foot h4{color:var(--gold-lite); font-size:1rem; margin-bottom:.6rem}
.foot ul{list-style:none; padding:0; margin:0}
.foot li{padding:.18rem 0}
.foot-bottom{border-top:1px solid rgba(255,255,255,.16); padding-top:1.2rem; display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; color:#B79E86; font-size:.88rem}

/* ---------- upload page ---------- */
.page-head{
  background:radial-gradient(700px 380px at 50% 0%, var(--sky-pale), transparent 65%), var(--paper);
  padding:clamp(2.4rem,5vw,3.6rem) 0 clamp(1.6rem,3vw,2.4rem); text-align:center;
}
.tracker{display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap; margin-top:1.4rem}
.tracker span{
  font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.9rem;
  background:var(--white); border:2.5px solid var(--ink); border-radius:999px; padding:.35em 1em;
}
.tracker span.on{background:var(--gold)}

.panel{
  background:var(--white); border:var(--line); border-radius:var(--r-lg);
  padding:clamp(1.4rem,3vw,2.2rem); box-shadow:var(--shadow-card); margin-bottom:1.6rem;
}
.panel .kicker{
  display:inline-flex; align-items:center; gap:.5em; font-family:"Baloo 2",sans-serif; font-weight:800;
  background:var(--gold); border:2.5px solid var(--ink); border-radius:999px; padding:.25em .9em;
  font-size:.9rem; margin-bottom:.9rem;
}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.2rem}
.field{display:flex; flex-direction:column}
.field.full{grid-column:1/-1}
label{font-family:"Baloo 2",sans-serif; font-weight:700; font-size:.98rem; margin-bottom:.35rem; color:var(--brown)}
label .opt{font-weight:600; color:var(--brown-2); font-size:.85rem}
input,select,textarea{
  font-family:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:2.5px solid rgba(78,44,21,.35); border-radius:var(--r-sm);
  padding:.75rem .9rem; width:100%;
}
input:focus,select:focus,textarea:focus{border-color:var(--sky-deep); background:#fff; outline:none}
textarea{min-height:110px; resize:vertical}
.hint{font-size:.86rem; color:var(--brown-2); margin:.35rem 0 0}
.radio-row{display:flex; flex-wrap:wrap; gap:.6rem}
.radio-row label{
  display:flex; align-items:center; gap:.45em; background:var(--paper);
  border:2.5px solid rgba(78,44,21,.3); border-radius:999px; padding:.45em 1em; margin:0; cursor:pointer;
  font-weight:700; font-size:.95rem;
}
.radio-row input{width:auto; margin:0}
.radio-row label:has(input:checked){background:var(--gold-pale); border-color:var(--ink)}

.dropzone{
  border:3px dashed var(--sky-deep); border-radius:var(--r-lg); background:var(--sky-pale);
  padding:2.2rem 1.4rem; text-align:center;
}
.dropzone img{width:88px; height:auto; margin:0 auto .8rem}
.dropzone h3{margin-bottom:.3rem}

.dos{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; margin-top:.5rem}
.dos ul{list-style:none; padding:0; margin:0}
.dos li{display:flex; gap:.6em; padding:.3em 0; font-size:1rem; color:#6a4a30}
.do li::before{content:"✓"; color:#3E9B6B; font-weight:800}
.dont li::before{content:"✕"; color:#D4644B; font-weight:800}

.is-unlinked{opacity:.55; pointer-events:none}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:99; background:var(--gold); border:var(--line); border-radius:999px; padding:.5em 1em}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .steps{grid-template-columns:1fr 1fr; gap:2rem 1.2rem}
  .cards{grid-template-columns:1fr; max-width:520px; margin:0 auto}
  .tiles{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr; max-width:560px; margin:0 auto}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .hero{padding-top:1.6rem}
  .hero-grid{grid-template-columns:1fr; text-align:center; gap:.4rem}
  .hero .lede{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}
  .hero-art{order:-1; max-width:min(300px,72%); margin:0 auto}
  .trust-in{font-size:.9rem; gap:.5rem 1.4rem}
  .sec-head{margin-bottom:2rem}
  .nav-links{display:none}
  .nav-links.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:.9rem;
    position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:3px solid rgba(78,44,21,.14); padding:1.1rem 22px 1.4rem;
  }
  .nav-toggle{
    display:grid; place-items:center; width:46px; height:46px; background:var(--white);
    border:var(--line); border-radius:14px; cursor:pointer; font-size:1.3rem; line-height:1;
  }
  .nav{position:sticky}
  .nav-in{position:relative}
  .brand img{height:46px}
  .form-grid{grid-template-columns:1fr}
  .dos{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr; text-align:center}
  .foot ul{margin-bottom:.6rem}
  .foot-bottom{justify-content:center; text-align:center}
}
@media (max-width:460px){
  h1{font-size:1.78rem}
  .btn{width:100%; justify-content:center}
  .tiles{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr; max-width:400px; margin:0 auto}
  .gallery{grid-template-columns:1fr 1fr; gap:.7rem}
  .trust-in{flex-direction:column; align-items:center; gap:.35rem; font-size:.86rem}
  .tracker span{font-size:.82rem}
}