/* ASH A(π) Signature Series — Build 006.
 * Deeper blacks, richer emerald, orbital/topology geometry derived from the
 * ER logo language — a more dramatic register than the rest of the site,
 * built from the same design tokens rather than a new visual language.
 */

/* ---------- Shared signature section rhythm ---------- */
.er-signature-section {
    position: relative;
    padding-block: var(--er-space-9);
}

.er-signature-section--dark {
    background: var(--er-carbon-900);
    border-block: 1px solid var(--er-border);
}

/* ---------- Gate 4: "What makes it different" equation ---------- */
.er-equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--er-space-4);
    margin-top: var(--er-space-8);
}

.er-equation__term {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--er-space-2);
    background: var(--er-gradient-panel);
    border: 1px solid var(--er-border-strong);
    border-radius: var(--er-radius-md);
    padding: var(--er-space-5) var(--er-space-6);
    min-width: 140px;
    text-align: center;
}

.er-equation__term-label {
    font-family: var(--er-font-display);
    font-weight: 700;
    font-size: var(--er-text-sm);
    letter-spacing: 0.04em;
    color: var(--er-text);
}

.er-equation__glyph {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xl);
    color: var(--er-text-faint);
}

.er-equation__term--result {
    background: linear-gradient(155deg, var(--er-emerald-700) 0%, var(--er-carbon-800) 100%);
    border-color: var(--er-signal-green);
}

.er-equation__term--result .er-equation__term-label {
    color: var(--er-signal-green);
    text-shadow: 0 0 12px var(--er-signal-green-glow);
    font-size: var(--er-text-base);
}

/* ---------- Gate 5: exploded-spec hardware callouts ---------- */
.er-spec-callouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--er-space-5);
    margin-top: var(--er-space-8);
}

.er-spec-callout {
    position: relative;
    background: var(--er-gradient-panel);
    border: 1px solid var(--er-border-strong);
    border-radius: var(--er-radius-lg);
    padding: var(--er-space-6);
    overflow: hidden;
}

.er-spec-callout::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--er-signal-green), transparent);
    opacity: 0.6;
}

.er-spec-callout__number {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-3xl);
    color: var(--er-signal-green);
    text-shadow: 0 0 16px var(--er-signal-green-glow);
    line-height: 1;
}

.er-spec-callout__unit {
    font-size: var(--er-text-base);
    color: var(--er-text-dim);
    margin-left: var(--er-space-1);
}

.er-spec-callout__label {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--er-text-faint);
    margin-top: var(--er-space-2);
}

.er-spec-callout__detail {
    font-size: var(--er-text-sm);
    color: var(--er-text);
    margin-top: var(--er-space-3);
    margin-bottom: 0;
}

/* ---------- Gate 7: Mission Computing sticky flow ---------- */
.er-mission-flow {
    display: flex;
    flex-direction: column;
    gap: var(--er-space-3);
    max-width: 640px;
    margin-inline: auto;
}

.er-mission-flow__step {
    display: flex;
    align-items: center;
    gap: var(--er-space-4);
    background: var(--er-bg-raised);
    border: 1px solid var(--er-border);
    border-radius: var(--er-radius-md);
    padding: var(--er-space-4) var(--er-space-5);
}

.er-mission-flow__index {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-sm);
    color: var(--er-signal-green);
    flex-shrink: 0;
    width: 2.5rem;
}

.er-mission-flow__label {
    font-family: var(--er-font-display);
    font-weight: 700;
    color: var(--er-text);
}

.er-mission-flow__connector {
    width: 1px;
    height: var(--er-space-5);
    background: var(--er-border-strong);
    margin-left: calc(var(--er-space-4) + 1.25rem);
}

.er-mission-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--er-space-6);
    margin-top: var(--er-space-8);
}

@media (max-width: 768px) {
    .er-mission-compare {
        grid-template-columns: 1fr;
    }
}

.er-mission-compare__col {
    padding: var(--er-space-6);
    border-radius: var(--er-radius-lg);
    border: 1px solid var(--er-border);
}

.er-mission-compare__col--traditional {
    background: var(--er-graphite-500);
    opacity: 0.85;
}

.er-mission-compare__col--ash {
    background: linear-gradient(155deg, var(--er-emerald-700) 0%, var(--er-carbon-800) 100%);
    border-color: var(--er-signal-green);
}

/* ---------- Gate 8: Architecture diagram ---------- */
.er-architecture-diagram {
    width: 100%;
    height: auto;
    max-width: 760px;
    margin-inline: auto;
    display: block;
}

.er-architecture-diagram text {
    font-family: var(--er-font-mono);
    font-size: 15px;
    fill: var(--er-metallic-100);
    text-anchor: middle;
}

.er-architecture-diagram .er-diagram-node {
    fill: var(--er-graphite-400);
    stroke: var(--er-border-strong);
    stroke-width: 1.5;
}

.er-architecture-diagram .er-diagram-node--hub {
    fill: url(#er-hub-gradient);
    stroke: var(--er-signal-green);
    stroke-width: 2;
}

.er-architecture-diagram .er-diagram-node--optional {
    fill: transparent;
    stroke: var(--er-text-faint);
    stroke-width: 1.5;
    stroke-dasharray: 5 4;
}

.er-architecture-diagram .er-diagram-node--optional ~ text {
    fill: var(--er-text-faint);
}

.er-architecture-diagram .er-diagram-connector {
    stroke: var(--er-border-strong);
    stroke-width: 1.5;
    fill: none;
}

.er-architecture-diagram .er-diagram-connector--optional {
    stroke-dasharray: 4 4;
}

.er-diagram-caption {
    text-align: center;
    font-size: var(--er-text-xs);
    color: var(--er-text-faint);
    margin-top: var(--er-space-4);
}

/* ---------- Capability matrix (Gate 11) ---------- */
.er-ash-capability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 var(--er-space-6);
    margin-top: var(--er-space-8);
}

.er-ash-capability-grid .er-capability__rating--native {
    color: var(--er-signal-green);
    text-shadow: 0 0 8px var(--er-signal-green-glow);
    font-weight: 700;
}

/* ---------- Hero (Gate 3) ---------- */
.er-ash-hero {
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    display: flex;
    align-items: center;
    background: radial-gradient(ellipse 140% 100% at 50% -20%, var(--er-emerald-700) 0%, var(--er-carbon-900) 60%);
}

.er-ash-hero__price {
    font-family: var(--er-font-mono);
    font-size: var(--er-text-3xl);
    color: var(--er-signal-green);
    text-shadow: 0 0 20px var(--er-signal-green-glow);
}

@media (max-width: 768px) {
    .er-spec-callout__number { font-size: var(--er-text-2xl); }
    .er-equation__term { min-width: 110px; padding: var(--er-space-4); }
}