/* The content layer: what the panel's findings added. Loaded after app.css, so it wins on equal weight.
   rem follows the window: 56.25rem is the height of every screen, 90 to 100rem its width. */

/* The Measured tag: the one line on the site that is not invented, kept apart from Illustrative. */
.chip-measured{color:var(--lime);border:1px solid rgba(166,242,92,.5)}

/* Act 4: the room remembers the date, so it is big while the story plays. It is the total, never the build. */
@media (min-width:721px){
  body.story .hub-fore{max-width:none;padding:.3rem .8rem;background:rgba(7,8,12,.86)}
  body.story .fore-long{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.story .fore-big{display:flex;align-items:baseline;gap:.6rem;white-space:nowrap}
  body.story .fore-big b{font:600 3.6rem/1 var(--f-d);letter-spacing:-.03em;color:var(--accent)}
  body.story .fore-big span{font:500 1.3rem/1 var(--f-b);color:var(--soft)}
  /* Acts 5 and 6 show their proof in the story too: the 9 changes and the signed record. */
  body.story .fact-sub{display:block}
  body.story .log-wrap{display:block}
}

/* Act 8: an open item is not a pass, so it gets no green tick. The panel saw "2 open" beside one. */
.gate.open .gate-mark{background:none;border-color:var(--amber);color:transparent}
.gate.open .gate-bar i{background:var(--amber)}
.gate.open .gate-v{color:var(--amber)}
.gate.status{grid-template-columns:1.65rem minmax(0,1fr) auto}
.gate.status .gate-bar{display:none}
.gate.status .gate-v{font:500 1rem/1.15 var(--f-m);white-space:normal;text-align:right;max-width:15rem}
.ml-sign{font-size:.95rem;line-height:1.25;color:var(--soft)}

/* Act 9: the same finish on both bars, your side, and what you decided. */
.res-finish{margin-top:.5rem;font-size:1.08rem;line-height:1.25;color:var(--soft)}
.res-finish b{font-weight:600;color:var(--paper)}
.res-sidenote,.res-decided{font-size:.98rem;line-height:1.26;color:var(--soft)}
.res-sidenote b,.res-decided b{font-weight:600;color:var(--paper)}
.res-back{color:var(--amber)}

/* One budget, two projects. The grey 100 spreads, then splits into what it pays for. */
.split{display:flex;flex-direction:column;gap:.35rem;margin-top:.7rem}
.split-head{display:flex;align-items:center;gap:.6rem;font:600 1.15rem/1.1 var(--f-d)}
.split-bar{position:relative;display:flex;gap:3px;height:2.6rem;border-radius:.3rem;overflow:hidden}
.split-seg{flex:1 1 0;min-width:0;display:flex;align-items:center;padding:0 .7rem;font:600 1.1rem/1 var(--f-m);white-space:nowrap;overflow:hidden;color:var(--ink)}
.split-p{background:var(--lime)}
.split-left{background:var(--amber);justify-content:center}
.split-whole{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:var(--mute);color:var(--ink);font:600 1.3rem/1 var(--f-m)}
.split-note{font-size:.98rem;line-height:1.25;color:var(--soft)}
.split-note b{font-weight:600;color:var(--amber)}
body.story .split{display:none}
body.story .split-on .split{display:flex;margin-top:1.2rem}
body.story .split-on .wf-step{display:none}
body.story .split-on .split-bar{height:5rem}
body.story .split-on .split-seg{font-size:1.7rem}
body.story .split-on .split-head{font-size:1.5rem}
body.story .split-on .split-note{font-size:1.15rem}
@media (prefers-reduced-motion:no-preference){
  .split-on .split-bar{transform-origin:0 50%;animation:split-spread .7s var(--ease) both}
  .split-on .split-whole{display:flex;animation:split-go .4s .75s ease both}
}
@keyframes split-spread{from{transform:scaleX(.45)}to{transform:scaleX(1)}}
@keyframes split-go{from{opacity:1}to{opacity:0}}

/* How to start: five steps, the fourth is the vendor process a risk officer asks about first. */
@media (min-width:721px){
  .how{grid-template-columns:repeat(5,minmax(0,1fr))}
  .how li{min-height:8rem}
  .how-t{font-size:1.14rem}
}

/* Why it is so good: the sentence, four wins, and one thing to do tonight, all on one screen. */
.why-sentence{font:500 1.75rem/1.2 var(--f-d);letter-spacing:-.012em;max-width:70rem;text-wrap:pretty}
.why-end{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem}
.why-ask{flex:1 1 26rem;font:500 1.6rem/1.15 var(--f-d);letter-spacing:-.012em}
.why-mail{display:inline-flex;align-items:center;gap:.6rem;min-height:3.2rem;padding:0 1.5rem;border-radius:.7rem;background:var(--accent);color:var(--ink);font:600 1.25rem/1 var(--f-d);text-decoration:none;white-space:nowrap}
.why-mail .glyph{width:1.4rem;height:1.4rem}
.why-mail-p{background:var(--glass);color:var(--paper);border:1px solid var(--rule-2)}
.why-big .chip{font-size:.72rem}
@media (min-width:721px){
  #why{gap:1rem;padding:1.5rem var(--gut) 1.2rem}
  #why h1{font-size:3.6rem}
  .why-item{gap:.6rem;padding:1.2rem 1.3rem}
  .why-word{font-size:2.3rem;min-height:2.1em}
  .why-big b{font-size:3.5rem}
  .why-big span{font-size:1.15rem}
  .why-line{margin-top:.2rem;font-size:1.32rem}
  .why-how{min-height:3.2rem;font-size:1.25rem}
}
@media (max-width:720px){
  #why .why-sentence{font-size:1.02rem;line-height:1.25}
  .why-end{gap:.4rem}
  .why-ask{flex:1 1 100%;font-size:1.02rem}
  .why-mail{flex:1 1 40%;justify-content:center;min-height:2.85rem;padding:0 .5rem;font-size:.92rem}
  .why-mail .glyph{width:1.1rem;height:1.1rem}
}

/* The partner's card: a sheet like The cast, with its own link. */
#partner{position:fixed;inset:0;z-index:41;background:var(--ink);overflow:hidden auto;animation:fadein .28s ease both}
#partner[hidden]{display:none}
.partner-in{min-height:100%;display:flex;flex-direction:column;gap:1.5rem;padding:2rem var(--gut)}
.partner-lead{font:500 2rem/1.25 var(--f-d);letter-spacing:-.015em;max-width:62rem;text-wrap:pretty}
.partner-wins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.partner-wins li{display:flex;flex-direction:column;gap:.5rem;padding:1.3rem;border:1px solid var(--rule-2);border-radius:.9rem;background:var(--glass)}
.partner-wins b{font:600 1.6rem/1.1 var(--f-d);color:var(--lime)}
.partner-wins span{font-size:1.2rem;line-height:1.3;color:var(--soft)}
.partner-note{font-size:1.3rem;line-height:1.3;color:var(--soft)}
.partner-note b{font-weight:600;color:var(--paper)}
.partner-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
.partner-btns .mail{margin-top:0;animation:none}
.partner-btns .ghost{text-decoration:none}
@media (max-width:720px){
  .partner-in{gap:.8rem;padding:1rem}
  .partner-lead{font-size:1.15rem}
  .partner-wins{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .partner-wins li{padding:.7rem .85rem;gap:.2rem}
  .partner-wins b{font-size:1.15rem}
  .partner-wins span{font-size:.95rem}
  .partner-note{font-size:1rem}
}

/* Act 9 must hold the waterfall, the finish, the split and your side on one screen in click mode. */
@media (min-width:721px){
  .act-result h1{font-size:3.4rem}
  .wf{margin-top:.6rem}
  .wf-row{min-height:2.55rem;grid-template-columns:19rem minmax(0,1fr) 7.6rem}
  .wf-track{height:1.7rem}
  .split-bar{height:2.2rem}
  .res-line{margin-top:.4rem;font-size:1.3rem}
  .res-side{gap:.6rem}
  .stat{padding:.38rem 0}
  .res-sidenote,.res-decided,.notes{font-size:.92rem;line-height:1.18}
  .res-side .insight.win{font-size:1.22rem;line-height:1.22}
}
/* A short phone keeps the bars, the finish and the split. Your side waits on the Why screen, which names it. */
@media (max-width:720px) and (max-height:760px){
  .act-result .res-sidenote{display:none}
  .act-result .split{gap:.2rem;margin-top:.35rem}
  .act-result .split-bar{height:1.9rem}
  .act-result .split-seg{font-size:.9rem}
  .act-result .res-finish{margin-top:.3rem;font-size:.9rem}
  .act-result .split-note{font-size:.84rem}
}

/* Act 8: the longest rule lists and the longest approve label, on the card and beside it. */
.act-proof .gate{padding:.3rem 0}
.ml-btns{grid-template-columns:1fr 1.55fr}
.ml-approve{padding:.25rem .55rem;font-size:1.1rem;line-height:1.1}

/* A chip keeps its own size and colour wherever it sits: the parent's span rules made them shout. */
.tog-text .chip,.why-big .chip{font:500 .72rem/1 var(--f-m);letter-spacing:.02em;align-self:flex-start}
.tog-text .chip span,.why-big .chip span{font:inherit;line-height:inherit;color:inherit}
.tog-text .chip-preview,.why-big .chip-preview{color:#C4BBFF}
.tog-text .chip-illus,.why-big .chip-illus{color:var(--mute)}
.why-big>span{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .5rem}

/* The Why screen has room at both desk sizes: 13rem spare at 1440x900 with the first sizes. SPEC wants very large type. */
@media (min-width:721px){
  #why h1{font-size:4rem}
  .why-word{font-size:2.55rem}
  .why-big b{font-size:3.85rem}
  .why-big>span{font-size:1.25rem}
  .why-line{font-size:1.5rem;line-height:1.24}
  /* How to start at 1440x900 cut its buttons under the win band by 11px. */
  .res-ask{max-width:none;margin-top:.9rem;font-size:1.5rem}
  .how{margin-top:.9rem}
  .how li{min-height:6.8rem;padding:.8rem;gap:.35rem}
  .act-result .mail{margin-top:.6rem;padding:.6rem 1.3rem;font-size:2rem}
  .act-result .mail .glyph{width:1.8rem;height:1.8rem}
}
/* The phone Why: rows as tall as their text, the word free to wrap, the end step reached by a short scroll. */
@media (max-width:720px){
  .why-list{grid-auto-rows:auto;flex:none}
  .why-item{grid-template-columns:minmax(0,1fr) auto;gap:.1rem .6rem;padding:.55rem .8rem}
  .why-word{white-space:normal}
  .why-big>span{justify-content:flex-end;font-size:.74rem;line-height:1.15}
}
@media (max-width:720px){
  /* Measured at 402x874: 68px past the fold with the word in the wide column. The name is in the sheet behind it. */
  #why .why-project{display:none}
  #why{gap:.45rem}
  .why-item{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
  .why-big{max-width:11.6rem}
  #why .why-sentence{font-size:.98rem;line-height:1.22}
  .why-line{margin-top:.1rem;font-size:.92rem;line-height:1.22}
}

/* The pass mark beside a gate's name: an expert asks "passed against what?" */
.gate-target{font:400 .78em/1 var(--f-m);color:var(--soft);white-space:nowrap}
button.why-mail{cursor:pointer}
/* "3 +\n7.5" broke across lines in the compare table, and the sum then reads as two numbers. */
.stat-b{white-space:nowrap}

/* Act 9 ran 15 to 17 px over on desktop with non-default choices. The two note lines repeat the bars, so they go, not the honest "Your side". */
.act-result .notes{display:none}