/* WowPage · landing page styles (index.html only) */

.landing{ overflow-x:clip; }
.landing main{ max-width:1120px; margin:0 auto; padding:0 clamp(1rem, 4vw, 2.5rem); }

/* header */
.site-head{
  max-width:1120px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1rem, 4vw, 2.5rem);
  position:relative; z-index:2;
}
.site-nav{ display:flex; align-items:center; gap:1.4rem; }
.site-nav a{ color:var(--ink-2); text-decoration:none; font-weight:600; font-size:var(--fs-0); }
.site-nav a:hover{ color:var(--pop-deep); }
.site-nav .nav-cta{ color:#fff; font-size:var(--fs-0); padding:.55rem 1.1rem; }
.site-nav .nav-cta:hover{ color:#fff; }
@media (max-width:700px){
  .site-nav a:not(.nav-cta){ display:none; }
}

/* hero */
.hero{
  display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  gap:clamp(2rem, 5vw, 4rem); align-items:center;
  padding:clamp(2.5rem, 7vh, 5.5rem) 0 clamp(3.5rem, 9vh, 7rem);
  position:relative;
}
.hero h1{ font-size:clamp(2.2rem, 4.8vw, 3.4rem); letter-spacing:-.025em; margin-bottom:.5em; text-wrap:balance; }
.hero h1 .pop{ color:var(--pop-deep); position:relative; white-space:nowrap; }
/* hand-drawn squiggle under the price, drawing itself in on load */
.hero h1 .squiggle{
  position:absolute; left:0; right:0; bottom:-.28em; height:.32em; width:100%;
  overflow:visible; pointer-events:none;
}
.hero h1 .squiggle path{
  fill:none; stroke:var(--sun); stroke-width:4; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:0;
}
@media (prefers-reduced-motion: no-preference){
  .hero h1 .squiggle path{
    animation:draw-squiggle .8s cubic-bezier(.55,.06,.35,1) .5s both;
  }
}
@keyframes draw-squiggle{
  from{ stroke-dashoffset:1; }
  to{ stroke-dashoffset:0; }
}
.hero .lead{ font-size:var(--fs-2); color:var(--ink-2); margin-bottom:1.6rem; }
.hero-small{ margin:.9rem 0 0; font-size:var(--fs-0); color:var(--muted); }

/* oversized ghost word peeking from the left edge */
.ghost-word{
  position:absolute; left:-5rem; bottom:-1.5rem; z-index:-1;
  font-size:clamp(8rem, 18vw, 13rem); font-weight:800; letter-spacing:-.05em; line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(255,93,115,.18);
  transform:rotate(-5deg); user-select:none; pointer-events:none;
}

/* little floating doodles, one per hue */
.doodle{ position:absolute; pointer-events:none; color:var(--sun); }
.doodle svg{ width:100%; height:100%; }
.doodle-star{ top:.2rem; right:38%; width:3.2rem; height:3.2rem; --tilt:8deg; transform:rotate(8deg); }
.doodle-spark{ bottom:3rem; right:-1.5rem; width:2.4rem; height:2.4rem; color:var(--pop); --tilt:-10deg; transform:rotate(-10deg); }
.doodle-squig{ bottom:-.5rem; left:38%; width:3.6rem; height:1.4rem; color:var(--mint); --tilt:-6deg; transform:rotate(-6deg); }
.doodle-dots{ top:4.5rem; left:-3.2rem; width:2.6rem; height:2.6rem; color:var(--lilac); --tilt:12deg; transform:rotate(12deg); }

/* hero entrance stagger */
@media (prefers-reduced-motion: no-preference){
  .hero h1, .hero .lead, .hero .btn-big, .hero-small, .hero-token{
    animation:rise-in .55s cubic-bezier(.22,1,.36,1) both;
  }
  .hero .lead{ animation-delay:.08s; }
  .hero .btn-big{ animation-delay:.16s; }
  .hero-small{ animation-delay:.22s; }
  .hero-token{ animation-delay:.26s; }
}

/* the £3.99 price card: a physical object, stacked layers + tape + sticker */
.hero-token{ position:relative; }
/* two paper layers genuinely behind the card */
.hero-token::before{
  content:""; position:absolute; top:2.6rem; right:-.6rem; bottom:-.4rem; left:1.5rem;
  background:var(--sun-soft); border:2px solid rgba(43,36,64,.12);
  border-radius:var(--r-lg); transform:rotate(2deg);
}
.hero-token::after{
  content:""; position:absolute; top:3.4rem; right:-1.4rem; bottom:-1.2rem; left:2.4rem;
  background:var(--pop-soft); border-radius:var(--r-lg); transform:rotate(4.5deg); z-index:-1;
}
.price-card{
  background:var(--card); border:2px solid var(--ink); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift); padding:2.4rem 2.2rem 1.9rem;
  transform:rotate(-2.5deg); transform-origin:50% -1rem;
  position:relative; z-index:1;
  transition:box-shadow .25s ease-out, translate .25s cubic-bezier(.22,1,.36,1);
}
/* hanging from its tape, it sways ever so slowly */
@media (prefers-reduced-motion: no-preference){
  .price-card{ animation:card-sway 9s ease-in-out infinite; }
}
@keyframes card-sway{
  0%,100%{ transform:rotate(-2.7deg); }
  50%{ transform:rotate(-1.6deg); }
}
.price-card:hover{ translate:0 -5px; box-shadow:var(--shadow-lift), 0 30px 60px rgba(43,36,64,.14); }
/* masking-tape strip across the top edge */
.price-tape{
  position:absolute; top:-1rem; left:50%; width:7.5rem; height:1.9rem;
  transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,179,64,.4); border-left:2px dashed rgba(255,255,255,.7);
  border-right:2px dashed rgba(255,255,255,.7); border-radius:2px;
}
/* round sticker */
.price-sticker{
  position:absolute; top:-1.6rem; right:-1.6rem; width:5.4rem; height:5.4rem;
  border-radius:50%; background:var(--pop); color:#fff;
  display:grid; place-items:center; text-align:center;
  font-size:.68rem; font-weight:800; line-height:1.2; letter-spacing:.02em;
  transform:rotate(9deg); padding:.5rem;
  box-shadow:0 6px 16px rgba(226,57,79,.35);
}
.price-big{
  font-size:clamp(3.4rem, 7vw, 4.6rem); font-weight:800; letter-spacing:-.04em;
  line-height:1; color:var(--ink);
}
.price-per{ font-weight:700; color:var(--pop-deep); margin:.3rem 0 1.1rem; }
.price-ticks{ list-style:none; margin:0; padding:0; }
.price-ticks li{
  display:flex; align-items:center; gap:.55rem; padding:.32rem 0;
  font-size:var(--fs-0); font-weight:600; color:var(--ink-2);
}
.price-ticks .icon{ color:var(--mint-deep); }
.price-ticks li:nth-child(2) .icon{ color:var(--pop-deep); }
.price-ticks li:nth-child(3) .icon{ color:var(--lilac-deep); }
.price-ticks li:nth-child(4) .icon{ color:var(--warn); }

