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


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

/* ============================================================
   HybridPricingMixDiagram — Figma VvnjsG6P7tzxf0C1cey7vv, node 391:25705.
   Component notes live in HybridPricingMixDiagram.tsx.
   ============================================================ */

/* The panel: 12px radius, an inset 0.5px stroke, Figma's radial ground and
   one grain sheet under the diagram. Padding is Figma's 53px above and
   below the 731 x 374 diagram at desktop (992 x 480 panel); the block
   padding is a share of the width so it tightens with the panel. */
.mix-diagram {
  position:        relative;
  display:         flex;
  justify-content: center;
  padding:         clamp(1rem, 5.35%, 3.3125rem) clamp(0.75rem, 2.5%, 1.5rem);
  border-radius:   0.75rem;
  box-shadow:      inset 0 0 0 0.03125rem var(--opacity-neutral-20);
  overflow:        hidden;

  /* One grain sheet under the content — FlowDiagram's luminance recipe
     (grayscale so the channels move together) at full opacity. Contrast
     works backwards here: a higher value clips more of the texture to
     white, which `multiply` ignores, so the grain gets FAINTER. Measured at
     1x against Figma's R spread (sd 7.5 centre / 4.8 mid / 4.6 edge):
     contrast(3) gives 6.5 / 5.2 / 4.7, and the medians don't move. */
  --noise-opacity: 1;
  --noise-filter:  grayscale(1) contrast(3);

  /* Figma's Bg (391:25706) is a radial ellipse filling the panel. Its
     median, measured off the render with the content masked out:
     (232,239,238) at the centre, (210,231,235) halfway, (185,221,231) from
     the edge outward. `background-color` carries the edge value into the
     corners the ellipse doesn't reach. */
  background-color: #B9DDE7;
  background-image: radial-gradient(closest-side, #E8EFEE 0%, #D2E7EB 50%, #B9DDE7 100%);
}

/* Natural size, shrinking only when the padded panel is narrower. The three
   diagrams share one grid cell; the active one fades in. */
.mix-diagram__frame {
  position:  relative;
  z-index:   1;                     /* above the grain */
  display:   grid;
  width:     100%;
  max-width: 45.6875rem;            /* 731px */
}

.mix-diagram__img {
  grid-area:  1 / 1;
  display:    block;
  width:      100%;
  height:     auto;
  opacity:    0;
  transition: opacity 300ms ease;
}

.mix-diagram__img[data-active="true"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .mix-diagram__img {
    transition: none;
  }
}

/* ============================================================
   HybridPricingMixSection — Figma VvnjsG6P7tzxf0C1cey7vv, node 391:25611.
   Spec: HybridPricingMixSection.figma.md. The diagram's own CSS is
   HybridPricingMixDiagram.css.
   ============================================================ */

.hybrid-pricing-mix {
  background: var(--background);
}

/* 96px top + bottom on desktop instead of .hp-section's 128 (Frank's
   proposal, applied to this page 2026-10-19). Tablet/mobile keep
   .hp-section's 96/64, so the rule stops at 992px. */
@media (min-width: 992px) {
  .hybrid-pricing-mix {
    padding-block: 6rem;
  }
}

/* Owns the header → card gap (section-header convention). */
.hybrid-pricing-mix__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px */
}

/* One white card: diagram, presets, CTA. */
.hybrid-pricing-mix__card {
  display:        flex;
  flex-direction: column;
  border-radius:  var(--radius-lg);   /* 24px */
  background:     var(--card);
}

.hybrid-pricing-mix__visual {
  padding: 1rem;                       /* 16px */
}


/* ---- Presets (391:25627) ----------------------------------- */

.hybrid-pricing-mix__presets {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:                   1rem;          /* 16px */
  padding-inline:        1rem;          /* 16px */
}

/* Figma's cards are 418px tall: the summary + description at the top, the
   list pinned to the bottom (at least 36px below the description). */
.hybrid-pricing-mix__preset {
  display:         flex;
  flex-direction:  column;
  min-height:      26.125rem;           /* 418px */
  padding:         var(--spacing-7);    /* 28px */
  border:          0.5px solid var(--border);
  border-radius:   0.75rem;             /* 12px — no token */
  background:      var(--card);
  box-sizing:      border-box;
  color:           var(--muted-foreground);
  cursor:          pointer;
  transition:      border-color 150ms ease, color 150ms ease;
}

.hybrid-pricing-mix__preset:hover {
  border-color: var(--muted-foreground);
}

.hybrid-pricing-mix__preset[aria-checked="true"] {
  border-color: var(--foreground);
  color:        var(--foreground);
}

.hybrid-pricing-mix__preset:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

.hybrid-pricing-mix__preset-summary {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-9);     /* 36px */
}

/* `.num-pill` + the tag in `.card-body` (16/24 muted in every state). */
.hybrid-pricing-mix__preset-tag {
  display:     flex;
  align-items: center;
  gap:         0.625rem;                /* 10px */
}

/* `.num-pill` leaves the fill to its component and hard-sets the foreground
   colour; here the number follows the card (muted until selected). */
.hybrid-pricing-mix__preset-number {
  background: var(--secondary);
  color:      inherit;
}

