/* ============================================================
   ChemistOrder — a unit of Shivam Securities
   Shared stylesheet.  Palette + type scale live here; every
   page pulls from this one file.
   ============================================================ */

:root{
  --ink:        #0F1B33;
  --ink-soft:   #3D4A63;
  --muted:      #6B7A99;
  --line:       #E3E9F2;
  --line-soft:  #EEF2F8;

  --navy:       #1E2A5A;
  --navy-700:   #2B3B7A;
  --navy-900:   #14204A;
  --teal:       #0EA5A4;
  --teal-600:   #0B8A89;
  --teal-200:   #C7EEEC;
  --amber:      #E8952A;

  --bg:         #FFFFFF;
  --surface:    #F6F8FC;
  --surface-2:  #EDF2FA;

  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  24px;

  --shadow-sm:  0 1px 2px rgba(15,27,51,.05), 0 2px 8px rgba(15,27,51,.04);
  --shadow-md:  0 2px 4px rgba(15,27,51,.05), 0 12px 32px rgba(15,27,51,.07);

  --wrap:       1140px;
  --font-body:  'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-disp:  'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{ font-family:var(--font-disp); font-weight:800; line-height:1.15; letter-spacing:-.02em; margin:0 0 .6em; color:var(--ink); }
h1{ font-size:clamp(2.1rem, 1.3rem + 3.2vw, 3.6rem); letter-spacing:-.035em; }
h2{ font-size:clamp(1.65rem, 1.15rem + 1.9vw, 2.5rem); letter-spacing:-.03em; }
h3{ font-size:1.16rem; letter-spacing:-.015em; }
h4{ font-size:1rem; letter-spacing:-.01em; }
p{ margin:0 0 1.1em; }
a{ color:var(--teal-600); text-decoration:none; }
a:hover{ text-decoration:underline; }
strong{ font-weight:650; color:var(--ink); }
ul,ol{ margin:0 0 1.2em; padding-left:1.25em; }
li{ margin-bottom:.45em; }
hr{ border:0; border-top:1px solid var(--line); margin:2.6rem 0; }
img,svg{ max-width:100%; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.narrow{ max-width:820px; }

.lede{ font-size:1.14rem; color:var(--ink-soft); line-height:1.72; }
.muted{ color:var(--muted); }
.small{ font-size:.875rem; }
.center{ text-align:center; }

/* ---------- eyebrow / section head ---------- */
.eyebrow{
  display:inline-block; font-family:var(--font-disp); font-weight:700;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--teal-600); margin-bottom:.9rem;
}
.section{ padding:88px 0; }
.section.tight{ padding:64px 0; }
.section.alt{ background:var(--surface); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.sec-head{ max-width:720px; margin-bottom:52px; }
.sec-head.center{ margin-left:auto; margin-right:auto; }
.sec-head p{ margin-bottom:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-disp); font-weight:700; font-size:.95rem;
  padding:13px 24px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{ background:var(--teal); color:#fff; box-shadow:0 6px 18px rgba(14,165,164,.28); }
.btn-primary:hover{ background:var(--teal-600); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-dark:hover{ background:var(--navy-900); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--muted); background:#fff; }
.btn-on-dark{ background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.28); }
.btn-on-dark:hover{ background:rgba(255,255,255,.18); }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- header ---------- */
.topbar{
  background:var(--navy-900); color:#C6D2E8;
  font-size:.79rem; letter-spacing:.01em;
}
.topbar .wrap{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center; justify-content:space-between; min-height:38px; padding-top:7px; padding-bottom:7px; }
.topbar a{ color:#fff; }
.topbar .tb-legal{ color:#8FA3C4; }

header.site{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
header.site .wrap{ display:flex; align-items:center; gap:24px; min-height:72px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.brand:hover{ text-decoration:none; }
.brand svg{ width:38px; height:38px; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:var(--font-disp); font-weight:800; font-size:1.22rem; letter-spacing:-.035em; color:var(--navy); }
.brand-name em{ font-style:normal; color:var(--teal); }
.brand-sub{ font-size:.6rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:4px; }

nav.main{ margin-left:auto; display:flex; align-items:center; gap:4px; }
nav.main a{
  font-family:var(--font-disp); font-weight:600; font-size:.93rem; color:var(--ink-soft);
  padding:8px 13px; border-radius:8px;
}
nav.main a:hover{ color:var(--navy); background:var(--surface); text-decoration:none; }
nav.main a.active{ color:var(--navy); }
nav.main .btn{ margin-left:8px; padding:10px 20px; }

.navtoggle{ display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:9px; padding:8px 11px; cursor:pointer; }
.navtoggle span{ display:block; width:19px; height:2px; background:var(--navy); border-radius:2px; }
.navtoggle span + span{ margin-top:4px; }

/* ---------- hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1000px 460px at 88% -8%, rgba(14,165,164,.18), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(43,59,122,.16), transparent 60%),
    linear-gradient(180deg,#FBFCFE 0%, #F4F7FC 100%);
  border-bottom:1px solid var(--line-soft);
  padding:78px 0 84px;
}
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.hero h1{ margin-bottom:.45em; }
.hero h1 .hl{ color:var(--teal-600); }
.hero .lede{ font-size:1.2rem; max-width:36em; }
.hero .btn-row{ margin-top:30px; }
.hero-note{ margin-top:26px; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:8px; }
.hero-note svg{ width:15px; height:15px; flex-shrink:0; color:var(--teal); }

/* channel panel in hero */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:26px;
}
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.panel-title{ font-family:var(--font-disp); font-weight:800; font-size:1rem; color:var(--navy); }
.live{ display:inline-flex; align-items:center; gap:7px; font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-600); }
.live i{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 0 rgba(14,165,164,.55); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 9px rgba(14,165,164,0);} 100%{ box-shadow:0 0 0 0 rgba(14,165,164,0);} }

.chan{ display:flex; align-items:center; gap:14px; padding:13px 0; border-top:1px solid var(--line-soft); }
.chan:first-of-type{ border-top:0; }
.chan-ico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex-shrink:0;
  background:var(--surface-2); color:var(--navy-700);
}
.chan-ico svg{ width:19px; height:19px; }
.chan-body{ flex:1; min-width:0; }
.chan-name{ display:block; font-family:var(--font-disp); font-weight:700; font-size:.95rem; color:var(--ink); }
.chan-desc{ display:block; font-size:.82rem; color:var(--muted); line-height:1.5; margin-top:2px; }

/* ---------- trust strip ---------- */
.trust{ background:var(--navy); color:#fff; }
.trust .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.11); }
.trust-cell{ background:var(--navy); padding:26px 22px; }
.trust-k{ font-family:var(--font-disp); font-weight:800; font-size:1.28rem; letter-spacing:-.02em; color:#fff; }
.trust-v{ font-size:.8rem; color:#A9BAD9; margin-top:3px; line-height:1.45; }

/* ---------- cards ---------- */
.grid{ display:grid; gap:22px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover{ border-color:var(--teal-200); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card h3{ margin-bottom:.5em; }
.card p{ font-size:.93rem; color:var(--ink-soft); margin-bottom:0; line-height:1.65; }
.card .ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:18px;
  background:linear-gradient(135deg, rgba(43,59,122,.10), rgba(14,165,164,.16)); color:var(--navy-700);
}
.card .ico svg{ width:22px; height:22px; }
.card.flat:hover{ transform:none; box-shadow:none; border-color:var(--line); }

/* numbered steps */
.step{ position:relative; padding-left:0; }
.step-n{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:16px;
  background:var(--navy); color:#fff; font-family:var(--font-disp); font-weight:800; font-size:.9rem;
}

/* check list */
.checks{ list-style:none; padding:0; margin:0; }
.checks li{ position:relative; padding-left:30px; margin-bottom:12px; color:var(--ink-soft); font-size:.95rem; }
.checks li::before{
  content:""; position:absolute; left:0; top:.44em; width:17px; height:17px; border-radius:50%;
  background:var(--teal-200);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B8A89' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px; background-repeat:no-repeat; background-position:center;
}

/* pill tags */
.pills{ display:flex; flex-wrap:wrap; gap:9px; }
.pill{
  font-family:var(--font-disp); font-size:.82rem; font-weight:600;
  padding:7px 14px; border-radius:999px; background:var(--surface-2); color:var(--navy-700);
  border:1px solid var(--line);
}

/* ---------- legal / fact table ---------- */
.factbox{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.factbox .fhead{
  background:var(--navy); color:#fff; padding:18px 24px;
  font-family:var(--font-disp); font-weight:800; font-size:1rem; letter-spacing:-.01em;
}
.facts{ width:100%; border-collapse:collapse; }
.facts th,.facts td{ text-align:left; padding:14px 24px; border-top:1px solid var(--line-soft); font-size:.93rem; vertical-align:top; }
.facts tr:first-child th,.facts tr:first-child td{ border-top:0; }
.facts th{ width:250px; font-weight:600; color:var(--muted); font-family:var(--font-body); }
.facts td{ color:var(--ink); font-weight:550; }
.facts td.mono{ font-family:ui-monospace,'Cascadia Mono',Consolas,monospace; letter-spacing:.02em; font-weight:600; }

/* ---------- callout ---------- */
.callout{
  border:1px solid var(--line); border-left:4px solid var(--teal);
  background:var(--surface); border-radius:var(--radius-sm);
  padding:20px 24px; margin:26px 0;
}
.callout p:last-child{ margin-bottom:0; }
.callout.warn{ border-left-color:var(--amber); }
.callout h4{ margin-bottom:.45em; }

/* ---------- CTA band ---------- */
.cta{
  background:
    radial-gradient(700px 340px at 82% 10%, rgba(14,165,164,.30), transparent 60%),
    linear-gradient(135deg, var(--navy-900), var(--navy-700));
  color:#fff; padding:72px 0;
}
.cta h2{ color:#fff; }
.cta p{ color:#C3D0E8; }
.cta .btn-primary{ box-shadow:none; }

/* ---------- footer ---------- */
footer.site{ background:#0B142B; color:#93A4C4; padding:60px 0 30px; font-size:.9rem; }
footer.site .fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; }
footer.site h4{ color:#fff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.1em; }
footer.site a{ color:#B9C7E0; }
footer.site a:hover{ color:#fff; }
footer.site ul{ list-style:none; padding:0; margin:0; }
footer.site li{ margin-bottom:.6em; }
footer.site .flogo{ width:210px; margin-bottom:18px; }
footer.site .fabout{ line-height:1.72; color:#8FA0BF; }
.fbot{
  margin-top:44px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-size:.82rem; color:#7B8CAC;
}
.fbot .flinks{ display:flex; flex-wrap:wrap; gap:18px; }
.legal-line{ font-size:.82rem; color:#7B8CAC; line-height:1.7; }
.legal-line strong{ color:#C9D6EC; font-weight:600; }

/* ---------- policy pages ---------- */
.pagehead{
  background:linear-gradient(180deg,#F7F9FD,#FFFFFF);
  border-bottom:1px solid var(--line-soft); padding:60px 0 46px;
}
.pagehead h1{ font-size:clamp(1.9rem,1.3rem + 2.2vw,2.8rem); margin-bottom:.35em; }
.pagehead .lede{ margin-bottom:0; }
.crumb{ font-size:.82rem; color:var(--muted); margin-bottom:1.4rem; }
.crumb a{ color:var(--muted); }

.doc{ padding:56px 0 84px; }
.doc h2{ font-size:1.45rem; margin-top:2.4rem; padding-top:2.2rem; border-top:1px solid var(--line-soft); }
.doc h2:first-of-type{ margin-top:0; padding-top:0; border-top:0; }
.doc h3{ margin-top:1.9rem; }
.doc p,.doc li{ color:var(--ink-soft); }
.doc .updated{
  display:inline-block; font-size:.8rem; font-weight:600; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 15px; margin-bottom:2rem;
}
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:20px 24px; margin-bottom:2.4rem; }
.toc h4{ font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:.9em; }
.toc ol{ margin:0; padding-left:1.2em; columns:2; column-gap:34px; }
.toc li{ font-size:.9rem; margin-bottom:.35em; break-inside:avoid; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .g4{ grid-template-columns:repeat(2,1fr); }
  .trust .wrap{ grid-template-columns:repeat(2,1fr); }
  footer.site .fgrid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:820px){
  nav.main{
    display:none; position:absolute; top:100%; left:0; right:0; background:#fff;
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    padding:12px 24px 20px; gap:2px; box-shadow:var(--shadow-md);
  }
  nav.main.open{ display:flex; }
  nav.main a{ padding:11px 4px; }
  nav.main .btn{ margin:10px 0 0; justify-content:center; }
  .navtoggle{ display:block; }
  header.site .wrap{ position:relative; }
}
@media (max-width:680px){
  .section{ padding:60px 0; }
  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .facts th{ width:auto; display:block; padding-bottom:2px; border-top:0; }
  .facts td{ display:block; padding-top:0; border-top:0; }
  .facts tr{ display:block; border-top:1px solid var(--line-soft); padding:12px 0; }
  .facts tr:first-child{ border-top:0; }
  .toc ol{ columns:1; }
  footer.site .fgrid{ grid-template-columns:1fr; }
  .brand-sub{ display:none; }
}