@media (max-width:820px){
  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero-token{ justify-self:center; max-width:20rem; width:100%; padding:1.6rem .5rem 0; }
  .ghost-word{ display:none; }
  .doodle-spark{ display:none; }
  .doodle-dots{ display:none; }
  .doodle-squig{ left:auto; right:8%; bottom:-2.2rem; }
}

/* sections rhythm */
.how, .included, .extras-teaser, .faq{ padding:clamp(4rem, 10vh, 7rem) 0; }
.how h2, .included h2, .extras-teaser h2, .faq h2{ margin-bottom:1.2em; }
.sect-lead{ color:var(--ink-2); margin-top:-1.4em; margin-bottom:2.2em; }

/* how it works: a soft mint full-bleed wash behind the step cards */
.how{ position:relative; }
.how::before{
  content:""; position:absolute; inset:2rem calc(50% - 50vw) 0; z-index:-1;
  background:linear-gradient(180deg, rgba(224,246,238,0) 0%, var(--mint-soft) 18%, var(--mint-soft) 82%, rgba(224,246,238,0) 100%);
}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(1.5rem, 3vw, 2.5rem);
}
/* static tilts use `rotate`, hover lift uses `translate`, so the JS cursor-lean
   (inline `transform`) composes with both instead of fighting them */
