/* ============================================================
   Future Awesome — Landing Page Styles
   ============================================================

   Font-loading decision:
   ─────────────────────
   Inter is loaded via Google Fonts CDN (weights 400, 500).
   Reason: no local font files exist in the repo, and Inter is
   freely available from Google Fonts with good global CDN
   performance. The `display=swap` descriptor ensures text
   remains visible during font load using the fallback stack.
   If the CDN is unreachable the page renders with the system
   fallback stack and remains fully readable.

   Breakpoint strategy:
   ────────────────────
   CSS custom properties cannot be used inside media-query
   conditions, so breakpoints are documented as constants here
   and used directly in media queries. Mobile-first approach.

   Breakpoints (from Framer export):
     --bp-tablet:  810px
     --bp-desktop: 1440px
     --bp-wide:    1778px
     --bp-max:     1800px
   ============================================================ */

/* ── Reset / Base ─────────────────────────────────────────── */

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

/* ── Page Layout — Sticky Split Architecture ─────────────── */
/*
   Mobile-first: single stacked column by default.
   At >=1440px: two-column flex row with sticky left image column
   and scrolling right content column.

   Structural classes:
     .page-layout             — outer flex wrapper
     .page-layout__image-col  — left column (image)
     .page-layout__image      — the hero image itself
     .page-layout__content-col — right column (all scrolling content)
*/

/* ── Mobile / default: stacked single column ── */

.page-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;                /* stacked layout: 24px between image and content */
  min-height: 100dvh;
}

.page-layout__image-col {
  /* Image container: constrained height on mobile */
  position: relative;
  width: 100%;
  height: 250px;
  overflow: hidden;
  flex-shrink: 0;
}

.page-layout__image {
  /* Override the base img reset to fill the container */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;       /* anchor crop to top of image (owl/books visible on mobile) */
}

.page-layout__content-col {
  /* Content flows naturally in the stacked layout */
  flex: 1 1 auto;
}

/* ── Tablet (810px+): taller image in stacked layout ── */

@media (min-width: 810px) {
  .page-layout__image-col {
    height: 300px;
  }
}

/* ── Desktop (1440px+): two-column sticky split ── */

