:root{
  /* Legacy tokens mapped onto the new brand system so every existing
     component (app header, tabs, cards, etc.) inherits the redesign
     without touching structural HTML/JS. */
  --ink:#101B30; --card:#101B30; --card-2:#101B30;
  --brass:#C8A24C; --brass-bright:#C8A24C; --brass-dim:rgba(200,162,76,0.28);
  --ivory:#F6F1E7; --ivory-dim:rgba(246,241,231,0.62); --ivory-faint:rgba(246,241,231,0.38);
  --border:rgba(200,162,76,0.22); --border-soft:rgba(246,241,231,0.10);
  --sage:#8aa88e; --clay:#c17a63;
  --shadow:0 24px 70px rgba(0,0,0,0.45);
  --shadow-sm:0 8px 24px rgba(0,0,0,0.3);

  /* Brand system */
  --navy:#101B30; --gold:#C8A24C; --cream:#F6F1E7; --ivory-pure:#FFFFFF;
  --font-display:'Cormorant Garamond', serif;
  --font-body:'Jost', sans-serif;

  /* ── 60-30-10 palette layer ────────────────────────────────────────
     60% neutral base (body/page), 30% deep supporting tone (cards,
     raised surfaces), 10% gold reserved for true accents (active
     states, primary CTAs, key figures). Structural/quiet borders now
     read as neutral hairlines, not gold, so gold stays rare. */
  --surface-deep:#0B1220;      /* 30% layer: panels sit one shade deeper than body */
  --surface-deep-2:#0E1729;    /* subtle gradient partner for --surface-deep */
  --hairline:rgba(246,241,231,0.09);   /* neutral quiet border — replaces most gold borders */
  --hairline-strong:rgba(246,241,231,0.16);
}

/* ════════════════════════════════════════════════════════════════
   DASHBOARD LIGHT THEME — scoped to #app only. The intro/login
   screens (outside #app) keep the original dark-navy theme; every
   variable here is redefined for the post-login dashboard alone,
   using the same variable NAMES so all existing #app rules inherit
   the light theme automatically via CSS cascade — no rule rewrites.
   ════════════════════════════════════════════════════════════════ */
#app{
  --ink:#FAF6EC; --card:#FAF6EC; --card-2:#F5EFE0;
  --brass:#B8863A; --brass-bright:#B8863A; --brass-dim:rgba(184,134,58,0.30);
  --ivory:#1C1A12; --ivory-dim:rgba(28,26,18,0.66); --ivory-faint:rgba(28,26,18,0.44);
  --border:rgba(184,134,58,0.28); --border-soft:rgba(28,26,18,0.12);
  --sage:#4f7a58; --clay:#a8543a;
  --shadow:0 24px 70px rgba(28,26,18,0.12);
  --shadow-sm:0 8px 24px rgba(28,26,18,0.08);

  --navy:#FAF6EC; --gold:#B8863A; --cream:#1C1A12; --ivory-pure:#1C1A12;

  --surface-deep:#FFFFFF;
  --surface-deep-2:#FCFAF4;
  --hairline:rgba(28,26,18,0.10);
  --hairline-strong:rgba(28,26,18,0.18);

  background:var(--ink);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--navy);
  color:var(--ivory); min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* ── Luxury mobile UX ── */
  -webkit-tap-highlight-color:transparent; /* no grey flash on tap */
  overscroll-behavior:none;               /* no rubber-band pull on body */
  -webkit-text-size-adjust:100%;          /* prevent OS font inflation */
}
a{color:inherit;-webkit-tap-highlight-color:transparent;}
button{font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;}
input,textarea{font-family:inherit;}
::selection{background:var(--brass-dim);color:var(--ivory);}
/* ⭐ NEW: accessible keyboard focus — thin brass outline, on-brand,
   shown only for keyboard focus (not mouse clicks) via :focus-visible
   so it doesn't add visual noise to tap/click interactions. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brass-bright); outline-offset:2px; border-radius:2px;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

/* ================================================================
   THE REVEAL — cinematic wedding-album opening.
   Three full-bleed scenes: intro (photograph) → login (private entry)
   → otp (verification). No cards, no boxes — the screen itself is
   the canvas. Presentation only; IDs/onclick hooks untouched below.
   ================================================================ */

#introScreen, #loginScreen, #otpScreen{
  position:fixed;inset:0;z-index:100;
  min-height:100vh;min-height:100dvh;
  background:var(--navy);
  overflow:hidden;
}
#introScreen{ display:flex; flex-direction:column; z-index:102; }
#loginScreen{ display:flex; flex-direction:column; z-index:101; }
#otpScreen{ display:none; flex-direction:column; z-index:101; } /* JS sets flex on show */
#introScreen.intro-hidden{display:none;}

/* Subtle grain, shared by all three scenes for filmic continuity */
.scene-grain{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------
   SCREEN 1 — full-bleed photograph, no card
--------------------------------------------------------------- */
.intro-media{
  position:absolute;inset:0;
  overflow:hidden;
  touch-action:pan-y;
}
.intro-media .intro-slide{
  position:absolute;inset:0;
  opacity:0;
  transition:opacity 1.3s ease;
  pointer-events:none;
}
.intro-media .intro-slide.active{ opacity:1; pointer-events:auto; }
.intro-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  display:block;
  transform:scale(1.06);
  will-change:transform;
  filter:saturate(0.92) brightness(0.86) contrast(1.05);
}
/* cinematic grade: vignette + bottom-weighted darkening for text legibility */
.intro-media::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(16,27,48,0) 45%, rgba(16,27,48,0.35) 100%),
    linear-gradient(180deg, rgba(16,27,48,0.18) 0%, rgba(16,27,48,0.05) 22%, rgba(16,27,48,0.55) 66%, rgba(16,27,48,0.94) 100%);
}
.intro-dots{
  position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:4;
  display:flex;align-items:center;justify-content:center;gap:7px;
  pointer-events:none;
}
.intro-dots .dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(246,241,231,0.32);
  transition:background .4s ease, transform .4s ease, width .4s ease;
}
.intro-dots .dot.active{
  background:var(--gold);
  width:14px;border-radius:2px;
}

/* Top bar — invisible chrome, editorial nav */
.intro-header{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 22px) 24px 0;
}
.intro-header-mark{
  font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(246,241,231,0.7);
}
.intro-header-cta{
  position:relative;
  font-family:var(--font-body);font-weight:500;font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--cream);
  background:none;border:none;padding:6px 1px;min-height:44px;display:flex;align-items:center;gap:6px;
}
.intro-header-cta .cta-line{
  position:absolute;left:0;right:0;bottom:6px;height:1px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
}
/* ⭐ On narrow phones the full brand mark's letter-spacing made it almost
   as wide as the screen, crowding the "View My Booking" CTA against it. */
@media (max-width:420px){
  .intro-header{ padding-left:18px; padding-right:18px; gap:10px; }
  .intro-header-mark{ font-size:9px; letter-spacing:1.4px; }
  .intro-header-cta{ font-size:8.5px; letter-spacing:1.2px; gap:4px; flex-shrink:0; }
}

/* Lower-third signature moment */
.intro-body{
  margin-top:auto;
  position:relative;z-index:3;
  padding:0 26px calc(env(safe-area-inset-bottom,0px) + 108px);
}
.intro-eyebrow{
  font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:3.6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;
  overflow:hidden;
}
.intro-heading{
  font-family:var(--font-display);font-weight:400;font-size:52px;line-height:0.98;
  color:var(--cream);letter-spacing:.2px;
  overflow:hidden;
}
.intro-heading .line{ display:block; overflow:hidden; }
.intro-heading .line span{ display:block; }

/* Front-facing CTA text is now inline inside the header only;
   intro-cta kept for structural compat but rendered as text link */
.intro-cta{
  display:none;
}

.intro-links{
  position:absolute;left:0;right:0;
  bottom:calc(env(safe-area-inset-bottom,0px) + 42px);
  z-index:4;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:0 24px;
}
.intro-links a{
  position:relative;
  font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(246,241,231,0.55);text-decoration:none;
  min-height:44px;display:flex;align-items:center;
  padding:2px 1px;
}
.intro-links .sep{
  width:3px;height:3px;border-radius:50%;background:rgba(246,241,231,0.25);
}
.intro-links a .ulx{
  position:absolute;left:0;right:0;bottom:10px;height:1px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
}

@media (min-width:769px){
  #introScreen{ flex-direction:row; }
  .intro-media{ position:absolute; inset:0 40% 0 0; width:65%; }
  .intro-body, .intro-links{ display:none; } /* replaced by desktop entry pane */
  .intro-header{ padding:36px 44px 0; }

  .desktop-entry{
    display:flex !important;
    position:absolute;top:0;right:0;bottom:0;width:35%;
    flex-direction:column;justify-content:center;
    padding:0 52px;z-index:3;
    background:linear-gradient(180deg, var(--navy), #0c1526);
    border-left:1px solid var(--border-soft);
  }
  .desktop-entry .intro-eyebrow{ margin-bottom:14px; }
  .desktop-entry .intro-heading{ font-size:44px; margin-bottom:18px; }
  .desktop-entry .desktop-sub{
    font-family:var(--font-body);font-weight:300;font-style:italic;font-size:13.5px;line-height:1.7;
    color:var(--ivory-dim);max-width:300px;margin-bottom:38px;
  }
  .desktop-entry .intro-links{
    position:static;padding:0;justify-content:flex-start;margin-top:48px;
  }
}
.desktop-entry{ display:none; }

/* ---------------------------------------------------------------
   SHARED — editorial CTA (used on intro-header, login, otp)
--------------------------------------------------------------- */
.edi-cta{
  position:relative;
  width:100%;
  background:none;border:none;padding:14px 0 18px;
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-body);font-weight:500;font-size:12.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--cream);
  min-height:52px;
  cursor:pointer;
}
.edi-cta .arrow{ font-size:15px; transition:none; }
.edi-cta .cta-track{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(246,241,231,0.16);
}
.edi-cta .cta-fill{
  position:absolute;left:0;bottom:0;height:1px;width:0%;
  background:var(--gold);
}
.edi-cta:disabled{ opacity:.45; }

/* ---------------------------------------------------------------
   LOGIN VIDEO — mobile: full-bleed behind form
                 desktop: left panel, form on right
--------------------------------------------------------------- */

/* Mobile: video sits behind the entire login screen */
.login-video-bg{
  position:absolute;inset:0;z-index:0;
  overflow:hidden;pointer-events:none;
}
.login-video-bg video{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
  filter:saturate(0.88) brightness(0.52) contrast(1.08);
}
/* Same cinematic grade overlay as intro screen */
.login-video-bg::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(16,27,48,0) 40%, rgba(16,27,48,0.40) 100%),
    linear-gradient(180deg, rgba(16,27,48,0.30) 0%, rgba(16,27,48,0.08) 22%, rgba(16,27,48,0.65) 66%, rgba(16,27,48,0.96) 100%);
}

/* Phones: the reel plays behind the form itself, and bright frames (the
   brick-wall shot) washed the small labels and placeholders out. A deeper,
   even veil through the form band and slightly stronger small type keep
   every word readable without dimming the film's mood. */
@media (max-width:768px){
  #loginScreen .login-video-bg::after{
    background:
      radial-gradient(120% 90% at 50% 15%, rgba(16,27,48,0) 40%, rgba(16,27,48,0.40) 100%),
      linear-gradient(180deg, rgba(16,27,48,0.42) 0%, rgba(16,27,48,0.58) 22%, rgba(16,27,48,0.72) 55%, rgba(16,27,48,0.86) 75%, rgba(16,27,48,0.97) 100%);
  }
  #loginScreen .field label,
  #loginScreen .remember-row label,
  #loginScreen .login-footer{ color:rgba(246,241,231,0.66); text-shadow:0 1px 6px rgba(8,14,26,0.55); }
  #loginScreen .field.is-focused label{ color:var(--gold); }
  #loginScreen .entry-kicker,
  #loginScreen .entry-sub{ text-shadow:0 1px 8px rgba(8,14,26,0.6); }
  #loginScreen .field input::placeholder{ color:rgba(246,241,231,0.48); }
  #loginScreen .field input{ border-bottom-color:rgba(246,241,231,0.30); }
}
/* Short phones: the studio links stop floating over the bottom edge and
   follow the form instead, so the two can never collide. */
@media (max-width:768px) and (max-height:700px){
  #loginScreen .brand-links-wrap{ position:static; margin-top:auto; padding:18px 0 calc(env(safe-area-inset-bottom,0px) + 8px); }
  #loginScreen{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #loginScreen .entry-sub{ margin-bottom:30px; }
  #loginScreen .field{ margin-bottom:22px; }
  #loginScreen .login-footer{ margin-top:22px; }
}
@media (max-width:380px){
  #loginScreen .remember-row label{ letter-spacing:1.3px; }
  #loginScreen .login-footer{ letter-spacing:1.2px; font-size:9.5px; }
}

/* Phone mockup — desktop only */
.login-phone-stage{ display:none; }

/* login-form-panel: on mobile it is a plain flex column filling the screen */
.login-form-panel{
  display:flex;flex-direction:column;
  flex:1;min-height:0;
  position:relative;z-index:2;
}

/* Desktop: full-bleed video bg + phone mockup left, form right */
@media (min-width:769px){
  #loginScreen{
    flex-direction:row;
  }

  /* Desktop bg: solid navy — video lives inside phone mockup only */
  .login-video-bg{ position:absolute;inset:0;width:100%;background:var(--navy); }
  .login-video-bg video{ display:none; }
  .login-video-bg::after{ background:none; }

  /* Left half — centred phone mockup */
  .login-phone-stage{
    position:absolute;top:0;left:0;bottom:0;width:58%;
    display:flex;align-items:center;justify-content:center;
    z-index:2;pointer-events:none;
  }

  /* Phone shell — pure CSS, no images */
  .login-phone-shell{
    position:relative;
    width:clamp(180px, 18vw, 260px);
    aspect-ratio:9/19.5;
    border-radius:clamp(28px,2.8vw,42px);
    background:var(--navy);
    border:1.5px solid rgba(200,162,76,0.38);
    box-shadow:
      0 0 0 5px rgba(10,15,28,0.65),
      0 0 0 6.5px rgba(200,162,76,0.14),
      0 40px 100px rgba(0,0,0,0.70),
      0 0 60px rgba(200,162,76,0.08),
      inset 0 1px 0 rgba(255,255,255,0.07);
    overflow:hidden;
    backdrop-filter:blur(2px);
  }

  /* Notch */
  .login-phone-shell::before{
    content:'';
    position:absolute;top:0;left:50%;transform:translateX(-50%);
    width:30%;height:22px;
    background:rgba(10,15,28,0.85);
    border-radius:0 0 14px 14px;
    z-index:4;
  }

  /* Side reflection sheen */
  .login-phone-shell::after{
    content:'';
    position:absolute;inset:0;z-index:3;pointer-events:none;
    background:linear-gradient(130deg,
      rgba(255,255,255,0.07) 0%,
      rgba(255,255,255,0) 40%,
      rgba(255,255,255,0) 60%,
      rgba(255,255,255,0.03) 100%);
    border-radius:inherit;
  }

  /* Video fills the phone screen */
  .login-phone-shell video{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center;
    display:block;
    border-radius:inherit;
    z-index:1;
    filter:saturate(0.92) brightness(0.94) contrast(1.05);
  }

  /* Subtle gold glow halo around the phone */
  .login-phone-glow{
    position:absolute;
    width:clamp(200px,20vw,290px);
    aspect-ratio:9/19.5;
    border-radius:clamp(30px,3vw,44px);
    background:transparent;
    box-shadow:0 0 80px 20px rgba(200,162,76,0.09), 0 0 200px 40px rgba(200,162,76,0.05);
    pointer-events:none;
  }

  /* "Playing live" eyebrow label */
  .login-phone-label{
    position:absolute;
    bottom:calc(-1 * clamp(36px,3.8vw,52px));
    left:50%;transform:translateX(-50%);
    white-space:nowrap;
    font-family:var(--font-body);font-weight:400;font-size:8.5px;letter-spacing:3px;text-transform:uppercase;
    color:rgba(200,162,76,0.65);
    display:flex;align-items:center;gap:7px;
  }
  .login-phone-label::before{
    content:'';display:inline-block;
    width:5px;height:5px;border-radius:50%;
    background:var(--gold);
    animation:phoneLabelPulse 2s ease-in-out infinite;
  }
  @keyframes phoneLabelPulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.4;transform:scale(0.7);}
  }

  /* Form panel — right 42%, semi-transparent over video */
  .login-form-panel{
    position:absolute;top:0;right:0;bottom:0;width:42%;
    background:linear-gradient(180deg, rgba(16,27,48,0.97) 0%, rgba(12,21,38,0.98) 100%);
    border-left:1px solid rgba(200,162,76,0.12);
    display:flex;flex-direction:column;justify-content:center;
    z-index:3;
    backdrop-filter:blur(8px);
  }
}

/* ---------------------------------------------------------------
   SCREEN 2 — private entry (no card)
--------------------------------------------------------------- */
.entry-canvas{
  position:relative;z-index:2;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:0 28px;
  max-width:440px;width:100%;margin:0 auto;
}
.entry-kicker{
  font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:3.6px;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;
  text-align:left;
}
.entry-heading{
  font-family:var(--font-display);font-weight:400;font-size:44px;line-height:1.02;
  color:var(--cream);margin-bottom:16px;
}
.entry-sub{
  font-family:var(--font-body);font-weight:300;font-style:italic;font-size:13.5px;line-height:1.7;
  color:var(--ivory-dim);max-width:320px;margin-bottom:44px;
}

.login-error{
  background:rgba(23,16,14,0.72);border:1px solid rgba(193,122,99,0.45);color:#edc9bb;
  padding:12px 14px;border-radius:0;font-family:var(--font-body);font-size:12px;line-height:1.5;
  margin-bottom:20px;display:none;
  /* The login step sits over a photo/video background rather than the flat
     navy of every other screen (OTP, forgot-password, set-password) — a
     near-transparent card read fine there but washed out to near-invisible
     against the photo, so the error a client most needs to see (wrong
     password, empty field) was the hardest one to notice. A solid dark
     backing keeps it legible on every background while still reading as
     the same reddish "error" card everywhere else. */
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.field{ margin-bottom:30px; position:relative; }
.field label{
  display:block;font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:3px;text-transform:uppercase;
  color:var(--ivory-faint);margin-bottom:12px;
  transition:color .4s ease;
}
.field.is-focused label{ color:var(--gold); }
.field input{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid rgba(246,241,231,0.16);
  border-radius:0;padding:10px 2px 14px;min-height:44px;
  color:var(--cream);font-family:var(--font-display);font-size:20px;font-weight:400;letter-spacing:.5px;
  transition:border-color .3s ease;
}
.field input::placeholder{ color:rgba(246,241,231,0.28);font-weight:400;font-family:var(--font-body);font-size:13px;letter-spacing:.5px; }
.field input:focus{ border-color:transparent; outline:none; }
.field .field-line{
  position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.field.is-focused .field-line{ transform:scaleX(1); }

.login-btn{
  /* legacy class kept for JS hooks (disabled/innerHTML); visual now via .edi-cta */
  width:100%;min-height:52px;
  background:none;border:none;padding:0;margin-top:8px;
  color:var(--cream);
  font-family:var(--font-body);font-weight:500;font-size:12.5px;letter-spacing:3px;text-transform:uppercase;
  text-align:left;position:relative;
  display:flex;align-items:center;justify-content:space-between;
}
.login-btn::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(246,241,231,0.16);
}
.login-btn .btn-fill{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:0%;
  background:var(--gold);transition:width .8s cubic-bezier(.16,1,.3,1);
}
.login-btn:active .btn-fill, .login-btn:hover .btn-fill{ width:100%; }
.login-btn:disabled{ opacity:.5; }
.login-btn .spinner{ border-top-color:var(--gold) !important; }

.login-footer{
  text-align:left;margin-top:34px;
  font-family:var(--font-body);font-weight:300;font-size:9px;color:var(--ivory-faint);letter-spacing:2px;text-transform:uppercase;
}
.remember-row{
  display:flex;align-items:center;gap:10px;margin-top:22px;
}
.remember-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:14px;height:14px;flex-shrink:0;
  border:1px solid rgba(246,241,231,0.28);border-radius:2px;
  background:transparent;cursor:pointer;
  transition:border-color .3s ease,background .3s ease;
  position:relative;
}
.remember-row input[type=checkbox]:checked{
  background:var(--gold);border-color:var(--gold);
}
.remember-row input[type=checkbox]:checked::after{
  content:'';position:absolute;top:1px;left:4px;
  width:4px;height:8px;border:2px solid var(--navy);
  border-top:none;border-left:none;
  transform:rotate(45deg);
}
.remember-row label{
  font-family:var(--font-body);font-weight:300;font-size:10px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--ivory-faint);
  cursor:pointer;user-select:none;
}
.forgot-pin-link{
  background:none;border:none;padding:0;margin-top:18px;
  font-family:var(--font-body);font-weight:300;font-size:10px;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ivory-faint);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  transition:color .3s ease;display:block;
}
.forgot-pin-link:hover{ color:var(--gold); }
#forgotPinScreen{
  position:fixed;inset:0;z-index:101;
  background:var(--navy);
  display:flex;flex-direction:column;
}
.auto-login-screen{
  position:fixed;inset:0;z-index:103;
  background:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
}
.auto-login-mark{
  font-family:var(--font-body);font-weight:400;font-size:9.5px;
  letter-spacing:3.4px;text-transform:uppercase;color:var(--gold);
}
.auto-login-spinner{
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(200,162,76,0.28);border-top-color:var(--gold);
  animation:autoLoginSpin 1s linear infinite;
}
@keyframes autoLoginSpin{to{transform:rotate(360deg);}}

/* Studio footer — brand mark, not buttons */
.brand-links-wrap{
  position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);z-index:2;
  text-align:center;
}
.brand-links-label{
  font-family:var(--font-body);font-weight:400;font-size:8.5px;letter-spacing:3.4px;text-transform:uppercase;
  color:rgba(246,241,231,0.3);margin-bottom:10px;
}
.brand-links{
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.brand-links a{
  position:relative;
  font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:rgba(246,241,231,0.55);text-decoration:none;
  padding:11px 1px;min-height:44px;display:flex;align-items:center;
}
.brand-links a .ulx{
  position:absolute;left:0;right:0;bottom:9px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
}
.brand-links .dot{width:3px;height:3px;border-radius:50%;background:rgba(246,241,231,0.2);}

@media (min-width:769px){
  .entry-canvas{ max-width:380px; }
  .entry-heading{ font-size:50px; }
}


/* ---------------------------------------------------------------
   SET PASSWORD SCREEN (reuses #forgotPinScreen shell)
--------------------------------------------------------------- */
#setPasswordScreen{
  position:fixed;inset:0;z-index:101;
  background:var(--navy);
  display:none;flex-direction:column;
  overflow:hidden;
}
.pw-strength{ display:flex;align-items:center;gap:12px;margin:-4px 0 18px;visibility:hidden; }
.pw-strength-bar{ flex:1;height:2px;background:rgba(246,241,231,0.12);position:relative;overflow:hidden; }
.pw-strength-bar i{ position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold);transition:width .35s ease,background .35s ease; }
.pw-strength-label{
  font-family:var(--font-body);font-weight:300;font-size:9px;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--ivory-faint);min-width:54px;text-align:right;
}

/* ---------------------------------------------------------------
   SCREEN 3 — OTP (same hairline language)
--------------------------------------------------------------- */
#otpScreen .field input{ letter-spacing:10px;text-align:left;font-size:22px; }
.otp-resend{
  background:none;border:none;color:rgba(246,241,231,0.5);
  font-family:var(--font-body);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  padding:10px 0;margin-top:18px;text-align:left;
  border-bottom:1px solid transparent;
  min-height:44px;
}
.otp-resend:not(:disabled):hover{ color:var(--gold); }
.otp-back{
  cursor:pointer;
}
#app{display:none;min-height:100vh;flex-direction:column;overscroll-behavior:none;}
#app.show{display:flex;}
.app-header{
  padding:24px 26px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg, var(--card), var(--ink));
  position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
  box-shadow:0 16px 32px -20px rgba(0,0,0,0.5);
}
.app-header::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass-bright) 30%, var(--brass-bright) 70%, transparent);
  opacity:.4;
}
.app-header img{width:36px;height:auto;}
.app-header-text{font-family:'Cormorant Garamond',serif;font-size:16px;font-weight:600;color:var(--brass-bright);letter-spacing:.5px;}
.app-header-sub{font-size:9px;letter-spacing:2.2px;color:var(--ivory-faint);text-transform:uppercase;margin-top:2px;}
.app-header .client-name{
  margin-left:auto;font-size:12.5px;color:var(--ivory-dim);
  /* A long client name with no spaces must wrap inside the header. */
  min-width:0;overflow-wrap:anywhere;
}
/* ⭐ REMOVED: .app-header .logout-btn — dead CSS. Logout now lives
   in the hamburger panel as .nav-signout; no element in the header
   ever carries a .logout-btn class. Confirmed unused before removal. */
