/* Root Creatures — Illuminated Storybook shared stylesheet */
:root{
  --parch:#F7ECD2; --parch-deep:#EDDCB4; --parch-dark:#DFC896;
  --wood:#6E4A28; --wood-dk:#4A2F13; --wood-lt:#8A6236;
  --gold:#D9A431; --gold-dk:#A0741A; --gold-lt:#F1D183;
  --forest:#41804F; --forest-dk:#2B5C36; --forest-lt:#6AA877;
  --royal:#40639F; --royal-dk:#2C4674;
  --berry:#AE4038; --amber:#C07A28;
  --ink:#3A2A16; --ink-soft:#7A6142;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:'Quicksand','Segoe UI',sans-serif; color:var(--ink);
  background:
    radial-gradient(1000px 640px at 50% -12%, rgba(217,164,49,.14) 0%, transparent 60%),
    radial-gradient(700px 520px at -6% 32%, rgba(65,128,79,.12) 0%, transparent 55%),
    radial-gradient(700px 520px at 106% 36%, rgba(64,99,159,.12) 0%, transparent 55%),
    linear-gradient(178deg,#F9F0DA, var(--parch) 45%, var(--parch-deep));
  min-height:100vh; line-height:1.65;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:radial-gradient(rgba(110,74,40,.055) 1px, transparent 1.5px);
  background-size:24px 24px;
}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  box-shadow:inset 0 0 130px rgba(110,74,40,.15);}
.wrap{max-width:760px; margin:0 auto; padding:32px 20px 80px; position:relative; z-index:1;}
.display{font-family:'Grenze Gotisch',Georgia,serif;}
header{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; flex-wrap:wrap; gap:10px;}
header a.logo{text-decoration:none;}
header a.logo .display{font-size:1.65rem; font-weight:700; color:var(--wood-dk);
  text-shadow:0 1px 0 var(--gold-lt), 0 2px 0 var(--gold-dk);}
header a.logo small{display:block; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;}
nav a{color:var(--forest-dk); font-weight:800; font-size:.85rem; text-decoration:none; margin-left:14px;}
nav a:hover{text-decoration:underline; color:var(--gold-dk);}
h1{font-size:2.5rem; font-weight:700; margin-bottom:4px; color:var(--wood-dk);
  text-shadow:0 1px 0 var(--gold-lt), 0 3px 0 var(--gold-dk), 0 6px 14px rgba(58,42,22,.25);}
.updated{color:var(--ink-soft); font-size:.82rem; font-weight:700; margin-bottom:26px; font-style:italic;}
h2{font-size:1.24rem; margin:26px 0 8px; font-weight:800; color:var(--forest-dk);}
p, li{font-size:.95rem; font-weight:600; color:#54401F; margin-bottom:10px;}
ul{padding-left:22px;}
.card{
  background:linear-gradient(180deg,#FBF3DF,var(--parch));
  border:2.5px solid var(--wood); border-radius:14px;
  padding:22px; margin:14px 0;
  box-shadow:0 0 0 1px var(--gold) inset, 0 8px 22px rgba(58,42,22,.18);
}
a{color:var(--forest-dk); font-weight:700;}
footer{margin-top:48px; padding-top:18px; border-top:2px solid rgba(160,116,26,.4);
  font-size:.78rem; color:var(--ink-soft); font-weight:700;}
footer a{margin-right:12px;}
/* pricing */
.plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:26px 0;}
.plan{background:#FDF7E8; border:1.5px solid var(--wood-lt); border-radius:14px;
  padding:22px 18px; text-align:center; position:relative;
  box-shadow:0 5px 14px rgba(58,42,22,.16);}
.plan.pop{background:linear-gradient(180deg,#F2F6E7,#E1EAD2); border-color:var(--gold-dk);
  box-shadow:0 7px 18px rgba(58,42,22,.2), 0 0 20px rgba(65,128,79,.22);}
.plan .badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--berry),#7E2A24); color:#FBF3DD; font-size:.6rem;
  font-weight:800; letter-spacing:.12em; padding:4px 13px; border-radius:999px;
  text-transform:uppercase; border:1.5px solid var(--gold);}
.plan h3{font-family:'Grenze Gotisch'; font-size:1.6rem; color:var(--wood-dk);}
.price{font-size:2rem; font-weight:800; margin:6px 0; color:var(--ink);}
.price span{font-size:.9rem; color:var(--ink-soft);}
.plan ul{list-style:none; padding:0; text-align:left; margin:12px 0;}
.plan li{font-size:.84rem; font-weight:700;}
.cta{display:inline-block;
  background:linear-gradient(180deg,var(--forest-lt),var(--forest) 45%,var(--forest-dk));
  border:2px solid var(--gold-lt); border-radius:13px; padding:12px 24px;
  font-weight:800; color:#FBF3DD; text-decoration:none; letter-spacing:.03em;
  box-shadow:0 4px 0 var(--forest-dk), 0 0 0 1.5px var(--wood-dk), 0 8px 18px rgba(58,42,22,.26);
  text-shadow:0 1px 2px rgba(0,0,0,.3); transition:.1s;}
.cta:hover{filter:brightness(1.09);}
.cta:active{transform:translateY(3px); box-shadow:0 1px 0 var(--forest-dk), 0 0 0 1.5px var(--wood-dk);}