/* Prava Loom website — GENERATED by integration-agent/scripts/gen-site.mjs from the shared product sheet, re-skinned to Loom violet. Do not edit. */

:root {
    --brand: #a78bfa;
    --brand-dark: #7c5cfc;
    --brand-light: rgba(167, 139, 250, 0.12);
    --brand-glow: rgba(167, 139, 250, 0.25);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #86868b;
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-surface: #111111;
    --border-color: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    --card-shadow-hover: 0 8px 32px rgba(167, 139, 250, 0.15);
    --radius: 20px;
    --radius-sm: 12px;
    --max-width: 1080px;
}

/* Global link style. Without this, body links fall back to the browser default
   (#0000EE + underline), which on a black background reads as a muddy, blurry
   blue. Brand colour, no underline at rest, underline on hover/focus so the
   affordance is still there for anyone scanning for it. */
a {
    /* A step lighter than --brand: the brand blue is tuned for fills and
       buttons, and against a pure-black page body links read soft at 6.7:1.
       --brand itself is left alone so buttons and accents don't shift. */
    color: #bfa8ff;
    text-decoration: none;
    transition: color 0.15s;
}
a:hover {
    color: #dccfff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
a:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 3px;
}
a:visited { color: #bfa8ff; }


*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.5;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-color);
}

.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-primary);
}

.nav-brand img {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

.nav-brand span {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.nav-links {
    display: flex;
    gap: 24px;
    list-style: none;
}

/* Mobile menu. The nav was simply display:none below 768px, which left phones
   with NO navigation at all. Checkbox-and-label disclosure so it works with
   zero JavaScript on a static site. */
.nav-toggle,
.nav-burger {
    display: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--text-primary);
}

/* Hero */
.hero {
    padding: 160px 24px 100px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(167, 139, 250, 0.08) 0%, transparent 60%);
}

.hero-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.app-icon-container {
    margin-bottom: 32px;
}

.app-icon {
    width: 120px;
    height: 120px;
    border-radius: 26px;
    box-shadow: 0 8px 40px rgba(167, 139, 250, 0.3);
    object-fit: cover;
}

.hero-badge {
    display: inline-block;
    max-width: 100%;
    background: var(--brand-light);
    color: var(--brand);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 24px;
    letter-spacing: 0.3px;
    border: 1px solid rgba(167, 139, 250, 0.2);
}

.hero h1 {
    font-size: clamp(36px, 6vw, 60px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1.06;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.hero h1 .highlight {
    background: linear-gradient(135deg, var(--brand) 0%, #6ee7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero .subtitle {
    font-size: clamp(18px, 2.5vw, 22px);
    color: var(--text-secondary);
    max-width: 620px;
    margin: 0 auto 40px;
    line-height: 1.4;
}

.hero-cta {
    display: inline-block;
    max-width: 100%;
    background: var(--brand);
    color: #001622;
    padding: 14px 32px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: default;
    opacity: 0.9;
}

.platform-tags {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.platform-tag {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-tertiary);
    padding: 4px 12px;
    border-radius: 100px;
    border: 1px solid var(--border-color);
}

/* The four-step loop */
/* This is a sequence, so reading order carries the meaning. Keep all four
   cards on one row when they fit, then flip to a vertical sequence instead of
   allowing a ragged mid-sequence wrap. */
.loop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    justify-items: stretch;
    gap: 14px;
    max-width: var(--max-width);
    margin: 48px auto 0;
}

.loop-step {
    background: var(--bg-surface);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: var(--radius-sm);
    padding: 14px 20px;
    text-align: left;
}

.loop-step code {
    font-family: 'SF Mono', ui-monospace, Menlo, monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--brand);
}

.loop-step span {
    display: block;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
    line-height: 1.45;
}

.loop-arrow {
    color: var(--text-tertiary);
    font-size: 20px;
    align-self: center;
}

/* Below the point where three columns stop fitting, stack it. The arrows are
   literal "→" characters, so rotate them rather than shipping a second glyph. */
@media (max-width: 900px) {
    .loop {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        gap: 10px;
    }
    .loop-arrow {
        transform: rotate(90deg);
        justify-self: center;
        line-height: 1;
    }
}

/* Features */
.features {
    padding: 100px 24px;
    background: var(--bg-secondary);
}

.features-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.features h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 18px;
    margin-bottom: 56px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    text-align: left;
}

