/* ============================================================================================
   Screens six, seven and eight - the plate, the chart and the build order. They are drawn in the
   browser rather than on the server, so they have their own rules; every value they use comes
   from hq.css's tokens, so the HQ has one palette, one type scale and one spacing scale.
   ============================================================================================ */

/* the names these three screens' own rules already speak, pointed at the shell's tokens */
:root{ --ink-soft:var(--teal-700); --card:#ffffff; --teal-deep:var(--teal-900); --gold-soft:var(--bone); }

/* These three draw straight into the column - the boxes inside them are the page, so #app is not
   a box of its own any more. */
#app{background:none;border:0;padding:0;box-shadow:none;margin:0}
.loading{color:var(--blue);font-style:italic}

/* ================================================================================ THE PLATE
   The Collab's brain-dump: three columns, hours per item, "+ another job" under each. */
.cols{display:grid;grid-template-columns:1fr;gap:var(--s4);margin:0 0 var(--s4)}
@media (min-width:760px){ .cols{grid-template-columns:1fr 1fr 1fr} }
.cols>.box{margin:0;min-width:0;padding:var(--s4)}
.colhead{font-family:var(--pluma);font-size:var(--t-label);font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 var(--s3);max-width:none}
.muted.empty{font-size:12.5px;color:var(--teal-300);margin:0 0 var(--s3);font-style:italic}

.task{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s3) 0;
  border-bottom:1px solid var(--bone-400)}
.task:first-of-type{padding-top:0}
.task .nm{flex:1 1 100%;font-size:14px;padding:9px 11px;border:1px solid var(--bone-400);
  border-radius:8px;background:#fff;color:var(--teal);font-family:var(--sans);font-weight:300}
.task .nm:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,44,.14)}
.task .foot{flex:1 1 100%;display:flex;align-items:center;gap:var(--s2)}
.task .hrs{width:84px;flex:0 0 84px;padding:7px 9px;font-size:13px;font-family:var(--sans);
  font-weight:300;border:1px solid var(--sand);border-radius:6px;background:#fff;color:var(--teal)}
.task .hrs:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,44,.14)}

.only{border:1px solid var(--bone-400);background:#fff;border-radius:999px;padding:7px 12px;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  line-height:1;color:var(--blue);cursor:pointer;
  transition:background .14s var(--ease),color .14s var(--ease),border-color .14s var(--ease)}
.only:hover{border-color:var(--gold);color:var(--gold-700)}
.only[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.kill{margin-left:auto;border:0;background:none;color:var(--teal-300);font-size:16px;line-height:1;
  cursor:pointer;padding:4px 6px;transition:color .14s var(--ease)}
.kill:hover{color:#a8443c}

button.ghost.addrow{display:inline-block;margin:var(--s3) 0 0;padding:7px 14px;
  background:transparent;border:1px solid rgba(34,62,78,.25);border-radius:4px;
  font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);cursor:pointer;text-decoration:none;
  transition:background .14s var(--ease)}
button.ghost.addrow:hover{background:rgba(34,62,78,.05)}

/* the band underneath: what comes up now and again, never a teamie */
.nowband{margin:0 0 var(--s4)}
.nowband .chips{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:760px){ .nowband .chips{grid-template-columns:1fr 1fr;gap:0 var(--s5)} }
.nowband .task:last-of-type{border-bottom:1px solid var(--bone-400)}

/* the true number, in navy, because it is the "overall, this much" of this page (her rule) */
.tally.one .big strong{font-weight:300;color:var(--gold)}

/* the two buttons these three screens draw themselves */
button.go{display:block;width:100%;margin:var(--s5) 0 var(--s2);padding:16px 22px;
  border:1px solid var(--gold);border-radius:4px;background:var(--gold);color:var(--teal);
  font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  cursor:pointer;transition:background .14s var(--ease),color .14s var(--ease)}
button.go:hover{background:var(--gold-700);border-color:var(--gold-700);color:var(--cream)}
button.ghost{display:block;margin:var(--s3) auto 0;padding:6px 0;border:0;background:none;
  color:var(--blue);font-family:var(--sans);font-weight:300;font-size:12.5px;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
button.ghost:hover{color:var(--teal)}
.kicker{text-align:center}

/* ================================================================================ THE CHART
   Departments are white boxes stacked down the column; navy stays for the top of the tree, which
   is the hierarchy her rule is about. */
.chart{display:flex;flex-direction:column;gap:var(--s5);margin:0 0 var(--s4)}
.depts .dept h2{font-family:var(--pluma);font-size:var(--t-label);font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);margin:0 0 var(--s4)}
.teamie.last{background:var(--teal);border-color:var(--teal)}
.teamie.last .n{color:var(--gold)}
.teamie.last .p,.teamie.last .jobs{color:rgba(235,233,227,.7)}

/* ========================================================================= THE BUILD ORDER */
.order .state{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-700);background:rgba(201,149,44,.14);
  border:1px solid rgba(201,149,44,.3);padding:4px 11px;border-radius:999px;
  margin-left:auto;white-space:nowrap}
.order .badge{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--gold);
  color:var(--teal);white-space:nowrap;line-height:1.5}
.order .mv{display:flex;gap:var(--s1);flex:0 0 auto}
.order .mv button{width:28px;height:28px;border:1px solid var(--bone-400);background:#fff;
  border-radius:4px;color:var(--blue);cursor:pointer;line-height:1;
  transition:border-color .14s var(--ease),color .14s var(--ease)}
