:root{
  color-scheme:light;
  --paper:#FFEEF4;
  --card:#FFFFFF;
  --ink:#3B0A22;
  --ink-soft:#8A4A66;
  --brand:#F8015C;
  --lilac:#F8015C;
  --mint:#FFC9DC;
  --pink:#FF8FB8;
  --line:#FFD3E2;
  --skin:#F6C9A0;
  --btn-ink:#FFFFFF;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
body{position:relative;z-index:0}
html{background:#FFEEF4;scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:500 17px/1.55 "Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1{font-family:"Unbounded","Arial Black",system-ui,sans-serif;line-height:1.1;margin:0}
h2,h3{font-family:"Montserrat",system-ui,sans-serif;letter-spacing:-.01em;line-height:1.1;margin:0}
a{color:inherit}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
section{padding:56px 0}
img,svg{max-width:100%}

/* hero */
.hero{padding:32px 0 48px;margin-top:-80px;padding-top:112px;position:relative;isolation:isolate}
.hero-grid{display:grid;gap:24px;align-items:center}
.topbar{
  position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:50;
  margin:12px 12px 0;border-radius:20px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px}
.brand{display:block;width:104px;height:auto}
.top-cta{padding:10px 16px;border-radius:12px;background:var(--brand);color:#FFFFFF;text-decoration:none;font-weight:600;font-size:15px}
.top-cta:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar{background:rgba(255,255,255,.92)}}
@media (min-width:1064px){.topbar{max-width:1016px;margin:12px auto 0}}
h1{font-size:clamp(34px,8vw,64px);font-weight:800;letter-spacing:-.02em;max-width:12ch}
.hand{font-family:"Shantell Sans","Comic Sans MS","Segoe Print",cursive;font-weight:800;letter-spacing:0}
h1 .hand{display:block;color:var(--brand);font-size:1.08em;transform:rotate(-3deg);transform-origin:left center;margin-top:.08em}
footer h2.cta-title{font-weight:800;color:var(--brand);font-size:clamp(30px,7vw,48px);transform:rotate(-2deg)}
.lead{font-size:19px;font-weight:500;color:var(--ink-soft);max-width:34ch;margin:18px 0 28px}
.socials{display:flex;flex-direction:column;gap:10px;width:100%}
.btn{
  display:flex;align-items:center;gap:12px;justify-content:center;
  padding:16px 20px;border-radius:16px;text-decoration:none;font-weight:600;font-size:17px;
  color:var(--ink);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);
  transition:transform .12s;
}
.btn.main{background:var(--brand);color:#FFFFFF;border-color:var(--brand);}
.ico{display:grid;place-items:center;flex:none}
.ico svg{width:24px;height:24px;display:block}
.btn:focus-visible,summary:focus-visible{outline:3px solid var(--lilac);outline-offset:3px}

.stage{display:flex;justify-content:center}
.hero-fig{width:min(62vw,300px);height:auto}
.fig-swing{transform-origin:50% 2%;animation:swing 4s ease-in-out 1.5s infinite}
@keyframes swing{0%,100%{transform:rotate(0deg)}25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.fig-swing{animation:none}}

/* steps */
h2{font-size:clamp(26px,5.5vw,40px);font-weight:800;margin-bottom:28px}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:14px;counter-reset:s}
.steps li{
  counter-increment:s;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);border-radius:20px;
  padding:22px 22px 22px 78px;position:relative;
}
.steps li::before{
  content:counter(s);position:absolute;left:20px;top:22px;width:40px;height:40px;border-radius:14px;
  display:grid;place-items:center;font:800 18px "Montserrat",sans-serif;color:var(--brand);
  border:1px solid rgba(255,255,255,.9);
}
.steps li:nth-child(1)::before{background:#FFC2D6;border-color:#FFC2D6;color:#C2004A}
.steps li:nth-child(2)::before{background:#FFC2D6;border-color:#FFC2D6;color:#C2004A}
.steps li:nth-child(3)::before{background:#F8015C;border-color:#F8015C;color:#FFFFFF}
.steps h3{font-size:19px;margin-bottom:6px}
.steps p{margin:0;color:var(--ink-soft)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tile{aspect-ratio:3/4;border-radius:20px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);overflow:hidden;}
.tile:nth-child(1){background:var(--mint)}
.tile:nth-child(2){background:var(--pink)}
.tile:nth-child(3){background:var(--brand)}
.tile img{width:100%;height:100%;object-fit:cover;display:block}
.note{font-size:14px;color:var(--ink-soft);margin-top:12px}

/* charms */
.charms{display:flex;flex-wrap:wrap;gap:10px}
.charm{padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);font-weight:500}

/* prices */
.prices{display:grid;gap:0;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);border-radius:20px;overflow:hidden}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:18px 22px;border-top:1px solid rgba(248,1,92,.12)}
.row:first-child{border-top:0}
.price-link{color:var(--brand);font-weight:700;white-space:nowrap}
.row b{font-family:"Montserrat",sans-serif;font-weight:700;white-space:nowrap}

