/* Additions for the production install. The approved styles.css is untouched. */
.video-frame{aspect-ratio:16/9;background:#000;border:1px solid #6c315d;overflow:hidden}
.video-frame video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.story-card .video-frame + h3{margin-top:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pay-button{display:flex;align-items:center;justify-content:center;gap:10px;width:min(94%,620px);margin:14px auto 4px;padding:14px 18px;text-align:center;font:800 11px/1.2 var(--body);letter-spacing:.12em}
.pay-button[hidden]{display:none}
.lang-switch{position:fixed;top:14px;right:14px;z-index:30;display:flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:rgba(16,0,23,.72);backdrop-filter:blur(6px)}
.lang-switch button{min-width:46px;min-height:36px;padding:0 12px;border:0;border-radius:999px;background:transparent;color:#fff;font:800 11px/1 var(--body);letter-spacing:.14em;cursor:pointer}
.lang-switch button[aria-pressed="true"]{background:var(--gold,#ffd84f);color:#100017}
.lang-switch button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav-actions{display:flex;align-items:center;gap:12px}
.lang-switch--nav{position:static;z-index:auto;background:rgba(16,0,23,.55);backdrop-filter:none}
.lang-switch--nav button{min-width:40px;min-height:34px;padding:0 10px;font-size:10px}
@media(max-width:760px){.site-nav{gap:10px}.nav-actions{gap:8px}.lang-switch--nav{padding:2px}.lang-switch--nav button{min-width:34px;min-height:32px;padding:0 8px;font-size:9px}}
@media(max-width:400px){.site-nav .brand{font-size:18px}}
/* The approved .faq grid (38% + 62% columns plus a 7vw gap) is wider than the screen and creates a
   horizontal scroll from 761px up. Same proportions, columns now share what is left after the gap. */
@media(min-width:761px){.faq{grid-template-columns:minmax(0,38fr) minmax(0,62fr)}}
/* The group photo kept the HTML height attribute (904px) at every width, which left a tall empty band above the
   heads (up to ~700px on phones). The picture now keeps its natural proportions and the section is as tall as the photo. */
.landing-page .speaker-bridge-photo{height:auto}
.landing-page .speaker-bridge{min-height:0}
/* Hero colors (Maribel): first two headline lines yellow, the two that follow white; the promise first line pink, second white. */
.landing-page .hero-conversion h1 span:nth-child(n+3){color:#fff}
.landing-page .hero-conversion .hero-promise span:first-child{color:var(--rose2)}
.landing-page .hero-conversion .hero-promise span:last-child{color:#fff}
/* Phones only (Maribel): the red-dress photo in the hero was too big. Desktop and tablet are untouched. */
@media(max-width:760px){.landing-page .hero-founder-cutout{min-height:455px}.landing-page .hero-founder-cutout>img{height:520px}}
/* Yellow reserve buttons (Maribel, 2026-10-22). The top-right button stays pink.
   - the button over her photo is yellow on every screen size;
   - phones only: a second yellow button under the countdown, and the photo button gets room at the bottom of the hero. */
.landing-page .hero-founder-details a{background:var(--gold);border-color:var(--gold2);color:#210524;box-shadow:0 12px 30px rgba(255,216,79,.3)}
.landing-page .hero-founder-details a:hover{background:#fff;color:#210524}
/* Portrait tablets (761–1100px wide, taller than wide). The approved CSS puts the photo in a column narrower than the photo itself and
   clips it (dress and arms cut on both sides, hard edges, gradient not reaching the edge). Here it is stacked like the phone:
   text first, then the whole photo centered with the button at its foot. Landscape tablets and desktop are untouched. */
@media(min-width:761px) and (max-width:1100px) and (orientation:portrait){
  /* the whole hero fits the first screen: banner (38px) + hero = viewport height */
  .landing-page .hero-conversion{box-sizing:border-box;height:calc(100svh - 38px);min-height:600px;padding-bottom:0}
  .landing-page .hero-conversion-grid{height:100%;min-height:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);justify-items:center;align-items:start;padding:0 0 0}
  /* text block with more presence */
  body.landing-page .hero-conversion .hero-copy{grid-column:1;grid-row:1;text-align:center;width:100%;max-width:560px;transform:none;margin:0 auto;zoom:1.2}
  .landing-page .hero-copy .hero-event-facts{justify-content:center}
  .landing-page .hero-copy .hero-inline-countdown{margin-left:auto;margin-right:auto}
  .landing-page .hero-copy .hero-promise{border-left:0;padding-left:0;margin:16px auto 18px;text-align:center;max-width:100%;width:100%}
  .landing-page .hero-copy .hero-promise span{white-space:normal}
  /* photo: slid down so the legs are cropped behind the name and the button, which stay at the foot */
  .landing-page .hero-founder-cutout{grid-column:1;grid-row:2;order:2;position:relative;left:auto;transform:none;width:100%;max-width:760px;height:100%;min-height:0;margin:0 auto;overflow:hidden}
  .landing-page .hero-founder-cutout>img{inset:auto auto -30% 50%;height:130%;width:auto;max-width:none;transform:translateX(-50%)}
  .landing-page .hero-founder-details{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(96%,480px);margin:0;padding:150px 20px 26px;background:linear-gradient(transparent,rgba(16,0,23,.9) 52%,#100017 78%)}
  .landing-page .hero-founder-details small{display:none}
}
@media(min-width:900px) and (max-width:1100px) and (orientation:portrait){body.landing-page .hero-conversion .hero-copy{zoom:1.32}}
.landing-page footer .legal-links{margin-top:6px}.landing-page footer .legal-links a{text-decoration:underline;text-underline-offset:3px;opacity:.85}.landing-page footer .legal-links a:hover{opacity:1}
.hero-mobile-cta{display:none}
@media(max-width:760px){
  .hero-mobile-cta{display:flex;align-items:center;justify-content:center;gap:14px;width:100%;margin-top:12px;padding:17px 18px;background:var(--gold);border:1px solid var(--gold2);color:#210524;font:800 12px/1 var(--body);letter-spacing:.09em;text-align:center;box-shadow:0 12px 30px rgba(255,216,79,.28)}
  .hero-mobile-cta:hover,.hero-mobile-cta:active{background:#fff}
  .hero-mobile-cta span{font-size:16px}
  .landing-page .hero-founder-details a{margin:0 auto;min-height:60px}
  .landing-page .hero-conversion{padding-bottom:36px}
}