/* ============================================================================
   Corporate AI 365 — public site.

   Shared by the landing page and the FAQ, privacy, blog and contact pages, so
   the four supporting pages inherit the same design language rather than
   drifting from it. Lives here rather than inline because five copies of a
   stylesheet is five places a token gets changed in four of them.

   Razor note: this file is plain CSS, so @ needs no doubling. It did inside
   the .cshtml it came from.
   ========================================================================== */
        :root {
            --ink: #0f172a;
            --ink-2: #334155;
            --muted: #64748b;
            --line: #e2e8f0;
            --brand: #0284c7;
            --brand-dark: #0369a1;
            --wash: #f8fafc;
        }

        * { box-sizing: border-box; }

        body {
            margin: 0;
            font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
            color: var(--ink);
            background: #fff;
            -webkit-font-smoothing: antialiased;
        }

        a { text-decoration: none; }
        .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

        /* ── nav ───────────────────────────────────────────────────────── */
        .nav {
            position: sticky; top: 0; z-index: 50;
            background: rgba(255,255,255,.92);
            backdrop-filter: saturate(180%) blur(12px);
            border-bottom: 1px solid var(--line);
        }
        /* The nav is sticky, so an in-page jump (#loop) would land with the heading tucked
           underneath it. Offsetting by the bar's own height keeps the target visible, and it has
           to track the two nav heights below rather than being a fixed guess. */
        html { scroll-padding-top: 84px; }

        .nav-in { display: flex; align-items: center; gap: 28px; height: 76px; }
        /* The wordmark SVG is 270×64, so width tracks height at ~4.2:1 — at 46px tall it lands
           around 194px wide. That fits comfortably above 900px, where the nav links are still
           shown. Below 900px the links collapse into the menu and the mark steps down with the
           bar, so it never crowds the sign-in link and the call to action on a phone.
           The bar grew with the logo rather than the mark filling its full height, which would
           read as cramped. */
        .nav-logo { display: flex; align-items: center; flex-shrink: 0; }
        .nav-logo img { height: 46px; width: auto; display: block; }
        .nav-links { display: flex; gap: 24px; margin-left: 12px; }
        .nav-links a { color: var(--ink-2); font-size: 14px; font-weight: 500; }
        .nav-links a:hover { color: var(--brand); }
        .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }

        .btn-p {
            background: var(--brand); color: #fff; border: 1px solid var(--brand);
            padding: 11px 22px; border-radius: 6px; font-weight: 600; font-size: 14.5px;
            display: inline-block; transition: background .15s;
        }
        .btn-p:hover { background: var(--brand-dark); color: #fff; }
        .btn-o {
            background: #fff; color: var(--ink); border: 1px solid #cbd5e1;
            padding: 11px 22px; border-radius: 6px; font-weight: 600; font-size: 14.5px;
            display: inline-block;
        }
        .btn-o:hover { border-color: var(--brand); color: var(--brand); }
        .link-q { color: var(--ink-2); font-size: 14px; font-weight: 600; }
        .link-q:hover { color: var(--brand); }

        /* ── hero ──────────────────────────────────────────────────────── */
        .hero { padding: 76px 0 64px; background: linear-gradient(180deg,#f0f9ff 0%,#fff 100%); }
        .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
        .eyebrow {
            display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--brand); margin-bottom: 16px;
        }
        h1 { font-size: 46px; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 18px; font-weight: 800; }
        .lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 28px; }
        .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
        .note { font-size: 13.5px; color: var(--muted); margin-top: 16px; }
        .note i { color: #16a34a; }

        /* the product mock — a real pinpoint, because that is the product */
        .mock { border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 45px rgba(15,23,42,.10); overflow: hidden; background: #fff; }
        .mock-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f1f5f9; border-bottom: 1px solid var(--line); }
        .dot { width: 10px; height: 10px; border-radius: 50%; }
        .mock-title { margin-left: 10px; font-size: 12px; color: var(--muted); font-weight: 600; }
        .mock-body { padding: 18px; }
        .pin { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
        .pin-badge { background: #dcfce7; color: #15803d; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
        .pin-t { font-size: 13.5px; font-weight: 600; }
        .pin-s { font-size: 12.5px; color: var(--muted); }
        .code { background: #0f172a; border-radius: 8px; padding: 14px 16px; font-family: ui-monospace,Menlo,Consolas,monospace; font-size: 12.5px; line-height: 1.75; overflow-x: auto; }
        .code .ln { color: #475569; margin-right: 14px; user-select: none; }
        .code .n { color: #cbd5e1; display: block; white-space: pre; }
        .code .hl { background: rgba(250,204,21,.14); border-left: 2px solid #facc15; margin-left: -16px; padding-left: 14px; display: block; white-space: pre; }
        .code .k { color: #7dd3fc; }
        .code .s { color: #86efac; }
        .code .c { color: #64748b; }

        /* ── sections ──────────────────────────────────────────────────── */
        section { padding: 76px 0; }
        .band { background: var(--wash); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .h2 { font-size: 33px; line-height: 1.2; letter-spacing: -.015em; font-weight: 800; margin: 0 0 14px; }
        .sub { font-size: 16.5px; color: var(--ink-2); max-width: 660px; margin: 0 0 44px; line-height: 1.6; }
        .center { text-align: center; }
        .center .sub { margin-left: auto; margin-right: auto; }

        .cards { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
        .card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 26px 22px; }
        .card i { font-size: 24px; color: var(--brand); }
        .card h3 { font-size: 16px; font-weight: 700; margin: 14px 0 8px; }
        .card p { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0; }

        .split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
        .split + .split { margin-top: 76px; }
        .split h3 { font-size: 25px; font-weight: 800; margin: 10px 0 14px; letter-spacing: -.01em; }
        .split p { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; }
        .ticks { list-style: none; padding: 0; margin: 20px 0 0; }
        .ticks li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 11px; line-height: 1.55; }
        .ticks i { color: #16a34a; font-size: 17px; flex-shrink: 0; }

        .flow { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; }
        .step { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
        .step:last-child { border-bottom: 0; }
        .step-n { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .step-t { font-size: 14.5px; font-weight: 650; }
        .step-s { font-size: 13px; color: var(--muted); }

        /* ── the delivery loop ─────────────────────────────────────────── */
        .loop-wrap { max-width: 1000px; margin: 0 auto; }
        .loop-svg { width: 100%; height: auto; display: block; overflow: visible; }

        .loop-track { fill: none; stroke: #cbd5e1; stroke-width: 2; }

        /* The travelling arc. One dash long enough to read as motion rather than as a dot, on a
           gap the length of the remaining path (ellipse circumference ~1567 at this radius). */
        .loop-pulse {
            fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round;
            stroke-dasharray: 210 1357;
            animation: loop-travel 9s linear infinite;
        }
        @keyframes loop-travel { to { stroke-dashoffset: -1567; } }

        .node .disc { fill: #fff; stroke: var(--brand); stroke-width: 2; }
        .node .halo {
            fill: var(--brand); opacity: 0;
            transform-box: fill-box; transform-origin: center;
            /* Six stages over the 9s the arc takes to travel: each lights as it is reached. */
            animation: loop-lift 9s ease-in-out infinite;
            animation-delay: calc(var(--i) * 1.5s);
        }
        @keyframes loop-lift {
            0%   { opacity: 0;   transform: scale(.8); }
            6%   { opacity: .22; transform: scale(1.14); }
            17%  { opacity: 0;   transform: scale(.8); }
            100% { opacity: 0;   transform: scale(.8); }
        }

        .node .num { font-size: 14px; font-weight: 800; fill: var(--brand); }
        .lbl { font-size: 17px; font-weight: 750; fill: var(--ink); letter-spacing: -.01em; }
        .cap { font-size: 13.5px; fill: var(--muted); }
        .loop-mid-1 { font-size: 19px; font-weight: 800; fill: var(--ink); letter-spacing: -.01em; }
        .loop-mid-2 { font-size: 19px; font-weight: 800; fill: var(--brand); letter-spacing: -.01em; }

        /* Motion here is decoration; the diagram reads identically without it. Honouring this is
           not optional — vestibular disorders make looping motion genuinely unpleasant. */
        @media (prefers-reduced-motion: reduce) {
            .loop-pulse { animation: none; stroke-dasharray: none; opacity: .55; }
            .node .halo { animation: none; opacity: .16; }
        }

        /* The stacked equivalent, shown only where the ring would be too small to read. */
        .loop-list { display: none; list-style: none; padding: 0; margin: 0; }
        .loop-list li { display: flex; gap: 16px; align-items: flex-start; position: relative; padding: 0 0 26px 0; }
        .loop-list li:not(:last-child)::before {
            content: ""; position: absolute; left: 17px; top: 36px; bottom: 0;
            width: 2px; background: #cbd5e1;
        }
        .ln-n {
            width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
            border: 2px solid var(--brand); background: #fff; color: var(--brand);
            font-size: 14px; font-weight: 800;
            display: flex; align-items: center; justify-content: center;
        }
        .loop-list strong { display: block; font-size: 16px; font-weight: 750; margin-bottom: 3px; }
        .loop-list span { font-size: 14px; color: var(--muted); line-height: 1.55; }
        .loop-list .loop-back i {
            width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
            background: var(--brand); color: #fff; font-size: 18px;
            display: flex; align-items: center; justify-content: center;
        }

        /* ── scroll reveal ─────────────────────────────────────────────────
           Progressive enhancement, and the order matters: the hidden state is
           applied only when the inline script has set .js on <html>. Without it,
           a JS failure would leave a blank page rather than a static one — which
           is the difference between "no animation" and "no product". */
        .js .reveal { opacity: 0; transform: translateY(20px); }
        .js .reveal.in {
            opacity: 1; transform: none;
            transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
        }
        .js .reveal.d1.in { transition-delay: .07s; }
        .js .reveal.d2.in { transition-delay: .14s; }
        .js .reveal.d3.in { transition-delay: .21s; }
        .js .reveal.d4.in { transition-delay: .28s; }

        @media (prefers-reduced-motion: reduce) {
            .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
        }

        /* ── nav, once scrolled ────────────────────────────────────────── */
        .nav.stuck { box-shadow: 0 6px 24px rgba(15,23,42,.07); }

        /* ── role consoles ─────────────────────────────────────────────── */
        .roles-tabs {
            display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
            margin: 0 0 34px;
        }
        .role-tab {
            display: flex; align-items: center; gap: 10px;
            background: #fff; border: 1px solid var(--line); border-radius: 999px;
            padding: 10px 20px; font-size: 14.5px; font-weight: 650; color: var(--ink-2);
            cursor: pointer; transition: border-color .2s, color .2s, box-shadow .2s, transform .2s;
            font-family: inherit;
        }
        .role-tab i { font-size: 17px; color: var(--muted); transition: color .2s; }
        .role-tab:hover { border-color: #94a3b8; transform: translateY(-1px); }
        .role-tab[aria-selected="true"] {
            border-color: var(--brand); color: var(--brand);
            box-shadow: 0 6px 18px rgba(2,132,199,.16);
        }
        .role-tab[aria-selected="true"] i { color: var(--brand); }

        .role-panel { display: none; }
        .role-panel.on { display: block; animation: panel-in .45s cubic-bezier(.16,1,.3,1); }
        @keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
        @media (prefers-reduced-motion: reduce) { .role-panel.on { animation: none; } }

        .role-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
        .role-grid h3 { font-size: 26px; font-weight: 800; letter-spacing: -.015em; margin: 8px 0 12px; }
        .role-grid p { font-size: 15.5px; color: var(--ink-2); line-height: 1.7; margin: 0 0 18px; }

        /* the in-product mockups — HTML rather than screenshots, so they stay sharp
           on any display and restyle with the brand instead of being re-exported */
        .ui { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden;
              box-shadow: 0 24px 60px rgba(15,23,42,.12); }
        .ui-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #f1f5f9; border-bottom: 1px solid var(--line); }
        .ui-title { margin-left: 10px; font-size: 12px; color: var(--muted); font-weight: 650; }
        .ui-body { padding: 18px; }
        .ui-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; margin-bottom: 9px; background: #fff; }
        .ui-row:last-child { margin-bottom: 0; }
        .ui-row .t { font-size: 13.5px; font-weight: 650; }
        .ui-row .s { font-size: 12px; color: var(--muted); }
        .ui-row .grow { flex: 1; min-width: 0; }
        .chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
        .chip.blue { background: #e0f2fe; color: #0369a1; }
        .chip.green { background: #dcfce7; color: #15803d; }
        .chip.amber { background: #fef3c7; color: #b45309; }
        .chip.slate { background: #f1f5f9; color: #475569; }
        .chip.red { background: #fee2e2; color: #b91c1c; }
        .ui-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 14px; }
        .kpi { border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
        .kpi .n { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
        .kpi .l { font-size: 11.5px; color: var(--muted); font-weight: 600; }
        .ui-field { border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
        .ui-btn { background: var(--brand); color: #fff; font-size: 13px; font-weight: 650; padding: 9px 16px; border-radius: 7px; display: inline-block; }
        .ui-btn.ghost { background: #fff; color: var(--ink-2); border: 1px solid var(--line); }
        .bar { height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
        .bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

        /* ── capability cards, upgraded ────────────────────────────────── */
        .card {
            transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
            position: relative;
        }
        .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.09); border-color: #cbd5e1; }
        .card .ico {
            width: 46px; height: 46px; border-radius: 12px;
            background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
            border: 1px solid #bae6fd;
            display: flex; align-items: center; justify-content: center;
        }
        .card .ico i { font-size: 22px; color: var(--brand); }

        /* ── faq accordion ─────────────────────────────────────────────── */
        details.qa { border-bottom: 1px solid var(--line); padding: 0; }
        details.qa summary {
            list-style: none; cursor: pointer; padding: 22px 0;
            display: flex; align-items: center; gap: 14px;
            font-size: 16.5px; font-weight: 700;
        }
        details.qa summary::-webkit-details-marker { display: none; }
        details.qa summary::after {
            content: "\ea4e"; font-family: remixicon; margin-left: auto;
            font-size: 20px; color: var(--muted); font-weight: 400;
            transition: transform .25s ease;
        }
        details.qa[open] summary::after { transform: rotate(180deg); }
        details.qa summary:hover { color: var(--brand); }
        details.qa .a { padding: 0 0 22px; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0; max-width: 760px; }
        details.qa[open] .a { animation: panel-in .35s cubic-bezier(.16,1,.3,1); }

        /* ── pricing ───────────────────────────────────────────────────── */
        .tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; align-items: start; }
        .tier { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px 26px; }
        .tier.pop { border: 2px solid var(--brand); box-shadow: 0 14px 36px rgba(2,132,199,.13); position: relative; }
        .tier-tag { position: absolute; top: -12px; left: 26px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 4px 12px; border-radius: 20px; }
        .tier h3 { font-size: 18px; font-weight: 750; margin: 0 0 6px; }
        .tier .who { font-size: 13.5px; color: var(--muted); min-height: 38px; }
        .price { font-size: 34px; font-weight: 800; margin: 12px 0 4px; letter-spacing: -.02em; }
        .price small { font-size: 14px; font-weight: 500; color: var(--muted); }
        .tier ul { list-style: none; padding: 0; margin: 20px 0 24px; }
        .tier li { display: flex; gap: 9px; font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
        .tier li i { color: #16a34a; font-size: 16px; flex-shrink: 0; }
        .tier .btn-p, .tier .btn-o { width: 100%; text-align: center; }

        /* ── faq ───────────────────────────────────────────────────────── */
        .faq { max-width: 800px; margin: 0 auto; }
        .qa { border-bottom: 1px solid var(--line); padding: 22px 0; }
        .qa h4 { font-size: 16px; font-weight: 700; margin: 0 0 9px; }
        .qa p { font-size: 14.5px; color: var(--ink-2); line-height: 1.65; margin: 0; }

        /* ── final + footer ────────────────────────────────────────────── */
        .final { background: linear-gradient(135deg,#0f172a 0%,#0c4a6e 100%); color: #fff; text-align: center; }
        .final .h2 { color: #fff; }
        .final p { color: #cbd5e1; font-size: 17px; max-width: 620px; margin: 0 auto 30px; line-height: 1.6; }
        .final .btn-o { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
        .final .btn-o:hover { background: rgba(255,255,255,.1); color: #fff; }

        footer { padding: 34px 0; border-top: 1px solid var(--line); }
        /* Kept a step below the nav mark — the footer repeats the brand, it does not lead with it. */
        .foot-logo img { height: 40px; width: auto; display: block; margin-bottom: 14px; }
        .foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
        .foot span { font-size: 13.5px; color: var(--muted); }
        .foot a { font-size: 13.5px; color: var(--muted); }
        .foot a:hover { color: var(--brand); }
        .foot .right { margin-left: auto; display: flex; gap: 18px; }

        @media (max-width: 900px) {
            .hero-grid, .split { grid-template-columns: 1fr; gap: 36px; }
            .cards { grid-template-columns: repeat(2,1fr); }
            .tiers { grid-template-columns: 1fr; }
            .nav-links { display: none; }
            /* Links are in the menu from here down, so the bar holds only the logo, Sign in and
               the CTA. Still stepped back from the desktop size: 40px keeps the mark prominent
               without pushing the call to action toward the edge on a 400px screen. */
            .nav-in { height: 68px; }
            .nav-logo img { height: 40px; }
            html { scroll-padding-top: 76px; }
            h1 { font-size: 34px; }
            .h2 { font-size: 27px; }
            section { padding: 54px 0; }

            .loop-svg { display: none; }
            .loop-list { display: block; }

            .role-grid { grid-template-columns: 1fr; gap: 30px; }
            .role-tab { padding: 9px 15px; font-size: 13.5px; }
            .ui-kpis { grid-template-columns: repeat(3,1fr); gap: 8px; }
            .kpi .n { font-size: 19px; }

            /* Footer links render ~20px tall from their line-box alone, which is half the
               comfortable touch target and they sit in a row inches from each other. */
            .foot a { display: inline-block; padding: 10px 0; }
            .foot .right { gap: 22px; }
        }

        /* The narrowest phones still in use. The nav fits at 360 with nothing to spare, so below
           that the wordmark steps down rather than colliding with the call to action. */
        @media (max-width: 359px) {
            .nav-logo img { height: 32px; }
            .wrap { padding: 0 16px; }
            .btn-p, .btn-o { padding: 10px 16px; font-size: 13.5px; }
        }

/* ── public sub-pages (FAQ, privacy, blog, contact) ────────────────────────
   Everything below is shared by the four supporting pages. They inherit the
   landing page's tokens above, so a brand change lands on all five at once. */

.page-head {
    padding: 64px 0 44px;
    background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
    border-bottom: 1px solid var(--line);
}
.page-head h1 { font-size: 40px; line-height: 1.14; margin: 0 0 14px; }
.page-head .lede { max-width: 700px; margin: 0; }
.crumb { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; display: block; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--brand); }

/* Long-form text. Measure capped near 70 characters — past that the eye loses
   the start of the next line, which is most of why policy pages feel unreadable. */
.prose { max-width: 760px; }
.prose h2 { font-size: 22px; font-weight: 750; letter-spacing: -.01em; margin: 40px 0 12px; }
.prose h3 { font-size: 17px; font-weight: 700; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.prose p { margin: 0 0 14px; }
.prose ul { padding-left: 20px; margin: 0 0 16px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 700; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.prose td { color: var(--ink-2); }

.callout {
    border: 1px solid #bae6fd; background: #f0f9ff; border-radius: 10px;
    padding: 16px 18px; margin: 0 0 22px;
}
.callout p { margin: 0; font-size: 14.5px; }
.callout.warn { border-color: #fed7aa; background: #fff7ed; }

/* ── blog ─────────────────────────────────────────────────────────────── */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
}
.post:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.09); border-color: #cbd5e1; }
.post-art { height: 132px; display: flex; align-items: center; justify-content: center; }
.post-art i { font-size: 40px; color: #fff; opacity: .9; }
.post-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.post h3 { font-size: 17px; font-weight: 750; line-height: 1.35; margin: 10px 0 8px; color: var(--ink); }
.post p { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.post-meta { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.post-more { font-size: 14px; font-weight: 650; color: var(--brand); }

.empty-state { text-align: center; padding: 56px 0; }
.empty-state i { font-size: 34px; color: var(--brand); }
.empty-state h3 { font-size: 19px; font-weight: 750; margin: 14px 0 8px; }
.empty-state p { color: var(--muted); font-size: 15px; max-width: 460px; margin: 0 auto; }

/* ── contact ──────────────────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.channels { display: grid; gap: 14px; }
.channel {
    display: flex; gap: 14px; align-items: flex-start;
    border: 1px solid var(--line); border-radius: 12px; padding: 20px;
    transition: border-color .2s, box-shadow .2s;
}
.channel:hover { border-color: #bae6fd; box-shadow: 0 10px 26px rgba(15,23,42,.06); }
.channel .ico {
    width: 42px; height: 42px; border-radius: 11px; flex-shrink: 0;
    background: linear-gradient(135deg, #e0f2fe, #f0f9ff); border: 1px solid #bae6fd;
    display: flex; align-items: center; justify-content: center;
}
.channel .ico i { font-size: 20px; color: var(--brand); }
.channel h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 5px; }
.channel p { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin: 0 0 6px; }
.channel a { color: var(--brand); font-size: 14px; font-weight: 650; }

.form-card { border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: 0 18px 45px rgba(15,23,42,.07); }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; color: var(--ink); }
.field input, .field textarea, .field select {
    width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 11px 13px;
    font-size: 14.5px; font-family: inherit; color: var(--ink); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(2,132,199,.14);
}
.field textarea { resize: vertical; min-height: 120px; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.form-card .btn-p { width: 100%; text-align: center; border: 0; cursor: pointer; font-family: inherit; }

@media (max-width: 900px) {
    .page-head h1 { font-size: 30px; }
    .page-head { padding: 44px 0 32px; }
    .posts { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 34px; }
    .form-card { padding: 22px; }
}

@media (max-width: 900px) {
    /* Inline links inside the contact channels render ~19px tall from their line-box, which is
       under half a comfortable touch target. */
    .channel a, .prose a { display: inline-block; padding: 7px 0; }

    /* A three-column policy table cannot fit 390px. Scroll it inside its own box rather than
       letting it push the whole page sideways — the page must never scroll horizontally. */
    .prose table { display: block; overflow-x: auto; white-space: nowrap; }
    .prose td, .prose th { white-space: normal; min-width: 130px; }
}

/* ── pricing, rebuilt ──────────────────────────────────────────────────── */
.tiers { align-items: stretch; }
.tier {
    display: flex; flex-direction: column; padding: 32px 28px;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
}
.tier:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(15,23,42,.10); }
.tier.pop { border-width: 2px; }
.tier.pop::before {
    content: ""; position: absolute; inset: -2px -2px auto -2px; height: 4px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, #0ea5e9, #16a34a);
}
.tier-tag { letter-spacing: .07em; }
.tier h3 { font-size: 20px; }
.tier .who { min-height: 44px; font-size: 14px; line-height: 1.5; }

.price-row { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 2px; }
.price { font-size: 38px; margin: 0; line-height: 1; }
.price.quiet { font-size: 27px; }
.price-note { font-size: 13px; color: var(--muted); margin: 0 0 4px; min-height: 19px; }

.tier ul { margin: 22px 0 26px; flex: 1; }
.tier li { align-items: flex-start; line-height: 1.5; margin-bottom: 12px; }
.tier li i { margin-top: 2px; }
.tier li strong { color: var(--ink); font-weight: 650; }

/* Everything common to every plan, said once instead of repeated in three lists — three
   identical rows of ticks is how a pricing table stops being read at all. */
.tier-common {
    margin-top: 30px; border: 1px solid var(--line); border-radius: 12px;
    background: #fff; padding: 22px 26px;
}
.tier-common h4 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.tier-common ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 22px; }
.tier-common li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.tier-common li i { color: #16a34a; font-size: 16px; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 900px) {
    .tier-common ul { grid-template-columns: 1fr; }
    .tier { padding: 26px 22px; }
    .price { font-size: 32px; }
}

/* ── billing term toggle ───────────────────────────────────────────────── */
.term-toggle {
    display: inline-flex; gap: 4px; margin: 0 auto 34px; padding: 5px;
    background: #f1f5f9; border: 1px solid var(--line); border-radius: 999px;
}
.term {
    border: 0; background: transparent; font-family: inherit; cursor: pointer;
    padding: 9px 20px; border-radius: 999px; font-size: 14px; font-weight: 650;
    color: var(--ink-2); display: flex; align-items: center; gap: 8px;
    transition: background .18s, color .18s, box-shadow .18s;
}
.term:hover { color: var(--ink); }
.term.is-on { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(15,23,42,.10); }
.term .save {
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
    background: #dcfce7; color: #15803d; padding: 3px 8px; border-radius: 999px;
}
.price .cur { font-size: 22px; font-weight: 700; vertical-align: super; margin-right: 2px; }
.per { font-size: 14px; color: var(--muted); font-weight: 600; }

/* The pricing block is centred, but .tiers is a grid — so the toggle needs its own
   centring row rather than inheriting one. */
#pricing .term-toggle { display: flex; width: max-content; }

@media (max-width: 900px) {
    .term-toggle { flex-wrap: wrap; justify-content: center; width: 100% !important; }
    .term { padding: 9px 14px; font-size: 13px; }
    .term .save { display: none; }
}

/* Loop node glyphs. Stroke-only so they inherit the brand colour and stay crisp at any scale;
   vector-effect keeps the stroke weight constant when the whole ring scales down. */
.node .glyph { fill: none; stroke: var(--brand); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lbl-n { fill: var(--brand); font-weight: 800; }

/* ── connectors ───────────────────────────────────────────────────────── */
.conns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.conn {
    border: 1px solid var(--line); border-radius: 12px; background: #fff;
    padding: 26px 16px; text-align: center;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .25s;
}
.conn:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15,23,42,.08); border-color: #cbd5e1; }
.conn i { font-size: 40px; line-height: 1; display: block; margin-bottom: 12px; }
.conn h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.conn p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.45; }
.conn.soon { border-style: dashed; background: transparent; }
.conn.soon i, .conn.soon h3 { color: var(--muted); }

/* ── face off ─────────────────────────────────────────────────────────── */
.fo-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.fo-scores { display: grid; gap: 10px; }
.fo-row {
    display: grid; grid-template-columns: 150px 1fr 52px; gap: 14px; align-items: center;
    border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; background: #fff;
}
.fo-who { font-size: 13.5px; font-weight: 650; }
.fo-who span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; }
.fo-bar { height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.fo-bar > span { display: block; height: 100%; border-radius: 999px; }
.fo-val { font-size: 15px; font-weight: 800; text-align: right; }
.fo-verdict {
    margin-top: 14px; border: 1px solid #bae6fd; background: #f0f9ff;
    border-radius: 12px; padding: 16px 18px;
}
.fo-verdict h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin: 0 0 7px; font-weight: 700; }
.fo-verdict p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.6; }

@media (max-width: 900px) {
    .conns { grid-template-columns: repeat(2, 1fr); }
    .fo-grid { grid-template-columns: 1fr; gap: 32px; }
    .fo-row { grid-template-columns: 116px 1fr 44px; gap: 10px; padding: 11px 12px; }
}

/* ── hero backdrop ────────────────────────────────────────────────────────
   Built rather than photographed. A stock photo behind a hero fights the
   headline for contrast and dates the page the moment the positioning moves;
   this is three soft colour fields over a faint grid, so the type stays on a
   near-white ground and the whole thing rescales to any viewport for free. */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }

.hero::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(58% 48% at 82% 18%, rgba(14,165,233,.16), transparent 62%),
        radial-gradient(46% 44% at 12% 34%, rgba(22,163,74,.11), transparent 64%),
        radial-gradient(40% 40% at 62% 96%, rgba(2,132,199,.10), transparent 66%);
}

/* A 40px grid, faded out towards the bottom so it never competes with the copy. */
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(15,23,42,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15,23,42,.045) 1px, transparent 1px);
    background-size: 40px 40px;
    -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
    mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}

/* The product panel lifts off that ground rather than sitting flat on it. */
.hero .ui { box-shadow: 0 30px 70px rgba(15,23,42,.16); }

/* ── hero photograph ──────────────────────────────────────────────────────
   The robot sits on the RIGHT of the source image and the copy sits on the
   LEFT, so the scrim is a horizontal gradient rather than a flat wash: near
   solid white under the headline, clearing towards the right where the image
   earns its place behind the product panel.

   A flat overlay would have forced a choice between a readable headline and a
   visible photograph. This gets both. */
.hero { background-image: url('/assets/images/hero-fde.jpg'); background-size: cover; background-position: 72% center; }

.hero::before {
    background:
        linear-gradient(100deg,
            rgba(255,255,255,.985) 0%,
            rgba(255,255,255,.965) 34%,
            rgba(255,255,255,.86)  50%,
            rgba(240,249,255,.62)  68%,
            rgba(224,242,254,.42)  100%),
        radial-gradient(58% 48% at 82% 18%, rgba(14,165,233,.14), transparent 62%),
        radial-gradient(46% 44% at 12% 34%, rgba(22,163,74,.09), transparent 64%);
}

/* The grid would read as noise on top of a photograph. */
.hero::after { opacity: .35; }

@media (max-width: 900px) {
    /* Stacked, so the copy sits directly over the image — the scrim goes
       near-opaque rather than gambling on where the robot lands. */
    .hero { background-image: url('/assets/images/hero-fde-sm.jpg'); background-position: 76% center; }
    .hero::before {
        background:
            linear-gradient(180deg,
                rgba(255,255,255,.985) 0%,
                rgba(255,255,255,.97)  52%,
                rgba(240,249,255,.80)  100%);
    }
    .hero::after { opacity: .2; }
}

/* Honour a data-saver preference: the gradient alone still looks deliberate. */
@media (prefers-reduced-data: reduce) {
    .hero { background-image: none; }
}

/* ── mobile navigation ────────────────────────────────────────────────────
   The nav links were simply hidden below 900px, which meant FAQ, Blog,
   Contact and Privacy were reachable on a phone only by scrolling to the
   footer. On a marketing site that is most of the traffic. */
.nav-burger {
    display: none; margin-left: 14px; border: 1px solid var(--line); background: #fff;
    width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
    align-items: center; justify-content: center; font-size: 22px; color: var(--ink);
    font-family: inherit; flex-shrink: 0;
}
.nav-burger:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 900px) {
    .nav-burger { display: flex; }
    .nav-cta .link-q { display: none; }

    .nav-links {
        display: none; position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; gap: 0; margin: 0; padding: 8px 24px 16px;
        background: rgba(255,255,255,.98); backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--line); box-shadow: 0 14px 30px rgba(15,23,42,.10);
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
    .nav-links a:last-child { border-bottom: 0; }
}

/* Below 380 the wordmark plus a CTA plus the burger is genuinely tight. */
@media (max-width: 379px) {
    .nav-cta .btn-p { padding: 9px 12px; font-size: 13px; }
    .nav-burger { width: 38px; height: 38px; margin-left: 8px; }
}

/* ── back to top ──────────────────────────────────────────────────────────
   Hidden until there is something to scroll back from, so it never covers
   content on a short page. visibility rather than display so it can fade. */
.to-top {
    position: fixed; right: 24px; bottom: 24px; z-index: 60;
    width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--brand); color: #fff; font-size: 22px; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(2,132,199,.34);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .25s, transform .25s, visibility .25s, background .18s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand-dark); }
.to-top:focus-visible { outline: 3px solid rgba(2,132,199,.4); outline-offset: 3px; }

@media (max-width: 900px) {
    .to-top { right: 16px; bottom: 16px; width: 42px; height: 42px; font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .to-top { transition: none; }
}

/* ── back to top: centred ─────────────────────────────────────────────────
   translateX(-50%) is doing the centring, so the show/hide slide has to ride
   in the same transform — a second declaration would replace it and the button
   would jump to the right edge mid-animation. */
.to-top { left: 50%; right: auto; transform: translate(-50%, 10px); }
.to-top.show { transform: translate(-50%, 0); }
@media (max-width: 900px) { .to-top { right: auto; } }

/* ── face off, rebuilt for scanning ───────────────────────────────────────
   The previous version was five bullets and a paragraph beside a chart. A
   business reader does not read five bullets to find out what a feature is —
   they look at the picture. One statement, then the picture, then the verdict. */
.fo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 20px; }
.fo-card {
    border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 26px 24px;
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.fo-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,23,42,.09); }
.fo-card .rank { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.fo-card .name { font-size: 18px; font-weight: 750; margin: 6px 0 2px; }
.fo-card .meta { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.fo-card .score { font-size: 52px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.fo-card .outof { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 4px; }
.fo-card .bar { height: 9px; border-radius: 999px; background: #e2e8f0; overflow: hidden; margin-top: 16px; }
.fo-card .bar > span { display: block; height: 100%; border-radius: 999px; }
.fo-card .note { font-size: 13px; font-weight: 600; margin-top: 12px; display: flex; align-items: center; gap: 6px; }

.fo-band {
    border: 1px solid #bae6fd; background: linear-gradient(135deg, #f0f9ff, #ecfdf5);
    border-radius: 16px; padding: 26px 30px;
    display: flex; gap: 20px; align-items: flex-start;
}
.fo-band .ai {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, #0ea5e9, #16a34a); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.fo-band h4 { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; font-weight: 700; }
.fo-band p { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0; }
.fo-band strong { font-weight: 750; }

.fo-scope { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.fo-scope span {
    font-size: 13.5px; font-weight: 650; color: var(--ink-2);
    border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 18px;
}

@media (max-width: 900px) {
    .fo-cards { grid-template-columns: 1fr; gap: 14px; }
    .fo-card { padding: 20px; }
    .fo-card .score { font-size: 42px; }
    .fo-band { flex-direction: column; gap: 14px; padding: 22px; }
    .fo-band p { font-size: 15.5px; }
}

/* ── section icons ────────────────────────────────────────────────────────
   One chip above each section heading, so a reader scrolling fast can tell the
   sections apart before reading a word. Same gradient chip as the capability
   cards, sized up — a second icon style would just be noise. */
.sec-ico {
    width: 56px; height: 56px; border-radius: 16px; margin: 0 0 18px;
    background: linear-gradient(135deg, #e0f2fe, #ecfdf5);
    border: 1px solid #bae6fd;
    display: flex; align-items: center; justify-content: center;
}
.sec-ico i { font-size: 27px; color: var(--brand); }
.center .sec-ico { margin-left: auto; margin-right: auto; }

/* Inline icon in front of an eyebrow, for the split sections that have no chip. */
.eyebrow i { margin-right: 6px; font-size: 14px; vertical-align: -1px; }

/* Plan icons sit beside the plan name rather than above it — a pricing card is
   already a tall column and another stacked element pushes the price down. */
.tier h3 { display: flex; align-items: center; gap: 9px; }
.tier h3 i { font-size: 19px; color: var(--brand); }

.final .sec-ico { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); }
.final .sec-ico i { color: #fff; }

@media (max-width: 900px) {
    .sec-ico { width: 48px; height: 48px; border-radius: 13px; margin-bottom: 14px; }
    .sec-ico i { font-size: 23px; }
}