/* PaidSync /tools/ calculator pages.
   Apple-for-SaaS visual language. Inter only. Pixel-character anchor.
   Inherits brand tokens from /styles.css. */

:root {
    --tool-bg: #ffffff;
    --tool-bg-soft: #fbfbfd;
    --tool-bg-card: #ffffff;
    --tool-ink: #1d1d1f;
    --tool-ink-soft: #424245;
    --tool-muted: #6e6e73;
    --tool-line: #e8e8ed;
    --tool-line-strong: #d2d2d7;
    --tool-shadow-lg: 0 24px 60px rgba(29,29,31,0.06);
    --tool-shadow-md: 0 8px 24px rgba(29,29,31,0.04);
    --tool-shadow-card: 0 1px 0 rgba(29,29,31,0.04), 0 12px 36px rgba(29,29,31,0.05);
}

/* ===== SHELL ===== */
.tool-shell { background: var(--tool-bg); padding-bottom: 120px; }
.tool-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.tool-container--narrow { max-width: 880px; }

/* ===== HERO ===== */
.tool-hero {
    padding: 120px 24px 80px;
    background: linear-gradient(180deg, #fbfbfd 0%, #ffffff 100%);
    overflow: hidden;
}
.tool-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: center;
}
.tool-hero__crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tool-muted);
    margin-bottom: 28px;
}
.tool-hero__crumb a { color: var(--tool-muted); transition: color 0.15s; }
.tool-hero__crumb a:hover { color: var(--tool-ink); }
.tool-hero__crumb span { opacity: 0.5; }
.tool-hero__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 5.6vw, 4.25rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.045em;
    color: var(--tool-ink);
    margin-bottom: 24px;
    text-wrap: balance;
}
.tool-hero__title .gr {
    background: linear-gradient(135deg, #0077B6 0%, #5B2D8E 55%, #7CB518 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tool-hero__sub {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.55;
    color: var(--tool-ink-soft);
    max-width: 560px;
    margin-bottom: 40px;
}
.tool-hero__sub strong { color: var(--tool-ink); font-weight: 600; }
.tool-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== HERO VISUAL (pixel character anchor) ===== */
.tool-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 420px;
}
.tool-hero__stage {
    position: relative;
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #f5f5f7 0%, #fbfbfd 100%);
    border-radius: 36px;
    box-shadow: var(--tool-shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tool-hero__stage::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 50% 50%, rgba(91,45,142,0.12), transparent 55%);
    pointer-events: none;
}
.tool-hero__avatar {
    position: relative;
    width: 60%;
    max-width: 220px;
    height: auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 12px 32px rgba(91,45,142,0.25));
    transform: translateY(-4%);
}
.tool-hero__chip {
    position: absolute;
    background: var(--tool-bg-card);
    border-radius: 14px;
    padding: 12px 16px;
    box-shadow: var(--tool-shadow-card);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tool-ink);
}
.tool-hero__chip--top { top: 16%; right: -6%; }
.tool-hero__chip--bottom { bottom: 12%; left: -6%; }
.tool-hero__chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0077B6, #7CB518);
    flex-shrink: 0;
}
.tool-hero__chip-val {
    font-weight: 700;
    background: linear-gradient(135deg, #0077B6, #5B2D8E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== CALCULATOR CARD (premium, Apple-style) ===== */
.tool-calc {
    margin: 0 auto 80px;
    max-width: 880px;
    padding: 0 24px;
}
.tool-calc__card {
    background: var(--tool-bg-card);
    border-radius: 28px;
    padding: 44px;
    box-shadow: var(--tool-shadow-card);
    border: 1px solid var(--tool-line);
}
.tool-calc__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5B2D8E;
    margin-bottom: 10px;
}
.tool-calc__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--tool-ink);
    margin-bottom: 8px;
}
.tool-calc__sub {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: var(--tool-muted);
    margin-bottom: 32px;
    line-height: 1.55;
}

/* ===== FORM ===== */
.calc-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 36px;
}
.calc-field { display: flex; flex-direction: column; gap: 8px; }
.calc-field__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tool-ink);
    letter-spacing: -0.005em;
}
.calc-field__input-wrap { position: relative; display: flex; align-items: center; }
.calc-field__prefix,
.calc-field__suffix {
    position: absolute;
    color: var(--tool-muted);
    font-size: 0.9375rem;
    font-weight: 500;
    pointer-events: none;
}
.calc-field__prefix { left: 16px; }
.calc-field__suffix { right: 16px; }
.calc-field__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--tool-line);
    border-radius: 14px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    color: var(--tool-ink);
    background: var(--tool-bg-soft);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -moz-appearance: textfield;
}
.calc-field__input::-webkit-outer-spin-button,
.calc-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-field--with-prefix .calc-field__input { padding-left: 30px; }
.calc-field--with-suffix .calc-field__input { padding-right: 38px; }
.calc-field__input:hover { border-color: var(--tool-line-strong); }
.calc-field__input:focus {
    outline: none;
    border-color: #5B2D8E;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(91,45,142,0.1);
}
.calc-field__hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--tool-muted);
    line-height: 1.5;
}

