/* AI voice agent product shot + its section — home page only, the block right
 * under FlyNumber SIP. From the "AI voice agent home page section" Claude Design
 * project (option 1b, artboard 1000x660). Same construction as sip-collage.css:
 * every design px is calc(N * var(--u)), --u = 1 artboard px from container-query
 * units, so the composition scales like an image but stays crisp text.
 *
 * Contrast with the SIP section above it (custom.css :has(.sip-collage)):
 *   SIP  = shot LEFT,  copy right, blue sheet,   slab offset down-RIGHT
 *   AI   = copy LEFT,  shot right, violet sheet, slab offset down-LEFT
 * Violet = the design system's second accent (hue 262, identity cards / chart-5).
 * Sticker shell, type and buttons are unchanged.
 *
 * Loaded from main_pages/home_page.md (like product-shots.css), not header.html:
 * only the home page uses it.
 */

/* ───────── Section layout (mirror of custom.css :has(.sip-collage)) ───────── */
html:has(.ai-collage),
body:has(.ai-collage) { overflow-x: clip; }

.content-with-image:has(.ai-collage) {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 36px 40px;
  isolation: isolate;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100vw - 48px));
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 44px;
  align-items: center;
  margin: 10px 0 36px;
}
.content-with-image:has(.ai-collage)::before,
.content-with-image:has(.ai-collage)::after {
  content: "";
  position: absolute;
  inset: 10px 6px;
  pointer-events: none;
}
.content-with-image:has(.ai-collage)::before {
  z-index: -1;
  background-color: #f5f1fd;
  background-image: radial-gradient(#cdc1e8 1.1px, transparent 1.6px);
  background-size: 18px 18px;
}
.content-with-image:has(.ai-collage)::after {
  z-index: -2;
  background-color: #e4dcf6;
  transform: translate(-14px, 14px);
}
.content-with-image:has(.ai-collage) > .text-section {
  order: 1;
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  background-color: #f9f9f9;
  border: 2px solid #333;
  box-shadow: 5px 5px 0 #333;
  padding: 20px;
  margin: 0 5px 5px 0;
}
.content-with-image:has(.ai-collage) > .text-section > p:first-child { margin-top: 0; }
.content-with-image:has(.ai-collage) > .image-section {
  order: 2;
  display: block;
  width: auto;
  max-width: none;
  min-width: 0;
  padding: 0;
  margin: 0;
}

/* Two CTAs side by side (global .button-more is display:block, margin auto). */
.aic-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.aic-ctas .button-more { margin: 0; }
@media (min-width: 721px) {
  .aic-ctas .button-more { padding: 15px 24px; }
}

/* The home title badge links here: leave headroom so the title (and the Beta
   sticker poking 15px above it) doesn't land flush against the viewport top. */
h2.section-title#ai-voice-agents { scroll-margin-top: 32px; }

/* "Beta" sticker on the section title — CSS only, so the heading text and its
   anchor link stay "Let an AI voice agent answer your calls". */
h2.section-title#ai-voice-agents::after {
  content: "Beta";
  position: absolute;
  top: -15px;
  right: -10px;
  transform: rotate(6deg);
  background: #fffad1;
  border: 2px solid #333;
  box-shadow: 3px 3px 0 #333;
  font: 700 14px/1 'Assistant', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #000;
  padding: 6px 9px;
  pointer-events: none;
}

