/*
Theme Name: Trade246
Description: Pixel clone of the Trade246 marketing homepage.
Version: 1.0
*/

/* ---- Fonts ---- */
@font-face{font-family:"Trade246 Sans";src:url("assets/fonts/Trade246Sans-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Trade246 Serif";src:url("assets/fonts/Trade246Serif-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
/* ---- Brand green ---- */
--green-50:#e2fcef;--green-100:#d1fae5;--green-200:#a7f3d0;--green-300:#6ee7b7;
--green-400:#00d492;--green-500:#00bd7d;--green-600:#009d69;--green-700:#00ab71;
--green-800:#0a5036;--green-900:#0c452f;--green-950:#0c3c2a;
--brand-mint:#00d897;--brand-green:#00bd7d;--brand-green-deep:#009d69;--brand-forest:#0a5036;

/* ---- Neutrals ---- */
--slate-50:#f9fafc;--slate-100:#f4f6f9;--slate-200:#e2e8f1;--slate-300:#cbd5e1;
--slate-400:#8fa1b9;--slate-500:#64748b;--slate-600:#475569;--slate-700:#334155;
--slate-800:#1c293c;--slate-900:#0e172a;--slate-950:#080e1c;
--white:#ffffff;

/* ---- Market semantics ---- */
--up:#11b981;--up-soft:#f0f9f5;--up-strong:#00bd7d;
--down:#ef4444;--down-soft:#fee2e2;--down-strong:#e11d2f;
--flat:#8fa1b9;

/* ---- Content tones (bullet-panel / quicklinks — see style.css bottom section) ---- */
--tone-danger:#dc2626;--tone-danger-soft:#fee2e2;
--tone-warning:#d97706;--tone-warning-soft:#fef3c7;
--tone-info:#2563eb;--tone-info-soft:#dbeafe;

/* ---- Segment accents ---- */
--seg-nse:#1e6fff;--seg-nfo:#a231ff;--seg-forex:#00ab71;--seg-commodities:#f08500;
--seg-crypto:#fd5a00;--seg-usstocks:#f21226;--seg-indices:#00a6ca;

/* ---- Semantic aliases ---- */
--text-strong:var(--slate-900);
--text-body:var(--slate-500);
--text-muted:var(--slate-400);
--text-accent:var(--brand-green-deep);
--text-on-dark:var(--white);
--text-on-dark-muted:rgba(255,255,255,.72);
--text-on-dark-accent:var(--brand-mint);

--surface-page:var(--slate-50);
--surface-card:var(--white);
--surface-sunken:var(--slate-100);
--surface-tile:var(--green-50);
--surface-dark:var(--slate-900);
--surface-dark-soft:var(--slate-800);

--border-subtle:var(--slate-200);
--border-strong:var(--slate-300);
--border-brand:var(--brand-green-deep);
--border-on-dark:rgba(255,255,255,.12);

--link:var(--brand-green-deep);
--link-hover:var(--brand-green);

/* ---- Gradients ---- */
--grad-brand:linear-gradient(135deg,#00bb7c 0%,#009d69 100%);
--grad-hero:radial-gradient(120% 90% at 50% 40%,#0a5036 0%,#0c422d 55%,#0e172a 100%);
--grad-stats:linear-gradient(105deg,#0d442e 0%,#0b4630 50%,#0e4b38 100%);
--grad-up-fill:linear-gradient(180deg,rgba(17,185,129,.18) 0%,rgba(17,185,129,0) 100%);
--grad-down-fill:linear-gradient(180deg,rgba(239,68,68,.18) 0%,rgba(239,68,68,0) 100%);

/* ---- Type ---- */
--font-sans:"Trade246 Sans","Plus Jakarta Sans","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-serif:"Trade246 Serif","Source Serif 4",Georgia,serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

--fs-display:64px;--fs-h1:48px;--fs-h2:34px;--fs-h3:22px;--fs-h4:18px;
--fs-body-lg:19px;--fs-body:16px;--fs-sm:14px;--fs-xs:12px;--fs-stat:72px;--fs-price:38px;

--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;

--lh-tight:1.08;--lh-snug:1.2;--lh-normal:1.45;--lh-relaxed:1.65;

--ls-tight:-0.02em;--ls-normal:0;--ls-caps:0.12em;

--type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-snug) var(--font-sans);
--type-price:var(--fw-extrabold) var(--fs-price)/var(--lh-tight) var(--font-sans);
--type-caps:var(--fw-bold) var(--fs-xs)/var(--lh-normal) var(--font-sans);

/* ---- Spacing ---- */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
--gutter:24px;--section-y:96px;--section-y-lg:128px;--container:1280px;--container-pad:24px;
--card-pad:32px;--card-pad-sm:24px;--control-h:44px;--control-h-lg:56px;--tile:52px;

/* ---- Radius ---- */
--radius-xs:6px;--radius-sm:8px;--radius-md:10px;--radius-lg:14px;--radius-xl:16px;--radius-2xl:20px;--radius-pill:999px;

/* ---- Elevation ---- */
--shadow-none:none;
--shadow-hairline:0 1px 2px rgba(14,23,42,.04);
--shadow-card:0 1px 3px rgba(14,23,42,.04),0 8px 24px rgba(14,23,42,.05),inset 0 1px 0 rgba(255,255,255,.9);
--shadow-card-hover:0 4px 10px rgba(14,23,42,.07),0 24px 48px rgba(14,23,42,.12),inset 0 1px 0 rgba(255,255,255,.9);
--shadow-nav:0 1px 0 var(--border-subtle),0 6px 20px rgba(14,23,42,.04);
--shadow-panel:0 1px 3px rgba(14,23,42,.04),0 12px 32px rgba(14,23,42,.06);
--glow-brand:0 6px 20px rgba(0,189,125,.35);
--glow-brand-lg:0 10px 34px rgba(0,189,125,.45);
--glow-up:0 4px 14px rgba(17,185,129,.32);
--glow-down:0 4px 14px rgba(239,68,68,.32);
--ring-brand:0 0 0 3px rgba(0,189,125,.22);

/* ---- Motion ---- */
--dur-fast:120ms;--dur-base:200ms;--dur-slow:320ms;--dur-carousel:600ms;
--ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.45,0,.55,1);
--transition-control:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard);
--transition-card:transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard);
--lift-card:translateY(-3px);--press-scale:.98;
}

/* ---- Base ---- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{overflow-x:hidden}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body);background:var(--surface-page);overflow-x:hidden}
h1,h2,h3,h4{margin:0;color:var(--text-strong);letter-spacing:var(--ls-tight);line-height:var(--lh-snug);font-weight:var(--fw-extrabold)}
p{margin:0}
a{color:var(--link);text-decoration:none;transition:color var(--dur-base) var(--ease-standard)}
a:hover{color:var(--link-hover)}
*,*::before,*::after{box-sizing:border-box}
::selection{background:var(--green-100);color:var(--slate-900)}
.t246-num{font-variant-numeric:tabular-nums}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--container-pad)}
img{max-width:100%}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:var(--fw-bold);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:var(--transition-control),transform var(--dur-fast) var(--ease-standard);white-space:nowrap;text-decoration:none;position:relative;overflow:hidden}
.btn:active{transform:scale(var(--press-scale))}
.btn-block{width:100%}
.btn-sm{height:36px;padding:0 16px;font-size:var(--fs-sm)}
.btn-md{height:var(--control-h);padding:0 24px;font-size:var(--fs-body)}
.btn-lg{height:var(--control-h-lg);padding:0 40px;font-size:19px}

/* Glossy top-highlight sheen on solid-fill buttons (Primary/Buy/Sell) — a subtle light catch
   across the upper half instead of a flat, single-tone gradient rectangle. Very low opacity by
   design so it reads as dimensionality, not a visible stripe. */
.btn-primary::before,.btn-buy::before,.btn-sell::before{
  content:'';position:absolute;inset:0 0 50% 0;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.btn-primary{background:var(--grad-brand);color:var(--white);box-shadow:var(--glow-brand)}
.btn-primary:hover{box-shadow:var(--glow-brand-lg)}
.btn-outline{background:transparent;color:var(--brand-green-deep);border-color:var(--brand-green-deep)}
.btn-outline:hover{background:var(--green-50);box-shadow:var(--shadow-hairline)}
.btn-ghost{background:transparent;color:var(--text-strong)}
.btn-ghost:hover{color:var(--brand-green-deep)}
.btn-on-dark{background:rgba(255,255,255,.08);color:var(--white);border-color:var(--border-on-dark)}
.btn-on-dark:hover{background:rgba(255,255,255,.16)}
.btn-buy{background:var(--grad-brand);color:var(--white);box-shadow:var(--glow-up);text-transform:uppercase;letter-spacing:.04em}
.btn-buy:hover{box-shadow:var(--glow-brand-lg)}
.btn-sell{background:var(--down);color:var(--white);box-shadow:var(--glow-down);text-transform:uppercase;letter-spacing:.04em}
.btn-sell:hover{background:var(--down-strong)}

/* ---- Badge ---- */
.badge{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 18px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-semibold);white-space:nowrap}
.badge-on-dark{background:rgba(0,212,146,.12);color:var(--brand-mint);border:1px solid rgba(0,212,146,.28)}
.badge-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:currentColor}

