/* /sahi/ product pages: Futures & Options, Stocks and Commodities.
   ----------------------------------------------------------------------------
   sahi.com builds the three pages from the same parts: a light hero with a
   product shot, a feature carousel in a grey tray, grey showcase panels, an
   FAQ list with "View All", and the three split-flap price cards. Those parts
   live here, scoped under .p-product; /products/stocks and /products/commodities
   load this sheet before their own (products-stocks.css, products-commodities.css).

   What changes from sahi.com: carousel cards are never sliced through a word,
   disabled arrows look disabled, FAQ questions keep their own capitals and the
   answers are not justified, the price cards carry the real prices in the HTML
   and flip when they reach the screen, and everything has a dark theme. */

.p-product {
  --p-tray: var(--bg-alt);      /* sahi.com's 245 grey tray and panels */
  --p-media: var(--bg-soft);    /* the lighter box a screenshot sits in */
  --p-gap: 16px;
}
:root[data-theme="dark"] .p-product { --p-media: var(--surface); }

/* A band whose picture runs to its bottom edge keeps the next band's top padding
   (sahi.css folds the padding of two light bands that touch; this outranks it). */
.p-product .band--flush { padding-bottom: 0; }
.p-product .band.band--flush:not(.stage):not(.band--alt):not(.band--soft) + .band:not(.stage):not(.band--alt):not(.band--soft),
.p-product .p-hero + .band:not(.stage):not(.band--alt):not(.band--soft) { padding-top: clamp(56px, 8vw, 112px); }

/* ---- Hero: words, then the product shot standing on the band's edge ------ */
.p-hero { position: relative; overflow: hidden; padding-bottom: 0; background: linear-gradient(180deg, var(--bg) 35%, var(--bg-soft)); }
.p-hero .hero__actions { margin-top: 28px; }
.p-hero__media { display: block; margin: clamp(32px, 5vw, 48px) auto 0; }
.p-hero__media img { width: min(100%, 400px); margin-inline: auto; }
@media (min-width: 1024px) {
  .p-hero--split { padding-top: calc(var(--nav-h) + 16px); text-align: left; }
  .p-hero--split .p-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: end; gap: clamp(32px, 4vw, 64px); }
  .p-hero--split .p-hero__txt { align-self: center; padding-bottom: 72px; }
  .p-hero--split h1, .p-hero--split .lead { margin-inline: 0; }
  .p-hero--split .hero__actions { justify-content: flex-start; }
  .p-hero--split .p-hero__media { margin: 0; }
  .p-hero--split .p-hero__media img { width: 100%; }
  .p-hero--media-first .p-hero__media { order: -1; }
}

/* ---- Feature carousel in a grey tray -------------------------------------- */
.p-steps .head { margin-bottom: clamp(24px, 3vw, 40px); }
.p-tray { padding: clamp(12px, 1.4vw, 16px); border-radius: var(--radius); background: var(--p-tray); }
:root[data-theme="dark"] .p-tray { border: 1px solid var(--line); }
.p-tray .carousel__track { --slide: min(86%, 400px); gap: var(--p-gap); padding: 0; scroll-padding-inline: 0; outline-offset: 6px; border-radius: var(--radius-sm); }
/* Phones: one card and a faded peek of the next, never a hard cut through a word. */
.p-tray .carousel__track { -webkit-mask-image: linear-gradient(90deg, #0F0F0F calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #0F0F0F calc(100% - 40px), transparent); }
.p-carousel:has([data-next]:disabled) .carousel__track { -webkit-mask-image: none; mask-image: none; }
/* Wider: two whole cards (sahi.com showed one and a half, sliced mid-sentence). */
@media (min-width: 640px) {
  .p-tray .carousel__track { --slide: calc((100% - var(--p-gap)) / 2); -webkit-mask-image: none; mask-image: none; }
}
@media (min-width: 1024px) { .p-product { --p-gap: 24px; } }
.p-step { display: flex; flex-direction: column; }
.p-step__media { display: grid; place-items: center; aspect-ratio: var(--step-ratio, 4 / 3); border-radius: var(--radius-sm); background: var(--p-media); overflow: hidden; }
.p-step__media picture { display: contents; }
.p-step__media img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 639px) { .p-step__media { aspect-ratio: var(--step-ratio-sm, 1); } }
.p-step h3 { margin-top: 20px; font: 500 clamp(20px, 1.9vw, 26px)/1.2 var(--sans); letter-spacing: -.01em; }
.p-step p { margin-top: 8px; max-width: 60ch; color: var(--ink-2); font-size: clamp(15px, 1.25vw, 17px); line-height: 1.6; }
.p-carousel .carousel__nav { margin-top: 20px; }
.p-carousel .arrow:disabled { cursor: default; }
.p-product .nobr { white-space: nowrap; }

/* ---- Showcase panels: words beside a phone that stands on the panel's edge */
.p-show .panel { align-items: end; padding: clamp(32px, 5vw, 64px) clamp(24px, 6vw, 88px) 0; background: var(--p-tray); }
:root[data-theme="dark"] .p-show .panel { border: 1px solid var(--line); }
.p-show__txt { align-self: center; padding-bottom: clamp(32px, 5vw, 64px); }
.p-show__txt .lead, .p-show__txt > p { margin-top: 16px; }
.p-show__txt .dots, .p-show__txt .checks { margin-top: 20px; }
.p-show__txt .dots { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 18px); }
.p-show__txt .checks { font-weight: 500; }
.p-show__media { display: block; align-self: end; }
.p-show__media img { width: min(100%, 440px); margin-inline: auto; }
@media (max-width: 860px) {
  .p-show__txt { text-align: center; padding-bottom: 8px; }
  .p-show__txt .lead { margin-inline: auto; }
  /* The list stays a list (icon beside its words), centred as a block. */
  .p-show__txt .dots, .p-show__txt .checks { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .p-show__media img { width: min(100%, 340px); }
}

/* ---- FAQ: sahi.com's bordered cards; one open at a time ------------------- */
.p-faq .head { margin-bottom: clamp(24px, 3vw, 40px); }
.p-faq .faq { display: grid; gap: 12px; max-width: 920px; border-top: 0; }
.p-faq .faq details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); transition: border-color .2s; }
.p-faq .faq details:hover { border-color: var(--hairline); }
.p-faq .faq summary { min-height: 60px; padding: 18px 20px; border-radius: var(--radius-sm); font-size: clamp(16px, 1.3vw, 18px); }
/* A plus that becomes a minus, as on sahi.com. */
.p-faq .faq summary::after { width: 14px; height: 14px; border: 0; transform: none; background: linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat, linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat; transition: background-size .3s var(--ease); }
.p-faq .faq details[open] summary::after { transform: none; background-size: 14px 1.6px, 1.6px 0; }
.p-faq .faq .answer { padding: 0 20px 20px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.65; }
.p-faq__more { display: flex; justify-content: center; margin-top: clamp(24px, 3vw, 36px); }

