/*
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:44px;--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;--stack-cards:48px;--stack-list:32px;--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 ----
   One system for every button on the site. Variants by purpose:
   .btn-primary  main action (Register, Open Free Account, Start Trading) — brand gradient
   .btn-outline  secondary action next to a primary (Log In, card links)
   .btn-ghost    low-emphasis action (Reset) — neutral text, tinted on hover
   .btn-on-dark  secondary action on dark/green sections
   .btn-buy / .btn-sell  trading actions on price cards
   Sizes: .btn-sm 36px · .btn-md 44px · .btn-lg 52px (smaller on tablet/phone below).
   .btn-arrow adds a trailing arrow that nudges right on hover (navigational CTAs). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:var(--fw-bold);line-height:1;letter-spacing:-.005em;
  border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;text-align:center;position:relative;overflow:hidden;
  -webkit-tap-highlight-color:transparent;user-select:none;
  transition:var(--transition-control),transform var(--dur-fast) var(--ease-standard),background-position var(--dur-slow) var(--ease-standard)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(var(--press-scale));transition-duration:60ms}
.btn:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:3px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none}
.btn-block{width:100%}
/* Full-width buttons in narrow cards wrap to a second line instead of clipping their label */
.btn-block{white-space:normal;height:auto;min-height:36px;padding-top:10px;padding-bottom:10px;line-height:1.2}
.btn-block.btn-md{min-height:var(--control-h)}.btn-block.btn-lg{min-height:52px}
.btn-sm{height:36px;padding:0 16px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}
.btn-md{height:var(--control-h);padding:0 22px;font-size:15px}
.btn-lg{height:52px;padding:0 30px;font-size:17px}

/* Primary: brand gradient, soft coloured shadow; hover deepens the gradient and lifts slightly */
.btn-primary{color:var(--white);background-image:linear-gradient(135deg,#00bb7c 0%,#009d69 50%,#008a5c 100%);background-size:200% 100%;background-position:0 0;
  box-shadow:0 1px 2px rgba(0,110,74,.28),0 4px 14px rgba(0,189,125,.24),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{color:var(--white);background-position:100% 0;box-shadow:0 2px 4px rgba(0,110,74,.28),0 10px 24px rgba(0,189,125,.30),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:active{box-shadow:0 1px 2px rgba(0,110,74,.3),inset 0 1px 2px rgba(0,0,0,.08)}

/* Outline: brand border + text; fills with a light brand tint on hover */
.btn-outline{background:var(--white);color:var(--brand-green-deep);border-color:var(--brand-green-deep);box-shadow:var(--shadow-hairline)}
.btn-outline:hover{background:var(--green-50);color:var(--green-800);border-color:var(--brand-green-deep);box-shadow:0 4px 12px rgba(0,157,105,.12)}

/* Ghost: neutral, for low-emphasis actions */
.btn-ghost{background:transparent;color:var(--text-body)}
.btn-ghost:hover{background:var(--surface-sunken);color:var(--text-strong)}

/* On dark / green backgrounds */
.btn-on-dark{background:rgba(255,255,255,.08);color:var(--white);border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn-on-dark:hover{background:rgba(255,255,255,.16);color:var(--white);border-color:rgba(255,255,255,.5)}
.btn-on-dark:focus-visible{outline-color:var(--white)}

/* Trading actions */
.btn-buy,.btn-sell{min-height:36px;padding:0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--white);border-radius:var(--radius-sm)}
.btn-buy{background:linear-gradient(135deg,#00bb7c 0%,#009d69 100%);box-shadow:0 1px 2px rgba(0,110,74,.25),0 3px 10px rgba(17,185,129,.22)}
.btn-buy:hover{box-shadow:0 2px 4px rgba(0,110,74,.25),0 8px 18px rgba(17,185,129,.30);filter:brightness(.96)}
.btn-sell{background:var(--down);box-shadow:0 1px 2px rgba(185,28,28,.25),0 3px 10px rgba(239,68,68,.22)}
.btn-sell:hover{background:var(--down-strong);box-shadow:0 2px 4px rgba(185,28,28,.25),0 8px 18px rgba(239,68,68,.30)}

/* Trailing arrow for navigational CTAs */
.btn-arrow::after{content:"";flex:none;width:1em;height:1em;margin-right:-2px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--dur-base) var(--ease-standard)}
.btn-arrow:hover::after{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::after{transition:none}
  .btn:hover,.btn:active,.btn-arrow:hover::after{transform:none}
}

/* ---- 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)}
.segment-chip:not(.active):hover{border-color:var(--green-200);color:var(--brand-green-deep)}
/* Keyboard focus for the non-.btn controls, matching .btn:focus-visible */
.segment-chip:focus-visible,.tab:focus-visible,.quicklink:focus-visible,.hamburger:focus-visible,.calc-tab input:focus-visible+span{outline:2px solid var(--brand-green-deep);outline-offset:2px}

/* ---- 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:48px;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:var(--fs-h2)}
.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)}
/* Feature card grid (t246_block_features). --cols is set per block in page-landing.php.
   Flex + centred wrap so a short last row (e.g. 3 + 2) sits in the middle, not hard left. */
.feature-grid{--cols:3;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gutter);margin-top:var(--stack-cards)}
.feature-grid>.card{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));min-width:0}
@media (max-width:1100px){.feature-grid[data-cols="4"]{--cols:2 !important}}
@media (max-width:900px){.feature-grid{--cols:2 !important}}
@media (max-width:640px){.feature-grid,.feature-grid[data-cols]{--cols:1 !important}}

/* ---- 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);transition:background-color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.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);display:inline-block;transition:color var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard)}
.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;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:transparent;
	box-shadow:none;
}
.whatsapp-fab img{
	width:100%;
	height:100%;
}

/* chatbot support --*/
  .chatbot-fab{
    position:fixed; right:24px; bottom:24px; z-index:9999;
    width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
    background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.18);
    display:flex; align-items:center; justify-content:center;
  }
  .whatsapp-fab{ bottom:90px !important; }

/* ---- 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:var(--stack-list) 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:50px;padding:0 26px;font-size:16px}
  .btn-md{height:42px;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:auto;min-width:176px} /* equal width, but never narrower than the label */
  /* 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;--fs-body-lg:17px;--stack-cards:32px;--stack-list:24px}
  .lp-hero{padding:40px 16px 36px}
  .lp-hero-h1{font-size:28px}
  .lp-hero-body{font-size:var(--fs-body-lg)}
  .section-heading h2,.section-heading h3{font-size:26px !important}
  .stat-block .value{font-size:36px !important}
  .btn-lg{height:48px;padding:0 22px;font-size:16px}
  .btn-md{height:42px;padding:0 18px;font-size:15px}
  .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}
}
/* =====================================================================
   Standalone calculator pages (t246_block_calculator in page-landing.php,
   UI in js/calc-page.js, maths in js/calc-engine.js). Layout follows the
   reference design: title, calculator card (inputs | donut, results under),
   scenario table, article — with a sidebar (CTA + other calculators).
   The popup calculators keep their own .calc-overlay/.calc-modal styles in
   footer.php; every class below is scoped under .calc-page so nothing leaks.
   ===================================================================== */
.calc-page{background:var(--white);padding:28px 0 72px}
.calc-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-sm);color:var(--text-muted)}
.calc-crumbs li+li::before{content:"›";margin-right:6px;color:var(--slate-300)}
.calc-crumbs a{color:var(--text-body)}
.calc-crumbs a:hover{color:var(--brand-green-deep)}
.calc-crumbs [aria-current]{color:var(--text-strong);font-weight:var(--fw-semibold)}
.calc-page-head{margin:18px 0 28px;max-width:760px}
.calc-page-head h1{font-size:46px;line-height:1.15;letter-spacing:-.02em}
.calc-page-head p{margin-top:14px;font-size:var(--fs-body-lg);line-height:var(--lh-relaxed);color:var(--text-body)}

.calc-page-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}
.calc-page-main{min-width:0;display:flex;flex-direction:column;gap:24px}

.calc-page .calc-card{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:28px 32px;box-shadow:var(--shadow-hairline)}
.calc-card-title{font-size:var(--fs-h4);font-weight:var(--fw-bold);letter-spacing:-.01em}
.calc-card-sub{margin-top:6px;font-size:var(--fs-sm);color:var(--text-body)}

/* Direction pills (like the SIP / Lumpsum tabs in the reference) */
.calc-tabs{display:inline-flex;gap:8px;margin-bottom:26px}
.calc-tab{position:relative;cursor:pointer}
.calc-tab input{position:absolute;opacity:0;pointer-events:none}
.calc-tab span{display:inline-flex;align-items:center;height:38px;padding:0 18px;border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-body);transition:var(--transition-control)}
.calc-tab:hover span{color:var(--text-strong)}
.calc-tab input:checked+span{background:var(--green-50);color:var(--brand-green-deep)}
.calc-tab input:focus-visible+span{box-shadow:var(--ring-brand)}