@media (max-width: 1024px) {
  .content-with-image:has(.ai-collage) {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .content-with-image:has(.ai-collage) > .image-section {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 720px) {
  .content-with-image:has(.ai-collage) {
    width: calc(100vw - 30px);
    margin: 4px 0 28px;
    padding: 20px 16px 24px;
  }
  .content-with-image:has(.ai-collage)::after { transform: translate(-8px, 8px); }
  h2.section-title#ai-voice-agents::after { right: -4px; }
}

/* ───────── Collage tokens (panel design-system values, scoped) ───────── */
.ai-collage {
  --foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;
  --primary: 221.2 83.2% 53.3%;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji",
               "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  container-type: inline-size;
  width: 100%;
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  line-height: 1.3;
  text-align: left;
}
.ai-collage * { box-sizing: border-box; }

/* ───────── Scaling frame ───────── */
.aic-board {
  --u: calc(100cqw / 1000);
  position: relative;
  width: 100%;
  height: calc(660 * var(--u));
  overflow: visible;
}

/* ───────── Cards: the sticker shell ───────── */
.aic-card {
  position: absolute;
  background: #fff;
  border: 2px solid #333;
  border-radius: 0;
  box-shadow: 5px 5px 0 #333;
}
.aic-card--lang { left: calc(10 * var(--u));  top: calc(70 * var(--u));  width: calc(440 * var(--u)); padding: calc(24 * var(--u)) calc(34 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u)); transform: rotate(-2deg); z-index: 1; }
.aic-card--flow { left: calc(440 * var(--u)); top: calc(10 * var(--u));  width: calc(540 * var(--u)); padding: calc(30 * var(--u)); z-index: 2; transform-origin: 80% 50%; }
.aic-card--msg  { left: calc(50 * var(--u));  top: calc(400 * var(--u)); width: calc(400 * var(--u)); padding: calc(22 * var(--u)) calc(24 * var(--u)); transform: rotate(2deg); z-index: 3; }

/* ───────── Shared bits ───────── */
.aic-title { display: block; font-size: calc(17 * var(--u)); font-weight: 600; }
.aic-title--lg { font-size: calc(23 * var(--u)); letter-spacing: -0.01em; }
.aic-sub { display: block; font-size: calc(13.5 * var(--u)); line-height: 1.45; color: hsl(var(--muted-foreground)); margin-top: calc(4 * var(--u)); text-wrap: pretty; }
.aic-sub--flow { margin: calc(3 * var(--u)) 0 calc(26 * var(--u)); }
.aic-tabular { font-variant-numeric: tabular-nums; }

/* Language card */
.aic-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(16 * var(--u)); }
.aic-chip {
  display: inline-flex; align-items: center;
  height: calc(31 * var(--u)); padding: 0 calc(11 * var(--u));
  border-radius: 9999px; border: 1px solid hsl(var(--border));
  font-size: calc(13.5 * var(--u)); font-weight: 500; white-space: nowrap;
}
.aic-chip--on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); color: hsl(var(--primary)); }
.aic-chip--more { border-color: transparent; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* "How a call goes" rail — mirrors the panel's call-flow card */
.aic-step { display: flex; gap: calc(14 * var(--u)); }
.aic-rail { display: flex; flex-direction: column; align-items: center; padding-top: calc(6 * var(--u)); }
.aic-dot {
  width: calc(10 * var(--u)); height: calc(10 * var(--u)); flex-shrink: 0;
  border-radius: 9999px; border: 1.5px solid hsl(var(--muted-foreground) / 0.5);
}
.aic-step--first .aic-dot { border: 0; background: hsl(var(--primary)); }
.aic-line { flex: 1; width: 1px; background: hsl(var(--border)); margin-top: calc(6 * var(--u)); }
.aic-step-body { flex: 1; min-width: 0; padding-bottom: calc(22 * var(--u)); }
.aic-step--last .aic-step-body { padding-bottom: 0; }
.aic-step-k { display: block; font-size: calc(13.5 * var(--u)); color: hsl(var(--muted-foreground)); }
.aic-step-v { display: block; font-size: calc(16 * var(--u)); line-height: 1.4; margin-top: calc(3 * var(--u)); }
.aic-step-v--num { font-size: calc(17 * var(--u)); font-weight: 600; font-variant-numeric: tabular-nums; }
.aic-rules { display: flex; flex-direction: column; gap: calc(13 * var(--u)); margin-top: calc(11 * var(--u)); }
.aic-rule { display: flex; gap: calc(10 * var(--u)); }
.aic-rule-n { width: calc(16 * var(--u)); flex-shrink: 0; font-size: calc(13.5 * var(--u)); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.aic-rule-when { display: block; font-size: calc(15 * var(--u)); }
.aic-rule-then { display: block; font-size: calc(14 * var(--u)); font-weight: 500; margin-top: calc(2 * var(--u)); color: hsl(var(--primary)); }

/* Price sticker (not a card: no zoom) — same yellow as the footer headings */
.aic-sticker {
  position: absolute; z-index: 4;
  left: calc(815 * var(--u)); top: calc(-22 * var(--u));
  transform: rotate(5deg);
  background: #fffad1; border: 2px solid #333; box-shadow: 4px 4px 0 #333;
  padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(13 * var(--u));
  text-align: center; font-family: 'Assistant', sans-serif; color: #000;
  pointer-events: none;
}
.aic-sticker-price { display: block; font-size: calc(40 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.aic-sticker-unit { display: block; font-size: calc(16 * var(--u)); font-weight: 700; margin-top: calc(4 * var(--u)); }
.aic-sticker-note { display: block; font-size: calc(13 * var(--u)); font-weight: 500; color: #333; }

/* New-message card */
.aic-head { display: flex; align-items: center; gap: calc(11 * var(--u)); }
.aic-head .aic-title { font-size: calc(15.5 * var(--u)); }
.aic-head .aic-sub { font-size: calc(12.5 * var(--u)); margin-top: 0; }
.aic-head-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.aic-badge-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 9999px;
  background: hsl(var(--primary) / 0.08); border: 1px solid hsl(var(--primary) / 0.2); color: hsl(var(--primary));
}
.aic-badge-icon svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.aic-time { font-size: calc(12.5 * var(--u)); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.aic-field {
  margin-top: calc(14 * var(--u));
  border-radius: calc(12 * var(--u)); border: 1px solid hsl(var(--border)); background: hsl(var(--muted));
  padding: calc(13 * var(--u)) calc(15 * var(--u));
}
.aic-msg-name { display: block; font-size: calc(17 * var(--u)); font-weight: 600; }
.aic-msg-text { display: block; font-size: calc(15 * var(--u)); line-height: 1.45; margin-top: calc(3 * var(--u)); }
.aic-msg-phone {
  display: flex; align-items: center; gap: calc(7 * var(--u)); margin-top: calc(8 * var(--u));
  font-size: calc(13.5 * var(--u)); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums;
}
.aic-msg-phone svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); flex-shrink: 0; }

/* Neutralise site-wide element styles that would otherwise leak in. */
.ai-collage img, .ai-collage svg { box-shadow: none; }
.ai-collage span, .ai-collage div { background-clip: padding-box; }

/* ───────── Click to inspect (assets/js/collage-zoom.js) ─────────
   Same behaviour as .sipc-card: wide screens scale the card in place; ≤720px
   the script clones it into the body-level .collage-dialog (custom.css). */
.aic-card { transition: transform 220ms ease, box-shadow 220ms ease; cursor: zoom-in; }
.aic-card:focus-visible { outline: 3px solid #2f7de1; outline-offset: 3px; }
@media (min-width: 721px) {
  .aic-card.is-zoomed {
    transform: rotate(0deg) scale(1.35);
    z-index: 10;
    box-shadow: 7px 7px 0 #333;
    cursor: zoom-out;
  }
}
/* In the dialog: violet backdrop to match the section, and the language card
   drops the extra right padding it carries for the overlap in the collage. */
.collage-dialog:has(.ai-collage) {
  background-color: rgb(245 241 253 / 0.97);
  background-image: radial-gradient(#cdc1e8 1.1px, transparent 1.6px);
}
.collage-dialog .aic-card--lang { padding-right: calc(24 * var(--u)); }