/* ===========================================================================
   CryptoInvestIndia — Editorial Authority design system
   Direction approved 2026-06-09 (Stitch concept). Newsreader + Public Sans,
   brand blue #0058be, CTA orange #fd761a, light surface. Scoped to pages that
   load this stylesheet (homepage first); does NOT touch main.css / /invest/*.
   =========================================================================== */
:root{
  --surface:#f8f9ff; --surface-low:#eff4ff; --surface-container:#e6eeff;
  --white:#ffffff; --on-surface:#121c2a; --on-surface-variant:#424754;
  --outline:#727785; --outline-variant:#c2c6d6;
  --primary:#0058be; --primary-container:#2170e4; --on-primary:#ffffff;
  --primary-fixed:#d8e2ff; --on-primary-fixed:#001a42;
  --cta:#fd761a; --cta-hover:#e8650d; --cta-strong:#9d4300; --on-cta:#ffffff;
  --success:#0e7c52; --success-bg:#e3f4ea;
  --shadow:0 4px 12px rgba(18,28,42,.06); --shadow-lg:0 8px 28px rgba(18,28,42,.10);
  --radius:8px; --radius-sm:4px; --maxw:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--on-surface);
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:"Newsreader",Georgia,serif;font-weight:700;letter-spacing:-.015em;line-height:1.18;color:var(--on-surface)}
h1{font-size:clamp(34px,5vw,52px)}
h2{font-size:clamp(26px,3.4vw,38px);margin:0 0 .5em}
h3{font-size:clamp(20px,2.2vw,26px);font-weight:600;margin:1.4em 0 .4em}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
li{margin:.3em 0}
img{max-width:100%;height:auto;display:block}
table{border-collapse:collapse}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:860px;margin:0 auto;padding:0 24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.highlight{color:var(--primary)}
figure{margin:0}
.image-container img{border-radius:var(--radius)}

