/* /sahi/products/etf/ — sahi.com's ETF page. The FAQ cards and the ₹0/₹0/₹10
   tiles are the same parts as on the IPO page (products-ipo.css). */

/* ---- Hero: the phone in a hand on the left, the words on the right. Phones get
   the portrait crop under the words. */
.page-products-etf .etf-hero { padding-bottom: 0; overflow: hidden; background: linear-gradient(180deg, var(--bg) 30%, var(--brand-wash)); }
.etf-hero__grid { display: grid; }
.etf-hero__txt { position: relative; z-index: 1; }
.etf-hero__art img { width: 100%; }
@media (min-width: 861px) {
  .page-products-etf .etf-hero { text-align: left; }
  .etf-hero__grid > * { grid-area: 1 / 1; }
  /* The banner's top quarter is empty; it starts under the header so the phone sits where sahi.com has it. */
  .etf-hero__art { width: 87%; margin: calc(-1 * (var(--nav-h) + clamp(28px, 4vw, 56px))) 0 0 -9%; }
  .etf-hero__txt { justify-self: end; align-self: center; width: min(540px, 46%); padding-bottom: 4%; }
  .page-products-etf .etf-hero h1, .page-products-etf .etf-hero .lead { margin-inline: 0; }
  .page-products-etf .etf-hero .hero__actions { justify-content: flex-start; }
}
@media (max-width: 860px) {
  .etf-hero__art { margin-top: clamp(28px, 6vw, 40px); }
  .etf-hero__art img { width: min(100%, 460px); margin-inline: auto; }
}

/* ---- Find Your ETF: category chips over the app screen in a phone frame. */
.etf-find { overflow-x: clip; }
.etf-find__row { justify-content: center; margin-top: clamp(20px, 3vw, 32px); }
.etf-find__row .chips { justify-content: safe center; }
.etf-find__stage { position: relative; isolation: isolate; margin-top: clamp(24px, 3vw, 40px); }
/* sahi.com's faint floor grid behind the phone. */
.etf-find__stage::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: min(1100px, 100%); height: 75%; transform: translateX(-50%); 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 50% 60% at 50% 75%, #0F0F0F, transparent); mask-image: radial-gradient(ellipse 50% 60% at 50% 75%, #0F0F0F, transparent); }
/* The owner's screenshots of the app (public/sahi/media/app/, framed phones,
   640 x 1321) share a soft shadow; the cropping wrapper carries it so the
   shadow is not masked away with the picture's faded edge. */
