/* ==========================================================================
   MCP Connector — sales page
   The palette is a conversation between the two products this module joins:
   Odoo's aubergine-violet and Claude's terracotta, over a ground that carries
   violet rather than being neutrally dark. The seam that runs down the page is
   the product itself: Arabic on the right, the machine's answer on the left.
   ========================================================================== */

:root {
    --ink:      #17101F;
    --ink-2:    #1E1528;
    --card:     #271B34;
    --seam:     #3D2C4D;
    --odoo:     #B085C4;
    --odoo-dim: #7A5C89;
    --claude:   #E08363;
    --paper:    #F3ECF7;
    --muted:    #9E8DAD;
    --ok:       #7FC8A9;

    /* Chart series. Validated: lightness band, chroma floor, normal-vision
       separation and contrast all pass on --ink-2. The green/coral pair sits
       at CVD ΔE 7.2, which is legal only because every line is direct-labelled. */
    --c1:       #a668c2;
    --c2:       #cd633d;
    --c3:       #00a171;

    --step--1: clamp(.78rem, .74rem + .2vw, .87rem);
    --step-0:  clamp(1rem, .95rem + .25vw, 1.12rem);
    --step-1:  clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
    --step-2:  clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
    --step-3:  clamp(2.1rem, 1.5rem + 2.8vw, 4rem);

    --gutter: clamp(1.25rem, 5vw, 4rem);
    --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif;
    font-size: var(--step-0);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* A faint violet wash from the top-left, so the ground is never flat black. */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(80ch 60ch at 12% -10%, rgba(176,133,196,.14), transparent 70%),
        radial-gradient(60ch 50ch at 95% 8%, rgba(224,131,99,.09), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

main, header, footer { position: relative; z-index: 1; }

a { color: inherit; }
:focus-visible {
    outline: 2px solid var(--claude);
    outline-offset: 3px;
    border-radius: 2px;
}

.wrap {
    width: min(74rem, 100% - var(--gutter) * 2);
    margin-inline: auto;
}

/* --- shared type ------------------------------------------------------- */

.eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--step--1);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--odoo);
    direction: ltr;
    display: inline-block;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: var(--step-3); letter-spacing: -.02em; }
h2 { font-size: var(--step-2); letter-spacing: -.01em; }
h3 { font-size: var(--step-1); }

p { margin: 0; max-width: var(--measure); }
.lede { font-size: var(--step-1); color: var(--muted); line-height: 1.6; }

.mono {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    direction: ltr;
    unicode-bidi: isolate;
    font-size: .9em;
}

/* --- header ------------------------------------------------------------ */

.site-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.5rem;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: .7rem; font-weight: 600; }
.brand-mark {
    width: 2rem; height: 2rem; flex: none;
    border-radius: .55rem;
    background: linear-gradient(140deg, var(--odoo), var(--claude));
    position: relative;
}
/* The mark is the seam: two halves meeting. */
.brand-mark::after {
    content: '';
    position: absolute;
    inset-block: 22%;
    inset-inline-start: 50%;
    width: 2px;
    background: var(--ink);
    transform: translateX(-1px);
}

.nav { display: flex; gap: 1.5rem; font-size: var(--step--1); color: var(--muted); }
.nav a { text-decoration: none; padding-block: .25rem; }
.nav a:hover { color: var(--paper); }

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

.hero { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem); }
.hero h1 { margin-block: 1rem 1.25rem; max-width: 20ch; }
.hero .lede { margin-bottom: 2.5rem; }

/* The transcript: the single thing this page is remembered by. */
.transcript {
    border: 1px solid var(--seam);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--ink-2), var(--ink));
    overflow: hidden;
    box-shadow: 0 2rem 4rem -2rem rgba(0,0,0,.8);
}

.transcript-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--seam);
    background: rgba(255,255,255,.02);
    font-size: var(--step--1);
    color: var(--muted);
}
.transcript-bar .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--seam); }
.transcript-bar .dot.live { background: var(--ok); }

.turn { padding: 1.25rem clamp(1.1rem, 3vw, 2rem); }
.turn + .turn { border-top: 1px solid color-mix(in srgb, var(--seam) 60%, transparent); }
.turn-who {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--step--1);
    color: var(--odoo-dim);
    margin-bottom: .55rem;
}
.turn.human .turn-body { font-size: var(--step-1); }
.turn.ai .turn-who { color: var(--claude); }

