/* =========================
   Reset / Base
========================= */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; width: 100%; }
html { overflow-x: hidden; scroll-behavior: smooth; }
:where(h1,h2,h3,p,a,button,li){ overflow-wrap:anywhere; }
section[id] { scroll-margin-top: 84px; } /* offset for sticky header */

/* =========================
   Theme Variables
========================= */
:root{
  /* Brand */
  --brand-red:#B30000;
  --brand-orange:#F05F40;

  /* Scripture */
  --dev-red:#b30000;       /* verse text */
  --dev-red-dark:#990000;  /* headings/labels/rule */

  /* UI */
  --ink:#191919;
  --muted:#666;
  --bg:#fff;
  --card:#fff7f5;
  --card-bg:#fff;
  --card-border:#f0ddd9;

  /* Layout */
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --ring:0 0 0 3px rgba(240,95,64,.25);
  --max:1560px;
  --pad: clamp(12px, 2.2vw, 28px);

  /* Type sizes (UI) */
  --fs:18px;
  --fs-lg:20px;
  --fs-xl:28px;

  /* Fonts */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-dev:  "Tiro Devanagari Hindi","Noto Serif Devanagari","Kokila","Mangal",serif;
  --font-disp: "Yatra One","Tiro Devanagari Hindi",serif;

  /* Verse sizing */
  --fs-chaupai: 22px;    /* base verse size */
  --fs-doha-step: 3px;   /* Doha = chaupai + 3px */
  --fs-label-step: -2px; /* label 2px smaller than chaupai */
}
.large{
  /* UI scale */
  --fs:20px; 
  --fs-lg:22px; 
  --fs-xl:30px;

  /* Scripture scale (keeps gaps constant) */
  --fs-chaupai: 24px;
  --fs-doha-step: 3px;
  --fs-label-step: -2px;
}