@media (min-width: 1440px) {
  /* Prevent body scroll — only the right content column scrolls */
  body {
    overflow: hidden;
    height: 100vh;
  }

  .page-layout {
    flex-direction: row;
    height: 100vh;
    gap: 44px; /* from reference: 44px between image and content columns */
  }

  .page-layout__image-col {
    /* Left column: takes half the width, full viewport height */
    flex: 1 0 0;
    height: 100%;
    position: sticky;
    top: 0;
    align-self: flex-start;
    overflow: hidden;
  }

  .page-layout__content-col {
    /* Right column: takes the other half, scrolls independently */
    flex: 1 0 0;
    height: 100vh;
    overflow-y: auto;
  }
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Lists */
ol,
ul {
  list-style: none;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Images / Media */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form controls — inherit font */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* Focus — visible outline for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}

/* ── Design Tokens ────────────────────────────────────────── */

:root {
  /* ── Typography ── */
  --ff-body: "Inter", "Inter Placeholder", system-ui, -apple-system, sans-serif;
  --fs-body: 16px; /* base / default */
  --fs-wordmark: 28px; /* "Future Awesome" text logo */
  --fs-headline: 28px; /* hero description */
  --fs-stat-value: 32px; /* stat percentage number */
  --fs-stat-label: 13px; /* stat label text (live ref: 13px) */
  --fs-card-quote: 14px; /* testimonial quote */
  --fs-card-name: 14px; /* testimonial name (live ref: 14px / 500) */
  --fs-card-role: 12px; /* testimonial role */
  --fs-cta: 16px; /* CTA button label (live ref: 16px) */

  /* ── Letter Spacing ── */
  --ls-tight: -0.04em; /* stat values */
  --ls-snug: -0.03em; /* wordmark */
  --ls-normal: -0.02em; /* CTA button */
  --ls-reading: -0.01em; /* headline / body copy */
  --ls-none: 0;

  /* ── Line Height ── */
  --lh-body: 1.6; /* general body text / CTA */
  --lh-heading: 1.4; /* headline */
  --lh-stat: 1.2; /* stat values */
  --lh-card: 1.7; /* testimonial quote */

  /* ── Font Weight ── */
  --fw-regular: 400;
  --fw-medium: 500;

  /* ── Colors ── */
  --color-text: #1d1f13; /* primary text */
  --color-text-muted: rgba(10, 10, 10, 0.6); /* secondary / muted text */
  --color-bg: #ffffff; /* page background */
  --color-cta: #4d64fe; /* CTA button background */
  --color-cta-text: #ffffff; /* CTA button text */
  --color-card-border: #ffffff; /* testimonial card border */

  /* ── Radii ── */
  --radius-cta: 99px; /* pill shape for CTA */
  --radius-card: 8px; /* testimonial cards */
  --radius-input: 10px; /* form inputs (from export) */

  /* ── Borders ── */
  --border-card: 1px solid var(--color-card-border);

  /* ── Shadows (from Framer export) ── */
  --shadow-card:
    rgba(0, 0, 0, 0.17) 0px 0.6px 1.6px -1.5px,
    rgba(0, 0, 0, 0.14) 0px 2.3px 6px -3px,
    rgba(0, 0, 0, 0.02) 0px 10px 26px -4.5px;

  /* ── CTA hover/active ── */
  --color-cta-hover: #3b52e0; /* slightly darker blue for hover */
  --color-cta-active: #2f44c8; /* pressed state */
}

/* ── Content Column — Internal Padding ────────────────────── */
/*
   Right column padding matches the Framer reference:
     mobile:  24px horizontal, 24px top, 48px bottom
     tablet:  48px left, 64px right, 24px top, 48px bottom
     desktop: 0 left (image flush), 64px right, 24px top, 48px bottom
*/

.page-layout__content-col {
  padding: 24px 24px 48px;
}

@media (min-width: 810px) {
  .page-layout__content-col {
    padding: 24px 64px 48px 48px;
  }
}

@media (min-width: 1440px) {
  .page-layout__content-col {
    padding: 24px 64px 48px 0;
  }
}

/* ── Site Header / Wordmark ──────────────────────────────── */

.site-header {
  display: flex;
  align-items: center;
  min-height: 44px; /* from reference: 44px nav height */
  margin-bottom: 0; /* gap handled by hero section */
}

.wordmark {
  font-size: var(--fs-wordmark);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-snug);
  line-height: 1.2;
  color: var(--color-text);
}

/* ── Hero Section ────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px; /* from reference: 29px between elements */
  padding-top: 26px; /* stacked layout: tighter top spacing */
  padding-bottom: 48px; /* space below CTA before stats (ref: ~53px) */
}

@media (min-width: 1440px) {
  .hero {
    padding-top: 40.8px;             /* desktop: wider top spacing */
  }
}

.hero__headline {
  font-size: var(--fs-headline);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-reading);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px; /* from reference: 58px button height */
  padding: 16px 24px;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
  color: var(--color-cta-text);
  background-color: var(--color-cta);
  border-radius: var(--radius-cta);
  transition: background-color 0.15s ease;
}

.hero__cta:hover {
  background-color: var(--color-cta-hover);
}

.hero__cta:active {
  background-color: var(--color-cta-active);
}

/* CTA focus ring — override global :focus-visible for pill shape */
.hero__cta:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 3px;
}

/* CTA full-width on mobile for better touch target and visual weight */
@media (max-width: 809px) {
  .hero__cta {
    width: 100%;
  }
}

/* ── Stats / Credibility Section ─────────────────────────── */
/*
   Horizontal row of stat items: value (large) stacked above label (small).
   At desktop all 5 items fit in a single row.
   At mobile the row clips naturally — the first 3 items are visible,
   matching the reference behavior (overflow: clip, no scroll).
*/