/* ---- Card ---- */
.card{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--card-pad);box-shadow:var(--shadow-card);transition:var(--transition-card)}
.card:hover{box-shadow:var(--shadow-card-hover);transform:var(--lift-card)}
.card-flat:hover{box-shadow:var(--shadow-card);transform:none}
.card-pad-0{padding:0}
.card-pad-sm{padding:var(--card-pad-sm)}
.card-accent{position:absolute;inset:0 0 auto 0;height:4px}

/* ---- TradingView widget container ----
   NOTE: sizing for the autosize widgets (Interactive Chart, Market Overview, Forex Cross
   Rates) is handled directly in js/main.js's injectAutosizeWidget(), which matches
   TradingView's own official embed snippet structure: the widget div is sized via inline
   style calc(100% - 32px), with the required copyright bar filling the remaining 32px below
   it in normal document flow. An earlier version of this file had a ".tv-autosize" class here
   that absolutely-positioned the widget div instead — that was an incorrect assumption about
   how TradingView's script actually expects to be sized, and is why the chart kept rendering
   at some small fallback height inside a much taller container regardless of the CSS. Removed
   in favor of the corrected JS-driven inline-style approach; no CSS class is needed anymore. */

/* ---- Icon tile ----
   Was a flat solid-color square (background:var(--surface-tile), no depth at all — reads as
   a placeholder rather than a designed element). Now a soft gradient with an inset bevel
   (light catching the top-left, subtle shadow at the bottom-right) plus a faint colored ring,
   so it has real dimensionality instead of sitting perfectly flat against the card. */
.icon-tile{
  display:inline-flex;align-items:center;justify-content:center;width:var(--tile);height:var(--tile);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--green-50) 0%,#d3f6e7 100%);
  color:var(--brand-green-deep);font-size:22px;line-height:1;
  border:1px solid rgba(14,23,42,.06);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -2px 4px rgba(0,0,0,.08),0 3px 8px rgba(14,23,42,.10);
}
.icon-tile svg{width:22px;height:22px;position:relative;z-index:1}

/* ---- Segment chip ---- */
.segment-chip{height:var(--control-h);padding:0 22px;border-radius:var(--radius-md);font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-semibold);cursor:pointer;transition:var(--transition-control);background:var(--surface-card);color:var(--text-strong);border:1px solid var(--border-subtle);box-shadow:var(--shadow-hairline)}
.segment-chip:hover{box-shadow:var(--shadow-card)}
.segment-chip.active{background:var(--grad-brand);color:var(--white);border-color:transparent;box-shadow:var(--glow-brand)}

/* ---- Tab bar ---- */
.tab-bar{display:inline-flex;gap:4px}
.tab{height:38px;padding:0 14px;border:none;cursor:pointer;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:var(--fs-body);font-weight:var(--fw-medium);background:transparent;color:var(--text-body);transition:var(--transition-control)}
.tab.active{font-weight:var(--fw-semibold);background:var(--surface-sunken);color:var(--text-strong)}
.tab-bar-sm .tab{height:30px;font-size:var(--fs-sm)}

/* ---- Logo ---- */
.logo{height:64px;width:auto;display:block}
.logo-on-dark{filter:brightness(0) invert(1)}

/* ---- Section heading ---- */
.section-heading{text-align:center;max-width:760px;margin:0 auto}

