/* ===== PrintNest Kids — "Craft Table" design system ===== */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito+Sans:wght@400;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper: #FDF6EC;
  --paper-2: #F7EEDC;
  --ink: #2B2622;
  --ink-soft: #5C5348;
  --coral: #FF6F5E;
  --coral-dark: #E4503E;
  --teal: #2FA6A6;
  --yellow: #FFD23F;
  --tape: #FFF1C9;
  --border: #E7DCC8;
  --radius: 14px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Nunito Sans', sans-serif;
  font-size:16px;
  line-height:1.65;
}
h1,h2,h3{ font-family:'Baloo 2', sans-serif; font-weight:700; margin:0 0 0.4em; color:var(--ink); }
a{ color:var(--coral-dark); }
img{ max-width:100%; display:block; }
.mono{ font-family:'Space Mono', monospace; }
.wrap{ max-width:1100px; margin:0 auto; padding:0 24px; }
a:focus-visible, button:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; }

/* ---- Ecommerce urgency elements ---- */
.announce-bar{
  background:var(--ink); color:var(--paper); text-align:center;
  padding:9px 12px; font-size:0.85rem; font-weight:700;
}
.announce-bar #countdown{ background:var(--coral); padding:2px 8px; border-radius:4px; color:#fff; }
.off-badge{
  background:var(--coral); color:#fff; font-family:'Baloo 2'; font-weight:800;
  font-size:0.85rem; padding:4px 10px; border-radius:999px; margin-right:10px;
  display:inline-block; transform:rotate(-3deg);
}
.stars{ color:var(--yellow); font-size:1rem; margin-bottom:10px; }
.stars-count{ color:var(--ink-soft); font-size:0.8rem; margin-left:6px; }
.scarcity{
  margin-top:14px; font-size:0.9rem; font-weight:700; color:var(--coral-dark);
  background:var(--tape); display:inline-block; padding:8px 14px; border-radius:8px;
}
.btn-lg{ font-size:1.1rem; padding:16px 32px; }
.sticky-bar{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:30;
  background:#fff; border-top:2px solid var(--border); padding:12px 20px;
  align-items:center; justify-content:space-between; box-shadow:0 -4px 12px rgba(0,0,0,0.08);
}

