/* בסימן טוב - the Google landing pages, one per event (hosting/static/l/<event>.html).
   Built by docs/seo/generator/build-landing.py from docs/seo/<event>.md; the design is the wedding page the owner
   approved on 2.10.2026 ("כן מעולה"): the phone with the scrolled film and the button, the event's designs,
   three plain lines, the price, and the questions folded. No inline style anywhere (the site's CSP). */
:root{
  --paper:#f1eee7; --well:#fbfaf6; --surface:#fffdf9;
  --ink:#1c1a17; --fact:#45403a; --muted:#6f6a62;
  --gold:#b17e31; --gold-ink:#785521; --gold-btn:#e1c08e; --gold-btn-h:#d2b57c; --btn-ink:#221a0e;
  --rule:rgb(28 26 23 / .13); --rule-soft:rgb(28 26 23 / .07);
  --hair:linear-gradient(90deg,transparent,#8c6326 18%,#b17e31 50%,#8c6326 82%,transparent);
  --serif:"Noto Serif Hebrew","Heebo",Georgia,serif;
  --sans:"Assistant","Heebo",system-ui,sans-serif;
  --film:"Heebo","Assistant",system-ui,sans-serif;
  --round:"Rubik","Assistant",system-ui,sans-serif;
  --g:16px; --max:1120px; --r:14px; --r-sm:10px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html.locked{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:clip}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:300;margin:0;letter-spacing:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--g);width:100%}
.h2{font-size:clamp(27px,7.2vw,40px);line-height:1.2}
.h2::after{content:"";display:block;width:56px;height:1px;margin:14px auto 0;background:var(--hair)}
.sec{padding:64px 0}
.sec-head{text-align:center;max-width:620px;margin:0 auto 24px}
.sec-head .lead{margin-top:12px;color:var(--muted);font-size:17px;text-wrap:pretty}

/* ---------- the one filled button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:var(--r-sm);text-align:center;
  background:var(--gold-btn);color:var(--btn-ink);font:600 17px/1 var(--sans);text-decoration:none;border:0;cursor:pointer;
  box-shadow:0 12px 26px -16px rgb(138 109 56 / .45);transition:background .2s,transform .15s}
.btn:hover{background:var(--gold-btn-h)}
.btn:active{transform:scale(.985)}
.btn:focus-visible,.textlink:focus-visible,.dz:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.btn svg{width:18px;height:18px}
.btn.is-wide{width:100%;max-width:380px}
.textlink{display:inline-flex;align-items:center;gap:7px;color:var(--gold-ink);font:500 15px/1 var(--sans);text-decoration:none;border-bottom:1px solid rgb(177 126 49 / .35);padding-bottom:3px}
.textlink svg{width:14px;height:14px}
/* the small links are a finger high to tap, and nothing on the page moves for it: the hit area grows past
   the text. The hero's sample link sits 10px under the button, so its area stops there. */
.textlink,.top nav a,.rs-full{position:relative}
.textlink::after,.top nav a::after,.rs-full::after{content:"";position:absolute}
.textlink::after{inset:-10px -8px -15px}
.top nav a::after{inset:-15px -8px}
.rs-full::after{inset:-13px -8px}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;height:60px}
.top .mark{height:38px;width:auto}
.top nav{display:flex;gap:18px;font:500 15px/1 var(--sans)}
.top nav a{text-decoration:none;color:var(--fact)}
.top nav .hide-m{display:none}

