.pg-invite main { padding-top: var(--hh); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pg-invite button, .pg-invite input, .pg-invite textarea { font: inherit; }

.inv { padding: 0 12px; }
.inv-card {
  position: relative; isolation: isolate; overflow: clip;
  min-height: calc(100svh - var(--hh) - 12px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); column-gap: clamp(40px, 6vw, 112px);
  align-items: start; align-content: center;
  padding: clamp(24px, 3.4svh, 56px) var(--gutter) clamp(28px, 4svh, 64px);
  background: var(--orange); color: var(--twilight);
  border-radius: var(--r-round);
  scroll-margin-top: calc(var(--hh) + 8px);
    box-shadow:
    0 1px 2px color-mix(in srgb, var(--twilight) 10%, transparent),
    0 18px 36px -20px color-mix(in srgb, var(--twilight) 28%, transparent),
    0 60px 120px -60px color-mix(in srgb, var(--twilight) 40%, transparent);
  --sb-ground: var(--white); --sb-ink: var(--twilight); --sb-mark: var(--twilight);
}

.inv-walk {
  position: absolute; z-index: -1; pointer-events: none;
  width: min(78svh, 52vw); aspect-ratio: 1;
  left: 0; bottom: 0; translate: -26% 30%;
  color: var(--white);
}
.inv-w { display: block; width: 100%; height: 100%; overflow: visible;
  rotate: var(--turn, 0deg); transition: rotate 2200ms var(--ease-settle); }
.inv-w .sb-w-d { opacity: .16; transition: opacity 900ms var(--ease-settle) calc(var(--k, 0) * 110ms); }
.inv-w .sb-w-d.is-lit { opacity: .46; }
.inv-walk.is-sent .sb-w-d { opacity: .75; transition: opacity 700ms var(--ease-settle) calc(var(--i, 0) * 80ms); }

.inv-head { grid-column: 1; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--hh) + 32px); }
.inv-form, .inv-fail, .inv-done { grid-column: 2; }
.inv-h { margin: 0; font-size: clamp(2.4rem, 1rem + 3.6vw, 5.2rem); line-height: 1; letter-spacing: -0.02em; max-width: 9ch; text-wrap: balance; }
.inv-lede { margin: var(--space-3) 0; font-size: var(--step-1); line-height: 1.35; max-width: 24ch; }
.inv-head .inv-small + .inv-small { margin-top: 6px; }

.inv-form { width: 100%; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); row-gap: 0; }
.fld { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; padding-bottom: clamp(10px, 1.4svh, 18px); }
.fld.wide { grid-column: 1 / -1; }
.fld label { grid-row: 1; align-self: end; font-weight: 600; margin: 0 0 6px; }
.fld .opt { font-weight: 400; }
.fld .hint { grid-row: 2; display: block; font-size: var(--step--1); line-height: 1.35; margin: -2px 0 8px; }
.fld input, .fld textarea {
  grid-row: 3; display: block; width: 100%; min-height: 54px; margin: 0; padding: 12px 16px;
  border: 1.5px solid color-mix(in srgb, var(--twilight) 55%, transparent); border-radius: var(--r-soft);
  background: var(--white); color: var(--twilight); font-size: max(16px, var(--step-0)); line-height: 1.35; color-scheme: light;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--twilight) 8%, transparent);
  transition: border-color var(--dur-quick) var(--ease-settle), box-shadow var(--dur-quick) var(--ease-settle);
}
.fld textarea { min-height: 76px; max-height: 50svh; resize: vertical; }
.fld input:hover, .fld textarea:hover, .fld input:focus, .fld textarea:focus { border-color: var(--twilight); }
.fld [aria-invalid="true"] { border: 3px solid var(--twilight); }
.fld input::-webkit-calendar-picker-indicator { cursor: pointer; }
.err { grid-row: 4; display: block; margin: 6px 0 0; font-weight: 600; font-size: var(--step--1); line-height: 1.3; color: var(--twilight); }
.err:empty { display: none; }