.steps li{
  position:relative; padding:5.2rem 1.4rem 1.5rem;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:translate .2s ease-out, box-shadow .2s ease-out, transform .15s ease-out;
}
.steps li:hover{ translate:0 -4px; box-shadow:var(--shadow); }
.steps li:nth-child(1){ rotate:-.8deg; }
.steps li:nth-child(2){ margin-top:2.4rem; }
.steps li:nth-child(3){ margin-top:4.8rem; rotate:.8deg; }
.step-num{
  position:absolute; top:-1.6rem; left:.4rem;
  font-size:7.5rem; font-weight:800; line-height:1; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:2.5px var(--pop);
  opacity:.5; pointer-events:none; user-select:none;
}
/* each numeral in its own hue, popping in with a spring once the card reveals */
.steps li:nth-child(2) .step-num{ -webkit-text-stroke-color:var(--mint); }
.steps li:nth-child(3) .step-num{ -webkit-text-stroke-color:var(--lilac); }
@media (prefers-reduced-motion: no-preference){
  .reveal-init .steps li[data-reveal] .step-num{ opacity:0; }
  .reveal-init .steps li[data-reveal].revealed .step-num{
    animation:num-pop .6s cubic-bezier(.34,1.55,.64,1) both;
    animation-delay:calc(var(--rd, 0s) + .1s);
  }
}
@keyframes num-pop{
  from{ opacity:0; transform:scale(.35) rotate(-10deg); }
  to{ opacity:.5; transform:none; }
}
.steps h3{ margin-bottom:.35em; position:relative; }
.steps p{ color:var(--ink-2); font-size:var(--fs-0); margin:0; position:relative; }
@media (max-width:820px){
  .steps{ grid-template-columns:minmax(0,1fr); }
  .steps li:nth-child(2), .steps li:nth-child(3){ margin-top:1rem; }
}

/* included: one big tinted board */
.included .inc-board{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(1.5rem, 4vw, 2.75rem); box-shadow:var(--shadow-sm);
}
.inc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(1.5rem, 4vw, 3.5rem); }
.inc-list{ list-style:none; margin:0; padding:0; }
.inc-list li{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.7rem 0; border-bottom:1px dashed rgba(43,36,64,.18);
  color:var(--ink-2); font-weight:500;
}
.inc-list .icon{ color:var(--mint-deep); margin-top:.3rem; }
.inc-list li:nth-child(2) .icon{ color:var(--pop-deep); }
.inc-list li:nth-child(3) .icon{ color:var(--lilac-deep); }
.inc-note{
  margin:2rem auto 0; padding:1.1rem 1.4rem; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-sm);
  color:var(--ink-2); font-weight:500; max-width:none;
  transform:rotate(-.6deg); position:relative;
}
.inc-note::before{
  content:""; position:absolute; top:-.8rem; left:2rem; width:5rem; height:1.5rem;
  transform:rotate(-2deg); background:rgba(255,93,115,.28); border-radius:2px;
  border-left:2px dashed rgba(255,255,255,.7); border-right:2px dashed rgba(255,255,255,.7);
}
@media (max-width:700px){
  .inc-grid{ grid-template-columns:minmax(0,1fr); }
}

