:root{
  --night:#05070f;
  --dawn-amber:#f0a868;
  --dawn-rose:#e8849a;
  --dawn-gold:#f5c563;
  --ink:#f1f5f9;
  --muted:rgba(241,245,249,0.72);
  --faint:rgba(241,245,249,0.45);
  --card:rgba(18,22,38,0.55);
  --card-border:rgba(245,197,99,0.22);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Space Grotesk',sans-serif;
  color:var(--ink);
  background:var(--night);
  overflow-x:hidden;
  min-height:100vh;
}

.dawn-bg{
  position:fixed;inset:0;z-index:0;
  background:linear-gradient(180deg,
    #05070f 0%,#070a16 40%,#0a0d1c 62%,
    #11101f 78%,#1a1320 88%,#251624 95%,#2e1a22 100%);
}
.dawn-glow{
  position:fixed;left:50%;bottom:-360px;transform:translateX(-50%);
  width:680px;height:520px;border-radius:50%;z-index:1;
  background:radial-gradient(ellipse, rgba(240,168,104,0.22) 0%, rgba(232,132,154,0.08) 42%, transparent 70%);
  filter:blur(14px);pointer-events:none;
}
.dawn-stars{position:fixed;inset:0;z-index:1;pointer-events:none;}
.dawn-stars .star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:0;animation:premTw 4s infinite ease-in-out;}
@keyframes premTw{0%,100%{opacity:0.15;}50%{opacity:0.8;}}

.prem-wrap{position:relative;z-index:5;max-width:1400px;margin:0 auto;padding:0 2rem;}

.prem-header{
  position:sticky;top:0;z-index:100;
  background:rgba(8,7,15,0.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:0.5px solid rgba(245,197,99,0.12);
  min-height:100px;
}
.prem-header-inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 2rem;
  min-height:100px;
  display:flex;align-items:center;justify-content:space-between;
}
.prem-logo-wrap{display:flex;align-items:center;gap:12px;}
.prem-logo-img{height:90px;width:auto;display:block;object-fit:contain;max-width:380px;}
.prem-tag{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;
  color:var(--dawn-gold);letter-spacing:0.02em;
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid rgba(245,197,99,0.4);border-radius:8px;
  padding:6px 12px;background:rgba(245,197,99,0.08);
}
.prem-nav{display:flex;gap:1.5rem;align-items:center;}
.prem-nav-pill{
  font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;
  color:var(--dawn-gold);text-decoration:none;letter-spacing:0.04em;
  border:1px solid rgba(245,197,99,0.4);border-radius:6px;
  padding:8px 16px;background:rgba(245,197,99,0.06);
  transition:background .2s, color .2s;
}
.prem-nav-pill:hover{background:rgba(245,197,99,0.14);color:#f7d08a;}

/* Hero compression fix, step 1: 70px top padding was unused empty space --
   homepage's equivalent (.hero-section) uses 1.5rem (24px) top -- confirmed
   by direct measurement this alone was responsible for most of the extra
   navbar-to-content gap on premium (78.5px vs homepage's 25.5px). */
/* Step 2: tighten remaining hero spacing (measured, not guessed) -- bottom
   padding trimmed since "How Premium Works" needs to sit closer beneath. */
/* Trimmed further (24/18 -> 14/8): the hero+phase-overview stack still ran
   well past a real laptop's usable browser height (production screenshot
   showed "How Premium Works" cut off entirely, not just tight) -- every
   px of slack here buys back visibility of the phase cards below. */
.prem-hero{padding:14px 0 8px;}
.prem-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--dawn-gold);margin-bottom:14px;font-weight:600;
}
.prem-eyebrow::before{content:'';width:22px;height:1px;background:var(--dawn-gold);opacity:0.6;}
.prem-hero h1{font-size:54px;line-height:1.08;font-weight:700;letter-spacing:-0.02em;margin-bottom:14px;}
.prem-grad{
  background:linear-gradient(100deg,var(--dawn-gold),var(--dawn-amber),var(--dawn-rose));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.prem-lede{font-size:17px;line-height:1.65;color:var(--muted);max-width:620px;}

.prem-price-box{
  max-width:460px;
  border:1px solid var(--card-border);
  border-radius:16px;
  background:var(--card);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:16px;
}
.prem-hero-copy .prem-price-box{margin-top:14px;}
.prem-price-col-left{flex:1;min-width:0;}
.prem-price-headline{font-size:15px;font-weight:600;color:var(--muted);margin-bottom:8px;}
.prem-price-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;min-height:34px;}
.prem-price-col-right{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding-left:16px;
  border-left:0.5px solid var(--card-border);
}
.prem-price-box.no-badge .prem-price-col-right{display:none;}
.prem-price-badge-label{font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--dawn-gold);white-space:nowrap;}
.prem-price-badge-sub{font-size:11px;color:var(--faint);white-space:nowrap;}
.prem-price-was{font-size:16px;color:var(--faint);text-decoration:line-through;}
.prem-price-now{font-size:26px;font-weight:700;color:var(--dawn-gold);}
.prem-price-save{
  font-size:11px;font-weight:700;letter-spacing:0.03em;
  color:#22c55e;background:rgba(34,197,94,0.14);border:1px solid rgba(34,197,94,0.35);
  border-radius:6px;padding:4px 9px;white-space:nowrap;
}

