/* ============================================
   SCRIBLINK PAGE (redesign)
   Uses only base.css tokens. Component vocabulary
   borrowed from content.css (.stages, .mockup,
   .eyebrow, .comparison-table) so the page reads
   as part of the site.
   ============================================ */

/* ---------- HERO ---------- */
.sl-hero {
    background: var(--color-primary-dark);
    background-image: radial-gradient(ellipse at 30% 0%, rgba(103, 91, 140, 0.35) 0%, transparent 65%);
    padding: calc(var(--spacing-24) + 60px) 0 var(--spacing-24);
}

.sl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--spacing-16);
    align-items: center;
}

@media (max-width: 900px) {
    .sl-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-12);
    }
}

.sl-hero .eyebrow {
    color: var(--color-accent);
}

.sl-hero h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-white);
    margin-bottom: var(--spacing-5);
}

.sl-hero-lede {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-snug);
    color: var(--color-white);
    margin-bottom: var(--spacing-8);
}

.sl-signup {
    display: flex;
    gap: var(--spacing-2);
    flex-wrap: wrap;
    max-width: 460px;
}

.sl-signup-label {
    flex: 1 0 100%;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-1);
}

.sl-signup .input {
    flex: 1;
    min-width: 200px;
}

/* removed: hero status note */

/* ---------- TRAFFIC LOG MOCKUP ---------- */
.sl-mock {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.sl-mock-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-gray-200);
}

.sl-mock-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-radius: var(--radius-full);
    padding: var(--spacing-2) var(--spacing-4);
}

.sl-mock-live {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin-left: auto;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.sl-mock-live .status-dot {
    animation: sl-pulse 2s ease-in-out infinite;
}

@keyframes sl-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.sl-log {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

.sl-log th:first-child,
.sl-log td:first-child {
    width: 78px;
}

.sl-log th:last-child,
.sl-log td:last-child {
    width: 140px;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-4);
}

.sl-log th {
    padding: var(--spacing-3) var(--spacing-5);
    text-align: left;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-off-white);
    border-bottom: 1px solid var(--color-gray-200);
}

.sl-log td {
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-gray-100);
}

.sl-log tr:last-child td {
    border-bottom: none;
}

.sl-log .sl-agent {
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-primary-dark);
    overflow-wrap: anywhere;
}

.sl-agent-sub {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
}

.sl-log td:last-child {
    text-align: right;
}

.sl-tag {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 2px var(--spacing-3);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.sl-tag-human {
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
}

.sl-tag-ok {
    background: rgba(0, 191, 165, 0.14);
    color: var(--color-accent-text);
}

.sl-tag-bad {
    background: rgba(239, 68, 68, 0.12);
    color: #B42318;
}

.sl-tag-trap {
    background: var(--color-primary-dark);
    color: var(--color-white);
}

/* ---------- VERDICT TABLE ---------- */
.sl-table {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) 200px;
    gap: 0;
    margin-top: var(--spacing-10);
}

.sl-th:nth-child(1),
.sl-th:nth-child(2),
.sl-td:nth-child(3n + 1),
.sl-td:nth-child(3n + 2) {
    padding-right: var(--spacing-8);
}

.sl-th {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gray-400);
    padding-bottom: var(--spacing-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.sl-th-right {
    text-align: right;
}

.sl-td {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
    padding: var(--spacing-5) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.sl-td-last {
    border-bottom: none;
}

.sl-td-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
}

.sl-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
    background: var(--color-gray-400);
}

.sl-dot-ok { background: var(--color-accent); }
.sl-dot-bad { background: var(--color-error); }
.sl-dot-unknown { background: var(--color-primary-medium); }

.sl-td-out {
    text-align: right;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.sl-out-serve { color: var(--color-accent-text); }
.sl-out-choice { color: var(--color-primary-medium); }

@media (max-width: 760px) {
    .sl-table {
        grid-template-columns: minmax(0, 1fr) 140px;
    }
    .sl-th:nth-child(2) {
        display: none;
    }
    .sl-td:nth-child(3n + 2) {
        grid-column: 1 / -1;
        padding-top: 0;
        font-size: var(--font-size-sm);
    }
    .sl-td-name {
        border-bottom: none;
        padding-bottom: var(--spacing-2);
    }
    .sl-td-out {
        border-bottom: none;
        padding-bottom: var(--spacing-2);
    }
}

.section-dark .section-header p.sl-eyebrow-dark {
    color: var(--color-accent);
}

/* ---------- DEFENCE LADDER ---------- */
.sl-ladder {
    margin-top: var(--spacing-10);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sl-rung {
    display: grid;
    grid-template-columns: 32px minmax(0, 190px) minmax(0, 1fr) minmax(0, 1fr) 72px;
    gap: var(--spacing-6);
    align-items: baseline;
    padding: var(--spacing-6) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.sl-rung-mark {
    color: var(--color-accent);
    align-self: center;
}

.sl-rung-mark svg {
    width: 24px;
    height: 24px;
}

.sl-cost {
    display: flex;
    gap: 3px;
    align-self: center;
}

.sl-cost i {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}

.sl-cost i.on {
    background: var(--color-accent);
}

@media (max-width: 800px) {
    .sl-rung {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: var(--spacing-2) var(--spacing-4);
    }
    .sl-rung > :nth-child(3),
    .sl-rung > :nth-child(4),
    .sl-rung > :nth-child(5) {
        grid-column: 2;
    }
    .sl-cost {
        width: 72px;
        margin-top: var(--spacing-2);
    }
}

.sl-rung-step {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--font-size-sm);
    color: var(--color-primary-medium);
}

.sl-rung h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.sl-rung-gets,
.sl-rung-when {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-on-dark-muted);
}

.sl-rung-when {
    color: rgba(255, 255, 255, 0.68);
}

.sl-ladder-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 190px) minmax(0, 1fr) minmax(0, 1fr) 72px;
    gap: var(--spacing-6);
    padding-bottom: var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 800px) {
    .sl-ladder-head {
        display: none;
    }
}

.sl-ladder-foot {
    margin-top: var(--spacing-6);
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.72);
}

/* ---------- CAPABILITIES ---------- */
.sl-caps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-8) var(--spacing-12);
    margin-top: var(--spacing-10);
}

@media (max-width: 700px) {
    .sl-caps {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
}

.sl-cap {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: var(--spacing-4);
}

.sl-cap svg {
    width: 20px;
    height: 20px;
    color: var(--color-accent-text);
    margin-top: 3px;
}

.sl-cap h3 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-1);
}

.sl-cap p {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* ---------- CLOSER ---------- */
.sl-closer {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--spacing-10);
    background: var(--color-primary-light);
    border-radius: var(--radius-xl);
}

@media (max-width: 600px) {
    .sl-closer {
        padding: var(--spacing-6);
    }
}

.sl-closer h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-4);
}

.sl-closer p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

.sl-closer p + p {
    margin-top: var(--spacing-4);
}

.sl-closer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-6);
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: 1px solid rgba(103, 91, 140, 0.25);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.sl-closer-links a {
    color: var(--color-accent-text);
}

.sl-closer-links a:hover,
.sl-closer-links a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}