/* ============================================================
   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;
  }
}


/* ============================================================
   DataReportForm — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6797:2161.

   The white download card. Note the INVERSION that runs through this whole
   page (`--background-white`, src/styles/tokens.css): the card is white and its inputs are cream,
   which is the opposite of the site's usual cream-section/white-input pairing.
   ============================================================ */

.data-report-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);    /* 24px */
  width:          100%;
  max-width:      496px;               /* Figma Form node */
  padding:        var(--spacing-6) 0;  /* py-24, px handled per-row */
  background:     var(--card);
  border-radius:  12px;                /* Figma rounded-box; no 12px radius token */
  overflow:       hidden;
  box-sizing:     border-box;
  font-family:    var(--font-family-default);
}

/* 6797:2162 */
.data-report-form__content {
  padding: 0 var(--spacing-6);     /* 24px */
}

/* 6797:2163 */
.data-report-form__fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);    /* 24px */
}

.data-report-form__field {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-2);    /* 8px */
}

/* First + last name, side by side — same as `LeadForm`'s `.lead-form__row`
   (12px gap, equal halves, stacked at ≤479px). Not in Figma, which has one
   full-name field. */
.data-report-form__row {
  display: flex;
  gap:     var(--spacing-3);           /* 12px */
}

.data-report-form__row > .data-report-form__field {
  flex:      1;
  min-width: 0;                        /* let the inputs shrink below their intrinsic width */
}

.data-report-form__label {
  font-size:   var(--font-size-sm);    /* 14px */
  line-height: var(--line-height-sm);  /* 20px */
  font-weight: var(--font-weight-medium);
  color:       var(--card-foreground);
}

/* Same marker as `LeadForm`'s `.lead-field__required`. Optional fields are
   simply unmarked. */
.data-report-form__required {
  color: var(--primary);
}


/* ---- Inputs ----------------------------------------------- */

/* Figma: bg #FAF6F0, 0.5px border #E5DFD5 (= --muted, NOT --border #D6CFC2 —
   the design picks the lighter of the two), radius 8, height 36. */
.data-report-form__input {
  width:         100%;
  height:        36px;
  padding:       var(--spacing-1) var(--spacing-3);   /* 4px 12px */
  background:    var(--panel-cream);
  border:        0.5px solid var(--muted);
  border-radius: var(--radius-sm);                    /* 8px */
  font-family:   inherit;
  font-size:     var(--font-size-sm);                 /* 14px */
  line-height:   var(--line-height-sm);               /* 20px */
  color:         var(--card-foreground);
  box-sizing:    border-box;
  appearance:    none;
}

.data-report-form__input::placeholder {
  color: var(--muted-foreground);
}

.data-report-form__input:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 1px;
}


/* ---- Checkboxes (6797:2196) ------------------------------- */

.data-report-form__checks {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);    /* 12px */
  max-width:      400px;               /* Figma Check box node width */
}

.data-report-form__check {
  display:     flex;
  align-items: flex-start;
  gap:         var(--spacing-3);       /* 12px */
  cursor:      pointer;
}

/* The real input stays in the DOM for semantics, keyboard and form state; the
   painted box is the sibling span. Not `display: none` — that would take it
   out of the tab order. */
.data-report-form__check > input {
  position: absolute;
  opacity:  0;
  width:    16px;
  height:   16px;
  margin:   0;
}

.data-report-form__box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           16px;
  height:          16px;
  background:      var(--card);
  border:          1px solid var(--input);
  border-radius:   4px;                /* no 4px radius token — scale starts at 8px */
  box-shadow:      0 1px 3px rgba(26, 26, 24, 0.03);   /* Figma shadow/xs */
  color:           var(--primary-foreground);
  transition:      background-color 120ms ease, border-color 120ms ease;
}

/* The checkmark only shows when checked. */
.data-report-form__box > svg {
  opacity: 0;
}

/* Figma paints the checked state #E33708. That hex is not in the repo's
   orange ramp (…-400 #F0612D, -500 #C64110 = --primary) and introducing a
   one-off brand hex is the owner's call, not a build decision — so this uses
   --primary, matching every other CTA on the site. Flagged in the spec. */
