/* =========================================================
   Vyapsetu — Tool & template pages adapter
   Loaded after css/home.css and each page's own stylesheet.
   Maps the old style.css tokens and base classes onto the
   new design system so every page shares one look.
   ========================================================= */

/* ---------- 1. Legacy token aliases used by the page stylesheets ---------- */
:root {
  --brand-gradient: var(--indigo);
  --brand-gradient-soft: var(--indigo-50);
  --brand-blue: var(--indigo);
  --brand-violet: var(--indigo);
  --brand-cyan: var(--indigo);
  --brand-emerald: var(--green);
  --brand-amber: var(--marigold);
  --brand-rose: var(--red);
  --brand-indigo-dark: var(--indigo-700);
  --navy-950: var(--footer);
  --navy-700: var(--text);
  --slate-400: #8a92a6;
  --bg-white: #ffffff;
  --bg-subtle: var(--paper-2);
  --shadow: var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-indigo: 0 10px 24px -10px rgba(52, 57, 176, .6);
  --radius-sm: var(--r-sm);
  --radius: var(--r);
  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);
}
/* The old stylesheet used --red as an alias for the brand colour. Inside the tools it still means "accent". */
.calc-section { --red: var(--indigo); --red-soft: var(--indigo-50); }
.calc-section .field-error, .calc-section .form-error { color: #b42318; }

/* ---------- 2. Base rules the page stylesheets rely on ---------- */
main ul, main ol { list-style: none; }
main img { display: block; height: auto; }
main a { color: inherit; text-decoration: none; }
main p a:not(.btn), main li a:not(.btn) { color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }
main .popular li a, main .breadcrumb a, main .crumbs a { text-decoration: none; color: inherit; }
main section { padding: var(--s-9) 0; position: relative; }
main h2 { font-size: var(--fs-xl); }
h2.left { text-align: left; color: var(--ink); }
.container.narrow { max-width: 880px; }
.center { text-align: center; }
.mt-12 { margin-top: 12px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center p { margin-left: auto; margin-right: auto; }
.section-text { margin-top: var(--s-4); font-size: var(--fs-base); line-height: 1.7; color: var(--text); max-width: 72ch; }
.muted-dark { color: var(--muted); }
.text-link { color: var(--indigo) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Kicker (replaces the old uppercase pill badges with dot) */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); font-size: var(--fs-sm); font-weight: 600; color: var(--marigold-800); }
.kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--marigold); }
/* Remaining small tags (e.g. template number on the preview page) */
.pill-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-2); }

/* Buttons from the old system */
.btn-secondary { --btn-bd: var(--line-2); --btn-bg: #fff; --btn-fg: var(--ink); }
.btn-secondary:hover { --btn-bd: var(--indigo); --btn-fg: var(--indigo); }
.btn-white { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn-white:hover { --btn-bg: var(--marigold-50); }
.calc-result .btn-ghost, .dl-banner .btn-ghost, .lf-promo .btn-ghost { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.45); }
.calc-result .btn-ghost:hover, .dl-banner .btn-ghost:hover, .lf-promo .btn-ghost:hover { --btn-bg: rgba(255,255,255,.08); --btn-bd: #fff; }
.calc-result :focus-visible, .dl-banner :focus-visible, .lf-promo :focus-visible { outline-color: var(--marigold); }

/* ---------- 3. Tool hero: ledger paper ---------- */
.tool-hero { background: #fff; border-bottom: 1px solid var(--line); }
.tool-hero::before {
  background-image:
    linear-gradient(90deg, transparent 54px, var(--red-soft) 54px, var(--red-soft) 55px, transparent 55px, transparent 58px, var(--red-soft) 58px, var(--red-soft) 59px, transparent 59px),
    repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px);
  background-size: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 55%, transparent 100%);
}
.tool-hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: var(--fs-2xl); }
.tool-sub { background: none; -webkit-text-fill-color: currentColor; color: var(--indigo); font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: 0; }
.tool-lead { font-size: 1.125rem; color: var(--text); }
.breadcrumb { box-shadow: none; border-color: var(--line-2); font-size: 14px; }
.breadcrumb a:hover { color: var(--indigo); }
.tool-stats > div { box-shadow: none; border-radius: var(--r-lg); }
.tool-stats strong { font-family: var(--serif); font-weight: 600; color: var(--ink); }

