/* ==========================================================================
   vBol guides -- shared stylesheet for /guides and every page under it.
   Tokens are copied from web/index.html (itself built on identity.html):
   marigold = what a person said, indigo = what the company keeps.
   ========================================================================== */

:root{
  --ink:#14161F; --ink-2:#2E3346; --ink-3:#5B6178;
  --rule:#D8DBE6; --rule-soft:#E7E9F1;
  --paper:#F2F3F8; --paper-2:#FFFFFF;
  --indigo:#2D3BA8; --indigo-lt:#5566DA; --indigo-wash:#E3E6F8;
  --marigold:#E08308; --marigold-lt:#F5A937; --marigold-wash:#FBEBD4;
  --panel:#14161F; --panel-2:#1D2130; --panel-ink:#F1F2F7; --panel-dim:#8E95AC; --panel-rule:#333850;
  --f-display:"Anek Latin","Segoe UI",system-ui,sans-serif;
  --f-deva:"Anek Devanagari","Nirmala UI",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --measure:1160px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDEFF6; --ink-2:#C2C7D8; --ink-3:#8D94AC;
    --rule:#2E3346; --rule-soft:#232739;
    --paper:#0D0F17; --paper-2:#161926;
    --indigo:#8494F0; --indigo-lt:#A7B2F6; --indigo-wash:#1C2142;
    --marigold:#F5A937; --marigold-lt:#FFC469; --marigold-wash:#3A2A10;
  }
}
:root[data-theme="dark"]{
  --ink:#EDEFF6; --ink-2:#C2C7D8; --ink-3:#8D94AC;
  --rule:#2E3346; --rule-soft:#232739;
  --paper:#0D0F17; --paper-2:#161926;
  --indigo:#8494F0; --indigo-lt:#A7B2F6; --indigo-wash:#1C2142;
  --marigold:#F5A937; --marigold-lt:#FFC469; --marigold-wash:#3A2A10;
}

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-display); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.deva{ font-family:var(--f-deva); }
a{ color:var(--indigo); }
.wrap{ max-width:var(--measure); margin:0 auto; padding:0 28px; }
@media(max-width:560px){ .wrap{ padding:0 16px; } }

/* ---------------- nav ---------------- */
nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--rule-soft);
}
.nav-in{ max-width:var(--measure); margin:0 auto; padding:13px 28px;
  display:flex; align-items:center; gap:14px; }
@media(max-width:560px){ .nav-in{ padding:11px 16px; } }
.brand{ display:flex; align-items:center; text-decoration:none; }
.brand img{ display:block; height:36px; width:auto; }
.nav-sp{ margin-left:auto; }
.link{ font-size:15.5px; font-weight:600; color:var(--ink-2); text-decoration:none;
  padding:9px 12px; border-radius:7px; }
.link:hover{ color:var(--ink); }
@media(max-width:560px){ .nav-extra{ display:none; } }

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-display); font-weight:700; font-size:15.5px;
  border-radius:9px; padding:11px 20px; text-decoration:none; cursor:pointer;
  border:1px solid transparent;
}
.btn:focus-visible{ outline:2px solid var(--indigo-lt); outline-offset:3px; }
.btn-solid{ background:var(--indigo); color:#fff; }
.btn-solid:hover{ background:var(--indigo-lt); }
.btn-wa{ background:var(--marigold); color:#2A1B04; font-size:17px; padding:14px 22px; }
.btn-ghost{ border-color:var(--rule); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink-3); }
.btn .arw{ font-family:var(--f-mono); font-weight:500; }

/* ---------------- article ---------------- */
.crumbs{ font-family:var(--f-mono); font-size:12px; color:var(--ink-3); margin:34px 0 0;
  display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a{ color:var(--ink-3); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }
.eyebrow{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--indigo); }
.head{ max-width:760px; margin:26px 0 8px; }
h1,h2,h3{ margin:0; text-wrap:balance; font-weight:800; letter-spacing:-0.02em; line-height:1.12; }
.head h1{ font-size:clamp(34px,5vw,54px); margin:12px 0 16px; }
.head .lede{ font-size:clamp(18px,2vw,20px); color:var(--ink-2); margin:0; }
.meta{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); margin-top:16px; }

.layout{ display:grid; grid-template-columns:minmax(0,760px) 300px; gap:56px;
  align-items:start; margin-top:34px; padding-bottom:40px; }
/* minmax(0,1fr), not 1fr: a plain 1fr column grows to its widest table, which
   widens the whole page on a phone. The table scrolls in its .table-wrap instead. */
