/* ============================================================
   Age assurance — page sheet for /use-cases/age-assurance/.
   Loads AFTER /styles/pages/solution.css (the shared solution
   template). Holds ONLY the age-specific additions:
   the one-row hero stats, the regulatory-coverage band
   (.aa-cover* — check-chips + official-mark badge row + built
   jurisdiction map), the built Privacy Lens diagram, and the
   discreet "Mockup" corner chip shared by the two built mocks.
   Every rule is scoped to .p-solution--age-assurance.
   Tokens only — no raw hex (E5), every selector carries .p- (E12).
   ============================================================ */

/* ---- hero PROOF: keep all three counters on ONE row (≥1024, the split
   hero). Equal thirds + wrappable caps + tight gutter; short caps do the
   rest so nothing drops to a second row at 1440 or 1280. ---- */
@media (min-width: 1024px) {
  .p-solution--age-assurance .sol-hero__stats {
    flex-wrap: nowrap;
    gap: 20px;
    align-items: start;
  }
  .p-solution--age-assurance .sol-hero__stat {
    flex: 1 1 0;
    min-width: 0;
  }
  .p-solution--age-assurance .sol-hero__stat + .sol-hero__stat {
    padding-left: 20px;
  }
  .p-solution--age-assurance .sol-hero__stat-cap {
    white-space: normal;
  }
}

/* ---- G12 · "The foundation" method cards: reserve two title lines so the
   middle card's wrapping title ("Document and government verification") doesn't
   push its body copy below its one-line siblings at 1280/1440. Equal title
   zones → the three descriptions start at the same y. Only in the 3-up grid. ---- */
@media (min-width: 768px) {
  .p-solution--age-assurance .sol-cap__name {
    min-height: calc(2 * 1.2em);
  }
}


/* ---- 4b · regulatory coverage band (dark; sits on the .p-solution black
   surface). Split: law check-chips + a built jurisdiction map; a badge row
   of official compliance marks closes it. ---- */
.p-solution--age-assurance .aa-cover {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* the band holds ONE viewport (Sofia, 2026-08-13): tighter block padding,
   head-to-grid beat trimmed, the map capped so the column heights match
   instead of centering the chips against a taller visual */
.p-solution--age-assurance .aa-cover .sol-inner { padding-block: 72px; }
.p-solution--age-assurance .aa-cover__grid {
  display: grid;
  gap: 32px;
  margin-top: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .p-solution--age-assurance .aa-cover__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 48px;
  }
}
.p-solution--age-assurance .aa-cover__chips {
  display: grid;
  gap: 10px;
}
@media (min-width: 560px) {
  .p-solution--age-assurance .aa-cover__chips { grid-template-columns: 1fr 1fr; }
}
.p-solution--age-assurance .aa-cover__chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--fs-sm);
  line-height: var(--leading-snug);
  color: rgba(255, 255, 255, 0.88);
}
.p-solution--age-assurance .aa-cover__chip svg {
  flex: none;
  color: var(--color-green-500);
}

/* the jurisdiction map — built mockup: worldmap-blue.svg base + pinned law
   tags positioned by percentage. The img fills the frame edge-to-edge so
   pin %s map straight onto it. */
.p-solution--age-assurance .aa-cover__map {
  position: relative;
  width: 100%;
  max-width: 620px;
  justify-self: end;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--color-blue-500) 12%, transparent), transparent 62%),
    rgba(255, 255, 255, 0.02);
}
.p-solution--age-assurance .aa-cover__map-base {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
}
.p-solution--age-assurance .aa-cover__pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.p-solution--age-assurance .aa-cover__pin-dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--color-blue-500);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-blue-500) 22%, transparent);
}
.p-solution--age-assurance .aa-cover__pin-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
  animation: aa-ping 2.6s ease-out infinite;
  animation-delay: calc(var(--d, 0) * 1s);
}
.p-solution--age-assurance .aa-cover__pin-tag {
  padding: 4px 9px;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-white);
  font-size: var(--fs-xs);
  line-height: 1;
}
@keyframes aa-ping {
  from { transform: scale(1); opacity: 0.6; }
  to { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .p-solution--age-assurance .aa-cover__pin-dot::after { animation: none; }
}

/* ---- 6 · Privacy Lens split (Sofia, 2026-08-07): copy + stacked cards
   LEFT, the face-capture visual a compact CARD on the RIGHT (the
   full-width media band is retired). Soft drops stripped per the
   hard-shadows-only rule. ---- */
.p-solution--age-assurance .aa-life__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 1024px) {
  .p-solution--age-assurance .aa-life__split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 64px;
    align-items: start;
  }
}
/* the shared 3-up card grid stacks inside the left column */
.p-solution--age-assurance .aa-life__split .sol-life__grid {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 32px;
}
.p-solution--age-assurance .aa-life__media {
  position: relative;
  border: 1px solid var(--color-border-light);
  border-radius: 20px;
  background: var(--color-grey-50);
  overflow: hidden;
}
.p-solution--age-assurance .aa-life__media--phone {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 48px 24px;
  height: 100%;
}

.p-solution--age-assurance .aa-life__phone {
  width: clamp(200px, 18vw, 236px);
  box-shadow: inset 0 1px 0 rgba(249, 249, 249, 0.08);
}
.p-solution--age-assurance .aa-life__media .s3-caption,
.p-solution--age-assurance .aa-life__media .s3-caption-ready {
  display: none;
}

/* the product screens' baked iOS status bar retires page-wide — the
   phone frames carry the .sol-skelbar pills instead (solution.css) */
.p-solution--age-assurance .s3-status,
.p-solution--age-assurance .idc-status { display: none; }