/* ===================================
   Tools Pages — Shared Styles
   Mobile-first. Uses tokens from tokens.css
   =================================== */

/* ---- Tool Page Layout ---- */
.tool-page {
    padding-top: var(--space-8);
    padding-bottom: var(--space-16);
}

.tool-hero {
    background: var(--color-cream);
    padding: var(--space-12) 0 var(--space-8);
    text-align: center;
}

.tool-hero h1 {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--space-4);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.tool-hero__desc {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    max-width: 560px;
    margin: 0 auto var(--space-6);
    line-height: var(--leading-relaxed);
}

.tool-hero .badge {
    margin-bottom: var(--space-4);
}

/* ---- Breadcrumbs (reuse SEO pattern) ---- */
.tool-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.tool-breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--duration-fast);
}

.tool-breadcrumbs a:hover { color: var(--color-teal); }
.tool-breadcrumbs .separator { color: var(--neutral-300); user-select: none; }
.tool-breadcrumbs .current { color: var(--color-text-secondary); font-weight: 500; }

/* ---- Tool Intro (SEO landing content) ---- */
.tool-intro {
    padding: 0 var(--container-padding) var(--space-8);
}

.tool-intro__text {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.tool-intro__benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-6);
    display: grid;
    gap: var(--space-3);
}

.tool-intro__benefits li {
    padding-left: var(--space-6);
    position: relative;
}

.tool-intro__benefits li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--color-teal);
    font-weight: 700;
}

.tool-intro__how {
    font-size: var(--text-base);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.tool-intro__start {
    text-align: center;
}

/* ---- Tool Body ---- */
.tool-body {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: var(--space-8) var(--container-padding);
}

.tool-body--wide {
    max-width: 960px;
}

/* ---- Step Wizard ---- */
.step-wizard {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.step-wizard__progress {
    margin-bottom: var(--space-8);
}

.step-wizard__bar {
    height: 4px;
    background: var(--neutral-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.step-wizard__bar-fill {
    height: 100%;
    background: var(--color-teal);
    border-radius: 2px;
    transition: width 0.4s var(--ease-out);
}

.step-wizard__steps {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.step-wizard__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--neutral-400);
    transition: color var(--duration-fast);
}

.step-wizard__step.is-active { color: var(--color-teal); }
.step-wizard__step.is-completed { color: var(--color-teal); }

.step-wizard__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--neutral-200);
    font-weight: 700;
    font-size: 11px;
    color: var(--neutral-500);
    transition: background var(--duration-fast), color var(--duration-fast);
    flex-shrink: 0;
}

.step-wizard__step.is-active .step-wizard__dot {
    background: var(--color-teal);
    color: var(--white);
}

.step-wizard__step.is-completed .step-wizard__dot {
    background: var(--color-teal);
    color: var(--white);
}

.step-wizard__label {
    display: none;
}

.step-wizard__content {
    min-height: 200px;
}

.step-wizard__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* ---- Segment Selector ---- */
.segment-selector__title {
    font-size: var(--text-xl);
    text-align: center;
    margin-bottom: var(--space-6);
}

.segment-selector__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.segment-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
    font-family: inherit;
}

.segment-card:hover {
    border-color: var(--color-teal);
    transform: translateY(-1px);
}

.segment-card.is-selected {
    border-color: var(--color-teal);
    background: var(--color-teal-bg);
}

.segment-card__icon {
    font-size: var(--text-3xl);
}

.segment-card__label {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
    display: block;
}

.segment-card__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: block;
}

/* ---- Email Gate ---- */
.email-gate {
    text-align: center;
    padding: var(--space-10) var(--space-6);
}

.email-gate__icon {
    margin-bottom: var(--space-4);
}

.email-gate__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

.email-gate__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.email-gate__form {
    max-width: 380px;
    margin: 0 auto;
}

.email-gate__field {
    margin-bottom: var(--space-4);
    position: relative;
}

.email-gate__input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: border-color var(--duration-fast);
    background: var(--white);
}

.email-gate__input:focus {
    outline: none;
    border-color: var(--color-teal);
}

.email-gate__input.is-invalid {
    border-color: var(--color-danger);
}

.email-gate__error {
    display: none;
    font-size: var(--text-xs);
    color: var(--color-danger);
    margin-top: var(--space-2);
    text-align: left;
}

.email-gate__error.is-visible {
    display: block;
}

.email-gate__skip {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-body);
}

.email-gate__skip:hover {
    color: var(--color-text);
}

/* ---- Toast ---- */
.tool-toast {
    position: absolute;
    background: var(--color-charcoal);
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    transform: translate(-50%, 0);
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
}

.tool-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, -4px);
}

/* ---- Tool Input Fields ---- */
.tool-field {
    margin-bottom: var(--space-5);
}

.tool-field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.tool-field__hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: 400;
}

.tool-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: var(--white);
    transition: border-color var(--duration-fast);
}

.tool-input:focus {
    outline: none;
    border-color: var(--color-teal);
}