.stats {
  padding-top: 28px; /* top spacing from reference */
  padding-bottom: 29px; /* gap before testimonials (ref: 29px) */
}

.stats__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 68px;                     /* Framer reference: 68px between stat items */
  overflow: clip; /* clips overflowing items on narrow screens (ref behavior) */
}

.stats__item {
  display: flex;
  flex-direction: column;
  gap: 10px; /* from reference: 10px between value and label */
  flex-shrink: 0; /* prevent items from squishing */
  width: min-content; /* from reference: items sized to their content */
}

.stats__value {
  order: -1; /* visually place value ABOVE label (DOM: dt before dd) */
  font-size: var(--fs-stat-value);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-stat);
  color: var(--color-text);
  opacity: 0.9; /* from reference: value text at 90% opacity */
  white-space: nowrap; /* from reference: prevent value wrapping */
}

.stats__label {
  font-size: var(--fs-stat-label);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-stat);
  color: var(--color-text);
  opacity: 0.7; /* from reference: label text at 70% opacity */
  white-space: nowrap; /* from reference: prevent label wrapping */
}

/* ── Testimonials Section ────────────────────────────────── */
/*
   Grid of testimonial cards. Reference layout:
     mobile (<810):    single column
     tablet+ (810+):   two-column grid
     wide (1680+):     three-column grid
*/

.testimonials {
  display: grid;
  grid-template-columns: 1fr; /* mobile: single column */
  column-gap: 10px;
  row-gap: 48px;              /* 24px row-gap + 24px row padding combined */
  padding-top: 24px;          /* 24px above first row */
  padding-bottom: 8px;
}

@media (min-width: 810px) {
  .testimonials {
    grid-template-columns: 1fr 1fr; /* tablet + standard desktop: two columns */
  }
}

@media (min-width: 1680px) {
  .testimonials {
    grid-template-columns: 1fr 1fr 1fr; /* wide desktop: three columns */
  }

  .hero {
    padding-top: 46px;               /* wide desktop: more space below wordmark */
  }
}

/* ── Testimonial Card ────────────────────────────────────── */
/*
   Each card: image on top (fixed height, cover), content below.
   Reference structure:
     - card image zone: 204px tall, 8px radius, object-fit cover
     - 20px gap between image and content
     - content: quote text + author block
     - 20px gap between quote and author
     - author: name stacked above role, 2px gap
*/

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 20px; /* from reference: 20px between image and content */
  overflow: hidden; /* contain the card visually */
}

.testimonial__image {
  width: 100%;
  height: 204px; /* from reference: fixed 204px image height */
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-card); /* 8px from tokens */
  border: var(--border-card); /* 1px solid white from tokens */
  flex-shrink: 0;
}

/* ── Testimonial Quote ───────────────────────────────────── */

.testimonial__quote p {
  font-size: 16px;
  font-weight: var(--fw-regular);
  letter-spacing: -0.32px;           /* design: -0.32px (-0.02em × 16px) */
  line-height: 19.2px;
  color: #000000;
  opacity: 0.9;                      /* Framer: text slightly softer */
  word-break: break-word;
}

.testimonial__quote p::before {
  content: "\201C";                  /* left double quotation mark */
}

.testimonial__quote p::after {
  content: "\201D";                  /* right double quotation mark */
}

/* ── Testimonial Attribution ─────────────────────────────── */
/*
   Name stacked above role, 2px gap.
   Reference: author block is a column with name (14px/500/0.8 opacity)
   and role (12px/500/muted color/0.7 opacity).
*/

.testimonial__attribution {
  display: flex;
  flex-direction: column;
  gap: 5.59px;                       /* design: 5.59px between name and role */
}

.testimonial__name {
  font-size: 14px;
  font-weight: var(--fw-medium);
  font-style: normal;                /* override cite italic default */
  letter-spacing: -0.28px;           /* design: -0.28px (-0.02em × 14px) */
  line-height: 19.6px;
  color: #000000;
  opacity: 0.9;                      /* Framer: text slightly softer */
}

