/* ==========================================================================
   Assetree: the interactive tools
   The company valuation, the portfolio review and the mandate builder
   share one studio: the question on the left, a picture of the answer on
   the right that grows with every fact, a brass line in chapters along the
   top. Documents can be shared first; the scanner shows what it read
   with the evidence. Each result is drawn by its own page; the shared
   pieces (ring, bars, band, paper, rail, figures, notes, the send form)
   live here too.
   ========================================================================== */

/* ---------- The invitation (hero) ---------- */
.tool-intro .page-hero__title--long { max-width: 13ch; }
.tool-intro__facts { display: grid; gap: 10px; margin-top: 26px; max-width: 46ch; }
.tool-intro__facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; color: var(--fg-2); font-size: calc(clamp(16px, 1.2vw, 18px) * var(--fz-read)); line-height: 1.45; }
.tool-intro__facts svg { width: 15px; height: auto; margin-top: .3em; overflow: visible; }
.tool-intro__facts svg path { fill: var(--gold); }
.tool-intro__meta { margin-top: 18px; font-family: var(--serif); font-style: italic; font-size: calc(clamp(1.1rem, 1.4vw, 1.3rem) * var(--fz)); color: var(--fg-2); }
.tool-intro__resume { margin-top: 18px; padding: 14px 18px; border: 1px solid rgba(200, 169, 107, .4); border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; max-width: 52ch; color: var(--fg-2); font-size: calc(15px * var(--fz-read)); }
.tool-intro__resume[hidden] { display: none; }
.tool-intro__resume a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.tool-intro__ways { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.tool-intro__or { align-self: center; color: var(--fg-3); font-size: calc(14px * var(--fz)); }

/* ---------- The studio ---------- */
.studio { padding: clamp(28px, 3.6vw, 56px) 0 clamp(64px, 7vw, 110px); background: radial-gradient(60% 50% at 85% 10%, rgba(27, 58, 46, .35), transparent 70%), var(--ink); }
.studio[hidden] { display: none; }
.studio__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(28px, 4vw, 72px); align-items: start; }
.studio__ask { min-width: 0; }
.studio__pic { position: sticky; top: calc(var(--nav-h) + 14px); min-width: 0; padding: clamp(18px, 2vw, 28px); border: 1px solid var(--rule); border-radius: 20px; background: radial-gradient(80% 60% at 50% 100%, rgba(27, 58, 46, .45), transparent 70%), rgba(10, 14, 12, .5); overflow: hidden; }
.studio__canvas { position: relative; }
.studio__canvas > svg { display: block; width: 100%; height: auto; overflow: visible; }
.studio__readout { margin-top: 14px; display: grid; gap: 8px; }
.studio__note { min-height: 2.6em; margin-top: 12px; font-family: var(--serif); font-style: italic; font-size: calc(clamp(1.05rem, 1.3vw, 1.2rem) * var(--fz)); line-height: 1.3; color: var(--gold-2); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.studio__note.is-on { opacity: 1; transform: none; }

/* Readouts: a figure with its words, and a range on a scale that narrows. */
.ro[hidden] { display: none; }
.ro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--rule); }
.ro__label { font-size: calc(13px * var(--fz)); color: var(--fg-3); }
.ro__val { font-family: var(--serif); font-size: calc(clamp(1.4rem, 1.9vw, 1.8rem) * var(--fz)); line-height: 1; letter-spacing: calc(-.015em * var(--ek)); text-align: right; white-space: nowrap; }
.ro__val small { font-family: var(--sans); font-size: calc(12.5px * var(--fz)); color: var(--fg-3); margin-left: 6px; letter-spacing: 0; }
.ro__sub { grid-column: 1 / -1; font-size: calc(13px * var(--fz-read)); color: var(--fg-2); line-height: 1.4; }
.ro__scale { grid-column: 1 / -1; position: relative; height: 10px; margin-top: 4px; }
.ro__scale::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--rule-2); }
.ro__scale-band { position: absolute; top: 2px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, rgba(200, 169, 107, .45), var(--gold-2), rgba(200, 169, 107, .45)); box-shadow: 0 0 14px rgba(227, 200, 146, .35); left: var(--a, 0%); width: calc(var(--b, 100%) - var(--a, 0%)); transition: left .9s var(--ease), width .9s var(--ease); }
.ro__ends { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: calc(12px * var(--fz)); color: var(--fg-3); }
.ro--big .ro__val { font-size: calc(clamp(1.7rem, 2.4vw, 2.3rem) * var(--fz)); }

/* ---------- The questions ---------- */
.tool__bar { display: flex; gap: 4px; height: 2px; }
.tool__seg { position: relative; flex: 1; background: var(--rule-2); border-radius: 2px; overflow: hidden; transition: background-color .4s var(--ease); }
.tool__seg[hidden] { display: none; }
.tool__fill { position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .6s var(--ease); }
.tool__seg.is-done { background: rgba(200, 169, 107, .4); }
.tool__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 12px; font-size: calc(13.5px * var(--fz)); color: var(--fg-3); }
.tool__meta .tool__count { color: var(--gold-2); font-weight: 500; letter-spacing: calc(.04em * var(--ek)); }
.tool__stage { position: relative; min-height: min(56vh, 560px); margin-top: clamp(28px, 3.4vw, 44px); }
.tool__step { transition: opacity .22s var(--ease), transform .4s var(--ease); }
.tool__step.is-entering { opacity: 0; transform: translateY(16px); }
.tool__step.is-entering-back { opacity: 0; transform: translateY(-16px); }
.tool__step.is-leaving { opacity: 0; transform: translateY(-12px); transition-duration: .14s, .2s; }
.tool__step.is-leaving-back { opacity: 0; transform: translateY(12px); transition-duration: .14s, .2s; }
.tool__step.is-nudged .tool__body { animation: tool-nudge .5s var(--ease); }
@keyframes tool-nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 60% { transform: translateX(3px); } }
.tool__q { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.8rem, 3vw, 3rem) * var(--fz)); line-height: 1.04; letter-spacing: calc(-.015em * var(--ek)); max-width: 22ch; text-wrap: balance; }
.tool__q em { font-style: italic; color: var(--accent); }
.tool__help { margin-top: 12px; color: var(--fg-2); max-width: 52ch; font-size: calc(clamp(15.5px, 1.15vw, 17.5px) * var(--fz-read)); line-height: 1.5; }
.tool__body { margin-top: clamp(20px, 2.4vw, 32px); }
.tool__hint { margin-top: 14px; font-size: calc(14px * var(--fz-read)); color: var(--fg-3); max-width: 52ch; }
.tool__note { margin-top: 26px; font-size: calc(13.5px * var(--fz-read)); color: var(--fg-3); max-width: 60ch; }

