/* "Built different, by design" — extracted from src/pages/index.astro (Design A).
   Every custom property used below is already defined by contact.CW3nh7dV.css
   (the live site's token bundle) with identical values, so nothing is
   redefined here and no existing token is altered.

   Astro's :global() wrappers have been dropped: they only existed because
   SectionReveal rendered the cards outside the scoped stylesheet's hash. In a
   plain stylesheet the selectors are already global.

   Pure CSS only — no JS, nothing that touches the ecosystem scroll machinery. */

/* Two derived values, scoped to this section so nothing sitewide changes.
   Neither is a redefinition of a shipped token. */
.built-different {
  /* The reference runs violet (top-left) -> magenta -> orange (bottom-right).
     The shipped --gradient-brand-diagonal runs the opposite way, so the ramp
     is rebuilt here from the same three brand tokens. */
  --bento-border-gradient: linear-gradient(
    135deg,
    var(--color-violet),
    var(--color-magenta),
    var(--color-orange)
  );
  /* The translucent lift the card surfaces sit at, over the page background. */
  --bento-tint: rgba(255, 255, 255, 0.03);

  /* Card type scale — one notch below the sitewide tokens the cards used to
     inherit. Only the cards are affected; the section's own intro (eyebrow,
     heading, body) still uses the sitewide sizes.
       --bento-title     was --type-card-title  (18-20px)
       --bento-title-lg  was clamp(1.5rem, 2.4vw, 1.875rem)  (24-30px)
       --bento-body      was --type-body        (16px)
       --bento-label     was --type-label       (13-14px)  */
  --bento-title: clamp(1.0625rem, 2vw, 1.125rem);
  --bento-title-lg: clamp(1.375rem, 2.1vw, 1.625rem);
  --bento-body: 0.9375rem;
  --bento-label: clamp(0.75rem, 1.5vw, 0.8125rem);

  /* Fixed centre track shared by the model flow and its labels, so the two
     rows resolve to identical column geometry. */
  --bento-arrow-col: 24px;
}

/* The sitewide .section gives every section 96px of padding top AND bottom, so
   the ecosystem section's 96px bottom and this section's 96px top stacked into
   a 192px void between the ecosystem outro line and the "How it's built" pill.
   Dropping this section's share to zero halves that. The 96px that remains is
   entirely the ecosystem section's own padding-bottom — trimming further means
   touching that section, which this file deliberately does not do.
   .section.built-different (0,2,0) so it beats the sitewide .section (0,1,0)
   regardless of stylesheet order. */
.section.built-different {
  padding-top: 0;
}

/* Larger than the sitewide .eyebrow-pill's --type-label (13-14px). Scoped to
   this section; the ecosystem pill is bumped to the same size in
   ecosystem-fix.css so the two stay visually matched. */
.built-different .eyebrow-pill {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
}

/* Tighter side gutters than the sitewide .container (which grows to 48px of
   padding at >=900px) — scoped to this section so the rest of the page is
   untouched. The 1160px cap is what puts the three top-row cards at roughly
   the reference's card width; the sitewide --container-max is 1200px. */
.built-different .container {
  padding-inline: var(--space-5);
  max-width: 1160px;
}

.built-different__intro {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.built-different__heading {
  font-size: var(--type-section-headline);
  font-weight: 600;
  margin-top: var(--space-3);
  line-height: 1.15;
}

.built-different__body {
  margin-top: var(--space-4);
  font-size: var(--type-body);
  color: var(--color-gray-300);
}

.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-top: var(--space-8);
  /* Default stretch (not align-items: start) — with 3 cards sharing a
     row/column track, a shorter card's *box* would otherwise end above the
     track's actual bottom, adding extra visual gap before the next row on top
     of the real 24px grid gap. Stretching every card to its track's full
     height is what makes every card-to-card gap exactly the grid's own `gap`
     value, with no eyeballed margin overrides. */
}

.bento__card {
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  /* Gradient border via the double-background technique. Three layers, top to
     bottom:
       1. the translucent white lift, clipped to the padding box
       2. the page background, also clipped to the padding box
       3. the brand ramp, clipped to the border box
     Layers 1+2 together are exactly what rgba(255,255,255,.03) composites to
     over the page, while staying opaque enough to hide layer 3 everywhere
     except the 1px border ring. A genuinely translucent layer 1 would let the
     full-strength gradient through the card's whole face, not just its edge.
     See the note in the report: identical pixels here because the page
     background behind this section is a flat colour.

     `overflow: hidden` below does NOT clip any of this — overflow only clips
     descendants, never the element's own background layers. */
  background:
    linear-gradient(var(--bento-tint), var(--bento-tint)) padding-box,
    linear-gradient(var(--color-dark-bg), var(--color-dark-bg)) padding-box,
    var(--bento-border-gradient) border-box;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  overflow: hidden;
}