.testimonial__role {
  font-size: 12px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 20.4px;
  color: rgba(10, 10, 10, 0.6);     /* #0A0A0A at 60% opacity */
  opacity: 0.9;                      /* Framer: text slightly softer */
}

/* ── Invite Modal ────────────────────────────────────────── */
/*
   Native <dialog> element used for correct stacking, backdrop,
   and focus management semantics. Centered panel with form.
*/

.modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

/* Center the panel within the viewport-filling dialog */
.modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 500px;                    /* Figma: 500px modal width */
  max-height: calc(100vh - 32px);      /* ensure panel fits viewport with margins */
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  margin: 16px;
  padding: 21px 36px 24px;            /* Figma: 21 top, 36 left/right, 24 bottom */
  background: #f9f9f9;                /* Figma: modal fill */
  border-radius: 6px;                 /* Figma: 6px corner radius */
  box-shadow: var(--shadow-card);
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; /* min 44px touch target for a11y */
  height: 44px; /* min 44px touch target for a11y */
  border-radius: 50%;
  color: var(--color-text);
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.modal__close:hover {
  opacity: 1;
}

.modal__close:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
  opacity: 1;
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 26.8px;                         /* Figma: gap between title and form blocks */
}

.modal__title {
  font-size: 22px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-reading);
  line-height: var(--lh-heading);
  color: var(--color-text);
  padding-right: 44px;                /* clear close button */
}

.modal__form {
  display: flex;
  flex-direction: column;
  gap: 15px;                           /* Figma: 15px between field groups */
}

/* ── Form Field ── */

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10.59px;                        /* Figma: label-to-input gap */
}

.form-field__label {
  font-size: 14px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-reading);
  line-height: 1.4;
  color: var(--color-text);
}

.form-field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--radius-input);
  transition: border-color 0.15s ease;
}

.form-field__input::placeholder {
  color: var(--color-text-muted);
}

.form-field__input:focus {
  outline: none;
  border-color: var(--color-cta);
  box-shadow: 0 0 0 1px var(--color-cta);
}

.form-field__input[aria-invalid="true"] {
  border-color: #d32f2f;
  box-shadow: 0 0 0 1px #d32f2f;
}

.form-field__hint {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: 0;
}

.form-field__error {
  font-size: 13px;
  line-height: 1.4;
  color: #d32f2f;
  min-height: 0;
}

.form-field__error:empty {
  display: none;
}

/* ── Modal Submit Button ── */

.modal__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  font-size: var(--fs-cta);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-body);
  color: var(--color-cta-text);
  background-color: var(--color-cta);
  border-radius: var(--radius-cta);    /* pill-shaped per design */
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
  margin-top: 4px;
}

.modal__submit:hover {
  background-color: var(--color-cta-hover);
}

.modal__submit:active {
  background-color: var(--color-cta-active);
}

.modal__submit:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 3px;
}

.modal__submit[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal__submit-loading {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: modal-spin 0.6s linear infinite;
}

.modal__submit[disabled] .modal__submit-loading {
  display: block;
}

.modal__submit[disabled] .modal__submit-text {
  display: none;
}

@keyframes modal-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ── Success Modal Panel ── */

.success-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 48px 36px;                 /* larger top/bottom than form modal */
}

.success-panel__message {
  font-size: 24px;
  font-weight: var(--fw-regular);
  line-height: 24.8px;
  letter-spacing: -0.48px;
  color: #1d1f13;
  margin: 0;
}

/* ── Modal Responsive ── */

@media (max-width: 540px) {
  .modal__panel {
    margin: 12px;
    padding: 21px 20px 24px;          /* tighter horizontal padding on small screens */
    max-width: none;
  }
}

/* ── Reduced Motion ──────────────────────────────────────── */
/*
   Respect prefers-reduced-motion: disable transitions and
   animations for users who prefer reduced motion.
*/

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}