/* Tiny Guestlist: a calm page that lets the invitations bring the color.
   Corben (a rounded, retro serif) for headlines, Atkinson Hyperlegible for
   everything else, Bagel Fat One only in the logo. Teal does the work
   (buttons, links, ticks); peach, butter and sky live in the invitations. */
:root {
  --bg: #f5fafa;
  --white: #ffffff;
  --sky: #b7e3ef;
  --butter: #ffe07a;
  --peach: #ff8f6b;
  --teal: #0f6f78;
  --accent: #0f6f78;
  --teal-dark: #0b5960;
  --ink: #10303a;
  --soft: #3e5a63;
  --line: #cfe6e9;
  --paper-shadow: 0 1px 2px rgba(16, 48, 58, .06), 0 10px 30px rgba(16, 48, 58, .08);
  --f-head: "Corben", Georgia, "Times New Roman", serif;
  --f-logo: "Bagel Fat One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.6 var(--f-body); }
img { max-width: 100%; height: auto; }
a { color: var(--teal); }
h1, h2, h3 { font-family: var(--f-head); font-weight: 700; line-height: 1.16; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.6vw, 52px); }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: 22px; line-height: 1.2; font-weight: 400; letter-spacing: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.stack { display: grid; gap: 18px; }
.muted { color: var(--soft); }
.small { font-size: 16px; }
.kicker { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
.check { color: var(--teal); }
.hidden { position: absolute; left: -9999px; }

/* Header and footer */
.top { padding: 16px 0; background: var(--white); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 400 27px/1 var(--f-logo); color: var(--ink); text-decoration: none; white-space: nowrap; }
.logo-mark { width: 44px; height: 44px; flex: none; }
.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; font-weight: 700; font-size: 16px; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--teal); }
.nav .nav-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--teal); color: var(--white); }
.nav .nav-cta:hover { background: var(--teal-dark); color: var(--white); }
.foot { padding: 36px 0 48px; font-size: 16px; color: var(--soft); border-top: 1px solid var(--line); background: var(--white); }
.foot .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--soft); }

/* Buttons and forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 2px solid var(--teal); font: 700 17px/1 var(--f-body); text-decoration: none; cursor: pointer; }
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 540px; }
.signup input[type=email], .signup input[type=number], .field input, .field select, .field textarea {
  flex: 1 1 240px; min-height: 54px; padding: 0 16px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--white); color: var(--ink); font: 17px var(--f-body);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; font-weight: 700; font-size: 16px; }
.field textarea { padding: 12px 16px; min-height: 120px; resize: vertical; }

/* Bands */
.band { padding: 84px 0; }
.band-white { background: var(--white); }
.band-blush, .band-sky { background: var(--white); }
.hero { padding: 36px 0 80px; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.hero .lede { font-size: 21px; color: var(--soft); max-width: 32ch; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; }

/* Alphabet magnets */
.magnets { display: flex; gap: 6px; align-items: flex-end; font: 400 58px/1 var(--f-head); }
.magnets span { display: inline-block; text-shadow: 0 3px 0 rgba(16, 48, 58, .18); }
.magnets span:nth-child(1) { color: var(--teal); transform: rotate(-8deg); }
.magnets span:nth-child(2) { color: var(--peach); transform: rotate(5deg); }
.magnets span:nth-child(3) { color: #e8b923; transform: rotate(-4deg); }
.magnets span:nth-child(4) { color: #5fb7d1; transform: rotate(9deg); }

/* Paper notes held by a magnet */
.tile, .note { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--paper-shadow); padding: 26px 24px; display: grid; gap: 10px; align-content: start; }
.tile h3 { font-size: 22px; }
.tile .n { font: 400 18px/1 var(--f-head); color: var(--teal); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { padding-left: 32px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* Invitations, RSVP rows and the gift strip */
.invite { background: var(--white); border-radius: 6px; border-top: 12px solid var(--butter); box-shadow: var(--paper-shadow); padding: 22px 20px; display: grid; gap: 6px; }
.invite .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.invite .name { font: 700 28px/1.08 var(--f-head); }
.invite .when { font-size: 15px; color: var(--soft); }
.rsvp-row { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--white); border: 1.5px solid var(--line); font-size: 15px; }
.rsvp-row span:last-child { color: var(--soft); }
.gift { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: var(--butter); color: var(--ink); font-size: 15px; font-weight: 700; }
.phone { background: var(--white); border: 3px solid var(--ink); border-radius: 32px; padding: 22px 16px; display: grid; gap: 10px; align-content: start; max-width: 340px; width: 100%; justify-self: center; box-shadow: var(--paper-shadow); }

/* Home: the fanned example invitations */
.prompt { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--white); border: 2.5px solid var(--ink); border-radius: 12px; padding: 14px 16px; font-size: 16px; }
.prompt b { color: var(--teal); white-space: nowrap; }
.fan { position: relative; height: 430px; }
.fan .card { position: absolute; width: 230px; }
.fan .c1 { left: 0; top: 80px; }
.fan .c2 { left: 150px; top: 0; z-index: 2; }
.fan .c3 { left: 300px; top: 100px; }
.fan-note { font-size: 15px; color: var(--soft); text-align: center; }

/* Home: tabs that switch the phone */
.tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.tabs button { min-height: 46px; padding: 0 20px; border-radius: 999px; border: 2.5px solid var(--ink); background: var(--white); color: var(--ink); font: 700 16px var(--f-body); cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--ink); color: var(--white); }

/* Home: the RSVP form preview */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { padding: 8px 14px; border-radius: 999px; border: 2px solid var(--line); font-size: 15px; }
.chip.on { border-color: var(--teal); background: var(--teal); color: var(--white); }
.qrow { display: grid; gap: 8px; padding: 14px 0; border-bottom: 1.5px solid var(--line); }
.qrow:last-child { border-bottom: 0; }
.qrow label, .qrow .q { font-weight: 700; font-size: 16px; }
.qrow .val { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--line); color: var(--ink); }

/* Articles */
.article { padding: 30px 0 80px; }
.article h1 { font-size: clamp(32px, 4.4vw, 48px); }
.article h2 { font-size: clamp(24px, 2.8vw, 30px); margin-top: 22px; }
.article ul, .article ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.sample { position: relative; background: var(--white); border-radius: 6px; box-shadow: var(--paper-shadow); padding: 18px 20px 18px 52px; font-size: 18px; margin: 0; }
.sample::before { content: ""; position: absolute; left: 18px; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: var(--peach); }
.crumbs { font-size: 15px; color: var(--soft); }
.crumbs a { color: var(--soft); }
.cta-box { background: #e3f2f3; border-radius: 16px; padding: 30px; display: grid; gap: 14px; margin-top: 22px; }
.cta-box h2 { font-size: clamp(28px, 3.6vw, 38px); }
.guide-list { display: grid; gap: 22px; margin-top: 12px; }
a.tile { text-decoration: none; color: var(--ink); }
a.tile:hover h3 { color: var(--teal); }

details { background: var(--white); border-radius: 10px; padding: 16px 20px; box-shadow: 0 2px 0 rgba(16, 48, 58, .08); }
summary { font-weight: 700; cursor: pointer; }
details p { margin-top: 8px; color: var(--soft); }
.faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 24px; align-items: start; }

