/* HealthRecordsSection — 1:1 clone of bevel.health `.feature_horizontal-layout.cc-teal`.
   Values pulled from bevel-app.webflow CSS (desktop). Static link so gradients +
   masks survive Lightning CSS. */

.health-records {
  position: relative;
  background: #ffffff;
  /* extra top breathing room so the beige card is clearly separated from the
     MAP hand-phone block above (top is intentionally larger than bottom) */
  padding: clamp(72px, 9vw, 160px) clamp(16px, 2.4vw, 36px) clamp(20px, 3vw, 40px);
}

.health-records__inner {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  max-width: 1440px; /* bevel native card width */
  margin: 0 auto;
  aspect-ratio: 1440 / 688; /* bevel native */
  min-height: 0;
  display: flex;
  align-items: stretch;
  background-color: #f4ecdf;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(193, 161, 118, 0.22) 90%,
    rgba(193, 161, 118, 0.42) 100%
  );
}

/* Left column — 59.6324% of card (bevel `.feature_horizontal-images`).
   bevel uses overflow:visible so the icon rings fan out naturally past the
   column edge (they're caught by the section's own border-radius clip). */
.feature_horizontal-images {
  position: relative;
  flex: 0 0 59.6324%;
  width: 59.6324%;
  height: 100%;
  overflow: visible;
  border-radius: inherit;
}

.records_animation {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* ---- Concentric circles (bevel: container shifted left, % ring widths) ---- */
.records_circle-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -33%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.records_circle {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  transform-origin: center center;
  will-change: transform;
  box-shadow: inset 0 0 1.5rem #fff;
}

.records_circle--1 {
  z-index: 2;
  width: 116%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.records_circle--2 {
  width: 168%;
}

.records_circle--3 {
  width: 220%;
}

.records_circle--4 {
  width: 280%;
}

.records_circle-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Icon card: bevel's icons are a near-constant ~85px square on BOTH rings (NOT a
   % of the disk — that would make ring-2 icons oversized). Fixed size, centered
   on its polar point. The card visual lives here (icons orbit WITH the wheel, so
   the whole card — white bg + rounded corners + logo — rotates as one unit; no
   counter-rotation, matching live bevel). 8.6% of the ⌀996 ring ≈ 85px. */
.records_icon {
  position: absolute;
  width: clamp(64px, 5.9vw, 85px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 0 16px -8px rgba(0, 0, 0, 0.25);
}

.records_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* AI tool logos (RING_1) are wide wordmarks, not square app icons: fit the
   whole logo inside the white card with breathing room instead of cropping. */
.records_icon--logo img {
  object-fit: contain;
  box-sizing: border-box;
  padding: clamp(10px, 1.2vw, 15px);
}

/* ---- Phone (bevel `.records_phone` within images column) ---- */
.records_phone {
  position: absolute;
  z-index: 2;
  top: 16.6154%;
  left: 6.78175%;
  width: 46.8557%;
  max-width: 23.75rem;
  pointer-events: none;
  /* bevel: no CSS shadow — the phone's shadow is baked into the AVIF */
}

/* The transparent iPhone mockup PNG is the FRAME on top — metal bezel +
   baked-in Dynamic Island + a transparent screen hole. It defines the exact
   screen shape, so nothing has to be measured/estimated. */
.records_phone-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
}

/* The video sits BEHIND the frame and shows through its screen hole. It
   slightly OVERSCANS the hole on every side (smaller inset than the hole); the
   opaque bezel masks the overflow and the frame's rounded hole clips the screen
   corners + keeps the Dynamic Island, so the video can never poke past the
   frame and needs no border-radius of its own. */
.records_phone-screen {
  position: absolute;
  z-index: 1;
  /* inset to the mockup's measured screen hole (491x1024: ~4.28% sides,
     ~2.34% top/bottom) and clip to the hole's rounded corners (~11.6%/6.6%) so
     the video's corners can never reach the device's transparent outer corners.
     The frame PNG (z-index 2) sits on top, masking the outer edge + Dynamic Island. */
  top: 2.34%;
  left: 4.28%;
  right: 4.28%;
  bottom: 2.34%;
  overflow: hidden;
  border-radius: 11.6% / 6.6%;
  background: #000;
}
.records_phone-screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* tiny overfill so no card-bg seam shows at the rounded edge */
  transform: scale(1.03);
}

/* ---- Text (bevel `.feature_horizontal-content`) ---- */
.feature_horizontal-content {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: clamp(23.125rem, 15.536vw + 20.018rem, 34rem);
  /* bevel: heading left edge at 67.78% of card (= content-col left 62.22% +
     5rem left padding); was 2.5rem which let the heading start too far left,
     crowding the icon ring */
  padding: 2.5rem 5rem 2.5rem 5rem;
}