.order .mv button:hover{border-color:var(--teal);color:var(--teal)}

@media (max-width:620px){
  .tally.one .big{font-size:38px}
  .order .state{margin-left:0}
}
/* THE AUDIT'S COLUMNS ARE THE PAGE (her call 2026-09-11): three tall white cards with Bethany
   headings, not three thin boxes fading in under the copy. The Collab's brain-dump is the model. */
.hero-cols{gap:var(--s4);margin:0 0 var(--s4)}
.hero-cols>.box{padding:var(--s5);min-height:340px;display:flex;flex-direction:column}
.hero-cols>.box .colsub,.nowband .colsub{color:var(--gold-700);margin:0 0 4px}
.hero-cols>.box .colhead2,.nowband .colhead2{font-size:30px;line-height:1.1;margin:0 0 var(--s4);max-width:none}
.nowband .colwhy{font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.65;color:var(--teal-700);margin:0 0 var(--s3)}
.hero-cols .task .nm{font-size:15px;padding:11px 13px}
.hero-cols .task{padding:var(--s3) 0}
.hero-cols button.ghost.addrow{margin-top:auto;align-self:flex-start;padding-top:9px;padding-bottom:9px}
.muted.empty{display:none}
.tally.one{margin:0 0 var(--s4)}
.box.step .go{display:inline-block;margin:var(--s3) 0 0;width:auto}
.box.step.nowband>p.colsub{font-family:var(--pluma);font-style:italic;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:400;margin:0 0 4px}
#starter textarea{width:100%;min-height:110px;margin:var(--s2) 0 var(--s3);font-family:var(--sans);font-weight:300;font-size:14px;padding:11px 13px;border:1px solid var(--bone-400);border-radius:8px;color:var(--teal)}
#starter .copywrap{margin:var(--s3) 0 var(--s4)}
/* THE AUDIT IN THE COLLAB'S ORDER (her ruling 2026-09-11): step one dumps the job and its time per
   day, week or month; step two marks only-me or split-it, and a split opens the one box that asks. */
