/* SendMazel — site styles
   Layout: bright white ground, wide colour bands for each section, invitations as the hero objects. */
:root {
  /* toile-blue stationery palette */
  --ink: #1F2D52;
  --ink-2: #56628A;
  --paper: #FFFFFF;
  --mist: #EEF3FA;
  --mist-2: #FCEFF2;
  --peach: #F1F5EE;
  --line: #DCE3EF;
  --card: #FFFFFF;
  --grape: #2F5C9A;
  --on-grape: #FFFFFF;
  --grape-soft: #E3ECF8;
  --coral: #E2725B;
  --sun: #C99A3E;
  --sun-soft: #F7EEDB;
  --mint: #5E9A78;
  --rose: #D9708F;
  --navy: #1F2D52;
  --ok: #2E7D57;
  --ok-bg: #E4F3EA;
  --warn: #8A5A00;
  --warn-bg: #FBF0D9;
  --bad: #B42318;
  --bad-bg: #FDE8E6;
  --info: #2F5C9A;
  --info-bg: #E3ECF8;
  --shadow: 0 1px 2px rgba(31, 45, 82, .06), 0 14px 34px -12px rgba(31, 45, 82, .18);
  --radius: 18px;
  --display: 'Frank Ruhl Libre', 'Times New Roman', Georgia, serif;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hebrew: 'Frank Ruhl Libre', 'Suez One', 'Rubik', serif;
  --toile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%232F5C9A' stroke-width='1.1' stroke-linecap='round' opacity='.16'%3E%3Cpath d='M20 34c6-10 18-10 22 0M31 34v16M24 44c4 2 10 2 14 0'/%3E%3Ccircle cx='31' cy='28' r='4'/%3E%3Cpath d='M84 92c5-8 14-8 18 0M93 92v12M88 100c3 2 8 2 11 0'/%3E%3Ccircle cx='93' cy='87' r='3.4'/%3E%3Cpath d='M86 22l3 6 6 1-5 4 1 6-5-3-5 3 1-6-5-4 6-1z'/%3E%3Cpath d='M18 92l2 4 4 .6-3 2.7.7 4-3.7-2-3.7 2 .7-4-3-2.7 4-.6z'/%3E%3C/g%3E%3C/svg%3E");
}
/* the store keeps its own light colours on every device and in every viewer (a dark version only if .allow-dark is ever added) */
@media (prefers-color-scheme: dark) {
  :root.allow-dark:not([data-theme="light"]) {
    --ink: #EEF2FA; --ink-2: #AEB8D2; --paper: #0F1730; --mist: #172243; --mist-2: #2A1A28; --peach: #182A22; --line: #2A3760; --card: #152040;
    --grape: #8FB3EA; --on-grape: #0F1730; --grape-soft: #22335E; --coral: #F08C77; --sun: #E3B85E; --sun-soft: #3A2E14; --mint: #84C2A0; --rose: #F09AB3;
    --ok: #7FD6A8; --ok-bg: #15362A; --warn: #F2C66B; --warn-bg: #3A2C0E; --bad: #FF8A80; --bad-bg: #3D1614; --info: #8FB3EA; --info-bg: #1E2D55;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -12px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root.ts-dark {
  --ink: #EEF2FA; --ink-2: #AEB8D2; --paper: #0F1730; --mist: #172243; --mist-2: #2A1A28; --peach: #182A22; --line: #2A3760; --card: #152040;
  --grape: #8FB3EA; --on-grape: #0F1730; --grape-soft: #22335E; --coral: #F08C77; --sun: #E3B85E; --sun-soft: #3A2E14; --mint: #84C2A0; --rose: #F09AB3;
  --ok: #7FD6A8; --ok-bg: #15362A; --warn: #F2C66B; --warn-bg: #3A2C0E; --bad: #FF8A80; --bad-bg: #3D1614; --info: #8FB3EA; --info-bg: #1E2D55;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -12px rgba(0,0,0,.5);
  color-scheme: dark;
}

/* we draw our own dark theme, so phones must not auto-darken (invert) the pages; invitations keep their own colours always */
:root { color-scheme: light dark; }
/* (declared so phones don't auto-darken the pages; the page itself stays light, and so do its form controls) */
input, select, textarea, button, details, summary { color-scheme: light; }
.inv, .env-stage, .op, .op-closed, .book, .confetti-canvas { color-scheme: only light; }
*, *::before, *::after { box-sizing: border-box; }
fieldset { min-width: 0; }
[hidden] { display: none !important; }
/* smooth scrolling only for in-page jumps (set in js/site.js), so pages never glide to an odd place while they load */
html { scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--grape); }
h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--grape); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.he { font-family: var(--hebrew); }
.muted { color: var(--ink-2); }
.eyebrow { font-size: 16px; font-weight: 500; color: var(--grape); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--grape); color: var(--on-grape); box-shadow: 0 6px 16px -8px var(--grape); }
.btn-elite { background: linear-gradient(135deg, #9A6E24, #6F4B12); color: #FFFFFF; box-shadow: 0 6px 16px -8px #6F4B12; }
.btn-sun { background: var(--sun); color: #2B1D00; }
.btn-white { background: #FFFFFF; color: #1F2D52; }
.btn-coral { background: var(--coral); color: #1F2D52; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-2); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 15px; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--grape); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--paper); }
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; }
.brand-light { color: #FFFFFF; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="page"] { color: var(--grape); }
.menu-btn { display: none; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.menu-btn span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 4px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 12px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px)); box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 12px 4px; font-size: 18px; }
  .site-nav .btn { margin-top: 8px; }
}
.demo-banner { background: var(--sun-soft); color: var(--ink); font-size: 14px; padding-block: 8px; }

/* footer */
.site-footer { background: #1F2D52; color: #C9D3EA; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; padding-block: 64px 40px; }
.footer-grid h2 { font-family: var(--display); font-size: 18px; color: #FFFFFF; margin-bottom: 10px; }
.footer-grid a, .footer-mail { display: block; color: #C9D3EA; text-decoration: none; padding-block: 4px; font-size: 15px; }
.footer-grid a:hover { color: #FFFFFF; }
.footer-brand p { margin-top: 14px; max-width: 34ch; font-size: 15px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid #34457A; padding-block: 20px 28px; font-size: 14px; }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* sections */
.band { padding-block: 88px; }
.band-mist { background: var(--mist); }
.band-mint { background: var(--mist-2); }
.band-peach { background: var(--peach); }
.band-ink { background: #1F2D52; color: #FFFFFF; }
.band-ink .muted { color: #C9D3EA; }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 52px); }
.section-head p { max-width: 52ch; font-size: 18px; }
@media (max-width: 640px) { .band { padding-block: 60px; } }

/* hero */
.hero { padding-block: 56px 80px; background: var(--toile), linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); background-size: 120px 120px, auto; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.4vw, 80px); font-weight: 500; letter-spacing: -0.02em; }
.hero h1 .hl { position: relative; white-space: nowrap; }
.hero h1 .hl::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .22em; border-radius: 1em; z-index: -1; }
.hero-lede { font-size: 20px; color: var(--ink-2); max-width: 46ch; margin-block: 22px 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 30px; font-size: 15px; color: var(--ink-2); }
.hero-proof span, .hero-proof li { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.hero-demo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.hero-he { font-family: var(--hebrew); font-size: 26px; color: var(--grape); }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* pills / chips */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; cursor: pointer; font-family: inherit; }
@media (hover: hover) { .pill:hover { border-color: var(--grape); } }
.pill[aria-pressed="true"], .pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill .he { font-size: 15px; opacity: .8; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-bad { background: var(--bad-bg); color: var(--bad); }
.chip-info { background: var(--info-bg); color: var(--info); }
.chip-grape { background: var(--grape-soft); color: var(--grape); }
.chip-plain { background: var(--mist); color: var(--ink-2); }

/* design grid */
.design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 28px 22px; }
.design-tile { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.design-thumb { position: relative; display: block; border-radius: 16px; padding: 18px; background: var(--mist); transition: transform .25s, box-shadow .25s; text-decoration: none; }
.design-thumb:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.design-thumb .inv { box-shadow: 0 10px 24px -10px rgba(0,0,0,.35); }
.design-badge { position: absolute; top: 10px; left: 10px; z-index: 2; }
.design-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.design-meta h3 { font-size: 19px; letter-spacing: -0.01em; }
.design-meta .price { font-weight: 700; font-variant-numeric: tabular-nums; }
.design-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.design-actions .btn { flex: 1 1 auto; }

/* sample strip */
.sample-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sample { background: var(--card); border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow); min-width: 0; }
.sample .inv { max-width: 260px; margin-inline: auto; }
.sample h3 { font-size: 22px; }
@media (max-width: 900px) { .sample-row { grid-template-columns: 1fr; } }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.step { background: var(--card); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.step-n { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 700; font-size: 21px; color: var(--ink); }
.step h3 { font-size: 21px; }
.step p { color: var(--ink-2); font-size: 16px; }
@media (max-width: 960px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* pipeline (custom) */
.flow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.flow-step { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 14px; padding: 14px 16px; font-weight: 500; }
.flow-step b { width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.flow-arrow { color: #8FA3CF; }
.custom-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .custom-grid { grid-template-columns: 1fr; } .flow-arrow { display: none; } }

/* pricing */
.price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.price-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.price-card.popular { border: 2.5px solid var(--grape); box-shadow: var(--shadow); }
.price-card h3 { font-size: 22px; }
.price-amt { font-family: var(--display); font-size: 46px; font-weight: 500; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-amt small { font-size: 16px; font-weight: 500; color: var(--ink-2); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink-2); flex: 1; }
.price-card li { display: flex; gap: 10px; }
.price-card li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }
@media (max-width: 1060px) { .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }

/* faq */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 22px; }
.faq summary { cursor: pointer; padding-block: 18px; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--grape); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding-bottom: 18px; color: var(--ink-2); max-width: 65ch; }

/* forms */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 28px; min-width: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span, .field-label { font-size: 14px; font-weight: 600; }
.field small { color: var(--ink-2); font-size: 13px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--grape); box-shadow: 0 0 0 4px var(--grape-soft); }
input[dir="rtl"], textarea[dir="rtl"] { font-family: var(--body); }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--line); font-size: 15px; font-weight: 500; background: var(--paper); }
.seg input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--grape); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches label { position: relative; }
.swatches input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatches i { display: block; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--line); }
.swatches input:checked + i { box-shadow: 0 0 0 3px var(--ink); }
.swatches input:focus-visible + i { outline: 3px solid var(--grape); outline-offset: 3px; }
.assist { background: linear-gradient(135deg, var(--grape-soft), color-mix(in srgb, var(--sun) 18%, var(--card))); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.assist-head { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.error { color: var(--bad); font-size: 14px; font-weight: 500; }

/* create layout */
.create-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: start; padding-block: 36px 80px; }
.preview-col { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 92px); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.preview-col .inv { max-width: 400px; box-shadow: 0 30px 60px -24px rgba(27,19,64,.45); }
.preview-label { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.design-switch { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; max-width: 100%; }
.design-switch button { flex: none; width: 64px; padding: 0; border: 2px solid transparent; border-radius: 10px; background: none; cursor: pointer; }
.design-switch button[aria-pressed="true"] { border-color: var(--grape); }
.design-switch .inv { border-radius: 8px; }
.summary-line { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .create-grid { grid-template-columns: minmax(0, 1fr); } .preview-col { position: static; order: -1; } .preview-col .inv { max-width: 320px; } }

/* page heading */
.page-head { padding-block: 48px 8px; }
.page-head h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 500; }
.page-head p { font-size: 19px; color: var(--ink-2); margin-top: 12px; max-width: 60ch; }

/* tables / stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stat { border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-family: var(--display); font-weight: 500; font-size: 40px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat span { font-size: 14px; font-weight: 600; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.table-box { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
th { text-align: left; font-size: 14px; color: var(--ink-2); font-weight: 600; padding: 10px 12px; border-bottom: 1.5px solid var(--line); }
td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 100; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 90; }

/* ---------- invitation rendering (sized to its own width) ---------- */
.inv { position: relative; container-type: inline-size; width: 100%; aspect-ratio: 5 / 7; max-width: 100%; overflow: hidden; border-radius: 14px;
  background: linear-gradient(172deg, var(--i-bg) 0%, var(--i-bg) 55%, var(--i-bg2) 100%); color: var(--i-ink); font-family: var(--i-font); }
.inv-motif { position: absolute; inset: 0; width: 100%; height: 100%; }
.inv-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.5cqw; padding: 11cqw 11cqw; }
.inv-body p { margin: 0; }
.inv-bsd { position: absolute; top: 4cqw; right: 5cqw; font-family: 'Rubik', sans-serif; font-size: 2.6cqw; opacity: .85; }
.inv-he-intro { font-family: var(--i-he-text, var(--hebrew)); font-size: 5.2cqw; line-height: 1.15; }
.inv-eyebrow { font-family: 'Rubik', sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: 2.8cqw; font-weight: 700; opacity: .85; max-width: 70cqw; line-height: 1.35; }
.inv-name { font-family: var(--i-name-font); font-size: 13cqw; line-height: .98; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.inv-he-name { font-family: var(--i-he-name, var(--hebrew)); font-weight: var(--i-he-name-w, 400); font-size: 10.5cqw; line-height: 1.05; color: var(--i-ink); }
.inv-rule { display: block; width: 14cqw; height: .9cqw; border-radius: 1cqw; background: var(--i-accent); margin-block: 1.2cqw; }
.inv-msg { font-family: 'Rubik', sans-serif; font-size: 3.4cqw; line-height: 1.45; max-width: 68cqw; }
.inv-msg[dir="rtl"] { font-size: 3.8cqw; }
.inv-when { display: flex; flex-direction: column; gap: .4cqw; margin-top: 1.4cqw; font-family: 'Rubik', sans-serif; }
.inv-date { font-size: 3.8cqw; font-weight: 700; }
.inv-hdate { font-size: 3cqw; opacity: .8; }
.inv-time, .inv-place { font-size: 3.5cqw; }
.inv-addr { font-size: 3cqw; opacity: .8; }
.inv-hosts { font-size: 3.2cqw; font-style: italic; margin-top: 1.4cqw; }
.inv-script .inv-name { font-weight: 400; font-size: 15.5cqw; line-height: 1.12; letter-spacing: 0; }
.inv-script .inv-card-to { font-family: var(--i-name-font); font-weight: 400; font-size: 10cqw; }
.inv-framed .inv-body { padding: 20cqw 19cqw 18cqw; gap: 1.1cqw; }
.inv-frame-oval .inv-body { padding: 24cqw 22cqw 22cqw; }
.inv-frame-arch .inv-body { padding-top: 30cqw; }
.inv-has-bow .inv-body { padding-top: 34cqw; }
.inv-has-flowers .inv-body { padding-bottom: 30cqw; justify-content: center; }
.inv-framed .inv-bsd { top: 18cqw; right: 20cqw; }
.inv-framed .inv-eyebrow { font-size: 2.4cqw; max-width: 54cqw; }
.inv-framed .inv-he-intro { font-size: 4.4cqw; }
.inv-framed .inv-he-name { font-size: 8.5cqw; }
.inv-framed .inv-msg { font-size: 3cqw; max-width: 56cqw; }
.inv-framed .inv-date { font-size: 3.3cqw; }
.inv-framed .inv-time, .inv-framed .inv-place { font-size: 3.1cqw; }
.inv-framed .inv-hosts { font-size: 2.9cqw; }
.inv-framed.inv-script .inv-name { font-size: 13.5cqw; }
.inv-card .inv-cover { gap: 3cqw; }
.inv-card-head { font-size: 15cqw; line-height: .92; font-weight: 700; letter-spacing: -0.02em; }
.inv-card-he { font-family: var(--i-he-name, var(--hebrew)); font-weight: var(--i-he-name-w, 400); font-size: 8.5cqw; }
.inv-card-to { font-size: 7cqw; font-weight: 600; }
.inv-age { position: absolute; right: 9cqw; bottom: 9cqw; width: 19cqw; height: 19cqw; border-radius: 50%; background: var(--i-accent); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 10cqw; font-weight: 700; font-family: 'Rubik', sans-serif; box-shadow: 0 1.5cqw 3cqw rgba(0,0,0,.18); }
.inv-inside { background: var(--i-bg); }
.inv-inside .inv-body { gap: 3cqw; }
.inv-msg-lg { font-size: 4.8cqw; line-height: 1.5; max-width: 74cqw; }
.inv-msg-lg[dir="rtl"] { font-family: var(--i-he-text, var(--hebrew)); font-size: 6cqw; }
.inv-from { font-family: 'Rubik', sans-serif; font-size: 4cqw; }
.inv-photo { background: var(--mist); }
.inv-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- envelope ---------- */
.env-stage { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.env { position: relative; width: min(420px, 100%); aspect-ratio: 10 / 7; margin-top: min(240px, 52%); perspective: 1400px; clip-path: inset(-300% -30% 0 -30% round 0 0 16px 16px); }
.env-back { position: absolute; inset: 0; border-radius: 16px; background: color-mix(in srgb, var(--env-accent) 70%, #000); }
.env-card { position: absolute; left: 7%; width: 86%; top: 5%; z-index: 2; transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.env-front { position: absolute; inset: 0; z-index: 3; border-radius: 0 0 16px 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--env-accent) 82%, #fff), var(--env-accent)); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); transition: opacity .5s, transform .6s; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4; transform-origin: top center; background: color-mix(in srgb, var(--env-accent) 88%, #000); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .65s cubic-bezier(.4,.1,.3,1), opacity .5s; }
.env-seal { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 5; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 10px; font: inherit; transition: opacity .3s; }
.env-seal-mark { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #E0435C, #9E1530 70%); color: #FFE6A8; display: flex; align-items: center; justify-content: center; font-family: var(--hebrew); font-size: 34px; box-shadow: 0 6px 14px rgba(0,0,0,.3), inset 0 0 0 5px rgba(255,255,255,.12); animation: seal-pulse 2.2s ease-in-out infinite; }
.env-seal-label { background: #FFFFFF; color: #1F2D52; font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; box-shadow: 0 4px 10px rgba(0,0,0,.15); }
.env-caption { position: absolute; top: 8%; left: 0; right: 0; text-align: center; display: flex; flex-direction: column; gap: 4px; transition: opacity .4s; pointer-events: none; }
.env-cap-he { font-family: var(--hebrew); font-size: clamp(30px, 5vw, 44px); color: var(--grape); line-height: 1.1; }
.env-cap-en { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 3vw, 26px); color: var(--ink); }
.env-stage:has(.env.open1) .env-caption { opacity: 0; }
.env:not(.open1) .env-card { visibility: hidden; }
.env.open1 .env-flap { transform: rotateX(180deg); }
.env.open1 .env-seal { opacity: 0; pointer-events: none; }
.env.open2 .env-flap { z-index: 1; }
.env.open2 .env-card { transform: translateY(-56%); }
.env.open3 .env-front, .env.open3 .env-back, .env.open3 .env-flap { opacity: 0; transform: translateY(24%); }
.env.open3 .env-card { transform: translateY(-40%) scale(1.04); }
.env-result { width: min(420px, 100%); animation: pop-in .55s cubic-bezier(.2,.9,.3,1.2); }
.env-result .inv { box-shadow: 0 30px 60px -24px rgba(27,19,64,.5); }
/* pulses with the separate `scale` property so it never fights an element's own transform (centering, hover, press) */
@keyframes seal-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.07; } }
@keyframes pop-in { from { transform: scale(.94); opacity: .4; } to { transform: scale(1); opacity: 1; } }

/* ---------- birthday card book ---------- */
.book-stage { overflow: hidden; padding-block: 24px 36px; display: flex; justify-content: center; }
.book { position: relative; width: min(340px, 78vw); aspect-ratio: 5 / 7; perspective: 1800px; transition: transform 1s cubic-bezier(.3,.7,.2,1); }
.book-inside { position: absolute; inset: 0; border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(27,19,64,.45); }
.book-inside .inv { height: 100%; }
.book-cover { position: absolute; inset: 0; z-index: 2; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.3,.7,.2,1), opacity .4s 1s; cursor: pointer; border: 0; padding: 0; background: none; font: inherit; text-align: inherit; }
.book-face, .book-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 14px; overflow: hidden; }
.book-face { box-shadow: 0 30px 60px -24px rgba(27,19,64,.45); }
.book-back { transform: rotateY(180deg); background: var(--b-bg2, #EEE); display: flex; align-items: center; justify-content: center; }
.book-tap { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); z-index: 3; background: var(--ink); color: var(--paper); font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; pointer-events: none; animation: seal-pulse 2s infinite; white-space: nowrap; }
.book.open .book-cover { transform: rotateY(-180deg); }
.book.open .book-tap { display: none; }
@media (min-width: 760px) { .book.open { transform: translateX(50%); } .book.open .book-cover { opacity: 1; } }
@media (max-width: 759.98px) { .book.open .book-cover { opacity: 0; pointer-events: none; } }

/* ---------- guest invite page ---------- */
.guest-page { min-height: 100vh; background: var(--g-bg, var(--mist)); }
.guest-wrap { max-width: 640px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 28px 56px; display: flex; flex-direction: column; gap: 22px; }
.guest-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.icon-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.icon-btn svg { width: 18px; height: 18px; }
.guest-card { background: var(--card); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px; }
.guest-card h2 { font-size: 26px; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; text-align: center; }
.countdown div { background: var(--mist); border-radius: 14px; padding: 12px 4px; }
.countdown b { display: block; font-family: var(--display); font-weight: 500; font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown span { font-size: 13px; color: var(--ink-2); font-weight: 600; }
.action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.action-row .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding: 8px 14px; font-size: 15px; }
@media (max-width: 480px) { .action-row { grid-template-columns: 1fr; } }
.rsvp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rsvp-opts label { position: relative; }
.rsvp-opts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.rsvp-opts span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 64px; border-radius: 14px; border: 1.5px solid var(--line); font-weight: 600; font-size: 15px; text-align: center; padding: 6px; }
.rsvp-opts small { font-weight: 400; color: var(--ink-2); font-size: 12px; }
.rsvp-opts input:checked + span { border-color: var(--grape); background: var(--grape-soft); }
.rsvp-opts input:focus-visible + span { outline: 3px solid var(--grape); outline-offset: 2px; }
.gb-list { display: flex; flex-direction: column; gap: 10px; }
.gb-item { background: var(--mist); border-radius: 14px; padding: 12px 14px; }
.gb-item b { display: block; font-size: 14px; }
/* guestbook: a tad smaller than the other cards in every style, open and ready to sign */
body #gb-card { width: 94%; margin-inline: auto; position: relative; overflow: hidden; padding: 20px 20px 22px; gap: 10px; }
/* compact enough to sit whole on a phone screen, so the Next slide centers it like every other part */
body #gb-card h2 { font-size: min(1em + 10px, 26px); }
.pg-garden body #gb-card h2, body.pg-garden #gb-card h2 { font-size: 32px; }
#gb-card .gbk-inner { gap: 10px; }
#gb-card .gbk-inner > p.muted { font-size: 15px; margin: 0; }
#gb-card .field { gap: 4px; }
#gb-card .field input { min-height: 44px; padding-block: 8px; }
#gb-card .field textarea { min-height: 64px; padding-block: 8px; }
#gb-card .gb-list { max-height: 132px; overflow-y: auto; overscroll-behavior: contain; }
#gb-card form { gap: 10px !important; }
.gbk-inner { display: flex; flex-direction: column; gap: 14px; transition: opacity .35s, transform .45s cubic-bezier(.5,0,.75,0), filter .35s; }
/* signing: the page lifts away, a book opens, the note drops in, the book claps shut with a burst, then on to the next part */
.gbk-done .gbk-inner { opacity: 0; transform: translateY(-30px) scale(.94); filter: blur(3px); }
.gbk-sent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; pointer-events: none; }
.gbk-tome { position: relative; width: 150px; height: 104px; perspective: 600px; animation: gbk-pop .45s .2s cubic-bezier(.3,1.6,.5,1) backwards; }
.gbk-tome i { position: absolute; top: 0; bottom: 0; width: 50%; }
.gbk-l, .gbk-r { background: var(--paper, #fff); box-shadow: inset 0 0 0 2px var(--grape), 0 10px 20px -10px rgba(0,0,0,.4); }
.gbk-l { left: 0; border-radius: 10px 2px 2px 10px; transform-origin: right center; animation: gbk-shut-l .5s 1.35s cubic-bezier(.6,0,.4,1) forwards; }
.gbk-r { right: 0; border-radius: 2px 10px 10px 2px; background: linear-gradient(var(--paper, #fff), var(--paper, #fff)) padding-box; }
.gbk-l::after, .gbk-r::after { content: ""; position: absolute; left: 16%; right: 16%; top: 26%; height: 3px; border-radius: 2px; background: var(--line); box-shadow: 0 12px 0 var(--line), 0 24px 0 var(--line), 0 36px 0 var(--line); }
.gbk-note { left: 30% !important; width: 40% !important; top: -70px !important; bottom: auto !important; height: 46px; border-radius: 6px; background: var(--grape); box-shadow: 0 8px 16px -6px rgba(0,0,0,.4); animation: gbk-drop .75s .55s cubic-bezier(.5,0,.3,1.4) forwards; opacity: 0; }
.gbk-spark { position: absolute; left: 50%; top: calc(50% - 30px); width: 0; height: 0; }
.gbk-spark i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--grape); opacity: 0; transform: rotate(var(--a)) translateY(0); }
.gbk-spark i:nth-child(odd) { background: var(--pg-accent2, #F5B700); width: 6px; height: 6px; }
.gbk-done .gbk-spark i { animation: gbk-burst .8s 1.8s ease-out forwards; }
.gbk-thanks { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--grape); opacity: 0; transform: translateY(10px); }
.gbk-done .gbk-thanks { animation: gbk-rise .5s 1.85s ease-out forwards; }
@keyframes gbk-pop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }
@keyframes gbk-drop { 0% { opacity: 0; transform: translateY(0) rotate(-14deg); } 25% { opacity: 1; } 100% { opacity: 1; transform: translateY(96px) rotate(0) scaleY(.7); } }
@keyframes gbk-shut-l { to { transform: rotateY(180deg); box-shadow: inset 0 0 0 60px var(--grape); } }
@keyframes gbk-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-90px) scale(.4); } }
@keyframes gbk-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gbk-sent *, .gbk-inner { animation-duration: .01s !important; animation-delay: 0s !important; transition: none !important; } }
/* touch screens: hover lifts stick after a tap and make buttons jump, so drop them there */
@media (hover: none) { html .btn:hover, html .design-thumb:hover, html .rw-choice:hover, html .to-top:hover, html .op-cta:hover, html .jr-jump:hover, html .jr-seal-btn:hover, html .after-act:hover { transform: none; } }
.made-with { text-align: center; font-size: 14px; color: var(--ink-2); }
.made-with a { font-weight: 700; }

/* ---------- admin ---------- */
.admin-shell { padding-block: 32px 80px; display: flex; flex-direction: column; gap: 24px; }
.tabs { display: flex; gap: 6px; border-bottom: 1.5px solid var(--line); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1.5px; padding: 12px 16px; font: inherit; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; min-height: 44px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--grape); }
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.board-col { background: var(--mist); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 160px; }
.board-col h3 { font-family: var(--body); font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; padding: 4px 4px 2px; }
.order-card { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; font: inherit; color: var(--ink); }
.order-card:hover { border-color: var(--grape); }
.order-card[aria-current="true"] { border-color: var(--grape); box-shadow: 0 0 0 3px var(--grape-soft); }
.order-card b { font-size: 15px; }
.order-card small { color: var(--ink-2); font-size: 13px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 14px; font-size: 15px; }
.kv dt { color: var(--ink-2); font-weight: 500; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.timeline li { display: flex; gap: 10px; }
.timeline li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--grape); margin-top: 6px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.notice { border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.notice-info { background: var(--info-bg); color: var(--ink); }
.notice-ok { background: var(--ok-bg); color: var(--ink); }
.notice-warn { background: var(--warn-bg); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- preview guide ---------- */
.guide { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: min(340px, calc(100vw - 32px)); }
.guide-pill { min-height: 46px; padding: 0 18px; border-radius: 999px; border: 0; background: #1F2D52; color: #FFFFFF; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.guide-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: 0 18px 50px rgba(27,19,64,.25); display: flex; flex-direction: column; gap: 12px; }
.guide-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.guide-x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: g; }
.guide-steps li { counter-increment: g; display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.guide-steps li::before { content: counter(g); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--mist); color: var(--ink-2); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.guide-steps li.done::before { content: "\2713"; background: var(--ok-bg); color: var(--ok); }
.guide-steps li.now { color: var(--ink); font-weight: 600; }
.guide-steps li.now::before { background: var(--grape); color: var(--on-grape); }
.guide-who { font-size: 12px; font-weight: 700; color: var(--grape); }
.guide-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; }
.working { display: flex; align-items: center; gap: 12px; }
.working i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--grape-soft); border-top-color: var(--grape); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .guide-card { padding: 14px; } .guide-steps li { font-size: 13px; } }

