/* SendMazel — the finishing layer (js/luxe.js)
   Page-to-page transitions, the "home" veil with its swish, the opening intro, the menu, the scroll line, magnetic buttons,
   the hero glow, smooth FAQ, the theme reveal, loaders and the small polish that makes every page feel made by hand.
   Everything here is calm for visitors who ask their device for less motion. */

/* ====================================================================
   1. Moving between pages
   Browsers that can (Chrome, Edge, Safari 18+) cross-fade the old page into the new one while the header stays put.
   Others get the same feel from js/luxe.js (.lx-leave on the way out, .lx-enter on the way in).
   ==================================================================== */
@view-transition { navigation: auto; }
.site-header { view-transition-name: lx-header; }
::view-transition-group(root) { animation-duration: .55s; }
::view-transition-old(root) { animation: lx-vt-out .3s cubic-bezier(.4, 0, .6, 1) both; }
::view-transition-new(root) { animation: lx-vt-in .6s cubic-bezier(.16, 1, .3, 1) both; }
::view-transition-group(lx-header) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(lx-header), ::view-transition-new(lx-header) { animation-duration: .3s; }
@keyframes lx-vt-out { to { opacity: 0; transform: translateY(-10px) scale(.99); } }
@keyframes lx-vt-in { from { opacity: 0; transform: translateY(22px); } }
/* arriving home behind the veil: no second fade */
html.lx-arrive::view-transition-old(root), html.lx-arrive::view-transition-new(root) { animation: none; }
/* the light/dark switch runs its own reveal (see 8) */
html.lx-theme-vt .site-header { view-transition-name: none; }

/* the fallback, for browsers without page transitions */
html.lx-leave main, html.lx-leave .site-footer, html.lx-leave .demo-banner, html.lx-leave .guide { animation: lx-out .24s cubic-bezier(.4, 0, .6, 1) forwards; pointer-events: none; }
html.lx-enter main { animation: lx-in .65s cubic-bezier(.16, 1, .3, 1) both; }
html.lx-enter .site-footer { animation: lx-fade .8s ease-out .1s both; }
@keyframes lx-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes lx-in { from { opacity: 0; transform: translateY(20px); } }
@keyframes lx-fade { from { opacity: 0; } }

/* ====================================================================
   2. The veil: the brand's own screen. It sweeps out from the logo when you go home, and lifts back into the logo when the
   home page arrives. The first visit of the day opens with it too.
   ==================================================================== */
