/* Invityy v14 — page-to-page visual continuity, responsive layouts and accessibility */
:root { --iv-bronze:#c5a880; --iv-cream:#faf8f3; --iv-ink:#2a2420; }
:where(a,button,input,select,textarea,[role="button"]):focus-visible {
  outline:3px solid #c5a880;outline-offset:3px;
}
:where(input,select,textarea) {max-width:100%;min-width:0;font-family:inherit;}
:where(button,a) { -webkit-tap-highlight-color:transparent; }
/* Homepage */
.header-wrap {gap:16px;}
.header-actions {flex-shrink:0;}
.hero-container > *, .calc-card > *, .footer-wrap > * {min-width:0;}
.hero-personalizer-bar {width:100%;}
.hero-guest-input {min-width:0;}
.theme-showcase-card {min-width:0;}
.card-title-row {gap:12px;flex-wrap:wrap;}
.theme-card-actions {flex-wrap:wrap;}
.theme-card-actions .btn {min-width:110px;}
.preview-modal {max-height:min(95dvh,900px);}
.modal-card {max-height:min(95dvh,900px);min-height:0;overflow-y:auto;}
.modal-phone-frame {height:min(620px,68dvh);flex-shrink:1;}
.modal-top {gap:12px;}
.modal-title {overflow-wrap:anywhere;}
.filter-btn {white-space:nowrap;}
.theme-filter-bar {min-width:0;}
/* Studio — same cream + champagne identity as the landing page, dark editing surface */
.studio-logo-text {font-family:'Cormorant Garamond',Georgia,serif!important;font-size:29px!important;font-weight:600;letter-spacing:.02em;line-height:1.05;}
.studio-logo-text small {font-family:'DM Sans',system-ui,sans-serif;letter-spacing:.1em;font-size:10px;}
.studio-logo-mark {border:1px solid rgba(197,168,128,.75);background:linear-gradient(135deg,#dbbf97,#8b683e);color:#1a1714;border-radius:50%;font-family:Georgia,serif;font-size:22px;}
.studio-appbar {gap:16px;}
.studio-layout {min-width:0;}
.studio-panel {min-width:0;}
.studio-panel :is(.btn,.cat-pill,.step-pill) {min-height:40px;}
.step-title {font-family:'Cormorant Garamond',Georgia,serif!important;line-height:1.1;font-size:clamp(27px,3vw,37px)!important;}
.step-desc {font-size:14px;line-height:1.65;}
.theme-picker-grid {grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));scrollbar-color:#74644e transparent;}
.theme-select-card {min-width:0;}
.thumb-play-preview {opacity:1!important;}
.theme-empty-state {grid-column:1/-1;text-align:center;padding:36px;color:#d7c1a8;border:1px dashed rgba(197,168,128,.4);border-radius:12px;}
.studio-layout .form-input, .studio-layout .theme-search-input {min-height:45px;font-size:16px;}
.studio-layout .form-input:focus-visible {border-color:#c5a880;}
.studio-layout :is(.btn-gold,.cat-pill.active) {background:linear-gradient(135deg,#dec7a5,#b08e61);color:#241b13;border-color:#c5a880;}
.studio-layout .iphone-frame {max-width:100%;}
.studio-layout .phone-column {min-width:0;}
.mobile-preview-shortcut,.mobile-back-shortcut {display:none!important;}
.phone-hint {margin-top:14px;font-size:12px;color:var(--text-muted);text-align:center;}
/* Dashboard */
.appbar-inner,.app-layout,.app-content,.dashboard-main {min-width:0;}
.invite-card-media {overflow:hidden;overflow-wrap:anywhere;}
.invite-card-info {overflow-wrap:anywhere;}
.invite-card-actions {align-items:stretch;}
.table-wrap {overflow-x:auto;-webkit-overflow-scrolling:touch;}
.app .table {min-width:590px;}
/* Intro / guest view: mobile browser viewport safe areas */
#videoInviteWrapper,.intro-video-stage,.dynamic-phone-stage {max-width:100%;}
.dynamic-phone-stage {height:100dvh;max-height:100%;}
#universalIntroLayer .universal-intro-hit-btn {max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.45;bottom:max(20px,env(safe-area-inset-bottom));}
/* Common */
@media (max-width:1120px) {
  .studio-layout {grid-template-columns:minmax(0,1fr);gap:28px;max-width:900px;}
  .studio-appbar {height:auto;min-height:76px;flex-wrap:wrap;padding:14px 24px;}
  .stepper-nav {display:flex;order:3;flex-basis:100%;justify-content:center;max-width:100%;overflow-x:auto;padding:4px 0 8px;}
  .phone-column {position:static;}
}
@media (max-width:768px) {
  .announcement-content {gap:5px;font-size:11px;}
  .announcement-content .sep,.announcement-content > span:nth-of-type(3) {display:none;}
  .header-wrap {width:calc(100% - 28px);height:68px;gap:10px;}
  .brand-wordmark {font-size:25px;}
  .brand-sparkles svg {width:32px;height:10px;}
  .nav {top:68px;max-height:calc(100dvh - 68px);overflow-y:auto;align-items:stretch;gap:0;padding:10px 18px 18px;}
  .nav a {display:block;padding:13px 10px;border-bottom:1px solid rgba(42,36,32,.08);}
  .header-actions {gap:8px;}
  .nav-login {display:none;}
  .header-actions .btn {font-size:12px;padding:9px 12px;white-space:normal;text-align:center;}
  .hero-section {padding:48px 0 56px;}
  .hero-container {gap:34px;}
  .hero-title {font-size:clamp(38px,10vw,57px);}
  .hero-subtitle {font-size:15px;}
  .hero-personalizer-bar {max-width:100%;border-radius:18px;}
  .hero-cta-group {margin-bottom:32px;gap:10px;}
  .hero-cta-group .btn {flex:1 1 180px;white-space:normal;}
  .hero-proof {gap:12px;flex-wrap:wrap;justify-content:center;}
  .proof-divider {display:none;}
  .hero-phone-area {max-width:100%;}
  .phone-device-wrap {max-width:calc(100vw - 48px);}
  .hero-anim-controls {width:100%;max-width:100%;}
  .hero-anim-pills {max-width:100%;flex-wrap:wrap;justify-content:center;}
  .theme-filter-bar {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;margin-bottom:18px;}
  .filter-tabs {width:max-content;max-width:none;flex-wrap:nowrap;justify-content:flex-start;}
  .themes-grid {grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:18px;}
  .card-preview-stage {height:280px;}
  .modal-card {padding:12px;gap:10px;}
  .modal-top {align-items:flex-start;}
  .modal-top-actions {gap:3px;}
  #modalReplayBtn {font-size:11px;padding:8px 10px;white-space:normal;}
  .preview-modal {width:calc(100vw - 18px);}
  .modal-phone-frame {width:min(100%,380px);height:min(620px,65dvh);}
  .footer-wrap {gap:20px;}
  .studio-appbar {padding:12px 14px;gap:10px;}
  .studio-logo-text {font-size:26px!important;}
  .studio-toolbar {display:flex;gap:7px;flex-shrink:0;}
  .studio-toolbar .btn {padding:9px 10px;font-size:11px;white-space:nowrap;}
  .mobile-preview-shortcut,.mobile-back-shortcut {display:inline-flex!important;}
  .stepper-nav {width:100%;flex-basis:100%;justify-content:flex-start;gap:6px;overflow-x:auto;scroll-snap-type:x proximity;}
  .step-pill {flex:0 0 auto;padding:8px 11px;font-size:11px;scroll-snap-align:start;}
  .studio-layout {padding:18px 12px 50px;display:flex;flex-direction:column;gap:28px;}
  .studio-panel {padding:22px 16px;max-width:100%;border-radius:18px;}
  .cat-pills-bar {flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;scroll-snap-type:x proximity;}
  .cat-pill {flex:0 0 auto;scroll-snap-align:start;white-space:nowrap;}
  .form-row {grid-template-columns:minmax(0,1fr);gap:0;}
  .wizard-nav-btns {gap:10px;align-items:stretch;}
  .wizard-nav-btns .btn {white-space:normal;text-align:center;justify-content:center;min-width:0;flex:1;}
  .wizard-nav-btns > div:empty {display:none;}
  .phone-column {width:100%;max-width:100%;scroll-margin-top:160px;}
  .iphone-frame {width:min(360px,calc(100vw - 48px));height:min(720px,calc((100vw - 48px)*2));min-height:0;border-radius:38px;padding:10px;}
  .iphone-screen {border-radius:30px;min-width:0;padding:38px 16px 20px;}
  .iphone-screen #phoneCouple {font-size:clamp(19px,6vw,26px)!important;overflow-wrap:anywhere;}
  .mobile-back-shortcut {margin-top:10px;}
  .invite-card-row {gap:12px;padding:14px;}
  .invite-card-info {min-width:0;flex:1 1 165px;}
  .invite-card-actions {width:100%;}
  .invite-card-actions .btn {flex:1 1 135px;text-align:center;justify-content:center;}
  .appbar-inner {gap:10px;flex-wrap:wrap;}
  .user-menu {margin-left:auto;gap:8px;}
}
@media (max-width:420px) {
  .announcement-content > span:nth-of-type(1) {max-width:220px;}
  .studio-logo-mark {width:30px;height:30px;font-size:16px;}
  .studio-logo-text {font-size:24px!important;}
  .studio-toolbar .btn {font-size:10px;padding:8px;}
  .theme-picker-grid {grid-template-columns:minmax(0,1fr);max-height:none;overflow:visible;padding:0;}
  .theme-card-thumb-wrap {height:175px;}
  .studio-panel {padding:18px 13px;}
  .step-title {font-size:26px!important;}
  .wizard-nav-btns {flex-wrap:wrap;}
  .wizard-nav-btns .btn {flex:1 1 180px;}
  .iphone-screen {padding-inline:12px;}
}
@media (prefers-reduced-motion:reduce) {
  html {scroll-behavior:auto!important;}
  .hero-phone-area *, .theme-showcase-card, .theme-select-card, .btn, .nav-toggle span {animation-duration:.01ms!important;transition-duration:.01ms!important;}
}

.invite-card-actions button:disabled { opacity:.5; cursor:not-allowed; filter:grayscale(.5); }
.invite-card-stats {flex-wrap:wrap;}
/* Small phones (320–359px): prevent the hero/grid and navbar from widening the document. */
@media (max-width:359px) {
  .header-wrap {width:calc(100% - 20px);gap:5px;}
  .brand-wordmark {font-size:24px;}
  .header-actions {gap:3px;min-width:0;}
  .header-actions > .btn {max-width:132px;padding:8px 9px;font-size:11px;line-height:1.25;}
  .nav-toggle {flex:0 0 28px;width:28px;}
  .hero-container {width:calc(100% - 28px);grid-template-columns:minmax(0,1fr);}
  .hero-content {width:100%;min-width:0;max-width:100%;}
  .hero-title {font-size:34px;overflow-wrap:break-word;}
  .hero-eyebrow {padding:6px 10px;font-size:10px;letter-spacing:.12em;}
  .hero-personalizer-bar {gap:6px;padding:6px 7px;}
  .hero-guest-input {width:0;flex:1 1 72px;font-size:12px;}
  .pers-badge {font-size:9px;padding:7px 8px;letter-spacing:.06em;}
  .hero-proof {gap:8px;}
  .proof-item span {font-size:11px;}
  .footer-wrap,.calc-card,.themes-grid {min-width:0;}
}
@media (max-width:359px) {
  .header-actions {flex-shrink:1;gap:2px;}
  .header-actions > .btn {max-width:116px;font-size:10px;padding:7px 7px;}
  .header-wrap .brand {flex-shrink:0;}
  .savings-banner {min-width:0;flex-direction:column;gap:14px;align-items:center;text-align:center;padding-inline:15px;}
  .savings-banner > * {min-width:0;max-width:100%;}
  .savings-banner .btn {width:100%;max-width:260px;white-space:normal;}
}

/* V15: Studio moves to the same light editorial palette as the homepage. */
html:has(.studio-layout){color-scheme:light;--bg:#faf8f3;--card-bg:#fffdfa;--card-border:#e7dacc;--card-hover:#f9f3eb;--input-bg:#fcf9f5;--gold:#af875b;--gold-light:#ead6bb;--gold-dark:#81613d;--gold-glow:rgba(174,135,91,.12);--text:#2a2420;--text-muted:#71645a}
body:has(.studio-layout){background:radial-gradient(circle at 95% 0%,#f0e6d8,transparent 35%),#faf8f3;color:#2a2420}
.studio-appbar{background:rgba(250,248,243,.97);border-bottom:1px solid #e4d6c5;box-shadow:0 6px 26px rgba(70,55,40,.04)}
.studio-logo{color:#352b23}.studio-logo-text small{color:#947247}
.step-pill{background:#fffdfa;border-color:#e7dac9;color:#827366}.step-pill.active{background:#eee2d0;border-color:#bf9e70;color:#604b36}.step-pill.completed{border-color:#d6c4ad;color:#4e6143}.step-num{background:#f0e6db;color:#725a40}
.studio-panel{background:#fffefa;border:1px solid #e4d5c2;box-shadow:0 20px 60px rgba(70,52,34,.075)}
.step-eyebrow{color:#a47a49}.step-title{color:#302920}.step-desc{color:#73695f}
.theme-select-card{background:#fff;border-color:#e8dbc9;box-shadow:0 4px 18px rgba(43,33,20,.055)}.theme-select-card:hover{border-color:#c09f70;box-shadow:0 13px 28px rgba(43,33,20,.09)}.theme-select-card.selected{border-color:#a8875a;box-shadow:0 0 0 3px #c5a88038}.theme-card-footer{background:#fffefa;border-top:1px solid #eee2d1}.thumb-info h4{color:#fff}.thumb-info span{color:#f4e5d4}
.cat-pill{color:#68574a;background:#f9f4ee}.cat-pill:hover{background:#f0e6d9;color:#4e3e32}.cat-pill.active{background:#af875b!important;color:#fff!important}
.theme-search-input,.studio-layout .form-input{background:#fffefa;color:#302820;border-color:#dcd0c1}.theme-search-input::placeholder,.studio-layout .form-input::placeholder{color:#a39689}.theme-search-input:focus,.studio-layout .form-input:focus{border-color:#b08d5c;box-shadow:0 0 0 3px rgba(197,168,128,.17)}
.studio-layout .form-group label{color:#54473d}.preset-chip{background:#f9f2e9;border-color:#ddcbb7;color:#7c5c38}.preset-chip:hover{background:#f1e5d5}.studio-layout .btn-dark,.studio-toolbar .btn-dark{background:#fff;border:1px solid #dfd2c2;color:#493d32}.studio-layout .btn-dark:hover,.studio-toolbar .btn-dark:hover{background:#f4e9dd}.studio-layout .btn-gold{background:linear-gradient(135deg,#b59167,#896944)!important;color:#fff!important;border:1px solid #aa895c!important}
.studio-summary{padding:24px;margin-bottom:24px;background:#fcf8f1;border:1px solid #e4d5c2;border-radius:16px}.studio-summary strong{color:#4b3c2e}.studio-summary>div{min-width:0}.studio-summary>div>div{min-width:0;overflow-wrap:anywhere}
.payment-method-card{border:1px solid #e2d2bc;border-radius:20px;padding:22px;background:linear-gradient(160deg,#fffefc,#fbf5eb);margin:22px 0}.checkout-header{display:flex;gap:12px;align-items:center;margin-bottom:17px}.checkout-header strong{display:block;font:600 28px/1.2 'Cormorant Garamond',Georgia,serif}.checkout-header p{font-size:12px;line-height:1.6;color:#76695f}.checkout-icon{display:grid;place-items:center;width:44px;height:44px;background:#eaddc9;border-radius:50%;font-size:27px;color:#986c3d}.checkout-method{display:flex;align-items:center;gap:13px;padding:15px;margin:9px 0;border:1px solid #ddc4a3;border-radius:13px;background:#fff}.checkout-method>span:first-child{font-size:24px}.checkout-method>div{min-width:0;flex:1}.checkout-method strong{display:block;font-size:13px;color:#372d23}.checkout-method small{display:block;line-height:1.55;color:#77695d;margin-top:2px;font-size:11px}.checkout-method.disabled{opacity:.7;border-color:#e6ddd2;background:#f7f3ed}.checkout-selected{color:#667f55;font-size:19px}.soon-badge{font-size:10px;padding:7px 11px;border-radius:99px;background:#eae1d6;color:#665444;white-space:nowrap}.payment-pricing{background:#f7f0e7;border:1px dashed #d8be98;border-radius:12px;padding:16px;margin:15px 0;font-size:12px;color:#725e4d;line-height:1.65;display:flex;align-items:center;justify-content:space-between;gap:10px}.payment-pricing strong{font:600 31px 'Cormorant Garamond',Georgia,serif;white-space:nowrap;color:#775735}.checkout-note{font-size:12px;line-height:1.7;color:#786a5d}
.studio-layout .iphone-frame{box-shadow:0 22px 54px rgba(37,29,21,.23)}.phone-hint{color:#776557}
/* Keep admin links accessible even when the original sidebar is narrow. */
.admin-table-wrap{overflow-x:auto}
@media(max-width:580px){.studio-summary>div{grid-template-columns:1fr!important}.payment-method-card{padding:15px}.studio-appbar{align-items:center}.studio-toolbar{max-width:100%}.payment-pricing{flex-direction:column;align-items:flex-start}}

/* Navbar Auth State & User Menu */
.nav-user-menu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 99px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.nav-auth-btn.profile-btn {
  background: rgba(197, 168, 128, 0.18);
  color: #2A2420;
  border: 1px solid rgba(197, 168, 128, 0.4);
}
.nav-auth-btn.profile-btn:hover {
  background: #C5A880;
  color: #1A1614;
  box-shadow: 0 4px 12px rgba(197,168,128,0.25);
}
.nav-auth-btn.dash-btn {
  background: transparent;
  color: #2A2420;
  border: 1px solid rgba(42, 36, 32, 0.15);
}
.nav-auth-btn.dash-btn:hover {
  background: rgba(42, 36, 32, 0.06);
}
.nav-auth-btn.admin-btn {
  background: #2A2420;
  color: #E8D3B9;
  border: 1px solid #C5A880;
}
.nav-auth-btn.admin-btn:hover {
  background: #1A1614;
  color: #FFF;
  border-color: #E8D3B9;
}
.nav-auth-logout {
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 500;
  color: #777;
  cursor: pointer;
  padding: 5px 8px;
  transition: color 0.2s;
  font-family: inherit;
}
.nav-auth-logout:hover {
  color: #C0392B;
}

.mobile-nav-user-links {
  display: none !important;
}

@media (max-width: 900px) {
  .nav.open .mobile-nav-user-links {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid rgba(42, 36, 32, 0.12);
  }
  .mobile-nav-user-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    padding: 6px 0;
  }
}