/* interactive product thumbnail */
.inv-interactive { background: radial-gradient(120% 80% at 50% 25%, var(--i-bg2), var(--i-bg)); }
.inv-interactive .inv-body { gap: 2.4cqw; }
.ix-invited { font-size: 4.2cqw; color: var(--i-accent2); font-weight: 700; display: flex; gap: 2cqw; flex-wrap: wrap; justify-content: center; }
.ix-invited span { font-family: var(--hebrew); font-weight: 400; color: #FFFFFF; }
.ix-blocks { display: flex; gap: 2cqw; margin-block: 2cqw; }
.ix-blocks i { font-style: normal; width: 14cqw; height: 14cqw; border-radius: 2.6cqw; display: flex; align-items: center; justify-content: center; font-family: var(--hebrew); font-size: 8cqw; color: #FFFFFF; box-shadow: inset -1.2cqw -1.5cqw 0 rgba(0,0,0,.18), inset .8cqw .8cqw 0 rgba(255,255,255,.25); }
.ix-blocks i:nth-child(2) { transform: translateY(-3cqw) rotate(4deg); }
.ix-he { font-family: var(--hebrew); font-size: 11cqw; line-height: 1.05; }
.ix-en { font-family: var(--hebrew); font-size: 5.4cqw; color: var(--i-accent2); }
.ix-pill { font-size: 3.4cqw; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); border-radius: 99px; padding: 1.2cqw 3.4cqw; }
.ix-feat { position: absolute; left: 0; right: 0; bottom: 7cqw; font-size: 3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--i-accent2); font-weight: 700; }

