/* TBB GST Recon site: site.css re-tinted teal, plus this site's sections. */
:root {
    --brand:       #0f766e;
    --brand-hover: #115e59;
    --brand-soft:  #f0fdfa;
    --accent:      #f59e0b;
}
.hero { background: linear-gradient(135deg, #0a2042 0%, #0f5868 100%); color: #fff; padding: 56px 0 48px; }
.hero .wrap { display: grid; gap: 32px; align-items: center; }
@media (min-width: 960px) { .hero .wrap { grid-template-columns: 1.05fr 1fr; } }
.hero .eyebrow { color: var(--accent); background: rgba(245, 158, 11, 0.12); }
.hero h1 { font-size: 40px; margin: 0 0 14px; }
.hero .lead { color: #cfe3ea; font-size: 17px; margin-bottom: 22px; }
.hero .btn-secondary { background: transparent; color: #fff; border-color: #fff; }
.hero .btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }
.hero .from { margin-top: 16px; color: #cfe3ea; }
.hero .from strong { color: #fff; font-size: 18px; }
.shot { border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); background: #fff; display: block; width: 100%; }
.block { padding: 48px 0; }
.block h2 { font-size: 26px; margin: 0 0 6px; }
.block p.sub { color: var(--muted); margin-bottom: 24px; }
.block.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat { padding: 22px; }
.feat .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
    display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 10px; }
.feat h3 { margin: 0 0 6px; font-size: 17px; }
.feat p { color: var(--muted); margin: 0; }
.show { display: grid; gap: 22px; align-items: center; margin-bottom: 40px; }
@media (min-width: 900px) { .show { grid-template-columns: 1fr 1.4fr; } .show.flip > :first-child { order: 2; } }
.show h3 { font-size: 21px; margin: 0 0 8px; }
.show ul { margin: 0; padding-left: 18px; color: var(--muted); }
.show img { border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.vs { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.vs th, .vs td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vs th { background: #f1f5f9; font-size: 13.5px; }
.vs td.us { background: var(--green-soft); color: #065f46; font-weight: 600; }
.vs th:last-child { background: var(--green); color: #fff; }
.vs tr:last-child td { border-bottom: none; }
.plans { display: grid; gap: 18px; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { padding: 26px; display: flex; flex-direction: column; text-align: center; }
.plan.best { border: 2px solid var(--brand); }
.plan { position: relative; }
.plan .name { font-weight: 800; color: var(--brand); letter-spacing: 0.06em; text-transform: uppercase; font-size: 15px; }
.plan .clients { font-weight: 600; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.plan .tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.plan .price { font-size: 38px; font-weight: 800; margin: 10px 0 0; }
.plan .gst { color: var(--muted); font-size: 13.5px; }
.plan .per { margin: 10px 0 16px; font-weight: 600; }
.plan ul { text-align: left; margin: 0 0 20px; padding-left: 18px; color: var(--muted); flex: 1; }
.trial-band { margin-top: 22px; padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; background: var(--brand-soft); border: 1px solid #99f6e4; border-radius: 12px; }
.trial-band strong { font-size: 17px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin-bottom: 10px; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq details p { margin: 10px 0 0; color: var(--muted); }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px 14px 56px; position: relative; }
.steps li::before { content: counter(s); position: absolute; left: 16px; top: 13px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.dl { padding: 28px; display: grid; gap: 14px; }
@media (min-width: 760px) { .dl { grid-template-columns: 1fr auto; align-items: center; } }
.dl h2 { margin: 0; }
.muted-sm { color: var(--muted); font-size: 13.5px; }

/* List price struck out next to the plan price, with the discount badge. */
.was { font-size: 0.6em; font-weight: 500; opacity: 0.65; margin-right: 0.15em; }
.off { display: inline-block; vertical-align: middle; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; letter-spacing: 0; }
/* Plan cards: the badge on its own line in every card (₹13,999 leaves no room
   beside it, and the cards should line up), and a readable struck per-client price. */
.plan .price .off { display: table; margin: 8px auto 0; }
.plan .per .was { font-size: 0.85em; }