.tabs{
  display:none; /* ⭐ Tab-strip hidden — Booking/Event Details/Delivery Status now reachable via hamburger menu only. Remove this line to restore the bar. */
  gap:2px;padding:14px 26px 0;border-bottom:1px solid var(--border);
  overflow-x:auto;background:var(--ink);
}
.tab-btn{
  padding:12px 20px;border:none;background:none;color:var(--ivory-faint);font-size:12.5px;font-weight:600;
  letter-spacing:.3px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s;
}
.tab-btn:hover{color:var(--ivory-dim);}
.tab-btn.active{color:var(--brass-bright);border-bottom-color:var(--brass-bright);}

/* ⭐ Back bar — the only persistent way back to Dashboard now that the
   hamburger menu is the sole nav (tab strip above is display:none).
   switchTab() shows this on every view except 'booking'. Sticky so it
   stays reachable on long sections without hunting for the hamburger. */
.back-bar{
  position:sticky;top:0;z-index:12;
  background:var(--ink);border-bottom:1px solid var(--border);
  padding:0 16px;
}
.back-btn{
  display:flex;align-items:center;gap:8px;
  min-height:44px;padding:10px 4px;
  border:none;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:.3px;
  color:var(--ivory-dim);transition:color .15s;
}
.back-btn:hover,.back-btn:focus-visible{color:var(--brass-bright);}
.back-btn .back-arrow{font-size:15px;line-height:1;}
@media (min-width:769px){
  .back-bar{padding:0 32px;}
}

/* ================================================================
   HAMBURGER MENU — editorial slide-in nav, two-pane (photo + links),
   matching the studio's main-site menu style.
   ================================================================ */
.menu-trigger{
  margin-left:12px;width:38px;height:38px;border-radius:9px;
  background:rgba(255,255,255,0.035);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex-shrink:0;
}
.menu-trigger span{display:block;width:16px;height:1px;background:var(--ivory-dim);transition:transform .3s ease, opacity .2s ease;}
.menu-trigger:hover span{background:var(--brass-bright);}
.menu-trigger.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg);}
.menu-trigger.is-open span:nth-child(2){opacity:0;}
.menu-trigger.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg);}

.nav-overlay{
  position:fixed;inset:0;z-index:150;
  background:rgba(9,13,24,0.6);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.nav-overlay.is-open{opacity:1;pointer-events:auto;}

.nav-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:151;
  width:min(440px, 92vw);max-width:440px;
  display:flex;
  transform:translateX(100%);will-change:transform;
  /* Shadow only while open: parked off-screen at translateX(100%), its
     -30px/70px blur still bled back onto the page and darkened the
     right edge of every dashboard screen. */
  box-shadow:none;
  transition:transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.nav-panel.is-open{transform:translateX(0);box-shadow:-30px 0 70px rgba(0,0,0,0.5);}
.nav-photo{
  position:relative;width:30%;min-width:84px;overflow:hidden;
  display:block; /* ⭐ FIX: was display:none by default and only
    turned on at 480px+ width, so it never appeared on real phones
    (most are 375–430px wide). Now shown at all widths, just
    narrower on small screens. */
  background:linear-gradient(160deg, #1a2540, var(--ink)); /* fallback tint if the image fails to load, so it never shows as a blank void */
}
.nav-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(0.85) brightness(0.7);}
.nav-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(16,27,48,0.92) 0%, rgba(16,27,48,0.15) 55%, rgba(16,27,48,0.55) 100%);
}
.nav-photo-quote{
  position:absolute;left:14px;right:14px;bottom:20px;z-index:2;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;line-height:1.4;
  color:var(--cream);
}
.nav-photo-eyebrow{
  position:absolute;left:14px;top:18px;z-index:2;
  font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--brass-bright);
}
.nav-links-pane{
  flex:1;background:var(--ink);border-left:1px solid var(--border);
  display:flex;flex-direction:column;padding:26px 26px 22px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.nav-links-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:34px;}
.nav-links-brand{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--ivory);}
.nav-links-brand .sub{display:block;font-family:var(--font-body);font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--ivory-faint);margin-top:3px;font-weight:400;}
.nav-close{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--border-soft);background:none;
  color:var(--ivory-dim);font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nav-close:hover{border-color:var(--brass-dim);color:var(--brass-bright);}
.nav-links-eyebrow{
  font-size:8.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:14px;
}
.nav-link-list{display:flex;flex-direction:column;gap:2px;margin-bottom:auto;}
.nav-link-item{
  position:relative;
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ivory-dim);
  padding:10px 2px;text-align:left;background:none;border:none;
  transition:color .2s ease, padding-left .2s ease;
}
.nav-link-item:hover, .nav-link-item.active{color:var(--cream);padding-left:8px;}
.nav-link-item.active{color:var(--brass-bright);}
.nav-link-item .n{font-family:var(--font-body);font-size:9.5px;color:var(--ivory-faint);margin-right:10px;letter-spacing:.5px;}

/* ── Luxury accordion: My Wedding / My Account / Resources / Support ── */
.nav-accordion{display:flex;flex-direction:column;gap:0;}
.nav-group{border-top:1px solid var(--border-soft);}
.nav-group:first-child{border-top:none;}
.nav-group-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;cursor:pointer;
  padding:18px 2px 18px;
  font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ivory-faint);
  transition:color .25s ease;
}
.nav-group.is-open>.nav-group-head{color:var(--brass-bright);}
.nav-group-head:hover{color:var(--brass-bright);}
.nav-group-icon{
  position:relative;width:11px;height:11px;flex-shrink:0;margin-left:12px;
}
.nav-group-icon::before,.nav-group-icon::after{
  content:'';position:absolute;top:50%;left:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
}
.nav-group-icon::before{width:11px;height:1px;}
.nav-group-icon::after{width:1px;height:11px;}
.nav-group.is-open .nav-group-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.nav-group-body{
  height:0;overflow:hidden;
  transition:height .5s cubic-bezier(.16,1,.3,1);
}
.nav-group-body-inner{
  display:flex;flex-direction:column;gap:2px;
  padding-bottom:8px;
}
.nav-group .nav-link-item{
  opacity:0;transform:translateY(6px);
  transition:color .2s ease, padding-left .2s ease, opacity .4s ease, transform .4s ease;
}
.nav-group.is-open .nav-link-item{opacity:1;transform:translateY(0);}
.nav-group.is-open .nav-link-item:nth-child(1){transition-delay:.05s;}
.nav-group.is-open .nav-link-item:nth-child(2){transition-delay:.09s;}
.nav-group.is-open .nav-link-item:nth-child(3){transition-delay:.13s;}
.nav-group.is-open .nav-link-item:nth-child(4){transition-delay:.17s;}
.nav-group.is-open .nav-link-item:nth-child(5){transition-delay:.21s;}
.nav-group.is-open .nav-link-item:nth-child(6){transition-delay:.25s;}
.nav-group.is-open .nav-link-item:nth-child(7){transition-delay:.29s;}
.nav-concierge{
  margin-top:26px;padding:18px 0 4px;border-top:1px solid var(--border-soft);
}
.nav-concierge-title{
  font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--cream);letter-spacing:.2px;
}
.nav-concierge-sub{font-size:11px;color:var(--ivory-faint);margin-top:3px;}
.nav-concierge-link{
  display:inline-block;margin-top:10px;font-size:10.5px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--brass-bright);text-decoration:none;
}
.nav-concierge-link:hover{opacity:.8;}
.nav-signout{
  margin-top:22px;padding:11px 0;text-align:left;
  font-size:10.5px;letter-spacing:1.6px;text-transform:uppercase;color:#e3a794;
  background:none;border:none;border-top:1px solid var(--border-soft);
}
.nav-links-social{display:flex;gap:14px;margin-top:26px;padding-top:18px;border-top:1px solid var(--border-soft);}
.nav-links-social a{color:var(--ivory-faint);}
.nav-links-social a:hover{color:var(--brass-bright);}
.nav-links-foot{
  margin-top:14px;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ivory-faint);
  display:flex;justify-content:space-between;
}


/* ================================================================
   DASHBOARD HERO — cinematic continuation of the login carousel.
   Reuses the exact same hero-2..hero-5 images and the same
   crossfade + Ken Burns technique as .intro-media, via its own
   #dashHeroMedia/.dash-hero-slide markup (see JS: startDashHeroCarousel).
   Responsive aspect-ratio (not a fixed desktop height) keeps faces
   in frame and avoids awkward cropping across 375–430px.
   ================================================================ */
.dash-hero{
  position:relative;overflow:hidden;
  /* Mobile: tall crop, no text inside */
  height:72vw;min-height:280px;max-height:520px;
}
/* ── Sliding-panel hero carousel ── */
.dash-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0c1220;}
.dash-hero-track{
  display:flex;height:100%;width:100%;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}
.dash-hero-slide{
  position:relative;flex:0 0 100%;width:100%;height:100%;
  opacity:1;pointer-events:none;
}
.dash-hero-slide img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 40%;
  display:block;
}
/* Per-image vertical anchoring — prevents sky-heavy shots from
   showing empty space at top on the 16:9 desktop crop */
.dash-hero-slide[data-pos="top"] img{ object-position:center 15%; }
.dash-hero-slide[data-pos="center"] img{ object-position:center 50%; }
.dash-hero-slide[data-pos="bottom"] img{ object-position:center 75%; }
.dash-hero-slide[data-pos="mid-top"] img{ object-position:center 30%; }
/* Very subtle top-to-transparent vignette only — image stays vivid */
.dash-hero-media::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,18,32,0.18) 0%,rgba(12,18,32,0) 40%);
}
/* No text inside the carousel — inner is hidden */
.dash-hero-inner{ display:none; }

.dash-hero-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:7px;
  pointer-events:none;
}
.dash-hero-dots .dot{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,242,0.40);
  transition:background .4s ease,width .4s ease;
}
.dash-hero-dots .dot.active{
  background:#E4C36F;width:14px;border-radius:2px;
}

/* ── LUXURY WELCOME CARD — sits between hero and status bar ── */
.dash-welcome-card{
  position:relative;
  background:linear-gradient(135deg,#0B1220 0%,#101B30 60%,#0d1628 100%);
  border-bottom:1px solid rgba(200,162,76,0.18);
  overflow:hidden;
  padding:32px 28px 28px;
  text-align:center;
}
/* Subtle corner gold glow */
.dash-welcome-card::before{
  content:'';position:absolute;
  top:-60px;left:50%;transform:translateX(-50%);
  width:320px;height:120px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(200,162,76,0.13) 0%,rgba(200,162,76,0) 70%);
  pointer-events:none;
}
/* Thin gold rule above the name */
.dash-welcome-rule{
  width:40px;height:1px;
  background:linear-gradient(90deg,transparent,#C8A24C,transparent);
  margin:0 auto 18px;
}
.dash-welcome-eyebrow{
  font-family:'Jost',sans-serif;font-weight:400;
  font-size:9px;letter-spacing:4px;text-transform:uppercase;
  color:rgba(200,162,76,0.75);
  margin-bottom:10px;
}
.dash-welcome-name{
  font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;
  font-size:44px;line-height:1.05;
  color:#FFFFF2;letter-spacing:.3px;
  /* A client name with no spaces wraps here rather than being clipped
     mid-word at the card edge. */
  overflow-wrap:anywhere;
  margin-bottom:14px;
}
/* Second thin rule below name */
.dash-welcome-rule-2{
  width:60px;height:1px;
  background:linear-gradient(90deg,transparent,#C8A24C,transparent);
  margin:0 auto 18px;
}
.dash-welcome-tagline{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
  font-size:17px;line-height:1.5;
  color:rgba(200,162,76,0.90);
  margin-bottom:10px;
}
.dash-welcome-caption{
  font-family:'Jost',sans-serif;font-weight:300;
  font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:rgba(246,241,231,0.42);
}

/* Desktop: wider card, larger name */
@media (min-width:769px){
  .dash-hero{
    height:auto;
    aspect-ratio:16/9;
    min-height:unset;
    max-height:680px;
  }
  .dash-hero-slide img{ object-position:center 25%; }
  .dash-welcome-card{ padding:40px 40px 34px; }
  .dash-welcome-name{ font-size:58px; }
  .dash-welcome-tagline{ font-size:20px; }
}
@media (max-width:420px){
  .dash-hero{height:80vw;min-height:240px;}
  .dash-welcome-name{font-size:36px;}
}

/* Light-theme overrides for #app — keep card dark even on cream bg */
#app .dash-welcome-card{
  background:linear-gradient(135deg,#0B1220 0%,#101B30 60%,#0d1628 100%) !important;
}
#app .dash-welcome-name{ color:#FFFFF2; }
#app .dash-welcome-tagline{ color:rgba(200,162,76,0.90); }
#app .dash-welcome-eyebrow{ color:rgba(200,162,76,0.75); }
#app .dash-welcome-caption{ color:rgba(246,241,231,0.42); }

/* ── Dashboard-only elements: hero, welcome card, feature strip, inv card ──
   These show only on the Dashboard (booking) tab. When any other tab is
   active the .tabs element gets a data-active attribute set by switchTab,
   and these elements hide via the sibling/descendant selector below.     */
.dash-hero-hidden{ display:none !important; }
.dash-welcome-card-hidden{ display:none !important; }
.feature-strip-hidden{ display:none !important; }
.inv-dash-card-hidden{ display:none !important; }
.dash-status-bar-hidden{ display:none !important; }

/* Status pill + lifecycle progress, relocated below the photographic
   hero (kept, not removed — just out of the image so the hero stays
   uncluttered per the luxury/editorial direction). */
.dash-status-bar{max-width:640px;margin:22px auto 0;padding:0 26px;}
.dash-hero-sub{
  font-size:13.5px;color:var(--ivory-dim);letter-spacing:.2px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;text-align:center;
}
.dash-hero-sub .pill{
  display:inline-flex;align-items:center;background:rgba(200,162,76,0.14);
  border:1px solid var(--brass-dim);color:var(--brass-bright);
  padding:5px 14px;border-radius:20px;font-size:11.5px;font-weight:600;letter-spacing:.3px;
  /* A Registry status with no spaces must wrap, not widen the viewport. */
  max-width:100%;overflow-wrap:anywhere;
}
.dash-hero-meta{
  font-size:11.5px;color:var(--ivory-faint);letter-spacing:.3px;
  /* Same for a long venue / event type / date with no spaces. */
  max-width:100%;overflow-wrap:anywhere;
}
.dash-progress{margin-top:20px;}
.dash-progress-track{
  position:relative;height:2px;background:var(--border-soft);border-radius:2px;
  margin:0 4px 14px;
}
.dash-progress-fill{
  position:absolute;left:0;top:0;height:100%;border-radius:2px;
  background:linear-gradient(90deg, var(--brass), var(--brass-bright));
  transition:width .8s cubic-bezier(.16,1,.3,1);
}
.dash-progress-fill::after{
  content:'';position:absolute;right:-3px;top:50%;width:8px;height:8px;
  transform:translateY(-50%);border-radius:50%;
  background:var(--brass-bright);box-shadow:0 0 0 3px rgba(200,162,76,0.18), 0 0 12px rgba(200,162,76,0.7);
  animation:progressPulse 2.4s ease-in-out infinite;
}
@keyframes progressPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(200,162,76,0.18), 0 0 12px rgba(200,162,76,0.7);}
  50%{box-shadow:0 0 0 6px rgba(200,162,76,0.1), 0 0 20px rgba(200,162,76,0.9);}
}
.dash-progress-labels{
  display:flex;justify-content:space-between;gap:4px;
}
.dash-progress-labels span{
  flex:1;font-size:8.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ivory-faint);
  position:relative;
}
.dash-progress-labels span:first-child{text-align:left;}
.dash-progress-labels span:last-child{text-align:right;}
.dash-progress-labels span.reached{color:var(--brass-bright);font-weight:600;}

/* ── Quick-stat chips (engagement row under the hero) ─────────────── */
.dash-stat-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  margin-top:22px;
}
.dash-stat-chip{
  background:linear-gradient(168deg, var(--surface-deep-2), var(--surface-deep));
  border:1px solid var(--hairline);border-radius:6px;
  padding:14px 10px 12px;text-align:center;position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.dash-stat-chip::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:var(--hairline-strong);
}
@media (hover:hover){.dash-stat-chip:hover{transform:translateY(-3px);border-color:var(--hairline-strong);}}
/* Hero chip — the primary reason to check back gets visual priority */
.dash-stat-chip.is-hero{
  background:linear-gradient(168deg, rgba(200,162,76,0.12), var(--surface-deep) 70%);
  border-color:var(--brass-dim);
}
.dash-stat-chip.is-hero::before{background:linear-gradient(90deg,transparent,var(--brass-bright),transparent);opacity:.6;}
.dash-stat-chip.is-hero .dash-stat-num{
  text-shadow:0 0 24px rgba(200,162,76,0.5);
  animation:statGlow 3s ease-in-out infinite;
}
@keyframes statGlow{
  0%,100%{text-shadow:0 0 18px rgba(200,162,76,0.35);}
  50%{text-shadow:0 0 28px rgba(200,162,76,0.65);}
}
.dash-stat-num{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-style:italic;
  font-size:26px;color:var(--brass-bright);line-height:1;
  text-shadow:0 0 18px rgba(200,162,76,0.25);
}
.dash-stat-label{
  margin-top:6px;font-size:8.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--ivory-faint);line-height:1.4;
}
@media (min-width:769px){
  .dash-stat-row{max-width:420px;margin-left:auto;margin-right:auto;}
  .dash-stat-num{font-size:30px;}
}

.main{flex:1;padding:30px 24px 8px;max-width:660px;width:100%;margin:0 auto;}
.view{display:none;}
.view.active{display:block;animation:viewFade .35s cubic-bezier(.16,1,.3,1);}
@keyframes viewFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* Staggered panel entrance — cards rise in sequence, not all at once,
   so the first view after login feels choreographed rather than static. */
.view.active > .panel,
.view.active > .refer-panel,
.view.active > .anniv-panel,
.view.active > .commit-card{
  animation:panelRise .6s cubic-bezier(.16,1,.3,1) backwards;
}
.view.active > *:nth-child(1){animation-delay:.05s;}
.view.active > *:nth-child(2){animation-delay:.13s;}
.view.active > *:nth-child(3){animation-delay:.21s;}
.view.active > *:nth-child(4){animation-delay:.29s;}
.view.active > *:nth-child(5){animation-delay:.37s;}
@keyframes panelRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion: reduce){
  .view.active > .panel, .view.active > .refer-panel, .view.active > .anniv-panel, .view.active > .commit-card{animation:none;}
}

/* ⭐ NEW: generic editorial scroll-reveal, used by the vows / proof /
   timeline / collection sections. Pure CSS transition driven by a
   single lightweight IntersectionObserver (see JS: setupScrollReveal_)
   — no new animation library. Respects prefers-reduced-motion via
   the existing global rule below. */
.reveal-on-scroll{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0);}
.panel{
  background:linear-gradient(168deg, var(--surface-deep-2), var(--surface-deep));
  border:1px solid var(--hairline);
  border-radius:6px;padding:32px 28px;margin-bottom:24px;
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,0.03) inset, 0 18px 40px -22px rgba(0,0,0,0.55);
  transition:box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.panel::before{
  content:'';position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg, transparent, var(--brass-bright) 18%, var(--brass-bright) 82%, transparent);
  opacity:.4;
}
@media (hover:hover){
  .panel:hover{
    border-color:var(--hairline-strong);
    box-shadow:0 1px 0 rgba(255,255,255,0.04) inset, 0 24px 54px -22px rgba(0,0,0,0.65);
    transform:translateY(-2px);
  }
}
.panel-title{
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ivory);margin-bottom:18px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.panel-eyebrow{
  font-size:9px;letter-spacing:2.4px;text-transform:uppercase;color:var(--brass);margin-bottom:8px;font-weight:600;
}
.summary-row{display:flex;justify-content:space-between;align-items:baseline;padding:11px 2px;border-bottom:1px dashed var(--border-soft);font-size:14px;gap:12px;border-radius:3px;transition:background .2s ease,padding-left .2s ease;}
.summary-row:last-child{border-bottom:none;}
@media (hover:hover){.summary-row:hover{background:rgba(200,162,76,0.035);padding-left:8px;}}
.summary-row .lbl{color:var(--ivory-faint);font-size:11.5px;letter-spacing:.2px;flex-shrink:0;}
.summary-row .val{font-weight:600;text-align:right;min-width:0;overflow-wrap:break-word;word-break:break-word;color:var(--ivory);}
.val.green{color:var(--sage);}
.val.red{color:var(--clay);}
/* ⭐ REMOVED: .account-toggle / .panel-title:hover .account-toggle —
   was the visual styling for the toggle icon inside the already-
   removed togglePaymentSummary() feature. Orphaned now that the
   feature itself is gone. */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:5px 13px 5px 10px;border-radius:20px;
  font-size:10px;font-weight:600;letter-spacing:.5px;
  box-shadow:0 0 0 1px currentColor inset;opacity:.96;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 6px currentColor;flex-shrink:0;}
.badge-confirmed{background:rgba(122,155,126,0.12);color:var(--sage);}
.badge-pending{background:rgba(184,147,90,0.12);color:var(--brass-bright);}
.badge-paid{background:rgba(122,155,126,0.12);color:var(--sage);}
.badge-partial{background:rgba(184,147,90,0.12);color:var(--brass-bright);}
.badge-due{background:rgba(193,122,99,0.14);color:var(--clay);}
.pay-sched-list{margin-top:6px;}
.pay-sched-item{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px dashed var(--border-soft);border-radius:3px;transition:background .2s ease,padding-left .2s ease;}
.pay-sched-item:last-child{border-bottom:none;}
@media (hover:hover){.pay-sched-item:hover{background:rgba(200,162,76,0.035);padding-left:8px;}}
.pay-sched-check{width:16px;height:16px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px;border:1px solid var(--border);}
.pay-sched-check.paid{background:var(--sage);border-color:var(--sage);color:#101B30;}
.pay-sched-body{flex:1;min-width:0;}
.pay-sched-label{font-size:12.5px;color:var(--ivory);overflow-wrap:anywhere;}
.pay-sched-date{font-size:10.5px;color:var(--ivory-faint);margin-top:1px;overflow-wrap:anywhere;}
.pay-sched-amt{font-size:13px;font-weight:600;white-space:nowrap;}
.nav-section-label{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--ivory-faint);margin:18px 0 6px;padding-top:14px;border-top:1px solid var(--border-soft);}
.nav-section-label:first-of-type{margin-top:0;padding-top:0;border-top:none;}
.faq-preview-panel{padding:28px 0;border-top:1px solid var(--border-soft);text-align:center;}
.faq-preview-eyebrow{font-size:9.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:10px;font-weight:500;}
.faq-preview-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:var(--ivory-dim);margin-bottom:16px;line-height:1.4;}
.faq-preview-viewall{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-bright);cursor:pointer;text-decoration:none;padding:6px 2px;position:relative;}
.faq-preview-viewall .arrow{transition:transform .2s ease;}
.faq-preview-viewall:hover .arrow{transform:translateX(3px);}




