/* ==========================================================================
   CREOSON public site - additions on top of creoson.css
   --------------------------------------------------------------------------
   creoson.css is the shared design system copied from the distribution site.
   Keep it untouched so it can be re-synced. Everything specific to the public
   marketing page lives here, and uses the same tokens so light/dark and the
   motion/radius scale all stay consistent.
   ========================================================================== */

/* ---------- tiny layout helpers (the design system has no utilities) ------ */
.u-center {
    text-align: center;
}
.u-narrow {
    max-width: 760px;
    margin-inline: auto;
}
.u-stack-sm > * + * {
    margin-top: 0.75rem;
}
.u-mt {
    margin-top: 1.5rem;
}
.u-mt-lg {
    margin-top: clamp(2rem, 4vw, 3rem);
}
.u-mb0 {
    margin-bottom: 0;
}
.u-muted {
    color: var(--text-muted);
}

/* Shared visibility switch, toggled from JS. Used by the BETA registration
   wizard (register.css / register.js) and the function reference picker
   (functions.css / functions.js). */
.is-hidden {
    display: none !important;
}

/* ---------- generic surface panel ---------------------------------------- */
.panel {
    display: flex;
    flex-direction: column;
    padding: 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.panel__head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
}
.panel__head svg {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: var(--accent);
}
.panel__head h3 {
    margin: 0;
    font-size: 1.25rem;
}
.panel--brand .panel__head svg {
    color: var(--brand);
}

/* ---------- feature list with ticks ------------------------------------- */
.tick-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tick-list li {
    position: relative;
    padding: 0.4rem 0 0.4rem 1.75rem;
    color: var(--text);
}
.tick-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95em;
    width: 11px;
    height: 6px;
    border-left: 2.5px solid var(--accent);
    border-bottom: 2.5px solid var(--accent);
    transform: translateY(-50%) rotate(-45deg);
}

/* ---------- stats band --------------------------------------------------- */
.stats-band {
    background: var(--bg-inset);
    border-block: 1px solid var(--border);
}
.stats-band__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.25rem) 0;
    text-align: center;
}
.stats-band__num {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.1;
    color: var(--brand);
}
.stats-band__label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ---------- responsive video -------------------------------------------- */
.video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
    box-shadow: var(--shadow);
}
.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.video-caption {
    margin: 0.9rem 0 0;
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-align: center;
}

/* ---------- CREOSON + <cycling AI logo> = automation -------------------- */
.ai-equation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.ai-equation__logo {
    height: 46px;
    width: auto;
    background: #fff;
    padding: 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.ai-equation__op {
    color: var(--text-faint);
}
.ai-rotator {
    position: relative;
    display: inline-block;
    width: 190px;
    max-width: 100%;
    height: 44px;
    vertical-align: middle;
}
.ai-rotator__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 400ms var(--ease);
    pointer-events: none;
}
.ai-rotator__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.ai-rotator__slide a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
    color: inherit;
}
.ai-rotator__slide img {
    height: 40px;
    width: auto;
    max-width: 100%;
    border-radius: var(--radius-sm);
}
.ai-rotator__slide img.ai-rotator__icon {
    height: 34px;
    border-radius: 0;
}
.ai-rotator__label {
    font-size: 0.8em;
    white-space: nowrap;
    color: var(--brand);
    text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
    .ai-rotator__slide {
        transition: none;
    }
}

/* ---------- function group tiles + CSS-only tooltip --------------------- */
.fn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.fn-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.25rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-align: center;
    cursor: help;
    transition: transform var(--speed) var(--ease),
        box-shadow var(--speed) var(--ease),
        border-color var(--speed) var(--ease);
}
.fn-tile:hover,
.fn-tile:focus-visible {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}
.fn-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
}
.fn-tile__icon img {
    max-height: 44px;
    max-width: 100%;
    width: auto;
}
.fn-tile__label {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
}

/* tooltip: hover and keyboard focus, no JavaScript */
[data-tip]::after,
[data-tip]::before {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--speed) var(--ease);
    z-index: 30;
}
[data-tip]::after {
    content: attr(data-tip);
    bottom: calc(100% + 9px);
    transform: translateX(-50%);
    width: max-content;
    max-width: 210px;
    padding: 0.45rem 0.7rem;
    background: var(--text);
    color: var(--bg);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;
    white-space: normal;
    box-shadow: var(--shadow);
}
[data-tip]::before {
    content: "";
    bottom: calc(100% + 3px);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text);
}
[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
    opacity: 1;
}

/* ---------- logo / icon grids (languages, enterprise systems) ----------- */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
    gap: 1rem 0.75rem;
    margin-top: 1.4rem;
    align-items: center;
    justify-items: center;
}
.icon-grid > div {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    cursor: help;
}
.icon-grid img {
    max-height: 50px;
    max-width: 100%;
    width: auto;
}

/* ---------- two-column split (code vs AI) ------------------------------- */
.split-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}
.split-2 .code-window {
    height: 100%;
}

/* the check/chat panels are sized for the hero; let them grow here */
.split-2 .check-panel,
.split-2 .chat-panel {
    min-height: 0;
}

/* The code column carries the checklist plus two samples, so it sets the row
   height. Centring the chat stack splits the leftover space instead of
   leaving it all under the last bubble. (No effect once the grid stacks to a
   single column, where each panel takes its natural height.) */