.prem-flow{padding:0;}
.prem-container{
  background:rgba(18,16,28,0.55);
  border:1px solid rgba(245,197,99,0.16);
  border-radius:16px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  /* Top padding trimmed (48->26->16) so "How Premium Works" sits closer to
     the top border, freeing room for the bottom padding (48->56, kept) so
     the phase descriptions get more breathing room before the border
     instead of feeling stuck to it -- measured before the 26 change: both
     gaps were an identical 49px, which read as top-heavy rather than
     balanced. Trimmed further to 16 (plus margin-top 20->10) once a real
     production screenshot showed the whole container below the fold on a
     typical laptop screen, not just tight against a synthetic 900px test
     viewport. */
  padding:16px 36px 56px;
  margin:10px 0 0;
  box-shadow:0 0 40px rgba(0,0,0,0.3);
}
.prem-flow-label{font-size:13px;letter-spacing:0.18em;text-transform:uppercase;color:var(--faint);margin-bottom:38px;text-align:center;}

.prem-milestone-flow{display:flex;align-items:flex-start;}
.prem-milestone-step{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1;}
.prem-node{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Press Start 2P',monospace;font-size:12px;font-weight:700;
  margin-bottom:16px;
}
.prem-node.n1{background:#2a2010;color:var(--dawn-gold);border:2px solid var(--dawn-gold);box-shadow:0 0 6px 2px rgba(245,197,99,0.3);animation:premPulse1 3s ease-in-out infinite;}
.prem-node.n2{background:#2a1c10;color:var(--dawn-amber);border:2px solid var(--dawn-amber);box-shadow:0 0 8px 2px rgba(240,168,104,0.4);animation:premPulse2 2.4s ease-in-out infinite;}
.prem-node.n3{background:#2a1418;color:var(--dawn-rose);border:2px solid var(--dawn-rose);box-shadow:0 0 6px 2px rgba(232,132,154,0.3);animation:premPulse3 3s ease-in-out infinite;}
.prem-node.n4{background:#2a2214;color:#f7d08a;border:2px solid #f7d08a;box-shadow:0 0 6px 2px rgba(247,208,138,0.3);animation:premPulse4 2.7s ease-in-out infinite;}
@keyframes premPulse1{0%,100%{box-shadow:0 0 6px 2px rgba(245,197,99,0.3);}50%{box-shadow:0 0 18px 6px rgba(245,197,99,0.7);}}
@keyframes premPulse2{0%,100%{box-shadow:0 0 8px 2px rgba(240,168,104,0.4);}50%{box-shadow:0 0 26px 9px rgba(240,168,104,0.85);}}
@keyframes premPulse3{0%,100%{box-shadow:0 0 6px 2px rgba(232,132,154,0.3);}50%{box-shadow:0 0 18px 6px rgba(232,132,154,0.7);}}
@keyframes premPulse4{0%,100%{box-shadow:0 0 6px 2px rgba(247,208,138,0.3);}50%{box-shadow:0 0 18px 6px rgba(247,208,138,0.7);}}
.prem-connector{display:flex;align-items:center;padding-top:25px;flex:0 0 50px;}
.prem-connector-line{flex:1;height:2px;background:linear-gradient(90deg,var(--dawn-gold),var(--dawn-rose));}
.prem-connector-arrow{
  width:0;height:0;
  border-top:6px solid transparent;border-bottom:6px solid transparent;
  border-left:10px solid var(--dawn-rose);margin-left:-1px;flex-shrink:0;
}
/* Phase label above the title -- mirrors the homepage's "How It Works"
   .milestone-phase treatment (same letter-spacing/uppercase/size formula),
   so both sections read the same way at a glance without needing to
   interact with anything. */
.prem-node-phase{font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--dawn-gold);margin-bottom:6px;font-weight:600;}
.prem-node-title{font-size:15px;font-weight:600;margin-bottom:8px;color:rgba(255,255,255,0.92);}
.prem-node-desc{font-size:12.5px;color:var(--muted);line-height:1.55;padding:0 6px;}

.prem-reassurance{
  display:flex;align-items:flex-start;gap:10px;
  max-width:900px;margin:12px auto 0;
  padding:10px 20px;border-radius:10px;
  background:rgba(245,197,99,0.06);
  border:1px solid rgba(245,197,99,0.22);
  border-left:3px solid var(--dawn-gold);
  font-size:13px;line-height:1.6;color:var(--muted);
}
.prem-reassurance-icon{color:var(--dawn-gold);flex-shrink:0;font-size:14px;line-height:1.5;}
.prem-reassurance a{color:var(--dawn-gold);text-decoration:none;font-weight:600;}
.prem-reassurance a:hover{text-decoration:underline;}

/* ── Hero split + carousel (two-column layout restored per feedback --
   the single-column trial's max-width wrapper is gone, carousel is back
   as the hero's right column) ── */
.prem-hero-split{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:start;}
/* Step 2: carousel-col top offset and the fixed carousel height were both
   larger than any frame actually needs -- measured each of the 3 frames'
   natural (unconstrained) content height at 301/349/345px, all comfortably
   under the old 368px box even before padding was trimmed, so the box and
   its padding both had real slack to give back. */
.prem-carousel-col{display:flex;flex-direction:column;margin-top:8px;}
.prem-carousel{position:relative;height:340px;}
.prem-frame{
  position:absolute;inset:0;
  background:rgba(16,14,26,0.78);
  border:1px solid rgba(245,197,99,0.22);
  border-radius:16px;padding:18px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 16px 44px rgba(0,0,0,0.45);
  opacity:0;pointer-events:none;transition:opacity 0.8s ease;
  display:flex;flex-direction:column;justify-content:center;
}
.prem-frame.active{opacity:1;pointer-events:auto;}
.prem-frame-tag{font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--dawn-gold);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.prem-frame-tag::before{content:'';width:18px;height:1px;background:var(--dawn-gold);opacity:0.6;}

.prem-section-sub{font-size:14px;color:var(--muted);line-height:1.6;max-width:640px;}
.pf1-q{font-size:20px;font-weight:700;line-height:1.3;margin-bottom:8px;color:var(--ink);}
.pf1-sub{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:16px;}
.pf1-gap{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.pf1-chip{font-size:12px;color:var(--dawn-amber);border:1px solid rgba(240,168,104,0.35);background:rgba(240,168,104,0.07);border-radius:20px;padding:6px 13px;}
.pf1-answer{margin-top:4px;padding:16px 18px;border-radius:12px;background:linear-gradient(120deg,rgba(245,197,99,0.12),rgba(232,132,154,0.08));border:1px solid rgba(245,197,99,0.3);}
.pf1-answer b{color:var(--dawn-gold);}
.pf1-answer span{font-size:13.5px;line-height:1.5;color:var(--ink);}

.pcmp-head{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,0.1);margin-bottom:6px;}
.pcmp-head div{font-size:11px;text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
.pcmp-head .free{color:var(--faint);text-align:center;}
.pcmp-head .prem{color:var(--dawn-gold);text-align:center;}
.pcmp-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);align-items:center;}
.pcmp-row:last-child{border-bottom:none;}
.pcmp-label{font-size:12.5px;color:var(--muted);}
.pcmp-free{font-size:12.5px;color:var(--faint);text-align:center;}
.pcmp-prem{font-size:12.5px;color:var(--dawn-gold);font-weight:600;text-align:center;}

.preport-head{display:flex;align-items:center;gap:9px;margin-bottom:14px;}
.preport-badge{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:#1a1208;background:linear-gradient(100deg,var(--dawn-gold),var(--dawn-amber));padding:3px 9px;border-radius:6px;}
.preport-title{font-size:14px;font-weight:700;color:var(--ink);}
.pcheck-item{display:flex;align-items:flex-start;gap:11px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.pcheck-item:last-child{border-bottom:none;}
.pcheck-mark{flex-shrink:0;width:19px;height:19px;border-radius:5px;background:rgba(245,197,99,0.14);border:1px solid rgba(245,197,99,0.4);display:flex;align-items:center;justify-content:center;color:var(--dawn-gold);font-size:10px;margin-top:1px;}
.pcheck-text{font-size:13px;color:var(--muted);line-height:1.45;}
.pcheck-text b{color:var(--ink);font-weight:600;}

.prem-dots{display:flex;gap:6px;justify-content:center;margin-top:14px;}
.prem-dot{width:8px;height:8px;border-radius:50%;background:rgba(245,197,99,0.25);cursor:pointer;transition:all .3s;}
.prem-dot.active{width:22px;border-radius:4px;background:var(--dawn-gold);}

@media(max-width:860px){
  .prem-hero-split{grid-template-columns:1fr;}
  .prem-carousel-col{margin-top:20px;}
  .prem-carousel{height:400px;}
}

@media(max-width:820px){
  .prem-milestone-flow{flex-direction:column;gap:24px;}
  .prem-connector{display:none;}
  .prem-hero h1{font-size:38px;}
}

.prem-section-sub{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:24px;}

.carry-banner{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:10px;margin-bottom:20px;background:linear-gradient(100deg,rgba(245,197,99,0.16),rgba(240,168,104,0.08));border:1px solid rgba(245,197,99,0.4);border-left:3px solid #f5c563;animation:carryFade 0.6s ease;}
@keyframes carryFade{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.carry-icon{flex-shrink:0;display:inline-flex;}
.carry-text{flex:1;font-size:13px;color:#f1f5f9;line-height:1.5;}
.carry-text b{color:#f5c563;}
.carry-x{cursor:pointer;color:rgba(241,245,249,0.45);font-size:16px;line-height:1;flex-shrink:0;}
.carry-x:hover{color:#f1f5f9;}

.prem-phase-card{
  background:#0f0d1a;
  border:1px solid rgba(245,197,99,0.18);
  border-radius:12px;
  transition:border-color .45s,box-shadow .45s,transform .45s;
}
.prem-phase-header{
  display:flex;align-items:center;gap:12px;
  padding:16px 22px;
  background:rgba(8,7,15,0.5);
  border-bottom:1px solid rgba(245,197,99,0.12);
}
.prem-phase-num{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--dawn-gold);letter-spacing:0.06em;}
.prem-phase-title{font-size:16px;font-weight:700;color:var(--ink);flex:1;}
.prem-phase-status{font-size:9px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:4px 12px;border-radius:20px;background:rgba(245,197,99,0.1);color:var(--dawn-gold);border:1px solid rgba(245,197,99,0.3);}
.prem-phase-body{
  padding:24px 22px;
  max-height:3000px;
  opacity:1;
  overflow:hidden;
  transition:max-height 0.5s ease, opacity 0.4s ease, padding 0.4s ease;
}

.prem-field-block{display:flex;flex-direction:column;margin-bottom:18px;}
.prem-lbl{font-size:9px;color:var(--faint);letter-spacing:0.14em;text-transform:uppercase;margin-bottom:7px;}
.prem-fi{
  width:100%;
  background:#111827;
  border:1px solid rgba(245,197,99,0.2);
  border-radius:6px;padding:10px 14px;color:var(--ink);
  font-family:'Space Grotesk',sans-serif;font-size:14px;outline:none;
  transition:border-color .2s;
}
.prem-fi:focus{border-color:rgba(245,197,99,0.55);}
.prem-fi::placeholder{color:rgba(241,245,249,0.35);}

.prem-grid{display:grid;gap:16px;}
.prem-row-2{grid-template-columns:1fr 1fr;}
.prem-row-3{grid-template-columns:1fr 1fr 1fr;}

.prem-trip-tabs{display:flex;border:1px solid rgba(245,197,99,0.25);border-radius:7px;overflow:hidden;width:fit-content;}
.prem-trip-tab{font-size:12px;font-family:'Space Grotesk',sans-serif;padding:10px 30px;cursor:pointer;border:none;background:transparent;color:var(--faint);transition:all .2s;}
.prem-trip-tab.active{background:rgba(245,197,99,0.15);color:var(--dawn-gold);font-weight:700;}

.prem-execute-btn{
  margin-top:10px;width:100%;
  padding:14px 24px;border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(100deg,var(--dawn-gold),var(--dawn-amber));
  color:#1a1208;font-family:'Space Grotesk',sans-serif;
  font-size:14px;font-weight:700;letter-spacing:0.06em;
  box-shadow:0 8px 28px rgba(240,168,104,0.28);
  transition:opacity .2s;
  /* Buttons center their content by default, but the Confirm-phase payment
     link (premPaymentLink) reuses this class on an <a>, which doesn't --
     text sat left-aligned in production. Explicit text-align covers both
     element types identically. */
  text-align:center;
}
.prem-execute-btn:hover{opacity:0.9;}

/* Departure date spans full width in one-way mode */
.prem-span-full{grid-column:1 / -1;}


@media(max-width:760px){.prem-row-2,.prem-row-3{grid-template-columns:1fr;}}

/* ── Phase B questionnaire ── */
.prem-q{margin-bottom:24px;}
.prem-q-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px;letter-spacing:0.01em;}
.prem-req-mark{color:#ef4444;font-weight:700;margin-left:3px;}
.prem-helper{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:10px;}

/* Negative question distinct treatment */
.prem-q-avoid{
  border-left:3px solid rgba(232,132,154,0.55);
  padding-left:16px;padding-top:14px;padding-bottom:14px;padding-right:14px;
  background:rgba(232,132,154,0.04);
  border-radius:0 10px 10px 0;
  margin-bottom:24px;
}
.prem-label-avoid{color:#f0a0b0;}
.prem-helper-avoid{color:rgba(240,160,176,0.85);}
.prem-select-avoid{border-color:rgba(232,132,154,0.4) !important;}
.prem-select-avoid:focus{border-color:rgba(232,132,154,0.7) !important;}

/* Pills */
.prem-multi{display:flex;flex-direction:column;gap:10px;}
.prem-pills{display:flex;flex-wrap:wrap;gap:8px;}
.prem-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px 6px 12px;border-radius:20px;font-size:12.5px;
  background:rgba(245,197,99,0.12);border:1px solid rgba(245,197,99,0.4);color:var(--dawn-gold);
}
.prem-pill .pill-x{cursor:pointer;font-size:14px;line-height:1;opacity:0.7;}
.prem-pill .pill-x:hover{opacity:1;}
.prem-pills[data-intent="Avoiding"] .prem-pill{
  background:rgba(232,132,154,0.12);border-color:rgba(232,132,154,0.45);color:#f0a0b0;
}
.prem-pill-intent{font-size:9px;text-transform:uppercase;letter-spacing:0.08em;opacity:0.75;margin-right:2px;}

/* Airport autocomplete dropdown */
.prem-ac-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:300;background:#11101f;border:1px solid rgba(245,197,99,0.3);border-radius:10px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,0.65);max-height:260px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(245,197,99,0.3) #11101f;}
.prem-ac-dropdown::-webkit-scrollbar{width:9px;}
.prem-ac-dropdown::-webkit-scrollbar-track{background:#11101f;border-radius:5px;}
.prem-ac-dropdown::-webkit-scrollbar-thumb{background:rgba(245,197,99,0.3);border-radius:5px;}
.prem-ac-dropdown::-webkit-scrollbar-thumb:hover{background:rgba(245,197,99,0.5);}
.prem-ac-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.05);transition:background .15s;}
.prem-ac-item:last-child{border-bottom:none;}
.prem-ac-item:hover,.prem-ac-item.highlighted{background:rgba(245,197,99,0.1);}
.prem-ac-flag{font-size:18px;flex-shrink:0;}
.prem-ac-iata{font-size:13px;font-weight:700;color:var(--dawn-gold);width:34px;flex-shrink:0;}
.prem-ac-city{font-size:13px;font-weight:600;color:var(--ink);}
.prem-ac-name{font-size:11px;color:var(--muted);}

/* Custom single-select dropdown */
.prem-dd{position:relative;width:100%;}
.prem-dd-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#111827;border:1px solid rgba(245,197,99,0.2);border-radius:8px;padding:13px 15px;cursor:pointer;color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:14px;text-align:left;transition:border-color .2s;}
.prem-dd-trigger:hover{border-color:rgba(245,197,99,0.4);}
.prem-dd.open .prem-dd-trigger{border-color:rgba(245,197,99,0.6);}
.prem-dd-caret{font-size:11px;color:var(--dawn-gold);transition:transform .2s;flex-shrink:0;}
.prem-dd.open .prem-dd-caret{transform:rotate(180deg);}
.prem-dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:500;background:#111827;border:1px solid rgba(245,197,99,0.3);border-radius:10px;overflow:hidden;box-shadow:0 16px 44px rgba(0,0,0,0.85);max-height:280px;overflow-y:auto;display:none;isolation:isolate;scrollbar-width:thin;scrollbar-color:rgba(245,197,99,0.3) #111827;}
.prem-dd-menu::-webkit-scrollbar{width:9px;}
.prem-dd-menu::-webkit-scrollbar-track{background:#111827;border-radius:5px;}
.prem-dd-menu::-webkit-scrollbar-thumb{background:rgba(245,197,99,0.3);border-radius:5px;}
.prem-dd-menu::-webkit-scrollbar-thumb:hover{background:rgba(245,197,99,0.5);}
.prem-dd.open .prem-dd-menu{display:block;}
.prem-dd-menu-fixed{position:absolute !important;top:auto;left:auto;right:auto;}
.prem-dd-item{padding:12px 15px;font-size:14px;color:var(--muted);cursor:pointer;font-family:'Space Grotesk',sans-serif;border-bottom:1px solid rgba(255,255,255,0.04);transition:background .15s,color .15s;background:#111827;}
.prem-dd-item:last-child{border-bottom:none;}
.prem-dd-item:hover{background:rgba(245,197,99,0.12);color:var(--ink);}
.prem-dd-item.selected{color:var(--dawn-gold);background:rgba(245,197,99,0.06);font-weight:600;}

/* Multi-select pill trigger */
.prem-multi-trigger{background:#111827 !important;border:1px dashed rgba(245,197,99,0.4) !important;border-radius:8px !important;color:var(--dawn-gold) !important;font-family:'Space Grotesk',sans-serif !important;font-size:13px !important;padding:13px 15px !important;}
.prem-multi-trigger:focus{border-color:rgba(245,197,99,0.7) !important;outline:none;}
.prem-select-avoid.prem-multi-trigger{border-color:rgba(232,132,154,0.45) !important;color:#f0a0b0 !important;}

/* Custom multi-select trigger - dashed to signal add-several */
.prem-dd-trigger-multi{border-style:dashed !important;color:var(--dawn-gold) !important;}
.prem-dd-trigger-multi .prem-dd-placeholder{color:var(--dawn-gold);opacity:0.85;}
.prem-dd-trigger-avoid{border-color:rgba(232,132,154,0.45) !important;color:#f0a0b0 !important;}
.prem-dd-trigger-avoid .prem-dd-placeholder{color:#f0a0b0;}
.prem-dd-avoid .prem-dd-menu{border-color:rgba(232,132,154,0.3);}
.prem-dd-avoid .prem-dd-item:hover{background:rgba(232,132,154,0.1);color:#f0a0b0;}
.prem-dd-avoid .prem-dd-item.selected{color:#f0a0b0;background:rgba(232,132,154,0.06);}

/* ── Phase Flow + Gap Spine ── */
.prem-flow{position:relative;max-width:none;}

/* Gap connectors - only in the gaps between cards, never behind them */
.prem-gap{
  min-height:60px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  position:relative;padding:24px 0;
}
.prem-gap-line{
  width:2px;height:100%;
  background:rgba(245,197,99,0.12);
  position:absolute;top:0;bottom:0;
}
.prem-gap-fill{
  width:2px;height:0;
  background:linear-gradient(180deg,#f5c563,#f0a868);
  position:absolute;top:0;
  box-shadow:0 0 8px rgba(245,197,99,0.5);
  transition:height .7s ease;
}
.prem-gap.reached .prem-gap-fill{height:100%;}

/* Scroll cue */
.prem-cue{
  font-size:10px;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(241,245,249,0.45);
  background:#05070f;padding:3px 10px;
  position:absolute;bottom:16px;
  z-index:2;display:none;align-items:center;gap:6px;
}
.prem-dd.open ~ * .prem-cue,
.prem-phase-card:has(.prem-dd.open) ~ .prem-gap .prem-cue{display:none !important;}
.prem-gap.cue-here .prem-cue{display:flex;}
.prem-cue .arrow{animation:cueBob 1.4s ease-in-out infinite;}
@keyframes cueBob{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}

/* Phase containers - no continuous spine behind them */
.prem-phase-container{
  position:relative;z-index:2;
  transition:opacity .45s,box-shadow .45s,transform .45s,border-color .45s;
}
.prem-phase-container.current{opacity:1;}
.prem-phase-container.current .prem-phase-card{
  border-color:rgba(245,197,99,0.55);
  box-shadow:0 0 40px rgba(245,197,99,0.2);
  transform:translateY(-2px);
}
.prem-phase-container.done{opacity:0.55;cursor:pointer;}
.prem-phase-container.locked{opacity:0.4;}
.prem-phase-container.locked .prem-phase-body{max-height:0;opacity:0;padding-top:0;padding-bottom:0;}
/* Confirm phase's body previously carried its extra padding as an inline
   style, which (inline always wins over stylesheet rules) fought the
   .locked collapse rule above and left it rendering at a visible 88px tall
   even while "locked" -- moved to a class instead, with lower specificity
   ((0,2,0)) than the .locked descendant rule ((0,3,0) -- 3 classes vs 2) so
   it still yields to the collapse correctly while providing the extra
   padding once the phase is current/done. */
.prem-phase-body.prem-phase-body-confirm{text-align:center;padding:44px 22px;}
.prem-lock-msg{
  display:none;padding:12px 18px;
  font-size:12px;line-height:1.5;
  color:#f0a868;
  background:rgba(240,168,104,0.08);
  border-top:1px solid rgba(240,168,104,0.2);
}
.prem-lock-msg.show{display:block;}
.prem-lock-icon{opacity:0.75;flex-shrink:0;margin-left:auto;}
.prem-phase-container:not(.locked) .prem-lock-icon{display:none;}
.prem-phase-header{cursor:pointer;}
.prem-phase-container.current .prem-phase-header{cursor:default;}

/* Between-phase motifs */
.prem-motif{text-align:center;margin:0;padding:0;}

/* Motif 1: radar sweep */
.prem-msweep{
  transform-origin:50px 50px;
  animation:premRadarSweep 3.5s linear infinite;
}
@keyframes premRadarSweep{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}

/* Motif 2: chevron cascade */
.prem-mchev{opacity:0;animation:premChevFade 2.8s ease-in-out infinite;}
.prem-mchev1{animation-delay:0s;}
.prem-mchev2{animation-delay:0.38s;}
.prem-mchev3{animation-delay:0.76s;}
@keyframes premChevFade{
  0%  {opacity:0;}
  22% {opacity:0.85;}
  62% {opacity:0.85;}
  100%{opacity:0;}
}

/* Motif 3: orbital dot */
.prem-morbit{
  transform-origin:50px 50px;
  animation:premOrbital 5s linear infinite;
}
@keyframes premOrbital{
  from{transform:rotate(0deg);}
  to  {transform:rotate(360deg);}
}


/* Fee transparency panel */
.prem-fee-panel{max-width:480px;margin:0 auto 22px;padding:18px 22px;border:1px solid rgba(245,197,99,0.15);border-radius:10px;background:rgba(10,14,26,0.3);text-align:left;}
.prem-fee-heading{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:#f5c563;margin:16px 0 10px;letter-spacing:0.01em;}
.prem-fee-rows{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.prem-fee-row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;}
.prem-fee-pct{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:#f5c563;text-align:right;}
.prem-fee-label{font-family:'Space Grotesk',sans-serif;font-size:14px;color:rgba(241,245,249,0.85);}
.prem-fee-footnote{font-family:'Space Grotesk',sans-serif;font-size:11px;color:rgba(241,245,249,0.45);line-height:1.6;margin:0;}

/* C7: Email field emphasis container */
.prem-email-container{border:1px solid rgba(232,176,75,0.55);border-radius:8px;padding:16px;margin-bottom:20px;background:rgba(232,176,75,0.06);box-shadow:0 0 20px rgba(232,176,75,0.12);}
.prem-email-microcopy{font-family:'Space Grotesk',sans-serif;font-size:12px;color:rgba(241,245,249,0.55);margin:0 0 10px;line-height:1.5;}
.prem-lbl-emphasized{font-size:9px;color:#E8B04B;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:7px;display:block;font-family:'Space Grotesk',sans-serif;}
.prem-fi-lg{padding:12px 14px !important;font-size:15px !important;}

/* C15: Mobile detection banner */
.mobile-banner{display:none;padding:10px 14px;background:rgba(232,176,75,0.10);border-bottom:1px solid rgba(232,176,75,0.35);color:#E8B04B;font-size:12px;text-align:center;position:relative;font-family:'Space Grotesk',sans-serif;}
.mobile-banner button{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:#E8B04B;font-size:18px;cursor:pointer;line-height:1;}
@media(max-width:768px){.mobile-banner:not(.dismissed){display:block;}}

/* ── FOOTER (added to match homepage's site-footer) ── */
.prem-footer{
  background:rgba(18,16,28,0.55);
  border-top:0.5px solid rgba(245,197,99,0.16);
  padding:16px 2rem;
  position:relative;z-index:10;
  margin-top:0;
}
.prem-footer-inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;
}
.prem-footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.prem-footer-links a{font-size:11px;color:var(--muted);text-decoration:none;}
.prem-footer-links a:hover{color:var(--dawn-gold);}
.prem-footer-copy{font-size:10px;color:var(--faint);}