.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:4px;
  font-size:11.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;width:100%;margin-top:9px;
  background:transparent;border:1px solid transparent;
  transition:background .3s ease, border-color .3s ease, color .3s ease, transform .18s ease, box-shadow .3s ease;
}
.btn-gold{border-color:var(--brass);color:var(--brass-bright);}
.btn-gold::after{
  content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.btn-gold:hover{
  background:linear-gradient(135deg, var(--brass-bright), #E4C36F 55%, var(--brass-bright));
  color:var(--ink);border-color:var(--brass-bright);transform:translateY(-2px);
  box-shadow:0 10px 28px -10px rgba(200,162,76,0.55);
}
.btn-gold:hover::after{animation:btnShimmer 1.1s ease forwards;}
@keyframes btnShimmer{from{left:-60%;}to{left:130%;}}
.btn-gold:active{transform:translateY(0);}
.btn-ghost{border-color:var(--hairline-strong);color:var(--ivory);background:var(--surface-deep);}
.btn-ghost:hover{border-color:var(--brass-dim);color:var(--cream);background:rgba(200,162,76,0.06);transform:translateY(-1px);}
.ics-hint{font-size:10px;color:var(--ivory-faint);margin-top:5px;letter-spacing:0.2px;}
.btn:disabled{opacity:.5;}
/* ⭐ REMOVED: .countdown-banner/.countdown-num/.countdown-label —
   dead CSS from the pre-redesign countdown display, fully
   superseded by the .cd-frame/.cd-num/.cd-label system below (the
   10 selectable luxury styles). Confirmed zero usages before removal. */

/* ================================================================
   COUNTDOWN FRAMES — 12 selectable luxury display styles.
   Structure is shared (.cd-frame > .cd-num + .cd-label [+ .cd-sub]);
   each cd-frame--N variant re-skins it. Picker strip lets the
   client choose and persists via localStorage.
   ================================================================ */
/* ⭐ NEW: editorial service-commitment card ("48 hrs / First RAW
   Previews"). Deliberately not a rounded SaaS card — thin top rule,
   large quiet numeral, restrained CTA, matches .panel language. */
.commit-card{
  border-top:1px solid var(--brass-dim);border-bottom:1px solid var(--hairline);
  padding:24px 2px;margin-bottom:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.commit-num{
  font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:500;line-height:1;color:var(--brass-bright);
  flex-shrink:0;font-style:italic;
}
.commit-num span{font-size:14px;margin-left:3px;font-style:normal;letter-spacing:.5px;text-transform:uppercase;}
.commit-card.done .commit-num{font-size:28px;color:var(--sage);}
.commit-body{flex:1;min-width:180px;}
.commit-label{font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:6px;font-weight:600;}
.commit-text{font-size:13px;color:var(--ivory-dim);line-height:1.6;}
.commit-cta{
  flex-shrink:0;background:none;border:none;color:var(--brass-bright);font-size:10.5px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;cursor:pointer;padding:6px 0;white-space:nowrap;
  border-bottom:1px solid var(--brass-dim);transition:border-color .15s ease;
}
.commit-cta:hover{border-color:var(--brass-bright);}
.commit-cta .arrow{transition:transform .2s ease;display:inline-block;}
.commit-cta:hover .arrow{transform:translateX(3px);}
@media (max-width:480px){
  .commit-card{padding:20px 2px;gap:14px;}
  .commit-num{font-size:32px;}
  .commit-cta{width:100%;text-align:left;}
}



































.field-form{margin-bottom:15px;}
.field-form label{display:block;font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:7px;}
.field-form input, .field-form textarea{
  width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);
  border-radius:9px;padding:11px 13px;color:var(--ivory);font-size:13px;
}
.field-form input:focus, .field-form textarea:focus{outline:none;border-color:var(--brass);}
.mood-grid{display:flex;flex-wrap:wrap;gap:8px;}
.mood-chip{
  padding:9px 15px;border-radius:20px;font-size:11.5px;letter-spacing:.2px;
  background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);color:var(--ivory-dim);
  transition:background .15s, border-color .15s, color .15s;
}
.mood-chip:hover{border-color:var(--brass-dim);}
.mood-chip.active{background:rgba(200,162,76,0.14);border-color:var(--brass-bright);color:var(--brass-bright);font-weight:600;}
.weather-card{
  display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;margin-bottom:20px;
  background:linear-gradient(168deg, rgba(122,155,126,0.08), rgba(255,255,255,0.006));
  border:1px solid rgba(122,155,126,0.22);
}
.weather-ic{font-size:30px;line-height:1;flex-shrink:0;}
.weather-title{font-size:12.5px;font-weight:600;color:var(--ivory);}
.weather-sub{font-size:11px;color:var(--ivory-dim);margin-top:2px;}
.milestone-note{
  display:flex;align-items:flex-start;gap:12px;padding:15px 18px;border-radius:14px;margin-bottom:20px;
  background:linear-gradient(168deg, rgba(255,255,255,0.028), rgba(255,255,255,0.006));
  border:1px solid var(--border-soft);
}
.milestone-ic{color:var(--brass-bright);font-size:15px;flex-shrink:0;margin-top:1px;}
.milestone-text{font-size:12.5px;color:var(--ivory-dim);line-height:1.6;font-style:italic;font-family:var(--font-display);font-size:14.5px;}
.itin-mark{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:8px;}
.itin-title{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--ivory);margin-bottom:22px;}
.itin-rows{border-top:1px solid var(--border-soft);margin-bottom:20px;}
.itin-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-soft);font-size:13px;}
.itin-lbl{color:var(--ivory-faint);}
.itin-val{color:var(--ivory);font-weight:600;text-align:right;}
.itin-note{font-size:11.5px;color:var(--ivory-faint);line-height:1.6;margin-bottom:20px;font-style:italic;}
/* ⭐ NEW: "Your Collection" package presentation */
.collection-panel{padding:26px 26px 28px;}
.collection-name{
  font-family:'Cormorant Garamond',serif;font-size:28px;font-style:italic;color:var(--brass-bright);
  letter-spacing:.3px;line-height:1.2;overflow-wrap:break-word;word-break:break-word;
}
.collection-features{margin-top:16px;display:flex;flex-direction:column;}
.collection-feature{
  font-size:12.5px;color:var(--ivory-dim);padding:9px 0;border-bottom:1px dashed var(--border-soft);
}
.collection-feature:last-child{border-bottom:none;}
.collection-feature::before{content:'—';color:var(--brass-dim);margin-right:9px;}

/* ⭐ NEW: "Seven Vows. Seven Frames." brand-story section — the
   most emotionally significant section in the portal per spec:
   large editorial type, thin brass rule, staggered numbered
   sequence, generous whitespace, no cards, no icons. */
.vows-section{
  border-top:1px solid var(--brass-dim);padding:40px 4px 8px;margin:8px 0 28px;
}
.vows-heading{
  font-family:'Cormorant Garamond',serif;font-size:30px;line-height:1.24;color:var(--ivory);
  margin-bottom:34px;letter-spacing:.2px;font-weight:400;
}
.vows-heading em{color:var(--brass-bright);font-style:italic;}
.vows-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin-bottom:32px;
}
.vows-card{
  background:linear-gradient(168deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
  border:1px solid var(--border-soft);border-top:1px solid var(--brass-dim);
  border-radius:2px;padding:20px 16px;
  transition:border-color .3s ease, transform .3s ease;
}
.vows-card:hover{border-color:var(--brass-dim);transform:translateY(-2px);}
.vows-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.vows-ring{
  font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--brass-bright);
  font-size:15px;width:26px;height:26px;flex-shrink:0;border:1px solid var(--brass-dim);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.vows-icon{width:22px;height:22px;color:var(--brass-bright);opacity:.85;flex-shrink:0;}
.vows-card-label{font-size:12.5px;letter-spacing:.7px;color:var(--ivory-dim);text-transform:uppercase;font-weight:500;line-height:1.35;display:block;}
.vows-copy{line-height:1.9;color:var(--ivory-faint);max-width:440px;font-style:italic;font-family:'Cormorant Garamond',serif;font-size:16px;}
@media (min-width:640px){
  .vows-heading{font-size:36px;}
  .vows-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
  .vows-card-label{font-size:13px;}
}
@media (max-width:380px){
  .vows-grid{grid-template-columns:1fr 1fr;gap:9px;}
  .vows-card{padding:16px 13px;}
}

/* ⭐ NEW: "Proof. Not Promises." evidence grid */
.proof-section{border-top:1px solid var(--brass-dim);padding:34px 4px 8px;margin:8px 0 24px;}
.proof-eyebrow{font-size:9.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--brass-bright);font-weight:500;margin-bottom:14px;}
.proof-heading{font-family:'Cormorant Garamond',serif;font-size:26px;line-height:1.28;color:var(--ivory);letter-spacing:.2px;}
.proof-heading em{color:var(--brass-bright);font-style:italic;}
.proof-sub{font-size:12px;color:var(--ivory-faint);margin-top:12px;margin-bottom:26px;letter-spacing:.3px;}
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.proof-card{
  background:linear-gradient(168deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
  border:1px solid var(--border-soft);border-top:1px solid var(--brass-dim);
  border-radius:2px;padding:18px 16px;display:flex;flex-direction:column;
  transition:border-color .3s ease, transform .3s ease;
}
.proof-card:hover{border-color:var(--brass-dim);transform:translateY(-2px);}
.proof-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.proof-icon{width:22px;height:22px;color:var(--brass-bright);opacity:.9;flex-shrink:0;}
.proof-n{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--brass-dim);font-size:13px;}
.proof-label{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass-bright);font-weight:600;margin-bottom:6px;}
.proof-text{font-size:11.5px;color:var(--ivory-faint);line-height:1.5;}
@media (min-width:640px){
  .proof-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
}
@media (max-width:380px){
  .proof-grid{gap:9px;}
  .proof-card{padding:15px 13px;}
}

/* ⭐ NEW: "Follow & Tag Us" — closing dashboard section. Same card
   language as .vows-card / .proof-card for visual consistency. */
.social-section{border-top:1px solid var(--brass-dim);padding:34px 4px 8px;margin:8px 0 8px;}
.social-eyebrow{font-size:9.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--brass-bright);font-weight:500;margin-bottom:14px;}
.social-heading{font-family:'Cormorant Garamond',serif;font-size:26px;line-height:1.28;color:var(--ivory);letter-spacing:.2px;margin-bottom:12px;}
.social-heading em{color:var(--brass-bright);font-style:italic;}
.social-sub{font-size:12.5px;color:var(--ivory-faint);line-height:1.6;margin-bottom:24px;max-width:440px;}
/* minmax(0,1fr): plain 1fr won't shrink a column below its longest
   word ("thesevenstepsstudio.com"), which pushed the cards past the
   right edge on 320px phones. */
.social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.social-card{
  background:linear-gradient(168deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
  border:1px solid var(--border-soft);border-top:1px solid var(--brass-dim);
  border-radius:2px;padding:18px 16px;display:flex;flex-direction:column;
  text-decoration:none;transition:border-color .3s ease, transform .3s ease;
}
.social-card:hover{border-color:var(--brass-dim);transform:translateY(-2px);}
.social-icon{width:24px;height:24px;color:var(--brass-bright);opacity:.9;margin-bottom:14px;flex-shrink:0;}
.social-card-name{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--ivory);font-weight:600;margin-bottom:4px;}
.social-card-handle{font-size:11.5px;color:var(--ivory-faint);line-height:1.4;overflow-wrap:anywhere;}
@media (min-width:640px){
  .social-heading{font-size:30px;}
  .social-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
}
@media (max-width:380px){
  .social-grid{gap:9px;}
  .social-card{padding:15px 13px;}
}

/* ⭐ NEW: "The Timeline" editorial delivery-framework panel.
   Desktop: horizontal row with thin connecting rule.
   Mobile: connected vertical sequence (not wrapped horizontal chips) —
   each step gets its own line with a numbered marker and a
   continuous vertical brass rule threading through them. */
.timeline-panel{padding:28px 26px 30px;}
.timeline-num{
  font-family:'Cormorant Garamond',serif;font-size:38px;font-style:italic;font-weight:500;color:var(--brass-bright);
  line-height:1;margin-top:2px;
}
.timeline-num span{font-size:13px;margin-left:5px;font-style:normal;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-faint);}
.timeline-sub{font-size:13px;color:var(--ivory-dim);margin-top:10px;margin-bottom:26px;}
.timeline-steps{display:flex;align-items:center;gap:0;}
.timeline-step-wrap{display:flex;align-items:center;flex:1;min-width:0;}
.timeline-step-wrap:last-child{flex:0 0 auto;}
.timeline-step{
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex-shrink:0;
}
.timeline-step-n{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--brass-dim);font-size:12px;}
.timeline-step-label{
  font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-faint);font-weight:600;
  white-space:nowrap;
}
.timeline-rule{flex:1;height:1px;background:var(--brass-dim);margin:0 10px;min-width:12px;}
@media (max-width:640px){
  .timeline-steps{flex-direction:column;align-items:stretch;position:relative;gap:0;}
  .timeline-step-wrap{flex-direction:column;align-items:stretch;position:relative;}
  .timeline-step-wrap:last-child{flex:1;}
  .timeline-step{
    flex-direction:row;align-items:center;gap:14px;padding:12px 0;position:relative;padding-left:2px;
  }
  .timeline-step-n{
    width:22px;height:22px;flex-shrink:0;border:1px solid var(--brass-dim);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:10.5px;
  }
  .timeline-step-label{font-size:11px;}
  .timeline-rule{width:1px;height:16px;margin:0 0 0 11px;flex:none;}
}


.stage-track{position:relative;margin:10px 0 4px;padding-left:6px;}
.stage-track::before{
  content:'';position:absolute;left:9px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg, var(--brass-dim), var(--border-soft));
}
.stage-item{position:relative;display:flex;align-items:flex-start;gap:16px;padding:11px 0;font-size:12.5px;color:var(--ivory-faint);}
.stage-item.done{color:var(--sage);}
.stage-item.current{color:var(--brass-bright);font-weight:600;}
.stage-dot{
  width:9px;height:9px;border-radius:50%;background:var(--ivory-faint);flex-shrink:0;margin-top:3px;
  position:relative;z-index:1;border:2px solid var(--ink);
}
.stage-item.done .stage-dot{background:var(--sage);}
.stage-item.current .stage-dot{
  background:var(--brass-bright);
  box-shadow:0 0 0 4px rgba(214,181,126,0.18);
  animation:pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(214,181,126,0.18);}50%{box-shadow:0 0 0 7px rgba(214,181,126,0.08);}}
.empty-note{font-size:12.5px;color:var(--ivory-faint);line-height:1.75;}

/* ── Shimmer skeleton for lazy-loaded content ────────────────────
   Used wherever a panel's real data arrives after a background
   fetch (reviews, referrals) so any brief loading moment reads as
   an intentional, polished loading state rather than a stall or
   glitch — matching the studio's gold-on-navy brand rather than a
   generic spinner. */
@keyframes shimmerSweep{
  0%{ background-position:-400px 0; }
  100%{ background-position:400px 0; }
}
.skel-block{
  border-radius:9px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0.035) 25%,
    rgba(184,147,90,0.13) 50%,
    rgba(255,255,255,0.035) 75%);
  background-size:800px 100%;
  animation:shimmerSweep 1.6s ease-in-out infinite;
}
.skel-line{height:13px;margin-bottom:10px;}
.skel-line.short{width:55%;}
.skel-line.medium{width:78%;}
.skel-line.long{width:100%;}
.skel-stars{height:26px;width:150px;margin-bottom:14px;}
.skel-pill{height:34px;width:100%;border-radius:10px;margin-top:6px;}

/* ⭐ NEW: layout-matched shimmer for a tab's very first load (booking,
   event form, delivery, account) — mirrors a real .panel's shape
   (title bar + a few summary rows) instead of a bare spinner, so the
   dashboard never looks broken during a cold Apps Script start. */
.panel-skel{
  background:linear-gradient(168deg, var(--surface-deep-2), var(--surface-deep));
  border:1px solid var(--hairline);border-radius:6px;padding:32px 28px;margin-bottom:24px;
}
.panel-skel .skel-block{height:22px;width:46%;margin-bottom:22px;}
.panel-skel .skel-row{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px dashed var(--border-soft);gap:12px;}
.panel-skel .skel-row .skel-block{height:13px;margin-bottom:0;}
.panel-skel .skel-row .skel-block.lbl{width:38%;}
.panel-skel .skel-row .skel-block.val{width:22%;}

.lock-note{
  background:rgba(184,147,90,0.06);border:1px solid var(--brass-dim);border-radius:11px;
  padding:13px 15px;font-size:12px;color:var(--ivory-dim);margin-bottom:15px;line-height:1.65;
}
.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.15);border-top-color:var(--brass-bright);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;}

/* ⭐ NEW: pull-to-refresh indicator — sits at the very top of #app, just
   under the fixed header, and is translated down by ptrTouch_ as the
   client drags. Kept out of layout flow (position:absolute) so it never
   pushes content down; opacity/scale only appear once dragging starts. */
.ptr-indicator{
  position:absolute; left:0; right:0; top:0;
  display:flex; align-items:center; justify-content:center;
  height:56px; margin-top:-56px; /* parked above its own slot until pulled */
  pointer-events:none; z-index:40;
  opacity:0; transform:translateY(0) scale(0.7);
  transition:opacity .18s ease, transform .18s ease;
}
.ptr-indicator.ptr-visible{ opacity:1; }
.ptr-indicator.ptr-dragging{ transition:none; }
.ptr-indicator .ptr-spinner{
  width:22px;height:22px;border-radius:50%;
  border:2.5px solid var(--brass-dim); border-top-color:var(--brass-bright);
  display:inline-block;
}
.ptr-indicator.ptr-spin .ptr-spinner{ animation:spin .7s linear infinite; }
@keyframes spin{to{transform:rotate(360deg);}}
.full-loading{display:flex;align-items:center;justify-content:center;padding:56px;gap:12px;color:var(--ivory-faint);}
#toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card);border:1px solid var(--brass-dim);color:var(--ivory);
  padding:13px 22px;border-radius:11px;font-size:13px;box-shadow:var(--shadow-sm);
  opacity:0;pointer-events:none;transition:opacity .25s, transform .25s;z-index:200;max-width:90vw;
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.error{border-color:rgba(193,122,99,0.4);}
.resource-list{display:flex;flex-direction:column;gap:9px;margin-top:4px;}
.resource-link{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;
  background:rgba(255,255,255,0.025);border:1px solid var(--border-soft);text-decoration:none;
  transition:background .15s, border-color .15s, transform .15s;
  width:100%;text-align:left;font-family:inherit;color:inherit;
}
.resource-link:hover{background:rgba(255,255,255,0.05);border-color:var(--brass-dim);transform:translateX(2px);}
.resource-ic{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:rgba(255,255,255,0.04);border:1px solid var(--hairline-strong);
  display:flex;align-items:center;justify-content:center;color:var(--brass-bright);
  font-family:'Cormorant Garamond',serif;font-size:14px;font-weight:600;letter-spacing:.5px;
}
.resource-text{flex:1;min-width:0;}
.resource-name{font-size:12.5px;font-weight:600;color:var(--ivory);}
.resource-sub{font-size:10.5px;color:var(--ivory-faint);margin-top:1px;}
/* Chevron is drawn in CSS rather than set as a glyph: the old ↗ said
   "this leaves the page", which is no longer what happens, and a drawn
   mark renders identically whatever font falls back. Rotates when the
   panel below is open. */
.resource-arrow{
  flex-shrink:0;width:7px;height:7px;margin-right:3px;
  border-right:1.5px solid var(--ivory-faint);
  border-bottom:1.5px solid var(--ivory-faint);
  transform:rotate(45deg);transform-origin:center;
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .2s ease;
}
.resource-link:hover .resource-arrow{ border-color:var(--brass); }
.resource-link.is-open .resource-arrow{
  transform:rotate(225deg);border-color:var(--brass-bright);
}
.resource-link.is-open{
  background:rgba(184,134,58,0.06);border-color:var(--brass-dim);transform:none;
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}

/* ── Inline resource viewer ──────────────────────────────────────
   Built by toggleResourceInline() in portal-core.js and inserted
   directly after the resource button it belongs to. The full-screen
   modal is untouched and still reachable from the bar below. */
.resource-inline{
  overflow:hidden;height:0;
  transition:height .42s cubic-bezier(.16,1,.3,1);
}
.resource-inline-inner{
  border:1px solid var(--brass-dim);border-top:0;
  border-radius:0 0 11px 11px;overflow:hidden;
  background:var(--surface-deep);
}
.resource-inline-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 12px 10px 14px;
  border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,rgba(184,134,58,0.07),transparent);
}
.resource-inline-label{
  font-family:var(--font-body);font-size:10px;font-weight:500;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-bright);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.resource-inline-actions{ display:flex;align-items:center;gap:7px;flex-shrink:0; }
.resource-inline-act{
  font-family:var(--font-body);font-size:9.5px;font-weight:500;
  letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ivory-dim);text-decoration:none;
  background:transparent;border:1px solid var(--border-soft);
  border-radius:6px;padding:6px 10px;line-height:1;
  transition:color .2s,border-color .2s,background .2s;
}
.resource-inline-act:hover{
  color:var(--brass-bright);border-color:var(--brass-dim);
  background:rgba(184,134,58,0.07);
}
.resource-inline-x{ padding:6px 8px;font-size:10px;letter-spacing:0; }
.resource-inline-body{
  position:relative;height:620px;background:#2b2b2b;
}
.resource-inline-frame{
  position:relative;z-index:1;
  width:100%;height:100%;border:0;display:block;background:#2b2b2b;
}
.resource-inline-load{
  position:absolute;inset:0;z-index:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:rgba(246,241,231,0.5);
}
@media (max-width:820px){ .resource-inline-body{ height:72vh;min-height:380px; } }
@media (max-width:480px){
  .resource-inline-bar{ padding:9px 10px;gap:8px;justify-content:flex-end; }
  /* The title truncated to "TSS STUD…" at this width, and the open row
     directly above already shows it in full — so drop it and give the
     actions the room instead. */
  .resource-inline-label{ display:none; }
  .resource-inline-act{ padding:6px 9px;font-size:9px;letter-spacing:.8px; }
}

/* ================================================================
   VIEWER SHELL — shared modal chrome (overlay + shell + head/close)
   used by the Day-Of Itinerary panel below, and by the Client
   Resource PDF viewer (openClientResourcePdf / #pdfViewerModal), which
   now opens PDFs in-app via this same shell instead of a new tab.
   ================================================================ */
.viewer-overlay{
  position:fixed;inset:0;z-index:170;background:rgba(6,9,18,0.86);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;padding:18px;
}
.viewer-overlay.is-open{opacity:1;pointer-events:auto;}
.viewer-shell{
  width:100%;max-width:820px;height:min(88vh, 900px);
  background:var(--ink);border:1px solid var(--brass-dim);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.55);
  transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.viewer-overlay.is-open .viewer-shell{transform:translateY(0) scale(1);}
.viewer-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--card), var(--ink));flex-shrink:0;
}
.viewer-head-title{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--ivory);}
.viewer-head-mark{font-size:8.5px;letter-spacing:2px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:3px;}
.viewer-close{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border-soft);background:none;
  color:var(--ivory-dim);font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.viewer-close:hover{border-color:var(--brass-dim);color:var(--brass-bright);}
.viewer-body{flex:1;position:relative;background:#1a1a1a;}

/* Single-file resource viewer — prev/next nav arrows and the
   zoom/pan wrapper around #rvImage. Reuses the .viewer-* chrome. */
.rv-image-wrap{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none;cursor:grab;
}
.rv-image-wrap.is-zoomed{cursor:grab;}
.rv-image-wrap.is-panning{cursor:grabbing;}
.rv-image-wrap img{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  user-select:none;-webkit-user-drag:none;
  transition:transform .18s ease;transform-origin:center center;
  will-change:transform;
}
.rv-image-wrap.is-panning img{transition:none;}
.rv-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border-soft);background:rgba(6,9,18,0.55);backdrop-filter:blur(4px);
  color:var(--ivory-dim);font-size:15px;display:flex;align-items:center;justify-content:center;
  transition:border-color .2s ease,color .2s ease,background .2s ease;
}
.rv-nav:hover{border-color:var(--brass-dim);color:var(--brass-bright);background:rgba(6,9,18,0.75);}
.rv-nav-prev{left:14px;}
.rv-nav-next{right:14px;}
.rv-zoom-hint{
  position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;
  font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-dim);
  background:rgba(6,9,18,0.55);border:1px solid var(--border-soft);border-radius:20px;
  padding:5px 12px;pointer-events:none;opacity:0;transition:opacity .3s ease;white-space:nowrap;
}
.rv-image-wrap:hover .rv-zoom-hint{opacity:1;}
@media (max-width:640px){
  .rv-nav{width:36px;height:36px;font-size:13px;}
  .rv-nav-prev{left:8px;}
  .rv-nav-next{right:8px;}
  .rv-zoom-hint{display:none;}
}

/* PDF resource viewer — reuses .viewer-overlay/.viewer-shell chrome,
   with its own ids so it can be driven independently of the itinerary
   viewer, plus a download/actions row and an iframe body. */
.pdf-viewer-modal{
  position:fixed;inset:0;z-index:170;display:none;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;padding:18px;
}
.pdf-viewer-modal.show{display:flex;opacity:1;pointer-events:auto;}
.pdf-viewer-backdrop{
  position:absolute;inset:0;background:rgba(6,9,18,0.86);backdrop-filter:blur(6px);
}
.pdf-viewer-panel{
  position:relative;width:100%;max-width:860px;height:min(90vh, 940px);
  background:var(--ink);border:1px solid var(--brass-dim);border-radius:18px;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px rgba(0,0,0,0.55);
  transform:translateY(16px) scale(.98);transition:transform .35s cubic-bezier(.16,1,.3,1);
}
.pdf-viewer-modal.show .pdf-viewer-panel{transform:translateY(0) scale(1);}
.pdf-viewer-header{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, var(--card), var(--ink));flex-shrink:0;
}
.pdf-viewer-title{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--ivory);}
.pdf-viewer-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.pdf-viewer-download{
  font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass-bright);
  border:1px solid var(--brass-dim);border-radius:20px;padding:7px 14px;white-space:nowrap;
}
.pdf-viewer-download:hover{background:rgba(200,162,76,0.12);}
.pdf-viewer-close{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border-soft);background:none;
  color:var(--ivory-dim);font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.pdf-viewer-close:hover{border-color:var(--brass-dim);color:var(--brass-bright);}
