/* venya.ai site.css -- the rules the three dev/ pages share, extracted from their inline <style> blocks
   on 2026-10-30 under ruling 7 (c). Before this, dev/index.html, dev/tabichat.html and
   dev/venya-vs-nvidia-openshell-comparison.html each carried a copy of this block and had drifted apart;
   what a page does NOT share stays inline in that page, above this sheet in cascade order.
   Render-neutral by construction and by measurement: see the fingerprint gate in the commit notes. */



        /* ===== Sumi tokens carrying the owner's ruled palette -- the SAME values tabichat.dev ships
           (its site.css copies the :root block cited to /tabith/VENYA-WEBSITE-COLORS.md §2, which
           records that tabichat.dev uses the same colour scheme as venya.ai). Dark by ruling, so
           data-theme is pinned on <html>. Accents carry meaning: --s-primary is emphasis and good
           outcomes and stays OFF human-actor elements. No webfont is fetched: the two names below
           fall back to the local system stack, offline, as they do on tabichat.dev. ===== */
        :root,
        :root[data-theme="dark"] {
            --s-bg:            #282828;
            --s-surface:       #2d2d2d;
            --s-card:          #343434;
            --s-card-section:  #343434;
            --s-code-bg:       #343434;
            --s-border:        #494949;
            --s-border-strong: #545454;
            --s-text:          #eeeeee;
            --s-muted:         #b9b9b9;
            --s-primary:       #73cef4;
            --s-on-primary:    #282828;
            --s-success:       #9faa00;
            --s-danger:        #f43753;
            --s-font-body: "Inter", system-ui, sans-serif;
            --s-font-mono: "JetBrains Mono", ui-monospace, monospace;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { background: var(--s-bg); }
        body {
            background: var(--s-bg);
            color: var(--s-text);
            font-family: var(--s-font-body);
            font-weight: 300;
            line-height: 1.6;
            text-align: center;
        }
        main { max-width: 900px; margin: 0 auto; padding: 0 20px; }
        section { padding: 4rem 0; border-bottom: 1px solid var(--s-border); }
        section:last-of-type { border-bottom: none; }

        h1 {
            color: var(--s-text);
            font-size: 3rem;
            font-weight: 300;
            letter-spacing: 0.05em;
            margin-bottom: 1rem;
        }
        h1 .tm-symbol { font-size: 0.3333em; vertical-align: super; }
        h2 {
            color: var(--s-text);
            font-size: 1.75rem;
            font-weight: 300;
            letter-spacing: 0.04em;
            margin-bottom: 1.5rem;
        }
        h3 { color: var(--s-text); font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; }

        .hero { padding-top: 6rem; }
        /* hero lockup: the mark sits to the LEFT of the wordmark, the same form tabith.com/dev
           uses for its venya card - flex row, intrinsic image, fixed gap */
        .hero-lock { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-bottom: 1rem; }
        .hero-lock .hero-mark { display: block; width: auto; height: 4.5rem; margin: 0; flex: 0 0 auto; }
        .hero-lock h1 { margin-bottom: 0; }
        .tagline {
            color: var(--s-text);
            font-size: 1.25rem;
            letter-spacing: 0.04em;
            margin-bottom: 1.5rem;
        }
        .hero-sub {
            color: var(--s-muted);
            font-size: 1.05rem;
            max-width: 640px;
            margin: 0 auto 2.5rem;
        }
        .hero-sub strong { color: var(--s-text); font-weight: 500; }
        /* owner request 2026-10-30: the home hero paragraph reads justified. Scoped to
           #page-home because .hero-sub also exists on dev/tabichat.html and
           dev/venya-vs-nvidia-openshell-comparison.html, where it stays centred; keying it to
           the route keeps it home-only even after the future site.css extraction (§5.7 = c). */
        #page-home .hero-sub { text-align: justify; }

        .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
        .hero-video { display: flex; justify-content: center; margin-top: 2.5rem; }
        .hero-video iframe { max-width: 100%; }
        .cta-button {
            display: inline-block;
            padding: 12px 24px;
            background-color: var(--s-primary);
            color: var(--s-on-primary);
            font-size: 1rem;
            font-weight: 500;
            text-decoration: none;
            border-radius: 4px;
            border: 1px solid var(--s-primary);
            transition: background-color 0.2s, color 0.2s;
        }
        .cta-button:hover { background-color: var(--s-on-primary); border-color: var(--s-primary); color: var(--s-primary); }
        .cta-button.secondary { background-color: transparent; color: var(--s-text); border-color: var(--s-border-strong); }
        .cta-button.secondary:hover { background-color: var(--s-text); color: var(--s-on-primary); }

        .section-intro { max-width: 640px; margin: 0 auto 2rem; color: var(--s-muted); }
        .punchline { color: var(--s-text); font-size: 1.15rem; margin-top: 2rem; }

        .table-wrap { overflow-x: auto; }
        /* in-page anchor row, security page */
        .page-anchors { max-width: 720px; margin: 0 auto 1.5rem; font-size: 0.9rem; color: var(--s-muted); }
        .page-anchors a { white-space: nowrap; }
        .page-anchors .sep { color: var(--s-border-strong); padding: 0 0.4rem; }
        /* permalink marker in front of each security-page section header, so a reader can
           copy or mail a direct link to one section */
        .sec-permalink { color: var(--s-primary); font-weight: 400; text-decoration: none;
           font-size: 0.8em; margin-right: 0.35rem; }
        .sec-permalink:hover { text-decoration: underline; }
        /* long prose reads justified on owner request 2026-10-26. body is text-align:center in
           this page's own CSS and section-intro declared no alignment, so until now every prose
           paragraph was centred - ragged on both edges. The centred tagline, the short card
           blurbs, table cells and the footer keep their own alignment; the home hero paragraph
           moved to justified on 2026-10-30 (see #page-home .hero-sub above). */
        .section-intro,
        .notice-box p,
        details p { text-align: justify; }
        /* the same wide-table treatment the comparison page uses: fixed layout with declared
           column widths, run past the 900px reading column on wide viewports */
        .table-wrap.wide table { table-layout: fixed; min-width: 760px; }
        .table-wrap.wide td, .table-wrap.wide th { overflow-wrap: anywhere; }
        @media (min-width: 1000px) {
            .table-wrap.wide {
                width: calc(100% + 2 * min(260px, (100vw - 940px) / 2));
                margin-left: calc(-1 * min(260px, (100vw - 940px) / 2));
            }
        }
        table { width: 100%; border-collapse: collapse; font-size: 0.9rem; text-align: left; }
        th { color: var(--s-text); font-weight: 500; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--s-border-strong); }
        td { color: var(--s-muted); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--s-border); vertical-align: top; }

        .flow { display: flex; gap: 0.75rem; justify-content: center; align-items: stretch; flex-wrap: wrap; margin-bottom: 2.5rem; }
        .flow-box {
            border: 1px solid var(--s-border);
            border-radius: 6px;
            padding: 1rem 1.25rem;
            max-width: 250px;
            flex: 1 1 200px;
            text-align: left;
        }
        .flow-box ul { list-style: none; }
        .flow-box li { color: var(--s-muted); font-size: 0.85rem; }
        .flow-arrow { align-self: center; color: var(--s-border-strong); font-size: 1.5rem; }

        ol.steps { max-width: 640px; margin: 0 auto; text-align: left; padding-left: 1.25rem; }
        ol.steps li { color: var(--s-muted); margin-bottom: 0.75rem; font-size: 0.95rem; }
        ol.steps li strong { color: var(--s-text); font-weight: 500; }

        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; text-align: left; }
        .feature-item h3 { letter-spacing: 0.02em; }
        .feature-item p { color: var(--s-muted); font-size: 0.9rem; }

        details { max-width: 720px; margin: 0 auto 1rem; text-align: left; border-bottom: 1px solid var(--s-border); padding-bottom: 1rem; }
        summary { color: var(--s-text); font-size: 1rem; font-weight: 500; cursor: pointer; }
        details p { color: var(--s-muted); font-size: 0.95rem; margin-top: 0.75rem; }

        pre {
            background: var(--s-code-bg);
            border: 1px solid var(--s-border);
            border-radius: 6px;
            padding: 1rem 1.25rem;
            max-width: 760px;
            margin: 0 auto 1.5rem;
            overflow-x: auto;
            text-align: left;
            font-size: 0.8rem;
            color: var(--s-text);
            line-height: 1.5;
        }

        main a { color: var(--s-primary); }

        .notice-box {
            border: 1px solid var(--s-border-strong);
            border-radius: 6px;
            padding: 1.25rem 1.5rem;
            max-width: 720px;
            margin: 0 auto 1.5rem;
            text-align: left;
        }
        .notice-box p { color: var(--s-muted); font-size: 0.95rem; }
        .notice-box strong { color: var(--s-text); }

        /* max-width 900px matches main's column. Without it Sumi's body>footer cap is 72rem
           (1152px), wider than any content column on the page, so the centred text sat in a box
           that did not belong to the page and read off-centre. */
        footer { padding: 3rem 20px 2rem; text-align: center; font-size: 0.8rem; color: var(--s-muted); max-width: 900px; margin-left: auto; margin-right: auto; }
        footer .footer-links { margin-bottom: 0.5rem; }
        footer a { color: var(--s-muted); text-decoration: none; margin: 0 0.4rem; }
        footer a:hover { color: var(--s-primary); text-decoration: underline; }
        .tm-notice { font-size: 0.7rem; color: var(--s-muted); margin-top: 0.4rem; }
        /* The Tabith LLC mark, same three rules tabichat.dev keeps in its site.css: the mark is sized
           down from a 128px source and never upscaled, and the anchor is inline-block so the click
           target is the mark itself and not a full-width line of text. */
        .footer-mark { margin-block: 0 .9rem; }
        .footer-mark a { display: inline-block; }
        .footer-mark img { width: 96px; height: auto; }
        /* The footer reads as stacked rows, one item per row (owner's ruling 2026-10-28). Sumi gives
           every <p> a --s-flow bottom margin through :where(), and `footer a` carries 0.4rem of inline
           separator spacing that only ever made sense between items sharing a line -- with one link per
           row it would push that link off-centre. :where() adds no specificity, so these two lines
           settle both without !important. */
        .footer-links p { margin: 0.15rem 0; }
        .footer-links a { margin: 0; }

        @media (max-width: 768px) {
            h1 { font-size: 2rem; }
            .hero-lock .hero-mark { height: 3rem; }
            .hero-lock { gap: 0.9rem; }
            h2 { font-size: 1.4rem; }
            .tagline { font-size: 1rem; }
            .hero { padding-top: 4rem; }
            section { padding: 3rem 0; }
            .flow { flex-direction: column; align-items: center; }
            .flow-box { max-width: 100%; width: 100%; }
            .flow-arrow { transform: rotate(90deg); }
        }
    
        /* index-beta SPA additions */
        nav#menu {
            position: sticky; top: 0; z-index: 100;
            /* opaque --s-bg, exactly as tabichat.dev's nav.spa-bar; the old 5% alpha over pure
               black showed nothing, so dropping it keeps the bar and follows the ruled scheme */
            background: var(--s-bg);
            border-bottom: 1px solid var(--s-border);
            padding: 0.75rem 1rem;
            display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap;
        }
        nav#menu .brand { color: var(--s-text); font-weight: 500; letter-spacing: 0.05em; text-decoration: none; margin-right: 1rem; }
        /* the menu-bar mark is the same asset file as the hero mark, at nav scale; it carries no
           alt text because the wordmark beside it already names the brand */
        nav#menu .brand-mark { height: 1.5rem; width: auto; }
        nav#menu a.route { color: var(--s-muted); text-decoration: none; font-size: 0.9rem; letter-spacing: 0.03em; }
        nav#menu a.route:hover { color: var(--s-text); }
        nav#menu a.route.active { color: var(--s-text); font-weight: 500; }
        .page[hidden] { display: none; }
        .hero { padding-top: 4rem; }