/* Options: a ring at the left that fills in brass when chosen. */
.tool__opts { display: grid; gap: 8px; }
.tool__opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tool__opts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tool__opt {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px;
  width: 100%; padding: 13px 16px 14px; text-align: left;
  border: 1px solid var(--rule-2); border-radius: 12px; background: rgba(10, 14, 12, .35); color: var(--fg);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.tool__opt:hover { border-color: rgba(200, 169, 107, .55); }
.tool__opt:active { transform: scale(.995); }
.tool__opt-mark { width: 16px; height: 16px; margin-top: .3em; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; transition: border-color .3s var(--ease); }
.tool__opt-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .35s var(--ease); }
.tool__opt--check .tool__opt-mark { border-radius: 4px; }
.tool__opt--check .tool__opt-mark::after { border-radius: 1px; }
.tool__opt[aria-checked="true"], .tool__opt[aria-pressed="true"] { border-color: var(--gold); background: rgba(200, 169, 107, .08); }
.tool__opt[aria-checked="true"] .tool__opt-mark, .tool__opt[aria-pressed="true"] .tool__opt-mark { border-color: var(--gold); }
.tool__opt[aria-checked="true"] .tool__opt-mark::after, .tool__opt[aria-pressed="true"] .tool__opt-mark::after { transform: scale(1); }
.tool__opt-words { display: grid; gap: 2px; }
.tool__opt-label { font-family: var(--serif); font-size: calc(clamp(1.15rem, 1.5vw, 1.4rem) * var(--fz)); line-height: 1.15; letter-spacing: calc(-.005em * var(--ek)); }
.tool__opt-text { font-size: calc(14px * var(--fz-read)); line-height: 1.4; color: var(--fg-2); }
.tool__opt-art { grid-column: 3; align-self: center; width: 34px; height: 34px; color: rgba(238, 233, 223, .6); transition: color .3s var(--ease); }
.tool__opt-art svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tool__opt[aria-checked="true"] .tool__opt-art, .tool__opt[aria-pressed="true"] .tool__opt-art { color: var(--gold-2); }
.tool__opt:has(.tool__opt-art) { grid-template-columns: auto minmax(0, 1fr) auto; }
.tool__opts--pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tool__opts--pills .tool__opt { width: auto; display: inline-flex; align-items: center; gap: 10px; padding: 0 18px; height: 46px; border-radius: 999px; }
.tool__opts--pills .tool__opt-mark { margin-top: 0; width: 12px; height: 12px; }
.tool__opts--pills .tool__opt-mark::after { width: 6px; height: 6px; }
.tool__opts--pills .tool__opt-label { font-family: var(--sans); font-size: calc(15px * var(--fz)); }

/* A scale: five words along one line. */
.tool__scale { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding-top: 8px; }
.tool__scale::before { content: ""; position: absolute; left: 10%; right: 10%; top: 16px; height: 1px; background: var(--rule-2); }
.tool__scale-opt { position: relative; display: grid; justify-items: center; gap: 14px; padding: 0 4px 10px; color: var(--fg-2); transition: color .3s var(--ease); }
.tool__scale-dot { width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--rule-2); background: var(--ink); display: grid; place-items: center; transition: border-color .3s var(--ease), box-shadow .4s var(--ease); }
.tool__scale-dot::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .35s var(--ease); }
.tool__scale-opt:hover { color: var(--fg); }
.tool__scale-opt:hover .tool__scale-dot { border-color: rgba(200, 169, 107, .7); }
.tool__scale-opt[aria-checked="true"] { color: var(--fg); }
.tool__scale-opt[aria-checked="true"] .tool__scale-dot { border-color: var(--gold); box-shadow: 0 0 18px rgba(227, 200, 146, .45); }
.tool__scale-opt[aria-checked="true"] .tool__scale-dot::after { transform: scale(1); }
.tool__scale-label { font-size: calc(14px * var(--fz)); line-height: 1.3; text-align: center; max-width: 12ch; }

/* Money and numbers: one large figure with its currency beside it. */
.tool__money { display: flex; align-items: baseline; gap: 10px; max-width: 520px; border-bottom: 1px solid var(--rule-2); padding-bottom: 8px; transition: border-color .3s var(--ease); }
.tool__money:focus-within { border-color: var(--gold); }
.tool__money-sym, .tool__money-unit { font-family: var(--serif); font-size: calc(clamp(1.6rem, 2.6vw, 2.4rem) * var(--fz)); color: var(--fg-2); }
.tool__money-unit { font-size: calc(clamp(1.1rem, 1.5vw, 1.4rem) * var(--fz)); }
.tool__input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; padding: 10px 0; color: var(--fg); font: inherit; font-size: calc(17px * var(--fz-read)); transition: border-color .3s var(--ease); }
.tool__input:focus { outline: none; border-color: var(--gold); }
.tool__input::placeholder { color: var(--fg-3); }
.tool__input.is-wrong { border-color: rgba(214, 120, 90, .9); }
.tool__input--money { border: 0; padding: 0; font-family: var(--serif); font-size: calc(clamp(2.2rem, 4vw, 3.8rem) * var(--fz)); line-height: 1.1; letter-spacing: calc(-.02em * var(--ek)); }
.tool__input--money::placeholder { color: rgba(238, 233, 223, .2); }
.tool__money-read { min-height: 1.6em; margin-top: 10px; font-family: var(--serif); font-style: italic; font-size: calc(1.2rem * var(--fz)); color: var(--gold-2); }
.tool__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tool__chip { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-2); color: var(--fg-2); font-size: calc(14px * var(--fz)); transition: color .25s, border-color .25s, background-color .25s; }
.tool__chip:hover { color: var(--fg); border-color: rgba(200, 169, 107, .6); }
.tool__chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ink); }
select.tool__input { appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.6 4 5.6 7 2.6' fill='none' stroke='%23C8A96B' stroke-width='1.2'/%3E%3C/svg%3E") right 2px center / 10px no-repeat; padding-right: 22px; cursor: pointer; }
select.tool__input option { background: var(--ink-2); color: var(--bone); }

/* A slider, its value written large. */
.tool__range { max-width: 560px; }
.tool__range-value { font-family: var(--serif); font-size: calc(clamp(2.4rem, 4.4vw, 4.2rem) * var(--fz)); line-height: 1; letter-spacing: calc(-.02em * var(--ek)); }
.tool__slider { --p: 0; width: 100%; height: 44px; margin: 10px 0 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.tool__slider::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--gold) calc(var(--p) * 100%), var(--rule-2) calc(var(--p) * 100%)); }
.tool__slider::-moz-range-track { height: 1px; background: var(--rule-2); }
.tool__slider::-moz-range-progress { height: 1px; background: var(--gold); }
.tool__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; background: var(--gold-2); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(227, 200, 146, .5); transition: transform .3s var(--ease); }
.tool__slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold-2); border: 3px solid var(--ink); box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(227, 200, 146, .5); }
.tool__slider:hover::-webkit-slider-thumb, .tool__slider:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
.tool__slider:focus-visible { outline: none; }
.tool__range-ends { display: flex; justify-content: space-between; font-size: calc(13px * var(--fz)); color: var(--fg-3); }
.tool__range-word { min-height: 1.6em; margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: calc(1.2rem * var(--fz)); color: var(--gold-2); }

