@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');
:root{--ink:#193f38;--muted:#52655e;--cream:#fffaf0;--yellow:#f8cb58;--orange:#cd5435;--green:#1e5749;--serif:'Fraunces',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--cream);color:var(--ink);font:16px/1.65 var(--sans)}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:6px}button{font:inherit;cursor:pointer}header{max-width:1320px;margin:auto;height:116px;padding:0 5%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-size:15px;line-height:1.05;font-weight:700;letter-spacing:-.5px}.brand-sun{font-size:48px;color:var(--orange);font-weight:400}.brand-jack{display:block;font:700 37px/.85 var(--serif);letter-spacing:-2px}nav{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:600}.nav-button{border:1px solid #244b4140;padding:10px 20px;border-radius:30px}.nav-button span{padding-left:16px}.hero{position:relative;max-width:1400px;margin:auto;background:#f8edcf;padding:70px max(5%,calc((100% - 1140px)/2)) 75px;display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:65px;overflow:hidden;border-radius:6px 6px 80px 80px}.eyebrow,.section-label{font:600 11px/1.5 var(--sans);letter-spacing:2px}.eyebrow{display:flex;align-items:center;gap:9px}.dot{height:7px;width:7px;border-radius:50%;background:var(--orange)}h1{font:500 clamp(46px,5.3vw,76px)/1.08 var(--serif);letter-spacing:-3px;margin:24px 0}em{font-weight:500;color:var(--orange)}.hero-copy>p{font-size:17px;max-width:510px;color:var(--muted)}.actions{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin:30px 0}.button{display:inline-flex;gap:22px;align-items:center;padding:15px 24px;border-radius:50px;font-size:14px;font-weight:600}.primary{background:var(--green);color:#fffaf0;box-shadow:0 4px 0 #103e32}.button:hover{background:#123e33;transform:translateY(-1px)}.text-link{font-size:14px;font-weight:600;border-bottom:1px solid #193f3850;padding:5px 0}.hero-note{display:flex;gap:10px;font-size:12px;color:var(--muted);margin-top:35px}.hero-note span{color:var(--orange)}.hero-art{position:relative;max-width:380px;margin:0 auto;width:100%;padding:10px 0}.art-paper{height:445px;overflow:hidden;border:10px solid white;border-radius:170px 170px 12px 12px;transform:rotate(4deg);box-shadow:12px 15px 0 #e6cd97}.art-paper img{width:100%;height:100%;object-fit:cover;object-position:center 42%}.sunshine{position:absolute;z-index:2;top:-18px;left:-40px;background:var(--yellow);width:105px;height:105px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;text-align:center;font-size:10px;font-weight:700;line-height:1.4;letter-spacing:1px;transform:rotate(-14deg)}.sunshine span{font-size:20px;line-height:1.2}.art-caption{position:absolute;bottom:-15px;right:-25px;z-index:2;background:#fffaf0;border:1px solid #193f3830;box-shadow:3px 4px 0 #193f3815;border-radius:5px;padding:13px 23px;transform:rotate(-5deg);font:500 19px var(--serif)}.art-caption span{color:var(--orange);padding-left:15px}.hero-bottom{position:absolute;bottom:18px;left:0;width:100%;text-align:center;font-size:9px;letter-spacing:3px;color:#6c7767}.section{max-width:1200px;margin:auto;padding:95px 40px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;margin-top:20px}h2{font:500 clamp(32px,3.7vw,49px)/1.16 var(--serif);letter-spacing:-1.7px;margin:0 0 25px}p{margin:0 0 18px}.large{font-size:21px;line-height:1.5}.intro-grid p:not(.large),.create-copy>p{color:var(--muted)}.qualities{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.qualities span{font-size:10px;letter-spacing:.3px;border:1px solid #193f3825;border-radius:30px;padding:6px 12px}.story-section{background:#dce8dd;position:relative}.story-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px;align-items:center}.story-heading h2{margin-top:25px}.story-heading p{color:var(--muted);max-width:330px}.read-time{font-size:10px;letter-spacing:2px;display:block;margin-top:30px}.storybook{background:#fffdf6;padding:30px 35px 20px;box-shadow:6px 6px 0 #b9cbbc;border-radius:10px;min-height:530px;display:flex;flex-direction:column;position:relative}.book-top{display:flex;justify-content:space-between;letter-spacing:2px;font-size:9px;color:var(--muted)}.story-symbol{font-size:64px;color:var(--orange);line-height:1;margin:25px 0 10px;text-align:center}.storybook h3{text-align:center;font:500 27px var(--serif);margin:10px 0 22px}.storybook p{font-size:16px;line-height:1.65}.book-controls{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #193f3825;padding-top:18px;margin-top:auto;gap:15px}.book-controls button{border:1px solid #193f3840;background:transparent;color:var(--ink);width:39px;height:39px;border-radius:50%;flex-shrink:0}.book-controls button:disabled{opacity:.3;cursor:default}.book-controls span{font-size:11px;text-align:center;color:var(--muted)}.create-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.color-preview{position:relative;justify-self:center;max-width:280px;transform:rotate(-7deg);background:white;padding:12px;box-shadow:4px 9px 25px #193f3820}.color-preview img{display:block;width:100%;height:auto}.free-tag{position:absolute;right:-40px;bottom:35px;background:var(--yellow);padding:18px;border-radius:50%;font:500 18px/1.2 var(--serif);text-align:center;transform:rotate(16deg)}.create-copy h2{margin-top:22px}.small{font-size:12px}.family-note{margin:0 auto 75px;max-width:1120px;border-top:1px solid #193f3820;border-bottom:1px solid #193f3820;padding:40px;display:flex;gap:35px;align-items:center;justify-content:center;text-align:left}.family-note>span{font:70px var(--serif);color:var(--orange)}.family-note h2{font-size:29px;letter-spacing:-.8px;margin-bottom:10px}.family-note p{color:var(--muted);font-size:14px;margin:0}footer{background:var(--green);color:var(--cream);padding:45px max(5%,calc((100% - 1120px)/2)) 25px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-brand{font:500 25px var(--serif)}footer p,footer>a:last-of-type{font-size:12px;margin:0}.footer-bottom{width:100%;border-top:1px solid #fffaf035;padding-top:20px;margin-top:20px;font-size:10px;display:flex;justify-content:space-between;gap:20px;color:#e2e8da}.skip{position:fixed;z-index:20;top:-100px;left:10px;background:white;padding:12px}.skip:focus{top:10px}@media(min-width:1450px){.hero{padding-left:100px;padding-right:100px}}@media(max-width:900px){.hero{gap:35px;padding:45px 5% 65px}.art-paper{height:380px}.sunshine{left:-18px}.art-caption{right:-5px;font-size:16px}h1{font-size:52px}.intro-grid,.story-layout,.create-section{gap:45px}.section{padding:70px 30px}.storybook{padding:25px;min-height:590px}}@media(max-width:640px){header{height:90px;padding:0 6%}.brand-sun{font-size:34px}.brand{font-size:12px}.brand-jack{font-size:30px}nav{gap:18px;font-size:12px}nav>a:first-child{display:none}.nav-button{padding:8px 12px}.nav-button span{display:none}.hero{grid-template-columns:1fr;gap:35px;padding:38px 7% 65px;border-radius:0 0 40px 40px}.eyebrow{font-size:9px;letter-spacing:1.5px}h1{font-size:52px;letter-spacing:-2.4px}.hero-copy>p{font-size:16px}.hero-note{margin-top:20px}.hero-art{max-width:295px;margin-top:5px}.art-paper{height:350px}.sunshine{width:86px;height:86px;font-size:8px;left:-20px}.art-caption{bottom:-14px}.hero-bottom{font-size:8px;letter-spacing:2px}.actions{gap:20px;margin:24px 0}.button{padding:13px 18px;font-size:13px;gap:15px}.text-link{font-size:12px}.section{padding:60px 7%}.intro-grid,.story-layout,.create-section{grid-template-columns:1fr;gap:28px}.large{font-size:20px}.story-heading p{max-width:100%}.storybook{min-height:525px;padding:25px}.storybook h3{font-size:25px}.create-section{gap:50px}.create-copy{grid-row:1}.color-preview{width:240px}.family-note{margin:0 7% 50px;padding:30px 0;gap:20px}.family-note h2{font-size:25px}.family-note>span{font-size:50px}.footer-bottom{flex-direction:column;gap:8px}footer{padding:35px 7% 25px}.desktop{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Frame Jack's illustration without clipping the printed title. */
.art-paper{border-radius:14px;height:auto}.art-paper img{display:block;width:100%;height:auto;object-fit:contain}.hero-art{max-width:335px}@media(max-width:640px){.hero-art{max-width:265px}}