.task .est{flex:1 1 100%;font-size:12px;color:var(--gold-700);min-height:1em;margin:-2px 0 0}
.task .hm,.splitbox .hm{display:inline-flex;gap:6px}
.task .hm input,.splitbox .hm input{width:72px;padding:7px 9px;font-size:13px;font-family:var(--sans);font-weight:300;border:1px solid var(--sand);border-radius:6px;background:#fff;color:var(--teal)}
.task .hm input:focus,.splitbox .hm input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,44,.14)}
.tally.one .maths{font-size:11px;color:rgba(235,233,227,.6);margin:8px 0 0;font-family:var(--sans);font-weight:300}
.box.pick{padding:var(--s3) var(--s5)}
.prow{display:flex;align-items:center;gap:var(--s3);padding:14px 0;border-bottom:1px solid var(--bone-400)}
.prow:last-child{border-bottom:0}
.prow.kept .pnm{opacity:.55}
.prow .pnm{flex:1;font-size:15px;color:var(--teal);font-weight:300;font-family:var(--sans)}
.prow .pnm .tag{font-style:italic;font-size:12px;color:var(--blue);margin-left:8px}
.prow .pnm .tag.gold{color:var(--gold-700)}
.prow .ph{color:var(--gold);font-size:14px;white-space:nowrap;font-family:var(--sans);font-weight:300}
.prow .pact{border:0;background:none;font-family:var(--sans);font-weight:300;font-size:13px;color:var(--blue);cursor:pointer;padding:4px 2px;white-space:nowrap}
.prow .pact:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.splitbox{margin:0 0 var(--s3) var(--s5);padding:var(--s4);background:var(--bone);border:1px solid var(--sand);border-radius:8px}
.splitbox .sl{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--teal);margin:0 0 10px;font-family:var(--sans);font-weight:300}
.splitbox .sl small{font-size:12px;color:var(--blue)}
.splitbox input[type=text]{display:block;width:100%;margin:0 0 8px;font-family:var(--sans);font-weight:300;font-size:14px;padding:10px 12px;border:1px solid var(--bone-400);border-radius:8px;color:var(--teal);background:#fff}
.splitbox input[type=text]:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,149,44,.14)}
.splitbox .set{margin-top:4px}
@media (max-width:620px){ .prow{flex-wrap:wrap} .prow .pnm{flex:1 1 100%} .splitbox{margin-left:0} }
/* the job field wraps and grows with the words, never a one-line scroll (her ask 2026-09-11) */
.task textarea.nm{display:block;width:100%;resize:none;overflow:hidden;line-height:1.45;min-height:44px;box-sizing:border-box}
/* choose what Claude does (her call 2026-09-11): a tick per job, the Collab's pick box */
.pickbox{flex:0 0 24px;width:24px;height:24px;border:1.5px solid var(--blue);border-radius:6px;background:#fff;color:#fff;font-size:14px;line-height:1;cursor:pointer;padding:0;transition:background .14s var(--ease),border-color .14s var(--ease)}
.pickbox:hover{border-color:var(--gold)}
.pickbox.on{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.prow:not(.on) .ph{color:var(--teal-300)}
.prow .pnm .tag{display:block;margin-left:0;margin-top:2px}
.pickbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s3);font-size:13px;color:var(--blue);font-family:var(--sans);font-weight:300}
.pickbar button{margin:0}
.splitbox label.sl{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-700);margin:0 0 6px}
.splitbox .whole{margin-left:8px}
.splitbox .sl strong{font-weight:600}
.splitbox .per{font-size:12px;color:var(--blue)}
.splitbox .per b{font-weight:400;color:var(--gold-700)}
.prow .ph{white-space:normal;text-align:right;max-width:260px;line-height:1.35}
/* every chip on the chart opens a card under it (her catch 2026-09-11) */
.oc-seat[data-key],.oc-helper{cursor:pointer}
.oc-seat[data-key]:hover,.oc-helper:hover{box-shadow:0 0 0 2px rgba(201,149,44,.45)}
.oc-seat.sel,.oc-helper.sel{box-shadow:0 0 0 2px var(--gold)}
.seatdetail{margin:var(--s4) 0 0}
.seatdetail .dl{font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--teal-700);margin:0 0 var(--s2)}
.seatdetail .dl.muted{color:var(--blue);font-size:13px}
.seatdetail ul.jobs{list-style:none;padding:0;margin:0 0 var(--s3)}
.seatdetail ul.jobs li{padding:8px 0;border-bottom:1px solid var(--bone-400);font-family:var(--sans);font-weight:300;font-size:14.5px;color:var(--teal)}
.seatdetail ul.jobs li strong{font-weight:500}
.seatdetail ul.jobs li .muted{color:var(--gold-700);font-size:13px}
.seatdetail ul.jobs li .part{font-size:12.5px;color:var(--blue);margin-top:2px}
.seatdetail button.ghost{margin:var(--s2) 0 0;display:inline-block}
/* the proposal page (ruling 218) */
.box.step ul.jobs{list-style:none;padding:0;margin:0 0 var(--s3)}
.box.step ul.jobs li{padding:9px 0;border-bottom:1px solid var(--bone-400);font-family:var(--sans);font-weight:300;font-size:14.5px;color:var(--teal);line-height:1.5}
.box.step ul.jobs li strong{font-weight:500}
.box.step ul.jobs li .gold{color:var(--gold-700);font-size:13px}
.box.step ul.jobs li .part{font-size:12.5px;color:var(--blue);margin-top:2px}
.box.step ol.plainsteps{margin:0 0 var(--s3);padding-left:1.4em;font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--teal)}
.box.step ol.plainsteps li{margin:0 0 6px}
.box.step .pill{display:inline-block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--bone);color:var(--teal);margin-left:6px;vertical-align:middle}
.box.step .pill.gold{background:var(--gold);color:var(--teal)}
.box.step .pill.grey{background:transparent;border:1px solid var(--bone-400);color:var(--blue)}
form.inline{margin:0 0 var(--s3)}
form.inline input[name=name]{font-family:var(--sans);font-weight:300;font-size:14px;padding:9px 11px;border:1px solid var(--bone-400);border-radius:8px;color:var(--teal);width:min(100%,320px);margin-right:8px}
.moverow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bone-400);margin:0}
.moverow .jobnm{flex:1;font-family:var(--sans);font-weight:300;font-size:14px;color:var(--teal)}
.moverow select{font-family:var(--sans);font-weight:300;font-size:13px;padding:7px 9px;border:1px solid var(--bone-400);border-radius:6px;color:var(--teal);background:#fff;max-width:220px}
.btn.danger{border-color:#a8443c;color:#a8443c}
form.redraw{margin:var(--s4) 0 0}
form.redraw textarea{width:100%;min-height:90px;margin:var(--s2) 0 var(--s3);font-family:var(--sans);font-weight:300;font-size:14px;padding:11px 13px;border:1px solid var(--bone-400);border-radius:8px;color:var(--teal)}
@media (max-width:620px){ .moverow{flex-wrap:wrap} .moverow .jobnm{flex:1 1 100%} }
/* the proposal sits on white, so its steps and lists read in ink, not the navy band's cream */
.box.step ol.plainsteps li{color:var(--teal);border-top:1px solid var(--bone-400);font-family:var(--sans);font-weight:300}
.box.step ul.jobs li::before,.seatdetail ul.jobs li::before{content:none!important;display:none}
.box.step ul.jobs li,.seatdetail ul.jobs li{padding-left:0}
/* THE POP-UP over the chart, to the brief (ruling 220): a navy band with the Pluma eyebrow, the
   Bethany name and its gold word, the promise and the figures; then rows with a hook each. */
.ovl{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(34,62,78,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px}
.ovl[hidden]{display:none}
.mdl{position:relative;background:#fff;border-radius:18px;max-width:680px;width:100%;max-height:88vh;overflow:auto;padding:0;box-shadow:0 30px 80px rgba(0,0,0,.35);-webkit-overflow-scrolling:touch}
.mdl .x{position:absolute;top:14px;right:16px;z-index:2;border:0;background:none;font-size:26px;line-height:1;color:var(--teal);cursor:pointer;padding:4px 8px}
.mdl .x:hover{color:#fff}
.mhero{background:var(--gold);color:var(--teal);padding:var(--s5) var(--s5) var(--s4);border-radius:18px 18px 0 0}
.mhero .eye{font-family:var(--pluma);font-style:italic;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);opacity:.85;margin:0 0 10px}
.mhero h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;color:var(--teal);margin:0 0 10px;padding-right:30px}
.mhero h2 em{font-style:italic;color:#fff}
.mhero .promise{font-family:var(--sans);font-weight:300;font-size:15px;line-height:1.6;color:rgba(34,62,78,.9);margin:0 0 var(--s3);max-width:52ch}
.mstats{display:flex;gap:0;border-top:1px solid rgba(34,62,78,.18);margin:var(--s3) 0 0;padding:var(--s3) 0 0}
.mstats .st{flex:1 1 0;text-align:center;padding:0 var(--s2);border-right:1px solid rgba(34,62,78,.18)}
.mstats .st:last-child{border-right:0}
.mstats .st b{display:block;font-family:var(--sans);font-weight:300;font-size:30px;line-height:1;color:var(--teal)}
.mstats .st b i{font-style:normal;font-size:.45em;color:rgba(34,62,78,.6);margin-left:3px}
.mstats .st span{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);opacity:.8;margin-top:6px}
.mbody{padding:var(--s4) var(--s5) var(--s5)}
.mbody .boxlabel{font-family:var(--pluma);font-style:italic;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);margin:var(--s3) 0 var(--s2)}
.mbody .boxlabel:first-child{margin-top:0}
.mbody .dl{font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.6;color:var(--teal-700);margin:0 0 var(--s2)}
.mbody .dl.muted{color:var(--blue);font-size:13px}
ul.mlist{list-style:none;padding:0;margin:0}
ul.mlist li{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--bone-400)}
ul.mlist li:last-child{border-bottom:0}
ul.mlist li::before{content:none!important}
.ring{flex:0 0 24px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(201,149,44,.7);color:var(--gold-700);font-family:var(--sans);font-size:10.5px;font-weight:700;text-align:center;line-height:22px;margin-top:1px}
.tick{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--teal);font-size:12px;font-weight:700;text-align:center;line-height:24px;margin-top:1px}
.rb{flex:1;min-width:0;font-family:var(--sans);font-weight:300;font-size:14.5px;line-height:1.5;color:var(--teal)}
.rb strong{font-weight:500;color:var(--teal)}
.rb .part{font-size:12.5px;color:var(--blue);margin-top:2px}
.hpill{flex:0 0 auto;display:inline-block;font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(201,149,44,.14);border:1px solid rgba(201,149,44,.35);color:var(--gold-700);white-space:nowrap;margin-top:2px}
.rb .hpill{margin:0 4px}
.shelfcard{padding:var(--s3) var(--s4);background:var(--bone);border:1px solid var(--sand);border-radius:10px}
.shelfcard strong{display:block;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--teal);margin:8px 0 4px}
.shelfcard .dl{margin:0 0 6px}
.mfoot{margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--bone-400)}
.mfoot .btn{display:inline-block;margin:var(--s2) 12px 0 0}
.mfoot button.ghost{display:inline-block;margin:var(--s2) 0 0}
/* her skills placed, and the kept-with-you card */
.placed ul.jobs li,.keptcard ul.jobs li{padding:12px 0}
.placed .part,.keptcard .part{font-size:12.5px;color:var(--blue);margin-top:4px}
.placed form.inline,.keptcard form.inline{display:inline-block;margin:6px 0 0}
.placed .ask{margin:8px 0 0;padding:12px 14px;background:var(--bone);border:1px solid var(--sand);border-radius:8px}
.placed .ask .dl{font-family:var(--sans);font-weight:300;font-size:13.5px;color:var(--teal);margin:0 0 6px}
.placed .ask select,.placed .ask input{font-family:var(--sans);font-weight:300;font-size:13px;padding:7px 9px;border:1px solid var(--bone-400);border-radius:6px;color:var(--teal);background:#fff;margin:0 6px 6px 0;max-width:100%}
.placed .ask select[name=job]{max-width:420px}
.placed .ask input[name=text]{width:min(100%,360px)}
.placed .ask input[type=number]{width:70px}
.placed .ask form.addjob{margin:0}
/* the change-the-team card on the proposal: four acts */
.change .acts{display:grid;grid-template-columns:1fr;gap:var(--s4);margin:var(--s3) 0 0}
@media (min-width:820px){ .change .acts{grid-template-columns:1fr 1fr} }
.change .act{padding:var(--s4);border:1px solid var(--bone-400);border-radius:12px;background:#fff}
.change .act>.boxlabel{color:var(--gold-700);margin:0 0 var(--s3)}
.change .lbl{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:0 0 6px}
.change .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.change .row input{flex:1 1 200px;font-family:var(--sans);font-weight:300;font-size:14px;padding:9px 11px;border:1px solid var(--bone-400);border-radius:8px;color:var(--teal)}
.change .names{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s2) 0 var(--s3)}
.change .namechip{border:1px solid var(--bone-400);background:#fff;border-radius:999px;padding:7px 12px;font-family:var(--sans);font-size:13px;font-weight:300;color:var(--teal);cursor:pointer;transition:border-color .14s var(--ease),background .14s var(--ease)}
.change .namechip:hover{border-color:var(--gold)}
.change .namechip.on{background:var(--gold);border-color:var(--gold)}
.change .moverow{padding:8px 0}
.change form.redraw{margin:0}
.change form.redraw textarea{min-height:80px;margin:0 0 var(--s2)}
.change .moverow{flex-wrap:wrap}
.change .moverow .jobnm{flex:1 1 100%}
.keptcard form.inline,.placed form.inline{margin-left:10px;vertical-align:middle}
/* the placed and kept cards carry the same hooks as the pop-up */
.placed ul.jobs li,.keptcard ul.jobs li{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.placed ul.jobs li.open .ring,.keptcard .ring{background:transparent;border-color:var(--blue);color:var(--blue)}
.placed .rb form.inline,.keptcard .rb form.inline{display:block;margin:8px 0 0}
.placed .rb .why{font-style:italic}
/* THE WORKING SCREEN (run log 18, ruling 221): while the HQ thinks, one card that says what is
   happening, a gold bar that moves, and rotating lines - nobody wonders whether it froze. */
.working{text-align:center;padding:var(--s6) var(--s5)}
.working .eye{font-family:var(--pluma);font-style:italic;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-700);margin:0 0 10px}
.working h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.05;color:var(--teal);margin:0 0 var(--s3)}
.working h2 em{color:var(--gold)}
.working .bar{height:4px;border-radius:999px;background:var(--bone-400);overflow:hidden;margin:var(--s4) auto;max-width:360px;position:relative}
.working .bar i{position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--gold);border-radius:999px;animation:hqslide 1.4s ease-in-out infinite}
@keyframes hqslide{0%{left:-40%}100%{left:100%}}
.working .line{font-family:var(--pluma);font-style:italic;font-size:19px;color:var(--gold-700);min-height:1.5em;margin:0 0 var(--s2);transition:opacity .3s}
.working .about{font-family:var(--sans);font-weight:300;font-size:13px;color:var(--blue);margin:0}
.working .robot{font-size:34px;margin:0 0 var(--s2)}
/* THE PROPOSAL, her shape (2026-09-12): ticks on the jobs, a numbered plan, four folded tiles */
.box.step ul.mlist li{padding:11px 0}
.box.step .sumline{font-family:var(--sans);font-weight:300;font-size:15px;color:var(--teal);margin:var(--s3) 0 0}
.box.step .sumline strong{font-weight:500}
.hpill.gold{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.hpill.grey{background:transparent;border-color:var(--bone-400);color:var(--blue)}
ol.planlist{list-style:none;padding:0;margin:var(--s3) 0 0}
ol.planlist li{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--bone-400)}
ol.planlist li:last-child{border-bottom:0}
ol.planlist li::before{content:none!important}
ol.planlist .rb{font-size:15px;line-height:1.6}
ol.planlist .rb strong{font-weight:500}
ol.planlist ul.mlist{margin:8px 0 0;padding-left:0}
ol.planlist ul.mlist li{padding:9px 0;gap:10px}
ol.planlist ul.mlist .tick{width:20px;height:20px;line-height:20px;font-size:10px;flex-basis:20px}
ol.planlist ul.mlist .rb{font-size:14px}
.change .tiles{display:grid;grid-template-columns:1fr;gap:var(--s3);margin:var(--s3) 0 0}
@media (min-width:820px){ .change .tiles{grid-template-columns:1fr 1fr} .change .tiles details[open]{grid-column:1 / -1} }
.change details.tile{border:1px solid var(--bone-400);border-radius:12px;background:#fff;overflow:hidden}
.change details.tile summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;transition:background .14s var(--ease)}
.change details.tile summary::-webkit-details-marker{display:none}
.change details.tile summary:hover{background:var(--bone)}
.change details.tile[open] summary{background:var(--bone);border-bottom:1px solid var(--bone-400)}
.change .tico{grid-row:1 / span 2;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--teal);font-size:15px;text-align:center;line-height:34px}
.change details.tile summary strong{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--teal);line-height:1.1}
.change .tsub{font-family:var(--sans);font-weight:300;font-size:12.5px;color:var(--blue)}
.change .tbody{padding:var(--s4)}
.change .acts{display:none}
/* MEET YOUR TEAMIE (ruling 223) */
.box.step .lead2{font-family:var(--pluma);font-style:italic;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-700);margin:var(--s3) 0 6px}
.box.step .lead2:first-child{margin-top:0}
.box.step .hilite{margin:var(--s3) 0 0;padding:12px 16px;background:var(--bone);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;font-family:var(--sans);font-weight:300;font-size:15px;color:var(--teal)}
.box.step .hilite strong{font-weight:500}
.box.step .aside-line{font-family:var(--pluma);font-style:italic;font-size:16px;color:var(--gold-700);margin:var(--s3) 0 0}
.change.quiet{background:transparent;box-shadow:none;border:0;padding:0}
.change.quiet details.tile summary strong{font-size:19px}
/* the chart on home (her map 2026-09-12) */
.homechart{margin:var(--s5) 0 0}
.homechart>.boxlabel{margin:0 0 var(--s3)}
/* the grip on the hiring order (the Lab's shape) */
.order .grip{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-right:2px;cursor:grab;user-select:none}
.order .grip .dots{font-size:18px;line-height:1;letter-spacing:-3px;color:var(--blue);padding:2px 0}
.order .grip .tri{display:flex;flex-direction:column;gap:0}
.order .grip .tri button{border:0;background:none;color:var(--blue);font-size:9px;line-height:1;padding:2px 3px;cursor:pointer}
.order .grip .tri button:hover{color:var(--gold-700)}
.order li.dragging{opacity:.45}
.order li.over{box-shadow:0 0 0 2px var(--gold)}
.order .mv{display:none}
/* the rules between the menu's groups - the Lab's shape (her ask 2026-09-12) */
.side .nav .sep{display:block;height:1px;background:rgba(235,233,227,.12);margin:12px 6px}
/* the stat band under the chart (navy marks a summary, ruling 171) */
.teamband{padding:var(--s4) var(--s5);margin:var(--s4) 0 0}
.teamband .mstats{border-top:0;margin:0;padding:0}
.teamband .mstats .st{border-right:1px solid rgba(235,233,227,.14)}
.teamband .mstats .st b{color:var(--gold)}
.teamband .mstats .st b i{color:rgba(235,233,227,.55)}
.teamband .mstats .st span{color:var(--sand);opacity:1}
.quietcards{margin:var(--s4) 0 0}
.quietcards .box.step{box-shadow:none;border:1px solid var(--bone-400)}
.box.step .opt{font-family:var(--pluma);font-style:italic;color:var(--gold-700);font-size:14px}
/* THE SKILLS SHELF - little packages (her call 2026-09-12) */
.shelfband{margin:var(--s5) 0 0}
.shelfband>.boxlabel{margin:0 0 var(--s3)}
.pkgs{display:grid;grid-template-columns:1fr;gap:var(--s3)}
@media (min-width:700px){ .pkgs{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .pkgs{grid-template-columns:1fr 1fr 1fr} }
.pkg{background:#fff;border:1px solid var(--bone-400);border-radius:14px;padding:var(--s4);display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh-sm)}
.pkg .eye{font-family:var(--pluma);font-style:italic;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-700);margin:0}
.pkg h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.1;color:var(--teal);margin:0}
.pkg h3 .hpill{vertical-align:middle;margin-left:6px}
.pkg .line{font-family:var(--sans);font-weight:300;font-size:13.5px;line-height:1.55;color:var(--teal-700);margin:0;flex:1}
.pkg .from{font-family:var(--sans);font-weight:300;font-size:12px;color:var(--blue);margin:0}
.pkg .acts{display:flex;gap:8px;margin:6px 0 0}
.pkg .acts .btn{flex:1;text-align:center}
/* the training handover: the continue card */
.contcard{border:1px solid var(--gold);background:var(--bone)}
/* THE TRAINING STRIP (her whiteboard 2026-09-12): one box lit at a time, like the agent training */
.tstrip{display:flex;gap:8px;margin:0 0 var(--s4);flex-wrap:wrap}
.tbox{flex:1 1 0;min-width:120px;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--bone-400);background:#fff;text-decoration:none;color:var(--blue);font-family:var(--sans);font-weight:300;font-size:12.5px;transition:border-color .14s var(--ease),background .14s var(--ease)}
.tbox .tn{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:1px solid var(--bone-400);text-align:center;line-height:20px;font-size:10px;font-weight:700;color:var(--blue)}
.tbox.done{color:var(--teal)}
.tbox.done .tn{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.tbox.lit{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.tbox.lit .tn{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.tbox:hover{border-color:var(--gold)}
.roads2{display:flex;gap:8px;flex-wrap:wrap;margin:var(--s3) 0 var(--s2)}
.box.step ul.mlist .tick.off{background:var(--bone-400);color:#fff}
.box.step ul.mlist .tickform{margin:0}
.box.step ul.mlist .tickform .tick{padding:0;border:0;background:none;text-align:left}
.box.step ul.mlist .tickform .tick .box{display:none}
.box.step .detail,.box.step .tip{font-family:var(--sans);font-weight:300;font-size:13px;color:var(--blue);margin:4px 0 0}
.box.step .tip{color:var(--gold-700)}
ol.order.tlist li{gap:12px}
ol.order.tlist li .ring{flex:0 0 26px}
ol.order.tlist li a .nm{font-family:var(--serif);font-size:22px;color:var(--teal)}
ol.order.tlist li .btn.sm{margin-left:auto}
ol.order.tlist li::before{content:none}
.roads2 .btn.road2{display:inline-block;padding:12px 18px;border:1px solid var(--teal);border-radius:4px;background:#fff;color:var(--teal);font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.roads2 .btn.road2.on{background:var(--gold);border-color:var(--gold);color:var(--teal)}
.box.step .renameform .lbl{display:block;font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin:var(--s3) 0 6px}
.box.step .renameform .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.box.step .renameform .row input{flex:1 1 220px;font-family:var(--sans);font-weight:300;font-size:14px;padding:9px 11px;border:1px solid var(--bone-400);border-radius:8px;color:var(--teal)}
ul.mlist.picks li.pickrow{align-items:flex-start}
ul.mlist.picks li.pickrow .roads2{margin:8px 0 4px}
ul.mlist.picks li.pickrow>.btn{margin-top:4px}
.ownblock{margin:var(--s3) 0 0;padding:var(--s3) var(--s4);border:1px solid var(--bone-400);border-radius:10px}
ul.mlist.whichskill{margin-bottom:var(--s3)}
ul.mlist.whichskill li.on{background:rgba(201,149,44,.08);border-radius:8px}
ul.mlist.whichskill a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.hpill.grey{background:transparent;border-color:var(--bone-400);color:var(--blue-300, #6b7a99)}
.pastebox.bare{border:0;padding:0;margin:0}
details.tile summary .tsub{margin-left:8px}
/* her own skills on the playbook box: the choice sits inside the navy band */
.band-now ul.mlist.picks li.pickrow{border-color:rgba(235,233,227,.18)}
.band-now ul.mlist.picks .rb strong,.band-now ul.mlist.picks .rb .part{color:#fff}
.band-now .roads2 .btn.road2{background:transparent;border-color:rgba(235,233,227,.55);color:#fff!important}
.band-now .roads2 .btn.road2.on{background:var(--gold);border-color:var(--gold);color:var(--teal)!important}
.band-now .lead2{color:var(--gold)}
/* RULING 230: the two pathways on Hire Your AI Team */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin:0 0 var(--s5)}
.pathbox{display:block;position:relative;background:#fff;border:1px solid var(--bone-400);border-radius:14px;padding:var(--s5);text-decoration:none;color:var(--blue);transition:border-color .16s var(--ease),transform .16s var(--ease)}
.pathbox:hover{border-color:var(--gold);transform:translateY(-2px)}
.pathbox .pnum{position:absolute;top:var(--s4);right:var(--s4);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold-700)}
.pathbox .boxhead{margin-top:6px}
.pathbox p{margin:0 0 var(--s4)}
.pathbox .btn{display:inline-block}
/* where she is up to, one line under the heading (2026-09-14) */
.pathbox .upto{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-700);margin:0 0 var(--s3)}
.paths.solo{grid-template-columns:1fr}
.pathscap{margin:0 0 var(--s3)}
@media (max-width:820px){.paths{grid-template-columns:1fr}}
ol.order li .btn.sm{margin-left:auto;flex:0 0 auto;width:auto}

/* 3.3 make it yours: the look tiles and her own colours on top */
.looks{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.looktile{display:flex;flex-direction:column;gap:4px;border:1px solid rgba(34,62,78,.16);border-radius:12px;padding:12px 12px 11px;cursor:pointer;background:#fff;position:relative}
.looktile input{position:absolute;opacity:0;pointer-events:none}
.looktile:has(input:checked){border-color:var(--gold-700);box-shadow:0 0 0 2px rgba(201,149,44,.35)}
.looktile .pair{display:block;width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,0,0,.12);margin-bottom:6px}
.looktile .pair.own{background:conic-gradient(from 90deg,#F7E7A3,#F0A6DE,#C9DCF0,#F7F0E6,#F7E7A3)}
.looktile strong{font-family:var(--serif);font-size:16px;font-weight:600;color:var(--teal)}
.looktile .ln{font-family:var(--sans);font-size:12px;line-height:1.35;color:var(--blue);font-weight:300}
.looktile .fnt{font-size:11px;opacity:.8}
.lookown{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.lookown label{display:flex;flex-direction:column;gap:4px;font-family:var(--sans);font-size:12px;color:var(--blue)}
.lookown input{border:1px solid rgba(34,62,78,.2);border-radius:8px;padding:8px 10px;font-size:14px;font-family:var(--sans)}
.lookown.two{grid-template-columns:1fr 1fr;max-width:640px}
.ps{font-family:var(--sans);font-size:13.5px;color:var(--blue);margin-top:14px}
ul.ticks{list-style:none;padding:0;margin:6px 0 10px}ul.ticks li{padding:6px 0 6px 28px;position:relative;font-family:var(--sans);font-size:14.5px;border-bottom:1px solid rgba(34,62,78,.08)}ul.ticks li:before{content:'\2713';position:absolute;left:4px;color:var(--gold);font-weight:700}
.choice3{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px}.choice3 .inl{display:inline}.choice3 .btn.on{border-color:var(--gold-700);box-shadow:0 0 0 2px rgba(201,149,44,.35)}
h3.subhead{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--teal);margin:18px 0 6px}
.concern{background:#fff;border:1px solid rgba(34,62,78,.12);border-radius:12px;padding:14px 16px;margin:10px 0}.concern .cq{margin:0 0 2px;font-family:var(--sans);font-size:15px;color:var(--teal)}.concern .cwhy{margin:0 0 8px;font-family:var(--sans);font-size:13px;color:var(--blue)}.concern .opt{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border-radius:8px;cursor:pointer;font-family:var(--sans);font-size:14px}.concern .opt.on,.concern .opt:has(input:checked){background:rgba(201,149,44,.10)}.concern .opt .means{display:block;font-size:12.5px;color:var(--blue);font-weight:300}.concern .crec{margin:8px 0 0;font-family:var(--sans);font-size:12.5px;color:var(--gold-700)}
.concern .opt,.concern .opt span,.concern .opt strong{text-transform:none;letter-spacing:0}.concern .opt strong{font-size:14.5px;font-weight:500;color:var(--teal)}input[type=radio],input[type=checkbox]{accent-color:var(--gold)}
.obstrip{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 8px}.obstrip .ob{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid rgba(34,62,78,.16);font-family:var(--sans);font-size:12.5px;color:var(--blue)}.obstrip .ob i{display:inline-flex;width:20px;height:20px;border-radius:50%;align-items:center;justify-content:center;font-style:normal;font-size:11px;font-weight:700;border:1px solid rgba(34,62,78,.25);color:var(--teal)}.obstrip .ob.done{border-color:var(--gold);color:var(--teal)}.obstrip .ob.done i{background:var(--gold);border-color:var(--gold);color:#fff}.obstrip .ob.now{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}.obstrip .ob.now i{background:#fff;color:var(--teal);border-color:#fff}.obline{font-family:var(--sans);font-size:14.5px;margin:6px 0 10px}

/* Buttons that sit inside the seven boxes (the nudge, publishing, who-writes-what): app.css's bare "button.ghost"
   rule was turning them into underlined text stacked down the page. These win on specificity, in both stylesheets. */
.nudgebtns form,.roads2 form,.choice3 form{display:inline;margin:0;padding:0;border:0;background:none}
.nudgebtns button.btn,.roads2 button.btn,.choice3 button.btn,.mixfoot button.btn{display:inline-block;margin:0;padding:13px 20px;border-radius:10px;font-family:var(--sans);font-weight:600;font-size:12px;line-height:1;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:var(--gold);color:var(--teal);border:2px solid var(--gold);text-decoration:none;box-shadow:none}
.nudgebtns button.btn.ghost,.roads2 button.btn.ghost,.choice3 button.btn.ghost{background:transparent;color:var(--teal);border-color:rgba(34,62,78,.35)}
.nudgebtns button.btn.ghost:hover,.roads2 button.btn.ghost:hover,.choice3 button.btn.ghost:hover{border-color:var(--gold);background:rgba(201,149,44,.08)}
.nudgebtns button.btn.gold,.roads2 button.btn.on,.choice3 button.btn.on{background:var(--gold);color:var(--teal);border-color:var(--gold)}
.nudgebtns{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 6px}
.roads2{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.roads2 button.btn{width:100%;text-align:left;white-space:normal;line-height:1.35}

/* rows inside the boxes' cards keep sentence case - app.css's bare label rule was shouting them in capitals */
label.mixrow,label.mixrow .lbl,.mixsub,.nudgewhere label{text-transform:none;letter-spacing:0;font-weight:500}
label.mixrow .lbl{font-weight:600}

/* THE SEVEN-BOX STRIP in one straight line (ship report, 13 Sep): number pinned, a two-line slot for the label, a fixed slot for the tick */
.sb-box{align-items:flex-start;min-height:50px}
.sb-box .sb-n{padding-top:3px;width:14px;flex:none}
.sb-box .sb-t{white-space:normal;line-height:1.2;min-height:2.4em;max-width:96px;display:flex;align-items:center}
.sb-box .sb-ok{width:12px;flex:none;text-align:center;padding-top:3px}
/* EVERY BUTTON THE SAME HEIGHT, on the same line (her catch 13 Sep: "buttons are all out of alignment with each other") */
.btn,a.btn,button.btn{display:inline-flex!important;align-items:center;justify-content:center;min-height:46px;padding:0 20px;box-sizing:border-box;line-height:1.1;vertical-align:middle;border-width:2px;border-style:solid;margin-top:0;margin-bottom:0}
.btn.sm{min-height:38px;padding:0 16px}
.btn.big{min-height:56px;padding:0 26px}
.choice3,.nudgebtns,.roads2{align-items:stretch}
.choice3 form,.nudgebtns form{display:inline-flex}
.overview{font-size:16px;line-height:1.6}

/* the Skills Shelf's gold note: comes with an AI employee, or an assistant of Carinda's (her ask 2026-09-13) */
.pkg .hilite.sm{margin:10px 0 0;padding:10px 12px;background:rgba(201,149,44,.10);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;font-family:var(--sans);font-weight:300;font-size:12.5px;line-height:1.5;color:var(--teal-700)}
.pkg .hilite.sm strong{font-weight:500;color:var(--navy,#223E4E)}

/* HEAD OFFICE, ONGOING - the one card that replaced the six overlapping employee cards (her ruling
   2026-09-13): pick the employee, pick what you want, say it in your words, and the one right prompt
   comes back. Labels in Pluma gold above each control, the controls on their own lines so a phone
   never squashes them. */
form.redraw.pick{margin:0}
form.redraw.pick .lbl{display:block;font-family:var(--pluma);font-style:italic;font-size:14px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-700);margin:var(--s3) 0 6px}
form.redraw.pick .lbl:first-child{margin-top:0}
form.redraw.pick select{display:block;width:min(100%,420px);font-family:var(--sans);font-weight:300;font-size:14.5px;
  padding:10px 12px;border:1px solid var(--bone-400);border-radius:8px;color:var(--teal);background:#fff}
form.redraw.pick textarea{margin:var(--s2) 0 6px}
form.redraw.pick .muted{margin:0 0 var(--s3)}

.working .lovenote{margin:22px auto 0;max-width:520px;font-weight:300;font-size:15px;line-height:1.7;text-align:center}.working .lovenote .aside{color:#bf9a45;font-style:italic}
.box.step p.icborn{margin:var(--s4) 0 0;font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;color:var(--gold-700)}
.box.step .prow .hpill{margin-top:0}
.box.step .prow .pnm{font-size:15.5px;line-height:1.6}
.tally .t.lastcol{border-right:0}
.tally .tcta:first-child{margin-top:0;padding-top:0;border-top:0}
.tally .tcta{flex:1 0 100%;text-align:center;margin-top:var(--s4);padding-top:var(--s5);border-top:1px solid rgba(235,233,227,.13)}
.tally .tcta p{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.25;color:var(--cream);margin:0 0 var(--s4)}
.tally .tcta p em{font-style:italic;color:var(--gold)}
@media (max-width:640px){.tally .tcta p{font-size:21px}}

/* WITH YOU - the only-me jobs on screen 7's chart (15 Sep) */
.box.step.withyou .tallyline{font-family:var(--serif);font-size:21px;color:var(--teal);margin:14px 0 0}
.box.step.withyou ul.jobs li .muted,.box.step.keptcard ul.jobs li .why{font-size:12.5px;color:var(--blue);margin-top:2px}
.teamband .subtally{display:block;margin:10px 0 0;font-family:var(--sans);font-weight:300;font-size:14px;color:var(--teal-700)}
.oc-seat .oc-kept{display:block;margin-top:4px;font-family:var(--sans);font-weight:300;font-size:10.5px;line-height:1.4;color:rgba(255,255,255,.72);overflow-wrap:anywhere}
.plainwords{margin:14px 0 0}
.plainwords ul.own.plain li{border:0;padding:4px 0}
.why.takes{color:var(--gold-700)}