body{
  margin:0; background:var(--bg); color:var(--ink);
  font: var(--fs)/1.8 var(--font-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
a:focus-visible, button:focus-visible{ outline:none; box-shadow:var(--ring) }

/* =========================
   Header
========================= */
.hdr-wrap{
  position:sticky; top:0; z-index:50;
  backdrop-filter: saturate(1.1) blur(6px);
  background:rgba(255,255,255,.8);
  border-bottom:1px solid #f0e2df;
}
header{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 0; flex-wrap: wrap;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.title{
  margin:0; font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg, var(--brand-red), var(--brand-orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-size:clamp(22px, 2.2vw, 36px);
  font-family: var(--font-disp);
}
.tools{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.seg{ display:flex; gap:4px; background:#fff; border:1px solid #eed7d2; border-radius:999px; padding:3px; }
.seg-btn{ border:0; padding:8px 12px; border-radius:999px; background:transparent; cursor:pointer; font-weight:800; color:#8a140f; }
.seg-btn.active{ background:#ffe6e0; }
.btn{ border:1px solid #eed7d2; background:#fff; border-radius:999px; padding:10px 14px; cursor:pointer; font-weight:800; white-space:nowrap; }

/* Header logo (PNG img) */
.brand .logo-img { height:44px; width:auto; display:block; }
@media (max-width:460px){ .brand .logo-img { height:38px; } }

/* Make the header “Menu” chip keep its spot */
.head-chip{ margin-left: auto; }
.hdr-wrap .btn-chip{ padding:8px 12px; border-radius:999px; font-weight:800; }

/* =========================
   Language visibility + smart slash
========================= */
.en,.hi,.sep{ display:none; }
.lang-en  .en{ display:inline; }   /* EN-only shows .en */
.lang-hi  .hi{ display:inline; }   /* HI-only shows .hi */
.lang-both .en, .lang-both .hi{ display:inline; }  /* both show */

/* Global smart slash (suppressed inside verse .line below) */
.lang-both .en + .hi::before,
.lang-both .hi + .en::before{
  content:" / "; color:#aa4f3a; font-weight:700;
}

/* =========================
   Hero
========================= */
.hero{
  padding: clamp(24px, 6vw, 70px) 0;
  position:relative;
  background:
    radial-gradient(1200px 300px at 50% -50px, #fff1ed 0%, transparent 70%) no-repeat,
    linear-gradient(180deg,#fff, #fff);
}
.hero-inner{
  display:grid; align-items:center; gap:20px;
  grid-template-columns: 1.65fr 0.35fr;
}
@media (max-width:1024px){ .hero-inner{ grid-template-columns: 1.2fr 0.8fr; } }
@media (max-width:900px){  .hero-inner{ grid-template-columns: 1fr; } }
.hero h1{
  font-family: var(--font-disp);
  font-size:clamp(24px, 4.5vw, 42px);
  line-height:1.25; margin:0 0 6px; color:#8c100b;
  text-wrap:balance;
}
.hero p{ margin:0 0 16px; color:#502a26; font-size:var(--fs-lg); }
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary{
  color:#fff; font-weight:900; border:0;
  background:linear-gradient(90deg, var(--brand-red), var(--brand-orange));
  padding:12px 18px; border-radius:12px; box-shadow:var(--shadow);
}
.btn-outline{
  color:var(--brand-red); font-weight:900; background:#fff; border:2px solid #f3b0a1; padding:10px 16px; border-radius:12px;
}
.cta-card{
  background:#fff; border:1px solid #f4d8d2; border-radius:16px; padding:18px; box-shadow:var(--shadow);
}
.cta-card h3{ margin:0 0 6px; color:#7d0b07; font-family: var(--font-disp); }
.bullet{ margin:8px 0 0 18px; padding:0; }
.bullet li{ margin:6px 0; }
@media (max-width:520px){ .cta-row a{ flex:1 1 100%; text-align:center; } }

/* =========================
   Sections
========================= */
.sec{ padding: 22px 0 8px; }
.sec h2{
  margin:0 0 8px; font-family: var(--font-disp);
  font-size:clamp(20px, 3.6vw, 32px); color:#7d0b07; text-wrap:balance;
}
.sec p.lead{ margin:0 0 12px; color:#6e4b45; }

/* =========================
   Collections grid
========================= */
.grid{ display:grid; gap:14px; grid-template-columns: repeat(6, 1fr); }
@media (max-width:1200px){ .grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width:800px){  .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width:520px){  .grid{ grid-template-columns: 1fr; } }

.card{
  background:#fff; border:1px solid #f0ddd9; border-radius:16px; padding:16px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px;
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-2px); border-color:#efb3a6; box-shadow:0 12px 36px rgba(240,95,64,.15); }
.card .icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center; color:#fff; font-weight:900;
  background:linear-gradient(135deg, var(--brand-red), var(--brand-orange));
}
.card h3{ margin:0; font-size:18px; color:#7a130e; }
.card p{ margin:0; color:#5a3d39; font-size:16px; }
.card .actions{ margin-top:auto; display:flex; gap:10px; flex-wrap:wrap; }
.pill{ border:1px solid #efcfc7; background:#fff; color:#8b140f; font-weight:800; padding:8px 12px; border-radius:10px; text-decoration:none; font-size:14px; }
.pill.primary{ border:0; color:#fff; background:linear-gradient(90deg,var(--brand-red),var(--brand-orange)); }

/* =========================
   Chips / Buttons
========================= */
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.btn-chip{
  text-decoration:none; font-weight:800;
  padding:10px 14px; border-radius:12px;
  border:1.5px solid #efcfc7; background:#fff; color:#8b140f;
}
.btn-chip.primary{
  color:#fff; border:0; background:linear-gradient(90deg,#B30000,#F05F40);
  box-shadow:var(--shadow);
}
.btn-chip.outline{ background:#fff; color:#B30000; border:2px solid #f3b0a1; }
@media (max-width:520px){ .btn-row .btn-chip{ flex:1 1 100%; text-align:center; } }

/* =========================
   Ads
========================= */
.ad{ margin:20px 0; border:1px dashed #f0c2b7; border-radius:12px; padding:6px 8px; background:#fff; }

/* =========================
   Footer
========================= */
footer{
  border-top:1px solid #f0e2df; margin-top:30px;
  padding:18px 0 60px; color:var(--muted); font-size:16px; text-align:center;
}
.tiny{ font-size:14px; color:#8b7a77; }

/* =========================
   Global menu chips (subpages)
========================= */
.is-home nav{ display:none !important; }   /* hide on home only */
nav{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  max-width:100%;
}
nav a{
  --b:#f0d8d2;
  text-decoration:none; color:var(--brand-red); font-weight:700;
  padding:10px 14px; border-radius:999px; border:1px solid var(--b);
  background:#fff; white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  transition:transform .08s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  font-size:16px;
}
nav a:hover{ border-color:#f5b1a0; box-shadow:var(--ring); transform:translateY(-1px) }
@media (max-width: 820px){
  nav{ width:100%; order:3; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
  nav a{ flex:0 0 auto; }
}

/* =========================
   Scripture Page Styles
========================= */
.verse-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow);
  color:var(--dev-red);
  font-family: var(--font-dev);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  margin:12px 0;
  
}
/* === Gita intro Q&A: question line font === */
.verse-card .line.q .hi {
  font-family: "Yatra One","Tiro Devanagari Hindi", serif;
  font-weight: 700;
}
.verse-card .line.q .en {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 700;
}
/* (Optional) a touch more breathing room for Q lines */
.verse-card .line.q { margin-top: 6px; }


/* Title card */
.title-card h1{
  font-family: var(--font-disp);
  color:var(--dev-red-dark);
  font-size:clamp(22px, 3.2vw, 30px);
  letter-spacing:.3px;
  margin:0;
  text-align:center;
}
/* Give title spans a little extra weight/spacing (works with EN/HI slash) */
.title-card h1 span{ font-weight:700; letter-spacing:.2px; }

.title-card .rule{
  height:2px; background:var(--dev-red-dark);
  margin:10px auto 0; width:120px;
}

/* Labels track verse size */
.label{
  display:inline-block;
  font-weight:700;
  margin:6px 0 8px;
  color:var(--dev-red-dark);
  font-family: var(--font-dev);
  font-size: calc(var(--fs-chaupai) + var(--fs-label-step));
}

/* Verse sizes (Chalisa blocks) */
.block{
  font-size: var(--fs-chaupai);
  font-weight:600;
  letter-spacing:.1px;
  margin:6px 0;
  line-height:1.95;
}
/* Doha bigger than Chaupai */
.verse-card.doha .block,
.block.doha{
  font-size: calc(var(--fs-chaupai) + var(--fs-doha-step));
}

/* Group tag */
.group-tag{
  float:right;
  font-weight:700;
  font-size:12px;
  line-height:1;
  font-family: var(--font-sans);
  color:#8a140f;
  background:#ffe6e0;
  border:1px solid #efcfc7;
  border-radius:999px;
  padding:4px 8px;
  margin-left:10px;
}

/* Breadcrumbs */
.crumbs{ font-size:14px; color:#8b7a77; margin:10px 0 6px; }
.crumbs a{ color:#8b140f; text-decoration:none; border-bottom:1px dashed #efcfc7; }
.crumbs a:hover{ border-bottom-color:#f3b0a1; }
.crumbs .sep{ margin:0 6px; color:#b99; }

/* =========================
   Mobile Tools Fix
   (2 language buttons per row, 3rd below; Bigger Text full width)
========================= */
@media (max-width: 520px){
  .tools{
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  .seg{
    display: grid;
    grid-template-columns: 1fr 1fr;   /* EN | हिन्दी */
    gap: 6px;
    padding: 6px;
    width: 100%;
    border-radius: 16px;
  }
  .seg-btn{
    width: 100%;
    padding: 10px 12px;
    white-space: nowrap;
  }
  .seg-btn:nth-child(3){
    grid-column: 1 / -1;              /* EN+हिन्दी on its own row */
  }
  #textBigger{
    flex: 1 1 100%;
    width: 100%;
    text-align: center;
    padding: 10px 14px;
  }
}

/* =========================
   Mantra page (bilingual) helpers
   - Works with .lang-en / .lang-hi / .lang-both
   - Use .line for each verse line (Hindi + English on one line in lang-both)
   - Use .line.meaning for meanings (shown only in lang-both)
========================= */

/* Verse line (shared for mantras) */
.verse-card .line{
  display:block;
  margin:6px 0;
  font-size:var(--fs-chaupai);
  font-weight:600;
  letter-spacing:.1px;
  line-height:1.95;
}
/* English transliteration uses UI font for crispness next to Devanagari */
.verse-card .line .en{ font-family:var(--font-sans); }

/* Doha lines a bit larger (mantra pages that tag .doha) */
.verse-card.doha .line{ font-size: calc(var(--fs-chaupai) + var(--fs-doha-step)); }

/* In lang-both, DO NOT insert the global smart slash between HI/EN inside .line */
.lang-both .line .hi + .en::before,
.lang-both .line .en + .hi::before{ content:""; }

/* Add a small visual gap between HI and EN on the same line (lang-both) */
.lang-both .line .en{ margin-left:.5ch; }

/* Meanings: softer color, shown only in EN+HI */
.meaning{ display:none; }
.lang-both .meaning{ display:block; }
.verse-card .line.meaning{
  font-family:var(--font-sans);
  color:#5a3d39;
  font-weight:500;
  line-height:1.9;
}
.verse-card .line.meaning .en,
.verse-card .line.meaning .hi{ display:block; }

/* Meaning visibility — off in EN-only & HI-only, on in EN+HI */
.verse-card .line.meaning {           /* higher specificity than .verse-card .line */
  display: none;
}
.lang-both .verse-card .line.meaning {
  display: block;
}

/* Optional: show the two meaning sentences on separate lines */
.verse-card .line.meaning .en,
.verse-card .line.meaning .hi { display:block; }

/* ===== 1) Strict visibility (prevents HI showing EN) ===== */
body.lang-en  .hi { display:none !important; }
body.lang-hi  .en { display:none !important; }
body.lang-both .en,
body.lang-both .hi { display:inline; }

/* ===== 2) Make HI look identical to EN (color/weight/size) ===== */
.title .hi,
h1 .hi,
h2 .hi,
.card h3 .hi,
#textBigger .hi {
  color: inherit;
  font-weight: inherit;
  font-family: inherit;
}

/* Card titles unified red/weight/size */
#chalisaGrid .card h3,
#chalisaGrid .card p.hi{
  margin:0 0 4px;
  font-size:18px;
  line-height:1.35;
  font-weight:700;
  color:#990000; /* deep title red */
}
body.lang-en  #chalisaGrid .card p.hi  { display:none !important; }
body.lang-hi  #chalisaGrid .card h3.en { display:none !important; }

/* ===== 3) “Hindi / English” – only in specific places, Hindi first ===== */
/* keep these inline so the slash sits between them */
.lang-both .title,
.lang-both h1,
.lang-both h2,
.lang-both .card h3,
.lang-both #textBigger {
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0; /* spacing comes from the slash */
}

/* order: HI first, then EN */
.lang-both .title .hi,        .lang-both h1 .hi,
.lang-both h2 .hi,            .lang-both .card h3 .hi,
.lang-both #textBigger .hi { order:1; }
.lang-both .title .en,        .lang-both h1 .en,
.lang-both h2 .en,            .lang-both .card h3 .en,
.lang-both #textBigger .en { order:2; }

/* insert explicit " / " right after the Hindi piece */
.lang-both .title > .hi:not(:empty)::after,
.lang-both h1    > .hi:not(:empty)::after,
.lang-both h2    > .hi:not(:empty)::after,
.lang-both .card h3 > .hi:not(:empty)::after,
.lang-both #textBigger > .hi:not(:empty)::after {
  content:" / ";
  margin:0 .35ch;
  font-weight:700;
  color:#aa4f3a;
}

/* never add slashes inside verse lines/meanings */
.lang-both .verse-card .line .hi::after,
.lang-both .verse-card .line .en::after { content:none !important; }

/* ===== 4) Responsive language switcher (never cramped) ===== */
.seg { display:flex; gap:4px; background:#fff; border:1px solid #eed7d2; border-radius:999px; padding:3px; }
.seg-btn{
  border:0; padding:8px 12px; border-radius:999px; background:transparent;
  cursor:pointer; font-weight:800; color:#8a140f; min-width:64px;
}
.seg-btn.active{ background:#ffe6e0; }

@media (max-width:560px){
  .tools{ flex-wrap:wrap; gap:8px; width:100%; }
  .seg{
    display:grid; grid-template-columns:1fr 1fr; gap:6px;
    padding:6px; width:100%; border-radius:16px;
  }
  .seg-btn{ width:100%; padding:10px 12px; }
  .seg-btn:nth-child(3){ grid-column:1 / -1; } /* EN+हिन्दी full row */
  #textBigger{ width:100%; text-align:center; padding:10px 14px; }
}

/* ===== 5) Titles & verse header polish ===== */
.title-card h1{
  font-family: "Yatra One","Tiro Devanagari Hindi",serif;
  color:#990000; font-size:clamp(22px,3.2vw,30px);
  letter-spacing:.3px; margin:0; text-align:center; font-weight:700;
}
.title-card h1 .en, .title-card h1 .hi{ color:inherit; font:inherit; }

/* keep cards readable and interactive */
.actions a[aria-disabled="true"]{ pointer-events:none; opacity:.55; }

/* --- STOP any global smart-slash from ever showing --- */
.lang-both .en + .hi::before,
.lang-both .hi + .en::before { content: none !important; }

/* --- Add the slash only where desired; Hindi FIRST --- */
.lang-both .title,
.lang-both h1,
.lang-both h2,
.lang-both .card h3,
.lang-both #textBigger {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
}

/* order: HI then EN */
.lang-both .title .hi,        .lang-both h1 .hi,
.lang-both h2 .hi,            .lang-both .card h3 .hi,
.lang-both #textBigger .hi { order: 1; }
.lang-both .title .en,        .lang-both h1 .en,
.lang-both h2 .en,            .lang-both .card h3 .en,
.lang-both #textBigger .en { order: 2; }

/* insert “ / ” exactly once, after Hindi */
.lang-both .title > .hi:not(:empty)::after,
.lang-both h1    > .hi:not(:empty)::after,
.lang-both h2    > .hi:not(:empty)::after,
.lang-both .card h3 > .hi:not(:empty)::after,
.lang-both #textBigger > .hi:not(:empty)::after {
  content: " / ";
  margin: 0 .35ch;
  font-weight: 700;
  color: #aa4f3a;
}

/* Make Hindi look identical to English (same color/weight/size) */
.title .hi, h1 .hi, h2 .hi, .card h3 .hi, #textBigger .hi {
  color: inherit; font-weight: inherit; font-family: inherit;
}

/* --- Bilingual label helper: shows "हिन्दी / English" --- */
.duo{ display:inline-flex; align-items:baseline; gap:0; white-space:nowrap; }
.lang-en  .duo .hi{ display:none !important; }
.lang-hi  .duo .en{ display:none !important; }
.lang-both .duo .hi::after{
  content:" / ";
  margin:0 .35ch;
  font-weight:700;
  color:#aa4f3a;           /* same subtle brand tint we use elsewhere */
}

/* Make it work nicely inside buttons too */
.lang-both .btn-primary .duo,
.lang-both .btn-chip .duo{ align-items:center; }

/* === Bilingual titles: add "हिन्दी / English" on card + section headers === */

/* cta-card headings */
body.lang-both .cta-card h3{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0;
}
body.lang-both .cta-card h3 .hi{ order:1; }
body.lang-both .cta-card h3 .en{ order:2; }
body.lang-both .cta-card h3 .hi::after{
  content:" / ";
  margin:0 .35ch;
  font-weight:700;
  color:#aa4f3a;
}

/* (Optional) section H2s – enable if your section titles also have .hi + .en inside */
body.lang-both .sec h2{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0;
}
body.lang-both .sec h2 .hi{ order:1; }
body.lang-both .sec h2 .en{ order:2; }
body.lang-both .sec h2 .hi::after{
  content:" / ";
  margin:0 .35ch;
  font-weight:700;
  color:#aa4f3a;
}


/* Bilingual pair helper for footer (and anywhere else) */
.bi { display: inline; }

/* EN-only / HI-only still work */
body.lang-en  .bi .hi { display: none !important; }
body.lang-hi  .bi .en { display: none !important; }

/* EN+HI: show “हिन्दी / English” */
body.lang-both .bi{
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0;
}
body.lang-both .bi .hi { order: 1; }
body.lang-both .bi .en { order: 2; }
body.lang-both .bi .hi::after{
  content: " / ";
  margin: 0 .35ch;
  font-weight: 700;
  color: #aa4f3a; /* brand tint used elsewhere */
}

/* Safety: avoid any global smart-slash in footer pairs */
.lang-both footer .en + .hi::before,
.lang-both footer .hi + .en::before { content: none !important; }

/* ===== Footer bilingual: force "हिन्दी / English" (Hindi first) ===== */
footer .bi{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0; /* spacing comes from the slash */
}

/* In EN+HI, order + explicit slash */
.lang-both footer .bi .hi{ order:1; }
.lang-both footer .bi .en{ order:2; }

/* kill any global smart-slash inside footer to avoid duplicates */
.lang-both footer .bi .en::before,
.lang-both footer .bi .hi::before{ content:none !important; }

/* our slash after Hindi */
.lang-both footer .bi .hi::after{
  content:" / ";
  margin:0 .35ch;
  font-weight:700;
  color:#aa4f3a; /* use currentColor if you prefer the same color */
}

/* single-language modes */
body.lang-en footer .bi .hi{ display:none !important; }
body.lang-hi footer .bi .en{ display:none !important; }

/* Gita pages polish (optional) */
.verse-card .label { font-weight: 700; margin-bottom: 6px; }
.verse-card .line { margin: 6px 0; }
.verse-card .line.meaning { font-size: 0.98rem; opacity: .95; }
.verse-card .group-tag { background: #f6f2f2; padding: 2px 8px; border-radius: 999px; display: inline-block; margin-bottom: 8px; }

/* safest: only when a CTA follows a grid */
.sec .grid + .cta-row { margin-top: 20px; }

/* or give the grid some bottom margin globally */
.sec .grid { margin-bottom: 20px; }

  /* Numeric badge for chapter cards (use instead of emoji) */
  .card .icon.num{
    width: 40px; height: 40px; min-width:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:12px; border:1.5px solid #efcfc7;
    background:#fff7f7; color:#B30000; font-weight:800;
    font-size:18px; line-height:1;
    font-variant-numeric: tabular-nums; /* even width for 10–18 */
  }