/* eutonomous landing page.
 *
 * Everything here is token-driven (design-tokens.css). Deliberately NOT a copy
 * of uplevate's animated-bg.css / inline hero: that is an older orange-navy
 * palette that bypasses the tokens, runs ~690 lines of !important mobile hacks
 * and sets min-height:220vh. This builds the same "dark gradient" feel out of
 * the token palette with one drifting layer and a static fallback.
 */

/* ------------------------------------------------------------------ base */

body.eut {
    background: var(--eut-bg);
    color: var(--eut-text);
    font-family: var(--eut-font);
    font-size: var(--eut-text-md);
    line-height: 1.65;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

/* Backstop only — the real causes are fixed at the grid items below. `clip`
 * and not `hidden`: `overflow-x: hidden` makes the element a scroll container,
 * which silently breaks `position: sticky` on .eut-nav. */
html { overflow-x: clip; }

.eut-wrap {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 var(--eut-space-6);
}

.eut-section { padding: var(--eut-space-8) 0; }

.eut-eyebrow {
    font-size: var(--eut-text-xs);
    font-weight: var(--eut-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--eut-accent);
    margin-bottom: var(--eut-space-3);
}

.eut-h2 {
    font-size: clamp(1.6rem, 3.2vw, var(--eut-text-2xl));
    font-weight: var(--eut-weight-bold);
    line-height: 1.25;
    letter-spacing: -.02em;
    margin: 0 0 var(--eut-space-3);
    color: var(--eut-text);
}

.eut-lede {
    color: var(--eut-text-soft);
    max-width: 60ch;
    margin: 0 0 var(--eut-space-7);
}

.eut-mono { font-family: var(--eut-font-mono); }

/* ------------------------------------------------------------------- nav */

.eut-nav {
    position: sticky;
    top: 0;
    z-index: var(--eut-z-header);
    display: flex;
    align-items: center;
    gap: var(--eut-space-6);
    padding: var(--eut-space-4) var(--eut-space-6);
    /* Opaque fallback first: color-mix() is widely but not universally
       supported, and a nav that renders transparent over scrolling content is
       unreadable rather than merely unstyled. */
    background: var(--eut-bg);
    background: color-mix(in srgb, var(--eut-bg) 82%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--eut-border);
}

.eut-brandmark {
    display: flex;
    align-items: center;
    gap: var(--eut-space-2);
    font-weight: var(--eut-weight-bold);
    font-size: var(--eut-text-lg);
    letter-spacing: -.02em;
    color: var(--eut-text);
    text-decoration: none;
}
.eut-brandmark .bx { color: var(--eut-accent); font-size: 1.4rem; }

.eut-nav__links {
    display: flex;
    gap: var(--eut-space-5);
    margin-left: auto;
    align-items: center;
}
.eut-nav__links a {
    color: var(--eut-text-soft);
    text-decoration: none;
    font-size: var(--eut-text-sm);
    transition: color var(--eut-speed-fast) var(--eut-ease);
}
.eut-nav__links a:hover { color: var(--eut-text); }

.eut-nav__links a.is-active { color: var(--eut-text); border-bottom: 2px solid var(--eut-accent); padding-bottom: 2px; }

@media (max-width: 820px) {
    /* Landing page: drop the secondary links. Portal: never hide navigation,
       wrap it onto a second row instead. */
    .eut-nav--landing .eut-nav__links a.eut-hide-sm { display: none; }
    .eut-nav--portal { flex-wrap: wrap; gap: var(--eut-space-3) var(--eut-space-5); }
    .eut-nav--portal .eut-nav__links { flex-wrap: wrap; gap: .5rem .9rem; width: 100%; margin-left: 0; }
    .eut-nav--portal .eut-nav__email { display: none; }
}

/* ------------------------------------------------------------------ hero */

.eut-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
    border-bottom: 1px solid var(--eut-border);
}

/* Layered glow. Static by default; the drift only runs for users who have not
   asked for reduced motion (see the media query at the end of this block). */
.eut-hero::before {
    content: "";
    position: absolute;
    inset: -30% -10% auto -10%;
    height: 140%;
    background:
        radial-gradient(48rem 32rem at 18% 12%, rgba(76, 110, 245, .28), transparent 62%),
        radial-gradient(38rem 26rem at 82% 22%, rgba(32, 201, 151, .20), transparent 64%),
        radial-gradient(34rem 30rem at 55% 92%, rgba(107, 138, 253, .16), transparent 66%);
    pointer-events: none;
    z-index: 0;
}

