/* ============================================================
   PETITE GENIUS ACADEMY — FUNNEL SITE  ·  shared stylesheet
   ------------------------------------------------------------
   TO RESKIN FOR A NEW CHANNEL: edit ONLY the BRAND BLOCK below
   (colors, fonts, name). Then swap the copy + logo + links in
   the HTML files. Everything else stays the same.
   ============================================================ */

/* ⬇⬇⬇ BRAND BLOCK — the only part that changes per channel ⬇⬇⬇ */
:root{
  /* palette (from STYLE_GUIDE.md "Warm Scholarship") */
  --cream:      #FBF4E6;   /* page background */
  --paper:      #fbf1d9;   /* warmer panels */
  --amber:      #F4B740;   /* highlight / sun */
  --teal:       #5FB3A1;   /* growth / calm */
  --terra:      #e8612a;   /* CTA accent — used for EVERY button */
  --rosy:       #ff8fa8;   /* hearts / soft accents */
  --ink:        #14233A;   /* headings */
  --brown:      #5a3b1f;   /* outlines + body text */
  --brown-soft: #6b4a2a;

  /* type */
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-hand: 'Patrick Hand', 'Comic Sans MS', cursive;  /* storybook accent */

  /* shape (rounded everything, storybook) */
  --radius-card: 22px;
  --radius-pill: 999px;
  --shadow: 0 16px 40px rgba(90,59,31,.14);
  --shadow-sm: 0 6px 0 rgba(90,59,31,.16);
}
/* ⬆⬆⬆ END BRAND BLOCK ⬆⬆⬆ */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}

/* paper grain — fixed, never on scrolling containers */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px;}
.narrow{max-width:720px;margin:0 auto;padding:0 22px;}

/* ---------- header ---------- */
.site-head{padding:22px 0;}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.brand .crest{font-size:26px;}
.brand .name{font-family:var(--font-hand);font-size:24px;font-weight:400;letter-spacing:.3px;}

/* ---------- type ---------- */
h1{font-size:clamp(34px,5.2vw,58px);line-height:1.05;font-weight:800;letter-spacing:-.5px;color:var(--ink);}
h2{font-size:clamp(26px,3.4vw,38px);line-height:1.12;font-weight:800;letter-spacing:-.3px;color:var(--ink);}
h3{font-size:21px;font-weight:700;color:var(--ink);}
p{color:var(--brown);}
.lead{font-size:clamp(18px,2vw,21px);color:var(--brown-soft);max-width:34ch;}
.hand{font-family:var(--font-hand);}
.tag{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-hand);font-size:18px;
  background:var(--amber);color:var(--brown);padding:6px 16px;border-radius:var(--radius-pill);
  border:2px solid var(--brown);box-shadow:0 4px 0 rgba(90,59,31,.18);
}

/* ---------- buttons (ALL CTAs use --terra) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:700;font-size:18px;line-height:1;white-space:nowrap;
  background:var(--terra);color:#fff;border:3px solid var(--brown);
  padding:16px 28px;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 rgba(90,59,31,.18);}
.btn:active{transform:translateY(1px);box-shadow:0 3px 0 rgba(90,59,31,.18);}
.btn.full{width:100%;}
.btn.ghost{background:#fff;color:var(--ink);}
.link-quiet{display:inline-block;color:var(--brown-soft);text-decoration:underline;font-size:16px;}
.link-quiet:hover{color:var(--terra);}

/* ---------- forms ---------- */
.optin{display:flex;flex-direction:column;gap:12px;max-width:440px;}
.optin .row{display:flex;gap:10px;flex-wrap:wrap;}
.optin input[type=email]{
  flex:1;min-width:200px;font-family:var(--font-body);font-size:17px;color:var(--ink);
  background:#fff;border:3px solid var(--brown);border-radius:var(--radius-pill);
  padding:15px 20px;
}
.optin input[type=email]::placeholder{color:#9c876a;}
.optin input[type=email]:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 4px rgba(232,97,42,.18);}
.formnote{font-size:14px;color:var(--brown-soft);}

/* ---------- sections ---------- */
section{padding:64px 0;}
.section-sm{padding:44px 0;}
.eyebrow{font-family:var(--font-hand);font-size:20px;color:var(--terra);margin-bottom:8px;}

/* hero */
.hero{padding:30px 0 56px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;}
.hero-art{display:flex;justify-content:center;}
.hero-art svg{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 18px 22px rgba(122,74,26,.18));}

/* benefit list (not generic 3 equal cards) */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:18px 34px;}
.benefit{display:flex;gap:14px;align-items:flex-start;}
.benefit .dot{flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--paper);border:3px solid var(--brown);font-size:22px;}
.benefit h3{margin-bottom:2px;font-size:18px;}
.benefit p{font-size:15.5px;}

/* panels / cards */
.panel{background:#fff;border:3px solid var(--brown);border-radius:var(--radius-card);box-shadow:var(--shadow);padding:34px;}
.panel-cream{background:var(--paper);}
.center{text-align:center;}
.center .lead{margin-inline:auto;}

/* offer (tripwire / product) */
.offer{background:var(--paper);border:3px solid var(--brown);border-radius:var(--radius-card);
  box-shadow:var(--shadow);padding:36px;max-width:620px;margin:0 auto;}
.price{display:flex;align-items:baseline;gap:12px;margin:14px 0 6px;}
.price .now{font-size:46px;font-weight:800;color:var(--ink);line-height:1;}
.price .was{font-size:22px;color:var(--brown-soft);text-decoration:line-through;}
.price .note{font-family:var(--font-hand);font-size:18px;color:var(--terra);}
.check{list-style:none;display:grid;gap:11px;margin:20px 0 26px;}
.check li{display:flex;gap:11px;align-items:flex-start;font-size:16.5px;color:var(--ink);}
.check li::before{content:"✓";flex:none;width:26px;height:26px;border-radius:50%;background:var(--teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;border:2px solid var(--brown);}

/* testimonial */
.quote{max-width:680px;margin:0 auto;text-align:center;}
.quote p{font-size:clamp(20px,2.5vw,26px);color:var(--ink);line-height:1.35;font-weight:600;}
.quote .who{font-size:15px;color:var(--brown-soft);margin-top:14px;}

/* footer */
.site-foot{background:var(--ink);color:#fdf3df;padding:48px 0 38px;margin-top:30px;}
.site-foot a{color:var(--amber);text-decoration:none;}
.site-foot a:hover{text-decoration:underline;}
.foot-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;}
.foot-brand{font-family:var(--font-hand);font-size:24px;}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;}
.foot-fine{font-size:12.5px;color:#cbb89a;margin-top:26px;max-width:60ch;line-height:1.5;}
.foot-esw{font-size:14px;color:#fdf3df;margin-top:10px;}

/* gentle entrance — visible by default, animates only when motion is allowed.
   (reduced-motion users see full content, never a blank opacity:0 state) */
@media (prefers-reduced-motion: no-preference){
  .fade{opacity:0;transform:translateY(16px);animation:rise .7s cubic-bezier(.16,1,.3,1) forwards;}
  .fade.d1{animation-delay:.08s;} .fade.d2{animation-delay:.16s;} .fade.d3{animation-delay:.24s;}
  @keyframes rise{to{opacity:1;transform:translateY(0);}}
}

/* ---------- mobile ---------- */
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:30px;}
  .hero-art{order:-1;}
  .hero-art svg{max-width:320px;}
  .benefits{grid-template-columns:1fr;}
  .lead{max-width:none;}
  section{padding:48px 0;}
}