/* Shared tool detail design. Deliberately scoped to individual tool pages. */
.tp-tool-page.td-page {
    --td-ink: #17243c; --td-muted: #64728a; --td-blue: #2563eb;
    --td-line: #e1e7f0; --td-paper: #fff; --td-canvas: #f7f9fc;
    background: var(--td-canvas); color: var(--td-ink); padding: 0 0 80px;
    font-family: var(--font-sans, sans-serif);
}
.td-page .td-container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.td-page [id] { scroll-margin-top: 108px; }
.td-page a { text-underline-offset: 4px; }
.td-page a:focus-visible, .td-page summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 5px; border-radius: 5px; }
.td-breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 28px 0 0; font-size: 12px; line-height: 1.7; color: var(--td-muted); }
.td-breadcrumbs a { color: var(--td-muted); text-decoration: none; }
.td-breadcrumbs a:hover { color: var(--td-blue); }
.td-breadcrumbs > span[aria-hidden] { color: #abb6c8; }
.td-breadcrumbs [aria-current] { color: #40516d; }
.td-hero { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding: 40px 0 34px; }
.td-hero-copy { max-width: 850px; min-width: 0; }
.td-category { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #3762a6; text-decoration: none; }
.td-category > i { font-size: 10px; opacity: .65; }
.td-category-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--td-blue); }
.td-page h1.td-title { font-family: var(--font-heading, sans-serif); font-size: clamp(30px, 3.4vw, 46px); font-weight: 650; letter-spacing: -.035em; line-height: 1.12; margin: 15px 0 17px; color: var(--td-ink); overflow-wrap: anywhere; }
.td-description { max-width: 720px; font-size: 15px; line-height: 1.8; color: var(--td-muted); margin: 0; }
.td-benefits { display: flex; flex-wrap: wrap; gap: 9px 23px; list-style: none; padding: 0; margin: 22px 0 0; }
.td-benefits li { display: inline-flex; align-items: center; gap: 7px; color: #53647d; font-size: 11px; font-weight: 600; }
.td-benefits i { color: #338472; font-size: 10px; }
.td-hero-art { width: 150px; height: 150px; flex: 0 0 150px; position: relative; display: grid; place-items: center; background-image: radial-gradient(#ccd8ed 1px, transparent 1px); background-size: 14px 14px; border-radius: 50%; }
.td-hero-icon { width: 88px; height: 88px; display: grid; place-items: center; transform: rotate(-8deg); background: #fff; border: 1px solid #dfe7f5; border-radius: 25px; box-shadow: 0 14px 30px -12px #7890ba45; color: var(--td-blue); font-size: 34px; }
.td-hero-icon > i { transform: rotate(8deg); }
.td-art-spark { position: absolute; color: #7694c9; font-size: 21px; font-weight: 400; }
.td-art-spark--one { top: 6px; right: 20px; }
.td-art-spark--two { bottom: 8px; left: 15px; font-size: 15px; }
.td-art-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #8bc2b1; right: 6px; bottom: 22px; }
.td-page-nav { display: flex; gap: 28px; border-bottom: 1px solid var(--td-line); margin-bottom: 28px; overflow-x: auto; scrollbar-width: thin; }
.td-page-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; padding: 15px 0; font-size: 12px; font-weight: 650; color: var(--td-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.td-page-nav a:first-child { color: var(--td-blue); border-bottom-color: var(--td-blue); }
.td-page-nav a:hover { color: var(--td-blue); border-bottom-color: #a4bdf4; }
.td-workspace { min-width: 0; background: var(--td-paper); border: 1px solid #dce4ef; border-radius: 18px; box-shadow: 0 8px 32px -20px #263d652b; overflow: clip; }
.td-workspace-bar { padding: 19px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid #e9eef5; }
.td-workspace-label { display: flex; align-items: center; gap: 12px; }
.td-section-number { font: 10px/1 ui-monospace, monospace; color: #6580af; background: #f0f5fd; padding: 7px 8px; border-radius: 5px; }
.td-page .td-workspace-bar h2 { margin: 0; font-family: var(--font-sans, sans-serif); font-size: 12px; font-weight: 750; letter-spacing: -.01em; color: #3d4e68; }
.td-help-link { display: inline-flex; gap: 7px; align-items: center; font-size: 11px; color: #667997; text-decoration: none; }
.td-help-link:hover { color: var(--td-blue); }
.td-mode-tabs { display: flex; gap: 8px; padding: 16px 28px; overflow-x: auto; border-bottom: 1px solid #e9eef5; background: #fcfdff; scrollbar-width: thin; }
.td-mode-tab { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 9px 13px; border: 1px solid #e1e7f1; border-radius: 8px; color: #56647b; background: #fff; font-size: 11px; font-weight: 600; text-decoration: none; }
.td-mode-tab i { opacity: .7; }
.td-mode-tab:hover { border-color: #a7bef0; color: var(--td-blue); }
.td-mode-tab.is-active { color: #fff; background: var(--td-blue); border-color: var(--td-blue); box-shadow: 0 3px 7px #2563eb1a; }
.td-workspace-content { padding: 32px; min-width: 0; }
.td-workspace-footnote { text-align: center; display: flex; justify-content: center; align-items: center; gap: 8px; border-top: 1px solid #edf1f6; padding: 14px 20px; background: #fcfdff; font-size: 10px; color: #7d8a9f; }
.td-loading { display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 240px; font-size: 13px; color: var(--td-muted); }
.td-loading-spinner { width: 21px; height: 21px; border: 2px solid #e1eafa; border-top-color: var(--td-blue); border-radius: 50%; animation: td-spin .8s linear infinite; }
@keyframes td-spin { to { transform: rotate(360deg); } }

/* Keep each engine's controls and real results, without a second outer card. */
.td-page #tool-app-workspace > .calculator-card,
.td-page #tool-app-workspace > .tool-studio-card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; max-width: none !important; }
/* The page introduction already supplies the title and description. */
.td-page #tool-app-workspace > .calculator-card > .text-center:first-child:has(h2):not(:has(input, select, textarea, button)) { display: none; }
.td-page .tool-app { --tu-radius: 9px; --tu-primary: #2563eb; --tu-body: #47566d; --tu-ink: #1b2a43; }
.td-page #tool-app-workspace { padding: 0; }
.td-page .tool-app .mb-5 { margin-bottom: 24px !important; }
.td-page .tool-app .calculator-card > .flex > span:last-child { flex-shrink: 0; white-space: nowrap; }
.td-page .tool-app .inset-0 { inset: 0 !important; }
.td-page .tool-app :where(div, section, article, aside) { min-width: 0; }
.td-page .tool-app { overflow-wrap: anywhere; }
.td-page .tool-app button { border: 1px solid #dce3ee; border-radius: 8px; font-family: inherit; cursor: pointer; }
.td-page .tool-app button:not(.btn) { background-color: #f8fafc; color: #47566d; }
.td-page .tool-app .text-blue-100 { color: var(--td-muted) !important; }
.td-page .tool-app .calc-header-card {
    background: #f4f7fc !important; border: 1px solid #e1e8f3;
    box-shadow: none !important;
}
/* Preserve the contrast calculated by color tools for their actual swatches. */
.td-page .tool-app [class*="swatch-col"] :is(.display-6, [class*="hex-label"], .btn-link) { color: inherit !important; }
.td-page .tool-app [class*="swatch-col"] .btn-link { background: transparent !important; border-color: transparent !important; }
.td-page .tool-app [class*="swatch-col"] .btn-group { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.td-page .tool-app [class*="swatch-col"] .bg-black { background-color: rgb(0 0 0 / .18) !important; color: inherit !important; }
.td-page .tool-app [class*="swatch-col"] .btn-outline-light { background: transparent !important; color: inherit !important; border-color: currentColor !important; }
@media (min-width: 576px) { .td-page .tool-app .col-sm { flex: 1 0 0% !important; width: 0 !important; } }
@media (min-width: 768px) { .td-page .tool-app .col-md { flex: 1 0 0% !important; width: 0 !important; } }
@media (min-width: 992px) { .td-page .tool-app .col-lg { flex: 1 0 0% !important; width: 0 !important; } }
.td-page .tool-app :is(.row, .card, .card-body, .flex, .d-flex, .grid) { min-width: 0; }
.td-page .tool-app :is(.flex, .d-flex, .grid) > * { min-width: 0; }
.td-page .tool-app :is(input, select, textarea) { max-width: 100%; min-width: 0; }
.td-page .tool-app input:not([type]),
.td-page .tool-app input:is([type=text], [type=number], [type=url], [type=email], [type=password], [type=search], [type=date], [type=datetime-local], [type=time]),
.td-page .tool-app select, .td-page .tool-app textarea { border-color: #dce3ee; border-radius: 9px; box-shadow: 0 1px 2px #17243c03; }
.td-page .tool-app :is(input, select, textarea):focus-visible { outline: 2px solid #93b5ff; outline-offset: 2px; }
.td-page .tool-app [class*="bg-"][class*="text-white"] :is(h2,h3,h4,h5,h6),
.td-page .tool-app .text-white :is(h2,h3,h4,h5,h6) { color: inherit !important; }
.td-page .tool-app .text-white p { color: inherit; }
.td-page .tool-app > .tool-converter-body > form { margin-top: 20px; }

/* The guide reads like an article, with a compact navigation rail. */
.td-reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 38px; align-items: start; padding-top: 56px; }
.td-guide { min-width: 0; }
.td-sidebar { position: sticky; top: 108px; display: grid; gap: 18px; }
.td-eyebrow { display: block; color: #75829a; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.td-guide-nav { background: #fff; border: 1px solid var(--td-line); border-radius: 13px; padding: 23px 20px 12px; }
.td-guide-nav .td-eyebrow { margin-bottom: 13px; }
.td-guide-nav a { display: flex; align-items: center; gap: 11px; padding: 14px 0; font-size: 11px; color: #40516b; font-weight: 600; text-decoration: none; border-bottom: 1px solid #eff2f7; }
.td-guide-nav a:last-child { border-bottom: 0; }
.td-guide-nav a span { font: 10px/1 ui-monospace, monospace; color: #9ca9bc; }
.td-guide-nav a i { margin-left: auto; font-size: 10px; color: #a1aec2; }
.td-guide-nav a:hover, .td-guide-nav a:hover i { color: var(--td-blue); }
.td-explore-card { padding: 25px 22px; border: 1px solid #dbe5f8; border-radius: 13px; background: #edf3fe; }
.td-explore-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #d8e4fb; background: #fff; color: #416bb7; border-radius: 10px; margin-bottom: 23px; }
.td-explore-card .td-eyebrow { color: #6e85ad; }
.td-page .td-explore-card h2 { font-size: 21px; letter-spacing: -.025em; line-height: 1.25; margin: 10px 0; color: #24436f; }
.td-explore-card p { font-size: 12px; color: #647c9f; line-height: 1.8; margin: 0 0 22px; }
.td-explore-card a { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11px; font-weight: 750; color: #315fae; text-decoration: none; }
.td-page .tp-tool-detail-section { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; max-width: none; }
.td-page .tp-detail-header { margin: 0 0 24px; padding: 0 0 23px; border-bottom: 1px solid var(--td-line); background: transparent; text-align: left; }
.td-page .tp-detail-pill { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; border-radius: 0; padding: 0; margin-bottom: 12px; color: #6c7d98; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; }
.td-page .tp-detail-title { font-size: clamp(24px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.025em; line-height: 1.25; color: var(--td-ink); margin: 0; }
.td-page .tp-detail-body { padding: 0; color: #536178; font-size: 14px; line-height: 1.9; overflow-wrap: anywhere; }
.td-page .tp-detail-body :is(h2,h3) { color: #24344d; font-family: var(--font-heading, sans-serif); font-weight: 600; font-size: 23px; line-height: 1.35; letter-spacing: -.02em; margin: 33px 0 14px; padding: 0; border: 0; background: transparent; }
.td-page .tp-detail-body h4 { font-size: 16px; line-height: 1.5; margin: 22px 0 10px; color: #30425e; }
.td-page .tp-detail-body p { font-size: inherit; line-height: inherit; margin: 0 0 18px; color: #536178; }
.td-page .tp-detail-body strong { color: #30425e; }
.td-page .tp-detail-body ul, .td-page .tp-detail-body ol { padding-left: 22px; margin: 16px 0 24px; }
.td-page .tp-detail-body li { margin-bottom: 8px; }
.td-page .tp-detail-body a { color: #2563eb; }
.td-page .tp-detail-body img { max-width: 100%; height: auto; border-radius: 10px; }
.td-page .tp-detail-body :is(pre, .wp-block-code) { overflow-x: auto; padding: 20px; border: 1px solid var(--td-line); background: #fff; border-radius: 10px; font-size: 12px; white-space: pre-wrap; }
.td-page .tp-detail-body table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; margin: 22px 0; background: #fff; font-size: 12px; }
.td-page .tp-detail-body :is(th,td) { padding: 12px 15px; text-align: left; border: 1px solid var(--td-line); min-width: 100px; }
.td-page .tp-detail-body th { color: #3c5272; background: #edf2fa; font-weight: 700; }
.td-page .tp-detail-body blockquote { margin: 24px 0; padding: 18px 23px; background: #eef3fd; border-left: 3px solid #87aaf0; border-radius: 0 9px 9px 0; }
.td-page .tp-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 30px; }
.td-page .tp-step-card { padding: 21px 16px; border: 1px solid var(--td-line); border-radius: 11px; background: #fff; box-shadow: none; text-align: left; }
.td-page .tp-step-number { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 0 17px; border: 1px solid #dbe6fa; background: #f1f5fd; color: #4673bd; border-radius: 7px; font-size: 11px; font-weight: 700; box-shadow: none; }
.td-page .tp-step-card h4 { font-size: 13px; margin: 0 0 9px; }
.td-page .tp-step-card p { font-size: 11px; line-height: 1.8; margin: 0; }
.td-page .tp-highlights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0 30px; }
.td-page .tp-highlight-card { padding: 18px; display: flex; gap: 12px; border: 1px solid var(--td-line); background: #fff; border-radius: 11px; box-shadow: none; }
.td-page .tp-highlight-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; font-size: 13px; border-radius: 8px; background: #f0f5fd; color: #5b7cba; }
.td-page .tp-highlight-card h4 { font-size: 12px; margin: 0 0 6px; }
.td-page .tp-highlight-card p { font-size: 11px; line-height: 1.8; margin: 0; }
.td-page .tp-detail-faq-list { border-top: 1px solid var(--td-line); }
.td-page .tp-detail-faq-item { padding: 19px 0; border: 0; border-bottom: 1px solid var(--td-line); border-radius: 0; margin: 0; background: transparent; }
.td-page .tp-detail-faq-q { display: flex; gap: 10px; margin: 0 0 8px; font-size: 13px; font-weight: 650; color: #354963; }
.td-page .tp-detail-faq-q i { color: #8a9dbd; font-size: 12px; }
.td-page .tp-detail-faq-a { font-size: 12px; margin: 0; }
.td-page .tp-detail-tip-box { display: flex; gap: 13px; padding: 19px 20px; margin-top: 32px; border: 1px solid #d9e5fa; border-radius: 11px; background: #eff4fd; }
.td-page .tp-detail-tip-icon { color: #6283ba; font-size: 16px; margin-top: 5px; }
.td-page .tp-detail-tip-text { font-size: 12px; margin: 0; }

.td-related { border-top: 1px solid var(--td-line); padding-top: 38px; margin-top: 56px; }
.td-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 22px; margin-bottom: 25px; }
.td-page .td-section-heading h2 { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: var(--td-ink); margin: 10px 0 0; }
.td-all-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 650; color: #4a668f; text-decoration: none; flex-shrink: 0; padding-bottom: 5px; }
.td-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.td-related-card { display: flex; flex-direction: column; align-items: start; border: 1px solid var(--td-line); border-radius: 13px; padding: 25px; text-decoration: none; background: #fff; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; min-width: 0; }
.td-related-card:hover { border-color: #a6beeb; box-shadow: 0 7px 22px -15px #31569c55; transform: translateY(-3px); text-decoration: none; }
.td-related-icon { width: 39px; height: 39px; display: grid; place-items: center; font-size: 17px; border: 1px solid #e3eaf8; border-radius: 10px; background: #f4f7fd; color: #5276b7; margin-bottom: 22px; }
.td-page .td-related-card h3 { color: #263955; font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; margin: 0 0 10px; }
.td-related-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 11px; line-height: 1.9; margin: 0 0 23px; color: #75829a; }
.td-related-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; align-self: stretch; margin-top: auto; padding-top: 15px; border-top: 1px solid #edf1f7; font-size: 11px; font-weight: 650; color: #5475ad; }
.td-related-card:hover .td-related-action { color: #2563eb; }

@media (max-width: 1000px) {
    .td-reading-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .td-sidebar { position: static; grid-template-columns: 1fr 1fr; }
    .td-guide-nav, .td-explore-card { padding: 22px; }
    .td-explore-icon { display: none; }
    .td-hero-art { width: 120px; height: 120px; flex-basis: 120px; }
}
@media (max-width: 700px) {
    .td-page .tool-app :is([class*="-layout"], [class*="-inputs-grid"]) { grid-template-columns: minmax(0, 1fr) !important; }
    .td-page .tool-app :is(.card, .card-body, [class*="-card"], [class*="-col"]) { min-width: 0 !important; max-width: 100%; }
    .td-page .tool-app :is(.grid, [style*="display: grid"]) > * { min-width: 0; }
    .td-page .tool-app :is(.d-flex, .flex, [style*="display: flex"]) > * { max-width: 100%; }
    .td-page .tool-app :is(.flex, .d-flex, .btn-group):has(button) { flex-wrap: wrap !important; }
    .td-page .tool-app button { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
    .td-page .tool-app .btn { padding-inline: 12px; }
    .td-page .tool-app .row > [class*="col-"] { max-width: 100%; }
    .td-page .td-container { width: calc(100% - 32px); }
    .td-breadcrumbs { padding-top: 20px; font-size: 10px; gap: 7px; }
    .td-breadcrumbs [aria-current], .td-breadcrumbs > a:last-of-type + span[aria-hidden] { display: none; }
    .td-hero { padding: 29px 0 23px; gap: 0; }
    .td-hero-art { display: none; }
    .td-page h1.td-title { font-size: 31px; margin: 13px 0; }
    .td-description { font-size: 13px; line-height: 1.8; }
    .td-category { font-size: 9px; line-height: 1.6; }
    .td-benefits { gap: 9px 15px; margin-top: 18px; }
    .td-benefits li { font-size: 10px; }
    .td-page-nav { gap: 23px; margin-bottom: 21px; }
    .td-page-nav a { padding: 13px 0; font-size: 11px; }
    .td-workspace { border-radius: 12px; }
    .td-workspace-bar { padding: 16px; }
    .td-workspace-content { padding: 20px 16px; }
    .td-workspace-footnote { font-size: 9px; padding: 13px 12px; }
    .td-mode-tabs { padding: 13px 16px; }
    .td-mode-tab { font-size: 10px; padding: 8px 11px; }
    .td-reading-layout { padding-top: 36px; }
    .td-page .tp-detail-title { font-size: 25px; }
    .td-page .tp-detail-body { font-size: 13px; }
    .td-page .tp-detail-body :is(h2,h3) { font-size: 21px; }
    .td-page .tp-steps-grid { grid-template-columns: 1fr; gap: 10px; }
    .td-page .tp-step-card { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; padding: 17px; }
    .td-page .tp-step-number { grid-row: span 2; margin: 0; }
    .td-page .tp-step-card h4 { margin: 0 0 5px; }
    .td-page .tp-highlights-grid { gap: 10px; grid-template-columns: 1fr; }
    .td-sidebar { grid-template-columns: 1fr; }
    .td-related { margin-top: 36px; padding-top: 30px; }
    .td-section-heading { align-items: start; flex-direction: column; gap: 16px; }
    .td-page .td-section-heading h2 { font-size: 26px; }
    .td-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
    .td-related-card { padding: 18px 15px; }
    .td-page .td-related-card h3 { font-size: 15px; }
    .td-related-card p { font-size: 10px; }
}
@media (max-width: 400px) { .td-related-grid { grid-template-columns: 1fr; } .td-help-link { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) {
    .td-page *, .td-page *::before, .td-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    .td-page .td-sidebar, .td-page .td-hero-art, .td-page .td-page-nav, .td-page .td-related { display: none; }
    .td-page .td-container { width: 100%; } .td-page .td-reading-layout { display: block; } .td-page .td-workspace { box-shadow: none; }
}