/* ---------- additions: accounts, options, downloads ---------- */
.acct-link { display: inline-flex; align-items: center; gap: 6px; }
.dl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .opt-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
@media (max-width: 560px) { .opt-grid { grid-template-columns: 1fr; } }
.opt { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px 22px; border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--card); min-width: 0; text-align: left; font: inherit; color: var(--ink); }
.opt h3 { font-size: 25px; }
.opt .opt-tag { color: var(--ink-2); font-size: 15px; margin-top: -6px; }
.opt .opt-price { font-family: var(--display); font-size: 40px; line-height: 1; font-variant-numeric: tabular-nums; }
.opt .opt-price small { font-family: var(--body); font-size: 15px; color: var(--ink-2); }
.opt ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; font-size: 15px; color: var(--ink-2); flex: 1; }
.opt li { display: flex; gap: 9px; line-height: 1.4; }
.opt li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; background: var(--grape) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 10px no-repeat; }
.opt.is-popular { border-color: var(--grape); box-shadow: var(--shadow); }
.opt.is-elite { border-color: #C99A3E; background: linear-gradient(180deg, color-mix(in srgb, #F7EEDB 70%, var(--card)), var(--card) 45%); }
.opt.is-elite li::before { background-color: #B4832E; }
.opt.is-soon { background: var(--mist); border-style: dashed; }
.opt.is-soon li::before { background-color: var(--ink-2); }
.opt-badge { position: absolute; top: -12px; left: 20px; font-size: 13px; font-weight: 600; padding: 3px 12px; border-radius: 999px; background: var(--grape); color: var(--on-grape); }
.is-elite .opt-badge { background: #B4832E; color: #FFFFFF; }
.is-soon .opt-badge { background: var(--ink-2); color: var(--paper); }
/* selectable version used on the personalize page */
.pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .pick-grid { grid-template-columns: 1fr; } }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pick-body { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--card); transition: border-color .15s, box-shadow .15s; }
.pick-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pick-top b { font-family: var(--display); font-weight: 500; font-size: 21px; }
.pick-top span { font-weight: 600; font-variant-numeric: tabular-nums; }
.pick-body small { color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.pick input:checked + .pick-body { border-color: var(--grape); box-shadow: 0 0 0 3px var(--grape-soft); }
.pick input:focus-visible + .pick-body { outline: 3px solid var(--grape); outline-offset: 2px; }
.pick.elite input:checked + .pick-body { border-color: #B4832E; box-shadow: 0 0 0 3px #F3E3C2; }
.pick.soon .pick-body { background: var(--mist); border-style: dashed; }
.pick .tag { align-self: flex-start; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--grape-soft); color: var(--grape); }
.pick.elite .tag { background: #F3E3C2; color: #7A5410; }
.pick.soon .tag { background: var(--line); color: var(--ink-2); }
.compare { width: 100%; min-width: 620px; }
.compare th, .compare td { text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare td .yes { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: var(--grape) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.compare td .no { color: var(--line); font-size: 20px; }
.auth-card { max-width: 460px; margin: 48px auto 96px; display: flex; flex-direction: column; gap: 16px; }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.inv-card { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); align-items: start; }
.inv-card h3 { font-size: 21px; }
.inv-card .meta { font-size: 14px; color: var(--ink-2); }
/* birthday-card faces share the name inv-card with the list above; keep their own look */
.inv.inv-card { display: block; padding: 0; gap: 0; border: 0; border-radius: 14px; background: linear-gradient(172deg, var(--i-bg) 0%, var(--i-bg) 55%, var(--i-bg2) 100%); }
.inv-card .btn-row .btn { min-height: 38px; padding: 0 14px; font-size: 14px; }
.sparkle-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.sparkle-layer i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #FFFFFF 0%, rgba(255,255,255,.75) 35%, transparent 70%); animation: twinkle var(--d, 4s) ease-in-out infinite; animation-delay: var(--w, 0s); opacity: 0; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: translateY(0) scale(.6); } 50% { opacity: .95; transform: translateY(-14px) scale(1.15); } }
.guest-wrap { position: relative; z-index: 2; }
.tune-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Elite guest journey (js/journey.js) ---------- */
.jr .guest-wrap { padding-bottom: 150px; }
.jr-scene.jr-in { animation: jr-unfold .95s cubic-bezier(.2,.8,.2,1) both; transform-origin: top center; }
@keyframes jr-unfold { from { opacity: 0; transform: perspective(900px) rotateX(-32deg) translateY(48px) scale(.96); } to { opacity: 1; transform: none; } }
.jr-in .countdown { animation: jr-flip .7s cubic-bezier(.2,.9,.3,1.2) .9s both; }
@keyframes jr-flip { from { opacity: 0; transform: perspective(400px) rotateX(90deg); } to { opacity: 1; transform: none; } }
.cal { position: relative; isolation: isolate; width: min(210px, 70%); margin: 2px auto 8px; }
.jr #when-card, .jr #where-card { overflow: hidden; }
html:has(.guest-page), .guest-page { overflow-x: clip; }
.cal-page { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-align: center; box-shadow: 0 16px 30px -18px rgba(0,0,0,.45); padding-bottom: 12px; }
.cal-top { background: var(--jr-accent, var(--grape)); color: #FFFFFF; padding: 9px 8px; font-weight: 600; font-size: 15px; }
.cal-day { font-family: var(--display); font-size: 78px; line-height: 1; margin-top: 8px; color: var(--ink); font-variant-numeric: tabular-nums; }
.cal-wd { font-weight: 600; color: var(--ink); }
.cal-he { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.cal-time { display: inline-block; margin-top: 8px; padding: 3px 12px; border-radius: 999px; background: var(--mist); font-size: 14px; font-weight: 600; }
.cal-under, .cal-under2 { position: absolute; inset: 0; z-index: -1; padding: 0; }
.cal-under { transform: rotate(-5deg); }
.cal-under2 { transform: rotate(4deg); }
.jr-in .cal > .cal-page:first-child { animation: jr-drop .8s cubic-bezier(.25,1.4,.5,1) .35s both; }
.jr-in .cal-under { animation: jr-tear .8s ease-in .2s both; }
.jr-in .cal-under2 { animation: jr-tear2 .8s ease-in .45s both; }
@keyframes jr-drop { from { opacity: 0; transform: translateY(-36px) rotate(6deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes jr-tear { from { transform: rotate(-5deg); opacity: 1; } to { transform: translate(-140%, 60px) rotate(-40deg); opacity: 0; } }
@keyframes jr-tear2 { from { transform: rotate(4deg); opacity: 1; } to { transform: translate(140%, 50px) rotate(38deg); opacity: 0; } }
.jr-map { border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; max-width: 100%; border: 1px solid var(--line); }
.jr-map svg { display: block; width: 100%; height: 100%; }
.jr-pin, .jr-ripple { transform-box: view-box; transform-origin: 160px 112px; }
.jr-route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.jr-in .jr-route { animation: jr-draw 1.1s ease-out .4s forwards; }
.jr-ripple { opacity: 0; }
.jr-in .jr-pin { animation: jr-pin .9s cubic-bezier(.3,1.55,.5,1) 1.1s both; }
.jr-in .jr-ripple { animation: jr-ripple 1.8s ease-out 1.8s infinite; }
@keyframes jr-draw { to { stroke-dashoffset: 0; } }
@keyframes jr-pin { from { transform: translateY(-170px); opacity: 0; } 30% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes jr-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(3.6); opacity: 0; } }
.jr-place { text-align: center; font-size: 17px; }
.jr-in .rsvp-opts label { animation: jr-pop .5s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--i, 0) * 100ms + 450ms); }
@keyframes jr-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.jr-finale { text-align: center; align-items: center; padding-block: 36px; }
.jr-burst { width: 240px; height: 240px; margin-bottom: -205px; opacity: .8; }
.jr-finale > *:not(.jr-burst) { position: relative; }
.jr-burst path { transform-box: fill-box; transform-origin: center; }
.jr-in .jr-burst path { animation: jr-star 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * 110ms); }
@keyframes jr-star { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.3); opacity: 1; } }
.jr-fin-he { font-family: var(--hebrew); font-size: 34px; color: var(--jr-accent, var(--grape)); margin-top: 18px; }
.jr-fin-en { font-size: clamp(28px, 7vw, 38px); }
.jr-in .jr-fin-he, .jr-in .jr-fin-en { animation: jr-pop .7s cubic-bezier(.3,1.5,.5,1) both; }
.jr-in .jr-fin-en { animation-delay: .25s; }
.jr-next { position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 22px 0 28px; border: 0; border-radius: 999px; background: var(--jr-accent, var(--grape)); color: var(--on-grape, #FFFFFF); font: inherit; font-weight: 600; font-size: 18px; cursor: pointer; white-space: nowrap; box-shadow: 0 14px 30px -10px rgba(0,0,0,.5), 0 0 0 6px color-mix(in srgb, var(--jr-accent, #2F5C9A) 22%, transparent); }
.jr-next svg { animation: jr-bob 1.4s ease-in-out infinite; }
.jr-next:active { transform: scale(.96); }
.jr-hello { animation: jr-hello .7s cubic-bezier(.3,1.6,.5,1) backwards; }
@keyframes jr-hello { from { opacity: 0; transform: translateY(40px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes jr-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(4px); } }
.jr-skip { position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 80; border: 0; background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jr-dots { position: fixed; right: max(10px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 70; display: flex; flex-direction: column; gap: 10px; }
.jr-dots button { width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid var(--jr-accent, var(--grape)); background: var(--card); cursor: pointer; transition: transform .2s; }
.jr-dots button.seen { background: color-mix(in srgb, var(--jr-accent, #2F5C9A) 45%, var(--card)); }
.jr-dots button.now { background: var(--jr-accent, var(--grape)); transform: scale(1.35); }
.jr-dots button[disabled] { opacity: .35; cursor: default; }
@media (max-width: 480px) { .jr-dots { right: 4px; gap: 8px; } .jr-dots button { width: 10px; height: 10px; } }

/* Canva artwork designs: the picture fills the card, the words are drawn on top */
.inv-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.inv-canva .inv-body { z-index: 1; }
/* Elite: when the envelope opens, the words write themselves onto the card */
.jr .env-result .inv-body > * { animation: jr-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.jr .env-result .inv-body > *:nth-child(2) { animation-delay: .15s; }
.jr .env-result .inv-body > *:nth-child(3) { animation-delay: .3s; }
.jr .env-result .inv-name { animation: jr-write 1.1s cubic-bezier(.5,0,.3,1) .3s both; }
.jr .env-result .inv-he-name { animation: jr-write-rtl 1s cubic-bezier(.5,0,.3,1) .8s both; }
.jr .env-result .inv-body > *:nth-child(n+6) { animation-delay: 1s; }
.jr .env-result .inv-when { animation-delay: 1.15s; }
.jr .env-result .inv-hosts { animation-delay: 1.3s; }
@keyframes jr-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes jr-write { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } }
@keyframes jr-write-rtl { from { clip-path: inset(-20% 0 -20% 100%); } to { clip-path: inset(-20% 0 -20% 0); } }

/* owner dashboard: Canva designs */
.cv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: start; }
@media (max-width: 860px) { .cv-grid { grid-template-columns: minmax(0, 1fr); } }
.cv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cv-item { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }

/* ---------- animation layer over artwork (js/fx.js) ---------- */
.inv-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.inv-fx i { position: absolute; display: block; animation-duration: var(--d, 6s); animation-delay: var(--w, 0s); animation-iteration-count: infinite; }
.inv-fx svg { display: block; width: 100%; height: 100%; }
.fx-petal { top: -4%; width: 2.6cqw; height: 1.6cqw; border-radius: 60% 0 60% 0; opacity: .85; animation-name: fx-fall; animation-timing-function: linear; }
.fx-conf { top: -4%; width: 1.5cqw; height: 2.4cqw; border-radius: 1px; animation-name: fx-fall; animation-timing-function: linear; }
@keyframes fx-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .9; } 92% { opacity: .9; } 100% { transform: translate(var(--x, 0), 150cqw) rotate(540deg); opacity: 0; } }
.fx-spark { width: var(--s); height: var(--s); margin: calc(var(--s) / -2); animation-name: fx-twinkle; animation-timing-function: ease-in-out; }
.fx-star { width: var(--s); height: var(--s); border-radius: 50%; animation-name: fx-twinkle; animation-timing-function: ease-in-out; box-shadow: 0 0 1.2cqw currentColor; }
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }
.fx-bub { bottom: -6%; width: var(--s); height: var(--s); border-radius: 50%; border: .35cqw solid; opacity: .6; animation-name: fx-rise; animation-timing-function: ease-in; }
.fx-ball { bottom: -16%; width: 7cqw; height: 13cqw; animation-name: fx-rise; animation-timing-function: ease-in-out; }
@keyframes fx-rise { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 50% { transform: translate(3cqw, -75cqw); } 90% { opacity: .9; } 100% { transform: translate(-2cqw, -155cqw); opacity: 0; } }
.fx-bfly { width: 8cqw; height: 5cqw; opacity: .9; animation-name: fx-flutter; animation-timing-function: ease-in-out; }
.fx-bfly svg { animation: fx-wings .35s ease-in-out infinite alternate; transform-origin: center; }
@keyframes fx-flutter { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 25% { transform: translate(6cqw, -5cqw) rotate(6deg); } 50% { transform: translate(2cqw, -9cqw) rotate(-4deg); } 75% { transform: translate(-5cqw, -4cqw) rotate(8deg); } }
@keyframes fx-wings { from { transform: scaleX(1); } to { transform: scaleX(.55); } }
.fx-shimmer { inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 48%, rgba(255,240,200,.35) 52%, transparent 65%); background-size: 260% 100%; mix-blend-mode: soft-light; animation: fx-sheen 6s ease-in-out infinite; }
@keyframes fx-sheen { 0% { background-position: 120% 0; } 55%, 100% { background-position: -40% 0; } }
.fx-glow { width: 30cqw; height: 30cqw; margin: -15cqw; border-radius: 50%; opacity: .55; animation: fx-breathe 2.6s ease-in-out infinite; }
@keyframes fx-breathe { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: .75; transform: scale(1.08); } }
.inv-fx + .inv-body { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .inv-fx { display: none; } }

/* ---------- themed invitation pages (js/themes.js) ---------- */
body.pg { background: var(--pg-page); color: var(--ink); }
.pg .guest-card { color: var(--ink); }
.pg .guest-card h2 { font-family: var(--display); }
.pg input, .pg textarea, .pg select { background: var(--pg-card-solid); color: var(--ink); border-color: var(--line); }
.pg .btn-ghost { color: var(--ink); border-color: var(--line); }
.pg .icon-btn { background: var(--pg-card-solid); color: var(--ink); border-color: var(--line); }
.pg .countdown div { background: var(--mist); }

/* garden: soft, rounded, an inner dotted frame, script headings */
.pg-garden .guest-card { border-radius: 30px; box-shadow: 0 18px 40px -26px rgba(0,0,0,.35); outline: 1.5px dashed var(--line); outline-offset: -11px; padding: 30px 28px; }
.pg-garden .guest-card h2 { font-family: 'Pinyon Script', 'Cormorant Garamond', cursive; font-weight: 400; font-size: 40px; text-align: center; }
.pg-garden .rsvp-opts span, .pg-garden .rw-choice { border-radius: 999px; }
.pg-garden .countdown div { border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; }

/* royal: arched cards with a double gold rule, square buttons */
.pg-royal .guest-card { border-radius: 160px 160px 14px 14px / 70px 70px 14px 14px; border: 1px solid var(--grape); box-shadow: inset 0 0 0 6px var(--card), inset 0 0 0 7px color-mix(in srgb, var(--grape) 55%, transparent), 0 24px 50px -30px rgba(0,0,0,.8); padding: 40px 28px 30px; text-align: center; }
.pg-royal .guest-card h2 { letter-spacing: .06em; font-variant: small-caps; color: var(--grape); }
.pg-royal .btn { border-radius: 4px; letter-spacing: .04em; }
.pg-royal .rsvp-opts span, .pg-royal .rw-choice { border-radius: 4px; }
.pg-royal .countdown div { border: 1px solid var(--line); background: transparent; }
.pg-royal .countdown b { color: var(--grape); }

/* playful: bold borders, offset shadows, tilted cards, bouncy buttons */
.pg-playful .guest-card { border-radius: 26px; border: 3px solid var(--ink); box-shadow: 8px 8px 0 var(--grape); }
.pg-playful .guest-card:nth-of-type(odd) { transform: rotate(-1deg); }
.pg-playful .guest-card:nth-of-type(even) { transform: rotate(1deg); }
.pg-playful .guest-card h2 { font-weight: 600; }
.pg-playful .btn { border-radius: 16px; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.pg-playful .btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.pg-playful .rsvp-opts span, .pg-playful .rw-choice { border-radius: 18px; border-width: 3px; }
.pg-playful .countdown div:nth-child(1) { background: color-mix(in srgb, var(--grape) 22%, var(--card)); }
.pg-playful .countdown div:nth-child(2) { background: color-mix(in srgb, var(--pg-accent2) 30%, var(--card)); }
.pg-playful .countdown div:nth-child(3) { background: color-mix(in srgb, var(--grape) 12%, var(--card)); }
.pg-playful .countdown div:nth-child(4) { background: color-mix(in srgb, var(--pg-accent2) 18%, var(--card)); }
.pg-playful .jr-next { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }

/* modern: square edges, big left-aligned type, thin rules */
.pg-modern .guest-card { border-radius: 0; box-shadow: none; border-top: 4px solid var(--grape); padding: 30px 24px; }
.pg-modern .guest-card h2 { font-size: clamp(34px, 9vw, 46px); font-weight: 700; letter-spacing: -.03em; }
.pg-modern .btn { border-radius: 8px; }
.pg-modern .rsvp-opts span, .pg-modern .rw-choice { border-radius: 8px; }
.pg-modern .countdown { gap: 0; }
.pg-modern .countdown div { background: transparent; border-left: 1px solid var(--line); border-radius: 0; }
.pg-modern .countdown div:first-child { border-left: 0; }
.pg-modern .countdown b { font-size: 44px; }
.pg-modern .cal-page { border-radius: 4px; }

/* night: glowing glass cards on a starry sky */
.pg-night .guest-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 40px -10px color-mix(in srgb, var(--grape) 55%, transparent); }
.pg-night .guest-card h2 { text-shadow: 0 0 18px color-mix(in srgb, var(--grape) 70%, transparent); }
.pg-night .btn-primary { box-shadow: 0 0 24px -4px var(--grape); }
.pg-night .countdown div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.pg-night .countdown b { color: var(--grape); text-shadow: 0 0 14px color-mix(in srgb, var(--grape) 60%, transparent); }
.pg-night .cal-page, .pg-royal .cal-page { color: #1F2D52; background: #FFFFFF; }
.pg-night .cal-page *, .pg-royal .cal-page * { color: #1F2D52; }
.pg-night .cal-top, .pg-royal .cal-top { color: var(--on-grape) !important; }

/* toile: framed stationery on a printed pattern */
body.pg-toile { background: var(--toile), var(--pg-page); background-size: 120px 120px, auto; }
.pg-toile .guest-card { border-radius: 6px; border: 1px solid var(--grape); box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px var(--grape), 0 16px 34px -24px rgba(0,0,0,.4); padding: 32px 28px; }
.pg-toile .guest-card h2 { text-align: center; font-size: 32px; }
.pg-toile .btn { border-radius: 4px; }
.pg-toile .btn-primary { background: transparent; color: var(--grape); border: 1.5px solid var(--grape); box-shadow: none; }
.pg-toile .rsvp-opts span, .pg-toile .rw-choice { border-radius: 4px; }

/* step-by-step RSVP (Elite) */
.rw { display: flex; flex-direction: column; gap: 16px; }
.rw-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.rw-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rw-bar i { display: block; height: 100%; background: var(--grape); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.rw-step { display: flex; flex-direction: column; gap: 14px; animation: rw-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rw-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.rw-q { font-family: var(--display); font-size: 26px; line-height: 1.2; }
.rw-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rw-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 104px; padding: 12px 6px; border: 1.5px solid var(--line); border-radius: 18px; background: var(--pg-card-solid, var(--card)); color: var(--ink); font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; transition: transform .15s, border-color .15s; }
.rw-choice svg { width: 34px; height: 34px; color: var(--grape); }
.rw-choice:hover { transform: translateY(-2px); border-color: var(--grape); }
.rw-choice[aria-pressed="true"] { border-color: var(--grape); background: var(--grape-soft); transform: scale(1.03); }
.rw-step input[type="text"] { font-size: 19px; min-height: 56px; }
.rw-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; }
.rw-count b { font-size: 17px; }
.rw-count small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 400; }
.rw-stepper { display: flex; align-items: center; gap: 12px; }
.rw-stepper button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--grape); background: transparent; color: var(--grape); font-size: 22px; line-height: 1; cursor: pointer; }
.rw-stepper output { min-width: 28px; text-align: center; font-family: var(--display); font-size: 28px; font-variant-numeric: tabular-nums; }
.rw-stepper output.bump { animation: jr-pop .35s cubic-bezier(.3,1.6,.5,1); }
.rw-nav { display: flex; justify-content: space-between; gap: 10px; }
.rw-nav .link-btn { color: var(--ink-2); }
@media (max-width: 400px) { .rw-choices { grid-template-columns: 1fr; } .rw-choice { min-height: 64px; flex-direction: row; } }

/* ---------- family dashboard (manage.html) and accessibility ---------- */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.skip-link:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }
.dash-head { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 26px; align-items: center; padding-block: 34px 22px; }
.dash-thumb .inv { box-shadow: 0 18px 36px -20px rgba(31,45,82,.45); }
@media (max-width: 560px) { .dash-head { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; } }
.dash-tabs { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 72px); z-index: 20; background: var(--paper); }
.dash-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; align-items: start; }
.feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feed li { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; flex-wrap: wrap; }
.feed li:last-child { border-bottom: 0; }
.feed .muted { font-size: 13px; }
.tick-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--ink-2); }
input[type="search"] { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); font: inherit; }