.feature-card {
    background: var(--bg-surface);
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: rgba(167, 139, 250, 0.3);
    box-shadow: var(--card-shadow-hover);
}

.feature-icon {
    font-size: 32px;
    margin-bottom: 14px;
}

.feature-card h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.2px;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

/* How It Works */
.how-it-works {
    padding: 100px 24px;
    background: var(--bg-primary);
}

.how-it-works-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.how-it-works h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 32px;
    text-align: center;
    margin-top: 56px;
}

.step {
    padding: 16px;
}

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand);
    color: #001622;
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.step h3 {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.step p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}

/* Comparison Table */
.comparison {
    padding: 100px 24px;
    background: var(--bg-secondary);
}

.comparison-inner {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.comparison h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 48px;
    text-align: left;
}

.comparison-table th {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.comparison-table th.col-eag {
    color: var(--brand);
}

.comparison-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

.comparison-table td.col-label {
    color: var(--text-primary);
    font-weight: 500;
}

.comparison-table td.col-eag {
    color: var(--text-primary);
}

.comparison-table tr:last-child td {
    border-bottom: none;
}

.check-yes { color: #30d158; }
.check-no { color: var(--text-tertiary); }

/* Plans */
.plans {
    padding: 100px 24px;
    background: var(--bg-primary);
}

.plans-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.plans h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    text-align: left;
    margin-top: 56px;
}

.plan-card {
    background: var(--bg-surface);
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.plan-card:hover {
    transform: translateY(-3px);
    border-color: rgba(167, 139, 250, 0.3);
    box-shadow: var(--card-shadow-hover);
}

.plan-card.featured {
    border-color: rgba(167, 139, 250, 0.45);
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.06) 0%, var(--bg-surface) 60%);
}