@media (min-width: 900px) {
  .bento {
    /* Even thirds. The reference's three top-row cards are the same width;
       the 1.3/1.2/1 split came from Design A. Rows stay content-sized. */
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
  }

  .bento__card--control {
    grid-column: 1;
    grid-row: 1;
  }

  .bento__card--purpose {
    grid-column: 2;
    grid-row: 1;
  }

  .bento__card--agents {
    grid-column: 3;
    grid-row: 1;
  }

  .bento__card--audit {
    grid-column: 1;
    grid-row: 2;
  }

  .bento__card--portable {
    grid-column: 2;
    grid-row: 2;
  }

  .bento__card--agnostic {
    grid-column: 3;
    grid-row: 2 / span 2;
  }

  .bento__card--spec {
    grid-column: 1 / span 2;
    grid-row: 3;
    /* Title on the left, description filling from roughly the middle of the
       box to the right edge, instead of stacked. */
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .bento__card--spec .bento__title {
    font-size: var(--bento-title-lg);
    flex: 0 0 55%;
  }

  .bento__card--spec .bento__desc {
    flex: 1;
    /* The reference separates the two halves with a hairline rule. */
    border-left: 1px solid var(--color-dark-border);
    padding-left: var(--space-6);
    align-self: stretch;
  }
}

.bento__title {
  font-size: var(--bento-title);
  font-weight: 700;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.bento__title--sm {
  font-size: var(--bento-title);
}

.bento__card--control .bento__title {
  font-size: var(--bento-title-lg);
}

.bento__desc {
  font-size: var(--bento-body);
  color: var(--color-gray-300);
  position: relative;
  z-index: 1;
}

/* Control card: decorative concentric-ring glow, bleeding off the card's right
   edge (the card's own overflow:hidden, set above, clips it).

   The reference has no ring decoration on this card and its title and body
   both run the card's full width, so the rings are hidden. Delete the
   `display: none` below to bring them back — but then restore the 85%/75%
   max-width clamps on .bento__card--control's title and desc too, or the
   rings will sit underneath the text. */
.bento__rings {
  display: none;
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  pointer-events: none;
}

.bento__rings::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122, 0, 255, 0.35), transparent 70%);
  filter: blur(10px);
}

.bento__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.bento__ring--1 {
  inset: 70px;
}

.bento__ring--2 {
  inset: 45px;
  border-color: rgba(255, 106, 0, 0.3);
}

.bento__ring--3 {
  inset: 15px;
  border-color: rgba(255, 27, 143, 0.35);
}

/* Purpose-built card: domain pill list. */
.bento__domain-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bento__domain-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bento-tint);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-sm);
  font-size: var(--bento-label);
  color: var(--color-gray-300);
}

.bento__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient-brand);
  flex-shrink: 0;
}

/* Agents card: A/B connector with a gradient checkmark node. */
.bento__agents {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.bento__agent-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-dark-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-gray-300);
  flex-shrink: 0;
}

.bento__agent-line {
  flex: 1;
  height: 1px;
  background: var(--color-dark-border);
}

.bento__agent-check {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.bento__agent-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--bento-label);
  color: var(--color-gray-300);
  padding-inline: 6px;
}

/* Portable card: Claude -> Any model pill flow.

   The flow and its labels are two separate rows, so aligning "Today" under
   "Claude" and "Tomorrow" under "Any model" means giving both rows the SAME
   three-column grid. The centre track has to be a fixed width rather than
   `auto` — the labels row has nothing in the middle, so an auto track would
   collapse to 0 there and the two rows would resolve to different geometry.
   Each pill and each label is then centred in its own outer track. */
.bento__model-flow,
.bento__model-labels {
  display: grid;
  grid-template-columns: 1fr var(--bento-arrow-col) 1fr;
  align-items: center;
  gap: var(--space-3);
}

.bento__model-flow > * {
  justify-self: center;
}

.bento__pill {
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid var(--color-dark-border);
  font-size: var(--bento-label);
  font-weight: 600;
  color: var(--color-gray-300);
}

.bento__pill--gradient {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
}

.bento__arrow {
  color: var(--color-orange);
  font-weight: 700;
}

.bento__model-labels {
  font-size: var(--bento-label);
  color: var(--color-gray-300);
  text-align: center;
}

/* Second label into the third track — the middle one holds the arrow. */
.bento__model-labels > span:last-child {
  grid-column: 3;
}

/* Agnostic card: stacked layer diagram. */
.bento__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.bento__stack-layer {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-dark-border);
  background: var(--bento-tint);
  font-size: var(--bento-label);
  color: var(--color-gray-300);
  text-align: center;
}

.bento__stack-layer--highlight {
  background: var(--gradient-brand-diagonal);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
}

.bento__stack-layer--highlight p {
  margin: 0;
}

.bento__stack-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.bento__stack-tags span {
  font-size: var(--font-size-xs);
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.bento__stack-arrow {
  color: var(--color-gray-300);
  font-size: var(--font-size-sm);
}

/* Audit card: mini activity-log widget. */
.bento__log {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--bento-tint);
  border: 1px solid var(--color-dark-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.bento__log-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.bento__log-time {
  font-size: var(--font-size-xs);
  color: var(--color-ink-500);
  flex-shrink: 0;
}

.bento__log-text {
  font-size: var(--bento-label);
  color: var(--color-gray-200);
  flex-grow: 1;
}

.bento__log-badge {
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
  flex-shrink: 0;
}

.bento__log-badge--pending {
  color: var(--color-orange);
  border-color: rgba(255, 106, 0, 0.4);
  background: rgba(255, 106, 0, 0.08);
}

.bento__log-badge--approved {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.08);
}

/* "Logged" is blue in the finalized design, not the green of "Approved".
   Design A reused --approved for it; this is the corrected variant. */
.bento__log-badge--logged {
  color: #60a5fa;
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(96, 165, 250, 0.08);
}

/* Below 900px the bento is already a single column (grid-template-columns:
   1fr, above), so the cards stack in source order at full width. The desktop
   treatments that assumed a wide card — the control card's text clamps and the
   ring bleed — are gone, so the only thing left to do here is tighten the card
   padding on genuinely narrow screens. */
@media (max-width: 640px) {
  .bento__card {
    padding: var(--space-4);
  }
}