/* ==========================================================================
   Tappy Birthday
   One visual world, drawn like the cards themselves: thick ink outlines,
   hard offset shadows, a sky that rolls into the page, bunting, badges.
   Single light theme by design (it's a birthday, not a spreadsheet).
   ========================================================================== */

/* ---------- Fonts (self hosted, SIL OFL, licences in /assets/fonts) ---------- */
@font-face{font-family:"Shrikhand";src:url("fonts/shrikhand.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage.woff2") format("woff2-variations"),url("fonts/bricolage.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/caveat.woff2") format("woff2-variations"),url("fonts/caveat.woff2") format("woff2");font-weight:400 700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* colour: ink is the cartoons' outline colour, everything else comes from the card scenes */
  --ink:#2b1b17;
  --ink-soft:#5e4d48;
  --paper:#ffffff;
  --sky:#d4ecfb;
  --sky-deep:#8fc3e6;
  --sun:#ffc93c;
  --sun-soft:#fff3cc;
  --pop:#ff5d8f;
  --pop-soft:#ffe3ec;
  --plum:#3b1f4a;
  --grass:#a7c970;
  --ember:#e2683c;
  --mint:#86dccd;
  --blue:#4f7fd8;

  /* type */
  --display:"Shrikhand", "Cooper Black", Georgia, serif;
  --text:"Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --hand:"Caveat", "Bradley Hand", "Comic Sans MS", cursive;
  --step--1:.9375rem;   /* 15 */
  --step-0:1.0625rem;   /* 17, 18 on desktop */
  --step-1:1.3125rem;   /* 21 */
  --step-2:1.75rem;     /* 28 */
  --step-3:clamp(2.1rem,4.6vw,3.25rem);
  --step-4:clamp(2.75rem,6.6vw,5rem);

  /* shape */
  --stroke:2.5px;
  --outline:var(--stroke) solid var(--ink);
  --lift:5px 5px 0 var(--ink);
  --lift-lg:9px 9px 0 var(--ink);
  --r-sm:10px;
  --r:16px;
  --r-lg:28px;

  /* layout */
  --gutter:clamp(16px,4vw,32px);
  --max:1120px;
  --head-h:132px;
  color-scheme:light;
}
@media (min-width:900px){:root{--step-0:1.125rem}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:var(--step-0);line-height:1.55;font-optical-sizing:auto;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--ember)}
p,h1,h2,h3,ul,ol,dl,figure{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:var(--sun)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:12px;z-index:100;background:var(--sun);color:var(--ink);padding:.6em 1em;border:var(--outline);border-radius:var(--r-sm);font-weight:800;text-decoration:none}
.skip:focus{left:12px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Type ---------- */
.display{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:.005em}
h1.display{font-size:var(--step-4)}
h2.display{font-size:var(--step-3);line-height:1}
h3{font-size:var(--step-1);font-weight:750;line-height:1.2;font-variation-settings:"opsz" 36}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-soft);max-width:34ch;font-variation-settings:"opsz" 36}
.muted{color:var(--ink-soft)}
.hand{font-family:var(--hand);font-weight:700;font-size:1.75rem;line-height:1}
.inked{color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--ink)}

/* ---------- Buttons ---------- */
.btn{--bg:var(--pop);display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:800 1.0625rem/1 var(--text);letter-spacing:.01em;
  color:var(--ink);background:var(--bg);border:var(--outline);border-radius:999px;padding:.9em 1.45em;text-decoration:none;cursor:pointer;
  box-shadow:var(--lift);transition:transform .12s ease,box-shadow .12s ease;-webkit-tap-highlight-color:transparent}
