/* Tacit landing v27 (CHANGES.md items 84-86, 92): v25 with section 01 as one pine surface. The twin is v3
   (site/twin-v3.css): dark-first, frameless, with its own fading grid. Below, the "What does an ontology capture?"
   cards and the reference numbers sit on the same pine, unchanged. */
#outcomes.v27-tw{padding:0}
.v27-top{position:relative;padding:var(--sp-4) 0 0}
.v27-top .lede{color:var(--dk-ink2)}
.v27-band{position:relative;padding:var(--sp-4) 0 var(--sp-5)}
.v27-band .on-k{margin-top:0}

/* the twin (site/twin-v3.css, item 92) carries its own dark colours and grid; only the old frame's shadow (.on-box) is reset */
.v27-top .tw-fig{background:none;border-radius:0;box-shadow:none}

/* item 98: the twin gets more of the row (40/60 instead of 50/50); on phones it runs to the screen edges (its viewBox keeps a margin) */
@media (min-width:900px){.v27-top .on-q{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
@media (max-width:899px){.v27-top .on-fig{margin-inline:calc(-1 * var(--gut,16px))}}
/* item 100: 03's accordion in 02's list style (tacit.css .uc-i), without icons: sans titles in ink, 12 px plus, hairline under
   each row with the gradient line, 14.5 px description. Text and behaviour unchanged. */
.sxi .sx-rail{border-top:0}
.sxi .sx-rail button.sxa-tab,.sxi .sx-rail button.sxa-tab:hover,.sxi .sxa-it.on button.sxa-tab{grid-template-columns:minmax(0,1fr) 12px;align-items:start;column-gap:14px;padding:18px 0 17px;
 font:500 clamp(17px,1.35vw,20px)/1.1 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.sxi .sxa-x{width:12px;height:22px}
.sxi .sxa-x::before,.sxi .sxa-x::after{top:10.5px}
.sxi .sxa-d{max-width:none;font:400 14.5px/1.45 var(--font-sans);color:var(--ink2)}
.sxi .sxa-it.on .sxa-d{padding-top:8px}
@media (max-height:800px){.sxi .sx-rail button.sxa-tab{padding:18px 0 17px;font-size:clamp(17px,1.35vw,20px)}.sxi .sxa-d{font-size:14.5px}}
/* item 101: SaaS products vs Tacit. The SaaS lines are struck through in coral; "Success means" is the last row, as large as
   the others, under a stronger rule (ink on the light side, cream on pine). */
.qx-more .vs-a li{text-decoration-color:#de6a4b;text-decoration-thickness:1.5px}
.qx-more .vs li:last-child{border-bottom:0}
.qx-more .vs-s{display:block;margin-top:auto;padding-top:20px;border-top:1px solid var(--ink);font:400 clamp(20px,1.9vw,27px)/1.25 var(--font-display);letter-spacing:-.01em;color:var(--ink2)}
.qx-more .vs-s span{display:block;margin-bottom:10px}
.qx-more .vs-b .vs-s{border-top-color:rgba(241,239,228,.7);color:#f1efe4}
/* item 102: the tacit scale sits on the pine itself, like the twin in 01: no box, the drawing inverted (light lines on dark
   plates, the twin's palette), a faint grid behind it that fades out. The box's inner padding goes to the drawing (about 13%
   larger at the same height, so it still pins on an 800 px screen); on phones it runs to the screen edges. */
.ts-sec{overflow-x:clip}
.ts-sec .ts .ts-fig{overflow:visible;border-radius:0;box-shadow:none;background:none;isolation:isolate}
.ts-sec .ts .ts-fig::before{content:"";position:absolute;z-index:-1;inset:-8% -6%;pointer-events:none;background:repeating-linear-gradient(26.57deg,rgba(241,239,228,.075) 0 .6px,transparent .6px 14px),repeating-linear-gradient(-26.57deg,rgba(241,239,228,.075) 0 .6px,transparent .6px 14px);-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.ts-sec .ts .ts-svg{--ts-ink:#d9ddd1;padding:0}
.ts-sec .ts-svg .tp{fill:#1f3324}.ts-sec .ts-svg .sl{fill:#18291c}.ts-sec .ts-svg .sr{fill:#132418}
.ts-sec .ts-svg .bx,.ts-sec .ts-svg .dot,.ts-sec .ts-svg .ts-via{fill:#1a2c1e}
.ts-sec .ts-svg .wt{stroke:#1f3324}
.ts-sec .ts-svg .ts-ft{opacity:.3}
.ts-sec .ts-svg text{stroke:#1f3324}
.ts-sec .ts-svg .ts-tl,.ts-sec .ts-svg .ts-to,.ts-sec .ts-svg .ts-tc{fill:#f1efe4}
.ts-sec .ts-svg .ts-tm{fill:#8fa08d}
.ts-sec .ts-svg .ts-nm{fill:#8593e3}
.ts-sec .ts-svg .ts-band{stroke-opacity:.22}
@media (max-width:899px){.ts-sec .ts .ts-fig{margin-inline:calc(-1 * var(--gut,16px))}}
/* item 107: the nav takes the colour of the dark section under it (site/nav-tone.js sets --nav-bg); at the very top it stays clear over the hero */
.nav.on-dark.scrolled{background:var(--nav-bg,#142818);border-color:rgba(241,239,228,.08)}
/* "Running on Tacit today" sits right beside its numbers, not at the far left (CHANGES.md item 110) */
@media (min-width:900px){.on-ref .on-rk{justify-self:end;text-align:right}}