/* TERRAINVITE · Birthday Spider-Man v1 · scoped to .spb */
.spb{
  --spb-red:#d9212d;--spb-red-dark:#b91521;--spb-red-light:#ef3340;
  --spb-blue:#1261b5;--spb-blue-light:#1c73ce;--spb-blue-mid:#204aa5;
  --spb-deep:#07182e;--spb-deep-2:#0b2343;--spb-black:#080a0d;--spb-ink:#111318;
  --spb-white:#fff;--spb-paper:#f6f7f8;--spb-yellow:#ffd83d;
  --spb-font-display:var(--invite-selected-font,"Arial Black","DM Sans",Arial,sans-serif);
  --spb-font-body:var(--invite-selected-font,"DM Sans",Arial,sans-serif);
  --spb-font-tech:"DM Sans",Arial,sans-serif;
  background:var(--spb-deep);color:var(--spb-ink);font-family:var(--spb-font-body);overflow-x:clip;
  --spb-parallax:0;
}
.spb .invite-body{background:var(--spb-paper)}
.spb .invite-section-slot{overflow:clip}
.spb *{box-sizing:border-box}
.spb h1,.spb h2,.spb p,.spb figure{margin:0}
.spb a{color:inherit}
.spb-decor{position:absolute;display:block;pointer-events:none;user-select:none}
.spb-section{position:relative;padding:clamp(64px,14vw,110px) clamp(18px,5vw,48px)}
.spb-section-title{position:relative;z-index:3;display:grid;gap:8px;max-width:920px;margin:0 auto 34px}
.spb-section-title>span,.spb-micro{font:800 11px/1 var(--spb-font-tech);letter-spacing:.22em;text-transform:uppercase}
.spb-section-title h2{font-family:var(--spb-font-display);font-size:clamp(34px,9vw,74px);line-height:.92;text-transform:uppercase;letter-spacing:-.035em}