/* ---- ₹0 / ₹0 / ₹10: split-flap price cards ---------------------------------
   The real price is the text in the card. With the script running and motion
   allowed, the card shows the higher figure first and one flap falls to the
   real price when the card reaches the screen (sahi.com flipped them while the
   page loaded, screens away, and sent the wrong prices in its HTML). */
.p-value .head { margin-bottom: clamp(32px, 4vw, 56px); }
.p-value .head h2 { max-width: none; }
.p-value__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); justify-content: center; gap: clamp(8px, 1.4vw, 16px); margin: 0; padding: 0; list-style: none; }
.p-value__item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.p-value__label { color: var(--ink-2); font-size: clamp(14px, 1.3vw, 17px); line-height: 1.35; }
.p-value .btn { margin-top: clamp(28px, 3.5vw, 44px); }
.flip { position: relative; width: 100%; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--p-media); overflow: hidden; perspective: 900px; color: var(--ink); font: 400 clamp(56px, 8.4vw, 120px)/1 var(--disp); letter-spacing: -.04em; }
.flip__cur { position: absolute; left: 12px; top: 10px; z-index: 4; color: var(--ink-2); font: 400 clamp(14px, 1.3vw, 18px)/1 var(--sans); letter-spacing: 0; }
.flip__num { position: absolute; inset: 0; display: grid; place-items: center; }
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); z-index: 3; height: 2px; background: var(--bg); } /* the hinge */
.flip__anim { display: none; }
html.js.motion .flip__anim { display: block; position: absolute; inset: 0; }
html.js.motion .flip__num { opacity: 0; }
.flip__half { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--p-media); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip__half > span { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; }
.flip__half--top { top: 0; transform-origin: 50% 100%; }
.flip__half--top > span { top: 0; }
.flip__half--bot { bottom: 0; transform-origin: 50% 0; }
.flip__half--bot > span { bottom: 0; }
.flip__flap-a, .flip__flap-b { z-index: 2; }
.flip__flap-b { transform: rotateX(90deg); }
.p-value__item.is-in .flip__flap-a { animation: p-flip-a .28s cubic-bezier(.55, 0, .9, .45) calc(var(--d, 0ms) + 450ms) forwards; }
.p-value__item.is-in .flip__flap-b { animation: p-flip-b .34s cubic-bezier(.15, .6, .4, 1) calc(var(--d, 0ms) + 730ms) forwards; }
@keyframes p-flip-a { to { transform: rotateX(-90deg); } }
@keyframes p-flip-b { from { transform: rotateX(90deg); } to { transform: rotateX(0deg); } }
@media (max-width: 480px) { .flip__cur { left: 9px; top: 8px; } }

/* ---- Futures & Options page -------------------------------------------------- */
/* Hero: the angled monitor on the left. Its file is half empty canvas on the
   right; that empty part is trimmed, the monitor itself is not. */
