/* ARR and MRR calculator. Loaded only on calculator pages. */
.calc [hidden] { display: none !important; }
.calc-page { padding: 2.5rem 0 4rem; }
.calc-page .shell { max-width: var(--sr-max); }
.calc-intro { max-width: var(--sr-text); }
.calc-intro p { font-size: 1.15rem; color: #24364b; }
.calc { margin: 1.5rem 0 3rem; }
.calc-shell { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .calc-shell { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .calc-results { position: sticky; top: 6rem; } }
.calc-inputs, .calc-results { background: var(--sr-white); border: 1px solid var(--sr-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(11, 42, 86, .06); padding: 1.25rem; min-width: 0; }
@media (min-width: 600px) { .calc-inputs, .calc-results { padding: 1.75rem; } }

.calc-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--sr-border); }
.calc-tabs [role="tab"] { min-height: 44px; padding: .55rem .9rem; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--sr-muted); font: 600 .95rem Inter, system-ui, sans-serif; cursor: pointer; }
.calc-tabs [role="tab"][aria-selected="true"] { color: var(--sr-navy); border-bottom-color: var(--sr-cyan); }
.calc-tabs [role="tab"]:hover { color: var(--sr-navy); }

.calc fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.calc legend { padding: 0; margin-bottom: .9rem; color: var(--sr-navy); font: 600 1.05rem Sora, system-ui, sans-serif; }
.calc-grid { display: grid; gap: .9rem 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.calc-field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; min-width: 0; }
.calc-field label, .calc-label { color: var(--sr-navy); font-size: .92rem; font-weight: 600; }
.calc textarea { width: 100%; min-height: 8rem; padding: .55rem .7rem; border: 1px solid #b9c6d6; border-radius: 6px; font: 400 .95rem/1.5 var(--sr-mono); resize: vertical; }
.calc input:not([type="radio"]), .calc select { min-height: 44px; width: 100%; padding: .55rem .7rem; border: 1px solid #b9c6d6; border-radius: 6px; background: var(--sr-white); color: var(--sr-slate); font: 400 1rem Inter, system-ui, sans-serif; }
.calc input:focus-visible, .calc select:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 1px; }
.calc input[aria-invalid="true"] { border-color: #b42318; border-width: 2px; }
.calc-error { margin: 0; color: #b42318; font-size: .88rem; font-weight: 600; }
.calc-error::before { content: "Error: "; }
.calc-hint { margin: .3rem 0 0; color: var(--sr-muted); font-size: .86rem; }
.calc-currency { max-width: 22rem; }
.calc-radios { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.calc-radios .calc-label { width: 100%; }
.calc-radios label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 500; color: var(--sr-slate); }
.calc-radios input { width: 1.15rem; height: 1.15rem; accent-color: var(--sr-blue); }

.calc-plans { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .9rem; }
.calc-plan { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; padding: 1rem; border: 1px solid var(--sr-border); border-radius: 8px; background: var(--sr-soft-white); }
.calc-plan .calc-remove { justify-self: start; margin-bottom: .9rem; }

.calc-actions, .calc-result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.calc-primary, .calc-secondary, .calc-link { min-height: 44px; padding: .6rem 1.1rem; border-radius: 6px; font: 600 .95rem Inter, system-ui, sans-serif; cursor: pointer; }
.calc-primary { border: 1px solid var(--sr-blue); background: var(--sr-blue); color: var(--sr-white); }
.calc-primary:hover { background: #1d4fd0; }
.calc-secondary { border: 1px solid #b9c6d6; background: var(--sr-white); color: var(--sr-navy); }
.calc-secondary:hover { border-color: var(--sr-blue); }
.calc-secondary:disabled { opacity: .55; cursor: not-allowed; }
.calc-link { border: 0; background: none; color: var(--sr-blue); text-decoration: underline; text-underline-offset: .18em; padding-inline: .2rem; }

.calc-results-title { margin: 0 0 1rem; font-size: 1.3rem; }
.calc-output { min-height: 12rem; display: grid; gap: .75rem; }
.calc-empty { color: var(--sr-muted); margin: 0; }
.calc-metric { padding: .8rem 1rem; border: 1px solid var(--sr-border); border-radius: 8px; background: var(--sr-soft-white); }
.calc-metric-primary { border-left: 4px solid var(--sr-cyan); background: var(--sr-tint); }
.calc-metric-label { margin: 0; color: var(--sr-muted); font-size: .86rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.calc-metric-value { margin: .15rem 0 0; color: var(--sr-navy); font: 600 1.5rem Sora, system-ui, sans-serif; overflow-wrap: anywhere; }
.calc-metric-primary .calc-metric-value { font-size: clamp(1.9rem, 4vw, 2.4rem); }
.calc-metric-formula { margin: .35rem 0 0; color: var(--sr-muted); font: 400 .82rem var(--sr-mono); }
.calc-interpretation { padding: .9rem 1rem; border-radius: 8px; background: var(--sr-white); border: 1px dashed #b9c6d6; }
.calc-interpretation p { margin: 0 0 .5rem; font-size: .95rem; }
.calc-interpretation p:last-child { margin: 0; }
.calc-warning { margin: 1rem 0 0; padding: .8rem 1rem; border: 2px solid #b42318; border-radius: 8px; color: #7a1b13; background: #fff5f4; font-size: .92rem; }
.calc-warning::before { content: "Warning: "; font-weight: 700; }
.calc-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.calc-table caption { text-align: left; color: var(--sr-navy); font-weight: 600; margin-bottom: .4rem; }
.calc-table th, .calc-table td { padding: .5rem .4rem; border-bottom: 1px solid var(--sr-border); text-align: left; overflow-wrap: anywhere; }
.calc-table td { text-align: right; font-variant-numeric: tabular-nums; }
.calc-note { padding: 1rem; border: 1px solid var(--sr-border); border-radius: 8px; background: var(--sr-white); }
.calc-page .prose { max-width: var(--sr-text); }
.calc-page .prose pre { overflow-x: auto; padding: 1rem; border-radius: 8px; background: var(--sr-navy); color: var(--sr-soft-white); font: 400 .9rem/1.5 var(--sr-mono); }


/* Shared header details and multi-tool additions. */
.calc-badge { display: inline-block; margin: 0 0 .6rem; padding: .2rem .7rem; border-radius: 999px; background: var(--sr-tint); color: var(--sr-navy); font: 600 .78rem Inter, system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.calc-reviewed { margin: .4rem 0 0; color: var(--sr-muted); font-size: .9rem; }
.calc-privacy { margin: 1rem 0 0; color: var(--sr-muted); font-size: .86rem; }
.calc-mono, .calc-bases code { font-family: var(--sr-mono); }
.calc-more { margin: .2rem 0 1rem; border: 1px solid var(--sr-border); border-radius: 8px; padding: .2rem 1rem; background: var(--sr-soft-white); }
.calc-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--sr-navy); font-weight: 600; }
.calc-more[open] summary { margin-bottom: .6rem; }
.calc-updated > * { animation: calc-fade .18s ease-out; }
@keyframes calc-fade { from { opacity: .4; } to { opacity: 1; } }
.calc-copy-one { min-height: 36px; font-size: .85rem; }
.calc-bases { margin: 0; display: grid; gap: .5rem; }
.calc-base-row { padding: .6rem .8rem; border: 1px solid var(--sr-border); border-radius: 8px; background: var(--sr-white); }
.calc-base-row dt { color: var(--sr-muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.calc-base-row dd { margin: .2rem 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem .8rem; }
.calc-base-row code { color: var(--sr-navy); font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.calc-figure { margin: 0; }
.calc-disks { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr)); }
.calc-disk { display: flex; flex-direction: column; gap: .1rem; padding: .5rem; border-radius: 8px; border: 1px solid var(--sr-border); background: var(--sr-white); font-size: .8rem; color: var(--sr-slate); }
.calc-disk-num { font-weight: 600; color: var(--sr-navy); }
.calc-disk-data, .calc-disk-group { border-left: 4px solid var(--sr-blue); }
.calc-disk-parity { border-left: 4px solid var(--sr-cyan); background: var(--sr-tint); }
.calc-disk-mirror { border-left: 4px solid #0f766e; }
.calc-disk-spare { border-style: dashed; color: var(--sr-muted); }
.calc-table-caption { color: var(--sr-navy); font-weight: 600; margin-bottom: .5rem; }
.calc-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.calc-bar { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .86rem; }
.calc-bar-fill { height: .8rem; border-radius: 999px; background: linear-gradient(90deg, var(--sr-blue) var(--w), var(--sr-border) var(--w)); }
.calc-bar-negative .calc-bar-fill { background: linear-gradient(90deg, #b42318 var(--w), var(--sr-border) var(--w)); }
.calc-bar-value { font-variant-numeric: tabular-nums; color: var(--sr-navy); font-weight: 600; }
.tool-cards { list-style: none; margin: 1.5rem 0 3rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.tool-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.4rem; border: 1px solid var(--sr-border); border-radius: 16px; background: var(--sr-white); box-shadow: 0 10px 30px rgba(11, 42, 86, .06); }
.tool-card h2 { margin: 0; font-size: 1.2rem; }
.tool-card h2 a { color: var(--sr-navy); text-decoration: none; }
.tool-card p { margin: 0; color: var(--sr-slate); }
.tool-card .calc-badge { align-self: flex-start; margin: 0; }
.tool-card-action { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 479px) { .calc-actions > *, .calc-result-actions > .calc-secondary { flex: 1 1 100%; } }
@media (prefers-reduced-motion: reduce) { .calc * { transition: none !important; animation: none !important; } }

@media print {
  .site-header, .site-footer, .skip-link, .calc-tabs, .calc-actions, .calc-result-actions, .calc-inputs, .calc-page .prose, .breadcrumb { display: none !important; }
  body { background: #fff; }
  .calc-shell { display: block; }
  .calc-copy-one, .calc-privacy { display: none !important; }
  .calc-results { position: static; border: 0; box-shadow: none; padding: 0; }
  .calc-results::after { content: attr(data-print); }
  .calc::after { content: attr(data-print-date); display: block; margin-top: 1rem; font-size: .85rem; color: #333; }
  .calc-metric { break-inside: avoid; }
}
.calc-print-only { display: none; }
@media print { .calc-print-only { display: block; margin-bottom: 1rem; } }
.calc input[type="file"] { min-height: auto; padding: .4rem 0; border: 0; background: none; }
.tool-filter { display: grid; gap: .75rem; margin-top: 1.5rem; }
.tool-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-chip { min-height: 40px; padding: .4rem 1rem; border: 1px solid #b9c6d6; border-radius: 999px; background: var(--sr-white); color: var(--sr-navy); font: 500 .9rem Inter, system-ui, sans-serif; cursor: pointer; }
.tool-chip[aria-pressed="true"] { background: var(--sr-navy); border-color: var(--sr-navy); color: var(--sr-white); }
.tool-chip:focus-visible, .tool-search input:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 2px; }
.tool-search { display: flex; gap: .5rem; align-items: center; max-width: 32rem; }
.tool-search input { flex: 1; min-height: 44px; padding: .55rem .8rem; border: 1px solid #b9c6d6; border-radius: 10px; font: 400 1rem Inter, system-ui, sans-serif; }
.tool-card[hidden] { display: none; }

/* Icons (Tabler, inline sprite). */
.ti-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ti { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.calc button .ti, .tool-chip .ti, .tool-card-action .ti { margin-right: .4rem; }
.tool-card-action .ti { margin: 0 0 0 .4rem; transition: transform .15s ease; }

/* Category accents (brand palette). */
[data-category] { --accent: var(--sr-blue); --accent-tint: #e8efff; }
[data-category="AI"] { --accent: #4f46e5; --accent-tint: #eceafe; }
[data-category="Cloud and Infrastructure"] { --accent: #0e7490; --accent-tint: #e0f6fb; }
[data-category="Developer and Data"] { --accent: var(--sr-navy); --accent-tint: #e6ecf5; }
[data-category="SaaS and Startups"] { --accent: #0f766e; --accent-tint: #e2f5f2; }

/* Page hero. */
.calc-hero { display: flex; align-items: center; gap: 1.1rem; margin-top: .5rem; }
.calc-hero h1 { margin: .1rem 0 0; }
.calc-hero .calc-badge { margin: 0; }
.calc-hero-icon { display: grid; place-items: center; flex: none; width: 4.25rem; height: 4.25rem; border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--sr-navy)); box-shadow: 0 12px 28px rgba(11, 42, 86, .18); }
.calc-hero-icon .ti { width: 2.2rem; height: 2.2rem; stroke-width: 1.75; }
@media (max-width: 599px) { .calc-hero { align-items: flex-start; } .calc-hero-icon { width: 3.25rem; height: 3.25rem; border-radius: 16px; } .calc-hero-icon .ti { width: 1.7rem; height: 1.7rem; } }

/* Tool shell. */
.calc-inputs, .calc-results { border-radius: 20px; }
.calc-tabs [role="tab"] { display: inline-flex; align-items: center; gap: .4rem; border-radius: 10px 10px 0 0; transition: color .12s ease, background-color .12s ease; }
.calc-tabs [role="tab"]:hover { background: var(--sr-tint); }
.calc-tabs [role="tab"] .ti { margin: 0; }
.calc-primary, .calc-secondary, .calc-link { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.calc-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(37, 99, 235, .25); }
.calc-results-title { display: flex; align-items: center; gap: .5rem; }
.calc-results-title .ti { color: var(--sr-blue); }
.calc-empty { display: grid; justify-items: center; gap: .6rem; padding: 2rem 1rem; text-align: center; color: var(--sr-muted); border: 2px dashed var(--sr-border); border-radius: 16px; }
.calc-empty .ti { width: 2.4rem; height: 2.4rem; color: var(--sr-cyan); stroke-width: 1.5; }
.calc-empty p { margin: 0; max-width: 22rem; }
.calc-metric { border-radius: 14px; }
.calc-metric-label { display: flex; align-items: center; gap: .4rem; }
.calc-metric-label .ti { color: var(--sr-blue); }
.calc-metric-primary { background: linear-gradient(135deg, #eef4ff, #e6f9fd); border-left: 0; box-shadow: inset 4px 0 0 var(--sr-cyan); }
.calc-privacy { display: flex; gap: .4rem; align-items: center; }
.calc-updated > * { animation: calc-rise .18s ease-out; }
@keyframes calc-rise { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Sliders. */
.calc-slider { width: 100%; min-height: 28px; margin: .25rem 0 0; accent-color: var(--sr-blue); cursor: pointer; }
.calc input.calc-slider { min-height: 28px; padding: 0; border: 0; background: none; }

/* Charts. */
.viz { margin: 0; padding: .9rem 1rem; border: 1px solid var(--sr-border); border-radius: 14px; background: var(--sr-white); }
.viz-title { margin-bottom: .6rem; color: var(--sr-navy); font-weight: 600; font-size: .92rem; }
.viz ul { list-style: none; margin: 0; padding: 0; }
.viz-bar { display: grid; grid-template-columns: minmax(6.5rem, 34%) minmax(0, 1fr) auto; align-items: center; gap: .6rem; margin: .4rem 0; font-size: .86rem; }
.viz-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sr-slate); }
.viz-track { height: .75rem; border-radius: 999px; background: var(--sr-soft-white); overflow: hidden; }
.viz-fill { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--tone, var(--sr-blue)); transition: width .25s ease; }
.viz-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--sr-navy); }
.viz-highlight .viz-label, .viz-highlight .viz-value { color: #0f766e; }
.viz-highlight .viz-fill { background: #0f766e; }
.viz-navy { --tone: var(--sr-navy); } .viz-blue { --tone: var(--sr-blue); } .viz-cyan { --tone: #0891b2; }
.viz-green { --tone: #0f766e; } .viz-red { --tone: #b42318; } .viz-muted { --tone: #94a3b8; }
.viz-stackbar { display: flex; height: 1.1rem; border-radius: 999px; overflow: hidden; background: var(--sr-soft-white); }
.viz-seg { width: var(--w); background: var(--tone); transition: width .25s ease; }
.viz-legend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .6rem !important; font-size: .84rem; }
.viz-legend li { display: flex; align-items: center; gap: .35rem; }
.viz-dot { width: .7rem; height: .7rem; border-radius: 3px; background: var(--tone); }
.viz-scale { position: relative; height: .85rem; margin: 1.6rem 0 1.4rem; border-radius: 999px; background: var(--sr-soft-white); }
.viz-scale-fill { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--sr-blue); transition: width .25s ease; }
.viz-good .viz-scale-fill { background: #0f766e; } .viz-bad .viz-scale-fill { background: #b42318; }
.viz-marker { position: absolute; top: -.35rem; bottom: -.35rem; left: var(--x); width: 2px; background: var(--sr-navy); }
.viz-marker-label { position: absolute; top: 1.4rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .76rem; color: var(--sr-navy); }
.viz-pin { position: absolute; bottom: 1.15rem; left: var(--x); transform: translateX(-50%); padding: .1rem .45rem; border-radius: 6px; background: var(--sr-navy); color: #fff; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.viz-band { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--sr-blue), var(--sr-cyan)); }
.viz-range .viz-scale { margin: .4rem 0; }
.viz-range-labels { display: flex; justify-content: space-between; font-weight: 600; color: var(--sr-navy); font-size: .9rem; }
.viz-bitrow { display: flex; flex-wrap: wrap; gap: 3px; }
.viz-bit { display: grid; place-items: center; width: 1.45rem; height: 1.7rem; border-radius: 5px; background: var(--sr-soft-white); border: 1px solid var(--sr-border); font: 500 .8rem var(--sr-mono); color: var(--sr-muted); }
.viz-bit:nth-child(4n):not(:last-child) { margin-right: 6px; }
.viz-bit-on { background: var(--sr-navy); border-color: var(--sr-navy); color: #fff; }
.viz-bit-sign { box-shadow: 0 0 0 2px #0891b2; }
@media (prefers-reduced-motion: reduce) { .viz-fill, .viz-seg, .viz-scale-fill { transition: none; } .calc-updated > * { animation: none; } }

/* Hub cards. */
.tool-card { position: relative; border-radius: 20px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.tool-card:hover, .tool-card:focus-within { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(11, 42, 86, .12); border-color: var(--accent); }
.tool-card:hover .tool-card-action .ti { transform: translateX(3px); }
.tool-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.tool-card-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; color: var(--accent); background: var(--accent-tint); }
.tool-card-icon .ti { width: 1.6rem; height: 1.6rem; stroke-width: 1.75; }
.tool-card .calc-badge { background: var(--accent-tint); color: var(--accent); }
.tool-chip { display: inline-flex; align-items: center; }
.tool-search { position: relative; }
.tool-search > .ti { position: absolute; left: .8rem; color: var(--sr-muted); pointer-events: none; }
.tool-search input { padding-left: 2.4rem; }
@media print { .viz { break-inside: avoid; } .calc-slider { display: none; } }