/* Free text and the short set of details. */
.tool__textarea { resize: vertical; min-height: 5.5em; line-height: 1.5; max-width: 640px; }
.tool__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 40px); max-width: 720px; }
.tool__field { display: grid; gap: 2px; }
.tool__field--wide { grid-column: 1 / -1; }
.tool__label { font-size: calc(13.5px * var(--fz)); color: var(--fg-2); }
.tool__consent { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 8px; font-size: calc(14px * var(--fz-read)); line-height: 1.5; color: var(--fg-2); max-width: 64ch; cursor: pointer; }
.tool__consent input { width: 16px; height: 16px; margin: .25em 0 0; accent-color: var(--gold); }
.tool__consent a, .tool__gate-fine a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.tool__fields--gate { max-width: 640px; }
.tool__fields--gate .tool__input { font-size: calc(19px * var(--fz-read)); padding: 12px 0; }
.tool__gate-why { margin-top: 18px; max-width: 52ch; color: var(--fg-2); font-size: calc(15.5px * var(--fz-read)); line-height: 1.5; }
.tool__gate-fine { margin-top: 10px; max-width: 60ch; color: var(--fg-3); font-size: calc(13px * var(--fz-read)); line-height: 1.5; }

/* The drop zone and the files it holds. */
.tool__drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; max-width: 640px; padding: 24px 26px; border: 1px dashed var(--rule-2); border-radius: 14px; cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
.tool__drop:hover, .tool__drop:focus-visible, .tool__drop.is-over { border-color: var(--gold); background: rgba(200, 169, 107, .05); }
.tool__drop.has-file { border-style: solid; border-color: rgba(200, 169, 107, .5); }
.tool__drop.is-refused { animation: tool-nudge .5s var(--ease); border-color: rgba(214, 120, 90, .9); }
.tool__file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tool__drop-art svg { width: 52px; height: 52px; overflow: visible; }
.tool__drop-art .ln, .scan__glyph .ln { fill: none; stroke: rgba(238, 233, 223, .6); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.tool__drop-art .ln--gold { stroke: var(--gold); transition: transform .4s var(--ease); }
.tool__drop:hover .ln--gold, .tool__drop.is-over .ln--gold { transform: translateY(-3px); }
.tool__drop-line { font-family: var(--serif); font-size: calc(clamp(1.15rem, 1.5vw, 1.4rem) * var(--fz)); line-height: 1.15; }
.tool__drop-sub { margin-top: 6px; font-size: calc(14px * var(--fz-read)); color: var(--fg-2); }
.tool__file-status { min-height: 1.4em; margin-top: 12px; font-size: calc(14.5px * var(--fz-read)); color: rgba(222, 140, 110, .95); }
.tool__files { display: grid; gap: 6px; margin-bottom: 12px; max-width: 640px; }
.tool__files:empty { display: none; }
.tool__filerow { display: flex; align-items: baseline; gap: 8px; font-size: calc(14.5px * var(--fz-read)); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.tool__file-name { color: var(--gold-2); }
.tool__file-size { color: var(--fg-3); }
.tool__file-remove { margin-left: auto; color: var(--fg-2); text-decoration: underline; text-underline-offset: 3px; font-size: calc(13.5px * var(--fz)); }
.tool__file-remove:hover { color: var(--gold); }

/* The scanner: reading, then what was read, with where it came from. */
.scan { margin-top: 20px; max-width: 640px; }
.scan[hidden] { display: none; }
.scan__reading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px 0; border-top: 1px solid var(--rule); }
.scan__glyph svg { width: 44px; height: 55px; overflow: visible; }
.scan__glyph .ln--soft { stroke: rgba(238, 233, 223, .3); }
.scan__beam { stroke: var(--gold-2); stroke-width: 1.4; opacity: 0; filter: drop-shadow(0 0 6px rgba(227, 200, 146, .8)); }
.is-reading .scan__beam { opacity: 1; animation: scan-beam 1.4s var(--ease) infinite; }
@keyframes scan-beam { 0% { transform: translateY(0); } 100% { transform: translateY(56px); } }
.scan__line { font-family: var(--serif); font-size: calc(clamp(1.1rem, 1.4vw, 1.3rem) * var(--fz)); line-height: 1.2; }
.scan__stats { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 12px; }
.scan__stat b { font-family: var(--serif); font-weight: 400; font-size: calc(1.5rem * var(--fz)); line-height: 1; color: var(--gold-2); }
.scan__stat span { margin-left: 6px; font-size: calc(13px * var(--fz)); color: var(--fg-3); }
.scan__title { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.3rem, 1.7vw, 1.6rem) * var(--fz)); line-height: 1.1; }
.scan__facts { border-top: 1px solid var(--rule); }
.scan__fact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(150px, .9fr); gap: 6px 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule); opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s); }
.scan__fact.is-on { opacity: 1; transform: none; }
.scan__fact-words { display: grid; gap: 3px; min-width: 0; }
.scan__fact-label { font-size: calc(15.5px * var(--fz-read)); }
.scan__fact-ev { display: flex; align-items: baseline; gap: 8px; font-size: calc(12.5px * var(--fz-read)); color: var(--fg-3); line-height: 1.4; }
.scan__fact-ev i { display: inline-flex; gap: 2px; flex: none; transform: translateY(-1px); }
.scan__fact-ev b { width: 5px; height: 5px; border-radius: 50%; background: var(--rule-2); }
.scan__fact-ev--1 b:nth-child(1), .scan__fact-ev--2 b:nth-child(-n+2), .scan__fact-ev--3 b { background: var(--gold); }
.scan__fact-ev--1 { color: rgba(222, 140, 110, .9); }
.scan__ctl-wrap { display: flex; align-items: baseline; gap: 6px; }
.scan__ctl { padding: 6px 0; font-size: calc(16px * var(--fz-read)); }
.scan__sym { font-size: calc(14px * var(--fz)); color: var(--fg-2); }
.scan__chips { display: flex; flex-wrap: wrap; gap: 6px; justify-self: end; }
.scan__chips .tool__chip { height: 30px; padding: 0 11px; font-size: calc(13px * var(--fz)); }
.scan__missing, .scan__warn { margin-top: 12px; font-size: calc(14px * var(--fz-read)); color: var(--fg-2); line-height: 1.5; max-width: 56ch; }
.scan__missing { opacity: 0; transition: opacity .5s var(--ease) var(--d, 0s); }
.scan__missing.is-on { opacity: 1; }
.scan__missing strong { color: var(--fg); font-weight: 500; }
.scan__warn { color: var(--fg-3); }