.eut-hero > * { position: relative; z-index: 1; }

.eut-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
@media (max-width: 900px) {
    .eut-hero__grid { grid-template-columns: 1fr; }
}

.eut-hero h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: var(--eut-weight-bold);
    margin: 0 0 var(--eut-space-5);
}

.eut-hero h1 .eut-grad {
    background: var(--eut-gradient-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.eut-hero p.eut-sub {
    font-size: var(--eut-text-lg);
    color: var(--eut-text-soft);
    max-width: 46ch;
    margin: 0 0 var(--eut-space-7);
}

/* --------------------------------------------------------------- pills */

.eut-pills { display: flex; flex-wrap: wrap; gap: var(--eut-space-2); margin-bottom: var(--eut-space-6); }

.eut-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--eut-space-2);
    padding: 6px 12px;
    border-radius: var(--eut-radius-full);
    border: 1px solid var(--eut-border);
    background: var(--eut-surface);
    color: var(--eut-text-soft);
    font-size: var(--eut-text-xs);
    font-weight: var(--eut-weight-medium);
}
.eut-pill .bx { color: var(--eut-accent); font-size: 1rem; }

/* --------------------------------------------------------------- buttons */

.eut-btns { display: flex; flex-wrap: wrap; gap: var(--eut-space-3); }

.eut-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--eut-space-2);
    padding: 11px 20px;
    border-radius: var(--eut-radius-sm);
    font-weight: var(--eut-weight-semibold);
    font-size: var(--eut-text-sm);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform var(--eut-speed-fast) var(--eut-ease),
                box-shadow var(--eut-speed-fast) var(--eut-ease),
                background var(--eut-speed-fast) var(--eut-ease);
}
.eut-btn:hover { transform: translateY(-1px); }
.eut-btn:focus-visible { outline: none; box-shadow: var(--eut-focus-ring); }

.eut-btn--primary {
    background: var(--eut-gradient-brand);
    color: #08131a;
    box-shadow: 0 6px 20px rgba(32, 201, 151, .22);
}
.eut-btn--primary:hover { box-shadow: 0 10px 28px rgba(32, 201, 151, .32); }

.eut-btn--ghost {
    background: var(--eut-surface);
    border-color: var(--eut-border-strong);
    color: var(--eut-text);
}
.eut-btn--ghost:hover { border-color: var(--eut-brand); }

/* ---------------------------------------------------------------- code */

