/* /sahi/advantage/ai/ (AI Insights). Loads after products-options-buying.css,
   which holds the parts this page shares with its family (light hero, grey
   panels, the scroll-filled quote, FAQ, flip-tile price band). */

/* ---- Hero: centred words, three phones resting on the band's edge -------- */
.ai-hero { padding-bottom: 0; }
.ai-hero h1 { max-width: 15ch; }
.ai-hero__media { width: min(100%, 1360px); margin: clamp(36px, 5vw, 48px) auto 0; }
@media (max-width: 760px) { .ai-hero__media { width: min(100%, 360px); } }

/* ---- Analyse the market: a dashed thread through three notes, then the phone */
.ai-flow { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 24px; max-width: 980px; margin: clamp(32px, 4vw, 48px) auto 0; padding: 36px 0 48px; list-style: none; }
.ai-flow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed var(--hairline); transform: translateX(-1px); }
.ai-flow::after { content: ""; position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.ai-flow li { position: relative; z-index: 1; padding: 14px 28px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-1); }
.ai-flow li:nth-child(1) { grid-area: 1 / 1; text-align: right; }
.ai-flow li:nth-child(2) { grid-area: 2 / 2; }
.ai-flow li:nth-child(3) { grid-area: 3 / 1; text-align: right; }
.ai-flow h3 { font: 500 18px/1.5 var(--sans); letter-spacing: 0; color: var(--ink); }
.ai-flow p { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 18px); line-height: 1.5; }
@media (max-width: 760px) {
  .ai-flow { grid-template-columns: 1fr; row-gap: 32px; max-width: 340px; padding: 32px 0 40px; }
  .ai-flow li:nth-child(n) { grid-area: auto; text-align: center; padding: 16px 20px; }
}
/* The phone, cut at the band's lower edge, with its caption under it (sahi.com
   printed the caption across the phone, over the app's own text). */
/* The glow is wider than a phone screen; the band clips it so the page never scrolls sideways. */
.ai-analyse { overflow-x: clip; }
.ai-flow__fig { position: relative; margin: 0 auto; text-align: center; isolation: isolate; }
.ai-flow__fig::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 10%; width: min(1100px, 120%); height: 80%; border-radius: 50%; background: var(--bg-alt); filter: blur(60px); transform: translateX(-50%); }
.ai-flow__shot { width: min(100%, 560px); margin-inline: auto; aspect-ratio: 601 / 536; overflow: hidden; }
.ai-flow__shot img { width: 100%; }
.ai-flow__cap { display: inline-flex; margin-top: 20px; padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-1); font: 500 clamp(16px, 1.4vw, 18px)/1.4 var(--sans); color: var(--ink); }
@media (max-width: 760px) { .ai-flow__shot { width: min(100%, 320px); aspect-ratio: 640 / 700; } }

/* ---- 18 AI indicators: chips, the chosen phone, an invitation to see all -- */
.ai-ind { position: relative; padding-bottom: 0; overflow: hidden; isolation: isolate; }
/* sahi.com's faint grid behind the phone, drawn with lines instead of a 2288px SVG. */
.ai-ind::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 60%; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; background-position: center bottom; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #0F0F0F 30%, transparent 75%); mask-image: radial-gradient(ellipse 60% 80% at 50% 100%, #0F0F0F 30%, transparent 75%); }
.ai-ind .head { margin-bottom: clamp(24px, 3vw, 32px); }
.ai-ind__all { display: none; margin-top: 12px; }
.ai-ind .chiprow { justify-content: center; width: min(100%, 860px); margin-inline: auto; }
.ai-ind .chips { flex: 0 1 auto; }
.ai-ind__stage { position: relative; width: min(100%, 824px); margin: clamp(28px, 4vw, 40px) auto 0; }
.ai-ind__phone { width: min(100%, 400px); margin-inline: auto; }
.ai-ind__phone img { width: 100%; }
.ai-ind__cta { position: absolute; left: 50%; bottom: 40px; z-index: 2; display: flex; align-items: center; gap: 20px; width: max-content; max-width: calc(100% - 32px); padding: 14px 14px 14px 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-2); text-align: left; transform: translateX(-50%); }
.ai-ind__cta p { display: flex; flex-direction: column; gap: 2px; font-size: 18px; line-height: 1.3; color: var(--ink); }
.ai-ind__cta small { font-size: 13px; color: var(--ink-2); }
.ai-ind__cta .btn { flex: none; }
@media (max-width: 760px) {
  .ai-ind__all { display: inline-flex; }
  .ai-ind__cta { display: none; }
  .ai-ind__phone { width: min(100%, 288px); }
}

/* ---- Why traders use SAHI Insights: centred cards, icons on one line ------ */
.ai-why .card { align-items: center; text-align: center; }
/* The indicator band ends on the phone's edge; the shared rule that drops the top padding of a
   light band after a light band would leave the next heading touching it, so this band keeps a margin. */
.pf .ai-ind { margin-bottom: clamp(56px, 8vw, 112px); }