@media (min-width: 1024px) {
  .page-products-options .p-hero--split .p-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .page-products-options .p-hero__media img { aspect-ratio: 1100 / 1027; object-fit: cover; object-position: 0 100%; }
}
.page-products-options .p-steps { --step-ratio-sm: 984 / 1347; }

/* Hero monitor: sahi.com's monitor carrying the live SAHI Options Trader screen; stand fades out. */
.page-products-options .p-hero { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 70%, var(--bg) 100%); }
.page-products-options .p-hero__media img { -webkit-mask-image: linear-gradient(180deg, #0A0A0A 80%, transparent 99%); mask-image: linear-gradient(180deg, #0A0A0A 80%, transparent 99%); }
@media (min-width: 1024px) {
  .page-products-options .p-hero .wrap { --maxw: 1320px; }
  .page-products-options .p-hero--split .p-hero__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
}

/* Cards whose picture is a framed app screen (F&O, Stocks, Commodities): --app shows the top of
   the phone rising from the card's box and running under its bottom edge, like the other cards'
   pictures; --low shows its foot instead (order buttons, a bottom sheet), rising from below. */
.p-step__media--app { place-items: start center; padding-top: 7%; }
.p-step__media--app img { width: 44%; height: auto; object-fit: initial; }
@media (max-width: 639px) { .p-step__media--app img { width: 54%; } }
.p-step__media--low { position: relative; display: block; padding-top: 0; }
.p-step__media--low img { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); }

/* A panel whose picture is a framed app screen: the phone runs off the panel's foot. It is
   clipped at the foot only, so its shadow is not cut off at the sides. */
.p-show__media--app { height: clamp(400px, 36vw, 480px); clip-path: inset(-80px -80px 0 -80px); }
.p-show__media--app img { width: min(100%, 300px); margin-inline: auto; }
@media (max-width: 860px) { .p-show__media--app { height: 420px; } .p-show__media--app img { width: min(100%, 280px); } }

/* ---- The SAHI app today (owner's screenshots, 27 Oct 2026) -------------------
   Real app screens, each in an iPhone frame on a transparent background (dark
   theme, 640 x 1321). .p-shot gives them one soft shadow on all three pages. */
.p-shot { height: auto; filter: drop-shadow(0 14px 18px color-mix(in srgb, #0A0A0A 16%, transparent)) drop-shadow(0 2px 4px color-mix(in srgb, #0A0A0A 10%, transparent)); }
:root[data-theme="dark"] .p-shot { filter: drop-shadow(0 20px 32px color-mix(in srgb, #000000 55%, transparent)); }

/* "Analyse indices in real-time with SAHI AI": three phones in a fan, the AI
   summary in front, standing on the panel's edge like sahi.com's pictures. When
   the panel arrives the two behind slide out from it, once; with reduced motion
   or no script they are simply in place. */
.p-show--fan .p-fan { display: flex; justify-content: center; align-items: flex-end; width: min(100%, 520px); margin: 8px auto -15%; }
.p-show--fan .p-fan img { flex: none; }
.p-fan .p-fan__main { position: relative; z-index: 2; width: 44%; margin-inline: 0; }
.p-fan .p-fan__side { width: 36%; transform-origin: 50% 100%; transition: transform 1.1s var(--ease) .3s; }
.p-fan .p-fan__side--l { margin-right: -11%; transform: rotate(-5deg); }
.p-fan .p-fan__side--r { margin-left: -11%; transform: rotate(5deg); }
html.js.motion .p-show--fan:not(.is-in) .p-fan .p-fan__side--l { transform: translateX(34%) scale(.92); }
html.js.motion .p-show--fan:not(.is-in) .p-fan .p-fan__side--r { transform: translateX(-34%) scale(.92); }
@media (max-width: 860px) {
  .p-show--fan .p-fan { width: min(100%, 380px); margin-top: 20px; margin-bottom: -18%; }
  .p-fan .p-fan__main { width: 60%; }
  .p-fan .p-fan__side { width: 42%; }
  .p-fan .p-fan__side--l { margin-right: -22%; }
  .p-fan .p-fan__side--r { margin-left: -22%; }
}

/* ---- "Inside the F&O tab": three app screens in a row (not on sahi.com). Phones: a row to swipe,
   each screen snapping into place. */
.p-gallery .head { margin-bottom: clamp(28px, 4vw, 48px); }
.p-gallery__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.p-gallery__item { text-align: center; }
.p-gallery__item img { width: min(100%, 280px); margin-inline: auto; }
.p-gallery__item h3 { margin-top: 18px; font: 500 20px/1.25 var(--sans); letter-spacing: -.01em; }
.p-gallery__item p { max-width: 300px; margin: 8px auto 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 860px) {
  .p-gallery__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; }
  .p-gallery__row::-webkit-scrollbar { display: none; }
  .p-gallery__item { scroll-snap-align: start; }
}