/* HumanAmp OS, shown like the work it is: the product in a real place, the brain that joins up a business,
   and the people who look after it. Same bar as Design & Build (docs/showcase-standard.md). */

/* Hero: the OS lockup and one line, then the iPad in the car, full width */
.ip-hero.osx-hero .ip-in { align-items: end; }
body.ha-inner main .ip-sec.osx-hero h1 { max-width: 16ch; margin-top: 0; text-wrap: balance; }
body.ha-inner main .osx-mark { display: flex; flex-wrap: wrap; align-items: center; gap: .28em; max-width: none; margin: 0 0 22px; font-size: clamp(28px, 3vw, 44px); line-height: 1; color: var(--ha-paper); }
.osx-mark img { width: 1.05em; height: 1.05em; border-radius: 22%; flex: none; }
.osx-mark span { font-weight: 500; letter-spacing: -.035em; }
.osx-mark b { font-weight: 800; }
.osx-mark em { font-style: normal; font-weight: 800; color: #34A8AA; margin-left: .22em; }
body.ha-inner main .osx-cap { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ha-vapour); text-align: right; justify-self: end; }
.osx-heroimg { margin: 0; background: var(--ha-ink); }
.osx-heroimg img { display: block; width: 100%; height: auto; }

/* What it is, in one line */
body.ha-inner main .osx-statement > .ip-in { padding-block: clamp(56px, 9vw, 130px) clamp(56px, 7vw, 104px); }
body.ha-inner main .osx-statement p { margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; max-width: 22ch; color: var(--ha-ink); text-wrap: balance; }
body.ha-inner main .osx-statement p span { color: var(--ha-support-on-paper); }

/* How it works: the brain, on the page's measure, given the room to be seen */
#our-process.os-reveal .osr-track { padding-inline: clamp(16px, 5.5vw, 79px); }
@media (min-width: 900px) {
  #our-process.os-reveal .osr-stage { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  #our-process.os-reveal .osr-visual { width: min(100%, 640px, calc(100vh - 120px)); }
}
html body #our-process.os-reveal .osx-h2 { margin: 0; font: 800 clamp(34px, 3.9vw, 56px)/1.04 var(--ha-font-sans); letter-spacing: -.035em; color: var(--ha-white); max-width: 12ch; text-wrap: balance; }
#our-process.os-reveal .osr-steps { margin: 32px 0 0; }
/* A magnetic detent holds the finished brain with Amp's insight once; os-reveal.js then lets go (.osr-hold off). Only while pinned. */
html:has(#our-process.osr-hold) { scroll-snap-type: y proximity !important; }
/* The detent is the only snap point; older stylesheets left snap points on sections that would otherwise wake up */
html:has(#our-process.osr-hold) :is(body, body *):not(.osr-detent) { scroll-snap-align: none !important; }
#our-process.os-reveal .osr-track { position: relative; }
#our-process.os-reveal .osr-detent { display: none; }
#our-process.os-reveal.osr-live .osr-detent { display: block; position: absolute; left: 0; top: calc((340vh - 100vh) * .92); width: 1px; height: 0; scroll-snap-align: start; }

/* Owned by you, looked after by Lee and Dave: the words, then the people in the room */
body.ha-inner main .osx-people { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 5vw, 80px); padding-block: clamp(56px, 8vw, 120px); align-items: center; }
.osx-words { display: flex; flex-direction: column; gap: 14px; }
.osx-words .ip-actions { margin-top: 12px; }
body.ha-inner main .osx-words h2 { margin: 0 0 4px; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.04; font-weight: 800; letter-spacing: -.035em; color: var(--ha-ink); text-wrap: balance; }
body.ha-inner main .osx-words h2 span { color: var(--ha-support-on-paper); }
body.ha-inner main .osx-words p { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.55; color: var(--ha-support-on-paper); max-width: 30ch; }
.osx-people figure { margin: 0; justify-self: end; width: min(100%, 560px); }
.osx-people img { display: block; width: 100%; height: auto; border-radius: 10px; }
body.ha-inner main .osx-people figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ha-support-on-paper); }

/* The evidence band closes as roomily as it opens, and the plan after it keeps its own top space */
body.ha-inner main #evidence > .ip-in { padding-bottom: clamp(56px, 7vw, 100px); }
body.ha-inner main #evidence + #plans > .ip-in.join { padding-top: var(--ha-space-support); }

@media (max-width: 900px) {
  body.ha-inner main .osx-cap { text-align: left; justify-self: start; }
  body.ha-inner main .osx-people { grid-template-columns: minmax(0, 1fr); }
  .osx-people figure { justify-self: start; }
}