/* The record the answer resolves to — the payoff of the whole page. */
.record {
    margin-top: 1rem;
    border: 1px solid var(--seam);
    border-inline-start: 3px solid var(--claude);
    border-radius: .6rem;
    background: var(--card);
    padding: .9rem 1.1rem;
    display: grid;
    gap: .35rem;
}
.record-title { font-weight: 600; }
.record-meta { font-size: var(--step--1); color: var(--muted); }
.record-link {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--step--1);
    color: var(--odoo);
    direction: ltr;
    text-align: start;
    word-break: break-all;
    text-decoration: none;
    border-bottom: 1px dotted var(--odoo-dim);
}

/* Load sequence. Each step fades in after the one before it. */
.reveal { opacity: 0; transform: translateY(.5rem); animation: rise .6s ease forwards; }
.reveal.d1 { animation-delay: .15s; }
.reveal.d2 { animation-delay: .9s; }
.reveal.d3 { animation-delay: 1.5s; }
.reveal.d4 { animation-delay: 2.1s; }
@keyframes rise { to { opacity: 1; transform: none; } }

.toolcall {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .7rem;
    border: 1px solid var(--seam);
    border-radius: 999px;
    background: rgba(255,255,255,.02);
    color: var(--muted);
}
.toolcall-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--claude); flex: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; animation: none; }
}

/* --- the seam: what you say / what Odoo does --------------------------- */

.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section-head { margin-bottom: 2.5rem; }
.section-head h2 { margin-block: .75rem .9rem; }

.seam-list { display: grid; gap: 1px; background: var(--seam); border-block: 1px solid var(--seam); }

.seam-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(1rem, 3vw, 2.5rem);
    align-items: center;
    background: var(--ink);
    padding: 1.4rem clamp(.5rem, 2vw, 1.5rem);
}
.seam-said { font-size: var(--step-0); }
.seam-did {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: var(--step--1);
    color: var(--odoo);
    direction: ltr;
    text-align: start;
    line-height: 1.7;
    word-break: break-word;
}
.seam-mark { color: var(--claude); font-family: 'IBM Plex Mono', monospace; opacity: .6; }

@media (max-width: 46rem) {
    .seam-row { grid-template-columns: 1fr; gap: .6rem; }
    .seam-mark { display: none; }
    .seam-did { padding-inline-start: .75rem; border-inline-start: 2px solid var(--seam); }
}

/* --- guards ------------------------------------------------------------ */

.guards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.guard {
    border: 1px solid var(--seam);
    border-radius: .9rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, var(--ink-2), transparent);
}
.guard h3 { margin-bottom: .6rem; font-size: var(--step-0); }
.guard p { color: var(--muted); font-size: var(--step--1); line-height: 1.7; }
.guard-num {
    font-family: 'IBM Plex Mono', monospace;
    color: var(--claude);
    font-size: var(--step--1);
    display: block;
    margin-bottom: .9rem;
    direction: ltr;
}

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

.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; }
.plan {
    border: 1px solid var(--seam);
    border-radius: 1rem;
    padding: 1.75rem;
    background: var(--ink-2);
    display: grid;
    gap: 1rem;
}
.plan.featured { border-color: var(--odoo-dim); background: linear-gradient(180deg, var(--card), var(--ink-2)); }
.plan-name { font-weight: 600; font-size: var(--step-1); }
.plan-price { font-family: 'IBM Plex Mono', monospace; font-size: var(--step-2); color: var(--paper); direction: ltr; text-align: end; }
.plan-price small { font-size: var(--step--1); color: var(--muted); display: block; margin-top: .2rem; text-align: end; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; font-size: var(--step--1); color: var(--muted); }
.plan li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.plan li::before { content: '—'; color: var(--odoo-dim); font-family: 'IBM Plex Mono', monospace; }