.tool-input--sm {
    max-width: 200px;
}

.tool-input.is-invalid {
    border-color: var(--color-danger);
}

/* Tone buttons (Tool 02) */
.tool-tone-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.tool-tone-btn {
    padding: 8px 20px;
    font-size: var(--text-sm);
    font-weight: 600;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.tool-tone-btn:hover {
    border-color: var(--color-teal);
    color: var(--color-teal);
}

.tool-tone-btn.is-selected {
    border-color: var(--color-teal);
    background: var(--color-teal-bg, rgba(8, 145, 178, 0.08));
    color: var(--color-teal);
}

.tool-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: var(--white);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235F6E71' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

.tool-select:focus {
    outline: none;
    border-color: var(--color-teal);
}

.tool-range {
    width: 100%;
    margin-top: var(--space-2);
}

.tool-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* ---- Option Cards (radio/checkbox as cards) ---- */
.option-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.option-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
    font-family: inherit;
    text-align: left;
    font-size: var(--text-sm);
    color: var(--color-text);
    width: 100%;
}

.option-card:hover { border-color: var(--color-teal-light); }
.option-card.is-selected { border-color: var(--color-teal); background: var(--color-teal-bg); }

.option-card__radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--neutral-300);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--duration-fast);
}

.option-card.is-selected .option-card__radio {
    border-color: var(--color-teal);
}

.option-card.is-selected .option-card__radio::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius: 50%;
    background: var(--color-teal);
}

/* ---- Result Cards ---- */
.tool-result {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-md);
}

.tool-result__header {
    text-align: center;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.tool-result__score {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 800;
    color: var(--color-teal);
    line-height: 1;
    letter-spacing: var(--tracking-tight);
}

.tool-result__grade {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-teal-bg);
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--color-teal);
    margin-bottom: var(--space-4);
}

.tool-result__label {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-top: var(--space-3);
}

.tool-result__sublabel {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

/* ---- Metric Grid (for result dashboards) ---- */
.metric-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.metric-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.metric-card--danger {
    background: var(--color-danger-bg);
}

.metric-card--teal {
    background: var(--color-teal-bg);
}

.metric-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--color-text);
    line-height: 1;
}

.metric-card--danger .metric-card__value { color: var(--color-danger); }
.metric-card--teal .metric-card__value { color: var(--color-teal); }

.metric-card__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
    line-height: 1.3;
}

/* ---- Progress Bar (horizontal) ---- */
.tool-progress {
    margin-bottom: var(--space-4);
}

.tool-progress__label {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    margin-bottom: var(--space-2);
}

.tool-progress__bar {
    height: 8px;
    background: var(--neutral-200);
    border-radius: 4px;
    overflow: hidden;
}

.tool-progress__fill {
    height: 100%;
    border-radius: 4px;
    background: var(--color-teal);
    transition: width 0.6s var(--ease-out);
}

.tool-progress__fill--danger { background: var(--color-danger); }
.tool-progress__fill--amber { background: var(--color-amber); }

/* ---- Comparison Table ---- */
.tool-comparison {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.tool-comparison th {
    background: var(--neutral-50);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tool-comparison td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.tool-comparison .check { color: var(--color-teal); font-weight: 700; }
.tool-comparison .cross { color: var(--neutral-300); }

/* ---- Template Card (for generators) ---- */
.template-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-3);
}

.template-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.template-card__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.template-card__body {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.template-card__actions {
    display: flex;
    gap: var(--space-2);
}

/* ---- Copy Button ---- */
.btn-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal);
    background: var(--color-teal-bg);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-family: var(--font-body);
    transition: background var(--duration-fast);
}

.btn-copy:hover {
    background: rgba(8, 145, 178, 0.15);
}

.btn-copy svg {
    width: 14px;
    height: 14px;
}

/* ---- Share Buttons ---- */
.share-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-6);
}

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    transition: transform var(--duration-fast), opacity var(--duration-fast);
}

.share-btn:hover { transform: translateY(-1px); }

.share-btn--whatsapp { background: #25D366; color: white; }
.share-btn--linkedin { background: #0A66C2; color: white; }
.share-btn--download { background: var(--color-charcoal); color: white; }

/* ---- Category Filter Tabs ---- */
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.filter-tab {
    padding: 6px 16px;
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.filter-tab:hover { border-color: var(--color-teal); color: var(--color-teal); }
.filter-tab.is-active { border-color: var(--color-teal); background: var(--color-teal-bg); color: var(--color-teal); }

/* ---- Question Card (quizzes) ---- */
.question-card {
    text-align: center;
    padding: var(--space-6) 0;
}

.question-card__number {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
}

.question-card__text {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-6);
    line-height: var(--leading-snug);
}

/* ---- Tool CTA Section ---- */
.tool-cta {
    background: var(--color-charcoal);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-6);
    text-align: center;
    margin-top: var(--space-12);
}

.tool-cta h2 { color: var(--white); margin-bottom: var(--space-3); }
.tool-cta p { color: var(--neutral-400); margin: 0 auto var(--space-6); max-width: 480px; line-height: var(--leading-relaxed); }

/* ---- Related Tools ---- */
.related-tools {
    margin-top: var(--space-12);
}

.related-tools__title {
    font-size: var(--text-xl);
    margin-bottom: var(--space-6);
}

.related-tools__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.related-tool-card {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
}

.related-tool-card:hover {
    border-color: var(--color-teal);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.related-tool-card__badge {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal);
    margin-bottom: var(--space-2);
}

.related-tool-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.related-tool-card__icon {
    font-size: var(--text-2xl);
    display: block;
    margin-bottom: var(--space-3);
}

.related-tool-card__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-3);
}