.calc-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-areas:"inputs visual" "results actions";column-gap:40px;row-gap:28px}
.calc-inputs{grid-area:inputs;display:flex;flex-direction:column;gap:26px}
.calc-visual{grid-area:visual;display:flex;flex-direction:column;align-items:center;gap:18px}
.calc-results{grid-area:results;align-self:end}
.calc-actions{grid-area:actions;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}

/* Input row: label left, tinted value box right, optional slider underneath */
.calc-row{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:14px;column-gap:16px}
.calc-row[hidden],.calc-tabs[hidden]{display:none}
.calc-row-label{font-size:var(--fs-body);color:var(--text-strong);font-weight:var(--fw-medium)}
.calc-row-hint{color:var(--text-muted);font-weight:var(--fw-regular);font-size:var(--fs-sm)}
.calc-row-note{grid-column:1 / -1;margin:-6px 0 0;font-size:var(--fs-xs);color:var(--text-muted)}
.calc-row-note:empty{display:none}
.calc-box{background:var(--green-50);border:1px solid transparent;border-radius:var(--radius-xs);transition:var(--transition-control)}
.calc-box:focus-within{border-color:var(--brand-green-deep);box-shadow:var(--ring-brand)}
.calc-box input,.calc-box select{display:block;width:150px;height:40px;border:0;background:transparent;padding:0 12px;text-align:right;
  font:var(--fw-bold) 16px/1 var(--font-sans);color:var(--brand-green-deep);font-variant-numeric:tabular-nums;outline:none;-moz-appearance:textfield}
.calc-box input::-webkit-outer-spin-button,.calc-box input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.calc-box--wide input,.calc-box--wide select{width:210px}
.calc-box--lot select{width:210px} /* pip page: "Standard (1.0 lot)" must fit on phones too */
.calc-box--select select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23009d69' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
/* Read-only value in the same tinted box (e.g. the Government-set PPF rate) */
.calc-box--static span{display:block;min-width:150px;height:40px;padding:0 12px;text-align:right;font:var(--fw-bold) 16px/40px var(--font-sans);color:var(--brand-green-deep);font-variant-numeric:tabular-nums}

/* Range slider with green filled track (fill % set by js/calc-page.js) */
.calc-range{grid-column:1 / -1;-webkit-appearance:none;appearance:none;width:100%;height:4px;margin:4px 0;border-radius:4px;cursor:pointer;
  background:linear-gradient(to right,var(--brand-green) 0,var(--brand-green) var(--fill,0%),var(--slate-200) var(--fill,0%),var(--slate-200) 100%)}
.calc-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--white);border:1px solid var(--slate-200);box-shadow:0 1px 4px rgba(14,23,42,.18)}
.calc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--white);border:1px solid var(--slate-200);box-shadow:0 1px 4px rgba(14,23,42,.18)}
.calc-range:focus-visible{outline:none}
.calc-range:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring-brand)}

/* Donut chart + legend */
.calc-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;min-height:18px;font-size:var(--fs-xs);color:var(--text-body)}
.calc-legend-item{display:inline-flex;align-items:center;gap:8px}
.calc-legend-item i{width:20px;height:8px;border-radius:4px;display:inline-block}
.calc-donut{position:relative;width:100%;max-width:230px;aspect-ratio:1}
.calc-donut svg{width:100%;height:100%;display:block}
.calc-donut-track{stroke:var(--slate-100)}
.calc-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 44px}
.calc-donut-center strong{font-size:22px;font-weight:var(--fw-extrabold);color:var(--text-strong);letter-spacing:-.01em}
.calc-donut-center.is-pos strong{color:var(--brand-green-deep)}
.calc-donut-center.is-neg strong{color:var(--down)}
.calc-donut-center span{font-size:var(--fs-xs);color:var(--text-muted);line-height:1.35;margin-top:2px}

/* Result lines (bottom-left of the card) */
.calc-res{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:7px 0;font-size:var(--fs-sm);color:var(--text-body)}
.calc-res strong{font-size:var(--fs-body);font-weight:var(--fw-semibold);color:var(--text-strong);text-align:right;overflow-wrap:anywhere}
.calc-res--total{margin-top:6px;padding-top:12px;border-top:1px dashed var(--border-strong);color:var(--text-strong);font-weight:var(--fw-semibold)}
.calc-res--total strong{font-size:20px;font-weight:var(--fw-extrabold)}
.calc-res--pos strong{color:var(--brand-green-deep)}
.calc-res--neg strong{color:var(--down)}
.calc-empty{margin:0;padding:14px 16px;border-radius:var(--radius-md);background:var(--surface-sunken);font-size:var(--fs-sm);color:var(--text-body)}

.calc-reset-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 16px;border:1px solid var(--border-subtle);background:var(--white);
  font:var(--fw-semibold) var(--fs-sm)/1 var(--font-sans);color:var(--text-body);cursor:pointer;border-radius:var(--radius-sm);box-shadow:var(--shadow-hairline);
  transition:var(--transition-control),transform var(--dur-fast) var(--ease-standard);-webkit-tap-highlight-color:transparent}
.calc-reset-link::before{content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform var(--dur-slow) var(--ease-standard)}
.calc-reset-link:hover{color:var(--text-strong);background:var(--surface-sunken);border-color:var(--border-strong)}
.calc-reset-link:hover::before{transform:rotate(-120deg)}
.calc-reset-link:active{transform:scale(var(--press-scale))}
.calc-reset-link:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:2px}
.calc-note{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--border-subtle);font-size:var(--fs-xs);line-height:var(--lh-relaxed);color:var(--text-muted)}

/* Scenario table */
.calc-table-wrap{margin-top:16px;overflow-x:auto;-webkit-overflow-scrolling:touch} /* wide tables (e.g. SWP) scroll inside the card on phones instead of being clipped */
.calc-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.calc-table th{padding:12px 16px;text-align:left;font-weight:var(--fw-bold);color:var(--text-strong);background:var(--surface-tile);white-space:nowrap}
.calc-table th:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.calc-table th:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.calc-table td{padding:12px 16px;border-bottom:1px solid var(--border-subtle);color:var(--text-body)}
.calc-table tr:last-child td{border-bottom:0}
.calc-table .num{text-align:right}
.calc-table td.is-pos{color:var(--brand-green-deep);font-weight:var(--fw-semibold)}
.calc-table td.is-neg{color:var(--down);font-weight:var(--fw-semibold)}
.calc-table tr.is-current td{background:var(--slate-50);color:var(--text-strong);font-weight:var(--fw-semibold)}
.calc-table tr.is-current td.is-pos{color:var(--brand-green-deep)}
.calc-table tr.is-current td.is-neg{color:var(--down)}
.calc-tag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--green-50);color:var(--brand-green-deep);font:var(--fw-bold) 11px/1.5 var(--font-sans);font-style:normal;white-space:nowrap}

/* Sidebar */
.calc-page-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:24px}
.calc-side-card{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-hairline)}
.calc-side-cta{padding:28px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.calc-side-cta .calc-side-title{margin:6px 0 0;font-size:20px;line-height:var(--lh-snug);font-weight:var(--fw-bold);letter-spacing:-.01em;color:var(--text-strong)}
.calc-side-cta p{font-size:var(--fs-sm);color:var(--text-body);margin-bottom:8px}
.calc-side-list .calc-side-title{margin:0;font-size:var(--fs-body);line-height:var(--lh-snug);font-weight:var(--fw-bold);color:var(--text-strong);padding:16px 20px;border-bottom:1px solid var(--border-subtle)}
.calc-side-list ul{list-style:none;margin:0;padding:0}
.calc-side-list li+li{border-top:1px solid var(--border-subtle)}
.calc-side-list a,.calc-side-list button,.calc-side-list .is-current{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:12px 20px;border:0;background:none;text-align:left;
  font:var(--fw-medium) var(--fs-body)/1.3 var(--font-sans);color:var(--text-strong);cursor:pointer}
.calc-side-list a:hover,.calc-side-list button:hover{color:var(--brand-green-deep);background:var(--slate-50)}
.calc-side-list .is-current{color:var(--brand-green-deep);font-weight:var(--fw-bold);cursor:default;box-shadow:inset 3px 0 0 var(--brand-green-deep)}
.calc-side-list li:last-child>*{border-radius:0 0 var(--radius-xl) var(--radius-xl)}

/* Long-form article under the calculator */
.calc-article{padding:16px 4px 0;color:var(--text-body);font-size:var(--fs-body);line-height:var(--lh-relaxed)}
.calc-article>*+*{margin-top:16px}
.calc-article h2{font-size:28px;margin-top:44px;line-height:var(--lh-snug)}
.calc-article h2:first-child{margin-top:0}
.calc-article h3{font-size:var(--fs-h4);font-weight:var(--fw-bold);margin-top:28px;letter-spacing:-.01em}
.calc-article ul,.calc-article ol{padding-left:22px}
.calc-article ol>li+li{margin-top:10px}
.calc-article li>ul{margin-top:8px}
.calc-article .calc-formula{padding:14px 18px;background:var(--surface-tile);border-radius:var(--radius-md);font:var(--fw-bold) 17px/1.5 var(--font-sans);color:var(--text-strong);text-align:center;overflow-x:auto}
.calc-article li+li{margin-top:6px}
.calc-article li::marker{color:var(--brand-green)}
.calc-article strong{color:var(--text-strong)}
.calc-article table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;font-size:var(--fs-sm)}
.calc-article th{background:var(--surface-tile);color:var(--text-strong);text-align:left;padding:12px 16px;font-weight:var(--fw-bold)}
.calc-article td{padding:12px 16px;border-top:1px solid var(--border-subtle);vertical-align:top}
.calc-article td+td,.calc-article th+th{border-left:1px solid var(--border-subtle)}
.calc-article td ul{margin:0;padding-left:18px}
.calc-article ul.calc-cols{columns:3;column-gap:32px}
.calc-article ul.calc-cols li{margin:0 0 6px;break-inside:avoid}
.calc-article .calc-callout{padding:14px 18px;border-left:3px solid var(--brand-green);background:var(--slate-50);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--fs-sm)}

