/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   AboutHeroSection — Figma b54Vp5G1JrG0jhDNIxBaxz, node 7214:9672.
   Spec: AboutHeroSection.figma.md.

   A plain two-column grid on `.container`. Unlike DataReportHeroSection
   the visual does not bleed to the viewport: its 538px photo starts on
   column 2 and runs 34px past the content edge, inside the container's 80px
   padding. The display face, marker and white ground are global (tokens.css/section.css).
   ============================================================ */


/* ---- Outer section ---------------------------------------- */

.about-hero {
  position:    relative;
  width:       100%;
  /* White ground — the redesign language's inversion, not a mistake. */
  background:  var(--background-white);
  /* top    144 = ® pt-128 + the 16px white frame border. The Copy column's
                  own 16px top padding then puts the eyebrow row at 160,
                  exactly where Figma draws it below the nav.
     bottom  80 = Frame 4066's pb-64 + its 16px border. */
  padding:     9rem 0 5rem;   /* 144px / 80px */
  font-family: var(--font-family-default);
  box-sizing:  border-box;
  /* The visual overhangs the content edge by design; clip the X axis so a
     narrow window can never scroll sideways because of it. `clip`, not
     `hidden`, so the Y axis stays visible. */
  overflow-x:  clip;
}


/* ---- Grid (Figma 7214:9675) ------------------------------- */

/* 504 | 16 | 504 inside the 1024px container. */
.about-hero__grid {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap:            var(--spacing-4);   /* 16px */
}


/* ---- Copy column (Figma 7214:9676) ------------------------ */

/* Figma's padding is load-bearing here: the column sets the row's height —
   510px at 1512 (16 + 462 + 32) — and the photo is drawn to that height. */
.about-hero__copy {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             var(--spacing-8);          /* 32px — heading block → intro */
  padding:         1rem 2rem 2rem 0;          /* 16 / 32 / 32 / 0 */
  min-width:       0;
}

/* 7214:9678 — eyebrow → headline 24px. The 16px right padding is what makes
   the headline measure 456px (504 - 32 - 16), which is where Figma breaks it
   after "AI +". */
.about-hero__heading {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);           /* 24px */
  padding-right:  var(--spacing-4);           /* 16px */
}

/* 7214:9690 — body → actions 36px. No --spacing-9 token exists. */
.about-hero__intro {
  display:        flex;
  flex-direction: column;
  gap:            2.25rem;                    /* 36px */
}


/* ---- Eyebrow (7214:9680) ---------------------------------- */

/* No pill: Figma's `noice-bg` rect is hidden. Same row as
   DataReportHeroSection's eyebrow, with a different glyph. */
.about-hero__eyebrow {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);              /* 8px */
  min-height:  38px;                          /* Figma's row: 1 + 8 + 20 + 8 + 1 */
  margin:      0;
  font-size:   var(--font-size-sm);           /* 14px */
  line-height: var(--line-height-sm);         /* 20px */
  font-weight: var(--font-weight-medium);
  /* rgba(40,40,37,0.6) — there is no --opacity-neutral-60. */
  color:       color-mix(in srgb, var(--foreground) 60%, transparent);
}

.about-hero__eyebrow svg {
  flex-shrink: 0;
}


/* ---- Headline (7214:9688) --------------------------------- */

/* Face, size and weight come from `.serif-display`; the wash from `.marker-highlight`.
   Nothing to add — the measure comes from the heading block's padding. */


/* ---- Body (7214:9692) ------------------------------------- */

.about-hero__body {
  margin:      0;
  font-size:   var(--font-size-xl);           /* 20px */
  line-height: var(--line-height-xl);         /* 28px */
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}


/* ---- Visual (7214:9714) ----------------------------------- */

/* The box is Figma's 538 x 510 Image wrapper, anchored to column 2's left
   edge. Sized as a share of the column (538 / 504 = 106.75%) rather than in
   px, so between 992 and 1183 — where the column narrows below 504 — the
   overhang shrinks with it and stays inside the container's 80px padding.

   Centred against the copy: at 1512 both are 510 tall so this is Figma's
   position exactly; on small desktops the copy grows taller than the
   shrinking photo, and centring keeps the pair balanced (the same call
   DataReportHeroSection made). */
.about-hero__visual {
  position:      relative;
  width:         106.746%;                    /* 538 / 504 */
  aspect-ratio:  538 / 510;
  align-self:    center;
  /* Figma's Bg frame: 24px corners, a 0.5px hairline and a 200px grain tile
     at 25% screen over the media. The grain is the shared `.noise-grain`
     (::after) tuned here; `isolation` keeps its blend to this box. */
  border-radius: var(--radius-lg);            /* 24px */
  overflow:      hidden;
  isolation:     isolate;
  --noise-blend:   screen;
  --noise-opacity: 0.25;
}

/* The hairline sits ON the media — an inset shadow on the box itself would be
   painted under the video (see VrHeroSection's avatar ring). Positioned, so it
   paints above the in-flow video. */
.about-hero__visual::before {
  content:        '';
  position:       absolute;
  inset:          0;
  z-index:        1;
  border:         0.5px solid var(--opacity-neutral-20);
  border-radius:  inherit;
  pointer-events: none;
}

/* Video or still, cropped to the 538:510 box. The radius is repeated on the
   element: Safari paints video outside a rounded parent otherwise. */
.about-hero__visual-media {
  display:       block;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: inherit;
}

/* Placeholder for a visual-less instance. */
.about-hero__visual-placeholder {
  position:      absolute;
  inset:         0;
  border-radius: var(--radius-lg);
  background:    var(--panel-cream);
}


/* ---- Responsive ------------------------------------------- */

/* No About mobile frame yet — the stacking follows DataReportHeroSection. */
@media (max-width: 991px) {
  /* 80px top and bottom: top padding only ever steps down (144 → 80 → 64). */
  .about-hero {
    padding: 5rem 0;
  }

  .about-hero__grid {
    grid-template-columns: 1fr;
    row-gap:               3rem;              /* 48px */
  }

  /* Figma's column padding only served the side-by-side row. */
  .about-hero__copy,
  .about-hero__heading {
    padding: 0;
  }

  /* Stacked: centred and fluid, never larger than the design's 538px photo. */
  .about-hero__visual {
    width:        100%;
    max-width:    538px;
    justify-self: center;
  }
}

@media (max-width: 767px) {
  .about-hero {
    padding: 4rem 0;                          /* 64px */
  }

  /* One step down at mobile, leading unchanged — the redesign's body rule. */
  .about-hero__body {
    font-size:   var(--font-size-lg);         /* 18px */
    line-height: var(--line-height-lg);       /* 28px */
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}