.related-tool-card__cta {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-teal);
}

/* ---- Tools Hub Page ---- */
.tools-hub__section {
    padding: var(--section-padding) 0;
}

.tools-hub__section-header {
    margin-bottom: var(--space-8);
}

.tools-hub__section-header h2 {
    margin-bottom: var(--space-2);
}

.tools-hub__section-header p {
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

.tools-hub__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.tool-hub-card {
    display: block;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tool-hub-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-teal);
}

.tool-hub-card__icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

.tool-hub-card__title {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.tool-hub-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-4);
}

.tool-hub-card__cta {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-teal);
}

/* ---- Checklist (for comparator) ---- */
.tool-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tool-checklist__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
    font-size: var(--text-sm);
}

.tool-checklist__item:hover { border-color: var(--color-teal-light); }
.tool-checklist__item.is-checked { border-color: var(--color-teal); background: var(--color-teal-bg); }

.tool-checklist__box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--neutral-300);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--duration-fast), background var(--duration-fast);
}

.tool-checklist__item.is-checked .tool-checklist__box {
    border-color: var(--color-teal);
    background: var(--color-teal);
}

.tool-checklist__box svg {
    width: 12px;
    height: 12px;
    color: var(--white);
    opacity: 0;
    transition: opacity var(--duration-fast);
}

.tool-checklist__item.is-checked .tool-checklist__box svg { opacity: 1; }

/* ---- Responsive ---- */
@media (min-width: 480px) {
    .segment-selector__grid { grid-template-columns: 1fr 1fr; }
    .option-cards { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 640px) {
    .step-wizard__label { display: inline; }
    .metric-grid { grid-template-columns: repeat(3, 1fr); }
    .related-tools__grid { grid-template-columns: repeat(2, 1fr); }
    .tools-hub__grid { grid-template-columns: repeat(2, 1fr); }
    .segment-selector__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 960px) {
    .related-tools__grid { grid-template-columns: repeat(3, 1fr); }
    .tools-hub__grid { grid-template-columns: repeat(3, 1fr); }
    .metric-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===========================================
   Tool-Specific Styles — All 14 tools
   =========================================== */

/* ---- Shared: Tool Step Layout ---- */
.tool-step {
    padding: var(--space-2) 0;
}

.tool-step__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.tool-step__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.tool-step__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---- Shared: Tool Section ---- */
.tool-section {
    margin-bottom: var(--space-8);
}

.tool-section h3 {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.tool-section--highlight {
    background: var(--color-teal-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid rgba(8, 145, 178, 0.15);
}

.tool-section--warning {
    background: var(--color-amber-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid rgba(217, 119, 6, 0.15);
}

.tool-section--success {
    background: var(--color-teal-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

/* ---- Shared: Tool Results Container ---- */
.tool-results {
    padding: var(--space-2) 0;
}

.tool-results__header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.tool-results__header h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
}

/* ---- Shared: Option Grid & Cards ---- */
.tool-option-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.tool-option-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
    text-align: left;
    font-family: inherit;
    width: 100%;
}

.tool-option-card:hover {
    border-color: var(--color-teal-light);
    transform: translateY(-1px);
}

.tool-option-card.is-selected {
    border-color: var(--color-teal);
    background: var(--color-teal-bg);
}

.tool-option-card__label,
.tool-option-card__text {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--color-text);
}

.tool-option-card__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---- Shared: Category Tabs ---- */
.tool-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.tool-category-tab {
    padding: 6px 16px;
    font-size: var(--text-xs);
    font-weight: 600;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color var(--duration-fast), color var(--duration-fast), background var(--duration-fast);
}

.tool-category-tab:hover { border-color: var(--color-teal); color: var(--color-teal); }
.tool-category-tab.is-active { border-color: var(--color-teal); background: var(--color-teal-bg); color: var(--color-teal); }

/* ---- Shared: Input Steps ---- */
.tool-input-step {
    text-align: center;
    padding: var(--space-6) 0;
}

.tool-input-step__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.tool-input-step__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.tool-input-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    max-width: 320px;
    margin: 0 auto;
}

.tool-input-prefix,
.tool-input-suffix {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.tool-input-help {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-2);
}

.tool-input-group {
    margin-bottom: var(--space-5);
}

.tool-inputs {
    padding: var(--space-4) 0;
}

.tool-inputs__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.tool-inputs__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.tool-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* ---- Shared: Question Components ---- */
.tool-questions {
    padding: var(--space-2) 0;
}

.tool-questions__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.tool-questions__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.tool-questions__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.tool-questions__scroll {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.tool-question {
    text-align: center;
    padding: var(--space-6) 0;
}

.tool-question__progress {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-4);
}

.tool-question__text {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-6);
    line-height: var(--leading-snug);
}

.tool-question__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    max-width: 480px;
    margin: 0 auto;
}

.tool-question-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.tool-question-card__number {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.tool-question-card__text {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-4);
    line-height: var(--leading-snug);
}

.tool-question-card__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tool-radio {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
    font-size: var(--text-sm);
}

.tool-radio:hover { border-color: var(--color-teal-light); }
.tool-radio:has(input:checked) { border-color: var(--color-teal); background: var(--color-teal-bg); }

.tool-radio input[type="radio"] {
    accent-color: var(--color-teal);
    margin: 0;
}

.tool-radio__label {
    flex: 1;
}

/* ---- Shared: Score Bars ---- */
.tool-scores {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tool-score-bar {
    margin-bottom: var(--space-2);
}

.tool-score-bar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.tool-score-bar__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tool-score-bar__icon {
    font-size: var(--text-base);
}

.tool-score-bar__value {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text-muted);
}

.tool-score-bar__track {
    height: 8px;
    background: var(--neutral-200);
    border-radius: 4px;
    overflow: hidden;
}

.tool-score-bar__fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s var(--ease-out);
}