/* delivery */
.np{display:grid;gap:16px;background:var(--brand);color:#FFFFFF;border-radius:20px;padding:28px 24px}
.np h2{margin:0;color:#FFFFFF}
.np p{margin:0;color:#FFFFFF;opacity:.9;font-weight:500}
.np-logo{display:block;height:44px;width:auto;margin-bottom:18px}

/* faq */
details{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);border-radius:16px;margin-bottom:10px}
summary{cursor:pointer;list-style:none;padding:18px 60px 18px 20px;font-weight:600;position:relative}
summary::-webkit-details-marker{display:none}
summary{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
summary::before,summary::after{
  content:"";position:absolute;right:22px;top:calc(50% - 1.5px);width:18px;height:3px;border-radius:3px;
  background:var(--brand);will-change:transform;backface-visibility:hidden;
  transition:transform .4s cubic-bezier(.65,0,.35,1);
}
summary::before{transform:rotate(90deg)}
summary::after{transform:rotate(0deg)}
details[open] summary::before{transform:rotate(180deg)}
details[open] summary::after{transform:rotate(180deg)}
details.closing summary::before{transform:rotate(90deg)}
details.closing summary::after{transform:rotate(0deg)}
@media (prefers-reduced-motion:reduce){summary::before,summary::after{transition:none}}
details{overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);transform:translateZ(0)}
details p{margin:0;padding:0 20px 18px;color:var(--ink-soft)}

/* safari: keep radius on blurred/clipped elements, no square tap flash */
a,button,summary{-webkit-tap-highlight-color:transparent}
.btn,.top-cta,.prices,.tile,.topbar,.steps li,.charm,.np{
  isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);
}
.btn,.top-cta{transition:transform .18s cubic-bezier(.22,1,.36,1)}
.btn:active,.top-cta:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.btn,.top-cta{transition:none}.btn:active,.top-cta:active{transform:none}}

/* page-load sequence */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-40px)}to{opacity:1;transform:none}}
@keyframes scribble{0%{opacity:0;transform:rotate(-12deg) scale(.6)}60%{opacity:1;transform:rotate(-1deg) scale(1.06)}100%{opacity:1;transform:rotate(-3deg) scale(1)}}
@keyframes hang{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
.topbar{animation:drop .6s cubic-bezier(.22,1,.36,1) both}
h1 .l1{display:inline-block;animation:rise .7s cubic-bezier(.22,1,.36,1) .15s both}
h1 .hand{animation:scribble .7s cubic-bezier(.34,1.56,.64,1) .45s both}
.hero .lead{animation:rise .7s cubic-bezier(.22,1,.36,1) .6s both}
.hero .socials .btn{animation:rise .6s cubic-bezier(.22,1,.36,1) both}
.hero .socials .btn:nth-child(1){animation-delay:.75s}
.hero .socials .btn:nth-child(2){animation-delay:.85s}
.hero .socials .btn:nth-child(3){animation-delay:.95s}
.stage{animation:hang 1.2s cubic-bezier(.16,1,.3,1) .35s both}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .topbar,h1 .l1,h1 .hand,.hero .lead,.hero .socials .btn,.stage{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* footer */
footer{padding:48px 0 40px;text-align:center}
footer .socials{margin:0 auto 24px}
.fine{font-size:13px;color:var(--ink-soft);max-width:52ch;margin:0 auto}

@media (min-width:820px){
  .hero-grid{grid-template-columns:1.1fr .9fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .steps li{padding:80px 22px 24px}
  .np{grid-template-columns:1fr 1fr;align-items:center;padding:40px}
}

.blog-hero{padding:32px 0 8px}
.blog-hero h1{font-size:clamp(32px,7vw,56px);font-weight:800;letter-spacing:-.02em}
.blog-hero .lead{margin-bottom:8px}
.cards{display:grid;gap:14px;padding-bottom:24px}
.card{display:block;text-decoration:none;color:var(--ink);padding:22px;border-radius:20px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);transition:transform .18s cubic-bezier(.22,1,.36,1)}
.card:active{transform:scale(.98)}
.card .tag{display:inline-block;font-size:13px;font-weight:600;color:var(--brand);background:#FFC2D6;border-radius:8px;padding:4px 10px;margin-bottom:12px}
.card h2{font-family:"Montserrat",system-ui,sans-serif;font-weight:800;font-size:21px;line-height:1.2;letter-spacing:-.01em;margin:0 0 8px}
.card p{margin:0;color:var(--ink-soft)}
.card .more{display:block;margin-top:14px;font-weight:700;color:var(--brand)}
.back{display:inline-block;margin:24px 0 8px;font-weight:600;color:var(--brand);text-decoration:none}
.post{max-width:68ch;padding-bottom:40px}
.post h1{font-size:clamp(28px,6.5vw,44px);font-weight:800;letter-spacing:-.02em;margin:8px 0 12px}
.post .meta{font-size:14px;color:var(--ink-soft);margin-bottom:24px}
.post h2{font-size:clamp(22px,5vw,28px);margin:36px 0 12px}
.post h3{font-size:19px;margin:24px 0 8px}
.post p,.post li{color:var(--ink);line-height:1.65}
.post p{margin:0 0 14px}
.post ul,.post ol{padding-left:22px;margin:0 0 16px}
.post li{margin-bottom:8px}
.post strong{font-weight:700}
.note{padding:18px 20px;border-radius:20px;background:#FFC2D6;color:#3B0A22;margin:20px 0;font-weight:500}
.shop{padding:20px;border-radius:20px;margin:0 0 12px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.85);isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
.shop.ours{background:#F8015C;border-color:#F8015C;color:#fff}
.shop.ours *{color:#fff}
.shop h3{margin:0 0 8px}
.shop dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;font-size:15px}
.shop dt{font-weight:700}
.shop dd{margin:0}
.shop .badge{display:inline-block;font-size:12px;font-weight:700;background:#fff;color:#F8015C !important;border-radius:8px;padding:3px 8px;margin-left:6px;vertical-align:middle}
.cta-box{margin:32px 0 0;padding:24px;border-radius:20px;background:#F8015C;color:#fff}
.cta-box h2{color:#fff;margin:0 0 8px}
.cta-box p{color:#fff;opacity:.9;margin:0 0 16px}
.cta-box .btn{background:#fff;color:#F8015C;border-color:#fff}
.cta-box .btn .ico svg path{fill:#F8015C}