.data-report-form__check > input:checked + .data-report-form__box {
  background:   var(--primary);
  border-color: var(--primary);
}

.data-report-form__check > input:checked + .data-report-form__box > svg {
  opacity: 1;
}

.data-report-form__check > input:focus-visible + .data-report-form__box {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* 16px leading, not the 20px the type style names. Figma's Check Box rows are
   16px tall — the height of the box itself — so a single-line label keeps
   the row at the box's height. Relaxed again at ≤430px, where the demo
   label starts to wrap. */
.data-report-form__check-label {
  font-size:   var(--font-size-sm);    /* 14px */
  line-height: var(--line-height-xs);  /* 16px — matches Figma's row height */
  font-weight: var(--font-weight-medium);
  color:       var(--foreground);
}


/* ---- Notice ----------------------------------------------- */

/* Mailchimp-audience notice, the last row of the fields stack. Not in Figma.
   Same type as `LeadForm`'s `.lead-form__legal` (LeadFormSection.css), the
   line that sits in the same place on that form — copied rather than shared,
   since importing that stylesheet would pull the whole lead form into this
   component's bundle. Keep the two in step. */
.data-report-form__notice {
  margin:      0;
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: 1.125rem;                 /* 18px */
  color:       var(--muted-foreground);
  text-align:  center;
}


/* ---- Actions (6797:2199) ---------------------------------- */

.data-report-form__actions {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--spacing-4);     /* 16px */
  padding:         0 var(--spacing-6);   /* 24px */
}

/* Submit error. Figma has no state for it — it only appears after a round
   trip to Webflow, which the static frame cannot show. Sized as body copy and
   placed in the action row so the card's height only changes by the row it
   already reserves, not by a new block above the button.

   `margin-right: auto` keeps the message on the left of the row while the
   button stays pinned right, without a second flex wrapper. */
.data-report-form__error {
  margin:      0 auto 0 0;
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* `--destructive` is referenced across the repo (LeadFormSection.css) but
   never DEFINED in tokens.css — only `--opacity-destructive-10` is, at
   #EF44441A. The fallback here is that token's base colour, so this message
   renders red today and picks up the real token for free if one is ever
   added. */
.data-report-form__error {
  color: var(--destructive, #EF4444);
}


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

/* Both sections that host this card (Quote, CTA) stack at 991, and once
   stacked the card spans the column instead of stopping at the desktop
   496px — which left it floating at half width beside nothing. */
@media (max-width: 991px) {
  .data-report-form {
    max-width: none;
  }
}

/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 nodes 6853:14877 /
   6853:14964 (both form instances are identical at 402px) — see
   ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
  /* Figma: Form 346 wide, Form content y=32, Container x=32 w=282, Btn
     container y=484 with the card ending at 556 — 32px on every side, and
     32px between the last field and the button. */
  .data-report-form {
    gap:     var(--spacing-8);       /* 32px — fields → button */
    padding: var(--spacing-8) 0;     /* 32px */
  }

  .data-report-form__content,
  .data-report-form__actions {
    padding: 0 var(--spacing-8);     /* 32px */
  }

  /* Figma stretches the submit to the card's width (x=24, w=298 in a 346 card)
     rather than keeping the desktop right-aligned pill — at 402px a 199px
     button floating right reads as an afterthought. */
  .data-report-form__actions {
    justify-content: stretch;
  }

  .data-report-form__actions > * {
    flex:       1 1 auto;
    width:      100%;
    max-width:  none;
    text-align: center;
  }
}

/* Where the demo label starts to wrap: the card's content column is
   `viewport - 24 (panel gutter) - 64 (card padding)`, and “Are you interested
   in a demo of Smith.ai?” needs roughly 16 + 12 + 280px, so it wraps a little
   under 400px — and 16px leading on a two-line label is cramped. */
@media (max-width: 430px) {
  .data-report-form__check-label {
    line-height: var(--line-height-sm);   /* 20px */
  }
}

/* Same breakpoint as `LeadForm`'s name row. Stacked, the two names take the
   fields' own 24px rhythm rather than the row's 12px. */
@media (max-width: 479px) {
  .data-report-form__row {
    flex-direction: column;
    gap:            var(--spacing-6);     /* 24px */
  }
}

/* ============================================================
   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 */
}