/* ---- CTA buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  font-family:"Public Sans",sans-serif;font-weight:600;font-size:15px;letter-spacing:.01em;
  border:none;border-radius:var(--radius-sm);padding:13px 26px;transition:all .2s ease;text-decoration:none}
.btn--cta{background:var(--cta);color:var(--on-cta);box-shadow:0 2px 8px rgba(253,118,26,.3)}
.btn--cta:hover{background:var(--cta-hover);text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:#00489c;text-decoration:none}
.btn--lg{padding:15px 36px;font-size:16px}
.cta-note{font-size:11.5px;color:var(--on-surface-variant);margin:8px 0 0;line-height:1.45}
.text-cta{display:inline-block;font-weight:600;color:var(--cta-strong);border-bottom:2px solid var(--cta);padding-bottom:1px}
.text-cta:hover{text-decoration:none;color:#7a3500}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:"Public Sans";font-size:12px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;background:var(--surface-container);color:var(--primary);border-radius:999px;padding:5px 12px}
.chip--cta{background:#fff3e8;color:var(--cta-strong)}
.rating{display:inline-flex;align-items:center;gap:5px;background:var(--success-bg);color:var(--success);font-weight:700;font-size:14px;border-radius:6px;padding:3px 9px}

/* ---- trust bar ---- */
.trustbar{background:#fff;border-bottom:1px solid var(--outline-variant)}
.trustbar__row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;padding:9px 24px;font-size:13px;color:var(--on-surface-variant)}
.trustbar__row b{color:var(--on-surface)}
.trustbar svg{vertical-align:-3px;margin-right:4px}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--outline-variant)}
.site-header__inner{display:flex;align-items:center;gap:22px;height:68px}
.header__logo{height:40px;width:auto}
.brand{font-family:"Newsreader",serif;font-weight:700;font-size:22px;color:var(--on-surface);letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--primary)}
.nav{display:flex;gap:20px;margin-left:8px;font-weight:500;font-size:15px;position:relative}
.nav>a,.dropdown-toggle{color:var(--on-surface);cursor:pointer}
.nav>a:hover,.dropdown-toggle:hover{color:var(--primary);text-decoration:none}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:130%;left:0;min-width:300px;background:#fff;border:1px solid var(--outline-variant);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:8px;display:none;flex-direction:column;gap:2px;z-index:60}
.dropdown:hover .dropdown-menu{display:flex}
.dropdown-menu a{color:var(--on-surface);font-size:14px;font-weight:500;padding:9px 12px;border-radius:var(--radius-sm)}
.dropdown-menu a:hover{background:var(--surface-low);text-decoration:none;color:var(--primary)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.lang-switcher{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600}
.lang-switcher a{color:var(--on-surface-variant);padding:3px 7px;border-radius:4px;text-decoration:none}
.lang-switcher a:hover,.lang-switcher a.active{background:var(--primary);color:#fff}

/* ---- mobile burger menu ---- */
.burger{display:none;background:none;border:1px solid var(--outline-variant);border-radius:var(--radius-sm);cursor:pointer;padding:8px 9px;color:var(--on-surface);line-height:0}
.mobile-menu{display:none;position:fixed;inset:68px 0 0 0;background:#fff;z-index:55;padding:18px 24px;overflow-y:auto;flex-direction:column}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--on-surface);font-size:17px;font-weight:600;padding:13px 6px;border-bottom:1px solid var(--surface-container);text-decoration:none}
.mobile-menu a.sub{font-size:14.5px;font-weight:500;color:var(--on-surface-variant);padding-left:18px}
.mobile-menu .mm-lang{display:flex;gap:10px;padding:16px 6px 6px}
.mobile-menu .mm-lang a{border:1px solid var(--outline-variant);border-radius:var(--radius-sm);padding:8px 16px;border-bottom:1px solid var(--outline-variant)}
.mobile-menu .mm-lang a.active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ---- hero ---- */
.hero{padding:54px 0 40px}
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero h1{margin:14px 0 18px}
.hero__lead{font-size:19px;color:var(--on-surface-variant);margin-bottom:24px}
.hero__byline{display:flex;align-items:center;gap:10px;margin-bottom:24px;font-size:13.5px;color:var(--on-surface-variant)}
.hero__byline img{width:40px;height:40px;border-radius:50%;border:1px solid var(--outline-variant)}
.hero__byline b{color:var(--on-surface)}

/* ---- editor pick card ---- */
.pick{background:#fff;border:1px solid var(--outline-variant);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:24px}
.pick__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pick__brand{font-family:"Public Sans";font-weight:700;font-size:24px;color:var(--on-surface)}
.pick__sub{font-size:15px;color:var(--on-surface-variant);font-weight:500;margin:4px 0 16px}
.pick__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
.pick__stats .k{font-size:12px;color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.pick__stats .v{font-weight:700;font-size:16px}

/* ---- sections ---- */
.section{padding:44px 0}
.section--alt{background:var(--surface-low)}
.section--tight{padding:30px 0}
.disclosure{max-width:840px;margin:0 auto 24px;font-size:13px;color:var(--on-surface-variant);
  background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--radius);padding:12px 18px;text-align:center}

/* ---- offer showcase: editorial OVERRIDE of middleware-injected styles ----
   Middleware injects `.crypto-showcase-container .card{background:#2a160f;...}`.
   These rules add an element selector (article.card / a.header__button) to win
   specificity WITHOUT editing _middleware.js (engagement-widget guardrail). */
.crypto-showcase-container .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.crypto-showcase-container article.card{background:#fff;border:1px solid var(--outline-variant);border-radius:var(--radius);
  box-shadow:var(--shadow);color:var(--on-surface);text-align:left;padding:22px}
.crypto-showcase-container article.card:hover{box-shadow:var(--shadow-lg)}
.crypto-showcase-container article.card .logo{height:46px;margin-bottom:10px;justify-content:flex-start}
.crypto-showcase-container article.card .logo img{max-height:34px;max-width:140px}
.crypto-showcase-container article.card .logo-fallback{color:var(--primary);font-size:19px;background:none}
.crypto-showcase-container article.card .name{color:var(--on-surface);font-family:"Newsreader",serif;font-size:21px;font-weight:700}
.crypto-showcase-container article.card .kicker{color:var(--cta-strong)}
.crypto-showcase-container article.card .bonus{color:var(--on-surface-variant)}
.crypto-showcase-container article.card a.header__button{background:var(--cta);color:#fff;border-radius:var(--radius-sm);height:44px;box-shadow:0 2px 8px rgba(253,118,26,.3)}
.crypto-showcase-container article.card a.header__button:hover{background:var(--cta-hover)}
.affiliate-disclosure{text-align:center;font-size:13px;color:var(--on-surface-variant);background:var(--surface-container);
  border:1px solid var(--outline-variant);border-radius:var(--radius);padding:10px 16px;margin:0 auto 22px;max-width:820px}

/* ---- APR ticker overflow guard (homepage only; bonus-widgets.css NOT touched) ----
   Feed is text-only (coin + APR%); cap any stray icon/media so the strip can't
   blow out its width, and hard-clip the strip to the viewport. */
body .apr-ticker{max-width:100vw;overflow:hidden}
.apr-ticker img,.apr-ticker svg{max-height:20px!important;width:auto!important;max-width:56px}
.apr-ticker .coin{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- how we rate cards ---- */
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.icard{background:#fff;border:1px solid var(--outline-variant);border-radius:var(--radius);padding:22px;text-align:center}
.icard .ic{width:44px;height:44px;border-radius:10px;background:var(--surface-container);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--primary)}
.icard h3{font-size:18px;margin:0 0 6px}
.icard p{font-size:14px;color:var(--on-surface-variant);margin:0}

/* ---- prose / info ---- */
.prose h2{margin-top:0}
.info{display:flex;gap:14px;align-items:flex-start;background:var(--surface-container);border-left:3px solid var(--primary);border-radius:var(--radius-sm);padding:16px 18px;margin:18px 0}
.info .ic{flex:0 0 auto;color:var(--primary);width:24px}
.info img{width:24px;height:24px}
.info p{margin:0;font-size:15px}

/* ---- data tables ---- */
.dtable{width:100%;background:#fff;border:1px solid var(--outline-variant);border-radius:var(--radius);overflow:hidden;font-size:15px;margin:14px 0}
.dtable th{background:var(--surface-container);text-align:left;padding:12px 16px;font-size:13px}
.dtable td{padding:12px 16px;border-top:1px solid var(--surface-container)}
.dtable-wrap{overflow-x:auto}

/* ---- promo block ---- */
.promo{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,#fff,var(--surface-low));border:1px solid var(--outline-variant);border-radius:var(--radius);padding:22px 26px;margin:22px 0}
.promo__label{font-size:13px;color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.promo__code{display:inline-flex;align-items:center;gap:10px;font-family:"Public Sans";font-weight:700;font-size:22px;
  background:#fff;border:1px dashed var(--cta);border-radius:var(--radius-sm);padding:8px 16px;color:var(--cta-strong);cursor:pointer}

/* ---- top coins ---- */
.coins{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.coins .coin{display:flex;gap:14px;background:#fff;border:1px solid var(--outline-variant);border-radius:var(--radius);padding:18px}
.coins .coin img{width:42px;height:42px;flex:0 0 auto}
.coins .coin h3{font-size:18px;margin:0 0 4px}
.coins .coin ul{margin:0;font-size:14px;color:var(--on-surface-variant)}

/* ---- FAQ ---- */
.faq__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.faq__card{background:#fff;border:1px solid var(--outline-variant);border-radius:var(--radius);padding:20px 22px}
.faq__card h3{font-size:18px;margin:0 0 8px;font-family:"Newsreader",serif}
.faq__card p,.faq__card li{font-size:14.5px;color:var(--on-surface-variant);margin:0 0 .5em}

/* ---- TOC ---- */
.toc{background:#fff;border:1px solid var(--outline-variant);border-radius:var(--radius);padding:22px 26px;margin:0 0 8px}
.toc h2{font-size:20px;margin:0 0 12px}
.toc ul{columns:2;column-gap:32px;margin:0;font-size:15px}
@media(max-width:640px){.toc ul{columns:1}}

/* ---- CTA band ---- */
.band{background:linear-gradient(180deg,var(--surface-container),var(--surface-low));text-align:center;padding:56px 24px;border-radius:var(--radius);margin:44px auto;max-width:var(--maxw)}
.band h2{margin:0 0 8px}
.band p{color:var(--on-surface-variant);margin:0 0 22px}

/* ---- footer ---- */
footer{background:#fff;border-top:1px solid var(--outline-variant);margin-top:30px}
.foot{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;padding:28px 0}
.foot nav{display:flex;gap:14px 24px;flex-wrap:wrap;margin-left:auto;font-size:14px}
.foot nav a{color:var(--on-surface-variant)}
.disclaimer{font-size:12px;color:var(--on-surface-variant);text-align:center;max-width:920px;margin:0 auto;padding:8px 24px 28px}

/* ---- copy notification ---- */
.copy-notification{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--on-surface);color:#fff;
  padding:10px 20px;border-radius:var(--radius);font-size:14px;opacity:0;pointer-events:none;transition:all .25s;z-index:80}
.copy-notification.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- sticky mobile cta ---- */
.mcta{display:none}

@media(max-width:900px){
  body{padding-bottom:70px}
  .hero__grid{grid-template-columns:1fr;gap:30px}
  .offers,.cards4,.coins,.faq__grid,.pick__stats{grid-template-columns:1fr!important}
  .cards4{grid-template-columns:1fr 1fr!important}
  .nav,.lang-switcher,.trustbar{display:none}
  .burger{display:inline-flex}
  .mcta{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:1px solid var(--outline-variant);padding:10px 16px;box-shadow:0 -4px 16px rgba(18,28,42,.1)}
  .mcta .btn{width:100%}
}
@media(max-width:640px){
  .foot{flex-direction:column;text-align:center;gap:16px}
  .foot nav{margin-left:0;justify-content:center;gap:10px 18px}
}