/* ---- Shared: Impact Cards ---- */
.tool-impact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.tool-impact-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
    border: 1px solid var(--color-border);
}

.tool-impact-card--negative {
    border-color: rgba(220, 38, 38, 0.2);
    background: var(--color-danger-bg);
}

.tool-impact-card--positive {
    border-color: rgba(8, 145, 178, 0.2);
    background: var(--color-teal-bg);
}

.tool-impact-card__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tool-impact-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-1);
}

.tool-impact-card--negative .tool-impact-card__value { color: var(--color-danger); }
.tool-impact-card--positive .tool-impact-card__value { color: var(--color-teal); }

.tool-impact-card__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---- Shared: Share Card & Buttons ---- */
.tool-share-card {
    background: linear-gradient(135deg, var(--color-charcoal), var(--neutral-800));
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    color: var(--white);
    margin-bottom: var(--space-4);
}

.tool-share-card__badge {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-teal-light);
    margin-bottom: var(--space-3);
}

.tool-share-card__grade,
.tool-share-card__archetype {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.tool-share-card__score {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--neutral-400);
    margin-bottom: var(--space-2);
}

.tool-share-card__segment {
    font-size: var(--text-sm);
    color: var(--neutral-400);
    margin-bottom: var(--space-4);
}

.tool-share-card__logo {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal-light);
    letter-spacing: 0.04em;
}

.tool-share-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---- Shared: Lists ---- */
.tool-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tool-list li {
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    position: relative;
    padding-left: var(--space-8);
}

.tool-list--strengths li::before {
    content: '✓';
    position: absolute;
    left: var(--space-3);
    color: var(--color-teal);
    font-weight: 700;
}

.tool-list--weaknesses li::before {
    content: '!';
    position: absolute;
    left: var(--space-3);
    color: var(--color-amber);
    font-weight: 700;
}

/* ---- Shared: Email Overlay/Modal ---- */
.tool-email-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-4);
}

.tool-email-modal {
    background: var(--white);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 440px;
    width: 100%;
    box-shadow: var(--shadow-xl);
}

/* ---- Shared: Badges ---- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge--alto { background: var(--color-danger-bg); color: var(--color-danger); }
.badge--medio { background: var(--color-amber-bg); color: var(--color-amber); }
.badge--facil,
.badge--fácil { background: rgba(16, 185, 129, 0.1); color: #059669; }
.badge--médio { background: var(--color-amber-bg); color: var(--color-amber); }
.badge--avancado,
.badge--avançado { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---- Shared: Error State ---- */
.error {
    text-align: center;
    color: var(--color-danger);
    font-size: var(--text-sm);
    padding: var(--space-8) var(--space-4);
}

/* ---- Tool 01: Result Card ---- */
.tool-result-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-4);
}

.tool-result-card__section {
    margin-bottom: var(--space-4);
}

.tool-result-card__section:last-child { margin-bottom: 0; }

.tool-result-card__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.tool-result-card__text {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}

.tool-result-card__link-box {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    word-break: break-all;
}

.tool-result-card__link {
    font-size: var(--text-sm);
    color: var(--color-teal);
    font-weight: 600;
    text-decoration: none;
}

.tool-result-card__link:hover { text-decoration: underline; }

.tool-result-card__qr {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.tool-result-card__qr canvas,
.tool-result-card__qr img {
    max-width: 200px;
    height: auto;
}

.tool-result-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}

