/*
 * Dreamforce meeting landing page.
 *
 * Standalone page — does not extend the marketing-site header/footer or
 * per-page Elementor CSS. Visual language ported from sign-up.css (navy
 * gradient, glassmorphism cards) since that is the reference standard for
 * single-conversion-path pages on this site.
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #f7f8fb;
  color: #05184f;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* Default focus ring for every browser (WCAG 2.4.7), then suppressed in
   favor of the :focus-visible-only ring below, but only where the browser
   actually supports :focus-visible — without the @supports guard, browsers
   that don't support it would still match `:focus:not(:focus-visible)`
   (an unsupported pseudo-class in a :not() matches nothing, so the whole
   selector matches every :focus) and lose focus outlines entirely. */
:focus {
  outline: 2px solid #4068eb;
  outline-offset: 2px;
}
@supports selector(:focus-visible) {
  :focus:not(:focus-visible) { outline: none; }
  :focus-visible {
    outline: 2px solid #4068eb;
    outline-offset: 2px;
  }
}

/* ---------- hero (photo card floating on a plain white canvas, per the
   reference design — not two edge-to-edge halves of one bordered card) ---------- */

.df-hero {
  background: #ffffff;
  padding: 32px 20px 40px;
}

.df-hero-card {
  --df-surface-1: #ffffff;
  --df-border: rgba(5, 24, 79, 0.1);
  --df-text-muted: #6b6b7d; /* 5.2:1 on white — #7a7a8c was only 4.2:1, below WCAG AA's 4.5:1 for normal text */
  --df-radius: 10px;

  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

.df-hero-panel {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  min-height: 460px;
}

/* The only "card" here — floating on the plain white canvas, with its own
   shadow, but square (not rounded) corners per feedback. Full-bleed
   Dreamforce photo (images/dreamforce-hero-bg.webp) as the background; the
   gradient overlay on top boosts legibility for the white brand mark,
   headline, and cards without needing a separate photo element. Kept
   light near the top (where "Welcome to Dreamforce" reads clearly) and
   only darkens toward the bottom third. */
.df-hero-panel--dark {
  background-image: linear-gradient(180deg, rgba(5, 24, 79, 0.05) 0%, rgba(5, 24, 79, 0.12) 35%, rgba(5, 24, 79, 0.55) 70%, rgba(5, 24, 79, 0.88) 100%), url('/images/dreamforce-hero-bg.webp');
  background-size: cover;
  background-position: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(5, 24, 79, 0.18);
  /* Guarantees at least this much space between the brand mark and the
     copy block below it — margin-top: auto on .df-hero-copy alone
     collapses to ~0 whenever the panel's height is close to its content's
     natural height (no free space left for auto to consume), which is
     what made the logo and headline crowd together on mobile/tablet. */
  gap: 24px;
}

.df-hero-brand {
  position: relative;
  z-index: 1;
}
.df-hero-brand img {
  display: block;
  width: clamp(125px, 10vw, 190px);
  height: auto;
}

.df-hero-copy {
  position: relative;
  z-index: 1;
  /* Pushes the copy+cards group toward the bottom of the panel, leaving
     the top of the background photo visible — matches the reference
     design's logo-top / content-bottom composition. */
  margin-top: auto;
}

.df-headline {
  /* Scales continuously with viewport width (not just a couple of fixed
     breakpoint values) so the headline keeps growing right up to large
     desktop sizes instead of capping out early — at 1440px this reaches
     the top of its range, big enough for the copy block to read as
     covering roughly the bottom half of the photo panel, per feedback. */
  font-size: clamp(1.75rem, 1rem + 2.8vw, 3.5rem);
  line-height: 1.12;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.df-hero-tagline {
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.1875rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 12px 0 0;
  max-width: 46ch;
}

.df-hero-panel--light {
  justify-content: center;
  /* Kept tight so heading/calendar (consent granted) or the CTA button
     (no consent) plus the legal links read as one grouped unit. */
  gap: 12px;
}

/* Replaces the orange CTA when the inline widget is showing. Hidden by
   default via the `hidden` attribute; the booking script removes that
   once marketing consent is granted and the calendar mounts. */
.df-booking-heading {
  margin: 0;
  text-align: center;
  font-size: clamp(1.25rem, 0.3vw + 1.1rem, 1.625rem);
  font-weight: 700;
  line-height: 1.25;
  color: #05184f;
  text-wrap: balance;
}

/* Cards sit on the photo, so they get a translucent glass treatment
   (blurred, semi-transparent white) rather than the light panel's solid
   white — a solid card here would fight with the photo instead of
   sitting on it. Icon sits on its own line above the heading (not sharing
   a row with it) so the heading gets the card's full width to wrap into,
   per the reference design — 3-up as soon as the hero goes two-column,
   stacked on mobile. */
.df-hero-features {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.df-hero-features li {
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--df-radius);
  padding: clamp(14px, 1vw + 8px, 20px);
}
.df-hero-feature-icon {
  display: block;
  width: clamp(20px, 1.2vw + 12px, 26px);
  height: clamp(20px, 1.2vw + 12px, 26px);
  margin-bottom: 10px;
}
.df-hero-feature-t {
  font-size: clamp(0.875rem, 0.3vw + 0.75rem, 1.0625rem);
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}
.df-hero-feature-b {
  font-size: clamp(0.8125rem, 0.25vw + 0.7rem, 0.9375rem);
  color: rgba(255, 255, 255, 0.82);
  margin: 6px 0 0;
  line-height: 1.45;
}

/* Hidden by default (the `hidden` attribute in the markup); revealed by
   the shared booking script once marketing consent is already granted.
   Height is 700px — Calendly's documented inline embed height
   (https://calendly.com/help/how-to-control-your-embed-layout-and-sizing).
   Medium window layout (calendar + time slots side by side, "Select a
   Date & Time") requires the parent container to be >=650px and <1100px
   wide; small window ("Select a Day", then times) is used below 650px.
   The desktop :has() rule below widens this column to hit that floor.
   overflow: hidden (not auto) — Calendly's iframe is height:100% of this
   box and manages its own internal scrolling, so an overflow:auto wrapper
   produced two nested scrollbars. */
.df-calendly-widget {
  border-radius: var(--df-radius);
  overflow: hidden;
  background: var(--df-surface-1);
  border: 1px solid var(--df-border);
  min-width: 320px;
  width: 100%;
  height: 700px;
  flex: 0 0 auto;
}

/* Widget and orange CTA are mutually exclusive: once the calendar is
   un-hidden, the fallback link is gone. Same pattern as /book-a-demo/. */
#dreamforce-calendly:not([hidden]) ~ .df-cta-button {
  display: none;
}
.df-calendly-widget iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
.df-hero-urgency {
  /* No margin-top: auto here — that was fighting .df-hero-panel--light's
     justify-content: center by consuming all free space above itself,
     which pinned the calendar to the top and stranded the urgency/button
     group at the bottom instead of centering calendar+button as one
     tight group, per feedback. */
  margin: 0;
  text-align: center;
  font-size: clamp(0.75rem, 0.15vw + 0.7rem, 0.875rem);
  font-weight: 600;
  color: #b45309;
}

.df-cta-button {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 9999px;
  padding: 14px 24px;
  font-size: clamp(1rem, 0.3vw + 0.9rem, 1.1875rem);
  font-weight: 700;
  font-family: inherit;
  background: #ea580c;
  color: #ffffff !important;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(234, 88, 12, 0.35);
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.df-cta-button:hover {
  background: #c2410c;
  transform: translateY(-1px);
}

/* ---------- legal links (subtle, under the CTA button — see
   .df-hero-urgency's comment for why there's no separate footer bar) ---------- */

.df-legal-links {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 12px;
}
.df-legal-links a {
  font-size: 0.75rem;
  color: var(--df-text-muted);
  text-decoration: none;
}
.df-legal-links a:hover {
  color: #4068eb;
  text-decoration: underline;
}

/* ---------- responsive ---------- */

/* Landscape-only: a portrait tablet (e.g. 768x1024) has plenty of width
   (>=700px) but going two-column there squeezes each side into a narrow
   strip — stacked (like phone) reads much better in that orientation.
   Landscape tablets (e.g. 1024x768) get the side-by-side layout, same as
   desktop. orientation: landscape also naturally covers rotated phones at
   width>=700, which is the same "wide enough, going side to side" case. */
@media (min-width: 700px) and (orientation: landscape) {
  .df-hero-card { grid-template-columns: 1.2fr 1fr; gap: 40px; }
  .df-hero-panel { padding: 32px 28px; }
  /* No forced aspect-ratio here (previously 4/5) — with the larger
     clamp()-driven type, that fixed the panel's height shorter than its
     actual content on tablet widths, and overflow: hidden clipped the
     bottom card. Natural content height (grid stretch still keeps both
     columns equal) is safe at every width; only the >=1200px+700px-tall
     breakpoint below locks the panel to the viewport height, where
     there's guaranteed room. */
}

/* Cards go 3-up purely on available width, independent of the panels'
   own stacked-vs-side-by-side orientation switch above — a portrait
   tablet (e.g. 768x1024) stacks the two panels, but the dark panel
   itself is still plenty wide for 3 cards in a row rather than stacking
   those too. */
@media (min-width: 600px) {
  .df-hero-features { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .df-hero { padding: 48px 48px; }
}

/* At full desktop size the whole hero fills the viewport with no page
   scroll (target: 1440x1024) — the card stretches edge-to-edge instead of
   being capped at max-width: 1140px and floating in the center of a much
   larger white canvas, which was the reported issue. Below this breakpoint
   it stays a normal scrollable, padded section — a hard viewport-height
   lock doesn't make sense on shorter/narrower screens where the content
   wouldn't otherwise fit onscreen. Placed last so it wins the cascade over
   the 700px/1024px rules above on the (common) case where all three match. */
@media (min-width: 1200px) and (min-height: 700px) {
  html, body { height: 100%; }
  .df-hero {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    padding: 24px;
  }
  .df-hero-card {
    flex: 1 1 auto;
    max-width: none;
    height: 100%;
  }
  /* No longer needed once the panel's height comes directly from
     stretching to fill .df-hero-card's own 100%-of-viewport height. */
  .df-hero-panel--dark { aspect-ratio: unset; }
  /* Extra breathing room to match the larger clamp()-driven type at this
     size, so the copy+cards group reads as covering roughly the bottom
     half of the panel rather than just having bigger text crammed into
     the same tight spacing. */
  .df-hero-panel--dark, .df-hero-panel--light { padding: 56px; }
  .df-headline { margin-bottom: 16px; }
  .df-hero-features { margin-top: 32px; gap: 16px; }

  /* Calendly medium layout needs the widget itself >=650px
     (https://calendly.com/help/how-to-control-your-embed-layout-and-sizing).
     Only when the widget is showing: keep the no-consent CTA layout on
     the original 1.2fr/1fr split so a lone button doesn't sit in a
     cavernous empty column. 698px column = 650px widget + 24px padding
     each side on the light panel. */
  .df-hero-card:has(#dreamforce-calendly:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(698px, 1.4fr);
  }
  .df-hero-panel--light:has(#dreamforce-calendly:not([hidden])) {
    padding-left: 24px;
    padding-right: 24px;
  }
  .df-hero-card:has(#dreamforce-calendly:not([hidden])) .df-calendly-widget {
    min-width: 650px;
  }
}