:root{
  --paper:#F8F1E4; --paper-2:#F0E4CF; --card:#FFFBF3;
  --ink:#3D2B22; --ink-soft:#6B5748; --line:#E3D3BA;
  --berry:#B0523C; --berry-deep:#8E3D2B; --gold:#D9A04A; --gold-soft:#EDC98A;
  --butter:#F7E8BC; --blush:#F5D9D1; --sky:#D9E6F0; --mint:#DEE9D7; --lilac:#E8DEEC; --oat:#EFE2CB;
  --display:"Fraunces", Georgia, serif; --label:600 .74rem/1.2 var(--body); --body:"Figtree", system-ui, sans-serif;
  --wobble:255px 18px 225px 18px / 18px 225px 18px 255px;
  --shadow:0 1px 0 rgba(61,43,34,.06), 0 10px 30px -14px rgba(61,43,34,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .22 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{text-wrap:balance;font-family:var(--display);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:-.01em;line-height:1.08;margin:0}
.eyebrow{font:var(--label);letter-spacing:.22em;text-transform:uppercase;color:var(--berry);margin:0 0 1rem;display:inline-flex;align-items:center;gap:.75rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.eyebrow.center::after{content:"";width:28px;height:1px;background:var(--gold)}
.eyebrow img{width:22px;height:auto}
.lede{font-size:1.12rem;color:var(--ink-soft);max-width:34rem}

/* hand-cut paper: the deckle filter roughens a pseudo-element so text stays crisp */
.paper{position:relative;isolation:isolate}
.paper::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg,var(--card));border-radius:6px;filter:url(#deckle)}

/* buttons */
.btn{--b:var(--berry);display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.45rem;border:2px solid var(--b);border-radius:var(--wobble);
  font:600 1rem/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s;white-space:nowrap}
.btn-solid{background:var(--b);color:#FFF8EE;box-shadow:3px 4px 0 var(--berry-deep)}
.btn-solid:hover{transform:translate(-1px,-2px) rotate(-.6deg);box-shadow:5px 6px 0 var(--berry-deep)}
.btn-ghost{background:transparent;color:var(--ink);--b:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);transform:rotate(.6deg)}
.btn svg{width:18px;height:18px;flex:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px dashed var(--gold);outline-offset:4px}

/* top ribbon + nav */
.ribbon{background:var(--ink);color:#F6EBDA;text-align:center;font-size:.88rem;padding:.5rem 16px;letter-spacing:.01em}
.ribbon a{color:var(--gold-soft);text-underline-offset:3px}
.ribbon .stars{color:var(--gold-soft);letter-spacing:.08em}
header.nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .3s}
header.nav.scrolled{border-bottom-color:var(--line)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.5rem;text-decoration:none}
/* the logo file has a white background; multiply drops the white into the paper */
.logo{mix-blend-mode:multiply}
.brand .logo{width:74px;height:auto;margin:-6px 0}
.brand .logo-lg{width:120px;margin:0}
.nav ul{display:flex;gap:1.7rem;list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;color:var(--ink-soft);position:relative}
.nav ul a:hover{color:var(--ink)}
.nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:6px;opacity:0;transition:opacity .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 C 25 2, 55 7, 98 3' fill='none' stroke='%23C99A45' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nav ul a:hover::after{opacity:1}
.nav .btn{padding:.65rem 1.1rem;font-size:.95rem}

/* hero */
.hero{padding:clamp(2rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero h1{font-size:clamp(2.6rem,6.2vw,4.9rem);font-weight:400}
.hero h1 em{font-style:italic;color:var(--berry);position:relative;white-space:nowrap}
.hero h1 em svg{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.hero .lede{margin:1.4rem 0 2rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.proof{display:flex;align-items:center;gap:.9rem;margin-top:2.2rem;color:var(--ink-soft);font-size:.95rem}
.proof .stars{color:var(--gold);font-size:1.15rem;letter-spacing:.1em}
.proof strong{color:var(--ink)}
.proof .note{font:italic 400 1.05rem/1.2 var(--display);color:var(--ink);padding-left:.9rem;border-left:1px solid var(--line)}

.stage{position:relative;aspect-ratio:1/1.02;max-width:560px;margin-inline:auto;width:100%}
.stage .blob{position:absolute;inset:6% 2% 4% 4%;--bg:var(--butter)}
.stage .blob::before{border-radius:46% 54% 50% 50% / 52% 46% 54% 48%}
.stage .bunting{position:absolute;top:1%;left:6%;width:88%;z-index:2;transform:rotate(-2deg)}
.stage .balloons{position:absolute;top:13%;left:-4%;width:30%;z-index:1;animation:bob 6s ease-in-out infinite}
.stage .present{position:absolute;right:-2%;bottom:5%;width:27%;z-index:4;transform:rotate(6deg)}
.stage .booties{position:absolute;left:0;bottom:4%;width:25%;z-index:4;transform:rotate(-7deg)}
.stage .confetti{position:absolute;width:30%;opacity:.85;z-index:2}
.stage .c1{top:14%;right:2%}.stage .c2{bottom:28%;left:-2%;width:24%}
.stage .spark{position:absolute;width:7%;z-index:5;animation:twinkle 3.4s ease-in-out infinite}
.stage .s1{top:22%;right:12%}.stage .s2{top:48%;left:9%;width:5%;animation-delay:1.2s}

/* the slot machine: reels sit in the painted windows */
.machine{position:absolute;left:22%;top:15%;width:56%;z-index:3;filter:drop-shadow(0 18px 18px rgba(80,50,20,.18))}
.machine>img{width:100%;position:relative;pointer-events:none}
.marquee{position:absolute;inset:0;pointer-events:none}
/* lever + hub, placed like the game does it (art.json, in the 1100x1517 machine) */
.machine .lever{position:absolute;left:89.73%;top:34.67%;width:10.09%;transform-origin:50% 107.9%;pointer-events:none}
.machine .hub{position:absolute;left:89.36%;top:56.43%;width:9.09%;pointer-events:none}
.machine .lever.pull{animation:pull 1.1s cubic-bezier(.4,0,.2,1)}
@keyframes pull{0%{transform:scaleY(1)}28%{transform:scaleY(-.82)}55%{transform:scaleY(-.82)}100%{transform:scaleY(1)}}
/* fits the cream panel between the bulb rows; the panel is centred at 46.5% because of the lever */
.marquee .logo{position:absolute;left:46.5%;top:16.6%;width:27%;height:auto;transform:translate(-50%,-50%)}
.reel{position:absolute;top:41.8%;height:21.6%;overflow:hidden;background:#FFF8EA;z-index:-1}
.reel.r1{left:18%;width:18.6%}
.reel.r2{left:37.4%;width:18.8%}
.reel.r3{left:57.3%;width:18.2%}
.strip{position:absolute;inset:0 0 auto 0;will-change:transform}
.strip img{width:100%;object-fit:contain}
.reel::after{content:"";position:absolute;inset:0;box-shadow:inset 0 14px 12px -8px rgba(90,60,30,.4),inset 0 -14px 12px -8px rgba(90,60,30,.4);pointer-events:none}
.spin-btn{position:absolute;right:-37%;top:21%;z-index:6;background:none;border:0;padding:0;cursor:pointer;font:italic 400 1.05rem/1.15 var(--display);color:var(--berry);text-align:left;transform:rotate(-4deg);text-shadow:0 0 6px var(--paper),0 0 3px var(--paper)}
.spin-btn svg{display:block;width:52px;height:40px;margin:2px 0 0 -12px}
.spin-btn:hover{color:var(--berry-deep)}
.jackpot-note{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%) rotate(-3deg) scale(.6);opacity:0;transition:all .45s cubic-bezier(.3,1.6,.5,1);
  font:italic 400 1.25rem/1 var(--display);color:var(--berry);white-space:nowrap;z-index:7}
.jackpot-note.show{opacity:1;transform:translateX(-50%) rotate(-3deg) scale(1)}

@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes twinkle{50%{transform:scale(.7) rotate(20deg);opacity:.6}}

/* occasions strip */
.occasions{border-block:1px dashed var(--line);background:var(--paper-2);overflow:hidden;padding:.9rem 0}
.occ-track{display:flex;gap:2.4rem;width:max-content;animation:drift 42s linear infinite;font:italic 300 1.3rem/1 var(--display);color:var(--ink-soft);letter-spacing:.01em}
.occ-track span{display:inline-flex;align-items:center;gap:2.4rem}
.occ-track span::after{content:"✦";color:var(--gold);font-size:.7rem;font-style:normal}
@keyframes drift{to{transform:translateX(-50%)}}

/* sections */
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.6rem;flex-wrap:wrap}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:17ch}
.sec-head p{margin:0;max-width:30rem;color:var(--ink-soft)}

/* occasion tiles */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem)}
.tile{--bg:var(--card);padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.tile:nth-child(odd){transform:rotate(-.6deg)}.tile:nth-child(even){transform:rotate(.7deg)}
.tile:hover{transform:translateY(-6px) rotate(0)}
.tile .art{aspect-ratio:4/3;margin:-.2rem -.2rem 1rem;border-radius:4px;position:relative}
.tile .art::before{content:"";position:absolute;inset:0;background:var(--tint);border-radius:50% 46% 52% 48%/48% 52% 46% 54%;filter:url(#deckle);transform:scale(.86)}
.tile .art img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:60%;max-height:78%;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.tile:hover .art img{transform:rotate(-5deg) scale(1.06)}
.tile h3{font-size:1.4rem;margin-bottom:.35rem}
.tile p{margin:0 0 1.1rem;color:var(--ink-soft);font-size:.96rem;line-height:1.5;flex:1}
.tile .links{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;font-weight:600;font-size:.93rem}
.tile .links a{text-decoration:none;display:inline-flex;align-items:center;gap:.3rem}
.tile .links a:first-child{color:var(--berry)}
.tile .links a:hover{text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--gold);text-underline-offset:4px}
.tile.custom{--bg:transparent;border:2px dashed var(--gold);border-radius:var(--wobble)}
.tile.custom::before{display:none}

/* best sellers */
.best{background:var(--paper-2);position:relative}
.best::before,.best::after{content:"";position:absolute;left:0;right:0;height:22px;background:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v8c-8 6-14 2-22 6s-12 7-20 3-14-6-22-1-13 6-21 2-12-5-19-1-11 5-16 2V0z'/%3E%3C/svg%3E") 0 0/240px 22px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 22' preserveAspectRatio='none'%3E%3Cpath d='M0 0h120v8c-8 6-14 2-22 6s-12 7-20 3-14-6-22-1-13 6-21 2-12-5-19-1-11 5-16 2V0z'/%3E%3C/svg%3E") 0 0/240px 22px repeat-x}
.best::before{top:0}.best::after{bottom:0;transform:scaleY(-1)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2.4rem)}
.feature{--bg:var(--card);display:grid;grid-template-columns:1fr 1.15fr;gap:1.4rem;padding:clamp(1.3rem,3vw,2.2rem);align-items:center}
.feature .art{position:relative;display:grid;place-items:center;padding:6% 8%}
.feature .art::before{content:"";position:absolute;inset:12% 0;background:var(--tint);border-radius:50%;filter:url(#deckle)}
.phone{position:relative;width:86%;max-width:240px;background:#2E231C;padding:6px;border-radius:24px;box-shadow:0 18px 30px -16px rgba(61,43,34,.55);transform:rotate(-3deg)}
.feature:nth-child(2) .phone{transform:rotate(3deg)}
.phone img{width:100%;border-radius:18px}
.phone::after{content:"";position:absolute;top:11px;left:50%;width:22%;height:5px;border-radius:5px;background:#2E231C;transform:translateX(-50%)}
.feature .badge{position:absolute;top:0;right:-4%;z-index:2;background:var(--berry);color:#FFF6EA;font:600 .58rem/1.25 var(--body);letter-spacing:.16em;text-transform:uppercase;padding:.55rem .7rem;border-radius:50%;
  aspect-ratio:1;display:grid;place-items:center;text-align:center;width:4.6rem;transform:rotate(12deg);box-shadow:2px 3px 0 var(--berry-deep)}
.feature h3{font-size:clamp(1.5rem,2.5vw,1.9rem);margin-bottom:.5rem}
.feature p{margin:0 0 .9rem;color:var(--ink-soft)}
.feature blockquote{margin:0 0 1.3rem;padding-left:.9rem;border-left:3px solid var(--gold-soft);font:500 1.08rem/1.45 var(--display);font-style:italic;color:var(--ink)}
.feature .cta-row{gap:.6rem}
.feature .cta-row .btn{padding:.65rem 1rem;font-size:.92rem}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,4vw,3.5rem);position:relative;counter-reset:s}
.steps .thread{position:absolute;top:44px;left:12%;right:12%;height:40px;z-index:0;pointer-events:none}
.step{position:relative;z-index:1;text-align:center;padding:0 .5rem}
.step .num{width:88px;height:88px;margin:0 auto 1.2rem;display:grid;place-items:center;position:relative}
.step .num::before{content:"";position:absolute;inset:0;background:var(--tint);border-radius:52% 48% 46% 54%/50% 54% 46% 50%;filter:url(#deckle)}
.step .num img{position:relative;width:62%}
.step .num i{position:absolute;top:-6px;right:-14px;font:italic 400 1.9rem/1 var(--display);color:var(--berry)}
.step h3{font-size:1.45rem;margin-bottom:.45rem}
.step p{margin:0 auto;color:var(--ink-soft);max-width:19rem}
.works-on{margin:3rem auto 0;text-align:center;font:italic 400 1.2rem/1.4 var(--display);color:var(--ink-soft)}
.works-on b{color:var(--berry);font-weight:500}

/* reviews */
.notes{columns:3 280px;column-gap:1.6rem}
.note-card{--bg:var(--card);break-inside:avoid;margin:0 0 1.6rem;padding:1.6rem 1.5rem 1.3rem;display:block}
.note-card:nth-child(3n+1){--bg:#FFF9EC;transform:rotate(-1deg)}
.note-card:nth-child(3n+2){--bg:#FDF3EF;transform:rotate(.8deg)}
.note-card:nth-child(3n){--bg:#F6F6EE;transform:rotate(-.4deg)}
.note-card .tape{position:absolute;top:-11px;left:50%;width:84px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(231,201,135,.55);
  clip-path:polygon(3% 8%,97% 0,100% 92%,2% 100%);mix-blend-mode:multiply}
.note-card .stars{color:var(--gold);letter-spacing:.12em;font-size:.95rem}
.note-card q{display:block;quotes:"“" "”";font:400 1.13rem/1.5 var(--display);margin:.5rem 0 .9rem}
.note-card cite{font:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-style:normal}
.reviews-foot{text-align:center;margin-top:1rem}

/* about */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.letter-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin-inline:auto}
.letter-art .blob{position:absolute;inset:4%;--bg:var(--blush)}
.letter-art .blob::before{border-radius:50% 46% 54% 50%/46% 54% 48% 52%}
.letter-art img{position:absolute}
.letter-art .l1{width:54%;left:20%;top:20%;transform:rotate(-4deg)}
.letter-art .l2{width:32%;right:6%;top:6%;transform:rotate(10deg)}
.letter-art .l3{width:30%;left:8%;bottom:10%}
.letter-art .l4{width:28%;right:12%;bottom:12%;transform:rotate(8deg)}
.about h2{font-size:clamp(2rem,4.2vw,3rem);margin-bottom:1.2rem}
.about p{color:var(--ink-soft);margin:0 0 1rem;max-width:34rem}
.signature{font:italic 400 2.1rem/1 var(--display);color:var(--berry);margin:1.4rem 0 1.8rem;display:inline-block}
.signature small{display:block;font:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6rem}

/* closing */
.closing{text-align:center;padding-top:0}
.closing .card{--bg:var(--ink);color:#F7EDDD;padding:clamp(2.6rem,6vw,4.5rem) clamp(1.4rem,4vw,3rem);overflow:hidden}
.closing h2{font-size:clamp(2.1rem,5vw,3.6rem);font-weight:400;margin-bottom:1rem}
.closing h2 em{color:var(--gold-soft)}
.closing p{color:#D9C8B2;max-width:34rem;margin:0 auto 2rem}
.closing .btn-solid{--b:var(--gold);color:var(--ink);box-shadow:3px 4px 0 #8C6A2A}
.closing .btn-ghost{--b:#F7EDDD;color:#F7EDDD}
.closing .btn-ghost:hover{background:#F7EDDD;color:var(--ink)}
.closing .cta-row{justify-content:center}
.closing .deco{position:absolute;width:120px;opacity:.95;pointer-events:none}
.closing .d1{left:-10px;top:18px;transform:rotate(-14deg)}
.closing .d2{right:-6px;bottom:10px;transform:rotate(12deg);width:130px}

footer{padding:2.6rem 0 3rem;color:var(--ink-soft);font-size:.93rem}
.foot{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:1.8rem}
.foot nav{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--berry)}

/* reveal on scroll */
.rise{opacity:0;translate:0 24px;transition:opacity .8s ease, translate .8s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;translate:0 0}

@media (max-width:980px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .duo{grid-template-columns:1fr}
  .nav ul{display:none}
}
@media (max-width:820px){
  .hero-grid,.about-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center}
  .hero-copy .eyebrow::after{content:"";width:28px;height:1px;background:var(--gold)}
  .hero .lede{margin-inline:auto}
  .cta-row,.proof{justify-content:center}
  .stage{max-width:440px}
  .steps{grid-template-columns:1fr;gap:2.2rem}
  .steps .thread{display:none}
  .letter-art{max-width:340px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .ribbon{font-size:.8rem}
  .brand .logo{width:60px}
  .nav .btn{padding:.55rem .85rem;font-size:.88rem}
  .tiles{grid-template-columns:1fr 1fr;gap:.8rem}
  .tile{padding:.9rem .85rem 1rem}
  .tile h3{font-size:1.12rem}
  .tile p{font-size:.86rem}
  .tile .links{flex-direction:column;font-size:.86rem}
  .feature{grid-template-columns:1fr;text-align:center}
  .feature .art{max-width:230px;margin-inline:auto}
  .feature blockquote{border-left:0;padding:0}
  .feature .cta-row{justify-content:center}
  .spin-btn{right:-31%;top:20%;font-size:.95rem}
  .spin-btn svg{width:44px;height:38px}
  .closing .deco{width:80px}.closing .d2{width:90px}
  .proof{flex-wrap:wrap;gap:.3rem .9rem}
  .proof .note{border-left:0;padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;translate:none}
}

/* ---------- product pages ---------- */
.crumbs{font-size:.88rem;color:var(--ink-soft);padding-top:1.4rem}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"›";margin-right:.4rem;color:var(--gold)}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--berry)}
.p-hero{padding:clamp(1.4rem,4vw,3rem) 0 clamp(3rem,6vw,5rem)}
.p-hero .hero-grid{grid-template-columns:1.08fr .92fr}
.p-hero h1{font-size:clamp(2.3rem,5.2vw,4.1rem);font-weight:400}
.p-hero h1 em{font-style:italic;color:var(--berry)}
.p-hero .lede{margin:1.3rem 0 1.5rem}
.price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;margin:0 0 1.6rem}
.price-line .price{font:500 2rem/1 var(--display);color:var(--ink)}
.price-line .meta{font:var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.p-hero .proof{margin-top:1.8rem}
.p-stage{position:relative;max-width:420px;margin-inline:auto;width:100%;padding:8% 10%}
.p-stage .blob{position:absolute;inset:4% 0 2%;--bg:var(--tint)}
.p-stage .blob::before{border-radius:46% 54% 50% 50% / 52% 46% 54% 48%}
.p-stage .phone{width:100%;max-width:300px;margin-inline:auto;transform:rotate(-2deg)}
.p-stage .deco{position:absolute;pointer-events:none;z-index:2}
.p-stage .d1{width:24%;left:-4%;bottom:6%;transform:rotate(-8deg)}
.p-stage .d2{width:12%;right:4%;top:6%;animation:twinkle 3.4s ease-in-out infinite}
.screen{position:relative;border-radius:18px;overflow:hidden;background:#FFF8EA}
.screen img{border-radius:0}
.screen iframe{position:absolute;left:0;top:0;width:390px;height:var(--fh,780px);border:0;transform-origin:0 0;background:#fff}
.play{position:absolute;inset:auto 0 9% 0;margin:auto;width:max-content;z-index:3;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--card);color:var(--berry);border:2px solid var(--berry);border-radius:var(--wobble);padding:.7rem 1.1rem;
  font:600 .95rem/1 var(--body);cursor:pointer;box-shadow:3px 4px 0 var(--berry-deep);transition:transform .2s}
.play:hover{transform:translate(-1px,-2px) rotate(-1deg)}
.play svg{width:14px;height:14px}
.stage-note{text-align:center;margin:1.1rem 0 0;font:italic 400 1.02rem/1.3 var(--display);color:var(--ink-soft)}
.stage-note a{color:var(--berry)}

.plays{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2vw,1.6rem);counter-reset:p}
.play-card{--bg:var(--card);padding:1.5rem 1.3rem 1.4rem;counter-increment:p}
.play-card:nth-child(odd){transform:rotate(-.5deg)}.play-card:nth-child(even){transform:rotate(.6deg)}
.play-card::after{content:counter(p);position:absolute;top:.6rem;right:1rem;font:italic 400 2.2rem/1 var(--display);color:var(--gold-soft)}
.play-card h3{font-size:1.3rem;margin:0 0 .5rem;padding-right:1.6rem}
.play-card p{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.55}

.yours{background:var(--paper-2);position:relative}
.yours-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.yours h2{font-size:clamp(1.9rem,4vw,2.8rem);margin-bottom:1.4rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.checks li{display:grid;grid-template-columns:1.4rem 1fr;gap:.4rem;align-items:baseline}
.checks li::before{content:"✦";color:var(--gold);font-size:.85rem}
.checks b{font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 2rem;padding:0;list-style:none}
.chips li{background:var(--card);border:1px solid var(--line);border-radius:var(--wobble);padding:.45rem .9rem;font-size:.93rem}
.variants{display:flex;flex-wrap:wrap;gap:.6rem}
.variants a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-weight:600;font-size:.93rem;color:var(--berry);
  border:1.5px dashed var(--gold);border-radius:var(--wobble);padding:.5rem .95rem;background:var(--card)}
.variants a:hover{border-style:solid}
.side-h{font:var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .9rem}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem}
.quotes .note-card{margin:0}

.faq{max-width:760px;margin-inline:auto}
.faq details{border-bottom:1px dashed var(--line);padding:1.05rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font:500 1.2rem/1.35 var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 1.6rem/1 var(--display);color:var(--berry);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:.7rem 0 .2rem;color:var(--ink-soft);max-width:44rem}

.related .tiles{grid-template-columns:repeat(3,1fr)}

@media (max-width:980px){
  .plays{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .p-hero .hero-grid,.yours-grid{grid-template-columns:1fr}
  .p-hero .hero-copy{text-align:left}
  .p-hero .hero-copy .eyebrow::after{display:none}
  .p-hero .cta-row,.p-hero .proof{justify-content:flex-start}
  .p-hero .lede{margin-inline:0}
  .p-stage{max-width:340px}
  .related .tiles{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .plays{grid-template-columns:1fr}
  .play-card{transform:none!important}
  .related .tiles{grid-template-columns:1fr 1fr}
  .faq summary{font-size:1.08rem}
}

/* every design, grouped (homepage) */
.dir{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,3vw,2.4rem)}
.dir h3{font:var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--berry);margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px dashed var(--line)}
.dir ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.dir a{text-decoration:none;font:500 1.08rem/1.3 var(--display);color:var(--ink)}
.dir a:hover{color:var(--berry);text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--gold);text-underline-offset:4px}
.dir small{display:block;font:400 .85rem/1.3 var(--body);color:var(--ink-soft);margin-top:.15rem}
.feature h3 a{text-decoration:none}
.feature h3 a:hover{color:var(--berry)}
@media (max-width:980px){.dir{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.dir{grid-template-columns:1fr}}

/* static templates: a printed photo instead of a phone */
.p-stage .print{position:relative;z-index:1;background:#FFFDF8;padding:10px 10px 34px;box-shadow:0 18px 30px -16px rgba(61,43,34,.5);transform:rotate(-2.5deg);max-width:340px;margin-inline:auto}
.p-stage .print img{width:100%}
.p-stage .print::after{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;transform:translateX(-50%) rotate(3deg);background:rgba(231,201,135,.6);clip-path:polygon(3% 8%,97% 0,100% 92%,2% 100%)}

/* =========================================================
   GRAPHIC REFRESH: a crisp, cute graphic-design-studio look
   built from the logo (coral script, butter rainbow, gold sparkles, taupe caps)
   ========================================================= */
:root{
  --paper:#FCF7EF; --paper-2:#F7EEDF; --card:#FFFFFF;
  --ink:#4A4038; --ink-soft:#776A5E; --line:#EADFCF;
  --berry:#E07A63; --berry-deep:#C25E48; --gold:#E9A84A; --gold-soft:#F6D58E;
  --butter:#FBEAC2; --blush:#FADCD3; --sky:#DCE9F3; --mint:#DDEADB; --lilac:#ECE1F0; --oat:#F3E7D5;
  --coral:#E07A63; --taupe:#6E665A;
  --wobble:999px;
  --r:22px;
  --sparkle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C13 8 16 11 24 12 16 13 13 16 12 24 11 16 8 13 0 12 8 11 11 8 12 0Z' fill='%23E9A84A'/%3E%3C/svg%3E");
}
body::after{opacity:.07}
h1,h2,h3{font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:500;letter-spacing:-.015em}
.hero h1,.p-hero h1,.closing h2{font-weight:450}

/* sparkles instead of gold rules */
.eyebrow{color:var(--coral);gap:.55rem}
.eyebrow::before,.eyebrow.center::after,.hero-copy .eyebrow::after{width:13px;height:13px;background:var(--sparkle) center/contain no-repeat}

/* crisp shapes: no torn edges, no tilts */
.paper::before{filter:none;border-radius:var(--r)}
.tile,.tile:nth-child(odd),.tile:nth-child(even),.play-card,.play-card:nth-child(odd),.play-card:nth-child(even){transform:none}
.tile:hover{transform:translateY(-5px)}
.stage .blob::before,.letter-art .blob::before,.p-stage .blob::before{border-radius:50%}
.tile .art::before,.step .num::before,.feature .art::before{filter:none}

/* pill buttons with a graphic offset shadow */
.btn{border-radius:999px;padding:.9rem 1.5rem}
.btn-solid{background:var(--coral);--b:var(--coral);box-shadow:0 4px 0 var(--berry-deep)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--berry-deep)}
.btn-ghost{--b:var(--ink);background:var(--card)}
.btn-ghost:hover{transform:translateY(-2px);background:var(--ink)}

/* top ribbon in the logo taupe */
.ribbon{background:var(--taupe)}
.ribbon a,.ribbon .stars{color:var(--gold-soft)}

/* occasion tiles become color-blocked cards */
.tile{--bg:var(--tint);padding:0 0 1.3rem;overflow:hidden}
.tile .art{margin:0 0 1rem;aspect-ratio:5/4}
.tile .art::before{display:none}
.tile .art img{max-width:58%;max-height:70%}
.tile h3,.tile p,.tile .links{padding:0 1.25rem}
.tile .links a:first-child{color:var(--berry-deep)}
.tile.custom{--bg:var(--card);border:2px dashed var(--gold);border-radius:var(--r)}

/* bands of color between sections */
.occasions{background:var(--coral);border:0}
.occ-track{color:#FFF6EE;font-weight:400}
.occ-track span::after{color:var(--gold-soft)}
.best{background:var(--butter)}
.best::before,.best::after{display:none}
.feature{--bg:var(--card)}
.feature .badge{background:var(--coral);box-shadow:0 3px 0 var(--berry-deep);font-size:.6rem}
.feature blockquote{border-left-color:var(--coral)}
#how{background:var(--blush)}
.step .num i{color:var(--berry-deep)}
.steps .thread path{stroke:#fff}
.note-card:nth-child(n){transform:none;--bg:var(--card)}
.note-card .tape{background:var(--gold-soft);opacity:.85}
.note-card .stars,.proof .stars{color:var(--gold)}
.yours{background:var(--mint)}
.chips li,.variants a{background:var(--card);border-radius:999px}

/* closing card in coral */
.closing .card{--bg:var(--coral);color:#FFF8F1}
.closing h2 em{color:var(--butter)}
.closing p{color:#FFE9DF}
.closing .btn-solid{--b:var(--card);background:var(--card);color:var(--berry-deep);box-shadow:0 4px 0 var(--berry-deep)}
.closing .btn-ghost{--b:#FFF8F1;color:#FFF8F1;background:transparent}
.closing .btn-ghost:hover{background:#FFF8F1;color:var(--berry-deep)}

/* product pages */
.price-line .price{color:var(--berry-deep)}
.play{border-radius:999px;box-shadow:0 3px 0 var(--berry-deep)}
.play-card::after{color:var(--coral);opacity:.55}
.p-stage .print{border-radius:6px}
.faq summary::after{color:var(--coral)}

/* shop grid with pictures (homepage "every design") */
.shop-cat{margin:0 0 2.6rem}
.shop-cat h3{font:var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--coral);margin:0 0 1.1rem;display:flex;align-items:center;gap:.55rem}
.shop-cat h3::before{content:"";width:13px;height:13px;background:var(--sparkle) center/contain no-repeat}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2vw,1.5rem)}
.pcard{display:block;text-decoration:none;color:var(--ink)}
.pcard .thumb{display:block;aspect-ratio:4/5;border-radius:var(--r);background:var(--tint);overflow:hidden;position:relative;margin-bottom:.75rem;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.pcard .thumb img{position:absolute;left:50%;top:9%;width:66%;transform:translateX(-50%) rotate(-2deg);border-radius:14px;box-shadow:0 14px 24px -14px rgba(74,64,56,.55);border:4px solid #fff}
.pcard .thumb.sq img{top:14%;width:74%;border-radius:6px}
.pcard:hover .thumb{transform:translateY(-4px)}
.pcard b{display:block;font:500 1.08rem/1.25 var(--display);font-variation-settings:"SOFT" 100}
.pcard small{color:var(--ink-soft);font-size:.88rem}
.pcard:hover b{color:var(--berry-deep)}
@media (max-width:980px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.shop-grid{grid-template-columns:1fr 1fr}}
#how .step .num::before{background:var(--card)}
#how .works-on b{color:var(--berry-deep)}

/* ---------- hand-drawn touches from the logo: rainbow arch, heart, sparkles ---------- */
:root{
  --arch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34'%3E%3Cpath d='M6 31A24 24 0 0 1 54 31' fill='none' stroke='%23E07A63' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M17 31A13 13 0 0 1 43 31' fill='none' stroke='%23F6D58E' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  --heart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C5 15.5 1.5 12 1.5 7.4 1.5 4 4 1.5 7.2 1.5c2 0 3.7 1 4.8 2.7C13.1 2.5 14.8 1.5 16.8 1.5 20 1.5 22.5 4 22.5 7.4 22.5 12 19 15.5 12 21Z' fill='%23E07A63'/%3E%3C/svg%3E");
}
/* a little rainbow sits on top of every centered section heading */
.sec-head[style*="center"] > div::before{content:"";display:block;width:58px;height:33px;margin:0 auto .9rem;background:var(--arch) center/contain no-repeat}
/* heart doodle after the reviews heading */
#kw-title::after{content:"";display:inline-block;width:.62em;height:.57em;margin-left:.25em;vertical-align:.32em;background:var(--heart) center/contain no-repeat;transform:rotate(12deg)}
/* sparkles around the price */
.price-line .price{position:relative;padding-right:.55em}
.price-line .price::after{content:"";position:absolute;right:-.05em;top:-.28em;width:.42em;height:.42em;background:var(--sparkle) center/contain no-repeat}
.price-line .price::before{content:"";position:absolute;right:.32em;top:-.5em;width:.24em;height:.24em;background:var(--sparkle) center/contain no-repeat;opacity:.8}
/* closing card: a rainbow over the headline */
.closing h2::before{content:"";display:block;width:74px;height:42px;margin:0 auto 1rem;background:var(--arch) center/contain no-repeat;filter:brightness(1.6) saturate(.6)}
/* footer: a row of tiny rainbows and sparkles */
footer{position:relative}
footer::before{content:"";display:block;height:20px;margin-bottom:1.6rem;opacity:.9;
  background:var(--arch) 0 50%/34px 19px repeat-x;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.foot{border-top:0;padding-top:0}