.btn:hover{color:var(--ink);transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn.sun{--bg:var(--sun)}
.btn.plain{--bg:var(--paper)}
.btn.small{font-size:.95rem;padding:.7em 1.15em;box-shadow:3px 3px 0 var(--ink)}
.btn.small:hover{box-shadow:5px 5px 0 var(--ink)}
.btn.block{width:100%}
.btn[aria-disabled="true"],.btn:disabled{background:#e9e1dc;color:var(--ink-soft);cursor:not-allowed;box-shadow:3px 3px 0 #b9aca6;border-color:#b9aca6;transform:none}
.link{background:none;border:0;padding:0;font:700 var(--step--1) var(--text);color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.link:hover{color:var(--ember)}

/* ---------- Sky band, bunting, masthead ---------- */
.site-head{position:absolute;inset:0 0 auto 0;z-index:5}
.sky{position:relative;padding-top:var(--head-h);background:linear-gradient(180deg,var(--sky) 0%,#e7f4fc 62%,#fff3cc 100%);overflow:hidden;isolation:isolate}
.bunting{position:absolute;inset:0 0 auto 0;height:74px;pointer-events:none;z-index:0}
.bunting svg{display:block;width:100%;height:100%}
.bunting .flag{transform-box:fill-box;transform-origin:50% 0}
@media (prefers-reduced-motion:no-preference){
  .bunting .flag{animation:flag-drop .7s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i) * 55ms + 150ms)}
}
@keyframes flag-drop{from{transform:rotate(-105deg) scale(.4);opacity:0}to{transform:none;opacity:1}}

.masthead{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:78px 10px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.6rem;line-height:1;text-decoration:none;color:var(--ink);white-space:nowrap}
.logo:hover{color:var(--ink)}
.logo svg{width:48px;height:48px;flex:none;margin-block:-4px}
.logo .t2{color:var(--pop);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
.logo .wave{transform-box:fill-box;transform-origin:24% 95%}
/* the header logo waves hello once, just after the bunting lands; any logo waves again on hover */
@media (prefers-reduced-motion:no-preference){.masthead .logo .wave{animation:wave 1.1s ease-in-out 1.5s}.logo:hover .wave,.logo:focus-visible .wave{animation:wave .9s ease-in-out}}
@keyframes wave{0%,100%{transform:none}20%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}70%{transform:rotate(-8deg)}}
.nav,.nav .links{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px)}
.nav a.text{font-weight:700;text-decoration:none;color:var(--ink);display:inline-block;padding:10px 6px;margin:-10px -6px}
#main:focus{outline:none}
.nav .btn{white-space:nowrap;gap:0}
.nav a.text:hover,.nav a.text[aria-current="page"]{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--pop);text-underline-offset:6px}
/* phones: the two text links drop to their own row under the logo, so they're never hidden */
@media (max-width:640px){
  :root{--head-h:164px}
  .logo{font-size:1.35rem}
  .logo svg{width:40px;height:40px}
  .nav .links{position:absolute;left:var(--gutter);top:calc(100% - 2px);gap:24px}
  .nav a.text{font-size:var(--step--1)}
}

/* hills that roll the sky into the page */
.hills{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(48px,7vw,96px);z-index:1;pointer-events:none}

/* ---------- Home hero ---------- */
.hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(20px,4vw,40px) clamp(96px,11vw,150px)}
.hero h1 .l2{display:block}
.hero h1.display{font-size:clamp(2.75rem,5.8vw,4.6rem)}
.hero .lede{margin-top:22px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px}
.from{font-size:var(--step--1);color:var(--ink-soft)}
.hero .from{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;column-gap:.2em;row-gap:.5em}
.from b{color:var(--ink);font-weight:800}
.from .price-tag{display:inline-block;font-family:var(--display);font-size:1.4rem;line-height:1;color:var(--ink);background:var(--sun);border:var(--outline);border-radius:999px;padding:.3em .75em .38em;box-shadow:3px 3px 0 var(--ink);transform:rotate(-2deg);margin:0 .45em .2em 0;vertical-align:middle}
.from .price-tag b{font-weight:400}