/* ---------- hero: header and hero hold still for about a screen while the scroll runs the film ---------- */
.pin{position:relative}
.pin-in{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;overflow:hidden}
.pin-run{height:85vh;height:85svh}
.hero-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;text-align:center;padding:2px 0 14px}
.hero-copy{display:contents}
.hero h1{order:1;flex:none;font-size:clamp(30px,8.6vw,58px);line-height:1.16}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero .lead{order:2;flex:none;color:var(--muted);font-size:17px;line-height:1.45;margin:8px auto 0}
.hero-film{order:3;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center}
.hero .cta{order:4;flex:none;margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
.promise{font:400 16px/1.35 var(--sans);color:var(--ink);text-wrap:balance}
.promise b{font:400 19px/1 var(--serif);margin-inline-end:2px}
.stage{flex:0 1 478px;min-height:220px;margin-top:12px;position:relative;isolation:isolate;container-type:size}
.stage::before{content:"";position:absolute;z-index:-1;left:50%;top:0;translate:-50% 0;width:min(170%,780px);height:100%;
  background:
    repeating-linear-gradient(99deg,rgb(186 179 165 / .3) 0 64px,rgb(255 254 250 / .42) 64px 150px,rgb(190 183 169 / .26) 150px 226px),
    repeating-linear-gradient(103deg,rgb(178 171 156 / .2) 0 96px,rgb(255 253 248 / .26) 96px 210px,transparent 210px 310px),
    radial-gradient(56% 92% at 19% 26%,rgb(255 253 248 / .52),transparent 66%),
    radial-gradient(52% 86% at 83% 22%,rgb(232 226 214 / .44),transparent 64%),
    radial-gradient(74% 56% at 50% 99%,rgb(177 170 155 / .32),transparent 72%);
  filter:blur(18px);
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 38%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 38%,transparent 100%)}
.stage::after{content:"";position:absolute;z-index:-1;left:50%;bottom:0;translate:-50% 0;width:calc((100cqh - 20px) / 2.111 * 1.5);height:20px;border-radius:50%;
  background:radial-gradient(closest-side,rgb(74 59 40 / .3),rgb(74 59 40 / .1) 50%,transparent 80%)}