/* ===== RESULT REVEAL (Apple "big number" pattern) ===== */
.calc-result {
    margin-top: 8px;
    padding-top: 36px;
    border-top: 1px solid var(--tool-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: end;
    text-align: center;
}
@media (max-width: 640px) {
    .calc-result { grid-template-columns: 1fr; gap: 28px; text-align: left; }
}
.calc-result__cell { min-width: 0; }
.calc-result__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tool-muted);
    margin-bottom: 12px;
}
.calc-result__value {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--tool-ink);
    font-size: clamp(2rem, 4.5vw, 3rem);
}
.calc-result__cell--primary .calc-result__value {
    background: linear-gradient(135deg, #0077B6 0%, #5B2D8E 55%, #7CB518 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.calc-result__cell--secondary .calc-result__value {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.045em;
}
.calc-result__verdict {
    grid-column: 1 / -1;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--tool-ink-soft);
    padding-top: 28px;
    margin-top: 12px;
    border-top: 1px solid var(--tool-line);
}
.calc-result__verdict strong { color: var(--tool-ink); font-weight: 600; }

/* ===== CONTENT SECTIONS (Apple body) ===== */
.tool-section { padding: 64px 24px; }
.tool-section--soft { background: var(--tool-bg-soft); }
.tool-section__inner { max-width: 720px; margin: 0 auto; }
.tool-section__inner--wide { max-width: 1100px; }
.tool-section__eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5B2D8E;
    margin-bottom: 14px;
}
.tool-section__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--tool-ink);
    margin-bottom: 20px;
    text-wrap: balance;
}
.tool-prose p {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--tool-ink-soft);
    margin-bottom: 20px;
    letter-spacing: -0.005em;
}
.tool-prose p strong { color: var(--tool-ink); font-weight: 600; }
.tool-prose p:last-child { margin-bottom: 0; }

/* ===== WORKED EXAMPLE (premium card) ===== */
.tool-example {
    background: var(--tool-bg-card);
    border-radius: 24px;
    padding: 40px;
    box-shadow: var(--tool-shadow-card);
    border: 1px solid var(--tool-line);
    margin-top: 24px;
}
.tool-example__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--tool-line);
}
.tool-example__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f5f5f7, #fbfbfd);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--tool-line);
}
.tool-example__icon img {
    width: 70%;
    height: 70%;
    object-fit: contain;
    image-rendering: pixelated;
}
.tool-example__title {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tool-ink);
    letter-spacing: -0.015em;
}
.tool-example__sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--tool-muted);
    margin-top: 2px;
}
.tool-example p {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--tool-ink-soft);
    margin: 0 0 16px;
}
.tool-example p:last-child { margin-bottom: 0; }
.tool-example strong { color: var(--tool-ink); font-weight: 600; }

/* ===== FAQ (Apple-style clean accordion) ===== */
.tool-faq { margin-top: 24px; }
.tool-faq details {
    border-bottom: 1px solid var(--tool-line);
    padding: 26px 0;
    transition: padding 0.2s;
}
.tool-faq details:first-child { border-top: 1px solid var(--tool-line); }
.tool-faq summary {
    list-style: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--tool-ink);
    line-height: 1.4;
    padding-right: 32px;
    position: relative;
    letter-spacing: -0.015em;
    transition: color 0.15s;
}
.tool-faq summary:hover { color: #5B2D8E; }
.tool-faq summary::-webkit-details-marker { display: none; }
.tool-faq summary::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 14px;
    height: 1.5px;
    background: var(--tool-ink);
    transform: translateY(-50%);
    transition: opacity 0.2s;
}
.tool-faq summary::before {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 1.5px;
    height: 14px;
    background: var(--tool-ink);
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}
.tool-faq details[open] summary::before { transform: translateY(-50%) scaleY(0); }
.tool-faq details p {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--tool-ink-soft);
    margin: 18px 0 0;
}
.tool-faq details p + p { margin-top: 14px; }

