/* ik-marketing.css — shared light-marketing design tokens (canonical palette).
   Consolidates the byte-identical :root previously copy-pasted into index/ssc/free-practice.
   Brand aligned to canonical maroon #8A2432 (Phase G); warm-cream neutrals + bronze gold
   preserved as the deliberate marketing aesthetic. Pages with bespoke token systems
   (demo/test/dark-utility) intentionally keep their own inline :root. */
:root{
  --acc:#8A2432;--acc-dark:#5C1220;--acc-soft:rgba(138,36,50,0.08);
  --acc-border:rgba(138,36,50,0.2);--bg:#ffffff;--bg2:#fafaf8;--bg3:#f3f1ec;
  --bg-dark:#111;--text:#1a1a1a;--text2:#555;--text3:#888;
  --border:#e6e3dc;--border2:#d4d0c7;--gold:#b08d57;--green:#278456;
  /* Typography tokens (mirror ik-tokens.css; marketing pages load this sheet, not ik-tokens).
     Self-hosted faces via ik-fonts.css. Font unification 2026-07-13. */
  --font-body:'Lato','Segoe UI',Arial,sans-serif;
  --font-heading:var(--font-body);
  --font-display:'Bebas Neue',Impact,var(--font-body);
  --font-logo:'Playfair Display',Georgia,serif;
  --font-bengali:'Hind Siliguri','Noto Sans Bengali',var(--font-body);
  --font-mono:'Courier New',monospace;
  --font-exam:Arial,Helvetica,sans-serif;
  --font-passage:var(--font-exam);
}

/* ============================================================================
   PREMIUM MARKETING KIT  (Phase 0, 2026-07-17)
   Canonical component layer extracted from the redesigned Bengali homepage.
   ADDITIVE: the --acc/--bg legacy tokens above are untouched (11 not-yet-migrated
   pages still depend on them). Every kit class is ik-prefixed so it never
   collides with a page's own inline CSS. Migrate a marketing page by dropping its
   bespoke <style> + inline i18n and rebuilding on these classes + /js/ik-i18n.js.
   Bengali-first: base font = Hind Siliguri; display accents = Bebas Neue.
   ========================================================================== */
:root{
  --ink:#111114; --ink2:#17171c; --panel:#1c1c23;
  --paper:#F7F7F9; --surface:#ffffff;
  --hi:#F7F7F8; --mid:#B7B7C0; --lo:#85858F;
  --dk:#18181B; --dk2:#5b5b63; --dk3:#8a8a93;
  --maroon:#8A2432; --maroon-hi:#A02A3A; --maroon-deep:#5C1220; --maroon-soft:#F8ECEE;
  --gold-hi:#cba76f; --gold-dim:rgba(176,141,87,0.28);
  --linedk:#2c2c33; --linelt:#E7E7EB;
  /* font aliases the kit references (map onto the --font-* tokens above) */
  --fdisp:var(--font-display); --fbody:var(--font-body);
  --fserif:var(--font-logo);   --fbn:var(--font-bengali);
}