.split-2 .chat-panel {
    justify-content: center;
}

/* ---------- community / consulting bits -------------------------------- */
.media-row {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 2.5rem);
    align-items: center;
}
@media (max-width: 680px) {
    .media-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
.media-row__art img {
    max-height: 110px;
    width: auto;
}
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.u-center .btn-row {
    justify-content: center;
}

/* A CTA leading a .section-head, where a .badge pill would normally sit. The
   head is text-align: center, which does nothing for a flex row, so centre it
   explicitly and reuse the pill's 1.25rem gap before the heading. */
.section-head .btn-row {
    justify-content: center;
    margin-bottom: 1.25rem;
}

/* These labels are long sentences rather than the usual one or two words, and
   .btn is white-space: nowrap, which pushed the button past the viewport edge
   on ~360px phones. Allowing a wrap plus max-width means it only ever breaks
   when it genuinely does not fit - wide viewports still render one line. */
.section-head .btn-row .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
}

/* ---------- attention arrows flanking a CTA -------------------------------
   Chevrons point inward at the button so it reads as the thing to click.

   flex-wrap is off here on purpose: .btn-row wraps by default, and a wrapping
   row would drop an arrow onto its own line at mid widths (the button's
   max-content width plus both arrows exceeds the container around 480px).
   With nowrap the button shrinks and its label wraps instead, which keeps the
   arrows level with it. */
.cta-attract {
    flex-wrap: nowrap;
    align-items: center;
    /* Wider than .btn-row's 0.75rem so the chevrons read as pointing AT the
       button rather than sitting attached to it. */
    gap: 1.25rem;
}

.cta-arrow {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--brand);
    animation: cta-arrow-blink 1s ease-in-out infinite;
}

@keyframes cta-arrow-blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.12;
    }
}

/* Below ~480px the arrows plus the button label leave the button too narrow to
   read comfortably, so drop the decoration and keep the CTA. */
@media (max-width: 30rem) {
    .cta-arrow {
        display: none;
    }
}

/* A pulsing element is a distraction risk, so honour the OS setting and simply
   hold the arrows at full opacity. */
@media (prefers-reduced-motion: reduce) {
    .cta-arrow {
        animation: none;
    }
}

/* ---------- beta callout ----------------------------------------------- */
.beta-note {
    border-left: 4px solid var(--warn, #b45309);
    background: var(--bg-inset);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
}


/* ---------- hero second column ------------------------------------------
   .hero__stage is an unstyled grid child in creoson.css. min-width:0 keeps a
   long <pre> line from blowing the grid track out past the viewport. */
.hero__stage {
    min-width: 0;
}
.hero__stage pre {
    overflow-x: auto;
}

/* ---------- chat bubble avatar -------------------------------------------
   creoson.css tints the user avatar with brand red (rgba(225,29,38,.18) +
   #ff8f95). On this page every bubble is a user ask, so there is no
   assistant avatar to contrast against, and light blue sits better next to
   the bubble's own #3a7797 fill and cyan border. #7dd3fc is already in the
   design system (it is the default avatar icon colour), so this introduces
   no new hue.

   Same specificity as the rule it replaces - public.css just loads later. */
.chat-bubble--user .chat-bubble__avatar {
    background: rgba(125, 211, 252, 0.18);
    color: #7dd3fc;
}

/* ---------- wider section headings ---------------------------------------
   creoson.css caps .section-head at 680px, which is right for a docs page but
   forces the longer marketing headlines here onto three lines. Give the head
   more room, then pull .section-sub back to the original width so the
   supporting sentence keeps a readable line length (~70 characters) instead
   of stretching to match the headline. */
.section-head {
    max-width: 900px;
}
.section-sub {
    max-width: 680px;
    margin-inline: auto;
}

/* ---------- BETA pill ----------------------------------------------------
   The stock .badge is a quiet grey chip (--bg-inset / --text-muted), which
   disappears above a big headline. Solid red with white text instead.

   The red is pinned to #e11d26 rather than var(--brand). White on it is
   ~4.8:1, which passes WCAG AA for 13px text. (It was pinned originally
   because dark mode lightened --brand to #ff4d56, where white failed at
   ~3.3:1. The site is light-only now, but the explicit value is harmless
   and keeps the pill correct if dark mode ever returns.)

   The dot is white here too - the default var(--accent) teal fights the red. */
.badge--beta {
    background: #e11d26;
    border-color: #e11d26;
    color: #fff;
    font-weight: 600;
}
.badge--beta .badge__dot {
    background: #fff;
}

/* ---------- eyebrow size -------------------------------------------------
   creoson.css sets .eyebrow to 0.75rem (12px). That is fine on the docs site,
   where the kicker sits above tighter headings, but it reads as too small on
   these marketing sections.

   0.95rem (~15px) is legible while staying clearly subordinate to
   .section-title, which runs 28-40px via clamp(). Anything approaching 2rem
   makes the uppercase kicker compete with the headline and inverts the
   hierarchy on the shorter titles.

   Kept here rather than in creoson.css so that file stays byte-identical to
   the distribution site and can be re-synced without losing this. */
.eyebrow {
    font-size: 1.75rem;
}