.plan-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.plan-price {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.plan-price span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.plan-note {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 18px;
}

.plan-features {
    list-style: none;
    margin-top: auto;
}

.plan-features li {
    font-size: 13.5px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-top: 1px solid var(--border-color);
}

.plan-features li::before {
    content: "✓  ";
    color: #30d158;
    font-weight: 700;
}

/* "roadmap" marker — a muted pill so unbuilt items read as planned, not shipped */
.roadmap {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.plans-footnote {
    margin-top: 32px;
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Editions */
.platforms-heading {
    text-align: center;
    margin: 64px 0 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.edition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    text-align: left;
    max-width: 760px;
    margin: 28px auto 0;
}

.edition-card {
    background: var(--bg-surface);
    padding: 28px;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.edition-card h3 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.edition-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-light);
    border: 1px solid rgba(167, 139, 250, 0.25);
    padding: 3px 10px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.edition-card p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.edition-card ul {
    list-style: none;
}

.edition-card li {
    font-size: 13.5px;
    color: var(--text-secondary);
    padding: 6px 0;
    border-top: 1px solid var(--border-color);
}

.edition-card li::before {
    content: "✓  ";
    color: #30d158;
    font-weight: 700;
}

.edition-card li.edition-no::before {
    content: "—  ";
    color: var(--text-tertiary);
    font-weight: 700;
}

/* Privacy Section */
.privacy-section {
    padding: 80px 24px;
    background: var(--bg-secondary);
}

.privacy-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.privacy-inner h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.privacy-badges {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.privacy-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 10px 18px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.privacy-badge .check {
    color: #30d158;
    font-weight: 700;
}

/* Tech Stack */
.tech-section {
    padding: 80px 24px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

.tech-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    text-align: center;
}

.tech-inner h2 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 48px;
    color: var(--text-primary);
}

.tech-grid {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tech-tag {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid rgba(167, 139, 250, 0.25);
    color: var(--brand);
    background: var(--brand-light);
}

/* Footer */
.footer {
    padding: 48px 24px 24px;
    background: var(--bg-primary);
    color: rgba(255, 255, 255, 0.8);
    border-top: 1px solid var(--border-color);
}

.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 40px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.footer-brand img {
    width: 32px;
    height: 32px;
    border-radius: 7px;
}

.footer-brand span {
    font-size: 18px;
    font-weight: 600;
    color: white;
}

.footer-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    max-width: 360px;
}

.footer h4 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 16px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.3);
    text-align: center;
}

/* Legal Pages */
.legal-page {
    padding: 120px 24px 80px;
    max-width: 760px;
    margin: 0 auto;
}

.legal-page h1 {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.legal-page .last-updated {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-bottom: 40px;
}

.legal-page h2 {
    font-size: 22px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.legal-page h3 {
    font-size: 17px;
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.legal-page p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 12px;
}

.legal-page ul, .legal-page ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.legal-page li {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 4px;
}

.legal-page strong {
    color: var(--text-primary);
    font-weight: 600;
}

.legal-page a {
    color: var(--brand);
    text-decoration: none;
}

.legal-page a:hover {
    text-decoration: underline;
}

.highlight-box {
    background: var(--brand-light);
    border-left: 3px solid var(--brand);
    padding: 16px 20px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 20px 0;
}

.highlight-box p {
    color: var(--text-primary);
    margin: 0;
}

/* Responsive */
@media (max-width: 1000px) {
    .nav-inner {
        position: relative;
    }

    .nav-links {
        display: none;
    }

    /* The checkbox is the control (focusable, keyboard-operable); the label is
       its visible hamburger. Both sit at 44px so the tap target is real. */
    .nav-toggle {
        display: block;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
        height: 44px;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 3;
    }

    .nav-burger span {
        display: block;
        height: 2px;
        background: var(--text-primary);
        border-radius: 2px;
        transition: transform 0.2s, opacity 0.2s;
    }

    .nav-burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 22px;
        height: 44px;
        margin-left: auto;
    }

    .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .nav-toggle:focus-visible ~ .nav-burger {
        outline: 2px solid var(--brand);
        outline-offset: 4px;
        border-radius: 3px;
    }

    .nav-toggle:checked ~ .nav-links li:last-child {
        border-bottom: 0;
    }

    .nav-toggle:checked ~ .nav-links li {
        padding: 12px 0;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-toggle:checked ~ .nav-links a {
        font-size: 15px;
    }

    .nav-toggle:checked ~ .nav-links {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
        padding: 4px 20px 12px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 120px 20px 80px;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .steps {
        grid-template-columns: 1fr 1fr;
    }

    .comparison-table {
        font-size: 13px;
    }

    /* The arrows used to be hidden here, which removed the only thing showing
       this is a sequence. The 900px rule above already stacks it vertically and
       turns the arrows downward, so they stay — just narrower. flex-direction
       is gone: .loop is a grid now. */
    .loop {
        max-width: 340px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 100px 16px 60px;
    }

    .features,
    .how-it-works,
    .privacy-section,
    .tech-section,
    .plans,
    .comparison {
        padding: 60px 16px;
    }

    .steps {
        grid-template-columns: 1fr;
    }

    .privacy-badges {
        flex-direction: column;
        align-items: center;
    }

    .comparison-table th:nth-child(2),
    .comparison-table td:nth-child(2) {
        display: none;
    }
}

/* ========================================================================
   Architecture page (architecture.html) — the request-path diagram.
   Uses the site's own tokens; --signal is the green from the EAG mark,
   spent only on the proof/evidence moments.
   ======================================================================== */
:root { --signal: #34d399; --signal-dim: rgba(52,211,153,.14); }

.arch-hero { text-align: center; padding-top: .5rem; }
.arch-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; margin: 0 0 1.1rem; letter-spacing: -.02em; }
.arch-lead { max-width: 62ch; margin: 0 auto; font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.68; opacity: .78; }
.arch-sec { margin-top: 72px; }
.arch-sec > h2 { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 8px; }
.arch-sec > p.sub { color: var(--text-secondary); margin: 0 auto 28px; max-width: 640px; line-height: 1.6; }

.diagram, .dband, .dflow, .dtech { text-align: left; }

/* three-panel diagram */
/* align-items: center, not stretch. Stretch forced all three panels to the
   tallest one's height, so the shorter columns carried a block of dead space
   under their last tile. Centering lets each panel be exactly as tall as its
   content and sits them on a shared horizontal centreline, which is also where
   the chevrons already point.
   Column ratio: the systems column carries the longest text (six vendor lists),
   the agents column the shortest ("any MCP client"), so weight width toward the
   systems side. 0.8fr for agents fits more on one line at full width but starts
   wrapping product NAMES around 960px, which is why this stops at 0.9fr. */
.diagram { display: grid; grid-template-columns: 0.9fr auto 1.35fr auto 1.35fr; gap: 0 14px; align-items: center; }
.dcol { background: linear-gradient(180deg, #15181f 0%, #0d0f14 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 0 16px 20px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05); }
.dcol-head { margin: 0 -16px 16px; padding: 14px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.13); display: flex; align-items: center; gap: 9px; }
.dcol-head::before { content: ""; width: 3px; height: 26px; border-radius: 2px;
  background: var(--brand); opacity: .55; flex: 0 0 3px; }
.dcol-head b { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.dcol-head span { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.dcol-head.systems::before { background: var(--signal); }
.dtiles { display: flex; flex-direction: column; gap: 8px; }
.dtile { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.11); border-radius: var(--radius-sm); padding: 10px 12px;
  transition: border-color .2s, background .2s, transform .2s; }
.dtile:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.2); transform: translateY(-1px); }
.dtile img, .dtile .chip { width: 22px; height: 22px; flex: 0 0 22px; display: block; }
.dtile .chip { border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.dtile b { display: block; font-size: 13px; font-weight: 500; letter-spacing: -.01em; }
.dtile i { display: block; font-style: normal; font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.dtile.own { background: linear-gradient(180deg, rgba(167, 139, 250,.16), rgba(167, 139, 250,.06));
  border-color: rgba(167, 139, 250,.42); }
.dtile.own b { color: #cfe4ff; }

/* the gateway column stays the deep brand field — it IS the product */
.dgate { background: linear-gradient(168deg,#0e2f5e 0%,#0a1c38 46%,#07142a 100%);
  border: 1px solid rgba(167, 139, 250,.34); border-radius: var(--radius); padding: 22px 18px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 18px 60px rgba(167, 139, 250,.13); }
.dgate-head { display: flex; align-items: center; gap: 11px; }
.dgate-head img { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px; }
.dgate-head b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dgate-sub { font-size: 11px; color: #8fb4e6; margin: 4px 0 16px 37px; }
.dlayers { display: flex; flex-direction: column; gap: 7px; }
.dlayer { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px; padding: 11px 13px; transition: background .2s, border-color .2s; }
.dlayer:hover { background: rgba(167, 139, 250,.13); border-color: rgba(167, 139, 250,.4); }
.dlayer b { display: block; font-size: 13px; font-weight: 600; color: #eaf2ff; letter-spacing: -.01em; }
.dlayer i { display: block; font-style: normal; font-size: 11px; color: #8fb4e6; margin-top: 2px; line-height: 1.45; }
.dlayer.proof { border-color: rgba(52,211,153,.3); background: var(--signal-dim); }
.dlayer.proof b { color: #c7f5e2; }
.dlayer.proof i { color: #7fd3b4; }

.dchev { display: flex; align-items: center; justify-content: center;
  color: rgba(167, 139, 250,.55); font-size: 20px; line-height: 1; }

/* governance band */
.dband { margin-top: 14px; background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius); padding: 20px; }
.dband-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.dband-head b { font-size: 13px; font-weight: 600; }
.dband-head span { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--text-tertiary); }
.dband-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.dgcard { background: var(--bg-surface); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 13px 15px; }
.dgcard b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.dgcard p { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; margin: 0; }
.dgcard.sig b { color: var(--signal); }

/* request lifecycle */
.dflow { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; counter-reset: s; }
/* The lifecycle runs to six gates. auto-fit packs those into five columns at
   desktop width, orphaning the last card on a row of its own — pin three per
   row so both rows are full. Narrow widths keep the auto-fit behaviour. */
@media (min-width: 860px) { .dflow { grid-template-columns: repeat(3, 1fr); } }
.dstep { background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 16px; }
.dstep::before { counter-increment: s; content: counter(s, decimal-leading-zero);
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--brand);
  font-weight: 600; display: block; margin-bottom: 9px; }
.dstep b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; letter-spacing: -.01em; }
.dstep p { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.dstep.last { border-color: rgba(52,211,153,.3); background: linear-gradient(180deg, var(--signal-dim), transparent); }
.dstep.last::before { color: var(--signal); }

/* receipt + claims */
.dtech { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; align-items: start; }
.drec { background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius); overflow: hidden; }
.drec-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-color); background: var(--bg-surface); }
.drec-h b { font-size: 12px; font-weight: 600; }
.drec-h span { font-size: 11px; color: var(--text-tertiary); margin-left: auto;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; }
.drec pre { padding: 15px 16px; overflow-x: auto; margin: 0;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.75;
  color: var(--text-secondary); }
.drec .k { color: #7fb2f5; }
.drec .s { color: var(--signal); }
.drec .n { color: var(--text-primary); }
.dfacts { display: flex; flex-direction: column; gap: 10px; }
.dfact { background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 14px 16px; }
.dfact b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; letter-spacing: -.01em; }
.dfact p { font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.dfact code { font-family: 'SF Mono', ui-monospace, Menlo, monospace; font-size: 11px;
  color: var(--brand); background: var(--brand-light); padding: 1px 5px; border-radius: 4px; }

@media (max-width: 900px) {
  .diagram { grid-template-columns: 1fr; gap: 12px; }
  .dchev { transform: rotate(90deg); padding: 2px 0; }
  .dtech { grid-template-columns: 1fr; }
}
/* Wordmark-shaped vendor logos (SAP) need a wide slot, not the square icon grid. */
.dtile img.wordmark { width: auto; height: 13px; flex: 0 0 auto; max-width: 44px; }

/* Domain glyphs, in the taxonomy the console and the connectors page group by. */
.dtile .chip.dom { font-size: 8px; font-weight: 700; letter-spacing: 0; }
.dmore { display: block; margin-top: 10px; padding: 9px 12px; text-align: center;
  font-size: 11.5px; color: var(--text-tertiary); border: 1px dashed rgba(255,255,255,.14);
  border-radius: var(--radius-sm); transition: color .2s, border-color .2s; }
.dmore:hover { color: var(--text-primary); border-color: rgba(255,255,255,.3); text-decoration: none; }


/* ---------------------------------------------------------------------------
   Architecture diagram (eag/architecture.html).
   A real drawing rather than three columns of cards: a trust boundary, legs
   annotated with what each call actually carries, and numbered steps that tie
   the picture to the walk-through below it.
   --------------------------------------------------------------------------- */
.archfig { margin: 0; }
.archsvg { width: 100%; height: auto; display: block; }
/* Hidden on desktop, where the whole diagram is already visible. */
.archhint { display: none; align-items: center; gap: 7px; margin-top: 10px;
            font-size: 12px; color: var(--text-tertiary); }
.archhint svg { flex: none; }

/* Below ~760px an architecture drawing stops being readable when squeezed, so
   it scrolls in its own track rather than shrinking into illegibility.
   Measured at 375px: 29% of the diagram visible at a time.
   The scrolling was never the problem — NOTHING SAID IT SCROLLED. A fade at
   the trailing edge plus an explicit hint is the standard fix; forcing
   landscape is not available on the web (orientation.lock needs fullscreen and
   iOS Safari does not support it at all, and CSS-rotating content breaks
   scrolling, tap targets and screen readers). */
@media (max-width: 760px) {
  .archwrap { position: relative; }
  .archfig {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* the fade is painted by the wrapper, so it can't scroll away with content */
  }
  .archsvg { min-width: 1170px; }

  /* trailing-edge fade: the affordance that says "there is more this way" */
  .archwrap::after {
    content: "";
    position: absolute; top: 0; right: 0; bottom: 34px; width: 46px;
    background: linear-gradient(to right, transparent, var(--bg-primary) 85%);
    pointer-events: none;
  }
  .archhint { display: flex; }
}


/* zones + boundary */
.a-boundary { fill: rgba(167, 139, 250,.05); stroke: var(--brand); stroke-width: 2;
              stroke-dasharray: 8 6; opacity: 1; }
.a-zone { fill: var(--brand); font: 600 11px/1 ui-sans-serif, -apple-system, sans-serif;
          letter-spacing: .09em; }
.a-zone.dim { fill: #9fa8b4; }

/* boxes */
/* Solid values, not alpha: #161a21 measured 1.20:1 against the black page —
   the boxes did not separate from the background at all, and an rgba stroke
   at .26 composites to roughly 4:1, which reads as a smudge rather than an
   edge. These are ~2.9:1 fill and ~7:1 edge. */
.a-tile rect, .a-sys rect { fill: #272f3d; stroke: #616e85; stroke-width: 1.25; }
.a-gate { fill: rgba(167, 139, 250,.10); stroke: var(--brand); stroke-width: 2; }
.a-layer rect { fill: #253044; stroke: #5b6c8a; }
.a-layer.proof rect { fill: rgba(52,211,153,.16); stroke: rgba(52,211,153,.6); }
.a-eviq { fill: rgba(52,211,153,.10); stroke: rgba(52,211,153,.5); stroke-width: 1.5; }
.a-legend rect { fill: #1c222c; stroke: #4a5568; }

/* type */
.a-h  { fill: var(--text-primary); font: 600 15px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-h.sig { fill: #c7f5e2; }
.a-t  { fill: var(--text-primary); font: 600 13px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-s  { fill: #b3bccb; font: 400 11.5px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-lt { fill: #eaf2ff; font: 600 12px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-lt.sig { fill: #c7f5e2; }
.a-ls { fill: #a8c6ef; font: 400 11.5px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-ls.dim { fill: #9fa8b4; }
/* Annotation pills. Each leg of the diagram carries three different KINDS of
   guarantee, and three lines of identical grey text made them look like one
   run-on sentence. Colour separates them: blue = who, violet = what they may
   reach, green = what is written down. */
.a-pill rect { stroke-width: 1.25; }
.a-pill text { font: 500 11.5px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-pill.ident rect { fill: rgba(167, 139, 250,.16);  stroke: #4f9dff; }
.a-pill.ident text { fill: #bcd9ff; } .a-pill.ident circle { fill: #4f9dff; }
.a-pill.scope rect { fill: rgba(167,139,250,.16); stroke: #a78bfa; }
.a-pill.scope text { fill: #ddd2ff; } .a-pill.scope circle { fill: #a78bfa; }
.a-pill.proof rect { fill: rgba(52,211,153,.16);  stroke: #34d399; }
.a-pill.proof text { fill: #bff0dc; } .a-pill.proof circle { fill: #34d399; }
.a-more { fill: var(--brand); font: 500 11px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-chip { fill: #08131f; font: 800 10px/1 ui-sans-serif, -apple-system, sans-serif; text-anchor: middle; letter-spacing: .02em; }

/* annotated legs */
.a-flow  { stroke: var(--brand);  stroke-width: 2.2; fill: none; }
.a-flowg { stroke: var(--signal); stroke-width: 2.2; fill: none; }
.a-ann text { fill: #cbd5e1; font: 400 11.5px/1 ui-sans-serif, -apple-system, sans-serif; }
.a-num  { fill: var(--brand); }
.a-numg { fill: var(--signal); }
.a-numt { fill: #06203f; font: 700 11px/1 ui-sans-serif, -apple-system, sans-serif; text-anchor: middle; }

/* domain chips */
/* Scoped to beat `.a-sys rect` (0,1,1) — a bare `.c1` (0,1,0) loses to it and
   every chip silently inherited the box fill, leaving dark text on a dark chip. */
.a-sys rect.c1 { fill: #60a5fa } .a-sys rect.c2 { fill: #7dd3fc } .a-sys rect.c3 { fill: #fbbf24 }
.a-sys rect.c4 { fill: #f472b6 } .a-sys rect.c5 { fill: #fb923c } .a-sys rect.c6 { fill: #2dd4bf }
.a-sys rect[class^="c"] { stroke: none; }

/* caption */
.archcap { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
           margin-top: 14px; font-size: 12px; color: var(--text-tertiary); }
.archcap b { color: var(--text-primary); font-size: 13px; }
.archcap a { margin-left: auto; color: var(--brand); text-decoration: none; }

/* Control plane (Prava Loom). Drawn OUTSIDE the request path on purpose: it
   authors and heals connectors, it does not carry traffic. Violet rather than
   the data-plane blue so the two planes read as different things at a glance. */
.a-ctrl rect { fill: rgba(167,139,250,.10); stroke: #a78bfa; stroke-width: 1.5; }
.a-h.ctrl { fill: #ddd2ff; }
.a-pill.ctrl rect { fill: rgba(167,139,250,.18); stroke: #a78bfa; }
.a-pill.ctrl text { fill: #e4dbff; } .a-pill.ctrl circle { fill: #a78bfa; }
/* dashed: authoring is an out-of-band act, not a request */
.a-flowc { stroke: #a78bfa; stroke-width: 2; fill: none; stroke-dasharray: 5 4; }

/* Loom additions */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table.wide th, .comparison-table.wide td { white-space: normal; min-width: 130px; }
.comparison-table.wide .col-label { min-width: 190px; }
.loop-step code { color: var(--brand); }
.positioning { text-align: center; color: var(--text-secondary); font-size: 17px; max-width: 760px; margin: 28px auto 0; line-height: 1.6; }
.positioning em { color: var(--text-primary); font-style: normal; font-weight: 600; }
@media (max-width: 480px) {
  /* the shared sheet hides column 2 of comparison tables on phones; the wide landscape table scrolls instead */
  .comparison-table.wide th:nth-child(2), .comparison-table.wide td:nth-child(2) { display: table-cell; }
}