/* /software/anvil/ page layout: scorecard, module switcher, Hudson transcription,
   lifecycle. Shared system in pylon.css, mockup kit in pylon-mockups.css.

   Deviations from the handoff, all its own open items:
     - .stmt comes from pylon.css (1/11); this page's 1/10 override is dropped
     - .stat.gold renamed .stat.accent -- the token is --amber
     - the scorecard marker label reads attr(data-v) instead of a hardcoded '64'
     - the confidence bar width comes from --conf, shared with its label
     - a reduced-motion block resets the .is-on panels, which had none */
body{--acc:var(--amber);--acc-txt:var(--amber-txt)}
@media(max-width:1024px){.stmt{grid-column:1/-1}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut);margin-top:clamp(3rem,5vw,4.25rem);border-top:1px solid var(--rule)}
@media(max-width:820px){.stats{grid-template-columns:1fr}}
.stat{padding-top:1.5rem;border-top:1px solid transparent;margin-top:-1px}
.stat b{display:block;font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:500;letter-spacing:-.045em;line-height:1;color:var(--t1)}
.stat.accent b{color:var(--acc-txt)}
.stat p{margin-top:.875rem;font-size:.9375rem;line-height:1.6;color:var(--t3);max-width:34ch}
.stat cite{display:block;margin-top:.75rem;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);font-style:normal}

/* ---- deal score ---- */
.ds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:start;margin-top:clamp(3rem,5vw,4.25rem)}
@media(max-width:1024px){.ds{grid-template-columns:1fr}}
.lgd{margin-top:2.5rem;border-top:1px solid var(--rule)}
.lgd-r{display:grid;grid-template-columns:2.25rem 5.5rem minmax(0,1fr);align-items:baseline;gap:1rem;padding:.875rem 0;border-bottom:1px solid var(--rule-3)}
.lgd-r b{font-size:1.125rem;font-weight:600;letter-spacing:-.03em;color:var(--gc)}
.lgd-r .rg{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--t4);white-space:nowrap}
.lgd-r span.tx{font-size:.875rem;line-height:1.5;color:var(--t3)}
@media(max-width:520px){.lgd-r{grid-template-columns:2rem minmax(0,1fr);row-gap:.25rem}.lgd-r .rg{grid-column:2}.lgd-r span.tx{grid-column:2}}

/* scorecard mockup. NB: the kit already defines .sc as the score numeral
   (mono, .88em, right-aligned). Reset those three or the whole card inherits
   them. Rename this block when the kit gets namespaced. */