/* ---- Tool 02: Result Textarea ---- */
.tool-result-textarea {
    width: 100%;
    min-height: 120px;
    padding: var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    line-height: var(--leading-relaxed);
    background: var(--white);
    resize: vertical;
    transition: border-color var(--duration-fast);
}

.tool-result-textarea:focus {
    outline: none;
    border-color: var(--color-teal);
}

/* ---- Shared: Input Hint ---- */
.tool-input-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* ---- Tool 03: Quick Reply Cards ---- */
.tool-template-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tool-quick-reply-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.tool-quick-reply-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.tool-quick-reply-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
}

.tool-quick-reply-card__shortcut {
    font-size: var(--text-xs);
    background: var(--neutral-100);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-family: monospace;
}

.tool-quick-reply-card__text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

/* ---- Tool 04: Script Viewer ---- */
.tool-script-actions {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.tool-script-viewer {
    margin-top: var(--space-4);
}

.tool-script-path {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tool-script-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border-left: 3px solid var(--color-teal);
}

.tool-script-step__label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-teal);
    margin-bottom: var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tool-script-step__timing {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.tool-script-step__message {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    margin-bottom: var(--space-4);
}

.tool-script-step__branches-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-right: var(--space-2);
    white-space: nowrap;
    align-self: center;
}

.tool-script-step__branches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.tool-script-branch-btn {
    padding: 6px 14px;
    font-size: var(--text-xs);
    font-weight: 600;
    background: var(--white);
    border: 1.5px solid var(--color-teal);
    border-radius: var(--radius-full);
    color: var(--color-teal);
    cursor: pointer;
    font-family: var(--font-body);
    transition: background var(--duration-fast), color var(--duration-fast);
}

.tool-script-branch-btn:hover { background: var(--color-teal-bg); }
.tool-script-branch-btn.is-selected { background: var(--color-teal); color: var(--white); }
.tool-script-branch-btn:disabled { opacity: 0.5; cursor: default; }

.tool-script-step__end {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ---- Tool 05: Bio Cards ---- */
.tool-bio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.tool-bio-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.tool-bio-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.tool-bio-card__number {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
}

.tool-bio-card__chars {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
}

.tool-bio-card__chars.is-warning { color: var(--color-amber); }
.tool-bio-card__chars.is-over { color: var(--color-danger); }

.tool-bio-card__text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    white-space: pre-wrap;
}

.tool-bio-tips {
    background: var(--neutral-50);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.tool-bio-tips__title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.tool-bio-tips__list {
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---- Tool 06: Metrics Directory ---- */
.tool-metrics-directory {
    padding: var(--space-2) 0;
}

.tool-metrics-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.tool-metrics-title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.tool-metrics-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.tool-metrics-segment-filter {
    min-width: 220px;
}

.tool-metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.tool-metric-card {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    transition: box-shadow var(--duration-fast);
}

.tool-metric-card.is-expanded {
    box-shadow: var(--shadow-md);
}

.tool-metric-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.tool-metric-card__name {
    font-size: var(--text-base);
    font-weight: 700;
}

.tool-metric-card__category {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-teal);
    background: var(--color-teal-bg);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.tool-metric-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    line-height: var(--leading-normal);
}

.tool-metric-card__formula {
    font-size: var(--text-xs);
    background: var(--neutral-50);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-family: monospace;
}

.tool-metric-card__expanded {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
    margin-top: var(--space-4);
}

.tool-metric-section {
    margin-bottom: var(--space-5);
}

.tool-metric-section__title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.tool-metric-section ul {
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ---- Tool 06: Benchmark Table ---- */
.tool-benchmark-table {
    width: 100%;
    overflow-x: auto;
    font-size: var(--text-xs);
}

.tool-benchmark-row {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 1px;
    background: var(--color-border);
}

.tool-benchmark-row--header {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.tool-benchmark-row.is-highlighted .tool-benchmark-cell {
    background: var(--color-teal-bg);
    font-weight: 600;
}

.tool-benchmark-cell {
    background: var(--white);
    padding: var(--space-2) var(--space-3);
    text-align: center;
}

.tool-benchmark-cell--segment {
    text-align: left;
    font-weight: 600;
}

.tool-benchmark-cell--excelente { color: #059669; }
.tool-benchmark-cell--bom { color: var(--color-teal); }
.tool-benchmark-cell--regular { color: var(--color-amber); }
.tool-benchmark-cell--ruim { color: var(--color-danger); }

/* ---- Tool 07: Grade Card ---- */
.tool-grade-card {
    display: inline-block;
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    text-align: center;
}

.tool-grade-card__grade {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.tool-grade-card__score {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.tool-grade-card__label {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.tool-grade-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto;
    line-height: var(--leading-normal);
}

.tool-tips {
    margin-bottom: var(--space-8);
}

.tool-tips__intro {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.tool-tips__list {
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* ---- Tool 08: Archetype Card ---- */
.tool-archetype-card {
    display: inline-block;
    text-align: center;
}

.tool-archetype-card__emoji {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-3);
}

.tool-archetype-card__name {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 800;
    margin-bottom: var(--space-2);
}

.tool-archetype-card__tagline {
    font-size: var(--text-base);
    color: var(--color-text-muted);
}

.tool-archetype-desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    text-align: center;
    max-width: 560px;
    margin: 0 auto var(--space-6);
}

.tool-action-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.tool-action-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.tool-action-card__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-teal);
    color: var(--white);
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.tool-action-card__text {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

/* ---- Tool 09: Benchmark Visualization ---- */
.tool-benchmark {
    margin-bottom: var(--space-6);
}

.tool-benchmark__track {
    position: relative;
    height: 80px;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), rgba(245, 158, 11, 0.1), rgba(220, 38, 38, 0.1));
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-6);
}

.tool-benchmark__marker {
    position: absolute;
    top: 8px;
    transform: translateX(-50%);
    text-align: center;
}

.tool-benchmark__marker-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tool-benchmark__marker-value {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text);
}

.tool-benchmark__your-marker {
    position: absolute;
    bottom: 8px;
    transform: translateX(-50%);
    text-align: center;
}

.tool-benchmark__your-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-teal);
    text-transform: uppercase;
}

