/* Readability pass: heavier body type, stronger contrast, visible login. Loaded last so it wins. */
:root{
  --text:#f3efe6;
  --muted:#d2cec6;
  --label:#d8d3cb;
}
html{color:#f3efe6}
body,body.fast,body.film-bg,body.app,body.auth{
  font-weight:500;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
p,li,dd,dt,label,input,textarea,select,button,.app-sub,.lede,.hero-sub,.muted,.small,.fine,.field span{
  font-weight:500;
}
.muted, .app-sub, .lede, .hero-sub, .per, .film-body .meta, .kv dt, .new-tile p, .dash-head p, .auth-card .sub, .switch, .footer p, .foot-cols p, .how-card > p, .price .per, .plan .per, .faq details p, .ec-caption, .cta-inner p{
  color:var(--muted)!important;
  font-weight:500;
}
.hero-sub{font-weight:500!important;color:#f0ebe3!important;text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.8)}
.hero-title, .h1, .h2, .app-h1, .dash-head h1, .auth-card h1, .film-body h2, .new-tile h3, .faq summary, .big-words, .amt, .plan-amt, .prem-addr, .why-card h3, .step h3, .ec-name{
  font-weight:600;
}
.hero-title, .hero-title em, .h1, .h2, .eyebrow, .kicker{
  text-shadow:0 2px 24px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.6);
}
body.film-bg .hero-title, body.film-bg .hero-sub, body.film-bg .eyebrow, body.film-bg .kicker, body.film-bg .h2, body.film-bg .lede{
  text-shadow:0 2px 22px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.75);
}
.hero-title em, .h1 em, .h2 em{font-weight:500;font-style:italic}
.lede{font-weight:500!important;font-size:17px;color:var(--muted)!important}
.small{font-size:13px;line-height:1.55;color:var(--muted)}
.fine{font-size:13px!important;color:var(--muted)!important}
.field span, .lengths legend, label.field > span, .counter, .tier, .kicker, .eyebrow, .foot-cols h4, figcaption, .vs-label, .gold-label, .status{
  font-size:13px!important;
  letter-spacing:.12em;
  font-weight:500;
}
.field span, .lengths legend, label.field > span{color:var(--label)!important;text-transform:uppercase}
.ba-tag, .pill, .preview-ribbon, .facts span, .screen-tag, .chapter small{font-size:12px!important;letter-spacing:.14em;color:#e8e2d6}
.nav-links, .nav-links a, body.film-bg .nav-links a{color:#e8e2d6;font-weight:500;font-size:13px}
.link-muted{color:var(--muted)!important;font-weight:500}
.app-sub.small, p.app-sub{color:var(--muted)!important}

/* Client login always visible, gold-outlined, in the sticky header */
.nav-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
a.nav-login, .nav-login.btn, a.btn.nav-login{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border:1px solid var(--gold)!important;
  color:var(--gold)!important;
  background:transparent!important;
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
a.nav-login:hover, .nav-login.btn:hover{
  background:rgba(217,182,90,.12)!important;
  color:#f6e27a!important;
  border-color:#f6e27a!important;
}
@media(max-width:900px){
  a.nav-login, .nav-login.btn, a.btn.nav-login{display:inline-flex!important;height:38px;padding:0 12px;font-size:10px;letter-spacing:.1em}
}
@media(max-width:430px){
  a.nav-login, .nav-login.btn{height:36px;padding:0 10px}
}

/* Inline film playback in dashboard cards */
.film-thumb{position:relative;background:#000;overflow:hidden}
.film-thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:1}
.film-thumb .play, .film-thumb .dur{z-index:2}
.film-thumb.is-playing .play, .film-thumb.is-playing .dur{opacity:0;pointer-events:none}
.film-thumb.is-playing video{z-index:3}
.player video{background:#000}
.player video::-webkit-media-controls, .film-thumb video::-webkit-media-controls{z-index:4}

/* Style-note chips on the order form */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{
  appearance:none;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:var(--text);font:inherit;font-size:13px;font-weight:500;letter-spacing:.02em;
  padding:8px 12px;border-radius:0;cursor:pointer;min-height:40px;
}
.chips button.on, .chips button[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);background:rgba(217,182,90,.1)}
.char-count{display:block;margin-top:6px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.style-picks{display:grid;gap:14px}
.brief-box{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.08)}
.brief-box p{margin:0 0 6px;color:var(--muted);font-size:14px}

body.film-bg .muted, body.film-bg .lede, body.film-bg .hero-sub, body.film-bg .how-card > p,
body.film-bg .faq details p, body.film-bg .per, body.film-bg .footer p, body.film-bg .mb-bar,
body.film-bg .mb-bar span, body.film-bg .price .per, body.film-bg .plan .per, body.film-bg .ec-caption,
body.film-bg .kicker, body.film-bg label, body.film-bg .small, body.film-bg .fine{
  color:#d2cec6!important; font-weight:500;
}


/* iOS Safari: caret sits inside the field (no blur or transform on the control) */
.field, .chatform, .chat-input, .auth-card form, .app-card form{transform:none;-webkit-transform:none}
.field input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.field textarea,
.field select,
.chatform input,
.chat-input input{
  font-size:16px!important;
  line-height:24px!important;
  background:#1c1c1e!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  transform:none!important;
  -webkit-transform:none!important;
  caret-color:#f5f5f5!important;
}
.field input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.field select{
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  padding:16px 16px!important;
  box-sizing:border-box!important;
}
.field.pw input{padding-right:72px!important}
.field textarea{height:auto!important;min-height:112px!important;max-height:none!important;padding:14px 16px!important}
.field input:focus,.field textarea:focus,.field select:focus,.chatform input:focus,.chat-input input:focus{
  background:#242426!important;
}


/* Revision director: music previews, progress, inline player */
.rev-reply{white-space:pre-wrap}
.music-picks{display:grid;gap:10px;margin-top:12px}
.music-pick{margin:0;padding:10px 12px;border:1px solid rgba(217,182,90,.35);background:rgba(0,0,0,.25)}
.music-pick.is-on{border-color:var(--gold)}
.music-pick figcaption{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.music-pick strong{font-size:13px;font-weight:600;color:#f3efe6}
.music-pick span{font-size:12px;color:#cfc6b6}
.music-pick audio{width:100%;height:32px}
.rev-progress{margin-top:10px;font-size:13px;letter-spacing:.04em;color:var(--gold)}
.rev-inline{width:100%;margin-top:10px;background:#000;aspect-ratio:16/9}
.rev-ready .btn{margin-top:10px}
.chatbox .chatform input{font-size:16px} /* prevent iOS zoom */


/* ===== Always-visible Log in / My Films (desktop + iPhone) =====
   Must win over any earlier mobile hide, including body.film-bg rules. */
header.nav .nav-right,
header.app-nav .right,
.nav-right{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
header.nav .nav-right a.nav-login,
header.app-nav a.nav-login,
body.film-bg header.nav a.nav-login,
body a.nav-login[data-nav-auth],
a.nav-login, a.nav-login.btn, a.btn.nav-login{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border:1px solid var(--gold, #d9b65a) !important;
  color:var(--gold, #d9b65a) !important;
  background:rgba(10,10,11,.55) !important;
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  flex-shrink:0;
  z-index:80;
}
header.nav .nav-right a.nav-login:hover,
header.app-nav a.nav-login:hover,
a.nav-login:hover{
  background:rgba(217,182,90,.14) !important;
  color:#f6e27a !important;
  border-color:#f6e27a !important;
}
@media (max-width:900px){
  header.nav .nav-right a.nav-login,
  header.app-nav a.nav-login,
  body.film-bg header.nav a.nav-login,
  a.nav-login, a.nav-login.btn{
    display:inline-flex !important;
    visibility:visible !important;
    height:36px;
    padding:0 10px;
    font-size:10px;
    letter-spacing:.1em;
  }
}
@media (max-width:380px){
  a.nav-login, a.nav-login.btn{ padding:0 8px; font-size:9px; letter-spacing:.08em; }
}


/* First-film trial prices on the homepage and checkout */
.price .amt-was, .amt-was{
  font-family:var(--sans,inherit);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-decoration:line-through;margin:0 0 4px;
}
#payOffer, .offer-note, .plan-trial{
  color:#d9b65a;font-size:14px;line-height:1.45;margin:8px 0 0;
}
#payAmt .was{text-decoration:line-through;opacity:.65;margin-right:10px;font-size:.7em;}

/* —— Product queue: smaller hero, caret, tabs, pay modal, chat attach —— */
input, textarea, [contenteditable]{caret-color:#f5f5f5}
.hero, .hero-on-film, body.film-bg .hero, body.film-bg .hero-on-film{
  height:auto!important;
  min-height:min(72svh, 740px)!important;
  padding-top:clamp(88px, 12vh, 140px)!important;
  padding-bottom:clamp(48px, 7vh, 88px)!important;
}
.hero-title, body.film-bg .hero-title{font-size:clamp(40px, 7.2vw, 96px)!important}
.preview-ribbon{display:none!important}
@media(max-width:700px){
  .hero, .hero-on-film, body.film-bg .hero, body.film-bg .hero-on-film{min-height:min(62svh, 540px)!important}
  .hero-title, body.film-bg .hero-title{font-size:clamp(34px, 11vw, 56px)!important}
}

.dash-tabs{display:flex;gap:8px;margin:8px 0 22px;flex-wrap:wrap}
.dash-tabs button{
  appearance:none;background:transparent;border:1px solid rgba(255,255,255,.18);
  color:var(--muted);height:40px;padding:0 16px;letter-spacing:.12em;text-transform:uppercase;
  font:600 11px/1 inherit;cursor:pointer;
}
.dash-tabs button.on{border-color:var(--gold);color:var(--gold)}
.upgrade-grid, .invoice-list{display:grid;gap:14px}
.upgrade-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:8px}
.upgrade-card h3{margin:0 0 6px;font-family:var(--serif);font-weight:500;font-size:24px}
.upgrade-card .amt{font-size:28px;color:var(--gold)}
.upgrade-card p{margin:0 0 14px}
.invoice-row{display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.invoice-row h3{margin:0;font-size:16px}
.ver-switch{display:flex;gap:8px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.ver-switch select{height:40px;background:#1c1c1e;color:#f5f5f5;border:1px solid rgba(255,255,255,.2);padding:0 12px;font:500 14px/1 inherit;caret-color:#f5f5f5}
.format-links{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.chat-tools{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.chat-attach{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chat-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.chat-thumbs img{width:56px;height:56px;object-fit:cover;border:1px solid rgba(255,255,255,.15)}
.rights-box{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--muted);line-height:1.4}
.rights-box input{margin-top:3px;flex-shrink:0}
.endcard-form{display:grid;gap:12px;margin-top:10px}
.pay-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px}
.pay-modal[hidden]{display:none!important}
.pay-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.pay-modal-card{position:relative;z-index:1;width:min(520px,100%);max-height:min(92vh,900px);overflow:auto;padding:28px 24px}
.pay-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;background:transparent;color:#f5f5f5;font-size:24px;cursor:pointer}
body.pay-open{overflow:hidden}
.chatform{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chatform input[type=text], .chatform #chatText{flex:1;min-width:160px}
.icon-btn{height:48px;width:48px;border:1px solid rgba(255,255,255,.2);background:#1c1c1e;color:#f5f5f5;cursor:pointer;font-size:18px}
@media(max-width:700px){
  .invoice-row,.upgrade-card{align-items:flex-start}
  .hero-ctas .btn{flex:1 1 100%}
}

/* —— 75% OFF gold foil seal (hero + single-film price cards only) —— */
.offer-seal{
  display:block;
  width:150px;
  height:150px;
  flex:none;
  text-decoration:none;
  z-index:5;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45));
  transition:transform .35s ease, filter .35s ease;
}
.offer-seal-disc{
  position:relative;
  display:block;
  width:100%;
  height:100%;
}
.offer-seal-disc img{
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.offer-seal-copy{
  position:absolute;
  inset:18%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#1a1408;
  text-shadow:0 1px 0 rgba(255,236,180,.35);
}
.offer-seal-copy strong{
  font-family:var(--serif, "Cormorant Garamond", Georgia, serif);
  font-weight:600;
  font-style:normal;
  font-size:28px;
  letter-spacing:.02em;
  line-height:.95;
  color:#1a1408;
  -webkit-text-fill-color:#1a1408;
}
.offer-seal-copy em{
  margin-top:5px;
  font-family:var(--sans, Inter, system-ui, sans-serif);
  font-style:normal;
  font-weight:600;
  font-size:8.5px;
  letter-spacing:.06em;
  line-height:1.2;
  text-transform:uppercase;
  max-width:9.2em;
  color:#2a2010;
}
.hero .offer-seal{
  transform:rotate(-9deg);
}
.hero .offer-seal:hover,
.hero .offer-seal:focus-visible{
  transform:rotate(-9deg) scale(1.04);
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.55));
}
/* Desktop: float to the right of the headline, clear of title and CTAs */
@media (min-width:1100px){
  .hero{position:relative}
  .hero .offer-seal{
    position:absolute;
    right:clamp(16px, 5vw, 72px);
    top:54%;
    margin:0;
    transform:translateY(-50%) rotate(-9deg);
    width:168px;
    height:168px;
  }
  .hero .offer-seal:hover,
  .hero .offer-seal:focus-visible{
    transform:translateY(-50%) rotate(-9deg) scale(1.04);
  }
  .hero .offer-seal-copy strong{font-size:31px}
  .hero .offer-seal-copy em{font-size:9px}
}
/* Below 1100px (incl. 390px): sit in flow under the CTAs, never over the headline */
@media (max-width:1099px){
  .hero.hero-on-film, .hero{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .hero .offer-seal{
    position:relative;
    right:auto;
    top:auto;
    width:120px;
    height:120px;
    margin:22px auto 0;
    transform:rotate(-8deg);
  }
  .hero .offer-seal:hover,
  .hero .offer-seal:focus-visible{
    transform:rotate(-8deg) scale(1.04);
  }
  .hero .offer-seal-copy strong{font-size:22px}
  .hero .offer-seal-copy em{font-size:7.5px;margin-top:4px}
}
@media (max-width:430px){
  .hero .offer-seal{width:108px;height:108px;margin-top:18px}
  .hero .offer-seal-copy strong{font-size:20px}
  .hero .offer-seal-copy em{font-size:7px}
}

/* Smaller matching tag on 15/30/45 cards only — not on monthly plans */
.price{position:relative}
.price .offer-seal-sm{
  position:absolute;
  top:12px;
  left:12px;
  width:76px;
  height:76px;
  z-index:2;
  transform:rotate(-8deg);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.price .offer-seal-sm:hover,
.price .offer-seal-sm:focus-visible{
  transform:rotate(-8deg) scale(1.05);
}
.price .offer-seal-sm .offer-seal-copy strong{font-size:14px}
.price .offer-seal-sm .offer-seal-copy em{font-size:5.5px;margin-top:2px;letter-spacing:.04em;max-width:10em}
.price .offer-seal-sm .offer-seal-copy{inset:16%}
.price.popular .badge{right:14px;top:14px}
@media (max-width:700px){
  .price .offer-seal-sm{width:68px;height:68px;top:10px;left:10px}
  .price .offer-seal-sm .offer-seal-copy strong{font-size:12.5px}
}

/* —— Homepage legibility pass (luxury, not chunky) —— */
body.film-bg, body.film-bg.fast{
  --text:#f8f4ec;
  --muted:#ece6da;
  --label:#efe9dd;
  --gold:#e8c56a;
  --champagne:#f0e2b4;
}
body.film-bg,
body.film-bg p,
body.film-bg li,
body.film-bg .lede,
body.film-bg .hero-sub,
body.film-bg .muted,
body.film-bg .small,
body.film-bg .fine,
body.film-bg .per,
body.film-bg .how-card > p,
body.film-bg .faq details p,
body.film-bg .footer p,
body.film-bg .foot-cols p,
body.film-bg .plan p,
body.film-bg .cta-inner p,
body.film-bg .compare{
  font-weight:500;
  color:var(--text);
}
body.film-bg .muted,
body.film-bg .lede,
body.film-bg .hero-sub,
body.film-bg .how-card > p,
body.film-bg .faq details p,
body.film-bg .per,
body.film-bg .footer p,
body.film-bg .foot-cols p,
body.film-bg .plan p,
body.film-bg .small,
body.film-bg .fine,
body.film-bg .compare,
body.film-bg .amt-was,
body.film-bg .ec-caption,
body.film-bg .mb-bar,
body.film-bg .mb-bar span{
  color:#ece6da!important;
  font-weight:500!important;
}
body.film-bg .nav-links,
body.film-bg .nav-links a{
  color:#f3eee4!important;
  font-weight:600!important;
  font-size:13px!important;
  letter-spacing:.14em;
}
body.film-bg .kicker,
body.film-bg .eyebrow,
body.film-bg .tier,
body.film-bg .foot-cols h4,
body.film-bg .how-num,
body.film-bg figcaption,
body.film-bg .vs-label,
body.film-bg .gold-label{
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.14em;
  color:#ebc97a!important;
}
body.film-bg .hero-title,
body.film-bg .h2,
body.film-bg .how-card h3,
body.film-bg .faq summary,
body.film-bg .amt,
body.film-bg .plan-amt,
body.film-bg .wordmark,
body.film-bg .ec-name{
  font-weight:600;
  color:#f8f4ec;
}
body.film-bg .hero-title,
body.film-bg .hero-title em,
body.film-bg .hero-sub,
body.film-bg .eyebrow,
body.film-bg .kicker,
body.film-bg .hero-ctas .btn{
  text-shadow:0 2px 28px rgba(0,0,0,.72), 0 1px 3px rgba(0,0,0,.9), 0 0 42px rgba(0,0,0,.35)!important;
}
body.film-bg .h2,
body.film-bg .h2 em,
body.film-bg .lede,
body.film-bg .how-card h3,
body.film-bg .how-card > p,
body.film-bg .faq summary,
body.film-bg .faq details p,
body.film-bg .tier,
body.film-bg .per,
body.film-bg .price li,
body.film-bg .plan p,
body.film-bg .amt,
body.film-bg .plan-amt,
body.film-bg .footer,
body.film-bg .footer p,
body.film-bg .footer a,
body.film-bg .foot-cols,
body.film-bg .cta-inner,
body.film-bg .nav-links a{
  text-shadow:0 1px 16px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.85)!important;
}
body.film-bg .lede{font-size:18px!important;line-height:1.65}
body.film-bg .how-card > p,
body.film-bg .price li,
body.film-bg .plan p,
body.film-bg .faq details p{font-size:16px!important;line-height:1.6}
body.film-bg .small,
body.film-bg .fine,
body.film-bg .foot-base,
body.film-bg .compare{font-size:14px!important;line-height:1.55}
body.film-bg .price .badge{font-size:11px!important;font-weight:600}
body.film-bg .hero-sub{font-size:clamp(17px,1.7vw,20px)!important;color:#f4efe6!important}
body.film-bg .h2 em,
body.film-bg .hero-title em{color:#f0d78a!important;font-weight:500}
.price.panel, body.film-bg .price.panel{padding-top:100px!important}
@media (max-width:700px){
  .price.panel, body.film-bg .price.panel{padding-top:88px!important}
}
.site-legal{padding:28px 24px 36px;text-align:center}
.site-legal .foot-base{margin:0}

/* —— Hero contrast fix: veil, larger subhead, solid ghost CTA, brighter how kicker —— */
body.film-bg .hero.hero-on-film .hero-inner.panel-soft,
body.film-bg.fast .hero.hero-on-film .hero-inner.panel-soft{
  background:radial-gradient(ellipse 78% 72% at 50% 48%, rgba(6,5,4,.7) 0%, rgba(6,5,4,.46) 46%, rgba(6,5,4,.16) 74%, rgba(6,5,4,0) 100%)!important;
  background-image:radial-gradient(ellipse 78% 72% at 50% 48%, rgba(6,5,4,.7) 0%, rgba(6,5,4,.46) 46%, rgba(6,5,4,.16) 74%, rgba(6,5,4,0) 100%)!important;
  border-color:transparent!important;
  box-shadow:none!important;
  padding:36px 44px 40px;
  max-width:880px;
}
body.film-bg .hero-sub,
body.film-bg.fast .hero-sub{
  font-size:22px!important;
  font-weight:500!important;
  line-height:1.5!important;
  letter-spacing:.01em;
  color:#f8f4ec!important;
  max-width:28em;
  margin-left:auto;
  margin-right:auto;
  text-shadow:0 2px 22px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.95)!important;
}
body.film-bg .hero-ctas,
body.film-bg .cta-inner .hero-ctas{
  gap:16px;
}
body.film-bg .hero-ctas .btn,
body.film-bg .cta-inner .hero-ctas .btn,
body.film-bg .cta .hero-ctas .btn{
  height:52px!important;
  min-height:52px!important;
  padding:0 28px!important;
  font-size:15px!important;
  font-weight:600!important;
  letter-spacing:.14em!important;
}
body.film-bg .hero-ctas .btn-ghost,
body.film-bg a.hero-ctas .btn-ghost,
body.film-bg .hero-ctas a.btn-ghost,
body.film-bg .cta-inner .btn-ghost,
body.film-bg .cta .btn-ghost,
body.film-bg.fast .hero-ctas .btn-ghost,
body.film-bg.fast .cta .btn-ghost{
  background:rgba(8,7,6,.78)!important;
  background-image:none!important;
  border:1px solid #e8c56a!important;
  color:#f3e2a0!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
body.film-bg .hero-ctas .btn-ghost:hover,
body.film-bg .cta .btn-ghost:hover{
  background:rgba(12,10,6,.9)!important;
  color:#f6e27a!important;
  border-color:#f6e27a!important;
}
body.film-bg .hero-ctas .btn-ghost::before,
body.film-bg .cta .btn-ghost::before{opacity:0!important}
body.film-bg #how .kicker,
body.film-bg .how .kicker,
body.film-bg.fast #how .kicker{
  color:#f3e2a0!important;
  font-weight:600!important;
  font-size:13px!important;
  letter-spacing:.2em!important;
  text-shadow:0 1px 16px rgba(0,0,0,.85),0 1px 2px rgba(0,0,0,.95)!important;
}
@media (max-width:700px){
  body.film-bg .hero.hero-on-film .hero-inner.panel-soft,
  body.film-bg.fast .hero.hero-on-film .hero-inner.panel-soft{
    padding:22px 18px 26px;
    background:radial-gradient(ellipse 100% 80% at 50% 42%, rgba(6,5,4,.74) 0%, rgba(6,5,4,.42) 58%, rgba(6,5,4,0) 100%)!important;
    background-image:radial-gradient(ellipse 100% 80% at 50% 42%, rgba(6,5,4,.74) 0%, rgba(6,5,4,.42) 58%, rgba(6,5,4,0) 100%)!important;
  }
  body.film-bg .hero-sub,
  body.film-bg.fast .hero-sub{font-size:20px!important;line-height:1.45!important}
  body.film-bg .hero-ctas .btn,
  body.film-bg .cta .hero-ctas .btn{width:100%}
}

/* —— Queue UI: forgot ok, end-card editor, rights checkbox contrast —— */
.ok{color:#e8d7a0;font-size:14px;font-weight:500;line-height:1.5;margin:10px 0 0}
.endcard-edit{margin-top:14px;padding:12px 14px}
.endcard-edit > summary{cursor:pointer;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:#e8d7a0}
.endcard-form .grid2,.endcard-form .grid3{display:grid;gap:12px}
@media(min-width:700px){
  .endcard-form .grid2{grid-template-columns:1fr 1fr}
  .endcard-form .grid3{grid-template-columns:1fr 1fr 1fr}
}
.rights-box{color:#efe8dc!important;font-weight:500}
.rights-box input{accent-color:#d9b65a;width:16px;height:16px}

/* ===== HEADER VISIBILITY (wins last) =====
   Root cause: config.js adds html.js, and styles.css had `.js .nav{opacity:0}`
   for a cinematic intro that no longer fades the nav back in. The film-bg
   rule also reset header {position:fixed} to relative. */
html.js header.nav,
header.nav,
body.film-bg header.nav,
body.fast header.nav,
body.film-bg.fast header.nav{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:80 !important;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  transform:none !important;
}
header.nav .wordmark,
header.nav .nav-links,
header.nav .nav-right,
header.nav .nav-cta,
header.app-nav,
header.app-nav .right{
  opacity:1 !important;
  visibility:visible !important;
}
header.nav .wordmark,
header.app-nav .wordmark{
  text-shadow:0 1px 14px rgba(0,0,0,.75);
}
/* Legal / credits / 404 sit under the fixed marketing nav */
body.legal-page main,
main.legal{
  padding-top:108px;
}
body.legal-page h2, main.legal h2{scroll-margin-top:108px;}

/* Gold outline Log in / Dashboard — always in the top bar, including iPhone */
header.nav .nav-right,
header.app-nav .right{
  display:flex !important;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  opacity:1 !important;
  visibility:visible !important;
}
header.nav .nav-right a.nav-login,
header.app-nav a.nav-login,
body.film-bg header.nav a.nav-login,
body.film-bg a.nav-login,
a.nav-login{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:relative !important;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 16px;
  border:1px solid var(--gold, #d9b65a) !important;
  color:var(--gold, #d9b65a) !important;
  background:rgba(10,10,11,.72) !important;
  border-radius:0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  text-decoration:none;
  flex-shrink:0;
  z-index:81;
  text-shadow:none !important;
}
header.nav .nav-right a.nav-login:hover,
header.app-nav a.nav-login:hover,
a.nav-login:hover{
  background:rgba(217,182,90,.16) !important;
  color:#f6e27a !important;
  border-color:#f6e27a !important;
}
@media (max-width:900px){
  header.nav .nav-links{display:none !important}
  header.nav .nav-right a.nav-login,
  header.app-nav a.nav-login,
  a.nav-login{
    height:36px;
    padding:0 10px;
    font-size:10px;
    letter-spacing:.1em;
  }
}
@media (max-width:390px){
  header.nav .nav-right{gap:6px}
  header.nav .nav-right a.nav-login,
  a.nav-login{padding:0 8px;font-size:9px;letter-spacing:.08em;height:34px}
}
/* Films are never cropped in a player: the whole frame (and its burned-in titles) is always visible. */
.order-card{grid-template-columns:minmax(0,1fr)!important}
.order-card .film-thumb{align-self:start;aspect-ratio:16/9;min-height:0!important;height:auto;width:100%}
.film-thumb video,.film-thumb img,.player video,.rev-inline{object-fit:contain!important;background:#000}