/* Data tables (NSE Market Timings, Forex Sessions, Trading Holidays, etc.)
   — capped and centered like the FAQ panel instead of stretching the full
   ~1230px container, with a tinted header and row hover for desktop polish.
   .t246-table-wrap is applied by t246_block_table() in page-landing.php;
   the mobile stacked-card override lives in the 640px media query below. */
.t246-table-wrap{
  max-width:900px;margin:28px auto 0 !important;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  overflow-x:auto;overflow-y:hidden;
}
.t246-table-wrap table{margin:0}
.t246-table-wrap thead th{background:var(--surface-tile) !important;padding:14px 20px !important}
.t246-table-wrap tbody th,.t246-table-wrap tbody td{padding:14px 20px !important}
.t246-table-wrap tbody tr:last-child th,.t246-table-wrap tbody tr:last-child td{border-bottom:none !important}
.t246-table-wrap tbody tr{transition:background .15s ease}
.t246-table-wrap tbody tr:hover{background:var(--surface-sunken)}
/* FAQ blocks now render their section heading as <h2> (matching every other section, with
   the individual questions below as <h3>), but this rule still targets both h2 and h3 so any
   block that ever renders an h3 section heading keeps matching this size instead of falling
   back to the browser's default h3 size (~19px). */
.section-heading h2,.section-heading h3{font-weight:var(--fw-extrabold);line-height:var(--lh-snug);font-family:var(--font-sans);letter-spacing:var(--ls-tight);color:var(--text-strong);font-size:44px}
.section-heading h2 .accent,.section-heading h3 .accent{color:var(--text-accent)}
.section-heading p{margin-top:18px;font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--text-body)}

/* FIX (FAQ question <h3> neutral styling): the FAQ accordion previously had no heading
   element on its questions at all. Now each question is a real <h3> for SEO/structure,
   but it sits inside a flex <summary> alongside the +/- toggle, so it must inherit the
   summary's own type styling instead of the browser's bold/larger default h3 rendering
   (which would visually break the accordion row). display:inline keeps it from forcing
   a line break inside the flex summary. */
.faq-item summary h3{display:inline;font:inherit;font-weight:inherit;margin:0;color:inherit}

/* ---- Feature card ---- */
.feature-card{display:flex;flex-direction:column;gap:24px}
.feature-card h3{font:var(--type-h3);letter-spacing:-.01em}
.feature-card p{font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body)}

/* ---- Promo video section ("Smart Choice Of Smart Traders") ----
   Sits directly after the Ticker section. Background is a pale mint tint (matches the
   --green-50 family already used for .icon-tile/.surface-tile) with a very faint
   candlestick illustration tucked into the top-right corner, exactly like the provided
   design reference. The video thumbnail (incl. the play-button glyph) is a single
   pre-composited image asset — it is a static preview image, not a link/embed. */
