:root { --accent: #ef5b48; --peach: #fff1e6; --yellow: #f5bd43; --turquoise: #20aaa0; }
body { background: #fffaf5; }
.hero { position: relative; overflow: hidden; padding: clamp(4.5rem,9vw,8rem) 0 5rem; background: linear-gradient(130deg,#fff8ef 0 62%,#cbeee8 62%); }
.hero::before { content:""; position:absolute; inset:0; opacity:.12; background-image: radial-gradient(#12233a 1px,transparent 1px); background-size:18px 18px; mask-image:linear-gradient(to right,#000,transparent 56%); }
.hero-grid { position: relative; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(3rem,7vw,7rem); align-items:center; }
.hero-copy h1 { margin:0; font:800 clamp(3.6rem,7vw,6.7rem)/.88 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif; letter-spacing:-.055em; color:var(--navy); }
.hero-copy h1 em { display:block; color:var(--accent); font-family:Georgia,serif; font-size:.69em; font-weight:500; line-height:1.02; letter-spacing:-.04em; transform:rotate(-1deg); }
.hero .eyebrow { color:#a13a2e; }
.lede { max-width:650px; margin:1.6rem 0; font-size:1.16rem; color:#42576c; }
.hero-actions { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 12px 28px rgba(239,91,72,.25); }
.btn-primary:hover { box-shadow:0 17px 34px rgba(239,91,72,.32); }
.btn-secondary { border:1px solid rgba(18,35,58,.2); background:#fff; color:var(--navy); }
.text-link { font-weight:800; color:var(--navy); text-underline-offset:4px; }
.mini-proof { display:flex; align-items:center; gap:.7rem; margin-top:1.8rem; }
.mini-proof .avatar { display:grid; place-items:center; width:42px; height:42px; background:var(--navy); color:#fff; border-radius:50%; font-size:.73rem; font-weight:900; }
.mini-proof strong,.mini-proof small { display:block; }.mini-proof small { color:var(--muted); }
.hero-visual { position:relative; min-height:540px; display:grid; place-items:center; }
.sun { position:absolute; width:410px; height:410px; border-radius:50%; background:var(--yellow); right:4%; top:7%; }
.note-card { position:relative; z-index:2; width:min(420px,88%); min-height:460px; padding:2.2rem; background:#fffdf8; box-shadow:0 35px 70px rgba(18,35,58,.18); transform:rotate(2deg); border:1px solid rgba(18,35,58,.1); }
.note-card::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(transparent 0 37px,rgba(14,124,155,.11) 38px); pointer-events:none; }
.note-label { position:relative; margin:0; font-size:.72rem; font-weight:900; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); }
.handwritten { position:relative; margin:1rem 0 1.4rem; font:italic 1.48rem/1.38 Georgia,serif; color:var(--navy); }
.photo-wrap { position:relative; width:150px; height:150px; margin-left:auto; border-radius:50%; border:8px solid #fff; box-shadow:0 10px 25px rgba(18,35,58,.18); overflow:hidden; transform:rotate(-4deg); }
.photo-wrap img { width:100%; height:100%; object-fit:cover; }
.signature { position:relative; margin:.2rem 1rem 0 0; text-align:right; font:italic 1.5rem Georgia,serif; }
.price-sticker { position:absolute; z-index:3; right:-1rem; bottom:1.7rem; display:grid; place-items:center; width:132px; height:132px; background:var(--accent); color:#fff; border:7px solid #fff8ef; border-radius:50%; transform:rotate(-8deg); box-shadow:0 12px 25px rgba(18,35,58,.2); line-height:1; }
.price-sticker s { font-size:.75rem; opacity:.7; }.price-sticker strong { font-size:2.2rem; }.price-sticker span { font-size:.67rem; text-transform:uppercase; letter-spacing:.09em; }
.flower { position:absolute; color:var(--turquoise); font-size:4rem; }.flower-a { left:3%; bottom:1%; }.flower-b { right:-1%; top:3%; color:var(--accent); font-size:2rem; }
.hero-scribble { position:absolute; z-index:2; font:italic 1rem Georgia,serif; color:#a13a2e; transform:rotate(-10deg); }.scribble-one { right:39%; top:12%; }.scribble-two { right:3%; bottom:5%; transform:rotate(8deg); }
.story { background:var(--navy); color:#fff; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,7vw,7rem); }
.story h2 { margin:0; font:800 clamp(2.7rem,5vw,4.7rem)/.95 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif; letter-spacing:-.05em; }
.story .eyebrow { color:#75d7ce; }.story-copy { font-size:1.05rem; color:rgba(255,255,255,.76); }
.ink-note { margin-top:1.5rem; padding:1.2rem 1.4rem; border-left:4px solid var(--yellow); background:rgba(255,255,255,.07); color:#fff; font-family:Georgia,serif; font-style:italic; }
.curriculum { background:#fffaf5; }.curriculum .eyebrow { color:#a13a2e; }
.cycle-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7,1fr); }
.cycle-list li { position:relative; min-height:190px; padding:1.1rem; border:1px solid rgba(18,35,58,.13); border-right:0; background:#fff; }
.cycle-list li:first-child { border-radius:1rem 0 0 1rem; }.cycle-list li:last-child { border-right:1px solid rgba(18,35,58,.13); border-radius:0 1rem 1rem 0; background:var(--peach); }
.cycle-list li:not(:last-child)::after { content:"→"; position:absolute; z-index:2; right:-.65rem; top:1rem; display:grid; place-items:center; width:1.3rem; height:1.3rem; border-radius:50%; background:var(--turquoise); color:#fff; font-size:.7rem; }
.cycle-list li>span { color:var(--accent); font-weight:900; font-size:.72rem; }.cycle-list div { margin-top:3rem; }.cycle-list strong,.cycle-list small { display:block; }.cycle-list strong { font-size:1.1rem; }.cycle-list small { margin-top:.3rem; color:var(--muted); line-height:1.3; }
.bonus-ribbon { display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; margin-top:1.2rem; padding:1rem; background:#cbeee8; border-radius:.8rem; }.bonus-ribbon span { padding:.28rem .6rem; background:#fff; border-radius:99px; font-size:.8rem; font-weight:750; }
.desk-section { background:#f2cfcb; overflow:hidden; }.desk-grid { display:grid; grid-template-columns:.88fr 1.12fr; align-items:center; gap:5rem; }
.desk-card { position:relative; padding:2.4rem; background:#fffdf8; border-radius:.4rem; box-shadow:var(--shadow); transform:rotate(-1deg); }.desk-card h2 { margin:.2rem 0 1.2rem; font:800 clamp(2.4rem,4vw,4rem)/.96 "Bahnschrift SemiCondensed","Arial Narrow",sans-serif; letter-spacing:-.04em; }.desk-card li { margin:.7rem 0; }.paperclip { position:absolute; top:-1.2rem; left:2rem; font-size:4rem; color:var(--navy); transform:rotate(18deg); }
.sample-stack { position:relative; min-height:430px; }.sample { position:absolute; padding:1.4rem; background:#fff; box-shadow:0 22px 45px rgba(18,35,58,.2); }.sample.form { inset:4% 16% 6% 4%; transform:rotate(4deg); background:#fffaf5; border:2px solid #ee5b70; }.sample.form b { color:#ee5b70; }.sample.form i { display:block; height:42px; margin-top:10px; border:1px solid #ef9cad; background:repeating-linear-gradient(90deg,transparent 0 36px,#ef9cad 37px); }.sample.checklist { right:0; top:14%; width:220px; transform:rotate(-6deg); background:#caf1e5; }.sample.checklist p { font-weight:750; }.sample.tab { left:0; bottom:0; width:155px; transform:rotate(-8deg); background:var(--yellow); font-weight:900; text-align:center; }.sample.tab strong { font-size:3rem; }
.reviews { background:#fff; }.review-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:1.2rem; }.quote-card { padding:2rem; border:1px solid var(--line); border-radius:1rem; background:#fffaf5; font-family:Georgia,serif; font-size:1.15rem; }.quote-card:first-child { background:var(--navy); color:#fff; }.quote-card footer { font:700 .8rem "Segoe UI",sans-serif; }.quote-card footer span { opacity:.65; font-weight:500; }
.pricing { background:#fff3e8; }.pricing .featured { background:var(--navy); color:#fff; box-shadow:var(--shadow); }.pricing .product-card:not(.featured) { background:#fff; border:1px solid var(--line); }.featured .eyebrow { color:#75d7ce; }.featured ul { color:rgba(255,255,255,.76); }.featured .price s { font-size:1rem; opacity:.55; }.best { position:absolute; top:-.7rem; right:1.2rem; padding:.35rem .75rem; border-radius:99px; background:var(--yellow); color:var(--navy); font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.faq { background:#fffaf5; }.faq .eyebrow { color:#a13a2e; }
@media(max-width:900px){.hero{background:linear-gradient(155deg,#fff8ef 0 60%,#cbeee8 60%)}.hero-grid,.story-grid,.desk-grid{grid-template-columns:1fr}.hero-visual{min-height:500px}.cycle-list{grid-template-columns:1fr 1fr}.cycle-list li,.cycle-list li:first-child,.cycle-list li:last-child{border:1px solid var(--line);border-radius:.7rem;min-height:130px}.cycle-list li:not(:last-child)::after{display:none}.cycle-list div{margin-top:1.5rem}.review-grid{grid-template-columns:1fr}.hero-scribble{display:none}}
@media(max-width:520px){.hero{padding-top:3.6rem}.hero-copy h1{font-size:3.35rem}.hero-visual{min-height:450px}.note-card{padding:1.5rem;min-height:400px}.sun{width:340px;height:340px}.price-sticker{right:-.4rem;width:110px;height:110px}.cycle-list{grid-template-columns:1fr}.cycle-list li{min-height:105px}.sample-stack{min-height:360px}.desk-card{padding:2rem 1.4rem}.bonus-ribbon{align-items:flex-start;flex-direction:column}.hero-actions{align-items:stretch;flex-direction:column}.text-link{text-align:center}}