:root {
            --beige:    #F0EAD6;
            --tan:      #D2B48C;
            --tan-dk:   #b8956a;
            --rose:     #BC4749;
            --rose-dk:  #9b3a3c;
            --rose-lt: #f5e0e0;
            --teal:     #70A3A7;
            --teal-dk:  #4e7d80;
            --teal-lt:  #e8f2f3;
            --charcoal: #403B33;
            --charcoal-lt:#5a5449;
            /* Freebie-specific warm accent */
            --amber:    #e8a838;
            --amber-dk: #c47f00;
            --amber-lt: #fff8ec;
        }

        body {
            font-family:'Inter',sans-serif;
            background:var(--beige);
            color:var(--charcoal);
            overflow-x:hidden;
        }

        [data-theme="dark"]{--beige:#1e1c1a;--tan:#8a6d50;--tan-dk:#6b4f37;--rose:#d45f61;--rose-dk:#b54345;--rose-lt:#2a1a1a;--teal:#5a8f93;--teal-dk:#3f6e71;--teal-lt:#111e1f;--charcoal:#e8e0d0;--charcoal-lt:#b0a898;--amber:#c98b30;--amber-dk:#a06a00;--amber-lt:#1e1a10;}
        [data-theme="dark"] body{background:#181614;}
        [data-theme="dark"] .site-header{background:rgba(24,22,20,.97);}
        [data-theme="dark"] .main-nav{background:#1e1c1a;}
        [data-theme="dark"] .main-nav a{color:var(--charcoal-lt);border-color:rgba(240,234,214,.05);}
        [data-theme="dark"] .page-hero{background:linear-gradient(-45deg,#1e1c1a,#252220,#1a1814,#1e1a10,#1e1c1a) !important;}
        [data-theme="dark"] .includes-section,[data-theme="dark"] .pages-section,[data-theme="dark"] .ideas-section{background:#1e1c1a;}
        [data-theme="dark"] .how-section{background:#181614;}
        [data-theme="dark"] .inc-card,[data-theme="dark"] .how-card,[data-theme="dark"] .idea-card{background:#252220;}
        [data-theme="dark"] .page-card{background:#252220;}
        [data-theme="dark"] .more-section{background:#252220;}
        [data-theme="dark"] .includes-section .section-title,[data-theme="dark"] .pages-section .section-title,[data-theme="dark"] .ideas-section .section-title,[data-theme="dark"] .how-section .section-title,[data-theme="dark"] .more-section h2{color:#f0ead6 !important;}
        .theme-toggle{background:none;border:1.5px solid rgba(64,59,51,.18);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:1rem;line-height:1;color:var(--charcoal);transition:background .15s;flex-shrink:0;}
        .theme-toggle:hover{background:var(--beige);}
        /* Mobile nav */
        @media(max-width:860px){.header-nav .btn-back,.header-nav .btn-hub{display:none;}.nav-toggle{display:block;}}

            @keyframes logo-shift {
            0%{color:var(--tan)} 33%{color:var(--rose)} 66%{color:var(--teal)} 100%{color:var(--tan)}
        }

        /* ══ HEADER ══ */
            .site-header {
            position:sticky; top:0; z-index:50;
            background:rgba(255,255,255,0.96); backdrop-filter:blur(12px);
            border-bottom:1px solid rgba(64,59,51,0.08);
            box-shadow:0 2px 16px rgba(64,59,51,0.07);
        }
            .header-inner {
            max-width:1100px; margin:0 auto; padding:0 24px; height:68px;
            display:flex; justify-content:space-between; align-items:center;
        }
        .header-nav { display:flex; align-items:center; gap:8px; }
        .btn-back {
            font-size:0.88rem; font-weight:600; color:var(--charcoal-lt);
            padding:8px 14px; border-radius:8px; transition:background 0.15s,color 0.15s;
        }
        .btn-back:hover { background:var(--beige); color:var(--charcoal); }
        .btn-hub {
            background:var(--rose); color:white; font-weight:700; font-size:0.88rem;
            padding:9px 18px; border-radius:10px; box-shadow:0 3px 0 var(--rose-dk);
            transition:background 0.2s,transform 0.1s;
        }
        .btn-hub:hover { background:var(--rose-dk); transform:translateY(-1px); }

        /* ══ FREE BANNER ══ */
        .free-banner {
            background:linear-gradient(90deg, var(--teal-dk), var(--teal), var(--teal-dk));
            background-size:200% 100%;
            animation:shimmer 4s ease-in-out infinite;
            padding:12px 24px; text-align:center;
        }
        @keyframes shimmer { 0%,100%{background-position:0%} 50%{background-position:100%} }
        .free-banner p {
            font-size:0.9rem; font-weight:700; color:white; letter-spacing:0.04em;
            display:flex; align-items:center; justify-content:center; gap:10px;
        }
        .free-pill {
            background:white; color:var(--teal-dk);
            font-size:0.7rem; font-weight:800; letter-spacing:0.08em;
            text-transform:uppercase; padding:3px 10px; border-radius:999px;
        }

        /* ══ HERO ══ */
        .page-hero {
            background:linear-gradient(-45deg,var(--beige),#e8d5c0,#f5e8d0,var(--amber-lt),var(--beige));
            background-size:400% 400%;
            animation:bgwave 18s ease-in-out infinite;
            padding:64px 24px 80px; position:relative; overflow:hidden;
        }
        @keyframes bgwave { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

        /* Floating crayons / art items */
        .float-art {
            position:absolute; font-size:var(--sz,2rem); opacity:0.18;
            animation:float-a var(--dur,7s) var(--del,0s) ease-in-out infinite alternate;
            pointer-events:none;
        }
        @keyframes float-a {
            from{transform:translateY(0) rotate(0deg)}
            to{transform:translateY(var(--ty,-16px)) rotate(var(--rot,12deg))}
        }

        .hero-inner {
            max-width:1000px; margin:0 auto; position:relative; z-index:1;
            display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
        }
        @media(max-width:720px){ .hero-inner{grid-template-columns:1fr;gap:32px;text-align:center;} .hero-cover{order:-1;} }

        /* Cover mockup */
        .hero-cover { position:relative; }
        .cover-img {
            width:100%; max-width:340px; margin:0 auto; border-radius:16px;
            box-shadow:10px 16px 40px rgba(64,59,51,0.18), -4px -4px 0 0 var(--tan);
            transition:transform 0.3s,box-shadow 0.3s;
        }
        .cover-img:hover { transform:rotate(-1deg) scale(1.02); box-shadow:16px 24px 52px rgba(64,59,51,0.24),-4px -4px 0 0 var(--tan); }
        @media(max-width:720px){ .cover-img{max-width:260px;} }

        /* FREE badge, bold and visible */
        .free-badge {
            position:absolute; top:-18px; right:-14px;
            background:var(--rose); color:white;
            font-family:'Fredoka',cursive; font-size:1.3rem; font-weight:700;
            width:72px; height:72px; border-radius:50%;
            display:flex; flex-direction:column; align-items:center; justify-content:center;
            line-height:1.1;
            box-shadow:0 4px 18px rgba(188,71,73,0.4);
            animation:badge-pop 2s ease-in-out infinite alternate;
        }
        @keyframes badge-pop {
            from{transform:scale(1) rotate(-8deg)}
            to{transform:scale(1.07) rotate(-5deg)}
        }
        .free-badge small { font-size:0.6rem; font-weight:700; letter-spacing:0.06em; opacity:0.85; }
        @media(max-width:720px){ .free-badge{right:calc(50% - 140px);} }

        /* Hero text */
        .hero-tag {
            display:inline-block; font-size:0.72rem; font-weight:700;
            letter-spacing:0.12em; text-transform:uppercase; color:var(--teal-dk);
            border:1.5px solid var(--teal); border-radius:999px;
            padding:4px 14px; margin-bottom:14px;
        }
        .hero-title {
            font-family:'Fredoka',cursive;
            font-size:clamp(2rem,5vw,3.4rem); font-weight:700; color:var(--charcoal);
            line-height:1.1; margin-bottom:14px;
        }
        .hero-title span { color:var(--rose); }
        .hero-sub {
            font-size:1.05rem; color:var(--charcoal-lt); line-height:1.7;
            margin-bottom:28px; max-width:440px;
        }
        @media(max-width:720px){ .hero-sub{margin:0 auto 28px;} }

        /* What's included pills */
        .includes-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
        @media(max-width:720px){ .includes-row{justify-content:center;} }
        .inc-pill {
            display:inline-flex; align-items:center; gap:7px;
            font-size:0.82rem; font-weight:600; color:var(--charcoal);
            background:white; border:1.5px solid rgba(64,59,51,0.12);
            border-radius:999px; padding:7px 16px;
            box-shadow:0 2px 8px rgba(64,59,51,0.06);
        }

        /* Download button, BIG and obvious */
        .btn-download {
            display:inline-flex; align-items:center; gap:10px;
            background:var(--teal-dk); color:white;
            font-weight:800; font-size:1.1rem;
            padding:16px 32px; border-radius:14px;
            box-shadow:0 5px 0 #2e4a4d;
            transition:transform 0.12s,box-shadow 0.12s,filter 0.15s;
            margin-bottom:12px; width:100%; max-width:360px; justify-content:center;
        }
        .btn-download:hover { filter:brightness(1.1); transform:translateY(-2px); box-shadow:0 7px 0 #2e4a4d; }
        .btn-download:active{ transform:translateY(3px); box-shadow:0 2px 0 #2e4a4d; }
        @media(max-width:720px){ .btn-download{max-width:100%;} }
        .btn-preview-link {
            display:inline-flex; align-items:center; gap:8px;
            background:white; color:var(--charcoal); font-weight:700; font-size:1rem;
            padding:13px 28px; border-radius:13px; border:2px solid var(--tan);
            box-shadow:0 3px 0 var(--tan-dk);
            transition:background 0.15s,transform 0.12s,box-shadow 0.12s;
            width:100%; max-width:360px; justify-content:center;
        }
        .btn-preview-link:hover { background:var(--beige); transform:translateY(-2px); box-shadow:0 5px 0 var(--tan-dk); }
        .btn-preview-link:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--tan-dk); }
        .hero-ctas { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
        @media(max-width:720px){ .hero-ctas{align-items:center;} }
        .download-note { font-size:0.78rem; color:var(--charcoal-lt); display:flex; align-items:center; gap:5px; }

        /* ══ WHAT'S INSIDE ══ */
        .inside-section { padding:72px 24px; background:white; }
        .section-inner { max-width:1000px; margin:0 auto; }
        .section-tag-teal {
            display:inline-block; font-size:0.7rem; font-weight:700;
            letter-spacing:0.12em; text-transform:uppercase; color:var(--teal-dk);
            border:1.5px solid var(--teal); border-radius:999px; padding:4px 14px; margin-bottom:14px;
        }
            .section-title {
            font-size:clamp(1.7rem,4vw,2.4rem); font-weight:900; color:var(--charcoal);
            margin-bottom:10px; line-height:1.15;
        }
        .section-sub { font-size:1rem; color:var(--charcoal-lt); line-height:1.65; margin-bottom:44px; max-width:560px; }

        /* Page preview cards */
        .pages-grid {
            display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px;
        }
        .page-card {
            background:var(--beige); border-radius:16px; overflow:hidden;
            box-shadow:0 4px 16px rgba(64,59,51,0.08);
            transition:transform 0.22s,box-shadow 0.22s;
            position:relative;
        }
        .page-card:hover { transform:translateY(-5px) rotate(0.5deg); box-shadow:0 14px 32px rgba(64,59,51,0.14); }
        .page-card-art {
            width:100%; aspect-ratio:3/4;
            display:flex; align-items:center; justify-content:center;
            font-size:4rem; position:relative; overflow:hidden;
        }
        /* Simulated colouring page look */
        .page-card-art::before {
            content:'';
            position:absolute; inset:0;
            background:white;
        }
        .page-card-art .page-emoji {
            position:relative; z-index:1;
            filter:drop-shadow(0 2px 8px rgba(64,59,51,0.15));
        }
        /* Crayon stroke border effect */
        .page-card::after {
            content:'';
            position:absolute; inset:4px;
            border:3px dashed rgba(64,59,51,0.08);
            border-radius:12px; pointer-events:none;
        }
        .page-card-label {
            padding:12px 14px; text-align:center;
            font-size:0.82rem; font-weight:700; color:var(--charcoal-lt);
        }
        /* Colour indicator dots */
        .colour-dots {
            display:flex; gap:5px; justify-content:center; margin-top:4px;
        }
        .colour-dot { width:12px; height:12px; border-radius:50%; }

        /* ══ HOW TO USE ══ */
        .how-section { padding:72px 24px; background:var(--beige); }
        .how-grid {
            max-width:900px; margin:40px auto 0;
            display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;
        }
        .how-card {
            background:white; border-radius:16px; padding:28px 20px; text-align:center;
            box-shadow:0 4px 16px rgba(64,59,51,0.07);
            position:relative;
            transition:transform 0.2s;
        }
        .how-card:hover { transform:translateY(-4px); }
        .how-num {
            position:absolute; top:-14px; left:50%; transform:translateX(-50%);
            background:var(--rose); color:white;
            font-family:'Fredoka',cursive; font-size:1rem; font-weight:700;
            width:32px; height:32px; border-radius:50%;
            display:flex; align-items:center; justify-content:center;
            box-shadow:0 3px 0 var(--rose-dk);
        }
        .how-icon  { font-size:2.2rem; margin:14px 0 10px; }
        .how-title { font-size:0.95rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .how-desc  { font-size:0.8rem; color:var(--charcoal-lt); line-height:1.5; }

        /* ══ BIG DOWNLOAD CTA ══ */
        .download-cta {
            padding:80px 24px;
            background:var(--teal-dk); position:relative; overflow:hidden;
            text-align:center;
        }
        .download-cta::before {
            content:'🎨'; position:absolute; right:-10px; top:50%;
            transform:translateY(-50%) rotate(15deg);
            font-size:220px; opacity:0.07; pointer-events:none;
        }
        .download-cta::after {
            content:'✏️'; position:absolute; left:-10px; bottom:-20px;
            transform:rotate(-20deg);
            font-size:160px; opacity:0.06; pointer-events:none;
        }
        .cta-inner { max-width:640px; margin:0 auto; position:relative; z-index:1; }
        .cta-inner .section-tag-teal { border-color:rgba(255,255,255,0.4); color:rgba(255,255,255,0.8); }
        .cta-inner h2 { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:white; margin-bottom:14px; }
        .cta-inner p  { font-size:1rem; color:rgba(255,255,255,0.8); line-height:1.7; margin-bottom:32px; }
        .btn-dl-big {
            display:inline-flex; align-items:center; justify-content:center; gap:12px;
            background:white; color:var(--teal-dk);
            font-weight:800; font-size:1.15rem;
            padding:18px 40px; border-radius:16px;
            box-shadow:0 5px 20px rgba(0,0,0,0.2);
            transition:transform 0.12s,box-shadow 0.12s,filter 0.15s;
            margin-bottom:14px;
        }
        .btn-dl-big:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,0.25); filter:brightness(1.02); }
        .btn-dl-big:active{ transform:translateY(2px); box-shadow:0 2px 10px rgba(0,0,0,0.15); }
        .cta-note { font-size:0.82rem; color:rgba(255,255,255,0.55); margin-top:8px; }

        /* ══ WHAT TO DO WITH IT ══ */
        .ideas-section { padding:72px 24px; background:white; }
        .ideas-grid {
            max-width:900px; margin:40px auto 0;
            display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px;
        }
        .idea-card {
            background:var(--beige); border-radius:16px; padding:24px 20px; text-align:center;
            border-bottom:3px solid var(--tan-dk);
            transition:transform 0.2s,box-shadow 0.2s;
        }
        .idea-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(64,59,51,0.1); }
        .idea-card:nth-child(2){ border-color:var(--rose); }
        .idea-card:nth-child(3){ border-color:var(--teal-dk); }
        .idea-card:nth-child(4){ border-color:var(--amber-dk); }
        .idea-icon  { font-size:2.2rem; margin-bottom:10px; }
        .idea-title { font-size:0.95rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .idea-desc  { font-size:0.8rem; color:var(--charcoal-lt); line-height:1.5; }

        /* ══ DISCOVER MORE ══ */
        .more-section { padding:64px 24px; background:var(--beige); border-top:2px solid rgba(64,59,51,0.06); }
        .more-inner { max-width:900px; margin:0 auto; }
        .more-inner h2 { font-size:1.5rem; font-weight:900; color:var(--charcoal); text-align:center; margin-bottom:32px; }
        .more-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
        .more-card {
            background:white; border-radius:14px; overflow:hidden;
            box-shadow:0 4px 16px rgba(64,59,51,0.08);
            transition:transform 0.2s,box-shadow 0.2s; display:flex; flex-direction:column;
        }
        .more-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(64,59,51,0.14); }
        .more-card img { width:100%; aspect-ratio:3/4; object-fit:cover; }
        .more-placeholder {
            width:100%; aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; font-size:3rem;
        }
        .more-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
        .more-title { font-size:0.9rem; font-weight:800; color:var(--charcoal); margin-bottom:6px; }
        .more-cta   { margin-top:auto; font-size:0.82rem; font-weight:700; color:var(--teal-dk); }

        /* ══ FOOTER ══ */
        .footer-brand{display:flex;flex-direction:column;gap:6px;}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.skip-link:focus{left:50%;transform:translateX(-50%);top:8px;width:auto;height:auto;padding:10px 20px;background:#BC4749;color:white;font-weight:700;font-size:.9rem;border-radius:8px;z-index:9999;text-decoration:none;white-space:nowrap}
body{background:var(--beige);color:var(--charcoal)}
/* mobile-nav cascade fix */
.reveal{opacity:1!important;transform:none!important}