.inv-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 6px; }
.inv-cta { min-height: 64px; padding: 0 1.7em 0 1.15em; border-radius: 24px; font-size: var(--step-1);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--twilight) 10%, transparent), 0 18px 36px -18px color-mix(in srgb, var(--twilight) 50%, transparent);
  transition: transform var(--dur-calm) var(--ease-settle), box-shadow var(--dur-calm) var(--ease-settle); }
.inv-cta .sb-cta-mark { width: 1.7em; height: 1.7em; }
.inv-cta:hover { transform: translateY(-3px); box-shadow: 0 2px 4px color-mix(in srgb, var(--twilight) 10%, transparent), 0 26px 48px -20px color-mix(in srgb, var(--twilight) 55%, transparent); }
.inv-cta[aria-busy="true"] { cursor: progress; }
.inv-cta[aria-busy="true"] .sb-cta-mark { animation: inv-walking 1600ms var(--ease-breath) infinite; }
@keyframes inv-walking { to { rotate: 360deg; } }
.inv-small { margin: 0; font-size: var(--step--1); line-height: 1.45; max-width: 40ch; }

.inv-a { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.inv-a:hover { text-decoration-thickness: 2px; }
.inv-a:focus-visible { outline: 2.5px solid currentColor; outline-offset: 4px; box-shadow: none; border-radius: 6px; }
.inv-ig .inv-a, .inv-ig-link, .inv-send .inv-a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; vertical-align: middle; white-space: nowrap; }
button.inv-a { border: 0; background: none; padding: 0 2px; margin: 0; cursor: pointer; font-size: var(--step-0); min-height: 44px; }
.ig-ico { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.inv-fail { width: 100%; margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-3) var(--space-2);
  border-radius: var(--r-soft); background: var(--white); }
.inv-fail:focus { outline: none; }
.inv-fail-h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); margin: 0 0 8px; }
.inv-fail p { margin: 0; }
.inv-fail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: 12px !important; }

.inv-done { width: 100%; align-self: center; }
.inv-done-h { font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.inv-done-h:focus { outline: none; }
.inv-done-h:focus-visible { outline: 3px solid var(--twilight); outline-offset: 8px; }
.told { display: grid; gap: 6px; margin: 0 0 var(--space-3); font-size: var(--step-0); }
.told > div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 16px; }
.told dt { font-weight: 600; }
.told dd { margin: 0; overflow-wrap: anywhere; }
.inv-done-p { margin: 0; max-width: 46ch; font-size: var(--step-0); overflow-wrap: anywhere; }
.inv-done-p .add { font-weight: 600; }
.inv-done-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; margin: var(--space-4) 0 0; }

@media (prefers-reduced-motion: no-preference) {
  .inv-head, .inv-form { animation: inv-rise 1100ms var(--ease-settle) both; }
  .inv-head { animation-delay: 120ms; }
  .inv-form { animation-delay: 300ms; }
  .inv-walk { animation: inv-turn-in 2400ms var(--ease-settle) both; }
  .inv-done.is-in { animation: inv-rise 1100ms var(--ease-settle) both; }
}
@keyframes inv-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes inv-turn-in { from { opacity: 0; rotate: -40deg; scale: .92; } to { opacity: 1; rotate: 0deg; scale: 1; } }

.wb { max-width: 1400px; margin: 0 auto; padding: clamp(80px, 13svh, 150px) var(--gutter) clamp(72px, 11svh, 128px); color: var(--twilight); }
.wb-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 88px); align-items: center; }
.wb-film {
  margin: 0; position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-round); overflow: clip; isolation: isolate;
  background: var(--dusk);
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--twilight) 10%, transparent),
    0 22px 44px -22px color-mix(in srgb, var(--twilight) 30%, transparent),
    0 70px 120px -60px color-mix(in srgb, var(--twilight) 45%, transparent);
}
.wb-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  border-radius: 0; filter: var(--grade); scale: var(--zoom, 1.06); transition: scale 2400ms var(--ease-settle); }
.wb-film.in video { --zoom: 1; }
.wb-h { font-size: var(--step-4); line-height: 1; letter-spacing: -0.02em; margin: 0 0 var(--space-3); max-width: 9ch; }
.wb-line { font-size: var(--step-1); line-height: 1.35; margin: 0 0 var(--space-3); max-width: 24ch; }
.wb-drinks { display: grid; gap: 2px; margin: 0 0 var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.15; }
.wb-plan { color: var(--cloud); margin: 0; max-width: 38ch; }

