/* ═══════════════════════════════════════════════════════════════════════════════
 * VastuGuruji Tool UI — large-type design system for every free tool page (2026-09-14)
 * Own palette (deep teal + warm ivory + saffron), independent of the site theme.
 * Built for readers aged 60+: 20px body text, 64px controls, strong contrast,
 * ✓/✗ with words (never colour alone), visible focus, tables become cards on phones.
 * Usage: <main class="vgt"> … </main>  +  <link rel="stylesheet" href="/assets/css/vg-tool-ui.css?v=…">
 * ═══════════════════════════════════════════════════════════════════════════════ */
.vgt{
  --ink:#1a1a1a; --ink-soft:#333;
  --teal:#0b5563; --teal-dark:#083c46; --teal-tint:#e6f2f3;
  --ivory:#fffbf2; --paper:#ffffff; --line:#d9cdb4;
  --saffron:#c2570c; --saffron-tint:#fff1e0;
  --good:#14532d; --good-bg:#e8f6ec; --good-line:#2f7d4a;
  --bad:#8f1d1d;  --bad-bg:#fdeeee;  --bad-line:#b33a3a;
  --warn:#6b4500; --warn-bg:#fff6dc; --warn-line:#b7791f;
  display:block; background:var(--ivory); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,"Noto Sans","Noto Sans Devanagari",Arial,sans-serif;
  font-size:20px; line-height:1.7;
}
.vgt *,.vgt *::before,.vgt *::after{box-sizing:border-box}
.vgt-wrap{max-width:880px;margin:0 auto;padding:24px 18px 64px}
.vgt-wrap.wide{max-width:1080px}
.vgt a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.vgt a:focus-visible,.vgt button:focus-visible,.vgt input:focus-visible,.vgt select:focus-visible,
.vgt textarea:focus-visible,.vgt summary:focus-visible{outline:4px solid var(--saffron);outline-offset:3px}

/* breadcrumb */
.vgt-crumbs{font-size:18px;margin:0 0 18px;color:var(--ink-soft)}

