/* Income tax calculator pages (/income-tax-calculator/, /income-tax-calculator/<province>/) and the HST calculator. Prefix: tc-
   Simple and modern: a whitish-blue hero, white cards on lightly tinted bands, one blue accent, large readable numbers.
   Loaded on these pages (and the /tax-tools/ hub) only. */

.tc-page {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1rem;           /* base.html sets the body to 22px; this page is sized in rem from 16px */
    line-height: 1.6;
    color: #1e293b;
}
.tc-page [hidden] { display: none !important; }
.tc-page input, .tc-page select, .tc-page button { font-family: inherit; }

/* ---- One centred column for every band, so every edge lines up at every screen size ---- */
/* base.html sets overflow-x: hidden on html and body, which makes <body> a scroll container and stops position: sticky
   from working. `clip` keeps the same overflow protection (same fix as service-pages.css). */
html:root,
html:root body { overflow-x: clip; }

.tc-wrap {
    width: 100%;
    max-width: 1760px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.25rem, 5vw, 4.5rem);
    padding-right: clamp(1.25rem, 5vw, 4.5rem);
}
/* keep clear of the floating chat and back-to-top buttons on desktop */
@media (min-width: 1280px) { .tc-wrap { padding-right: max(clamp(1.25rem, 5vw, 4.5rem), 108px); } }
.tc-band { padding: clamp(2.25rem, 5vw, 3.75rem) 0; background: #f8fafc; }
.tc-band-plain { background: #ffffff; }
.tc-band-tint { background: #f1f6ff; border-top: 1px solid #e3ecfb; border-bottom: 1px solid #e3ecfb; }

/* ---- Hero: blue-to-white shade, built like the Unfiled Tax page's hero (a base gradient plus a soft colour glow in two opposite corners) ---- */
.tc-page .tc-hero.sd-rd-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #c7dcfb;
    padding: clamp(2.25rem, 5vw, 3.5rem) 0 clamp(5.5rem, 9vw, 7.5rem);
    background:
        radial-gradient(760px 400px at 100% -8%, rgba(59, 130, 246, 0.30) 0%, rgba(59, 130, 246, 0) 70%),
        radial-gradient(900px 560px at -6% 38%, rgba(125, 211, 252, 0.70) 0%, rgba(125, 211, 252, 0.28) 45%, rgba(125, 211, 252, 0) 72%),
        linear-gradient(135deg, #d6e8ff 0%, #f6faff 38%, #ffffff 56%, #e7f0ff 80%, #cfe0ff 100%) !important;
}
.tc-hero .sd-rd-hero-inner { position: relative; max-width: 880px; margin-left: auto; margin-right: auto; text-align: center; }
.tc-page .tc-hero .sd-rd-hero-intro { color: #334155; margin-left: auto; margin-right: auto; max-width: 720px; }
.tc-crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; align-items: center; font-size: 0.875rem; color: #64748b; margin: 0 0 1.1rem; }
.tc-crumbs a { color: #1d4ed8; text-decoration: none; }
.tc-crumbs a:hover, .tc-crumbs a:focus-visible { text-decoration: underline; }
.tc-crumbs [aria-current] { color: #475569; }
.tc-pills { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; padding: 0; margin: 0 0 1.1rem; }
.tc-pills li { padding: 0.3rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid #cfe0fb; color: #1e3a8a; font-size: 0.875rem; font-weight: 600; }
.tc-stamp { font-size: 0.875rem; color: #475569; margin: 0; }

/* ---- Tool: floats over the edge of the hero ---- */
.tc-band-tool { padding-top: 0; }
.tc-tool { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: calc(-1 * clamp(3rem, 6vw, 4.5rem)); }
@media (min-width: 900px) { .tc-tool { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.75rem; align-items: start; } }

.tc-form, .tc-result { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: clamp(1.1rem, 3vw, 1.75rem); box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10); }
.tc-h { font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0 0 1rem; }

.tc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 12px; margin-bottom: 1.1rem; }
.tc-seg label { margin: 0; }
.tc-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tc-seg span { display: block; text-align: center; padding: 0.6rem 0.5rem; border-radius: 9px; font-weight: 600; color: #475569; cursor: pointer; min-height: 44px; line-height: 1.7; }
.tc-seg input:checked + span { background: #fff; color: #1d4ed8; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.tc-seg input:focus-visible + span { outline: 2px solid #2563eb; outline-offset: 2px; }

.tc-field { margin-bottom: 1rem; }
.tc-field > label { display: block; font-weight: 600; color: #0f172a; margin: 0 0 0.35rem; }
.tc-opt { font-weight: 400; color: #64748b; }
.tc-field select, .tc-money input {
    width: 100%; min-height: 48px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #0f172a;
    padding: 0.55rem 0.8rem; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
.tc-field select:focus-visible, .tc-money input:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
.tc-money { position: relative; }
.tc-money > span { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: #64748b; font-weight: 600; }
.tc-money input { padding-left: 1.8rem; }
.tc-hint { font-size: 0.85rem; color: #64748b; margin: 0.3rem 0 0; line-height: 1.4; }
.tc-privacy { font-size: 0.85rem; color: #475569; margin: 0.25rem 0 0.75rem; }
.tc-reset { background: none; border: 0; padding: 0.4rem 0; color: #1d4ed8; font-weight: 600; cursor: pointer; text-decoration: underline; min-height: 40px; }

/* ---- Result ---- */
.tc-result { min-height: 26rem; }
.tc-empty p { color: #475569; margin: 0; }
.tc-status { background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: 10px; padding: 0.7rem 0.9rem; margin: 0 0 1rem; font-size: 0.9rem; color: #334155; line-height: 1.45; }
.tc-take-label { color: #475569; margin: 0; font-size: 0.95rem; }
.tc-take { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 700; color: #0f172a; line-height: 1.1; margin: 0.15rem 0 0.8rem; font-variant-numeric: tabular-nums; }
.tc-period { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 1.1rem; }
.tc-period button { min-height: 40px; padding: 0.35rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #334155; font-weight: 600; cursor: pointer; }
.tc-period button[aria-pressed="true"] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.tc-period button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

.tc-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: #e2e8f0; }
.tc-bar span { display: block; height: 100%; min-width: 0; border-right: 2px solid #fff; transition: width 0.25s ease; }
.tc-bar span:last-child { border-right: 0; }
.tc-seg-take { background: #1d4ed8; }
.tc-seg-fed { background: #0f766e; }
.tc-seg-prov { background: #0891b2; }
.tc-seg-cpp { background: #475569; }
.tc-seg-ei { background: #94a3b8; }
.tc-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding: 0; margin: 0.6rem 0 1.1rem; font-size: 0.85rem; color: #475569; }
.tc-legend li { font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem; }
.tc-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tc-legend b { color: #0f172a; font-weight: 700; }

.tc-rows { width: 100%; border-collapse: collapse; margin: 0; }
.tc-rows th, .tc-rows td { padding: 0.55rem 0; border-top: 1px solid #e2e8f0; vertical-align: baseline; }
.tc-rows th { font-weight: 500; color: #475569; text-align: left; padding-right: 1rem; }
.tc-rows td { text-align: right; font-weight: 600; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-rows tr.tc-total th, .tc-rows tr.tc-total td { font-weight: 700; color: #0f172a; border-top: 2px solid #cbd5e1; }
.tc-rows tr.tc-balance th, .tc-rows tr.tc-balance td { font-weight: 700; color: #1d4ed8; }
.tc-fine { font-size: 0.82rem; color: #64748b; margin: 0.9rem 0 0; }

/* ---- Layout: main column and a sticky consultation rail (same idea as the service pages) ---- */
.tc-band-layout { background: #ffffff; padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.tc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 1280px) { .tc-layout { grid-template-columns: minmax(0, 1fr) clamp(452px, 32vw, 500px); gap: 2rem; align-items: start; } }
.tc-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.tc-block { min-width: 0; background: #ffffff; border: 1px solid #e3ecfb; border-radius: 20px; padding: clamp(1.25rem, 3vw, 2rem); }
.tc-block-tint { background: #f1f6ff; }
.tc-block .tc-panel { background: #f1f6ff; border-color: #e3ecfb; box-shadow: none; }
.tc-block-tint .tc-panel { background: #ffffff; border-color: #e3ecfb; }
.tc-block .tc-scroll { margin-top: 1rem; }

/* The consultation box follows the page on wide screens: the small script in _tc_consult_rail.html makes it sticky, so without
   JavaScript it is simply a normal block. It never has an inner scrollbar. */
.tc-rail { align-self: start; display: grid; gap: 0.75rem; }
.tc-rail .cta-rd-form-card { padding: 1.25rem 1.5rem 1.1rem; }
.tc-rail .cta-rd-form-badge { margin-bottom: 0.55rem; }
.tc-rail .cta-rd-form-title { font-size: 1.35rem; margin-bottom: 0.25rem; }
.tc-rail .cta-rd-form-sub { font-size: 0.86rem; line-height: 1.45; margin-bottom: 0.8rem; }
/* the left column (name, email, preferred location) needs more room than the right one (phone, company, meeting format) */
.tc-rail .cta-rd-fields { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 0.55rem 0.9rem; }
.tc-rail .cta-rd-field > span { font-size: 0.74rem; line-height: 1.3; }
.tc-rail .cta-rd-form-card input, .tc-rail .cta-rd-form-card select, .tc-rail .cta-rd-form-card textarea { font-size: 0.92rem; min-height: 2.6rem; padding: 0.5rem 0.8rem; text-overflow: ellipsis; }
.tc-rail .cta-rd-form-card select { padding-right: 2.2rem; }
.tc-rail .cta-rd-form-card textarea { height: 4.2rem; resize: vertical; }
.tc-rail .cta-rd-submit { margin-top: 0.85rem; padding: 0.85rem 1rem; font-size: 1rem; }
.tc-rail .cta-rd-form-foot { margin-top: 0.65rem; font-size: 0.78rem; }
.tc-ask { margin: 1.1rem 0 0; font-size: 0.9rem; color: #475569; }
.tc-ask a { color: #1d4ed8; font-weight: 600; }


/* ---- Call and WhatsApp boxes: copied from service-pages.css so they look and animate exactly like the service pages ---- */
/* ---------- Icons & tiles ---------- */
.cs-ico {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}
/* Tinted "second tone" of the two-tone icons. */
.cs-ico .t {
    fill: currentColor;
    fill-opacity: 0.15;
}

.cs-tile {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 13px;
    color: #2563eb;
    background: linear-gradient(140deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #cfe0fb;
}
.cs-tile .cs-ico { width: 24px; height: 24px; }
.cs-tile-sm { width: 36px; height: 36px; border-radius: 10px; }
.cs-tile-sm .cs-ico { width: 18px; height: 18px; }

/* "Prefer to talk?" box -- the phone icon does a small, gentle nudge on hover. */
.cs-rail-call {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    background: #f8fafc;
    border: 1px solid #e6ebf2;
    border-radius: 14px;
}
.cs-rail-call {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.cs-rail-text { display: block; }
.cs-rail-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}
.cs-rail-num {
    display: block;
    font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #0f172a;
    transition: color 0.2s;
}
.cs-rail-call:hover .cs-rail-num,
.cs-rail-call:focus-visible .cs-rail-num { color: #2563eb; }
.cs-rail-call:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.cs-rail-call .cs-tile .cs-ico { transform-origin: 70% 70%; }
@keyframes cs-phone-nudge {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    50% { transform: rotate(8deg); }
    75% { transform: rotate(-4deg); }
}
@media (hover: hover) and (pointer: fine) {
    .cs-rail-call {
        transition: border-color 0.25s, box-shadow 0.25s;
    }
    .cs-rail-call .cs-tile {
        transition: background 0.25s, color 0.25s, border-color 0.25s;
    }
    .cs-rail-call:hover,
    .cs-rail-call:focus-within {
        border-color: #93b4f5;
        box-shadow: 0 8px 20px -10px rgba(37, 99, 235, 0.4);
    }
    .cs-rail-call:hover .cs-tile,
    .cs-rail-call:focus-within .cs-tile {
        background: linear-gradient(135deg, #2563eb, #06b6d4);
        color: #ffffff;
        border-color: transparent;
    }
    .cs-rail-call:hover .cs-tile .cs-ico,
    .cs-rail-call:focus-within .cs-tile .cs-ico {
        animation: cs-phone-nudge 0.6s ease-in-out;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cs-rail-call:hover .cs-tile .cs-ico,
    .cs-rail-call:focus-within .cs-tile .cs-ico { animation: none; }
}

/* "Prefer to chat?" WhatsApp box: same layout as the phone box above it, in
   WhatsApp green, with a small pop (instead of the phone nudge) on hover. */
.cs-rail-wa .cs-tile {
    color: #128c4a;
    background: linear-gradient(140deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
}
.cs-rail-wa .cs-tile .cs-ico { width: 20px; height: 20px; transform-origin: 50% 60%; }
.cs-rail-wa:hover .cs-rail-num,
.cs-rail-wa:focus-visible .cs-rail-num { color: #15803d; }
.cs-rail-wa:focus-visible { outline-color: #16a34a; }
@keyframes cs-wa-pop {
    0%, 100% { transform: scale(1) rotate(0deg); }
    30% { transform: scale(1.22) rotate(-8deg); }
    60% { transform: scale(0.94) rotate(5deg); }
}
@media (hover: hover) and (pointer: fine) {
    .cs-rail-wa:hover,
    .cs-rail-wa:focus-within {
        border-color: #86efac;
        box-shadow: 0 8px 20px -10px rgba(22, 163, 74, 0.45);
    }
    .cs-rail-wa:hover .cs-tile,
    .cs-rail-wa:focus-within .cs-tile {
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: #ffffff;
        border-color: transparent;
    }
    .cs-rail-wa:hover .cs-tile .cs-ico,
    .cs-rail-wa:focus-within .cs-tile .cs-ico { animation: cs-wa-pop 0.6s ease-in-out; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-rail-wa:hover .cs-tile .cs-ico,
    .cs-rail-wa:focus-within .cs-tile .cs-ico { animation: none; }
}

/* The call and WhatsApp boxes sit side by side under the form (one row, so the whole rail stays short enough to fit in the window). */
.cs-rail-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cs-rail-short { display: none; }
.cs-rail-contact .cs-rail-call { gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 12px; }
.cs-rail-contact .cs-rail-num { font-size: 0.98rem; }
@media (max-width: 420px) { .cs-rail-contact { grid-template-columns: 1fr; } }

/* ---- Content ---- */
.tc-text > h2 { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.85rem); font-weight: 700; color: #0f172a; margin: 0 0 0.75rem; line-height: 1.25; }
.tc-text > h2:not(:first-child) { margin-top: 2.5rem; }
.tc-text p a, .tc-text .tc-facts a { color: #1d4ed8; }
.tc-text h3 { font-size: 1.1rem; font-weight: 700; color: #0f172a; margin: 1.5rem 0 0.5rem; }
.tc-text > p, .tc-text > ul.tc-facts, .tc-text > .tc-note { max-width: 780px; color: #334155; }
.tc-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin: 1.25rem 0 0; }
@media (min-width: 760px) { .tc-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; } }
.tc-panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.25rem 1.4rem; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.tc-band-plain .tc-panel { background: #f1f6ff; border-color: #e3ecfb; box-shadow: none; }
.tc-panel h3 { margin-top: 0; }
.tc-panel ul { margin: 0; padding: 0; list-style: none; }
.tc-panel li { position: relative; margin: 0.45rem 0; padding-left: 1.6rem; color: #334155; }
.tc-panel li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: #dbeafe; }
.tc-panel .tc-checks li::before { background: #dbeafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.4 2.4 5-5.2' fill='none' stroke='%231d4ed8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.tc-panel .tc-dashes li::before { background: #e2e8f0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8h6.8' fill='none' stroke='%23475569' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.tc-facts { padding-left: 1.1rem; }
.tc-note { background: #f1f5f9; border: 1px dashed #94a3b8; border-radius: 10px; padding: 0.8rem 1rem; }

.tc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tc-table th, .tc-table td { padding: 0.65rem 0.8rem; text-align: left; border-bottom: 1px solid #e2e8f0; }
.tc-table thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; background: #f1f6ff; border-bottom: 1px solid #dbe6f8; }
.tc-table tbody th { font-weight: 600; color: #0f172a; }
.tc-table tbody tr:last-child th, .tc-table tbody tr:last-child td { border-bottom: 0; }
.tc-table td:last-child { text-align: right; }
.tc-table-wide td, .tc-table-wide thead th:not(:first-child) { text-align: right; }
.tc-panel .tc-table { margin-top: 0.4rem; }
.tc-panel .tc-table thead th:first-child { border-radius: 8px 0 0 8px; }
.tc-panel .tc-table thead th:last-child { border-radius: 0 8px 8px 0; }
.tc-scroll { overflow-x: auto; margin-top: 1.1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.tc-scroll .tc-table { min-width: 640px; }
.tc-scroll .tc-table thead th:first-child { border-top-left-radius: 15px; }
.tc-scroll .tc-table thead th:last-child { border-top-right-radius: 15px; }
.tc-scroll .tc-table tbody tr:nth-child(even) { background: #f8fafc; }

/* ---- FAQ: two columns, three on wide screens ---- */
.tc-faq .faq-rd-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; align-items: start; margin-top: 1.25rem; }
@media (min-width: 760px) { .tc-faq .faq-rd-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1900px) { .tc-faq .faq-rd-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-faq .faq-rd-toggle { padding: 1rem 1.1rem; }
.tc-faq .faq-rd-question { font-size: 0.98rem; }

/* ---- Source and help links: cards, not bare links ---- */
.tc-sources { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; padding: 0; margin: 1.1rem 0 0; }
@media (min-width: 640px) { .tc-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1900px) { .tc-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tc-sources a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 100%;
    padding: 0.9rem 1.1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
    color: #0f172a; font-weight: 600; text-decoration: none; line-height: 1.35;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.tc-sources a::after { content: "\2197"; flex-shrink: 0; color: #1d4ed8; font-size: 1.1rem; }
.tc-sources-help a::after { content: "\2192"; }
.tc-sources a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: hover) { .tc-sources a:hover { border-color: #93b4f5; color: #1d4ed8; } }
.tc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 1.1rem 0 0; }
.tc-chips a { display: inline-block; padding: 0.4rem 0.95rem; border: 1px solid #cbd5e1; border-radius: 999px; background: #fff; color: #1e293b; text-decoration: none; font-size: 0.95rem; min-height: 40px; line-height: 1.7; }
.tc-chips a[aria-current="page"] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.tc-chips a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (hover: hover) { .tc-chips a:hover { border-color: #1d4ed8; color: #1d4ed8; } .tc-chips a[aria-current="page"]:hover { color: #fff; } }

/* ---- Phones and small tablets ---- */
.tc-quick { display: none; }
.tc-crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
.tc-ask a { display: inline-block; padding: 0.45rem 0; }
@media (max-width: 899px) {
    /* the answer appears right under the income field, so nobody has to scroll past the whole form to see it */
    .tc-quick:not([hidden]) { display: block; margin: 0.6rem 0 0; padding: 0.7rem 0.9rem; background: #eef5ff; border: 1px solid #cfe0fb; border-radius: 12px; font-size: 0.95rem; color: #1e293b; line-height: 1.45; }
    .tc-quick b { font-family: "Space Grotesk", "Plus Jakarta Sans", sans-serif; font-size: 1.15rem; color: #0f172a; }
    .tc-quick a { display: inline-block; padding: 0.55rem 0; color: #1d4ed8; font-weight: 600; }
}
@media (max-width: 768px) {
    /* below 16px an iPhone zooms the page in when a field is tapped */
    .tc-rail .cta-rd-form-card input, .tc-rail .cta-rd-form-card select, .tc-rail .cta-rd-form-card textarea { font-size: 1rem; min-height: 2.9rem; }
}
@media (max-width: 600px) {
    /* a compact hero: the calculator should be on the first screen or just below it */
    .tc-page .tc-hero.sd-rd-hero { padding: 1rem 0 4.25rem; }
    .tc-crumbs { margin-bottom: 0.5rem; font-size: 0.8rem; }
    .tc-hero .ct-rd-eyebrow { margin-bottom: 0.1rem; }
    .tc-page .tc-hero h1 { margin-bottom: 0.6rem; }
    .tc-page .tc-hero .sd-rd-hero-intro { font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.7rem; }
    .tc-pills { display: none; }
    .tc-stamp { font-size: 0.8rem; }
    .tc-tool { margin-top: -3.25rem; }
    .tc-form, .tc-result { padding: 1rem; border-radius: 16px; }
    .tc-period button { padding: 0.35rem 0.7rem; }
    /* more room for the text */
    .tc-wrap { padding-left: 0.9rem; padding-right: 0.9rem; }
    .tc-block { padding: 1.1rem 1rem; border-radius: 16px; }
    .tc-panel { padding: 1rem 1.05rem; }
    /* every field full width: nothing is cut off and each one is easy to tap */
    .tc-rail .cta-rd-fields { grid-template-columns: minmax(0, 1fr); }
    .tc-rail .cta-rd-form-card { padding: 1.1rem 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) { .tc-bar span { transition: none; } }
@media (max-width: 480px) { .tc-rows th { font-size: 0.95rem; } .tc-result { min-height: 0; } }

/* ---- Hover and click motion, the same feel as the service cards (lift, blue edge, soft shadow); buttons press in when clicked ---- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .tc-panel, .tc-sources a, .tc-chips a, .tc-period button, .tc-seg span, .tc-reset, .tc-page .svc-rd-btn, .tc-rail .cta-rd-submit, .tc-form, .tc-result {
        transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.25s ease, color 0.2s ease;
    }
    .tc-panel:hover, .tc-sources a:hover { position: relative; z-index: 2; transform: translateY(-4px) scale(1.015); border-color: #93b4f5; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08), 0 14px 26px -8px rgba(15, 23, 42, 0.22), 0 28px 48px -14px rgba(37, 99, 235, 0.28); }
    .tc-form:hover, .tc-result:hover { border-color: #bcd0f7; box-shadow: 0 16px 38px rgba(30, 64, 175, 0.15); }
    .tc-page .svc-rd-btn-primary:hover, .tc-rail .cta-rd-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -6px rgba(37, 99, 235, 0.55); }
    .tc-chips a:not([aria-current="page"]):hover, .tc-period button:not([aria-pressed="true"]):hover, .tc-seg input:not(:checked) + span:hover { transform: translateY(-2px); background-color: #eff6ff; box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.4); }
}
@media (prefers-reduced-motion: no-preference) {
    @keyframes tc-pop { 0% { transform: scale(0.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
    .tc-seg input:checked + span, .tc-period button[aria-pressed="true"] { animation: tc-pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
    .tc-page .svc-rd-btn:active, .tc-rail .cta-rd-submit:active, .tc-chips a:active, .tc-period button:active, .tc-seg span:active, .tc-sources a:active, .tc-reset:active { transform: scale(0.96); box-shadow: none; }
}