/* Moving on. */
.tool__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: clamp(24px, 3vw, 40px); }
.tool__next { transition: opacity .3s var(--ease), color .4s var(--ease), background-color .4s var(--ease); }
.tool__next.is-waiting { opacity: .45; }
.tool__back[disabled] { display: none; }
.tool__skip { margin-left: auto; font-size: calc(14px * var(--fz)); color: var(--fg-3); text-decoration: underline; text-underline-offset: 3px; transition: color .3s; }
.tool__skip:hover { color: var(--gold); }
.tool__alt[hidden], .tool__next[hidden] { display: none; }

/* ---------- The result ---------- */
.tool-result { padding: clamp(80px, 9vw, 140px) 0 clamp(72px, 8vw, 120px); }
.tool-result[hidden] { display: none; }
.res__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; }
.res__title { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(2.6rem, 5.4vw, 6rem) * var(--fz)); line-height: .96; letter-spacing: calc(-.02em * var(--ek)); max-width: 16ch; text-wrap: balance; }
.res__title em { font-style: italic; color: var(--accent); }
.res__lede { margin-top: 20px; color: var(--fg-2); font-size: calc(clamp(17px, 1.3vw, 19.5px) * var(--fz-read)); line-height: 1.55; max-width: 54ch; }
.res__lede strong { color: var(--fg); font-weight: 500; }
.res__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 5vw, 96px); align-items: start; margin-top: clamp(48px, 5vw, 80px); }
.res__sub { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.8rem, 2.6vw, 2.8rem) * var(--fz)); line-height: 1.02; letter-spacing: calc(-.012em * var(--ek)); }
.res__sub em { font-style: italic; color: var(--accent); }
.res__text { margin-top: 14px; color: var(--fg-2); max-width: 50ch; }
.res__text + .res__text { margin-top: 10px; }
.res__pic { margin-top: clamp(36px, 4vw, 56px); }
.res__pic svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Things that rise into place as the result is read. */
[data-rise] { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease) var(--d, 0s), transform 1.1s var(--ease) var(--d, 0s); }
.is-on [data-rise], .is-on[data-rise] { opacity: 1; transform: none; }
.no-motion [data-rise] { opacity: 1; transform: none; transition: none; }

/* The score ring. */
.res__ring { position: relative; width: clamp(180px, 22vw, 260px); aspect-ratio: 1; }
.res__ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.res__ring-track { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.res__ring-fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 8px rgba(227, 200, 146, .45)); }
.res__ring-tick { stroke: rgba(238, 233, 223, .35); stroke-width: 1; }
.res__ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.res__ring-num b { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(3.4rem, 6vw, 5.6rem) * var(--fz)); line-height: 1; letter-spacing: calc(-.03em * var(--ek)); }
.res__ring-num span { margin-top: 2px; font-size: calc(13px * var(--fz)); color: var(--fg-2); }

/* Bars, one per dimension. */
.res__bars { display: grid; gap: 18px; }
.res__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; }
.res__bar-name { font-family: var(--serif); font-size: calc(clamp(1.2rem, 1.6vw, 1.5rem) * var(--fz)); line-height: 1.1; }
.res__bar-val { font-size: calc(14px * var(--fz)); color: var(--gold-2); font-weight: 500; }
.res__bar-track { grid-column: 1 / -1; position: relative; height: 1px; background: var(--rule-2); overflow: visible; }
.res__bar-fill { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--gold); transform: scaleX(var(--v, 0)); transform-origin: left; transition: transform 1.4s var(--ease) var(--d, 0s); border-radius: 2px; }
.res__bar-note { grid-column: 1 / -1; margin-top: 4px; font-size: calc(14.5px * var(--fz-read)); color: var(--fg-2); max-width: 54ch; }
.res__bar--low .res__bar-fill { background: rgba(214, 120, 90, .9); }
.res__bar--low .res__bar-val { color: rgba(222, 140, 110, .95); }

/* A range on a scale: the value band drawn in brass. */
.res__band { margin-top: 26px; }
.res__band-figs { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.res__band-figs b { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(2rem, 3.6vw, 3.6rem) * var(--fz)); line-height: 1; letter-spacing: calc(-.02em * var(--ek)); }
.res__band-figs span { display: block; margin-top: 6px; font-size: calc(13.5px * var(--fz)); color: var(--fg-2); }
.res__band-figs > :last-child { text-align: right; }
.res__band-scale { position: relative; height: 34px; margin-top: 14px; }
.res__band-scale::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 1px; background: var(--rule-2); }
.res__band-fill { position: absolute; top: 14px; height: 5px; left: var(--a, 0%); width: calc(var(--b, 100%) - var(--a, 0%)); border-radius: 3px; background: linear-gradient(90deg, rgba(200, 169, 107, .5), var(--gold-2), rgba(200, 169, 107, .5)); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .2s; box-shadow: 0 0 16px rgba(227, 200, 146, .4); }
.is-on .res__band-fill { transform: scaleX(1); }
.res__band-ends { display: flex; justify-content: space-between; font-size: calc(13px * var(--fz)); color: var(--fg-3); }