/* Tablet: sidebar drops below the calculator; card keeps inputs | chart */
@media (max-width:1023px){
  .calc-page-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  /* Flatten main so the sidebar can sit between the calculator/table and the long article */
  .calc-page-main{display:contents}
  .calc-page-main>.calc-card{order:1}
  .calc-page-side{order:2;position:static;display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .calc-article{order:3}
  .calc-page-head h1{font-size:34px}
}
/* Stack the card when the two columns get tight */
@media (max-width:760px){
  .calc-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"inputs" "results" "visual" "actions";row-gap:24px}
  .calc-results{align-self:stretch;padding-top:4px;border-top:1px solid var(--border-subtle)}
  .calc-actions .btn,.calc-actions .calc-reset-link{width:100%}
  .calc-actions .calc-reset-link{height:42px}
  .calc-page-side{grid-template-columns:minmax(0,1fr)}
}
/* Phone */
@media (max-width:640px){
  .calc-page{padding:18px 0 48px}
  .calc-page-head{margin:12px 0 20px}
  .calc-page-head h1{font-size:28px}
  .calc-page .calc-card{padding:20px 16px;border-radius:var(--radius-lg)}
  .calc-tabs{display:flex;margin-bottom:20px}
  .calc-tab{flex:1}
  .calc-tab span{justify-content:center;width:100%;border:1px solid var(--border-subtle)}
  .calc-tab input:checked+span{border-color:transparent}
  .calc-inputs{gap:22px}
  .calc-box input,.calc-box select{width:140px}
  .calc-box--wide input,.calc-box--wide select{width:180px}
  .calc-box--lot select{width:200px}
  .calc-donut{max-width:210px}
  .calc-table th,.calc-table td{padding:10px 8px}
  .calc-table{font-size:13px}
  .calc-tag{display:block;margin:4px 0 0;width:max-content}
  .calc-article h2{font-size:23px;margin-top:36px}
  .calc-article ul.calc-cols{columns:2}
  .calc-article th,.calc-article td{padding:10px 12px}
}
@media (max-width:380px){
  .calc-row{grid-template-columns:minmax(0,1fr)}
  .calc-box input,.calc-box select{width:100%;text-align:left}
  .calc-box--wide input,.calc-box--wide select{width:100%}
}

/* ============================================================
   Currency picker with flags (js/pair-picker.js). Replaces the look of the
   calculators' currency-pair and "Show amounts in" dropdowns; the native
   <select> stays in the page, hidden, as the source of truth.
   ============================================================ */
.pp-native{position:absolute !important;width:1px !important;height:1px !important;margin:0 !important;padding:0 !important;border:0 !important;opacity:0 !important;pointer-events:none !important;overflow:hidden !important}
.pp-btn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;cursor:pointer;font-family:var(--font-sans);text-align:left;-webkit-tap-highlight-color:transparent}
.pp-btn:focus-visible{outline:none}
.pp-btn-code{white-space:nowrap}
.pp-chev{flex:none;color:var(--brand-green-deep);transition:transform .15s ease}
.pp-btn[aria-expanded="true"] .pp-chev{transform:rotate(180deg)}
/* Calculator pages: sits in the tinted value box, right-aligned like the other fields */
.calc-box--picker{position:relative}
.calc-box--picker .pp-btn{height:40px;min-width:150px;padding:0 12px;justify-content:flex-end;font:var(--fw-bold) 16px/1 var(--font-sans);color:var(--brand-green-deep)}
.calc-box--picker:has(.pp-btn[aria-expanded="true"]){border-color:var(--brand-green-deep);box-shadow:var(--ring-brand)}
/* Popups: full-width field like the other popup inputs */
.calc-modal .pp-btn{min-height:44px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--white);font-size:16px;font-weight:var(--fw-semibold);color:var(--text-strong)}
.calc-modal .pp-btn .pp-chev{margin-left:auto}
.calc-modal .pp-btn:focus-visible,.calc-modal .pp-btn[aria-expanded="true"]{outline:2px solid var(--brand-green-deep);outline-offset:1px;border-color:var(--brand-green-deep)}

/* Flags: circular, overlapping for a pair */
.pp-flags{display:inline-flex;align-items:center;flex:none}
.pp-flag{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;overflow:hidden;background:var(--slate-200,#e2e8f0);box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(15,23,42,.10);flex:none}
.pp-flag svg{display:block;width:100%;height:100%}
.pp-flag b{font-size:10px;color:var(--text-strong)}
.pp-flags--pair .pp-flag+.pp-flag{margin-left:-6px}

/* Dropdown panel (fixed to the viewport so popups/cards never clip it) */
.pp-panel{position:fixed;z-index:10050;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:0 18px 44px rgba(15,23,42,.18),0 2px 6px rgba(15,23,42,.06);overflow:hidden;font-family:var(--font-sans)}
.pp-search{display:flex;align-items:center;gap:10px;padding:0 14px;height:50px;border-bottom:1px solid var(--border-subtle);color:var(--text-muted);flex:none}
.pp-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:var(--fw-medium) 16px/1 var(--font-sans);color:var(--text-strong)}
.pp-search input::placeholder{color:var(--text-muted);font-weight:var(--fw-regular)}
.pp-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 0;outline:none}
.pp-group{padding:12px 16px 6px;font-size:var(--fs-xs);font-weight:var(--fw-semibold);color:var(--text-muted);letter-spacing:.02em}
.pp-opt{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;color:var(--text-body)}
.pp-opt .pp-code{min-width:66px;font-weight:var(--fw-bold);font-size:15px;color:var(--text-strong);white-space:nowrap}
.pp-opt .pp-name{flex:1;min-width:0;font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-opt .pp-tick{flex:none;color:var(--brand-green-deep);visibility:hidden}
.pp-opt.is-active{background:var(--green-50)}
.pp-opt[aria-selected="true"] .pp-code{color:var(--brand-green-deep)}
.pp-opt[aria-selected="true"] .pp-tick{visibility:visible}
.pp-empty{padding:18px 16px;font-size:var(--fs-sm);color:var(--text-muted)}
@media (max-width:640px){.calc-box--picker .pp-btn{min-width:0;gap:8px;padding:0 10px}}


/* ============================================================
   Interaction polish (shared across the site)
   One timing scale: --dur-fast 120ms / --dur-base 200ms / --dur-slow 320ms, --ease-standard.
   ============================================================ */


/* Mobile menu slides down when opened */
@keyframes t246-menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.site-header.menu-open .mobile-menu{animation:t246-menu-in var(--dur-slow) var(--ease-out)}

/* Scroll reveal (js/main.js adds .t246-reveal only to below-the-fold elements, then .is-in once) */
.t246-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out) var(--reveal-delay,0ms),transform .6s var(--ease-out) var(--reveal-delay,0ms)}
.t246-reveal.is-in{opacity:1;transform:none}