.promo-section{position:relative;overflow:hidden;background:#F6FFF2;padding:var(--section-y) 0;isolation:isolate}
.promo-section .container{position:relative;z-index:1}
/* Background: the section's own copy of the site's shared candlestick-chart artwork
   (identical source raster to the "Thumbnail Desktop/Mobile" reference exports — same
   file, just cropped differently there), used as a full-bleed cover image behind the
   whole section rather than a small top-right accent. object-fit:cover matches the "Scale:
   Crop" behavior used for both reference instances, so the diagonal chart line and the
   bottom-left wave scale/crop responsively instead of being pinned to viewport pixels.
   object-position is the only thing that differs per breakpoint (see 640px query below),
   matching how the desktop vs. mobile reference crops reveal different parts of the same
   image rather than needing two separate assets. */
.promo-bg-decor{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:68% 78%;opacity:.4;pointer-events:none;user-select:none}
.promo-section .section-heading h2{line-height:var(--lh-tight)}

/* ---- Promo video section: left copy / right video card ----
   Two-column composition matching the approved reference. The card image itself
   (assets/promo-video-card.webp) is untouched — it's the exact pre-composited design
   asset, wrapped in a <button> only so the existing lightbox (#promo-video-modal,
   js/main.js) still opens on click; none of that click/open/close logic changed.

   .promo-heading-desktop / .promo-heading-mobile are two copies of the same headline,
   toggled with plain CSS display at the 640px breakpoint (see below) — not because the
   text differs, but because the reference uses a genuinely different line-break on
   desktop ("Smart Choice / Of Smart / Traders", left-aligned) vs. the site's existing
   2-line centered mobile break. Only one is ever in the accessibility tree at a time. */
.promo-grid{display:flex;align-items:center;gap:64px;margin-top:64px}

.promo-left{flex:0 0 460px;text-align:left}
.promo-section .promo-heading{text-align:left;max-width:none;margin:0}
.promo-heading-mobile{display:none}
.promo-section .promo-heading-desktop .accent,.promo-section .promo-heading-mobile .accent{color:#084432}
/* Desktop heading needs to read as the dominant element of the composition, not inherit
   the sitewide 44px .section-heading scale (that size was tuned for a centered heading
   with a paragraph underneath, not a headline standing next to a large video card). Scoped
   to .promo-section so no other section's heading is affected. */
.promo-section .promo-heading-desktop{font-size:64px;line-height:.98;letter-spacing:var(--ls-tight)}

.promo-annotation{display:flex;align-items:center;gap:14px;color:var(--brand-forest);pointer-events:none}
.promo-annotation span{font-family:var(--font-serif);font-style:italic;font-weight:600;font-size:22px;white-space:nowrap}
.promo-annotation--desktop{margin-top:28px}
.promo-annotation--desktop svg{width:92px;height:92px;flex:none;transform:rotate(45deg)}
.promo-annotation--bottom{display:none}

.promo-video-wrap{position:relative;flex:1 1 auto;min-width:0}

.promo-video-card{position:relative;display:block;width:100%;margin:0;padding:0;border:0;cursor:pointer;appearance:none;background:none;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-card);line-height:0;transition:var(--transition-card)}
.promo-video-card img{display:block;width:100%;height:auto;aspect-ratio:1400/796}
.promo-video-card:hover,.promo-video-card:focus-visible{transform:var(--lift-card);box-shadow:var(--shadow-card-hover)}
.promo-video-card:focus-visible{outline:2px solid var(--brand-mint);outline-offset:3px}

/* Tablet keeps the same two-column composition as desktop (never a smaller inherited
   font) — the left column and heading are set to their own explicit tablet scale so
   wrapping and the video's width both stay intentional rather than inherited-and-hoped. */
@media (max-width:900px){
  .promo-grid{gap:36px;margin-top:48px}
  .promo-left{flex:0 0 320px}
  .promo-section .promo-heading-desktop{font-size:42px}
  .promo-annotation{gap:10px}
  .promo-annotation span{font-size:18px}
  .promo-annotation--desktop{margin-top:18px}
  .promo-annotation--desktop svg{width:64px;height:64px}
}

@media (max-width:640px){
  .promo-grid{flex-direction:column;align-items:stretch;gap:0;margin-top:12px;margin-bottom:48px}
  .promo-left{flex-basis:auto;text-align:center}
  .promo-section .promo-heading{text-align:center}
  .promo-heading-desktop{display:none}
  .promo-heading-mobile{display:block}
  /* Mobile heading also needs to beat the sitewide 26px mobile scale (set with !important
     two breakpoints down in the shared rules) — same reasoning as the desktop override
     above, just matched against the mobile reference instead. */
  .promo-section .promo-heading-mobile{font-size:32px !important;line-height:1.15 !important}
  .promo-annotation--desktop{display:none}

  /* Below 640px this reverts to the site's original mobile treatment: heading centered,
     video card full-width beneath it, with a "Watch to know why" callout above AND below
     the card (matching the approved mobile reference) instead of the single desktop one.
     Both callouts are positioned with top/right/bottom/left against .promo-video-wrap
     (position:relative, sized exactly to the card — see above), never against the
     viewport, so the offsets below stay correct as the card's own width changes across
     mobile breakpoints instead of only working at one screen size. */
  .promo-video-wrap{margin-top:44px}
  .promo-annotation{gap:8px}
  .promo-annotation--bottom{display:flex;position:absolute;z-index:2;bottom:-46px;left:0}
  .promo-annotation--bottom svg{width:34px;height:34px;flex:none}
  .promo-annotation span{font-size:15px}
  .promo-video-card{border-radius:var(--radius-lg)}
}

@media (max-width:480px){
  .promo-section .promo-heading-mobile{font-size:28px !important}
  .promo-annotation span{font-size:14px}
}

/* ---- Video modal (lightbox) ---- */
.video-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px}
.video-modal[hidden]{display:none}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(6,15,12,.78);backdrop-filter:blur(3px);animation:t246-fade .18s var(--ease-out)}
.video-modal-dialog{position:relative;z-index:1;width:100%;max-width:960px;animation:t246-pop .22s var(--ease-out)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;background:#000;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.video-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Mobile plays a vertically-shot video (YouTube Short) instead of the desktop one
   letterboxed down, so the modal box itself switches to a 9:16 portrait shape — driven by
   [data-orientation] which js/main.js sets right before assigning the iframe src. Height is
   the fixed dimension here (not width), so aspect-ratio derives a sensible width from it
   instead of the reverse, which is what keeps this from overflowing short phone viewports. */
.video-modal-frame[data-orientation="vertical"]{width:auto;height:min(80vh,640px);max-width:100%;aspect-ratio:9/16;margin:0 auto}
.video-modal-close{position:absolute;top:-46px;right:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition-control)}
.video-modal-close:hover{background:rgba(255,255,255,.18)}
@media (max-width:640px){.video-modal-close{top:-42px;right:0}}
@keyframes t246-fade{from{opacity:0}to{opacity:1}}
@keyframes t246-pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ---- Segment card ---- */
.segment-card{text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;border-radius:var(--radius-2xl);padding:24px 20px 22px}
.segment-card .icon-tile{width:52px;height:52px;margin-top:6px}
.segment-card h3{font:var(--fw-bold) var(--fs-h4)/1.3 var(--font-sans)}
.segment-card .subtitle{font-size:var(--fs-sm);color:var(--text-muted);margin-top:4px}
.segment-card p{font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--text-body)}
.segment-card .cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:var(--fw-bold)}

/* ---- Stat block ---- */
.stat-block{text-align:center}
.stat-block .value{font:var(--fw-extrabold) var(--fs-stat)/var(--lh-tight) var(--font-sans);letter-spacing:-.03em;color:var(--white)}
.stat-block .label{margin-top:10px;font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-on-dark-accent)}