.sc{display:flex;flex-direction:column;gap:1.15em;height:100%;font-family:var(--sans);font-size:1em;text-align:left}
.sc-t{display:flex;align-items:center;gap:.75em;flex:none}
.sc-t .ico{width:2.1em;height:2.1em;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(212,149,10,.14);border:1px solid rgba(212,149,10,.4);color:var(--acc-txt);font-family:var(--mono);font-size:.85em;letter-spacing:.06em}
.sc-t .nm{min-width:0}
.sc-t .nm b{display:block;font-size:1.05em;font-weight:500;letter-spacing:-.025em;color:var(--t1);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-t .nm i{display:block;font-style:normal;font-family:var(--mono);font-size:.76em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-top:.25em}
.sc-t .wt{margin-left:auto;font-family:var(--mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);border:1px solid var(--rule-2);padding:.3em .5em;white-space:nowrap}
.sc-hero{display:flex;align-items:center;gap:1.1em;padding:1.1em 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);flex:none}
.sc-hero .gr{font-size:4.6em;font-weight:500;letter-spacing:-.06em;line-height:.8;color:#f6a04a;flex:none}
.sc-hero .mt{min-width:0}
.sc-hero .mt b{display:block;font-size:1.5em;font-weight:500;letter-spacing:-.04em;color:var(--t1);line-height:1}
.sc-hero .mt b small{font-size:.5em;color:var(--t4);font-weight:400;margin-left:.2em}
.sc-hero .mt span{display:block;margin-top:.5em;color:var(--t3);line-height:1.45}
.sc-d{display:flex;flex-direction:column;gap:.8em;flex:none}
.sc-dr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.75em}
.sc-dr .dn{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sc-dr .dn em{font-style:normal;font-family:var(--mono);font-size:.74em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);margin-left:.7em}
.sc-dr .dv{font-family:var(--mono);color:var(--t1)}
.sc-tk{grid-column:1/-1;height:3px;background:rgba(255,255,255,.07);position:relative;overflow:hidden}
.sc-tk i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--bc);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--e)}
.is-on .sc-tk i{transform:scaleX(1)}
.sc-s{margin-top:auto;padding-top:1.1em;border-top:1px solid var(--rule-2);flex:none}
.sc-sb{position:relative;height:6px;background:linear-gradient(90deg,#c0432e 0%,#c0432e 55%,#d99a2b 60%,#d99a2b 70%,#c9a227 75%,#8fb84a 85%,#3ec98a 95%)}
.sc-sb::after{content:'';position:absolute;inset:0;background:rgba(10,10,12,.55)}
.sc-mk{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--t1);left:0;z-index:2;transition:left 1.2s var(--e)}
.is-on .sc-mk{left:var(--at)}
.sc-mk::after{content:attr(data-v);position:absolute;left:50%;bottom:calc(100% + .35em);transform:translateX(-50%);font-family:var(--mono);font-size:.72em;letter-spacing:.1em;color:var(--t1)}
.sc-sl{display:flex;justify-content:space-between;margin-top:.6em;font-family:var(--mono);font-size:.72em;letter-spacing:.14em;color:var(--t4)}

/* ---- module switcher ---- */
.mx{margin-top:clamp(3rem,5vw,4.5rem);align-items:start}
.mx-l{grid-column:1/5;border-top:1px solid var(--rule)}
.mx-v{grid-column:5/13;border-top:1px solid var(--rule);border-left:1px solid var(--rule-2);position:relative;margin-right:calc(-1 * (var(--px) + max(0px,(var(--vw,100vw) - var(--max)) / 2)))}
@media(max-width:1024px){.mx-l{grid-column:1/-1}.mx-v{grid-column:1/-1;border-left:0;margin-right:calc(var(--px) * -1);margin-left:calc(var(--px) * -1);margin-top:2rem}}
.mod{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:baseline;gap:var(--gut);width:100%;padding:1.0625rem 0;border-bottom:1px solid var(--rule-2);text-align:left;position:relative;transition:background .35s var(--e)}
.mod::before{content:'';position:absolute;left:-.875rem;top:-1px;bottom:-1px;width:2px;background:var(--acc);transform:scaleY(0);transition:transform .4s var(--e)}
.mod:hover{background:linear-gradient(90deg,rgba(255,255,255,.03),transparent 60%)}
.mod .no{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;color:var(--t4);transition:color .3s}
.mod .nm{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;color:var(--t3);transition:color .3s}
.mod .de{display:block;margin-top:.4375rem;font-size:.875rem;line-height:1.55;color:var(--t4);max-width:38ch;max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--e),opacity .3s}
.mod[aria-selected="true"]::before{transform:scaleY(1)}
.mod[aria-selected="true"] .no{color:var(--acc-txt)}
.mod[aria-selected="true"] .nm{color:var(--t1)}
.mod[aria-selected="true"] .de{max-height:8rem;opacity:1}
.mx-ar{position:relative;padding-top:60%;background:var(--ink-3)}
.mx-p{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--e);pointer-events:none}
.mx-p img{width:100%;height:100%;object-fit:cover;object-position:left top}
.mx-p[data-on]{opacity:1}
.mx-ar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,12,.5),transparent 26%);pointer-events:none}
.mx-f{display:flex;align-items:center;gap:.875rem;flex-wrap:wrap;margin-top:1.5rem;color:var(--t4)}
.mx-f .rule{flex:1;min-width:2rem;height:1px;background:var(--rule-2)}

