/* Wedding House typography, served locally with immediate system fallbacks. */
@font-face {
  font-family: Fraunces; font-style: normal; font-weight: 400 650; font-display: swap;
  src: url('/landing/assets/fonts/fraunces-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: Figtree; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/landing/assets/fonts/figtree-latin-variable.woff2') format('woff2');
}
@font-face {
  font-family: Marcellus; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/landing/assets/fonts/marcellus-latin-400.woff2') format('woff2');
}
:root {
  --mist: #f4f7ef; --sage: #dde8d4; --ink: #17362a; --ink-soft: #52685a;
  --marigold: #e06a0a; --kumkum: #a8173a; --leaf: #1f4a35;
}
* { box-sizing: border-box; margin: 0; }
html { min-height: 100%; background: var(--mist); }
body {
  font-family: Figtree, system-ui, sans-serif; color: var(--ink);
  background: linear-gradient(135deg, #f9fbf5 20%, var(--mist) 62%, #e8efdf);
  -webkit-font-smoothing: antialiased;
}
.ui { max-width: 1440px; min-height: 100svh; margin-inline: auto; padding: 28px 56px 38px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.logo { display: block; width: clamp(150px, 21vw, 195px); height: auto; flex: none; }
a:focus-visible { outline: 3px solid var(--marigold); outline-offset: 6px; }
.soon { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.soon::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--marigold); }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 24px; min-height: calc(100svh - 110px); }
.copy { padding-block: 44px; position: relative; z-index: 1; }
h1 { font: 500 clamp(42px, 4.5vw, 66px)/1.13 Fraunces, Georgia, serif; letter-spacing: -.035em; color: var(--ink); }
h1 span { display: block; }
.sub { font-size: 18px; line-height: 1.6; color: var(--ink-soft); margin-top: 24px; max-width: 33ch; }
.launch-actions { margin-top: 30px; }
.launch-cta { min-width: 180px; }
.launch-note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.phone-preview { width: 100%; max-width: 540px; justify-self: center; }
.botanical-composition { position: relative; width: 100%; aspect-ratio: 510 / 620; isolation: isolate; }
.botanical { position: absolute; height: auto; pointer-events: none; }