.eut-code {
    background: #0f1218;
    border: 1px solid var(--eut-border);
    border-radius: var(--eut-radius-md);
    box-shadow: var(--eut-shadow-lg);
    overflow: hidden;
}
[data-theme="light"] .eut-code { background: #12161d; }

.eut-code__bar {
    display: flex;
    align-items: center;
    gap: var(--eut-space-2);
    padding: 10px var(--eut-space-4);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: rgba(255, 255, 255, .02);
}
.eut-code__dot { width: 10px; height: 10px; border-radius: 50%; }
.eut-code__title {
    margin-left: var(--eut-space-2);
    font-size: var(--eut-text-xs);
    color: #7d8b9c;
    font-family: var(--eut-font-mono);
}

.eut-code pre {
    margin: 0;
    padding: var(--eut-space-5);
    overflow-x: auto;
    font-family: var(--eut-font-mono);
    font-size: .82rem;
    line-height: 1.7;
    color: #cfd8e3;
}
/* For blocks holding ONE unbreakable token — a 64-hex signing key, an API key,
 * a base64 signature. Opt-in, because the landing page's curl snippets are
 * shaped by horizontal scrolling and must keep it. Note `pre-wrap` alone is
 * not enough: it wraps at whitespace, and these have none. */
.eut-code--wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.eut-code .c-key { color: #6b8afd; }
.eut-code .c-str { color: #20c997; }
.eut-code .c-com { color: #66788a; }

/* --------------------------------------------------------------- cards */

/* `min(280px, 100%)` and NOT `minmax(0, 1fr)`: with auto-fit the repetition
 * count comes from the track's min sizing function, so a 0 there collapses
 * every one of these grids to a single column at every width. The min() form
 * also fixes a smaller bug — .eut-wrap's inner box is 272px at a 320px
 * viewport, so a flat 280px track overflowed by 8px on the narrowest phones
 * before any content was involved. */
.eut-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--eut-space-5);
}

/* Grid and flex items default to `min-width: auto`, i.e. "never shrink below
 * my min-content". One unbreakable 64-hex key or one untruncated ledger detail
 * then widens the card, which widens the track, which pushes the page past
 * .eut-wrap and puts a scrollbar on the document. This is the actual cause of
 * things going over the edge; the per-element wrapping rules below decide what
 * the content does once the card stops growing for it. */
.eut-grid > *, .eut-price > *, .eut-tiles > * { min-width: 0; }

.eut-card {
    position: relative;
    min-width: 0;
    background: var(--eut-surface);
    border: 1px solid var(--eut-border);
    border-radius: var(--eut-radius-lg);
    padding: var(--eut-space-6);
    transition: border-color var(--eut-speed) var(--eut-ease),
                transform var(--eut-speed) var(--eut-ease);
}
.eut-card:hover { border-color: var(--eut-border-strong); transform: translateY(-2px); }

.eut-card__n {
    font-family: var(--eut-font-mono);
    font-size: var(--eut-text-xs);
    color: var(--eut-accent);
    letter-spacing: .1em;
}
.eut-card h3 {
    font-size: var(--eut-text-lg);
    font-weight: var(--eut-weight-semibold);
    margin: var(--eut-space-2) 0 var(--eut-space-3);
    letter-spacing: -.01em;
}
.eut-card p { color: var(--eut-text-soft); font-size: var(--eut-text-sm); margin: 0 0 var(--eut-space-4); }

.eut-card ul { list-style: none; margin: 0; padding: 0; }
.eut-card li {
    display: flex;
    gap: var(--eut-space-2);
    font-size: var(--eut-text-sm);
    color: var(--eut-text-soft);
    padding: 5px 0;
}
.eut-card li .bx { color: var(--eut-accent); flex: none; margin-top: 3px; }

/* Highlight the pillar that is the actual differentiator. */
.eut-card--hero {
    border-color: color-mix(in srgb, var(--eut-accent) 45%, var(--eut-border));
    background:
        linear-gradient(160deg, rgba(32, 201, 151, .07), transparent 60%),
        var(--eut-surface);
}

/* --------------------------------------------------------------- table */

.eut-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--eut-border);
    border-radius: var(--eut-radius-lg);
    background: var(--eut-surface);
}

.eut-table { width: 100%; border-collapse: collapse; font-size: var(--eut-text-sm); }
.eut-table th {
    text-align: left;
    font-size: var(--eut-text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: var(--eut-weight-semibold);
    color: var(--eut-text-faint);
    padding: var(--eut-space-3) var(--eut-space-4);
    border-bottom: 1px solid var(--eut-border);
    white-space: nowrap;
}
.eut-table td {
    padding: var(--eut-space-3) var(--eut-space-4);
    border-bottom: 1px solid var(--eut-border);
    color: var(--eut-text-soft);
    white-space: nowrap;
}
/* Opt-in prose cell. Data columns read better nowrap, so this is per-column
 * rather than a blanket removal of the nowrap above. */
.eut-table td.eut-cell-wrap { white-space: normal; overflow-wrap: anywhere; min-width: 18ch; }
.eut-table--compact th, .eut-table--compact td { padding: var(--eut-space-2) var(--eut-space-3); }

.eut-table tr:last-child td { border-bottom: none; }
.eut-table tbody tr:hover { background: var(--eut-brand-soft); }
.eut-table td.eut-model { color: var(--eut-text); font-family: var(--eut-font-mono); font-size: .8rem; }
.eut-table td.eut-num { text-align: right; font-family: var(--eut-font-mono); }

/* --------------------------------------------------------------- badges */

.eut-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: var(--eut-radius-full);
    font-size: var(--eut-text-xs);
    font-weight: var(--eut-weight-semibold);
    border: 1px solid transparent;
}
.eut-badge--ok     { background: rgba(32, 201, 151, .14); color: var(--eut-accent); border-color: rgba(32, 201, 151, .3); }
.eut-badge--review { background: rgba(251, 191, 36, .12); color: var(--eut-warning); border-color: rgba(251, 191, 36, .28); }
.eut-badge--no     { background: rgba(248, 113, 113, .12); color: var(--eut-danger); border-color: rgba(248, 113, 113, .28); }
.eut-badge--ch     { background: rgba(107, 138, 253, .14); color: var(--eut-brand-strong); border-color: rgba(107, 138, 253, .3); }

