/* Tacit landing — the site's own changes on top of the handoffs (CHANGES.md lists them, with dates).
   v11.css and v13.css are the designs as handed off; nothing here edits them, it only adds. *//* replay: a faint circular arrow in the bottom-right corner of every illustration. It sits on the figure, not
   in the box, because the box is greyed and blurred until its row is hovered and the control must not be. */

.ail2{position:relative}
.ail-replay{position:absolute;right:10px;bottom:10px;z-index:3;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);opacity:.2;cursor:pointer;transition:opacity .3s var(--eo)}
.ail-replay svg{width:12px;height:12px}
.ail-replay:hover,.ail-replay:focus-visible{opacity:.65}
.ail-replay:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media (hover:none){.ail-replay{opacity:.32}}/* "Flagship" as a tag beside "Analyse" */

/* language: EN on, DE present but not yet available. Mirrors the CTA's two grounds (on the hero, after it). */

.nav-right{display:flex;align-items:center;gap:12px;margin-left:auto}
@media (min-width:1024px){.nav-right{justify-self:end;margin-left:0}}
.lang{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid rgba(24,49,30,.18);border-radius:999px;font:500 11px/1 var(--font-mono);letter-spacing:.08em}
.lang-b{height:24px;padding:0 9px;border:0;border-radius:999px;background:none;color:inherit;font:inherit;letter-spacing:inherit;cursor:pointer}
a.lang-b{display:inline-flex;align-items:center;text-decoration:none}
.lang-b[aria-current="true"]{background:var(--pine-700);color:#f5f1e7;cursor:default}
.lang-b:not([aria-current="true"]):hover{background:rgba(24,49,30,.08)}
.lang-b:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.nav.on-dark .lang{border-color:rgba(241,239,228,.28)}
.nav.on-dark .lang-b[aria-current="true"]{background:#f1efe4;color:var(--pine-800)}
.nav.on-dark .lang-b:not([aria-current="true"]):hover{background:rgba(241,239,228,.12)}
@media (max-width:479px){.lang{letter-spacing:.04em}.lang-b{padding:0 7px}.nav-right{gap:8px}}/* one window (review, 2026-10-01): the header and the explorer share one full-bleed surface carrying the stage's own
   gradient, so the stage is no longer a lighter rectangle inside a bone section; stacked layouts bleed into both gutters.
   The idle label is empty and the hint is gone; the empty label collapses so the copy keeps its place. */

.sx-window{background:radial-gradient(70% 70% at 55% 58%,#f9f6ee,#efe9dc)}/* the grid stops clipping (the reference's overflow:hidden is what cut the shadow at the column's edge); the canvas itself
   is sized by v13.js to reach the window's right edge, and each .sec clips at the screen's edge */

.sx-app{overflow:visible}
.sx-vp{background:none}
.sx-vp canvas{right:auto}
@media (max-width:899px){.sx-vp{margin:0 calc(-1 * var(--gut))}.sx-vp canvas{width:100%!important}}
.sx-dk:empty{display:none}/* edge to edge (review): the hairline above every section header spans the screen, and so do the AI-apps rows — their
   line and their hit area, so the illustration is in colour wherever the cursor is on the row. The content keeps the
   column: the list is a section-level block and each row pads itself by the column's inset. Text-only rows elsewhere
   stay in the column; a line running past a short row reads like an empty table. *//* the line overshoots both ways and each section clips it at its own edges (overflow-x:clip scrolls nothing, so sticky
   still works); 100vw would include a classic scrollbar and poke past the edge */

.sec{overflow-x:clip}
.sh::before{left:-100vw;right:-100vw}

.ar2{margin:0;padding-left:var(--inset);padding-right:var(--inset)}
.ar2::before{left:var(--inset)}/* the flagship keeps its tint, now as a full-width band (its rounded panel would sit oddly inside a full-width row) */

/* rollout (review): the runway is .qx (its height set by v11.js), the sticky stage is .qx-stage, and the track's clip box
   is full-bleed with the column's inset as its padding, so cards slide out through the screen's edge, not the column's. */

.qx{--inset:max(var(--gut),calc((100% - var(--max)) / 2 + var(--gut)));margin-top:0}
.qx-pin{margin-top:clamp(20px,2vw,32px);padding:4px var(--inset) 8px}
@media (min-width:761px){.qx-stage{position:sticky}.qx-pin{position:static}}/* the build (review item 11): while the stack builds, the explorer pins under the nav; v13.js sets the runway's height and
   the pin's top, and removes both once the stack is built */

.sx-run.sx-pin .sx-app{position:sticky}/* the copy's room (review, item 13): the text starts on the page column, where "01" and every other section's text
   start (the reference's left padding sat against its own window's edge), and the column takes 36% instead of 30%, so
   every layer title holds one line at every desktop width; the stage narrows with it, and the camera's fit makes the
   stack smaller and moves it right by the same measure */

@media (min-width:900px){.sx-app{grid-template-columns:minmax(300px,36%) minmax(0,1fr)}.sx-side{padding-left:0}}
@media (max-width:899px){.sx-side{padding-left:0;padding-right:0}}/* the list never moves (review, item 14): every copy is laid out invisibly in one slot with the visible one (v13.js), so
   the slot is as tall as the tallest copy and the visible copy sits on its floor, a constant distance above the list */

.sx-copy{display:grid}
.sx-copy>.sx-desc{grid-area:1/1;align-self:end}
.sx-ghost{visibility:hidden;pointer-events:none}/* stacked (phones): the copy reads straight on from the header, so it sits at the slot's top and the spare room goes above
   the list rather than under "01" */

@media (max-width:899px){.sx-copy>.sx-desc{align-self:start}}/* a wider page (review, item 15): on wide screens the content column grows from 1248 px to 1440 px (--max counts the two
   gutters), the measure Palantir's page uses at the same screen; at 1360 px and narrower nothing changes. The name section
   kept its own narrower column (1360 with 96 px pads); it now shares the page's column and gutter, so its edges line up. */

:root{--max:1552px}
.tn-in{max-width:var(--max);padding-left:var(--gut);padding-right:var(--gut)}/* the closing headline's lines are blocks that wrap on their own; wider, "knows." fell onto a line by itself, so each line
   balances (at 1248 px it already broke evenly, so nothing changes there) */

.cl .ml>span{text-wrap:balance}/* section 03 (item 18): the rows are examples, said once above them */

/* phones: v11.css restates the three desktop columns after its phone rule, so the rows overlapped; one column again *//* the flagship (item 20): the Analyst row carries the brand gradient — coral, blush, lavender, sage, the closing section's
   colours — as a soft mesh across the band, with the same gradient as a hairline on its top and bottom edges */

/* the flagship's own call to action (item 22): opens the same email form as every demo button, source "Request an Analyst demo" */

/* a button's arrow shares the class .ar with v11's old row style (padding + a top hairline), which drew a stray dash above every pine button */

.btn .ar{padding:0;border-top:0}/* section 09 (item 25): the pull quote sits centred in its section */

.svc-pull{text-align:center}/* the pull quote closes the rollout (item 27): after the timeline is released, with the section's own padding below it */

.qx-pull{margin:clamp(96px,10vw,160px) auto 0;max-width:20em}
#deployment{padding-bottom:0}/* the next section's top padding is the quote's room below, so above and below match */ 
.qx-pull .ml>span{text-wrap:balance}/* ===== spacing system (review, item 28) =====================================================================
   One fluid scale, five steps, each named by the relationship it separates — not by the section it sits in.
   Every step grows with the window between a phone minimum and a wide-screen maximum (~1.5x per step).

     --sp-1  a title and its intro line                         20 → 32 px
     --sp-2  a block and its own call to action or caption      40 → 64 px
     --sp-3  a section's header, title or intro → its content   64 → 104 px
     --sp-4  two major blocks inside one section                 96 → 144 px
     --sp-5  a section's own top and bottom padding             112 → 208 px   (so sections sit 2x --sp-5 apart)

   "Tight" sections are gone: every section breathes the same. Deliberate exceptions, untouched: the hero (one
   screen), "How it works" (its runway and the hero fade are tuned to its padding), and the footer. */

:root{--sp-1:clamp(20px,2vw,32px);--sp-2:clamp(40px,4vw,64px);--sp-3:clamp(64px,6.5vw,104px);--sp-4:clamp(96px,9vw,144px);--sp-5:clamp(112px,13vw,208px)}
.sec,.sec-tight{padding-top:var(--sp-5);padding-bottom:var(--sp-5)}
.close{padding-bottom:var(--sp-5)}
.sh{margin-bottom:var(--sp-3)}
.lede{margin-top:var(--sp-1)}
#applications .lede{margin-bottom:var(--sp-3)}

.figs,.vs{margin-top:var(--sp-3)}
.bring{margin-top:var(--sp-4)}
.crew,.pr-cta,.cl-cta{margin-top:var(--sp-2)}
.ar2{padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.qx-pull{margin-top:var(--sp-4)}
.tn-def{padding:var(--sp-4) 0}
.tn-ex{padding:var(--sp-4) 0 var(--sp-5)}/* the name section (item 30): the knowledge row leads; its summary follows, small, centred, italic; the closing line is gone */

.tn-kinds{margin-top:0}
.tn-sum{max-width:34em;margin:var(--sp-2) auto 0;font:italic 400 clamp(17px,1.5vw,21px)/1.5 var(--font-display);color:var(--tn-ink2);text-align:center;text-wrap:balance}/* section 04 (item 32): a quiet index says the list below is long — eleven dots, one per app, coloured by kind (Define,
   Analyse, Find, Understand, Build, Act), each a link to its row with its name on hover. Mono label, like the page's kickers */

/* hero schematic (item 35): the links between the nodes stayed visible from the first frame (the dash trick that should
   hide them is defeated by non-scaling strokes), so they are hidden outright until the planes and their boxes are in,
   then drawn in last, and quieter than the boxes */

.sch-hero .s-l{stroke:rgba(241,239,228,.1)}
.hero .s-l:not(.s-l-ai){opacity:0}
.hero.go .s-l:not(.s-l-ai){animation:ld 1.3s var(--eo) 2.4s forwards,fi .9s var(--eo) 2.4s forwards}
.hero.go .s-l-ai{animation-delay:2.8s}
@media (prefers-reduced-motion:reduce){.hero .s-l:not(.s-l-ai){opacity:1}}/* language (item 36): plain text, not a control — "EN / DE", the current language in full ink and weight, the other
   muted; no pill, no border, no fill (on the hero's dark ground too). Covers both the button and the link markup. */

.lang{gap:0;padding:0;border:0!important}
.lang-b{height:auto;padding:2px 1px;background:none!important;color:inherit!important;opacity:.45;font-weight:500}
.lang-b[aria-pressed="true"],.lang-b[aria-current="true"]{opacity:1;font-weight:700}
.lang-b:disabled{opacity:.45}
.lang-b+.lang-b::before{content:"/";display:inline-block;margin:0 6px 0 5px;font-weight:400;opacity:.6}
.lang-b:not([aria-pressed="true"]):not([aria-current="true"]):not(:disabled):hover{opacity:.8}/* the quiet switch needs air before the button (item 37) */

.nav-right{gap:32px}
@media (max-width:479px){.nav-right{gap:16px}}/* colour follows the scroll (item 38): the row nearest the screen's middle — the one playing — is in colour; a hovered
   row takes the colour while the cursor is on it */

.ar2.is-live .ail2 .ail-box{filter:none}
/* section 04's index (item 39): just the label, centred, right above the first row's divider — no dots */

/* the engineers section folds into the rollout (item 49): after the pull quote come the team's past employers and the
   seat-model / Tacit-model comparison; the section ends with its normal padding again */

#deployment{padding-bottom:var(--sp-5)}
.qx-more .crew{margin-top:var(--sp-4)}
.qx-more .vs{margin-top:var(--sp-3)}/* 05 Further use cases — the list design (Use Cases List v4): headline left, lede + a two-column list right; hover opens a line. */

.uc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);padding-top:var(--sp-2);border-top:1px solid var(--hair)}
.uc-h{margin:0;font:400 clamp(40px,4.6vw,68px)/1.02 var(--font-display);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.uc .lede{margin:0;max-width:34em}
.uc-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.5vw,40px);margin:var(--sp-2) 0 0;padding:0;list-style:none}
.js .uc-l.seq>*{transition-delay:calc(var(--i,0) * 60ms)}
.uc-i{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr) 12px;align-items:start;column-gap:14px;padding:18px 0 17px;border-top:1px solid var(--hair);outline:none;cursor:default}
.uc-i:nth-last-child(-n+2){border-bottom:1px solid var(--hair)}
.uc-ic{display:grid;place-items:center;height:22px;color:var(--ink3);transition:color .4s cubic-bezier(.22,.7,.3,1)}
.uc-ic svg{width:18px;height:18px}
.uc-t h3{margin:0;font:500 clamp(17px,1.35vw,20px)/1.1 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.uc-dw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.22,.7,.3,1)}
.uc-dw p{min-height:0;overflow:hidden;margin:0;font:400 14.5px/1.45 var(--font-sans);color:var(--ink2);opacity:0;transform:translateY(-3px);transition:opacity .4s cubic-bezier(.22,.7,.3,1),transform .4s cubic-bezier(.22,.7,.3,1)}
.uc-x{position:relative;width:12px;height:22px}
.uc-x::before,.uc-x::after{content:"";position:absolute;left:0;top:10.5px;width:12px;height:1.2px;background:var(--ink3);transition:transform .4s cubic-bezier(.22,.7,.3,1)}
.uc-x::after{transform:rotate(90deg)}
.uc-i::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:linear-gradient(90deg,#ED8A6B,#B6B6E0 60%,#8FA286);transition:width .5s cubic-bezier(.22,.7,.3,1)}
.uc-i:is(:hover,:focus-visible) .uc-dw{grid-template-rows:1fr}
.uc-i:is(:hover,:focus-visible) .uc-dw p{padding-top:8px;opacity:1;transform:none}
.uc-i:is(:hover,:focus-visible) .uc-ic{color:var(--ink)}
.uc-i:is(:hover,:focus-visible) .uc-x::after{transform:rotate(0)}
.uc-i:is(:hover,:focus-visible)::before{width:100%}
.uc-i:focus-visible{box-shadow:0 0 0 2px #f5f1e7,0 0 0 3.5px var(--ink);border-radius:2px}
@media (hover:none),(prefers-reduced-motion:reduce){.uc-dw{grid-template-rows:1fr}.uc-dw p{padding-top:6px;opacity:1;transform:none}.uc-x{display:none}.uc-i{grid-template-columns:20px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.uc *,.uc *::before,.uc *::after{transition:none!important}}
@media (max-width:900px){.uc{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.uc-l{grid-template-columns:minmax(0,1fr)}.uc-i:nth-last-child(2){border-bottom:0}}/* 01 — the strip under the explorer: says in words what the stack shows (systems stay underneath, agents plug in on top). */

.sx-strip{margin:var(--sp-2) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.5vw,40px)}
.sx-s{display:grid;grid-template-columns:7.5em minmax(0,1fr);column-gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sx-s dt{font:500 11px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.sx-s dd{margin:0;display:flex;flex-direction:column;gap:4px}
.sx-s b{font:500 clamp(17px,1.35vw,20px)/1.25 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.sx-s span{font-size:14.5px;line-height:1.45;color:var(--ink2);hyphens:none}
@media (max-width:767px){.sx-strip{grid-template-columns:minmax(0,1fr)}.sx-s+.sx-s{border-top:0}}/* 02 What it holds (handoff design_handoff_landing_02_04, what-it-holds/README.md): replaces Benefits + Before & after. Scoped to .wh. */

.wh .lede{margin-top:clamp(20px,2vw,32px)}
.wh.dark .lede{color:var(--dk-ink2)}
.wh-grid{list-style:none;margin:clamp(64px,6.5vw,104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
.js .wh-grid.rv{opacity:1;transform:none}
.wh-c{--i:0;position:relative;grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:0;padding:8px 8px 0;border-radius:22px;background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px var(--hair2);cursor:default;transition:background-color .45s var(--eo),box-shadow .45s var(--eo),opacity .8s var(--eo) calc(var(--i)*120ms),transform .8s var(--eo) calc(var(--i)*120ms)}
.wh-c:nth-child(2){--i:1;--dot:#F5EAE2}.wh-c:nth-child(3){--i:2;--dot:#B6B6E0}.wh-c:nth-child(4){--i:3;--dot:#8FA286}.wh-c:nth-child(1){--dot:#ED8A6B}
.js .wh-c{opacity:0;transform:translateY(14px)}.js .wh-grid.in .wh-c{opacity:1;transform:none}
.wh-fig{position:relative;aspect-ratio:320/200;overflow:hidden;border-radius:14px;background:repeating-linear-gradient(26.57deg,rgba(24,49,30,.07) 0 .6px,transparent .6px 14px),repeating-linear-gradient(-26.57deg,rgba(24,49,30,.07) 0 .6px,transparent .6px 14px),#f7f4ec;filter:grayscale(1) contrast(1.02);transition:filter .5s var(--eo),opacity .5s var(--eo)}
.wh-svg{display:block;width:100%;height:100%}/* isometric line drawings: ink 1px, one coral accent per card */

.wh-svg .tp{fill:#fffdf8}.wh-svg .sl{fill:#efe9dc}.wh-svg .sr{fill:#e4ddcc}
.wh-svg .tp,.wh-svg .sl,.wh-svg .sr,.wh-svg .ln,.wh-svg .bx{stroke:#18311e;stroke-width:1;stroke-linejoin:round}
.wh-svg .ln{fill:none}.wh-svg .soft{stroke-opacity:.45}.wh-svg .dash{stroke-dasharray:3 3}
.wh-svg .bx{fill:#fffdf8}.wh-svg .hd{fill:#efe9dc}
.wh-svg .dot{fill:#fffdf8;stroke:#18311e;stroke-width:1}.wh-svg .fill{fill:#18311e}
.wh-svg .t{font:500 7.5px/1 "JetBrains Mono",monospace;letter-spacing:.1em;fill:#18311e;text-transform:uppercase}
.wh-svg .t2{font:400 8px/1 "JetBrains Mono",monospace;fill:#18311e}
.wh-svg .mute{fill:#6b7567}
.wh-svg .ac{fill:#de6a4b}.wh-svg .acs{stroke:#de6a4b;fill:none;stroke-width:1.2}
.wh-svg .wt{stroke:#fff;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.wh-k{display:flex;align-items:center;gap:10px;margin:22px 12px 0;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.wh-k i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--dot)}
.wh-n{color:var(--ink3)}
.wh-t{margin:14px 12px 0;font:400 clamp(24px,2.1vw,32px)/1.08 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
.wh-p{margin:10px 12px 0;padding-bottom:26px;font-size:16px;line-height:1.5;color:var(--ink2);text-wrap:pretty}
.wh-c:hover,.wh-c:focus-visible,.wh-c.on{background:#fff;box-shadow:inset 0 0 0 1px var(--hair),0 24px 48px -32px rgba(24,49,30,.35)}
.wh-c:hover .wh-fig,.wh-c:focus-visible .wh-fig,.wh-c.on .wh-fig{filter:none}
.wh:not(.dark) .wh-c:nth-child(2) .wh-k i{box-shadow:inset 0 0 0 1px rgba(24,49,30,.25)}
.wh.dark .wh-c{background:rgba(241,239,228,.035);box-shadow:inset 0 0 0 1px rgba(241,239,228,.1)}
.wh.dark .wh-c:hover,.wh.dark .wh-c:focus-visible,.wh.dark .wh-c.on{background:rgba(241,239,228,.07);box-shadow:inset 0 0 0 1px rgba(241,239,228,.22)}
.wh.dark .wh-fig{opacity:.86}
.wh.dark .wh-c:hover .wh-fig,.wh.dark .wh-c:focus-visible .wh-fig,.wh.dark .wh-c.on .wh-fig{opacity:1}
.wh.dark .wh-k{color:var(--dk-ink)}.wh.dark .wh-n{color:var(--dk-ink3)}.wh.dark .wh-t{color:#f1efe4}.wh.dark .wh-p{color:var(--dk-ink2)}
@media (hover:none){.wh-fig{filter:none}.wh.dark .wh-fig{opacity:1}}
@media (max-width:1199px){.wh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wh-c{margin-bottom:16px}.wh-c:nth-last-child(-n+2){margin-bottom:0}}
@media (max-width:639px){.wh-grid{grid-template-columns:minmax(0,1fr)}.wh-c,.wh-c:nth-last-child(-n+2){display:flex;flex-direction:column;margin-bottom:12px}.wh-c:last-child{margin-bottom:0}.wh-t{font-size:26px}}
@supports not (grid-template-rows:subgrid){.wh-c{display:flex;flex-direction:column}}
@media (prefers-reduced-motion:reduce){.js .wh-c{opacity:1;transform:none}}/* 03 AI apps — sticky product tour (handoff design_handoff_landing_02_04, ai-apps/README.md). Scoped to .aa. */

.aa{--n:5;--step:26vh;--stage-max:calc(100vh - var(--nav) - 128px);--grad:linear-gradient(90deg,#ED8A6B,#B6B6E0 55%,#8FA286);padding-bottom:clamp(96px,10vw,144px)}
.aa .lede{margin-top:clamp(20px,2vw,32px)}
.aa-track{position:relative;margin-top:clamp(64px,6.5vw,104px)}
.aa-pin{display:flex;align-items:center}
.aa-grid{display:grid;grid-template-columns:minmax(300px,4fr) minmax(560px,8fr);gap:clamp(40px,4.4vw,64px);align-items:center;width:100%}/* list */

.aa-list{display:flex;flex-direction:column}
.aa-g{display:flex;align-items:center;gap:12px;margin:28px 0 6px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.aa-g:first-child{margin-top:0}
.aa-g::after{content:"";flex:1;height:1px;background:var(--hair2)}
.aa-it{position:relative;border-bottom:1px solid var(--hair2)}
.aa-it:last-child{border-bottom:0}
.aa-tab{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);align-items:baseline;gap:0 10px;width:100%;padding:14px 0 14px 2px;border:0;background:none;text-align:left;font:500 17px/1.3 var(--font-sans);color:var(--ink3);cursor:pointer;transition:color .3s var(--eo)}
.aa-tab:hover{color:var(--ink)}
.aa-tab:focus-visible{outline-offset:2px;border-radius:6px}
.aa-n{font:400 11px/1 var(--font-mono);letter-spacing:.04em;color:var(--ink3);transition:color .3s}
.aa-t{text-wrap:balance}
.aa-tag{display:inline-block;margin-left:8px;padding:3px 7px 2px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hair);font:500 9.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);vertical-align:3px}
.aa-it.on .aa-tab{color:var(--ink)}
.aa-it.on .aa-n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.aa-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--eo)}
.aa-body>div{min-height:0;overflow:hidden;padding-left:40px}
.aa-it.on .aa-body{grid-template-rows:1fr}
.aa-body p{max-width:30em;padding-bottom:18px;font-size:16px;line-height:1.5;color:var(--ink2);opacity:0;transform:translateY(4px);transition:opacity .3s var(--eo),transform .3s var(--eo)}
.aa-it.on .aa-body p{opacity:1;transform:none;transition-delay:.12s}
.aa-body .btn{margin:-2px 0 20px;opacity:0;transition:opacity .3s var(--eo)}
.aa-it.on .aa-body .btn{opacity:1;transition-delay:.18s}
.aa-it:not(.on) .aa-body .btn{visibility:hidden}/* stage */

.aa-stagecol{display:flex;flex-direction:column;align-items:flex-end;gap:16px;min-width:0}
.aa-prog{display:flex;align-items:center;gap:16px;width:min(100%,calc(var(--stage-max) * 460 / 280))}
.aa-count{flex:none;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.aa-count b{font-weight:500;color:var(--ink)}
.aa-seg{flex:1;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.aa-seg i{position:relative;height:2px;border-radius:2px;background:var(--hair);overflow:hidden}
.aa-seg i b{position:absolute;inset:0;border-radius:inherit;background:var(--grad);background-size:calc(var(--n) * 100%) 100%;background-position:calc(var(--k) * 100% / (var(--n) - 1)) 0;transform:scaleX(var(--f,0));transform-origin:0 50%}
.aa-seg i.done b{transform:scaleX(1);background:var(--ink)}
.aa-stage{position:relative;width:min(100%,calc(var(--stage-max) * 460 / 280));aspect-ratio:460/280;border-radius:16px;overflow:hidden;isolation:isolate;background:#efeee8;box-shadow:0 1px 0 rgba(24,49,30,.04),0 24px 48px -32px rgba(24,49,30,.35)}
.aa-vis{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .28s cubic-bezier(.4,0,1,1),visibility 0s linear .28s}
.aa-vis.on{opacity:1;visibility:visible;z-index:1;transition:opacity .42s var(--eo) .06s,visibility 0s}
.aa-vis>.aa-box{width:100%;aspect-ratio:460/280}
.aa-vis[data-aspect="760/470"]>.aa-box{width:auto;height:100%;aspect-ratio:760/470}/* closing block */

.aa-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 48px;align-items:center;margin-top:clamp(96px,10vw,144px);padding:clamp(28px,3vw,44px);border-radius:24px;background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px var(--hair2)}
.aa-demo h3{font:400 clamp(30px,3vw,44px)/1.05 var(--font-display);letter-spacing:-.025em}
.aa-demo p{margin-top:10px;font-size:16px;line-height:1.5;color:var(--ink2)}
.aa-demo label{display:block;margin-bottom:8px;font:500 11px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.aa-row{display:flex;gap:8px;padding:4px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--hair)}
.aa-row input{flex:1;min-width:0;height:44px;padding:0 16px;border:0;background:transparent;font:400 16px/1 var(--font-sans);color:var(--ink);outline:none}
.aa-row:focus-within{box-shadow:inset 0 0 0 1.5px var(--ink)}/* desktop sticky tour (JS adds .aa--tour) */

.aa--tour .aa-track{height:calc(100vh - var(--nav) + (var(--n) - 1) * var(--step))}
.aa--tour .aa-pin{position:sticky;top:var(--nav);height:calc(100vh - var(--nav))}/* 768–1023: stage on top, list below, click only */

@media (max-width:1023px){.aa-grid{grid-template-columns:minmax(0,1fr)}.aa-stagecol{order:-1;align-items:stretch}.aa-prog,.aa-stage{width:100%}}/* stacked: phone (<768) and reduced motion. JS moves each visual under its item */

.aa--stack .aa-stagecol{display:none}
.aa--stack .aa-grid{grid-template-columns:minmax(0,1fr)}
.aa--stack .aa-body{grid-template-rows:1fr}
.aa--stack .aa-body p,.aa--stack .aa-body .btn{opacity:1;transform:none;visibility:visible}
.aa--stack .aa-tab{color:var(--ink);cursor:default;padding-top:20px}
.aa--stack .aa-it .aa-n{color:var(--ink3)}
.aa--stack .aa-vis{position:relative;inset:auto;opacity:1;visibility:visible;margin:4px 0 24px 40px;aspect-ratio:460/280;border-radius:16px;overflow:hidden;background:#efeee8;box-shadow:0 1px 0 rgba(24,49,30,.04),0 24px 48px -32px rgba(24,49,30,.35)}
.aa--stack .aa-body .btn{margin-bottom:8px}
@media (min-width:768px){.aa--stack .aa-list{max-width:820px}}
@media (max-width:767px){.aa--stack .aa-body>div{padding-left:0}.aa--stack .aa-vis{margin-left:0}.aa-tab{font-size:18px}.aa-demo{grid-template-columns:minmax(0,1fr)}.aa-row{flex-direction:column;border-radius:20px}.aa-row .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.aa *{transition:none!important}}/* site wiring for the tour: the live illustrations keep .ail-box scaling (v11.js) but the stage clips them, and the Analyst scales itself */

.aa .ail-box{contain:none;border-radius:0;box-shadow:none}
.aa .an-box>iframe{width:100%;height:100%;transform:none}
.aa .sh{margin-bottom:var(--sp-3)}
.aa-demo .demo-l{color:var(--ink3)}
.aa-demo.done .aa-row,.aa-demo.done .demo-l{display:none}
.aa-demo.done .demo-msg{font:400 22px/1.3 var(--font-display);color:var(--ink)}
/* Hero → 01 hand-off (CHANGES.md item 56). The hero's coral / periwinkle / sage glows used to stop at the hero's last
   120px and the surface behind was plain green, so the colours ended on a line. Now: the hero dissolves over ~300px,
   the same glows are painted behind the seam and fade downwards, the surface reaches bone exactly where the explorer
   panel starts (#platform's padding-top), and the panel's top edge is bone too. */
:root{--seam:calc(clamp(88px,11vw,168px) + 18vh)}
.hero{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 300px),rgba(0,0,0,.82) calc(100% - 210px),rgba(0,0,0,.45) calc(100% - 120px),rgba(0,0,0,.14) calc(100% - 48px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 300px),rgba(0,0,0,.82) calc(100% - 210px),rgba(0,0,0,.45) calc(100% - 120px),rgba(0,0,0,.14) calc(100% - 48px),transparent 100%)}
html{background:linear-gradient(180deg,#142818 0,#142818 calc(var(--heroH,100vh) - 240px),#1a3020 calc(var(--heroH,100vh) - 80px),#2c4331 calc(var(--heroH,100vh) + var(--seam) * .18),#5f705d calc(var(--heroH,100vh) + var(--seam) * .4),#a9b09f calc(var(--heroH,100vh) + var(--seam) * .62),#dcdacb calc(var(--heroH,100vh) + var(--seam) * .82),#f5f1e7 calc(var(--heroH,100vh) + var(--seam))) no-repeat,#f5f1e7}
body{position:relative;background:transparent}
body::before{content:"";position:absolute;left:0;right:0;top:calc(var(--heroH,100vh) - 420px);height:calc(420px + var(--seam) + 120px);z-index:-1;pointer-events:none;
 background:radial-gradient(37% 40% at 97% 40%,rgba(182,182,224,.55),rgba(182,182,224,0) 72%),radial-gradient(40% 40% at 80% 54%,rgba(237,138,107,.46),rgba(237,138,107,0) 72%),radial-gradient(32% 30% at 90% 58%,rgba(245,234,226,.35),rgba(245,234,226,0) 70%),radial-gradient(47% 38% at 52% 56%,rgba(143,162,134,.4),rgba(143,162,134,0) 72%);
 -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 22%,#000 52%,transparent 100%)}
.sx-window{background:linear-gradient(180deg,#f5f1e7 0,rgba(245,241,231,0) 160px),radial-gradient(70% 70% at 55% 58%,#f9f6ee,#efe9dc)}

/* 03 AI apps list, simplified (CHANGES.md item 57): no group labels, no numbers. Rows in the style of 04's list —
   hairlines, sans titles, a plus that turns to minus, and the brand gradient drawn along the open row's top edge. */
.aa-it{border-bottom:0;border-top:1px solid var(--hair)}
.aa-it:last-child{border-bottom:1px solid var(--hair)}
.aa-it::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:linear-gradient(90deg,#ED8A6B,#B6B6E0 60%,#8FA286);transition:width .5s cubic-bezier(.22,.7,.3,1)}
.aa-it.on::before{width:100%}
.aa-tab{grid-template-columns:minmax(0,1fr) 12px;gap:0 16px;padding:18px 0 17px;font:500 clamp(17px,1.35vw,20px)/1.25 var(--font-sans);letter-spacing:-.01em}
.aa-body>div{padding-left:0}
.aa-x{position:relative;align-self:center;width:12px;height:12px}
.aa-x::before,.aa-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)}
.aa-x::after{transform:rotate(90deg)}
.aa-it.on .aa-x::after{transform:rotate(0)}
.aa--stack .aa-x{display:none}
.aa--stack .aa-it::before{width:100%}
.aa--stack .aa-vis{margin-left:0}
@media (prefers-reduced-motion:reduce){.aa-it::before,.aa-x::before,.aa-x::after{transition:none}}

/* one progress bar instead of a counter and five segments (CHANGES.md item 57) */
.aa-bar{position:relative;display:block;flex:1;height:2px;border-radius:2px;background:var(--hair2);overflow:hidden}
.aa-bar b{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#ED8A6B,#B6B6E0 55%,#8FA286);transform:scaleX(0);transform-origin:0 50%}

/* 01 explorer, quieter (CHANGES.md item 58): the "Layer 2 · The engine" kicker repeated the list below it, so it goes;
   the layer on show (or under the cursor) is set a little bolder instead. */
.sx-dk{display:none}
.sx-rail button:hover,.sx-rail button[aria-current="true"]{font-weight:600}
/* the explorer's warm panel dissolves into the page at its foot too, so the bone runs on unbroken to section 02 */
.sx-window{background:linear-gradient(180deg,#f5f1e7 0,rgba(245,241,231,0) 160px),linear-gradient(0deg,#f5f1e7 0,rgba(245,241,231,0) 220px),radial-gradient(70% 70% at 55% 58%,#f9f6ee,#efe9dc)}

/* Fewer lines (CHANGES.md item 59). AI apps: no bar above the stage, rows divided by a hairline below each one only
   (none above the first), the open row's gradient drawn along its foot; list and stage share a top edge.
   04: the rule between the header and the headline goes; the section rule above "04" is the one line. */
.aa-it{border-top:0;border-bottom:1px solid var(--hair)}
.aa-it::before{top:auto;bottom:-1px}
.aa-tab{padding-top:16px}
.aa-it:first-child .aa-tab{padding-top:0}
.aa-grid{align-items:start}
.aa-stagecol{gap:0}
.uc{border-top:0;padding-top:0}
.aa--stack .aa-it::before{width:0}
/* one right-hand column for the page's two-column rows: 04, governance and the strip under the explorer all start their
   second column at the same place (half the content width, the 04 gap) */
.gov{border-top:0}
@media (min-width:900px){.gv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px)}}
.gv:first-child{padding-top:0}
.sx-strip{column-gap:clamp(32px,5vw,80px)}

/* ======== polish pass (2026-10-02), from the Claude Design handoff design_handoff_tacit_polish (CHANGES.md item 60) ======== */

/* ---------- 1 · vertical rhythm ---------- */

/* #1 sections sat 2×--sp-5 apart (374px at 1440) before every section rule; the top pad drops one step, so the
   rule sits --sp-5 + --sp-4 below the previous content. "How it works" keeps its tuned padding (hero seam, runway). */
.sec:not(#platform){padding-top:var(--sp-4)}

/* #2 AI apps: the lede's bottom margin and the track's top margin were both --sp-3, so lede → list was 2×--sp-3 */
#applications .lede{margin-bottom:0}
.aa-track{margin-top:var(--sp-3)}
/* #3 AI apps: off-scale 96→144 for the form's gap and the section's foot */
.aa{padding-bottom:var(--sp-5)}
.aa-demo{margin-top:var(--sp-4)}

/* #4 Rollout: headline → timeline was 101 + 29 + 12 = 142px; now --sp-3 to the line, like every header → content */
.dep-h{margin-bottom:0}
.qx-pin{margin-top:calc(var(--sp-3) - 12px)}
/* #9 Rollout: the timeline's caption sat at an off-scale 36px */
.qfoot{margin-top:var(--sp-2)}

/* #7 Governance: rows padded at an off-scale 30→56; headline → text gap 18 (→ --sp-1 when stacked) */
.gv{padding-top:var(--sp-2);padding-bottom:var(--sp-2);row-gap:var(--sp-1)}
.gv:first-child{padding-top:0}

/* #10 04 stacked: headline → lede gap was the 32px column gap; headline → intro is --sp-1 everywhere else */
@media (max-width:900px){.uc{row-gap:var(--sp-1)}}

/* ---------- 2 · lines: one hairline per row, none that separate nothing ---------- */

/* #5 04 list: rows had a line above and the last two a line below; now one line under each row, as in 03 */
.uc-i{border-top:0;border-bottom:1px solid var(--hair)}
.uc-i::before{top:auto;bottom:-1px}
@media (max-width:560px){.uc-i:nth-last-child(2){border-bottom:1px solid var(--hair)}}

/* #6 01 strip: each cell drew a line above and below; the one above (under the explorer) stays */
.sx-s{border-bottom:0}
@media (max-width:767px){.sx-s+.sx-s{border-top:1px solid var(--hair)}}

/* #8 01 layer list: a rule above the first row plus one under every row */
.sx-rail{border-top:0}

/* #11 Governance: the line under the last row separated it from the section's padding only */
.gv:last-child{border-bottom:0;padding-bottom:0}

/* #12 06: a second full-width rule under the headline; the coloured ticks keep marking each figure */
.figs{border-top:0}

/* #13 05 comparison: the list had a rule above its first item and under every item */
.vs ul{border-top:0}

/* #14 05: the short gradient rule above the team logos sat in --sp-4 of space that already separates them */
.crew::before{display:none}

/* #15 name section: the fading rules either side of "Three kinds of knowledge" are decoration */
.tn-kinds{justify-content:center}
.tn-kinds::before,.tn-kinds::after{display:none}

/* ---------- 3 · alignment ---------- */

/* #16 06: the four figures sat on quarters (720px for the third at 1440); with the page's column gap the third
   figure starts on the right-hand column (756px), like 04, governance and the strip */
.figs{column-gap:clamp(32px,5vw,80px)}
.fg{padding-right:0}

/* ---------- 5 · type: one size per role ---------- */

/* #17 half-column headline: governance rows (32→68 at 4.4vw) match 04's headline (4.6vw, 68 cap) */
.gv h3{font-size:clamp(32px,4.6vw,68px)}
/* #18 text beside a half-column headline is a lede (04 already is): 17 → 17–20 fluid */
.gv p{font-size:clamp(17px,1.35vw,20px);line-height:1.5}
/* #19 block title: 24→32 at 2.2vw (Rollout cards); 02 cards were 2.1vw, the form heading 30→44 */
.wh-t{font-size:clamp(24px,2.2vw,32px)}
.aa-demo h3{font-size:clamp(24px,2.2vw,32px);line-height:1.08}
@media (max-width:639px){.wh-t{font-size:26px}}
/* #20 body: 15.5 / 15 → 16 */
.qc2 li{font-size:16px}
.qfoot{font-size:16px}

/* Removals from the polish audit, confirmed (CHANGES.md item 61): the explorer list shows the active layer by weight
   alone (no numbers, no dot; its "Layer" heading is gone from the markup); 02 cards lose their 01–04; the 06 ticks are
   one colour. The 05 caption and the 06 button are gone from the markup; the nav item for 05 reads "Rollout". */
.sx-rail button{grid-template-columns:minmax(0,1fr)}
.sx-rail button i,.sx-rail button::after{display:none}
.sx-rail button[aria-current="true"]{color:var(--ink)}
.wh-n{display:none}
.fg-s::before{background:var(--lav)}

/* privacy note under both email forms (CHANGES.md item 62) */
.form-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink3)}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.lm-note{margin-top:12px}