/* ════════════════════════════════════════════════════════════════
   HAPPY FOLDERS, content pages (guides / SEO landings)
   Same paper-and-ink brand as the home page, lighter weight.
   Readable with zero JS.
   ════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FFF7EC; --paper-2:#FFEFDB; --card:#FFFDF7;
  --ink:#2A211C; --ink-soft:#6B5B4E; --ink-faint:#A08D7C;
  --coral:#FF6B57; --coral-deep:#F25B3F; --coral-soft:#FFE0D6;
  --mustard:#FFC23E; --mustard-soft:#FFF0C9;
  --teal:#2EC4B6; --teal-soft:#D5F5F0;
  --berry:#E84A8A; --lav:#8F7BFF; --lav-soft:#E9E4FF;
  --r-lg:28px; --r-md:20px; --r-sm:12px; --bw:3px;
  --shadow-card:0 10px 28px rgba(42,33,28,.10);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --f-display:"Fredoka","Nunito",system-ui,-apple-system,sans-serif;
  --f-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-hand:"Caveat",cursive;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* subtle paper grain, like home */
body::before{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--coral-deep); text-decoration-thickness:2px; text-underline-offset:3px; }
a:hover{ color:var(--coral); }
b,strong{ font-weight:800; }
:focus-visible{ outline:3px dashed var(--coral); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--mustard); color:var(--ink); }

/* ── top bar ── */
.topbar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; max-width:980px; margin:0 auto; padding:18px 22px;
}
.brand{ display:inline-flex; align-items:center; gap:.55em; text-decoration:none; color:var(--ink); font-family:var(--f-display); font-weight:700; font-size:1.15rem; }
.brand img{ width:34px; height:34px; border-radius:22%; }
.brand b{ font-weight:700; }

/* ── buttons (match home) ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--f-display); font-weight:600; color:var(--ink); text-decoration:none; cursor:pointer;
  background:var(--card); border:var(--bw) solid var(--ink); border-radius:999px;
  padding:.7em 1.4em; font-size:1rem; line-height:1.1; box-shadow:0 5px 0 var(--ink);
  transition:transform .18s var(--spring), box-shadow .18s var(--spring), background .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 7px 0 var(--ink); color:var(--ink); }
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--ink); }
.btn--primary{ background:var(--coral); color:#fff; }
.btn--primary:hover{ color:#fff; }
.btn--big{ font-size:1.12rem; padding:.85em 1.7em; }

/* ── article ── */
.wrap{ position:relative; z-index:2; max-width:760px; margin:0 auto; padding:8px 22px 40px; }
.crumbs{ font-size:.92rem; color:var(--ink-soft); margin:6px 0 18px; }
.crumbs a{ color:var(--ink-soft); }
h1{ font-family:var(--f-display); font-weight:700; font-size:clamp(2rem,5vw,2.9rem); line-height:1.08; letter-spacing:-.01em; margin:.2em 0 .35em; }
.lead{
  font-size:1.22rem; line-height:1.6; color:var(--ink);
  background:var(--mustard-soft); border:var(--bw) solid var(--ink); border-radius:var(--r-md);
  padding:18px 20px; margin:0 0 1.6em; box-shadow:var(--shadow-card);
}
h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.4rem,3.4vw,1.85rem); line-height:1.2; margin:1.9em 0 .5em; }
h3{ font-family:var(--f-display); font-weight:600; font-size:1.22rem; margin:1.5em 0 .4em; }
p{ margin:0 0 1.1em; }
ul,ol{ margin:0 0 1.2em; padding-left:0; list-style:none; }
ul li{ position:relative; padding-left:1.7em; margin-bottom:.55em; }
ul li::before{ content:"✦"; position:absolute; left:0; color:var(--coral); font-weight:800; }
ol{ counter-reset:step; }
ol li{ position:relative; padding-left:2em; margin-bottom:.7em; counter-increment:step; }
ol li::before{
  content:counter(step); position:absolute; left:0; top:.05em;
  width:1.4em; height:1.4em; display:grid; place-items:center; font-size:.8em; font-weight:800;
  background:var(--teal-soft); border:2px solid var(--ink); border-radius:50%;
}
strong em, em strong{ font-style:normal; background:var(--coral-soft); padding:0 .25em; border-radius:6px; }

/* callout / tip */
.note{
  background:var(--lav-soft); border:var(--bw) solid var(--ink); border-radius:var(--r-md);
  padding:16px 18px; margin:1.5em 0; box-shadow:var(--shadow-card);
}
.note b{ font-family:var(--f-display); }

/* compare table */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; margin:1.4em 0; font-size:.98rem; }
.cmp th, .cmp td{ text-align:left; padding:12px 14px; border-bottom:2px solid var(--paper-2); vertical-align:top; }
.cmp thead th{ font-family:var(--f-display); background:var(--card); border-bottom:var(--bw) solid var(--ink); }
.cmp tr td:first-child{ font-weight:700; }

/* faq */
.qa{ background:var(--card); border:var(--bw) solid var(--ink); border-radius:var(--r-md); padding:4px 18px; margin-bottom:12px; box-shadow:var(--shadow-card); }
.qa summary{ font-family:var(--f-display); font-weight:600; font-size:1.08rem; cursor:pointer; padding:14px 0; list-style:none; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; float:right; font-weight:800; color:var(--coral); }
.qa[open] summary::after{ content:"–"; }
.qa p{ margin:0 0 14px; color:var(--ink-soft); }

/* big closing CTA */
.cta-card{
  text-align:center; background:var(--card); border:var(--bw) solid var(--ink);
  border-radius:var(--r-lg); padding:34px 24px; margin:2.4em 0 1em; box-shadow:var(--shadow-card);
}
.cta-card h2{ margin:.1em 0 .3em; }
.cta-card .row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:1em; }
.fine{ color:var(--ink-faint); font-size:.9rem; margin-top:1em; }

/* footer */
.foot{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:26px 22px 56px; color:var(--ink-soft); font-size:.95rem; border-top:2px dashed var(--ink-faint); }
.foot a{ color:var(--ink-soft); text-decoration:none; }
.foot a:hover{ color:var(--coral-deep); text-decoration:underline; }
.foot__cols{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem 2.4rem; margin:6px 0 18px; }
.foot__group{ display:grid; gap:.45rem; align-content:start; }
.foot__group h4{ font-family:var(--f-display); font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); opacity:.55; margin:0 0 .25rem; }
.foot__copy{ margin:0; }
@media (max-width:560px){ .foot__cols{ grid-template-columns:1fr; } }

/* product shot on content pages */
.hero-shot{ margin:0 0 1.8em; }
.hero-shot img, .hero-shot video{ width:100%; display:block; height:auto; border:var(--bw) solid var(--ink); border-radius:var(--r-md); box-shadow:var(--shadow-card); }
.hero-shot figcaption{ font-size:.9rem; color:var(--ink-faint); text-align:center; margin-top:.55em; }