@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 36px; }
  .hero { padding: 16px 0 60px; }
  .band { padding: 60px 0; }
  .nav { gap: 16px; }
  .nav .wide { display: none; }
  .fan { height: 360px; max-width: 420px; margin: 0 auto; width: 100%; }
  .fan .card { width: 180px; }
  .fan .c2 { left: 120px; }
  .fan .c3 { left: 240px; }
  .magnets { font-size: 46px; }
}
@media (max-width: 440px) {
  .wrap { padding: 0 16px; }
  .btn { width: 100%; }
  .fan { height: 320px; }
  .fan .card { width: 150px; }
  .fan .c1 { top: 70px; }
  .fan .c2 { left: 104px; }
  .fan .c3 { left: 208px; top: 90px; }
}
@media (prefers-reduced-motion: no-preference) {
  .fan .card { transition: transform .25s ease; }
  .fan:hover .c1 { transform: translateX(-8px); }
  .fan:hover .c3 { transform: translateX(8px); }
}
[hidden] { display: none !important; }
.grid2 > .note:nth-child(2)::before { background: var(--teal); }

/* Party pages (pilot): create, host list, invitation */
.form-error { color: #9b2c1f; font-weight: 700; }
.link-btn { background: none; border: 0; padding: 0; color: var(--teal); font: 700 15px var(--f-body); text-decoration: underline; cursor: pointer; justify-self: start; }
.group-row { display: grid; gap: 12px; padding: 16px; border: 1.5px dashed var(--line); border-radius: 10px; }
.design-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.design-pick { display: grid; gap: 6px; justify-items: center; cursor: pointer; }
.design-pick input { position: absolute; opacity: 0; }
.design-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 23 / 20; border-radius: 8px; overflow: hidden; border: 3px solid transparent; background: var(--bg); }
.design-thumb svg { width: 100%; height: 100%; display: block; }
.design-thumb.plain { border-top: 12px solid var(--butter); background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); }
.design-pick input:checked + .design-thumb { border-color: var(--teal); }
.design-pick input:focus-visible + .design-thumb { outline: 3px solid var(--teal); outline-offset: 3px; }
.linkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.linkrow span { flex: 1 1 260px; min-width: 0; padding: 12px 14px; background: var(--bg); border-radius: 10px; font-size: 15px; overflow-wrap: anywhere; }
.linkrow .btn { min-height: 46px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat { background: var(--white); border-radius: 10px; padding: 18px; display: grid; gap: 4px; box-shadow: 0 2px 0 rgba(16, 48, 58, .08); }
.stat b { font: 700 32px/1 var(--f-head); }
.stat span { color: var(--soft); font-size: 15px; }
.group-row-host { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--white); border-radius: 8px; border-left: 6px solid var(--teal); }
.group-row-host:nth-child(3n+3) { border-left-color: var(--peach); }
.group-row-host:nth-child(3n+4) { border-left-color: #e8b923; }
.group-row-host .btn { min-height: 42px; padding: 0 16px; font-size: 15px; }
.choice { cursor: pointer; }
.choice input { position: absolute; opacity: 0; }
.choice input:checked + .chip { border-color: var(--accent); background: var(--accent); color: var(--white); }
.choice input:focus-visible + .chip { outline: 3px solid var(--teal); outline-offset: 2px; }
.choice .chip { display: inline-block; min-height: 44px; padding: 10px 16px; }
.stepper { display: inline-flex; align-items: center; gap: 14px; }
.stepper button { width: 48px; height: 48px; border-radius: 12px; border: 2.5px solid var(--ink); background: var(--white); font: 700 22px/1 var(--f-body); color: var(--ink); cursor: pointer; }
.stepper output { min-width: 2ch; text-align: center; font: 400 28px/1 var(--f-head); }
.field-input { min-height: 50px; padding: 0 14px; border-radius: 10px; border: 2.5px solid var(--ink); font: 17px var(--f-body); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--soft); }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; }

/* Invitation card (builder preview and guest page): a pattern frame
   around a clean panel of type. */
.inv { position: relative; display: grid; padding: 22px; border-radius: 10px; overflow: hidden; background: var(--white); box-shadow: var(--paper-shadow); text-align: center; }
.inv-body { display: grid; gap: 10px; justify-items: center; align-content: center; min-height: 300px; padding: 36px 24px 32px; border-radius: 6px; background: var(--white); }
.inv-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--soft); }
.inv-name { font: 400 clamp(32px, 6vw, 44px)/1.02 var(--f-head); color: var(--teal-dark); text-wrap: balance; }
.inv-when { display: grid; gap: 2px; margin-top: 4px; }
.inv-date { font-weight: 700; font-size: 19px; }
.inv-time, .inv-place { color: var(--soft); }
.inv-place { font-size: 17px; }
.inv-small { font-size: 14px; color: var(--soft); }
.inv-upload { padding: 0; }
.inv-upload .inv-body { min-height: 0; border-radius: 0; }
.inv-art img { display: block; width: 100%; height: auto; }
.inv-ghostart { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 16px; border: 2px dashed var(--line); border-radius: 8px; color: var(--soft); }