/* ---------- 4. Calculator card ---------- */
.calc-card { border-radius: var(--r-xl); box-shadow: var(--shadow-3); }
.calc-form h3, .calc-result h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.field-label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.seg { border-radius: var(--r); font-weight: 600; }
.seg.active { background: var(--indigo-50); border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(52, 57, 176, .12); color: var(--indigo); }
.rate-chips .chip, main .chip { min-height: 42px; font-weight: 600; }
main .chip.active { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }
.amount-input, .custom-rate, .input-box { border-radius: var(--r); border-width: 1.5px; border-color: var(--line-2); }
.amount-input:focus-within, .custom-rate:focus-within, .input-box:focus { border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(52, 57, 176, .15); }
.amount-input .rupee { color: var(--ink); background: var(--paper-2); }
.amount-input.invalid { border-color: #b42318; }
.calc-actions .btn { min-height: 48px; }
/* let the form and result columns shrink below their content's natural width */
.calc-card > * { min-width: 0; }
@media (max-width: 992px) { .calc-card { grid-template-columns: minmax(0, 1fr) !important; } }
.segmented, .two-col { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
@media (max-width: 768px) { .segmented { grid-template-columns: minmax(0, 1fr); } }

/* Result panel: register ink with faint ruling (replaces the violet mesh) */
.calc-result, .lf-promo, .dl-banner {
  background:
    repeating-linear-gradient(180deg, transparent 0 39px, rgba(255,255,255,.05) 39px 40px),
    var(--ink) !important;
}
.result-total { border-radius: var(--r-lg); backdrop-filter: none; background: rgba(255,255,255,.06); }
.result-total span { text-transform: none; letter-spacing: 0; font-size: 14px; color: #c9d0e0; }
.result-total strong { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.bar-gst, .dot.gst { background: var(--marigold) !important; }
.donut-interest { stroke: var(--marigold) !important; }
.result-rows li { color: #dfe4f1; }
.result-note { color: #aeb7cc; }

/* ---------- 5. Content sections ---------- */
.benefit-icon, .cap-icon { background: var(--indigo-50) !important; color: var(--indigo) !important; box-shadow: none !important; }
.benefit, .slab-card, .type-card, .formula-card, .affect-card, .howto-step, .cap-box, .side-card, .fee-card { border-radius: var(--r-lg); box-shadow: none; }
.benefit:hover, .slab-card:hover, .type-card:hover, .formula-card:hover, .fee-card:hover { box-shadow: var(--shadow-2); }
.slabs, .types, .affect, .need-more { background: var(--paper-2); }
.slab-card strong { font-family: var(--serif); font-weight: 600; }
.s0 { border-top-color: var(--green) !important; } .s0 strong { color: var(--green) !important; }
.s5 { border-top-color: var(--indigo) !important; } .s5 strong { color: var(--indigo) !important; }
.s18 { border-top-color: var(--marigold) !important; } .s18 strong { color: var(--marigold-800) !important; }
.s40 { border-top-color: var(--red) !important; } .s40 strong { color: var(--red) !important; }
.type-badge, .howto-step-num { background: var(--indigo) !important; color: #fff !important; box-shadow: none !important; }
.howto-step-num { font-family: var(--serif); }
.formula code { font-family: var(--mono); }
.example-box { border-radius: var(--r); }
.app-card { background: var(--indigo-50) !important; border-color: rgba(52, 57, 176, .2) !important; }
.side-card h4 { font-family: var(--serif); font-weight: 600; }
.popular a:hover { color: var(--indigo); }
.fee-tag { border-radius: var(--r-sm); }
.steps-list li::before { background: var(--indigo) !important; box-shadow: none !important; }
.lf-promo { box-shadow: var(--shadow-2); }
.lf-promo p { font-family: var(--serif); font-weight: 600; }

/* FAQ on tool pages: centred head, list below */
main .faq .section-head { position: static; }
.lf-faq { margin-top: var(--s-4); }

/* Closing banners */
.dl-banner { padding: var(--s-9) 0; }
.dl-banner h2 { color: #fff; }
.dl-banner .btn-white { --btn-bg: var(--marigold); --btn-fg: var(--ink); }
.dl-banner .btn-white:hover { --btn-bg: #f2b23c; }
.lf-footer-cta { padding: var(--s-7) 0 var(--s-9); }

/* ---------- 6. Invoice template preview page ---------- */
.preview-page-hero { background: #fff !important; border-bottom: 1px solid var(--line); }
.preview-page-hero h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.preview-sidebar { border-radius: var(--r-lg); box-shadow: none; }
.swatch-btn.active, .paper-btn.active { border-color: var(--indigo) !important; }
.paper-btn.active { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.ctrl-select:focus, .ctrl-input:focus { border-color: var(--indigo) !important; box-shadow: 0 0 0 4px rgba(52, 57, 176, .15) !important; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--text); font-weight: 500; }
.crumbs a:hover { color: var(--indigo); }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

/* Template switchers: same dark active state as the homepage */
.print-pill-switcher { border: 1px solid var(--line-2) !important; box-shadow: none !important; }
.print-pill-btn { font-family: var(--sans) !important; color: var(--ink-2); }
.print-pill-btn:hover { color: var(--indigo); }
.print-pill-btn.active { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.rich-tpl-card:hover .rich-doc-frame { border-color: var(--indigo) !important; box-shadow: var(--shadow-2) !important; }
.ctrl-group h4 { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--ink) !important; }
.preview-workspace-grid > * { min-width: 0; }
@media (max-width: 767px) { .preview-workspace-grid > :last-child { overflow-x: auto; -webkit-overflow-scrolling: touch; } }
.ctrl-select, .ctrl-input { width: 100%; max-width: 100%; }

/* Current page marker in the Free tools menu */
.nav-menu a[aria-current="page"] { background: var(--indigo-50); }
.nav-menu a[aria-current="page"] strong { color: var(--indigo); }

/* ---------- 7. Responsive ---------- */
@media (max-width: 767px) {
  main section { padding: var(--s-8) 0; }
  .tool-hero::before { background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); }
  .lf-promo { padding: var(--s-5) !important; flex-direction: column; align-items: flex-start; }
  .tool-hero-btns .btn, .dl-btns .btn { width: 100%; }
}

/* ---------- 8. Print: hide site chrome ---------- */
@media print {
  .announce, .site-header, .site-footer, .mobile-bar, .callback-fab, .callback-panel, .to-top, .modal { display: none !important; }
  body { padding-bottom: 0 !important; }
}

/* ---------- 9. Comparison page ---------- */
.page-hero { padding: var(--s-8) 0 var(--s-7); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0) 60%, #fff), repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px), #fff; }
.page-hero h1 { font-size: var(--fs-2xl); max-width: 22ch; }
.page-lead { margin: var(--s-4) 0 var(--s-6); max-width: 64ch; font-size: 1.125rem; }
.vs-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; }
.vs-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-sm); }
.vs-table th, .vs-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.vs-table thead th { position: sticky; top: 0; background: var(--paper-2); font-weight: 600; color: var(--ink); white-space: nowrap; }
.vs-table thead th a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.vs-table th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink-2); min-width: 220px; }
.vs-table tbody tr:last-child > * { border-bottom: 0; }
.vs-table .vs-us { background: var(--indigo-50); }
.vs-table thead .vs-us { background: var(--indigo); color: #fff; }
.vs-table td[data-v] { font-size: 0; }
.vs-table.vs-two { min-width: 0; }
.vs-table.vs-two thead th { white-space: normal; }
@media (max-width: 640px) { .vs-table.vs-two th[scope="row"] { min-width: 0; width: 42%; } .vs-table.vs-two th, .vs-table.vs-two td { padding: 12px 10px; } }
.vs-table td[data-v="yes"]::before { content: ""; display: inline-block; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2313804a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.vs-table td[data-v="no"]::before { content: ""; display: inline-block; width: 12px; height: 2px; background: var(--line-2); vertical-align: middle; }
.vs-note { font-size: 13.5px; color: var(--ink-2); }
.vs-table td strong { font-size: 13.5px; color: var(--indigo); }
.vs-ask { font-size: 13.5px; font-weight: 600; color: var(--green) !important; }
.vs-foot { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--muted); max-width: 80ch; }
.vs-diff { background: var(--paper-2); }
.vs-price { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); align-items: start; }
.vs-price .section-head { margin-bottom: 0; }
@media (max-width: 1024px) { .vs-price { grid-template-columns: 1fr; gap: var(--s-6); } }