/* page shell */
.ik-page{font-family:var(--fbn);color:var(--dk);background:var(--surface);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-wrap:pretty}
.ik-page img{max-width:100%}
.ik-page a{color:var(--maroon);text-decoration:none}
.ik-page a:hover{color:var(--maroon-hi)}
.ik-page ::selection{background:var(--maroon);color:#fff}

/* section shells + wrap */
.ik-sec{background:var(--paper)}
.ik-sec--surface{background:var(--surface)}
.ik-sec--dark{background:var(--ink);color:var(--hi)}
.ik-sec--line-t{border-top:1px solid var(--linelt)}
.ik-sec--line-b{border-bottom:1px solid var(--linelt)}
.ik-wrap{max-width:1240px;margin:0 auto;padding:clamp(56px,7vw,104px) clamp(18px,5vw,80px)}
.ik-wrap--tight{padding:clamp(38px,4vw,64px) clamp(18px,5vw,80px)}

/* eyebrow / heading / lead */
.ik-eyebrow{font-family:var(--fdisp);font-size:16px;letter-spacing:0.24em;color:var(--maroon);margin-bottom:14px}
.ik-sec--dark .ik-eyebrow{color:var(--gold)}
.ik-h2{font-family:var(--fbn);font-weight:700;font-size:clamp(30px,4vw,52px);line-height:1.1;margin:0 0 20px;color:var(--dk)}
.ik-sec--dark .ik-h2{color:#fff}
.ik-h3{font-family:var(--fbn);font-weight:700;font-size:22px;line-height:1.25;margin:0;color:var(--dk)}
.ik-hl{color:var(--maroon)}
.ik-sec--dark .ik-hl{color:var(--gold)}
.ik-lead{font-family:var(--fserif);font-style:italic;font-size:clamp(17px,1.7vw,20px);line-height:1.5;margin:0;color:var(--dk2)}
.ik-sec--dark .ik-lead{color:var(--mid)}

/* buttons */
.ik-btn{font-family:var(--fbn);font-weight:700;font-size:15px;padding:14px 24px;display:inline-flex;gap:9px;align-items:center;justify-content:center;text-align:center;border:1px solid transparent;transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease}
.ik-btn:hover{transform:translateY(-2px)}
.ik-btn--primary{background:var(--maroon);color:#fff}
.ik-btn--primary:hover{background:var(--maroon-hi);color:#fff}
/* B325: `.ik-page a{color:maroon}` (0,1,1) out-ranks the single-class button colours, painting primary-button text maroon-on-maroon. Match its specificity. */
.ik-page a.ik-btn--primary,.ik-page a.ik-btn--primary:hover{color:#fff}
.ik-page a.ik-btn--gold{color:var(--gold-hi)}
.ik-btn--outline{border-color:var(--maroon);color:var(--maroon);background:transparent}
.ik-btn--outline:hover{color:var(--maroon-hi);border-color:var(--maroon-hi)}
.ik-btn--gold{border-color:var(--gold);color:var(--gold-hi);background:transparent}
.ik-btn--onblack{background:#fff;color:var(--maroon)}

/* nav pills */
.ik-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--fdisp);font-size:13px;letter-spacing:0.1em;padding:9px 18px;border:1px solid var(--gold-dim);color:var(--gold-hi);background:transparent}
.ik-pill:hover{border-color:var(--gold);color:var(--gold-hi)}

/* offer badge */
.ik-offer{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:var(--gold-hi);color:var(--maroon-deep);font-family:var(--fbn);font-weight:700;font-size:13.5px;padding:7px 12px}

/* cards */
.ik-card{background:var(--surface);border:1px solid var(--linelt);padding:30px 26px;display:flex;flex-direction:column}
.ik-card--dark{background:var(--ink);color:var(--hi);border-color:var(--maroon);box-shadow:0 24px 50px rgba(138,36,50,0.2)}
.ik-card--pop{position:relative}
.ik-card__flag{position:absolute;top:0;right:0;background:var(--maroon);color:#fff;font-family:var(--fdisp);font-size:13px;letter-spacing:0.14em;padding:6px 14px}

/* big display price */
.ik-price{font-family:var(--fdisp);font-size:48px;line-height:0.9;color:var(--maroon)}
.ik-card--dark .ik-price{color:var(--gold)}
.ik-price-strike{font-family:var(--fdisp);font-size:26px;line-height:0.9;color:var(--dk3);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--maroon-hi)}
.ik-card--dark .ik-price-strike{color:var(--lo);text-decoration-color:var(--gold-hi)}

/* even-fill hairline grids */
.ik-grid{display:grid;gap:1px;background:var(--linelt);border:1px solid var(--linelt)}
.ik-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ik-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ik-grid--dark{background:var(--linedk);border-color:var(--linedk)}
@media(max-width:760px){.ik-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.ik-grid--3,.ik-grid--2{grid-template-columns:1fr}}

/* check list */
.ik-checks{display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--dk)}
.ik-card--dark .ik-checks{color:var(--hi)}
.ik-checks>span{display:flex;gap:9px;align-items:center}

/* focus + motion */
.ik-page a:focus-visible,.ik-page button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.ik-page a,.ik-page button,.ik-btn{transition:none}}
@keyframes ik-blink{0%,100%{opacity:1}50%{opacity:.22}}

/* ── Unscripta national brand (RESTRUCTURE_PLAN.md P2) ────────────────────────────
   The marketing kit carries its OWN palette and does not load css/ik-tokens.css
   (verified: 0 of 25 study-abroad pages link it), so the brand override has to be
   repeated here — the equivalent block in ik-tokens.css covers the app surface
   (student-dashboard, hubs) that P6 mirrors.

   Set by js/brand.js as <html data-brand="unscripta"> before first paint; IK sets no
   attribute, so this is a pure override and cannot regress the live IK pages. Only
   the --maroon family moves: --gold-* stays as-is, being a neutral decorative accent
   that reads correctly against both brands. This kit has no dark-theme block, so
   there is no dark cascade to re-check on this surface. */
[data-brand="unscripta"]{
  --maroon:#5B4BFF;
  --maroon-hi:#7264FF;
  --maroon-deep:#3F35C9;
  --maroon-soft:#EEECFF;
}