/* ---- Price card ---- */
.price-card{display:flex;flex-direction:column;gap:16px}
.price-card .head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.price-card .symbol{font:var(--fw-bold) var(--fs-h4)/1.25 var(--font-sans);color:var(--text-strong);letter-spacing:-.01em}
.price-card .name{font-size:var(--fs-sm);color:var(--text-muted);margin-top:2px}
.price-card .trend{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--radius-sm);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,0,0,.06)}
.price-card .trend.up{background:linear-gradient(160deg,var(--up-soft) 0%,#dcf5e9 100%);color:var(--up)}
.price-card .trend.down{background:linear-gradient(160deg,var(--down-soft) 0%,#fed7d7 100%);color:var(--down)}
.price-card .price{font:var(--type-price);color:var(--text-strong);letter-spacing:-.02em}
.price-card .change-row{display:flex;align-items:center;gap:10px;margin-top:8px}
.price-card .change{font-size:var(--fs-body);font-weight:var(--fw-semibold)}
.price-card .change.up{color:var(--up)}
.price-card .change.down{color:var(--down)}
.price-card .actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---- Change pill ---- */
.change-pill{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.change-pill.up{background:var(--up-soft);color:var(--up)}
.change-pill.down{background:var(--down-soft);color:var(--down)}

/* ---- Quote row ---- */
.quote-row{display:flex;align-items:center;gap:14px;padding:14px 20px;cursor:pointer;border-bottom:1px solid var(--border-subtle);transition:background-color var(--dur-base) var(--ease-standard)}
.quote-row:hover{background:var(--surface-sunken)}
.quote-row.selected{background:#dbeafe}
.quote-row:last-child{border-bottom:none}
.quote-row .info{flex:1;min-width:0}
.quote-row .symbol{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-strong)}
.quote-row .pair{font-size:var(--fs-sm);color:var(--text-muted)}
.quote-row .price{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-strong)}
.quote-row .delta{width:92px;text-align:right;font-size:var(--fs-sm);font-weight:var(--fw-semibold);line-height:1.35}
.quote-row .delta.up{color:var(--up)}
.quote-row .delta.down{color:var(--down)}

/* ---- Ticker ---- */
.ticker{overflow:hidden;background:var(--surface-dark);border-top:1px solid var(--border-on-dark);border-bottom:1px solid var(--border-on-dark);height:52px;display:flex;align-items:center}
.ticker-track{display:flex;align-items:center;animation:t246Ticker 42s linear infinite}
@keyframes t246Ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{display:flex;align-items:center;gap:10px;padding:0 24px;border-right:1px solid var(--border-on-dark);white-space:nowrap}
.ticker-item .label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--white)}
.ticker-item .price,.ticker-item .change{font-size:var(--fs-sm)}
.ticker-item.up .price,.ticker-item.up .change{color:var(--up)}
.ticker-item.down .price,.ticker-item.down .change{color:var(--down)}

/* ---- Site header ---- */
.site-header{position:sticky;top:0;z-index:20;height:72px;display:flex;align-items:center;background:rgba(248,250,249,.92);backdrop-filter:blur(12px);box-shadow:var(--shadow-nav)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:32px;width:100%}
.site-header nav{display:flex;gap:36px;margin:0 auto}
.site-header nav a{font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-strong)}
.site-header nav a.active{font-weight:var(--fw-semibold);color:var(--brand-green-deep)}
.site-header .actions{display:flex;gap:12px}

/* ---- Footer ---- */
.site-footer{background:var(--surface-dark);color:var(--text-on-dark-muted)}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:40px;padding:72px 24px 56px}
.site-footer .brand p{margin-top:22px;font-size:var(--fs-body);line-height:var(--lh-relaxed);max-width:320px}
.site-footer .brand .email{margin-top:22px;display:inline-flex;align-items:center;gap:10px;color:var(--white);font-size:var(--fs-body)}
.site-footer .brand .email svg{color:var(--brand-mint)}
.site-footer .socials{display:flex;gap:12px;margin-top:26px}
.site-footer .socials a{width:40px;height:40px;border-radius:var(--radius-pill);background:var(--surface-dark-soft);display:inline-flex;align-items:center;justify-content:center;color:var(--white)}
.site-footer h4{font:var(--type-caps);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--white)}
.site-footer ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.site-footer ul a{color:var(--text-on-dark-muted);font-size:var(--fs-body)}
.site-footer .risk{border-top:1px solid var(--border-on-dark);padding:28px 24px;font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:rgba(255,255,255,.5)}
.site-footer .risk strong{color:var(--white)}
.site-footer .bottom{border-top:1px solid var(--border-on-dark);padding:22px 24px;display:flex;justify-content:space-between;font-size:var(--fs-sm);color:rgba(255,255,255,.4)}

/* ---- WhatsApp FAB ---- */
.whatsapp-fab{position:fixed;right:28px;bottom:28px;z-index:30;width:62px;height:62px;border-radius:var(--radius-pill);background:#25d366;display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 6px rgba(37,211,102,.18),0 10px 30px rgba(0,0,0,.18)}

/* ---- Bullet panel (card-wrapped bullet lists) ----
   Opt-in via 'panel'=>true on a 'bullets' block in landing-content.php
   (t246_block_bullets() in page-landing.php). Used on Risk Disclosure and
   Refund Policy so long lists of sub-points read as a single elevated card
   — matching the FAQ panel and feature-card visual language — instead of a
   plain bare <ul>. Every other page's bullets blocks are unaffected. */
.bullet-panel{
  list-style:none;padding:0;margin:20px auto 0;max-width:760px;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;
}
.bullet-panel li{
  position:relative;display:flex;align-items:flex-start;gap:16px;
  padding:20px 26px;border-bottom:1px solid var(--border-subtle);
  font-size:var(--fs-body);line-height:var(--lh-relaxed);color:var(--text-body);
}
.bullet-panel li:last-child{border-bottom:none}
.bullet-panel li::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--grad-brand);
}
.bullet-panel li .bp-icon{
  flex:none;width:26px;height:26px;border-radius:99px;background:var(--grad-brand);
  display:inline-flex;align-items:center;justify-content:center;color:var(--white);
  margin-top:2px;
}
.bullet-panel li .bp-icon svg{width:14px;height:14px}
@media (max-width: 640px){
  .bullet-panel li{padding:16px 18px;gap:12px}
}

/* ---- Bullet panel tones ----
   Opt-in via 'tone'=>'danger'|'warning'|'info' on a panel'd 'bullets' block
   (t246_block_bullets() in page-landing.php). Swaps the left accent bar +
   icon badge color (and the icon glyph itself — see t246_icons) so a list of
   prohibited actions or margin/liquidation risk doesn't wear the same green
   "approved" checkmark as a neutral procedural fact. Leaving 'tone' unset
   keeps the original brand-green treatment exactly as before. */
.bullet-panel--danger li::before{background:var(--tone-danger)}
.bullet-panel--danger li .bp-icon{background:var(--tone-danger)}
.bullet-panel--warning li::before{background:var(--tone-warning)}
.bullet-panel--warning li .bp-icon{background:var(--tone-warning)}
.bullet-panel--info li::before{background:var(--tone-info)}
.bullet-panel--info li .bp-icon{background:var(--tone-info)}

/* ---- Quicklinks (jump-to-section chip row) ----
   Rendered by t246_block_quicklinks() right after a 'hero' block on long
   enumerative pages (Terms & Conditions, Risk Disclosure). Floats over the
   hero's bottom edge like the stat/quote panels already do elsewhere on the
   site, using the same card elevation as .bullet-panel/.card so it reads as
   part of the same system rather than a bolted-on widget. */
.quicklinks{margin-top:-34px;position:relative;z-index:2;padding:0 24px}
.quicklinks-panel{
  max-width:900px;margin:0 auto;padding:18px 22px;
  background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-card);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.quicklinks-label{
  font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);
  color:var(--text-muted);margin-right:2px;white-space:nowrap;
}
.quicklink{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-strong);
  background:var(--surface-page);border:1px solid var(--border-subtle);
  padding:7px 14px;border-radius:var(--radius-pill);
  transition:var(--transition-control);
}
.quicklink:hover{background:var(--surface-sunken);color:var(--text-strong);box-shadow:var(--shadow-hairline)}
.quicklink-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--brand-green-deep)}
.quicklink--danger .quicklink-dot{background:var(--tone-danger)}
.quicklink--warning .quicklink-dot{background:var(--tone-warning)}
.quicklink--info .quicklink-dot{background:var(--tone-info)}
@media (max-width: 640px){
  .quicklinks{margin-top:-22px;padding:0 16px}
  .quicklinks-panel{padding:14px 16px;gap:8px}
}

