/* Tacit landing v25 — the same site rebuilt in structure and copy for a C-level reader (OUTLINE.md, CHANGES.md).
   It only adds to v11.css, v13.css and tacit.css and edits none of them: every colour, face, gradient and the
   --sp-1…--sp-5 scale used here is theirs. Section order: overview (new) · 01 the ontology (old 02 + 06) ·
   02 AI apps (old 03 + 04) · 03 your stack (old 01 + 07) · 04 how we work (old 05) · 05 next step (old 08) · the name. */

/* ---------- overview: the four things, one line each, in the seam under the hero (where the explorer started) ---------- */
#overview.sec{background:transparent;padding-top:var(--seam);padding-bottom:var(--sp-4)}
.ix-l{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ix-l>li{border-bottom:1px solid var(--hair)}
.ix-r{position:relative;display:grid;grid-template-columns:3em minmax(0,1fr) minmax(0,1fr) 20px;align-items:baseline;column-gap:clamp(16px,2.5vw,40px);padding:clamp(22px,2.4vw,36px) 0;color:var(--ink);text-decoration:none}
.ix-r:hover{color:var(--ink)}
.ix-r::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:linear-gradient(90deg,#ED8A6B,#B6B6E0 60%,#8FA286);transition:width .5s var(--eo)}
.ix-r:hover::after,.ix-r:focus-visible::after{width:100%}
.ix-r:focus-visible{outline-offset:4px;border-radius:4px}
.ix-n{font:500 11px/1 var(--font-mono);letter-spacing:.1em;color:var(--ink3)}
.ix-t{font:400 clamp(32px,3.8vw,58px)/1.04 var(--font-display);letter-spacing:-.025em;text-wrap:balance}
.ix-d{font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--ink2);text-wrap:pretty}
.ix-a{justify-self:end;font-size:18px;line-height:1;color:var(--ink3);transition:transform .4s var(--eo),color .2s}
.ix-r:hover .ix-a,.ix-r:focus-visible .ix-a{transform:translateX(4px);color:var(--ink)}
@media (max-width:767px){.ix-r{grid-template-columns:2.4em minmax(0,1fr) 16px;row-gap:8px}.ix-d{grid-column:2;grid-row:2}.ix-a{grid-column:3;grid-row:1}}
@media (prefers-reduced-motion:reduce){.ix-r::after,.ix-a{transition:none}}

/* ---------- the explorer now follows the AI apps, so its section takes the page's normal top padding ---------- */
#platform.sec{padding-top:var(--sp-4)}

/* ---------- 01 the ontology: a question, the picture that answers it, the four parts, the reference build ---------- */
.on-q{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-2) clamp(32px,5vw,80px);align-items:center}
.on-h{font:400 clamp(36px,4.6vw,68px)/1.02 var(--font-display);letter-spacing:-.03em;color:#f1efe4}
.on-h .ml>span{text-wrap:balance}
.on-q .lede{max-width:26em}
.on-fig{margin:0}
.on-box{box-shadow:0 1px 0 rgba(0,0,0,.18),0 32px 64px -32px rgba(0,0,0,.65)}
.on-fig figcaption{margin-top:16px;max-width:36em;font-size:16px;line-height:1.5;color:var(--dk-ink2);text-wrap:pretty}
.on-k{margin:var(--sp-4) 0 0;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dk-ink3)}
.wh .on-k+.wh-grid{margin-top:var(--sp-1)}
.on-ref{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-1) clamp(32px,5vw,80px);align-items:end;margin-top:var(--sp-3);padding-top:var(--sp-1);border-top:1px solid var(--dk-hair)}
.on-rk{max-width:22em;font:500 11px/1.6 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dk-ink3)}
.on-rf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.on-rf p{margin:0}
.on-rv{display:block;font:300 clamp(44px,4.6vw,72px)/.9 var(--font-display);letter-spacing:-.04em;color:#f1efe4;font-variant-numeric:lining-nums tabular-nums}
.on-rl{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--dk-ink2)}
@media (max-width:899px){.on-q,.on-ref{grid-template-columns:minmax(0,1fr)}}
@media (max-width:479px){.on-rf{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

/* ---------- 02 AI apps: the old "further use cases" list closes the section, after the tour ---------- */
.v25-uc{margin-top:var(--sp-4)}
.aa .uc .lede{margin-top:0}

/* ---------- 03 your stack: governance joins the strip under the explorer, two by two ---------- */
#governance::before{content:none}

/* ---------- 04 how we work: a line under the headline; the comparison now comes before the team ---------- */
.dep-l{max-width:34em}
.qx-more .vs{margin-top:var(--sp-4)}
.qx-more .crew{margin-top:var(--sp-3)}

/* ---------- 05 next step: the email form that sat under the AI apps ---------- */
.close .aa-demo{margin-top:var(--sp-2)}

/* ---------- the name: one light band on the footer's pine: the word, then two short lines ---------- */
/* the name section (items 73, 74): the word and its meaning, then the tacit scale (site/ts.css) */
.tn3 .tn-k{color:var(--dk-ink3)}
.tn3-w{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin:14px 0 0;font-weight:400}
.tn3-w .tn-disp{font-size:clamp(56px,6vw,88px);line-height:.9;color:var(--dk-ink)}
.tn3-ph{font:400 15px/1 var(--font-mono);color:var(--dk-ink3);white-space:nowrap}
.tn3-ph i{margin-left:8px;font:italic 400 19px/1 var(--font-display);color:var(--dk-ink2)}
.tn3-m{margin:18px 0 0;font:italic 400 clamp(20px,1.8vw,25px)/1.3 var(--font-display);letter-spacing:-.01em;color:var(--dk-ink)}
.ts-head{margin-bottom:var(--sp-2)}

/* ---------- footer: the Resources column (three links to "#") is gone ---------- */
@media (min-width:900px){.ftop{grid-template-columns:minmax(0,2.2fr) repeat(3,minmax(0,1fr))}}

/* The ontology, the four cards (CHANGES.md items 67, 69): the noun is the headline — Data · Logic · Actions · Governance —
   so the four parts read at a glance; the line under it ("Connect every system once.") is the paragraph's own size, in bold. */
.wh h3.wh-k{margin:22px 12px 0;gap:12px;font:400 clamp(30px,2.6vw,40px)/1 var(--font-display);letter-spacing:-.02em;text-transform:none;color:#f1efe4}
.wh h3.wh-k i{width:9px;height:9px}
.wh p.wh-t{margin:14px 12px 0;font:600 16px/1.5 var(--font-sans);letter-spacing:0;color:#f1efe4}
.wh p.wh-t+.wh-p{margin-top:2px}
@media (max-width:639px){.wh h3.wh-k{font-size:32px}}

/* one label tier (item 75): every small mono caps label (kickers, section names, strip and form labels, footer
   headings) is the same size and tracking; colour and spacing stay with each one */
:root{--fs-label:13px}
.sh,.on-k,.on-rk,.sx-s dt,.vs-k,.vs-s span,.aa-demo label,.demo-l,.lm-l,.tn-k,.fh{font-size:var(--fs-label);letter-spacing:.1em}

/* the uses list (item 80): two independent columns, so opening an item moves only the items under it, never the other
   column; the items keep their places (left 1·3·5·7, right 2·4·6·8) and phones keep the original order */
.uc-cols{align-items:start}
.uc-col{margin:0;padding:0;list-style:none;min-width:0}
.js .uc-cols.seq>*{opacity:1;transform:none;transition:none}
.js .uc-cols.seq .uc-i{opacity:0;transform:translateY(14px);transition:opacity .8s var(--eo),transform .8s var(--eo);transition-delay:calc(var(--i,0) * 60ms)}
.js .uc-cols.seq.in .uc-i{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .uc-cols.seq .uc-i{opacity:1!important;transform:none!important}}
@media (max-width:560px){.uc-cols{display:flex;flex-direction:column}.uc-col{display:contents}
 .uc-col:first-child .uc-i:nth-child(1){order:1}.uc-col:last-child .uc-i:nth-child(1){order:2}
 .uc-col:first-child .uc-i:nth-child(2){order:3}.uc-col:last-child .uc-i:nth-child(2){order:4}
 .uc-col:first-child .uc-i:nth-child(3){order:5}.uc-col:last-child .uc-i:nth-child(3){order:6}
 .uc-col:first-child .uc-i:nth-child(4){order:7}.uc-col:last-child .uc-i:nth-child(4){order:8}}

/* the explorer's build steps (item 83): seven small dots under the stage while the stack builds; the current step is a
   coral pill, finished ones ink, the rest faint; they fade in with the build and out once it is done */
.sx-dots{position:absolute;left:50%;bottom:clamp(14px,3vh,30px);z-index:2;display:flex;align-items:center;gap:6px;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .6s var(--eo)}
.sx-dots.live{opacity:1}
.sx-dots i{display:block;width:5px;height:5px;border-radius:3px;background:var(--ink);opacity:.16;transition:width .4s var(--eo),opacity .4s var(--eo),background-color .4s var(--eo)}
.sx-dots i.ok{opacity:.5}
.sx-dots i.on{width:14px;opacity:1;background:#de6a4b}
@media (prefers-reduced-motion:reduce){.sx-dots,.sx-dots i{transition:none}}

/* the explorer's panel as an accordion (item 89): the opening line is the headline; the six layers are rows in the
   panel's own serif, smaller so each stays on one line; the open row shows its description, as in Benefits */
.sxi .sx-chips:empty{display:none}
.sxi .sx-desc{min-height:0}
.sxi .sx-rail{display:block;gap:0;border-top:1px solid var(--hair)}
.sxi .sxa-it{position:relative;border-bottom:1px solid var(--hair)}
.sxi .sxa-it::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:linear-gradient(90deg,#ED8A6B,#B6B6E0 60%,#8FA286);transition:width .5s cubic-bezier(.22,.7,.3,1)}
.sxi .sxa-it.on::after{width:100%}
.sxi .sx-rail button.sxa-tab{display:grid;grid-template-columns:minmax(0,1fr) 12px;align-items:center;gap:0 16px;width:100%;height:auto;padding:15px 0 14px;border:0;background:none;text-align:left;cursor:pointer;
 font:400 clamp(24px,2.2vw,32px)/1.12 var(--font-display);letter-spacing:-.03em;color:var(--ink3);transition:color .3s}
.sxi .sx-rail button.sxa-tab:hover,.sxi .sxa-it.on button.sxa-tab{color:var(--ink);font-weight:400}
.sxi .sx-rail button.sxa-tab::after{display:none}
.sxi .sx-rail button.sxa-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px}
.sxi .sxa-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sxi .sxa-x{position:relative;width:12px;height:12px}
.sxi .sxa-x::before,.sxi .sxa-x::after{content:"";position:absolute;left:0;top:5.4px;width:12px;height:1.2px;background:var(--ink3);transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.sxi .sxa-x::after{transform:rotate(90deg)}
.sxi .sxa-it.on .sxa-x::after{transform:rotate(0)}
.sxi .sxa-dw{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.7,.3,1)}
.sxi .sxa-d{display:block;min-height:0;overflow:hidden;max-width:30em;font:400 17px/1.5 var(--font-sans);letter-spacing:0;color:#44503f;text-wrap:pretty;opacity:0;transition:opacity .35s,padding .4s cubic-bezier(.22,.7,.3,1)}
.sxi .sxa-it.on .sxa-dw{grid-template-rows:1fr}
.sxi .sxa-it.on .sxa-d{opacity:1;padding-top:10px}
@media (max-height:800px){.sxi .sx-rail button.sxa-tab{padding:11px 0 10px;font-size:clamp(22px,1.9vw,28px)}.sxi .sxa-d{font-size:15.5px}}
@media (prefers-reduced-motion:reduce){.sxi .sxa-dw,.sxi .sxa-d,.sxi .sxa-it::after,.sxi .sxa-x::before,.sxi .sxa-x::after{transition:none}}

/* the Book a call card (item 90): both halves centred on one line; the label, input and note sit together as one
   group (the empty status line no longer pushes the note down); the input is capped; the line wraps to a tidy block */
.close .aa-demo .demo-c p{max-width:26em}
.close .aa-demo .demo-msg:empty{min-height:0;margin:0}
.close .aa-demo .form-note{margin-top:12px;font-size:14px;color:var(--ink3)}
@media (min-width:768px){.close .aa-demo{grid-template-columns:minmax(0,1fr) minmax(0,520px);justify-content:space-between;align-items:center;column-gap:clamp(32px,5vw,80px)}}

/* the explorer's label (items 91, 94): the panel's headline and line are gone (the rows say it); "03 Fits your systems"
   keeps its place and divider above the explorer and, like 04's, stays at the top while the explorer scrolls by */
.sxi .sx-copy{display:none}
@media (min-width:900px){.sxi .sx-window>.wrap>.sh{position:sticky;top:calc(var(--nav) + 16px);z-index:3}}