/* ---- Header ---- */
.site-header{ position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:2px solid var(--border); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding:16px 24px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:'Baloo 2'; font-weight:800; font-size:1.3rem; color:var(--ink); text-decoration:none; }
.brand-dot{ width:28px; height:28px; border-radius:50%; background:conic-gradient(var(--coral) 0 25%, var(--yellow) 25% 50%, var(--teal) 50% 75%, var(--coral) 75% 100%); }
nav.main-nav{ display:flex; align-items:center; gap:26px; }
nav.main-nav a{ color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:0.95rem; }
nav.main-nav a:hover{ color:var(--coral-dark); }
.btn{ font-family:'Baloo 2'; font-weight:700; font-size:1rem; padding:12px 24px; border-radius:999px; border:none; cursor:pointer; display:inline-block; text-decoration:none; }
.btn-primary{ background:var(--coral); color:#fff; box-shadow:0 4px 0 var(--coral-dark); transition:transform .1s; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-primary:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--coral-dark); }
.btn-outline{ border:2px solid var(--ink); color:var(--ink); background:transparent; }

/* ---- Hero ---- */
.hero{ padding:64px 0 40px; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; }
.badge{
  display:inline-block; font-family:'Space Mono', monospace; font-size:0.78rem;
  background:var(--tape); color:var(--ink); padding:6px 12px; border-radius:4px;
  transform:rotate(-2deg); margin-bottom:16px; border:1px dashed var(--coral-dark);
}
.hero h1{ font-size:2.9rem; line-height:1.08; }
.hero h1 .hl{ color:var(--coral); }
.hero p.lede{ font-size:1.1rem; color:var(--ink-soft); max-width:46ch; margin:16px 0 26px; }
.price-line{ display:flex; align-items:baseline; gap:12px; margin-bottom:22px; }
.price-old{ font-family:'Space Mono'; text-decoration:line-through; color:var(--ink-soft); font-size:1.1rem; }
.price-new{ font-family:'Baloo 2'; font-weight:800; font-size:2.2rem; color:var(--coral-dark); }
.trust-row{ display:flex; gap:18px; flex-wrap:wrap; margin-top:22px; font-size:0.85rem; color:var(--ink-soft); font-weight:700; }
.trust-row span{ display:flex; align-items:center; gap:6px; }

/* Stacked worksheet visual — signature element */
.stack{ position:relative; height:380px; }
.card-sheet{
  position:absolute; width:230px; height:290px; background:#fff; border-radius:10px;
  border:2px solid var(--ink); box-shadow:4px 6px 0 rgba(43,38,34,0.15); padding:16px;
}
.card-sheet .bar{ height:10px; border-radius:4px; margin-bottom:8px; }
.sheet-1{ top:0; left:40px; transform:rotate(-6deg); z-index:1; }
.sheet-2{ top:40px; left:140px; transform:rotate(5deg); z-index:2; }
.sheet-3{ top:90px; left:20px; transform:rotate(-2deg); z-index:3; }
.tape-strip{
  position:absolute; width:70px; height:24px; background:var(--tape);
  opacity:0.9; border:1px dashed var(--coral-dark);
}

/* ---- Sections ---- */
.section{ padding:56px 0; }
.section-eyebrow{ font-family:'Space Mono', monospace; color:var(--teal); font-size:0.85rem; letter-spacing:0.04em; display:block; margin-bottom:8px; }
.section-head{ text-align:center; max-width:600px; margin:0 auto 40px; }
.section-head h2{ font-size:2rem; }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.item-card{ background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:20px; text-align:center; }
.item-card .emoji{ font-size:2rem; display:block; margin-bottom:10px; }
.item-card h3{ font-size:1.05rem; margin-bottom:6px; }
.item-card p{ font-size:0.88rem; color:var(--ink-soft); margin:0; }

.value-panel{ background:var(--ink); color:var(--paper); border-radius:20px; padding:44px; }
.value-list{ list-style:none; padding:0; margin:0 0 28px; display:grid; grid-template-columns:1fr 1fr; gap:10px 30px; }
.value-list li{ display:flex; justify-content:space-between; border-bottom:1px dashed rgba(253,246,236,0.25); padding:8px 0; font-weight:700; }
.value-list li .v{ font-family:'Space Mono'; color:var(--yellow); }
.value-total{ display:flex; justify-content:space-between; align-items:center; padding-top:18px; border-top:2px solid rgba(253,246,236,0.3); }
.value-total .amount{ font-family:'Baloo 2'; font-size:1.6rem; color:var(--yellow); }

.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.testi{ background:var(--paper-2); border-radius:var(--radius); padding:22px; border:2px solid var(--border); }
.testi-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.avatar{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-weight:800; color:#fff; font-size:1.1rem;
}
.testi p{ font-style:italic; margin:0; }
.testi .who{ font-weight:800; font-family:'Baloo 2'; font-size:0.95rem; line-height:1.2; }
.testi .role{ font-size:0.78rem; color:var(--ink-soft); }

.faq-item{ border-bottom:2px solid var(--border); padding:18px 0; }
.faq-item h3{ font-size:1.05rem; margin-bottom:6px; }
.faq-item p{ color:var(--ink-soft); margin:0; }

.final-cta{ text-align:center; background:var(--yellow); border-radius:24px; padding:56px 24px; }
.final-cta h2{ font-size:2.1rem; }

.site-footer{ padding:36px 0; border-top:2px solid var(--border); font-size:0.85rem; color:var(--ink-soft); }
.site-footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.site-footer a{ color:var(--ink-soft); margin-right:14px; text-decoration:none; }

/* ---- Responsive ---- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .stack{ height:280px; }
  .grid-4{ grid-template-columns:1fr 1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .value-list{ grid-template-columns:1fr; }
  nav.main-nav a:not(.btn){ display:none; }
  .sticky-bar{ display:flex; }
  body{ padding-bottom:70px; }
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }