/* /sahi/products/ipo/ — sahi.com's IPO page. */

/* ---- Hero: words on the left, the phone on its rock to the right (sahi.com's
   wide banner). Phones get the portrait crop under the words. */
.page-products-ipo .ipo-hero { padding-bottom: 0; overflow: hidden; background: linear-gradient(180deg, var(--bg) 30%, var(--brand-wash)); }
.ipo-hero__grid { display: grid; }
.ipo-hero__txt { position: relative; z-index: 1; }
.ipo-hero__jump { margin-top: clamp(20px, 2.6vw, 28px); }
.ipo-hero__art img { width: 100%; }
@media (min-width: 861px) {
  .page-products-ipo .ipo-hero { text-align: left; }
  .ipo-hero__grid > * { grid-area: 1 / 1; }
  .ipo-hero__txt { align-self: center; max-width: min(500px, 50%); padding-bottom: 7%; }
  .page-products-ipo .ipo-hero h1, .page-products-ipo .ipo-hero .lead { margin-inline: 0; }
  /* The banner is mostly empty space left of the phone; drawn wider than the column so the
     phone reaches sahi.com's size, with its blank left edge running under the words. */
  .ipo-hero__art { width: 121%; margin: -5% 0 0 -15%; }
}
@media (max-width: 860px) {
  .ipo-hero__art { margin-top: clamp(24px, 6vw, 40px); }
  .ipo-hero__art img { width: min(100%, 460px); margin-inline: auto; }
}

/* The app screens further down (From bid to listing): light or dark to match the page. */
.ipo-shot--dark { display: none; }
:root[data-theme="dark"] .ipo-shot--dark { display: block; }
:root[data-theme="dark"] .ipo-shot--light { display: none; }
.ipo-phone { width: 100%; height: auto; filter: drop-shadow(0 22px 34px rgb(0 0 0 / .18)) drop-shadow(0 4px 10px rgb(0 0 0 / .08)); }
:root[data-theme="dark"] .ipo-phone { filter: drop-shadow(0 22px 40px rgb(0 0 0 / .6)); }

/* ---- Three feature cards. sahi.com set this copy at 1.15 line height; it reads at 1.55. */
.page-products-ipo .ipo-feats { padding-top: clamp(48px, 7vw, 96px); }
.ipo-feat { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-1); }
.ipo-feat__icon { width: 32px; height: 32px; margin-bottom: 8px; }
:root[data-theme="dark"] .ipo-feat__icon { filter: invert(1); }
.ipo-feat__title { font: 500 clamp(21px, 1.8vw, 24px)/1.2 var(--sans); letter-spacing: -.01em; }
.ipo-feat p { font-size: 17px; line-height: 1.55; color: var(--ink-2); }

/* ---- Mainboard IPOs covered: words beside the bid screen, in one grey panel. */
.ipo-main__panel { padding: 0; gap: 0; align-items: stretch; }
.ipo-main__txt { align-self: center; padding: clamp(28px, 5vw, 64px); }
.ipo-main__txt .lead { margin-top: 16px; max-width: 460px; }
.ipo-main__media { align-self: end; }
.ipo-main__media img { width: 100%; }
@media (max-width: 860px) {
  .ipo-main__panel { text-align: center; }
  .ipo-main__txt { padding-bottom: 8px; }
  .ipo-main__txt .lead { margin-inline: auto; }
  .ipo-main__media img { width: min(100%, 420px); margin-inline: auto; }
}

/* ---- IPO listing (sahi.com added it in October 2026; built from its data by
   scripts/sahi-site/ipo-listing.mjs). Tabs over one table; on phones each issue is a card. */
.ipo-listing > .wrap > .h2 { margin-bottom: clamp(24px, 3.5vw, 40px); }
.ipo-list__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ipo-list__tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ipo-list__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: 500 16px/1 var(--sans); color: var(--ink-2); cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.ipo-list__tab span { min-width: 22px; padding: 3px 6px; border-radius: 999px; background: var(--surface-2); font-size: 13px; text-align: center; color: var(--ink-2); }
.ipo-list__tab:hover { border-color: var(--ink-3); color: var(--ink); }
.ipo-list__tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.ipo-list__tab[aria-selected="true"] span { background: color-mix(in srgb, var(--bg) 22%, transparent); color: var(--bg); }
.ipo-list__nojs { margin: 20px 0 10px; font: 500 20px/1.2 var(--sans); }
html.js .ipo-list__nojs { display: none; }
.ipo-list__panel:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: var(--radius-sm); }
.ipo-list__scroll { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); overflow-x: auto; }
.ipo-list__table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ipo-list__table th, .ipo-list__table td { padding: 16px 14px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.ipo-list__table thead th { padding-block: 12px; font-size: 13px; font-weight: 500; color: var(--ink-3); background: var(--bg-alt); }
.ipo-list__table tbody tr:last-child > * { border-bottom: 0; }
.ipo-list__table tbody tr { transition: background-color .15s; }
.ipo-list__table tbody tr:hover { background: var(--bg-alt); }
.ipo-list__table .ipo-list__co, .ipo-list__table tbody th { text-align: left; white-space: normal; }
.ipo-list__table td { color: var(--ink-2); }
.ipo-co { display: flex; align-items: center; gap: 12px; min-width: 220px; color: var(--ink); text-decoration: none; }
.ipo-co:hover .ipo-co__name { text-decoration: underline; text-underline-offset: 3px; }
.ipo-co__mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); font: 500 14px/1 var(--sans); color: var(--ink-2); }
.ipo-co__name { display: grid; gap: 2px; font-weight: 500; }
.ipo-co__name small { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.ipo-list__empty { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-sm); text-align: center; color: var(--ink-2); }
.ipo-list__note { margin-top: 14px; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 760px) {
  .ipo-list__all { width: 100%; }
  .ipo-list__scroll { border: 0; background: none; overflow: visible; }
  .ipo-list__table, .ipo-list__table tbody { display: block; }
  .ipo-list__table thead { display: none; }
  .ipo-list__table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 12px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
  .ipo-list__table tbody tr:hover { background: var(--surface); }
  .ipo-list__table tbody th { grid-column: 1 / -1; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
  .ipo-list__table td { display: grid; gap: 4px; padding: 0; border: 0; text-align: left; white-space: normal; color: var(--ink); font-size: 16px; }
  .ipo-list__table td::before { content: attr(data-label); font-size: 13px; color: var(--ink-3); }
  .ipo-list__table td:nth-of-type(even) { text-align: right; }
  .ipo-co { min-width: 0; }
}

/* ---- From bid to listing: three more screens of the new IPO tab (not on sahi.com).
   Phones: a row to swipe, each screen snapping into place. */
.ipo-track > .wrap > .lead { margin: 14px auto 0; max-width: 620px; }
.ipo-track__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: clamp(32px, 4.5vw, 52px) 0 0; padding: 0; list-style: none; }
.ipo-track__item { text-align: center; }
.ipo-track__item .ipo-phone { width: min(100%, 280px); margin-inline: auto; }
.ipo-track__name { margin-top: 18px; font: 500 20px/1.2 var(--sans); letter-spacing: -.01em; }
.ipo-track__item p { max-width: 300px; margin: 8px auto 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.ipo-track__note { margin-top: clamp(24px, 3vw, 32px); font-size: 14px; text-align: center; color: var(--ink-3); }
@media (max-width: 860px) {
  .ipo-track__row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(74%, 280px); overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gut)); padding: 4px var(--gut) 16px; scroll-padding-inline: var(--gut); scrollbar-width: none; }
  .ipo-track__row::-webkit-scrollbar { display: none; }
  .ipo-track__item { scroll-snap-align: start; }
}

/* ---- How IPO works. Desktop: three step tabs over one screen. Phones: a list. */
.ipo-how > .wrap > .h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.ipo-how__desk { display: none; }
.ipo-how__list { display: grid; gap: clamp(40px, 8vw, 56px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 861px) { .ipo-how__desk { display: block; } .ipo-how__list { display: none; } }
.ipo-how__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.ipo-step { display: grid; grid-template-rows: auto 1fr auto; min-height: 44px; padding: 8px 0 0; border: 0; border-radius: 4px; background: none; text-align: left; cursor: pointer; }
.ipo-step__name { font: 600 20px/1.2 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.ipo-step__text { padding: 8px 0 20px; font-size: 17px; line-height: 1.5; color: var(--ink-3); transition: color .2s; }
.ipo-step[aria-selected="true"] .ipo-step__text, .ipo-step:hover .ipo-step__text { color: var(--ink-2); }
.ipo-step__bar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.ipo-step__bar span { display: block; height: 100%; border-radius: inherit; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.ipo-step[aria-selected="true"] .ipo-step__bar span { transform: scaleX(1); }
.ipo-how__desk.is-running .ipo-step[aria-selected="true"] .ipo-step__bar span { animation: ipo-fill var(--dur, 7000ms) linear both; }
@keyframes ipo-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* The screen: the clip trims the clips' white backdrop to the phone's own outline, so the
   phone sits on the panel in either theme (sahi.com blended it, and drew the browser's
   play bar over the app's own tab bar). */
.ipo-how__stage { display: grid; place-items: center; margin-top: 24px; padding: clamp(24px, 3vw, 40px) 16px; border-radius: var(--radius); background: var(--bg-alt); }
/* Sized so the step tabs and the whole phone fit one laptop screen (sahi.com's panel was 900px tall). */
.ipo-how__video { width: clamp(240px, 19vw, 280px); height: auto; aspect-ratio: 348 / 722; clip-path: inset(.6% 0 .4% 0 round 18% / 8.6%); }
.ipo-how__item { text-align: center; }
.ipo-how__name { font: 600 20px/1.2 var(--sans); letter-spacing: -.01em; }
.ipo-how__item p { margin-top: 8px; font-size: 17px; color: var(--ink-2); }
.ipo-how__item .ipo-how__stage { margin-top: 20px; }
.ipo-how__item .ipo-how__video { width: min(72%, 280px); }

/* ---- FAQs: one rounded card per question; the last ones open with View All. */
.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: sahi.com's split-flap tiles. The real price is in the HTML;
   the flip from the old figure runs once, only with script and motion allowed
   (sahi.com printed 20, 16 and 21 until its script ran). */
.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 only ever says ₹0, ₹0 and ₹10. */
.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__cta { margin-top: clamp(28px, 4vw, 40px); }

/* sahi.css gives .btn, .arrow and .carousel__nav a display that beats the hidden attribute; on this page hidden means hidden. */
.page-products-ipo [hidden] { display: none !important; }
/* The hero's two app screens sit right of the words from 861px. */
@media (min-width: 861px) { .ipo-hero .duo { justify-self: end; align-self: center; width: min(46%, 460px); margin: 0; padding-block: 24px 56px; } }
/* The bid screen: one upright phone, whole, centred in the panel. */
.ipo-main__phone { align-self: center; padding: clamp(24px, 4vw, 48px); }
.ipo-main__phone img { display: block; width: min(250px, 70%); height: auto; margin-inline: auto; filter: drop-shadow(0 18px 34px rgb(0 0 0 / .22)); }
@media (max-width: 860px) { .ipo-main__phone { padding-top: 16px; } .ipo-main__phone img { width: min(230px, 64%); } }