/* CG182 · Steven's review of the bold home (Nov 2, 9:26 AM): the proof bar as one even row, and The Culture Lab module
   that always shows the newest field note. Loaded after bold-cg180.css. */

/* The proof bar: one even grid. Every numeral the same size and weight, # and % set smaller, the company as a small
   line above its label, labels at most two lines on one shared baseline, hairline dividers. */
main#main #top .t9-glass dl.bd-proof:not(#a):not(#b):not(#c){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0!important;border-radius:24px}
main#main #top dl.bd-proof>div:not(#a):not(#b):not(#c){display:grid;grid-template-rows:auto auto auto;align-content:start;text-align:left;padding:28px 24px 28px!important;border-left:1px solid rgba(255,255,255,.16)!important;background:none!important;box-shadow:none!important;border-radius:0!important}
main#main #top dl.bd-proof>div:first-child:not(#a):not(#b):not(#c){border-left:0!important}
main#main #top dl.bd-proof dt:not(#a):not(#b):not(#c){order:0;font:800 clamp(36px,3.4vw,48px)/1 Rubik,sans-serif!important;letter-spacing:-.03em!important;color:#fff!important;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
main#main #top dl.bd-proof .od{display:flex;font-size:inherit!important;height:1em;line-height:1;letter-spacing:inherit;vertical-align:top}
/* # leads and % trails: half size, hung from the cap line, so every numeral sits on the same baseline and width */
main#main #top dl.bd-proof .od .vh+b,main#main #top dl.bd-proof .od b:last-child{font-size:.5em;line-height:1.3;align-self:flex-start;position:relative;top:.06em;letter-spacing:0}
main#main #top dl.bd-proof dd{margin:0}
main#main #top dl.bd-proof dd.bd-who{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:16px;font:500 13px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#bfd0ff!important}
main#main #top dl.bd-proof dd.bd-who b{font-weight:500;color:#fff!important}
main#main #top dl.bd-proof dd.bd-who a{color:#fff!important;text-transform:none;letter-spacing:0;font:500 13px/1.4 Rubik,sans-serif;white-space:nowrap}
main#main #top dl.bd-proof dd.bd-rc{margin:0}
main#main #top dl.bd-proof dd.bd-rc .tg-rcpt{min-height:44px;margin:-8px 0 -12px!important;display:inline-flex;align-items:center;color:#fff;font:500 13px/1.4 Rubik,sans-serif}
@media (max-width:760px){main#main #top dl.bd-proof dd.bd-rc .tg-rcpt{min-height:44px;margin:0!important;display:inline-flex;align-items:center}}
main#main #top dl.bd-proof dd:not(.bd-who):not(.bd-rc){margin-top:4px;font:400 13px/1.4 Rubik,sans-serif;color:rgba(255,255,255,.85)!important;min-height:2.8em}
@media (min-width:761px) and (max-width:1100px){
  main#main #top dl.bd-proof>div:not(#a):not(#b):not(#c){padding:24px 16px!important}
  main#main #top dl.bd-proof dd.bd-who{flex-direction:column;align-items:flex-start;gap:0}
}
/* Phone: the lead stat full width, the other four two by two, the same parts in the same order */
@media (max-width:760px){
  html body main#main #top .t9-glass dl.bd-proof:not(#a):not(#b):not(#c){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;background:none!important;box-shadow:none!important}
  html.sh-on body main#main #top dl.bd-proof>div:not(#a):not(#b):not(#c),html body main#main #top dl.bd-proof>div:not(#a):not(#b):not(#c){padding:20px 16px!important;border:0!important;border-radius:16px!important;background:rgba(255,255,255,.1)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)!important;grid-column:auto!important}
  html.sh-on body main#main #top dl.bd-proof>div.lead:not(#a):not(#b):not(#c),html body main#main #top dl.bd-proof>div.lead:not(#a):not(#b):not(#c){grid-column:1/-1!important}
  html body main#main #top dl.bd-proof dt:not(#a):not(#b):not(#c){font-size:40px!important}
  main#main #top dl.bd-proof dd.bd-who{margin-top:12px;font:500 13px/1.4 "IBM Plex Mono",ui-monospace,monospace!important;letter-spacing:.08em!important;text-transform:uppercase!important}
  html body main#main #top dl.bd-proof>div:not(#a):not(#b):not(#c){display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important}
}

/* The Culture Lab module: the newest field note, filled from cultureai.com's feed (js/lab-cg182.js) */
.bd-lab{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px 20px;align-items:start;margin-top:32px;padding:24px;border-radius:24px;background:linear-gradient(160deg,#1559f5 0%,#1148d4 45%,#0a1633 100%);color:#fff}
.bd-lab-mk{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0}
.bd-lab-pill{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:#fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.bd-lab-mk img{height:24px;width:auto;display:block}
.bd-lab-mk span{font:500 13px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:#bfd0ff}
.bd-lab-art{display:block;width:120px;height:120px;border-radius:16px;overflow:hidden;background:#dfe8ff;box-shadow:0 16px 32px -12px rgba(0,0,0,.45)}
.bd-lab-art img{width:100%;height:100%;object-fit:cover;display:block}
.bd-lab-tx{min-width:0}
.bd-lab-n{margin:0 0 8px;font:500 13px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#bfd0ff}
.bd-lab-t{margin:0;font:800 24px/1.1 Rubik,sans-serif;letter-spacing:-.02em;color:#fff}
.bd-lab-t a{color:inherit;text-decoration:none}
.bd-lab-t a:hover{text-decoration:underline;text-underline-offset:4px}
.bd-lab-m{margin:8px 0 0;font:400 13px/1.4 Rubik,sans-serif;color:#c9d5f2}
.bd-lab-go{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 0}
.bd-lab-go button,.bd-lab-go a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:600 15px/1 Rubik,sans-serif;text-decoration:none;cursor:pointer}
.bd-lab-go button{background:#fff;color:#0a1633;border:0}
.bd-lab-go button svg{width:16px;height:16px;fill:currentColor}
.bd-lab-go button:hover{background:#e9efff}
.bd-lab-go a{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.bd-lab-go a:hover{background:rgba(255,255,255,.18)}
.bd-lab-go :focus-visible{outline:2px solid #fff;outline-offset:2px}
.bd-lab-go button[hidden]{display:none}
.bd-lab-f{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.16)}
.bd-lab-f>span{flex:1 0 100%;font:500 13px/1.3 Rubik,sans-serif;color:#c9d5f2}
.bd-lab-f a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;color:#0a1633;font:500 13px/1 Rubik,sans-serif;text-decoration:none}
.bd-lab-f a svg{width:16px;height:16px}
.bd-lab[aria-busy=true] .bd-lab-t,.bd-lab[aria-busy=true] .bd-lab-n{opacity:.6}
@media (max-width:760px){
  .bd-lab{grid-template-columns:96px minmax(0,1fr);padding:20px}
  .bd-lab-art{width:96px;height:96px}
  .bd-lab-t{font-size:20px}
  .bd-lab-go button,.bd-lab-go a{flex:1 1 0}
}

/* /founder/: his name without the closing period, the spaces around F. drawn in so it reads as one name */
main#main .cg-fhero h1#h-founder:not(#a):not(#b):not(#c){word-spacing:-.07em}

/* Hero pill: the CultureGroup.com master alone (Steven's pick B, Nov 2), on laptops and phones */
main#main #top .bd-pill img{height:34px;width:auto}
@media (max-width:760px){
  main#main #top .t9-kick{display:none}
  main#main #top .bd-pill{display:inline-flex;align-self:flex-start;align-items:center;margin:0 0 20px;border-radius:999px;background:#fff;padding:12px 20px;box-shadow:0 12px 32px rgba(10,22,51,.22),0 2px 6px rgba(10,22,51,.12)}
  main#main #top .bd-pill img{height:24px}
}

/* The close: Steven alone (a Steven-only crop of Dallas 212), head and shoulders always in frame. On laptops the photo
   fills the right half where the blue is lightest and the words sit left; on phones it is its own block above them. */
main#main #selling:not(#a){background:linear-gradient(90deg,#1148d4 0%,#1559f5 50%)!important;position:relative;overflow:hidden}
main#main #selling .bd-close-ph{margin:0}
main#main #selling .bd-close-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
@media (min-width:761px){
  main#main #selling .bd-close-ph{position:absolute;top:0;right:0;bottom:0;width:46%;z-index:0}
  main#main #selling .bd-close-ph img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,#000 40%)}
  main#main #selling .tg-close-in{position:relative;z-index:1;text-align:left;margin-left:max(24px,calc(50% - 544px));margin-right:0;max-width:min(600px,50%);padding-left:0;padding-right:0}
  main#main #selling .tg-close-cta,main#main #selling .tg-close-more{justify-content:flex-start}
  main#main #selling h2:not(#a):not(#b):not(#c){font-size:clamp(48px,5.6vw,80px)!important;max-width:none}
  main#main #selling .tg-close-sub{margin-left:0;margin-right:0}
}
@media (max-width:760px){
  main#main #selling:not(#a){padding-top:0!important}
  main#main #selling .bd-close-ph{height:400px;margin:0 0 40px}
}

/* /founder/ Inc. 5000: his whole head and face in frame at every width; on phones the photo is its own block and #97 sits
   under it on navy, never over his face */
.bd-inc img{object-position:50% 18%!important}
@media (max-width:760px){
  .bd-inc{height:auto!important;display:flex!important;flex-direction:column}
  .bd-inc img{position:static!important;height:440px!important}
  .bd-inc::after{display:none}
  .bd-inc-tx{position:static!important;padding:32px 20px 40px!important}
}