.pdf-viewer-body{flex:1;position:relative;background:#2b2b2b;}
.pdf-viewer-frame{width:100%;height:100%;border:0;display:block;background:#2b2b2b;}
@media (max-width:640px){
  .pdf-viewer-modal{padding:0;}
  .pdf-viewer-panel{max-width:100%;height:100vh;border-radius:0;}
}

.app-footer{max-width:660px;width:100%;margin:0 auto;padding:8px 24px 48px;}
.about-panel{
  background:linear-gradient(168deg, rgba(184,147,90,0.05), rgba(255,255,255,0.006));
  border:1px solid var(--brass-dim);border-radius:18px;padding:28px 26px;margin-bottom:20px;
}
.about-title{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--brass-bright);margin-bottom:12px;}
.about-text{font-size:13px;color:var(--ivory-dim);line-height:1.85;}
.connect-panel{
  border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
  padding:30px 4px;margin-bottom:20px;text-align:center;
}
.connect-eyebrow{font-size:9.5px;letter-spacing:2.8px;text-transform:uppercase;color:var(--brass-bright);font-weight:500;margin-bottom:8px;}
.connect-caption{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--ivory-dim);margin-bottom:20px;}
.connect-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
.connect-link{
  display:inline-block;padding:4px 2px;position:relative;
  color:var(--ivory-dim);font-size:11.5px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;text-decoration:none;
  transition:color .15s ease;
}
.connect-link:hover{color:var(--brass-bright);}
.connect-sep{width:3px;height:3px;border-radius:50%;background:var(--border-soft);flex-shrink:0;}
.connect-portfolio{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--brass-bright);
  text-decoration:none;padding:6px 2px;border-bottom:1px solid var(--brass-dim);
  transition:border-color .15s ease;
}
.connect-portfolio:hover{border-color:var(--brass-bright);}
.connect-portfolio .arrow{transition:transform .2s ease;}
.connect-portfolio:hover .arrow{transform:translateX(3px);}
.refer-panel{
  background:linear-gradient(168deg, var(--surface-deep-2), var(--surface-deep));
  border:1px solid var(--hairline);border-top:1px solid var(--brass-dim);border-radius:6px;padding:28px 24px;margin-bottom:20px;
  box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, 0 18px 40px -26px rgba(28,26,18,0.16);
}
.refer-title{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--brass-bright);margin-bottom:7px;}
.refer-text{font-size:12.5px;color:var(--ivory-dim);line-height:1.75;margin-bottom:16px;}
.refer-code-box{
  background:rgba(255,255,255,0.03);border:1px dashed var(--brass-dim);border-radius:10px;
  padding:14px 16px;margin-bottom:16px;
}
.refer-code-box-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.refer-code-label{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ivory-faint);}
.refer-code-value{font-size:15px;font-weight:700;color:var(--brass-bright);letter-spacing:1px;}
.refer-share-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));
  color:var(--ink);border:none;border-radius:9px;padding:12px 16px;
  font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.refer-share-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(200,162,76,0.28);filter:brightness(1.05);}
.refer-share-btn:active{transform:translateY(0);}
.refer-share-ic{font-size:13px;}
.refer-share-arrow{transition:transform .2s ease;}
.refer-share-btn:hover .refer-share-arrow{transform:translateX(3px);}
.refer-form-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.refer-form-row input{
  flex:1;min-width:160px;background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);
  border-radius:9px;padding:11px 13px;color:var(--ivory);font-size:13px;
}
.refer-form-row input:focus{outline:none;border-color:var(--brass);}
.refer-form-row button{
  flex-shrink:0;padding:11px 18px;border-radius:9px;border:none;
  background:linear-gradient(135deg, var(--brass-bright), var(--brass));color:var(--ink);
  font-size:12.5px;font-weight:700;letter-spacing:.3px;
}
.refer-form-row button:disabled{opacity:.6;}
.refer-list{display:flex;flex-direction:column;gap:8px;}
.refer-item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:rgba(255,255,255,0.025);border:1px solid var(--border-soft);border-radius:10px;
  padding:11px 14px;font-size:12.5px;
}
.refer-item-name{font-weight:600;color:var(--ivory);}
.refer-item-date{font-size:10.5px;color:var(--ivory-faint);margin-top:2px;}
.refer-status{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:600;letter-spacing:.2px;white-space:nowrap;}
.refer-status.pending{background:rgba(184,147,90,0.14);color:var(--brass-bright);}
.refer-status.booked{background:rgba(122,155,126,0.14);color:var(--sage);}
.refer-status.rewarded{background:rgba(122,155,126,0.22);color:var(--sage);}
.refer-error{color:#e3a794;font-size:12px;margin-top:8px;}
.refer-success{color:var(--sage);font-size:12px;margin-top:8px;}
.anniv-panel{
  background:linear-gradient(168deg, rgba(255,255,255,0.024), rgba(255,255,255,0.004));
  border:1px solid var(--border-soft);border-top:1px solid var(--border);border-radius:2px;padding:26px 24px;margin-bottom:20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.anniv-text{flex:1;min-width:200px;}
.anniv-title{font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--ivory);margin-bottom:4px;}
.anniv-sub{font-size:11.5px;color:var(--ivory-faint);line-height:1.6;}
.anniv-btn{
  flex-shrink:0;padding:11px 18px;border-radius:9px;background:rgba(184,147,90,0.1);
  border:1px solid var(--brass-dim);color:var(--brass-bright);font-size:11.5px;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:background .15s;
}
.anniv-btn:hover{background:rgba(184,147,90,0.18);}
.faq-panel{
  background:linear-gradient(168deg, rgba(255,255,255,0.024), rgba(255,255,255,0.004));
  border:1px solid var(--border-soft);border-top:1px solid var(--border);border-radius:2px;padding:8px 24px;margin-bottom:20px;
}
.faq-panel-title{ font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ivory);padding:20px 0 6px; }
.faq-item{border-bottom:1px solid var(--border-soft);}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  width:100%;background:none;border:none;text-align:left;padding:16px 0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:13px;font-weight:600;color:var(--ivory);
}
.faq-q .plus{ font-size:16px;color:var(--brass-bright);flex-shrink:0;transition:transform .25s;font-weight:400; }
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{ max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.16,1,.3,1); }
.faq-item.open .faq-a{max-height:800px;}
.faq-a-inner{font-size:12.5px;color:var(--ivory-dim);line-height:1.75;padding-bottom:16px;}
.faq-wa-btn{display:inline-block;margin-top:12px;font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass-bright);text-decoration:none;border-bottom:1px solid var(--brass-dim);padding-bottom:1px;transition:color .15s,border-color .15s;}
.faq-wa-btn:hover{color:var(--ivory);border-color:var(--ivory-faint);}
.contact-panel{
  background:linear-gradient(168deg, rgba(255,255,255,0.024), rgba(255,255,255,0.004));
  border:1px solid var(--border-soft);border-top:1px solid var(--border);border-radius:2px;padding:28px 24px;
}
.contact-title{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--ivory);margin-bottom:16px;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.contact-card{
  background:rgba(255,255,255,0.025);border:1px solid var(--border-soft);border-radius:11px;
  padding:14px 15px;text-decoration:none;transition:background .15s, border-color .15s;
}
.contact-card:hover{background:rgba(255,255,255,0.05);border-color:var(--brass-dim);}
.contact-label{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass);margin-bottom:5px;font-weight:600;}
.contact-num{font-size:13px;color:var(--ivory);font-weight:600;}
.contact-hours{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-soft);
  font-size:11.5px;color:var(--ivory-faint);display:flex;align-items:center;gap:8px;
}
.contact-hours-status{
  font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  padding:2px 8px;border-radius:20px;margin-left:4px;
}
.contact-hours-status.is-open{background:rgba(138,168,142,0.18);color:var(--sage);}
.contact-hours-status.is-closed{background:rgba(246,241,231,0.07);color:var(--ivory-faint);}
.acct-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.acct-team-card{
  background:rgba(255,255,255,0.025);border:1px solid var(--border-soft);border-radius:11px;
  padding:14px 15px;text-decoration:none;transition:background .15s,border-color .15s;display:block;
}
.acct-team-card:hover{background:rgba(255,255,255,0.05);border-color:var(--brass-dim);}
.acct-team-role{font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass);margin-bottom:5px;font-weight:600;}
.acct-team-num{font-size:13px;color:var(--ivory);font-weight:600;}
.acct-team-hours{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border-soft);font-size:11.5px;color:var(--ivory-faint);}
.studio-footer-mark{
  text-align:center;padding:20px 0 4px;font-size:9.5px;color:var(--ivory-faint);
  letter-spacing:1.6px;text-transform:uppercase;
}

/* ── ⭐ CLIENT REVIEW BLOCKS (three independent areas) ────────── */
.review-panel{
  background:linear-gradient(168deg, rgba(184,147,90,0.05), rgba(255,255,255,0.004));
  border:1px solid var(--border-soft);border-top:1px solid var(--brass-dim);border-radius:2px;padding:26px 24px;margin-bottom:20px;
}
.review-head{font-family:'Cormorant Garamond',serif;font-size:19px;color:var(--brass-bright);margin-bottom:5px;}
.review-sub{font-size:11.5px;color:var(--ivory-faint);line-height:1.7;margin-bottom:16px;}
.star-row{display:flex;gap:6px;margin-bottom:14px;align-items:center;flex-wrap:wrap;}
.star-btn{
  background:none;border:none;padding:2px;line-height:1;font-size:30px;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--hairline-strong);transition:transform .12s, color .12s;
}
.star-btn:hover{transform:scale(1.14);}
.star-btn.on{color:var(--brass-bright);}
.star-hint{font-size:11px;color:var(--ivory-faint);margin-left:6px;}
.review-panel textarea{
  width:100%;background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);
  border-radius:9px;padding:11px 13px;color:var(--ivory);font-size:13px;
  line-height:1.65;resize:vertical;min-height:92px;
}
.review-panel textarea:focus{outline:none;border-color:var(--brass);}
.review-count{font-size:10px;color:var(--ivory-faint);text-align:right;margin-top:5px;}
.review-msg{font-size:12px;margin-top:9px;}
.review-msg.ok{color:var(--sage);}
.review-msg.err{color:#e3a794;}
.review-saved{
  background:rgba(255,255,255,0.03);border:1px solid var(--border-soft);border-radius:11px;
  padding:14px 15px;
}
.review-saved-stars{font-size:20px;color:var(--brass-bright);letter-spacing:2px;}
.review-saved-text{font-size:12.5px;color:var(--ivory-dim);line-height:1.75;margin-top:9px;white-space:pre-wrap;}
.review-saved-meta{font-size:10.5px;color:var(--ivory-faint);margin-top:10px;}
.review-edit-btn{
  margin-top:12px;background:rgba(184,147,90,0.1);border:1px solid var(--brass-dim);
  color:var(--brass-bright);padding:9px 16px;border-radius:9px;font-size:11.5px;font-weight:600;
  transition:background .15s;
}
.review-edit-btn:hover{background:rgba(184,147,90,0.18);}
.review-closing-card{
  text-align:center;padding:36px 28px 32px;margin-bottom:24px;
  border-top:1px solid var(--brass-dim);
  opacity:0;transform:translateY(16px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.review-closing-card.visible{opacity:1;transform:translateY(0);}
.review-closing-ic{font-size:22px;margin-bottom:14px;line-height:1;}
.review-closing-head{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--ivory);margin-bottom:8px;line-height:1.35;}
.review-closing-sub{font-size:12px;color:var(--ivory-faint);line-height:1.75;margin-bottom:22px;max-width:320px;margin-left:auto;margin-right:auto;}
.review-closing-rule{width:36px;height:1px;background:var(--brass-dim);margin:0 auto 22px;}
.review-closing-btn{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--brass-bright);background:none;border:1px solid var(--brass-dim);border-radius:2px;padding:11px 20px;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
.review-closing-btn:hover{background:rgba(200,162,76,0.1);border-color:var(--brass-bright);}

@media (max-width:520px){
  .contact-grid{grid-template-columns:1fr;}
  .app-header{padding:18px 18px;}
  .main, .app-footer{padding-left:16px;padding-right:16px;}
}

/* ================================================================
   POST-LOGIN TYPOGRAPHY SYSTEM — The Seven Steps Studio
   Scope: #app and all its children only.
   Pre-auth screens (#introScreen, #loginScreen, #otpScreen) are
   deliberately untouched — they have their own editorial aesthetic.

   RULES ENFORCED HERE:
   - Jost for all UI, navigation, buttons, labels, inputs, body copy
   - Cormorant Garamond only for major editorial headings
   - Letter-spacing ≤ 1.5px on small labels; 0 on body copy
   - No all-caps on functional interface elements
   - No font sizes below 10px in post-login UI
   - No display font on interactive controls
   ================================================================ */

/* ── App header ─────────────────────────────────────────────────── */
#app .app-header-text{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
#app .app-header-sub{
  font-size:10px;
  letter-spacing:1px;
  color:var(--ivory-faint);
}
#app .app-header .client-name{
  font-size:13px;
  font-weight:400;
  color:var(--ivory-dim);
}

/* ── Tab bar ────────────────────────────────────────────────────── */
#app .tab-btn{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

/* ── Hamburger nav panel ────────────────────────────────────────── */
.nav-links-brand{
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.3px;
  color:var(--ivory);
}
.nav-links-brand .sub{
  font-family:var(--font-body);
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ivory-faint);
  font-weight:400;
  margin-top:3px;
}
.nav-links-eyebrow{
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--brass-bright);
  margin-bottom:14px;
}
.nav-section-label{
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ivory-faint);
  margin:18px 0 6px;
  padding-top:14px;
  border-top:1px solid var(--border-soft);
}
.nav-section-label:first-of-type{
  margin-top:0;padding-top:0;border-top:none;
}
.nav-group-head{
  font-family:var(--font-body);
  font-size:10px;
  letter-spacing:1.5px;
}
.nav-link-item{
  /* Switch from Cormorant Garamond to Jost for nav links */
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  color:var(--ivory-dim);
  padding:9px 2px;
  letter-spacing:0;
}
.nav-link-item:hover,.nav-link-item.active{color:var(--cream);padding-left:6px;}
.nav-link-item.active{color:var(--brass-bright);}
.nav-link-item .n{
  font-family:var(--font-body);
  font-size:10px;
  color:var(--ivory-faint);
  margin-right:10px;
  letter-spacing:0.3px;
}
.nav-concierge-title{
  /* Was Cormorant Garamond — concierge block is a functional CTA, not editorial */
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  color:var(--cream);
  letter-spacing:0.2px;
}
.nav-concierge-sub{
  font-size:12px;
  color:var(--ivory-faint);
  margin-top:3px;
  letter-spacing:0;
}
.nav-concierge-link{
  display:inline-block;margin-top:10px;
  font-size:11px;font-weight:600;letter-spacing:0.8px;
  text-transform:uppercase;color:var(--brass-bright);text-decoration:none;
}
.nav-signout{
  margin-top:22px;padding:11px 0;text-align:left;
  font-family:var(--font-body);
  font-size:12px;letter-spacing:0.5px;text-transform:none;color:#e3a794;
  background:none;border:none;border-top:1px solid var(--border-soft);
}
.nav-links-foot{
  margin-top:14px;
  font-size:10px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ivory-faint);
  display:flex;justify-content:space-between;
}

/* ── Dashboard hero ─────────────────────────────────────────────── */
/* Hero sits on a photograph, not the page surface, so its text stays
   light regardless of the page theme — fixed values, not theme vars. */
#app .dash-hero-eyebrow{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#E4C36F;
  margin-bottom:12px;font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.6);
}
#app .dash-hero-caption{
  font-size:11px;letter-spacing:1px;text-transform:uppercase;
  color:rgba(255,255,242,0.92);font-weight:500;line-height:1.7;
  text-shadow:0 1px 3px rgba(0,0,0,0.85), 0 2px 14px rgba(0,0,0,0.6);
}
/* dash-hero-title and dash-hero-promise stay Cormorant — they are major editorial headings */

/* ── Status bar / progress labels ───────────────────────────────── */
#app .dash-hero-sub .pill{
  font-family:var(--font-body);
  font-size:11px;font-weight:500;letter-spacing:0.2px;
}
#app .dash-progress-labels span{
  font-size:9px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ivory-faint);
}
#app .dash-progress-labels span.reached{color:var(--brass-bright);font-weight:600;}

/* ── Panel system ───────────────────────────────────────────────── */
#app .panel-eyebrow{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass);
  margin-bottom:8px;font-weight:500;
}
/* panel-title keeps Cormorant Garamond at 21px — it is a section heading */

#app .summary-row{
  font-size:13.5px;
}
#app .summary-row .lbl{
  font-family:var(--font-body);
  font-size:12px;letter-spacing:0;color:var(--ivory-faint);
}
#app .summary-row .val{
  font-family:var(--font-body);
  font-weight:600;
}

/* ── Badges ─────────────────────────────────────────────────────── */
#app .badge{
  font-family:var(--font-body);
  font-size:11px;font-weight:500;letter-spacing:0.2px;
  text-transform:none;
}

/* ── Payment schedule ───────────────────────────────────────────── */
#app .pay-sched-label{
  font-family:var(--font-body);
  font-size:13px;font-weight:500;letter-spacing:0;
}
#app .pay-sched-date{
  font-family:var(--font-body);
  font-size:11px;color:var(--ivory-faint);letter-spacing:0;
}
#app .pay-sched-amt{
  font-family:var(--font-body);
  font-size:13px;font-weight:600;
}

/* ── Buttons (.btn) ─────────────────────────────────────────────── */
#app .btn{
  font-family:var(--font-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.8px;
  text-transform:uppercase;
  /* Retain existing border-radius, padding, color classes */
}



/* ── Commit card (48hrs promise) ────────────────────────────────── */
#app .commit-label{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;
  color:var(--ivory-faint);margin-bottom:6px;font-weight:500;
}
#app .commit-text{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-dim);line-height:1.65;
  letter-spacing:0;
}
#app .commit-cta{
  font-family:var(--font-body);
  font-size:11px;font-weight:500;
  letter-spacing:0.8px;text-transform:uppercase;
}

/* ── Resource list ──────────────────────────────────────────────── */
#app .resource-ic{
  /* Was Cormorant Garamond — these are numbered UI badges */
  font-family:var(--font-body);
  font-size:11px;font-weight:600;letter-spacing:0.3px;
}
#app .resource-name{
  font-family:var(--font-body);
  font-size:13px;font-weight:500;color:var(--ivory);
  letter-spacing:0;
}
#app .resource-sub{
  font-family:var(--font-body);
  font-size:11px;color:var(--ivory-faint);margin-top:2px;letter-spacing:0;
}

/* ── Milestone note ─────────────────────────────────────────────── */
#app .milestone-text{
  /* Was Cormorant Garamond + italic — this is a functional status message */
  font-family:var(--font-body);
  font-style:normal;
  font-size:13px;
  color:var(--ivory-dim);
  line-height:1.65;
  letter-spacing:0;
}

/* ── Vows section ───────────────────────────────────────────────── */
/* vows-heading keeps Cormorant — it is a major editorial heading */
#app .vows-card-label{
  font-family:var(--font-body);
  font-size:13px;letter-spacing:0.5px;color:var(--ivory-dim);
  text-transform:none;font-weight:500;
}
#app .vows-copy{
  /* Was Cormorant italic — this is explanatory body copy */
  font-family:var(--font-body);
  font-style:normal;
  font-size:13px;
  line-height:1.75;
  color:var(--ivory-faint);
  letter-spacing:0;
}

/* ── Proof section ──────────────────────────────────────────────── */
#app .proof-eyebrow{
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass-bright);
  font-weight:500;margin-bottom:14px;
}
/* proof-heading keeps Cormorant — editorial statement heading */
#app .proof-sub{
  font-family:var(--font-body);
  font-size:12.5px;color:var(--ivory-faint);margin-top:12px;margin-bottom:26px;letter-spacing:0;
}
#app .proof-label{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:0.8px;text-transform:uppercase;
  color:var(--brass-bright);font-weight:600;margin-bottom:4px;
}
#app .proof-text{
  font-family:var(--font-body);
  font-size:12px;color:var(--ivory-faint);line-height:1.55;letter-spacing:0;
}

/* ── Social section ─────────────────────────────────────────────── */
/* No overrides needed — .social-* rules already use var(--font-body)
   by default (written after the rebrand), except .social-heading
   which intentionally keeps Cormorant like the other section headings. */

/* ── Timeline section ───────────────────────────────────────────── */
/* timeline-num keeps Cormorant — it is a large decorative numeral */
#app .timeline-sub{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-dim);margin-top:10px;margin-bottom:26px;letter-spacing:0;
}
#app .timeline-step-label{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ivory-faint);font-weight:500;
}

/* ── Collection block ───────────────────────────────────────────── */
/* collection-name keeps Cormorant italic — it is the package name, an editorial element */
#app .collection-feature{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-dim);letter-spacing:0;
}

/* ── FAQ ────────────────────────────────────────────────────────── */
/* faq-panel-title keeps Cormorant — it is a section heading */
#app .faq-q{
  font-family:var(--font-body);
  font-size:13px;font-weight:500;color:var(--ivory);letter-spacing:0;
}
#app .faq-a-inner{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-dim);line-height:1.75;letter-spacing:0;
}
#app .faq-preview-eyebrow{
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass-bright);
  margin-bottom:10px;font-weight:500;
}
/* faq-preview-title keeps Cormorant italic — editorial teaser heading */
#app .faq-preview-viewall{
  font-family:var(--font-body);
  font-size:11px;font-weight:500;letter-spacing:1px;text-transform:uppercase;
  color:var(--brass-bright);
}

/* ── Delivery + event form sections ────────────────────────────── */
#app .itin-mark{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:8px;
}
/* itin-title keeps Cormorant — modal heading */
#app .itin-row{font-size:13px;}
#app .itin-lbl{font-family:var(--font-body);color:var(--ivory-faint);font-size:12px;letter-spacing:0;}
#app .itin-val{font-family:var(--font-body);color:var(--ivory);font-weight:500;font-size:13px;letter-spacing:0;}
#app .itin-note{
  font-family:var(--font-body);font-style:normal;
  font-size:12px;color:var(--ivory-faint);line-height:1.65;margin-bottom:20px;letter-spacing:0;
}

/* ── Viewer (modal) chrome ──────────────────────────────────────── */
#app .viewer-head-mark{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:3px;
}
#app .viewer-head-title{
  /* Was Cormorant — modal chrome header is a functional label */
  font-family:var(--font-body);
  font-size:15px;font-weight:500;color:var(--ivory);letter-spacing:0;
}



/* ── Weather card ───────────────────────────────────────────────── */
#app .weather-title{
  font-family:var(--font-body);
  font-size:13px;font-weight:500;color:var(--ivory);letter-spacing:0;
}
#app .weather-sub{
  font-family:var(--font-body);
  font-size:11.5px;color:var(--ivory-dim);margin-top:2px;letter-spacing:0;
}

/* ── Contact panel ──────────────────────────────────────────────── */
/* contact-title keeps Cormorant at 19px — it is a section heading */
#app .contact-label{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--brass);margin-bottom:5px;font-weight:500;
}
#app .contact-num{
  font-family:var(--font-body);
  font-size:13.5px;color:var(--ivory);font-weight:600;letter-spacing:0;
}
#app .contact-hours{
  font-family:var(--font-body);
  font-size:12px;color:var(--ivory-faint);letter-spacing:0;
}
#app .contact-hours-status{ font-family:var(--font-body); letter-spacing:0.8px; }
#app .acct-team-role{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--brass);margin-bottom:5px;font-weight:500;
}
#app .acct-team-num{
  font-family:var(--font-body);
  font-size:13.5px;color:var(--ivory);font-weight:600;letter-spacing:0;
}
#app .acct-team-hours{
  font-family:var(--font-body);
  font-size:12px;color:var(--ivory-faint);letter-spacing:0;
}
#app .ics-hint{
  font-family:var(--font-body);
  font-size:10.5px;color:var(--ivory-faint);letter-spacing:0;
}

/* ── Footer ─────────────────────────────────────────────────────── */
/* about-title keeps Cormorant — footer studio name, editorial */
#app .about-text{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-dim);line-height:1.85;letter-spacing:0;
}
#app .connect-eyebrow{
  font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--brass-bright);
  font-weight:500;margin-bottom:8px;
}
/* connect-caption keeps Cormorant italic — editorial tagline */
#app .connect-link{
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:0.5px;text-transform:none;
}
#app .connect-portfolio{
  font-family:var(--font-body);
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
}
#app .studio-footer-mark{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-faint);
}

/* ── Refer & Earn ───────────────────────────────────────────────── */
/* refer-title keeps Cormorant — it is a panel heading */
#app .refer-text{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-dim);line-height:1.75;letter-spacing:0;margin-bottom:16px;
}
#app .refer-code-label{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-faint);
}
#app .refer-code-value{
  font-family:var(--font-body);
  font-size:15px;font-weight:700;color:var(--brass-bright);letter-spacing:0.5px;
}
#app .refer-status{
  font-family:var(--font-body);
  font-size:10px;font-weight:500;letter-spacing:0.2px;text-transform:none;
}

/* ── Anniversary panel ──────────────────────────────────────────── */
/* anniv-title keeps Cormorant — section heading */
#app .anniv-sub{
  font-family:var(--font-body);
  font-size:12.5px;color:var(--ivory-faint);line-height:1.6;letter-spacing:0;
}
#app .anniv-btn{
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:0.3px;
}