/* -------------------------------------------------------------- pricing */

.eut-price {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: var(--eut-space-5);
    max-width: 820px;
    margin: 0 auto;
}
.eut-price__amt {
    font-size: var(--eut-text-2xl);
    font-weight: var(--eut-weight-bold);
    letter-spacing: -.02em;
}
.eut-price__amt small { font-size: var(--eut-text-sm); color: var(--eut-text-faint); font-weight: 400; }

/* --------------------------------------------------------------- footer */

.eut-footer {
    border-top: 1px solid var(--eut-border);
    padding: var(--eut-space-7) 0;
    color: var(--eut-text-faint);
    font-size: var(--eut-text-sm);
}
.eut-footer a { color: var(--eut-text-soft); text-decoration: none; }
.eut-footer a:hover { color: var(--eut-text); }

/* --------------------------------------------------------------- motion */

@media (prefers-reduced-motion: no-preference) {
    .eut-hero::before {
        animation: eut-drift 24s ease-in-out infinite;
    }
    @keyframes eut-drift {
        0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
        50%      { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
    }
}

/* ---- portal form controls ------------------------------------------------ */
.eut-input {
    padding: 10px 14px;
    border-radius: var(--eut-radius-sm);
    border: 1px solid var(--eut-border-strong);
    background: var(--eut-surface);
    color: var(--eut-text);
    font-family: var(--eut-font);
    font-size: var(--eut-text-sm);
}
.eut-input:focus { outline: 2px solid var(--eut-accent); outline-offset: 1px; }
select.eut-input { cursor: pointer; }

/* ---- governance -------------------------------------------------------- */
.eut-subnav { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 1.25rem; font-size: var(--eut-text-sm); }
.eut-subnav__group { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem; padding: .2rem .35rem .2rem .7rem;
                     border: 1px solid var(--eut-border); border-radius: 999px; background: var(--eut-surface); }
.eut-subnav__label { font-size: var(--eut-text-xs); color: var(--eut-text-faint); text-transform: uppercase;
                     letter-spacing: .06em; margin-right: .35rem; }
.eut-subnav a { color: var(--eut-text-soft); text-decoration: none; padding: 3px 9px; border-radius: 999px; }
.eut-subnav a:hover { color: var(--eut-text); }
.eut-subnav a.is-active { color: var(--eut-accent); background: var(--eut-accent-soft); }
.eut-modelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .15rem .75rem; font-size: var(--eut-text-sm); }
.eut-modelgrid label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eut-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.eut-tile { background: var(--eut-surface); border: 1px solid var(--eut-border); border-radius: var(--eut-radius-md); padding: .9rem 1rem; }
.eut-tile__n { font-size: var(--eut-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--eut-text-faint); font-weight: 600; }
.eut-tile__v { font-size: 1.6rem; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; letter-spacing: -.01em;  display: block; color: inherit; text-decoration: none; }
a.eut-tile__v:hover { color: var(--eut-accent); }
.eut-tile__s a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--eut-border-strong); }
.eut-tile__s a:hover { color: var(--eut-accent); }
.eut-tile__s { font-size: var(--eut-text-xs); color: var(--eut-text-soft); margin-top: .15rem; }
.eut-tile--warn .eut-tile__v { color: var(--eut-warning, #e0a84a); }
.eut-tile--bad .eut-tile__v { color: var(--eut-danger, #e0655f); }
.eut-tile--ok .eut-tile__v { color: var(--eut-accent); }
.eut-chart { min-height: 120px; background: var(--eut-surface); border: 1px solid var(--eut-border); border-radius: var(--eut-radius-md); padding: .75rem; }
.eut-chart--empty { display: flex; align-items: center; justify-content: center; color: var(--eut-text-faint); font-size: var(--eut-text-sm); }
.eut-chart__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .4rem; font-size: var(--eut-text-xs); color: var(--eut-text-soft); }
.eut-chart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.eut-chart__title { font-size: var(--eut-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--eut-text-faint); font-weight: 600; margin-bottom: .5rem; }
.eut-tag { display: inline-block; font-size: var(--eut-text-xs); padding: 1px 7px; border-radius: 999px; background: var(--eut-accent-soft); color: var(--eut-accent); margin-right: .25rem; }