.tool-benchmark__your-value {
    display: block;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--color-teal);
    background: var(--color-teal-bg);
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.tool-benchmark__status {
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 700;
    padding: var(--space-3);
    border-radius: var(--radius-md);
}

.tool-benchmark__status--excellent { background: rgba(16, 185, 129, 0.1); color: #059669; }
.tool-benchmark__status--good { background: var(--color-teal-bg); color: var(--color-teal); }
.tool-benchmark__status--average { background: var(--color-amber-bg); color: var(--color-amber); }
.tool-benchmark__status--poor { background: var(--color-danger-bg); color: var(--color-danger); }

/* ---- Tool 09: What-If Section ---- */
.tool-whatif {
    padding: var(--space-2) 0;
}

.tool-whatif__scenario {
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-bottom: var(--space-4);
    line-height: var(--leading-relaxed);
}

.tool-whatif__impact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tool-whatif__metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border-radius: var(--radius-md);
}

.tool-whatif__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.tool-whatif__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--color-teal);
}

/* ---- Tool 09: Tip Cards ---- */
.tool-tips-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.tool-tip-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.tool-tip-card__icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.tool-tip-card__title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.tool-tip-card__text {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---- Tool 10: ROI Section ---- */
.tool-roi {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.tool-roi__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.tool-roi__row:last-of-type { border-bottom: none; }

.tool-roi__row--highlight {
    background: var(--color-teal-bg);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin: var(--space-2) calc(-1 * var(--space-4));
}

.tool-roi__label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.tool-roi__value {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-text);
}

.tool-roi__row--highlight .tool-roi__value {
    color: var(--color-teal);
    font-size: var(--text-xl);
}

.tool-roi__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-3);
    text-align: center;
}

/* ---- Tool 10: Highlight Card ---- */
.tool-highlight-card {
    background: var(--color-teal-bg);
    border: 1px solid rgba(8, 145, 178, 0.15);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    text-align: center;
    margin-bottom: var(--space-8);
}

.tool-highlight-card__icon {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-2);
}

.tool-highlight-card__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-teal-dark);
    margin-bottom: var(--space-2);
}

.tool-highlight-card__text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 480px;
    margin: 0 auto;
}

/* ---- Tool 10: Numbered Steps ---- */
.tool-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.tool-steps .tool-step {
    display: flex;
    gap: var(--space-4);
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.tool-steps .tool-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--color-teal);
    color: var(--white);
    border-radius: 50%;
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.tool-steps .tool-step__title {
    font-size: var(--text-sm);
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.tool-steps .tool-step__text {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---- Tool 11: Pillar Group ---- */
.tool-pillar-group {
    margin-bottom: var(--space-6);
}

.tool-pillar-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}

.tool-pillar-group__icon {
    font-size: var(--text-xl);
}

.tool-pillar-group__questions {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* ---- Tool 11: Level Card ---- */
.tool-level-card {
    display: inline-block;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    text-align: center;
}

.tool-level-card__emoji {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-3);
}

.tool-level-card__score {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-2);
}

.tool-level-card__score-max {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    font-weight: 600;
}

.tool-level-card__level {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.tool-level-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    max-width: 400px;
    margin: 0 auto;
    line-height: var(--leading-normal);
}

/* ---- Tool 11: Priority Section ---- */
.tool-priority {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.tool-priority__icon {
    font-size: var(--text-3xl);
    flex-shrink: 0;
}

.tool-priority__score {
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.tool-priority__content {
    flex: 1;
}

.tool-priority__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
}

/* ---- Tool 11: Action List ---- */
.tool-action-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tool-action-item {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.tool-action-item__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--color-teal);
    color: var(--white);
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}