.mango { width: 41.2%; bottom: 1%; right: -2%; z-index: 0; transform: rotate(18deg); }
.marigolds { width: 30%; bottom: -1%; right: 0; z-index: 3; transform: rotate(-12deg); }
.phone {
  position: absolute; width: 57%; aspect-ratio: 294 / 604; top: 2.5%; left: 26%; z-index: 1;
  padding: 7px; border: 2px solid #7b8172; border-radius: 45px;
  background: #24332b; color: var(--ink); text-decoration: none; transform: rotate(-5deg);
  box-shadow: 4px 3px 0 #b4b8a8, 6px 3px 0 #657063, 16px 30px 42px -21px #344b3545;
  container-type: inline-size;
}
.phone-screen { height: 100%; overflow: hidden; border-radius: 35px; background: #fbf4e4; position: relative; padding: 42px 12px 22px; }
.phone-status { position: absolute; top: 15px; left: 24px; right: 18px; display: flex; justify-content: space-between; align-items: center; font: 600 11px/1 system-ui, sans-serif; color: #29352c; }
.phone-island { position: absolute; width: 32%; height: 19px; background: #18251e; left: 35%; top: -4px; border-radius: 20px; }
.phone-home { position: absolute; width: 32%; height: 4px; bottom: 8px; left: 34%; background: #29352c; border-radius: 4px; }
.invitation-card { height: 100%; position: relative; text-align: center; border: 1px solid #b59957; outline: 1px solid #b5995740; outline-offset: -5px; padding: 30px 8px 26px; display: flex; flex-direction: column; align-items: center; }
.invitation-intro { font-size: clamp(10px, 4.4cqw, 13px); line-height: 1.5; color: #686b44; }
.invitation-names { margin-top: 30px; color: #721f2a; font-family: Fraunces, Georgia, serif; font-weight: 500; font-size: clamp(18px, 9.2cqw, 28px); line-height: 1.3; }
.invitation-names span { display: block; color: #937239; font-size: 12px; margin-block: 12px; }
.invitation-rule { width: 30px; height: 1px; background: #b59957; margin-block: 25px 16px; }
.invitation-date { font-size: clamp(10px, 4.7cqw, 14px); color: #721f2a; }
.invitation-venue { margin-top: 8px; font-size: clamp(10px, 4.1cqw, 12px); line-height: 1.5; color: #686b44; }
.invitation-jasmine { position: absolute; width: 30%; height: auto; max-height: 90px; object-fit: contain; bottom: 46px; right: 2px; transform: rotate(-16deg); }
.invitation-open { font-size: 11px; color: #721f2a; border-bottom: 1px solid #b59957; padding-bottom: 4px; margin-top: auto; }
@media (min-width: 1450px) { .hero { min-height: min(850px, calc(100svh - 110px)); } }
@media (max-width: 1050px) {
  .ui { padding-inline: 32px; }
  .hero { gap: 12px; }
  h1 { font-size: clamp(38px, 4.9vw, 51px); }
  .sub { font-size: 17px; }
  .phone-screen { padding: 36px 9px 19px; }
  .invitation-card { padding-top: 22px; }
  .invitation-names { margin-top: 20px; }
  .invitation-rule { margin-block: 18px 12px; }
}
@media (max-width: 800px) {
  .ui { padding: max(22px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom)); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 18px; min-height: 0; }
  .copy { text-align: center; padding: 50px 0 10px; }
  h1 { font-size: clamp(34px, 6vw, 48px); line-height: 1.13; }
  .sub { font-size: 17px; margin: 20px auto 0; max-width: 33ch; }
  .launch-actions { margin-top: 25px; }
  .launch-note { margin-top: 12px; }
  .phone-preview { max-width: 460px; }
  .botanical-composition { aspect-ratio: 510 / 630; }
  .phone { border-radius: 39px; }
  .phone-screen { border-radius: 29px; }
}
@media (max-width: 450px) {
  .ui { padding-inline: 20px; }
  .top { gap: 12px; }
  .soon { font-size: 12px; gap: 6px; }
  .copy { padding-top: 44px; }
  h1 { font-size: clamp(30px, 7.7vw, 35px); letter-spacing: -.04em; }
  .sub { font-size: 16px; max-width: 31ch; margin-top: 18px; }
  .launch-actions { margin-top: 23px; }
  .hero { gap: 22px; }
  .phone { width: 62%; left: 21%; padding: 5px; border-radius: 32px; }
  .phone-screen { border-radius: 25px; padding: 31px 8px 18px; }
  .phone-status { font-size: 8px; top: 11px; left: 17px; right: 12px; }
  .phone-status svg { width: 26px; height: 10px; }
  .phone-island { height: 15px; top: -3px; }
  .phone-home { height: 3px; bottom: 6px; }
  .invitation-card { padding: 18px 5px 16px; }
  .invitation-names { margin-top: 16px; }
  .invitation-names span { font-size: 10px; margin-block: 9px; }
  .invitation-rule { margin-block: 12px 10px; }
  .invitation-jasmine { width: 28%; max-height: 58px; bottom: 40px; }
  .invitation-open { font-size: 9px; }

  .mango { width: 36%; bottom: -3%; right: 0; }
  .marigolds { width: 32%; bottom: -1%; right: -1%; }
}

/* A still mandapam frame, composed of repeatable vector details rather than a full-page image. */
body { position: relative; min-height: 100svh; }
.mandapam-frame {
  --column: clamp(40px, 5vw, 76px);
  position: absolute; z-index: 0; inset: 10px max(10px, calc((100% - 1740px) / 2));
  pointer-events: none; overflow: hidden;
  border: 1px solid #c8b77e; box-shadow: inset 0 0 0 5px #eee7d1, inset 0 0 0 6px #c6b582;
}
.mandapam-canopy {
  position: absolute; inset: 0 0 auto; height: 104px;
  border-top: 12px solid #d9cba5;
  background: url('/landing/assets/mandapam/toran.svg') repeat-x center top / 320px 102px;
}
.mandapam-canopy::before {
  content: ''; position: absolute; inset: -10px 0 auto; height: 4px;
  border-block: 1px solid #ad965f; background: #f7f0db;
}
.mandapam-column { position: absolute; top: 17px; bottom: 0; width: var(--column); }
.mandapam-column-left { left: 0; }
.mandapam-column-right { right: 0; transform: scaleX(-1); }
.mandapam-capital {
  position: absolute; z-index: 1; top: 0; left: 0; width: calc(var(--column) * 2.05); aspect-ratio: 1;
  background: url('/landing/assets/mandapam/corner.svg') no-repeat left top / contain;
}
.mandapam-shaft {
  position: absolute; top: calc(var(--column) * 1.9); bottom: 54px; left: 8%; width: 76%;
  border-inline: 1px solid #bda773;
  background: url('/landing/assets/mandapam/pillar.svg') repeat-y center top / 100% auto,
    linear-gradient(90deg, #c8b88e, #eee5ca 23%, #e5dabb 53%, #f3ebd4 68%, #c2af80);
  box-shadow: 3px 0 4px #6e693214;
}
.mandapam-base {
  position: absolute; z-index: 1; bottom: 0; left: -10%; width: 120%; aspect-ratio: 1.2;
  background: url('/landing/assets/mandapam/base.svg') no-repeat center bottom / contain;
}
.mandapam-floor { position: absolute; inset: auto 0 0; height: 8px; border-block: 1px solid #bca56c; background: #e4d9b9; }
.ui { position: relative; z-index: 1; padding: 124px clamp(80px, 9vw, 140px) 68px; }
.hero { min-height: calc(100svh - 236px); }
h1 { font-size: clamp(38px, 4.15vw, 60px); }
.phone-preview { max-width: 470px; }
@media (min-width: 1450px) { .hero { min-height: min(780px, calc(100svh - 236px)); } }
@media (max-width: 1050px) {
  .ui { padding-inline: 76px; }
  h1 { font-size: clamp(34px, 4.1vw, 43px); }
}
@media (max-width: 800px) {
  .mandapam-frame { --column: 32px; inset: 7px; }
  .mandapam-canopy { height: 78px; border-top-width: 8px; background-size: 240px 76.5px; }
  .mandapam-canopy::before { top: -7px; height: 3px; }
  .mandapam-shaft { bottom: 26px; }
  .ui { padding: max(100px, env(safe-area-inset-top)) 52px max(54px, env(safe-area-inset-bottom)); }
  .hero { min-height: 0; }
  .copy { padding-top: 34px; }
  h1 { font-size: clamp(33px, 5.6vw, 46px); }
  .phone-preview { max-width: 440px; }
}
@media (max-width: 450px) {
  .mandapam-frame { --column: 17px; inset: 5px; box-shadow: inset 0 0 0 3px #eee7d1, inset 0 0 0 4px #c6b582; }
  .mandapam-column { top: 17px; }
  .mandapam-capital { width: 44px; }
  .mandapam-canopy { height: 61px; background-size: 192px 61.2px; }
  .mandapam-shaft { top: 43px; width: 78%; bottom: 15px; }
  .mandapam-base { width: 26px; left: -2px; }
  .mandapam-floor { height: 5px; }
  .ui { padding: max(87px, env(safe-area-inset-top)) 30px max(48px, env(safe-area-inset-bottom)); }
  .copy { padding-top: 30px; }
  h1 { font-size: clamp(28px, 7.5vw, 33px); }
}
@media (max-width: 450px) {
  /* Preserve the original phone screen's readable size within the slimmer text area. */
  .phone-preview { width: calc(100% + 20px); }

  .mango { right: 2%; }
  .marigolds { right: 1%; }
}
@media (max-width: 350px) {
  .botanical-composition { aspect-ratio: 510 / 730; }
  .phone { width: 72%; left: 16%; }
}
/* Fit the complete landing into the current browser viewport, including mobile chrome changes. */
html { height: 100%; overflow: hidden; }
body { height: 100svh; height: 100dvh; min-height: 0; overflow: hidden; }
.ui {
  width: 100%; height: 100%; min-height: 0;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(10px, 2vh, 22px);
  padding: clamp(86px, 12vh, 124px) clamp(76px, 8.5vw, 140px) clamp(24px, 4vh, 44px);
}
.top { min-width: 0; }
.hero { min-width: 0; min-height: 0; gap: 20px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.copy { min-width: 0; padding: 0; }
h1 { font-size: clamp(30px, min(4.15vw, 6.4vh), 60px); }
.sub { margin-top: clamp(14px, 2.5vh, 24px); }
.launch-actions { margin-top: clamp(18px, 3.2vh, 30px); }
.launch-note { margin-top: 12px; }
.phone-preview {
  position: relative; align-self: stretch; justify-self: stretch;
  width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: none;
  container-type: size; overflow: clip;
}
.botanical-composition {
  position: absolute; left: 50%; top: 50%; width: 460px; height: 620px;
  aspect-ratio: auto;
  /* atan2 turns the available lengths into a scale without newer CSS typed division. */
  --preview-scale: min(1, tan(atan2(100cqw, 460px)), tan(atan2(100cqh, 620px)));
  transform: translate(-50%, -50%) scale(var(--preview-scale));
}
/* Keep one stable illustration canvas; scale all screen content and ornaments together. */
.phone { width: 57%; left: 26%; top: 2.5%; padding: 7px; border-radius: 45px; }
.phone-screen { border-radius: 35px; padding: 42px 12px 22px; }
.phone-status { font-size: 11px; top: 15px; left: 24px; right: 18px; }
.phone-status svg { width: 34px; height: 14px; }
.phone-island { height: 19px; top: -4px; }
.phone-home { height: 4px; bottom: 8px; }
.invitation-card { padding: 30px 8px 26px; }
.invitation-names { margin-top: 30px; }
.invitation-names span { font-size: 12px; margin-block: 12px; }
.invitation-rule { margin-block: 25px 16px; }
.invitation-jasmine { width: 30%; max-height: 90px; bottom: 52px; }
.invitation-open { font-size: 11px; }

.mango { width: 41.2%; bottom: 30px; right: 30px; }
.marigolds { width: 30%; bottom: 14px; right: 16px; }
@media (max-width: 800px) and (orientation: portrait) {
  .ui { padding: max(86px, env(safe-area-inset-top)) 42px max(22px, env(safe-area-inset-bottom)); gap: 12px; }
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); align-items: stretch; gap: 10px; }
  .copy { text-align: center; }
  h1 { font-size: clamp(26px, min(6vw, 4.5dvh), 42px); }
  .sub { font-size: 16px; line-height: 1.4; margin-top: 14px; }
  .launch-actions { margin-top: 18px; }
  .launch-note { margin-top: 10px; }
}
@media (max-width: 450px) and (orientation: portrait) {
  .ui { padding: max(78px, env(safe-area-inset-top)) 28px max(18px, env(safe-area-inset-bottom)); gap: 12px; }
  .soon { font-size: 12px; }
  h1 { font-size: clamp(25px, min(7.4vw, 4.3dvh), 32px); line-height: 1.1; }
  .sub { font-size: 14px; line-height: 1.4; margin-top: 12px; max-width: 33ch; }
  .launch-actions { margin-top: 15px; }
  .launch-note { font-size: 12px; margin-top: 9px; }
  .launch-cta { min-height: 44px; padding-block: 10px; }
}
@media (orientation: portrait) and (max-height: 650px) {
  .ui { padding-top: max(74px, env(safe-area-inset-top)); gap: 10px; }
  h1 { font-size: 25px; }
  .sub { font-size: 13px; margin-top: 10px; }
  .launch-actions { margin-top: 12px; }
  .launch-note { margin-top: 7px; }
  .hero { gap: 6px; }
}
@media (orientation: landscape) and (max-height: 650px) {
  .mandapam-frame { --column: 28px; inset: 6px; }
  .mandapam-canopy { height: 57px; border-top-width: 8px; background-size: 176px 56.1px; }
  .mandapam-canopy::before { top: -7px; height: 3px; }
  .mandapam-shaft { bottom: 23px; }
  .ui { padding: max(70px, env(safe-area-inset-top)) 54px max(18px, env(safe-area-inset-bottom)); gap: 8px; }
  .soon { font-size: 12px; }
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 12px; }
  .copy { text-align: left; align-self: center; }
  h1 { font-size: clamp(23px, min(4vw, 7vh), 38px); line-height: 1.08; }
  .sub { font-size: 14px; line-height: 1.35; margin: 12px 0 0; }
  .launch-actions { margin-top: 14px; }
  .launch-note { font-size: 12px; margin-top: 8px; }
}
@media (orientation: landscape) and (max-height: 450px) {
  .mandapam-frame { --column: 20px; }
  .mandapam-canopy { height: 45px; background-size: 144px 45.9px; }
  .mandapam-shaft { bottom: 16px; }
  .ui { padding: max(58px, env(safe-area-inset-top)) max(38px, env(safe-area-inset-left)) max(13px, env(safe-area-inset-bottom)); gap: 6px; }
  .soon { font-size: 11px; }
  h1 { font-size: clamp(20px, 3.2vw, 27px); }
  .sub { font-size: 12px; margin-top: 8px; }
  .launch-actions { margin-top: 10px; }
  .launch-note { font-size: 11px; margin-top: 6px; }
  .launch-cta { min-width: 152px; min-height: 44px; padding: 10px 20px; font-size: 14px; }
}
/* The page stays still; only this modal may scroll, including with an onscreen keyboard. */
.signup-dialog { max-height: calc(100svh - 28px); max-height: calc(100dvh - 28px); overflow-y: auto; }

h1 { font-optical-sizing: none; font-variation-settings: 'opsz' 72; }

/* A quiet launch-status pulse; opacity leaves the viewport layout unchanged. */
.soon { animation: launch-status-pulse 2.8s ease-in-out infinite; }
.soon::before { animation: launch-dot-pulse 2.8s ease-in-out infinite; }
@keyframes launch-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
@keyframes launch-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgb(224 106 10 / 0); }
  50% { transform: scale(1.2); box-shadow: 0 0 0 5px rgb(224 106 10 / .14); }
}
@media (prefers-reduced-motion: reduce) {
  .soon, .soon::before { animation: none; }
}