/* hero */
.vgt-hero{background:var(--teal);color:#fff;border-radius:22px;padding:32px 28px;margin:0 0 26px}
.vgt-tag{display:inline-block;background:#fff;color:var(--teal-dark);font-size:17px;font-weight:800;padding:6px 16px;border-radius:999px;margin:0 0 14px}
.vgt-hero h1{margin:0 0 14px;font-size:clamp(30px,5.2vw,40px);line-height:1.25;color:#fff;font-weight:800}
.vgt-hero p{margin:0;font-size:21px;line-height:1.7;color:#fff}
.vgt-hero .vgt-free{margin-top:18px;font-size:19px;font-weight:700}
.vgt-hero a{color:#fff}

/* cards + numbered steps */
.vgt-card{background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:28px 24px;margin:0 0 26px}
.vgt-step{display:flex;align-items:center;gap:14px;margin:0 0 20px}
.vgt-step b{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--saffron);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center}
.vgt-step h2{margin:0;font-size:clamp(24px,4vw,28px);line-height:1.3;color:var(--ink)}

/* form fields */
.vgt-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.vgt-fields.one{grid-template-columns:1fr}
.vgt-fields.three{grid-template-columns:repeat(3,1fr)}
.vgt-full{grid-column:1/-1}
.vgt-field label,.vgt-label{display:block;font-size:21px;font-weight:700;margin:0 0 8px;color:var(--ink)}
.vgt-field input,.vgt-field select,.vgt-field textarea,.vgt-input{width:100%;min-height:64px;padding:10px 18px;font-size:24px;font-weight:700;color:var(--ink);background:#fff;border:3px solid var(--teal);border-radius:14px;font-family:inherit}
.vgt-field select{font-size:22px}
.vgt-field textarea{min-height:120px;font-size:21px;font-weight:600}
.vgt-help{margin:14px 0 0;font-size:19px;color:var(--ink-soft)}
.vgt-btn{display:block;width:100%;min-height:68px;margin:22px 0 0;border:0;border-radius:16px;background:var(--teal);color:#fff;font-size:24px;font-weight:800;cursor:pointer;font-family:inherit;text-align:center;text-decoration:none;padding:14px 20px}
.vgt-btn:hover{background:var(--teal-dark);color:#fff}
.vgt-btn.inline{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:60px;padding:10px 26px;font-size:21px}
.vgt-btn.secondary{background:#fff;color:var(--teal-dark);border:3px solid var(--teal)}
.vgt-btn.secondary:hover{background:var(--teal-tint);color:var(--teal-dark)}
/* links styled as buttons: ".vgt a" (class+element) otherwise outranks ".vgt-btn" and made the text dark on teal */
.vgt a.vgt-btn{color:#fff;text-decoration:none}
.vgt a.vgt-btn:hover{color:#fff}
.vgt a.vgt-btn.secondary,.vgt a.vgt-btn.secondary:hover{color:var(--teal-dark)}
.vgt-error{display:none;margin:16px 0 0;padding:14px 18px;border-radius:12px;background:var(--bad-bg);border:2px solid var(--bad-line);color:var(--bad);font-size:20px;font-weight:700}
.vgt-error.show{display:block}

/* results */
.vgt-result{display:none}
.vgt-result.show{display:block}
.vgt-big{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;background:var(--teal-tint);border:2px solid var(--teal);border-radius:16px;padding:18px 22px;margin:0 0 20px}
.vgt-big .lbl{font-size:20px;font-weight:700}
.vgt-big .val{font-size:40px;font-weight:800;color:var(--teal-dark);line-height:1.1}
.vgt-big .note{flex-basis:100%;font-size:18px;color:var(--ink-soft)}
.vgt-verdict{border-radius:18px;padding:22px 24px;margin:0 0 20px;border:3px solid}
.vgt-verdict h3{margin:0 0 8px;font-size:clamp(24px,4vw,28px);line-height:1.3}
.vgt-verdict p{margin:0;font-size:21px}
.vgt-verdict.excellent{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.vgt-verdict.fair{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.vgt-verdict.poor{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.vgt-verdict.info{background:var(--teal-tint);border-color:var(--teal);color:var(--teal-dark)}
.vgt-rules{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.vgt-rules li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;border:2px solid;font-size:20px;font-weight:600}
.vgt-rules li .ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:900;color:#fff}
.vgt-rules li.ok{background:var(--good-bg);border-color:var(--good-line);color:var(--good)}
.vgt-rules li.ok .ic{background:var(--good-line)}
.vgt-rules li.no{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.vgt-rules li.no .ic{background:var(--bad-line)}
.vgt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vgt-grid.three{grid-template-columns:repeat(3,1fr)}
.vgt-box{background:#fff;border:2px solid var(--line);border-radius:16px;padding:18px 18px 16px}
.vgt-box .name{font-size:22px;font-weight:800;margin:0 0 4px;color:var(--ink)}
.vgt-box .val{font-size:44px;font-weight:800;line-height:1.1;color:var(--teal-dark)}
.vgt-box .meaning{font-size:19px;color:var(--ink-soft);margin:6px 0 10px}
.vgt-box .verdict{display:inline-block;font-size:18px;font-weight:800;padding:6px 14px;border-radius:999px;background:#f1ece0;color:var(--ink)}
.vgt-box.good{border-color:var(--good-line);background:var(--good-bg)}
.vgt-box.good .val,.vgt-box.good .verdict{color:var(--good)}
.vgt-box.good .verdict,.vgt-box.bad .verdict{background:#fff}
.vgt-box.bad{border-color:var(--bad-line);background:var(--bad-bg)}
.vgt-box.bad .val,.vgt-box.bad .verdict{color:var(--bad)}
.vgt-swatches{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 0}
.vgt-swatch{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--line);border-radius:12px;padding:8px 14px;font-size:19px;font-weight:700}
.vgt-swatch i{display:inline-block;width:32px;height:32px;border-radius:8px;border:2px solid rgba(0,0,0,.25)}

/* call to action */
.vgt-cta{background:var(--teal-dark);color:#fff;border-radius:20px;padding:28px 24px;margin:0 0 30px}
.vgt-cta h2{margin:0 0 10px;font-size:clamp(24px,4vw,28px);line-height:1.3;color:#fff}
.vgt-cta p{margin:0 0 18px;font-size:20px;color:#fff}
.vgt-cta-btns{display:flex;flex-wrap:wrap;gap:14px}
.vgt-cta-btns a{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:10px 24px;border-radius:14px;font-size:21px;font-weight:800;text-decoration:none}
.vgt-cta-btns .book{background:#fff;color:var(--teal-dark)}
.vgt-cta-btns .wa{background:#1b7a43;color:#fff}
.vgt-cta a:focus-visible{outline-color:#ffd8a8}

/* content sections */
.vgt h2.vgt-sec{font-size:clamp(26px,4.4vw,32px);line-height:1.3;margin:34px 0 12px;color:var(--ink)}
.vgt h3.vgt-sub{font-size:clamp(22px,3.8vw,25px);line-height:1.35;margin:26px 0 12px;color:var(--ink)}
.vgt p.vgt-text,.vgt .vgt-prose p{margin:0 0 14px;font-size:20px}
.vgt .vgt-prose ul,.vgt .vgt-prose ol{margin:0 0 16px;padding-left:28px}
.vgt .vgt-prose li{margin:6px 0}
.vgt-note{margin:12px 0 0;font-size:19px;color:var(--ink-soft)}
.vgt-callout{background:var(--saffron-tint);border-left:6px solid var(--saffron);border-radius:12px;padding:16px 20px;margin:0 0 22px;font-size:20px}

/* tables → cards on phones (give every <td> a data-label) */
.vgt-table-wrap{overflow-x:auto}
.vgt-table{width:100%;border-collapse:collapse;background:#fff;border:2px solid var(--line);border-radius:14px;overflow:hidden;font-size:19px}
.vgt-table th{background:var(--teal);color:#fff;text-align:left;padding:14px 16px;font-size:19px}
.vgt-table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top;color:var(--ink)}
.vgt-table .g{color:var(--good);font-weight:800}
.vgt-table .b{color:var(--bad);font-weight:800}

/* FAQ */
.vgt-faq details{background:#fff;border:2px solid var(--line);border-radius:14px;margin:0 0 12px}
.vgt-faq summary{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:64px;padding:14px 20px;font-size:21px;font-weight:700;cursor:pointer;list-style:none;color:var(--ink)}
.vgt-faq summary::-webkit-details-marker{display:none}
.vgt-faq summary::after{content:"+";flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;font-size:28px;line-height:40px;text-align:center}
.vgt-faq details[open] summary::after{content:"−"}
.vgt-faq .faq-a{margin:0;padding:0 20px 18px;font-size:20px;color:var(--ink)}

/* tool tiles (hub) */
.vgt-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:0 0 26px}
.vgt-tile{display:flex;flex-direction:column;gap:8px;background:#fff;border:2px solid var(--line);border-radius:18px;padding:22px 20px;text-decoration:none!important;color:var(--ink)!important;min-height:180px}
.vgt-tile:hover{border-color:var(--teal);background:var(--teal-tint)}
.vgt-tile .ico{font-size:34px;line-height:1}
.vgt-tile .t{font-size:23px;font-weight:800;line-height:1.3;color:var(--ink)}
.vgt-tile .d{font-size:19px;font-weight:500;color:var(--ink-soft)}
.vgt-tile .go{margin-top:auto;font-size:19px;font-weight:800;color:var(--teal-dark)}
.vgt-chips{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.vgt-chips a{display:inline-flex;align-items:center;min-height:52px;padding:8px 18px;border-radius:999px;background:#fff;border:2px solid var(--teal);font-size:19px;text-decoration:none}

/* more tools */
.vgt-more{margin:26px 0 0;font-size:20px}
.vgt-more ul{margin:8px 0 0;padding-left:26px}
.vgt-more li{margin:8px 0}

@media (max-width:640px){
  .vgt{font-size:19px}
  .vgt-hero{padding:26px 20px}
  .vgt-card{padding:22px 16px}
  .vgt-fields,.vgt-fields.three,.vgt-grid,.vgt-grid.three,.vgt-tiles{grid-template-columns:1fr}
  .vgt-table thead{display:none}
  .vgt-table,.vgt-table tbody,.vgt-table tr,.vgt-table td{display:block;width:100%}
  .vgt-table tr{border-top:2px solid var(--line);padding:8px 0}
  .vgt-table tr:first-child{border-top:0}
  .vgt-table td{border:0;padding:6px 16px}
  .vgt-table td[data-label]::before{content:attr(data-label) ": ";font-weight:800;color:var(--teal-dark)}
}
@media (prefers-reduced-motion:no-preference){.vgt-btn,.vgt-tile{transition:background .15s,border-color .15s}}