.etf-shot { position: relative; filter: drop-shadow(0 18px 30px color-mix(in srgb, #0A0A0A 22%, transparent)); }
.etf-shot img { display: block; width: 100%; height: auto; }
/* The real category screen, cut at 86% and faded out over the floor grid
   (sahi.com cut its phone with a hard edge mid-list). */
.etf-find__phone { width: clamp(270px, 24vw, 330px); aspect-ratio: 640 / 1136; margin-inline: auto; overflow: hidden; }
.etf-find__phone img { -webkit-mask-image: linear-gradient(#0F0F0F 70%, transparent 86%); mask-image: linear-gradient(#0F0F0F 70%, transparent 86%); }
/* Picking a category fades its screen in (motion allowed only). */
html.js.motion .etf-find .tabpanel:not([hidden]) img { animation: etf-shot-in .4s var(--ease) both; }
@keyframes etf-shot-in { from { opacity: .3; transform: scale(.985); } to { opacity: 1; transform: none; } }
/* The screens quote prices from the day they were taken (sahi.com said nothing). */
.etf-find__note { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: balance; }

/* ---- Why choose SAHI: four feature cards; two at a time on wider screens, a list on phones. */
.etf-why__track { --slide: calc(50% - 6px); gap: 12px; padding: 8px; border-radius: var(--radius); background: var(--bg-alt); scroll-padding-inline: 8px; }
.etf-feat { display: flex; flex-direction: column; height: 100%; }
.etf-feat__media { display: block; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.etf-feat__media img { width: 100%; }
/* sahi.com's live-snapshot picture opens with a faded slice of the market-depth
   table above it; the picture is transparent, so a mask leaves only the
   snapshot card. */
.etf-feat__media--snap img { -webkit-mask-image: linear-gradient(transparent 22.5%, #0F0F0F 25%); mask-image: linear-gradient(transparent 22.5%, #0F0F0F 25%); }
/* 1-Tap execution and Full Market Depth show the real app (owner's screenshots)
   in a box the size of the other cards' pictures. The order sheet rises from
   the bottom edge; its foot fades out by row 1063 of 1321, so the test
   account's red "Insufficient funds" bar (from row 1088) never shows at any width. The depth
   screen hangs from the top edge so its five levels and Buy/Sell show, with
   the chart above fading in. */
.etf-feat__media--app { position: relative; display: flex; justify-content: center; aspect-ratio: 2000 / 1582; overflow: hidden; }
.etf-feat__media--app .etf-shot { width: 46%; flex: none; }
.etf-feat__media--order { align-items: flex-start; padding-top: 5%; }
.etf-feat__media--order img { -webkit-mask-image: linear-gradient(#0F0F0F 70%, transparent 80.5%); mask-image: linear-gradient(#0F0F0F 70%, transparent 80.5%); }
.etf-feat__media--depth { align-items: flex-end; padding-bottom: 5%; }
.etf-feat__media--depth img { -webkit-mask-image: linear-gradient(transparent 16%, #0F0F0F 32%); mask-image: linear-gradient(transparent 16%, #0F0F0F 32%); }
@media (max-width: 640px) {
  .etf-feat__media--app { aspect-ratio: 1; }
  .etf-feat__media--app .etf-shot { width: 58%; }
}
/* In the phone list the snapshot card would float in a third of empty picture;
   it is cropped to the card instead (rows 135–555 of the 624 × 610 picture). */
@media (max-width: 640px) {
  .etf-feat__media--snap img { aspect-ratio: 624 / 420; object-fit: cover; object-position: 50% 71%; -webkit-mask-image: linear-gradient(transparent 1%, #0F0F0F 4%); mask-image: linear-gradient(transparent 1%, #0F0F0F 4%); }
}
.etf-feat__body { padding: 22px 16px 20px; }
.etf-feat h3 { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--sans); letter-spacing: -.01em; }
.etf-feat p { max-width: 48ch; margin-top: 12px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.etf-why .carousel__nav { margin-top: 24px; }
@media (max-width: 640px) {
  .etf-why__track { grid-auto-flow: row; grid-auto-columns: auto; gap: 32px; overflow: visible; scroll-snap-type: none; }
}

/* ---- Make your capital work twice: the 2X picture beside the words, in one grey panel. */
.etf-pledge__panel { padding: 0; gap: 0; align-items: stretch; }
.etf-pledge__media { position: relative; display: flex; align-items: flex-end; justify-content: center; padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px) 0; }
.etf-pledge__2x { width: min(100%, 460px); }
/* The ETFs tab of the app, cut to its "Top ETFs for Pledge Benefit" list with
   each ETF's margin, stands in front of the 2X at the panel's foot. */
.etf-pledge__phone { position: absolute; right: clamp(12px, 3vw, 36px); bottom: 0; width: min(46%, 270px); aspect-ratio: 640 / 600; overflow: hidden; }
.etf-pledge__phone img { margin-top: calc(-721 / 640 * 100%); -webkit-mask-image: linear-gradient(transparent 57%, #0F0F0F 69%); mask-image: linear-gradient(transparent 57%, #0F0F0F 69%); }
@media (min-width: 861px) { .etf-pledge__2x { margin-right: 16%; } }
.etf-pledge__txt { align-self: center; padding: clamp(28px, 5vw, 64px); }
.etf-pledge__txt .lead { margin-top: 16px; }
.etf-pledge__list { gap: 18px; margin-top: 28px; }
.etf-pledge__list span { color: var(--ink-2); }
.etf-pledge__list b { font-size: 18px; font-weight: 500; color: var(--ink); }
@media (max-width: 860px) {
  .etf-pledge__media { height: min(340px, 88vw); align-items: flex-start; justify-content: flex-start; overflow: hidden; padding-bottom: 0; }
  .etf-pledge__2x { width: min(72%, 360px); }
  .etf-pledge__phone { width: min(52%, 250px); }
  .etf-pledge__txt { padding-top: 24px; text-align: center; }
  .etf-pledge__list { text-align: left; max-width: 420px; margin-inline: auto; }
}

/* ---- FAQs (as on the IPO page). */
.prod-faq > .wrap > .h2 { margin-bottom: clamp(24px, 3.5vw, 40px); }
.prod-faq__list, .prod-faq__more { display: grid; gap: 12px; }
.prod-faq__more[hidden] { display: none; }
.prod-faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .2s; }
.prod-faq details:hover, .prod-faq details[open] { border-color: var(--hairline); }
.prod-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 16px 20px; border-radius: var(--radius-sm); font: 500 17px/1.4 var(--sans); cursor: pointer; list-style: none; }
.prod-faq summary::-webkit-details-marker { display: none; }
.prod-faq summary::after { content: ""; flex: none; width: 16px; height: 16px; background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat; transition: background-size .25s var(--ease); }
.prod-faq details[open] summary::after { background-size: 16px 2px, 2px 0; }
.prod-faq .answer { padding: 0 20px 22px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.prod-faq__toggle { margin-top: clamp(24px, 3vw, 32px); }

/* ---- ₹0 / ₹0 / ₹10 split-flap tiles (as on the IPO page). */
.prod-price .lead { margin-top: 14px; }
.flips { display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 16px); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.flips > li { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 237px; min-width: 0; }
.flips__label { font-size: 17px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.flip { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; perspective: 1100px; container-type: inline-size; color: var(--ink); }
.flip__cur { position: absolute; left: 12px; top: 10px; z-index: 4; font: 400 18px/1 var(--sans); color: var(--ink-2); }
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); z-index: 3; height: 2px; background: var(--bg); }
.flip__h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--surface-2); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip__h > span { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; font: 400 56cqi/1 var(--disp); letter-spacing: -.04em; }
.flip__top { top: 0; transform-origin: 50% 100%; }
.flip__top > span { top: 0; }
.flip__bot { bottom: 0; transform-origin: 50% 0; }
.flip__bot > span { bottom: 0; }
.flip__old, .flip__fold { display: none; }
/* The figures the flip starts from live in data-n, not in the text, so the
   page text (search engines, reader view, copy) carries only the real prices. */
.flip__old > span::before, .flip__fold > span::before { content: attr(data-n); }
html.js.motion .flips.is-in .flip__old, html.js.motion .flips.is-in .flip__fold { display: block; }
html.js.motion .flips.is-in .flip__fold { animation: flip-fold .28s cubic-bezier(.55, 0, 1, .45) var(--fd, 400ms) both; }
html.js.motion .flips.is-in .flip__land { animation: flip-land .36s cubic-bezier(0, .55, .45, 1) calc(var(--fd, 400ms) + .28s) both; }
@keyframes flip-fold { from { transform: rotateX(0); } to { transform: rotateX(-90deg); } }
@keyframes flip-land { from { transform: rotateX(90deg); } to { transform: rotateX(0); } }
@media (max-width: 640px) { .flips__label { font-size: 15px; } .flip__cur { left: 8px; top: 8px; font-size: 15px; } .flip { border-radius: 12px; } }
.prod-price__note { max-width: 56ch; margin: clamp(22px, 3vw, 28px) auto 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.prod-price__cta { margin-top: clamp(24px, 3.5vw, 32px); }

/* sahi.css gives .btn, .arrow and .carousel__nav a display that beats the hidden attribute; on this page hidden means hidden. */
.page-products-etf [hidden] { display: none !important; }
/* The hero's two app screens sit left of the words from 861px. */
@media (min-width: 861px) { .etf-hero .duo { justify-self: start; align-self: center; width: min(44%, 460px); margin: 0; padding-block: 24px 56px; } }