.hybrid-pricing-mix__preset[aria-checked="true"] .hybrid-pricing-mix__preset-number {
  background: var(--background);
  color:      var(--foreground);
}

/* `.hp-subheading` (24/32, 20/28 ≤767px): name (`.fw-bold`) over "From
   $X/call". The h3's default bold is reset so only the name is bold, and
   the colour follows the card (muted until selected). */
.hybrid-pricing-mix__preset-name {
  display:        flex;
  flex-direction: column;
  font-weight:    var(--font-weight-regular);
  color:          inherit;
}

/* Accordion-only pieces: hidden while the cards sit side by side. */
.hybrid-pricing-mix__chevron,
.hybrid-pricing-mix__preset-tag-stacked {
  display: none;
}

.hybrid-pricing-mix__preset-details,
.hybrid-pricing-mix__preset-details-inner {
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.hybrid-pricing-mix__preset-body {
  margin:      0.75rem 0 0;             /* 12px under the name */
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* Pinned to the card bottom, never closer than 36px to the description. */
.hybrid-pricing-mix__preset-list {
  margin-top:  auto;
  padding-top: var(--spacing-9);        /* 36px */
}

.hybrid-pricing-mix__preset-list ul {
  margin:     0;
  padding:    0;
  list-style: none;
}

.hybrid-pricing-mix__preset-label {
  margin:        0;
  padding-block: var(--spacing-1-5);    /* 6px */
  font-size:     var(--font-size-sm);
  line-height:   var(--line-height-sm);
  color:         var(--muted-foreground);
}

.hybrid-pricing-mix__preset-bullet {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--spacing-1-5);    /* 6px */
  padding-block: var(--spacing-1-5);    /* 6px */
  font-size:     var(--font-size-sm);
  line-height:   var(--line-height-sm);
}

/* 16px check centred in a 20px box. */
.hybrid-pricing-mix__check {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           1.25rem;             /* 20px */
  height:          1.25rem;
}


/* ---- CTA (391:25742) --------------------------------------- */

.hybrid-pricing-mix__cta {
  display:         flex;
  justify-content: center;
  padding:         var(--spacing-9) 1rem 3rem;   /* 36px top, 48px bottom */
}


/* ============================================================
   Stacked (≤991px) — the presets become a single-open accordion
   under the diagram: every card collapses to its summary row and
   the selected one opens. Animated like AirPricingPlanCard's
   stacked feature list: `grid-template-rows` 0fr → 1fr + a fade, so
   opening one preset and closing the last run together, no height
   measuring. The open state is the selection itself (aria-checked).
   ============================================================ */

@media (max-width: 991px) {
  .hybrid-pricing-mix__presets {
    grid-template-columns: minmax(0, 1fr);
  }

  .hybrid-pricing-mix__preset {
    min-height: 0;
    padding:    1.25rem;                /* 20px */
  }

  /* Summary row: number · name over price · chevron. */
  .hybrid-pricing-mix__preset-summary {
    display:               grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items:           center;
    column-gap:            0.75rem;
  }

  .hybrid-pricing-mix__preset-tag-text {
    display: none;
  }

  .hybrid-pricing-mix__chevron {
    display:    flex;
    color:      var(--muted-foreground);
    transition: transform 0.2s ease;
  }

  .hybrid-pricing-mix__preset[aria-checked="true"] .hybrid-pricing-mix__chevron {
    transform: rotate(180deg);
  }

  .hybrid-pricing-mix__preset-details {
    flex:               none;
    display:            grid;
    grid-template-rows: 0fr;
    opacity:            0;
    transition:         grid-template-rows 0.28s ease, opacity 0.2s ease;
  }

  .hybrid-pricing-mix__preset[aria-checked="true"] .hybrid-pricing-mix__preset-details {
    grid-template-rows: 1fr;
    opacity:            1;
  }

  /* Clips while the row animates; the first child's margin is the
     summary → details gap, so a closed card has none. */
  .hybrid-pricing-mix__preset-details-inner {
    flex:       none;
    display:    block;
    min-height: 0;
    overflow:   hidden;
  }

  .hybrid-pricing-mix__preset-tag-stacked {
    display:     block;
    margin:      1.25rem 0 0;
    font-size:   var(--font-size-sm);
    line-height: var(--line-height-sm);
    color:       var(--muted-foreground);
  }

  .hybrid-pricing-mix__preset-body {
    margin-top: 0.5rem;
  }

  .hybrid-pricing-mix__preset-list {
    margin-top:  1rem;
    padding-top: 0;
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .hybrid-pricing-mix__preset-details,
  .hybrid-pricing-mix__chevron {
    transition: none;
  }
}

@media (max-width: 767px) {
  .hybrid-pricing-mix__content {
    gap: 3rem;
  }

  .hybrid-pricing-mix__visual {
    padding: 0.75rem;
  }

  .hybrid-pricing-mix__presets {
    padding-inline: 0.75rem;
    gap:            0.75rem;
  }

  .hybrid-pricing-mix__preset {
    padding: 1rem;
  }

  .hybrid-pricing-mix__cta {
    padding: 1.5rem 0.75rem 2rem;
  }
}