/* The next step and the sending. */
.res__next { margin-top: clamp(64px, 7vw, 110px); padding-top: clamp(30px, 3.2vw, 46px); border-top: 1px solid var(--gold); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 24px clamp(36px, 5vw, 96px); }
.res__next .res__sub { max-width: 14ch; }
.tool__send { display: grid; gap: 22px; }
.tool__send-who { grid-column: 1 / -1; font-size: calc(15px * var(--fz-read)); color: var(--fg-2); }
.tool__send-who strong { color: var(--fg); font-weight: 500; }
.tool__linkish { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; font-size: calc(13.5px * var(--fz)); margin-left: 6px; }
.tool__send-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 6px; }
.tool__send-status { min-height: 1.6em; font-size: calc(15px * var(--fz-read)); color: var(--fg-2); max-width: 54ch; }
.tool__send-status a { color: var(--gold-2); text-decoration: underline; text-underline-offset: 3px; }
.tool__send.is-sent .tool__send-status { color: var(--gold-2); font-family: var(--serif); font-size: calc(1.2rem * var(--fz)); }
.btn.is-busy { opacity: .6; pointer-events: none; }
.res__fine { margin-top: clamp(40px, 4vw, 64px); font-size: calc(13px * var(--fz-read)); line-height: 1.55; color: var(--fg-3); max-width: 80ch; }

/* A paper document, for the mandate outline. */
.res__doc { position: relative; background: var(--paper); color: #111613; padding: clamp(28px, 3.6vw, 56px) clamp(24px, 3.4vw, 56px); border-radius: 3px; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); --fg: #111613; --fg-2: rgba(17, 22, 19, .68); --fg-3: rgba(17, 22, 19, .46); --rule: rgba(17, 22, 19, .13); --rule-2: rgba(17, 22, 19, .24); --accent: var(--bronze); }
.res__doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); }
.res__doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.res__doc-head .brand { color: #111613; --mark-accent: var(--bronze); }
.res__doc-date { font-size: calc(13px * var(--fz)); color: var(--fg-2); text-align: right; line-height: 1.5; }
.res__doc-title { margin-top: 26px; font-family: var(--serif); font-weight: 400; font-size: calc(clamp(2rem, 3.2vw, 3.2rem) * var(--fz)); line-height: 1; letter-spacing: calc(-.015em * var(--ek)); }
.res__doc-title em { font-style: italic; color: var(--bronze); }
.res__doc-sub { margin-top: 8px; color: var(--fg-2); font-size: calc(16px * var(--fz-read)); }
.res__doc-section { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule); }
.res__doc-section h3 { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.4rem, 1.9vw, 1.8rem) * var(--fz)); line-height: 1.1; }
.res__doc-section p, .res__doc-section li { color: var(--fg-2); font-size: calc(15.5px * var(--fz-read)); line-height: 1.55; }
.res__doc-section p { margin-top: 10px; max-width: 66ch; }
.res__doc-section ul { display: grid; gap: 8px; margin-top: 12px; }
.res__doc-section li { position: relative; padding-left: 20px; }
.res__doc-section li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); }
.res__doc-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 6px 24px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: calc(15px * var(--fz-read)); }
.res__doc-row:first-of-type { border-top: 0; }
.res__doc-row dt { color: var(--fg-2); }
.res__doc-row dd { margin: 0; color: #111613; }
.res__doc-seal { position: absolute; right: clamp(20px, 3vw, 48px); bottom: clamp(20px, 3vw, 48px); width: 64px; height: 64px; border-radius: 50%; border: 1px solid rgba(142, 108, 48, .5); display: grid; place-items: center; color: var(--bronze); --mark-accent: var(--bronze); transform: rotate(-8deg) scale(.6); opacity: 0; transition: transform .9s var(--ease) 1s, opacity .6s var(--ease) 1s; }
.res__doc-seal svg { width: 30px; height: 30px; }
.is-on .res__doc-seal { transform: rotate(-8deg) scale(1); opacity: 1; }
.no-motion .res__doc-seal { transform: rotate(-8deg); opacity: 1; }

/* The lifecycle rail: stations lit for the stages a mandate uses. */
.res__rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 26px; padding-top: 22px; }
.res__rail::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--rule-2); }
.res__rail-fill { position: absolute; left: 0; top: 7px; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 2.2s var(--ease) .3s; }
.is-on .res__rail-fill { transform: scaleX(1); }
.res__station { position: relative; font-size: calc(14px * var(--fz)); color: var(--fg-3); transition: color .6s var(--ease) var(--d, 0s); }
.res__station::before { content: ""; position: absolute; left: 0; top: -21px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--rule-2); transition: background-color .6s var(--ease) var(--d, 0s), border-color .6s var(--ease) var(--d, 0s), box-shadow .6s var(--ease) var(--d, 0s); }
.is-on .res__station.is-on { color: var(--fg); }
.is-on .res__station.is-on::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(227, 200, 146, .55); }
.no-motion .res__station.is-on { color: var(--fg); }
.no-motion .res__station.is-on::before { background: var(--gold); border-color: var(--gold); }

/* Figures in a row: yield, loan to value and the like. */
.res__figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 2.6vw, 40px); margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--rule); }
.res__fig { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.res__fig b { display: block; font-family: var(--serif); font-weight: 400; font-size: calc(clamp(2rem, 3.4vw, 3.4rem) * var(--fz)); line-height: 1; letter-spacing: calc(-.02em * var(--ek)); }
.res__fig span { display: block; margin-top: 8px; font-size: calc(14px * var(--fz)); color: var(--fg-2); }
.res__fig small { display: block; margin-top: 4px; font-size: calc(13px * var(--fz-read)); color: var(--fg-3); }

/* Notes that read like a reviewer's margin: one observation per line. */
.res__notes { display: grid; gap: 0; margin-top: 26px; border-bottom: 1px solid var(--rule); }
.res__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
.res__note svg { width: 15px; height: auto; margin-top: .4em; overflow: visible; }
.res__note svg path { fill: var(--gold); }
.res__note h4 { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.2rem, 1.6vw, 1.5rem) * var(--fz)); line-height: 1.12; }
.res__note p { margin-top: 6px; color: var(--fg-2); max-width: 56ch; font-size: calc(15.5px * var(--fz-read)); }

/* What was read from the documents, on the result. */
.res__read { margin-top: clamp(40px, 4vw, 64px); padding: 20px 24px; border: 1px solid var(--rule); border-radius: 14px; }
.res__read h4 { font-family: var(--serif); font-weight: 400; font-size: calc(1.3rem * var(--fz)); }
.res__read p { margin-top: 6px; font-size: calc(14px * var(--fz-read)); color: var(--fg-2); line-height: 1.5; }
.pf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pf-table { min-width: 560px; }

