/* ============================================================
   AAiX — Booking page
   Tokens from BRANDING_REFERENCE.md (dual-gold, 80/15/5).

   Layout: on tall desktop viewports the whole page is locked to
   100vh (see the "VIEWPORT LOCK" block at the bottom). Below that
   it falls back to normal document flow so nothing gets crushed
   on short laptops or phones.
   ============================================================ */

:root {
  --aix-black:      #050505;  /* page background       */
  --aix-dark-gray:  #151515;  /* cards, panels         */
  --gold-primary:   #FEBF10;  /* CTAs, strong accents  */
  --gold-premium:   #D4AF37;  /* borders, thin details */
  --white:          #FFFFFF;
  --platinum:       #B8B8B8;  /* secondary text        */

  --hairline:   rgba(212, 175, 55, .16);
  --hairline-2: rgba(212, 175, 55, .28);
  --gold-wash:  rgba(254, 191, 16, .06);

  --radius:    14px;
  --radius-sm: 10px;
  --gutter:    40px;
  --shell:     1500px;   /* centred shell (was briefly full-bleed) */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--aix-black);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
svg { width: 100%; height: 100%; }

.page {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 24px var(--gutter) 24px;
}

/* Shared circular gold icon badge */
.ico,
.badge > span,
.assurance__icon,
.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: var(--gold-wash);
  color: var(--gold-primary);
}
.ico { width: 40px; height: 40px; }
.ico svg { width: 18px; height: 18px; }

/* ================= TOP BAR ================= */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.brand { display: flex; align-items: center; gap: 18px; }
.brand__logo { width: 112px; height: auto; }

.brand__rule {
  width: 1px;
  height: 42px;
  background: linear-gradient(transparent, var(--hairline-2) 20%, var(--hairline-2) 80%, transparent);
}

.brand__tagline {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.assurance {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: 14px;
  color: var(--platinum);
}
.assurance__icon { width: 38px; height: 38px; border-radius: 10px; }
.assurance__icon svg { width: 18px; height: 18px; }

/* ================= HERO GRID ================= */
.hero {
  display: grid;
  grid-template-areas: "pitch portrait booking";
  /* Booking column takes the remaining space. Note: the widget only switches to its
     side-by-side calendar + time-slot layout past roughly 968px of iframe width; inside the
     centred 1500px shell it gets ~610px and stacks them instead. See README. */
  grid-template-columns: minmax(330px, 390px) minmax(280px, 420px) minmax(640px, 1fr);
  column-gap: 16px;
  align-items: start;
  margin-bottom: 20px;
}

.pitch    { grid-area: pitch; }
.portrait { grid-area: portrait; }
.booking  { grid-area: booking; }

/* ---------- Column 1: pitch ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 17px 7px 9px;
  margin-bottom: 20px;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  background: var(--gold-wash);
  color: var(--gold-primary);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.badge > span { width: 25px; height: 25px; border: 0; background: none; }
.badge > span svg { width: 17px; height: 17px; }

.pitch h1 {
  font-size: clamp(28px, 2.5vw, 38px);   /* keeps "CEO Transformation" on one line */
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.6px;
  margin-bottom: 16px;
}
.pitch h1 em { font-style: normal; color: var(--gold-primary); }

.lede {
  max-width: 350px;
  margin-bottom: 26px;
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--platinum);
}

.features { list-style: none; display: grid; gap: 20px; margin-bottom: 26px; }
.features li { display: flex; gap: 14px; }
.features h3 { font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.features p {
  max-width: 262px;
  font-size: 12.8px;
  line-height: 1.52;
  color: var(--platinum);
}

.testimonial {
  position: relative;
  padding: 18px 20px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--aix-dark-gray);
}
.testimonial__mark {
  position: absolute;
  top: 4px; left: 15px;
  font-size: 40px;
  line-height: 1;
  color: var(--gold-premium);
}
.testimonial blockquote {
  padding-left: 25px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.62;
  color: #E6E6E6;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-left: 25px;
  font-size: 12.5px;
  color: var(--gold-premium);
}
.avatar { width: 27px; height: 27px; }
.avatar svg { width: 15px; height: 15px; }

/* ---------- Column 2: portrait (transparent cutout) ---------- */
.portrait {
  align-self: start;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;              /* below the pitch text and the booking card */
}

.portrait__frame { position: relative; flex: 0 0 auto; overflow: visible; }

/* Pitch text and the booking card stay above the portrait, so scaling him up
   below can bleed sideways without covering anything. */
.pitch   { position: relative; z-index: 2; }
.booking { position: relative; z-index: 3; }

/* Warm glow behind the cutout — the page black shows through, as in the reference */
.portrait__frame::before {
  content: '';
  position: absolute;
  inset: -8% -42% 2% -42%;   /* widened to match the scaled-up portrait */
  background: radial-gradient(closest-side, rgba(212, 175, 55, .20), transparent 72%);
  z-index: 0;
}

.portrait__frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  /* Prominence without layout cost: a transform can't push the neighbouring
     columns, so the calendar and the left column never move. Anchored bottom-centre. */
  transform: translateX(-10%) scale(1.26);
  transform-origin: 50% 100%;   /* shifted left, clear of the booking card's edge */
}

.portrait__id { position: relative; z-index: 2; padding-left: 6px; }