.lx-veil, html.lx-arrive::after {
  position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 210'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.38' cy='.32' r='.7'%3E%3Cstop offset='0' stop-color='%23E0647C'/%3E%3Cstop offset='.7' stop-color='%23A32F4A'/%3E%3Cstop offset='1' stop-color='%23861F3B'/%3E%3C/radialGradient%3E%3ClinearGradient id='e' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F3F6FC'/%3E%3Cstop offset='1' stop-color='%23D9E3F3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='62' y='34' width='116' height='80' rx='9' fill='url(%23e)' stroke='%23D4AD5E' stroke-width='2.4'/%3E%3Cpath d='M66 39 L120 81 L174 39' fill='none' stroke='%23D4AD5E' stroke-width='2.4' stroke-linejoin='round'/%3E%3Ccircle cx='120' cy='81' r='16.5' fill='url(%23s)'/%3E%3Ccircle cx='120' cy='81' r='12' fill='none' stroke='%23F7D9A8' stroke-opacity='.45' stroke-width='1'/%3E%3Cpath d='M114 81h12M120 75v12' stroke='%23F7D9A8' stroke-width='2' stroke-linecap='round'/%3E%3Ctext x='120' y='156' text-anchor='middle' font-family='Georgia,Times New Roman,serif' font-size='27' font-weight='700' fill='%23FFFFFF' letter-spacing='.3'%3ESendMazel%3C/text%3E%3Ctext x='120' y='182' text-anchor='middle' font-family='Helvetica,Arial,sans-serif' font-size='8.6' font-weight='700' fill='%23D4AD5E' letter-spacing='3.2'%3EINVITATIONS THAT OPEN%3C/text%3E%3C/svg%3E") 50% 46% / min(260px, 62vw) auto no-repeat,
    radial-gradient(70% 55% at 50% 44%, rgba(212, 173, 94, .16), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, #2A3E70 0%, #172345 55%, #0E1630 100%);
}
.lx-veil { clip-path: circle(0 at var(--lx-x, 50%) var(--lx-y, 50%)); animation: lx-veil-in .42s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes lx-veil-in { to { clip-path: circle(150vmax at var(--lx-x, 50%) var(--lx-y, 50%)); } }
html.lx-arrive::after { content: ""; clip-path: circle(150vmax at var(--lx-x, 40px) var(--lx-y, 40px)); animation: lx-veil-out .9s cubic-bezier(.75, 0, .25, 1) .28s forwards, lx-emblem .9s cubic-bezier(.6, 0, .4, 1) .28s forwards; }
html.lx-arrive.lx-intro::after { animation: lx-veil-out 1s cubic-bezier(.75, 0, .25, 1) .95s forwards, lx-emblem-in .9s cubic-bezier(.2, .9, .3, 1.15) both, lx-emblem 1s cubic-bezier(.6, 0, .4, 1) .95s forwards; }
@keyframes lx-veil-out { to { clip-path: circle(0 at var(--lx-x, 40px) var(--lx-y, 40px)); visibility: hidden; } }
@keyframes lx-emblem { to { background-size: 60px auto, 100% 100%, 100% 100%; } }
@keyframes lx-emblem-in { from { background-size: min(330px, 80vw) auto, 100% 100%, 100% 100%; } to { background-size: min(260px, 62vw) auto, 100% 100%, 100% 100%; } }
/* a gold ring that blooms off the seal as the veil lifts */
html.lx-arrive::before { content: ""; position: fixed; z-index: 2147483001; left: 50%; top: 42%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; border: 2px solid #E7C27A; pointer-events: none; opacity: 0; animation: lx-ring .9s ease-out .2s forwards; }
html.lx-arrive.lx-intro::before { animation-delay: .75s; }
@keyframes lx-ring { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(5); } }
/* the logo catches the veil as it lands */
html.lx-arrive .site-header .brand svg { animation: lx-catch .7s cubic-bezier(.3, 1.6, .5, 1) 1.05s both; }
html.lx-arrive.lx-intro .site-header .brand svg { animation-delay: 1.8s; }
@keyframes lx-catch { 0% { transform: scale(.6) rotate(-14deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } }
/* the hero waits for the veil, then writes itself in */
html.lx-arrive .hero-in .hw { animation-delay: calc(.85s + var(--i) * 70ms); }
html.lx-arrive.lx-intro .hero-in .hw { animation-delay: calc(1.6s + var(--i) * 70ms); }
html.lx-arrive .hero-in .hero-lede { animation-delay: 1.45s; } html.lx-arrive .hero-in .hero-cta { animation-delay: 1.7s; } html.lx-arrive .hero-in .hero-demo { animation-delay: 1.05s; }
html.lx-arrive.lx-intro .hero-in .hero-lede { animation-delay: 2.1s; } html.lx-arrive.lx-intro .hero-in .hero-cta { animation-delay: 2.35s; } html.lx-arrive.lx-intro .hero-in .hero-demo { animation-delay: 1.8s; }

/* already home: the logo spins, the page glides to the top, then the hero shines once */
.brand.lx-spin svg { animation: lx-spin .8s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes lx-spin { 0% { transform: none; } 40% { transform: rotate(-20deg) scale(.86); } 100% { transform: rotate(360deg); } }
.hero.lx-glint::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 190, .5) 48%, rgba(255, 255, 255, .7) 50%, transparent 62%); transform: translateX(-100%); animation: lx-glint 1.1s cubic-bezier(.4, 0, .2, 1) forwards; mix-blend-mode: soft-light; }
@keyframes lx-glint { to { transform: translateX(100%); } }

/* ====================================================================
   3. Header: links underline in gold, the account chip, the scroll line, the phone menu that unfolds
   ==================================================================== */
@media (min-width: 961px) {
  .site-nav a:not(.btn):not(.acct-link), .nav-menu-btn { position: relative; }
  .site-nav a:not(.btn):not(.acct-link)::after, .nav-menu-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--sun), #E7C27A); transform: scaleX(0); transform-origin: 50% 50%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
  .site-nav a:not(.btn):not(.acct-link):hover::after, .site-nav a[aria-current="page"]:not(.acct-link)::after, .nav-menu-btn:hover::after, .nav-menu-btn[aria-expanded="true"]::after { transform: scaleX(1); }
  .nav-home { display: none !important; }
  /* the Designs panel unfolds from the top, its links follow one by one */
  .nav-panel { transform: translate(-50%, -10px) scale(.97); transform-origin: 50% 0; transition: opacity .22s, transform .35s cubic-bezier(.2, .8, .2, 1), visibility 0s .35s; }
  .nav-panel.open { transform: translate(-50%, 0) scale(1); transition: opacity .22s, transform .45s cubic-bezier(.2, .9, .25, 1.05), visibility 0s; }
  .nav-panel.open .nav-col a { animation: lx-drop-in .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n, 0) * 22ms + 40ms); }
}
@keyframes lx-drop-in { from { opacity: 0; transform: translateY(-6px); } }
.acct-link { display: inline-flex; align-items: center; gap: 8px; }
.acct-link .lx-av { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--grape), #4C7BC0); color: #FFFFFF; font: 700 13px/1 var(--body); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--sun) 70%, transparent); animation: lx-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.acct-link.lx-in svg { display: none; }
#acct-label { transition: opacity .25s; }
@keyframes lx-pop { from { transform: scale(.3); opacity: 0; } }