/* full-bleed statement: deep ink, textured, with a swinging price tag */
.statement{
  background:
    radial-gradient(50rem 30rem at 80% 0%, rgba(255,93,115,.16), transparent 60%),
    radial-gradient(40rem 26rem at 8% 100%, rgba(255,179,64,.12), transparent 60%),
    radial-gradient(36rem 24rem at 45% 120%, rgba(37,183,149,.10), transparent 60%),
    var(--ink);
  color:var(--paper);
  margin:0 calc(50% - 50vw); padding:clamp(4.5rem, 12vh, 8rem) clamp(1.25rem, 6vw, 4rem);
  position:relative; overflow:hidden;
}
.statement::before{
  content:"\201C"; position:absolute; top:-.12em; left:2rem;
  font-size:clamp(12rem, 24vw, 20rem); font-weight:800; line-height:1;
  color:rgba(255,249,242,.06); pointer-events:none; user-select:none;
}
.statement p{
  max-width:1120px; margin:0 auto; position:relative;
  font-size:clamp(1.5rem, 3.6vw, 2.6rem); font-weight:800; line-height:1.3;
  letter-spacing:-.02em;
}
.statement strong{
  color:var(--ink); background:var(--sun); padding:.05em .3em; border-radius:.35em;
  display:inline-block; transform:rotate(-2deg); box-shadow:0 6px 18px rgba(255,179,64,.3);
}