/* ---- SEO Landing Page hero (used by page-landing.php t246_block_hero) ---- */
.lp-hero{background:var(--grad-hero);padding:88px 24px 72px}
.lp-hero-h1{font:800 46px/1.15 var(--font-sans);letter-spacing:-.02em;color:#fff;margin:0}
.lp-hero-body{margin-top:22px;font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--text-on-dark-muted)}

/* ---- Hero ---- */
.hero{background:var(--grad-hero);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    radial-gradient(42% 38% at 84% 14%,rgba(0,212,146,.20),transparent 70%),
    radial-gradient(34% 30% at 6% 88%,rgba(0,212,146,.12),transparent 70%);
  background-size:56px 56px,56px 56px,100% 100%,100% 100%;
  -webkit-mask-image:radial-gradient(85% 65% at 62% 32%,#000 45%,transparent 92%);
  mask-image:radial-gradient(85% 65% at 62% 32%,#000 45%,transparent 92%)}
.hero-slides{position:relative;height:700px;z-index:1;display:flex;flex-direction:column;justify-content:center}
.hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px);transition:opacity var(--dur-carousel) var(--ease-standard),transform var(--dur-carousel) var(--ease-standard),visibility 0s var(--dur-carousel)}
.hero-slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity var(--dur-carousel) var(--ease-standard),transform var(--dur-carousel) var(--ease-standard),visibility 0s}
/* FIX (homepage hero size undefined at desktop): previously this had no base rule at all —
   only the two @media overrides below existed, relying entirely on a hardcoded inline
   "font:800 62px" duplicated on every slide's <h1>. Centralizing it here means the desktop
   size only has to live in one place, matching how .lp-hero-h1 already works. */
.hero-slide h1{font:800 62px/1.06 var(--font-sans);letter-spacing:-.03em;color:#fff;margin:0}
.hero-heading-mobile{display:none}
.hero-visual{position:absolute;inset:0;max-width:var(--container);margin:0 auto;pointer-events:none}
.hero-person{position:absolute;right:12.29%;top:11.26%;height:97.34%;width:auto;max-width:none;z-index:1;filter:drop-shadow(0 24px 32px rgba(0,0,0,.35))}

@media (min-width: 901px){
  .hero-person{height:106% !important;top:7% !important}
  .hero-visual .mini-quote:nth-of-type(1){left:43% !important}
}
/* FIX: the headline was a fixed 62px at every width from 901px up (only ≤900px had its own
   smaller mobile size) — at 901-1279px that leaves no real gap between the text column and
   the photo, which is what forced NIFTY 50 / EUR/USD to either sit on the model or get
   hidden. Shrinking the headline and photo slightly here (matching how every other section's
   heading already scales down at this breakpoint) opens up enough room to reposition both
   cards cleanly instead — nothing needs to disappear. */
@media (min-width: 901px) and (max-width: 1279px){
  .hero-slide h1{font-size:46px !important}
  .hero-person{height:96% !important;top:12% !important}
  .hero-visual .mini-quote{width:145px;padding:9px 10px}
  .hero-visual .mini-quote .price{font-size:17px}
  .hero-visual .mini-quote:nth-of-type(1){left:38% !important;top:24% !important}
  .hero-visual .mini-quote:nth-of-type(3){left:49% !important}
}

.mini-quote{z-index:2;width:191px;padding:14px 16px;border-radius:var(--radius-lg);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.mini-quote .label{font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.5);font-weight:600}
.mini-quote .price{font:700 22px/1.2 var(--font-sans);color:#fff;margin-top:4px}
.mini-quote .delta{font-size:12px;font-weight:600;margin-top:2px}
.mini-quote .delta.up{color:var(--brand-mint)}
.mini-quote .delta.down{color:var(--down)}
.stats-photo{position:relative;height:700px;max-width:var(--container);margin:0 auto}
.stats-photo-person{position:absolute;left:34.06%;top:10.11%;height:104.67%;width:auto;max-width:none;z-index:1;filter:drop-shadow(0 24px 32px rgba(0,0,0,.35))}
.stat-block-photo{position:absolute;z-index:2;text-align:left}
.stat-block-photo .value{font:var(--fw-extrabold) 48px/1.1 var(--font-sans);letter-spacing:-.03em;color:var(--white)}
.stat-block-photo .label{margin-top:8px;font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-on-dark-accent)}
.mini-quote .row{display:flex;gap:6px;margin-top:10px}
.mini-quote .row span{flex:1;text-align:center;padding:5px 0;border-radius:6px;color:#fff;font:700 10px var(--font-sans);letter-spacing:.06em}
.mini-quote .row .buy{background:var(--grad-brand)}
.mini-quote .row .sell{background:var(--down)}
/* ---- Logo (inline SVG mark + wordmark) ---- */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{flex:none;display:block}
.logo-text{font-family:var(--font-sans);font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--text-strong)}
.logo-text .logo-accent{color:var(--brand-green-deep)}
.logo-on-dark .logo-text{color:#fff}
.logo-on-dark .logo-text .logo-accent{color:var(--brand-mint)}

/* ---- Smooth scroll + anchor offset for sticky header ---- */
html{scroll-behavior:smooth}
#home,#markets,#features{scroll-margin-top:72px}

/* ---- Mobile menu / hamburger ---- */
.hamburger{display:none;background:none;border:none;padding:8px;cursor:pointer;color:var(--text-strong)}
.hamburger svg{display:block}
/* Wraps the hamburger on its own so it still sits at the far right of the header (mirrors
   the desktop logo-left/actions-right split): hidden on desktop, shown at the same
   ≤1023px breakpoint where .actions-desktop already gets hidden below. Login/Register
   moved out of the header entirely on mobile — see .mobile-floating-actions — so this
   wrapper only holds the hamburger now, but stays a wrapper in case something else
   (a cart icon, a language switch, etc.) needs to sit alongside it later. */
.header-mobile-actions{display:none;align-items:center;gap:10px}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:16px 24px 24px;background:var(--white);border-top:1px solid var(--border-subtle);box-shadow:var(--shadow-nav);position:absolute;top:100%;left:0;right:0;width:100%;box-sizing:border-box}
.mobile-menu a{padding:12px 8px;font-size:var(--fs-body);font-weight:var(--fw-medium);color:var(--text-strong);border-radius:var(--radius-sm)}
.mobile-menu a:hover{background:var(--surface-sunken)}
.mobile-actions{display:flex;gap:12px;margin-top:12px}
.mobile-actions .btn{flex:1;text-align:center}
.site-header.menu-open .mobile-menu{display:flex}

/* ---- Floating Sign Up / Login bar (mobile only) ----
   Fixed to the bottom of the viewport instead of living in the header, which is where the
   equivalent Login button sat before — freed up header space and matches the reference's
   fixed bottom action-bar pattern. env(safe-area-inset-bottom) keeps it clear of the home
   indicator on notched iPhones; z-index sits below the video lightbox (200) but above
   normal page content. Hidden entirely above the 640px breakpoint where the header's own
   Login/Register pair is already visible instead. */
.mobile-floating-actions{display:none}
@media (max-width:640px){
  .mobile-floating-actions{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:150;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--white);border-top:1px solid var(--border-subtle);
    box-shadow:0 -8px 24px rgba(15,23,42,.08);
  }
  .mobile-floating-actions .btn{flex:1;text-align:center;height:54px;font-size:16px}
  /* Reserve space at the bottom of the page so the fixed bar never covers footer content */
  body{padding-bottom:76px}
}

