/**
 * Premium SVG illustration system (partials/components/illustration.php).
 * Pure inline SVG/CSS, zero external assets, navy/teal/gold tokens only —
 * used on story/trust pages (About, Contact, Careers, Support, Legal)
 * instead of the dashboard-style ui-mockup, which is reserved for pages
 * that actually preview software.
 */
.illustration {
    position: relative;
    width: 100%;
    max-width: 440px;
}

.illustration__art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 100 / 70;
}

.illustration__draw {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .illustration__draw {
        animation: illustration-draw 1.6s var(--ease-out) 0.3s backwards;
    }
}

@keyframes illustration-draw {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

/* journey — About: milestone timeline + stat chips */
.illustration__milestones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.illustration__milestone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-100);
}

.illustration__milestone-year {
    font-family: var(--font-heading);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-secondary-700);
}

.illustration__milestone span:last-child {
    font-size: var(--text-caption);
    color: var(--color-neutral-700);
}

.illustration__chips {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.illustration__chip {
    flex: 1;
    text-align: center;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
}

.illustration__chip strong {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-h5);
    color: var(--color-primary-600);
    font-variant-numeric: tabular-nums;
}

.illustration__chip span {
    font-size: var(--text-caption);
    color: var(--color-neutral-500);
}

/* contact-hub — Contact: channel nodes positioned over the spoke SVG */
.illustration--contact-hub { padding-bottom: var(--space-4); }

.illustration__node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: -17px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-sm);
    color: var(--color-secondary-700);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .illustration__node { transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
    .illustration__node:hover { transform: scale(1.12); box-shadow: var(--shadow-md); }
}

/* hiring — Careers: avatar mesh + open-role badge */
.illustration__avatar {
    position: absolute;
    width: 30px;
    height: 30px;
    margin: -15px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-white);
    box-shadow: var(--shadow-sm);
}

.illustration__avatar--1 { background: var(--gradient-icon-1); }
.illustration__avatar--2 { background: var(--gradient-icon-2); }
.illustration__avatar--3 { background: var(--gradient-icon-3); }
.illustration__avatar--4 { background: var(--gradient-icon-4); }

.illustration__avatar-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    background: var(--color-accent-600);
    color: var(--color-primary-900);
    border: 2px solid var(--color-white);
}