/* ===== CTA SECTION (Apple premium) ===== */
.tool-cta {
    text-align: center;
    padding: 100px 24px;
    background: var(--tool-bg-soft);
    position: relative;
    overflow: hidden;
}
.tool-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(91,45,142,0.08), transparent 60%);
    pointer-events: none;
}
.tool-cta__inner { max-width: 760px; margin: 0 auto; position: relative; }
.tool-cta__avatar {
    width: 80px;
    height: 80px;
    margin: 0 auto 28px;
    image-rendering: pixelated;
    filter: drop-shadow(0 8px 24px rgba(91,45,142,0.18));
}
.tool-cta__title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--tool-ink);
    margin-bottom: 20px;
    line-height: 1.1;
    text-wrap: balance;
}
.tool-cta__title .gr {
    background: linear-gradient(135deg, #0077B6 0%, #5B2D8E 55%, #7CB518 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tool-cta__body {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    color: var(--tool-ink-soft);
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}
.tool-cta__buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== RELATED TOOLS GRID ===== */
.tool-related { padding: 80px 24px; }
.tool-related__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 48px;
}
.tool-related__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    max-width: 1100px;
    margin: 0 auto;
}
.tool-related__card {
    display: block;
    background: var(--tool-bg-card);
    border: 1px solid var(--tool-line);
    border-radius: 20px;
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
}
.tool-related__card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tool-shadow-md);
    border-color: var(--tool-line-strong);
}
.tool-related__card[data-status="soon"] {
    opacity: 0.55;
    pointer-events: none;
}
.tool-related__card-name {
    font-family: 'Inter', sans-serif;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tool-ink);
    margin-bottom: 8px;
}
.tool-related__card-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    color: var(--tool-muted);
    line-height: 1.55;
    margin-bottom: 16px;
}
.tool-related__card-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tool-muted);
}
.tool-related__card-tag--live {
    background: linear-gradient(135deg, #0077B6, #5B2D8E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== HUB-SPECIFIC ===== */
.hub-hero { padding: 100px 24px 56px; }
.hub-hero__inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}
.hub-stats {
    display: flex;
    gap: 32px;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--tool-line);
}
.hub-stat-num {
    font-family: 'Inter', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--tool-ink);
    line-height: 1;
}
.hub-stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    color: var(--tool-muted);
    margin-top: 6px;
}

.hub-grid-wrap { padding: 0 24px 80px; }
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    max-width: 1180px;
    margin: 0 auto;
}
.hub-card {
    display: block;
    background: var(--tool-bg-card);
    border: 1px solid var(--tool-line);
    border-radius: 20px;
    padding: 28px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}