/* ---------- premium envelope (js/envelope.js) ---------- */
.env-premium .env-back { background: linear-gradient(180deg, var(--env-inside), color-mix(in srgb, var(--env-inside) 80%, #000)); }
.env-premium .env-front { background: radial-gradient(120% 90% at 50% 100%, var(--env-paper) 0%, var(--env-paper-2) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.env-premium .env-flap { background: linear-gradient(180deg, var(--env-paper-2) 0%, var(--env-paper) 100%); }
.env-premium .env-flap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.env-gilt { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; transition: opacity .5s; }
.env-premium { filter: drop-shadow(0 24px 30px rgba(31,45,82,.28)); }
.env-bow { position: absolute; left: 50%; top: 58%; width: 66%; transform: translate(-50%, -44%); z-index: 5; pointer-events: none; overflow: visible; }
.env-bow path { transform-box: fill-box; transition: transform .55s cubic-bezier(.5,0,.3,1), opacity .45s; }
.bow-loop.bow-l { transform-origin: right center; } .bow-loop.bow-r { transform-origin: left center; }
.bow-tail { transform-origin: top center; }
.env.open0 .bow-loop.bow-l { transform: translate(-40%, 30%) rotate(-50deg) scale(.4); opacity: 0; }
.env.open0 .bow-loop.bow-r { transform: translate(40%, 30%) rotate(50deg) scale(.4); opacity: 0; }
.env.open0 .bow-tail { transform: translateY(40%) scaleY(.4); opacity: 0; }
.env-premium .env-seal { z-index: 6; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .45s; }
.env-wax { width: 76px; height: 76px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.35)); animation: seal-pulse 2.2s ease-in-out infinite; }
.env.open0 .env-seal { transform: translate(-50%, -50%) translateY(-30px) scale(1.2) rotate(-14deg); opacity: 0; }
.env-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 4; border-radius: 16px; transition: opacity .6s, transform .6s; }
.env-has-art .env-front, .env-has-art .env-flap, .env-has-art .env-gilt { visibility: hidden; }
.env-has-art.open0 .env-art { opacity: 0; transform: translateY(-6%) scale(1.03); }
.env.open3 .env-gilt, .env.open3 .env-bow { opacity: 0; }
.env-premium { cursor: pointer; }

/* legal pages and the not-found page */
.legal { max-width: 760px; }
.legal section { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.legal h2 { font-size: 26px; }
.legal p { max-width: 68ch; line-height: 1.65; }
.nf { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding-block: 60px; }
.nf h1 { font-size: clamp(34px, 6vw, 52px); }
.nf p { max-width: 52ch; }
.footer-legal { display: flex; gap: 16px; } .footer-legal a { color: #C9D3EA; text-decoration: none; } .footer-legal a:hover { color: #FFFFFF; }

/* dashboard → Music & openings */
.mx-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.mx-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; }
.mx-thumb .inv { border-radius: 8px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.35); }
.mx-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mx-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.mx-head b { font-size: 18px; }
.mx-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mx-suno summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.mx-suno p { font-size: 14px; color: var(--ink-2); margin: 8px 0; }
@media (max-width: 560px) { .mx-row { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; } }

/* dashboard: the versions in a set */
.vs-admin { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vs-a { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; border: 2px solid var(--line); background: var(--card); }
.vs-a.on { border-color: var(--grape); box-shadow: 0 0 0 3px var(--grape-soft); }
.vs-a .inv { border-radius: 10px; }
.vs-a-meta { display: flex; flex-direction: column; } .vs-a-meta small { color: var(--ink-2); font-size: 12px; }
.vs-a-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; }
.vs-a-send { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; }

/* ---------- readability rules for every invitation (see js/render.js) ---------- */
.inv-body > * { zoom: var(--fit, 1); }
.inv-body { justify-content: safe center; }
.inv-body { padding-top: max(11cqw, var(--i-pad-t, 0cqw)); padding-bottom: max(11cqw, var(--i-pad-b, 0cqw)); }
.inv-framed .inv-body { padding-top: 20cqw; padding-bottom: 18cqw; }
.inv-frame-oval .inv-body { padding-top: 24cqw; padding-bottom: 22cqw; }
.inv-frame-arch .inv-body { padding-top: 30cqw; }
.inv-has-bow .inv-body { padding-top: 34cqw; }
.inv-has-flowers .inv-body { padding-bottom: 30cqw; }
.inv-rule { background: var(--i-accent-text, var(--i-accent)); }
/* בס״ד sits in the flow on framed designs so it never collides with the first Hebrew line */
.inv-framed:not(.inv-canva) .inv-bsd { position: static; align-self: flex-end; margin: -2cqw 0 .5cqw; }
/* words on Canva artwork get a halo in the opposite tone */
.inv-canva .inv-body { text-shadow: 0 0 .5cqw var(--i-halo, transparent), 0 0 1.6cqw var(--i-halo, transparent); }
/* the classic envelope: its gold outline hides once the flap opens, so nothing draws over the card */
.env.open1 .env-gilt { opacity: 0; transition: opacity .25s; }
/* בס״ד always sits on a soft backing in the card's own color, so confetti or pattern behind it never gets in the way */
.inv-bsd { padding: .3cqw 1.4cqw; border-radius: 2cqw; background: color-mix(in srgb, var(--i-bg) 82%, transparent); }
.inv-framed:not(.inv-canva) .inv-bsd { background: transparent; }
.inv-age { color: var(--i-on-accent, #FFFFFF); }
.inv-frame-arch:not(.inv-canva) .inv-bsd, .inv-frame-oval:not(.inv-canva) .inv-bsd { align-self: center; } /* curved frames: keep it inside the curve */

/* art the customer asked for (js/motifs.js): top band and bottom corners, the words make room */
.inv-extra { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.inv-extra .ix { position: absolute; display: block; }
.inv-extra svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.12)); }
.ix-top { left: 50%; top: 4cqw; width: 15cqw; height: 15cqw; margin-left: -7.5cqw; }
.ix-bl { left: 5cqw; bottom: 5cqw; width: 17cqw; height: 17cqw; }
.ix-br { right: 5cqw; bottom: 5cqw; width: 17cqw; height: 17cqw; transform: scaleX(-1); }
.ix-tl { left: 5cqw; top: 5cqw; width: 12cqw; height: 12cqw; }
.inv-framed .ix-top { top: 9.5cqw; width: 11cqw; height: 11cqw; margin-left: -5.5cqw; }
.inv-framed .ix-bl { left: 10cqw; bottom: 9cqw; width: 12cqw; height: 12cqw; }
.inv-framed .ix-br { right: 10cqw; bottom: 9cqw; width: 12cqw; height: 12cqw; }
.inv-framed .ix-tl { left: 10cqw; top: 10cqw; width: 9cqw; height: 9cqw; }
.inv.inv-has-mt .inv-body { padding-top: max(23.5cqw, var(--i-pad-t, 0cqw)) !important; }
.inv.inv-has-mt.inv-framed .inv-body { padding-top: 22cqw !important; }
.inv.inv-has-mb .inv-body { padding-bottom: max(24cqw, var(--i-pad-b, 0cqw)) !important; padding-left: 13cqw !important; padding-right: 13cqw !important; }
.inv.inv-has-mb.inv-framed .inv-body { padding-bottom: 22cqw !important; padding-left: 19cqw !important; padding-right: 19cqw !important; }
.inv-has-mt .inv-bsd { top: 4cqw; }
.inv-canva .inv-extra { z-index: 1; }

.wish-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.wish-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1.5px solid var(--grape); background: var(--grape-soft, #EEF3FA); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.wish-chip svg { width: 24px; height: 24px; color: var(--grape); --m2: var(--grape); }
.wish-chip.off { opacity: .5; border-style: dashed; }

/* ---------- the design library (designs.html) ---------- */
.lib-styles { gap: 8px; }
.pill-sm { padding: 7px 14px; font-size: 14px; }
.lib-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lib-search { flex: 1 1 260px; }
.lib-search input { width: 100%; min-height: 46px; padding: 0 16px 0 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 14px 50% / 18px no-repeat; font: inherit; color: var(--ink); }
.lib-search input:focus { outline: 3px solid color-mix(in srgb, var(--grape) 35%, transparent); border-color: var(--grape); }
.lib-sort { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.lib-sort select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font: inherit; color: var(--ink); }
.lib-style-chip { position: absolute; right: 10px; top: 10px; z-index: 3; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.92); color: #2B2B3A; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.lib-feats { list-style: none; margin: -2px 0 2px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lib-feats li { font-size: 12.5px; padding: 3px 9px; border-radius: 999px; background: var(--mist, #EEF3FA); color: var(--ink-2, #44506A); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.lib-more { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 36px 0 8px; color: var(--ink-2, #555); font-weight: 600; }
.lib-more[hidden] { display: none; }
.lib-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--grape-soft, #ddd); border-top-color: var(--grape, #2F5C9A); animation: spin .8s linear infinite; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* smaller Hebrew lines inside a design follow its Hebrew text font (js/hebfonts.js) */
.inv [dir="rtl"]:not(.inv-he-name):not(.inv-card-he) { font-family: var(--i-he-text, var(--hebrew)); font-weight: var(--i-he-text-w, 400); }

/* Hebrew suggestions on the order form (js/hebrew.js) */
.he-check { border-radius: 14px; padding: 12px 14px; background: #FFF8E6; border: 1px solid #F1D48A; display: flex; flex-direction: column; gap: 8px; }
.he-check-head { font-weight: 700; font-size: 15px; }
.he-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.he-check li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.he-check li span { font-family: var(--hebrew); font-size: 19px; }
.he-check li s { color: #B42318; text-decoration-thickness: 2px; }
.he-check li b { color: #067647; font-weight: 600; }
.he-check li small { grid-column: 1; color: var(--ink-2, #4A5568); font-size: 13.5px; }
.he-check li .btn { grid-column: 2; grid-row: 1 / span 2; }
.he-check li.he-style s { color: #8A5A00; }

/* ---------- header Designs menu ---------- */
.nav-menu { position: relative; }
.nav-menu-btn { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; font-size: 16px; color: var(--ink); cursor: pointer; }
.nav-menu-btn:hover, .nav-menu-btn[aria-current="page"], .nav-menu-btn[aria-expanded="true"] { color: var(--grape); }
.nav-menu-btn svg { transition: transform .2s; }
.nav-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 18px); left: 50%; width: min(560px, 92vw); transform: translate(-50%, -6px); opacity: 0; visibility: hidden; pointer-events: none;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding: 20px; border-radius: 20px; background: var(--card, #FFF); border: 1px solid var(--line); box-shadow: 0 24px 50px -20px rgba(20,30,60,.35);
  transition: opacity .18s, transform .18s, visibility 0s .18s; z-index: 60; }
.nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* keeps hover alive across the gap */
.nav-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .18s, transform .18s; }
.nav-col { display: flex; flex-direction: column; }
.nav-h { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2, #5A6476); margin: 0 0 6px; }
.site-nav .nav-col a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 10px; font-size: 15.5px; }
.site-nav .nav-col a:hover { background: var(--mist, #EEF3FA); }
.nav-col small { color: var(--ink-2, #5A6476); font-size: 13px; font-variant-numeric: tabular-nums; }
.nav-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; margin-top: 6px; border-top: 1px solid var(--line); }
@media (max-width: 960px) {
  .nav-menu-btn { width: 100%; justify-content: space-between; padding: 12px 4px; font-size: 18px; }
  .nav-panel { position: static; transform: none; width: auto; box-shadow: none; border: 0; padding: 0 0 8px; grid-template-columns: 1fr 1fr; display: none; opacity: 1; visibility: visible; pointer-events: auto; transition: none; background: transparent; }
  .nav-panel.open { display: grid; transform: none; }
  .site-nav .nav-col a { font-size: 16px; padding: 9px 8px; }
  .site-nav.open { max-height: calc(100vh - 80px); overflow: auto; }
}

.lib-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.to-top { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40; width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--ink, #1F2D52); color: #FFFFFF; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); cursor: pointer; transition: transform .2s; }
.to-top:hover { transform: translateY(-2px); }
.to-top[hidden] { display: none; }

/* ---------- order page: where you are, the three steps, and a sticky bar on phones ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14.5px; color: var(--ink-2, #5A6476); }
.crumbs a { color: var(--grape); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.steps-mini { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 6px 0 2px; }
.steps-mini a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--mist, #EEF3FA); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.steps-mini a:hover { background: var(--grape-soft, #DCE6F7); }
.dock { display: none; }
@media (max-width: 900px) {
  .dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper, #FFF) 94%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); transition: transform .25s; }
  .dock small { display: block; font-size: 12.5px; color: var(--ink-2, #5A6476); }
  .dock strong { font-size: 16px; }
  .dock.away { transform: translateY(110%); }
  body:has(.dock) main { padding-bottom: 90px; }
}
.next-steps ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.next-steps li { line-height: 1.45; }
.next-steps { display: flex; flex-direction: column; gap: 12px; }
.ft-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ft-list li { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ft-list li span { flex: 1 1 200px; }
.lib-feats li.lib-feat-style { background: var(--ink, #1F2D52); color: #FFFFFF; }

/* ---------- words never get lost in the picture ----------
   1. a barely-there halo in the opposite tone keeps every letter's edge clear over art, sparkles and patterns (size unchanged)
   2. the animation layer fades out around the words, so a white sparkle never sits on white text */
.inv:not(.inv-canva) .inv-body p { text-shadow: var(--i-guard, none); }
.inv-fx { -webkit-mask-image: radial-gradient(ellipse 58% 44% at 50% 50%, transparent 0 60%, #000 92%); mask-image: radial-gradient(ellipse 58% 44% at 50% 50%, transparent 0 60%, #000 92%); }

/* typing on a phone: floating buttons step aside so the keyboard never hides the field */
html.kb-open .jr-next, html.kb-open .jr-fade, html.kb-open .jr-bar, html.kb-open .jr-dots, html.kb-open .jr-ff,
html.kb-open .dock, html.kb-open .to-top, html.kb-open .guide { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .15s, visibility 0s .15s; }
input, textarea { scroll-margin: 90px 0 30vh; }

/* view chooser in the footer */
.view-pick { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: 13px; }
.view-pick span { padding: 0 8px 0 10px; opacity: .8; }
.view-pick button { border: 0; border-radius: 999px; padding: 7px 12px; min-height: 32px; background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.view-pick button[aria-pressed="true"] { background: #FFFFFF; color: #1F2D52; }
/* phone view on a big screen */
html.view-phone body > :not(.vp-stage) { display: none !important; }
html.view-phone body { background: #E9EDF5; }
.vp-stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 16px 30px; }
.vp-bar { display: flex; align-items: center; gap: 14px; font-weight: 700; color: #1F2D52; }
.vp-exit { border: 1.5px solid #1F2D52; border-radius: 999px; background: #FFFFFF; color: #1F2D52; font: inherit; font-weight: 600; padding: 8px 16px; cursor: pointer; }
.vp-frame { width: 390px; height: min(844px, calc(100vh - 90px)); border: 10px solid #1A1A2E; border-radius: 42px; background: #FFFFFF; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); }

/* personalize: three clear steps, the writing assistant tucked right under the message, colors to try on under the preview */
.form-sec { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.form-sec-h { display: flex; align-items: center; gap: 10px; font-size: 22px; }
.form-sec-h b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--grape); color: var(--on-grape, #fff); font-size: 15px; font-family: var(--body, inherit); flex: none; }
.assist-under { margin-top: -8px; padding: 14px 16px; gap: 10px; }
.assist-under .seg { flex-wrap: wrap; }
.try-colors { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px; border-radius: 18px; background: var(--card); border: 2px solid var(--grape); box-shadow: 0 10px 26px -16px rgba(0,0,0,.35); }
.try-colors-h { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 16px; color: var(--grape); }
.swatches-big { justify-content: center; gap: 14px; }
.swatches-big label { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.swatches-big i { width: 52px; height: 52px; transition: transform .2s; }
.swatches-big input:checked + i { transform: scale(1.08); box-shadow: 0 0 0 3px var(--grape); }
.swatches-big small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.swatches-big input:checked ~ small { color: var(--ink); }
@media (hover: hover) { .swatches-big label:hover i { transform: scale(1.06); } }
.tile-try { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; padding: 9px 12px; border-radius: 999px; border: 1.5px dashed var(--grape); color: var(--grape); font-weight: 700; font-size: 14px; text-decoration: none; }
.tile-try:hover { background: var(--grape-soft); }
.tile-dots { display: inline-flex; }
.tile-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card, #fff); margin-left: -5px; }
.tile-dots i:first-child { margin-left: 0; }
/* the demo guide pill sits above the "Your total · Continue" bar instead of covering its button */
@media (max-width: 900px) { body:has(.dock:not(.away)) .guide { bottom: calc(84px + env(safe-area-inset-bottom)); transition: bottom .3s; } }

/* pictures Claude drew for the customer */
.inv-ai { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.inv-ai .ia { position: absolute; display: block; transform: rotate(var(--r, 0deg)); }
.inv-ai svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .4cqw .6cqw rgba(0,0,0,.12)); }
.inv-ai .ia-background { opacity: .16; z-index: 0; }
.inv-ai .ia-background svg { filter: none; }
.inv-ai .ia-scatter, .inv-ai .ia-border { opacity: .92; }
.inv-ai .ia svg { animation: var(--ia-anim, none) var(--ia-d, 3s) ease-in-out var(--w, 0s) infinite; transform-origin: 50% 85%; }
.iam-float { --ia-anim: ia-float; --ia-d: 3.6s; }
.iam-bob { --ia-anim: ia-bob; --ia-d: 1.8s; }
.iam-sway { --ia-anim: ia-sway; --ia-d: 3s; }
.iam-spin { --ia-anim: ia-spin; --ia-d: 9s; }
.iam-twinkle { --ia-anim: ia-twinkle; --ia-d: 2.2s; }
.iam-waddle { --ia-anim: ia-waddle; --ia-d: 1.1s; }
.iam-flutter { --ia-anim: ia-flutter; --ia-d: .9s; }
@keyframes ia-float { 50% { transform: translateY(-6%) rotate(3deg); } }
@keyframes ia-bob { 50% { transform: translateY(-9%) scaleY(1.04); } }
@keyframes ia-sway { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes ia-spin { to { transform: rotate(360deg); } }
@keyframes ia-twinkle { 50% { transform: scale(.82); opacity: .55; } }
@keyframes ia-waddle { 25% { transform: rotate(-9deg) translateX(-3%); } 75% { transform: rotate(9deg) translateX(3%); } }
@keyframes ia-flutter { 50% { transform: scaleX(.78) translateY(-4%); } }
@media (prefers-reduced-motion: reduce) { .inv-ai .ia svg { animation: none; } }
/* "draw it with Claude" on the personalize page */
.ai-draw { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, var(--grape-soft), color-mix(in srgb, var(--sun, #F5B700) 16%, var(--card))); margin-top: -6px; }
.ai-draw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ai-draw-status { font-size: 14px; color: var(--ink-2); margin: 0; }
.ai-draw-status.busy::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border-radius: 50%; border: 2.5px solid var(--grape-soft); border-top-color: var(--grape); animation: spin .8s linear infinite; }
.ai-lib { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ai-lib button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 74px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--grape); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.ai-lib button[aria-pressed="true"] { border-color: var(--grape); background: var(--grape-soft); }
.ai-lib svg { width: 40px; height: 40px; }
.ai-lib span { color: var(--ink); max-width: 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-lib-h { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0; }

/* "Watch it open": a play pill sitting on the preview's bottom edge, with a soft pulse so it is easy to find */
.pv-wrap { position: relative; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; padding-bottom: 26px; }
.try-open { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px 0 8px; border: 0; border-radius: 999px; background: var(--grape); color: var(--on-grape, #fff); font: inherit; font-weight: 700; font-size: 15.5px; white-space: nowrap; cursor: pointer; box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--grape) 80%, #000); transition: transform .2s, background .2s; }
.try-open::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--grape) 55%, transparent); animation: try-ping 2.2s ease-out infinite; pointer-events: none; }
.try-open-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); }
.try-open-ic svg { margin-left: 2px; }
.try-open:active { transform: translateX(-50%) scale(.96); }
@media (hover: hover) { .try-open:hover { transform: translateX(-50%) translateY(-2px); } }
/* while the envelope plays, its own "Tap to open" / "Crack the seal" button owns the bottom edge: Back becomes a small chip in the top corner */
.try-open.playing { top: 10px; right: 10px; left: auto; bottom: auto; transform: none; min-height: 36px; padding: 0 14px 0 6px; gap: 6px; font-size: 13px; background: rgba(20,22,40,.72); color: #FFFFFF; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.try-open.playing:active, .try-open.playing:hover { transform: none; }
.try-open.playing::before { animation: none; }
.try-open.playing .try-open-ic { width: 24px; height: 24px; background: rgba(255,255,255,.16); }
.try-open.playing .try-open-ic svg { display: none; }
.try-open.playing .try-open-ic::before { content: "✕"; font-size: 12px; line-height: 1; }
@keyframes try-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--grape) 50%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
.env-try { position: relative; }
.env-try-hint { margin: 0 0 10px; text-align: center; font-weight: 700; font-size: 14px; color: var(--grape); animation: try-hint 1.6s ease-in-out infinite; }
@keyframes try-hint { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .try-open::before, .env-try-hint { animation: none; } }
/* the paid add-on tick box */
.addon-pick { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--grape); background: var(--card); cursor: pointer; position: relative; }
.addon-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.addon-box { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; border: 2px solid var(--grape); display: grid; place-items: center; transition: background .2s; }
.addon-pick input:checked + .addon-box { background: var(--grape); }
.addon-pick input:checked + .addon-box::after { content: ""; width: 10px; height: 6px; border: solid var(--on-grape, #fff); border-width: 0 0 2.5px 2.5px; transform: translateY(-2px) rotate(-45deg); }
.addon-pick input:focus-visible + .addon-box { outline: 3px solid var(--grape); outline-offset: 2px; }
.addon-txt { display: flex; flex-direction: column; gap: 3px; }
.addon-txt b { font-size: 15.5px; }
.addon-txt em { font-style: normal; color: var(--grape); margin-left: 4px; }
.addon-txt small { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }

/* compare plans on a phone: no sideways scrolling. Plan names stay pinned at the top,
   each feature reads across the full width with its four ticks right under it */
@media (max-width: 680px) {
  #compare { padding-inline: 14px !important; }
  #compare .table-box { overflow: visible; }
  .compare, .compare thead, .compare tbody { display: block; width: 100%; min-width: 0; }
  .compare thead { position: sticky; top: var(--hdr-h, 64px); z-index: 3; background: var(--card); box-shadow: 0 6px 10px -8px rgba(0,0,0,.35); }
  .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
  .compare thead th:first-child { display: none; }
  .compare thead tr { align-items: stretch; border-bottom: 1.5px solid var(--line); }
  .compare thead th { display: flex; flex-direction: column; justify-content: center; padding: 10px 2px; text-align: center !important; font-size: 13px; line-height: 1.25; border: 0; background: transparent; }
  .compare thead th .muted { display: block; font-size: 12.5px; margin-top: 2px; }
  .compare tbody tr { border-bottom: 1px solid var(--line); padding: 10px 0 8px; }
  .compare tbody td { border: 0; padding: 4px 2px; text-align: center; }
  .compare tbody td:first-child { grid-column: 1 / -1; text-align: left !important; padding: 0 4px 6px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .compare td .yes { width: 22px; height: 22px; background-size: 13px; }
}
/* picker thumbnails: a soft placeholder until drawn; each one is boxed off so changes elsewhere don't re-lay them out */
.design-switch button { contain: layout paint style; min-height: 90px; }
.sw-ph { display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 8px; background: var(--mist); }

/* ---------- gift box (js/gift.js): unties, the lid flies off, the sides fold flat to the floor, the gift list rises out ---------- */
.gx-card { text-align: center; }
.gx { --s: 124px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 330px; }
.gx-scene { position: relative; width: 100%; height: 270px; display: grid; place-items: center; perspective: 900px; cursor: pointer; -webkit-tap-highlight-color: transparent; animation: gx-nudge 3.2s ease-in-out infinite; }
.gx-cube { position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; transform: translateY(34px) rotateX(62deg) rotateZ(-38deg); transition: transform 1s .9s cubic-bezier(.4,0,.2,1); }
/* as the sides fold down, the whole box settles lower and a little smaller so the flat net stays inside the card */
.gx-open .gx-cube { transform: translateY(78px) rotateX(64deg) rotateZ(-38deg) scale(.68); }
.gx-card { overflow: hidden; }
.gx-cube i { position: absolute; display: block; width: var(--s); height: var(--s); backface-visibility: visible; }
.gx-base { inset: 0; background: color-mix(in srgb, var(--gx-wrap) 70%, #000); box-shadow: 0 0 40px 10px rgba(0,0,0,.18); }
/* the four sides stand up from the base's edges; opening folds each one flat outward onto the floor */
.gx-w { background: linear-gradient(90deg, var(--gx-wrap) 43%, var(--gx-rib) 43% 57%, var(--gx-wrap) 57%); transition: transform .75s cubic-bezier(.55,0,.25,1.15), filter .75s; }
.gx-front { left: 0; top: 100%; transform-origin: top center; transform: rotateX(90deg); filter: brightness(1.08); }
.gx-back { left: 0; bottom: 100%; transform-origin: bottom center; transform: rotateX(-90deg); filter: brightness(.82); }
.gx-left { top: 0; right: 100%; transform-origin: right center; transform: rotateY(90deg); filter: brightness(.9); background: linear-gradient(180deg, var(--gx-wrap) 43%, var(--gx-rib) 43% 57%, var(--gx-wrap) 57%); }
.gx-right { top: 0; left: 100%; transform-origin: left center; transform: rotateY(-90deg); filter: brightness(.96); background: linear-gradient(180deg, var(--gx-wrap) 43%, var(--gx-rib) 43% 57%, var(--gx-wrap) 57%); }
.gx-lid { inset: -7px; width: auto !important; height: auto !important; transform: translateZ(calc(var(--s) + 1px)); border-radius: 4px;
  background: linear-gradient(90deg, transparent 43%, var(--gx-rib) 43% 57%, transparent 57%), linear-gradient(180deg, transparent 43%, var(--gx-rib) 43% 57%, transparent 57%), color-mix(in srgb, var(--gx-wrap) 88%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gx-wrap) 80%, #000) inset; transition: transform .7s cubic-bezier(.3,0,.4,1), opacity .5s; }
.gx-bow { position: absolute; left: 50%; top: 34px; width: 112px; margin-left: -56px; overflow: visible; filter: drop-shadow(0 5px 6px rgba(0,0,0,.25)); pointer-events: none; }
.gx-bow path, .gx-bow circle { fill: var(--gx-rib); transition: transform .6s cubic-bezier(.5,0,.3,1), opacity .5s; transform-box: fill-box; }
.gx-bow .gx-knot { fill: color-mix(in srgb, var(--gx-rib) 80%, #000); }
.gx-loop-l { transform-origin: 100% 80%; } .gx-loop-r { transform-origin: 0% 80%; }
.gx-tail-l { transform-origin: 100% 0%; } .gx-tail-r { transform-origin: 0% 0%; }
.gx-spark { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.gx-spark i { position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--gx-rib); opacity: 0; }
.gx-spark i:nth-child(3n) { background: var(--gx-wrap); width: 7px; height: 7px; }
.gx-spark i:nth-child(4n) { background: #FFFFFF; border-radius: 2px; transform: rotate(45deg); }
.gx-tap { position: relative; z-index: 3; border: 0; border-radius: 999px; padding: 12px 24px; min-height: 48px; background: var(--grape); color: var(--on-grape, #fff); font: inherit; font-weight: 700; font-size: 15.5px; cursor: pointer; box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--grape) 80%, #000); transition: opacity .3s, transform .3s; }
.gx-reveal { position: absolute; z-index: 4; left: 50%; top: 40px; width: min(86%, 300px); transform: translate(-50%, 70px) scale(.5); opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 16px; border-radius: 18px; background: var(--paper, #fff); color: var(--ink); box-shadow: 0 24px 40px -18px rgba(0,0,0,.5); transition: transform .8s cubic-bezier(.2,1.4,.4,1), opacity .4s; }
.gx-emoji { font-size: 32px; line-height: 1; }
.gx-title { font-family: var(--display); font-size: 21px; }
.gx-note { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.gx-sample { font-size: 12.5px; color: var(--ink-2); }
/* opening, in order: bow unties, ribbon gone, lid flies, walls fold down one after another, sparkles, the list rises */
.gx-open .gx-scene { animation: none; cursor: default; }
.gx-open .gx-loop-l { transform: translate(-60%, 40%) rotate(-70deg) scale(.7); opacity: 0; transition-delay: .05s; }
.gx-open .gx-loop-r { transform: translate(60%, 40%) rotate(70deg) scale(.7); opacity: 0; transition-delay: .05s; }
.gx-open .gx-tail-l { transform: rotate(40deg) translateY(30%); opacity: 0; transition-delay: .2s; }
.gx-open .gx-tail-r { transform: rotate(-40deg) translateY(30%); opacity: 0; transition-delay: .2s; }
.gx-open .gx-knot { transform: scale(0); opacity: 0; transition-delay: .3s; }
.gx-open .gx-lid { transform: translateZ(calc(var(--s) * 2.6)) translateX(60px) rotateX(50deg) rotateZ(80deg); opacity: 0; transition-delay: .45s; }
.gx-open .gx-front { transform: none; transition-delay: .95s; }
.gx-open .gx-right { transform: none; transition-delay: 1.07s; }
.gx-open .gx-back { transform: none; transition-delay: 1.19s; }
.gx-open .gx-left { transform: none; transition-delay: 1.31s; }
.gx-open .gx-w { filter: brightness(1); }
.gx-open .gx-spark i { animation: gx-burst 1s 1.45s ease-out forwards; }
.gx-open .gx-tap { opacity: 0; transform: scale(.8); pointer-events: none; }
.gx-open .gx-reveal { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; transition-delay: 1.75s, 1.7s; }
@keyframes gx-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1.3); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--d) * -1.6)) scale(.3); } }
@keyframes gx-nudge { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(-6px) rotate(-3deg); } 82% { transform: translateY(0) rotate(3deg); } 88% { transform: translateY(-3px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .gx-scene { animation: none; } .gx *, .gx-reveal { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; } }
/* the gift link fields on the personalize page */
.gift-set { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; border-top: 1px dashed #E7D3A6; }

/* ---------- shop filters: compact, one row each, the chosen one is the only one that looks chosen ---------- */
.lib-filters { display: flex; flex-direction: column; gap: 12px; padding-block: 18px 20px; }
.seg-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 999px; background: var(--mist); max-width: 520px; }
.seg-tabs button { min-height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s, color .2s; }
.seg-tabs button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px -2px rgba(0,0,0,.25); }
.chip-scroll { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 6px; margin-inline: -2px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll[hidden] { display: none; }
.chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 500; font-size: 14.5px; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip .he { font-size: 13.5px; opacity: .75; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:focus-visible, .seg-tabs button:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
@media (hover: hover) { .chip:not([aria-pressed="true"]):hover { border-color: var(--grape); } }
.lib-filters .lib-search { flex: none; }
.lib-filters .lib-search input { min-height: 44px; }
.lib-filters .lib-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; }
.lib-pick { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.lib-pick select { min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); font: inherit; font-size: 15px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink); }
@media (min-width: 900px) { .lib-filters { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; } .lib-filters .chip-scroll { grid-column: 1 / -1; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } .lib-filters .lib-search { grid-column: 1 / 2; min-width: 360px; } .lib-filters .lib-tools { grid-column: 2 / 3; justify-self: end; grid-template-columns: 200px 180px; } .seg-tabs { grid-column: 1 / -1; } }
@media (max-width: 640px) { .page-head p:not(.eyebrow) { font-size: 15px; } }

/* personalize: the three steps fold up so the page stays short */
details.form-sec { gap: 0; }
details.form-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; -webkit-tap-highlight-color: transparent; }
details.form-sec > summary::-webkit-details-marker { display: none; }
.fs-t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fs-sum { font-family: var(--body, inherit); font-size: 13.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
details.form-sec[open] .fs-sum { display: none; }
.fs-chev { flex: none; color: var(--ink-2); transition: transform .3s; }
details.form-sec[open] .fs-chev { transform: rotate(180deg); }
.fs-body { display: flex; flex-direction: column; gap: 16px; padding-top: 16px; animation: fs-in .35s ease-out; }
.fs-next { align-self: flex-start; margin-top: 4px; }
@keyframes fs-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .fs-body { animation: none; } }
/* shop on a phone: a short header so designs show on the first screen */
.lib-pick select { font-weight: 600; }
@media (max-width: 640px) {
  .shop-head { padding-top: 18px !important; padding-bottom: 0 !important; }
  .shop-head .eyebrow, .shop-head > p:not(.eyebrow) { display: none; }
  .shop-head h1 { margin-top: 0 !important; font-size: 30px; }
  .lib-filters { gap: 10px; padding-block: 12px 12px; }
  .lib-status { margin-bottom: 12px; }
  .lib-status .btn { min-height: 36px; padding-inline: 14px; }
}
/* how it opens: a row of openings to swipe through, the premium ones marked */
.try-opens { margin-top: 2px; }
.op-pick { display: flex; gap: 8px; width: 100%; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; scrollbar-width: thin; }
.op-chip { flex: none; scroll-snap-align: start; width: 96px; min-height: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 6px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; }
.op-chip .op-ic { font-size: 24px; line-height: 1; }
.op-chip small { font-size: 11px; font-weight: 700; color: var(--grape); }
.op-chip.prem { background: linear-gradient(160deg, color-mix(in srgb, var(--sun, #F5B700) 16%, var(--card)), var(--card)); }
.op-chip.prem::after { content: "✨"; position: absolute; top: 4px; right: 6px; font-size: 11px; }
.op-chip[aria-checked="true"] { border-color: var(--grape); box-shadow: 0 0 0 2px var(--grape); }
.op-chip:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.op-pick-note { font-size: 12.5px; color: var(--ink-2); text-align: center; }
/* shop: the premium openings showcase */
.op-promo { display: flex; flex-direction: column; gap: 10px; margin: 0 0 16px; padding: 14px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--sun, #F5B700) 18%, var(--card)), color-mix(in srgb, var(--grape) 10%, var(--card))); border: 1.5px solid color-mix(in srgb, var(--sun, #F5B700) 45%, var(--line)); }
.op-promo-t { display: flex; flex-direction: column; gap: 2px; }
.op-promo-t b { font-size: 16px; }
.op-promo-t span { font-size: 13.5px; color: var(--ink-2); }
.op-promo-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.op-promo-row::-webkit-scrollbar { display: none; }
.op-promo-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; box-shadow: inset 0 0 0 1.5px var(--line); }
.op-promo-chip span { font-size: 18px; }
@media (hover: hover) { .op-promo-chip:hover { box-shadow: inset 0 0 0 1.5px var(--grape); } }
.pts-use { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sun, #F5B700) 14%, var(--card)); font-size: 14.5px; cursor: pointer; }
.pts-use input { width: 20px; height: 20px; accent-color: var(--grape); }
.pts-use em { font-style: normal; font-weight: 700; color: var(--grape); }
.pts-bal { font-size: 15px !important; margin-top: 6px !important; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sun, #F5B700) 14%, var(--card)); display: inline-block; }

/* =====================================================================
   Motion across the site (js/site.js, end): scroll arrivals, tilt, ripple, shine, header
   ===================================================================== */
.site-header { transition: box-shadow .35s, background .35s; }
.site-header.scrolled { box-shadow: 0 10px 30px -18px rgba(20,30,70,.45); background: color-mix(in srgb, var(--paper) 94%, transparent); }
.brand svg { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.brand:hover svg { transform: rotate(-8deg) scale(1.08); }
.btn, .pill { position: relative; overflow: hidden; isolation: isolate; }
.btn-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .22; transform: scale(0); pointer-events: none; z-index: -1; animation: btn-ripple .65s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes btn-ripple { to { transform: scale(1); opacity: 0; } }
.btn-primary::after, .btn-elite::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.38) 48%, transparent 66%); background-size: 260% 100%; background-position: 130% 0; transition: background-position .9s cubic-bezier(.3,.7,.3,1); }
.btn-primary:hover::after, .btn-elite:hover::after { background-position: -40% 0; }
.btn-elite::after { animation: site-sheen 4.5s ease-in-out 1.5s infinite; }
@keyframes site-sheen { 0%, 70% { background-position: 130% 0; } 100% { background-position: -40% 0; } }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); }
.pill { transition: transform .3s cubic-bezier(.3,1.6,.5,1), border-color .2s, background .2s; }
.pill:hover { transform: translateY(-3px) rotate(-1.5deg); border-color: var(--grape); }
/* design cards: lean toward the pointer with a glint */
.design-thumb, .sample > a { display: block; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.design-thumb.tilting, .sample > a.tilting { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-6px); transition-duration: .12s, .3s; box-shadow: 0 26px 40px -24px rgba(20,30,70,.5); }
.design-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255,255,255,.45), transparent 55%); }
.design-thumb.tilting::after { opacity: 1; }
.design-thumb .inv { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.design-thumb:hover .inv { transform: translateZ(24px) scale(1.02); }
.step-n { transition: transform .5s cubic-bezier(.3,1.7,.5,1); }
.step:hover .step-n { transform: scale(1.15) rotate(-8deg); }
.step { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.opt { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .3s; }
.opt:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(20,30,70,.45); }
.flow-arrow { display: inline-block; animation: site-nudge 1.8s ease-in-out infinite; }
.flow-arrow:nth-of-type(2) { animation-delay: .3s; } .flow-arrow:nth-of-type(3) { animation-delay: .6s; }
@keyframes site-nudge { 0%, 100% { transform: none; opacity: .6; } 50% { transform: translateX(5px); opacity: 1; } }
.faq details { transition: background .3s; }
.faq details[open] > p { animation: site-open .5s cubic-bezier(.2,.8,.2,1); }
@keyframes site-open { from { opacity: 0; transform: translateY(-8px); } }
.faq summary::marker { transition: color .2s; }
/* the hero: words arrive one by one, then the rest follows */
.hero-in .hw { display: inline-block; animation: hw-in .9s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(.15s + var(--i) * 70ms); }
@keyframes hw-in { from { opacity: 0; transform: translateY(.45em) rotate(3deg); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.hero-in .hero-he { animation: hw-he 1.2s cubic-bezier(.22,1,.36,1) both; }
@keyframes hw-he { from { opacity: 0; letter-spacing: .25em; } to { opacity: 1; } }
.hero-in .hero-lede { animation: srv-up 1s cubic-bezier(.22,1,.36,1) .75s both; }
.hero-in .hero-cta { animation: srv-up .9s cubic-bezier(.3,1.4,.5,1) 1s both; }
.hero-in .hero-demo { animation: srv-float 1.4s cubic-bezier(.22,1,.36,1) .35s both; }
@keyframes srv-float { from { opacity: 0; transform: translateY(40px) rotate(2deg) scale(.96); } to { opacity: 1; transform: none; } }
/* things arriving as you scroll: each kind has its own style and pace */
.rv-wait { opacity: 0; }
.rv-on[data-rv="up"] { animation: srv-up .95s cubic-bezier(.22,1,.36,1) both; }
.rv-on[data-rv="pop"] { animation: srv-pop .7s cubic-bezier(.3,1.45,.5,1) both; }
.rv-on[data-rv="flip"] { animation: srv-flip 1.15s cubic-bezier(.2,.9,.3,1.05) both; transform-origin: 50% 0; }
.rv-on[data-rv="left"] { animation: srv-left .85s cubic-bezier(.16,1,.3,1) both; }
.rv-on[data-rv="right"] { animation: srv-right .85s cubic-bezier(.16,1,.3,1) both; }
.rv-on[data-rv="zoom"] { animation: srv-zoom 1.3s cubic-bezier(.22,1,.36,1) both; }
.rv-on[data-rv="slide"] { animation: srv-slide .55s ease-out both; }
.rv-on[data-rv="blur"] { animation: srv-blur 1.4s ease-out both; }
.rv-on[data-rv="rise"] { animation: srv-rise 1s cubic-bezier(.3,1.3,.5,1) both; }
.rv-on[data-rv="count"] { animation: srv-pop .8s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes srv-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes srv-pop { from { opacity: 0; transform: translateY(26px) scale(.9) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes srv-flip { from { opacity: 0; transform: perspective(900px) rotateX(-55deg) translateY(30px); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes srv-left { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes srv-right { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes srv-zoom { from { opacity: 0; transform: scale(.86); filter: saturate(.4); } to { opacity: 1; transform: none; filter: none; } }
@keyframes srv-slide { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes srv-blur { from { opacity: 0; filter: blur(12px); transform: scale(1.03); } to { opacity: 1; filter: none; transform: none; } }
@keyframes srv-rise { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rv-wait { opacity: 1; } .rv-on, .hero-in .hw, .hero-in > * , .flow-arrow, .btn-elite::after { animation: none !important; }
  .design-thumb.tilting, .sample > a.tilting { transform: none; }
}

/* Phones that force a dark mode on websites (Samsung Internet, Chrome's "darken websites") lighten dark text but leave
   pictures untouched, so dark words ended up pale on a still-white framed panel (or on Canva artwork). On those cards the words
   are painted as an image of their own colour, so words and panel stay together. Plain cards need nothing: their background
   and words are both page colours, which such phones adjust together.
   Print files (.inv-export) use plain text. */
html.ink-safe :is(.inv-framed, .inv-canva) .inv-body p:not(.inv-bsd):not(.inv-export *) { -webkit-text-fill-color: transparent; background-image: linear-gradient(currentColor, currentColor); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
html.ink-safe .inv-canva .inv-body:not(.inv-export *) { filter: drop-shadow(0 0 .45cqw var(--i-halo, transparent)) drop-shadow(0 0 1.2cqw var(--i-halo, transparent)); }

/* smoothness pass (see css/motion.css) */
.btn-elite::after { background-size: 100% 100%; background-position: 0 0; transform: translateX(-100%); transition: none; animation: tx-sheen-late 4.5s ease-in-out 1.5s infinite; }
.btn-primary:hover::after { background-position: 0 0; }
.btn-primary::after { background-size: 100% 100%; background-position: 0 0; transform: translateX(-100%); transition: transform .9s cubic-bezier(.3,.7,.3,1); }
.btn-primary:hover::after { transform: translateX(100%); }
.fx-shimmer { width: 100%; background-size: 100% 100%; transform: translateX(-110%); animation: tx-sheen-fx 6s ease-in-out infinite; animation-delay: inherit; will-change: transform; }
@keyframes tx-sheen-fx { 0% { transform: translateX(-110%); } 55%, 100% { transform: translateX(110%); } }
@keyframes tx-sheen-late { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.try-open::before { box-shadow: none; border: 3px solid color-mix(in srgb, var(--grape) 55%, transparent); animation: try-ring 2.2s ease-out infinite; }
@keyframes try-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.12, 1.35); opacity: 0; } }

/* light / dark switch in the header (js/ux.js TSTheme, js/site.js header) */
.ts-dark input, .ts-dark select, .ts-dark textarea, .ts-dark button, .ts-dark details, .ts-dark summary { color-scheme: dark; }
.ts-theming, .ts-theming body, .ts-theming .site-header, .ts-theming .band, .ts-theming .panel, .ts-theming .card { transition: background-color .4s, color .4s, border-color .4s; }
.theme-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; overflow: hidden; margin-left: auto; }
.theme-btn:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
.theme-btn svg { position: absolute; width: 22px; height: 22px; transition: transform .5s cubic-bezier(.3,1.4,.5,1), opacity .3s; }
.theme-btn .tb-sun { transform: translateY(140%) rotate(-90deg); opacity: 0; }
.ts-dark .theme-btn .tb-moon { transform: translateY(-140%) rotate(90deg); opacity: 0; }
.ts-dark .theme-btn .tb-sun { transform: none; opacity: 1; color: var(--sun); }
.header-row .site-nav { margin-left: 8px; }
@media (min-width: 961px) { .theme-btn { order: 3; margin-left: 4px; } .header-row .site-nav { margin-left: auto; } }
@media (max-width: 960px) { .theme-btn { margin-right: 8px; } }
@media (prefers-reduced-motion: reduce) { .theme-btn svg { transition: none; } }

/* the Piano card's thumbnail (js/render.js interactiveThumb) */
.inv-piano .inv-body { gap: 3cqw; }
.inv-piano .pz-ele { width: 46cqw; } .inv-piano .pz-ele svg { display: block; width: 100%; animation: pz-stomp 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes pz-stomp { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-6%) rotate(-4deg); } 80% { transform: translateY(2%) scale(1.03, .97); } }
.inv-piano .ix-en { font-family: var(--i-name-font); font-size: 10cqw; color: var(--i-accent); line-height: 1.05; }
.inv-piano .pz-keys { position: relative; width: 80cqw; height: 26cqw; border-radius: 2cqw; overflow: hidden; background: #0B0A12; box-shadow: 0 2cqw 4cqw rgba(0,0,0,.4); }
.inv-piano .pz-keys i { position: absolute; top: 0; bottom: 0; width: 14.28%; background: linear-gradient(#FFFFFF, #E9E6F2); border-right: .5cqw solid #0B0A12; }
.inv-piano .pz-keys b { position: absolute; top: 0; height: 60%; width: 9%; background: linear-gradient(#2B2440, #0B0A12); border-radius: 0 0 1cqw 1cqw; }
@media (prefers-reduced-motion: reduce) { .inv-piano .pz-ele svg { animation: none; } }

/* design pass: a long button label wraps inside its button (balanced, centred) instead of running past the edge */
.btn { white-space: normal; text-align: center; line-height: 1.2; text-wrap: balance; padding-block: 6px; }
.btn-row .btn, .dl-row .btn { min-width: 0; }