/* Beginbud — site styles.
   Palette + type lifted verbatim from assets/home.html :root and the app's
   Infra/DesignSystem/Palette.swift, so the site and the app are one system. */

:root{
  --paper:#F5EFDF; --grid:#DCD3BE; --ink:#2C271F; --inkSoft:#7A6F5D;
  --sage:#5E9A54; --sageDeep:#33583C; --honey:#F4A62A; --cheek:#E28D77;
  --coral:#EC6D53; --peri:#93A8DE;
  --card:#FAF6EA; --shell:#EDE3D0; --bodyFill:#ACD25E; --budVein:#E0F1B4;
  --glass:#E9EFE4; --wood:#D9BE92; --woodDark:#B99C6C;
  --shadow:rgba(44,39,31,.16); --graphite:#C6B893;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ color-scheme:light; scroll-behavior:smooth; }

body{
  background:var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:26px 26px;
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:760px; margin:0 auto; padding:0 22px; }

svg,img{ max-width:100%; height:auto; }

/* ---------- type ---------- */
h1,h2,h3,p,li{ overflow-wrap:break-word; }
h1,h2,h3{ font-family:'Caveat',cursive; font-weight:700; line-height:1.15; }
h1{ font-size:clamp(34px,8vw,64px); letter-spacing:.5px; }
h2{ font-size:clamp(30px,5vw,38px); margin-bottom:14px; }
h3{ font-size:26px; margin-bottom:4px; }
p{ margin-bottom:16px; }
a{ color:var(--sageDeep); text-decoration-thickness:1.5px; text-underline-offset:3px; }
a:hover{ color:var(--coral); }
strong{ font-weight:800; }
small{ font-size:14px; color:var(--inkSoft); }

.eyebrow{
  font-size:12px; font-weight:800; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--inkSoft); margin-bottom:8px;
}
.lede{ font-size:20px; color:var(--inkSoft); }

/* ---------- the sketch card: hard offset shadow, wobbly radius ---------- */
.card{
  background:var(--card);
  border:2.5px solid var(--ink);
  border-radius:18px 22px 16px 20px / 20px 16px 22px 18px;
  box-shadow:5px 6px 0 var(--shadow);
  padding:24px 26px;
}
.card + .card{ margin-top:18px; }

.grid3{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr)); }
.grid3 .card{ margin-top:0; }

/* ---------- hero ---------- */
header.hero{ padding:60px 0 30px; text-align:center; }
.sprout{ width:170px; height:auto; display:block; margin:0 auto 6px; }
.hero h1{ margin-bottom:10px; }
.hero .lede{ max-width:30ch; margin:0 auto 26px; }

.btn{
  display:inline-block;
  font-family:'Caveat',cursive; font-size:26px; font-weight:700;
  background:var(--coral); color:var(--paper);
  border:2.5px solid var(--ink);
  border-radius:16px 20px 14px 18px / 18px 14px 20px 16px;
  box-shadow:4px 5px 0 var(--shadow);
  padding:9px 30px 12px; text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ color:var(--paper); transform:translate(-1px,-2px); box-shadow:6px 8px 0 var(--shadow); }
.btn:active{ transform:translate(2px,3px); box-shadow:2px 2px 0 var(--shadow); }
.btn-note{ display:block; margin-top:12px; font-size:14px; color:var(--inkSoft); }

/* ---------- sections ---------- */
section{ padding:36px 0; }
section > h2{ text-align:center; }
.section-lede{ text-align:center; max-width:52ch; margin:0 auto 26px; color:var(--inkSoft); }

/* numbered steps */
ol.steps{ list-style:none; counter-reset:step; }
ol.steps li{
  counter-increment:step; position:relative;
  padding-left:56px; margin-bottom:22px;
}
ol.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:-2px;
  width:38px; height:38px; display:grid; place-items:center;
  font-family:'Caveat',cursive; font-size:24px; font-weight:700;
  background:var(--card); color:var(--ink);
  border:2.5px solid var(--ink);
  border-radius:50% 48% 52% 50% / 50% 52% 48% 50%;
  box-shadow:2px 3px 0 var(--shadow);
}
ol.steps li h3{ margin-bottom:2px; }
ol.steps li p{ margin-bottom:0; color:var(--inkSoft); }

/* pull-quote — the anti-shame promise */
.promise{
  font-family:'Caveat',cursive; font-size:30px; line-height:1.3;
  text-align:center; color:var(--sageDeep);
  border-left:none; padding:8px 0;
}

/* FAQ */
.faq h3{ margin-top:0; }
.faq .card p:last-child{ margin-bottom:0; }
.faq .card{ margin-top:14px; }

/* prose pages (privacy / support) */
.prose{ padding:44px 0 20px; }
.prose h2{ text-align:left; margin-top:34px; }
.prose ul{ margin:0 0 16px 22px; }
.prose li{ margin-bottom:7px; }
.prose .card ul{ margin-bottom:0; }
.updated{ font-size:14px; color:var(--inkSoft); margin-bottom:26px; }

.backlink{
  display:inline-block; margin-bottom:22px;
  font-family:'Caveat',cursive; font-size:21px; text-decoration:none;
}

/* footer */
footer{
  margin-top:26px; padding:30px 0 44px;
  border-top:2.5px dashed var(--grid);
  text-align:center; font-size:15px; color:var(--inkSoft);
}
footer a{ margin:0 9px; display:inline-block; }
.footer-mark{ font-family:'Caveat',cursive; font-size:24px; color:var(--ink); display:block; margin-bottom:8px; }