.tool-action-item__text {
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: var(--leading-normal);
}

/* ---- Tool 12+13+14: Input Form (BOFU) ---- */
.input-form {
    padding: var(--space-2) 0;
}

.input-form__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.input-form__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.input-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

.input-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.input-field__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}

.input-field__wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.input-field__input {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    background: var(--white);
    transition: border-color var(--duration-fast);
}

.input-field__input:focus {
    outline: none;
    border-color: var(--color-teal);
}

.input-field__unit {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ---- Tool 12+13+14: Results Dashboard ---- */
.results-dashboard {
    padding: var(--space-2) 0;
}

.results-header {
    text-align: center;
    margin-bottom: var(--space-8);
}

.results-header__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.results-header__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.results-section {
    margin-bottom: var(--space-8);
}

.results-section__title {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-4);
}

.results-section__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.results-section--losses {
    background: var(--color-danger-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.results-section--gains {
    background: var(--color-teal-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.results-section--roi {
    background: linear-gradient(135deg, var(--color-charcoal), var(--neutral-800));
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    color: var(--white);
}

.results-section--roi .results-section__title { color: var(--white); }

.results-section--gap {
    background: var(--color-amber-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.results-section--recommendation {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.results-section--critico { border-color: var(--color-danger); }
.results-section--importante { border-color: var(--color-amber); }
.results-section--bom { border-color: var(--color-teal); }

/* ---- Tool 12: Results Cards ---- */
.results-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.results-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.results-card__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.results-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-1);
}

.results-card__value--loss { color: var(--color-danger); }
.results-card__value--gain { color: var(--color-teal); }

.results-card__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---- Tool 12: Results Total ---- */
.results-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--white);
}

.results-total--loss { border: 2px solid rgba(220, 38, 38, 0.3); }
.results-total--gain { border: 2px solid rgba(8, 145, 178, 0.3); }

.results-total__label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-text);
}

.results-total__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
}

.results-total--loss .results-total__value { color: var(--color-danger); }
.results-total--gain .results-total__value { color: var(--color-teal); }

/* ---- Tool 12: ROI Grid ---- */
.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.roi-metric {
    text-align: center;
    padding: var(--space-4);
}

.roi-metric--featured {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.roi-metric__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--neutral-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.roi-metric__value {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 800;
    color: var(--white);
}

.roi-metric__value--highlight { color: var(--color-teal-light); }

.roi-metric__value--big {
    font-size: var(--text-4xl);
    color: var(--color-teal-light);
}

.roi-metric__note {
    font-size: var(--text-xs);
    color: var(--neutral-400);
    margin-top: var(--space-2);
}

/* ---- Tool 12+14: Results Actions ---- */
.results-actions {
    text-align: center;
    margin-top: var(--space-8);
}

.results-actions__share {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-top: var(--space-4);
}

.btn-full {
    width: 100%;
    max-width: 400px;
}

/* ---- Tool 13: Feature Checklist ---- */
.feature-checklist {
    padding: var(--space-2) 0;
}

.feature-checklist__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.feature-checklist__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.feature-category {
    margin-bottom: var(--space-6);
}

.feature-category__title {
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--color-text);
}

.feature-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.feature-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
}

.feature-card:hover { border-color: var(--color-teal-light); }
.feature-card.is-checked { border-color: var(--color-teal); background: var(--color-teal-bg); }

.feature-card input[type="checkbox"] {
    accent-color: var(--color-teal);
    margin-top: 2px;
    flex-shrink: 0;
}

.feature-card__content { flex: 1; }

.feature-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.feature-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
}

.feature-card__impact {
    flex-shrink: 0;
}

.feature-card__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

/* ---- Tool 13: Coverage Grid ---- */
.coverage-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.coverage-card {
    text-align: center;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
}

.coverage-card--whatsapp { background: var(--neutral-100); }
.coverage-card--platform { background: var(--color-teal-bg); }

.coverage-card__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.coverage-card__score {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-1);
}

.coverage-card--whatsapp .coverage-card__score { color: var(--neutral-600); }
.coverage-card--platform .coverage-card__score { color: var(--color-teal); }