.lx-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--grape), var(--sun) 70%, #E7C27A); opacity: 0; transition: opacity .3s; }
.site-header.scrolled .lx-progress { opacity: 1; }

/* hamburger turns into a cross */
.menu-btn span { transition: transform .4s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; transform-origin: 50% 50%; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 960px) {
  .site-nav { display: flex; visibility: hidden; opacity: 0; clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.7, 0, .3, 1), opacity .3s, visibility 0s .4s; max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
  .site-nav.open { visibility: visible; opacity: 1; clip-path: inset(0 0 -60px 0); transition: clip-path .55s cubic-bezier(.2, .8, .2, 1), opacity .2s, visibility 0s; }
  .site-nav.open > * { animation: lx-menu-in .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n, 0) * 45ms + 60ms); }
  .site-nav > a:not(.btn), .site-nav .nav-menu-btn { border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .nav-home { display: flex !important; align-items: center; gap: 10px; }
  .nav-panel.open { animation: lx-drop-in .35s ease-out both; }
  .nav-panel a { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  /* everything else steps back while the menu is open */
  html.lx-menu main, html.lx-menu .site-footer { filter: blur(2px) saturate(.9); opacity: .55; transition: filter .4s, opacity .4s; pointer-events: none; }
}
main, .site-footer { transition: filter .4s, opacity .4s; }
@keyframes lx-menu-in { from { opacity: 0; transform: translateY(-12px); } }

/* ====================================================================
   4. Buttons: magnetic on a mouse, a springy press everywhere, arrows that lean in
   ==================================================================== */
.btn { translate: var(--mx, 0) var(--my, 0); transition: transform .3s cubic-bezier(.2, .8, .2, 1), translate .35s cubic-bezier(.2, .8, .2, 1), background .2s, box-shadow .3s, border-color .2s, color .2s; }
.btn.lx-mag { transition: transform .3s cubic-bezier(.2, .8, .2, 1), translate .12s linear, background .2s, box-shadow .3s, border-color .2s, color .2s; }
.btn-primary:hover { box-shadow: 0 14px 28px -12px var(--grape), 0 0 0 1px color-mix(in srgb, var(--grape) 30%, transparent); }
.btn-white:hover { box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
.btn-ghost:hover { background: color-mix(in srgb, var(--grape) 6%, transparent); }
.btn:active:not([disabled]) { transform: scale(.965); transition-duration: .08s; }
.btn .lx-arrow { display: inline-block; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.btn:hover .lx-arrow { transform: translateX(4px); }
/* the busy state: a calm shimmer instead of a frozen button */
.btn[disabled].lx-busy, .btn[aria-busy="true"] { background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); background-size: 220% 100%; animation: lx-busy 1.2s linear infinite; }
@keyframes lx-busy { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* link buttons get a comfortable tap area without moving the words */
.link-btn { padding: 9px 4px !important; margin: -9px -4px !important; }

/* ====================================================================
   5. The home hero: a soft light follows the pointer, gold dust drifts, the Hebrew line shines
   ==================================================================== */
.hero { position: relative; isolation: isolate; overflow-x: clip; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(520px circle at var(--sx, 70%) var(--sy, 40%), color-mix(in srgb, var(--sun) 16%, transparent), transparent 60%); }
.hero.lx-lit::after { opacity: 1; }
.lx-dust { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.lx-dust i { position: absolute; width: var(--d, 4px); height: var(--d, 4px); border-radius: 50%; background: radial-gradient(circle, #F4D58D, rgba(212, 173, 94, 0) 70%); opacity: 0; animation: lx-dust var(--t, 12s) linear var(--w, 0s) infinite; }
@keyframes lx-dust { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: .9; } 85% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--dx, 20px), -160px); } }
.hero-he { background: linear-gradient(100deg, var(--grape) 0%, var(--grape) 40%, #D4AD5E 50%, var(--grape) 60%, var(--grape) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: lx-he-shine 7s ease-in-out 2.4s infinite; }
@keyframes lx-he-shine { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.hero-demo { translate: 0 var(--py, 0); }

/* section titles get a gold rule that draws in once they arrive */
.section-head h2 { position: relative; padding-bottom: 14px; }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--sun), #E7C27A, transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2, .8, .2, 1) .35s; }
.section-head.lx-seen h2::after { transform: scaleX(1); }
.band-ink .section-head h2::after { background: linear-gradient(90deg, #E7C27A, transparent); }

/* pricing cards: a gold edge lights up as you hover */
.opt { position: relative; }
.opt::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from var(--lx-a, 0deg), transparent 0 60%, #E7C27A 75%, var(--grape) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
@property --lx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@media (hover: hover) { .opt:hover::before { opacity: 1; animation: lx-turn 3s linear infinite; } }
@keyframes lx-turn { to { --lx-a: 360deg; } }

/* design tiles: the picture breathes in a little */
.design-thumb { overflow: hidden; }
@media (hover: hover) { .design-tile:hover h3, .design-tile:hover .design-name { color: var(--grape); } }

/* ====================================================================
   6. FAQ opens and closes smoothly (height animated in js/luxe.js)
   ==================================================================== */
.faq summary::after { transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.faq details[open] summary::after { content: "+"; transform: rotate(135deg); }
.faq details { transition: background .3s, border-color .3s, box-shadow .4s; }
.faq details[open] { border-color: color-mix(in srgb, var(--grape) 35%, var(--line)); box-shadow: 0 18px 40px -28px rgba(20, 30, 70, .45); }
.faq details.lx-anim { overflow: hidden; }
.faq details[open] > p { animation: none; }

/* ====================================================================
   7. Forms: a soft focus glow, a shake when something needs fixing, show/hide for passwords
   ==================================================================== */
.field input:focus, .field select:focus, .field textarea:focus, input.lx-f:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--grape) 16%, transparent); transition: box-shadow .25s, border-color .25s; }
.lx-shake { animation: lx-shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes lx-shake { 15%, 85% { transform: translateX(-2px); } 30%, 70% { transform: translateX(5px); } 45% { transform: translateX(-7px); } 60% { transform: translateX(6px); } }
.error:not([hidden]) { animation: lx-err-in .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes lx-err-in { from { opacity: 0; transform: translateY(-4px); } }
.lx-pw { position: relative; display: block; }
.lx-pw input { width: 100%; padding-right: 56px !important; }
.lx-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }
.lx-eye:hover { color: var(--grape); background: color-mix(in srgb, var(--grape) 8%, transparent); }
.lx-eye svg { width: 20px; height: 20px; }
.lx-eye .lx-eye-off { display: none; } .lx-eye[aria-pressed="true"] .lx-eye-on { display: none; } .lx-eye[aria-pressed="true"] .lx-eye-off { display: block; }
/* the sign-in links sit apart, easy to tap */
.auth-card p.muted:has(.link-btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; line-height: 1.6; }

/* ====================================================================
   8. Toasts arrive on a spring; loaders shimmer instead of saying "Loading…"
   ==================================================================== */
.toast { display: flex; align-items: center; gap: 10px; max-width: min(92vw, 520px); padding: 13px 22px 13px 16px; line-height: 1.35; text-align: left; transform: translate(-50%, 24px) scale(.94); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .25s; box-shadow: 0 18px 40px -16px rgba(10, 16, 40, .55), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.toast::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E7C27A; box-shadow: 0 0 0 4px rgba(231, 194, 122, .22); }
.toast.show { transform: translate(-50%, 0) scale(1); }
html:has(.dock:not(.away)) .toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

.lx-loading { display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--ink-2); font-size: 15px; text-align: center; }
.lx-loading::before { content: ""; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 25%, var(--sun) 60%, var(--grape) 100%); -webkit-mask: radial-gradient(circle, transparent 21px, #000 22px); mask: radial-gradient(circle, transparent 21px, #000 22px); animation: lx-spinr 1s linear infinite; }
@keyframes lx-spinr { to { transform: rotate(360deg); } }

/* ====================================================================
   9. Footer: roomy tap targets on phones, the sound switch, a tidy brand
   ==================================================================== */
.footer-grid a, .footer-mail { padding-block: 7px; width: fit-content; transition: color .2s, transform .3s cubic-bezier(.2, .8, .2, 1); }
@media (hover: hover) { .footer-grid a:hover { transform: translateX(4px); } }
@media (pointer: coarse) { .footer-grid a, .footer-mail { padding-block: 10px; } }
.footer-brand .brand { font-size: 23px; }
.footer-legal { display: inline-flex; flex-wrap: wrap; gap: 4px 6px; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 8px; color: inherit; text-decoration: none; border-radius: 8px; }
.footer-legal a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.lx-snd { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .08); color: #E6ECF8; font: 600 13px/1 var(--body); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .2s; }
.lx-snd:hover { background: rgba(255, 255, 255, .14); }
.lx-snd svg { width: 18px; height: 18px; }
.lx-snd .w { transition: opacity .25s, transform .35s cubic-bezier(.3, 1.6, .5, 1); transform-origin: 9px 12px; }
.lx-snd[aria-pressed="false"] .w { opacity: 0; transform: scale(.4); }
.lx-snd .x { opacity: 0; transition: opacity .25s; }
.lx-snd[aria-pressed="false"] .x { opacity: 1; }
.footer-base { align-items: center; }
.lx-foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ====================================================================
   10. Small fixes found in the walk-through
   ==================================================================== */
/* the type switch on Designs keeps "Birthday cards" on one line on phones */
@media (max-width: 420px) { .seg-tabs button, .seg-tabs a { white-space: nowrap; font-size: 14.5px; padding-inline: 10px; } }
/* the preview guide stays a small pill until it's opened, and never sits over buttons */
.guide-pill { min-height: 42px; padding: 0 16px; font-size: 13.5px; display: inline-flex; align-items: center; gap: 8px; }
.guide-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #E7C27A; box-shadow: 0 0 0 0 rgba(231, 194, 122, .6); animation: lx-beacon 2.4s ease-out infinite; }
@keyframes lx-beacon { 0% { box-shadow: 0 0 0 0 rgba(231, 194, 122, .6); } 80%, 100% { box-shadow: 0 0 0 10px rgba(231, 194, 122, 0); } }
.guide-card { animation: lx-card-in .45s cubic-bezier(.2, .9, .3, 1.1) both; transform-origin: 100% 100%; }
@keyframes lx-card-in { from { opacity: 0; transform: translateY(14px) scale(.94); } }
@media (max-width: 640px) { .guide { left: auto; } }
/* the "no order" box on the success page gets real next steps */
.lx-next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* ====================================================================
   11. Less motion, on request
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html.lx-arrive::after, html.lx-arrive::before, .lx-veil { display: none !important; animation: none !important; }
  html.lx-leave main, html.lx-leave .site-footer, html.lx-enter main, html.lx-enter .site-footer { animation: none !important; }
  .lx-dust, .hero::after { display: none; }
  .hero-he { animation: none; -webkit-text-fill-color: currentColor; background: none; }
  .site-nav, .site-nav.open, .site-nav.open > *, .nav-panel, .nav-panel.open .nav-col a { transition: none !important; animation: none !important; }
  .btn { translate: none !important; }
  .guide-pill::before, .opt:hover::before, .lx-loading::before { animation: none !important; }
  html.lx-menu main, html.lx-menu .site-footer { filter: none; }
}

/* tap room for the small text links that were under 30px tall */
.demo-banner a { display: inline-flex; align-items: center; min-height: 36px; }
.crumbs a { display: inline-flex; align-items: center; min-height: 36px; padding-inline: 2px; }

/* ====================================================================
   12. Cards look printed on fine stock: a paper grain over every invitation (img/paper.png, 256px, tiles), a soft edge shade,
   and a gentle gloss that follows the pointer on the big views. The pictures' light and gold foil live in js/motifs.js (lux).
   ==================================================================== */
.inv::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: url("../img/paper.png") 0 0 / 256px 256px, radial-gradient(130% 100% at 30% 15%, transparent 55%, rgba(40, 26, 10, .10) 100%);
  opacity: .2; mix-blend-mode: multiply; }
.inv-photo::after, .inv-export::after, .inv-export .inv::after { display: none; }
.env-result .inv, .preview-col .inv, #hero-env .inv { box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 4px rgba(20, 14, 6, .08), 0 30px 60px -24px rgba(27, 19, 64, .5); }
.env-result .inv::before, .preview-col .inv::before { content: ""; position: absolute; inset: 0; z-index: 7; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .28), transparent 60%); mix-blend-mode: soft-light; }
@media (hover: hover) { .env-result .inv:hover::before, .preview-col .inv:hover::before { opacity: 1; } }
/* small cards in long grids skip the per-picture lighting so scrolling stays smooth on phones */
@media (max-width: 700px) { .design-grid .mtf .lux, .lib-grid .mtf .lux { filter: none; } }

/* ====================================================================
   13. Simcha Seals (js/seals.js): earned wax-seal cards and the avatar picker
   ==================================================================== */
.seals-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.seals-av { width: 64px; height: 64px; flex: none; }
.seals-av svg { width: 100%; height: 100%; }
.seals-head .btn { margin-left: auto; }
.seals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.seal-card { perspective: 800px; cursor: pointer; aspect-ratio: 3 / 4; }
.seal-flip { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.3, 1, .3, 1); transform-style: preserve-3d; }
.seal-card.flipped .seal-flip { transform: rotateY(180deg); }
.seal-f, .seal-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px; text-align: center; }
.seal-f svg { width: 64px; height: 64px; }
.seal-f b { font-family: var(--display); font-size: 15px; line-height: 1.15; }
.seal-card:not(.won) .seal-f b { color: var(--ink-2); }
.seal-card.won .seal-f { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--grape) 30%, transparent); }
.seal-card.gold.won .seal-f { background: linear-gradient(160deg, #FFFBF0, #FBEFD3); border-color: #E7C27A; box-shadow: inset 0 0 0 1.5px #E7C27A, 0 10px 24px -14px rgba(201, 150, 43, .6); }
.seal-gold { font: 700 10px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: #B8912A; }
.seal-b { transform: rotateY(180deg); background: var(--mist); }
.seal-b p { font-size: 13.5px; line-height: 1.4; } .seal-b small { font-weight: 700; color: var(--ok); }
.seal-card:not(.won) .seal-b small { color: var(--ink-2); }
.seal-card:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 16px; }
.seal-picker { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: rgba(15, 23, 48, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 20px; }
.seal-pk { background: var(--card); border-radius: 20px; padding: 24px; max-width: 340px; width: 100%; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.seal-pk h3 { font-family: var(--display); font-size: 22px; }
.seal-prev { width: 90px; height: 90px; margin: 0 auto; } .seal-prev svg { width: 100%; height: 100%; }
.seal-cols { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.seal-cols button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.seal-cols button.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--grape); }