/*
 * Agent200 — base styles.
 *
 * Tailwind utilities do the layout, spacing, type and colour work in the templates.
 * This file only holds what utilities don't express well: document defaults, focus
 * treatment, code tokens, motion primitives and a few diagram details.
 */

:root {
    --paper: #FAFAF8;
    --ink-950: #0A0D0C;
    --ink-800: #1D2220;
    --ink-500: #6C746E;
    --ok-400: #36CD81;
    --ok-500: #12B368;
    --ok-700: #087344;
    --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
    --header-h: 3.5rem;
}

/* ---------------------------------------------------------------- Document */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink-950);
    font-family: Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

::selection {
    background: var(--ok-400);
    color: var(--ink-950);
}

/* Consistent page gutter. */
.shell {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 640px) {
    .shell { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
    .shell { padding-inline: 2.5rem; }
}

/* ---------------------------------------------------------------- Focus */

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--ok-500);
    outline-offset: 3px;
    border-radius: 6px;
}

.btn:focus-visible { border-radius: 9999px; }

/* Form status messages take focus from script so they are read out; they are not controls. */
[data-form-status]:focus-visible { outline: none; }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: 0.625rem 1rem;
    border-radius: 9999px;
    background: var(--ink-950);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    transition: top 160ms var(--ease-settle);
}

.skip-link:focus { top: 0.75rem; }

/* ---------------------------------------------------------------- Buttons */

/* Feedback lives on the press, and it is instant. */
.btn {
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 220ms var(--ease-settle);
    -webkit-tap-highlight-color: transparent;
}

.btn:active {
    transform: scale(0.97);
    transition-duration: 80ms;
}

/* ---------------------------------------------------------------- Header */

.site-header {
    background: rgba(250, 250, 248, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transition: box-shadow 240ms ease, background-color 240ms ease;
}

/* Site banner (components/site-banner, Home only): ink with a faint green glow from the centre,
   the closing CTA's light turned sideways. Lightens a touch on hover and focus. */
.site-banner {
    background-color: var(--ink-950);
    background-image: radial-gradient(45% 260% at 50% 0%, rgba(54, 205, 129, 0.2), transparent 70%);
    transition: background-color 200ms ease;
}
.site-banner:hover,
.site-banner:focus-visible { background-color: #151a18; }

/* Scroll edge instead of a permanent divider: the hairline appears only once content passes under. */
.site-header.is-scrolled {
    box-shadow: 0 1px 0 rgba(10, 13, 12, 0.08);
}

.nav-link {
    position: relative;
    transition: color 160ms ease;
}

/* Nav dropdown (header.php, `children` in the nav config). Shown on hover, when its toggle sets
   data-open (main.js), and on keyboard focus when JavaScript is off. */
.nav-dropdown-panel {
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 0.375rem);
    transition: opacity 160ms ease, transform 200ms var(--ease-settle), visibility 0s linear 200ms;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown[data-open] .nav-dropdown-panel,
.nav-dropdown:not([data-js]):focus-within .nav-dropdown-panel {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    transition: opacity 160ms ease, transform 200ms var(--ease-settle), visibility 0s;
}

.nav-dropdown-toggle svg { transition: transform 200ms var(--ease-settle); }
.nav-dropdown:hover .nav-dropdown-toggle svg,
.nav-dropdown[data-open] .nav-dropdown-toggle svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
    .nav-dropdown-panel, .nav-dropdown-toggle svg { transition: none; }
}

.nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.45rem;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: var(--ok-500);
    transform: translateX(-50%);
}

/* Mobile navigation sheet: drops from the header it belongs to, and leaves the same way. */
.mobile-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity 220ms ease, transform 320ms var(--ease-settle), visibility 0s linear 320ms;
}

.mobile-nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

/* iGPT answer demo (visuals/igpt-answer, initIgptDemos() in main.js). Only once JS has marked
   the card .is-demo is anything hidden; the markup alone is the finished answer. */
.igpt-demo.is-demo [data-demo],
.igpt-demo.is-demo .demo-word,
.igpt-demo.is-demo [data-cite] {
    transition: opacity 360ms ease, transform 420ms var(--ease-settle);
}

.igpt-demo.is-demo [data-demo]:not(.is-in) { opacity: 0; transform: translateY(0.375rem); }
.igpt-demo.is-demo .demo-word:not(.is-in),
.igpt-demo.is-demo [data-cite]:not(.is-in) { opacity: 0; }
.igpt-demo.is-demo .demo-word { transition-duration: 220ms; }