.coverage-card__details {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---- Tool 13: Category Scores ---- */
.category-scores {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.category-score {
    margin-bottom: var(--space-2);
}

.category-score__label {
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.category-score__bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-score__bar {
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    font-size: 11px;
    font-weight: 700;
    color: var(--white);
    min-width: 40px;
    transition: width 0.6s var(--ease-out);
}

.category-score__bar--whatsapp { background: var(--neutral-400); }
.category-score__bar--platform { background: var(--color-teal); }

/* ---- Tool 13: Gap List ---- */
.gap-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gap-list__item {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(217, 119, 6, 0.15);
}

.gap-list__item:last-child { border-bottom: none; }

/* ---- Tool 13: Recommendation Card ---- */
.recommendation-card {
    padding: var(--space-4) 0;
}

.recommendation-card__label {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.recommendation-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-4);
}

.recommendation-card__stats {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.recommendation-card__stat {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.recommendation-card__stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.recommendation-card__stat-value {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--color-teal);
}

/* ---- Tool 13: Comparison Table (BOFU) ---- */
.comparison-table-wrapper {
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.comparison-table th {
    background: var(--neutral-50);
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--color-border);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.comparison-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.comparison-table__cell.has-feature { color: var(--color-teal); font-weight: 700; text-align: center; }
.comparison-table__cell.no-feature { color: var(--neutral-300); text-align: center; }

/* ---- Tool 14: Process Selector ---- */
.process-selector {
    padding: var(--space-2) 0;
}

.process-selector__title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.process-selector__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.process-group {
    margin-bottom: var(--space-6);
}

.process-group__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.process-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.process-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--duration-fast), background var(--duration-fast);
}

.process-card:hover { border-color: var(--color-teal-light); }
.process-card.is-checked { border-color: var(--color-teal); background: var(--color-teal-bg); }

.process-card input[type="checkbox"] {
    accent-color: var(--color-teal);
    margin-top: 2px;
    flex-shrink: 0;
}

.process-card__content { flex: 1; }

.process-card__header {
    margin-bottom: var(--space-1);
}

.process-card__name {
    font-size: var(--text-sm);
    font-weight: 600;
}

.process-card__desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ---- Tool 14: Results Tabs ---- */
.results-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 0;
}

.results-tab {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 600;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-body);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--duration-fast), border-color var(--duration-fast);
}

.results-tab:hover { color: var(--color-teal); }
.results-tab.is-active { color: var(--color-teal); border-bottom-color: var(--color-teal); }

.results-tab-content { display: none; }
.results-tab-content.is-active { display: block; }

/* ---- Tool 14: Comparison Cards ---- */
.comparison-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.comparison-card {
    background: var(--white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
}

.comparison-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.comparison-card__name {
    font-size: var(--text-base);
    font-weight: 700;
}

.comparison-card__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.comparison-card__stats {
    margin-bottom: var(--space-4);
}

.comparison-stat {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.comparison-stat__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.comparison-stat__value {
    font-weight: 700;
    font-size: var(--text-sm);
}

.comparison-card__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.comparison-column {
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.comparison-column--before { background: var(--color-danger-bg); }
.comparison-column--after { background: var(--color-teal-bg); }

.comparison-column__label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-3);
}

.comparison-column--before .comparison-column__label { color: var(--color-danger); }
.comparison-column--after .comparison-column__label { color: var(--color-teal); }

.comparison-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) 0;
}

.comparison-metric--total {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
    margin-top: var(--space-2);
}

.comparison-metric__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.comparison-metric__value {
    font-size: var(--text-sm);
    font-weight: 700;
}

.comparison-card__savings {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.comparison-saving {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.comparison-saving__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.comparison-saving__value {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--color-teal);
}

/* ---- Tool 14: Totals Grid ---- */
.totals-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.total-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-align: center;
}

.total-card--highlight {
    background: var(--color-teal-bg);
    border: 1px solid rgba(8, 145, 178, 0.15);
}

.total-card--roi {
    background: linear-gradient(135deg, var(--color-charcoal), var(--neutral-800));
    color: var(--white);
}

.total-card__icon {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.total-card__label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.total-card--roi .total-card__label { color: var(--neutral-400); }

.total-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: 1;
    margin-bottom: var(--space-1);
}

.total-card--highlight .total-card__value { color: var(--color-teal); }
.total-card--roi .total-card__value { color: var(--color-teal-light); }

.total-card__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.total-card--roi .total-card__note { color: var(--neutral-400); }

/* ---- Tool 14: Roadmap ---- */
.roadmap {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.roadmap-phase {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    border-left: 3px solid var(--color-teal);
}

.roadmap-phase__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.roadmap-phase__badge {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-teal);
    background: var(--color-teal-bg);
    padding: 2px 10px;
    border-radius: var(--radius-full);
}

.roadmap-phase__title {
    font-size: var(--text-sm);
    font-weight: 700;
}

.roadmap-phase__list {
    padding-left: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

/* ---- Additional Responsive: Tool-Specific ---- */
@media (min-width: 480px) {
    .tool-option-grid { grid-template-columns: 1fr 1fr; }
    .tool-bio-grid { grid-template-columns: 1fr 1fr; }
    .tool-tips-cards { grid-template-columns: repeat(3, 1fr); }
    .tool-impact-grid { grid-template-columns: repeat(2, 1fr); }
    .input-form__grid { grid-template-columns: 1fr 1fr; }
    .tool-action-cards { grid-template-columns: 1fr 1fr; }
    .tool-steps { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) {
    .tool-metrics-grid { grid-template-columns: 1fr 1fr; }
    .results-cards { grid-template-columns: repeat(3, 1fr); }
    .tool-impact-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
    .tool-option-grid { grid-template-columns: repeat(3, 1fr); }
    .tool-action-cards { grid-template-columns: repeat(3, 1fr); }
}