/* CG186 · the Studio pages at the GLX B425 finish: white plates with a hairline and a long soft shadow, photos inset in their
   plate, value cards with light numerals and a Lucide icon, the same on phones. After bold-studio(-sub)-cg186.css. */
:root{--sp-line:#e3e8f2;--sp-shadow:0 1px 1px rgba(16,31,64,.03),0 24px 48px -28px rgba(16,31,64,.16);--sp-lift:0 1px 1px rgba(16,31,64,.04),0 32px 56px -28px rgba(16,31,64,.24)}

/* plates: service, work and related cards */
html body main#main:not(#z1):not(#z2):not(#z3) :is(#services,#work,#related) .cg-part{background:#fff!important;border:1px solid var(--sp-line)!important;border-radius:20px!important;box-shadow:var(--sp-shadow)!important;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
html body main#main:not(#z1):not(#z2):not(#z3) :is(#services,#related) .cg-part{padding:12px 28px 32px!important}
html body main#main:not(#z1):not(#z2):not(#z3) :is(#services,#related) .cg-part .up-photo{width:calc(100% + 32px)!important;margin:0 -16px 28px!important;border-radius:12px!important;height:220px!important;object-position:50% 0}
@media (hover:hover){html body main#main:not(#z1):not(#z2):not(#z3) :is(#services,#work,#related) .cg-part:hover{transform:translateY(-4px);box-shadow:var(--sp-lift)!important}}

/* value cards: what we hold to (the hub), one plate split by hairlines */
html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;background:#fff;border:1px solid var(--sp-line)!important;border-radius:20px;box-shadow:var(--sp-shadow);overflow:hidden}
html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div{position:relative;border-top:0!important;border-left:1px solid var(--sp-line);padding:28px 28px 36px!important;transition:background-color .3s}
html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div:first-child{border-left:0}
html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div::before{font:300 72px/.82 Rubik,sans-serif!important;letter-spacing:-.04em!important;color:#c9d4ea!important;margin:0 0 40px!important;font-variant-numeric:tabular-nums;transition:color .3s}
@media (hover:hover){html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div:hover{background:#f7f9fd}html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div:hover::before{color:#1559f5!important}}
.st-ic{width:32px;height:32px;fill:none;stroke:#0a1633;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}
html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-ic{position:absolute;top:28px;right:28px}

/* feature plates (the three service pages): numeral left, icon in a soft blue disc right */
html body main#main:not(#z1):not(#z2):not(#z3) #features .st-fn>div{position:relative;border-radius:20px!important;box-shadow:var(--sp-shadow);transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
html body main#main:not(#z1):not(#z2):not(#z3) #features .st-ic{position:absolute;top:28px;right:28px;width:48px;height:48px;padding:12px;box-sizing:border-box;border-radius:50%;background:#eef3ff;stroke:#1559f5}
@media (hover:hover){html body main#main:not(#z1):not(#z2):not(#z3) #features .st-fn>div:hover{transform:translateY(-4px);box-shadow:var(--sp-lift)}}

/* the platform screen and the cover strip sit in a plate frame */
html body main#main:not(#z1):not(#z2):not(#z3) #platform .up-shot{display:block;width:100%;height:auto;border-radius:20px;padding:12px;box-sizing:border-box;background:#fff;border:1px solid var(--sp-line);box-shadow:var(--sp-shadow);margin-top:72px}
html body main#main:not(#z1):not(#z2):not(#z3) #platform .up-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:72px}
html body main#main:not(#z1):not(#z2):not(#z3) #platform .up-strip img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:16px;box-shadow:var(--sp-shadow)}
html body main#main:not(#z1):not(#z2):not(#z3) #trust .up-photo{display:block;width:100%;height:100%;object-fit:cover}

/* tablets: plates keep two across */
@media (min-width:761px) and (max-width:1100px){
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div:nth-child(3){border-left:0}
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div:nth-child(n+3){border-top:1px solid var(--sp-line)!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #features .st-fn{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body main#main:not(#z1):not(#z2):not(#z3) :is(#services,#work,#related) .cg-parts{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust{grid-template-columns:1fr!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust .up-photo{height:420px}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust .px-wrap{padding:80px 40px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) .st-prize .st-stage{transform:none!important;margin:64px 0!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #shows .st-showpair{grid-template-columns:1fr!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #shows .st-showpair figure{min-width:0}
  html body main#main:not(#z1):not(#z2):not(#z3) #shows .st-showpair figcaption{min-width:0}
}

/* phones (390): the October shell stays; the plates read like native cards */
@media (max-width:760px){
  main#main{counter-reset:chap}
  html body main#main:not(#z1):not(#z2):not(#z3) .st-sec .t9-k{font:500 13px/1.3 "IBM Plex Mono",ui-monospace,monospace!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#1559f5!important;counter-increment:chap}
  html body main#main:not(#z1):not(#z2):not(#z3) .st-sec .t9-k::before{content:counter(chap,decimal-leading-zero) "  \00B7  ";white-space:pre;color:#0a1633}
  html body main#main:not(#z1):not(#z2):not(#z3) :is(#problem,#trust) .t9-k{color:#5b8cfa!important}
  html body main#main:not(#z1):not(#z2):not(#z3) :is(#problem,#trust) .t9-k::before{color:#fff}
  html body main#main:not(#z1):not(#z2):not(#z3) .px-chero .st-mark{display:inline-flex!important;width:auto!important;background:#fff;padding:10px 18px!important;border-radius:999px!important;box-shadow:0 12px 32px rgba(10,22,51,.22)!important;margin:0 0 20px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) .px-chero .st-mark img{filter:none!important;height:28px!important;width:auto!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #problem{background:radial-gradient(90% 60% at 85% 0%,rgba(21,89,245,.45) 0%,rgba(21,89,245,0) 60%),#0a1633!important;color:#fff}
  html body main#main:not(#z1):not(#z2):not(#z3) #problem h2,html body main#main:not(#z1):not(#z2):not(#z3) #problem h2 *{color:#fff!important;-webkit-text-fill-color:#fff}
  html body main#main:not(#z1):not(#z2):not(#z3) #problem h2 em,html body main#main:not(#z1):not(#z2):not(#z3) #problem h2 em *{color:#5b8cfa!important;-webkit-text-fill-color:#5b8cfa}
  html body main#main:not(#z1):not(#z2):not(#z3) #problem .cg-ssub{color:#b9c4dd!important}
  html body main#main:not(#z1):not(#z2):not(#z3) :is(#services,#related) .cg-part .up-photo{height:200px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn{grid-template-columns:1fr!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div{border-left:0;border-top:1px solid var(--sp-line)!important;padding:24px 20px 28px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div:first-child{border-top:0!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-fn>div::before{font-size:56px!important;margin-bottom:24px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #rules .st-ic{position:static;display:block;margin:0 0 16px}
  html body main#main:not(#z1):not(#z2):not(#z3) :is(#rules,#features) .st-fn dt{font:700 20px/1.2 Rubik,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;color:#0a1633!important;margin:0 0 8px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #features .st-fn{display:grid!important;grid-template-columns:1fr!important;gap:16px!important;border-top:0!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #features .st-fn>div{background:#fff;border:1px solid var(--sp-line);padding:24px 20px 28px!important;border-top:1px solid var(--sp-line)!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #features .st-ic{position:static;display:block;width:44px;height:44px;padding:10px;margin:0 0 16px}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust{display:flex!important;flex-direction:column;padding:0!important;background:#0a1633!important;color:#fff}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust .up-photo{height:320px}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust .px-wrap{padding-top:40px!important;padding-bottom:48px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust :is(h2,h2 *,dt){color:#fff!important;-webkit-text-fill-color:#fff}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust dd{color:#b9c4dd!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #trust .st-fn>div{border-top:1px solid rgba(255,255,255,.18)!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #platform .up-shot{margin-top:40px;padding:8px;border-radius:16px}
  html body main#main:not(#z1):not(#z2):not(#z3) #platform .up-strip{grid-template-columns:repeat(5,44%);overflow-x:auto;scroll-snap-type:x mandatory;margin:40px -16px 0;padding:0 16px 16px;gap:12px;scrollbar-width:none}
  html body main#main:not(#z1):not(#z2):not(#z3) #platform .up-strip img{scroll-snap-align:start}
  html body main#main:not(#z1):not(#z2):not(#z3) #platform .up-strip:focus-visible{outline:2px solid #1559f5;outline-offset:-2px}
}

/* the close on the Studio pages: the shared Steven-only close, words in white on the blue (every width) */
html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close{padding-bottom:120px!important;border-top:0!important}
html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close .px-wrap{border-top:0!important}
html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close h2,html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close h2 *{color:#fff!important;-webkit-text-fill-color:#fff}
html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close .cg-ssub{color:#e3ebff!important;-webkit-text-fill-color:#e3ebff;font-size:20px!important;max-width:560px!important}
html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close .cg-more{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close .cg-more a.px-cta{background:#fff!important;color:#0a1633!important;-webkit-text-fill-color:#0a1633;border-color:#fff!important;min-height:48px;display:inline-flex;align-items:center;padding:0 24px!important;border-radius:999px}
html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close .cg-more a.px-link{color:#fff!important;-webkit-text-fill-color:#fff;border:1.5px solid rgba(255,255,255,.5)!important;min-height:48px;display:inline-flex;align-items:center;padding:0 24px!important;border-radius:999px;text-decoration:none}
@media (max-width:760px){
  html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close{padding-bottom:64px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close .cg-ssub{font-size:17px!important}
  html body main#main:not(#z1):not(#z2):not(#z3) #start.bd-close .bd-close-in{padding-top:0!important}
  html body main#main:not(#z1):not(#z2):not(#z3) .px-chero .st-mark{width:max-content!important;max-width:100%}
}