/* ---- Responsive breakpoints ---- */
@media (max-width: 1023px){
  .site-header .nav-desktop,.site-header .actions-desktop{display:none !important}
  .hamburger{display:inline-flex !important;align-items:center;justify-content:center}
  .header-mobile-actions{display:flex !important}

  /* Tablet: scale down landing-page type + buttons, which were previously fixed at desktop size */
  :root{--section-y:64px}
  .lp-hero{padding:56px 20px 48px}
  .lp-hero-h1{font-size:34px}
  .section-heading h2,.section-heading h3{font-size:32px !important}
  .stat-block .value{font-size:52px !important}
  .btn-lg{height:48px;padding:0 28px;font-size:17px}
  .btn-md{height:40px;padding:0 20px}
}
@media (min-width: 1024px){
  .mobile-menu{display:none !important}
}

@media (max-width: 900px){
  .hero-slides{height:auto}
  .hero-slide{position:relative !important;opacity:1 !important;pointer-events:auto !important;transform:none !important;display:none}
  .hero-slide.active{display:block}
  .hero-heading-desktop{display:none}
  .hero-heading-mobile{display:block}
  .hero-slide h1{font-size:26px !important;line-height:1.22 !important;margin-top:14px !important}
  .hero-lede{margin-top:12px !important;font-size:14px !important;line-height:1.45 !important}
  .hero-cta-row{margin-top:18px !important;flex-direction:column !important;align-items:flex-start !important;gap:10px !important}
  .hero-cta-row .btn{width:150px}
  /* Reference composition (exact Figma measurements, 430×473 mobile frame): text lives in a
     narrower left column so it never reaches under the model; the model overlays from the
     right edge spanning nearly the full hero height, deliberately bleeding past the right
     edge (clipped by hero-visual's overflow); the 4 cards sit in a row near the bottom, in
     front of the model.
     Height is intentionally NOT a fixed aspect-ratio — text needs proportionally more height
     as it wraps more at narrower widths, so a fixed ratio box overflows at the low end.
     Instead .container reserves real space below itself (padding-bottom) for the cards, so
     the hero is always exactly as tall as "the text needs" + "room for the cards row",
     whatever that turns out to be at a given width. The model then spans top→bottom of
     that actual space via top+bottom (no explicit height), so it naturally fills whatever
     room exists rather than assuming a fixed box. */
  .hero-slide .container{padding-top:28px !important;padding-right:0 !important;padding-bottom:104px !important}
  .hero-slide .container > div{width:46%;max-width:250px}
  .hero-visual{position:absolute !important;inset:0 !important;overflow:hidden}
  .hero-person{position:absolute !important;grid-column:auto;justify-self:auto;left:52% !important;top:17% !important;bottom:auto !important;height:83% !important;width:auto !important;max-width:none;filter:none}
  .hero-visual .mini-quote{position:absolute !important;min-width:0;padding:6px 5px;text-align:center;z-index:1;height:72px !important}
  /* Card width uses whichever is smaller: the design's fixed 93px, or the width that
     actually leaves room for 4 cards + 3 gaps + side margins at the current viewport
     (23.3% minus a 3px share of the gaps, derived from that fit calculation) — so cards
     are exactly 93px whenever there's room, and only narrow below that at the point where
     93px genuinely wouldn't fit without overlapping. Positions are then calculated FROM
     that same width expression (not independent percentages), so a gap is guaranteed by
     construction rather than approximated — the two can no longer drift apart and overlap. */
  .hero-visual .mini-quote{width:min(93px,calc(23.3% - 3px))}
  .hero-visual .mini-quote:nth-child(2){left:3% !important;right:auto !important;top:auto !important;bottom:16px !important}
  .hero-visual .mini-quote:nth-child(3){left:calc(3% + 1*(min(93px,calc(23.3% - 3px)) + 4px)) !important;right:auto !important;top:auto !important;bottom:16px !important}
  .hero-visual .mini-quote:nth-child(4){left:calc(3% + 2*(min(93px,calc(23.3% - 3px)) + 4px)) !important;right:auto !important;top:auto !important;bottom:16px !important}
  .hero-visual .mini-quote:nth-child(5){left:calc(3% + 3*(min(93px,calc(23.3% - 3px)) + 4px)) !important;right:auto !important;top:auto !important;bottom:16px !important}
  .hero-visual .mini-quote .label{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hero-visual .mini-quote .price{font-size:11px;margin-top:2px;white-space:nowrap}
  .hero-visual .mini-quote .delta{font-size:8px;white-space:nowrap}
  .hero-visual .mini-quote .row{margin-top:3px}
  .hero-visual .mini-quote .row span{font-size:7px;padding:2px 4px}
  .stats-photo{height:320px}
  .stat-block-photo .value{font-size:34px}
  .stat-block-photo .label{font-size:11px;margin-top:6px}
  #live-prices .container > div[style*="repeat(4,1fr)"],
  #markets .container > div[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  section .container > div[style*="repeat(3,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  section .container > div[style*="repeat(7,1fr)"]{grid-template-columns:repeat(3,1fr) !important}
  section .container[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  section .container > div[style*="1fr 1fr"]{grid-template-columns:1fr !important}
  .site-footer .cols{grid-template-columns:1fr 1fr !important}
  .promo-bg-decor{object-position:80% 10%}
}

@media (max-width: 640px){
  .container{padding:0 16px}
  .promo-bg-decor{object-position:75% top;opacity:.45}
  .hero-slide .container{padding-top:22px !important}
  .hero-slide h1{font-size:22px !important}
  .hero-lede{font-size:13px !important}
  .hero-cta-row{margin-top:16px !important}
  .hero-visual .mini-quote{padding:5px 4px}
  .hero-visual .mini-quote .label{font-size:6px}
  .hero-visual .mini-quote .price{font-size:10px}
  .hero-visual .mini-quote .delta{font-size:7px}
  .hero-visual .mini-quote .row{margin-top:2px}
  .hero-visual .mini-quote .row span{font-size:6px;padding:2px 3px}
  .stats-photo{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding:22px 20px 0;justify-items:center;text-align:center}
  .stats-photo-person{position:static;grid-column:1/-1;order:2;height:auto;width:min(232px,57%);margin:6px auto 0;filter:none;display:block}
  .stat-block-photo{position:static;text-align:center}
  .stat-block-photo .value{font-size:26px}
  .stat-block-photo .label{font-size:9px;margin-top:4px}
  section .container > div[style*="repeat(2,1fr)"],
  section .container > div[style*="repeat(3,1fr)"],
  section .container > div[style*="repeat(4,1fr)"],
  section .container > div[style*="repeat(7,1fr)"]{grid-template-columns:1fr !important}
  .site-footer .cols{grid-template-columns:1fr !important;padding:48px 16px 32px}
  .site-footer .bottom{flex-direction:column;gap:8px;text-align:center}
  .whatsapp-fab{right:16px;bottom:calc(88px + env(safe-area-inset-bottom));width:52px;height:52px}
  .segment-card{padding:18px 14px 16px}

  /* Mobile: scale landing-page type + buttons further down from the tablet sizes above */
  :root{--section-y:44px}
  .lp-hero{padding:40px 16px 36px}
  .lp-hero-h1{font-size:28px}
  .lp-hero-body{font-size:16px}
  .section-heading h2,.section-heading h3{font-size:26px !important}
  .stat-block .value{font-size:36px !important}
  .btn-lg{height:44px;padding:0 22px;font-size:15px}
  .btn-md{height:38px;padding:0 18px;font-size:14px}
  .card{padding:20px}

  /* Data tables (NSE Market Timings, Forex Sessions, Trading Holidays, etc.)
     switch from a horizontally-scrollable table to stacked cards on phones,
     so every column is readable without a horizontal slider. Each <tr>
     becomes a card; the first column (a <th>) becomes the card title, and
     the rest render as "Column Label: value" rows via data-label. */
  .t246-table-wrap{overflow-x:visible !important;border:none !important;box-shadow:none !important;background:transparent !important;border-radius:0 !important;margin-top:20px !important}
  .t246-table-wrap table{min-width:0 !important;width:100%}
  .t246-table-wrap thead{display:none}
  .t246-table-wrap tbody{display:block}
  .t246-table-wrap tbody tr{
    display:block;margin-bottom:12px;border:1px solid var(--border-subtle);
    border-radius:var(--radius-md);overflow:hidden;background:var(--surface-card);
  }
  .t246-table-wrap tbody tr:last-child{margin-bottom:0}
  .t246-table-wrap tbody tr th:first-child{
    display:block;width:100%;background:var(--surface-tile);
    border-bottom:1px solid var(--border-subtle) !important;white-space:normal !important;
  }
  .t246-table-wrap tbody tr td{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    text-align:right !important;
  }
  .t246-table-wrap tbody tr td::before{
    content:attr(data-label);font-weight:600;color:var(--text-strong);
    text-align:left;flex:none;
  }
}

@media (max-width: 900px){
  .hero-slide .container{min-width:0}
  .hero-slide .container > div{min-width:0;max-width:100%}
  .hero-slide .container > div > div[style*="display:flex"]{flex-wrap:wrap}
  .hero-slide p{max-width:100% !important}
}

/* ---- 404 page ----
   Sizing leans on clamp() throughout so it scales continuously with the viewport instead of
   jumping at breakpoints; the two explicit media queries below only handle the structural
   change (image+text side-by-side -> stacked) and touch nothing else. */
.notfound{background:#fff;padding:clamp(48px,7vw,110px) 0}
.notfound-grid{display:grid;grid-template-columns:min(46vw,880px) 1fr;gap:clamp(32px,5vw,64px);align-items:center;padding-right:max(24px,calc(50vw - 616px))}
.notfound-media{position:relative;min-width:0}
.notfound-illustration{display:block;width:100%;height:auto;filter:drop-shadow(0 20px 40px rgba(14,23,42,.10))}
.notfound-content{position:relative;min-width:0}
.notfound-code{font:var(--fw-extrabold) clamp(72px,11vw,160px)/0.9 var(--font-sans);letter-spacing:-0.03em;color:var(--text-strong)}
.notfound-heading{margin:8px 0 0;font:var(--fw-extrabold) clamp(26px,3.4vw,40px)/1.25 var(--font-sans);letter-spacing:-0.02em;color:var(--text-strong)}
.notfound-heading span{color:var(--brand-green-deep)}
.notfound-body{margin:16px 0 0;font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--text-body)}
.notfound-content .btn{position:relative;z-index:1;margin-top:clamp(24px,3vw,36px)}
.notfound-decoration{position:absolute;top:0;bottom:0;right:-6%;width:46%;pointer-events:none;z-index:0;overflow:hidden}
.notfound-chart-deco{position:absolute;bottom:0;right:0;width:100%;height:auto;opacity:.1}
.notfound-avatar{position:absolute;right:0;bottom:0;width:clamp(48px,8%,84px);height:auto;aspect-ratio:1;border-radius:50%;box-shadow:var(--shadow-card-hover);z-index:1}

@media (max-width: 900px){
  .notfound-grid{grid-template-columns:1fr;gap:16px;text-align:center;padding-right:0}
  .notfound-content{padding:0 24px}
  .notfound-decoration{width:38%;right:-4%}
  .notfound-avatar{width:56px}
}

@media (max-width: 480px){
  .notfound{padding:40px 0}
  .notfound-content{padding:0 16px}
  .notfound-decoration{width:34%}
  .notfound-avatar{width:44px}
}