.btn {
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: .55rem;
    border: 1px solid transparent;
    background: var(--claude);
    color: #1B1016;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn.ghost { background: transparent; border-color: var(--seam); color: var(--paper); }
.btn.ghost:hover { border-color: var(--odoo); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* --- order form -------------------------------------------------------- */

.order { border: 1px solid var(--seam); border-radius: 1rem; padding: clamp(1.5rem, 4vw, 2.5rem); background: var(--ink-2); }
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: var(--step--1); color: var(--muted); }
.field input, .field select {
    font: inherit;
    padding: .7rem .85rem;
    border-radius: .5rem;
    border: 1px solid var(--seam);
    background: var(--ink);
    color: var(--paper);
}
.field input:focus, .field select:focus { border-color: var(--odoo); outline: none; }
.grid-2 { display: grid; gap: 0 1.1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.pay-note {
    margin-top: 1.25rem;
    padding: 1rem 1.15rem;
    border-radius: .6rem;
    background: var(--card);
    border: 1px solid var(--seam);
    font-size: var(--step--1);
    color: var(--muted);
    line-height: 1.7;
}
.pay-note strong { color: var(--paper); font-weight: 600; }
.pay-note .mono { color: var(--odoo); }

.notice {
    padding: .9rem 1.15rem;
    border-radius: .6rem;
    margin-bottom: 1.5rem;
    font-size: var(--step--1);
    border: 1px solid;
}
.notice.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.notice.bad { border-color: color-mix(in srgb, var(--claude) 45%, transparent); background: color-mix(in srgb, var(--claude) 10%, transparent); color: var(--claude); }
.notice ul { margin: .4rem 0 0; padding-inline-start: 1.1rem; }

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

.specs { display: grid; gap: 1px; background: var(--seam); border: 1px solid var(--seam); border-radius: .8rem; overflow: hidden; }
.spec { background: var(--ink-2); padding: 1rem 1.25rem; display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; font-size: var(--step--1); }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; }
@media (max-width: 40rem) { .spec { grid-template-columns: 1fr; gap: .2rem; } }

.site-foot {
    border-top: 1px solid var(--seam);
    margin-top: clamp(3rem, 7vw, 5rem);
    padding-block: 2rem 3rem;
    color: var(--muted);
    font-size: var(--step--1);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ==========================================================================
   English version
   ========================================================================== */

html[lang="en"] body { font-family: 'IBM Plex Sans', system-ui, sans-serif; }

/* The seam arrow points along the reading direction in each language. */
.seam-mark::before { content: '←'; }
html[lang="en"] .seam-mark::before { content: '→'; }

.lang-switch {
    border: 1px solid var(--seam);
    border-radius: 999px;
    padding: .2rem .8rem;
    color: var(--odoo);
}
.lang-switch:hover { border-color: var(--odoo); color: var(--paper); }

/* Honeypot: off-screen in both directions, never display:none — bots skip that. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Chart
   Time reads left-to-right in both languages: that is how Odoo's own graphs
   render, and how the underlying grouped data is ordered.
   ========================================================================== */

.chart-card {
    margin: 0;
    border: 1px solid var(--seam);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--ink-2), var(--ink));
    padding: clamp(1.1rem, 3vw, 1.9rem);
    overflow: hidden;
}

.chart-head { display: grid; gap: .45rem; margin-bottom: 1.4rem; }
.chart-q { font-size: var(--step-1); }
.chart-call { color: var(--odoo-dim); font-size: var(--step--1); word-break: break-word; }

.chart-title {
    font-size: var(--step--1);
    color: var(--muted);
    display: flex;
    gap: .6rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.chart-unit { font-family: 'IBM Plex Mono', monospace; opacity: .75; }
.chart-unit::before { content: '· '; }

/* Wide plots scroll inside their own box; the page never scrolls sideways. */
.chart-plot { direction: ltr; overflow-x: auto; overflow-y: hidden; }
.chart-plot svg { width: 100%; min-width: 30rem; height: auto; display: block; }

.grid { stroke: var(--seam); stroke-width: 1; }
.tick {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    fill: var(--muted);
}
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* A 2px ring in the surface colour keeps overlapping points readable. */
.pt { stroke: var(--ink-2); stroke-width: 2; }
.pt:hover { r: 6; }
.series-label {
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.chart-table { margin-top: 1.4rem; font-size: var(--step--1); }
.chart-table summary {
    cursor: pointer;
    color: var(--odoo);
    padding: .4rem 0;
}
.chart-table summary:hover { color: var(--paper); }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.chart-table th, .chart-table td {
    border-bottom: 1px solid var(--seam);
    padding: .5rem .6rem;
    text-align: start;
    font-weight: 400;
}
.chart-table thead th { color: var(--muted); font-family: 'IBM Plex Mono', monospace; }
.chart-table tbody th { font-weight: 500; white-space: nowrap; }
.chart-table td { font-family: 'IBM Plex Mono', monospace; }
.swatch {
    display: inline-block;
    width: .6rem; height: .6rem;
    border-radius: 2px;
    margin-inline-end: .5rem;
    vertical-align: baseline;
}