.health-records__heading {
  margin: 0 0 0.3em;
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
  font-size: clamp(2.594rem, 1.6rem + 2.65vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgb(34, 35, 38);
  text-wrap: balance;
}

.health-records__sub {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
  font-size: clamp(1.266rem, 1.07rem + 0.83vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.6);
}

/* ---- Responsive (bevel tablet/mobile stack) ---- */
@media (max-width: 991px) {
  .health-records__inner {
    aspect-ratio: auto;
    flex-direction: column;
    /* let the card height follow content so the in-flow phone is never clipped */
    min-height: 0;
  }

  .feature_horizontal-images {
    flex: none;
    /* drop the fixed aspect-ratio so the column grows to fit the in-flow phone */
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    min-height: 520px;
  }

  .records_circle-container {
    left: -60%;
    width: 220%;
  }

  /* phone becomes a normal in-flow centered block (no absolute overflow/clip) */
  .records_phone {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(58vw, 240px);
    max-width: 240px;
    margin: 8px auto 0;
  }

  .feature_horizontal-content {
    position: static;
    order: -1;
    width: 100%;
    padding: clamp(2.5rem, 0.714vw + 2.357rem, 3rem);
    text-align: center;
    align-items: center;
  }
}

/* ---- iPhone / phone (≤640px) — bevel.health mobile: NON-CONCENTRIC ring stack ----
   Reverse-engineered from bevel.health live at 390px. Bevel's 4 rings are NOT
   concentric: each larger ring is centred progressively LOWER (measured radii
   289/419/573/698, centres offset +58/+121/+150 below cc-1), so their TOP arcs STACK
   into a full, CLEAN ∩ canopy above the phone — while every ring's sides clip
   off-screen and its bottom tucks BEHIND the phone (z-2). That is the whole trick: a
   single CONCENTRIC ring can only be sparse-clean OR dense-wreath, never both; the
   offset stack is what makes it read full AND clean. We reproduce it on mobile with
   the same radius ratios (cc-1 116% … cc-4 280%) plus the vertical offsets (in vw so
   they scale with the ring size). Bevel mobile is STATIC; we KEEP the GSAP orbit
   (HealthRecordsSection.tsx) so all 40 logos cycle through this canopy — each ring
   spins about its OWN offset centre. `overflow:hidden` clips the side-bleed; content
   stays LEFT-aligned. Supersedes the ≤520 overrides. */
@media (max-width: 640px) {
  /* tighten outer section gutters on small screens */
  .health-records {
    padding: clamp(28px, 6vw, 56px) clamp(16px, 3vw, 36px) clamp(16px, 3vw, 28px);
  }

  /* content stays stacked on top — INHERITS position:static / order:-1 / width:100%
     from the ≤991 block; here we only re-align it LEFT + retune the gutter. */
  .feature_horizontal-content {
    text-align: left;
    align-items: flex-start;
    padding: clamp(1.25rem, 4.5vw, 1.75rem) clamp(1.25rem, 5vw, 1.75rem)
      clamp(0.375rem, 1.5vw, 0.625rem);
  }

  .health-records__heading {
    font-size: clamp(1.875rem, 7.8vw, 2.25rem);
    margin-bottom: 0.35em;
  }

  .health-records__sub {
    font-size: clamp(0.9375rem, 3.6vw, 1.0625rem);
  }

  /* media box: taller to match bevel card height (inner ≈ 686px @390). overflow
     VISIBLE so the thin white ripple arcs (cc-3/cc-4) show at the TOP like bevel;
     the lower orbit-card leak is hidden by the beige apron below (not by clipping,
     which also killed the top ripples). */
  .feature_horizontal-images {
    overflow: visible;
    height: clamp(520px, 141vw, 580px);
    min-height: 0;
  }

  /* beige apron: covers the lower band (below the phone top ≈45%) so orbit cards
     that rotate into the corners BESIDE the phone's lower half are masked. Sits
     ABOVE the rings (z-1) but BELOW the phone (z-2) so the device stays fully
     visible while the leaking cards are hidden. Gradient fades in from transparent
     so there's no seam against the card's own beige→tan gradient. */
  .feature_horizontal-images::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 54%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(244, 236, 223, 0) 0%,
      #efe4d1 20%,
      #e7d9c0 70%,
      #e0d0b4 100%
    );
  }

  .records_animation {
    overflow: visible;
  }

  /* phone: bevel mobile — bottom-anchored, top ⅔ visible; z-2 paints OVER ring
     disks + icons that orbit to phone height (logos tuck behind bezel). */
  .records_phone {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 31%);
    width: clamp(206px, 60vw, 256px);
    margin: 0;
    z-index: 2;
  }

  /* ring pivot + width tuned so the stacked TOP arcs form a clean ∩ canopy in the
     band BETWEEN the subline and the phone top — no text overlap, arc ends near
     the phone's top corners (bevel). */
  .records_circle-container {
    left: 50%;
    top: 68%;
    bottom: auto;
    width: 118%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 1;
  }

  /* NON-CONCENTRIC offsets — bevel measured translateY at 390px: +17/+75/+137/+200 */
  .records_circle--1 { margin-top: 4.4vw; z-index: 1; }
  .records_circle--2 { margin-top: 19.2vw; z-index: 1; }
  .records_circle--3 { margin-top: 35.1vw; }
  .records_circle--4 { margin-top: 51.3vw; }

  /* ripple arcs: stronger on beige so cc-3/cc-4 read like bevel's light bands */
  .records_circle {
    box-shadow: inset 0 0 clamp(18px, 5vw, 24px) rgba(255, 255, 255, 0.92);
  }

  /* icon cards */
  .records_icon {
    width: clamp(54px, 15vw, 64px);
    border-radius: 18px;
  }
}