.hub-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0077B6, #5B2D8E, #7CB518);
    opacity: 0;
    transition: opacity 0.2s;
}
.hub-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--tool-shadow-md);
    border-color: var(--tool-line-strong);
}
.hub-card:hover::before { opacity: 1; }
.hub-card[data-status="soon"] {
    opacity: 0.55;
    pointer-events: none;
}
.hub-card__name {
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--tool-ink);
    margin-bottom: 8px;
}
.hub-card__sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    color: var(--tool-muted);
    line-height: 1.55;
    margin-bottom: 18px;
}
.hub-card__tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tool-muted);
}
.hub-card__tag--live {
    background: linear-gradient(135deg, #0077B6, #5B2D8E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
    .tool-hero { padding: 80px 20px 56px; }
    .tool-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .tool-hero__visual { min-height: 320px; order: -1; }
    .tool-hero__stage { max-width: 320px; }
    .hub-hero__inner { grid-template-columns: 1fr; gap: 40px; text-align: left; }
    .hub-stats { gap: 24px; }
}
@media (max-width: 640px) {
    .tool-calc__card { padding: 28px 22px; border-radius: 22px; }
    .tool-section { padding: 48px 20px; }
    .tool-cta { padding: 72px 20px; }
    .tool-related { padding: 56px 20px; }
    .tool-example { padding: 28px 22px; border-radius: 20px; }
    .tool-example__icon { width: 48px; height: 48px; }
    .hub-hero { padding: 64px 20px 40px; }
    .hub-grid-wrap { padding: 0 20px 64px; }
}

/* ===== MASCOT EMERGE PATTERN (replaces contained stage) ===== */
.tool-hero__stage {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}
.tool-hero__stage::before {
    inset: -10% -5% -5% -5%;
    background:
        radial-gradient(circle at 50% 55%, rgba(91,45,142,0.32) 0%, rgba(0,119,182,0.18) 28%, rgba(124,181,24,0.06) 50%, transparent 68%);
    filter: blur(8px);
    pointer-events: none;
    z-index: 0;
}
.tool-hero__avatar {
    position: relative;
    width: 75%;
    max-width: 320px;
    z-index: 2;
    filter: drop-shadow(0 18px 48px rgba(91,45,142,0.35)) drop-shadow(0 4px 12px rgba(0,0,0,0.12));
    transform: translateY(-2%);
}
.tool-hero__chip { z-index: 3; }
.tool-hero__chip--top { top: 6%; right: -8%; }
.tool-hero__chip--bottom { bottom: 4%; left: -8%; }

.tool-hero__sparks {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.tool-hero__spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    opacity: 0;
    animation: spark-pulse 4s ease-in-out infinite;
}
.tool-hero__spark--1 {
    top: 18%; left: 12%;
    background: linear-gradient(135deg, #0077B6, #5B2D8E);
    animation-delay: 0s;
}
.tool-hero__spark--2 {
    top: 32%; right: 8%;
    width: 6px; height: 6px;
    background: linear-gradient(135deg, #5B2D8E, #7CB518);
    animation-delay: 1.2s;
}
.tool-hero__spark--3 {
    bottom: 26%; right: 18%;
    width: 10px; height: 10px;
    background: linear-gradient(135deg, #7CB518, #0077B6);
    animation-delay: 2.4s;
    border-radius: 50%;
}
.tool-hero__spark--4 {
    bottom: 14%; left: 22%;
    width: 5px; height: 5px;
    background: #5B2D8E;
    animation-delay: 0.8s;
}
.tool-hero__spark--5 {
    top: 48%; left: 4%;
    width: 7px; height: 7px;
    background: linear-gradient(135deg, #0077B6, #7CB518);
    animation-delay: 1.8s;
    border-radius: 50%;
}
@keyframes spark-pulse {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    25%, 75% { opacity: 0.85; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
    .tool-hero__spark { animation: none; opacity: 0.7; }
}

/* ===== CONTEXT SELECTORS (for benchmark-aware verdicts) ===== */
.calc-context {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    padding: 16px;
    background: var(--tool-bg-soft);
    border: 1px solid var(--tool-line);
    border-radius: 14px;
    margin-bottom: 20px;
}
.calc-context__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tool-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.calc-context__select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--tool-line);
    border-radius: 10px;
    background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--tool-ink);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.calc-context__select:hover { border-color: var(--tool-line-strong); }
.calc-context__select:focus {
    outline: none;
    border-color: #5B2D8E;
    box-shadow: 0 0 0 3px rgba(91,45,142,0.1);
}

/* ===== BENCHMARK PANEL ===== */
.calc-bench {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--tool-line);
}
.calc-bench__label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tool-muted);
    margin-bottom: 12px;
}
.calc-bench__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--tool-line);
    font-family: 'Inter', sans-serif;
    font-size: 0.9375rem;
}
.calc-bench__row:last-child { border-bottom: none; }
.calc-bench__row-label { color: var(--tool-ink-soft); font-weight: 500; }
.calc-bench__row-range { color: var(--tool-ink); font-weight: 600; text-align: right; }
.calc-bench__row--active {
    background: linear-gradient(90deg, rgba(0,119,182,0.06), rgba(91,45,142,0.04));
    margin: 0 -12px;
    padding: 10px 12px;
    border-radius: 8px;
    border-bottom-color: transparent;
}
.calc-bench__row--active .calc-bench__row-label { color: var(--tool-ink); font-weight: 600; }
.calc-bench__source {
    margin-top: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--tool-muted);
    font-style: italic;
}

/* ===== TOOLTIP (?) ===== */
.tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--tool-line);
    color: var(--tool-muted);
    font-size: 10px;
    font-weight: 700;
    cursor: help;
    position: relative;
    transition: background 0.15s, color 0.15s;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    user-select: none;
    border: none;
    font-family: 'Inter', sans-serif;
    padding: 0;
}
.tip::before { content: '?'; pointer-events: none; }
.tip:hover, .tip:focus, .tip.tip--open {
    background: #5B2D8E;
    color: #ffffff;
    outline: none;
}
.tip__content {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    padding: 14px 16px;
    background: #1d1d1f;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.55;
    border-radius: 10px;
    text-transform: none;
    letter-spacing: -0.005em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s, visibility 0.18s;
    z-index: 50;
    box-shadow: 0 14px 40px rgba(0,0,0,0.22);
    text-align: left;
    white-space: normal;
}
.tip__content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1d1d1f;
}
.tip__content strong { color: #ffffff; font-weight: 600; }
.tip:hover .tip__content,
.tip:focus .tip__content,
.tip.tip--open .tip__content {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 640px) {
    .tip__content {
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        width: auto;
        transform: none;
    }
    .tip__content::after { display: none; }
}


/* ===== HUB CARD ICON (Lucide via Iconify) ===== */
.hub-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(0,119,182,0.06), rgba(91,45,142,0.06));
    border: 1px solid var(--tool-line);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
}
.hub-card__icon img {
    width: 22px;
    height: 22px;
    display: block;
}