/* ── Review blocks ──────────────────────────────────────────────── */
/* review-head keeps Cormorant — section heading */
#app .review-sub{
  font-family:var(--font-body);
  font-size:12.5px;color:var(--ivory-faint);line-height:1.7;margin-bottom:16px;letter-spacing:0;
}
#app .star-hint{
  font-family:var(--font-body);
  font-size:11px;color:var(--ivory-faint);margin-left:6px;letter-spacing:0;
}
#app .review-count{
  font-family:var(--font-body);
  font-size:11px;color:var(--ivory-faint);text-align:right;margin-top:5px;letter-spacing:0;
}
#app .review-msg{
  font-family:var(--font-body);
  font-size:12px;letter-spacing:0;
}
#app .review-saved-stars{
  font-size:20px;color:var(--brass-bright);letter-spacing:1px;
}
#app .review-saved-text{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-dim);line-height:1.75;margin-top:9px;letter-spacing:0;
}
#app .review-saved-meta{
  font-family:var(--font-body);
  font-size:11px;color:var(--ivory-faint);margin-top:10px;letter-spacing:0;
}
#app .review-edit-btn{
  font-family:var(--font-body);
  font-size:12px;font-weight:500;letter-spacing:0.3px;
}
#app .review-closing-head{ color:var(--ivory); }
#app .review-closing-sub{ font-family:var(--font-body); font-size:12px; letter-spacing:0; }
#app .review-closing-btn{ font-family:var(--font-body); letter-spacing:1.2px; }

/* ── Field form (event details / general forms inside portal) ───── */
#app .field-form label{
  font-family:var(--font-body);
  font-size:10px;letter-spacing:0.8px;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:7px;
}
#app .field-form input,
#app .field-form textarea{
  font-family:var(--font-body);
  font-size:13px;
}
#app .mood-chip{
  font-family:var(--font-body);
  font-size:12px;letter-spacing:0;
}

/* ── Skeleton / loading states ──────────────────────────────────── */
#app .empty-note{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-faint);line-height:1.75;letter-spacing:0;
}
#app .full-loading{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-faint);letter-spacing:0;
}

/* ── Stage track (delivery stages) ─────────────────────────────── */
#app .stage-item{
  font-family:var(--font-body);
  font-size:13px;color:var(--ivory-faint);letter-spacing:0;
}
#app .stage-item.current{
  font-family:var(--font-body);
  color:var(--brass-bright);font-weight:500;
}

/* ── Nav photo panel editorial quote ────────────────────────────── */
/* nav-photo-quote keeps Cormorant italic — genuine editorial/ambient quote */
.nav-photo-eyebrow{
  font-family:var(--font-body);
  font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brass-bright);
}

/* ── Toast notification ─────────────────────────────────────────── */
#toast{
  font-family:var(--font-body);
  font-size:13px;letter-spacing:0;
}

/* END POST-LOGIN TYPOGRAPHY SYSTEM */

/* =========================================================
   INVITATION STUDIO TYPOGRAPHY ADDENDUM
   The Invitation Studio module (.inv- prefix) was added after
   the POST-LOGIN TYPOGRAPHY SYSTEM block above was written, so
   its functional controls were never brought in line with it.
   This addendum applies the same rule retroactively: Jost for
   functional controls, Cormorant Garamond kept only for major
   editorial headings and for names/messages rendered inside the
   invitation artwork itself (.inv-card-* preview content).
   CSS-only. No selectors renamed, no markup or JS touched.
   ========================================================= */
#app .inv-chip{
  /* Was Cormorant — occasion selection is a functional control */
  font-family:var(--font-body);
  font-size:13px;letter-spacing:0;
}
#app .inv-tpl-swatch .mono{
  /* Was Cormorant — placeholder label inside template picker UI */
  font-family:var(--font-body);
  font-style:normal;
}
#app .inv-field input,
#app .inv-field textarea,
#app .inv-field select{
  /* Was Cormorant at 19px — these are functional text inputs */
  font-family:var(--font-body);
  font-size:14px;
}
#app .inv-fn-name{
  /* Was Cormorant italic — function editor row label, functional */
  font-family:var(--font-body);
  font-style:normal;
  font-weight:500;
}
#app .inv-fn-empty-line{
  /* Was Cormorant italic — functional empty-state message */
  font-family:var(--font-body);
  font-style:normal;
}
#app .inv-card-placeholder{
  /* Was Cormorant italic — functional placeholder, not artwork content */
  font-family:var(--font-body);
  font-style:normal;
}
#app .inv-loading-text{
  /* Was Cormorant italic — system loading message, functional */
  font-family:var(--font-body);
  font-style:normal;
}
/* .inv-dash-title, .inv-step-heading, .inv-final-heading keep Cormorant —
   major editorial headings within the studio. */
/* .inv-card-names, .inv-card-fn-name, .inv-card-msg keep Cormorant —
   these render the couple's names/message inside the invitation
   artwork preview itself and must match the generated design. */

/* ── Reduced letter-spacing on invitation functional labels/buttons ── */
#app .inv-field-group-label{letter-spacing:1.4px;}
#app .inv-field label{letter-spacing:1.2px;}
#app .inv-btn-primary{letter-spacing:1.4px;}
#app .inv-btn-ghost{letter-spacing:1.2px;}
#app .inv-btn-line{letter-spacing:1.1px;}
#app .inv-add-fn-btn{letter-spacing:1.2px;}
#app .inv-dash-btn{letter-spacing:1.4px;}

/* END INVITATION STUDIO TYPOGRAPHY ADDENDUM */

/* =========================================================
   INVITATION STUDIO — "Make Your Own Invitation"
   Additive, namespaced module. All classes use .inv- prefix.
   Independent from Countdown Creator (.cdc-) and CRM styles.
   Designed as a private invitation atelier: calm, editorial,
   restrained. Not a checkout flow, not a template marketplace.
   ========================================================= */

/* ---------- Dashboard entry ---------- */
.inv-dash-card{max-width:1040px;margin:30px auto 0;padding:0 24px;}
.inv-dash-inner{
  border:1px solid var(--border-soft);border-top:1px solid var(--brass-dim);
  border-radius:4px;
  padding:34px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  background:radial-gradient(120% 140% at 0% 0%, rgba(200,162,76,0.07), rgba(200,162,76,0.02) 55%);
  box-shadow:0 20px 44px -26px rgba(0,0,0,0.6);
  position:relative;overflow:hidden;
}
.inv-dash-inner::after{
  content:'';position:absolute;top:-40%;right:-10%;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(200,162,76,0.16), transparent 70%);pointer-events:none;
  animation:invGlowDrift 6s ease-in-out infinite;
}
@keyframes invGlowDrift{
  0%,100%{transform:translate(0,0) scale(1);opacity:.8;}
  50%{transform:translate(-18px,14px) scale(1.15);opacity:1;}
}
.inv-dash-text-eyebrow{font-family:var(--font-body);font-size:8.5px;letter-spacing:3px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:10px;}
.inv-dash-title{font-family:'Cormorant Garamond',serif;font-weight:500;font-style:italic;font-size:26px;color:var(--cream);margin-bottom:8px;letter-spacing:.2px;}
.inv-dash-sub{font-family:var(--font-body);font-weight:300;font-size:12.5px;color:var(--ivory-faint);max-width:360px;line-height:1.7;}
.inv-dash-btn{
  flex-shrink:0;border:1px solid var(--brass-dim);background:none;color:var(--brass-bright);
  font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:2.6px;text-transform:uppercase;
  padding:15px 26px;white-space:nowrap;border-radius:2px;position:relative;z-index:1;
  transition:background .5s cubic-bezier(.16,1,.3,1),color .5s ease,border-color .5s ease,transform .3s ease,box-shadow .3s ease;
}
.inv-dash-btn:hover{
  background:linear-gradient(135deg, var(--brass-bright), #E4C36F 55%, var(--brass-bright));
  color:var(--navy);border-color:var(--brass-bright);
  transform:translateY(-2px);box-shadow:0 12px 28px -10px rgba(200,162,76,0.5);
}
/* Small phones: the nowrap, letter-spaced button was wider than the
   card's content box, and as a flex item the card refused to shrink
   below it — the whole dashboard scrolled sideways by ~19px at 320px. */
.inv-dash-card{min-width:0;}
@media (max-width:420px){
  .inv-dash-inner{padding:28px 22px;}
  .inv-dash-btn{white-space:normal;width:100%;text-align:center;letter-spacing:1.2px;padding:15px 14px;}
}

/* ---------- Studio shell ---------- */
#view-invitation{max-width:1040px;margin:0 auto;}
.inv-studio{padding:0 4px;animation:invFadeIn .6s ease;}
@keyframes invFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

/* Quiet numbered progress — never a checkout stepper */
.inv-progress{display:flex;align-items:center;justify-content:center;gap:0;margin:8px 20px 40px;flex-wrap:wrap;}
.inv-progress-item{display:flex;align-items:center;gap:9px;padding:0 16px;position:relative;}
.inv-progress-item + .inv-progress-item::before{
  content:'';width:22px;height:1px;background:var(--border-soft);margin-right:16px;flex-shrink:0;
}
.inv-progress-num{
  font-family:var(--font-body);font-weight:500;font-size:9px;letter-spacing:1px;color:var(--ivory-faint);
  opacity:.55;transition:opacity .4s ease,color .4s ease;
}
.inv-progress-label{
  font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ivory-faint);opacity:.55;transition:opacity .4s ease,color .4s ease;
}
.inv-progress-item.done .inv-progress-num,
.inv-progress-item.done .inv-progress-label{opacity:.8;color:var(--ivory-dim);}
.inv-progress-item.on .inv-progress-num,
.inv-progress-item.on .inv-progress-label{opacity:1;color:var(--brass-bright);}
@media(max-width:640px){
  .inv-progress{gap:0;margin:4px 8px 30px;}
  .inv-progress-item{padding:0 8px;}
  .inv-progress-item + .inv-progress-item::before{width:12px;margin-right:8px;}
  .inv-progress-label{display:none;}
  .inv-progress-num{font-size:10px;}
}

.inv-step{padding:4px 20px 46px;animation:invStepIn .5s cubic-bezier(.16,1,.3,1);}
@keyframes invStepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.inv-step-eyebrow{font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:3.4px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px;}
.inv-step-heading{font-family:'Cormorant Garamond',serif;font-weight:500;font-style:italic;font-size:36px;color:var(--cream);line-height:1.12;margin-bottom:12px;letter-spacing:.2px;}
.inv-step-sub{font-family:var(--font-body);font-weight:300;font-size:13.5px;color:var(--ivory-faint);line-height:1.75;margin-bottom:38px;max-width:440px;}

/* ---------- Buttons ---------- */
.inv-btn-primary{
  border:1px solid var(--brass-bright);background:var(--brass-bright);color:var(--navy);
  font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:2.8px;text-transform:uppercase;
  padding:16px 30px;width:100%;max-width:320px;transition:opacity .5s ease,transform .3s ease;
}
.inv-btn-primary:hover{opacity:.88;}
.inv-btn-primary:active{transform:scale(.99);}
.inv-btn-primary:disabled{opacity:.3;cursor:not-allowed;}
.inv-btn-ghost{
  border:1px solid transparent;background:none;color:var(--ivory-faint);
  font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  padding:16px 8px;transition:color .4s ease;
}
.inv-btn-ghost:hover{color:var(--brass-bright);}
.inv-btn-line{
  border:none;border-bottom:1px solid var(--brass-dim);background:none;color:var(--brass-bright);
  font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
  padding:8px 2px 9px;transition:border-color .4s ease,opacity .4s ease;
}
.inv-btn-line:hover{border-color:var(--brass-bright);opacity:.8;}
.inv-nav-row{display:flex;gap:8px;margin-top:40px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.inv-nav-row.center{justify-content:center;gap:20px;}

/* ---------- Occasion + Design (CHOOSE) ---------- */
.inv-choose-block{margin-bottom:44px;}
.inv-choose-label{font-family:var(--font-body);font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:16px;}
.inv-chip-list{display:flex;flex-wrap:wrap;gap:10px;}
.inv-chip{
  border:1px solid var(--border-soft);background:none;color:var(--ivory-dim);
  font-family:'Cormorant Garamond',serif;font-size:15.5px;letter-spacing:.2px;
  padding:11px 20px;transition:border-color .4s ease,color .4s ease,background .4s ease;
}
.inv-chip.active{border-color:var(--brass-bright);color:var(--brass-bright);background:rgba(200,162,76,0.06);}
.inv-chip:hover{border-color:var(--brass-dim);}

.inv-tpl-cats{display:flex;gap:0;margin-bottom:24px;border-bottom:1px solid var(--border-soft);overflow-x:auto;}
.inv-tpl-cat{
  flex-shrink:0;border:none;background:none;color:var(--ivory-faint);font-family:var(--font-body);
  font-size:9.5px;letter-spacing:2px;text-transform:uppercase;padding:0 18px 14px;white-space:nowrap;
  border-bottom:1px solid transparent;margin-bottom:-1px;transition:color .4s ease,border-color .4s ease;
}
.inv-tpl-cat:first-child{padding-left:0;}
.inv-tpl-cat.active{color:var(--brass-bright);border-bottom-color:var(--brass-bright);}
.inv-tpl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(min-width:640px){.inv-tpl-grid{grid-template-columns:repeat(3,1fr);gap:20px;}}
.inv-tpl-card{cursor:pointer;transition:opacity .4s ease;}
.inv-tpl-card:not(.active){opacity:.86;}
.inv-tpl-card:hover{opacity:1;}
.inv-tpl-swatch{
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;position:relative;
  border:1px solid var(--border-soft);transition:border-color .4s ease;overflow:hidden;
}
.inv-tpl-card.active .inv-tpl-swatch{border-color:var(--brass-bright);}
.inv-tpl-swatch .mono{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;letter-spacing:.4px;text-align:center;padding:0 12px;}
.inv-tpl-swatch .inv-tpl-check{
  position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;
  border:1px solid currentColor;opacity:0;transition:opacity .3s ease;display:flex;align-items:center;justify-content:center;font-size:10px;
}
.inv-tpl-card.active .inv-tpl-check{opacity:1;}
.inv-tpl-name{padding:11px 2px 0;font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ivory-faint);}
.inv-tpl-card.active .inv-tpl-name{color:var(--brass-bright);}

/* ---------- Inputs (PERSONALISE) ---------- */
.inv-field-group{margin-bottom:40px;}
.inv-field-group-label{font-family:var(--font-body);font-size:9.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:22px;opacity:.9;}
.inv-field{margin-bottom:24px;position:relative;}
.inv-field label{display:block;font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:2.2px;text-transform:uppercase;color:var(--ivory-faint);margin-bottom:11px;}
.inv-field input, .inv-field textarea, .inv-field select{
  width:100%;background:none;border:none;border-bottom:1px solid var(--border-soft);
  padding:9px 2px 11px;color:var(--cream);font-family:'Cormorant Garamond',serif;font-size:19px;
  transition:border-color .4s ease;
}
.inv-field textarea{font-family:var(--font-body);font-weight:300;font-size:13.5px;min-height:66px;resize:vertical;line-height:1.6;}
.inv-field input:focus, .inv-field textarea:focus, .inv-field select:focus{outline:none;border-bottom-color:var(--brass-bright);}
.inv-field input::placeholder, .inv-field textarea::placeholder{color:rgba(246,241,231,0.22);font-family:var(--font-body);font-size:12.5px;letter-spacing:.2px;}
.inv-field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:480px){.inv-field-row{grid-template-columns:1fr;gap:0;}}
.inv-field-optional-tag{font-size:8px;letter-spacing:1.5px;color:var(--ivory-faint);opacity:.55;margin-left:8px;text-transform:none;font-style:italic;}

.inv-photo-upload{
  border:1px solid var(--border-soft);padding:30px 20px;text-align:center;cursor:pointer;margin-bottom:8px;
  transition:border-color .4s ease;
}
.inv-photo-upload:hover{border-color:var(--brass-dim);}
.inv-photo-upload img{max-width:120px;max-height:120px;border-radius:50%;object-fit:cover;margin-bottom:14px;}
.inv-photo-upload .hint{font-family:var(--font-body);font-weight:400;font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--ivory-faint);}
.inv-photo-upload input[type=file]{display:none;}

/* ---------- Functions editor (Your Celebration) ---------- */
.inv-fn-list{display:flex;flex-direction:column;gap:1px;margin-bottom:22px;}
.inv-fn-card{border:1px solid var(--border-soft);padding:22px 20px;position:relative;transition:border-color .4s ease;margin-bottom:14px;}
.inv-fn-card:hover{border-color:var(--brass-dim);}
.inv-fn-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;}
.inv-fn-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:18px;color:var(--brass-bright);}
.inv-fn-name.empty{color:var(--ivory-faint);}
.inv-fn-actions{display:flex;gap:4px;}
.inv-fn-actions button{background:none;border:none;color:var(--ivory-faint);font-size:13px;padding:4px 7px;transition:color .3s ease;}
.inv-fn-actions button:hover{color:var(--brass-bright);}
.inv-add-fn-btn{
  border:1px solid var(--border-soft);background:none;color:var(--brass-bright);width:100%;padding:16px;
  font-family:var(--font-body);font-weight:500;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  transition:border-color .4s ease,background .4s ease;
}
.inv-add-fn-btn:hover{border-color:var(--brass-dim);background:rgba(200,162,76,0.04);}

/* Empty state for functions */
.inv-fn-empty{
  border:1px dashed var(--border-soft);padding:38px 20px;text-align:center;margin-bottom:18px;
}
.inv-fn-empty-line{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--ivory-faint);margin-bottom:6px;}
.inv-fn-empty-sub{font-family:var(--font-body);font-weight:300;font-size:11.5px;color:var(--ivory-faint);opacity:.7;line-height:1.6;}

/* ---------- Layout: editor + preview ---------- */
.inv-layout{display:flex;flex-direction:column;gap:0;}
@media(min-width:960px){
  .inv-layout.with-preview{flex-direction:row;align-items:flex-start;gap:56px;}
  .inv-layout.with-preview .inv-step{flex:1;min-width:0;padding-bottom:20px;}
  .inv-layout.with-preview .inv-preview-pane{flex:0 0 320px;position:sticky;top:26px;}
}
.inv-preview-pane{display:none;}
.inv-preview-pane.mobile-show{display:block;animation:invFadeIn .4s ease;}
@media(min-width:960px){.inv-preview-pane{display:block;}}
.inv-preview-eyebrow{
  font-family:var(--font-body);font-size:9px;letter-spacing:2.6px;text-transform:uppercase;color:var(--ivory-faint);
  text-align:center;margin-bottom:16px;opacity:.7;
}

.inv-preview-toggle{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:40;
  border:1px solid var(--brass-bright);background:var(--navy);
  color:var(--brass-bright);font-family:var(--font-body);font-weight:500;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  padding:14px 26px;box-shadow:0 10px 30px rgba(0,0,0,.5);border-radius:2px;
}
@media(min-width:960px){.inv-preview-toggle{display:none;}}

/* ---------- Live preview card (phone) ---------- */
.inv-phone-frame{
  border:7px solid #0a1220;border-radius:30px;overflow:hidden;background:#0a1220;
  box-shadow:0 26px 60px rgba(0,0,0,.5);max-width:290px;margin:0 auto;
}
.inv-card{
  aspect-ratio:9/18;overflow-y:auto;padding:40px 24px 30px;display:flex;flex-direction:column;
  align-items:center;text-align:center;transition:background .5s ease;
}
.inv-card::-webkit-scrollbar{width:0;}
.inv-card-eyebrow{font-family:var(--font-body);font-weight:400;font-size:8px;letter-spacing:3.4px;text-transform:uppercase;margin-bottom:16px;opacity:.8;}
.inv-card-names{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:29px;line-height:1.2;margin-bottom:12px;letter-spacing:.2px;}
.inv-card-heading{font-family:var(--font-body);font-weight:300;font-size:10.5px;letter-spacing:1.6px;line-height:1.8;margin-bottom:20px;opacity:.88;}
.inv-card-divider{width:30px;height:1px;margin:16px auto;opacity:.55;}
.inv-card-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:18px;}
.inv-card-meta{font-family:var(--font-body);font-weight:300;font-size:9.5px;letter-spacing:.8px;line-height:1.8;opacity:.78;}
.inv-card-fn{margin-bottom:16px;width:100%;}
.inv-card-fn-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;margin-bottom:4px;}
.inv-card-fn-meta{font-family:var(--font-body);font-weight:300;font-size:9.5px;letter-spacing:.6px;opacity:.75;line-height:1.7;}
.inv-card-msg{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;line-height:1.7;margin:18px 0;opacity:.92;}
.inv-card-foot{font-family:var(--font-body);font-weight:400;font-size:8.5px;letter-spacing:2.2px;opacity:.6;margin-top:auto;padding-top:22px;text-transform:uppercase;}
.inv-card-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:14px;opacity:.4;line-height:1.7;
}

/* ---------- Create / success state ---------- */
.inv-final{text-align:center;padding:36px 20px 20px;}
.inv-final-eyebrow{font-family:var(--font-body);font-size:9px;letter-spacing:3.4px;text-transform:uppercase;color:var(--brass-bright);margin-bottom:16px;}
.inv-final-heading{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:30px;color:var(--cream);margin-bottom:34px;letter-spacing:.2px;}
.inv-final-actions{display:flex;flex-direction:column;gap:12px;max-width:300px;margin:34px auto 0;}
.inv-final-note{
  font-family:var(--font-body);font-weight:300;font-size:10.5px;color:var(--ivory-faint);margin-top:28px;
  line-height:1.8;max-width:320px;margin-left:auto;margin-right:auto;opacity:.7;
}

/* ---------- Loading state ---------- */
.inv-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;
}
.inv-loading-mark{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--brass-dim);border-top-color:var(--brass-bright);
  animation:invSpin 1.1s linear infinite;margin-bottom:22px;
}
@keyframes invSpin{to{transform:rotate(360deg);}}
.inv-loading-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--ivory-dim);letter-spacing:.3px;}

@media (prefers-reduced-motion: reduce){
  .inv-studio, .inv-step, .inv-preview-pane.mobile-show{animation:none;}
  .inv-loading-mark{animation:none;}
}

/* ================================================================
   INVITATION STUDIO — LUXURY UPGRADE LAYER v2
   Additive CSS only. All selectors use .inv- prefix.
   Does not touch dashboard, countdown, CRM, auth, or booking CSS.
   ================================================================ */

/* ── MOOD CARDS (Step 01) ── */
.inv-mood-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin-bottom:44px;
}
@media(min-width:580px){ .inv-mood-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
@media(min-width:900px){ .inv-mood-grid{ grid-template-columns:repeat(3,1fr); gap:22px; } }

.inv-mood-card{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:28px 20px 24px;
  cursor:pointer;
  overflow:hidden;
  transition:border-color .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
  background:var(--surface-deep);
  text-align:center;
  min-height:148px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:0;
}
.inv-mood-card::before{
  content:'';
  position:absolute;inset:0;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.inv-mood-card:hover, .inv-mood-card:focus-visible{
  border-color:var(--brass-dim);
  transform:translateY(-3px);
  box-shadow:0 12px 36px -8px rgba(0,0,0,0.28), 0 0 0 0 transparent;
}
.inv-mood-card:hover::before, .inv-mood-card:focus-visible::before{ opacity:1; }
.inv-mood-card.active{
  border-color:var(--brass-bright);
  box-shadow:0 0 0 1px var(--brass-bright), 0 16px 44px -10px rgba(200,162,76,0.22);
}
.inv-mood-card.active::after{
  content:'✓';
  position:absolute;top:10px;right:12px;
  font-size:10px;
  color:var(--brass-bright);
  font-family:var(--font-body);
}

/* Mood-specific colour bands */
.inv-mood-card[data-mood="Floral"]::before{
  background:radial-gradient(circle at 50% 0%, rgba(208,130,140,0.18), transparent 70%);
}
.inv-mood-card[data-mood="Royal"]::before{
  background:radial-gradient(circle at 50% 0%, rgba(200,162,76,0.18), transparent 70%);
}
.inv-mood-card[data-mood="Minimal"]::before{
  background:radial-gradient(circle at 50% 0%, rgba(246,241,231,0.10), transparent 70%);
}
.inv-mood-card[data-mood="Traditional"]::before{
  background:radial-gradient(circle at 50% 0%, rgba(220,100,40,0.18), transparent 70%);
}
.inv-mood-card[data-mood="Illustrated"]::before{
  background:radial-gradient(circle at 50% 0%, rgba(100,160,100,0.16), transparent 70%);
}
.inv-mood-card[data-mood="Modern"]::before{
  background:radial-gradient(circle at 50% 0%, rgba(120,160,200,0.15), transparent 70%);
}

.inv-mood-icon{
  font-size:22px;
  margin-bottom:14px;
  opacity:.75;
  line-height:1;
}
.inv-mood-name{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:500;
  font-size:18px;
  color:var(--cream);
  letter-spacing:.2px;
  margin-bottom:5px;
  line-height:1.1;
}
.inv-mood-card.active .inv-mood-name{ color:var(--brass-bright); }
.inv-mood-sub{
  font-family:var(--font-body);
  font-weight:300;
  font-size:10px;
  letter-spacing:.6px;
  color:var(--ivory-faint);
  line-height:1.55;
  opacity:.75;
}

/* ── TEMPLATE LIBRARY (Step 02) ── */
.inv-tpl-grid-lux{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-bottom:36px;
}
@media(min-width:580px){ .inv-tpl-grid-lux{ grid-template-columns:repeat(3,1fr); gap:22px; } }

.inv-tpl-card-lux{
  cursor:pointer;
  transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
  border-radius:2px;
  overflow:hidden;
}
.inv-tpl-card-lux:not(.active){ opacity:.80; }
.inv-tpl-card-lux:hover{ opacity:1; transform:translateY(-2px); }
.inv-tpl-card-lux.active{ opacity:1; }

.inv-tpl-artwork{
  position:relative;
  aspect-ratio:9/16;
  overflow:hidden;
  border:1px solid var(--hairline);
  transition:border-color .35s ease;
  /* The artwork itself fills this container — either an <img> or a
     gradient swatch when the image asset is not yet uploaded */
  display:flex;align-items:center;justify-content:center;
}
.inv-tpl-card-lux.active .inv-tpl-artwork{
  border-color:var(--brass-bright);
  box-shadow:0 0 0 1px var(--brass-bright);
}

/* Gradient swatch fallback (used until real artwork is uploaded) */
.inv-tpl-artwork-bg{
  position:absolute;inset:0;
  /* background set inline from template.bg */
  transition:transform 6s ease;
}
.inv-tpl-card-lux:hover .inv-tpl-artwork-bg{ transform:scale(1.04); }

/* The text overlay inside the tiny artwork preview */
.inv-tpl-artwork-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px 10px;
  gap:6px;
  /* soft scrim so text is always readable */
  background:linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.28) 60%, rgba(0,0,0,0.52) 100%);
}
.inv-tpl-artwork-occ{
  font-family:var(--font-body);
  font-size:6.5px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  /* colour set inline from template.text */
  opacity:.8;
}
.inv-tpl-artwork-names{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:16px;
  line-height:1.2;
  text-align:center;
  /* colour set inline from template.accent */
}
.inv-tpl-artwork-divider{
  width:20px;height:1px;
  /* background set inline from template.accent */
  opacity:.7;
}
.inv-tpl-artwork-meta{
  font-family:var(--font-body);
  font-weight:300;
  font-size:6px;
  letter-spacing:.8px;
  /* colour set inline from template.text */
  opacity:.7;
  text-align:center;
}