/* ---- hudson listens ---- */
.hp{display:flex;flex-direction:column;gap:0;height:100%}
.hp-t{display:flex;align-items:center;gap:.8em;padding-bottom:.9em;border-bottom:1px solid var(--rule-2);flex:none}
.hp-rec{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.72em;letter-spacing:.16em;text-transform:uppercase;color:#ff7a6b}
.hp-rec .d{width:.45em;height:.45em;border-radius:50%;background:#ff7a6b;animation:recPulse 1.6s ease-in-out infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.25}}
.hp-w{display:flex;align-items:center;gap:.18em;height:1.1em}
.hp-w i{width:.14em;background:var(--violet);opacity:.65;animation:hpw 1.1s ease-in-out infinite}
.hp-w i:nth-child(1){animation-delay:0s}.hp-w i:nth-child(2){animation-delay:.1s}.hp-w i:nth-child(3){animation-delay:.2s}.hp-w i:nth-child(4){animation-delay:.3s}.hp-w i:nth-child(5){animation-delay:.4s}.hp-w i:nth-child(6){animation-delay:.5s}.hp-w i:nth-child(7){animation-delay:.6s}.hp-w i:nth-child(8){animation-delay:.7s}
@keyframes hpw{0%,100%{height:22%}50%{height:100%}}
.hp-b{margin-left:auto;font-family:var(--mono);font-size:.7em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4);white-space:nowrap}
.hp-c{padding:.9em 0;border-bottom:1px solid var(--rule-3);flex:none}
.hp-c .tg{font-family:var(--mono);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt)}
.hp-c .nm{margin-top:.35em;font-size:1.05em;font-weight:500;letter-spacing:-.025em;color:var(--t1)}
.hp-s{padding:.95em 0;display:flex;flex-direction:column;gap:.85em;flex:none}
.hp-ln{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:.9em;align-items:baseline;opacity:0;transform:translateY(.3em);transition:opacity .5s var(--e),transform .5s var(--e)}
.is-on .hp-ln{opacity:1;transform:none}
.is-on .hp-ln.b{transition-delay:.5s}
.hp-ln .who{font-family:var(--mono);font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--t4)}
.hp-ln.b .who{color:var(--acc-txt)}
.hp-ln .tx{color:var(--t2);line-height:1.5;border-left:2px solid var(--rule-2);padding-left:.8em}
.hp-ln.b .tx{border-left-color:rgba(212,149,10,.45);color:var(--t1)}
.hp-g{margin-top:auto;border:1px solid rgba(139,109,240,.3);background:linear-gradient(180deg,rgba(139,109,240,.07),transparent);padding:.9em;flex:none;opacity:0;transform:translateY(.4em);transition:opacity .6s var(--e) 1.1s,transform .6s var(--e) 1.1s}
.is-on .hp-g{opacity:1;transform:none}
.hp-gh{display:flex;align-items:center;justify-content:space-between;gap:.75em;flex-wrap:wrap}
.hp-gh .lb{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--violet)}
.hp-gh .lb svg{width:1em;height:1em}
.hp-gh .cf{font-family:var(--mono);font-size:.72em;letter-spacing:.1em;color:var(--t3)}
.hp-r{display:flex;align-items:center;gap:.6em;margin-top:.7em}
.hp-r .rt{font-family:var(--mono);font-size:.76em;letter-spacing:.14em;text-transform:uppercase;color:var(--acc-txt);border:1px solid rgba(212,149,10,.45);padding:.28em .55em}
.hp-r .was{font-family:var(--mono);font-size:.72em;letter-spacing:.1em;color:var(--t4)}
.hp-bar{height:2px;background:rgba(255,255,255,.07);margin-top:.7em;overflow:hidden}
.hp-bar i{width:var(--conf);display:block;height:100%;width:87%;background:var(--violet);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--e) 1.5s}
.is-on .hp-bar i{width:var(--conf);transform:scaleX(1)}
.hp-why{margin-top:.7em;font-size:.94em;line-height:1.5;color:var(--t3)}
.hp-a{display:flex;align-items:center;justify-content:space-between;gap:.75em;flex-wrap:wrap;margin-top:.85em;padding-top:.75em;border-top:1px solid var(--rule-3)}
.hp-btn{font-family:var(--mono);font-size:.72em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--t1);border:0;padding:.5em .8em;cursor:pointer;transition:background .25s}
.hp-btn:hover{background:#f2f2f4}
.hp-btn.done{background:transparent;color:#3ec98a;border:1px solid rgba(62,201,138,.45)}
.hp-src{font-family:var(--mono);font-size:.7em;letter-spacing:.08em;color:var(--t4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- lifecycle ---- */
.lc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--rule)}
@media(max-width:900px){.lc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.lc{grid-template-columns:1fr}}
.ph{padding:1.75rem var(--gut) 0 0;position:relative}
.ph+.ph{border-left:1px solid var(--rule-2);padding-left:var(--gut)}
.ph::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--e)}
.lc.is-on .ph::before{transform:scaleX(1)}
.lc.is-on .ph:nth-child(2)::before{transition-delay:.14s}
.lc.is-on .ph:nth-child(3)::before{transition-delay:.28s}
.lc.is-on .ph:nth-child(4)::before{transition-delay:.42s}
.ph .no{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--rule-2);font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;color:var(--acc-txt);margin-bottom:1.125rem}
.ph h3{font-size:1.0625rem;font-weight:500;letter-spacing:-.025em;color:var(--t1);margin-bottom:.625rem}
.ph p{font-size:.875rem;line-height:1.6;color:var(--t3)}
@media(max-width:900px){.ph{padding-bottom:2rem}.ph:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--rule-2);padding-top:1.75rem}}
@media(max-width:560px){.ph+.ph{border-left:0;padding-left:0;border-top:1px solid var(--rule-2);padding-top:1.75rem}}
.lc-f{display:flex;align-items:baseline;gap:1.25rem;flex-wrap:wrap;margin-top:clamp(2rem,4vw,3rem);padding-top:1.25rem;border-top:1px solid var(--rule)}
.lc-f b{font-size:clamp(1.125rem,1.8vw,1.5rem);font-weight:500;letter-spacing:-.035em;color:var(--t1)}
.lc-f span{font-size:.9375rem;color:var(--t3)}
/* The .is-on choreography uses delays up to 1.5s. pylon.css's site-wide block
   zeroes durations but not delays, so without this an element sits at opacity 0
   for over a second and then snaps -- worse than no animation. Same bug class as
   the homepage hero entrance. */
/* the suggestion card's mark is a static copy of the analyst mark by design;
   it uses the shared component with its animation switched off */
.hp-g .hr-,.hp-g .hn{animation:none}

@media(prefers-reduced-motion:reduce){
.hp-ln,.hp-g{opacity:1;transform:none;transition:none}
.hp-bar i,.sc-tk i{transform:none;transition:none}
.sc-mk{transition:none;left:var(--at)}
.ph::before{transform:scaleX(1);transition:none}
}