/* DuckDoro marketing pages — shared brand styles (extracted from duckdoro-landing.html).
   Used by the static guide pages (/three-task-planner etc.); the landing keeps its own inline copy. */
:root{
  --cream:#FBF4E4; --yellow:#FFD93D; --ink:#1A1A1A; --frog:#5FA83C;
  --frog-tint:#E8F2DD; --coral:#FF8A6B; --white:#fff;
  --display:'Bricolage Grotesque',sans-serif;
  --body:'Hanken Grotesk',sans-serif;
  --hand:'Caveat',cursive;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3{font-family:var(--display); line-height:1.08; margin:0; font-weight:800; letter-spacing:-0.02em;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px;}

/* pressable buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5em; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  padding:.85em 1.4em; border:3px solid var(--ink); border-radius:16px;
  background:var(--white); color:var(--ink);
  box-shadow:5px 6px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .15s;
  text-align:center;
}
.btn:hover{transform:translate(2px,3px); box-shadow:2px 2px 0 var(--ink);}
.btn:active{transform:translate(5px,6px); box-shadow:0 0 0 var(--ink);}
.btn--yellow{background:var(--yellow);}
.btn--black{background:var(--ink); color:var(--yellow);}
.btn--lg{font-size:1.25rem; padding:1em 1.7em; border-radius:18px;}

/* sticker cards */
.card{
  background:var(--white); border:3px solid var(--ink); border-radius:22px;
  box-shadow:6px 8px 0 var(--ink);
}
.tilt-l{transform:rotate(-1.5deg);}
.tilt-r{transform:rotate(1.2deg);}
.sticker{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  padding:.4em .8em; border:3px solid var(--ink); border-radius:999px;
  background:var(--white); box-shadow:3px 4px 0 var(--ink); white-space:nowrap;
}
.sticker--green{background:var(--frog); color:var(--white);}
.sticker--yellow{background:var(--yellow);}
.hand{font-family:var(--hand); font-weight:700;}

/* nav */
nav{position:sticky; top:0; z-index:50; background:var(--cream); border-bottom:3px solid var(--ink);}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--display); font-weight:800; font-size:1.5rem;}
.nav-right{display:flex; align-items:center; gap:10px;}
.nav-link{font-family:var(--display); font-weight:700; font-size:1.02rem; padding:.5em .8em; border-radius:10px; white-space:nowrap;}
.nav-link:hover{background:#0000000d;}

/* article layout */
.article-head{padding:52px 0 8px; max-width:800px; margin:0 auto;}
.crumbs{font-size:.95rem; font-weight:600; opacity:.65; margin-bottom:18px;}
.crumbs a:hover{text-decoration:underline;}
.article-head h1{font-size:clamp(2.2rem,4.6vw,3.4rem);}
.byline{margin-top:14px; font-size:.95rem; font-weight:600; opacity:.6;}
.answer-card{
  max-width:800px; margin:30px auto 0; background:var(--yellow);
  border:3px solid var(--ink); border-radius:22px; padding:26px 30px;
  box-shadow:6px 8px 0 var(--ink); font-size:1.15rem; font-weight:500;
}
.answer-card strong{font-family:var(--display);}
article{max-width:800px; margin:0 auto; padding:26px 28px 10px;}
article section{padding:26px 0;}
article h2{font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:14px;}
article h3{font-size:1.35rem; margin:22px 0 8px;}
article p{margin:12px 0; opacity:.9;}
article ul, article ol{margin:12px 0; padding-left:26px; opacity:.9;}
article li{margin:8px 0;}
article a.inline{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px;}
article a.inline:hover{color:var(--frog);}

/* worked-example day card */
.day-card{background:var(--white); border:3px solid var(--ink); border-radius:22px; box-shadow:6px 8px 0 var(--ink); padding:24px 26px; margin:20px 0;}
.day-card .day-title{font-family:var(--hand); font-size:1.5rem; margin-bottom:12px;}
.slot{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:2px dashed #1a1a1a2b;}
.slot:first-of-type{border-top:0;}
.slot .tag{flex-shrink:0; margin-top:2px;}
.slot .what{font-weight:600;}
.slot .why{font-size:.95rem; opacity:.65;}

/* FAQ */
.faq{max-width:800px; margin:0 auto; padding:10px 28px 30px;}
.faq h2{font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:20px;}
.faq details{background:var(--white); border:3px solid var(--ink); border-radius:18px; box-shadow:4px 5px 0 var(--ink); margin:14px 0; padding:0;}
.faq summary{cursor:pointer; font-family:var(--display); font-weight:700; font-size:1.1rem; padding:16px 20px; list-style:none; display:flex; justify-content:space-between; gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; font-size:1.3rem; flex-shrink:0;}
.faq details[open] summary::after{content:"–";}
.faq .a{padding:0 20px 18px; opacity:.85;}
.faq .a p{margin:8px 0;}

/* related links + CTA band */
.related{max-width:800px; margin:0 auto; padding:8px 28px 26px;}
.related h2{font-size:1.4rem; margin-bottom:14px;}
.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
.related-grid a{background:var(--white); border:3px solid var(--ink); border-radius:16px; box-shadow:4px 5px 0 var(--ink); padding:16px 18px; font-weight:700; font-family:var(--display); transition:transform .12s, box-shadow .12s;}
.related-grid a:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--yellow);}
.related-grid a span{display:block; font-family:var(--body); font-weight:500; font-size:.92rem; opacity:.7; margin-top:4px;}
.cta-band{max-width:800px; margin:26px auto 70px; padding:0 28px;}
.cta-band .inner{background:var(--ink); color:var(--cream); border-radius:28px; padding:44px 36px; text-align:center;}
.cta-band h2{color:var(--white); font-size:clamp(1.8rem,3.6vw,2.6rem);}
.cta-band p{margin:12px auto 24px; opacity:.8; max-width:44ch;}
.cta-band .fine{font-size:.95rem; opacity:.65; margin-top:16px;}

/* footer */
footer{background:var(--ink); color:var(--cream); padding:48px 0 36px;}
.foot-grid{display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.foot-brand{display:flex; align-items:center; gap:16px;}
.foot-brand .ft-txt{font-family:var(--display); font-weight:800; font-size:1.5rem; color:var(--white);}
.foot-brand .ft-sub{font-size:.98rem; opacity:.7; font-weight:500;}
.foot-links{display:flex; gap:18px; flex-wrap:wrap; font-size:.98rem; font-weight:600;}
.foot-links a:hover{color:var(--yellow);}
.foot-bottom{margin-top:36px; padding-top:22px; border-top:2px solid #ffffff22; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.95rem; opacity:.7; font-weight:500;}
.foot-legal{display:flex; gap:18px;}
.foot-legal a:hover{color:var(--yellow);}

@media (max-width:560px){
  body{font-size:17px;}
  .nav-link.hide-sm{display:none;}
  .wrap{padding:0 18px;}
  .related-grid{grid-template-columns:1fr;}
  .answer-card{margin-left:18px; margin-right:18px;}
}