/* Selected tick */
.inv-tpl-artwork-tick{
  position:absolute;top:8px;right:8px;
  width:18px;height:18px;border-radius:50%;
  background:var(--brass-bright);
  color:#101B30;
  font-size:9px;
  display:none;
  align-items:center;justify-content:center;
  font-weight:700;
}
.inv-tpl-card-lux.active .inv-tpl-artwork-tick{ display:flex; }

.inv-tpl-name-lux{
  padding:9px 2px 0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:9.5px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--ivory-faint);
}
.inv-tpl-card-lux.active .inv-tpl-name-lux{ color:var(--brass-bright); }
.inv-tpl-desc-lux{
  font-family:var(--font-body);
  font-weight:300;
  font-size:9.5px;
  color:var(--ivory-faint);
  opacity:.6;
  letter-spacing:.2px;
  line-height:1.5;
  margin-top:2px;
}

/* ── OCCASION IMAGE (when artwork path is set) ── */
.inv-tpl-artwork img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center top;
}

/* ── PROGRESS RAIL UPGRADE ── */
.inv-progress-v2{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin:10px 20px 44px;
  padding:0;
  flex-wrap:nowrap;
  overflow:hidden;
}
.inv-progress-v2-item{
  display:flex;align-items:center;gap:7px;
  flex-shrink:0;
  padding:0 10px;
  position:relative;
}
.inv-progress-v2-item + .inv-progress-v2-item::before{
  content:'';
  position:absolute;left:0;
  width:1px;height:16px;
  background:var(--hairline);
}
.inv-pv2-num{
  font-family:var(--font-body);
  font-weight:500;font-size:9px;letter-spacing:.8px;
  color:var(--ivory-faint);opacity:.45;
  transition:opacity .4s ease,color .4s ease;
  min-width:16px;text-align:center;
}
.inv-pv2-label{
  font-family:var(--font-body);font-weight:400;
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--ivory-faint);opacity:.45;
  transition:opacity .4s ease,color .4s ease;
  white-space:nowrap;
}
.inv-progress-v2-item.done .inv-pv2-num,
.inv-progress-v2-item.done .inv-pv2-label{opacity:.7;color:var(--ivory-dim);}
.inv-progress-v2-item.done .inv-pv2-num::after{content:' ✓';}
.inv-progress-v2-item.on .inv-pv2-num,
.inv-progress-v2-item.on .inv-pv2-label{opacity:1;color:var(--brass-bright);}
@media(max-width:560px){
  .inv-pv2-label{display:none;}
  .inv-pv2-num{font-size:11px;}
  .inv-progress-v2-item{padding:0 7px;}
}

/* ── FUNCTION QUICK-ADD PRESETS ── */
.inv-fn-presets{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:26px;
}
.inv-fn-preset-btn{
  border:1px solid var(--hairline);background:none;
  color:var(--ivory-dim);
  font-family:var(--font-body);font-weight:400;
  font-size:9px;letter-spacing:1.8px;text-transform:uppercase;
  padding:9px 14px;
  border-radius:2px;
  transition:border-color .3s ease,color .3s ease,background .3s ease;
  cursor:pointer;
}
.inv-fn-preset-btn:hover{
  border-color:var(--brass-dim);
  color:var(--brass-bright);
  background:rgba(200,162,76,0.05);
}

/* ── PHOTO UPLOAD UPGRADE ── */
.inv-photo-upload-lux{
  position:relative;
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:0;
  cursor:pointer;
  margin-bottom:24px;
  overflow:hidden;
  transition:border-color .4s ease;
  min-height:120px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-deep);
}
.inv-photo-upload-lux:hover{border-color:var(--brass-dim);}
.inv-photo-upload-lux img{
  width:100%;max-height:220px;object-fit:cover;object-position:center top;
  display:block;
}
.inv-photo-upload-lux .inv-photo-hint{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px 16px;
  background:linear-gradient(0deg,rgba(10,18,32,0.85) 0%,transparent 100%);
  font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:2px;text-transform:uppercase;
  color:var(--ivory-faint);text-align:center;
}
.inv-photo-upload-lux .inv-photo-empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 20px;
}
.inv-photo-upload-lux .inv-photo-empty-icon{
  width:38px;height:38px;border:1px solid var(--hairline);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ivory-faint);font-size:16px;opacity:.55;
}
.inv-photo-upload-lux .inv-photo-empty-label{
  font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--ivory-faint);opacity:.6;
}
.inv-photo-upload-lux input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}

/* ── PREVIEW PANE UPGRADE ── */
.inv-preview-pane-lux{
  display:none;
}
.inv-preview-pane-lux.mobile-show{ display:block; animation:invFadeIn .4s ease; }
@media(min-width:960px){
  .inv-preview-pane-lux{
    display:block;
    flex:0 0 300px;
    position:sticky;top:26px;
    align-self:flex-start;
  }
}

/* Phone frame for the lux preview */
.inv-phone-lux{
  position:relative;
  max-width:260px;
  margin:0 auto;
}
.inv-phone-lux-shell{
  border:6px solid #0a1220;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 22px 56px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,0.05);
  background:#0a1220;
  position:relative;
}
.inv-phone-lux-shell::before{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:28%;height:18px;background:#0a1220;border-radius:0 0 12px 12px;z-index:5;
}
/* The card fills the phone shell */
.inv-card-lux{
  aspect-ratio:9/19;
  overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  transition:background .5s ease;
  scrollbar-width:none;
  position:relative;
}
.inv-card-lux::-webkit-scrollbar{width:0;}

/* ── CARD ARTWORK LAYER ── */
.inv-card-lux-bg{
  position:absolute;inset:0;
  /* background set inline */
  pointer-events:none;
}
/* Corner floral SVG overlaid on the card */
.inv-card-lux-deco{
  position:absolute;inset:0;pointer-events:none;
  z-index:1;
  overflow:hidden;
}
/* Content above decoration */
.inv-card-lux-content{
  position:relative;z-index:2;
  width:100%;
  padding:32px 18px 28px;
  display:flex;flex-direction:column;align-items:center;gap:0;
  flex:1;
}

/* Typography inside the live preview card */
.inv-card-lux-eyebrow{
  font-family:var(--font-body);font-weight:400;
  font-size:6.5px;letter-spacing:3.2px;text-transform:uppercase;
  margin-bottom:12px;opacity:.75;
}
.inv-card-lux-names{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:26px;line-height:1.15;margin-bottom:10px;letter-spacing:.1px;
}
.inv-card-lux-heading{
  font-family:var(--font-body);font-weight:300;
  font-size:8px;letter-spacing:1.4px;line-height:1.8;
  margin-bottom:14px;opacity:.82;
}
.inv-card-lux-divider{
  width:24px;height:1px;margin:10px auto 14px;opacity:.55;
}
.inv-card-lux-photo{
  width:76px;height:76px;border-radius:50%;
  object-fit:cover;margin-bottom:14px;
  border:2px solid currentColor;
  opacity:.9;
}
.inv-card-lux-meta{
  font-family:var(--font-body);font-weight:300;
  font-size:8px;letter-spacing:.7px;line-height:1.85;opacity:.78;
}
.inv-card-lux-fn{margin-top:12px;width:100%;}
.inv-card-lux-fn-name{font-family:var(--font-display);font-style:italic;font-size:13px;margin-bottom:3px;}
.inv-card-lux-fn-meta{font-family:var(--font-body);font-weight:300;font-size:7.5px;letter-spacing:.5px;opacity:.7;line-height:1.7;}
.inv-card-lux-msg{
  font-family:var(--font-display);font-style:italic;font-size:11.5px;
  line-height:1.7;margin:14px 0;opacity:.9;
}
.inv-card-lux-foot{
  font-family:var(--font-body);font-weight:400;font-size:7px;
  letter-spacing:2px;opacity:.55;margin-top:auto;padding-top:18px;
  text-transform:uppercase;
}
.inv-card-lux-placeholder{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;padding:40px 20px;
  font-family:var(--font-display);font-style:italic;font-size:13px;
  opacity:.35;line-height:1.7;gap:8px;
}
.inv-card-lux-placeholder-icon{ font-size:22px;opacity:.4; }

/* ── FINAL SCREEN UPGRADE ── */
.inv-final-lux{
  text-align:center;padding:40px 20px 28px;
}
.inv-final-lux-preview{
  max-width:240px;margin:0 auto 36px;
}
.inv-final-lux-preview .inv-phone-lux-shell{
  box-shadow:0 32px 80px rgba(0,0,0,.55);
}
.inv-final-actions-lux{
  display:flex;flex-direction:column;gap:14px;max-width:280px;margin:0 auto;
}
.inv-final-actions-lux .inv-btn-primary{
  max-width:none;width:100%;
  padding:17px 30px;font-size:10px;letter-spacing:2.6px;
}
.inv-final-lux-note{
  font-family:var(--font-body);font-weight:300;font-size:10.5px;
  color:var(--ivory-faint);margin-top:28px;line-height:1.8;
  max-width:300px;margin-left:auto;margin-right:auto;opacity:.6;
}

/* ── OCCASION FILTER BAR ── */
.inv-occ-bar{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:36px;
}
.inv-occ-chip{
  border:1px solid var(--hairline);background:none;
  color:var(--ivory-dim);
  font-family:var(--font-body);font-weight:400;
  font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  padding:10px 16px;
  border-radius:2px;
  transition:border-color .35s ease,color .35s ease,background .35s ease;
  cursor:pointer;
}
.inv-occ-chip.active{
  border-color:var(--brass-bright);color:var(--brass-bright);
  background:rgba(200,162,76,0.07);
}
.inv-occ-chip:hover:not(.active){ border-color:var(--brass-dim); }

/* ── SECTION DIVIDER (step labels) ── */
.inv-section-divider{
  display:flex;align-items:center;gap:14px;
  margin:0 0 24px;
}
.inv-section-divider-label{
  font-family:var(--font-body);font-size:8.5px;letter-spacing:2.8px;text-transform:uppercase;
  color:var(--brass-bright);white-space:nowrap;opacity:.9;
}
.inv-section-divider-line{flex:1;height:1px;background:var(--hairline);}

/* END INVITATION STUDIO LUXURY UPGRADE LAYER v2 */

/* ================================================================
   INVITATION STUDIO — E-VIDEO ADDITIVE STYLES
   Format-choice screen (welcome) + video preview/result on the
   final screen. Everything else in the studio is untouched.
   ================================================================ */
/* ══════════════════════════════════════════════════════════════
   INVITATION FORMAT — Greeting Card (book-open flip effect)
   Two pages joined at a centre spine. Each page lifts on hover/tap.
   The left page = E-Card, right page = E-Video.
   ══════════════════════════════════════════════════════════════ */
.inv-format-grid{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:0;
  max-width:680px;
  margin:0 auto 8px;
  perspective:1400px;
}

/* The spine — a thin gold line between the two pages */
.inv-format-spine{
  width:2px;
  flex-shrink:0;
  background:linear-gradient(180deg,transparent 0%,var(--brass) 20%,var(--brass) 80%,transparent 100%);
  position:relative;
  z-index:2;
  opacity:.55;
}

.inv-format-card{
  flex:1;
  cursor:pointer;
  padding:40px 28px 36px;
  position:relative;
  background:linear-gradient(160deg, var(--surface-deep-2) 0%, var(--surface-deep) 100%);
  border:1px solid var(--hairline);
  overflow:hidden;
  /* 3-D lift on hover — left page tilts left, right page tilts right */
  transform-origin:center center;
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    box-shadow .55s cubic-bezier(.16,1,.3,1),
    border-color .3s ease;
  will-change:transform;
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Left page — tilts open to the left */
.inv-format-card:first-child{
  border-radius:6px 0 0 6px;
  border-right:none;
  transform-origin:right center;
}
.inv-format-card:first-child:hover,
.inv-format-card:first-child:focus-visible{
  transform:rotateY(-8deg) translateX(-6px) translateY(-4px);
  box-shadow:-12px 20px 60px rgba(0,0,0,0.22), -4px 4px 16px rgba(200,162,76,0.12);
  border-color:var(--brass-dim);
  z-index:3;
}

/* Right page — tilts open to the right */
.inv-format-card:last-child{
  border-radius:0 6px 6px 0;
  border-left:none;
  transform-origin:left center;
}
.inv-format-card:last-child:hover,
.inv-format-card:last-child:focus-visible{
  transform:rotateY(8deg) translateX(6px) translateY(-4px);
  box-shadow:12px 20px 60px rgba(0,0,0,0.22), 4px 4px 16px rgba(200,162,76,0.12);
  border-color:var(--brass-dim);
  z-index:3;
}

/* Tap / active state — push it back slightly like pressing a page */
.inv-format-card:active{
  transform:rotateY(0deg) translateY(0px) scale(.98) !important;
  transition-duration:.12s !important;
}

/* Full-bleed corner gold accent */
.inv-format-card::before{
  content:'';
  position:absolute;
  top:0;right:0;
  width:70px;height:70px;
  background:radial-gradient(circle at top right, rgba(200,162,76,0.18) 0%, transparent 70%);
  pointer-events:none;
}

/* Large decorative background numeral */
.inv-format-card::after{
  content:attr(data-num);
  position:absolute;
  bottom:-18px;right:14px;
  font-family:'Cormorant Garamond',serif;
  font-size:120px;font-weight:600;font-style:italic;
  color:rgba(200,162,76,0.06);
  line-height:1;
  pointer-events:none;
  user-select:none;
  transition:color .4s ease;
}
.inv-format-card:hover::after{ color:rgba(200,162,76,0.10); }

.inv-format-icon{
  font-size:22px;color:var(--brass-bright);
  margin-bottom:auto;
  padding-bottom:28px;
}
.inv-format-title{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:28px;color:var(--cream);margin-bottom:10px;letter-spacing:.2px;
}
.inv-format-sub{
  font-family:var(--font-body);font-weight:300;font-size:12px;
  color:var(--ivory-faint);line-height:1.7;margin-bottom:18px;
}

/* "Open" CTA — appears on hover */
.inv-format-cta{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:500;font-size:9px;
  letter-spacing:2.8px;text-transform:uppercase;color:var(--brass-bright);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s ease .1s, transform .35s ease .1s;
}
.inv-format-card:hover .inv-format-cta,
.inv-format-card:focus-visible .inv-format-cta{
  opacity:1;transform:translateY(0);
}
.inv-format-cta-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,var(--brass),transparent);
  max-width:32px;
}

/* Hint text below the card */
.inv-format-hint{
  font-family:var(--font-body);font-weight:300;font-size:9.5px;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ivory-faint);opacity:.6;
  text-align:center;margin-top:22px;
}

/* Mobile: stack vertically, no 3-D tilt (touch has no hover) */
@media(max-width:639px){
  .inv-format-grid{ flex-direction:column; max-width:360px; }
  .inv-format-spine{ width:100%; height:2px;
    background:linear-gradient(90deg,transparent 0%,var(--brass) 20%,var(--brass) 80%,transparent 100%);
  }
  .inv-format-card:first-child{ border-radius:6px 6px 0 0; border-right:1px solid var(--hairline); border-bottom:none; transform-origin:bottom center; }
  .inv-format-card:last-child{ border-radius:0 0 6px 6px; border-left:1px solid var(--hairline); border-top:none; transform-origin:top center; }
  .inv-format-card:first-child:hover{ transform:translateY(-4px); box-shadow:0 -8px 32px rgba(200,162,76,0.12); }
  .inv-format-card:last-child:hover{ transform:translateY(4px); box-shadow:0 8px 32px rgba(200,162,76,0.12); }
  .inv-format-cta{ opacity:1; transform:none; }
  .inv-format-card{ min-height:180px; padding:28px 22px 24px; }
}
.inv-final-video{
  width:100%;max-width:260px;border-radius:12px;display:block;margin:0 auto 8px;
  border:2px solid var(--brass-dim);background:#f9f3ee;
  box-shadow:0 8px 32px rgba(200,162,76,0.18);
}
/* Video template picker swatches — light pastel backgrounds */
.inv-tpl-card[data-vtpl] .inv-tpl-swatch{
  border-radius:8px;
  border:2px solid rgba(200,162,76,0.25);
}

/* ================================================================
   INVITATION LAYOUT EDITOR OVERLAY
   Full-screen overlay that hosts invitation-editor.html in an iframe.
   Opened by INV_openLayoutEditor() from the welcome screen.
   ================================================================ */
#invEditorOverlay{
  position:fixed;inset:0;z-index:9990;
  background:var(--navy,#101B30);
  display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
}
#invEditorOverlay.inv-editor-hidden{ display:none; }
.inv-editor-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px;
  background:#16213A;
  border-bottom:1px solid rgba(200,162,76,0.2);
  flex-shrink:0;
}
.inv-editor-topbar-title{
  font-family:var(--font-body,'Jost',sans-serif);
  font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--brass-bright,#C8A24C);
}
.inv-editor-topbar-close{
  font-family:var(--font-body,'Jost',sans-serif);
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  background:none;
  border:1px solid rgba(200,162,76,0.3);
  color:var(--cream,#F6F1E7);
  padding:7px 18px;border-radius:4px;
  cursor:pointer;
  transition:background .2s,border-color .2s;
}
.inv-editor-topbar-close:hover{
  background:rgba(200,162,76,0.12);
  border-color:rgba(200,162,76,0.6);
}
#invEditorFrame{
  flex:1;border:none;width:100%;
  display:block;
}