.ghost { color: #bfe0e3; }

.ghost { color: #7c979e; border-bottom: 2px dashed currentColor; font-weight: 400; }
.inv .ghost.inv-name { font-size: 26px; border: 0; text-decoration: underline dashed 2px; text-underline-offset: 6px; }

.party-info h4 { margin: 6px 0 0; font-size: 16px; }
.facts { margin: 0; display: grid; gap: 12px; }
.facts div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; }
.facts dt { font-weight: 700; color: var(--accent); }
.facts dd { margin: 0; }
@media (max-width: 440px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }
#card { display: grid; gap: 30px; }

/* Party builder */
.builder { padding: 28px 0 80px; }
.builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; }
.builder-preview { position: sticky; top: 16px; display: grid; gap: 16px; }
.pv-stage { display: grid; gap: 22px; }
.pv-stage [data-go] { cursor: pointer; }
.pv-stage .inv [data-go]:not(.inv):hover { outline: 2px dashed var(--line); outline-offset: 3px; border-radius: 4px; }
.preview-tabs { justify-self: center; }
.pv-hint { text-align: center; }
.builder-steps { gap: 18px; }
.step { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.step legend { padding: 0; margin-bottom: 4px; }
.step-h { font-size: clamp(28px, 4vw, 38px); }
.progress { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: var(--teal); border-radius: 99px; transition: width .25s ease; }
.step-nav { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.step-nav #next { margin-left: auto; }
.chip-btn { background: var(--white); color: var(--ink); font: 15px var(--f-body); cursor: pointer; min-height: 40px; }
.chip-btn:hover { border-color: var(--teal); }
.chip-btn.on { border-color: var(--teal); background: var(--teal); color: var(--white); }
#done .linkrow .btn { flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .pop { animation: pop .45s ease; }
  @keyframes pop { 0% { background: var(--butter); } 100% { background: transparent; } }
}
@media (max-width: 860px) {
  .builder { padding-top: 12px; }
  .builder-grid { grid-template-columns: 1fr; gap: 24px; }
  .builder-preview { position: static; }
  .pv-stage .inv { max-width: 340px; width: 100%; justify-self: center; }
}

/* Birthday card */
.bc-stage { display: grid; justify-items: center; width: 100%; }
.bc { width: 340px; max-width: 100%; aspect-ratio: 3 / 4; perspective: 1400px; cursor: pointer; }
.bc-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.bc.open .bc-flip { transform: rotateY(180deg); }
.bc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px; overflow: hidden; box-shadow: var(--paper-shadow); display: grid; }
.bc-inside { background: #fffdf5; }
.bc-front .inv.st { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.bc-inside { background: #fffdf5; }
.bc-front { padding: 22px; box-shadow: var(--paper-shadow); }
.bc-front .inv-body { min-height: 0; height: 100%; }
.bc-front .inv-name { font-size: 64px; }
.bc-inside { transform: rotateY(180deg); align-content: center; gap: 18px; padding: 30px 26px; text-align: center; background: #fffdf5; border: 10px solid var(--sky); }
.bc-msg { margin: 0; font-size: 21px; line-height: 1.45; overflow-wrap: anywhere; }
.bc-from { margin: 0; font: 400 24px/1.1 var(--f-head); color: var(--teal); }
@media (prefers-reduced-motion: reduce) { .bc-flip { transition: none; } }
.pv-done [data-go] { cursor: default; }
.pv-done .inv [data-go]:not(.inv):hover { outline: 0; }

/* Group cards */
.group-toggle { padding: 14px 16px; border-radius: 10px; background: var(--bg); color: var(--ink); }
.sigs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; text-align: left; }
.sig { background: var(--white); border-radius: 6px; padding: 16px 18px; box-shadow: var(--paper-shadow); display: grid; gap: 8px; align-content: start; border-top: 6px solid var(--sky); }
.sig:nth-child(3n+2) { border-top-color: var(--butter); transform: rotate(.8deg); }
.sig:nth-child(3n+3) { border-top-color: var(--peach); transform: rotate(-.8deg); }
.sig p { margin: 0; overflow-wrap: anywhere; }
.sig b { font: 400 18px/1.1 var(--f-head); color: var(--teal); }

/* App bar */
.app-top { background: var(--white); border-bottom: 2px solid var(--line); padding: 12px 0; }
.app-top .logo { font-size: 23px; }
.app-top .logo-mark { width: 36px; height: 36px; }
.nav a[aria-current="page"] { color: var(--teal); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
.mine-row { text-decoration: none; color: var(--ink); }
.mine-row .btn { pointer-events: none; }
@media (max-width: 440px) { .app-top .nav { gap: 14px; font-size: 15px; } .app-top .nav-cta { min-height: 40px; padding: 0 14px; } }

/* Stationery invitations: a 5x7 card whose type scales with its width */
.inv.st { display: block; padding: 0; aspect-ratio: 5 / 7; container-type: inline-size; border-radius: 3px; color: #2b2b2b; background: #fbf7ef;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 6px 14px rgba(16, 48, 58, .12), 0 22px 40px rgba(16, 48, 58, .10); }
.st-bg, .st-bg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.st-c { position: absolute; inset: 11cqw 9cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5cqw; }
.st-top, .st-bot { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; max-width: 100%; }
.st-script { font: 400 12cqw/1 "Great Vibes", cursive; color: #0f6f78; }
.st-name { font: 700 13.5cqw/1.02 "Playfair Display", Georgia, serif; color: #10303a; text-wrap: balance; overflow-wrap: anywhere; }
.st-name.len-m { font-size: 11cqw; }
.st-name.len-l { font-size: 8.6cqw; }
.st-rule { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4cqw 2.4cqw; max-width: 100%; font: 600 3.5cqw/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: #10303a; }
.st-rule > span { white-space: nowrap; }
.st-time { font: 600 3.5cqw/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: #10303a; }
.st-rule i { width: 1px; height: 7cqw; background: currentColor; opacity: .45; }
.st-place { font: 500 5.4cqw/1.3 "Cormorant Garamond", Georgia, serif; }
.st-small { font: 500 4cqw/1.35 "Cormorant Garamond", Georgia, serif; letter-spacing: .06em; color: #4a4a4a; }
.st .ghost { font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 4.6cqw; color: #7c979e; border-bottom: 2px dashed currentColor; }
.st .st-name.ghost { font-size: 6.4cqw; }
.st-foil .st-name { background: linear-gradient(115deg, #7a5612 0%, #b8862b 30%, #8f6514 50%, #c79a35 70%, #6f4d10 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-foil .st-script { background: linear-gradient(115deg, #a67a22 0%, #e3c36a 22%, #b8862b 40%, #f0d98a 55%, #a67a22 72%, #d4b45c 88%, #8c6418 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-foil .st-name.ghost { color: #7c979e; background: none; }
.st-foil .st-c { inset: 14cqw 11cqw; }
.st-balloons .st-c { inset: 66cqw 8cqw 4cqw; justify-content: flex-start; gap: 2.6cqw; }
.st-balloons .st-name.len-m { font-size: 9.2cqw; }
.st-balloons .st-name.len-l { font-size: 8cqw; }
.st-balloons .st-script { color: #d9603d; }
.st-bunting .st-c { inset: 42cqw 8cqw 9cqw; justify-content: flex-start; gap: 4cqw; }
.st-bunting .st-name { color: #e2734f; }
.st-rainbow .st-c { inset: 10cqw 7cqw 6cqw; justify-content: space-between; }
.st-rainbow .st-script { font-size: 9cqw; background: linear-gradient(115deg, #a67a22, #f3dc87 30%, #c4952a 55%, #e9cf78 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-classic .st-c { inset: 14cqw 11cqw; }
.st-bday { justify-content: center; gap: 3cqw; }
.st-balloons .st-bday { inset: 70cqw 8cqw 8cqw; justify-content: flex-start; }
.st-bunting .st-bday { inset: 42cqw 8cqw 9cqw; justify-content: flex-start; }
.st-rainbow .st-bday { justify-content: flex-start; }
.st-bday .st-name { font-size: 17cqw; }
.st-bday .st-name.len-m { font-size: 13cqw; }

/* Design picker thumbnails are tiny cards */
.design-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.design-thumb { aspect-ratio: 5 / 7; display: block; padding: 0; border-radius: 6px; background: none; }
.design-thumb .inv.st { box-shadow: 0 1px 3px rgba(16, 48, 58, .2); }
.design-thumb.plain { display: grid; aspect-ratio: 5 / 7; }

/* The envelope a guest's invitation arrives in */
.env-wrap { position: relative; max-width: 420px; width: 100%; margin: 0 auto; }
.env-wrap:not(.done) { aspect-ratio: 1 / .72; clip-path: inset(-200% -20% 0 -20%); }
.env-wrap:not(.done) .env-card { position: absolute; left: 6%; right: 6%; bottom: 0; transform: translateY(51%); }
.env { position: absolute; left: 0; right: 0; bottom: 0; height: 88%; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.env > span { position: absolute; left: 0; right: 0; }
.env-back { bottom: 0; height: 100%; background: #0b5960; border-radius: 4px; }
.env-flap { top: 0; height: 62%; z-index: 4; transform-origin: top; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(#0d6770, #0b5f67); }
.env-front { bottom: 0; height: 100%; z-index: 3; display: grid; place-content: end center; gap: 4px; padding-bottom: 9%; }
.env-front::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, #138590, #0f6f78); clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); }
.env-to { font: 400 clamp(30px, 8vw, 40px)/1 "Great Vibes", cursive; color: #fff; }
.env-tap { font: 700 14px var(--f-body); color: #cfe6e9; letter-spacing: .08em; text-transform: uppercase; }
.env-card { position: relative; z-index: 2; }
.env-wrap.done .env { display: none; }
.env-wrap.opening .env-flap { animation: flap 2s ease forwards; }
.env-wrap.opening .env-card { animation: rise 2s ease forwards; }
.env-wrap.opening .env-back, .env-wrap.opening .env-front { animation: drop 2s ease forwards; }
.env-wrap.opening .env-tap { opacity: 0; }
.env:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
@keyframes flap {
  0% { transform: perspective(900px) rotateX(0); z-index: 4; background: linear-gradient(#0d6770, #0b5f67); }
  12% { background: linear-gradient(#0d6770, #0b5f67); }
  13% { z-index: 1; background: radial-gradient(circle at 7px 7px, #ff8f6b 2.6px, transparent 3px) 0 0 / 22px 22px, radial-gradient(circle at 18px 18px, #e8b923 2.6px, transparent 3px) 0 0 / 22px 22px, #ffe7dc; }
  25%, 70% { transform: perspective(900px) rotateX(180deg); z-index: 1; opacity: 1; background: radial-gradient(circle at 7px 7px, #ff8f6b 2.6px, transparent 3px) 0 0 / 22px 22px, radial-gradient(circle at 18px 18px, #e8b923 2.6px, transparent 3px) 0 0 / 22px 22px, #ffe7dc; }
  100% { transform: perspective(900px) rotateX(180deg); z-index: 1; opacity: 0; }
}
@keyframes rise { 0%, 22% { transform: translateY(51%); } 60% { transform: translateY(17%); } 100% { transform: translateY(41.5%); } }
@keyframes drop { 0%, 60% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(70%); opacity: 0; } }

/* Home: "say it, draw it" */
.draw { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.draw-demo { display: grid; gap: 14px; }
.draw-prompt { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; border: 2.5px solid var(--ink); background: var(--bg); font-size: 17px; }
.draw-prompt:nth-child(2) { margin-left: 28px; }
.draw-prompt b { flex: none; padding: 8px 14px; border-radius: 10px; background: var(--teal); color: var(--white); font-size: 15px; }
@media (max-width: 860px) { .draw { grid-template-columns: 1fr; gap: 24px; } .draw-prompt:nth-child(2) { margin-left: 0; } }

/* Drawn artwork on classic paper */
.st-img { position: absolute; left: 11cqw; right: 11cqw; top: 11cqw; height: 62cqw; width: 78cqw; object-fit: cover; border-radius: 2px; }
.st-img-ghost { display: grid; place-items: center; border: 2px dashed #b9cfd3; color: #7c979e; font: 400 4.6cqw "Atkinson Hyperlegible", sans-serif; }
.st-drawn .st-c { inset: 76cqw 10cqw 9cqw; justify-content: flex-start; gap: 3cqw; }
.st-drawn .st-script { font-size: 8.5cqw; }
.st-drawn .st-name { font-size: 10cqw; }
.st-drawn .st-name.len-m { font-size: 8.4cqw; }
.st-drawn .st-name.len-l { font-size: 7cqw; }
.st-drawn .st-top { gap: .6cqw; }
.st-drawn .st-bot { gap: 1cqw; }
.st-drawn .st-place { font-size: 4.6cqw; }

/* Builder: describe-it drawing */
.draw-box { display: grid; gap: 10px; }
.draw-row { display: flex; gap: 10px; flex-wrap: wrap; }
.draw-row textarea { flex: 1 1 240px; }
.drawings { display: flex; gap: 10px; flex-wrap: wrap; }
.drawings button { width: 68px; height: 90px; padding: 0; border: 3px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--bg); }
.drawings button[aria-pressed="true"] { border-color: var(--teal); }
.drawings img { width: 100%; height: 100%; object-fit: cover; display: block; }
.design-thumb.describe { display: grid; place-items: center; aspect-ratio: 5 / 7; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line); font: 400 15px/1.2 var(--f-head); color: var(--teal); text-align: center; padding: 8px; }
.group-row-host .msg-form { flex-basis: 100%; }

/* Print for backpacks: two invitations per letter sheet */
.print-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto 60px; padding: 0 16px; }
.print-card { display: grid; gap: 14px; align-content: start; background: var(--white); padding: 14px; border-radius: 6px; box-shadow: var(--paper-shadow); }
.print-card .inv { box-shadow: none; }
.print-qr { display: flex; gap: 14px; align-items: center; }
.print-qr svg { width: 96px; height: 96px; flex: none; }
.print-qr div { display: grid; gap: 2px; font-size: 15px; }
.print-qr b { font: 400 20px/1.1 var(--f-head); color: var(--teal); }
.print-url { font-size: 11px; color: var(--soft); overflow-wrap: anywhere; }
@media (max-width: 640px) { .print-sheet { grid-template-columns: 1fr; } }
@media print {
  @page { size: letter landscape; margin: .3in; }
  .top, .foot, .no-print { display: none !important; }
  body { background: #fff; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-sheet { grid-template-columns: 1fr 1fr; gap: .6in; max-width: none; padding: 0; margin: 0;
    background: repeating-linear-gradient(to bottom, #bbb 0 6px, transparent 6px 12px) center / 1px 100% no-repeat; }
  .print-card { box-shadow: none; padding: 0; border-radius: 0; width: 4.3in; justify-self: center; }
}
}
.profile-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 10px; background: var(--bg); }
.circle-row { border-color: var(--teal); border-style: solid; }

/* Keep the builder inside its card on small phones: grid and fieldset
   children otherwise grow to fit their widest content. */
.builder-steps > *, .builder-grid > *, .step > * { min-width: 0; }
.step input[type=file] { max-width: 100%; }
.design-thumb .inv { width: 100%; }
#upload-box > *, #draw-box > *, .field { min-width: 0; }
.field input[type=file] { width: 100%; min-width: 0; font-size: 15px; }

/* Home: hero with an invitation and its guest list */
.hero { padding: 56px 0 72px; }
.hero h1 { font-size: clamp(32px, 3.9vw, 48px); line-height: 1.14; }
.hero .lede { max-width: 38ch; font-size: 20px; }
.hero-art { position: relative; padding-bottom: 36px; }
.hero-inv { width: 56%; }
.gl { position: absolute; z-index: 2; right: 0; bottom: 0; width: 50%; background: var(--white); border-radius: 16px; padding: 16px 18px 14px; display: grid;
  box-shadow: 0 2px 4px rgba(16, 48, 58, .08), 0 18px 40px rgba(16, 48, 58, .16); }
.gl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 2px 10px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.gl-h b { font: 700 19px/1.2 var(--f-head); }
.gl-h span { font-size: 13px; font-weight: 700; color: var(--teal); white-space: nowrap; }
.gl-row { display: grid; grid-template-columns: 24px auto 1fr; gap: 10px; align-items: center; min-height: 44px; font-size: 15px; border-bottom: 1px solid var(--line); }
.gl-row b { white-space: nowrap; }
.gl-row span:last-child { color: var(--soft); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.gl-row.wait .gl-tick { background: transparent; box-shadow: inset 0 0 0 2px #b9cfd3; }
.gl-row.wait span:last-child { color: #b4492a; }
.gl-total { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 10px; font-size: 14px; color: var(--soft); }
.gl-total b { color: var(--ink); font-size: 18px; }
@media (max-width: 860px) {
  .hero { padding: 32px 0 56px; }
  .hero-art { padding-bottom: 0; display: grid; justify-items: center; }
  .hero-inv { width: min(62%, 300px); }
  .gl { position: relative; width: 100%; max-width: 440px; margin-top: -64px; }
}

/* Home: benefits, steps, three ways */
.benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.benefit { display: grid; gap: 8px; align-content: start; }
.b-tick { width: 36px; height: 36px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; font-weight: 700; }
.soon { display: inline-block; font-size: 13px; letter-spacing: .04em; color: var(--teal); background: #e3f2f3; border-radius: 999px; padding: 2px 10px; margin-left: 4px; }
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.steps li { counter-increment: step; display: grid; gap: 8px; align-content: start; }
.steps li::before { content: counter(step); font: 700 44px/1 var(--f-head); color: var(--teal); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.way { display: grid; gap: 10px; align-content: start; }
.way-art { height: 230px; border-radius: 16px; background: var(--bg); display: grid; place-items: center; overflow: hidden; padding: 18px; }
.way-cards { grid-template-columns: 1fr 1fr; gap: 14px; place-items: center; }
.way-cards .inv { width: 100%; max-width: 130px; }
.way-pip { align-content: center; gap: 10px; place-items: stretch; }
.pip-prompt { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--white); border: 1.5px solid var(--ink); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.pip-prompt b { flex: none; background: var(--teal); color: var(--white); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.way-upload span { border: 2px dashed #b9cfd3; border-radius: 10px; padding: 40px 26px; color: var(--soft); font-weight: 700; }
@media (max-width: 860px) {
  .benefits { grid-template-columns: 1fr 1fr; }
  .steps, .ways { grid-template-columns: 1fr; }
}
@media (max-width: 440px) { .benefits { grid-template-columns: 1fr; } }

/* Builder step 1: three ways to make it look */
.look-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.look-mode { display: grid; gap: 4px; align-content: start; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: 15px/1.35 var(--f-body); cursor: pointer; }
.look-mode b { font: 400 18px/1.2 var(--f-head); }
.look-mode span { color: var(--soft); font-size: 14px; }
.look-mode[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1.5px var(--teal); background: #f0f8f8; }
.look-mode:hover { border-color: var(--teal); }
@media (max-width: 560px) { .look-modes { grid-template-columns: 1fr; } }
.draw-row textarea { min-height: 72px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--ink); background: var(--white); color: var(--ink); font: 16px/1.4 var(--f-body); resize: vertical; }

/* Builder: birthday or school event, RSVP questions */
.for-event { display: none; }
[data-plan="event"] .for-event { display: revert; }
[data-plan="event"] .for-birthday { display: none !important; }
.q-item { display: flex; gap: 12px; align-items: center; }
.q-on input { width: 22px; height: 22px; accent-color: var(--teal); }
.q-label { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--white); color: var(--ink); font: 16px var(--f-body); }
.q-item:has(input[type=checkbox]:not(:checked)) .q-label { color: #8aa3aa; text-decoration: line-through; }
.q-custom { display: grid; gap: 8px; padding: 14px; border: 1.5px dashed var(--line); border-radius: 12px; }
.q-custom .q-label { width: 100%; }
.q-custom select, .q-custom input[data-c="options"] { min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); font: 15px var(--f-body); color: var(--ink); }
.q-custom input[data-c="options"] { flex: 1 1 200px; }

/* One bar everywhere: logo, Create an invite, and a menu */
.top .wrap { flex-wrap: nowrap; }
.bar-right { display: flex; align-items: center; gap: 10px; }
.top .nav-cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--teal); color: var(--white); font-weight: 700; font-size: 16px; text-decoration: none; white-space: nowrap; }
.top .nav-cta:hover { background: var(--teal-dark); }
.menu summary { list-style: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); display: grid; place-items: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; } .burger::after { top: 6px; }
.menu-panel { position: fixed; inset: 0; z-index: 50; background: var(--white); overflow-y: auto; padding: 16px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); }
.menu-top { display: flex; justify-content: space-between; align-items: center; max-width: 720px; margin: 0 auto 12px; }
.menu-close { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--white); font: 400 28px/1 var(--f-body); color: var(--ink); cursor: pointer; }
.menu-links { max-width: 720px; margin: 0 auto; display: grid; gap: 22px; }
.menu-group { display: grid; }
.menu-label { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); padding-bottom: 4px; }
.menu-links a { display: grid; gap: 2px; padding: 13px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.menu-links a span { font: 700 17px/1.3 var(--f-body); }
.menu-links a small { font-size: 14px; color: var(--soft); }
.menu-links a.menu-cta { display: flex; padding: 0 24px; border-bottom: 0; color: var(--white); margin-bottom: 4px; }
.menu-links { gap: 18px; }
.menu-links a:hover span, .menu-links a[aria-current] span { color: var(--teal); }
@media (min-width: 861px) {
  .menu { position: relative; }
  .menu-panel { position: absolute; inset: auto; right: 0; top: 56px; width: 380px; max-height: calc(100vh - 90px); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--paper-shadow); padding: 18px 22px 22px; }
  .menu-top { display: none; }
  .menu-links a span { font-size: 16px; }
  .menu-links a { padding: 11px 2px; }
}
@media (max-width: 440px) { .top .logo span { font-size: 22px; } .top .logo-mark { width: 36px; height: 36px; } .top .nav-cta { padding: 0 16px; font-size: 15px; } }
@media (max-width: 440px) {
  .top .logo { gap: 6px; min-width: 0; }
  .top .logo span { font-size: 18px; }
  .top .logo-mark { width: 30px; height: 30px; }
  .bar-right { gap: 8px; }
  .top .nav-cta { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .menu summary, .menu-close { width: 42px; height: 42px; }
}

/* An invitation that turns over: front is the card, back is the party details */
.flip { perspective: 1600px; width: 100%; }
.flip-in { display: grid; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .7, .2, 1); }
.flip-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; min-width: 0; }
.flip-back { transform: rotateY(180deg); background: #fffdf7; border-radius: 3px; padding: 26px 24px; display: grid; align-content: start;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 6px 14px rgba(16, 48, 58, .12), 0 22px 40px rgba(16, 48, 58, .10); }
.flip-back .note { border: 0; box-shadow: none; padding: 0; background: none; }
.flip-back .party-info h3 { font-size: 24px; }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.flip.flipped .flip-front, .flip:not(.flipped) .flip-back { pointer-events: none; }
.flip-btn { justify-self: center; }
@media (prefers-reduced-motion: reduce) { .flip-in { transition: none; } }
.pv-stage .flip { max-width: 340px; justify-self: center; }

/* Birthday greeting cards: the greeting is in the artwork, the name below it */
.gc { position: relative; display: block; width: 100%; height: 100%; container-type: inline-size; }
.gc svg { display: block; width: 100%; height: 100%; }
.bc-front.gc { padding: 0; }
.gc-name { position: absolute; left: 6%; right: 6%; text-align: center; font: 700 12cqw/1.05 "Corben", Georgia, serif; overflow-wrap: anywhere; }
.gc-name.len-m { font-size: 9.5cqw; } .gc-name.len-l { font-size: 7.5cqw; }
.gc-cake .gc-name { top: 31%; color: #e2734f; }
.gc-confetti .gc-name { top: 72%; color: #0f6f78; }
.gc-wish .gc-name { top: 72%; color: #fff; font-family: "Great Vibes", cursive; font-weight: 400; font-size: 15cqw; }
.gc-hats .gc-name { top: 39%; color: #e2734f; }
.gc-sprinkles .gc-name { top: 57%; color: #0f6f78; }
.gc-warm .gc-name { top: 40%; color: #ffe07a; }
.gc-holiday .gc-name { top: 64%; color: #e2734f; }
.gc-thanks .gc-name { top: 46%; color: #e2734f; }
.gc .ghost { color: inherit; opacity: .55; font-size: 8cqw; }
.gc-grid .design-thumb { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; box-shadow: 0 1px 3px rgba(16, 48, 58, .2); }
.gift-add { display: grid; gap: 8px; padding: 16px; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--bg); opacity: .85; }
.gift-add-h { display: flex; gap: 10px; align-items: center; }
.gift-add .chip { color: var(--soft); }
@media (min-width: 861px) { .card-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.menu:not([open]) .menu-panel { display: none; }
.mine-h { font-size: 24px !important; line-height: 1.25; }
details.menu { background: none; padding: 0; box-shadow: none; border-radius: 0; }

/* Admin */
.tablewrap { overflow-x: auto; }
.admin-t { border-collapse: collapse; width: 100%; font-size: 15px; }
.admin-t th, .admin-t td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.admin-t td:last-child { width: 40%; }
.admin-t .bar { display: block; height: 10px; border-radius: 99px; background: var(--teal); min-width: 2px; }
.plus-box { border-color: var(--teal); }
.danger { justify-items: start; }
@media print {
  body.print-list .top, body.print-list .foot, body.print-list .plus-box, body.print-list .danger, body.print-list .linkrow, body.print-list .msg-form { display: none !important; }
  body.print-list .note, body.print-list .stat, body.print-list .group-row-host, body.print-list .rsvp-row { box-shadow: none; break-inside: avoid; }
}
.map-link { font-weight: 700; color: var(--teal); text-decoration: none; } .map-link:hover { text-decoration: underline; }
.skip-rsvp { justify-self: center; margin-top: 4px; }

/* Builder: the artwork gallery it opens on */
.art-gallery { padding: 28px 0 72px; }
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 22px; }
.art-tile { display: grid; gap: 10px; padding: 0; border: 0; background: none; text-align: center; cursor: pointer; font: inherit; color: var(--ink); }
.art-card { display: block; border-radius: 4px; transition: transform .15s ease; }
.art-tile:hover .art-card, .art-tile:focus-visible .art-card { transform: translateY(-3px); }
.art-label { font-weight: 700; font-size: 16px; }
.art-special .art-card { aspect-ratio: 5 / 7; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 22px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--white); box-shadow: var(--paper-shadow); }
.art-special .art-card b { font: 700 22px/1.2 var(--f-head); }
.art-special .art-card span:not(.art-icon) { color: var(--soft); font-size: 15px; }
.art-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--white); font-size: 26px; }
.art-pip .art-card { border-color: var(--teal); background: linear-gradient(180deg, #f0f8f8, var(--white)); }
.art-tile:disabled { cursor: default; opacity: .7; }
.art-tile:disabled .art-card { transform: none; }
@media (max-width: 520px) { .art-grid { grid-template-columns: 1fr 1fr; gap: 14px; } .art-special .art-card { padding: 12px; } .art-special .art-card b { font-size: 16px; } .art-special .art-card span:not(.art-icon) { font-size: 13px; } .art-icon { width: 42px; height: 42px; font-size: 20px; } .art-label { font-size: 14px; } }
.art-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); align-items: start; }
.art-tile, .art-card { min-width: 0; }
.art-card .inv { width: 100%; }
@media (max-width: 520px) { .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seen { display: block; font-size: 14px; color: var(--teal); font-weight: 700; margin-top: 2px; }
.host-actions .btn { min-height: 46px; }

/* Home: the invitation resting on its envelope */
.hero-inv { position: relative; }
.hero-env { position: absolute; left: -8%; right: -10%; bottom: -7%; height: 46%; border-radius: 6px; background: linear-gradient(#127c86, #0f6f78); box-shadow: 0 18px 40px rgba(16, 48, 58, .18); }
.hero-env::before { content: ""; position: absolute; inset: 0 0 auto; height: 70%; clip-path: polygon(0 0, 100% 0, 50% 100%); background: radial-gradient(circle at 7px 7px, #ff8f6b 2.6px, transparent 3px) 0 0 / 22px 22px, radial-gradient(circle at 18px 18px, #e8b923 2.6px, transparent 3px) 0 0 / 22px 22px, #ffe7dc; opacity: .95; }
.hero-inv .inv { position: relative; z-index: 1; }

/* Free invitations: a bar under the card with our logo (never on the art). */
.carded { display: grid; width: 100%; }
.pv-stage .carded { max-width: 340px; justify-self: center; }
.brand-bar { display: flex; align-items: center; gap: 8px; margin: 0 8px; padding: 10px 14px 11px; background: var(--white); border-top: 3px solid var(--teal); border-radius: 0 0 12px 12px; box-shadow: 0 8px 18px rgba(16, 48, 58, .1); color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.2; }
.brand-bar b { font: 400 17px/1 var(--f-logo); }
.brand-mark { width: 24px; height: 24px; color: var(--teal); flex: none; }
.brand-bar > span:first-of-type { white-space: nowrap; }
.brand-cta { margin-left: auto; color: var(--teal); font-weight: 700; font-size: 13px; white-space: nowrap; }

/* Artwork colors: text on and under an uploaded invitation, the RSVP. */
.inv-upload .inv-name { color: var(--accent); }
.party-info h3 { color: var(--accent); }
#rsvp .btn-primary { background: var(--accent); }
.ticks li.emo::before { content: none; }
.emo-i { position: absolute; left: 0; top: -1px; font-size: 19px; line-height: 1.3; }

/* RSVP: two big, clear answers. */
.rsvp-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsvp-yn .choice .chip { display: grid; place-items: center; gap: 4px; min-height: 92px; padding: 12px 8px; border-radius: 16px; font-weight: 700; font-size: 16px; text-align: center; background: var(--white); }
.rsvp-yn .yn-i { font-size: 28px; line-height: 1; }
.rsvp-yn .choice input:checked + .chip { color: var(--white); }

/* Party Plus choices in the builder. */
.plus-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; }
.plus-opt input { width: 22px; height: 22px; margin: 0; accent-color: var(--teal); }
.plus-opt-t { display: grid; gap: 3px; justify-items: start; }
.plus-tag { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7a5612; background: #fbefd2; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.plus-pitch { display: grid; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #fbf6ea; }
.plus-pitch .ticks { gap: 8px; font-size: 15px; }
.one-link { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; background: var(--white); border: 2px solid var(--teal); }
.q-four { font-size: 16px; }
.plus-off { opacity: .55; pointer-events: none; }

/* Homepage comparison table: scrolls sideways on small phones. */
.compare-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--white); }
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 14px; color: var(--soft); }
.compare tbody th { font-weight: 700; width: 26%; }
.compare .us { background: #eef7f7; color: var(--ink); font-weight: 700; }
.compare thead .us { color: var(--teal); }
@media (max-width: 600px) {
  .compare-wrap { overflow: visible; border: 0; background: none; }
  .compare { min-width: 0; }
  .compare thead { display: none; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare tr { background: var(--white); border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; overflow: hidden; }
  .compare tbody th { width: auto; padding: 12px 16px 8px; border: 0; font-size: 16px; }
  .compare td { display: grid; grid-template-columns: 124px 1fr; gap: 10px; padding: 8px 16px; border: 0; border-top: 1px solid var(--line); }
  .compare td::before { content: attr(data-l); font-weight: 700; color: var(--soft); font-size: 13px; }
  .compare td.us::before { color: var(--teal); }
  .compare tbody tr:last-child td { border-top: 1px solid var(--line); }
}

/* Party details: one type family, smaller, labels in small caps. */
.party-info { gap: 14px; font-size: 15px; line-height: 1.45; }
.party-info h3 { font: 400 20px/1.2 var(--f-head); }
.flip-back .party-info h3 { font-size: 20px; }
.party-info .facts { gap: 10px; }
.party-info .facts div { grid-template-columns: 1fr; gap: 1px; }
.party-info .facts dt, .party-info h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.party-info .facts dd { font-size: 15px; }
.party-info .ticks { gap: 6px; font-size: 15px; }
.party-info .ticks li { padding-left: 26px; }
.party-info .emo-i { font-size: 16px; top: 0; }
.party-info .small { font-size: 13px; }

/* On phones the builder preview is smaller, so the steps start sooner. */
@media (max-width: 860px) {
  .builder-preview { gap: 10px; }
  .pv-stage { gap: 12px; }
  .pv-stage .inv, .pv-stage .flip, .pv-stage .carded { max-width: 250px; }
  .preview-tabs button { min-height: 38px; padding: 6px 14px; font-size: 14px; }
  .pv-hint { font-size: 13px; }
  .pv-stage .brand-bar { padding: 8px 10px; gap: 6px; font-size: 12px; }
  .pv-stage .brand-bar b { font-size: 14px; }
  .pv-stage .brand-mark { width: 18px; height: 18px; }
  .pv-stage .brand-cta { font-size: 12px; }
  .pv-stage .inv-ghostart { margin: 10px; }
}

/* The bar's explainer in the builder. */
.brand-why { display: grid; gap: 8px; max-width: 420px; justify-self: center; padding: 14px 16px; border-radius: 14px; background: #fbf6ea; font-size: 15px; }
.brand-why .linkrow { gap: 8px; }
button.brand-bar { border: 0; border-top: 3px solid var(--teal); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
@media (max-width: 860px) { .pv-stage button.brand-bar { font-size: 12px; } }

/* A turned card is as tall as its back: no empty space under short details. */
.flip.flipped .flip-front { position: absolute; top: 0; left: 0; right: 0; }
.flip-in { position: relative; }

/* A card front from the owner's artwork: picture, greeting and name on a band. */
.gc-art { position: relative; overflow: hidden; background: #fff; }
.gc-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-art .gc-band { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 2px; padding: 12px 14px 14px; text-align: center; background: rgba(255, 255, 255, .93); }
.gc-art .gc-line { font: 400 10cqw/1 "Great Vibes", cursive; color: var(--accent); }
.gc-art .gc-name { position: static; transform: none; inset: auto; width: auto; font: 700 8cqw/1.1 "Playfair Display", Georgia, serif; color: #10303a; }
.gc-art .gc-name:empty { display: none; }
.design-thumb img.art-thumb { width: 100%; height: 100%; object-fit: cover; }
.art-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.art-card.art-up { aspect-ratio: 5 / 7; overflow: hidden; box-shadow: var(--paper-shadow); }

/* Admin: artwork */
.art-edit { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: start; }
.art-edit .pv-stage .inv, .art-edit .pv-stage .bc { max-width: 300px; width: 100%; }
.art-edit[data-kind="card"] .for-invite, .art-edit[data-kind="invite"] .for-card { display: none; }
.art-edit input[type=color] { width: 72px; height: 44px; padding: 2px; }
.art-admin-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.art-admin-row { display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.art-admin-row img { width: 72px; height: 96px; object-fit: cover; border-radius: 6px; }
.art-admin-row.off { opacity: .6; }
@media (max-width: 700px) { .art-edit { grid-template-columns: 1fr; } }

/* Gentle motion, once: when an invitation opens (.mv), or a "Yes" RSVP.
   Phones set to reduce motion see everything still. */
@media (prefers-reduced-motion: no-preference) {
  .inv.mv .mv-sway { transform-box: view-box; transform-origin: 132px 214px; animation: mv-sway 3s ease-in-out .3s 2; }
  .inv.mv .mv-flags path { transform-box: fill-box; transform-origin: 50% 0; animation: mv-flutter 1.5s ease-in-out .2s 3; }
  .inv.mv .mv-flags path:nth-child(even) { animation-delay: .55s; }
  .inv.mv .mv-arc { transform-box: fill-box; transform-origin: 50% 100%; animation: mv-grow 1.4s cubic-bezier(.2, .7, .2, 1) both; }
  .inv.mv .mv-cloud { transform-box: fill-box; animation: mv-drift 4s ease-in-out .3s; }
  .inv.mv .mv-twinkle > * { animation: mv-twinkle 1.4s ease-in-out .3s 2; }
  .inv.mv .mv-twinkle > :nth-child(3n) { animation-delay: .6s; }
  .inv.mv .mv-twinkle > :nth-child(3n+1) { animation-delay: .95s; }
  .inv.mv.st-foil::after, .inv.mv.st-rainbow::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 248, 225, .6) 50%, transparent 65%); animation: mv-shine 1.8s ease-out .5s both; }
  .mv-confetti { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
  .mv-confetti i { position: absolute; top: -4%; width: 7px; height: 11px; border-radius: 2px; opacity: .9; animation: mv-fall var(--t, 2.8s) ease-in var(--d, 0s) both; }
  .mv-burst { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
  .mv-burst i { position: absolute; left: -4px; top: -6px; width: 8px; height: 12px; border-radius: 2px; animation: mv-pop 1.1s cubic-bezier(.15, .7, .3, 1) both; }
}
@keyframes mv-sway { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(2.2deg); } 70% { transform: rotate(-1.8deg); } }
@keyframes mv-flutter { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes mv-grow { from { transform: scaleY(.15); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mv-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(7px); } }
@keyframes mv-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes mv-shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes mv-fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .9; } 100% { top: 104%; transform: translate(var(--sx, 10px), 0) rotate(var(--r, 300deg)); opacity: .2; } }
@keyframes mv-pop { 0% { transform: translate(0, 0) scale(.6) rotate(0); opacity: 1; } 70% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 40px)) scale(1) rotate(var(--r)); opacity: 0; } }

/* Gold lettering is painted inside its own box, so give swashes and
   descenders (the J of "Join", the y of "Birthday") room to show. */
.st-foil .st-name, .st-foil .st-script, .st-rainbow .st-script { padding: .06em .3em .2em; margin: -.06em -.3em -.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* The bar sits right under the card, the same width, like part of it. */
.brand-bar { margin: 0; border-radius: 0 0 6px 6px; box-shadow: 0 6px 14px rgba(16, 48, 58, .1); }
.carded { justify-items: stretch; }
/* A card that hasn't been turned over is as tall as its front, so nothing
   (like a tall party-details back) leaves a gap above the bar. */
.flip:not(.flipped) .flip-back { position: absolute; top: 0; left: 0; right: 0; }

/* Address suggestions from Google under the address box. */
.place-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px; display: grid; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 28px rgba(16, 48, 58, .14); overflow: hidden; }
.place-list button { display: grid; gap: 2px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.place-list button:last-child { border-bottom: 0; }
.place-list button:hover, .place-list button:focus-visible { background: #eef7f7; }
.place-list span { font-size: 13px; color: var(--soft); }

/* Drop-down menus: our own arrow, set in from the edge. */
.field select, select.field-input { -webkit-appearance: none; appearance: none; padding-right: 48px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2310303a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 20px center; }

/* The RSVP as guests will see it, in the builder. */
.rsvp-pv { max-width: 340px; width: 100%; justify-self: center; gap: 4px; pointer-events: none; }
.rsvp-pv h3 { font-size: 24px; }
.rsvp-pv .qrow { padding: 10px 0; }
.rsvp-pv .pv-fake { display: block; min-height: 40px; padding: 9px 12px; color: var(--soft); font-size: 14px; }
.rsvp-pv .rsvp-yn .chip { min-height: 70px; font-size: 14px; }
.rsvp-pv .chip.yes, .rsvp-pv .chip.on { background: var(--accent); border-color: var(--accent); color: var(--white); }
.rsvp-pv .stepper button { width: 36px; height: 36px; }
@media (max-width: 860px) { .rsvp-pv { max-width: 300px; } }

/* Homepage: the group chat every party parent knows, and the answers. */
.chat-band { background: linear-gradient(180deg, #eef7f7, #f7fbfb); }
.ba { display: grid; grid-template-columns: minmax(0, 360px) auto minmax(0, 1fr); gap: 28px; align-items: center; }
.ba-phone { background: var(--white); border-radius: 30px; padding: 14px 14px 18px; box-shadow: 0 24px 50px rgba(16, 48, 58, .14); border: 8px solid #10303a; max-width: 360px; }
.ba-top { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 6px 6px 12px; border-bottom: 1px solid var(--line); }
.ba-top b { font-size: 15px; } .ba-top span:last-child { grid-column: 2; font-size: 12px; color: var(--soft); }
.ba-dot { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ff8f6b, #e8b923); }
.ba-msgs { display: grid; gap: 8px; padding-top: 12px; }
.ba-msgs p { margin: 0; max-width: 84%; padding: 8px 12px; border-radius: 18px; font-size: 14px; line-height: 1.35; }
.ba-in { background: #eef1f2; border-bottom-left-radius: 6px; justify-self: start; }
.ba-in b { display: block; font-size: 11px; color: var(--soft); margin-bottom: 1px; }
.ba-out { background: #0f6f78; color: var(--white); border-bottom-right-radius: 6px; justify-self: end; }
.ba-typing { background: #eef1f2; justify-self: start; display: flex; gap: 4px; padding: 10px 12px !important; }
.ba-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa9ad; }
.ba-arrow { font-size: 34px; color: var(--teal); }
.ba-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ba-answers li { display: grid; grid-template-columns: minmax(0, 200px) 1fr; gap: 14px; align-items: baseline; padding: 14px 18px; background: var(--white); border-radius: 14px; box-shadow: 0 6px 16px rgba(16, 48, 58, .06); }
.ba-q { font-weight: 700; color: var(--soft); }
.ba-a::before { content: "✓"; color: var(--teal); font-weight: 700; margin-right: 8px; }
.ba-done { border: 2px solid var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  .ba-typing i { animation: ba-type 1.2s ease-in-out infinite; }
  .ba-typing i:nth-child(2) { animation-delay: .15s; } .ba-typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes ba-type { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
@media (max-width: 900px) {
  .ba { grid-template-columns: 1fr; justify-items: center; }
  .ba-arrow { transform: rotate(90deg); }
  .ba-answers { width: 100%; }
  .ba-answers li { grid-template-columns: 1fr; gap: 4px; }
}

/* Admin: setup status */
.setup-list { display: grid; gap: 8px; }
.setup-row { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.setup-row p { margin: 2px 0 0; }
.s-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; background: #9aa9ad; }
.s-ok .s-dot { background: #2e9e6a; } .s-problem .s-dot, .s-missing .s-dot { background: #d9603d; } .s-optional .s-dot { background: #e8b923; }
.s-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); margin-left: 6px; }
.s-ok .s-tag { color: #2e7d57; } .s-problem .s-tag, .s-missing .s-tag { color: #b4492a; }
.setup-warn { margin: 0; padding: 10px 12px; border-radius: 10px; background: #fff3e8; font-size: 14px; }

/* Builder: standard questions with on/off ticks; wording editable with Party Plus. */
.q-std { display: grid; gap: 8px; }
.q-std .q-item { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; }
.q-std .q-item input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--teal); }
.q-std .q-label[readonly] { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); cursor: pointer; pointer-events: none; }
.q-std .q-item:has(input[type=checkbox]:not(:checked)) .q-label { color: var(--soft); text-decoration: line-through; }
.q-limit { display: grid; gap: 8px; }
.q-limit .q { font-weight: 700; }

/* The RSVP preview now works when tapped. */
.rsvp-pv { pointer-events: auto; }
.rsvp-pv .rsvp-yn .chip { display: grid; place-items: center; gap: 4px; min-height: 70px; padding: 10px 8px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 14px; background: var(--white); cursor: pointer; }
.rsvp-pv button.chip { font: inherit; font-size: 14px; cursor: pointer; background: var(--white); }
.rsvp-pv .field-input { min-height: 40px; font-size: 14px; }
.rsvp-pv .pv-no { margin: 6px 0; padding: 12px 14px; border-radius: 12px; background: #fff5f0; font-size: 14px; }
.rsvp-pv .stepper button:disabled { opacity: .35; }
.spots { display: block; margin-top: 6px; }

/* Last step: how the link looks in a text and an email. */
.send-pv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.sp-col { display: grid; gap: 6px; align-content: start; }
.sp-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.sp-phone { display: grid; gap: 6px; padding: 12px; border-radius: 18px; background: #f2f4f5; }
.sp-bubble { margin: 0; justify-self: end; max-width: 90%; padding: 8px 12px; border-radius: 16px 16px 4px 16px; background: #0b84ff; color: #fff; font-size: 14px; }
.sp-card { justify-self: end; width: 86%; display: grid; border-radius: 14px; overflow: hidden; background: #e6e9eb; font-size: 13px; }
.sp-card b, .sp-card span { padding: 0 10px; }
.sp-card b { padding-top: 8px; font-size: 13px; }
.sp-url { padding-bottom: 8px !important; color: var(--soft); font-size: 12px; }
.sp-img { height: 120px; overflow: hidden; background: #fff; }
.sp-img .inv { width: 100%; transform-origin: top center; }
.sp-mail { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); font-size: 14px; }
.sp-subj { font-weight: 700; }
.sp-mail p { margin: 0; color: var(--soft); }
.sp-btn { justify-self: start; padding: 8px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; }
@media (max-width: 560px) { .send-pv { grid-template-columns: 1fr; } }
.rsvp-pv .rsvp-yn .chip.yes { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Feedback page: the grown-up table */
.fb-hero .wrap { display: grid; grid-template-columns: 1fr; }
.fb-hero .lede { max-width: 46ch; }
.fb-form .q { font-weight: 700; font-size: 16px; }
.fb-form textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); font: 16px var(--f-body); color: var(--ink); background: var(--white); resize: vertical; }
.fb-row { border-top: 1px solid var(--line); padding-top: 10px; }
.fb-row p { margin: 0 0 4px; }
.fb-nudge { background: var(--paper, #fbf7ef); }
.fb-form .field .muted { font-weight: 400; }
.plus-bar { margin-top: 6px; border: 1.5px solid #ecd9a8; }
.sms-terms a { color: inherit; }
.rem-card textarea { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); font: 16px var(--f-body); color: var(--ink); resize: vertical; }
/* Referrals */
.ref-ribbon { background: #fbf6ea; border-bottom: 1.5px solid #ecd9a8; padding: 12px 16px; text-align: center; font-size: 15px; }
.ref-note { background: #fbf6ea; border-radius: 10px; padding: 10px 12px; margin: 0; }
.ref-box { border: 1.5px solid #ecd9a8; }
.ref-box .linkrow span { word-break: break-all; }
/* Free vs Party Plus, and the privacy section */
.compare.plans { min-width: 0; }
.compare.plans .us { font-weight: 600; }
.compare.plans th[scope=row] { width: 24%; }
.trust .b-tick { background: none; font-size: 26px; }
.skip-ahead { display: block; margin: 12px auto 0; font-size: 14px; text-align: center; }
.fun-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fun-row .bar { grid-column: 1 / -1; height: 6px; }