/* extras teaser: sticker-sheet cards on a soft lilac wash, one hue each */
.extras-teaser{ position:relative; }
.extras-teaser::before{
  content:""; position:absolute; inset:2rem calc(50% - 50vw) 0; z-index:-1;
  background:linear-gradient(180deg, rgba(239,233,251,0) 0%, var(--lilac-soft) 18%, var(--lilac-soft) 82%, rgba(239,233,251,0) 100%);
}
.x-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap:1.25rem;
}
.x-card{
  --xa:var(--pop); --xa-ink:var(--pop-deep); --xa-soft:var(--pop-soft);
  background:var(--card); border:2px solid var(--line); border-radius:var(--r-md);
  border-color:color-mix(in srgb, var(--xa) 45%, #fff);
  padding:1.35rem 1.4rem 1.3rem; position:relative;
  box-shadow:0 1px 2px rgba(43,36,64,.05), 0 6px 18px color-mix(in srgb, var(--xa) 14%, transparent);
  transition:translate .2s ease-out, rotate .2s ease-out, box-shadow .2s ease-out,
             border-color .2s ease-out, transform .15s ease-out;
}
.x-grid .x-card:nth-child(1){ --xa:var(--pop); --xa-ink:var(--pop-deep); --xa-soft:var(--pop-soft); }
.x-grid .x-card:nth-child(2){ --xa:var(--sun); --xa-ink:var(--warn); --xa-soft:var(--sun-soft); }
.x-grid .x-card:nth-child(3){ --xa:var(--mint); --xa-ink:var(--mint-deep); --xa-soft:var(--mint-soft); }
.x-grid .x-card:nth-child(4){ --xa:var(--lilac); --xa-ink:var(--lilac-deep); --xa-soft:var(--lilac-soft); }
.x-grid .x-card:nth-child(odd){ rotate:-.7deg; }
.x-grid .x-card:nth-child(even){ rotate:.7deg; }
.x-card:hover{
  translate:0 -4px; rotate:0deg; border-color:var(--xa);
  box-shadow:0 2px 4px rgba(43,36,64,.06), 0 14px 32px color-mix(in srgb, var(--xa) 22%, transparent);
}
.x-card strong{ display:block; font-size:var(--fs-1); padding-right:3rem; }
.x-card .x-price{
  position:absolute; top:-.85rem; right:1rem;
  background:var(--xa-soft); color:var(--xa-ink);
  border:1px solid color-mix(in srgb, var(--xa-ink) 30%, transparent);
  font-weight:800; font-size:.72rem; padding:.25rem .7rem; border-radius:999px;
  transform:rotate(2deg); white-space:nowrap;
}
/* the little price tags bob, each to its own beat */
@media (prefers-reduced-motion: no-preference){
  .x-card .x-price{ animation:tag-bob 5.5s ease-in-out infinite; }
  .x-grid .x-card:nth-child(2) .x-price{ animation-delay:-1.4s; }
  .x-grid .x-card:nth-child(3) .x-price{ animation-delay:-2.8s; }
  .x-grid .x-card:nth-child(4) .x-price{ animation-delay:-4.2s; }
}
@keyframes tag-bob{
  0%,100%{ transform:rotate(2deg) translateY(0); }
  50%{ transform:rotate(-1.5deg) translateY(-3px); }
}
.x-card p{ margin:.6rem 0 0; font-size:var(--fs-0); color:var(--ink-2); }

/* faq: card stack */
.faq{ max-width:46rem; }
.faq details{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  margin-bottom:.75rem; box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease-out, border-color .2s ease-out;
}
.faq details[open]{ border-color:#dccbb6; box-shadow:var(--shadow); }
.faq summary{
  cursor:pointer; font-weight:700; font-size:var(--fs-1); padding:1.05rem 3rem 1.05rem 1.25rem;
  list-style:none; position:relative;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; position:absolute; right:1.1rem; top:50%; transform:translateY(-50%);
  color:var(--pop); font-weight:800; font-size:var(--fs-3); line-height:1;
  transition:transform .18s ease-out;
}
.faq details:nth-of-type(3n+2) summary::after{ color:var(--mint); }
.faq details:nth-of-type(3n) summary::after{ color:var(--lilac); }
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq summary:hover{ color:var(--pop-deep); }
.faq details p{ color:var(--ink-2); padding:0 1.25rem 1.2rem; margin:0; }

/* cta band: the full-bleed accent moment */
.cta-band{
  text-align:center;
  margin:0 calc(50% - 50vw);
  padding:clamp(4.5rem, 12vh, 8rem) clamp(1.25rem, 6vw, 4rem);
  background:
    radial-gradient(46rem 28rem at 15% 0%, rgba(255,179,64,.35), transparent 60%),
    var(--pop);
  color:#fff; position:relative; overflow:hidden;
}
.cta-band::after{
  content:"wow."; position:absolute; right:-2rem; bottom:-5.5rem;
  font-size:clamp(9rem, 20vw, 15rem); font-weight:800; letter-spacing:-.05em; line-height:1;
  color:transparent; -webkit-text-stroke:2px rgba(255,255,255,.25);
  transform:rotate(-4deg); pointer-events:none; user-select:none;
}
.cta-band h2{
  max-width:24ch; margin:0 auto 1.4em; color:#fff;
  font-size:clamp(1.7rem, 3.6vw, 2.6rem); text-wrap:balance; position:relative;
}
.cta-band .btn-pop{
  background:var(--ink); box-shadow:0 10px 28px rgba(43,36,64,.35); position:relative;
}
.cta-band .btn-pop:hover{ background:#3a3157; }
.cta-band .cta-small{ margin:1.1rem auto 0; color:rgba(255,255,255,.85); font-size:var(--fs-0); font-weight:600; position:relative; }

/* footer */
.site-foot{
  border-top:1px solid var(--line);
  max-width:1120px; margin:0 auto;
  padding:2.5rem clamp(1rem, 4vw, 2.5rem) 3rem;
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 2rem;
}
.site-foot nav{ display:flex; gap:1.4rem; }
.site-foot nav a{ color:var(--ink-2); text-decoration:none; font-size:var(--fs-0); font-weight:600; }
.site-foot nav a:hover{ color:var(--pop-deep); }
.site-foot p{ margin:0; margin-left:auto; color:var(--muted); font-size:var(--fs-0); }
@media (max-width:700px){
  .site-foot{ flex-direction:column; align-items:flex-start; }
  .site-foot p{ margin-left:0; }
}