/* Welcome screen — Layout Editor card (third option below E-Card + E-Video) */
.inv-editor-entry{
  max-width:680px;margin:22px auto 0;
  padding:20px 24px;
  background:linear-gradient(135deg,var(--surface-deep-2,#0E1729) 0%,var(--surface-deep,#0B1220) 100%);
  border:1px solid var(--hairline,rgba(246,241,231,0.09));
  border-radius:6px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  cursor:pointer;
  transition:border-color .3s,background .3s;
}
.inv-editor-entry:hover{
  border-color:var(--brass-dim,rgba(200,162,76,0.28));
  background:linear-gradient(135deg,rgba(200,162,76,0.06) 0%,var(--surface-deep,#0B1220) 100%);
}
.inv-editor-entry-left{ display:flex;align-items:center;gap:16px; }
.inv-editor-entry-icon{
  font-size:20px;color:var(--brass-bright,#C8A24C);
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  background:rgba(200,162,76,0.08);border-radius:6px;flex-shrink:0;
}
.inv-editor-entry-title{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;
  color:var(--cream,#F6F1E7);margin-bottom:3px;
}
.inv-editor-entry-sub{
  font-family:var(--font-body,'Jost',sans-serif);font-size:11px;font-weight:300;
  color:var(--ivory-faint,rgba(246,241,231,0.38));line-height:1.6;
}
.inv-editor-entry-cta{
  font-family:var(--font-body,'Jost',sans-serif);font-size:9px;
  letter-spacing:2.5px;text-transform:uppercase;
  color:var(--brass-bright,#C8A24C);
  white-space:nowrap;flex-shrink:0;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s,transform .3s;
}
.inv-editor-entry:hover .inv-editor-entry-cta{
  opacity:1;transform:translateX(0);
}
@media(max-width:639px){
  .inv-editor-entry{ flex-direction:column;align-items:flex-start;gap:12px; }
  .inv-editor-entry-cta{ opacity:1;transform:none; }
}

/* ── Invitation Atelier entry — mirrors inv-editor-entry exactly ──
   ⭐ FIX: margin-top raised from 12px to 36px. Originally this card sat
   just beneath the E-Card/E-Video grid and its "Choose your format"
   hint line, so 12px was correct there. With that grid now removed
   from the welcome screen (E-Card/E-Video not ready yet — Atelier is
   the only option shown), this card is the first thing below the
   heading/subtitle, and needs real breathing room instead of sitting
   cramped right under the subtitle paragraph. */
.inv-atelier-entry{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:36px;padding:18px 20px;border-radius:14px;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-deep);
  transition:background .22s,border-color .22s;text-align:left;width:100%;
}
.inv-atelier-entry:hover{ background:var(--surface-deep-2);border-color:var(--brass); }
.inv-atelier-entry-left{ display:flex;align-items:center;gap:16px; }
.inv-atelier-entry-icon{
  width:40px;height:40px;border-radius:50%;background:var(--brass-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;
}
.inv-atelier-entry-title{ font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--ivory); }
.inv-atelier-entry-sub{ font-size:12px;color:var(--ivory-dim);margin-top:3px;line-height:1.5; }
.inv-atelier-entry-cta{
  font-size:12px;letter-spacing:.08em;color:var(--brass);white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .22s,transform .22s;
}
.inv-atelier-entry:hover .inv-atelier-entry-cta{ opacity:1;transform:translateX(0); }
@media(max-width:639px){
  .inv-atelier-entry{ flex-direction:column;align-items:flex-start;gap:12px; }
  .inv-atelier-entry-cta{ opacity:1;transform:none; }
}

/* Atelier overlay — mirrors invEditorOverlay exactly */
#atelierOverlay{
  position:fixed;inset:0;z-index:3000;
  display:flex;flex-direction:column;
  background:var(--navy);
}
/* Invitation Maker overlay — same shell as the Atelier so the two
   feel like one family. Its own hidden class, so neither can close
   the other by accident. */
#makerOverlay{
  position:fixed;inset:0;z-index:3000;
  display:flex;flex-direction:column;
  background:var(--navy);
}
#makerOverlay.maker-hidden{ display:none; }
#makerOverlay iframe{ flex:1;width:100%;border:0;display:block;background:#1C140D; }
#atelierOverlay.atelier-hidden{ display:none; }
.atelier-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:var(--surface-deep);
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.atelier-topbar-title{ font-family:var(--font-display);font-size:17px;color:var(--ivory); }
.atelier-topbar-close{
  background:none;border:1px solid var(--border);border-radius:8px;
  color:var(--ivory-dim);font-family:var(--font-body);font-size:12px;
  letter-spacing:.06em;padding:7px 14px;cursor:pointer;transition:.2s;
}
.atelier-topbar-close:hover{ border-color:var(--brass);color:var(--brass); }
#atelierFrame{ flex:1;border:none;width:100%;display:block; }

/* ================================================================
   DRIVE VIEWER — luxury in-portal Drive folder browser.
   Opens over the Delivery tab. Light editorial theme (cream/ivory).
   ================================================================ */
#driveViewerOverlay{
  position:fixed;inset:0;z-index:163;
  background:#F6F1E7;
  display:flex;flex-direction:column;
  opacity:0;pointer-events:none;
  transition:opacity .38s cubic-bezier(.16,1,.3,1);
  background-image:
    radial-gradient(circle at 50% 0%, rgba(200,162,76,0.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 90%, rgba(16,27,48,0.04) 0%, transparent 50%);
}
#driveViewerOverlay.is-open{opacity:1;pointer-events:auto;}

.dv-shell{
  flex:1;display:flex;flex-direction:column;min-height:0;
  transform:translateY(18px);
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
#driveViewerOverlay.is-open .dv-shell{transform:translateY(0);}

/* ── Toolbar (breadcrumb + status) ── */
.dv-head{
  flex-shrink:0;
  padding:calc(env(safe-area-inset-top,0px) + 0px) 0 0;
  background:#FFFFFF;
  border-bottom:1px solid rgba(200,162,76,0.22);
}
.dv-head-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 22px 0;
}
.dv-head-eyebrow{
  font-family:var(--font-body);font-size:8px;letter-spacing:3px;
  text-transform:uppercase;color:var(--brass-bright);margin-bottom:4px;
}
.dv-head-title{
  font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:500;
  color:var(--navy);letter-spacing:.2px;
}
.dv-close{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  border:1px solid rgba(16,27,48,0.18);background:rgba(16,27,48,0.04);
  color:rgba(16,27,48,0.55);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s,background .25s;
}
.dv-close:hover{border-color:var(--navy);color:var(--navy);background:rgba(16,27,48,0.08);}

/* breadcrumb row + prefetch status pill sit side-by-side */
.dv-breadcrumb{
  display:flex;align-items:center;gap:0;overflow-x:auto;
  padding:10px 22px 0;scrollbar-width:none;flex:1;
}
.dv-breadcrumb::-webkit-scrollbar{display:none;}

/* toolbar row that wraps breadcrumb and pill */
.dv-toolbar-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
  padding:0 22px 12px;
}
.dv-bc-item{
  font-family:var(--font-body);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:rgba(16,27,48,0.45);
  background:none;border:none;padding:4px 2px;white-space:nowrap;
  transition:color .2s ease;
}
.dv-bc-item:hover{color:var(--navy);}
.dv-bc-item.active{color:var(--navy);font-weight:500;}
.dv-bc-sep{color:var(--brass-bright);font-size:10px;padding:0 6px;flex-shrink:0;}

/* prefetch status pill */
.dv-prefetch-pill{
  font-family:var(--font-body);font-size:9px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--navy);
  display:flex;align-items:center;gap:6px;
  background:rgba(200,162,76,0.10);
  padding:5px 12px;border-radius:20px;
  border:1px solid rgba(200,162,76,0.28);
  white-space:nowrap;flex-shrink:0;
}
.dv-prefetch-ring{
  width:12px;height:12px;border-radius:50%;
  border:2px solid rgba(200,162,76,0.3);border-top-color:var(--navy);
  animation:dvSpin 0.8s linear infinite;flex-shrink:0;
}

/* ── Body ── */
.dv-body{
  flex:1;overflow-y:auto;padding:24px 16px 40px;min-height:0;
  -webkit-overflow-scrolling:touch;
  background:#F6F1E7;
}

.dv-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:80px 20px;gap:20px;text-align:center;
}
.dv-loading-ring{
  width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(200,162,76,0.3);border-top-color:var(--navy);
  animation:dvSpin 1.1s linear infinite;
}
@keyframes dvSpin{to{transform:rotate(360deg);}}
.dv-loading-text{
  font-family:var(--font-body);font-size:10px;letter-spacing:2.4px;
  text-transform:uppercase;color:rgba(16,27,48,0.4);
}

.dv-empty{
  padding:60px 20px;text-align:center;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:18px;color:rgba(16,27,48,0.38);line-height:1.6;
}

/* ── Section labels (Folders / Files) ── */
.dv-section-label{
  font-family:var(--font-body);font-size:8.5px;letter-spacing:2.6px;
  text-transform:uppercase;color:rgba(16,27,48,0.45);
  margin:0 4px 14px;
  display:flex;align-items:center;gap:12px;font-weight:500;
}
.dv-section-label::after{
  content:'';flex:1;height:1px;
  background:rgba(200,162,76,0.28);
}

/* ── Folder cards (list row style) ── */
.dv-folders{margin-bottom:28px;}
.dv-folder-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;margin-bottom:8px;
  border:1px solid rgba(200,162,76,0.2);
  background:#FFFFFF;
  border-radius:2px;
  box-shadow:0 2px 8px rgba(16,27,48,0.03);
  transition:border-color .25s,box-shadow .25s,transform .2s;
  cursor:pointer;
}
.dv-folder-card:hover{
  border-color:var(--navy);
  box-shadow:0 6px 20px rgba(16,27,48,0.07);
  transform:translateX(3px);
}
.dv-folder-icon{
  width:40px;height:40px;flex-shrink:0;
  border-radius:50%;background:rgba(200,162,76,0.1);border:1px solid rgba(200,162,76,0.28);
  display:flex;align-items:center;justify-content:center;font-size:18px;
  transition:background .25s,border-color .25s;
}
.dv-folder-card:hover .dv-folder-icon{
  background:var(--navy);border-color:var(--navy);
}
.dv-folder-card:hover .dv-folder-icon .dv-folder-emoji{
  filter:brightness(10);
}
.dv-folder-name{
  flex:1;min-width:0;
  font-family:'Cormorant Garamond',serif;font-size:17px;
  color:var(--navy);letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dv-folder-arrow{color:rgba(200,162,76,0.6);font-size:14px;flex-shrink:0;}
.dv-folder-card:hover .dv-folder-arrow{color:var(--brass-bright);}

/* ── File grid ── */
.dv-files{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
@media(min-width:540px){.dv-files{grid-template-columns:repeat(3,1fr);}}
@media(min-width:800px){.dv-files{grid-template-columns:repeat(4,1fr);}}

.dv-load-more{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:22px 0;font-size:12px;letter-spacing:.4px;color:var(--ivory-faint);
}
.dv-load-more-spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(200,162,76,0.25);border-top-color:var(--brass-bright);
  animation:dv-load-spin .8s linear infinite;
}
@keyframes dv-load-spin{to{transform:rotate(360deg);}}

.dv-file-card{
  cursor:pointer;
  border:1px solid rgba(200,162,76,0.18);
  background:#FAFAFA;
  border-radius:2px;
  box-shadow:0 2px 8px rgba(16,27,48,0.03);
  transition:border-color .25s,transform .2s,box-shadow .25s;
  overflow:hidden;
}
.dv-file-card:hover{
  border-color:var(--navy);
  background:#FFFFFF;
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(16,27,48,0.07);
}

.dv-file-thumb{
  aspect-ratio:1;width:100%;overflow:hidden;
  background:rgba(200,162,76,0.06);position:relative;
  display:flex;align-items:center;justify-content:center;
}
.dv-file-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.dv-file-card:hover .dv-file-thumb img{transform:scale(1.04);}
.dv-file-type-icon{
  width:52px;height:52px;border-radius:50%;
  background:rgba(200,162,76,0.1);border:1px solid rgba(200,162,76,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  transition:background .25s,border-color .25s;
}
.dv-file-card:hover .dv-file-type-icon{
  background:var(--navy);border-color:var(--navy);
}
.dv-file-thumb.loading{
  background:linear-gradient(90deg,
    rgba(200,162,76,0.04) 25%,
    rgba(200,162,76,0.12) 50%,
    rgba(200,162,76,0.04) 75%);
  background-size:600px 100%;
  animation:dvShimmer 1.5s ease-in-out infinite;
}
@keyframes dvShimmer{0%{background-position:-600px 0;}100%{background-position:600px 0;}}

.dv-file-info{padding:10px 10px 12px;background:#FAFAFA;}
.dv-file-name{
  font-family:var(--font-body);font-size:11px;font-weight:500;
  color:var(--navy);letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  margin-bottom:3px;
}
.dv-file-meta{
  font-family:var(--font-body);font-size:9.5px;
  color:rgba(16,27,48,0.4);letter-spacing:.3px;text-transform:uppercase;
}

/* ── Selection mode + downloads ── */
.dv-tool-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.dv-tool-btn{
  font-family:var(--font-body);font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--navy);
  background:#FFFFFF;border:1px solid rgba(16,27,48,0.18);border-radius:20px;
  padding:7px 14px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.dv-tool-btn:hover{border-color:var(--navy);background:rgba(16,27,48,0.04);}
.dv-tool-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.dv-tool-btn:disabled{opacity:.4;pointer-events:none;}

.dv-file-card{position:relative;}
.dv-file-check{
  position:absolute;top:8px;left:8px;z-index:2;
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.85);background:rgba(16,27,48,0.35);
  display:none;align-items:center;justify-content:center;
  font-size:11px;color:#fff;
  transition:background .2s ease,border-color .2s ease;
}
.dv-file-card.select-mode .dv-file-check{display:flex;}
.dv-file-card.selected .dv-file-check{background:var(--brass-bright);border-color:var(--brass-bright);}
.dv-file-card.selected{border-color:var(--brass-bright);box-shadow:0 0 0 2px rgba(200,162,76,0.35);}
/* Instant tap-feedback while file metadata resolves */
.dv-file-card-opening{
  opacity:0.5;pointer-events:none;
  animation:dvCardPulse_ 0.85s ease-in-out infinite alternate;
}
@keyframes dvCardPulse_{
  from{opacity:0.5;} to{opacity:0.25;}
}
.dv-file-dl{
  position:absolute;top:8px;right:8px;z-index:2;
  width:26px;height:26px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.7);background:rgba(16,27,48,0.45);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#fff;opacity:0;
  transition:opacity .2s ease,background .2s ease;
}
.dv-file-card:hover .dv-file-dl{opacity:1;}
.dv-file-dl:hover{background:var(--navy);}
.dv-file-card.select-mode .dv-file-dl{display:none;}
@media(hover:none){ .dv-file-dl{opacity:1;} } /* always show on touch devices — no hover state */

.dv-foot{flex-wrap:wrap;row-gap:8px;}
.dv-foot-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.dv-foot-actions{display:flex;align-items:center;gap:8px;}
.dv-foot-actions .dv-tool-btn{padding:6px 12px;font-size:9px;}


/* ── Link cards (external Drive links) ── */
.dv-link-cards{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.dv-link-card{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;
  border:1px solid rgba(200,162,76,0.2);border-top:2px solid rgba(200,162,76,0.5);
  background:#FFFFFF;
  border-radius:2px;
  box-shadow:0 2px 8px rgba(16,27,48,0.03);
  transition:border-color .25s,box-shadow .25s,transform .2s;
  cursor:pointer;width:100%;text-align:left;font-family:inherit;
}
.dv-link-card:hover{
  border-color:var(--navy);border-top-color:var(--brass-bright);
  box-shadow:0 10px 25px rgba(16,27,48,0.07);
  transform:translateX(3px);
}
.dv-link-card-icon{
  width:42px;height:42px;flex-shrink:0;border-radius:50%;
  background:rgba(200,162,76,0.1);border:1px solid rgba(200,162,76,0.28);
  display:flex;align-items:center;justify-content:center;font-size:20px;
  transition:background .25s,border-color .25s;
}
.dv-link-card:hover .dv-link-card-icon{background:var(--navy);border-color:var(--navy);}
.dv-link-card-text{flex:1;min-width:0;}
.dv-link-card-label{
  font-family:var(--font-body);font-size:8.5px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--brass-bright);margin-bottom:5px;
}
.dv-link-card-title{
  font-family:'Cormorant Garamond',serif;font-size:18px;
  color:var(--navy);letter-spacing:.2px;
}
.dv-link-card-sub{
  font-family:var(--font-body);font-size:11px;
  color:rgba(16,27,48,0.45);margin-top:3px;line-height:1.5;
}
.dv-link-card-arrow{color:var(--brass-bright);font-size:18px;flex-shrink:0;}

/* ================================================================
   LUXURY ACTION BANNERS — "Shared With You" delivery link cards.
   Replaces the plain dv-link-card rows with full-width editorial
   banners. Dark navy surface, gold accents — on-brand luxury.
   ================================================================ */
.swu-section{margin-bottom:24px;}
.swu-section-eyebrow{
  font-family:var(--font-body);font-size:8.5px;letter-spacing:3.2px;
  text-transform:uppercase;color:var(--brass-bright);
  margin-bottom:14px;padding-left:2px;
  display:flex;align-items:center;gap:14px;
}
.swu-section-eyebrow::before{
  content:'';display:block;width:22px;height:1px;background:var(--brass-bright);opacity:.6;flex-shrink:0;
}
.swu-banner{
  display:flex;align-items:stretch;
  border:1px solid var(--border-soft);
  border-top:1px solid var(--brass-dim);
  background:linear-gradient(140deg, rgba(255,255,255,0.026) 0%, rgba(255,255,255,0.006) 100%);
  border-radius:2px;
  margin-bottom:10px;
  cursor:pointer;width:100%;text-align:left;font-family:inherit;
  overflow:hidden;
  transition:border-color .3s,box-shadow .3s,transform .25s;
  position:relative;
}
.swu-banner::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 60%, rgba(200,162,76,0.04) 100%);
  pointer-events:none;
}
.swu-banner:hover{
  border-color:var(--brass-dim);
  border-top-color:var(--brass-bright);
  box-shadow:0 8px 32px rgba(0,0,0,0.28);
  transform:translateY(-2px);
}
/* Gold accent bar on left edge */
.swu-banner-accent{
  width:3px;flex-shrink:0;
  background:linear-gradient(180deg, var(--brass-bright) 0%, rgba(200,162,76,0.2) 100%);
  opacity:.55;
  transition:opacity .3s;
}
.swu-banner:hover .swu-banner-accent{opacity:1;}

.swu-banner-body{
  flex:1;min-width:0;
  padding:22px 20px 22px 22px;
  display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.swu-banner-ordinal{
  font-family:var(--font-body);font-size:8px;letter-spacing:2.8px;
  text-transform:uppercase;color:var(--brass-bright);opacity:.75;
}
.swu-banner-title{
  font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:400;
  color:var(--cream);letter-spacing:.3px;line-height:1.1;
}
.swu-banner-sub{
  font-family:var(--font-body);font-size:10.5px;
  color:var(--ivory-faint);letter-spacing:.2px;line-height:1.5;
  margin-top:2px;
}

/* Right CTA strip */
.swu-banner-cta{
  flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 22px;
  border-left:1px solid var(--border-soft);
  gap:8px;
  min-width:72px;
  transition:background .3s,border-color .3s;
}
.swu-banner:hover .swu-banner-cta{
  background:rgba(200,162,76,0.07);
  border-left-color:var(--brass-dim);
}
.swu-banner-arrow{
  font-size:20px;color:var(--brass-bright);
  transition:transform .3s ease;
  line-height:1;
}
.swu-banner:hover .swu-banner-arrow{transform:translateX(4px);}
.swu-banner-cta-label{
  font-family:var(--font-body);font-size:7.5px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ivory-faint);
}

/* ── Footer ── */
.dv-foot{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 22px calc(env(safe-area-inset-bottom,0px) + 11px);
  border-top:1px solid rgba(200,162,76,0.22);
  background:#FFFFFF;
}
.dv-foot-mark{
  font-family:var(--font-body);font-size:8px;letter-spacing:2px;
  text-transform:uppercase;color:rgba(16,27,48,0.35);
}
.dv-foot-count{
  font-family:var(--font-body);font-size:9px;letter-spacing:1.4px;
  text-transform:uppercase;color:rgba(16,27,48,0.35);
}


/* ================================================================
   DRIVE VIEWER — cinematic loading interstitial.
   Shown while the folder is fetching. Rotating quotes + shimmer.
   ================================================================ */
.dv-interstitial{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 28px;gap:0;text-align:center;min-height:300px;
}
.dv-inter-ring-wrap{position:relative;width:56px;height:56px;margin-bottom:28px;}
.dv-inter-ring{
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(200,162,76,0.2);
  border-top-color:var(--brass-bright);
  animation:dvSpin 1.2s linear infinite;
  position:absolute;inset:0;
}
.dv-inter-ring-inner{
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(200,162,76,0.1);
  border-bottom-color:rgba(200,162,76,0.5);
  animation:dvSpin 1.8s linear infinite reverse;
  position:absolute;top:9px;left:9px;
}
.dv-inter-eyebrow{
  font-family:var(--font-body);font-size:7.5px;letter-spacing:3px;
  text-transform:uppercase;color:var(--brass-bright);opacity:.65;
  margin-bottom:10px;
}
.dv-inter-quote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:19px;color:var(--ivory-dim);line-height:1.5;
  letter-spacing:.2px;margin-bottom:20px;
  min-height:54px;
  transition:opacity .6s ease;
}
.dv-inter-fact{
  font-family:var(--font-body);font-size:9.5px;letter-spacing:.3px;
  color:var(--ivory-faint);line-height:1.6;max-width:220px;
}
.dv-inter-bar{
  width:48px;height:1px;background:var(--brass-dim);margin:18px auto 0;
}

/* ============================================================
   FEATURE STRIP — Luxury Editorial Carousel
   ============================================================ */