.portrait__sig {
  font-family: 'Snell Roundhand', 'Brush Script MT', cursive;
  font-size: 40px;
  line-height: 1.1;
  color: var(--gold-premium);
  margin-bottom: 6px;
}
.portrait__name { font-size: 16px; font-weight: 600; }
.portrait__role { font-size: 13.5px; color: var(--platinum); }

/* Proof stats beneath the portrait */
.stats {
  list-style: none;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--aix-dark-gray);
}
.stats li { display: flex; align-items: center; gap: 9px; padding: 12px 10px; }
.stats li + li { border-left: 1px solid var(--hairline); }
.stats__ico { flex: 0 0 auto; width: 24px; height: 24px; color: var(--gold-primary); }
.stats__ico svg { width: 21px; height: 21px; }
.stats__n { font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--gold-primary); }
.stats__l { font-size: 10.5px; line-height: 1.32; color: var(--platinum); }

/* ---------- Column 3: booking ---------- */
.booking {
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--aix-dark-gray);
}

.booking iframe {
  display: block;
  width: 100%;
  min-height: 1150px;
  border: 0;
  border-radius: var(--radius-sm);
  /* Matches the card, so any height the widget doesn't use is invisible */
  background: var(--aix-dark-gray);
}

/* Reassurance row — markup is commented out in index.html (the widget renders its own
   duration/date/timezone box). Styles kept so restoring it needs no CSS work. */
.assurances {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}
.assurances li { display: flex; align-items: center; gap: 13px; padding: 16px 15px; }
.assurances li + li { border-left: 1px solid var(--hairline); }
.assurances h3 { font-size: 14.5px; font-weight: 600; }
.assurances p { font-size: 12.5px; color: var(--platinum); }

/* ================= FOOTER STRIP ================= */
.footer {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--aix-dark-gray);
}

.footer__help { display: flex; align-items: center; gap: 14px; }
.footer__q { font-size: 15px; font-weight: 600; }
.footer__a { font-size: 13.5px; color: var(--platinum); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--gold-primary);
  border-radius: 8px;
  color: var(--gold-primary);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn svg { width: 16px; height: 16px; }
.btn:hover,
.btn:focus-visible { background: var(--gold-primary); color: var(--aix-black); }

.footer__proof {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}
.footer__proof p { font-size: 14.5px; color: var(--platinum); max-width: 340px; }
.footer__proof strong { color: var(--white); font-weight: 600; }

.stack { display: flex; }
.stack__a {
  display: grid;
  place-items: center;
  width: 33px; height: 33px;
  border-radius: 50%;
  border: 2px solid var(--aix-dark-gray);
  background: #222;
  color: var(--gold-premium);
}
.stack__a svg { width: 16px; height: 16px; }
.stack__a + .stack__a { margin-left: -11px; }

/* ============================================================
   VIEWPORT LOCK — everything inside 100vh.
   Only applies when the window is genuinely big enough; otherwise
   the page scrolls normally rather than squashing the content.
   ============================================================ */
@media (min-width: 1240px) and (min-height: 820px) {
  html, body { height: 100%; overflow: hidden; }

  .page {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .topbar, .footer { flex: 0 0 auto; }

  .hero {
    flex: 1 1 auto;
    min-height: 0;          /* lets the grid shrink instead of overflowing */
    align-items: stretch;
  }

  /* Pitch column distributes its own slack rather than leaving a gap at the bottom */
  .pitch {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .pitch .testimonial { margin-top: auto; }

  /* Portrait fills the column height; `contain` keeps his head from being cropped */
  .portrait { height: 100%; min-height: 0; }
  .portrait__frame { flex: 1 1 auto; min-height: 0; }
  .portrait__id, .stats { flex: 0 0 auto; }
  .assurances { flex: 0 0 auto; }

  /* Booking card fills the height and the widget scrolls internally if it needs to */
  .booking {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .booking iframe {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
  }
}

/* ================= RESPONSIVE ================= */

/* Two columns — booking beside a stacked pitch + portrait */
@media (max-width: 1239px) {
  .hero {
    grid-template-areas:
      "pitch    booking"
      "portrait booking";
    grid-template-columns: minmax(300px, 380px) minmax(460px, 1fr);
    column-gap: 28px;
  }
  .portrait { max-width: 320px; padding-top: 26px; }
}

/* Single column */
@media (max-width: 900px) {
  :root { --gutter: 20px; }
  .hero {
    grid-template-areas: "pitch" "portrait" "booking";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 30px;
  }
  .portrait { max-width: 300px; padding-top: 0; margin-inline: auto; }
  .assurance, .footer__proof { margin-left: 0; }

  /* The scale/offset only makes sense in the three-column desktop layout; in a single
     column it pushes him off-screen and drags the page into horizontal overflow. */
  .portrait__frame img { transform: none; }
  .portrait__frame::before { inset: -4% -12% 4% -12%; }
}

@media (max-width: 600px) {
  .topbar { gap: 14px; margin-bottom: 24px; }
  .brand__logo { width: 94px; }
  .lede, .features p { max-width: none; }
  .booking { padding: 10px; }
  .booking iframe { min-height: 1250px; }
  .footer { gap: 18px; padding: 16px; }
  .btn { width: 100%; justify-content: center; }
  .footer__proof p { max-width: none; font-size: 14px; }
  .assurances { grid-template-columns: 1fr; }
  .assurances li + li { border-left: 0; border-top: 1px solid var(--hairline); }
}

/* Gold scrollbar, matching the brand */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--aix-black); }
::-webkit-scrollbar-thumb { background: var(--gold-premium); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-primary); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}