.phone{--ph:calc(100cqh - 20px);--pw:calc(var(--ph) / 2.111);
  position:absolute;top:0;left:50%;translate:-50% 0;width:var(--pw);height:var(--ph);border-radius:calc(var(--pw) * .18);padding:max(4px,calc(var(--pw) * .042));
  background:linear-gradient(180deg,#26262a 0%,#131316 18%,#0c0c0e 50%,#131316 82%,#202024 100%);
  box-shadow:0 0 0 1px rgb(255 255 255 / .11) inset,0 0 0 2.5px rgb(0 0 0 / .55) inset,0 1px 0 0 rgb(255 255 255 / .14) inset,
    0 2px 4px -2px rgb(0 0 0 / .7),0 12px 22px -12px rgb(0 0 0 / .85),0 44px 90px -40px rgb(0 0 0 / .95)}
.phone::before{content:"";position:absolute;inset-block-start:21%;inset-inline-start:-1.5px;width:1.5px;height:7%;border-radius:2px;background:#3a352f;
  box-shadow:0 calc(var(--ph) * .115) 0 0 #3a352f}
.screen{position:relative;width:100%;height:100%;border-radius:calc(var(--pw) * .14);overflow:hidden;background:#1b1611;container-type:inline-size}
.screen>img,.screen canvas,.sheet-stage>img,.sheet-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
canvas.film{opacity:0;transition:opacity .25s}
canvas.film.on{opacity:1}
/* the design's own colours over its film; each design sets them by class (.d-<id>, below) */
.film-on{--acc:#e6cb98;--on:#fffdf9;--veil:22 17 13}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--veil) / .2),rgb(var(--veil) / .44) 45%,rgb(var(--veil) / .5) 60%,rgb(var(--veil) / .22))}
.screen .notch{position:absolute;top:2.6cqw;left:50%;translate:-50% 0;width:30cqw;height:8cqw;border-radius:99px;background:#0b0b0d;z-index:3}
.cap-bar{position:absolute;left:5.5cqw;top:41%;height:22%;width:1px;background:linear-gradient(180deg,transparent,var(--acc) 20%,var(--acc) 80%,transparent);z-index:2}
.cap-date{position:absolute;right:3.6cqw;top:50%;translate:0 -50%;writing-mode:vertical-rl;font:300 4.2cqw/1 var(--film);letter-spacing:.32em;color:rgb(255 253 249 / .7);z-index:2;direction:ltr}
/* the invitation's own captions: three stations the scroll moves through */
.st{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--on);z-index:2;padding:0 9cqw;white-space:nowrap;opacity:0;will-change:opacity,transform}
.st.s1{opacity:1}
.st .k{font:400 4.6cqw/1 var(--film);letter-spacing:.3em;color:var(--acc);margin-bottom:3.4cqw}
.st .k::after{content:"";display:block;width:12cqw;height:1px;margin:3.4cqw auto 0;background:var(--acc);opacity:.6}
.st .big{font:200 12.6cqw/1.12 var(--film);text-shadow:0 1px 18px rgb(0 0 0 / .35)}
.st .big.solo{font-size:15cqw}
.st .big.date{font-size:11cqw}
/* the phone in the hero has the gold bar and the upright date at its sides: the longest Hebrew date fits between them */
.screen .st .big.date{font-size:9.6cqw}
.st .gold{font:300 9cqw/1.25 var(--film);color:var(--acc);margin-top:1.6cqw}
.st .sm{font:300 6cqw/1.4 var(--film);margin-top:3cqw;opacity:.92}
/* one line each (nowrap), so a long caption steps down a size: the generator marks it .mid or .long by its length */
.st .big.mid{font-size:11.2cqw}
.st .big.long{font-size:10cqw}
.st .big.solo.mid{font-size:12.6cqw}
.st .big.solo.long{font-size:10cqw}
/* the small captions in the accent take the same lift off the film as the big line */
.st .k,.st .gold,.st .sm,.st .times{text-shadow:0 1px 10px rgb(0 0 0 / .5)}
.st .join{display:block;width:16cqw;height:1px;margin:3.4cqw auto;background:linear-gradient(90deg,transparent,var(--acc),transparent);position:relative}
.st .join::after{content:"";position:absolute;left:50%;top:50%;width:1.8cqw;height:1.8cqw;translate:-50% -50%;rotate:45deg;background:var(--acc)}
.st .times{display:flex;gap:5cqw;margin-top:5cqw;padding-top:4cqw;border-top:1px solid rgb(255 253 249 / .22);font:300 5cqw/1.3 var(--film)}
.st .times b{display:block;font:300 8cqw/1.2 var(--film)}
.st .times span{color:var(--acc);letter-spacing:.2em;font-size:4.2cqw}
.f-classic .st .big{font-family:var(--serif);font-weight:300}
.f-modern .st .big{font-family:var(--sans);font-weight:300}
.f-round .st .big{font-family:var(--round);font-weight:300}
.cue{position:absolute;inset-inline:0;bottom:7cqw;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2.4cqw;font:400 4.2cqw/1 var(--film);letter-spacing:.3em;color:rgb(255 253 249 / .85)}
.cue::after{content:"";width:1px;height:9cqw;background:linear-gradient(180deg,var(--on),transparent);animation:cue 1.8s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(.2);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.cue::after{animation:none}canvas.film{transition:none}}

/* ---------- rails (phone) ---------- */
.rail{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--g) 14px;margin:0 calc(var(--g) * -1);scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:center;flex:none}

/* ---------- designs: a tap plays the design ---------- */
#designs{padding-top:24px}
.dz{width:43vw;max-width:210px;text-decoration:none;color:var(--ink);display:block}
.dz-pic{position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#2a241d;box-shadow:0 1px 2px rgb(0 0 0 / .18),0 14px 26px -18px rgb(40 30 15 / .6);container-type:inline-size}
.dz-pic img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.dz:hover .dz-pic img{transform:scale(1.04)}
.dz-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgb(20 15 10 / .62))}
.dz-names{position:absolute;inset-inline:0;bottom:9cqw;text-align:center;color:#fffdf9;z-index:1;padding-inline:6cqw}
.dz-names b{display:block;font-weight:300;font-size:12.5cqw;line-height:1.1}
.dz-names small{display:block;font:300 6cqw/1 var(--film);letter-spacing:.28em;color:#ecd4a6;margin-top:3cqw;direction:ltr}
.dz-play{position:absolute;top:6cqw;inset-inline-end:6cqw;z-index:1;width:16cqw;height:16cqw;border-radius:50%;display:grid;place-items:center;
  background:rgb(255 253 249 / .2);border:1px solid rgb(255 253 249 / .55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fffdf9}
.dz-play svg{width:42%;height:42%;margin-inline-end:-8%}
.dz.classic .dz-names b{font-family:var(--serif)}
.dz.modern .dz-names b{font-family:var(--sans);font-weight:300}
.dz.round .dz-names b{font-family:var(--round);font-weight:300}
.dz.light .dz-pic::after{display:none}
/* a light design's card in its own ink and accent (.d-<id>, below), as its film prints them */
.dz.light .dz-names{bottom:auto;top:44%;color:var(--on)}
.dz.light .dz-names small{color:var(--acc)}
.dz.light .dz-play{background:rgb(58 44 41 / .08);border-color:rgb(58 44 41 / .3);color:var(--on)}
.dz-names.long b{font-size:9.5cqw;white-space:nowrap}
.dz-name{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:10px;padding-inline:2px}
.dz-name b{font:300 18px/1.2 var(--serif)}
.designs-foot{text-align:center;margin-top:16px}

/* ---------- what you get: three plain lines ---------- */
#gets{padding-top:8px}
.perks{list-style:none;margin:0 auto;padding:0;max-width:560px}
.perks li{display:grid;grid-template-columns:30px 1fr;column-gap:14px;row-gap:2px;padding:16px 0;border-top:1px solid var(--rule-soft)}
.perks li:first-child{border-top:0}
.perks svg{grid-row:1 / 3;width:26px;height:26px;color:var(--gold);margin-top:2px}
.perks b{font:300 20px/1.3 var(--serif);color:var(--ink)}
.perks span{font-size:15.5px;line-height:1.45;color:var(--muted)}

/* ---------- price ---------- */
.price{position:relative;text-align:center;overflow:hidden;background:var(--well);border-block:1px solid var(--rule-soft)}
.price::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 0%,rgb(225 192 142 / .22),transparent 70%)}
.price .wrap{position:relative}
.amount{font:200 clamp(78px,24vw,124px)/1 var(--serif);color:var(--ink);margin-top:10px;letter-spacing:-.01em}
.amount small{font-size:.46em;color:var(--gold);margin-inline-start:6px;font-weight:300;vertical-align:.62em}
.price .incl{font-size:18px;color:var(--fact);margin-top:6px}
.seal{display:inline-flex;align-items:center;gap:9px;margin:20px auto 0;padding:12px 14px;border-radius:12px;background:var(--surface);border:1px solid rgb(177 126 49 / .4);font:300 17px/1.35 var(--serif);color:var(--ink);text-align:start}
.seal svg{width:22px;height:22px;color:var(--gold);flex:none}
.price .btn{display:flex;margin:24px auto 0}

/* ---------- faq: the long text, folded ---------- */
.faq{max-width:760px;margin:0 auto}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 2px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.faq summary h3{font:300 19px/1.35 var(--serif);color:var(--ink)}
.faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:50%;border:1px solid rgb(177 126 49 / .5);
  background:linear-gradient(var(--gold),var(--gold)) center/9px 1px no-repeat,linear-gradient(var(--gold),var(--gold)) center/1px 9px no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 2px 18px;color:var(--fact);font-size:16px;line-height:1.65}
.faq .ans>*+*{margin-top:10px}
.faq .ans ul,.faq .ans ol{margin:0;padding-inline-start:20px}
.faq .ans ul+*,.faq .ans ol+*{margin-top:10px}
.faq .ans li{margin:3px 0}
.faq .ans li::marker{color:var(--gold)}
.faq .ans .q{font:300 17px/1.6 var(--serif);color:var(--ink);padding-inline-start:12px;border-inline-start:2px solid rgb(177 126 49 / .4)}

/* ---------- under the questions (28.10.2026): the wording and a short guide, for whoever searched for them - folded and
   quiet, after everything the page was approved with, so the page reads as it did ---------- */
.sec.more{padding-top:0}
.more-in{max-width:760px;margin:0 auto}
.more-h{font:300 22px/1.3 var(--serif);color:var(--ink);text-align:center}
.more-lead{margin-top:6px;text-align:center;color:var(--muted);font-size:15px;text-wrap:pretty}
.more .faq{margin-top:10px}
.more-note{margin:12px 2px 0;color:var(--muted);font-size:14px;line-height:1.6;text-wrap:pretty}
.more-note+.more-h,.more .faq+.more-h{margin-top:44px}
.faq .ans .wd{font:300 17px/1.65 var(--serif);color:var(--ink);padding-inline-start:12px;border-inline-start:2px solid rgb(177 126 49 / .4)}
.faq .ans .wd p+p{margin-top:10px}

/* ---------- footer ---------- */
footer{padding:36px 0 110px;text-align:center;border-top:1px solid var(--rule)}
footer .mark{height:34px;width:auto;margin:0 auto 12px;opacity:.9}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;font:400 14px/1.4 var(--sans)}
footer nav a{color:var(--fact);text-decoration:none;display:inline-block;padding:10px 6px}
footer p{font-size:13px;color:var(--muted);margin-top:12px}
footer p a{color:var(--gold-ink)}

/* ---------- the bottom dock (phone only, once the hero button has scrolled away) ---------- */
.dock{position:fixed;inset-inline:0;bottom:0;z-index:20;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));
  background:rgb(241 238 231 / .92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rule-soft);
  display:flex;align-items:center;gap:12px;transform:translateY(110%);visibility:hidden;transition:transform .35s cubic-bezier(.22,1,.36,1),visibility 0s .35s}