@media(max-width:980px){ .layout{ grid-template-columns:minmax(0,1fr); gap:36px; } }
.prose, .side{ min-width:0; }

.prose h2{ font-size:clamp(24px,3vw,30px); margin:44px 0 12px; }
.prose h3{ font-size:20px; margin:30px 0 8px; letter-spacing:-0.01em; }
.prose p, .prose li{ color:var(--ink-2); }
.prose p{ margin:0 0 16px; }
.prose ul, .prose ol{ padding-left:22px; margin:0 0 18px; }
.prose li{ margin-bottom:6px; }
.prose strong{ color:var(--ink); }
.prose blockquote{ margin:20px 0; padding:4px 0 4px 20px; border-left:3px solid var(--marigold);
  color:var(--ink-2); }
.prose .note{ background:var(--indigo-wash); border-radius:12px; padding:16px 18px; margin:22px 0;
  color:var(--ink); }
.prose .said{ background:var(--marigold-wash); border-radius:12px; padding:14px 18px; margin:18px 0;
  color:var(--ink); }

/* Tables scroll inside their own box on a phone, never the page. */
.table-wrap{ overflow-x:auto; margin:18px 0 24px; border:1px solid var(--rule);
  border-radius:12px; background:var(--paper-2); }
.prose table{ border-collapse:collapse; width:100%; font-size:15px; }
.prose th, .prose td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule-soft);
  vertical-align:top; }
.prose th{ font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-3); font-weight:500; background:var(--paper); white-space:nowrap; }
.prose tr:last-child td{ border-bottom:0; }
.prose td{ color:var(--ink-2); }

/* ---------------- sidebar ---------------- */
.side{ position:sticky; top:84px; display:flex; flex-direction:column; gap:16px; }
@media(max-width:980px){ .side{ position:static; } }
.box{ border:1px solid var(--rule); border-radius:14px; padding:20px; background:var(--paper-2); }
.box h3{ font-size:17px; letter-spacing:-0.01em; }
.box p{ font-size:15px; color:var(--ink-3); margin:8px 0 14px; }
.box .btn{ width:100%; }
.box.dark{ background:var(--panel); border-color:var(--panel); }
.box.dark h3{ color:var(--panel-ink); }
.box.dark p{ color:var(--panel-dim); }

/* ---------------- faq + related ---------------- */
.faq-block{ border-top:1px solid var(--rule-soft); margin-top:30px; padding-top:10px; }
.faq-block h3{ font-size:19px; margin:26px 0 6px; }
.faq-block p{ color:var(--ink-2); margin:0; }

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:900px){ .cards{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cards{ grid-template-columns:1fr; } }
.card{ display:flex; flex-direction:column; gap:6px; border:1px solid var(--rule); border-radius:14px;
  padding:20px; background:var(--paper-2); text-decoration:none; color:var(--ink); }
.card:hover{ border-color:var(--indigo-lt); }
.card .k{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--indigo); }
.card .t{ font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.3; }
.card .d{ font-size:14.5px; color:var(--ink-3); }

section.band{ padding:56px 0; border-top:1px solid var(--rule-soft); }
section.band h2{ font-size:clamp(24px,3vw,32px); margin-bottom:24px; }

footer{ padding:36px 0 56px; border-top:1px solid var(--rule); display:flex;
  justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; }
footer .fm{ font-family:var(--f-mono); font-size:11.5px; color:var(--ink-3); }
footer .links{ display:flex; gap:16px; flex-wrap:wrap; font-size:14.5px; }
footer .links a{ color:var(--ink-3); text-decoration:none; }
footer .links a:hover{ color:var(--ink); }

/* ---------------- languages ---------------- */
/* Localized pages set body.font-deva (Hindi, Marathi) or body.font-knda
   (Kannada) so the script's own Anek face leads; Latin words fall through
   to Anek Latin. */
:root{ --f-knda:"Anek Kannada","Nirmala UI",system-ui,sans-serif; }
body.font-deva{ font-family:var(--f-deva); }
body.font-knda{ font-family:var(--f-knda); }
body.font-deva h1, body.font-deva h2, body.font-deva h3,
body.font-knda h1, body.font-knda h2, body.font-knda h3{ line-height:1.3; letter-spacing:0; }
.langs{ font-size:14.5px; color:var(--ink-3); margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }
.langs a{ color:var(--indigo); text-decoration:none; font-weight:600; }
.langs a:hover{ text-decoration:underline; }
.prose .said.knda{ font-family:var(--f-knda); }