/* ---- Calculator interactions (js/calc-page.js) ---- */
/* Donut arcs animate between values instead of redrawing */
.calc-donut .calc-donut-center{pointer-events:none} /* let the pointer reach the chart arcs */
.calc-donut .calc-arc{cursor:pointer;transition:stroke-dasharray .6s var(--ease-standard),stroke-dashoffset .6s var(--ease-standard),stroke var(--dur-slow) var(--ease-standard),opacity var(--dur-base) var(--ease-standard)}
.calc-donut.is-hovering .calc-arc:not(.is-active){opacity:.35}
.calc-donut .calc-arc.is-active{filter:drop-shadow(0 2px 6px rgba(14,23,42,.18))}
/* Tooltip */
.calc-tip{position:absolute;z-index:3;left:0;top:0;pointer-events:none;width:max-content;max-width:240px;padding:9px 12px;border-radius:var(--radius-sm);
  background:var(--slate-900,#0e172a);color:#fff;font-size:var(--fs-xs);line-height:1.35;box-shadow:0 8px 24px rgba(14,23,42,.25);
  opacity:0;transform:translate(-50%,calc(-100% - 10px)) scale(.96);transform-origin:bottom center;transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard)}
.calc-tip.is-shown{opacity:1;transform:translate(-50%,calc(-100% - 10px)) scale(1)}
.calc-tip b{display:block;font-size:13px;font-weight:var(--fw-bold)}
.calc-tip span{display:flex;align-items:center;gap:6px;margin-top:2px;color:rgba(255,255,255,.75);white-space:nowrap}
.calc-tip i{width:8px;height:8px;border-radius:50%;flex:none}
.calc-legend-item{cursor:default;border-radius:var(--radius-xs);padding:2px 4px;margin:-2px -4px;transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.calc-legend-item:hover,.calc-legend-item:focus-visible,.calc-legend-item.is-active{background:var(--surface-sunken);color:var(--text-strong)}
.calc-legend-item:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:1px}
/* Values that changed get a short, soft refresh */
@keyframes t246-tick{from{opacity:.25;transform:translateY(4px)}to{opacity:1;transform:none}}
.calc-res strong.is-changed,.calc-donut-center strong.is-changed{display:inline-block;animation:t246-tick .35s var(--ease-out)}
@keyframes t246-table-refresh{from{opacity:.4}to{opacity:1}}
.calc-table-wrap.is-updated tbody{animation:t246-table-refresh .35s var(--ease-out)}
.calc-empty{animation:t246-fade .25s var(--ease-out)}
/* Reset: icon spins once when pressed */
@keyframes t246-spin{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
.calc-reset-link.is-spinning::before{animation:t246-spin .55s var(--ease-standard)}
/* "Fetching live market rates…" while the live FX request is in flight */
@keyframes t246-pulse{0%,100%{opacity:.35}50%{opacity:1}}
.calc-row-note.is-loading{display:flex;align-items:center;gap:8px}
.calc-row-note.is-loading::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand-green);animation:t246-pulse 1s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .site-header.menu-open .mobile-menu,.calc-res strong.is-changed,.calc-donut-center strong.is-changed,.calc-table-wrap.is-updated tbody,.calc-empty,.calc-reset-link.is-spinning::before,.calc-row-note.is-loading::before{animation:none}
  .calc-donut .calc-arc,.calc-tip,.t246-reveal{transition:none}
  .t246-reveal{opacity:1;transform:none}
}


/* ============================================================
   Premium hover system
   Shared motion: --ease-premium (soft deceleration) and --ease-spring (tiny overshoot
   for small elements). Cursor-follow effects read --mx / --my, set by js/main.js on
   devices with a mouse; without them the effects sit at a sensible default position.
   ============================================================ */
:root{--ease-premium:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);--dur-premium:420ms}