/* ---------- Print: the result alone, on paper ---------- */
@media print {
  .nav, .menu, .grain, .loader, .footer, .tool-intro, .studio, .cta, .block, .tool__send-row, .tool__send, .skip { display: none !important; }
  body, section, .tool-result { background: #fff !important; color: #111 !important; --fg: #111; --fg-2: #444; --fg-3: #666; --rule: #ddd; --rule-2: #bbb; --bg: #fff; }
  .tool-result { padding: 0; }
  [data-rise] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .res__ring-fill { filter: none; }
  .res__ring-num b, .res__title, .res__sub, .res__fig b, .res__band-figs b, .res__bar-name, .res__note h4 { color: #111; }
  .res__lede, .res__text, .res__bar-note, .res__note p, .res__fig span, .res__band-figs span, .res__fine, .res__ring-num span { color: #444 !important; }
  .res__bar-fill, .res__band-fill, .res__rail-fill { transform: none !important; transition: none !important; }
  .res__station { color: #666; }
  .res__station.is-on { color: #111; }
  .res__station.is-on::before { background: var(--gold); border-color: var(--gold); box-shadow: none; }
  .res__doc { box-shadow: none; border: 1px solid #ddd; }
  .res__doc-seal { opacity: 1; transform: rotate(-8deg); transition: none; }
  .res__next { border-top-color: #999; }
  a[href]::after { content: none; }
  .res__pic text { fill: #444 !important; }
  .res__pic .dw-ln { stroke: #444 !important; }
}

/* ---------- Phones and narrow screens ---------- */
@media (max-width: 1023px) {
  .studio__inner { grid-template-columns: 1fr; gap: 22px; }
  .studio__pic { position: static; order: -1; padding: 14px 16px 12px; border-radius: 16px; }
  .studio__canvas > svg { max-height: 26svh; margin-inline: auto; }
  .pf-board { gap: 10px; }
  .pf-board__sum { font-size: calc(1.05rem * var(--fz)); }
  .pf-tile { padding: 8px 10px 9px; }
  .pf-tile b { font-size: calc(1.2rem * var(--fz)); }
  .pf-tile span { font-size: calc(11px * var(--fz)); }
  .studio__readout { margin-top: 10px; }
  .studio__note { min-height: 0; margin-top: 8px; font-size: calc(1rem * var(--fz)); }
  .dials { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .dial__num { top: 30%; }
  .dial__num b { font-size: calc(1.15rem * var(--fz)); }
  .dial__num small { font-size: calc(10.5px * var(--fz)); margin-top: 2px; }
  .dial__sub { min-height: 0; margin-top: 12px; font-size: calc(11.5px * var(--fz-read)); }
}
@media (max-width: 899px) {
  .res__grid, .res__next { grid-template-columns: 1fr; }
  .res__figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool__opts--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .studio { padding: 22px 0 64px; }
  .tool__stage { min-height: 0; margin-top: 24px; }
  .tool__q { font-size: calc(clamp(1.55rem, 7vw, 2rem) * var(--fz)); }
  .tool__opts--2, .tool__opts--3 { grid-template-columns: 1fr; }
  .tool__opt { padding: 12px 14px 13px; gap: 12px; }
  .tool__opt-label { font-size: calc(clamp(1.05rem, 4.6vw, 1.2rem) * var(--fz)); }
  .tool__scale { grid-template-columns: 1fr; gap: 4px; padding-top: 0; }
  .tool__scale::before { display: none; }
  .tool__scale-opt { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; }
  .tool__scale-opt[aria-checked="true"] { border-color: var(--gold); background: rgba(200, 169, 107, .08); }
  .tool__scale-label { text-align: left; max-width: none; }
  .tool__fields { grid-template-columns: 1fr; gap: 16px; }
  .tool__drop { grid-template-columns: 1fr; gap: 12px; padding: 20px 18px; }
  .scan__fact { grid-template-columns: 1fr; }
  .scan__chips { justify-self: start; }
  .tool__nav { gap: 8px 12px; }
  .tool__nav .btn { flex: 1 1 auto; }
  .tool__skip { flex-basis: 100%; margin-left: 0; text-align: left; }
  .tool-result { padding: 72px 0 64px; }
  .res__head { grid-template-columns: 1fr; }
  .res__title { font-size: calc(clamp(2.4rem, 10.5vw, 3.1rem) * var(--fz)); }
  .res__ring { width: 180px; }
  .res__figs { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .res__fig b { font-size: calc(clamp(1.8rem, 8.6vw, 2.3rem) * var(--fz)); }
  .res__band-figs b { font-size: calc(clamp(1.6rem, 7.4vw, 2rem) * var(--fz)); }
  .res__rail { grid-auto-flow: row; gap: 14px; padding-top: 0; padding-left: 26px; }
  .res__rail::before { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .res__rail-fill { left: 6px; top: 6px; width: 1px; height: calc(100% - 12px); transform: scaleY(0); transform-origin: top; }
  .is-on .res__rail-fill { transform: scaleY(1); }
  .res__station::before { left: -26px; top: 4px; }
  .res__doc-row { grid-template-columns: 1fr; gap: 2px; }
  .res__doc-seal { position: static; margin-top: 24px; }
  .res__band-ends { flex-direction: column; gap: 4px; }
}

/* ---------- The scorecard (company valuation) ----------
   A dial for the total and a row for each of the six parts. A part still
   to come waits, faint; once scored its segments light one by one. */
.sc { display: grid; gap: 18px; }
.sc__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.sc__dial { position: relative; width: clamp(96px, 8vw, 116px); aspect-ratio: 1; }
.sc__dial svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.sc__dial-track { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.sc__dial-tick { stroke: rgba(238, 233, 223, .3); stroke-width: 1; }
.sc__dial-fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 7px rgba(227, 200, 146, .45)); transition: stroke-dashoffset 1s var(--ease); }
.sc__dial-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.sc__dial-num b { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(2rem, 2.8vw, 2.6rem) * var(--fz)); line-height: 1; min-height: 1em; }
.sc__dial-num span { font-size: calc(11px * var(--fz)); color: var(--fg-3); }
.sc__line { font-family: var(--serif); font-size: calc(clamp(1.25rem, 1.6vw, 1.5rem) * var(--fz)); line-height: 1.15; }
.sc__sub { margin-top: 4px; font-size: calc(13.5px * var(--fz-read)); line-height: 1.4; color: var(--fg-2); }
.sc__rows { display: grid; gap: 4px; }
.sc__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 5px 14px; padding: 9px 12px 10px; border-radius: 10px; transition: background-color .9s var(--ease); }
.sc__name { font-family: var(--serif); font-size: calc(clamp(1.05rem, 1.25vw, 1.2rem) * var(--fz)); line-height: 1.15; transition: color .5s var(--ease); }
.sc__val { font-size: calc(14px * var(--fz)); font-weight: 500; color: var(--gold-2); font-variant-numeric: tabular-nums; }
.sc__track { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.sc__track i { height: 5px; border-radius: 2px; background: rgba(238, 233, 223, .1); transition: background-color .45s var(--ease) calc(var(--k) * 55ms), box-shadow .45s var(--ease) calc(var(--k) * 55ms); }
.sc__track i.is-lit { background: var(--gold); box-shadow: 0 0 8px rgba(227, 200, 146, .35); }
.sc__word { grid-column: 1 / -1; min-height: 0; font-size: calc(13px * var(--fz-read)); color: var(--fg-2); }
.sc__word:empty { display: none; }
.sc__row[data-state="wait"] .sc__name { color: var(--fg-3); }
.sc__row[data-state="wait"] .sc__val { color: var(--fg-3); font-weight: 400; font-size: calc(12.5px * var(--fz)); }
.sc__row[data-state="wait"] .sc__track i { background: transparent; box-shadow: inset 0 0 0 1px rgba(238, 233, 223, .14); }
.sc__row[data-state="low"] .sc__track i.is-lit { background: rgba(214, 120, 90, .9); box-shadow: 0 0 8px rgba(214, 120, 90, .3); }
.sc__row[data-state="low"] .sc__val { color: rgba(222, 140, 110, .95); }
.sc__row[data-state="high"] .sc__track i.is-lit { background: var(--gold-2); }
.sc__short { display: none; }
.sc__row.is-new { animation: sc-new 1.6s var(--ease); }
@keyframes sc-new { 0% { background-color: rgba(200, 169, 107, .22); } 100% { background-color: transparent; } }
@media (prefers-reduced-motion: reduce) {
  .sc__row.is-new { animation: none; }
  .sc__track i, .sc__dial-fill { transition: none; }
}
@media (max-width: 1023px) {
  .sc { gap: 12px; }
  .sc__head { gap: 14px; }
  .sc__dial { width: 78px; }
  .sc__dial-num b { font-size: calc(1.7rem * var(--fz)); }
  .sc__line { font-size: calc(1.15rem * var(--fz)); }
  .sc__sub { font-size: calc(12.5px * var(--fz-read)); }
  .sc__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; }
  .sc__row { padding: 5px 6px 6px; gap: 4px 6px; }
  .sc__name { font-size: calc(.95rem * var(--fz)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sc__long, .sc__word, .sc__row[data-state="wait"] .sc__val { display: none; }
  .sc__short { display: inline; }
  .sc__track { gap: 2px; }
  .sc__track i { height: 4px; }
}
@media (max-width: 640px) {
  .sc__sub, .studio[data-tool="exit"] .ro__ends { display: none; }
  .sc__dial { width: 64px; }
  .sc__dial-num b { font-size: calc(1.45rem * var(--fz)); }
  .sc__dial-num span { font-size: calc(9.5px * var(--fz)); }
}
.res__value, .res__moves { margin-top: clamp(56px, 6vw, 96px); }
.res--exit .res__band-ends { margin-top: 10px; }
@media (max-width: 640px) {
  .res__value, .res__moves { margin-top: 56px; }
}

/* ---------- The dashboard and the dials (portfolio review) ---------- */
.pf-board { display: grid; gap: 14px; }
.pf-board__sum { font-family: var(--serif); font-size: calc(clamp(1.2rem, 1.55vw, 1.45rem) * var(--fz)); line-height: 1.25; }
.pf-board__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; }
.pf-tile { display: grid; gap: 3px; padding: 12px 14px 13px; background: rgb(14, 19, 17); }
.pf-tile b { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.35rem, 1.8vw, 1.7rem) * var(--fz)); line-height: 1.05; letter-spacing: calc(-.015em * var(--ek)); color: var(--fg); font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.pf-tile span { font-size: calc(12.5px * var(--fz)); color: var(--fg-3); }
.pf-tile.is-empty b { font-family: var(--sans); font-size: calc(13px * var(--fz)); line-height: calc(clamp(1.35rem, 1.8vw, 1.7rem) * var(--fz) * 1.05); color: var(--fg-3); }
.pf-glance { margin-top: clamp(56px, 6vw, 96px); }
.pf-glance__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(20px, 2.4vw, 32px); }
.pf-glance .mix { margin-top: 0; padding-top: 0; border-top: 0; }
.pf-glance .mix svg { width: 96px; height: 96px; }
.pf-glance .mix__key { font-size: calc(14px * var(--fz-read)); }
@media (max-width: 899px) {
  .pf-glance__body { grid-template-columns: 1fr; }
  .pf-glance .mix svg { width: 72px; height: 72px; }
}
@media (max-width: 640px) {
  /* In the studio on a phone, the sentence carries the mix and the dials keep only their figures. */
  .studio .pf-board__sum { font-size: calc(1rem * var(--fz)); }
  .studio .pf-tile { padding: 7px 10px 8px; gap: 1px; }
  .studio .pf-tile b { font-size: calc(1.1rem * var(--fz)); }
  .studio .dial__sub, .studio .mix { display: none; }
  .studio .dials { margin-top: 10px; }
}
.dials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.dial { padding-top: 6px; }
.dial__face { position: relative; }
.dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.dial__track { fill: none; stroke: var(--rule-2); stroke-width: 3; stroke-linecap: round; }
.dial__fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(227, 200, 146, .4)); }
.dial__fill.is-hot { stroke: rgba(214, 120, 90, .95); }
.dial__band { fill: none; stroke: rgba(200, 169, 107, .35); stroke-width: 7; }
.dial__num { position: absolute; left: 0; right: 0; top: 38%; text-align: center; font-family: var(--serif); font-size: calc(clamp(1.3rem, 1.7vw, 1.6rem) * var(--fz)); line-height: 1; letter-spacing: calc(-.015em * var(--ek)); }
.dial__num small { display: block; margin-top: 4px; font-family: var(--sans); font-size: calc(11.5px * var(--fz)); color: var(--fg-3); letter-spacing: 0; }
.dial__sub { margin-top: 6px; text-align: center; font-size: calc(12px * var(--fz-read)); color: var(--fg-2); line-height: 1.35; min-height: 2.7em; }
.dial--empty .dial__num { color: var(--fg-3); }
.mix { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.mix svg { width: 56px; height: 56px; flex: none; overflow: visible; }
.mix__seg { fill: none; stroke-width: 7; transition: stroke-dasharray .8s var(--ease), stroke-dashoffset .8s var(--ease), opacity .5s var(--ease); }
.mix__key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(12.5px * var(--fz-read)); color: var(--fg-2); }
.mix__key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; transform: translateY(-1px); }
.pf-title { max-width: 18ch; }
.pf-route { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--gold); max-width: 50ch; }
.pf-route h4 { font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.3rem, 1.8vw, 1.7rem) * var(--fz)); line-height: 1.12; color: var(--gold-2); }
.pf-route p { margin-top: 8px; color: var(--fg-2); font-size: calc(15.5px * var(--fz-read)); line-height: 1.55; }
.pf-do { color: var(--gold-2) !important; font-size: calc(14.5px * var(--fz-read)) !important; }
.pf-gaps { display: grid; gap: 0; max-width: 720px; border-top: 1px solid var(--rule); }
.pf-gap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.pf-gap__addr { font-size: calc(15px * var(--fz-read)); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-gap__addr small { display: block; color: var(--fg-3); font-size: calc(12.5px * var(--fz-read)); }
.pf-gap__ctl { display: flex; gap: 6px; }
.pf-gap__ctl .tool__chip { height: 32px; padding: 0 12px; font-size: calc(13px * var(--fz)); }
.pf-gap__ctl .tool__input { width: 120px; padding: 4px 0; font-size: calc(15px * var(--fz-read)); }
.pf-gaps__more { padding: 12px 0; font-size: calc(14px * var(--fz-read)); color: var(--fg-3); }
.pf-table { margin-top: 16px; width: 100%; border-collapse: collapse; font-size: calc(13.5px * var(--fz-read)); }
.pf-table th, .pf-table td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pf-table th { font-weight: 500; color: var(--fg-2); }
.pf-table td { color: var(--fg); }
.pf-table .is-gap { color: rgba(222, 140, 110, .9); }
@media (max-width: 640px) {
  .dials { gap: 6px; }
  .pf-gap { grid-template-columns: 1fr; }
}

/* ---------- The mandate (institutions) ----------
   A paper that writes itself as the brief is given, the world as an arc
   with the regions lit, and the lifecycle rail. */
.mandate__grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.mandate__aside { position: sticky; top: 120px; }
.mandate__note { margin-top: 18px; font-family: var(--serif); font-size: calc(clamp(1.25rem, 1.6vw, 1.5rem) * var(--fz)); line-height: 1.3; color: var(--fg-2); max-width: 30ch; }
.mandate__aside .res__rail { margin-top: 44px; }
.mandate__aside .res__text { margin-top: 26px; }
.mandate__rows { margin-top: 24px; border-top: 1px solid var(--rule); }
.mandate__rows .res__doc-row:first-of-type { border-top: 0; }
.mandate__close { padding-right: 84px; }
.paper { position: relative; background: var(--paper); color: #111613; border-radius: 3px; padding: 14px 18px 18px; box-shadow: 0 24px 50px rgba(0, 0, 0, .4); --fg: #111613; --fg-2: rgba(17, 22, 19, .66); --fg-3: rgba(17, 22, 19, .42); --rule: rgba(17, 22, 19, .13); min-height: 220px; }
.paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--gold); }
.paper__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.paper__head .brand { color: #111613; --mark-accent: var(--bronze); transform: scale(.8); transform-origin: left center; }
.paper__date { font-size: calc(12px * var(--fz)); color: var(--fg-2); }
.paper__title { margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: calc(clamp(1.25rem, 1.7vw, 1.6rem) * var(--fz)); line-height: 1.05; min-height: 1.1em; }
.paper__title em { font-style: italic; color: var(--bronze); }
.paper__rows { margin-top: 10px; display: grid; }
.paper__row { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: 10px; padding: 5px 0; border-top: 1px solid var(--rule); font-size: calc(13.5px * var(--fz-read)); line-height: 1.4; opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.paper__row.is-on { opacity: 1; transform: none; }
.paper__row dt { color: var(--fg-2); }
.paper__row dd { margin: 0; color: #111613; }
.paper__row dd.is-blank { color: var(--fg-3); font-style: italic; }
.paper__seal { position: absolute; right: 16px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(142, 108, 48, .5); display: grid; place-items: center; color: var(--bronze); --mark-accent: var(--bronze); transform: rotate(-8deg) scale(.6); opacity: 0; transition: transform .8s var(--ease), opacity .5s var(--ease); }
.paper__seal svg { width: 22px; height: 22px; }
.paper__seal.is-on { transform: rotate(-8deg) scale(1); opacity: 1; }
.world { margin-top: 8px; }
.world .wl { fill: none; stroke: rgba(238, 233, 223, .3); stroke-width: 1; }
.world .wd { fill: rgba(238, 233, 223, .35); transition: fill .5s var(--ease), r .5s var(--ease); }
.world .wd.is-on { fill: var(--gold-2); }
.world .wt { font-family: var(--sans); font-size: 11px; fill: rgba(238, 233, 223, .45); transition: fill .5s var(--ease); }
.world .wt.is-on { fill: var(--gold-2); }
.world .wr { fill: none; stroke: var(--gold-2); stroke-width: 1; opacity: 0; }
.world .wr.is-on { animation: world-ring 1.6s var(--ease) forwards; }
@keyframes world-ring { 0% { opacity: .8; r: 4; } 100% { opacity: 0; r: 22; } }
.rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 10px; padding-top: 18px; }
.rail::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--rule-2); }
.rail__st { position: relative; font-size: calc(12px * var(--fz)); color: var(--fg-3); transition: color .5s var(--ease); }
.rail__st::before { content: ""; position: absolute; left: 0; top: -17px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid var(--rule-2); transition: background-color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }
.rail__st.is-on { color: var(--fg); }
.rail__st.is-on::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 12px rgba(227, 200, 146, .55); }
@media (max-width: 899px) {
  .mandate__grid { grid-template-columns: 1fr; }
  .mandate__aside { position: static; }
}
@media (max-width: 640px) {
  .mandate__close { padding-right: 0; }
  .mandate__aside .res__rail { margin-top: 30px; }
  .paper__row { grid-template-columns: 1fr; gap: 2px; }
}
@media print {
  .res__doc, .res__rail, .res__station, .res__station::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .res__doc { background: var(--paper) !important; }
  .mandate__grid { grid-template-columns: 1fr; }
  .mandate__aside { position: static; break-inside: avoid; }
  .res__station, .res__station::before { transition: none !important; }
}