/* opening gate modifier */
.spb .ti-opening{background:radial-gradient(circle at 80% 10%,rgba(28,115,206,.52),transparent 30%),linear-gradient(155deg,#06172d,#0b2343 52%,#07101f);overflow:hidden}
.spb .ti-opening:before,.spb .ti-opening:after{content:"";position:absolute;pointer-events:none}
.spb .ti-opening:before{inset:0;background-image:url('/assets/decor/birthday-spiderman/halftone.svg');opacity:.28;mix-blend-mode:screen}
.spb .ti-opening:after{width:42vw;height:42vw;min-width:180px;min-height:180px;left:-9vw;top:-8vw;background:url('/assets/decor/birthday-spiderman/web-top-left.svg') center/contain no-repeat;opacity:.72}
.spb .ti-envelope{filter:drop-shadow(0 24px 34px rgba(0,0,0,.32))}
.spb .ti-envelope__open{background:var(--spb-red)!important;color:#fff!important;border:3px solid var(--spb-black)!important;box-shadow:7px 7px 0 var(--spb-blue)!important;font-family:var(--spb-font-tech)!important;font-weight:900!important;letter-spacing:.08em}
.spb .ti-envelope__seal{filter:drop-shadow(5px 5px 0 var(--spb-blue))}

/* HERO */
.spb-hero{position:relative;min-height:100svh;height:max(760px,100svh);overflow:hidden;color:#fff;background:var(--spb-deep);isolation:isolate}
.spb-sky{position:absolute;inset:0;background:radial-gradient(circle at 68% 20%,rgba(28,115,206,.78),transparent 28%),linear-gradient(168deg,#0b2c55 0%,#07182e 50%,#030811 100%);z-index:-10}
.spb-sky:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 48%,rgba(255,255,255,.06) 48.4%,transparent 49%);background-size:52px 52px;opacity:.25}
.spb-hero-rays{width:78vmax;max-width:none;left:48%;top:44%;translate:-50% -50%;z-index:-8;opacity:.09;animation:spb-rays-in .55s .9s both}
.spb-speed-lines{inset:auto 0 14%;width:100%;z-index:-5;opacity:.42}
.spb-city{left:0;width:100%;max-width:none;bottom:-1px;transform-origin:center bottom;will-change:transform}
.spb-city-back{z-index:-7;height:37%;transform:translateY(calc(var(--spb-parallax)*5px));animation:spb-city-up .42s .15s both}
.spb-city-middle{z-index:-6;height:44%;transform:translateY(calc(var(--spb-parallax)*10px));animation:spb-city-up .48s .22s both}
.spb-city-front{z-index:3;height:52%;transform:translateY(calc(var(--spb-parallax)*15px));animation:spb-city-up .52s .30s both;pointer-events:none}
.spb-character{position:absolute;z-index:0;right:-4%;top:4%;width:min(52vw,350px);height:auto;filter:drop-shadow(14px 18px 0 rgba(0,0,0,.27));transform:translate(38px,-42px) rotate(10deg);opacity:0;animation:spb-character-in .55s .38s cubic-bezier(.18,.8,.22,1) forwards,spb-character-float 6s 1.25s ease-in-out infinite}
.spb-web{z-index:4;width:min(48vw,300px);opacity:0;animation:spb-web-in .6s 1s ease forwards}
.spb-web-top{left:-2px;top:-2px}
.spb-web-bottom{right:-2px;bottom:-2px}
.spb-hero-layout{position:relative;z-index:6;width:min(1160px,100%);height:100%;min-height:inherit;margin:auto;padding:clamp(82px,11vh,118px) clamp(20px,5vw,72px) clamp(102px,15vh,150px);display:grid;align-items:end;grid-template-columns:minmax(0,1fr);}
.spb-hero-copy{position:relative;z-index:7;display:grid;justify-items:start;align-content:end;max-width:92%;opacity:0;transform:translateY(18px);animation:spb-copy-in .5s .62s forwards}
.spb-sticker{display:inline-flex;background:var(--spb-red);border:3px solid var(--spb-black);box-shadow:5px 5px 0 var(--spb-blue);padding:8px 12px;font:900 10px/1 var(--spb-font-tech);letter-spacing:.2em;transform:rotate(-2deg);margin-bottom:12px}
.spb-hero-name{position:relative;z-index:3;max-width:100%;font-family:var(--spb-font-display);font-size:clamp(48px,15vw,86px);font-weight:950;line-height:.78;letter-spacing:-.055em;text-transform:uppercase;color:#fff;-webkit-text-stroke:clamp(1px,.55vw,3px) var(--spb-black);text-shadow:5px 5px 0 var(--spb-red),9px 9px 0 var(--spb-blue);text-wrap:balance}
.spb-hero-name--md{font-size:clamp(43px,12.7vw,76px)}
.spb-hero-name--sm{font-size:clamp(38px,10.5vw,66px)}
.spb-hero-name--xs{font-size:clamp(32px,8.9vw,58px)}
.spb-age-burst{position:absolute;left:min(67vw,290px);top:-62px;width:clamp(92px,27vw,122px);aspect-ratio:1;display:grid;place-items:center;color:var(--spb-black);transform:scale(.55) rotate(10deg);opacity:0;animation:spb-age-pop .46s .76s cubic-bezier(.18,.88,.22,1.3) forwards}
.spb-age-burst .spb-decor{inset:0;width:100%;height:100%}
.spb-age-burst strong{position:relative;z-index:2;font:950 clamp(38px,12vw,58px)/.8 var(--spb-font-display)}
.spb-age-burst span{position:absolute;z-index:2;bottom:23%;font:900 9px/1 var(--spb-font-tech);letter-spacing:.1em}
.spb-hero-text{max-width:500px;margin-top:22px;padding:11px 14px;background:rgba(7,24,46,.86);border-left:5px solid var(--spb-yellow);font-size:clamp(14px,3.8vw,18px);line-height:1.5;font-weight:700;box-shadow:8px 8px 0 rgba(0,0,0,.28)}
.spb-photo-stack{position:absolute;z-index:5;left:50%;top:44%;width:min(64vw,290px);aspect-ratio:4/5;transform:translate(-50%,-50%) rotate(-4deg) scale(.93);opacity:0;animation:spb-photo-in .5s .5s cubic-bezier(.18,.8,.22,1) forwards;filter:drop-shadow(18px 20px 0 rgba(0,0,0,.28))}
.spb-photo-stack:before,.spb-photo-stack:after{content:"";position:absolute;inset:0;border:5px solid var(--spb-black);z-index:-2}
.spb-photo-stack:before{background:var(--spb-blue);transform:translate(13px,12px) rotate(2deg)}
.spb-photo-stack:after{background:var(--spb-red);transform:translate(-10px,8px) rotate(-2deg);z-index:-1}
.spb-hero-photo{position:absolute;inset:0;background:#ddd;border:8px solid #fff;outline:4px solid var(--spb-black);clip-path:polygon(3% 0,100% 0,96% 100%,0 96%);overflow:hidden}
.spb-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:center}
.spb-wow{z-index:7;right:5%;bottom:25%;width:clamp(105px,29vw,165px);transform:rotate(8deg);opacity:0;animation:spb-tag-in .32s 1.04s forwards}
.spb-hero-cut{position:absolute;z-index:10;left:0;right:0;bottom:-1px;height:74px;background:var(--spb-paper);clip-path:polygon(0 66%,100% 0,100% 100%,0 100%)}

/* HERO MESSAGE */
.spb-intro{background:var(--spb-paper);padding-top:54px;padding-bottom:92px}
.spb-speech{position:relative;width:min(780px,94vw);margin:auto;padding:clamp(34px,9vw,62px) clamp(28px,8vw,64px) clamp(44px,9vw,68px);min-height:260px;display:grid;align-content:center;gap:16px;filter:drop-shadow(12px 14px 0 var(--spb-blue));transform-origin:35% 100%}
.spb-speech-shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;object-fit:fill}
.spb-speech h2{font-family:var(--spb-font-display);font-size:clamp(30px,8vw,58px);line-height:.92;text-transform:uppercase;max-width:650px}
.spb-speech p{font-size:clamp(15px,4vw,18px);line-height:1.65;max-width:620px}
.spb-speech .spb-micro{color:var(--spb-red)}
.spb-speech-tail{position:absolute;width:26px;height:26px;left:18%;bottom:-8px;background:var(--spb-paper);border-left:4px solid var(--spb-black);border-bottom:4px solid var(--spb-black);transform:rotate(-28deg) scale(0);transform-origin:center;animation:spb-tail-pop .22s .3s forwards}

/* MISSION ALERT */
.spb-date{position:relative;background:var(--spb-red);color:#fff;min-height:620px;padding:86px 20px 100px;overflow:hidden;border-top:8px solid var(--spb-black);border-bottom:8px solid var(--spb-black)}
.spb-date-inner{position:relative;width:min(980px,100%);margin:auto;z-index:2}
.spb-date-halftone{inset:0;width:100%;height:100%;object-fit:cover;opacity:.36;mix-blend-mode:multiply}
.spb-date-rays{width:min(700px,120vw);left:-15%;bottom:-46%;opacity:.22;animation:none}
.spb-date-title{margin-bottom:28px}.spb-date-title>span{color:var(--spb-yellow)}
.spb-date-composition{position:relative;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;min-height:350px}
.spb-date-day{position:relative;z-index:2;font:950 clamp(132px,44vw,330px)/.7 var(--spb-font-display);letter-spacing:-.09em;color:#fff;-webkit-text-stroke:5px var(--spb-black);text-shadow:10px 10px 0 var(--spb-blue)}
.spb-date-meta{display:grid;align-self:center;gap:6px;transform:rotate(-2deg)}
.spb-date-meta strong{font:950 clamp(32px,9vw,68px)/.9 var(--spb-font-display);text-transform:uppercase;color:var(--spb-yellow);-webkit-text-stroke:2px var(--spb-black);text-shadow:4px 4px 0 var(--spb-black)}
.spb-date-meta span{font:900 clamp(26px,7vw,48px)/1 var(--spb-font-tech);letter-spacing:.08em}
.spb-date-time{grid-column:1/-1;justify-self:end;display:flex;align-items:center;gap:16px;background:var(--spb-black);border:4px solid #fff;box-shadow:8px 8px 0 var(--spb-blue);padding:12px 18px;transform:rotate(1deg)}
.spb-date-time small{font:900 10px/1.1 var(--spb-font-tech);letter-spacing:.15em;max-width:95px}.spb-date-time strong{font:950 clamp(34px,10vw,62px)/.85 var(--spb-font-display);color:var(--spb-yellow)}

/* COUNTDOWN */
.spb-countdown{position:relative;background:linear-gradient(180deg,#07182e,#030a15);color:#fff;padding:92px 18px 108px;overflow:hidden}
.spb-countdown:before{content:"";position:absolute;inset:0;background-image:url('/assets/decor/birthday-spiderman/city-back.svg');background-repeat:no-repeat;background-position:center bottom;background-size:150% auto;opacity:.24}
.spb-countdown:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 54%,rgba(28,115,206,.28),transparent 40%)}
.spb-countdown-shell{position:relative;z-index:2;width:min(820px,100%);margin:auto}
.spb-countdown .spb-section-title>span{color:var(--spb-red-light)}
.spb-countdown-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:22px;background:rgba(7,24,46,.76);border:4px solid #fff;outline:4px solid var(--spb-black);box-shadow:12px 12px 0 var(--spb-red);isolation:isolate}
.spb-countdown-web{z-index:-1;inset:5% 5%;width:90%;height:90%;object-fit:fill;opacity:.32}
.spb-count-node{position:relative;min-height:150px;display:grid;place-items:center;align-content:center;gap:8px;background:linear-gradient(145deg,rgba(18,97,181,.92),rgba(7,24,46,.94));border:3px solid rgba(255,255,255,.9);clip-path:polygon(7% 0,100% 0,94% 100%,0 92%)}
.spb-count-node:nth-of-type(3),.spb-count-node:nth-of-type(4){background:linear-gradient(145deg,rgba(217,33,45,.92),rgba(88,15,25,.94))}
.spb-count-number{display:block;font:950 clamp(56px,17vw,90px)/.78 var(--spb-font-display);font-variant-numeric:tabular-nums;color:#fff;-webkit-text-stroke:2px var(--spb-black);text-shadow:4px 4px 0 var(--spb-black);animation:spb-number-change .2s ease}
.spb-count-node span{font:900 10px/1 var(--spb-font-tech);letter-spacing:.16em;color:var(--spb-yellow)}
.spb-countdown-ended{padding:36px;text-align:center;border:4px solid #fff;font:900 clamp(24px,7vw,46px)/1 var(--spb-font-display);background:var(--spb-red);box-shadow:10px 10px 0 var(--spb-blue)}

/* HERO BASE */
.spb-base{background:#eef3f8;padding-block:84px 104px}
.spb-base-card{position:relative;width:min(920px,100%);min-height:560px;margin:auto;background:#fff;border:5px solid var(--spb-black);box-shadow:14px 14px 0 var(--spb-blue);overflow:hidden;clip-path:polygon(0 0,96% 0,100% 6%,100% 100%,4% 100%,0 94%)}
.spb-map-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.spb-base-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.97) 0 44%,rgba(255,255,255,.35) 72%,transparent);pointer-events:none}
.spb-route-line{position:absolute;z-index:2;right:16%;top:24%;width:34%;height:34%;border:6px dashed var(--spb-red);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%;transform:rotate(25deg);clip-path:inset(0 100% 0 0);animation:spb-route-draw .8s .18s forwards}
.spb-map-pin{z-index:3;right:16%;top:30%;width:88px;transform:scale(0);animation:spb-pin-pop .4s .7s cubic-bezier(.2,.9,.2,1.4) forwards}
.spb-base-copy{position:relative;z-index:4;width:min(48%,440px);min-height:560px;padding:72px 38px 48px;display:grid;align-content:center;gap:14px}
.spb-base-copy .spb-micro{color:var(--spb-blue)}
.spb-base-copy h2{font:950 clamp(36px,7vw,68px)/.9 var(--spb-font-display);text-transform:uppercase}
.spb-base-copy>strong{font:900 clamp(22px,5vw,34px)/1.05 var(--spb-font-body);color:var(--spb-red)}
.spb-base-copy p{line-height:1.55;font-size:15px}
.spb-cta{justify-self:start;display:inline-flex;align-items:center;gap:10px;margin-top:8px;padding:13px 16px;background:var(--spb-red);color:#fff;text-decoration:none;border:3px solid var(--spb-black);box-shadow:6px 6px 0 var(--spb-blue);font:900 11px/1 var(--spb-font-tech);letter-spacing:.08em}

/* MISSION BOARD */
.spb-missions{background:var(--spb-yellow);border-top:7px solid var(--spb-black);border-bottom:7px solid var(--spb-black);padding-block:94px 120px}
.spb-missions:before{content:"";position:absolute;inset:0;background-image:url('/assets/decor/birthday-spiderman/halftone.svg');background-size:56px;opacity:.35}
.spb-missions-inner{position:relative;width:min(980px,100%);margin:auto;z-index:2}
.spb-missions-title>span{color:var(--spb-red)}
.spb-mission-board{position:relative;display:grid;gap:22px;padding:8px 0}
.spb-mission-card{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:end;gap:8px 20px;width:min(92%,720px);padding:26px 28px 28px;background:var(--spb-paper);border:5px solid var(--spb-black);box-shadow:9px 9px 0 var(--spb-blue);clip-path:polygon(0 0,96% 0,100% 16%,97% 100%,5% 97%,0 82%)}
.spb-mission-card:nth-child(even){justify-self:end;background:var(--spb-blue);color:#fff;box-shadow:-9px 9px 0 var(--spb-red);transform:rotate(1.2deg)}
.spb-mission-card:nth-child(3n){background:var(--spb-red);color:#fff;justify-self:center;transform:rotate(-1.4deg)}
.spb-mission-card:nth-child(4n){background:var(--spb-paper);color:var(--spb-black);justify-self:end;box-shadow:8px 8px 0 var(--spb-red)}
.spb-mission-label{grid-column:1/-1;font:900 10px/1 var(--spb-font-tech);letter-spacing:.18em;color:var(--spb-red)}
.spb-mission-card:nth-child(2n) .spb-mission-label,.spb-mission-card:nth-child(3n) .spb-mission-label{color:var(--spb-yellow)}
.spb-mission-card strong{font:950 clamp(30px,8vw,56px)/.8 var(--spb-font-display)}
.spb-mission-card p{font:900 clamp(18px,4.8vw,28px)/1.05 var(--spb-font-body);text-transform:uppercase}
.spb-mission-arrow{z-index:-1;left:22%;top:34%;width:62%;opacity:.42;filter:invert(1)}
.spb-missions-1 .spb-mission-card{width:min(100%,780px);justify-self:center;min-height:180px}
.spb-missions-2 .spb-mission-card{width:min(91%,680px)}

/* COMIC STORY */
.spb-comic{background:linear-gradient(180deg,#f4f6f9,#dfe8f2);padding-block:94px 118px}
.spb-comic-inner{width:min(1080px,100%);margin:auto}.spb-comic-title>span{color:var(--spb-blue)}
.spb-comic-page{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(240px,36vw));gap:14px;background:var(--spb-black);padding:14px;border:5px solid var(--spb-black);box-shadow:14px 14px 0 var(--spb-red);overflow:visible}
.spb-comic-panel{position:relative;overflow:hidden;background:#c9d2dc;border:0;min-width:0;min-height:260px}
.spb-comic-panel img{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.spb-comic-panel-1{clip-path:polygon(0 0,100% 0,96% 100%,0 95%)}
.spb-comic-panel-2{clip-path:polygon(4% 0,100% 3%,100% 100%,0 96%)}
.spb-comic-panel-3{clip-path:polygon(0 4%,96% 0,100% 100%,3% 100%)}
.spb-comic-panel-4{clip-path:polygon(4% 0,100% 5%,96% 100%,0 100%)}
.spb-comic-1 .spb-comic-page{grid-template-columns:1fr;grid-template-rows:minmax(420px,66vw)}
.spb-comic-1 .spb-comic-panel-1{grid-column:1;grid-row:1}
.spb-comic-2 .spb-comic-page{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(300px,48vw))}
.spb-comic-3 .spb-comic-page{grid-template-columns:1.15fr .85fr;grid-template-rows:repeat(2,minmax(260px,34vw))}
.spb-comic-3 .spb-comic-panel-1{grid-row:1/3}.spb-comic-3 .spb-comic-panel-2{grid-column:2;grid-row:1}.spb-comic-3 .spb-comic-panel-3{grid-column:2;grid-row:2}
.spb-comic-4 .spb-comic-page{grid-template-columns:repeat(2,1fr);grid-template-rows:1.05fr .75fr 1.1fr}
.spb-comic-4 .spb-comic-panel-1{grid-column:1/3;grid-row:1}.spb-comic-4 .spb-comic-panel-2{grid-column:1;grid-row:2}.spb-comic-4 .spb-comic-panel-3{grid-column:2;grid-row:2}.spb-comic-4 .spb-comic-panel-4{grid-column:1/3;grid-row:3;clip-path:polygon(0 10%,100% 0,96% 100%,3% 94%)}
.spb-gallery-go{z-index:5;left:-24px;top:31%;width:120px;transform:rotate(-8deg)}
.spb-gallery-wow{z-index:5;right:-22px;bottom:21%;width:135px;transform:rotate(7deg)}

/* optional info cards */
.spb-team{background:var(--spb-blue);color:#fff}.spb-gear{background:var(--spb-paper)}.spb-contact{background:var(--spb-red);color:#fff}
.spb-info-panel{position:relative;width:min(760px,100%);margin:auto;padding:36px 38px;border:5px solid var(--spb-black);background:#fff;color:var(--spb-black);box-shadow:10px 10px 0 var(--spb-yellow);clip-path:polygon(0 0,96% 0,100% 18%,98% 100%,4% 96%,0 78%)}
.spb-team .spb-info-panel{background:var(--spb-deep);color:#fff}.spb-contact .spb-info-panel{background:#fff}
.spb-info-panel h2{font:950 clamp(30px,7vw,56px)/.94 var(--spb-font-display);text-transform:uppercase;margin-top:9px}
.spb-info-panel p{font-size:16px;line-height:1.6;margin-top:12px;max-width:620px}
.spb-info-icon{right:18px;top:18px;width:74px;opacity:.8}
.spb-phone{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-weight:900;text-decoration:none;color:var(--spb-red)}

/* FINAL HERO MOMENT */
.spb-final{position:relative;min-height:88svh;background:#030914;color:#fff;overflow:hidden;border-top:8px solid var(--spb-black)}
.spb-final-inner{position:relative;min-height:88svh;display:grid;place-items:center;isolation:isolate;padding:88px 22px 130px}
.spb-final-sky{position:absolute;inset:0;z-index:-7;background:radial-gradient(circle at 70% 20%,rgba(28,115,206,.48),transparent 25%),linear-gradient(#07182e,#02050a)}
.spb-final-sky:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffd83d 0 1px,transparent 1.5px);background-size:72px 72px;opacity:.32}
.spb-final-city{left:0;bottom:0;width:100%;max-width:none;z-index:-4}.spb-final-city-back{height:35%;opacity:.6}.spb-final-city-front{height:42%}
.spb-final-character{position:absolute;z-index:-1;right:4%;bottom:8%;width:min(34vw,250px);transform:rotate(-8deg);filter:brightness(.55) saturate(.9) drop-shadow(10px 12px 0 rgba(0,0,0,.4));opacity:.86}
.spb-final-web{left:-2%;top:-2%;width:min(42vw,300px);opacity:.68}
.spb-final-line{z-index:-2;width:80%;left:10%;top:20%;opacity:.2}
.spb-final-copy{position:relative;z-index:3;width:min(760px,100%);text-align:center;padding:42px 26px;background:rgba(7,24,46,.82);border:4px solid #fff;box-shadow:12px 12px 0 var(--spb-red);clip-path:polygon(5% 0,100% 0,96% 100%,0 93%)}
.spb-final-copy strong{display:block;font:950 clamp(44px,12vw,86px)/.82 var(--spb-font-display);text-transform:uppercase;color:var(--spb-yellow);-webkit-text-stroke:2px var(--spb-black);text-shadow:6px 6px 0 var(--spb-red)}
.spb-final-copy h2{margin-top:22px;font:850 clamp(24px,6vw,44px)/1.05 var(--spb-font-body);text-wrap:balance}
.spb-final-copy p{margin-top:20px;font:900 13px/1 var(--spb-font-tech);letter-spacing:.16em}

/* motion */
@keyframes spb-city-up{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes spb-character-in{to{opacity:1;transform:translate(0,0) rotate(4deg)}}
@keyframes spb-character-float{0%,100%{translate:0 0}50%{translate:0 -3px}}
@keyframes spb-copy-in{to{opacity:1;transform:none}}
@keyframes spb-photo-in{to{opacity:1;transform:translate(-50%,-50%) rotate(-1deg) scale(1)}}
@keyframes spb-age-pop{0%{opacity:0;transform:scale(.55) rotate(12deg)}70%{opacity:1;transform:scale(1.12) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes spb-tag-in{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes spb-rays-in{from{opacity:0;scale:.86}to{opacity:.09;scale:1}}
@keyframes spb-web-in{from{opacity:0;clip-path:inset(0 100% 100% 0)}to{opacity:.72;clip-path:inset(0)}}
@keyframes spb-tail-pop{to{transform:rotate(-28deg) scale(1)}}
@keyframes spb-number-change{from{transform:scale(.92);opacity:.72}to{transform:scale(1);opacity:1}}
@keyframes spb-route-draw{to{clip-path:inset(0)}}
@keyframes spb-pin-pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* 360/390/430 mobile art direction */
@media(max-width:600px){
  .spb-hero{height:max(760px,100dvh);min-height:760px}
  .spb-hero-layout{padding:86px 18px 108px;align-items:end}
  .spb-character{width:48vw;right:-5%;top:3%;z-index:1}
  .spb-photo-stack{top:42%;width:60vw;max-width:260px}
  .spb-hero-copy{max-width:100%;margin-bottom:0}
  .spb-sticker{margin-bottom:14px}
  .spb-age-burst{left:auto;right:-2px;top:-76px;width:clamp(90px,26vw,112px)}
  .spb-wow{right:2%;bottom:38%;width:104px}
  .spb-web{width:46vw}
  .spb-date{min-height:590px;padding:78px 16px 92px}
  .spb-date-composition{grid-template-columns:1.05fr .95fr;min-height:340px}
  .spb-date-day{-webkit-text-stroke:3px var(--spb-black);text-shadow:7px 7px 0 var(--spb-blue)}
  .spb-date-time{justify-self:stretch;justify-content:space-between}
  .spb-countdown-grid{padding:12px;gap:9px;box-shadow:8px 8px 0 var(--spb-red)}
  .spb-count-node{min-height:132px}
  .spb-base{padding-inline:14px}.spb-base-card{min-height:620px;clip-path:none}
  .spb-base-card:after{background:linear-gradient(180deg,rgba(255,255,255,.96) 0 52%,rgba(255,255,255,.35) 82%,transparent)}
  .spb-base-copy{width:100%;min-height:auto;padding:42px 26px 300px;align-content:start}
  .spb-map-pin{right:16%;top:66%;width:76px}.spb-route-line{right:17%;top:57%;width:47%;height:30%}
  .spb-mission-card{width:94%;padding:23px 21px;grid-template-columns:auto 1fr;gap:7px 14px}.spb-mission-card p{font-size:clamp(17px,5vw,24px)}
  .spb-comic-page{gap:9px;padding:9px;box-shadow:8px 8px 0 var(--spb-red)}
  .spb-comic-1 .spb-comic-page{grid-template-rows:520px}
  .spb-comic-2 .spb-comic-page{grid-template-rows:repeat(2,340px)}
  .spb-comic-3 .spb-comic-page{grid-template-columns:1.14fr .86fr;grid-template-rows:repeat(2,270px)}
  .spb-comic-4 .spb-comic-page{grid-template-rows:260px 210px 280px}
  .spb-gallery-go{width:90px;left:-10px}.spb-gallery-wow{width:100px;right:-10px}
  .spb-info-panel{padding:31px 24px}.spb-info-icon{width:60px}
  .spb-final-character{width:42vw;right:-4%;bottom:5%}
  .spb-final-copy{padding:38px 18px}
}
@media(max-width:370px){
  .spb-hero{min-height:730px}.spb-photo-stack{width:58vw;top:40%}.spb-character{width:46vw}.spb-wow{bottom:39%;width:92px}
  .spb-hero-name{font-size:clamp(43px,14.2vw,62px)}.spb-hero-name--md{font-size:42px}.spb-hero-name--sm{font-size:36px}.spb-hero-name--xs{font-size:31px}
  .spb-age-burst{width:92px;top:-70px}.spb-date-day{font-size:126px}.spb-date-meta strong{font-size:30px}.spb-count-node{min-height:122px}
  .spb-count-number{font-size:52px}.spb-base-copy{padding-inline:22px}.spb-comic-4 .spb-comic-page{grid-template-rows:240px 190px 260px}
}
@media(min-width:601px) and (max-width:900px){
  .spb-hero{min-height:820px}.spb-photo-stack{width:390px;top:47%}.spb-character{width:360px;right:-1%}.spb-hero-copy{max-width:68%;margin-top:auto}.spb-age-burst{left:330px}
  .spb-base-copy{width:55%}.spb-comic-page{grid-template-rows:repeat(2,360px)}
}
@media(min-width:901px){
  .spb-hero{min-height:780px;height:100svh}.spb-hero-layout{grid-template-columns:36% 38% 26%;align-items:center;padding-block:70px}
  .spb-hero-copy{grid-column:1;align-self:center;max-width:100%;z-index:8}.spb-photo-stack{position:relative;grid-column:2;left:auto;top:auto;width:min(32vw,400px);transform:rotate(-4deg) scale(.93);justify-self:center;animation-name:spb-photo-in-desktop}
  .spb-character{width:min(33vw,470px);right:2%;top:12%;z-index:2}.spb-age-burst{left:auto;right:-18px;top:-72px}.spb-wow{right:4%;bottom:16%}
  .spb-date-composition{grid-template-columns:1.1fr .7fr .55fr}.spb-date-time{grid-column:3;grid-row:1;justify-self:stretch;align-self:center;display:grid;text-align:center;transform:rotate(2deg)}
  .spb-countdown-grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:18px}.spb-count-node{min-height:190px}.spb-count-number{font-size:clamp(58px,6vw,88px)}
  .spb-mission-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.spb-mission-card{width:100%!important;justify-self:stretch!important;min-height:180px}.spb-mission-card:nth-child(even){transform:translateY(26px) rotate(1deg)}.spb-mission-card:nth-child(3n){transform:rotate(-1deg)}
  .spb-comic-page{grid-template-rows:repeat(2,minmax(340px,30vw))}.spb-comic-4 .spb-comic-page{grid-template-columns:1.1fr .9fr 1fr;grid-template-rows:320px 320px}.spb-comic-4 .spb-comic-panel-1{grid-column:1/3;grid-row:1}.spb-comic-4 .spb-comic-panel-2{grid-column:3;grid-row:1}.spb-comic-4 .spb-comic-panel-3{grid-column:1;grid-row:2}.spb-comic-4 .spb-comic-panel-4{grid-column:2/4;grid-row:2}
}
@keyframes spb-photo-in-desktop{to{opacity:1;transform:rotate(-1deg) scale(1)}}

@media(prefers-reduced-motion:reduce){
  .spb{--spb-parallax:0!important}.spb *,.spb *::before,.spb *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .spb-character,.spb-hero-copy,.spb-photo-stack,.spb-age-burst,.spb-wow,.spb-web{opacity:1!important}.spb-hero-copy{transform:none!important}
  .spb-photo-stack{transform:translate(-50%,-50%) rotate(-1deg) scale(1)!important}.spb-age-burst{transform:none!important}.spb-character{transform:rotate(4deg)!important}
  .spb-route-line{clip-path:none!important}.spb-map-pin{transform:scale(1)!important}
  .spb .ti-pending[data-ti-motion]{opacity:1!important;transform:none!important;clip-path:none!important}
}
@media(min-width:901px) and (prefers-reduced-motion:reduce){.spb-photo-stack{transform:rotate(-1deg) scale(1)!important}}

/* ==============================================================
   TERRAINVITE · Birthday Spider-Man · v23.1 readability/mobile fix
   - stable template typography by default
   - clearer age badge and countdown numerals
   - responsive invitation speech card
   - mobile Hero Base map without empty dead space
   ============================================================== */

/* Keep utility/display typography readable even when an existing invite was
   saved before this template received defaultFontStyle: "template". */
.invite-font-scope .spb :is(
  .spb-age-burst strong,
  .spb-speech h2,
  .spb-date-day,
  .spb-date-meta strong,
  .spb-date-time strong,
  .spb-count-number,
  .spb-countdown-ended,
  .spb-section-title h2,
  .spb-base-copy h2,
  .spb-mission-card strong,
  .spb-final-copy strong
){
  font-family:"Arial Black","DM Sans",Arial,sans-serif!important;
}

.spb-hero-text{
  color:#fff;
  background:rgba(4,18,35,.94);
  border-left-color:var(--spb-yellow);
  text-shadow:0 1px 1px rgba(0,0,0,.18);
}

/* AGE — number and label are visually separated, so “7 ЛЕТ” never collides. */
.spb-age-burst{
  width:clamp(106px,29vw,132px);
  filter:drop-shadow(5px 7px 0 rgba(0,0,0,.28));
}
.spb-age-burst strong{
  z-index:3;
  font-size:clamp(46px,13vw,66px)!important;
  line-height:.82!important;
  font-variant-numeric:tabular-nums;
  transform:translateY(-7px);
  color:var(--spb-black);
  -webkit-text-stroke:0;
  text-shadow:none;
}
.spb-age-burst span{
  left:50%;
  bottom:12%;
  transform:translateX(-50%);
  min-width:46px;
  padding:4px 8px 5px;
  border:2px solid #fff;
  background:var(--spb-black);
  color:var(--spb-yellow);
  box-shadow:2px 2px 0 var(--spb-red);
  font:900 10px/1 var(--spb-font-tech);
  letter-spacing:.1em;
  text-align:center;
  white-space:nowrap;
}

/* COUNTDOWN — prevent thin serif glyphs + stroke from turning the digits black. */
.spb-count-number{
  line-height:.88!important;
  letter-spacing:-.035em;
  -webkit-text-stroke:1px var(--spb-black);
  text-shadow:3px 3px 0 var(--spb-black);
}
.spb-count-node span{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:23px;
  padding:4px 7px;
  background:rgba(8,10,13,.82);
  border-radius:2px;
  color:var(--spb-yellow);
  line-height:1.1;
  white-space:nowrap;
}

@media(max-width:600px){
  /* HERO */
  .spb-hero-copy{padding-right:2px}
  .spb-age-burst{right:0;top:-86px;width:108px}
  .spb-age-burst strong{font-size:54px!important}
  .spb-wow{width:96px;right:1%;bottom:37%}
  .spb-hero-text{max-width:calc(100% - 8px);font-size:15px;line-height:1.45;padding:12px 14px}

  /* INVITATION TEXT — replace the stretched SVG bubble with a content-sized
     comic card. This prevents the kicker, heading and paragraph overlapping. */
  .spb-intro{padding:74px 16px 92px}
  .spb-speech{
    width:100%;
    min-height:0;
    padding:48px 26px 50px;
    gap:13px;
    align-content:start;
    background:var(--spb-paper);
    border:5px solid var(--spb-black);
    box-shadow:10px 12px 0 var(--spb-blue);
    filter:none;
    isolation:isolate;
  }
  .spb-speech:before{
    content:"";
    position:absolute;
    z-index:0;
    left:24px;
    right:24px;
    top:19px;
    height:8px;
    background:var(--spb-red);
    opacity:.78;
    pointer-events:none;
  }
  .spb-speech-shape{display:none}
  .spb-speech>.spb-micro,
  .spb-speech>h2,
  .spb-speech>p{position:relative;z-index:2;max-width:100%}
  .spb-speech .spb-micro{
    display:block;
    padding-top:5px;
    font-size:10px;
    line-height:1.35;
    letter-spacing:.16em;
    overflow-wrap:anywhere;
  }
  .spb-speech h2{
    font-size:clamp(28px,8.3vw,42px)!important;
    line-height:1.01;
    letter-spacing:-.025em;
    text-wrap:balance;
    overflow-wrap:normal!important;
    word-break:normal;
  }
  .spb-speech p{
    font-family:var(--spb-font-body);
    font-size:16px;
    line-height:1.52;
    color:#20242b;
    overflow-wrap:break-word;
  }
  .spb-speech-tail{
    z-index:1;
    left:15%;
    bottom:-17px;
    width:30px;
    height:30px;
    border-left-width:5px;
    border-bottom-width:5px;
  }

  /* COUNTDOWN */
  .spb-countdown{padding:82px 14px 98px}
  .spb-countdown .spb-section-title{margin-bottom:28px}
  .spb-countdown .spb-section-title h2{font-size:clamp(34px,10vw,48px)!important;line-height:.96}
  .spb-countdown-grid{gap:10px;padding:11px}
  .spb-count-node{min-height:138px;gap:7px;padding:12px 4px}
  .spb-count-number{font-size:clamp(50px,15.5vw,66px)!important}
  .spb-count-node span{font-size:9px;letter-spacing:.12em}

  /* HERO BASE / MAP — actual map occupies its own lower panel instead of
     being washed out behind a 300px text spacer. */
  .spb-base{padding:70px 14px 94px}
  .spb-base-card{
    min-height:0;
    padding-bottom:300px;
    clip-path:none;
    background:#fff;
    border-width:5px;
    box-shadow:10px 10px 0 var(--spb-blue);
  }
  .spb-map-art{
    inset:auto 0 0;
    width:100%;
    height:300px;
    object-fit:cover;
    object-position:center;
    opacity:1;
    border-top:5px solid var(--spb-black);
  }
  .spb-base-card:after{display:none}
  .spb-base-copy{
    width:100%;
    min-height:0;
    padding:38px 25px 42px;
    gap:11px;
    align-content:start;
    background:#fff;
  }
  .spb-base-copy .spb-micro{line-height:1.3}
  .spb-base-copy h2{
    max-width:100%;
    font-size:clamp(34px,10vw,48px)!important;
    line-height:.96;
    letter-spacing:-.025em;
    overflow-wrap:normal!important;
  }
  .spb-base-copy>strong{font-size:clamp(24px,7vw,31px);line-height:1.08}
  .spb-base-copy p{font-size:15px;line-height:1.45}
  .spb-cta{margin-top:12px;padding:14px 16px;font-size:11px;line-height:1.15}
  .spb-route-line{display:none}
  .spb-map-pin{
    right:13%;
    top:auto;
    bottom:112px;
    width:78px;
    filter:drop-shadow(4px 5px 0 rgba(0,0,0,.18));
  }

  /* FINAL — keep copy clear over the skyline. */
  .spb-final-copy strong{
    font-size:clamp(38px,11vw,58px)!important;
    line-height:.9!important;
    letter-spacing:-.035em;
    -webkit-text-stroke:1px var(--spb-black);
    text-shadow:4px 4px 0 var(--spb-red);
  }
  .spb-final-copy h2{font-family:var(--spb-font-body)!important;font-size:clamp(25px,6.7vw,34px);line-height:1.15}
}

@media(max-width:370px){
  .spb-age-burst{width:98px;top:-78px}
  .spb-age-burst strong{font-size:49px!important}
  .spb-speech{padding-inline:22px}
  .spb-base-card{padding-bottom:278px}
  .spb-map-art{height:278px}
  .spb-map-pin{bottom:103px;width:72px}
}


/* ==============================================================
   TERRAINVITE v24.0.0 — Spider-Man follow-up mobile readability pass
   - age burst always readable
   - burst no longer hides behind WOW sticker
   ============================================================== */
.spb-age-burst{z-index:10!important}
.spb-wow{z-index:7!important}

@media(max-width:600px){
  .spb-age-burst{
    right:8px;
    top:-96px;
    width:116px;
    transform:rotate(6deg);
  }
  .spb-age-burst strong{font-size:58px!important;transform:translateY(-9px)}
  .spb-age-burst span{bottom:10%;padding:5px 9px 6px;font-size:10px}
  .spb-wow{right:0;bottom:34%;width:88px;transform:rotate(6deg)}
}

@media(max-width:390px){
  .spb-age-burst{top:-92px;width:110px}
  .spb-age-burst strong{font-size:55px!important}
  .spb-wow{width:84px;bottom:35%}
}