.dock.on{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.dock .btn{flex:1;min-height:50px}
.dock .p{font:300 22px/1 var(--serif);white-space:nowrap}
.dock .p small{display:block;font:400 11px/1.2 var(--sans);color:var(--muted);margin-top:3px}

/* ---------- the sample: a design opens full screen and plays under the thumb ---------- */
.sheet{position:fixed;inset:0;z-index:60;background:rgb(12 10 8 / .94)}
.sheet-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.sheet-scroll::-webkit-scrollbar{display:none}
.sheet-col{position:relative;max-width:440px;margin:0 auto;background:#0d0b09}
.sheet-stage{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;overflow:hidden;container-type:inline-size}
.sheet-stage .st{padding:0 10cqw}
.sheet-stage .cue{bottom:calc(30cqw + env(safe-area-inset-bottom))}
.sheet-run{height:230vh;height:230svh}
.sheet-end{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:14px;padding:0 18px calc(104px + env(safe-area-inset-bottom))}
.rs{width:100%;max-width:340px;text-align:center;padding:22px 18px 20px;border-radius:16px;background:rgb(255 253 249 / .93);color:var(--ink);box-shadow:0 30px 60px -30px rgb(0 0 0 / .8)}
.rs-k{font:500 12px/1 var(--sans);letter-spacing:.24em;color:var(--gold-ink)}
.rs-t{font:300 26px/1.25 var(--serif);margin-top:10px}
.rs-b{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.rs-b button{all:unset;cursor:pointer;text-align:center;padding:12px 6px;border-radius:10px;border:1px solid rgb(28 26 23 / .25);font:500 15px/1.2 var(--sans);color:var(--ink)}
.rs-b button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rs-b button:first-child{border-color:rgb(177 126 49 / .6);background:#fff7e8}
.rs-done{font:300 18px/1.45 var(--serif);margin-top:12px}
.rs-full{color:rgb(255 253 249 / .82);font:400 14px/1.3 var(--sans);text-underline-offset:4px;text-decoration-color:rgb(255 253 249 / .35)}
.sheet-x{all:unset;cursor:pointer;position:fixed;z-index:62;top:calc(12px + env(safe-area-inset-top));inset-inline-end:max(12px,calc(50% - 220px + 12px));width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:rgb(12 10 8 / .45);border:1px solid rgb(255 253 249 / .35);color:#fffdf9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sheet-x svg{width:18px;height:18px}
.sheet-x:focus-visible{outline:2px solid var(--gold-btn);outline-offset:2px}
.sheet-name{position:fixed;z-index:62;top:calc(22px + env(safe-area-inset-top));inset-inline-start:max(16px,calc(50% - 220px + 16px));font:300 17px/1 var(--serif);color:#fffdf9;text-shadow:0 1px 10px rgb(0 0 0 / .5)}
.sheet-bar{position:fixed;z-index:61;bottom:0;left:50%;translate:-50% 0;width:100%;max-width:440px;display:flex;justify-content:center;padding:28px 16px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgb(12 10 8 / .6))}
.sheet.is-light .veil{background:radial-gradient(80% 42% at 50% 50%,rgb(252 249 245 / .78),transparent 76%)}
.sheet.is-light .st .big,.sheet.is-light .st .k,.sheet.is-light .st .gold,.sheet.is-light .st .sm,.sheet.is-light .st .times{text-shadow:none}
.sheet.is-light .st .times{border-top-color:rgb(58 44 41 / .2)}
.sheet.is-light .sheet-x{background:rgb(255 253 249 / .6);color:#3a2c29;border-color:rgb(58 44 41 / .25)}
.sheet.is-light .sheet-name{color:#3a2c29;text-shadow:none}
/* the scroll cue and the end link sit on the light paper too: the same dark ink */
.sheet.is-light .cue{color:rgb(58 44 41 / .85)}
.sheet.is-light .rs-full{color:#3a2c29;text-decoration-color:rgb(58 44 41 / .35)}
/* a light film in the hero's phone (bat.html's butterflies envelope, the first light hero, 19.10): the sample
   sheet's paper there too - the same veil, the ink with no shadow, the cue and the upright date in dark ink - so the
   phone prints what the invitation prints */
.screen.light .veil{background:radial-gradient(80% 42% at 50% 50%,rgb(252 249 245 / .78),transparent 76%)}
.screen.light .st .big,.screen.light .st .k,.screen.light .st .gold,.screen.light .st .sm,.screen.light .st .times{text-shadow:none}
.screen.light .st .times{border-top-color:rgb(58 44 41 / .2)}
.screen.light .cue{color:rgb(58 44 41 / .85)}
.screen.light .cap-date{color:rgb(58 44 41 / .7)}

/* ================= desktop ================= */
@media (min-width:700px){
  :root{--g:32px}
  .sec{padding:80px 0}
  .top{height:76px}
  .top .mark{height:46px}
  .top nav .hide-m{display:inline}
  .dz{width:auto;max-width:none}
  .rail.designs{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,240px));justify-content:center;gap:18px;overflow:visible;margin:0;padding:0}
  .rail.designs.n4{--cols:4}
  .rail.designs.n5{--cols:5}
  .perks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:960px}
  .perks li{border-top:0;padding:0}
  .dock{display:none}
  footer{padding-bottom:40px}
}
@media (min-width:980px){
  .hero-wrap{justify-content:center}
  .hero{flex:none;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;text-align:start;gap:40px;padding:0 0 48px}
  .hero-copy{display:block}
  .hero h1{font-size:54px}
  .hero .lead{margin-inline:0;font-size:20px;margin-top:18px}
  .hero .cta{align-items:flex-start;margin-top:30px}
  .promise{font-size:17px}
  .stage{flex:none;height:548px;margin:0;min-height:0}
}
@media (max-height:520px){
  .pin-in{height:auto}
  .stage{flex:none;height:320px}
}

/* ================= the designs' own colours (generated from web/src/templates/index.ts) ================= */
/* ---------- the WhatsApp moment and the answers (#guests) - the home page's HomeGuests, on paper ---------- */
.wa .h2 em{font-style:normal;color:var(--gold)}
.wa-phone{position:relative;width:min(82%,330px);margin:26px auto 14px;aspect-ratio:9/18.5;border-radius:44px;padding:9px;
  background:linear-gradient(145deg,#4a4a50,#18181b 40%,#2c2c30);box-shadow:0 30px 60px -28px rgb(28 26 23 / .55)}
.wa-scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#0b141a;color:#e9edef;text-align:start;font-family:var(--film)}
.wa-island{position:absolute;top:9px;left:50%;translate:-50% 0;width:32%;height:24px;border-radius:14px;background:#000;z-index:6}
.wa-status{position:absolute;top:0;inset-inline:0;height:40px;padding:12px 22px 0;display:flex;justify-content:space-between;align-items:center;z-index:5;direction:ltr}
.wa-status b{font-size:13px;font-weight:600}
.wa-status span{display:flex;align-items:center;gap:5px}
.wa-status svg{display:block;width:auto;height:10px;fill:currentColor}
.wa-status .wa-wifi{height:10.5px}
.wa-wifi path:not(:last-child){fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.wa-status .wa-bat{height:11px}
.wa-bat-case{fill:none;stroke:currentColor;stroke-opacity:.45}
.wa-bat-nub{opacity:.45}
.wa-top{position:absolute;top:0;inset-inline:0;padding:42px 12px 10px;background:#202c33;display:flex;align-items:center;gap:9px;z-index:3}
.wa-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e1c08e,#a77a2c);display:grid;place-items:center;font-size:15px}
.wa-top b{display:block;font-weight:500;font-size:14px;line-height:1.3}
.wa-top small{color:#8696a0;font-size:11px}
.wa-chat{position:absolute;inset:0;padding:96px 9px 16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.wa-msg{position:relative;align-self:flex-start;max-width:86%;padding:6px 8px 16px;border-radius:9px;background:#202c33;font-size:13px;line-height:1.4}
.wa-msg.is-out{align-self:flex-end;background:#005c4b}
.wa-msg small{position:absolute;bottom:3px;inset-inline-end:7px;font-size:9.5px;color:#8696a0}
.wa-msg.is-out small{color:#9fd3c7}
.wa-tick{color:#53bdeb}
.wa-msg.is-pic{padding:3px 3px 16px;margin-bottom:8px;max-width:80%}
.wa-pic{display:block;border-radius:7px;overflow:hidden;background:#000;line-height:0}
.wa-pic img{width:100%;height:auto;max-height:300px;object-fit:cover;display:block}
.wa-txt{margin:6px 6px 0;font-size:12.5px;line-height:1.45}
.wa-link{color:#53bdeb;direction:ltr;unicode-bidi:plaintext;word-break:break-all}
.wa-heart{position:absolute;bottom:-10px;inset-inline-start:10px;background:#233138;border-radius:99px;padding:1px 6px;font-size:13px;box-shadow:0 1px 3px rgb(0 0 0 / .5);
  transition:opacity .3s,scale .35s cubic-bezier(.34,1.56,.64,1)}
.wa-typing{align-self:flex-start;background:#202c33;border-radius:9px;padding:9px 12px;display:none;gap:4px}
.wa-typing.is-on{display:flex}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:wa-dot 1s infinite}
.wa-typing i:nth-child(2){animation-delay:.15s}
.wa-typing i:nth-child(3){animation-delay:.3s}
.wa-tap{margin:0 0 6px;text-align:center;color:var(--gold-ink);font-size:14px}
.wa-head2{margin-top:44px}
.rv{max-width:360px;margin:22px auto 0;border-radius:20px;background:var(--surface);border:1px solid var(--rule-soft);text-align:start;padding:16px 16px 8px;
  box-shadow:0 2px 6px -2px rgb(28 26 23 / .12),0 24px 48px -32px rgb(28 26 23 / .35)}
.rv-head{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #efe6d6}
.rv-head b{font-family:var(--serif);font-weight:400;font-size:18px}
.rv-head span{font-size:13px;color:var(--muted)}
.rv-head strong{font-size:26px;color:#a97408;font-weight:600;margin-inline-end:4px;font-variant-numeric:tabular-nums}
.rv ul{list-style:none;margin:0;padding:0}
.rv li{display:flex;align-items:center;justify-content:space-between;padding:10px 2px;border-bottom:1px solid #f3ecdf;font-size:15px;transition:opacity .4s,translate .4s}
.rv li:last-child{border-bottom:0}
.rv li em{font-style:normal;font-size:13px;color:#2e7d4f;background:#e6f4ea;border-radius:99px;padding:2px 10px}
.rv li em.no{color:#8a5a00;background:#fbf1dc}
/* with the script on (l.js marks the section is-live), the chat and the answers arrive one by one; without it
   everything is simply there */
.wa.is-live .wa-msg:not(.is-in){display:none}
.wa.is-live .wa-msg.is-in{animation:wa-in .35s ease both}
.wa.is-live .wa-heart:not(.is-on){opacity:0;scale:.4}
.wa.is-live .rv li:not(.is-in){opacity:0;translate:0 8px}
.wa.is-live .wa-tap{animation:wa-pulse 1.6s ease-in-out infinite}
@keyframes wa-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes wa-dot{0%,60%,100%{opacity:.35}30%{opacity:1}}
@keyframes wa-pulse{50%{opacity:.45}}

/*DESIGNS*/
.d-bachelor-asphalt{--acc:#f7b27a;--on:#fffcf8;--veil:12 13 16}
.d-bachelor-night{--acc:#c7cfd9;--on:#fbfcfd;--veil:16 18 22}
.d-bachelor-whisky{--acc:#e5c58f;--on:#fffcf4;--veil:28 22 14}
.d-bachelorette-champagne{--acc:#e9d7ab;--on:#fffefa;--veil:38 34 26}
.d-bachelorette-neon{--acc:#ff9ecb;--on:#fffafd;--veil:16 8 18}
.d-bachelorette-white{--acc:#f6dde3;--on:#fffdfb;--veil:46 24 26}
.d-bar-mitzvah-classic{--acc:#dbc38a;--on:#fffdf9;--veil:10 15 30}
.d-bar-mitzvah-fireworks{--acc:#e8cf96;--on:#fffdf9;--veil:8 12 28}
.d-bar-mitzvah-kotel{--acc:#f0d3a0;--on:#fffcf6;--veil:34 24 14}
.d-bar-mitzvah-night{--acc:#a8ccec;--on:#fffdf7;--veil:10 12 18}
.d-bar-mitzvah-stone{--acc:#e3c894;--on:#fffdf6;--veil:30 24 16}
.d-bat-mitzvah-balloons{--acc:#a8e2ee;--on:#fbfeff;--veil:16 34 42}
.d-bat-mitzvah-blossom{--acc:#f4d5cb;--on:#fffdf9;--veil:46 24 26}
.d-bat-mitzvah-confetti{--acc:#f7b7d4;--on:#fffafd;--veil:40 16 30}
.d-bat-mitzvah-envelope{--acc:#93599a;--on:#3a2a3c;--veil:252 246 251}
.d-birthday-confetti{--acc:#f8c39c;--on:#fffaf5;--veil:36 20 12}
.d-birthday-night{--acc:#f2c98e;--on:#fffaf2;--veil:20 16 12}
.d-birthday-white{--acc:#5d5d63;--on:#1c1c1f;--veil:248 248 247}
.d-brit-morning{--acc:#7a6634;--on:#1d2530;--veil:248 250 252}
.d-brit-silver{--acc:#d8dfe8;--on:#fcfdfe;--veil:28 32 38}
.d-brit-sky{--acc:#b9d3ea;--on:#fbfdff;--veil:24 32 42}
.d-britah-bloom{--acc:#f4d5cb;--on:#fffdf9;--veil:46 24 26}
.d-britah-rose{--acc:#f2d8c4;--on:#fffcf9;--veil:42 28 24}
.d-britah-white{--acc:#ded3c2;--on:#fffefd;--veil:38 36 33}
.d-challah-candles{--acc:#eed9a6;--on:#fffdf6;--veil:26 19 12}
.d-challah-flour{--acc:#eed49a;--on:#fffdf5;--veil:40 34 24}
.d-challah-morning{--acc:#f0dcae;--on:#fffdf6;--veil:44 40 32}
.d-corporate-evening{--acc:#cfd6de;--on:#fbfcfd;--veil:14 17 20}
.d-corporate-gold{--acc:#e2c690;--on:#fffdf7;--veil:22 20 16}
.d-engagement-paper{--acc:#8a6a33;--on:#35291f;--veil:251 248 242}
.d-engagement-sunset{--acc:#f3c9a4;--on:#fffaf4;--veil:38 22 16}
.d-engagement-warm{--acc:#efd6a4;--on:#fffdf7;--veil:32 22 12}
.d-engagement-white{--acc:#e6cb98;--on:#fffdf9;--veil:38 28 20}
.d-henna-green{--acc:#ecd39a;--on:#fbfdf8;--veil:14 26 18}
.d-henna-night{--acc:#f0c99a;--on:#fffaf2;--veil:34 18 10}
.d-henna-rose-gold{--acc:#f2bcae;--on:#fffaf9;--veil:34 14 22}
.d-housewarming-evening{--acc:#cfdcb4;--on:#fbfdf8;--veil:20 26 18}
.d-housewarming-light{--acc:#e3d1ab;--on:#fffefc;--veil:40 37 32}
.d-housewarming-warm{--acc:#f2d9ae;--on:#fffdf8;--veil:30 20 12}
.d-proposal-moment{--acc:#e6cb98;--on:#fffdf9;--veil:38 28 20}
.d-proposal-night{--acc:#c6ced9;--on:#fbfcfe;--veil:18 20 26}
.d-proposal-sunset{--acc:#f4cbb0;--on:#fffaf6;--veil:36 22 18}
.d-sheva-evening{--acc:#f0d3a0;--on:#fffdf7;--veil:26 18 10}
.d-sheva-table{--acc:#e8cd9c;--on:#fffdf8;--veil:36 30 22}
.d-toast-champagne{--acc:#ecdcb2;--on:#fffefa;--veil:38 35 28}
.d-toast-evening{--acc:#dcc9a6;--on:#fcfcfd;--veil:16 18 20}
.d-toast-night{--acc:#e8c68c;--on:#fffdf8;--veil:11 12 14}
.d-wedding-aisle{--acc:#f0d3a0;--on:#fffcf6;--veil:38 26 16}
.d-wedding-bloom{--acc:#9c6468;--on:#3a2c29;--veil:252 249 245}
.d-wedding-cinematic{--acc:#dcc08c;--on:#fffdf9;--veil:22 17 13}
.d-wedding-door{--acc:#f0d3a0;--on:#fffdf7;--veil:26 16 8}
.d-wedding-quiet-luxury{--acc:#e6cb98;--on:#fffdf9;--veil:38 28 20}