/* ---- Cards: lift + cursor spotlight + glowing border + icon tile fills with brand ---- */
.card:not(.card-flat){
  transition:transform var(--dur-premium) var(--ease-premium),box-shadow var(--dur-premium) var(--ease-premium),border-color var(--dur-premium) var(--ease-premium);
}
.card:not(.card-flat)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(0,189,125,.95),rgba(0,189,125,.25) 45%,rgba(0,189,125,.08) 75%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity var(--dur-premium) var(--ease-premium)
}
.card:not(.card-flat):hover{transform:none;box-shadow:var(--shadow-card);border-color:rgba(0,157,105,.18)} /* border line only: no lift, no extra shadow */
.card:not(.card-flat):hover::after{opacity:1}
.card .icon-tile{transition:transform var(--dur-premium) var(--ease-spring),background var(--dur-premium) var(--ease-premium),color var(--dur-premium) var(--ease-premium),box-shadow var(--dur-premium) var(--ease-premium),border-color var(--dur-premium) var(--ease-premium)}
.card:not(.card-flat):hover .icon-tile{
  transform:translateY(-3px) scale(1.07);
  background:linear-gradient(135deg,#00c985 0%,#009d69 100%);color:var(--white);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 22px -6px rgba(0,157,105,.55)
}
.card:not(.card-flat):focus-within{border-color:rgba(0,157,105,.35)}

/* ---- Footer: underline sweeps in under links; social icons fill with brand and lift ---- */
.site-footer ul a{
  background:linear-gradient(var(--brand-mint),var(--brand-mint)) 0 100%/0% 1.5px no-repeat;
  transition:color var(--dur-premium) var(--ease-premium),background-size var(--dur-premium) var(--ease-premium)
}
.site-footer ul a:hover{color:var(--white);background-size:100% 1.5px}
.site-footer .socials a{
  position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform var(--dur-premium) var(--ease-spring),box-shadow var(--dur-premium) var(--ease-premium),background var(--dur-premium) var(--ease-premium)
}
.site-footer .socials a svg{transition:transform var(--dur-premium) var(--ease-spring)}
.site-footer .socials a:hover{
  background:linear-gradient(135deg,#00c985 0%,#009d69 100%);color:var(--white);transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 0 4px rgba(0,216,151,.14),0 10px 24px -6px rgba(0,189,125,.55)
}
.site-footer .socials a:hover svg{transform:scale(1.12)}

/* ---- Calculator sidebar: accent bar grows, text glides, chevron slides in ---- */
.calc-side-list a{position:relative;background:linear-gradient(90deg,var(--green-50) 0%,rgba(226,252,239,0) 85%) no-repeat 0 0/0% 100%;
  transition:background-size var(--dur-premium) var(--ease-premium),color var(--dur-premium) var(--ease-premium),padding-left var(--dur-premium) var(--ease-premium)}
.calc-side-list a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#00c985,#009d69);transform:scaleY(0);transition:transform var(--dur-premium) var(--ease-spring)}
.calc-side-list a:hover,.calc-side-list a:focus-visible{background:linear-gradient(90deg,var(--green-50) 0%,rgba(226,252,239,0) 85%) no-repeat 0 0/100% 100%;color:var(--brand-green-deep);padding-left:26px}
.calc-side-list a:hover::before,.calc-side-list a:focus-visible::before{transform:scaleY(1)}
.calc-side-list a::after{content:"";flex:none;width:14px;height:14px;background:currentColor;opacity:0;transform:translateX(-6px);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:opacity var(--dur-premium) var(--ease-premium),transform var(--dur-premium) var(--ease-spring)}
.calc-side-list a:hover::after,.calc-side-list a:focus-visible::after{opacity:1;transform:translateX(0)}
.calc-side-list a:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:-3px}

/* ---- Text links in long-form copy: faint underline that fills in from the left ---- */
.calc-article a,.faq-answer a,.lp-hero-body a,.section-heading p a,.bullet-panel a,.glossary-content a,.legal-text a,.legal-contact a{
  color:var(--brand-green-deep);font-weight:var(--fw-semibold);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--green-200),var(--green-200));
  background-size:0% 1.5px,100% 1.5px;background-position:0 100%,0 100%;background-repeat:no-repeat;padding-bottom:1px;
  transition:background-size var(--dur-premium) var(--ease-premium),color var(--dur-premium) var(--ease-premium)
}
.calc-article a:hover,.faq-answer a:hover,.lp-hero-body a:hover,.section-heading p a:hover,.bullet-panel a:hover,.glossary-content a:hover,.legal-text a:hover,.legal-contact a:hover{color:var(--green-800,#0a5036);background-size:100% 1.5px,100% 1.5px}

/* ---- Calculator input boxes: soft halo on hover, clear ring on focus ---- */
.calc-box{transition:border-color var(--dur-premium) var(--ease-premium),box-shadow var(--dur-premium) var(--ease-premium),background-color var(--dur-premium) var(--ease-premium)}
.calc-box:hover{border-color:var(--green-300);background-color:#eafdf3;box-shadow:0 0 0 4px rgba(0,189,125,.08),0 4px 12px -4px rgba(0,157,105,.18)}
.calc-box:focus-within{border-color:var(--brand-green-deep);background-color:#eafdf3;box-shadow:0 0 0 4px rgba(0,189,125,.16),0 6px 16px -6px rgba(0,157,105,.25)}
.calc-row-label{transition:color var(--dur-premium) var(--ease-premium)}
.calc-row:focus-within .calc-row-label{color:var(--green-800,#0a5036)}

/* ---- Keyboard focus for plain links: ring eases in from further out ---- */
a{outline-offset:8px;transition:color var(--dur-base) var(--ease-standard),outline-offset var(--dur-base) var(--ease-premium)}
a:focus-visible{outline:2px solid var(--brand-green-deep);outline-offset:3px;border-radius:4px}
.site-footer a:focus-visible{outline-color:var(--brand-mint)}

@media (prefers-reduced-motion: reduce){
  .card,.card::after,.card .icon-tile,.site-footer ul a,.site-footer .socials a,.site-footer .socials a svg,.calc-side-list a,.calc-side-list a::before,.calc-side-list a::after,.calc-box,a{transition:none}
  .card:not(.card-flat):hover,.card:not(.card-flat):hover .icon-tile,.site-footer .socials a:hover,.site-footer .socials a:hover svg{transform:none}
}

/* ============================================================
   Stats band — dark-green sections with stats + CTA (t246_block_stats, 'on_dark' => true)
   ============================================================ */
/* Any on-dark section: headings and intro copy in light colours (was dark text on dark green) */
.section-on-dark .section-heading h2,.section-on-dark .section-heading h3{color:var(--white)}
.section-on-dark .section-heading p{color:var(--text-on-dark-muted)}

.stats-band{position:relative;overflow:hidden;isolation:isolate}
/* faint grid + two soft mint glows for depth */
.stats-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask:radial-gradient(ellipse 70% 80% at 50% 45%,#000 30%,transparent 80%);mask:radial-gradient(ellipse 70% 80% at 50% 45%,#000 30%,transparent 80%)}
.stats-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(520px 320px at 12% 18%,rgba(0,216,151,.16),transparent 70%),radial-gradient(560px 360px at 88% 88%,rgba(0,189,125,.14),transparent 70%)}
.stats-band .section-heading h2{background:linear-gradient(180deg,#ffffff 30%,#c9f5e3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats-band .section-heading p{max-width:680px;margin:18px auto 0}
.stats-intro{text-align:center;max-width:680px;margin:0 auto 8px;color:var(--text-on-dark-muted);font-size:var(--fs-body-lg);line-height:var(--lh-relaxed)}

.stats-grid{display:grid;grid-template-columns:repeat(var(--stat-cols,3),minmax(0,1fr));gap:20px;max-width:960px;margin:44px auto 0}
.stat-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:30px 22px 28px;border-radius:var(--radius-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 40px -24px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform var(--dur-premium,420ms) var(--ease-premium,ease),border-color var(--dur-premium,420ms) var(--ease-premium,ease),background var(--dur-premium,420ms) var(--ease-premium,ease)}
.stat-card::after{content:"";position:absolute;left:50%;bottom:-1px;width:56px;height:2px;margin-left:-28px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand-mint),transparent);opacity:.8;transition:width var(--dur-premium,420ms) var(--ease-premium,ease),margin var(--dur-premium,420ms) var(--ease-premium,ease)}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(0,216,151,.35);background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.035) 100%)}
.stat-card:hover::after{width:120px;margin-left:-60px}
.stat-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-lg);color:var(--brand-mint);
  background:rgba(0,216,151,.12);border:1px solid rgba(0,216,151,.28);box-shadow:0 0 24px -4px rgba(0,216,151,.35)}
.stat-icon svg{width:22px;height:22px}
.stat-card .stat-text{display:flex;flex-direction:column;align-items:center;gap:8px}
.stats-band .stat-card .value{font-size:52px;line-height:1;letter-spacing:-.03em;color:var(--white)}
.stats-band .stat-card .label{margin-top:0;color:var(--brand-mint);font-size:12px}

.stats-cta{text-align:center;margin-top:44px}
/* High-contrast CTA for dark sections: white fill, dark green text, glow on hover */
.btn-contrast{background:var(--white);color:var(--green-900,#0c452f);box-shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px -8px rgba(0,0,0,.45)}
.btn-contrast:hover{background:#f1fdf7;color:var(--green-900,#0c452f);box-shadow:0 0 0 5px rgba(0,216,151,.18),0 14px 34px -8px rgba(0,216,151,.45)}
.btn-contrast:focus-visible{outline-color:var(--white)}

@media (max-width:1023px){
  .stats-grid{gap:14px}
  .stats-band .stat-card .value{font-size:40px !important}
  .stat-card{padding:24px 16px 22px}
}
@media (max-width:640px){
  .stats-grid{grid-template-columns:1fr;gap:12px;margin-top:32px}
  .stat-card{flex-direction:row;align-items:center;text-align:left;gap:16px;padding:18px 18px}
  .stat-card::after{left:18px;margin-left:0;width:40px}
  .stat-card:hover::after{width:80px;margin-left:0}
  .stat-card .stat-text{align-items:flex-start;gap:4px}
  .stats-band .stat-card .value{font-size:32px !important}
  .stat-icon{width:44px;height:44px;flex:none}
  .stats-cta{margin-top:32px}
  .stats-cta .btn{width:100%;white-space:normal;height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;line-height:1.25}
}
@media (prefers-reduced-motion:reduce){.stat-card,.stat-card::after{transition:none}.stat-card:hover{transform:none}}

/* ============================================================
   Check tiles (t246_block_bullets default layout)
   ============================================================ */
.check-grid{list-style:none;padding:0;margin:var(--stack-list) auto 0;max-width:1040px;display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.check-tile{position:relative;flex:0 1 calc((100% - 32px) / 3);display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:var(--radius-lg);
  background:var(--white);border:1px solid var(--border-subtle);box-shadow:0 1px 2px rgba(14,23,42,.04),0 6px 18px -10px rgba(14,23,42,.10);
  font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1.45;color:var(--text-strong);
  transition:border-color var(--dur-premium,420ms) var(--ease-premium,ease),box-shadow var(--dur-premium,420ms) var(--ease-premium,ease)}
.check-tile:hover{border-color:rgba(0,157,105,.45);box-shadow:0 1px 2px rgba(14,23,42,.04),0 6px 18px -10px rgba(14,23,42,.10),0 0 0 3px rgba(0,189,125,.08)}
.check-icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;
  background:var(--green-50);border:1px solid var(--green-200);color:var(--brand-green-deep);
  transition:background var(--dur-premium,420ms) var(--ease-premium,ease),color var(--dur-premium,420ms) var(--ease-premium,ease),border-color var(--dur-premium,420ms) var(--ease-premium,ease)}
.check-icon svg{width:17px;height:17px;stroke-width:2.6}
.check-tile:hover .check-icon{background:linear-gradient(135deg,#00c985 0%,#009d69 100%);border-color:transparent;color:var(--white)}
.check-text a{color:var(--brand-green-deep)}
@media (max-width:1023px){.check-tile{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:640px){.check-grid{gap:10px}.check-tile{flex-basis:100%;padding:14px 16px;font-size:15px}.check-icon{width:30px;height:30px}}

/* ============================================================
   Steps timeline (t246_block_steps)
   ============================================================ */
.steps-track{position:relative;max-width:1120px;margin:calc(var(--stack-list) + 8px) auto 0}
.steps-flow{list-style:none;padding:0;margin:0;position:relative;
  display:grid;grid-template-columns:repeat(var(--steps,4),minmax(0,1fr));gap:20px;counter-reset:none}
/* dotted connector running through the number badges */
.steps-flow::before{content:"";position:absolute;top:28px;left:calc(100% / var(--steps,4) / 2);right:calc(100% / var(--steps,4) / 2);height:2px;z-index:0;
  background:repeating-linear-gradient(90deg,var(--green-300) 0 6px,transparent 6px 12px)}
.step-card{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,#00c985 0%,#009d69 100%);color:var(--white);font:var(--fw-extrabold) 20px/1 var(--font-sans);
  box-shadow:0 0 0 6px var(--section-bg,#f8faf9),0 0 0 7px var(--green-200),0 10px 22px -6px rgba(0,157,105,.5)}
.step-body{width:100%;flex:1;padding:20px 18px 22px;border-radius:var(--radius-lg);background:var(--white);border:1px solid var(--border-subtle);
  box-shadow:0 1px 2px rgba(14,23,42,.04),0 6px 18px -10px rgba(14,23,42,.10);transition:border-color var(--dur-premium,420ms) var(--ease-premium,ease)}
.step-card:hover .step-body{border-color:rgba(0,157,105,.45)}
.step-label{display:block;font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--brand-green-deep);margin-bottom:8px}
.step-text{margin:0;font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:1.5;color:var(--text-strong)}
@media (max-width:1023px){
  .steps-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .steps-flow::before{display:none}
}
@media (max-width:640px){
  .steps-flow{grid-template-columns:1fr;gap:14px;max-width:520px}
  .steps-flow::before{display:none}
  .step-card{flex-direction:row;align-items:flex-start;text-align:left;gap:14px}
  /* dotted connector from each badge down to the next one (none after the last step) */
  .step-card:not(:last-child)::after{content:"";position:absolute;left:23px;top:54px;bottom:-14px;width:2px;background:repeating-linear-gradient(180deg,var(--green-300) 0 6px,transparent 6px 12px)}
  .step-num{width:48px;height:48px;font-size:18px}
  .step-body{padding:14px 16px 16px}
}

/* ============================================================
   Legal pages (t246_render_legal in page-landing.php)
   Layout: dark hero, then a light page band holding the contents box and the document.
   The document starts BELOW the hero in normal flow (the band's own top padding sets the
   gap); nothing is pulled up over the hero with negative margins.
   ============================================================ */
.legal-meta{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-on-dark-muted)}
.legal-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--radius-pill);background:rgba(0,212,146,.12);border:1px solid rgba(0,212,146,.3);color:var(--brand-mint);font-size:12px;letter-spacing:.04em;text-transform:uppercase}
.legal-chip svg{width:14px;height:14px}
.legal-dot{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6}

.legal-page{background:var(--surface-page,#f8faf9);padding:56px 0 96px}
.legal-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:40px;align-items:start;max-width:1160px}
.legal-layout--single{grid-template-columns:minmax(0,1fr);max-width:880px} /* short policy without contents */
/* Contents */
.legal-toc{position:sticky;top:96px}
.legal-toc-box{background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:0 1px 2px rgba(14,23,42,.04);padding:8px}
.legal-toc-box summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 10px;font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-muted);cursor:default}
.legal-toc-box summary::-webkit-details-marker{display:none}
.legal-toc-box summary svg{display:none;width:18px;height:18px}
.legal-toc ol{list-style:none;margin:0;padding:0 0 4px;max-height:calc(100vh - 190px);overflow-y:auto;overscroll-behavior:contain}
.legal-toc a{position:relative;display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:var(--radius-sm);font-size:14px;line-height:1.45;font-weight:var(--fw-medium);color:var(--slate-600);
  transition:background-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.legal-toc a:hover{background:var(--surface-sunken);color:var(--text-strong)}
.legal-toc a.is-active{background:var(--green-50);color:var(--brand-green-deep);font-weight:var(--fw-semibold)}
.legal-toc a.is-active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--brand-green-deep)}
.legal-toc-num{flex:none;font:var(--fw-bold) 11px/1.4 var(--font-sans);color:var(--text-muted);font-variant-numeric:tabular-nums}
.legal-toc a.is-active .legal-toc-num{color:var(--brand-green-deep)}
.legal-toc li.is-sub a{padding-left:34px;font-size:13px}
/* Document */
.legal-doc{min-width:0;background:var(--white);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);
  box-shadow:0 1px 2px rgba(14,23,42,.04),0 16px 40px -28px rgba(14,23,42,.18);padding:52px 60px 44px;
  color:var(--slate-600);font-size:16px;line-height:1.75}
.legal-lead{font-size:var(--fs-body-lg);line-height:1.7;color:var(--text-strong);padding-bottom:28px;margin-bottom:8px;border-bottom:1px solid var(--border-subtle)}
.legal-lead p+p{margin-top:12px}
.legal-h2{display:flex;align-items:flex-start;gap:14px;margin:48px 0 14px;padding-top:40px;border-top:1px solid var(--border-subtle);color:var(--text-strong);font-size:24px;line-height:1.3;letter-spacing:-.015em;scroll-margin-top:100px}
.legal-doc > .legal-h2:first-child{margin-top:0;border-top:0;padding-top:0}
.legal-lead + .legal-h2{margin-top:28px;border-top:0;padding-top:0}
.legal-num{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:30px;margin-top:-1px;padding:0 8px;border-radius:8px;background:var(--green-50);border:1px solid var(--green-200);color:var(--brand-green-deep);font:var(--fw-bold) 13px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.legal-h3{margin:32px 0 10px;padding-left:14px;border-left:3px solid var(--brand-green);color:var(--text-strong);font-size:19px;line-height:1.35;letter-spacing:-.01em;scroll-margin-top:100px}
.legal-text p{margin:0}
.legal-text p+p,.legal-text + .legal-text{margin-top:16px}
.legal-text strong{color:var(--text-strong)}
.legal-text a{color:var(--brand-green-deep);font-weight:var(--fw-semibold)}
.legal-text ul,.legal-text ol{margin:12px 0;padding-left:22px}
.legal-text li+li{margin-top:6px}

/* Key-point lists inside the document: a quiet tinted panel with small tone icons, instead of
   a second shadowed card with a heavy side bar sitting inside the document card. The tone
   (green / warning / danger / info) still carries the meaning, just more softly. */
.legal-doc .bullet-panel{--bp-bg:#f6fbf8;--bp-line:#dff1e8;--bp-icon-bg:var(--green-100);--bp-icon:#047857;
  margin:20px 0 0;max-width:none;padding:6px 0;background:var(--bp-bg);border:1px solid var(--bp-line);border-radius:var(--radius-lg);box-shadow:none;overflow:visible}
.legal-doc .bullet-panel--warning{--bp-bg:#fffbf3;--bp-line:#f6e7c8;--bp-icon-bg:#fdefc8;--bp-icon:#b45309}
.legal-doc .bullet-panel--danger{--bp-bg:#fff8f8;--bp-line:#f8dede;--bp-icon-bg:#fde2e2;--bp-icon:#b91c1c}
.legal-doc .bullet-panel--info{--bp-bg:#f6f9ff;--bp-line:#dde7fa;--bp-icon-bg:#dde8fd;--bp-icon:#1d4ed8}
.legal-doc .bullet-panel li{gap:14px;padding:13px 22px;border-bottom:0;font-size:15.5px;line-height:1.65;color:var(--slate-700)}
.legal-doc .bullet-panel li::before{left:22px;right:22px;top:0;bottom:auto;width:auto;height:1px;background:var(--bp-line)}
.legal-doc .bullet-panel li:first-child::before{display:none}
.legal-doc .bullet-panel li .bp-icon{width:24px;height:24px;margin-top:1px;background:var(--bp-icon-bg);color:var(--bp-icon)}
.legal-doc .bullet-panel li .bp-icon svg{width:13px;height:13px;stroke-width:2.6}

.legal-doc .check-grid{max-width:none;justify-content:flex-start;margin-top:16px}
.legal-doc .check-tile{flex-basis:calc((100% - 16px) / 2)}
/* Cards inside the document (e.g. cookie types): flat, even, not clickable so no hover */
.legal-doc .legal-cards{margin-top:20px !important;gap:14px !important}
.legal-doc .legal-card{padding:22px 22px 20px;border-radius:var(--radius-lg);background:var(--white);box-shadow:none;gap:10px !important}
.legal-doc .legal-card:hover{box-shadow:none;border-color:var(--border-subtle)}
.legal-doc .legal-card h3{position:relative;padding-left:14px;font-size:17px !important;line-height:1.35;color:var(--text-strong)}
.legal-doc .legal-card h3::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:3px;border-radius:3px;background:var(--brand-green)}
.legal-doc .legal-card p{font-size:15px !important;line-height:1.65 !important;color:var(--slate-600) !important}
.legal-doc .t246-table-wrap{margin-top:18px !important}
/* Closing: contact + other policies */
.legal-end{margin-top:48px;padding-top:36px;border-top:1px solid var(--border-subtle);display:grid;gap:24px}
.legal-contact{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:var(--radius-lg);background:var(--surface-page,#f8faf9);border:1px solid var(--border-subtle)}
.legal-contact .icon-tile{flex:none;width:48px;height:48px}
.legal-end-title{margin:0;font-weight:var(--fw-bold);color:var(--text-strong);font-size:17px;line-height:1.4}
.legal-contact p:not(.legal-end-title){margin:2px 0 0;font-size:15px;line-height:1.6}
.legal-contact a{color:var(--brand-green-deep);font-weight:var(--fw-semibold)}
.legal-end-label{margin:0 0 10px;font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-muted)}
.legal-others div{display:flex;flex-wrap:wrap;gap:10px}
.legal-others a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:var(--white);font-size:14px;font-weight:var(--fw-semibold);color:var(--text-strong);
  transition:border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard)}
.legal-others a:hover{border-color:var(--brand-green-deep);color:var(--brand-green-deep);background:var(--green-50)}

@media (max-width:1023px){
  .legal-page{padding:40px 0 72px}
  .legal-layout{grid-template-columns:minmax(0,1fr);gap:16px;max-width:820px}
  .legal-toc{position:static}
  .legal-toc-box{padding:4px}
  .legal-toc-box summary{cursor:pointer;color:var(--text-strong);font-size:13px;padding:12px 14px}
  .legal-toc-box summary svg{display:block;transition:transform var(--dur-base) var(--ease-standard)}
  .legal-toc-box[open] summary svg{transform:rotate(180deg)}
  .legal-toc ol{max-height:none;padding:0 4px 8px}
  .legal-doc{padding:40px 40px 36px}
}
@media (max-width:640px){
  .legal-page{padding:20px 0 56px}
  .legal-layout{gap:12px}
  .legal-doc{padding:26px 20px 26px;border-radius:var(--radius-lg);font-size:15.5px;line-height:1.7}
  .legal-lead{font-size:16px}
  .legal-h2{font-size:20px;gap:10px;margin-top:36px;padding-top:28px}
  .legal-num{min-width:34px;height:28px;font-size:12px}
  .legal-h3{font-size:17px;margin-top:26px}
  .legal-doc .bullet-panel li{padding:12px 16px;gap:12px;font-size:15px}
  .legal-doc .bullet-panel li::before{left:16px;right:16px}
  .legal-doc .check-tile{flex-basis:100%}
  .legal-doc .legal-cards{grid-template-columns:1fr !important}
  .legal-contact{align-items:flex-start;padding:16px}
  .legal-contact .icon-tile{width:40px;height:40px}
}


/* ---- Steps timeline: pointer follows the scroll ----
   js/main.js measures the badge centres, lays a dotted rail from step 1 to the last step
   (.is-h = one row, .is-v = one column), and on scroll sets --p (0..1) plus the pointer's
   position. Steps the pointer has reached get .is-reached. Without JS, or in the 2x2 tablet
   layout, the rail stays hidden and the original dotted connector is shown. */
.steps-rail,.steps-pointer{display:none}
.steps-track.is-h .steps-rail,.steps-track.is-v .steps-rail{display:block;position:absolute;z-index:0;pointer-events:none;
  left:var(--rx,0);top:var(--ry,0);width:var(--rw,2px);height:var(--rh,2px)}
.steps-track.is-h .steps-rail{background:repeating-linear-gradient(90deg,var(--green-300) 0 6px,transparent 6px 12px)}
.steps-track.is-v .steps-rail{background:repeating-linear-gradient(180deg,var(--green-300) 0 6px,transparent 6px 12px)}
/* the stretch already travelled: same dots, deeper green, revealed by clipping (so dots never stretch) */
.steps-trail{position:absolute;inset:0}
.steps-track.is-h .steps-trail{background:repeating-linear-gradient(90deg,#00a36d 0 6px,transparent 6px 12px);clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
.steps-track.is-v .steps-trail{background:repeating-linear-gradient(180deg,#00a36d 0 6px,transparent 6px 12px);clip-path:inset(0 0 calc((1 - var(--p,0)) * 100%) 0)}
.steps-track.is-h .steps-flow::before,
.steps-track.is-v .step-card:not(:last-child)::after{display:none}
/* the pointer: sits under the badges, so it leaves step 1 and slides into the last step */
.steps-track.is-h .steps-pointer,.steps-track.is-v .steps-pointer{display:block;position:absolute;z-index:0;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  background:#fff;box-shadow:0 0 0 3px #00bd7d,0 0 14px 3px rgba(0,216,151,.55);will-change:transform}
.steps-pointer::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(0,216,151,.55);animation:t246-pointer-pulse 1.8s ease-out infinite}
@keyframes t246-pointer-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.4);opacity:0}}
/* a step lights up when the pointer reaches it */
.step-num{transition:box-shadow .45s var(--ease-premium,ease),transform .45s var(--ease-spring,ease)}
.steps-track.js-steps .step-card.is-reached .step-num{transform:scale(1.06);
  box-shadow:0 0 0 6px var(--section-bg,#f8faf9),0 0 0 7px var(--green-300),0 0 0 13px rgba(0,216,151,.16),0 10px 22px -6px rgba(0,157,105,.5)}
@media (prefers-reduced-motion:reduce){
  .steps-pointer::after{animation:none}
  .step-num{transition:none}
}

/* ============================================================
   About Us layouts ('layout' on a block in landing-content.php; rendered by
   t246_block_layout() / t246_block_features() in page-landing.php). Opt-in only.
   ============================================================ */
/* Hero eyebrow chip (any hero with 'eyebrow') */
.hero-eyebrow{display:inline-flex;align-items:center;height:30px;padding:0 14px;margin-bottom:20px;border-radius:var(--radius-pill);background:rgba(0,212,146,.12);border:1px solid rgba(0,212,146,.3);color:var(--brand-mint);font:var(--fw-bold) 12px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.lp-hero .hero-eyebrow + .lp-hero-h1{margin-top:0}

/* Small section label */
.lx-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--brand-green-deep)}
.lx-eyebrow::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--brand-green)}

/* Split: heading left, copy right */
.lx-split-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start;max-width:1120px;margin:0 auto}
.lx-split-head h2{margin:0;font-size:var(--fs-h2);font-weight:var(--fw-extrabold);line-height:1.12;letter-spacing:var(--ls-tight);color:var(--text-strong)}
.lx-split-body{padding-top:34px;color:var(--slate-600);font-size:var(--fs-body-lg);line-height:1.75}
.lx-split-body p{margin:0}
.lx-split-body p+p{margin-top:18px}
.lx-split-body p:first-child{font-size:20px;line-height:1.65;color:var(--text-strong);font-weight:var(--fw-medium)}
.lx-links{margin-top:32px;padding-top:26px;border-top:1px solid var(--border-subtle)}
.lx-links-label{margin:0 0 12px !important;font:var(--type-caps) !important;text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--text-muted) !important}
.lx-links-row{display:flex;flex-wrap:wrap;gap:10px}
.lx-link{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 16px;border-radius:var(--radius-pill);border:1px solid var(--border-subtle);background:var(--white);color:var(--text-strong);font-size:14px;font-weight:var(--fw-semibold);
  transition:border-color var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard),background-color var(--dur-base) var(--ease-standard)}
.lx-link svg{width:14px;height:14px;color:var(--text-muted);transition:transform var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.lx-link:hover{border-color:var(--brand-green-deep);color:var(--brand-green-deep);background:var(--green-50)}
.lx-link:hover svg{color:var(--brand-green-deep);transform:translate(1px,-1px)}

/* Pillars: Vision / Mission statement cards (not clickable, so no hover) */
.lx-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);max-width:1120px;margin:var(--stack-cards) auto 0}
.lx-pillar{position:relative;overflow:hidden;padding:36px 36px 38px;border-radius:var(--radius-2xl);background:var(--white);border:1px solid var(--border-subtle);box-shadow:0 1px 2px rgba(14,23,42,.04),0 16px 40px -30px rgba(14,23,42,.2)}
.lx-pillar::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#00c985,#009d69)}
.lx-pillar-top{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.lx-pillar-label{font:var(--type-caps);text-transform:uppercase;letter-spacing:var(--ls-caps);color:var(--brand-green-deep)}
.lx-pillar h3{margin:0 0 12px;font:var(--type-h3);letter-spacing:-.01em;color:var(--text-strong)}
.lx-pillar p{margin:0;font-size:17px;line-height:1.7;color:var(--slate-600)}

/* Rows: 2 x 2 wide cards, icon beside the text */
.feature-grid[data-layout="rows"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:1120px;margin-left:auto;margin-right:auto}
.feature-grid[data-layout="rows"]>.card{display:flex;flex-direction:row;align-items:flex-start;gap:20px;padding:30px 30px 32px}
.feature-grid[data-layout="rows"]>.card .icon-tile{flex:none}
.feature-grid[data-layout="rows"]>.card>div{gap:10px !important}
.feature-grid[data-layout="rows"]>.card p{line-height:1.7}

/* Bento: three cards on top, two wider cards below (no stranded short row) */
.feature-grid[data-layout="bento"]{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.feature-grid[data-layout="bento"]>.card{grid-column:span 2}
.feature-grid[data-layout="bento"]>.card:nth-child(n+4){grid-column:span 3}
.feature-grid[data-layout="bento"]>.card:nth-child(n+4){display:flex;flex-direction:row;align-items:flex-start;gap:20px}
.feature-grid[data-layout="bento"]>.card:nth-child(n+4) .icon-tile{flex:none}
.feature-grid[data-layout="bento"]>.card:nth-child(n+4)>div{gap:10px !important}

/* Closing call to action panel */
.lx-cta{position:relative;overflow:hidden;max-width:1120px;margin:0 auto;padding:64px 40px 68px;border-radius:28px;text-align:center;
  background:radial-gradient(90% 120% at 50% 0%,#0f5c3e 0%,#0b3f2b 55%,#0b2a22 100%);box-shadow:0 30px 60px -40px rgba(10,80,54,.6)}
.lx-cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(420px 220px at 12% 110%,rgba(0,216,151,.28),transparent 70%),radial-gradient(380px 200px at 90% -10%,rgba(0,216,151,.22),transparent 70%)}
.lx-cta>*{position:relative}
.lx-cta .section-heading{margin:0 auto}
.lx-cta .section-heading h2{color:var(--white)}
.lx-cta .section-heading p{color:rgba(255,255,255,.72)}

@media (max-width:1023px){
  .lx-split-grid{grid-template-columns:1fr;gap:12px;max-width:720px}
  .lx-split-body{padding-top:8px}
  .lx-split-head h2{font-size:32px}
  .feature-grid[data-layout="bento"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-grid[data-layout="bento"]>.card,.feature-grid[data-layout="bento"]>.card:nth-child(n+4){grid-column:span 1}
  .feature-grid[data-layout="bento"]>.card:nth-child(n+4){flex-direction:column}
  .feature-grid[data-layout="bento"]>.card:last-child:nth-child(odd){grid-column:1 / -1;flex-direction:row}
  .lx-pillar{padding:30px 28px 32px}
}
@media (max-width:1023px){.feature-grid[data-layout="rows"]{grid-template-columns:1fr;max-width:720px}}
@media (max-width:760px){.lx-pillars{grid-template-columns:1fr}}
@media (max-width:640px){
  .lx-split-body{font-size:16px}
  .lx-split-head h2{font-size:26px}
  .lx-split-body p:first-child{font-size:18px}
  .lx-links-row{gap:8px}
  .lx-link{height:36px;font-size:13.5px;padding:0 12px 0 14px}
  .feature-grid[data-layout="rows"]>.card,.feature-grid[data-layout="bento"]>.card:last-child:nth-child(odd){flex-direction:column;gap:16px;padding:24px}
  .feature-grid[data-layout="bento"]{grid-template-columns:1fr}
  .lx-pillar{padding:26px 22px 28px;border-radius:var(--radius-xl)}
  .lx-pillar p{font-size:16px}
  .lx-cta{padding:44px 20px 48px;border-radius:var(--radius-2xl);margin:0 -4px}
}

/* ============================================================
   Market page colours
   Each market page gets data-segment="..." on <body> (header.php).
   Inside that scope, the small highlights switch from brand green to the
   market's own colour (the same colours as the homepage cards).
   Kept green on purpose: logo, header, footer, "Open account" buttons,
   the dark stats band — so the site still reads as one brand.
   ============================================================ */
[data-segment="nse"]        {--seg:var(--seg-nse)}
[data-segment="nfo"]        {--seg:var(--seg-nfo)}
[data-segment="forex"]      {--seg:var(--seg-forex)}
[data-segment="commodities"]{--seg:var(--seg-commodities)}
[data-segment="crypto"]     {--seg:var(--seg-crypto)}
[data-segment="usstocks"]   {--seg:var(--seg-usstocks)}
[data-segment="indices"]    {--seg:var(--seg-indices)}

[data-segment]{
  --seg-soft:color-mix(in srgb,var(--seg) 9%,#fff);
  --seg-line:color-mix(in srgb,var(--seg) 28%,#fff);
  --seg-deep:color-mix(in srgb,var(--seg) 82%,#000);
  --text-accent:var(--seg-deep);
}

/* 1. Hero: a soft glow of the market colour, and the eyebrow pill */
[data-segment] .lp-hero{position:relative;
  background:radial-gradient(60% 70% at 50% 0%,color-mix(in srgb,var(--seg) 30%,transparent) 0%,transparent 70%),var(--grad-hero)}
[data-segment] .hero-eyebrow{background:color-mix(in srgb,var(--seg) 18%,transparent);
  border-color:color-mix(in srgb,var(--seg) 45%,transparent);color:color-mix(in srgb,var(--seg) 45%,#fff)}

/* 2. Section headings: the coloured word ("Why trade <span class=accent>NSE</span>") */
[data-segment] .section-heading .accent{color:var(--seg-deep)}

/* 3. Feature card icons (and their hover fill) */
[data-segment] .icon-tile{background:linear-gradient(160deg,var(--seg-soft) 0%,color-mix(in srgb,var(--seg) 16%,#fff) 100%);color:var(--seg-deep)}
[data-segment] .card:not(.card-flat):hover .icon-tile{background:var(--seg);color:#fff;
  box-shadow:0 10px 22px -6px color-mix(in srgb,var(--seg) 55%,transparent)}
[data-segment] .card:not(.card-flat):focus-within{border-color:var(--seg-line)}

/* 4. Checklist tiles */
[data-segment] .check-icon{background:var(--seg-soft);border-color:var(--seg-line);color:var(--seg-deep)}
[data-segment] .check-tile:hover{border-color:var(--seg-line);box-shadow:0 6px 18px -10px rgba(14,23,42,.10),0 0 0 3px color-mix(in srgb,var(--seg) 10%,transparent)}
[data-segment] .check-tile:hover .check-icon{background:var(--seg);border-color:transparent;color:#fff}

/* 5. "How to start" steps: number badges, dotted line, moving pointer */
[data-segment] .step-num{background:var(--seg);
  box-shadow:0 0 0 6px var(--section-bg,#f8faf9),0 0 0 7px var(--seg-line),0 10px 22px -6px color-mix(in srgb,var(--seg) 50%,transparent)}
[data-segment] .step-label{color:var(--seg-deep)}
[data-segment] .step-card:hover .step-body{border-color:var(--seg-line)}
[data-segment] .steps-flow::before{background:repeating-linear-gradient(90deg,var(--seg-line) 0 6px,transparent 6px 12px)}
[data-segment] .steps-track.is-h .steps-rail{background:repeating-linear-gradient(90deg,var(--seg-line) 0 6px,transparent 6px 12px)}
[data-segment] .steps-track.is-v .steps-rail{background:repeating-linear-gradient(180deg,var(--seg-line) 0 6px,transparent 6px 12px)}
[data-segment] .steps-track.is-h .steps-trail{background:repeating-linear-gradient(90deg,var(--seg) 0 6px,transparent 6px 12px)}
[data-segment] .steps-track.is-v .steps-trail{background:repeating-linear-gradient(180deg,var(--seg) 0 6px,transparent 6px 12px)}
[data-segment] .steps-track.is-h .steps-pointer,[data-segment] .steps-track.is-v .steps-pointer{box-shadow:0 0 0 3px var(--seg),0 0 14px 3px color-mix(in srgb,var(--seg) 50%,transparent)}
[data-segment] .steps-pointer::after{border-color:color-mix(in srgb,var(--seg) 55%,transparent)}
[data-segment] .steps-track.js-steps .step-card.is-reached .step-num{
  box-shadow:0 0 0 6px var(--section-bg,#f8faf9),0 0 0 7px var(--seg-line),0 0 0 13px color-mix(in srgb,var(--seg) 16%,transparent),0 10px 22px -6px color-mix(in srgb,var(--seg) 50%,transparent)}

/* 6. Links inside body copy and FAQ answers */
[data-segment] .faq-answer a,[data-segment] .section-heading p a,[data-segment] .check-text a,[data-segment] .lp-hero-body a{color:var(--seg-deep)}
/* 7. Feature cards: the glowing border that follows the mouse on hover */
[data-segment] .card:not(.card-flat)::after{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--seg) 95%,transparent),color-mix(in srgb,var(--seg) 25%,transparent) 45%,color-mix(in srgb,var(--seg) 8%,transparent) 75%)}
[data-segment] .card:not(.card-flat):hover{border-color:color-mix(in srgb,var(--seg) 18%,transparent)}
/* Phones: dotted line between steps (shown before the page script takes over) */
@media (max-width:640px){
  [data-segment] .step-card:not(:last-child)::after{background:repeating-linear-gradient(180deg,var(--seg-line) 0 6px,transparent 6px 12px)}
}

/* Check tiles: a list of exactly 4 sits in one row of 4 on desktop (2 per row on tablet,
   1 on phones, as before). The row is a little wider so each tile keeps room for its text. */
@media (min-width:1024px){
  .check-grid[data-count="4"]{max-width:1200px}
  .check-grid[data-count="4"] .check-tile{flex-basis:calc((100% - 48px) / 4)}
  .legal-doc .check-grid[data-count="4"] .check-tile{flex-basis:calc((100% - 16px) / 2)}
}

/* Landing sections keep their content's margins inside them. Without this, the top margin of a
   heading-less paragraph (e.g. the note under "What Makes Index Trading Different?") leaked out
   of its section and left a thin strip of the grey page background between two white sections. */
section[style*="--section-bg"]{display:flow-root}