.igpt-demo.is-fading [data-demo],
.igpt-demo.is-fading .demo-word,
.igpt-demo.is-fading [data-cite] { opacity: 0; transition-duration: 500ms; }

.igpt-demo .demo-source { transition: box-shadow 260ms ease, background-color 260ms ease, opacity 360ms ease, transform 420ms var(--ease-settle); }
.igpt-demo .demo-source.is-cited { background-color: #fff; box-shadow: inset 0 0 0 1.5px var(--ok-500); }

.demo-searching:not([hidden]) { display: inline-flex; }
.demo-dots { display: inline-flex; gap: 3px; }
.demo-dots span { width: 4px; height: 4px; border-radius: 9999px; background: currentColor; animation: demo-dot 1s ease-in-out infinite; }
.demo-dots span:nth-child(2) { animation-delay: 150ms; }
.demo-dots span:nth-child(3) { animation-delay: 300ms; }

@keyframes demo-dot {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

/* Waitlist modal (components/waitlist-dialog): a paper card over a dimmed, blurred page. */
.waitlist-dialog::backdrop {
    background: rgba(10, 13, 12, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* The demo step (components/demo-step, Calendly) waits below the form until it is sent. Collapsed,
   not display:none, so the iframe loads and lays out at a real width before it is shown. Positioned,
   so absolute children (the link's sr-only text) are clipped with it instead of stretching the
   modal card's scroll height. */
.demo-step { position: relative; }

.demo-step:not(.is-open) {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.waitlist-dialog-card { scrollbar-width: thin; }

@media (prefers-reduced-motion: no-preference) {
    .waitlist-dialog[open] { animation: dialog-in 320ms var(--ease-settle); }
    .demo-step.is-open { animation: dialog-demo-in 420ms var(--ease-settle); }
    .waitlist-dialog[open]::backdrop { animation: dialog-backdrop-in 220ms ease; }
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
}

@keyframes dialog-backdrop-in {
    from { opacity: 0; }
}

@keyframes dialog-demo-in {
    from { opacity: 0; transform: translateY(0.75rem); }
}

/* iGPT · Benchmarks (sections/igpt/benchmarks.php, a [data-stepper] tab set). The active metric's
   rail item lights up; bars grow in when their chart becomes current. Without JS every chart shows,
   and the headline keeps only its first word ("cost"). */
.bench-tab.is-active .bench-tab-bar { opacity: 1; }
.bench-tab.is-active .bench-tab-label { color: #fff; }
html:not(.js) .bench-word ~ .bench-word { display: none; }
/* The stepper shows its current panel with display: revert (block); the chart panel is a flex column. */
.js [data-stepper] .bench-panel[data-step-only].is-current { display: flex; }

@media (prefers-reduced-motion: no-preference) {
    .js .bench-panel.is-current .bench-bar {
        transform-origin: bottom;
        animation: bench-grow 700ms var(--ease-settle) both;
    }
    .js .bench-panel.is-current .bench-bar.bg-white\/25 { animation-delay: 90ms; }
}

@keyframes bench-grow {
    from { transform: scaleY(0); }
}

/* iGPT · Features: the permission shield draws itself, holds, and erases, in a loop (igpt.ai's
   glyph). pathLength="1" on each part lets one dashoffset keyframe draw them all. */
.igpt-shield > * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: igpt-shield 4s ease-in-out infinite;
}
.igpt-shield > :nth-child(2) { animation-delay: 0.35s; }
.igpt-shield > :nth-child(3) { animation-delay: 0.5s; }

@keyframes igpt-shield {
    0%       { stroke-dashoffset: 1; }
    25%, 75% { stroke-dashoffset: 0; }
    100%     { stroke-dashoffset: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .igpt-shield > * { stroke-dashoffset: 0; animation: none; }
}

/* Menu icon: two bars that cross into an X. Plain HTML boxes (not SVG strokes), so every browser
   rotates them around their own centre and the X lands in the middle of the round button. */
.menu-icon {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
}

.menu-icon .bar {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1.5px;
    margin-top: -0.75px;
    border-radius: 9999px;
    background: currentColor;
    transform-origin: 50% 50%;
    transition: transform 280ms var(--ease-settle);
}

.menu-icon .bar-top { transform: translateY(-3.5px) rotate(0deg); }
.menu-icon .bar-bottom { transform: translateY(3.5px) rotate(0deg); }
.menu-toggle[aria-expanded="true"] .bar-top { transform: translateY(0) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bar-bottom { transform: translateY(0) rotate(-45deg); }

/* ---------------------------------------------------------------- Code */

.code-block {
    font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.75;
    tab-size: 2;
    font-variant-ligatures: none;
}

@media (min-width: 640px) {
    .code-block { font-size: 0.84375rem; }
}

.code-block { color: #D5DAD6; }
.tok-comment { color: #6C746E; font-style: italic; }
.tok-string { color: #8FE3B4; }
.tok-keyword { color: #F0B775; }
.tok-number { color: #F0B775; }
.tok-property { color: #A9C7F5; }
.tok-function { color: #F4F5F3; font-weight: 500; }
.tok-punct { color: #7E8781; }

/* Thin, quiet scrollbars for scrollable code. */
.code-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.code-scroll::-webkit-scrollbar { height: 6px; }
.code-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 9999px; }

/* ---------------------------------------------------------------- Surfaces */

/* Blueprint dot grid used behind diagrams. */
.dot-grid {
    background-image: radial-gradient(circle at 1px 1px, rgba(10, 13, 12, 0.10) 1px, transparent 0);
    background-size: 22px 22px;
}

.dot-grid-dark {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0);
    background-size: 22px 22px;
}

/* Soft green light source for ink sections. Static — no moving backgrounds. */
.glow-ok {
    background: radial-gradient(60% 55% at 50% 0%, rgba(54, 205, 129, 0.16), transparent 70%);
}

.fade-edges-x {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* Connector lines in diagrams. */
.wire { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }
.wire-dash { stroke-dasharray: 3 6; }

/* ---------------------------------------------------------------- Accordion */

.accordion summary { list-style: none; cursor: pointer; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion .accordion-icon { transition: transform 320ms var(--ease-settle); }
.accordion details[open] .accordion-icon { transform: rotate(45deg); }

/* ---------------------------------------------------------------- Motion */

/*
 * Reveal on scroll. Content is only hidden when JavaScript is running (html.js) and the
 * visitor has not asked for reduced motion, so nothing depends on animation to be readable.
 */
@media (prefers-reduced-motion: no-preference) {
    .js [data-reveal] {
        opacity: 0;
        transform: translateY(1.25rem);
        transition: opacity 700ms ease, transform 900ms var(--ease-settle);
        transition-delay: calc(var(--reveal-order, 0) * 80ms);
        will-change: opacity, transform;
    }

    .js [data-reveal="fade"] { transform: none; }
    .js [data-reveal="scale"] { transform: scale(0.97); }

    .js [data-reveal].is-visible {
        opacity: 1;
        transform: none;
        will-change: auto;
    }

    /* A request travelling along a wire. */
    .pulse-dot {
        offset-rotate: 0deg;
        animation: travel 2.8s var(--ease-settle) infinite;
        animation-play-state: paused;
    }

    .is-visible .pulse-dot,
    .is-playing .pulse-dot { animation-play-state: running; }

    @keyframes travel {
        0% { offset-distance: 0%; opacity: 0; }
        12% { opacity: 1; }
        80% { opacity: 1; }
        100% { offset-distance: 100%; opacity: 0; }
    }

    .caret::after {
        content: "";
        display: inline-block;
        width: 0.55em;
        height: 1.1em;
        margin-left: 2px;
        vertical-align: text-bottom;
        background: var(--ok-400);
        animation: blink 1.1s steps(1) infinite;
    }

    @keyframes blink { 50% { opacity: 0; } }

    .spin-slow { animation: spin 1.1s linear infinite; }

    @keyframes spin { to { transform: rotate(360deg); } }
}

/*
 * Stepper-driven demos (execution trace, OAuth flow, workflow builder).
 * Without JS every step is shown in its completed state; with JS, steps
 * that have not been reached yet are dimmed rather than removed.
 */
.js [data-stepper] [data-step] {
    transition: opacity 420ms ease, transform 600ms var(--ease-settle), filter 420ms ease;
}

.js [data-stepper] [data-step].is-upcoming {
    opacity: 0.28;
    filter: saturate(0.4);
}

.js [data-stepper] [data-step].is-current {
    opacity: 1;
}

.js [data-stepper] [data-step-only] { display: none; }
.js [data-stepper] [data-step-only].is-current { display: revert; }

.step-tab {
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

/*
 * Agent flow (Home hero, visuals/agent-flow). initFlows() gives every [data-flow-step] the
 * stepper's is-upcoming / is-current / is-done classes. Messages and results appear, checklist
 * rows go wait → busy → done, and the wires between the columns draw in. Without JS everything
 * is in its finished state and the scenario controls are not shown.
 */
.js [data-flow] [data-flow-step] {
    transition: opacity 450ms ease, transform 650ms var(--ease-settle), stroke-dashoffset 700ms var(--ease-settle);
    transition-delay: calc(var(--flow-order, 0) * 110ms);
}

.js [data-flow] .flow-in.is-upcoming {
    opacity: 0;
    transform: translateY(0.5rem);
    transition-delay: 0ms;
}

.js [data-flow] .flow-row.is-upcoming { opacity: 0.4; }

.flow-status > * { display: none; }
.flow-status > .flow-done { display: block; }
.js [data-flow] .flow-row:is(.is-upcoming, .is-current) .flow-done { display: none; }
.js [data-flow] .flow-row.is-upcoming .flow-wait { display: block; }
.js [data-flow] .flow-row.is-current .flow-busy { display: block; }

.flow-wire-base { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 1.5; }
.flow-wire { fill: none; stroke: var(--ok-400); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js [data-flow] .flow-wire.is-upcoming { stroke-dashoffset: 1; }
.flow-wire-dot { fill: var(--ink-950, #0A0D0C); stroke: var(--ok-400); stroke-width: 1.5; }
.js [data-flow] .flow-wire-dot.is-upcoming { stroke: rgba(255, 255, 255, 0.25); }

html:not(.js) [data-flow-controls] { display: none; }

/*
 * Scenario change: the outgoing panel's contents fade and its wires retract (is-leaving), the
 * panels swap while nothing is visible, and the incoming contents start from transparent
 * (is-entering, no transition) and settle into their step state. The screens never blink.
 */
.js [data-flow] [data-flow-swap] {
    transition: opacity 400ms ease, transform 550ms var(--ease-settle);
}

.js [data-flow] .is-leaving :is([data-flow-step], [data-flow-swap]) {
    opacity: 0;
    transform: translateY(-0.25rem);
    transition-delay: 0ms;
}

.js [data-flow] .is-leaving .flow-wire { transform: none; stroke-dashoffset: 1; }

.js [data-flow] .is-entering :is([data-flow-step], [data-flow-swap]) {
    opacity: 0;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .pulse-dot { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
    .site-header {
        background: var(--paper);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    .site-header { background: var(--paper); box-shadow: 0 1px 0 var(--ink-950); }
}

/* ---------------------------------------------------------------- Forms */

.field {
    width: 100%;
    border-radius: 0.875rem;
    border: 1px solid #DFE2DE;
    background: #fff;
    padding: 0.8125rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink-950);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.field::placeholder { color: #959C96; }
.field:hover { border-color: #C3C8C3; }

.field:focus-visible {
    outline: none;
    border-radius: 0.875rem;
    border-color: var(--ok-500);
    box-shadow: 0 0 0 4px rgba(18, 179, 104, 0.16);
}

.field[aria-invalid="true"] {
    border-color: #DC2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

select.field {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C746E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.125rem;
    padding-right: 2.75rem;
}

/* ---------------------------------------------------------------- Long-form (legal) */

.prose-legal { color: #333A36; font-size: 1.0625rem; line-height: 1.7; }
.prose-legal h2 { margin-top: 3rem; margin-bottom: 0.75rem; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: var(--ink-950); scroll-margin-top: 6rem; }
.prose-legal h3 { margin-top: 2rem; margin-bottom: 0.5rem; font-size: 1.125rem; font-weight: 600; color: var(--ink-950); }
.prose-legal p { margin-bottom: 1.125rem; }
.prose-legal ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.prose-legal li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.prose-legal li::marker { color: #959C96; }
.prose-legal a { color: var(--ok-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose-legal a:hover { color: #079153; }
.prose-legal strong { color: var(--ink-950); font-weight: 600; }
.prose-legal table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.6; }
.prose-legal th { padding: 0 0 0.75rem; text-align: left; vertical-align: bottom; font-size: 0.8125rem; font-weight: 600; color: var(--ink-950); }
.prose-legal td { padding: 1.125rem 0; vertical-align: top; border-top: 1px solid #DFE2DE; }
.prose-legal th:first-child, .prose-legal td:first-child { width: 46%; padding-right: 1.75rem; }
.prose-legal td > p:last-child { margin-bottom: 0; }
@media (max-width: 639px) {
    .prose-legal thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .prose-legal tr, .prose-legal td { display: block; }
    .prose-legal td:first-child { width: auto; padding: 1.125rem 0 0.5rem; }
    .prose-legal td + td { padding-top: 0; border-top: 0; }
}

@media print {
    .site-header, .site-footer, .skip-link { display: none !important; }
}