.stage{position:relative;justify-self:center;width:min(100%,430px);padding:28px 0 0 18px}
.phone{position:relative;background:var(--ink);border-radius:38px;padding:12px;box-shadow:var(--lift-lg);border:var(--outline)}
.phone::before{content:"";position:absolute;top:5px;left:50%;width:64px;height:5px;margin-left:-32px;border-radius:9px;background:#5e4d48}
.screen{border-radius:26px;overflow:hidden;aspect-ratio:5/8;background:#f2b98a;max-width:100%}
@media (min-width:861px){.screen{aspect-ratio:2/3}}
.screen iframe{width:100%;height:100%;border:0;display:block}
.note{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-left:4px}
.note .hand{color:var(--ember);transform:rotate(-3deg)}

/* rosette badge (British birthday badge) */
.badge{position:absolute;z-index:3;width:132px;aspect-ratio:120/158;filter:drop-shadow(4px 4px 0 var(--ink))}
.badge svg{width:100%;height:100%;overflow:visible}
.badge .amt{font-family:var(--display);fill:var(--ink)}
.badge .sub{font-family:var(--text);font-weight:800;fill:var(--ink);letter-spacing:.4px}
.stage .badge{left:-30px;top:-6px;transform:rotate(-12deg)}
@media (prefers-reduced-motion:no-preference){
  .stage .badge{animation:badge-pop .6s cubic-bezier(.3,1.7,.5,1) 1.1s both}
}
@keyframes badge-pop{from{transform:rotate(-40deg) scale(0)}to{transform:rotate(-12deg) scale(1)}}

/* ---------- Sections ---------- */
.band{position:relative;padding-block:clamp(64px,9vw,112px)}
.band.sun{background:var(--sun-soft);border-block:var(--outline)}
.band.skyband{background:var(--sky);border-block:var(--outline)}
.band-head{display:grid;gap:14px;max-width:62ch}
.band-head .muted{font-size:var(--step-1);line-height:1.45}
.band-head h2 .l2{display:block}

/* before / after anatomy */
.tapdemo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr);align-items:center;gap:clamp(16px,3vw,36px);margin-top:44px}
.shot{position:relative;border:var(--outline);border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden;background:var(--sky-deep)}
.shot img{width:100%;aspect-ratio:1320/910;object-fit:cover}
.shot.front img{aspect-ratio:1320/924}
.shot figcaption{position:absolute;left:12px;top:12px;background:var(--paper);border:var(--outline);border-radius:999px;padding:.25em .8em;font-weight:800;font-size:.85rem}
.pin{position:absolute;left:var(--x);top:var(--y);width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--pop);border:var(--outline);box-shadow:2px 2px 0 var(--ink);display:grid;place-items:center;font-weight:800;font-size:.95rem;line-height:1}
.tap-arrow{display:grid;justify-items:center;gap:6px;color:var(--ink)}
.tap-arrow svg{width:64px;height:64px}
.tap-arrow span{font-family:var(--hand);font-size:1.5rem;font-weight:700;color:var(--ember)}
.keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px;margin-top:40px;padding:0;list-style:none}
.keys li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.keys .k{width:30px;height:30px;border-radius:50%;background:var(--pop);border:var(--outline);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.keys b{display:block;font-weight:800}
.keys span{color:var(--ink-soft)}

/* steps route */
.route{--g:clamp(20px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:44px;padding:0;list-style:none;position:relative;counter-reset:step}
.route::before{content:"";position:absolute;left:46px;right:calc((100% - 2 * var(--g)) / 3 - 46px);top:46px;border-top:3px dashed var(--ink);z-index:0}
.route li{position:relative;z-index:1;counter-increment:step;display:grid;gap:10px;justify-items:start;align-content:start}
.route .ico{width:92px;height:92px;border-radius:50%;background:var(--paper);border:var(--outline);box-shadow:var(--lift);display:grid;place-items:center;position:relative}
.route .ico svg{width:54px;height:54px}
.route .ico::after{content:counter(step);position:absolute;right:-8px;top:-8px;width:32px;height:32px;border-radius:50%;background:var(--sun);border:var(--outline);display:grid;place-items:center;font-weight:800;font-size:.95rem}
.route p{color:var(--ink-soft)}

/* price */
.price{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,6vw,80px);align-items:center;margin-top:44px}
.price .badge{position:relative;width:clamp(200px,26vw,270px);transform:rotate(-6deg)}
.price-copy{display:grid;gap:18px;min-width:0}
.price-copy h3{font-size:var(--step-2);line-height:1.15;font-variation-settings:"opsz" 60}
.price-copy .was{color:var(--ink-soft);font-weight:600}
.price-copy .was s{text-decoration-thickness:2px}
.extras{list-style:none;padding:0;border:var(--outline);border-radius:var(--r);background:var(--paper);box-shadow:var(--lift);overflow:hidden}
.extras li{display:flex;justify-content:space-between;gap:16px;padding:14px 18px}
.extras li+li{border-top:2px dashed #e4d8d2}
.extras strong{font-variant-numeric:tabular-nums;white-space:nowrap}

/* idea stickers */
.stickers{display:flex;flex-wrap:wrap;gap:16px 18px;margin-top:40px;padding:0;list-style:none}
.stickers li{--tilt:-2deg;--bg:var(--paper);background:var(--bg);border:var(--outline);border-radius:var(--r);padding:14px 18px;box-shadow:4px 4px 0 var(--ink);transform:rotate(var(--tilt));max-width:100%;font-weight:700;line-height:1.3}
.stickers li span{display:block;font-weight:500;color:var(--ink-soft);font-size:var(--step--1);margin-top:2px}
.stickers li:nth-child(4n+1){--tilt:-2.2deg;--bg:var(--sun-soft)}
.stickers li:nth-child(4n+2){--tilt:1.6deg;--bg:var(--paper)}
.stickers li:nth-child(4n+3){--tilt:-1deg;--bg:var(--pop-soft)}
.stickers li:nth-child(4n+4){--tilt:2.4deg;--bg:#e2f6f2}

/* faq */
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:clamp(24px,5vw,72px);align-items:start}
.faq-head{display:grid;gap:14px;position:sticky;top:24px}
.faq-head .muted{font-size:var(--step-1);line-height:1.45}
.faq{display:grid;gap:12px;min-width:0}
.faq details{border:var(--outline);border-radius:var(--r);background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:16px 56px 16px 20px;font-weight:800;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:16px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;border:var(--outline);display:grid;place-items:center;font-weight:800;line-height:1;transition:transform .2s ease;background:var(--sun)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--ink-soft)}
@media (prefers-reduced-motion:no-preference){.faq details[open] > p{animation:faq-open .28s ease-out}}
@keyframes faq-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* closing band + footer: one plum block, confetti either side of the closing line */
.finale{background:var(--plum);color:#fff6ea}
.closing{position:relative;border-top:var(--outline);overflow:hidden;isolation:isolate}
.closing .wrap{position:relative;text-align:center;padding-block:clamp(72px,10vw,120px) 56px;display:grid;justify-items:center;gap:18px}
.closing h2{color:var(--sun);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--ink)}
.closing p{max-width:40ch;color:#f4dfe8;font-size:var(--step-1)}
.confetti{position:absolute;z-index:-1;top:50%;width:clamp(150px,21vw,280px);height:auto;transform:translateY(-58%);pointer-events:none}
.confetti.l{left:max(-60px,calc(50% - 700px))}
.confetti.r{right:max(-60px,calc(50% - 700px));transform:translateY(-52%) scaleX(-1)}
@media (max-width:860px){
  .closing .wrap{padding-top:118px}
  .confetti{top:10px;width:150px;transform:none}
  .confetti.l{left:-24px}
  .confetti.r{right:-24px;transform:scaleX(-1)}
}
.site-foot{font-size:var(--step--1);color:#e9d6df}
.site-foot .wrap{padding-block:0 40px;display:grid;gap:14px}
.site-foot .wrap::before{content:"";border-top:2px dashed rgba(255,246,234,.3);margin-bottom:14px}
.site-foot .row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:18px}
.site-foot a{color:#fff6ea;text-decoration:none;font-weight:700}
.site-foot a:hover{color:var(--sun)}
.site-foot .logo{color:#fff6ea;font-size:1.3rem}
.site-foot .logo svg{width:44px;height:44px;filter:drop-shadow(0 0 1px rgba(255,246,234,.5))}
.site-foot .logo .t2{-webkit-text-stroke:0}   /* the ink outline vanishes on plum; plain pink reads better there */
.site-foot.solo{border-top:var(--outline)}
.site-foot.solo .wrap{padding-top:36px}
.site-foot.solo .wrap::before{display:none}
.site-foot .fine{font-size:.85rem;color:#cdb6c4;max-width:72ch}
.site-foot .fine a{text-decoration:underline}

/* ---------- Inner pages ---------- */
.page-hero{position:relative;z-index:2;padding-block:clamp(16px,3vw,32px) clamp(84px,9vw,120px);display:grid;gap:16px;justify-items:start}
.page-hero .lede{max-width:46ch}
.page-hero h1.display{font-size:clamp(2.5rem,5.6vw,4.2rem)}
.page-hero h1 .l2{display:block}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;padding:0;list-style:none}
.chips li{background:var(--paper);border:var(--outline);border-radius:999px;padding:.35em .9em;font-weight:700;font-size:var(--step--1);box-shadow:2px 2px 0 var(--ink)}
.chips li:first-child{background:var(--sun)}
.updated{color:var(--ink-soft);font-size:var(--step--1)}

/* examples */
.example{display:grid;grid-template-columns:minmax(0,450px) minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.example .stage{padding:0;justify-self:start;width:min(100%,450px)}
.example-copy{display:grid;gap:16px;min-width:0;padding-top:8px;justify-items:start}
.example-copy > *{max-width:100%}
.tag{display:inline-block;font-weight:800;font-size:.85rem;padding:.3em .85em;border:2px solid var(--ink);border-radius:999px;background:var(--sky);box-shadow:2px 2px 0 var(--ink)}
.tag.real{background:var(--sun)}
@media (min-width:861px){.example.flip{grid-template-columns:minmax(0,1fr) minmax(0,450px)}.example.flip .stage{order:2;justify-self:end}}
.chips a{text-decoration:none;color:inherit}
.chips a:hover{text-decoration:underline}
.more{margin-top:28px;font-weight:700}
.split{font-weight:700}
.split b{font-family:var(--display);font-weight:400;font-size:1.2em;color:var(--pop);-webkit-text-stroke:1px var(--ink);paint-order:stroke fill}
.example-copy .muted{font-size:var(--step-1)}
.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 22px;margin-top:8px;padding-block:18px;border-block:2px dashed #e4d8d2;width:100%}
.facts dt{font-weight:800}
.facts dd{margin:0;color:var(--ink-soft)}
.finds{border:var(--outline);border-radius:var(--r);background:var(--sun-soft);padding:18px 22px;box-shadow:3px 3px 0 var(--ink);width:100%}
.band.sun .finds{background:var(--paper)}
.band.sun .facts{border-color:#e9d9a8}
.finds h3{font-size:var(--step-0)}
.finds ul{margin-top:8px;padding-left:20px;display:grid;gap:4px}
.example-copy .cta{margin-top:8px}
.scenes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px;margin-top:40px;padding:0;list-style:none}
.scenes figure{display:grid;gap:14px}
.scene-frame{border:var(--outline);border-radius:var(--r-lg);box-shadow:var(--lift);overflow:hidden;background:var(--paper);line-height:0}
.scene-art{display:block;width:100%;height:auto}
.scenes figcaption{display:grid;gap:2px}
.scenes figcaption b{font-size:var(--step-1);font-weight:800;line-height:1.25}
.scenes figcaption span{color:var(--ink-soft)}

/* order */
.order{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:clamp(28px,4vw,48px);align-items:start;padding-block:clamp(40px,6vw,72px)}
.order form{display:grid;gap:26px;min-width:0}
.step{border:var(--outline);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--lift);padding:clamp(18px,3vw,28px);margin:0;min-width:0;counter-increment:fs}
.order form{counter-reset:fs}
.step > legend{display:flex;align-items:center;gap:12px;padding:0;font-family:var(--display);font-size:1.6rem;line-height:1;float:left;width:100%;margin-bottom:6px}
.step > legend::before{content:counter(fs);width:36px;height:36px;border-radius:50%;background:var(--sun);border:var(--outline);display:grid;place-items:center;font:800 1rem var(--text);flex:none}
.step > legend{margin-bottom:18px}
.step-body{clear:both;display:grid;gap:20px;min-width:0}
.step-body .field,.step-body .stepper,.step-body .people,.step-body .consent,.step-body .fallback,.step-body .group{margin-top:0}
.step-body > .hint{margin-top:-8px}
.step-body > .err{margin-top:-10px}
#pay-step .step-body .btn.block{margin-top:4px}
.hint{color:var(--ink-soft);font-size:var(--step--1);margin-top:2px}
.group{border:0;padding:0;margin:20px 0 0;min-width:0}
.group > legend{padding:0;font-weight:750}
.restore{border:2px dashed var(--ink);border-radius:var(--r);background:var(--sky);padding:12px 16px;font-weight:600}
.noscript{border:var(--outline);border-radius:var(--r);background:var(--pop-soft);padding:14px 16px;font-weight:700}
.field{display:grid;gap:6px;align-content:start;margin-top:18px;min-width:0}
.field label,.label{font-weight:750}
.opt{font-weight:500;color:var(--ink-soft);font-size:.9rem}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;min-width:0;font:500 1rem/1.4 var(--text);color:var(--ink);background:#fffdfb;border:var(--outline);border-radius:var(--r-sm);padding:.7em .8em;transition:box-shadow .12s ease}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:4px 4px 0 var(--pop)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{box-shadow:4px 4px 0 var(--ember)}
.err{color:#b23a10;font-weight:700;font-size:.9rem}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
.people{display:grid;gap:16px;margin-top:14px}
.person .field{margin-top:0}
.person{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:10px}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.choices.one{grid-template-columns:1fr}
.like-note{display:inline-block;margin-top:14px;font-weight:700;background:var(--paper);border:var(--outline);border-radius:999px;padding:.4em 1em;box-shadow:2px 2px 0 var(--ink)}
@media (max-width:560px){.choices.four{grid-template-columns:minmax(0,1fr)}}
.choice{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:start;border:var(--outline);border-radius:var(--r);padding:14px 16px;cursor:pointer;background:#fffdfb;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.choice:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.choice:has(input:checked){background:var(--pop-soft);box-shadow:4px 4px 0 var(--ink)}
.choice:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.choice input{margin:4px 0 0;width:20px;height:20px;accent-color:var(--pop)}
.choice b{font-weight:800}
.choice b em{font-style:normal;font-weight:700;font-size:.85rem;margin-left:.4em;padding:.1em .55em;border-radius:99px;background:var(--sun-soft);border:2px solid var(--ink)}
.choice span{grid-column:2;color:var(--ink-soft);font-size:var(--step--1);line-height:1.4}
.stepper{display:flex;align-items:center;gap:14px;margin-top:12px}
.stepper button{width:44px;height:44px;border-radius:50%;border:var(--outline);background:var(--sun);box-shadow:2px 2px 0 var(--ink);font:800 1.3rem/1 var(--text);color:var(--ink);cursor:pointer}
.stepper button:active{transform:translate(2px,2px);box-shadow:none}
.stepper button:disabled{background:#eee6e2;color:#a89c97;cursor:not-allowed;box-shadow:none;border-color:#b9aca6}
.stepper output{font:800 1.5rem/1 var(--text);min-width:2ch;text-align:center;font-variant-numeric:tabular-nums}
.stepper-label{font-weight:700;color:var(--ink-soft);margin-left:4px}
.consent{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:16px;padding:14px 16px;border:2px dashed var(--ink);border-radius:var(--r);background:var(--sun-soft)}
.consent input{margin:3px 0 0;width:22px;height:22px;accent-color:var(--pop)}
.consent label{font-weight:600;line-height:1.45}
.summary{font-size:var(--step-1)}
.summary b{font-family:var(--display);font-weight:400}
#e-form{padding:10px 14px;border-radius:var(--r-sm);background:var(--pop-soft);border:2px solid #b23a10}
.fallback{border:var(--outline);border-radius:var(--r);background:var(--sun-soft);padding:18px;display:grid;gap:10px}
.fallback h3{font-size:var(--step-1)}
.acts{display:flex;flex-wrap:wrap;gap:10px}

/* order aside: the ticket */
.aside{position:sticky;top:20px;display:grid;gap:22px;min-width:0}

.ticket{border:var(--outline);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--lift);padding:22px;display:grid;gap:14px;position:relative;overflow:hidden}
.ticket::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:repeating-linear-gradient(90deg,var(--pop) 0 18px,var(--paper) 18px 24px,var(--blue) 24px 42px,var(--paper) 42px 48px)}
.ticket h2{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1;margin-top:6px}
.lines{list-style:none;padding:0;display:grid;gap:8px}
.lines li{display:flex;justify-content:space-between;gap:12px}
.lines li span:last-child{font-variant-numeric:tabular-nums;font-weight:750}
.lines .note-line{font-size:.85rem;color:var(--ink-soft);margin-top:-4px}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px dashed #e4d8d2;padding-top:12px}
.total strong{font-family:var(--display);font-weight:400;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.ref{font-size:.92rem;color:var(--ink-soft)}
.ref b{color:var(--ink);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.missing{margin:4px 0 0;padding-left:20px;font-size:.92rem;color:#b23a10;font-weight:600}
.missing a{color:inherit}
.progress{display:grid;gap:6px;font-size:.88rem;font-weight:700}
.progress .bar{height:12px;border:2px solid var(--ink);border-radius:99px;background:#fffdfb;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:var(--pop);border-right:2px solid var(--ink);transition:width .25s ease}
.small-print{font-size:.88rem;color:var(--ink-soft)}

/* thanks */
.envelope{position:relative;max-width:560px;margin:0 auto;aspect-ratio:16/10;background:var(--paper);border:var(--outline);border-radius:var(--r);box-shadow:var(--lift-lg);overflow:hidden}
.envelope::before{content:"";position:absolute;inset:10px;border:10px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--pop) 0 14px,var(--paper) 14px 22px,var(--blue) 22px 36px,var(--paper) 36px 44px) 10;pointer-events:none}
.envelope .addr{position:absolute;left:10%;bottom:14%;display:grid;gap:6px;font-family:var(--hand);font-size:clamp(1.4rem,3.4vw,2rem);font-weight:700;line-height:1}
.envelope .env-ref{font-family:var(--text);font-size:clamp(.85rem,2vw,1rem);letter-spacing:.08em;color:var(--ink-soft)}
.envelope .stamp{position:absolute;right:7%;top:9%;width:18%;aspect-ratio:4/5;background:var(--pop);border:var(--outline);outline:4px dotted var(--paper);outline-offset:-9px;display:grid;place-items:center;font-family:var(--display);font-size:clamp(1.4rem,4vw,2.4rem);color:var(--sun);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill}
.envelope .postmark{position:absolute;right:19%;top:20%;width:28%;aspect-ratio:1;border:3px solid #b23a10;outline:2px solid #b23a10;outline-offset:4px;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:2px;text-align:center;color:#b23a10;font-weight:800;letter-spacing:.08em;font-size:clamp(.75rem,2vw,1.05rem);line-height:1.1;transform:rotate(-14deg)}
.envelope .postmark small{font-size:.75em;letter-spacing:.06em}
@media (prefers-reduced-motion:no-preference){.envelope .postmark{animation:thud .45s cubic-bezier(.3,1.6,.5,1) .5s both}}
@keyframes thud{from{transform:rotate(-14deg) scale(2.2);opacity:0}to{transform:rotate(-14deg) scale(1);opacity:1}}
.todo{max-width:640px;margin:40px auto 0;display:grid;gap:16px;padding:0;list-style:none;counter-reset:todo}
.todo > li{counter-increment:todo;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;border:var(--outline);border-radius:var(--r);background:var(--paper);box-shadow:3px 3px 0 var(--ink);padding:18px 20px}
.todo > li > div{display:grid;gap:8px;min-width:0}
.todo h3{font-size:var(--step-1)}
.todo p{color:var(--ink-soft)}
.todo .small-print{font-size:.88rem}
.todo > li::before{content:counter(todo);width:34px;height:34px;border-radius:50%;background:var(--sun);border:var(--outline);display:grid;place-items:center;font-weight:800}
.todo .acts{margin-top:6px}

/* thanks: photo uploads */
.uploader,.mailer{display:grid;gap:12px;min-width:0}
.uploader > p,.mailer > p{color:var(--ink-soft)}
.drop{display:grid;justify-items:center;gap:10px;text-align:center;border:2.5px dashed var(--ink);border-radius:var(--r);background:var(--sky);padding:20px 16px;transition:background .15s ease}
.drop.over{background:var(--sun-soft)}
.drop svg{width:56px;height:56px}
.drop-acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px}
.drop-or{font-weight:700;color:var(--ink-soft)}
.drop:focus-within .btn{outline:3px solid var(--blue);outline-offset:3px}
.drop .hint{margin:0}
@media (hover:none){.drop-or{display:none}}
.picks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.picks:empty{display:none}
.pick{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;border:2px solid var(--ink);border-radius:var(--r-sm);padding:8px;background:#fffdfb}
.pick img,.pick .ph{width:64px;height:64px;object-fit:cover;border-radius:8px;border:2px solid var(--ink);background:var(--sun-soft)}
.pick .ph{display:grid;place-items:center;font-size:.75rem;font-weight:800;color:var(--ink-soft)}
.pick-body{display:grid;gap:4px;min-width:0}
.pick-body input{padding:.45em .6em}
.pick-state{font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.pick[data-state="sending"] .pick-state{color:var(--blue)}
.pick[data-state="sent"] .pick-state{color:#2c7a4b}
.pick[data-state="sent"] .pick-state::before{content:"✓ "}
@media (prefers-reduced-motion:no-preference){.pick[data-state="sent"]{animation:sent-pop .4s cubic-bezier(.3,1.6,.5,1)}}
@keyframes sent-pop{40%{transform:scale(1.025);background:#e2f6f2}}
.pick[data-state="error"] .pick-state{color:#b23a10}
.pick-x{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);background:var(--paper);font:800 1.4rem/1 var(--text);color:var(--ink);cursor:pointer}
.pick-x:hover{background:var(--pop-soft)}
.send-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.send-progress{font-weight:700;color:var(--ink-soft)}
.uploader .up-done{border:var(--outline);border-radius:var(--r);background:#e2f6f2;padding:12px 16px;font-weight:700;color:var(--ink)}
.up-done:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* how it works */
.how-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(32px,6vw,80px);align-items:start;margin-top:40px}
.how-steps .todo.steps{margin:0;max-width:none}
.how-card{position:sticky;top:24px}
.how-card .stage{padding:0;width:100%}
.how-gets{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;margin-top:32px}
.how-gets .facts{margin-top:0}
.know{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px clamp(28px,5vw,56px);margin-top:36px;padding:0;list-style:none}
.know li{padding-top:16px;border-top:2px dashed #e4d8d2;color:var(--ink-soft);min-width:0}
.know b{display:block;color:var(--ink);font-weight:800;margin-bottom:4px}
.cta.center{justify-content:center}
.order-facts{max-width:640px;margin:28px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.order-facts div{border:var(--outline);border-radius:var(--r);background:var(--sun-soft);padding:12px 14px;min-width:0}
.order-facts dt{font-size:.85rem;color:var(--ink-soft);font-weight:700}
.order-facts dd{margin:2px 0 0;font-weight:800;font-size:var(--step-1);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.brief-box summary{cursor:pointer;font-weight:700;font-size:.92rem}
.after-note{max-width:640px;margin:22px auto 0;text-align:center;color:var(--ink-soft);font-size:var(--step--1)}
.envelope .stamp span{transform:rotate(6deg)}
pre.brief{white-space:pre-wrap;overflow-wrap:anywhere;background:#fffdfb;border:2px dashed var(--ink);border-radius:var(--r-sm);padding:14px;font:500 .9rem/1.5 var(--text);max-height:300px;overflow:auto;margin-top:12px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:#fff;padding:.7em 1.2em;border-radius:999px;font-weight:700;z-index:60}

/* legal */
.doc-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,64px);padding-block:clamp(40px,6vw,72px);align-items:start}
.toc{position:sticky;top:20px;display:grid;gap:8px;font-size:var(--step--1)}
.toc b{font-weight:800;margin-bottom:4px}
.toc a{text-decoration:none;color:var(--ink-soft);font-weight:600}
.toc a:hover{color:var(--ink)}
.prose{max-width:68ch;min-width:0}
.prose h2{font-family:var(--display);font-weight:400;font-size:1.75rem;line-height:1.05;margin-top:44px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin-top:14px}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:6px}
.short{border:var(--outline);border-radius:var(--r-lg);background:var(--sun-soft);box-shadow:var(--lift);padding:22px 24px}
.short h2{margin-top:0;font-size:1.5rem}
.short ul{margin-top:10px}
.prose b{font-weight:800}
.form-box p{margin-top:8px}
.form-box p:first-child{margin-top:0}
.form-box{border:2px dashed var(--ink);border-radius:var(--r);padding:16px 18px;background:#fffdfb;margin-top:14px}

/* 404 */
.lost{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:18px;padding-block:20px clamp(120px,14vw,170px)}
.lost .lede{max-width:36ch}
.lost .cta{justify-content:center;margin-top:10px}
.balloon{width:120px;height:auto}
@media (prefers-reduced-motion:no-preference){.balloon{animation:drift 4s ease-in-out infinite alternate}}
@keyframes drift{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-18px) rotate(4deg)}}

/* full screen card viewer */
.full{position:fixed;inset:0;z-index:80;background:var(--plum);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.full iframe{width:100%;height:100%;border:0;display:block}
.full .x{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:14px;z-index:2}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .pay-side{display:none}
  .order{grid-template-columns:minmax(0,1fr)}
  .aside{position:static}
}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .stage{margin-top:8px}
  .tapdemo{grid-template-columns:minmax(0,1fr)}
  .tap-arrow{grid-auto-flow:column;justify-content:center;align-items:center;gap:10px;margin-block:-4px}
  .tap-arrow svg{width:52px;height:52px}
  .keys{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route{grid-template-columns:minmax(0,1fr)}
  .route::before{left:45px;right:auto;top:40px;bottom:40px;border-top:0;border-left:3px dashed var(--ink)}
  .route li{grid-template-columns:auto 1fr;column-gap:18px;align-items:center}
  .route li > :not(.ico){grid-column:2}
  .route .ico{grid-row:span 2}
  .price{grid-template-columns:minmax(0,1fr);justify-items:center}
  .price-copy{justify-self:stretch}
  .faq-layout{grid-template-columns:minmax(0,1fr)}
  .faq-head{position:static}
  .example{grid-template-columns:minmax(0,1fr)}
  .example .stage{justify-self:center}
  .scenes{grid-template-columns:minmax(0,1fr)}
  .choices.three{grid-template-columns:minmax(0,1fr)}
  .how-gets,.know,.how-steps{grid-template-columns:minmax(0,1fr)}
  .how-card{display:none}
  .doc-layout{grid-template-columns:minmax(0,1fr)}
  .toc{position:static;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;border:var(--outline);border-radius:var(--r);padding:16px 18px;background:var(--paper)}
  .toc b{grid-column:1 / -1}
}
@media (max-width:620px){
  .keys{grid-template-columns:minmax(0,1fr)}
  .row2,.person,.choices{grid-template-columns:minmax(0,1fr)}
  .order-facts{grid-template-columns:minmax(0,1fr)}
  .facts{grid-template-columns:minmax(0,1fr);gap:2px}
  .facts dd + dt{margin-top:10px}
  .stage .badge{width:92px;left:-34px;top:-20px}
  .stage{width:min(100%,300px);padding-left:6px}
  .example .stage{width:min(100%,300px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.choice{transition:none}
}

/* what lands on their phone: a message with the card's link preview */
.arrives{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(24px,4vw,56px);align-items:center;margin-top:56px;padding:clamp(20px,3vw,36px);border:var(--outline);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--lift)}
.arrives h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.1;margin:0 0 .45em;text-wrap:balance}
.arrives p{color:var(--ink-soft);margin:0;max-width:44ch}
.chat{display:grid;gap:8px;justify-items:end;padding:18px;border-radius:24px;background:var(--sky);border:2px solid var(--ink)}
.chat .msg{margin:0;max-width:88%;background:var(--pop);color:var(--ink);font-weight:700;padding:.55em .95em;border-radius:18px 18px 4px 18px;border:2px solid var(--ink)}
.chat .preview{width:88%;display:grid;background:var(--paper);border:2px solid var(--ink);border-radius:16px 16px 4px 16px;overflow:hidden}
.chat .preview img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-bottom:2px solid var(--ink)}
.chat .pv-title{font-weight:800;padding:9px 12px 0;line-height:1.25}
.chat .pv-desc{font-size:.875rem;color:var(--ink-soft);padding:3px 12px 0;line-height:1.35}
.chat .pv-host{font-size:.8125rem;color:var(--ink-soft);padding:5px 12px 11px}
.chat .when{font-size:.8125rem;color:var(--ink-soft);font-weight:600}
@media (max-width:860px){.arrives{grid-template-columns:minmax(0,1fr)}}