/* ---------- motion ---------- */
@keyframes breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.02) } }
@keyframes blink{ 0%,91%,100%{ transform:scaleY(1) } 94%{ transform:scaleY(.08) } 97%{ transform:scaleY(1) } }
@keyframes sparkGlow{
  0%,100%{ filter:drop-shadow(0 0 1px rgba(244,166,42,.3)) }
  50%{ filter:drop-shadow(0 0 7px rgba(244,166,42,.75)) }
}
.sprout .body{ animation:breathe 2.5s ease-in-out infinite; transform-origin:195px 398px; }
.sprout .eyes{ animation:blink 5.2s ease-in-out infinite; transform-origin:195px 390px; transform-box:view-box; }
.spark{ animation:sparkGlow 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

@media (max-width:520px){
  body{ font-size:16px; }
  header.hero{ padding:40px 0 20px; }
  .card{ padding:20px 20px; }
}

/* =========================================================================
   COSMETICS — art + rarity chips lifted from assets/cosmetics.html
   ========================================================================= */

.collection{ padding-top:14px; }

.cosgrid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr));
}

.cos{
  position:relative;
  background:var(--card);
  border:2px solid var(--ink);
  border-radius:16px 13px 17px 12px / 13px 17px 12px 16px;
  box-shadow:3px 4px 0 var(--shadow);
  padding:10px 10px 13px;
  transition:transform .18s ease, box-shadow .18s ease;
}
.cos:hover{ transform:translate(-1px,-3px) rotate(-.5deg); box-shadow:5px 7px 0 var(--shadow); }
.cos svg{ display:block; width:100%; height:auto; overflow:visible; }
.cos .iname{
  font-family:'Caveat',cursive; font-size:21px; font-weight:700;
  line-height:1.05; margin-top:5px;
}
.cos .islot{ font-size:11.5px; color:var(--inkSoft); margin-top:2px; line-height:1.35; }

/* rarity chips — same scheme as the cosmetics sheet */
.chip{
  position:absolute; top:8px; right:8px; z-index:2;
  font-family:'Caveat',cursive; font-size:15px; font-weight:700; line-height:1;
  border:1.6px solid var(--ink); padding:2px 8px 3px;
  border-radius:9px 11px 8px 10px / 10px 8px 11px 9px;
  background:var(--shell);
}
.chip.rare{ background:var(--peri); }
.chip.epic{ background:var(--coral); color:var(--card); }
.chip.legendary{ background:var(--honey); animation:sparkGlow 2.6s ease-in-out infinite; }
.chip.seasonal{ background:var(--sage); color:var(--card); }

/* undiscovered — the pencil silhouette the collection board shows pre-pull */
.cos.locked svg *{
  fill:none !important; stroke:var(--graphite) !important;
  stroke-width:2 !important; animation:none !important; filter:none !important;
}
.cos.locked{ background:var(--paper); box-shadow:3px 4px 0 rgba(44,39,31,.08); border-style:dashed; }
.cos.locked .iname,
.cos.locked .islot{ color:var(--graphite); }
.cos.locked .chip{ background:transparent; color:var(--graphite); border-color:var(--graphite); }

/* string-lights swag used as a section divider */
.swag{ display:block; width:100%; max-width:520px; margin:0 auto -8px; height:auto; }

/* =========================================================================
   SIDE RAILS — cosmetics drifting in the empty margins on wide screens
   ========================================================================= */

.rail{
  position:fixed; top:0; bottom:0; width:calc((100vw - 790px) / 2);
  pointer-events:none; z-index:0; overflow:hidden;
}
.rail.left{ left:0; }
.rail.right{ right:0; }
.rail figure{ position:absolute; width:168px; opacity:.85; }
.rail svg{ width:100%; height:auto; overflow:visible; }

.rail .a{ top:7vh;  left:10%;  animation:driftA 9s ease-in-out infinite; }
.rail .b{ top:31vh; left:42%;  width:134px; animation:driftB 11s ease-in-out infinite; }
.rail .c{ top:55vh; left:6%;   width:150px; animation:driftA 12s ease-in-out infinite 1.4s; }
.rail .d{ top:78vh; left:38%;  width:126px; animation:driftB 10s ease-in-out infinite .8s; }

@keyframes driftA{ 0%,100%{ transform:translateY(0) rotate(-2deg) } 50%{ transform:translateY(-16px) rotate(2deg) } }
@keyframes driftB{ 0%,100%{ transform:translateY(0) rotate(2.5deg) } 50%{ transform:translateY(-13px) rotate(-2.5deg) } }

/* the rails only exist where there's genuinely empty margin to fill */
@media (max-width:1280px){ .rail{ display:none; } }

/* keyframes the cosmetic art itself references (from cosmetics.html) */
@keyframes boil{
  0%,100%{ transform:translate(0,0) rotate(0) }
  25%{ transform:translate(.35px,-.3px) rotate(.12deg) }
  50%{ transform:translate(-.3px,.35px) rotate(-.12deg) }
  75%{ transform:translate(.3px,.3px) rotate(.1deg) }
}
@keyframes cloudFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
@keyframes lampFlicker{ 0%,100%{ opacity:.55 } 50%{ opacity:.72 } }
@keyframes moteFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }
@keyframes steam{ 0%{ opacity:0; transform:translateY(2px) } 40%{ opacity:.7 } 100%{ opacity:0; transform:translateY(-8px) } }
.cos .boil{ animation:boil 1.25s linear infinite; }