.feature-strip{width:100%;padding:40px 0 32px;background:var(--card,#FAF6EC);overflow:visible;position:relative;}
.feature-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(184,134,58,0.07) 0%,transparent 70%);pointer-events:none;}
.feature-strip-title{text-align:center;margin-bottom:28px;padding:0 24px;}
.feature-strip-title .eyebrow{display:block;font-family:"Jost",sans-serif;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--brass,#C8A24C);margin-bottom:8px;}
.feature-strip-title h2{font-family:"Cormorant Garamond",serif;font-size:clamp(22px,4vw,32px);font-weight:400;color:var(--ivory,#1C1A12);margin:0;line-height:1.2;}
.carousel-viewport-wrap{width:100%;max-width:1000px;margin:0 auto;overflow:hidden;}
.carousel-viewport{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:0 24px 16px;scrollbar-width:none;-ms-overflow-style:none;}
.carousel-viewport::-webkit-scrollbar{display:none;}
/* ⭐ Sized for the Studio Features posters, not the small photo+caption
   card the .carousel-slide-* overlay classes below were drawn for — these
   posters already carry their own headline/copy/CTA baked into the image,
   so they need to render large enough to actually read on a phone. */
.carousel-slide{flex:0 0 min(420px,84vw);scroll-snap-align:start;border-radius:14px;overflow:hidden;position:relative;cursor:pointer;border:none;padding:0;background:none;transition:transform 0.35s cubic-bezier(.22,.68,0,1.2),box-shadow 0.35s ease;box-shadow:0 10px 30px rgba(0,0,0,0.25);}
.carousel-slide:hover{transform:translateY(-5px);box-shadow:0 20px 48px rgba(0,0,0,0.55),0 0 0 1px rgba(200,162,76,0.3);}
.carousel-slide-img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;background:#0d1829;}
.carousel-slide-body{position:absolute;bottom:0;left:0;right:0;padding:20px 18px 18px;background:linear-gradient(to top,rgba(5,10,20,0.95) 0%,rgba(5,10,20,0.7) 60%,transparent 100%);}
.carousel-slide-eyebrow{font-family:"Jost",sans-serif;font-size:9px;letter-spacing:0.2em;text-transform:uppercase;color:var(--brass,#C8A24C);margin-bottom:6px;display:block;}
.carousel-slide-title{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:500;color:#F6F1E7;line-height:1.2;margin:0 0 6px;}
.carousel-slide-sub{font-family:"Jost",sans-serif;font-size:11px;color:rgba(246,241,231,0.65);margin:0 0 14px;line-height:1.5;}
.carousel-slide-title.pop{font-size:24px;font-weight:600;color:#FFFFFF;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,0.55);}
.carousel-slide-title.pop .hl{color:#E2BE6A;}
.carousel-slide-title.pop + .carousel-slide-sub{font-size:12px;color:rgba(246,241,231,0.92);}
.carousel-slide-cta{display:inline-flex;align-items:center;gap:6px;font-family:"Jost",sans-serif;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:#F6F1E7;background:rgba(200,162,76,0.18);border:1px solid rgba(200,162,76,0.45);border-radius:4px;padding:6px 12px;transition:background 0.2s,border-color 0.2s;}
.carousel-slide:hover .carousel-slide-cta{background:rgba(200,162,76,0.32);border-color:rgba(200,162,76,0.75);}
.carousel-slide-cta-arrow{transition:transform 0.2s;}
.carousel-slide:hover .carousel-slide-cta-arrow{transform:translateX(4px);}
.carousel-dots{display:flex;justify-content:center;gap:8px;padding:4px 0 0;}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(200,162,76,0.3);border:none;cursor:pointer;padding:0;transition:width 0.3s,background 0.3s;}
.dot.active{width:18px;border-radius:3px;background:var(--brass,#C8A24C);}

/* Studio Features strip — page-by-page slider with arrows on desktop. */
.carousel-viewport-wrap{position:relative;}
.carousel-viewport{scroll-padding-inline:24px;}
#carouselDots .dot{appearance:none;-webkit-appearance:none;flex:none;}
#carouselDots .dot:focus-visible{outline:2px solid var(--brass,#C8A24C);outline-offset:3px;}
@media (min-width:900px){
  /* Two whole posters per view, so no card is ever cut at the edge. */
  .carousel-slide{flex-basis:calc((100% - 16px) / 2);}
  /* Hide the side gutters so no sliver of the neighbouring poster peeks in. */
  .carousel-viewport{clip-path:inset(-30px 24px -30px 24px);}
}
.fc-arrow{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;display:none;align-items:center;justify-content:center;
  padding:0 0 3px;font:300 30px/1 "Cormorant Garamond",Georgia,serif;color:#1C1A12;cursor:pointer;
  background:rgba(250,246,236,0.92);border:1px solid rgba(200,162,76,0.55);
  box-shadow:0 10px 26px -12px rgba(28,26,18,0.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease,transform .25s ease;}
.fc-arrow--prev{left:6px;}
.fc-arrow--next{right:6px;}
.fc-arrow:hover{background:#C8A24C;border-color:#C8A24C;color:#FFFFFF;transform:translateY(-50%) scale(1.05);}
.fc-arrow:focus-visible{outline:2px solid var(--brass,#C8A24C);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){ .fc-arrow{display:flex;} }
.carousel-viewport-wrap.fc-single .fc-arrow{display:none;}

/* ============================================================
   CINEMATIC LOADING INTERSTITIAL — Image Slideshow Version
   ============================================================ */
.loader-overlay{position:fixed;inset:0;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.5s ease;overflow:hidden;}
.loader-overlay.visible{opacity:1;pointer-events:all;}

/* Poster image slideshow background */
.loader-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1.2s ease;}
.loader-bg-next{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;}

/* Deep gradient overlay so text stays legible */
.loader-veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,10,20,0.96) 0%,rgba(5,10,20,0.55) 45%,rgba(5,10,20,0.35) 100%);}

/* Content sits above the image */
.loader-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:clamp(40px,8vh,80px);}

/* Gold rings */
.loader-rings{position:relative;width:72px;height:72px;margin-bottom:24px;flex-shrink:0;}
.loader-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;}
.loader-ring-outer{border-color:rgba(200,162,76,0.85) transparent rgba(200,162,76,0.25) transparent;animation:spinRing 2.4s linear infinite;}
.loader-ring-inner{inset:10px;border-color:transparent rgba(200,162,76,0.6) transparent rgba(200,162,76,0.15);animation:spinRing 1.6s linear infinite reverse;}
.loader-ring-dot{position:absolute;top:50%;left:50%;width:7px;height:7px;border-radius:50%;background:#C8A24C;transform:translate(-50%,-50%);box-shadow:0 0 14px rgba(200,162,76,1);}
@keyframes spinRing{to{transform:rotate(360deg);}}

/* Brand label */
.loader-brand{font-family:"Cormorant Garamond",serif;font-size:11px;letter-spacing:0.32em;text-transform:uppercase;color:rgba(200,162,76,0.9);margin-bottom:14px;}

/* Rotating quote */
.loader-quote{font-family:"Cormorant Garamond",serif;font-size:clamp(20px,5vw,28px);font-style:italic;font-weight:400;color:#F6F1E7;text-align:center;max-width:min(340px,85vw);line-height:1.45;min-height:64px;opacity:0;transition:opacity 0.7s ease;text-shadow:0 2px 16px rgba(0,0,0,0.7);}
.loader-quote.visible{opacity:1;}

/* Gold rule */
.loader-rule{width:40px;height:1px;background:rgba(200,162,76,0.5);margin:18px auto;}

/* Studio fact */
.loader-fact{font-family:"Jost",sans-serif;font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(200,162,76,0.7);text-align:center;max-width:min(280px,85vw);line-height:1.7;}

/* Slide counter dots */
.loader-slide-dots{display:flex;gap:6px;justify-content:center;margin-top:16px;}
.loader-slide-dot{width:5px;height:5px;border-radius:50%;background:rgba(200,162,76,0.3);transition:background 0.4s,transform 0.4s;}
.loader-slide-dot.active{background:#C8A24C;transform:scale(1.4);}

/* ============================================================
   LUXURY ACTION BANNERS
   ============================================================ */
.lux-action-card{display:flex;align-items:center;gap:0;background:linear-gradient(135deg,var(--surface-deep-2,#FCFAF4) 0%,var(--surface-deep,#FFFFFF) 100%);border:1px solid var(--hairline,rgba(28,26,18,0.10));border-radius:10px;padding:0;overflow:hidden;cursor:pointer;transition:transform 0.3s cubic-bezier(.22,.68,0,1.2),box-shadow 0.3s ease,border-color 0.3s;margin-bottom:12px;text-decoration:none;}
.lux-action-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(28,26,18,0.14);border-color:var(--brass-dim);}
.lux-action-accent{width:3px;align-self:stretch;background:linear-gradient(to bottom,#B8863A,rgba(184,134,58,0.3));flex-shrink:0;transition:box-shadow 0.3s;}
.lux-action-card:hover .lux-action-accent{box-shadow:0 0 12px rgba(184,134,58,0.5);}
.lux-action-body{flex:1;padding:18px 20px;}
.lux-action-eyebrow{font-family:"Jost",sans-serif;font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:var(--brass,#B8863A);margin-bottom:5px;}
.lux-action-title{font-family:"Cormorant Garamond",serif;font-size:20px;font-weight:500;color:var(--ivory,#1C1A12);line-height:1.2;margin:0 0 4px;}
.lux-action-sub{font-family:"Jost",sans-serif;font-size:11px;color:var(--ivory-dim,rgba(28,26,18,0.66));margin:0;}
.lux-action-arrow{font-size:18px;color:var(--brass-dim);padding:0 20px 0 0;flex-shrink:0;transition:transform 0.25s,color 0.25s;}
.lux-action-card:hover .lux-action-arrow{transform:translateX(5px);color:var(--brass);}

/* ⭐ FIX: Print / Save as PDF (window.print() on the Day-Of Itinerary)
   previously had no print stylesheet at all, so the browser tried to
   print the full page as laid out on screen — the fixed-position dark
   overlay, hidden dashboard behind it, header/nav, etc — which on most
   mobile browsers produced a blank, cut-off or nonsensical page rather
   than the itinerary. This isolates #itineraryContent as the only thing
   printed, and restyles it for paper (light background, dark text,
   no fixed positioning, natural document flow, buttons hidden). */
@media print{
  body *{ visibility:hidden; }
  #itineraryContent, #itineraryContent *{ visibility:visible; }
  #itineraryOverlay, #itineraryOverlay .viewer-shell, #itineraryOverlay .viewer-body{
    position:static !important; height:auto !important; max-height:none !important;
    overflow:visible !important; background:#fff !important; inset:auto !important;
  }
  #itineraryContent{
    position:static !important; padding:0 !important; background:#fff !important; color:#111 !important;
  }
  #itineraryContent *{ color:#111 !important; background:transparent !important; }
  .viewer-head, .viewer-close, #itineraryContent button{ display:none !important; }
}


/* ════════════════════════════════════════════════════════════════
   DELIVERY CONCIERGE (client ↔ studio messaging)
   Explicit colours are set on purpose: <body> carries the dark-theme
   cream text colour, which the light dashboard theme (#app) does not
   override for inherited text, so unstyled text here would be
   cream-on-white (invisible). Buttons also reset .btn's width:100%
   so they don't squeeze the reply box to nothing.
   ════════════════════════════════════════════════════════════════ */
.dc{border-top:1px solid var(--hairline-strong);margin-top:16px;padding-top:16px;color:var(--ivory);}
.dc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.dc-title{margin:0;}
.dc .btn{width:auto;margin-top:0;padding:11px 18px;flex:0 0 auto;}
.dc-new{display:none;margin-top:12px;}
.dc-input{
  display:block;width:100%;font-family:var(--font-body);font-size:13px;line-height:1.6;
  color:var(--ivory);background:var(--surface-deep);
  border:1px solid var(--hairline-strong);border-radius:6px;padding:11px 13px;resize:vertical;
}
.dc-input::placeholder{color:var(--ivory-faint);}
.dc-input:focus{outline:none;border-color:var(--brass);}
.dc-new .dc-input{margin-bottom:8px;}
.dc-new-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;}
.dc-list{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.dc-item{
  display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  padding:12px 14px;border:1px solid var(--hairline-strong);border-radius:6px;
  background:var(--surface-deep);color:var(--ivory);font-family:var(--font-body);
  cursor:pointer;transition:border-color .2s ease;
}
.dc-item:hover{border-color:var(--brass-dim);}
.dc-item--active{border-color:var(--brass);}
.dc-item-subject{font-size:13px;font-weight:600;letter-spacing:.3px;overflow-wrap:anywhere;}
.dc-item-meta{font-size:11px;color:var(--ivory-dim);}
.dc-thread{margin-top:14px;}
.dc-msgs{display:flex;flex-direction:column;gap:8px;max-height:380px;overflow-y:auto;padding:2px;}
.dc-msg{max-width:86%;padding:10px 13px;border-radius:12px;color:var(--ivory);}
.dc-msg--mine{align-self:flex-end;background:rgba(184,134,58,.16);}
.dc-msg--studio{align-self:flex-start;background:rgba(28,26,18,.06);}
.dc-msg-who{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--ivory-dim);margin-bottom:4px;}
.dc-msg-text{font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;}
.dc-msg-time{font-size:10px;color:var(--ivory-faint);margin-top:5px;}
.dc-reply{display:flex;gap:8px;align-items:flex-end;margin-top:12px;}
.dc-reply .dc-input{flex:1 1 auto;min-width:0;}
@media (max-width:480px){ .dc-msg{max-width:92%;} }

/* ⭐ STUDIO CONCIERGE HUB — Service/Booking/Management channel switcher.
   Reuses .tab-btn's look (the main tab strip's own class, just hidden via
   display:none) inside a visible wrapper of its own, since .tabs itself
   is force-hidden. */
.sc-tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--border);overflow-x:auto;}
.sc-panel{display:none;}
.sc-panel.active{display:block;}
.sc-whatsapp-panel{text-align:center;padding:6px 4px 4px;}
.sc-whatsapp-panel .btn{margin-top:16px;width:auto;padding:12px 26px;}

/* ════════════════════════════════════════════════════════════════
   INVITATION — WELCOME SCREEN (additive, visual only)
   Styles the composition drawn by INV_render() in portal-features.js.

   Supersedes the look of .inv-atelier-entry* (left in place above as
   the documented E-Card/E-Video restore path — nothing references
   those classes any more). Uses only existing brand tokens, so this
   inherits the #app light cream/gold theme automatically.

   Fixes three concrete problems with the previous screen:
     1. one shared ~660px measure instead of a 992px card under a
        440px subtitle;
     2. a card with real height and a warm surface instead of a flat
        white 76px-tall strip on cream;
     3. a CTA that is visible at rest, not only on hover.
   ════════════════════════════════════════════════════════════════ */
.inv-welcome{
  max-width:660px;margin:0 auto;padding:0 4px;
  position:relative;
}
/* Ambient warmth behind the composition so the cream page itself reads
   as lit rather than flat. Sits behind everything and never intercepts
   a tap. */
.inv-welcome::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:0;right:0;top:0;height:620px;
  /* Spread comes from the gradient, not from an over-wide box: a 150%
     box here pushed document scrollWidth past the viewport on phones.
     body{overflow-x:hidden} would have masked it, but relying on that
     is how stray horizontal scroll gets shipped. */
  background:radial-gradient(ellipse 78% 46% at 50% 38%,rgba(184,134,58,0.075) 0%,transparent 72%);
}
.inv-welcome > *{ position:relative;z-index:1; }

/* ── Masthead ── */
.inv-welcome-head{ text-align:center;padding-top:40px; }
.inv-welcome-rule{
  width:54px;height:1px;margin:0 auto 20px;
  background:linear-gradient(90deg,transparent,var(--brass-bright),transparent);
}
.inv-welcome-eyebrow{
  font-family:var(--font-body);font-weight:400;font-size:9px;
  letter-spacing:3.6px;text-transform:uppercase;
  color:var(--brass-bright);margin-bottom:14px;
}
.inv-welcome-title{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:clamp(30px,6vw,42px);line-height:1.1;letter-spacing:.2px;
  color:var(--cream);margin:0;
}
.inv-welcome-ornament{
  font-size:13px;color:var(--brass-bright);opacity:.5;
  margin:16px 0 14px;line-height:1;
}
.inv-welcome-sub{
  font-family:var(--font-body);font-weight:300;font-size:13.5px;
  line-height:1.8;color:var(--ivory-faint);
  max-width:430px;margin:0 auto;
}

/* ── Atelier entry card ── */
/* ── The two routes ────────────────────────────────────────────
   Side by side where there is room, stacked on a phone. Equal weight
   on purpose: neither the studio-built route nor the self-serve one
   is the lesser option. */
.inv-choices{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:44px 0 0;
}
.inv-choice{
  position:relative;overflow:hidden;isolation:isolate;z-index:1;
  display:flex;flex-direction:column;
  padding:34px 26px 28px;
  border:1px solid var(--border);border-radius:18px;
  background:
    radial-gradient(ellipse 72% 48% at 50% 6%, rgba(184,134,58,0.13) 0%, transparent 72%),
    radial-gradient(ellipse 120% 60% at 50% 104%, rgba(184,134,58,0.06) 0%, transparent 70%),
    linear-gradient(176deg,#FFFEFA 0%,#FDFAF3 46%,#FFFFFF 100%);
  box-shadow:0 2px 3px rgba(28,26,18,0.02),0 14px 34px -16px rgba(28,26,18,0.14);
  text-align:center;cursor:pointer;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease,border-color .3s ease;
}
/* Inset hairline — the double rule of an engraved invitation. */
.inv-choice::after{
  content:'';position:absolute;inset:9px;border-radius:12px;pointer-events:none;
  border:1px solid rgba(184,134,58,0.16);
}
.inv-choice > *{ position:relative;z-index:1; }
.inv-choice:hover{
  transform:translateY(-4px);border-color:var(--brass);
  box-shadow:0 4px 6px rgba(28,26,18,0.03),0 30px 60px -22px rgba(28,26,18,0.26);
}
.inv-choice:hover::after{ border-color:rgba(184,134,58,0.30); }

/* Each lockup has its own proportions, so the box is fixed and the
   artwork is centred inside it. Without this the two cards' text
   starts at different heights and the pair looks accidental. */
.inv-choice-logo-wrap{
  height:118px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}
.inv-choice-logo{ max-width:min(196px,86%);max-height:118px;width:auto;height:auto;display:block; }
/* The two lockups have very different proportions — the Atelier is
   nearly square, the Maker is wide — so one shared max-height made the
   Maker render 31% larger in area and the pair look unbalanced. Each
   is sized to land at roughly the same visual weight. */
.inv-choice[data-choice="atelier"] .inv-choice-logo{ max-height:132px;max-width:min(150px,74%); }
.inv-choice[data-choice="maker"]   .inv-choice-logo{ max-height:108px;max-width:min(168px,80%); }

.inv-choice-sub{
  font-family:var(--font-body);font-weight:300;font-size:12.5px;
  line-height:1.75;color:var(--ivory-dim);
  max-width:330px;margin:0 auto;flex:1;
}
.inv-choice-hair{
  width:40px;height:1px;background:var(--hairline-strong);
  margin:22px auto 18px;
}
.inv-choice-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:500;font-size:10px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--brass-bright);
}
.inv-choice-cta .arrow{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.inv-choice:hover .inv-choice-cta .arrow{ transform:translateX(5px); }

/* ── "How It Unfolds" triptych ── */
.inv-process{ margin:56px 0 64px; }
.inv-process-divider{
  display:flex;align-items:center;gap:16px;margin-bottom:30px;
}
.inv-process-divider-line{ flex:1;height:1px;background:var(--hairline); }
.inv-process-divider-label{
  font-family:var(--font-body);font-weight:400;font-size:8.5px;
  letter-spacing:3px;text-transform:uppercase;
  color:var(--brass-bright);white-space:nowrap;
}
.inv-process-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
}
.inv-process-step{
  padding:4px 22px;text-align:center;position:relative;
}
.inv-process-step + .inv-process-step::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:1px;background:var(--hairline);
}
.inv-process-num{
  font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:20px;color:var(--brass-bright);opacity:.55;
  margin-bottom:10px;line-height:1;
}
.inv-process-title{
  font-family:var(--font-body);font-weight:500;font-size:9.5px;
  letter-spacing:1.8px;text-transform:uppercase;
  color:var(--ivory);margin-bottom:8px;
}
.inv-process-text{
  font-family:var(--font-body);font-weight:300;font-size:11.5px;
  line-height:1.7;color:var(--ivory-faint);
}

/* ── Sparkle field ──────────────────────────────────────────────
   Twelve four-point gold sparkles scattered around the lockup, driven
   by INV_startMotion(). Positions are fixed here so the scatter is
   composed rather than random; only the timing is randomised, in JS.

   They start invisible ONLY under GSAP's control: opacity is left at
   the default here so that if GSAP never loads the field is simply a
   few static, very faint marks rather than a blank area — and the card
   itself is unaffected either way. The centre column is kept clear so
   nothing ever sparkles behind the wordmark or the body copy. */
.inv-sparkfield{
  /* Behind both cards now rather than inside one, and inset past the
     card edges so a sparkle never sits on top of the artwork. */
  position:absolute;inset:-18px;z-index:0;pointer-events:none;overflow:hidden;
}
.inv-spark{
  position:absolute;display:block;opacity:.18;
  background-repeat:no-repeat;background-size:contain;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c0 8 4 12 12 12-8 0-12 4-12 12 0-8-4-12-12-12 8 0 12-4 12-12z' fill='%23B8863A'/%3E%3C/svg%3E");
}
.inv-spark-1{ top:11%; left:8%;  width:9px;  height:9px;  }
.inv-spark-2{ top:7%;  left:84%; width:6px;  height:6px;  }
.inv-spark-3{ top:26%; left:15%; width:5px;  height:5px;  }
.inv-spark-4{ top:20%; left:91%; width:8px;  height:8px;  }
.inv-spark-5{ top:44%; left:5%;  width:6px;  height:6px;  }
.inv-spark-6{ top:38%; left:93%; width:5px;  height:5px;  }
.inv-spark-7{ top:62%; left:11%; width:7px;  height:7px;  }
.inv-spark-8{ top:57%; left:88%; width:6px;  height:6px;  }
.inv-spark-9{ top:80%; left:6%;  width:5px;  height:5px;  }
.inv-spark-10{ top:85%; left:94%; width:7px;  height:7px;  }


/* ── Mobile ── */
@media(max-width:639px){
  .inv-welcome-head{ padding-top:26px; }
  .inv-choices{ grid-template-columns:1fr;gap:14px;margin-top:32px; }
  .inv-choice{ padding:28px 20px 24px;border-radius:15px; }
  .inv-choice::after{ inset:7px;border-radius:10px; }
  .inv-choice:hover{ transform:none; }
  .inv-choice-logo-wrap{ height:96px;margin-bottom:14px; }
  .inv-choice-logo{ max-height:96px;max-width:min(186px,72%); }
  .inv-choice[data-choice="atelier"] .inv-choice-logo{ max-height:104px;max-width:min(128px,62%); }
  .inv-choice[data-choice="maker"]   .inv-choice-logo{ max-height:86px;max-width:min(148px,70%); }
  .inv-choice-hair{ margin:18px auto 15px; }
  /* Narrower column — pull the side sparkles in so none is clipped. */
  .inv-spark-1,.inv-spark-3,.inv-spark-5,.inv-spark-7,.inv-spark-9{ left:2%; }
  .inv-spark-2,.inv-spark-4,.inv-spark-6,.inv-spark-8,.inv-spark-10{ left:93%; }
  .inv-process{ margin:44px 0 52px; }
  .inv-process-grid{ grid-template-columns:1fr;gap:0; }
  .inv-process-step{
    padding:18px 8px;text-align:left;
    display:grid;grid-template-columns:30px 1fr;column-gap:12px;
  }
  /* vertical rule between columns becomes a horizontal rule between rows */
  .inv-process-step + .inv-process-step::before{
    left:8px;right:8px;top:0;bottom:auto;width:auto;height:1px;
  }
  .inv-process-num{ grid-row:1 / span 2;margin-bottom:0;font-size:17px;padding-top:1px; }
  .inv-process-title{ grid-column:2;margin-bottom:5px; }
  .inv-process-text{ grid-column:2; }
}
/* END INVITATION WELCOME SCREEN REDESIGN */

/* ════════════════════════════════════════════════════════════════
   HAMBURGER MENU — editorial chapters, India-luxury finish.
   My Wedding · Memories & Creation · My Account · Resources ·
   Support, then Refer & Earn and Rate Your Experience as two
   gold-edged invitations. Scoped to #navPanel so it wins over the
   older nav rules above without touching them.
   ════════════════════════════════════════════════════════════════ */
#navPanel .nav-links-pane{
  background:
    radial-gradient(120% 60% at 100% 0%, rgba(200,162,76,0.10) 0%, rgba(200,162,76,0) 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(200,162,76,0.06) 0%, rgba(200,162,76,0) 65%),
    linear-gradient(180deg, #111D34 0%, #0D1628 100%);
  border-left:1px solid rgba(200,162,76,0.22);
  padding:28px 26px 22px;
}
#navPanel .nav-links-top{margin-bottom:26px;}
#navPanel .nav-links-brand{font-family:'Cormorant Garamond',serif;font-size:19px;font-weight:600;color:var(--ivory);}
#navPanel .nav-links-brand .sub{font-family:var(--font-body);font-size:8.5px;letter-spacing:2px;font-weight:400;color:var(--ivory-faint);margin-top:3px;}
#navPanel .nav-close{width:34px;height:34px;border:1px solid rgba(200,162,76,0.35);color:#E7CB84;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .35s ease;}
#navPanel .nav-close:hover{background:#C8A24C;border-color:#C8A24C;color:#0D1628;transform:rotate(90deg);}

/* Eyebrow: hairline · lotus · THE MENU · hairline */
#navPanel .nav-links-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 10px;
  font-family:'Jost',sans-serif;font-size:9px;font-weight:500;letter-spacing:3.4px;text-transform:uppercase;color:#C8A24C;}
#navPanel .nav-eyebrow-rule{flex:1;height:1px;background:linear-gradient(90deg, rgba(200,162,76,0), rgba(200,162,76,0.55));}
#navPanel .nav-eyebrow-rule:last-child{background:linear-gradient(90deg, rgba(200,162,76,0.55), rgba(200,162,76,0));}
#navPanel .nav-lotus{flex:none;color:#C8A24C;opacity:.9;}

/* Chapters */
#navPanel .nav-group{border-top:1px solid rgba(200,162,76,0.14);}
#navPanel .nav-group:first-child{border-top:none;}
#navPanel .nav-group-head{padding:16px 2px 15px;align-items:center;text-align:left;color:inherit;}
#navPanel .nav-group-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
#navPanel .nav-group-title{font-family:var(--font-body);font-size:10px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;color:var(--ivory-faint);transition:color .25s ease;}
#navPanel .nav-group-sub{font-family:var(--font-body);font-style:normal;font-size:10.5px;letter-spacing:.2px;text-transform:none;color:rgba(246,241,231,0.32);transition:color .25s ease;}
#navPanel .nav-group-head:hover .nav-group-title,
#navPanel .nav-group.is-open>.nav-group-head .nav-group-title{color:#E7CB84;}
#navPanel .nav-group.is-open>.nav-group-head .nav-group-sub{color:rgba(246,241,231,0.48);}
#navPanel .nav-group-icon{width:24px;height:24px;border:1px solid rgba(200,162,76,0.35);border-radius:50%;color:#C8A24C;transition:background .25s ease,border-color .25s ease,color .25s ease;}
#navPanel .nav-group-icon::before{width:9px;}
#navPanel .nav-group-icon::after{height:9px;}
#navPanel .nav-group-head:hover .nav-group-icon{border-color:#C8A24C;}
#navPanel .nav-group.is-open .nav-group-icon{background:#C8A24C;border-color:#C8A24C;color:#0D1628;}

/* Links: serif, with a gold index number */
#navPanel .nav-group .nav-link-item{
  display:flex;align-items:baseline;gap:14px;width:100%;
  font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:0;line-height:1.3;
  color:var(--ivory-dim);padding:9px 10px 9px 2px;border-radius:2px;
  border-left:1px solid transparent;
}
#navPanel .nav-group .nav-link-item .n{flex:none;width:18px;margin:0;font-family:var(--font-body);font-size:10px;font-weight:400;letter-spacing:.3px;color:var(--ivory-faint);}
#navPanel .nav-group .nav-link-item .nav-link-label{transition:transform .3s cubic-bezier(.16,1,.3,1);}
#navPanel .nav-group .nav-link-item:hover{color:var(--cream);padding-left:2px;}
#navPanel .nav-group .nav-link-item:hover .nav-link-label{transform:translateX(5px);}
#navPanel .nav-group .nav-link-item.active{
  color:#E7CB84;padding-left:12px;border-left-color:#C8A24C;
  background:linear-gradient(90deg, rgba(200,162,76,0.14) 0%, rgba(200,162,76,0) 85%);
}
#navPanel .nav-group .nav-link-item.active .n{color:#E7CB84;}
#navPanel .nav-group-body-inner{padding:0 0 12px;gap:1px;}
#navPanel .nav-group a.nav-link-item{text-decoration:none;}


/* Refer & Earn · Rate Your Experience */
#navPanel .nav-feature{display:flex;flex-direction:column;gap:10px;margin-top:18px;padding-top:20px;border-top:1px solid rgba(200,162,76,0.14);}
#navPanel .nav-feature-link{
  display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:14px 16px;
  text-align:left;color:#F6F1E7;border:1px solid rgba(200,162,76,0.32);border-radius:12px;
  background:linear-gradient(135deg, rgba(200,162,76,0.13) 0%, rgba(200,162,76,0.03) 100%);
  font-family:'Jost',sans-serif;font-size:inherit;letter-spacing:0;cursor:pointer;
  transition:border-color .3s ease, background .3s ease, transform .3s ease, box-shadow .3s ease;
}
#navPanel .nav-feature-link:hover{padding-left:16px;color:#F6F1E7;border-color:#C8A24C;transform:translateY(-1px);
  background:linear-gradient(135deg, rgba(200,162,76,0.22) 0%, rgba(200,162,76,0.06) 100%);
  box-shadow:0 12px 26px -16px rgba(200,162,76,0.55);}
#navPanel .nav-feature-link.active{color:#F6F1E7;padding-left:16px;border-color:#C8A24C;}
#navPanel .nav-feature-ic{flex:none;color:#E7CB84;}
#navPanel .nav-feature-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
#navPanel .nav-feature-title{font-family:var(--font-body);font-size:15px;font-weight:500;line-height:1.25;color:var(--ivory);}
#navPanel .nav-feature-sub{font-size:10.5px;line-height:1.4;color:rgba(246,241,231,0.55);}
#navPanel .nav-feature-arrow{flex:none;color:#C8A24C;font-size:15px;transition:transform .3s ease;}
#navPanel .nav-feature-link:hover .nav-feature-arrow{transform:translateX(4px);}

#navPanel .nav-feature-arrow{display:none;}
#navPanel .nav-feature-title{white-space:nowrap;}
#navPanel .nav-feature-sub{font-size:10px;}
#navPanel button:focus-visible{outline:1px solid #E7CB84;outline-offset:3px;}
@media (max-width:420px){
  #navPanel .nav-photo{width:23%;min-width:70px;}
  #navPanel .nav-photo-quote{left:10px;right:8px;font-size:12.5px;}
  #navPanel .nav-photo-eyebrow{left:10px;letter-spacing:1.4px;}
  #navPanel .nav-links-pane{padding:24px 18px 20px;}
  #navPanel .nav-group .nav-link-item{font-size:15px;gap:12px;}
  #navPanel .nav-feature-link{padding:12px 13px;gap:11px;}
  #navPanel .nav-feature-title{font-size:14.5px;}
}
@media (prefers-reduced-motion: reduce){
  #navPanel .nav-group .nav-link-item .nav-link-label,#navPanel .nav-feature-link,#navPanel .nav-close{transition:none;}
}

/* Menu social icons: a comfortable 36px tap area around each 16px icon. */
#navPanel .nav-links-social{gap:4px;margin-left:-10px;}
#navPanel .nav-links-social a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;transition:color .2s ease,background .2s ease;}
#navPanel .nav-links-social a:hover{background:rgba(200,162,76,0.10);}
/* Slider dots stay small to the eye but get a taller invisible tap area (no overlap). */
#carouselDots .dot{position:relative;}
#carouselDots .dot::before{content:'';position:absolute;left:50%;top:50%;width:14px;height:28px;transform:translate(-50%,-50%);}

/* Fine gold line icons in place of colour emoji (calendar, itinerary,
   share, print, office hours, gift, star, heart). */
.lux-ic{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.55em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--brass-bright,#B8863A);}
.btn .lux-ic{margin-right:.6em;}
.milestone-ic .lux-ic,.review-closing-ic .lux-ic,.refer-share-ic .lux-ic{margin-right:0;}
.review-closing-ic .lux-ic{width:26px;height:26px;stroke-width:1.2;}
/* Music mood hint under the chips: visible on the cream form, gold once
   a mood is chosen. (It had no style and inherited a near-white colour.) */
#app .mood-selected-note{margin-top:10px;font-size:11px;letter-spacing:.3px;color:var(--ivory-faint);}
#app .mood-selected-note.mood-confirmed{color:var(--brass-bright);font-weight:500;}
/* Studio Concierge: the concierge block opens the card here, so it needs
   no divider above it (that rule is for its place under Delivery). */
#view-studioconcierge .dc{border-top:0;margin-top:0;padding-top:0;}
/* On a filled gold button the icon follows the button's own text colour. */
.btn-gold .lux-ic{color:inherit;}
/* Line icons inside the weather card and the Delivery gallery. */
.weather-ic .lux-ic{width:30px;height:30px;margin:0;stroke-width:1.2;}
.dv-file-type-icon .lux-ic{width:22px;height:22px;margin:0;}
.dv-folder-icon .lux-ic{width:18px;height:18px;margin:0;}
.dv-file-card:hover .dv-file-type-icon .lux-ic,.dv-folder-card:hover .dv-folder-icon .lux-ic{color:#E7CB84;}