.wb-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin-top: clamp(64px, 10svh, 120px); }
.wb-kind { display: flex; flex-direction: column; align-items: flex-start; }
.wb-kind h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
.wb-kind p { color: var(--cloud); margin: 0 0 var(--space-2); flex: 1; }
.wb-kind .sb-cta { --sb-mark: var(--orange); margin-left: -.15em; }

@media (prefers-reduced-motion: no-preference) {
  html.js [data-rise] { opacity: 0; transform: translateY(36px); transition: opacity 1200ms var(--ease-settle) calc(var(--d, 0) * 140ms), transform 1400ms var(--ease-settle) calc(var(--d, 0) * 140ms); }
  html.js [data-rise].in { opacity: 1; transform: none; }
}

@media (max-width: 1000px) {
  .inv-card { grid-template-columns: 1fr; }
  .inv-head { grid-row: auto; position: static; margin-bottom: var(--space-4); }
  .inv-form, .inv-fail, .inv-done { grid-column: 1; }
  .inv-h { max-width: 14ch; }
  .inv-walk { width: min(70vw, 520px); left: auto; right: 0; bottom: auto; top: 0; translate: 30% -26%; }
  .wb-top { grid-template-columns: 1fr; }
  .wb-kinds { grid-template-columns: 1fr; gap: var(--space-4); }
  .wb-h { max-width: none; }
}
@media (max-width: 760px) {
  .inv { padding: 0 8px; }
  .inv-card { min-height: 0; align-content: start; padding: 32px 20px 40px; }
  .inv-walk { width: 88vw; }
  .inv-h { font-size: clamp(2.2rem, 10.4vw, 2.9rem); }
  .inv-lede { font-size: var(--step-0); margin: var(--space-2) 0; }
  .inv-head { margin-bottom: var(--space-3); }
  .fields { grid-template-columns: 1fr; }
  .inv-cta { width: 100%; justify-content: center; }
  .inv-done-h { font-size: var(--step-3); }
  .wb { padding-top: 72px; }
  .wb-film { aspect-ratio: 1 / 1; border-radius: var(--r-soft); }
  .wb-film video { object-position: 40% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-w, .inv-w .sb-w-d, .wb-film video { transition: none !important; }
}
@media (forced-colors: active) {
  .inv-walk { display: none; }
}


.inv-walk, .inv-walk.is-sent { position: static; z-index: auto; translate: none; inset: auto; display: block;
  width: clamp(76px, 7vw, 104px); margin: 0 0 var(--space-4); color: var(--white); animation: none; }
.inv-w .sb-w-d { opacity: .3; }
.inv-w .sb-w-d.is-lit { opacity: 1; }
.inv-walk.is-sent .sb-w-d { opacity: 1; }
.inv-h { color: var(--white); }
.inv-lede { color: var(--twilight); margin: var(--space-3) 0 0; }
.inv-ig { margin-top: var(--space-5); }
.inv-ig .inv-a { color: var(--twilight); }
@media (max-width: 960px) {
  .inv-walk, .inv-walk.is-sent { width: 72px; margin-bottom: var(--space-3); }
  .inv-ig { margin-top: var(--space-3); }
}

.inv-ts { max-width: 400px; }
.inv-ts:empty { display: none; }
.inv-ts iframe { display: block; margin: 0 0 14px; border-radius: var(--r-soft); }
.inv-cta[aria-disabled="true"] { cursor: progress; }
.inv-cta[aria-disabled="true"]:hover { transform: none; }
.inv-fail .inv-fail-mail { margin-top: 8px; overflow-wrap: anywhere; }
.inv-nojs { margin-top: var(--space-3); max-width: 46ch; }