/* ---- os.css ---- */
/* The product parts, one copy for the whole site: chips, tiles, avatars, tool logos, small buttons, live dots, and the
   BraindOS window (muted macOS dots, the mark, "BraindOS" and a breadcrumb, a status chip, an icon rail on the large
   windows with the current view lit, a glass body, a small "Illustrative" tag). Inside every product screen one type
   scale (11, 12.5, 14, 16px) and an 8px grid. Also the plain product card (a deliverable or a flow, not a window). */

/* Small parts */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;background:rgba(11,17,16,.055);color:var(--ink-2);font:500 11px/1.3 var(--sans);white-space:nowrap}
.chip>i{width:6px;height:6px;border-radius:50%;background:#9AA29F}
.chip-live>i{background:var(--live);box-shadow:0 0 0 3px rgba(47,143,106,.16)}
.chip-ok{background:rgba(47,143,106,.12);color:#15463A}
.chip-ok>i{background:var(--teal)}
.chip-wait{background:#FBF0DC;color:#6E4A10}
.chip-wait>i{background:var(--wait)}
.chip-ink{background:var(--ink);color:#fff}
.chip-ink>i{background:#9BE0BF}
.tile{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:rgba(11,17,16,.06);color:var(--ink)}
.tile-ink{background:linear-gradient(160deg,#1C2622,#0B1110);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.tile-sm{width:22px;height:22px;border-radius:7px}
.tile-sm .i{width:12px;height:12px}
.av{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;font:600 9.5px/1 var(--sans);letter-spacing:.02em;background:#E2E7E5;color:var(--ink-2)}
.av-g{background:#D8EAE1;color:#15463A}
.av-b{background:#DCE5F1;color:#1D3F66}
.av-p{background:#E7E1F4;color:#3E3270}
.lg{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:8px;background:#fff;border:1px solid rgba(11,17,16,.08)}
.lg img{width:15px;height:15px;object-fit:contain}
.lg-xs{width:20px;height:20px;border-radius:6px}
.lg-xs img{width:12px;height:12px}
.btn-s{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;border:1px solid rgba(11,17,16,.12);background:rgba(255,255,255,.8);font:500 11.5px/1.3 var(--sans);color:var(--ink);white-space:nowrap}
.btn-s-ink{background:linear-gradient(180deg,#1E2724,#0B1110);border-color:#0B1110;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 14px -8px rgba(8,20,16,.6)}
.dot-w,.dot-l{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--wait)}
.dot-l{background:var(--live);box-shadow:0 0 0 3px rgba(47,143,106,.18)}
.wave{display:inline-flex;gap:3px}
.wave i{width:4px;height:4px;border-radius:50%;background:var(--live)}
/* A rank: five segments, n lit (never a figure) */
.seg{display:inline-flex;gap:3px}
.seg i{width:14px;height:6px;border-radius:2px;background:rgba(11,17,16,.1)}
.seg i.on{background:linear-gradient(90deg,#4FA982,var(--live))}
.spark{display:block;width:100%;height:30px;overflow:visible}
.spark path{fill:none;stroke:var(--live);stroke-width:1.8;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* The window */
.bos{position:relative;width:100%;margin:0;border-radius:16px;background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--ink);font:400 12.5px/1.45 var(--sans);text-align:left;overflow:hidden;container-type:inline-size}
.bos-bar{display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.4));border-bottom:1px solid rgba(11,17,16,.07)}
.bos-dots{display:flex;gap:6px;flex:none}
.bos-dots i{width:10px;height:10px;border-radius:50%;background:#DE8E83;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14)}
.bos-dots i:nth-child(2){background:#E4BC6E}
.bos-dots i:nth-child(3){background:#93C49F}
.bos-title{flex:1;display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
.bos-title b{font-weight:600;letter-spacing:-.005em}
.bos-mark{display:inline-block;flex:none;width:10px;height:10px;border-radius:3px;background:var(--ink)}
.bos-crumb{display:inline-flex;align-items:center;gap:6px;color:var(--grey)}
.bos-crumb .i{color:#A0A8A5}
.bos-name{display:inline-flex;align-items:center;gap:8px;min-width:0;color:var(--ink-2);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.bos-name::before{content:"";flex:none;width:3px;height:3px;border-radius:50%;background:#A0A8A5}
.bos-right{flex:none;display:flex}
.bos-main{display:grid;grid-template-columns:minmax(0,1fr)}
.bos-main:has(.bos-rail){grid-template-columns:52px minmax(0,1fr)}
.bos-rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 44px;background:rgba(255,255,255,.28);border-right:1px solid rgba(11,17,16,.06)}
.bos-ri{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;color:#8A928F}
.bos-ri.on{background:linear-gradient(160deg,#1C2622,#0B1110);color:#fff;box-shadow:0 6px 14px -8px rgba(8,20,16,.7)}
.bos-body{display:grid;gap:16px;min-width:0;padding:18px 18px 40px}
.bos-tag{position:absolute;left:12px;bottom:10px;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.7);font:500 9.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.bos-main:has(.bos-rail)~.bos-tag{left:64px}
.bos-k{font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey)}
.bos-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:12px;border-top:1px solid rgba(11,17,16,.07);color:var(--ink-2);font-weight:500}
.bos-foot>span:first-child{display:inline-flex;align-items:center;gap:6px}
.bos-foot .i{color:var(--live)}
.bos-sm .bos-bar{height:32px;padding:0 10px;gap:8px}
.bos-sm .bos-dots i{width:8px;height:8px}
.bos-sm .bos-body{padding:12px 12px 32px;gap:8px}
.bos-sm .bos-tag{left:10px;bottom:8px}

/* Inside a screen: the view's title row, panels with a head, a select */
.os-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.os-h b{font:600 16px/1.2 var(--sans);letter-spacing:-.02em}
.os-sel{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.75);border:1px solid rgba(11,17,16,.1);font-size:11.5px;font-weight:500}
.os-panel{display:grid;align-content:start;gap:4px;padding:12px 14px 10px;border-radius:12px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.8);box-shadow:0 1px 2px rgba(8,30,24,.05)}
.os-ph{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px;border-bottom:1px solid rgba(11,17,16,.07)}
.os-ph b{font-weight:600;font-size:12.5px}
.os-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 7px;border-radius:999px;background:var(--ink);color:#fff;font:500 11px/1.3 var(--sans)}
.os-chip .bos-mark{width:8px;height:8px;border-radius:2px;background:#fff}

/* The plain product card: a deliverable or a flow, on a photograph, white glass without window chrome */
.card{position:relative;display:grid;gap:12px;padding:16px 16px 40px;border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.9),color-mix(in srgb,var(--tint) 22%,rgba(255,255,255,.78)));border:1px solid rgba(255,255,255,.8);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--ink);font:400 12.5px/1.45 var(--sans);container-type:inline-size}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid rgba(11,17,16,.07)}
.card-t{display:flex;align-items:center;gap:10px;min-width:0}
.card-t b{display:block;font:600 14px/1.25 var(--sans);letter-spacing:-.01em}
.card-t small{display:block;color:var(--grey);font-size:11px}
.card-f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding-top:12px;border-top:1px solid rgba(11,17,16,.07)}
.card .bos-tag{left:16px}

@media (prefers-reduced-motion:no-preference){
  .chip-live>i,.dot-l{animation:os-pulse 2.6s ease-in-out infinite}
  .wave i{animation:os-wave 1.4s ease-in-out infinite}
  .wave i:nth-child(2){animation-delay:.18s}
  .wave i:nth-child(3){animation-delay:.36s}
}
@keyframes os-pulse{50%{box-shadow:0 0 0 5px rgba(47,143,106,0)}}
@keyframes os-wave{0%,100%{opacity:.3;transform:none}40%{opacity:1;transform:translateY(-2px)}}
.is-paused :is(.chip-live>i,.dot-l,.wave i){animation-play-state:paused}

/* Small windows keep only what matters */
@container (max-width:560px){
  .bos-main:has(.bos-rail){grid-template-columns:minmax(0,1fr)}
  .bos-rail{display:none}
  .bos-main:has(.bos-rail)~.bos-tag{left:12px}
  .bos-crumb{display:none}
  .bos-body{padding:14px 12px 40px}
}
@container (max-width:380px){
  .bos-name{display:none}
  .bos-bar{gap:8px;padding:0 10px}
  .bos-right .chip{padding:2px 7px;font-size:10px}
}

/* ---- hero.css ---- */
/* The hero (h07, locked): the square river photograph, a blue vignette and grain for readable type, an oval fade into
   the white, the drawn ring, the glass buttons. From the hero lab (hero-lab/hl.css) with its experiments taken out. */
:root{--hl-blue:10,30,62}

/* The nav reads white while it sits over the photograph, and takes its glass skin once the page moves. */

/* The hero */
/* The whole extended photograph (ground added below the people), anchored at the bottom: on a tall screen it shows in
   full; on a shorter one the crop comes off the sky, never the people. The cap keeps the people on the first screen. */
.hl-hero{--ar:1.1905;position:relative;isolation:isolate;height:max(640px,min(calc(100vw / var(--ar)),var(--tall,128svh)));color:#fff;background:var(--page);overflow:clip}
.hl-photo,.hl-vig,.hl-tex{position:absolute;inset:0;pointer-events:none}
.hl-photo{z-index:-3}
.hl-img,.hl-img img{width:100%;height:100%}
.hl-img img{display:block;object-fit:cover;object-position:var(--pos)}

/* Fades into the white: the oval (an arc across the bottom), the orb (the sides go too), the old straight line */
.hl-photo,.hl-vig{-webkit-mask-image:var(--fade);mask-image:var(--fade)}
/* The fade runs over the added ground only (the bottom fifth), in an arc. */
.hl-hero{--fade:radial-gradient(ellipse 220% 100% at 50% 0%,#000 77%,rgba(0,0,0,.55) 89%,transparent 99%)}
/* The orb reaches full transparency just before the hero's bottom edge, so no straight line is left behind. */

/* Readability: a blue vignette from the top, darkest behind the words */
.hl-vig{z-index:-2;background:radial-gradient(ellipse 58% 40% at 50% 38%,rgba(var(--hl-blue),calc(.4 * var(--vig,1))),rgba(var(--hl-blue),0) 74%),radial-gradient(ellipse 62% 46% at 50% 24%,rgba(var(--hl-blue),calc(.36 * var(--vig,1))),rgba(var(--hl-blue),0) 72%),linear-gradient(rgba(var(--hl-blue),calc(.58 * var(--vig,1))),rgba(var(--hl-blue),calc(.12 * var(--vig,1))) 42%,rgba(var(--hl-blue),0) 62%);transition:opacity .3s}
.hl-tex{z-index:-1;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.5) 34%,transparent 62%);mask-image:linear-gradient(#000,rgba(0,0,0,.5) 34%,transparent 62%)}
.hl-tex{opacity:.85;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cfilter%20id='g'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.82'%20numOctaves='3'%20seed='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='1.5%200%200%200%20-.25%201.5%200%200%200%20-.25%201.5%200%200%200%20-.25%200%200%200%200%201'/%3E%3C/filter%3E%3Cpattern%20id='d'%20width='8'%20height='8'%20patternUnits='userSpaceOnUse'%3E%3Ccircle%20cx='4'%20cy='4'%20r='1.3'%20fill='white'/%3E%3C/pattern%3E%3Cfilter%20id='r'%20x='0'%20y='0'%20width='100%25'%20height='100%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.6'%20numOctaves='2'%20seed='9'%20stitchTiles='stitch'%20result='n'/%3E%3CfeComposite%20in='SourceGraphic'%20in2='n'%20operator='in'/%3E%3C/filter%3E%3Crect%20width='240'%20height='240'%20filter='url(%23g)'/%3E%3Crect%20width='240'%20height='240'%20fill='url(%23d)'%20filter='url(%23r)'%20opacity='1'/%3E%3C/svg%3E")}
.hl-tex{-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.72) 22%,rgba(0,0,0,.3) 44%,transparent 66%);mask-image:linear-gradient(#000,rgba(0,0,0,.72) 22%,rgba(0,0,0,.3) 44%,transparent 66%)}

/* The words */
.hl-in{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(116px,18vh,196px)}
.hl-kick{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.hl-h{margin-top:20px;font:300 clamp(46px,6.3vw,100px)/.98 var(--sans);letter-spacing:-.045em;text-wrap:balance;text-shadow:0 2px 40px rgba(var(--hl-blue),.28)}
.hl-line{display:block}
.hl-acc{position:relative;display:inline-block;font-family:"Instrument Serif",var(--serif),serif;font-weight:400;letter-spacing:-.012em;padding-left:.05em}
.hl-ring{position:absolute;left:-7%;top:-14%;width:114%;height:128%;overflow:visible;pointer-events:none}
.hl-ring path{fill:none;stroke:rgba(255,255,255,.9);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.hl-sub{max-width:46ch;margin-top:22px;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(var(--hl-blue),.4)}
.hl-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}

/* The 3D glass buttons: the How we work island's glass (an outer rim, a frosted body, a diagonal reflection) as pills.
   On the photograph: a bright frosted primary and a clear secondary. */
.hl-gbtn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 28px;border-radius:999px;overflow:hidden;text-decoration:none;font:500 15px/1 var(--sans);letter-spacing:-.005em;border:1px solid rgba(255,255,255,.72);
  box-shadow:0 22px 44px -22px rgba(0,8,20,.7),0 2px 6px -2px rgba(0,8,20,.3),inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);transition:transform .35s var(--ease-out),box-shadow .35s}
.hl-g-rim,.hl-g-shine{position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.hl-g-rim{padding:4px;background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.06) 46%,rgba(255,255,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.hl-g-shine{background:linear-gradient(172deg,rgba(255,255,255,.6),rgba(255,255,255,0) 48%);opacity:.65;transition:opacity .35s}
.hl-g-label{position:relative;white-space:nowrap}
.hl-gbtn-solid{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(232,238,238,.86));color:var(--ink)}
.hl-gbtn-clear{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));color:#fff;text-shadow:0 1px 10px rgba(0,20,40,.35)}
.hl-gbtn:hover{transform:translateY(-2px);box-shadow:0 30px 54px -24px rgba(0,8,20,.75),0 2px 6px -2px rgba(0,8,20,.3),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.2)}
.hl-gbtn:hover .hl-g-shine{opacity:1}
.hl-gbtn:active{transform:translateY(0) scale(.985);box-shadow:0 12px 26px -18px rgba(0,8,20,.7),inset 0 2px 6px rgba(0,0,0,.18)}
.hl-gbtn:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* Micro: the ring draws itself once the headline has landed */
.hl-ring path{opacity:1;transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1) .9s}
.hl-hero.in .hl-ring path{stroke-dashoffset:0}
/* Micro: the headline rises line by line, then the rest. Pure CSS from the first paint, so the largest text never
   waits on a script (the hero's words are the page's LCP). */
@keyframes hl-rise{from{opacity:.01;transform:translateY(22px)}to{opacity:1;transform:none}}
/* (1% not 0: the browser counts the words as painted from the first frame, so the rise never delays LCP.) */
.hl-hero :is(.hl-line,.hl-kick,.hl-sub,.hl-ctas){animation:hl-rise 1.1s var(--ease-out) both}
.hl-kick{animation-delay:.04s}
.hl-line:nth-child(1){animation-delay:.12s}
.hl-line:nth-child(2){animation-delay:.24s}
.hl-sub{animation-delay:.42s}
.hl-hero .hl-ctas{animation-delay:.56s}
/* Micro: the photo settles slowly and moves a little slower than the page */
.hl-img{transform:scale(1.06);transition:transform 12s cubic-bezier(.2,.6,.2,1)}
.hl-hero.in .hl-img{transform:none}
.hl-img img{transform:translate3d(0,var(--sy,0px),0)}

/* Phones: the headline sits over the top of the photograph, the people stand clear in the middle, and the subline
   and buttons move onto the white just below the fade, in ink, so nothing ever covers the people. */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .hl-hero{--ph:max(min(420px,calc(100svh - 60px)),calc(100svh - 250px));height:auto}
  .hl-photo,.hl-vig,.hl-tex{bottom:auto;height:var(--ph)}
  .hl-img img{object-position:var(--pos-m)}
  /* On a phone the words run edge to edge, so the vignette is a wide band rather than a centred oval. */
  .hl-vig{background:radial-gradient(ellipse 130% 30% at 50% 22%,rgba(var(--hl-blue),calc(.46 * var(--vig,1))),rgba(var(--hl-blue),0) 80%),linear-gradient(rgba(var(--hl-blue),calc(.6 * var(--vig,1))),rgba(var(--hl-blue),calc(.14 * var(--vig,1))) 34%,rgba(var(--hl-blue),0) 52%)}
  .hl-in{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--ph) auto auto auto;justify-items:center;height:auto;padding:0 var(--gutter) 56px}
  .hl-in>*,.hl-copy>*{grid-column:1}
  .hl-copy{display:contents}
  .hl-kick{grid-row:1;align-self:start;margin-top:clamp(84px,12svh,108px)}
  .hl-h{grid-row:1;align-self:start;margin-top:calc(clamp(84px,12svh,108px) + 30px);font-size:clamp(36px,10.5vw,50px)}
  .hl-sub{grid-row:2;margin-top:4px;font-size:15.5px;color:var(--ink-2);text-shadow:none}
  .hl-ctas{grid-row:3;flex-direction:column;align-items:stretch;width:100%;max-width:340px;margin-top:22px}
  /* On the white below the photograph the glass turns: a dark glass primary, the island's light glass secondary. */
  .hl-ctas .hl-gbtn{justify-content:center}
  .hl-gbtn-solid{background:linear-gradient(180deg,#30373A,#101516);color:#fff;border-color:rgba(255,255,255,.16);box-shadow:0 20px 40px -22px rgba(10,20,22,.6),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.4)}
  .hl-gbtn-solid .hl-g-rim{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,0) 46%,rgba(255,255,255,.12))}
  .hl-gbtn-solid .hl-g-shine{opacity:.22}
  .hl-gbtn-clear{background:linear-gradient(145deg,#fff,rgba(238,238,236,.9));color:var(--ink);text-shadow:none;border-color:var(--line);box-shadow:0 20px 40px -24px rgba(10,10,10,.3),inset 0 2px 1px #fff,inset 0 -1px 0 rgba(10,10,10,.08)}
  .hl-gbtn-clear .hl-g-rim{background:linear-gradient(135deg,rgba(0,0,0,.05),rgba(0,0,0,0) 46%,rgba(0,0,0,.04))}
  .hl-gbtn:focus-visible{outline-color:var(--ink)}
}
/* Short, wide screens (a 1280x720 laptop): a tighter block of words, so the buttons end above the people. */
@media (min-aspect-ratio:3/2) and (max-height:820px){
  .hl-in{padding-top:clamp(84px,13vh,112px)}
  .hl-h{margin-top:14px;font-size:clamp(40px,min(5.4vw,9.4vh),84px)}
  .hl-sub{margin-top:14px;font-size:16px}
  .hl-ctas{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .hl-hero :is(.hl-line,.hl-kick,.hl-sub,.hl-ctas){opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .hl-ring path{transition:none!important}
  .hl-gbtn{transition:none}
  .hl-gbtn:hover,.hl-gbtn:active{transform:none}
  .hl-img img{transform:none!important;transition:none!important}
}

/* ---- home.css ---- */
/* The homepage sections other than How we work and the org: our clients, the intro statement, our work, industries
   (a glass tab bar over one photograph, a glass card with the line and the link), working with us (four steps, each
   with one small, clear piece of UI) and notes. */
.home{--sec:clamp(96px,11vw,168px)}

/* Our clients: one quiet band; on a phone the line drifts and can be paused */
.v-clients{padding-block:clamp(56px,6vw,96px) clamp(48px,5vw,80px)}
.v-clients-h{text-align:center;margin-bottom:clamp(24px,2.6vw,36px)}
.v-track{overflow:hidden}
.v-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px clamp(20px,3vw,48px);--k:.86}
.v-logos img{height:calc(var(--h) * var(--k))}
.v-logos li{flex:none}
.v-logos img,.v-backed img{width:auto;max-width:none;filter:grayscale(1) contrast(1.05);opacity:.6;transition:opacity .3s}
.v-logos img:hover{opacity:1}
.v-logos-copy{display:none}
.v-backed{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:clamp(28px,3vw,44px)}
.v-backed img{opacity:.5;height:calc(var(--h) * .86)}
@media (max-width:1240px){.v-logos{--k:.76}}
@media (max-width:1000px){.v-logos{--k:.68}}

/* The intro: the page's one serif statement, large and centred; Newsreader, or the hero's Instrument Serif */
.v-intro{padding-block:clamp(88px,11vw,176px)}
.v-intro-t{max-width:22ch;margin:0 auto;text-align:center;font:400 clamp(32px,3.6vw,54px)/1.2 var(--news);letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
.v-intro-t .w{display:inline-block}
.v-intro-t .dim{color:var(--dim)}
.v-intro-serif .v-intro-t{max-width:20ch;font:400 clamp(38px,4.4vw,66px)/1.08 var(--serif);letter-spacing:-.012em}
.v-intro-sans .v-intro-t{max-width:22ch;font:500 clamp(30px,3.4vw,50px)/1.12 var(--sans);letter-spacing:-.045em}
@media (prefers-reduced-motion:no-preference){
  /* scrub: each word lights as the line passes through the screen (--p, set by the scroll, 0 to the word count) */
  /* the unlit words start at half strength (large text keeps at least 3:1 against the page); the grey words, already
     the quieter half, are not dimmed further */
  .js .v-intro-scrub .w{opacity:clamp(.5,calc(var(--p,99) - var(--k)),1);transition:opacity .25s linear}
  .js .v-intro-scrub .dim .w,.js .v-intro-scrub .w.dim{opacity:1}
  /* rise: the words rise in, one after another, once */
  .js .v-intro-rise .w{transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(var(--k) * 28ms)}
  .js .v-intro-rise [data-in]:not(.in) .w{opacity:0;transform:translateY(14px)}
  .js .v-intro-rise [data-in]{opacity:1;transform:none}
}

/* Our work: the numbers line, then three framed photo cards with the figure set large */
.ow .v-head{margin-bottom:28px}




.ow-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.ow-card{display:grid;align-content:start;gap:12px}
.ow-img{position:relative;margin:0 0 6px;aspect-ratio:4 / 3.5;border-radius:22px;overflow:hidden;isolation:isolate}
.ow-img .img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.ow-img::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,16,13,0) 45%,rgba(6,16,13,.55));pointer-events:none}
.ow-card:hover .ow-img .img{transform:scale(1.035)}
.ow-ind{position:absolute;left:14px;top:14px;padding:4px 10px;border-radius:8px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12.5px;font-weight:500}
.ow-fig{position:absolute;left:18px;bottom:16px;display:grid;color:#fff}
.ow-fig b{font:500 clamp(40px,4vw,58px)/1 var(--sans);letter-spacing:-.05em}
.ow-fig span{font-size:14px;opacity:.9}
.ow-who{color:var(--grey)}
.ow-text{font-size:16.5px;line-height:1.55;max-width:40ch}
.ow-link,.hn-all{display:inline-flex;align-items:center;gap:8px;justify-self:start;font-weight:500;text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s}



/* Industries: a glass tab bar over one photograph; in the centre, the industry, one line and Explore. Nothing else. */
.ix-box{position:relative;isolation:isolate;display:grid;min-height:clamp(500px,46vw,680px);border-radius:28px;overflow:hidden;--focus:#fff}
.ix-tabs{position:relative;z-index:2;justify-self:center;align-self:start;display:flex;gap:4px;margin-top:22px;padding:5px;border-radius:15px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);color:var(--ink-2);box-shadow:0 18px 40px -24px rgba(6,16,13,.5)}
.ix-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:11px;background:none;font:500 14.5px/1 var(--sans);color:inherit;cursor:pointer;transition:background .3s,color .3s}
.ix-tabs button:hover{background:rgba(11,17,16,.06)}
.ix-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.ix-tabs button:focus-visible{outline-color:var(--ink)}
.ix-panels{position:absolute;inset:0;display:grid}
.ix-p{position:relative;grid-area:1 / 1;display:grid;isolation:isolate}
.ix-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s var(--ease-out)}
.ix-p.on .ix-img{transform:none}
.ix-p::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 50% at 50% 54%,rgba(6,16,13,.42),rgba(6,16,13,.12) 80%),linear-gradient(180deg,rgba(6,16,13,.2),rgba(6,16,13,0) 30%)}
.js .ix-p{opacity:0;visibility:hidden;transition:opacity .7s var(--ease-out),visibility 0s .7s}
.js .ix-p.on{opacity:1;visibility:visible;transition-delay:0s}
.ix-copy{align-self:center;justify-self:center;display:grid;justify-items:center;gap:16px;max-width:620px;padding:72px 24px 24px;text-align:center;color:#fff}
.ix-name{margin:0;font:500 clamp(44px,5.4vw,80px)/1 var(--sans);letter-spacing:-.05em;text-shadow:0 2px 30px rgba(6,16,13,.35)}
.ix-line{max-width:40ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:rgba(255,255,255,.9);text-shadow:0 1px 16px rgba(6,16,13,.4)}
.ix-link{display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:12px 20px;border-radius:999px;background:#fff;color:var(--ink);font-weight:500;font-size:15px;text-decoration:none;box-shadow:0 14px 30px -16px rgba(6,16,13,.6);transition:transform .3s var(--ease-out)}
.ix-link:hover{transform:translateY(-2px)}
html:not(.js) .ix-tabs{display:none}
html:not(.js) .ix-box{min-height:0;overflow:visible}
html:not(.js) .ix-panels{position:relative;gap:12px}
html:not(.js) .ix-p{grid-area:auto;min-height:420px;border-radius:22px;overflow:hidden}

/* Working with us: four steps onto BraindOS; each card a pale panel holding one small, clear piece of UI (s11) */
.ww-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.ww-card{display:grid;align-content:start;gap:8px;padding:10px 10px 26px;border-radius:24px;background:#F1F4F2;border:1px solid #E8ECEA}
.ww-card>:not(.ww-ui){padding-inline:12px}
.ww-ui{position:relative;isolation:isolate;display:grid;place-items:center;height:220px;padding:18px;margin-bottom:12px;border-radius:17px;background:radial-gradient(ellipse 80% 70% at 50% 0%,#fff,rgba(255,255,255,0) 70%),linear-gradient(165deg,#FBFCFB,#E9EFEC);overflow:hidden}
.ww-ui::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:150px;opacity:.22;mix-blend-mode:overlay}
.ww-n{color:var(--grey)}
.ww-t{font:600 19px/1.25 var(--sans);letter-spacing:-.022em}
.ww-line{color:var(--grey);font-size:15px;line-height:1.5}
.ww-assure{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;margin-top:clamp(32px,3.4vw,48px);color:var(--ink-2);font-size:15px}
.ww-assure li{display:inline-flex;align-items:center;gap:8px}
.ww-assure .i{color:var(--live)}
/* The small UI pieces: white cards, one type scale */
.ui-card{display:grid;gap:10px;width:100%;max-width:256px;padding:14px;border-radius:14px;background:#fff;border:1px solid rgba(11,17,16,.07);box-shadow:0 1px 2px rgba(8,30,24,.05),0 18px 36px -24px rgba(8,30,24,.35);font:400 12.5px/1.4 var(--sans);color:var(--ink)}
.ui-h{display:flex;align-items:center;gap:8px}
.ui-h>b,.ui-h>.ui-n b{flex:1;font-weight:600}
.ui-h>.ui-n{flex:1;display:grid}
.ui-h small{color:var(--grey);font-size:11px}
.ui-cal{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.ui-day{display:grid;justify-items:center;padding:8px 12px;border-radius:12px;background:#F1F4F2}
.ui-day small{font-size:11px;color:var(--grey)}
.ui-day b{font-size:24px;font-weight:600;line-height:1.1}
.ui-ev{display:grid;gap:4px}
.ui-ev b{font-weight:600}
.ui-ev small{display:inline-flex;align-items:center;gap:5px;color:var(--grey);font-size:11px}
.ui-avs{display:flex;margin-top:2px}
.ui-avs .av{width:24px;height:24px;font-size:8.5px;border:2px solid #fff}
.ui-avs .av+.av{margin-left:-6px}
.ui-list ul{display:grid;gap:6px}
.ui-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12px}
.ui-list li b{font-weight:500}
.ui-list .tile{width:24px;height:24px;border-radius:7px}
.ui-check li{display:flex;gap:7px;color:var(--grey)}
.ui-check li.on{color:var(--ink)}
.ui-check li.on .i{color:var(--live)}
.ui-task{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;background:rgba(11,17,16,.045);color:var(--ink-2);font-weight:500}

/* Notes: a row of cover cards */
.hn-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:clamp(28px,3vw,44px)}
.hn-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.hn-card a{display:grid;gap:10px;text-decoration:none}
.hn-img{margin:0 0 4px;aspect-ratio:16 / 10;border-radius:18px;overflow:hidden;background:#E6EBE8}
.hn-img .img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.hn-card a:hover .hn-img .img{transform:scale(1.04)}
.hn-t{font:500 19px/1.3 var(--sans);letter-spacing:-.02em}
.hn-time{color:var(--grey)}

@media (max-width:1100px){.ww-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .ow-cards,.hn-row{grid-template-columns:minmax(0,1fr)}
  .ix-tabs{justify-self:stretch;margin:14px 14px 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .ix-tabs li{flex:none;scroll-snap-align:start}
}
@media (max-width:760px){
  .ww-cards{grid-template-columns:minmax(0,1fr)}
  
  
  .hn-head{flex-direction:column;align-items:flex-start}
  .v-logos{flex-wrap:nowrap;justify-content:flex-start;width:max-content;padding-right:clamp(24px,3.8vw,64px);--k:.64}
  .v-track{display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .v-logos-copy{display:flex}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){
  .v-track>.v-logos{animation:v-drift 38s linear infinite}
  .v-track:is(:hover,:active)>.v-logos{animation-play-state:paused}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .v-track{display:block;-webkit-mask-image:none;mask-image:none}
  .v-logos{flex-wrap:wrap;justify-content:center;width:auto;gap:18px 26px;padding:0}
  .v-logos-copy{display:none}
}
@keyframes v-drift{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .ix-img,.ow-img .img,.hn-img .img,.ix-link{transition:none}
  .js .ix-p{transition:none}
}

/* ---- how.css ---- */
/* How we work. Every frame in a layout is the same size: a closer crop of its photograph (--z), heavy film grain, a
   hairline rim, and one visual in the open space. Layouts: .hw-h1 alternating rows (4:3), .hw-h2 minimal strips,
   .hw-h3 squares, .hw-h4 a pinned accordion beside one square, .hw-h5 glass tabs over one frame. The visuals:
   the Blueprint card (.fd), the flow (.fl), the command centre and learning windows (.rn, .gr), the focus chips (.fc). */
.hw-words{display:grid;align-content:center;gap:18px;max-width:440px}
.hw-tag{display:flex;align-items:center;gap:12px;font:500 15px/1 var(--sans);letter-spacing:-.01em}
.hw-tag .mono-k{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;letter-spacing:.04em;color:var(--ink-2)}
.hw-lines{display:block;font:500 clamp(28px,2.5vw,38px)/1.07 var(--sans);letter-spacing:-.042em;text-wrap:balance}
.hw-body{color:var(--grey);font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;max-width:38ch}
.hw-get{display:inline-flex;align-items:center;gap:12px;justify-self:start;margin-top:6px;padding:7px 14px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:500;font-size:14.5px}
.hw-get .mono-k{padding:4px 8px;border-radius:999px;background:var(--sage);font-size:10px;color:var(--moss)}
.hw-bridge{margin-top:clamp(80px,10vw,150px);text-align:center;font:500 clamp(24px,2.4vw,34px)/1.25 var(--sans);letter-spacing:-.035em;text-wrap:balance}

/* The frame */
.hw-frame{position:relative;isolation:isolate;display:grid;place-items:center;margin:0;padding:clamp(20px,3.2vw,48px);border-radius:24px;overflow:hidden;background:#C9D6D1;container-type:inline-size}
.hw-img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.12));filter:saturate(1.04) contrast(1.02)}
.hw-frame::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(255,255,255,.08),rgba(8,24,20,.18) 100%)}
.hw-frame .grain{z-index:-1;opacity:.85;background-size:120px}
.hw-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);pointer-events:none}
.hw-piece{position:relative;display:grid;justify-items:center;width:100%}
/* Every visual in a layout is one width, centred, so the insets match frame to frame. */
.hw-piece>*{width:min(100%,468px)}
.hw-piece>.fc{width:max-content;max-width:100%}

/* H1: alternating rows, equal 4:3 frames */
.hw-rows{display:grid;gap:clamp(72px,8.6vw,136px)}
.hw-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:center}
.hw-row.is-flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.hw-row.is-flip .hw-words{order:2}
.hw-43{aspect-ratio:4 / 3}

/* H2: minimal. The words first, then one slim photograph with one focused element */
.hm-rows{display:grid;gap:clamp(64px,8vw,120px)}
.hm-row{display:grid;gap:clamp(24px,2.6vw,36px)}
.hm-text{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:16px 64px;align-items:start}
.hm-text>.hw-tag,.hm-text>.hw-lines{grid-column:1}
.hm-side{grid-column:2;grid-row:1 / span 2;display:grid;align-content:end;gap:14px}
.hm-strip .fc{zoom:1.4}
.hm-strip{aspect-ratio:16 / 5}

/* H3: four equal squares, the words beneath */
.hq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(20px,2.4vw,32px)}
.hq-card{display:grid;align-content:start;gap:24px}
.hq-sq{aspect-ratio:1 / 1}
.hq-t{display:grid;gap:12px;max-width:520px}
.hq-t .hw-lines{font-size:clamp(26px,2.4vw,36px)}

/* H4: the steps as an accordion beside one square; the square changes with the open step. With JavaScript and motion
   allowed the pair is pinned while the page moves through the four steps. */
.ha-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(36px,5vw,88px);align-items:center}
.ha-list{display:grid;border-top:1px solid var(--line)}
.ha-item{border-bottom:1px solid var(--line)}
.ha-item summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:end;padding:18px 0;cursor:pointer;list-style:none}
.ha-item summary::-webkit-details-marker{display:none}
.ha-item summary .hw-tag{grid-column:1 / -1;display:flex;color:var(--grey)}
.ha-item summary .hw-lines{grid-column:1;grid-row:2;font-size:clamp(22px,1.9vw,28px);color:var(--grey);transition:color .4s}
.ha-item[open] summary .hw-lines,.ha-item summary:hover .hw-lines{color:var(--ink)}
.ha-item[open] .hw-tag .mono-k{background:var(--ink);color:#fff;border-color:var(--ink)}
.ha-plus{grid-column:2;grid-row:2;margin-bottom:6px;color:var(--grey);transition:transform .4s var(--ease-out)}
.ha-item[open] .ha-plus{transform:rotate(45deg)}
.ha-body{display:grid;gap:14px;padding:0 0 20px}
.ha-card{display:grid;gap:16px}
.ha-sq{aspect-ratio:1 / 1}
.ha-dots{display:none}
.js .ha-card{position:relative;display:block;aspect-ratio:1 / 1}
.js .ha-pane{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .6s var(--ease-out),transform .8s var(--ease-out),visibility 0s .6s}
.js .ha-pane.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.js .ha-pane .hw-frame{height:100%}
.js .ha-dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
.ha-dots i{width:22px;height:3px;border-radius:3px;background:var(--line);transition:background .4s}
.ha-dots i.on{background:var(--ink)}
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .js .ha{height:300vh}
  .js .ha-in{position:sticky;top:calc(var(--nav-h) + max(24px,(100vh - var(--nav-h) - min(640px,100vh - var(--nav-h) - 48px)) / 2))}
  .js .ha-stage{max-width:min(640px,100vh - var(--nav-h) - 96px);justify-self:end;width:100%}
}

/* H5: four glass tabs over one large frame; the words on a glass card */
.ht{position:relative;display:grid}
.ht-tabs{position:relative;z-index:3;justify-self:center;display:flex;gap:4px;margin:0 0 -64px;padding:5px;border-radius:15px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 40px -24px rgba(6,16,13,.5);transform:translateY(22px)}
.ht-tabs button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:0;border-radius:11px;background:none;font:500 14.5px/1 var(--sans);color:var(--ink-2);cursor:pointer;transition:background .3s,color .3s}
.ht-tabs button .mono-k{color:inherit;opacity:.7}
.ht-tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.ht-panels{display:grid}
.ht-p{position:relative;grid-area:1 / 1;display:grid}
.ht-frame{aspect-ratio:16 / 9;align-items:end;justify-items:end;padding:96px 32px 32px}
.ht-frame .hw-piece{justify-items:end}
.ht-copy{position:absolute;left:32px;bottom:32px;display:grid;gap:12px;width:min(360px,40%);padding:22px;border-radius:20px;background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.ht-copy .hw-lines{font-size:clamp(22px,2vw,28px)}
.ht-copy .hw-body{font-size:15px;color:var(--ink-2)}
.js .ht-p{opacity:0;visibility:hidden;transition:opacity .6s var(--ease-out),visibility 0s .6s}
.js .ht-p.on{opacity:1;visibility:visible;transition-delay:0s}
html:not(.js) .ht-tabs{display:none}
html:not(.js) .ht-panels{gap:24px}
html:not(.js) .ht-p{grid-area:auto}

/* 01 Find: the AI Blueprint, a deliverable card */
.fd-th,.fd-rows li{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr) auto 84px;gap:12px;align-items:center}
.fd-th{font:500 9.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.fd-rows{display:grid}
.fd-rows li{padding:9px 0;border-top:1px solid rgba(11,17,16,.06)}
.fd-rows li:first-child{border-top:0}
.fd-rows .chip{justify-self:end}
.fd-th span:last-child{text-align:right}
.fd-o{display:flex;align-items:center;gap:9px;min-width:0}
.fd-o b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-o .tile{width:26px;height:26px}
.fd-team{color:var(--grey);font-size:12px}
.fd-map{display:inline-flex;align-items:center;gap:6px}
.fd-map .mono-k{margin-right:4px;font-size:9.5px}
.fd-ok{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-weight:500;color:var(--ink-2)}
.fd-ok .i{color:var(--live)}

/* 02 Build: three sources into BraindOS, out to three agents (every box the same size), then the approval */
.fl-k,.fl-graph{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr)}
.fl-k{margin-bottom:-4px}
.fl-k .mono-k{font-size:9.5px}
.fl-col{display:grid;grid-template-rows:repeat(3,1fr);gap:10px;min-width:0}
.fl-node{display:flex;align-items:center;gap:9px;min-width:0;height:44px;padding:0 10px;border-radius:11px;background:rgba(255,255,255,.86);border:1px solid rgba(11,17,16,.07);box-shadow:0 8px 18px -14px rgba(8,30,24,.45)}
.fl-node b{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-node .lg,.fl-node .tile{width:26px;height:26px}
.fl-mid{position:relative;display:grid;place-items:center}
.fl-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fl-lines path{fill:none;stroke:rgba(11,17,16,.3);stroke-width:1.2;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.fl-hub{position:relative;display:grid;justify-items:center;gap:6px}
.fl-sq{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(160deg,#1E2724,#0B1110);box-shadow:0 12px 24px -10px rgba(8,20,16,.7),inset 0 1px 0 rgba(255,255,255,.14)}
.fl-sq .bos-mark{width:13px;height:13px;border-radius:4px;background:#fff}
.fl-hub-t{padding:2px 8px;border-radius:999px;background:var(--ink);color:#fff;font:500 10px/1.5 var(--sans)}
.fl-teams{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid rgba(11,17,16,.07);box-shadow:0 12px 26px -18px rgba(8,30,24,.5)}
.fl-msg{flex:1;display:grid;min-width:0}
.fl-msg b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl-msg small{color:var(--grey);font-size:11px}

/* 03 Run: the command centre */
.rn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rn-stat{display:grid;align-content:start;gap:8px;padding:12px;border-radius:12px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.85)}
.rn-stat .mono-k{font-size:9.5px;letter-spacing:.08em}
.rn-stat .chip{justify-self:start}
.rn-tiles{display:flex;gap:4px;padding:4px 0}
.rn-appr{display:grid}
.rn-appr li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid rgba(11,17,16,.06)}
.rn-appr li:first-child{border-top:0}
.rn-appr li>span:not(.chip):not(.btn-s){display:grid}
.rn-appr b{font-weight:600}
.rn-appr small{color:var(--grey);font-size:11px}

/* 04 Grow: learning, as a table */
.gr-th,.gr-rows li{display:grid;grid-template-columns:minmax(0,1.25fr) 88px minmax(0,1.4fr) 62px;gap:12px;align-items:center}
.gr-th{font:500 9.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.gr-th b{display:none}
.gr-rows li{padding:9px 0;border-top:1px solid rgba(11,17,16,.06)}
.gr-rows li:first-child{border-top:0}
.gr-rows .chip{justify-self:end}
.gr-a{display:flex;align-items:center;gap:8px;min-width:0}
.gr-a b{font-weight:600;line-height:1.25}
.gr-q .spark{height:22px}
.gr-new{display:block;height:1px;margin:0 6px;border-top:1.5px dashed rgba(11,17,16,.2)}
.gr-l{color:var(--ink-2);font-size:12px;line-height:1.35}
.gr-train{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--grey)}
.gr-train b{color:var(--ink);font-weight:600;margin-right:4px}
.gr-train span{display:inline-flex;align-items:center;gap:5px}
.gr-train span.on{color:var(--ink)}
.gr-train span.on .i{color:var(--live)}

/* One focused element (minimal layout) */
.fc{position:relative;padding:14px 16px 34px;border-radius:16px;background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);font:400 13px/1.4 var(--sans);color:var(--ink)}
.fc-in{display:flex;align-items:center;gap:10px;white-space:nowrap}
.fc-in>span:not([class]){display:grid}
.fc-in b{font-weight:600}
.fc-in small{color:var(--grey);font-size:11.5px}
.fc-ar{color:var(--grey)}
.fc-ok{color:var(--live)}
.fc .bos-tag{left:16px;bottom:9px}
.fc .fl-sq{width:32px;height:32px;border-radius:10px}

/* Drawn lines arrive by a reveal, so the dashes stay whole */
@media (prefers-reduced-motion:no-preference){
  .js [data-arrive] :is(.fl-lines,.spark){transition:clip-path 1.4s var(--ease-io) .5s}
  .js [data-arrive]:not(.in) :is(.fl-lines,.spark){clip-path:inset(0 100% 0 0)}
  .js .ha-pane.on :is(.a,.spark,.fl-lines){animation:hw-in .7s var(--ease-out) both;animation-delay:calc(var(--d,0) * 50ms)}
}
@keyframes hw-in{from{opacity:0;transform:translateY(6px)}}

@media (max-width:1000px){
  .hw-row,.hw-row.is-flip,.ha-in{grid-template-columns:minmax(0,1fr);gap:28px}
  .hw-row.is-flip .hw-words{order:0}
  .hw-words{max-width:none}
  .hm-text{grid-template-columns:minmax(0,1fr)}
  .hq-grid{grid-template-columns:minmax(0,1fr)}
  .ht-frame{aspect-ratio:auto;min-height:560px;padding:96px 16px 220px;justify-items:center}
  .ht-frame .hw-piece{justify-items:center}
  .ht-copy{width:auto;right:clamp(16px,2.4vw,32px)}
}
@media (max-width:760px){
  .hw-43,.hq-sq,.ha-sq{aspect-ratio:auto;min-height:380px}
  .js .ha-card{aspect-ratio:auto;height:520px}
  .hm-strip{aspect-ratio:auto;min-height:220px}
  .hw-frame{padding:20px 12px}
  .ht-tabs{justify-self:stretch;margin:0 12px -64px;overflow-x:auto;scrollbar-width:none}
  .ht-tabs li{flex:none}
  .fc-in{white-space:normal;flex-wrap:wrap}
}
/* The visuals keep only what matters in a small frame */
@container (max-width:400px){
  .fl-k{display:none}
  .fl-graph{grid-template-columns:minmax(0,1fr);gap:8px}
  .fl-mid{height:44px}
  .fl-lines{display:none}
  .fl-hub{grid-auto-flow:column;align-items:center}
  .rn-stat .mono-k{min-height:2.6em}
  .fd-th{display:none}
  .fd-rows li{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .fd-team{display:none}
  .fd-rows .seg{grid-column:1;grid-row:2;margin-left:35px}
  .fd-rows .chip{grid-row:1 / 3;grid-column:2}
  .fl-node{gap:7px;padding:0 8px;font-size:11.5px}
  .fl-node .lg,.fl-node .tile{width:22px;height:22px}
  .fl-node .dot-l{display:none}
  .fl-teams{flex-wrap:wrap}
  .fl-msg b{white-space:normal}
  .rn-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rn-agents{display:none}
  .gr-th,.gr-rows li{grid-template-columns:minmax(0,1fr) auto}
  .gr-q,.gr-th span:nth-child(2),.gr-th span:nth-child(4){display:none}
  .gr-l{grid-column:1;font-size:11.5px;color:var(--grey)}
  .gr-rows .chip{grid-row:1 / 3;grid-column:2}
}

/* ---- org.css ---- */
/* The AI-native org. The scene sits in the page width, centred: its sky blends into the page (or, in the dark
   office, it is framed), its foot is a clean edge, and the photograph runs on to a strip of ground the BraindOS
   window rests on. Inside the scene 1em is a 96th of its width, so every layer keeps its place and proportion at any
   size. Then "Secure by design." in an even grid. Dark mode (.og-dark) for the glass office at dusk. */
.og-head{margin-bottom:clamp(56px,6vw,96px)}
.og-lead{display:grid;gap:16px}
.og-sign{display:inline-flex;align-items:center;gap:9px;font:400 17px/1 var(--sans);letter-spacing:-.01em}
.og-sign .sq{width:9px;height:9px;border-radius:2px;background:currentColor}
.og-wrap{display:grid;justify-items:center;--ov:clamp(96px,12.5vw,176px)}
.og-scroll{width:100%;display:grid;justify-items:center}
.og-stage{width:100%;max-width:1140px}

/* The scene */
.og-scene{position:relative;isolation:isolate;width:100%;aspect-ratio:var(--w) / var(--h);container-type:inline-size;overflow:hidden;border-radius:0 0 28px 28px;
  background:linear-gradient(180deg,var(--g1),var(--g2)) bottom / 100% calc(100% - var(--ph) + 4%) no-repeat}
.og-photo{position:absolute;left:0;top:0;z-index:-2;width:100%;height:var(--ph)}
.og-img{width:100%;height:100%;object-fit:cover}
/* The sky dissolves into the page at the top and at its top corners; the foot stays a clean edge. */
.og-fade .og-photo{--fade:linear-gradient(180deg,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.6) 26%,#000 42%,#000 95%,transparent 100%);--corner:radial-gradient(ellipse 78% 130% at 50% 100%,#000 78%,transparent 100%);
  -webkit-mask-image:var(--fade),var(--corner);-webkit-mask-composite:source-in;mask-image:var(--fade),var(--corner);mask-composite:intersect}
.og-scene>.grain{z-index:-1;opacity:.5;background-size:130px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
.og-layers{position:absolute;inset:0;font-size:calc(100cqw / 96);color:var(--ink)}
.og-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.og-lines path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.ln-feed{stroke:rgba(255,255,255,.95);stroke-width:1.3;filter:drop-shadow(0 1px 1.5px rgba(8,30,24,.35))}
.ln-person{stroke:rgba(255,255,255,.85);stroke-width:1.2;stroke-dasharray:2 5}

/* Tools: big app tiles, upper right */
.og-tools{position:absolute;left:var(--x);top:var(--y)}
.og-tools ul{display:flex;gap:1.75em}
.lg-app{width:4.4em;height:4.4em;border-radius:1.2em;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 .9em 1.8em -1em rgba(8,30,24,.45)}
.lg-app img{width:2em;height:2em}
/* BraindOS: a small node, not a band */
.og-node{position:absolute;left:var(--x);top:var(--y);translate:-50% -50%;display:flex;align-items:center;gap:.7em;padding:.45em 1em .45em .45em;border-radius:1.2em;background:linear-gradient(160deg,rgba(30,39,36,.92),rgba(11,17,16,.92));color:#fff;box-shadow:0 0 0 .35em rgba(255,255,255,.28),0 1.2em 2.6em -1em rgba(8,20,16,.7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.og-node-sq{display:grid;place-items:center;width:2.6em;height:2.6em;border-radius:.8em;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.og-node-sq .bos-mark{width:1em;height:1em;border-radius:.3em;background:#fff;box-shadow:0 0 .8em rgba(155,224,191,.9)}
.og-node-t{display:grid;line-height:1.15}
.og-node-t b{font-size:1.05em;font-weight:600;letter-spacing:-.01em}
.og-node-t small{font-size:.76em;opacity:.66}

/* Agents: richer cards, hung at varied heights above their people */
.og-ag{position:absolute;left:var(--x);top:var(--y);translate:-50% 0}
.oa{display:grid;gap:.55em;padding:.8em .85em .75em;border-radius:1.1em;background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.9);box-shadow:0 1.2em 2.4em -1.4em rgba(8,30,24,.55),0 1px 2px rgba(8,30,24,.08);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);font:400 1em/1.35 var(--sans)}
.oa-r{width:17.5em}
.oa-c{width:13.6em}
.oa-h{display:flex;align-items:center;gap:.65em}
.oa-h .tile{width:2.3em;height:2.3em;border-radius:.7em}
.oa-h .tile .i{width:1.15em;height:1.15em}
.oa-n{flex:1;display:grid;min-width:0}
.oa-n b{font-weight:600;font-size:1em;white-space:nowrap}
.oa-n small{font-size:.88em;color:var(--grey)}
.oa-h .dot-l{align-self:start;margin-top:.3em;width:.55em;height:.55em}
.oa-task{display:flex;align-items:center;gap:.6em;padding:.5em .65em;border-radius:.7em;background:rgba(11,17,16,.05);font-size:.88em;font-weight:500;color:var(--ink-2)}
.oa-task .wave i{width:.32em;height:.32em}
.oa-last{font-size:.88em}
.oa-f{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.oa-conn{display:flex;align-items:center;gap:.3em}
.oa-k{margin-right:.3em;font-size:.88em;color:var(--grey)}
.oa-conn .lg-xs{width:1.6em;height:1.6em;border-radius:.45em}
.oa-conn .lg-xs img{width:1em;height:1em}
.oa-own{display:inline-flex;align-items:center;gap:.4em;font-size:.88em;color:var(--grey)}
.oa .av{width:1.75em;height:1.75em;font-size:.68em}
.oa-own .av{font-size:.78em;width:2.2em;height:2.2em}
/* Where each agent works: a ring at its person */
.og-pin{position:absolute;left:var(--x);top:var(--y);width:.95em;height:.95em;margin:-.475em 0 0 -.475em;border-radius:50%;background:var(--live);border:2px solid #fff;box-shadow:0 0 0 .35em rgba(255,255,255,.28),0 .3em .8em rgba(8,30,24,.4)}
/* Notifications */
.og-tst{position:absolute;left:var(--x);top:var(--y)}
.tst{display:flex;align-items:flex-start;gap:.7em;background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(255,255,255,.82));border:1px solid rgba(255,255,255,.9);box-shadow:0 1.2em 2.4em -1.3em rgba(8,30,24,.55);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);font:400 .92em/1.4 var(--sans);color:var(--ink)}
.tst-teams{width:21em;padding:.85em;border-radius:1.1em}
.tst-teams .lg{width:2.2em;height:2.2em;border-radius:.6em}
.tst-teams .lg img{width:1.25em;height:1.25em}
.tst-b{display:grid;gap:.35em}
.tst-m{display:flex;align-items:center;gap:.6em}
.tst-btns{display:flex;gap:.4em;margin-top:.2em}
.tst-btns .btn-s{padding:.45em .85em;font-size:.88em;border-radius:.6em}
.tst-chip{align-items:center;gap:.5em;padding:.5em .9em .5em .6em;border-radius:999px;font-weight:500;white-space:nowrap}
.tst-ok{color:var(--live)}
.tst-wait{background:linear-gradient(160deg,#FFF9EE,rgba(255,248,236,.86));color:#6E4A10}
/* Guide notes: a number, a few words and a small drawn arrow */
.gd{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:.3em;font:500 1.04em/1.3 var(--sans);letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.gd-lab{display:inline-flex;align-items:center;gap:.45em}
.gd-n{display:grid;place-items:center;flex:none;width:1.7em;height:1.7em;border-radius:50%;background:var(--ink);color:#fff;font:500 .78em/1 var(--mono)}
.gd-t{padding:.3em .65em;border-radius:.6em;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gd-ar{flex:none;width:3.4em;height:3.4em;overflow:visible}
.gd-ar path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gd-d{flex-direction:column;align-items:flex-start}
.gd-u{flex-direction:column-reverse;align-items:flex-start}
.gd-d .gd-ar,.gd-u .gd-ar{margin-left:1.4em}

/* The window rests on the foot of the photograph, as glass */
.og-win{position:relative;z-index:3;width:min(100%,1000px);margin-top:calc(-1 * var(--ov))}
.og-above{position:relative;z-index:3;margin-top:calc(-1 * var(--ov));padding-bottom:18px;text-align:center;font:500 clamp(20px,2vw,28px)/1.2 var(--sans);letter-spacing:-.03em;color:#fff;text-shadow:0 2px 16px rgba(8,20,16,.5)}
.og-above .dim{color:rgba(255,255,255,.72)}
.og-win-b{margin-top:0}
.bos-xl{font-size:13px}
.bos-xl .bos-body{gap:14px;padding:20px 20px 44px}
.td-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.78fr);gap:12px;align-items:start}
.td-grid ul{display:grid}
.td-grid li{display:grid;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(11,17,16,.06)}
.td-grid li:first-child{border-top:0}
.td-done li{grid-template-columns:auto minmax(0,1fr) auto}
.td-done b{font-weight:600}
.td-wait li{grid-template-columns:auto minmax(0,1fr) auto}
.td-wait li span:not([class]){display:grid}
.td-wait b{font-weight:600}
.td-wait small{color:var(--grey);font-size:11px}
.td-count{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--wait);color:#fff;font:600 11px/1 var(--sans)}
.td-team li{grid-template-columns:auto minmax(0,1fr) auto}
.td-team b{font-weight:500}

/* Under the main scene: the line, then the org chart, all of it on BraindOS */
.og-all{display:grid;justify-items:center;gap:clamp(24px,3vw,40px);width:100%;margin-top:clamp(96px,10vw,150px)}
.og-all-h{font:500 clamp(28px,3vw,44px)/1.1 var(--sans);letter-spacing:-.04em;text-align:center}

/* Secure by design: one even grid */
.sc{width:100%;margin-top:clamp(120px,13vw,200px)}
.sc-head{display:grid;gap:12px;margin-bottom:clamp(28px,3vw,44px)}
.sc-h{font:500 clamp(28px,2.6vw,40px)/1.08 var(--sans);letter-spacing:-.04em}
.sc-lead{color:var(--grey);font-size:17px;line-height:1.5}
.sc-c .sc-head{justify-items:center;text-align:center}
.sc-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.sc-tile{display:grid;grid-template-rows:auto auto 1fr;gap:8px;padding:10px 10px 24px;border-radius:22px;background:#F1F4F2;border:1px solid #E8ECEA}
.sc-tile>:not(.sc-ui){padding-inline:12px}
.sc-tile h4{margin:12px 0 0;font:600 17px/1.3 var(--sans);letter-spacing:-.02em}
.sc-tile p{color:var(--grey);font-size:14.5px;line-height:1.5}
.sc-ui{display:grid;place-items:center;height:112px;padding:14px;border-radius:15px;background:linear-gradient(165deg,#FBFCFB,#E9EFEC)}
.sc-seg{display:inline-flex;padding:3px;border-radius:10px;background:rgba(11,17,16,.06);font-size:12px}
.sc-seg span{padding:6px 10px;border-radius:7px;color:var(--grey)}
.sc-seg .on{background:#fff;color:var(--ink);font-weight:500;box-shadow:0 1px 2px rgba(8,30,24,.12)}
.sc-line{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(8,30,24,.08),0 10px 20px -16px rgba(8,30,24,.4);font-size:12.5px;font-weight:500}
.sw{position:relative;display:inline-block;width:30px;height:18px;margin-left:4px;border-radius:999px;background:#D5DBD8}
.sw i{position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.sc-logs{display:grid;gap:6px;width:100%;max-width:220px;padding:10px 12px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(8,30,24,.08);font-size:11.5px}
.sc-logs>span{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}
.sc-logs .i{color:var(--live)}
.sc-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2fr);gap:clamp(28px,4vw,64px);align-items:start}
.sc-split .sc-head{margin:0;padding-top:8px}
.sc-split .sc-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Secure, the bento (section lab s13): a wide tile with its control over a photograph, a tall photograph carrying the
   data notice, two UI tiles and a sign-off band, on one even grid */
.sc-bento .sc-head{justify-items:center;text-align:center}
.sb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sb-t{position:relative;isolation:isolate;display:grid;align-content:space-between;gap:18px;min-height:250px;padding:22px;border-radius:24px;background:#F1F4F2;border:1px solid #E8ECEA;overflow:hidden}
.sb-wide{grid-column:span 2}
.sb-tall{grid-column:3;grid-row:span 2;color:#fff}
.sb-t:not(.sb-tall){padding:10px 10px 22px}
.sb-t:not(.sb-tall) .sb-txt{padding-inline:12px}
.sb-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.sb-tall::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,16,.05) 30%,rgba(8,20,16,.62))}
.sb-ui{display:flex;justify-content:center;align-items:center;min-height:116px;border-radius:16px;background:linear-gradient(165deg,#FBFCFB,#E9EFEC)}
.sb-note{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--ink);font-size:13px;font-weight:500}
.sb-txt{display:grid;gap:6px}
.sb-txt h4{margin:0;font:600 18px/1.25 var(--sans);letter-spacing:-.02em}
.sb-txt p{color:var(--grey);font-size:15px;line-height:1.5}
.sb-tall .sb-txt p{color:rgba(255,255,255,.82)}

/* Secure, over a photograph: the heading on the picture, four glass tiles along its foot */
.sp-frame{position:relative;isolation:isolate;display:grid;gap:clamp(96px,12vw,200px);padding:clamp(28px,4vw,52px);border-radius:28px;overflow:hidden}
.sp-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.sp-frame::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,16,.55),rgba(8,20,16,.12) 45%,rgba(8,20,16,.38))}
.sp-head{display:grid;gap:10px;max-width:520px;color:#fff}
.sp-head .sc-h{color:#fff}
.sp-head .sc-lead{color:rgba(255,255,255,.82)}
.sp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sp-tile{display:grid;align-content:start;gap:8px;padding:10px 10px 20px;border-radius:20px;background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur)}
.sp-tile>:not(.sc-ui){padding-inline:12px}
.sp-tile h4{margin:10px 0 0;font:600 16.5px/1.3 var(--sans);letter-spacing:-.02em}
.sp-tile p{color:var(--ink-2);font-size:14px;line-height:1.45}

/* Told on scroll (o3): the scene is pinned while five captions step through what is happening */
.oc-steps{display:grid;gap:4px;counter-reset:s}
.oc-step{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:14px 16px;border-radius:16px;transition:background .5s,opacity .5s}
.oc-step .mono-k{grid-row:1 / 3;padding-top:3px}
.oc-step b{font:600 17px/1.3 var(--sans);letter-spacing:-.02em}
.oc-step span:last-child{color:var(--grey);font-size:14.5px;line-height:1.45}
.og-sticky{display:grid;gap:24px;width:100%;min-width:0}
.og-sticky>.og-scroll{min-width:0}
.og-scrolly{width:100%}
@media (min-width:1001px) and (prefers-reduced-motion:no-preference){
  .js .og-scrolly{height:360vh}
  .js .og-sticky{position:sticky;top:calc(var(--nav-h) + 24px);grid-template-columns:300px minmax(0,1fr);align-items:center;height:calc(100vh - var(--nav-h) - 48px)}
  .js .og-sticky .og-stage{max-width:min(100%,calc((100vh - var(--nav-h) - 48px) * 1200 / 860));justify-self:end}
  .js .oc-step{opacity:.38}
  .js .oc-step.on{opacity:1;background:#fff;box-shadow:0 1px 2px rgba(8,30,24,.06),0 18px 36px -26px rgba(8,30,24,.35)}
  .js .og-scrolly .og-scene :is(.og-tools li,.ln-feed,.og-node,.og-ag,.og-pin,.ln-person,.og-tst){transition:opacity .7s var(--ease-out),transform .8s var(--ease-out)}
  .js .og-scrolly .og-scene:not(.s1) :is(.og-tools li,.ln-feed),
  .js .og-scrolly .og-scene:not(.s2) .og-node,
  .js .og-scrolly .og-scene:not(.s3) .og-ag,
  .js .og-scrolly .og-scene:not(.s4) :is(.og-pin,.ln-person,.og-tst){opacity:0}
  .js .og-scrolly .og-scene:not(.s3) .og-ag{transform:translateY(10px)}
}

/* Dark mode: the glass office at dusk */
.og-dark{background:radial-gradient(ellipse 70% 50% at 50% 0%,#16231E,#0A100E 70%);color:var(--bone)}
.og-dark::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grain);background-size:150px;opacity:.18;mix-blend-mode:overlay;pointer-events:none}
.og-dark :is(.v-h2,.og-sign,.sc-h){color:var(--bone)}
.og-dark .dim{color:rgba(241,239,230,.5)}
.og-dark :is(.v-lead,.sc-lead,.sc-tile p){color:rgba(241,239,230,.68)}
.og-dark .mono-k{color:rgba(241,239,230,.55)}
.og-dark .v-head{border-color:rgba(241,239,230,.12)}
.og-dark .og-layers{color:var(--bone)}
.og-dark :is(.oa,.tst,.lg-app){background:linear-gradient(160deg,rgba(32,42,38,.78),rgba(14,20,18,.7));border-color:rgba(241,239,230,.14);color:var(--bone);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1.2em 2.6em -1.2em rgba(0,0,0,.7)}
.og-dark :is(.oa-n small,.oa-k,.oa-own,.oa-last,.tst .mono-s){color:rgba(241,239,230,.6)}
.og-dark .oa-task{background:rgba(241,239,230,.07);color:rgba(241,239,230,.86)}
.og-dark .tst-wait{color:#F2CF8E}
.og-dark .tst .btn-s:not(.btn-s-ink){background:rgba(241,239,230,.08);border-color:rgba(241,239,230,.18);color:var(--bone)}
.og-dark .tst .btn-s-ink{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.og-dark .lg-app img,.og-dark .oa-conn .lg-xs{filter:none}
.og-dark .oa-conn .lg-xs{background:rgba(255,255,255,.9)}
.og-dark .og-node{background:linear-gradient(160deg,rgba(241,239,230,.96),rgba(220,226,222,.9));color:var(--ink);box-shadow:0 0 0 .4em rgba(155,224,191,.18),0 0 3em rgba(155,224,191,.35)}
.og-dark .og-node-sq{background:var(--ink)}
.og-dark .gd{color:var(--bone)}
.og-dark .gd-n{background:var(--bone);color:var(--ink)}
.og-dark .gd-t{background:rgba(11,17,16,.5)}
.og-dark .gd-ar path{stroke:var(--bone)}
.og-dark .og-scene{box-shadow:0 0 0 1px rgba(241,239,230,.08),0 40px 120px -40px rgba(0,0,0,.8)}
.og-dark .bos{--g-bg:linear-gradient(155deg,rgba(30,40,36,.86),rgba(14,20,18,.82));--g-line:rgba(241,239,230,.14);color:var(--bone);box-shadow:0 40px 100px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08)}
.og-dark :is(.bos-bar,.bos-rail){background:rgba(241,239,230,.04);border-color:rgba(241,239,230,.08)}
.og-dark .bos-ri.on{background:var(--bone);color:var(--ink)}
.og-dark .bos-mark{background:var(--bone)}
.og-dark :is(.bos-crumb,.bos-ri,.td-wait small,.mono-s){color:rgba(241,239,230,.55)}
.og-dark .os-panel{background:rgba(241,239,230,.05);border-color:rgba(241,239,230,.1)}
.og-dark :is(.os-ph,.td-grid li){border-color:rgba(241,239,230,.08)}
.og-dark .bos .btn-s:not(.btn-s-ink){background:rgba(241,239,230,.06);border-color:rgba(241,239,230,.16);color:var(--bone)}
.og-dark .bos .btn-s-ink{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.og-dark .bos .chip{background:rgba(241,239,230,.08);color:rgba(241,239,230,.85)}
.og-dark .bos-tag{background:rgba(241,239,230,.1);color:rgba(241,239,230,.6)}
.og-dark .sc-tile{background:rgba(241,239,230,.05);border-color:rgba(241,239,230,.1)}
.og-dark .sc-tile h4{color:var(--bone)}
.og-dark :is(.sc-ui,.sb-ui){background:linear-gradient(165deg,rgba(241,239,230,.1),rgba(241,239,230,.04))}
.og-dark .sb-t:not(.sb-tall){background:rgba(241,239,230,.05);border-color:rgba(241,239,230,.1)}
.og-dark .sb-t h4{color:var(--bone)}
.og-dark .sb-t:not(.sb-tall) .sb-txt p{color:rgba(241,239,230,.68)}
.og-dark :is(.sc-line,.sc-logs){background:rgba(241,239,230,.1);color:var(--bone);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.og-dark .sc-seg{background:rgba(241,239,230,.08)}
.og-dark .sc-seg span{color:rgba(241,239,230,.6)}
.og-dark .sc-seg .on{background:var(--bone);color:var(--ink)}
.og-dark .sw{background:rgba(241,239,230,.25)}

@media (max-width:1100px){.sc-tiles,.sp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-split,.sc-bento .sc-head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.sb-grid{grid-template-columns:minmax(0,1fr)}.sb-wide,.sb-tall{grid-column:auto;grid-row:auto}.sb-tall{min-height:360px}}
@media (max-width:1000px){.oc-steps{margin-bottom:8px}}
@media (max-width:900px) and (min-width:761px){
  .og-scroll{overflow-x:auto;justify-items:start;scrollbar-width:thin}
  .og-scroll:focus-visible{outline-offset:-2px}
  .og-stage{min-width:900px}
  .og-win{margin-top:24px}
  .og-above{margin-top:24px;color:var(--ink);text-shadow:none}
  .og-above .dim{color:var(--dim)}
  .og-dark .og-above{color:var(--bone)}
}
@media (max-width:900px){.td-grid{grid-template-columns:minmax(0,1fr)}}
/* Phones: one composed picture, not a pan. A tighter crop; the tools centred at the top with BraindOS beneath; the
   two main agents side by side over the desks; the window still resting on the foot of the photograph. */
@media (max-width:760px){
  .og-scene{aspect-ratio:4 / 5.2;--ph:80%}
  .og-layers{font-size:calc(100cqw / 34)}
  .og-tools{left:50%;top:5%;translate:-50% 0}
  .og-tools ul{gap:.8em}
  .lg-app{width:3.6em;height:3.6em;border-radius:1em}
  .lg-app img{width:1.7em;height:1.7em}
  .og-node{left:50%;top:22%}
  .og-lines,.og-pins,.og-tsts,.gd,.og-ag:has(.oa-c),.oa-last,.oa-f{display:none}
  .og-ags{position:absolute;left:4%;right:4%;top:30%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7em}
  .og-ag{position:static;translate:none}
  .oa-r{width:auto}
  .oa-n b{white-space:normal}
  .og-win{margin-top:-56px}
  .og-above{margin-top:-56px}
  .og-scrolly .oc-steps{display:none}
}
@media (max-width:640px){.sc-tiles,.sc-split .sc-tiles,.sp-tiles{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:no-preference){
  .js [data-arrive] .og-lines{transition:clip-path 1.8s var(--ease-io) .5s}
  .js [data-arrive]:not(.in) .og-lines{clip-path:inset(0 0 100% 0)}
}

/* ---- home-mobile.css ---- */
/* The homepage on phones: the long stacks (case studies, working with us, notes) become swipeable rows, one card in
   view and the next peeking in (CSS scroll snap, no script), so the page stays short and easy to read. */
@media (max-width:760px){
  :is(.ow-cards,.ww-cards,.hn-row){display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:82%;gap:12px!important;align-items:start;
    margin-inline:calc(-1 * var(--gutter));padding:2px var(--gutter) 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  :is(.ow-cards,.ww-cards,.hn-row)::-webkit-scrollbar{display:none}
  :is(.ow-card,.ww-card,.hn-card){scroll-snap-align:start}
  .ww-cards{grid-auto-columns:78%}
  .ww-card{height:100%}
}

/* ---- home-final.css ---- */
/* The homepage, final pass (15 Oct 2026): every case study on the brand's own landscapes, the notes on bright grain
   shaders, the industry tabs, and the working-with-us cards steady and evenly padded. */

/* ---------- Our work: seven case studies and a link to all of them, four to a row ---------- */
.ow-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4vw,20px) clamp(12px,1.2vw,18px)}
.ow-a{display:grid;align-content:start;gap:10px;height:100%;color:inherit;text-decoration:none}
.ow-img{aspect-ratio:4 / 3.4;margin:0 0 4px;border-radius:18px}
.ow-fig{left:16px;bottom:14px}
.ow-fig b{font-size:clamp(30px,2.6vw,40px)}
.ow-fig span{font-size:13px;max-width:22ch;line-height:1.3}
.ow-ind{left:12px;top:12px;font-size:12px}
.ow-text{font-size:15px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.ow-a:hover .ow-img .img{transform:scale(1.035)}
.ow-link{margin-top:2px}
.ow-a:hover .ow-link{border-color:var(--ink)}
.ow-more .ow-a{display:grid;place-content:center;justify-items:center;gap:16px;min-height:100%;padding:28px;border-radius:18px;background:#F1F4F2;border:1px solid #E6EBE8}
.ow-more-t{font:500 20px/1.2 var(--sans);letter-spacing:-.02em}
.ow-more-i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;transition:transform .25s var(--ease-out)}
.ow-more .ow-a:hover .ow-more-i{transform:translateX(3px)}
@media (max-width:1100px){.ow-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Notes: bright grain shaders for covers ---------- */
.hn-sh{position:relative;isolation:isolate;overflow:hidden;
  background:radial-gradient(60% 80% at 18% 22%,var(--c1),transparent 70%),radial-gradient(55% 75% at 82% 18%,var(--c2),transparent 72%),
  radial-gradient(70% 80% at 70% 88%,var(--c3),transparent 70%),radial-gradient(60% 70% at 20% 90%,var(--c4),transparent 72%),var(--c3)}
.hn-sh>.grain{position:absolute;inset:0;z-index:1;opacity:.6}
.hn-card a:hover .hn-sh{filter:saturate(1.12)}

/* ---------- Industries: the tabs, cleaner ---------- */
.ix-tabs{padding:4px;gap:2px;border-radius:999px}
.ix-tabs button{padding:9px 16px;border-radius:999px;font-size:14px}
@media (max-width:760px){
  .ix-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;justify-self:stretch;margin:12px 12px 0;padding:4px;border-radius:16px;overflow:visible;-webkit-mask-image:none;mask-image:none;background:rgba(255,255,255,.9);-webkit-backdrop-filter:none;backdrop-filter:none}
  .ix-tabs li{display:grid}
  .ix-tabs button{justify-content:center;padding:10px 8px;border-radius:12px;font-size:13.5px}
}

/* ---------- Working with us: four steady cards of one height and one padding ---------- */
.ww-cards{align-items:stretch}
.ww-card{height:100%;padding:10px 10px 24px;grid-template-rows:auto auto auto 1fr}
.ww-ui{height:244px}

/* ---------- The line under How we work: BraindOS in its pill ---------- */
.hw-bridge .os-pill{font-size:.78em}

@media (max-width:760px){
  .ow-cards{grid-auto-columns:78%}
  .ow-more .ow-a{min-height:260px}
  .ww-ui{height:224px}
}

/* ---------- The AI-native org, desktop: the builders' three lines with more room, each line arriving on its own ---------- */
@media (min-width:761px){
  .pg-home .po-build{margin-top:clamp(96px,10vw,160px);margin-bottom:clamp(24px,3vw,48px);gap:28px}
  .pg-home .po-three{gap:clamp(6px,.8vw,12px);font-size:clamp(32px,3.8vw,56px)}
}

/* ---------- The audit (15 Oct): one type scale for card words, one radius for cards, one rhythm for sections ---------- */
.ix-box{border-radius:24px}
.ww-card{border-radius:18px}
.ww-ui{border-radius:13px}
:is(.ow-text,.ww-line){font-size:15px;line-height:1.5}
.pg .po-sc p{font-size:15px;line-height:1.5}
:is(.hn-t,.ww-t){font-size:18px;line-height:1.3;letter-spacing:-.015em}
.pg .po-sc h4{font-size:18px;line-height:1.3;letter-spacing:-.015em}
.pg-home .pz-body{font-size:16px;line-height:1.6}
.v-intro{padding-block:clamp(96px,11vw,158px)}
@media (max-width:760px){
  :is(.ow-text,.ww-line){font-size:14.5px}
  .pg.pg-home .po-sc p{font-size:13.5px}
  :is(.hn-t,.ww-t){font-size:17px}
  .pg.pg-home .po-sc h4{font-size:15px}
  .pg.pg-home .hz-row .pz-body{font-size:15px;line-height:1.55}
}
/* With the photograph at its standard size, the faint "Running on BraindOS" is sized to sit inside it */
@media (min-width:761px){.pg.pg-home[data-otx="running"] .po-big{font-size:clamp(40px,7.2vw,100px)}}

/* The BraindOS screens on tablet and desktop (15 Oct 2026): the org chart wide like a real screen, four teams across
   with the tree, and all three screens drawn at 80% so they sit smaller and share one type size. At 720px the org chart
   fell back to its narrow two-a-row layout. */
@media (min-width:761px){
  .pg.pg-home .po-screens{max-width:920px!important}
  .pg.pg-home .po-scr[data-scr="org"]{width:min(100%,920px)!important}
  .pg.pg-home .po-scr>.bos{zoom:.8}
}

/* The client strip at every width (15 Oct 2026): sixteen marks, so one line that drifts (a hidden copy closes the loop)
   and stops under the pointer, no Pause button (Govind, 15 Oct 2026), as it already did on phones; with reduced motion it wraps, centred. */
@media (min-width:761px){
  .v-logos{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:20px clamp(40px,4vw,64px);padding-right:clamp(40px,4vw,64px);--k:.74}
  .v-track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .v-logos-copy{display:flex}
}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .v-track>.v-logos{animation:v-drift 70s linear infinite}
  .v-track:hover>.v-logos{animation-play-state:paused}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){
  .v-track{display:block;-webkit-mask-image:none;mask-image:none}
  .v-logos{flex-wrap:wrap;justify-content:center;width:auto;gap:20px 40px;padding:0}
  .v-logos-copy{display:none}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){.v-track>.v-logos{animation-duration:64s}}

/* ---- org-smoke.css ---- */
/* The AI-native org, the simplest scenes (home/org_smoke.py): simple agent cards with a glowing AI sparkle and the
   owner's portrait; small tilted bubbles of what each agent did rise above it and fade like smoke towards BraindOS and
   the tools at the top. --p (site.js) brings more bubbles in as the page moves. Loaded only by pages that use them. */
.sm-framed{border-radius:28px}
.sm-framed::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,16,.28),rgba(8,20,16,0) 40%,rgba(8,20,16,.18));pointer-events:none}
.sm-layer{position:absolute;inset:0;font-size:calc(100cqw / 96)}
.sm-top{position:absolute;left:50%;top:4%;translate:-50% 0;display:grid;justify-items:center;gap:.9em}
/* The main scene: the tool stack faded into the sky, so the agents and what they do lead */
.sm-soft .sm-tools{opacity:.78;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.5),#000 85%);mask-image:linear-gradient(180deg,rgba(0,0,0,.5),#000 85%)}
.sm-tools{display:flex;gap:.9em}
.sm .lg-app{width:3.5em;height:3.5em;border-radius:1em}
.sm .lg-app img{width:1.65em;height:1.65em}
.sm-os{display:inline-flex;align-items:center;gap:.6em;padding:.4em 1em .4em .4em;border-radius:1em;background:linear-gradient(160deg,rgba(30,39,36,.94),rgba(11,17,16,.94));color:#fff;box-shadow:0 0 0 .3em rgba(255,255,255,.3),0 1.2em 2.6em -1em rgba(8,20,16,.7)}
.sm-os-sq{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.7em;background:rgba(255,255,255,.1)}
.sm-os-sq .bos-mark{width:.9em;height:.9em;border-radius:.28em;background:#fff;box-shadow:0 0 .8em rgba(155,224,191,.9)}
.sm-os b{font-size:1.05em;font-weight:600}
.sm-at{position:absolute;left:var(--x);top:var(--y);translate:-50% 0}
.sm-agent{display:flex;align-items:center;gap:.65em;padding:.45em .9em .45em .45em;border-radius:1.1em;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.84));border:1px solid #fff;box-shadow:0 1em 2em -1.2em rgba(8,30,24,.55);white-space:nowrap}
.sm-ai{position:relative;display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:.8em;background:linear-gradient(160deg,#25302C,#0B1110);color:#fff}
.sm-ai>.i{width:1.2em;height:1.2em}
.sm-spark{position:absolute;top:-.6em;right:-.6em;display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:#fff;color:var(--live);box-shadow:0 0 0 .2em rgba(155,224,191,.35),0 0 1.1em rgba(155,224,191,.95)}
.sm-spark .i{width:.85em;height:.85em}
.sm-name{display:grid;gap:.15em;line-height:1.2}
.sm-name b{font-size:.98em;font-weight:600}
.sm-name small{display:inline-flex;align-items:center;gap:.4em;font-size:.84em;color:var(--grey)}
.sm-face{flex:none;width:1.6em;height:1.6em;border-radius:50%;background-repeat:no-repeat;box-shadow:0 0 0 2px #fff,0 .3em .7em -.3em rgba(8,30,24,.5)}
/* The bubbles: small, tilted, fainter the higher they climb */
.sm-b{position:absolute;left:var(--x);top:var(--y);translate:-50% 0;rotate:var(--r);display:inline-flex;align-items:center;gap:.4em;padding:.35em .75em .35em .45em;border-radius:1em 1em 1em .25em;
  background:rgba(255,255,255,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 .6em 1.4em -1em rgba(8,30,24,.5);font:500 .8em/1.25 var(--sans);color:var(--ink-2);white-space:nowrap;opacity:var(--o)}
.sm-b .lg-xs{width:1.5em;height:1.5em;border-radius:.4em}
.sm-b .lg-xs img{width:.9em;height:.9em}
.sm-b>.i{color:var(--live)}
@media (prefers-reduced-motion:no-preference){
  .js .sm-b{--a:clamp(0,calc((var(--p,1) - var(--t)) * 5),1);opacity:calc(var(--o) * var(--a));transform:translateY(calc((1 - var(--a)) * 1.8em));filter:blur(calc((1 - var(--a)) * 3px));transition:opacity .35s linear,transform .5s var(--ease-out),filter .5s}
  .sm-spark{animation:sm-glow 2.8s ease-in-out infinite}
}
@keyframes sm-glow{50%{box-shadow:0 0 0 .32em rgba(155,224,191,.15),0 0 1.6em rgba(155,224,191,1)}}
.is-paused .sm-spark{animation-play-state:paused}
/* Phones: one picture, the tools and BraindOS on top, four agents in a grid; the bubbles stay on the larger screens */
@media (max-width:760px){
  .sm{aspect-ratio:4 / 5}
  .sm-layer{font-size:calc(100cqw / 36)}
  .sm-bubbles,.sm-at:nth-child(5){display:none}
  .sm-agents{position:absolute;left:4%;right:4%;bottom:5%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6em}
  .sm-at{position:static;translate:none}
  .sm-agent{white-space:normal}
  .og-o1 .og-win,.og-o1 .og-above{margin-top:20px}
}

/* ---- play.css ---- */
/* The v15 playground (lab/play/, tools/site/play/), How we work and the shared pieces. The dock's choices sit on
   .pg as data attributes: hl layout, hv visual, hd step one, hb backdrop, btn buttons, cor corners, grain. First the
   choices, then the frame and its visuals (S02 labels, S07 flow, the Blueprint document), the words and buttons, and
   the six layouts. The org is in play-org.css, the dock in play-dock.css. */
.pg{--pr:24px;--pr-s:16px}
.pg[data-cor="square"]{--pr:0px;--pr-s:0px}

/* Each frame holds one visual (play.js swaps in the chosen one), in a box that can carry a window bar */
.pv-box{display:grid;justify-items:center;width:100%;min-width:0}
.pv{display:grid;justify-items:center;width:100%;min-width:0}

/* The frame: a photograph, a bright grain shader or plain paper behind one visual */
.pf{position:relative;isolation:isolate;display:grid;place-items:center;margin:0;padding:clamp(18px,3vw,44px);border-radius:var(--pr);overflow:clip;background:#C9D6D1;container-type:inline-size}
.pf-img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transition:filter .4s}
.pf-shader{position:absolute;inset:0;z-index:-3;display:none;background:var(--sh)}
.pf-shader canvas{display:block;width:100%;height:100%}
.pf>.grain,.hz-oback>.grain{z-index:-1;opacity:.7;background-size:130px}
.pf-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;width:100%;min-width:0}
.pg[data-hb="shader"] .pz-how .pf-img{display:none}
.pg[data-hb="shader"] .pz-how .pf-shader{display:block}
.pg[data-hb="shader"] .pz-how :is(.pf>.grain,.hz-oback>.grain){opacity:1;background-size:90px}
.pg[data-hb="paper"] .pz-how :is(.pf,.hz-over){background:linear-gradient(160deg,#F5F6F4,#E8EDEA)}
.pg[data-hb="paper"] .pz-how .pf-img{display:none}
.pg[data-hb="paper"] .pz-how :is(.pf>.grain,.hz-oback>.grain){opacity:.3}
.pg[data-grain="high"] .grain,.pg[data-grain="high"][data-hb] .pz-how :is(.pf>.grain,.hz-oback>.grain){opacity:1;background-size:84px}
.pg[data-grain="high"] :is(.pf-img,.po-img,.po-sec-img,.po-cimg){filter:contrast(1.2) saturate(1.18)}

/* S02 action labels: glass, saying what happens and what it led to */
.pl-labels{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px;max-width:100%}
.pl-card,.pl-toast{background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);color:var(--ink)}
.pl-card{display:grid;gap:9px;max-width:100%;padding:12px 14px;border-radius:16px;font:400 13.5px/1.35 var(--sans)}
.pl-ck{display:flex;align-items:center;gap:8px;color:var(--grey)}
.pl-ck.on{color:var(--ink-2)}
.pl-ck .i{color:var(--dim)}
.pl-ck.on .i{color:var(--live)}
.pl-agent{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;width:min(100%,320px)}
.pl-av{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(160deg,#2C3833,#0B1110);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.pl-at{display:grid;min-width:0}
.pl-at b{font-weight:600}
.pl-at small{color:var(--grey);font-size:12px}
.pl-task{grid-column:1 / -1;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.55)}
.pl-wave{display:inline-flex;gap:3px}
.pl-wave i{width:5px;height:5px;border-radius:50%;background:var(--live);opacity:.55}
.pl-toast{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font:500 13.5px/1.3 var(--sans)}
.pl-toast .i{color:var(--live)}

/* S07: one request, routed through BraindOS */
.pl-flow{position:relative;display:grid;justify-items:center;gap:12px;width:min(100%,360px)}
.pl-flow::before{content:"";position:absolute;left:50%;top:22px;bottom:22px;border-left:1px dashed rgba(255,255,255,.9)}
.pl-node{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 1px 2px rgba(8,30,24,.06),0 16px 30px -18px rgba(8,30,24,.5);font-size:13.5px}
.pl-node b{min-width:0;font-weight:500}
.pl-ni{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--soft);color:var(--ink)}
.pl-hub{position:relative;display:flex;align-items:center;gap:8px}
.pl-hsq{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(160deg,#25302C,#0B1110);box-shadow:0 0 0 4px rgba(255,255,255,.4),0 12px 24px -12px rgba(8,20,16,.7)}
.pl-hsq .bos-mark{width:13px;height:13px;border-radius:3px;background:#fff}
.pl-hl{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(11,17,16,.86);color:#fff;font-size:12px;white-space:nowrap}

/* S06: the AI Blueprint as a document, one page with another behind it */
.pd{position:relative;width:min(100%,380px);padding-bottom:30px}
.pd-back{position:absolute;inset:16px -10px 34px 14px;border-radius:5px;background:#EFEDE6;box-shadow:0 20px 40px -24px rgba(8,30,24,.5);transform:rotate(3.2deg)}
.pd-page{position:relative;display:grid;gap:8px;padding:18px 20px 14px;border-radius:5px;background:#FDFCF8;color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.04),0 34px 60px -30px rgba(8,30,24,.6);transform:rotate(-1.2deg);font-size:12.5px}
.pd-top,.pd-foot{display:flex;justify-content:space-between;gap:10px;font:500 9.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--grey)}
.pd-top{padding-bottom:10px;border-bottom:1px solid #E6E3DA}
.pd-brand{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.pd-brand .bos-mark{width:8px;height:8px;border-radius:2px}
.pd-k{font:500 10px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#1F6B50}
.pd-h{font:500 23px/1.1 var(--news);letter-spacing:-.01em}
.pd-p{color:var(--grey);font-size:12px}
.pd-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 0;border-top:1px solid #EEEBE3}
.pd-n{font:500 11px var(--mono);color:var(--grey)}
.pd-o{display:grid;min-width:0}
.pd-o b{font-weight:600}
.pd-o small{color:var(--grey);font-size:11px}
.pd-r{font:500 10px/1.3 var(--mono);letter-spacing:.04em;color:var(--ink-2)}
.pd-first{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:8px;background:#EEF5F0;font-size:12px}
.pd-first .i{flex:none;color:var(--live)}
.pd-foot{padding-top:6px;color:var(--grey)}
.pd .bos-tag{left:8px;bottom:0}

/* The words: kicker, two-tone lines, body, what you get and the button */
.pz-words{display:grid;justify-items:start;gap:14px}
.pk{display:inline-flex;align-items:center;gap:10px;font:500 14.5px/1.2 var(--sans);color:var(--ink-2)}
.pk-n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid var(--line);font:500 11px/1 var(--mono);color:var(--ink-2)}
.pg[data-cor="square"] .pk-n{border-radius:0}
.pz-lines{display:block;font:500 clamp(28px,2.6vw,40px)/1.07 var(--sans);letter-spacing:-.042em;text-wrap:balance}
.pz-lines .dim{color:var(--grey)}
.pz-body{max-width:40ch;color:var(--grey);font-size:clamp(15.5px,1.1vw,17px);line-height:1.6;text-wrap:pretty}
.pz-get{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--ink-2)}
.pz-get .mono-k{padding:4px 8px;border-radius:999px;background:var(--sage);color:var(--moss);font-size:10px;white-space:nowrap}

/* The buttons: glass, opaque or ink */
.pb{display:inline-flex;align-items:center;gap:12px;white-space:nowrap;justify-self:start;padding:8px 8px 8px 18px;border-radius:999px;font:500 15px/1.2 var(--sans);text-decoration:none;color:var(--ink);transition:transform .25s var(--ease-out),box-shadow .25s,background .25s}
:is(.hz-glass,.hz-cw,.hz-jcol) .pb{white-space:normal;font-size:14.5px}
.pb-i{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff}
.pb:hover{transform:translateY(-1px)}
.pg[data-btn="glass"] .pb{background:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.5));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(8,30,24,.08),0 14px 28px -16px rgba(8,30,24,.45);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
.pg[data-btn="opaque"] .pb{background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(8,30,24,.06)}
.pg[data-btn="ink"] .pb{background:var(--ink);border:1px solid var(--ink);color:#fff;box-shadow:0 14px 28px -16px rgba(8,20,16,.7)}
.pg[data-btn="ink"] .pb-i{background:rgba(255,255,255,.14)}
.pg[data-cor="square"] :is(.pb,.pb-i,.pz-get,.pz-get .mono-k,.pl-card,.pl-toast,.pl-node,.pl-hsq,.pl-hl,.pl-av,.pl-task,.pd-page,.pd-back){border-radius:0}

/* 1 Alternating cards (ref 02) */
.hz-alt{display:grid;gap:clamp(64px,8vw,120px)}
.hz-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(32px,6vw,96px)}
.hz-row.is-flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hz-row.is-flip .pz-words{order:2}
.pf-alt{aspect-ratio:4 / 3.3}

/* 2 Accordion beside one visual (ref 03) */
.hz-acc{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start;gap:clamp(32px,5vw,80px)}
.hz-list{border-top:1px solid var(--line)}
.hz-item{border-bottom:1px solid var(--line)}
.hz-item summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:22px 0;cursor:pointer;list-style:none}
.hz-item summary::-webkit-details-marker{display:none}
.hz-item summary .pk{grid-column:1}
.hz-item summary .pz-lines{grid-column:1;font-size:clamp(22px,1.9vw,28px);color:var(--grey);transition:color .3s}
.hz-item[open] summary .pz-lines,.hz-item summary:hover .pz-lines{color:var(--ink)}
.hz-plus{grid-column:2;grid-row:1 / span 2;align-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);transition:transform .35s var(--ease-out),background .3s}
.hz-item[open] .hz-plus{transform:rotate(45deg);background:var(--ink);border-color:var(--ink);color:#fff}
.hz-ib{display:grid;justify-items:start;gap:16px;padding:0 0 24px}
.hz-stage{position:sticky;top:84px;display:grid}
.hz-pane{grid-area:1 / 1;display:grid;transition:opacity .5s var(--ease-out),visibility .5s}
.js .hz-pane:not(.on){opacity:0;visibility:hidden}
.pf-acc{aspect-ratio:1 / 1.02}
html:not(.js) .hz-stage{position:static;gap:16px}
html:not(.js) .hz-pane{grid-area:auto}

/* 3 Tabs over one large frame */
.hz-tabs{display:grid;gap:22px}
.hz-tl{justify-self:center;display:flex;gap:4px;max-width:100%;padding:5px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(8,30,24,.45);overflow-x:auto;scrollbar-width:none}
.hz-tl button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:0;border-radius:12px;background:none;color:var(--grey);font:500 14.5px/1.2 var(--sans);white-space:nowrap;cursor:pointer;transition:background .25s,color .25s}
.hz-tl button .pk-n{width:28px;height:28px}
.hz-tl [aria-selected="true"]{background:var(--ink);color:#fff}
.hz-tl [aria-selected="true"] .pk-n{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.pg[data-cor="square"] :is(.hz-tl,.hz-tl button){border-radius:0}
.hz-panels{display:grid}
.js .hz-p:not(.on){display:none}
.hz-p{display:grid;gap:24px}
html:not(.js) .hz-panels{gap:48px}
.pf-tabs{aspect-ratio:16 / 7.6}
.hz-pcopy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:start;gap:14px 40px}
.hz-pcopy .pz-lines{font-size:clamp(24px,2.2vw,32px)}
.hz-pend{display:grid;justify-items:end;gap:12px}

/* 4 Journey: one wide frame, the four steps as glass nodes on one line */
.hz-journey{display:grid;gap:clamp(28px,3vw,44px)}
.pf-journey{aspect-ratio:16 / 5;min-height:240px}
.pg[data-hb="paper"] .hz-nodes::before{border-top:1px dashed #8E9894}
.hz-nodes{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%}
.hz-nodes::before{content:"";position:absolute;left:12%;right:12%;top:50%;border-top:1px dashed rgba(255,255,255,.9)}
.hz-node{position:relative;display:grid;justify-items:center;gap:6px;padding:16px 12px 14px;border-radius:var(--pr-s);background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);text-align:center}
.hz-node b{font-weight:600;font-size:15px}
.hz-node small{color:var(--ink-2);font-size:12.5px}
.hz-jcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.hz-jcol{display:grid;align-content:start;justify-items:start;gap:12px}
.hz-jcol .pz-lines,.hz-cw .pz-lines,.hz-glass .pz-lines{font-size:clamp(22px,1.7vw,26px)}
.hz-jcol .pz-body,.hz-cw .pz-body,.hz-glass .pz-body{font-size:15px}

/* 5 Cards: four framed visuals, the words beneath (brand-lab S08) */
.hz-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto auto;gap:16px clamp(14px,1.8vw,22px)}
/* Each card spans two shared rows, so every frame in a row takes the tallest frame's height */
.hz-card{display:grid;grid-row:span 2;grid-template-rows:subgrid;align-content:start;gap:16px}
.pf-card{aspect-ratio:4 / 4.6;padding:14px}
.hz-cw{display:grid;justify-items:start;gap:12px}

/* 6 Over one image: four glass cards running across one photograph or shader */
.hz-over{align-items:end;min-height:clamp(560px,48vw,700px);padding:clamp(16px,2.4vw,32px)}
.hz-oback{position:absolute;inset:0;z-index:-1}
.hz-oback .pf-img,.hz-oback .pf-shader{z-index:0}
.hz-oback>.grain{z-index:1}
.hz-glasses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:12px;width:100%}
.hz-glass{display:grid;align-content:start;justify-items:start;gap:12px;padding:20px 18px 18px;border-radius:var(--pr-s);background:linear-gradient(160deg,rgba(255,255,255,.8),rgba(255,255,255,.58));border:1px solid rgba(255,255,255,.75);box-shadow:var(--g-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.hz-glass .pz-body{color:var(--ink-2)}
.hz-gv .pl-card{display:none}
.hz-gv .pl-labels{justify-content:flex-start}

@media (prefers-reduced-motion:no-preference){
  .pl-wave i{animation:pl-wave 1.2s ease-in-out infinite}
  .pl-wave i:nth-child(2){animation-delay:.15s}
  .pl-wave i:nth-child(3){animation-delay:.3s}
  .is-paused .pl-wave i{animation-play-state:paused}
}
@keyframes pl-wave{50%{opacity:1;transform:translateY(-2px)}}

/* Small frames keep their visuals inside */
@container (max-width:300px){
  .pf-in .pv-box{--vbase:.8}
}
@container (max-width:420px){
  .pf .fc-in{flex-wrap:wrap;white-space:normal}
  .pl-hl{white-space:normal}
  .pd-page{padding:16px 14px 12px}
  .pd-h{font-size:19px}
}

@media (max-width:1180px){
  .hz-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-glasses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-jcols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-pcopy{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hz-pend{grid-column:1 / -1;justify-items:start;grid-auto-flow:column;justify-content:start;align-items:center}
}
@media (max-width:900px){
  .hz-row,.hz-row.is-flip,.hz-acc{grid-template-columns:minmax(0,1fr)}
  .hz-row.is-flip .pz-words{order:0}
  .hz-stage{position:static;order:-1}
  .pf-tabs{aspect-ratio:auto;min-height:380px}
  .pf-journey{aspect-ratio:auto}
  .hz-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hz-nodes::before{display:none}
}
@media (max-width:640px){
  .hz-cards,.hz-glasses,.hz-jcols,.hz-pcopy{grid-template-columns:minmax(0,1fr)}
  .hz-pend{grid-auto-flow:row}
  .hz-tl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-self:stretch}
  .pf-alt,.pf-acc,.pf-card{aspect-ratio:auto;min-height:320px}
  .hz-over{min-height:0;padding-top:200px}
}

/* One Illustrative tag per frame; the visuals' own tags are folded into it */
.pf>.pf-tag{left:auto;right:12px;bottom:10px;z-index:1}
.pf .pf-in .bos-tag{display:none}
.pd{padding-bottom:6px}

/* Step type: the sans, or a serif with an italic second line (ref 02) */
.pg[data-type="serif"] .pz-lines{font-family:var(--news);font-weight:400;letter-spacing:-.02em}
.pg[data-type="serif"] .pz-lines .dim{font-style:italic;color:var(--ink-2)}

/* Glass cards over one image: frosted, or clear with the words set on the image (ref 04); paper keeps them frosted */
.pg[data-hg="clear"]:not([data-hb="paper"]) .hz-over::after{content:"";position:absolute;inset:35% 0 0;z-index:-1;background:linear-gradient(180deg,rgba(8,20,16,0),rgba(8,20,16,.5));pointer-events:none}
.pg[data-hg="clear"]:not([data-hb="paper"]) .hz-glass{background:none;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.28)}
.pg[data-hg="clear"]:not([data-hb="paper"]) .hz-glass :is(.pz-body,.pk,.pz-lines .dim){color:rgba(255,255,255,.92)}
.pg[data-hg="clear"]:not([data-hb="paper"]) .hz-glass .pk-n{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);color:#fff}

/* The Blueprint document in narrow frames: compact, so it always fits (the frames keep their fixed proportions) */
@container (max-width:520px){
  .pd-p,.pd-foot{display:none}
  .pd-page{gap:6px;padding:14px 16px 12px}
}
@container (max-width:300px){
  .pf-in .pv[data-k="doc"]{zoom:.875}
}

/* Grids that hold frames take a fixed column, never one sized by their content: the visuals inside answer to their
   width (container queries), and a content-sized column would make layout loop */
:is(.hz-alt,.hz-tabs,.hz-journey,.hz-card,.hz-stage,.hz-pane,.hz-panels,.hz-p,.pf-in,.pv-box,.pv){grid-template-columns:minmax(0,1fr)}
:is(.hz-pane,.hz-p){min-width:0}

/* ---- play-vis.css ---- */
/* The v15 playground, the How we work card visuals (tools/site/play/play_vis.py) and the card design controls:
   the window bar (macOS dots, or the BraindOS bar with its close X), the visual's size and place in the frame, and the
   glass of the small cards (light, dark or solid). Then the new visuals: dashboard, flowchart, activity log, Teams
   message, rising notifications and the quiet tile. The frame's data-show and data-win are set by play.js. */

/* The window bar */
.pv-bar{display:none;align-items:center;gap:10px;width:100%;padding:9px 12px;border-bottom:1px solid rgba(11,17,16,.07);font:500 12px/1.2 var(--sans);color:var(--ink-2)}
.pv-dots{display:inline-flex;gap:6px}
.pv-dots i{width:10px;height:10px;border-radius:50%;background:#E06C5D}
.pv-dots i:nth-child(2){background:#E0B34D}
.pv-dots i:nth-child(3){background:#5DB66F}
.pv-mark{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--ink)}
.pv-mark .bos-mark{width:9px;height:9px;border-radius:2.5px}
.pv-bar b{font-weight:500;color:var(--grey)}
.pv-x{display:grid;place-items:center;width:22px;height:22px;margin-left:auto;border-radius:7px;background:rgba(11,17,16,.06)}
.pf:not([data-win="none"]) .pv-box{width:min(100%,480px);border-radius:16px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.4));border:1px solid rgba(255,255,255,.75);box-shadow:var(--g-shadow);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.pf:not([data-win="none"]) .pv-bar{display:flex}
.pf:not([data-win="none"]) .pv{padding:14px}
.pf[data-win="dots"] :is(.pv-mark,.pv-x){display:none}
.pf[data-win="dots"] .pv-bar b{margin:0 auto 0 4px;color:var(--ink-2)}
.pf[data-win="bar"] .pv-dots{display:none}
.pg[data-cor="square"] :is(.pv-box,.pv-x){border-radius:0}

/* Size and place of the visual in its frame; the large size only where the frame has room */
/* The size multiplies the frame's own scale (--vbase, smaller in narrow frames), so Small is always smaller than Medium */
.pf .pv-box{zoom:calc(var(--vbase,1) * var(--vsize,1))}
.pg[data-hsz="s"] .pf .pv-box{--vsize:.84}
@container (min-width:560px){.pg[data-hsz="l"] .pf .pv-box{--vsize:1.14}}
.pg[data-hpos="low"] .pf{align-items:end}
.pg[data-hpos="high"] .pf{align-items:start}

/* The glass of the small cards: light (default), dark or solid */
.pg[data-htint="dark"] .pf :is(.pl-card,.pl-toast,.pl-node,.pv-tile,.pv-stack li){background:linear-gradient(160deg,rgba(18,26,23,.82),rgba(10,15,13,.74));border-color:rgba(241,239,230,.14);color:var(--bone)}
.pg[data-htint="dark"] .pf :is(.pl-ck,.pl-at small,.pv-tile small,.pv-stack .mono-s){color:var(--bone-2)}
.pg[data-htint="dark"] .pf .pl-ck.on{color:var(--bone)}
.pg[data-htint="dark"] .pf :is(.pl-task,.pl-ni){background:rgba(241,239,230,.08);color:var(--bone)}
.pg[data-htint="solid"] .pf :is(.pl-card,.pl-toast,.pl-node,.pv-tile,.pv-stack li){background:#fff;border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}

/* The visuals that are cards or windows take the usual product width */
.pv>:is(.card,.bos){width:min(100%,468px)}

/* Dashboard */
.pd2-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pd2-t{display:grid;align-content:start;gap:8px;padding:10px;border-radius:10px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.8)}
.pd2-t .mono-k{font-size:9.5px}
.pd2-v{display:flex;align-items:center;gap:4px;min-height:20px}
.pd2-v .spark{width:100%;height:20px}
.pd2-t .chip{justify-self:start}
.pd2-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(11,17,16,.07)}
.pd2-rows li:first-child{border-top:0}
.pd2-rows b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Flowchart: three in, two out */
.pc-chart .fl-col:last-child{grid-template-rows:repeat(2,1fr)}

/* Activity log */
.pv-log li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(11,17,16,.07)}
.pv-log li:first-child{border-top:0}
.pv-ok{color:var(--live)}

/* Teams message */
.pv-ch{display:flex;align-items:center;gap:8px}
.pv-ch .mono-s{margin-left:auto}
.pv-msg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.pv-msg b{font-weight:600}
.pv-msg p{margin:4px 0 0;color:var(--ink-2)}
.pv-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px!important}

/* Rising notifications: three toasts, the newest on top */
.pv-stack{width:min(100%,340px)}
.pv-stack ul{display:grid;gap:8px}
.pv-stack li{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);font:500 13.5px/1.3 var(--sans);color:var(--ink)}
.pv-stack li:nth-child(1){opacity:.62;scale:.94}
.pv-stack li:nth-child(2){opacity:.82;scale:.97}
.pv-stack li .i{color:var(--live)}
.pv-stack li .mono-s{margin-left:auto}
.pg[data-cor="square"] :is(.pv-stack li,.pv-tile,.pv-ti){border-radius:0}

/* Quiet tile */
.pv-tile{display:grid;justify-items:center;gap:6px;width:min(100%,250px);padding:22px 20px 20px;border-radius:20px;background:var(--g-bg);border:1px solid var(--g-line);box-shadow:var(--g-shadow);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);text-align:center;color:var(--ink)}
.pv-ti{display:grid;place-items:center;width:56px;height:56px;margin-bottom:6px;border-radius:17px;background:linear-gradient(160deg,#2E3A35,#0B1110);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 22px -12px rgba(8,20,16,.7)}
.pv-ti .i{width:24px;height:24px}
.pv-tile b{font-weight:600;font-size:16px}
.pv-tile small{color:var(--grey);font-size:13px}

@media (prefers-reduced-motion:no-preference){
  .pv-stack li{animation:pv-rise .7s var(--ease-out) both;animation-delay:calc(var(--n) * .25s + .15s)}
}
@keyframes pv-rise{from{opacity:0;translate:0 14px}}

/* Small frames keep the dashboard and log inside */
@container (max-width:420px){
  .pd2-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pd2-t:nth-child(3){display:none}
  .pv-log li{grid-template-columns:auto minmax(0,1fr) auto}
  .pv-log .tile{display:none}
}

/* One window bar per card: a visual that is already a window drops its own bar under the card's */
.pf:not([data-win="none"]) .pv .bos-bar{display:none}

/* ---- play-org.css ---- */
/* The v15 playground, the AI-native org (tools/site/play/play_org.py): the lamp-desks scene with one uniform card per
   agent on a dashed line to its desk (ref 01), the big type, the BraindOS screens, the builders lines, "Secure by
   nature" and the capability cards. The dock's choices on .pg: oc card style, ot big type, oa arrange, osec security. */
.po .v-head{align-items:end}
.po-lead{display:grid;justify-items:start;gap:16px}
.po-pill,.po-run,.po-close{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:999px;font:500 13.5px/1.3 var(--sans)}
.po-pill{background:#fff;border:1px solid var(--line)}
.po-pill .bos-mark,.po-run .bos-mark{width:9px;height:9px;border-radius:2.5px}

/* The scene: the photograph, a card per agent, a dashed line from each card down to its person */
.po-sw{position:relative}
.po-scene{position:relative;isolation:isolate;margin:0;aspect-ratio:1200 / 720;border-radius:var(--pr);overflow:hidden;background:#C8D6D2;container-type:inline-size}
.po-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.po-scene>.grain{z-index:-1;opacity:.55}
.po-agents{position:absolute;inset:0;font-size:calc(100cqw / 88)}
.po-at{--cx:var(--x);--cy:var(--y);position:absolute;left:calc(var(--cx) * 1%);top:calc(var(--cy) * 1%);width:19.5em;translate:-50% 0}
.pg:is([data-oc="big"],[data-oc="notify"],[data-oc="flow"],[data-oc="person"]) .po-at{--cx:var(--rx);--cy:5;width:18cqw}
.po-line{position:absolute;left:calc(50% + (var(--hx) - var(--cx)) * 1cqw);top:1.4em;height:calc((var(--hy) - var(--cy)) * .6cqw - 1.4em);border-left:1.5px dashed rgba(255,255,255,.92)}
.po-line::after{content:"";position:absolute;left:-4px;bottom:-4px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
.po-card{position:relative;display:grid;gap:.75em;padding:.8em .9em .8em .8em;border-radius:1.1em;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.86));border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 .1em .25em rgba(8,30,24,.07),0 1.4em 2.6em -1.4em rgba(8,30,24,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink)}
.po-ch{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75em}
.po-ic{position:relative;display:grid;place-items:center;width:2.9em;height:2.9em;border-radius:.85em;background:linear-gradient(160deg,#2E3A35,#0B1110);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 .5em 1em -.5em rgba(8,20,16,.75)}
.po-ic>.i{width:1.35em;height:1.35em}
.po-spark{position:absolute;top:-.45em;right:-.45em;display:grid;place-items:center;width:1.3em;height:1.3em;border-radius:50%;background:#fff;color:var(--live);box-shadow:0 0 0 .18em rgba(155,224,191,.35),0 0 .9em rgba(155,224,191,.9)}
.po-spark .i{width:.8em;height:.8em}
.po-t{display:grid;gap:.15em;min-width:0}
.po-t b{font-weight:600;font-size:1.08em;letter-spacing:-.01em}
.po-t small{overflow:hidden;color:var(--grey);font-size:.95em;line-height:1.3;white-space:nowrap;text-overflow:ellipsis}
.po-ch .dot-l{align-self:start;margin-top:.4em}
.po-note,.po-wf,.po-own{display:none}
/* Card styles */
.pg[data-oc="none"] .po-ic{display:none}
.pg[data-oc="none"] .po-card{border-left:3px solid var(--live)}
.pg[data-oc="none"] .po-ch{grid-template-columns:minmax(0,1fr) auto}
.pg[data-oc="big"] .po-ch{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding-top:.2em}
.pg[data-oc="big"] .po-ic{width:3.8em;height:3.8em;border-radius:1.1em}
.pg[data-oc="big"] .po-ic>.i{width:1.7em;height:1.7em}
.pg[data-oc="big"] .po-ch .dot-l{position:absolute;top:1em;right:1em;margin:0}
.pg[data-oc="notify"] .po-note{display:flex;align-items:center;gap:.5em;padding:.45em .65em;border-radius:.7em;font-size:.92em;font-weight:500}
.po-note-ok{background:#E6F2EB;color:#1F5C45}
.po-note-wait{background:#FBF0DC;color:#7A4E10}
.pg[data-oc="flow"] .po-wf{position:relative;display:grid;gap:.45em;padding-left:.2em}
.po-wf::before{content:"";position:absolute;left:1.05em;top:.9em;bottom:.9em;border-left:1px dashed #C5CCC9}
.po-wf li{position:relative;display:flex;align-items:center;gap:.6em;font-size:.95em;color:var(--ink-2)}
.po-wf .lg-xs,.po-wi,.po-wf .sm-face{width:1.75em;height:1.75em}
.po-wf .lg-xs{border-radius:.5em}
.po-wf .lg-xs img{width:1em;height:1em}
.po-wi{display:grid;flex:none;place-items:center;border-radius:.5em;background:var(--soft);color:var(--ink)}
.po-wi .i{width:.9em;height:.9em}
.pg[data-oc="person"] .po-own{display:flex;align-items:center;gap:.55em;padding-top:.65em;border-top:1px solid var(--line);color:var(--grey);font-size:.95em}
.po-card .sm-face{font-size:1em}
.pg[data-cor="square"] :is(.po-card,.po-ic,.po-note,.po-wi,.po-wf .lg-xs,.po-pill,.po-run,.po-close){border-radius:0}

/* Big type, blended into the foot of the photograph or cut by its edge; and the running-on chip */
.po-run{position:absolute;right:2.4%;bottom:calc(var(--ov) + 14px);background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 24px -16px rgba(8,30,24,.5)}
.po-run .i{rotate:90deg}
.po-big{position:absolute;left:0;right:0;z-index:2;margin:0;padding:.04em 0 .12em;text-align:center;font:500 clamp(56px,11.5vw,166px)/1 var(--sans);letter-spacing:-.065em;pointer-events:none}
.pg[data-ot="blend"] .po-big{bottom:calc(var(--ov) + 2px);background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0) 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg[data-ot="cut"] .po-big{bottom:-.48em;background:linear-gradient(180deg,#fff 0 59%,var(--ink) 59% 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg[data-ot="off"] .po-big{display:none}

/* The BraindOS screens: one, some or all; stacked like a deck, or side by side */
.po{--ov:clamp(56px,8vw,124px)}
.po-screens{position:relative;z-index:3;display:grid;justify-items:center;margin-top:calc(-1 * var(--ov))}
.pg[data-ot="cut"] .po-screens{margin-top:clamp(64px,8vw,120px)}
.po-scr{grid-area:1 / 1;width:min(100%,880px);transition:transform .6s var(--ease-out)}
.po-scr .bos{box-shadow:var(--g-shadow),0 40px 80px -40px rgba(8,30,24,.45)}
.po-scr[data-k="0"]{z-index:4}
.pg[data-oa="stack"] .po-screens:not([data-n="1"]){padding-top:84px}
.pg[data-oa="stack"] .po-scr[data-k="1"]{z-index:3;transform:translateY(-28px) scale(.95)}
.pg[data-oa="stack"] .po-scr[data-k="2"]{z-index:2;transform:translateY(-54px) scale(.9)}
.pg[data-oa="stack"] .po-scr[data-k="3"]{z-index:1;transform:translateY(-78px) scale(.85)}
.pg[data-oa="stack"] .po-scr:not([data-k="0"]){transform-origin:50% 0}
.pg[data-oa="row"] .po-screens{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px}
.pg[data-oa="row"] .po-screens[data-n="1"]{grid-template-columns:minmax(0,880px);justify-content:center}
.pg[data-oa="row"] .po-scr{grid-area:auto;width:100%}
.pg[data-oa="row"] .po-scr[data-scr="today"]{grid-column:1 / -1;justify-self:center;width:min(100%,880px)}
.pg:is([data-ot="cut"],[data-ot="off"]) .po-run{bottom:14px}
.ps-gov li,.ps-roi li,.ps-log li{display:grid;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(11,17,16,.07)}
.ps-gov li:first-child,.ps-roi li:first-child,.ps-log li:first-child{border-top:0}
.ps-gov li{grid-template-columns:auto minmax(0,1fr) auto}
.ps-gov li>span:not(.chip){display:grid}
.ps-gov b,.ps-roi b,.ps-log b{font-weight:600}
.ps-gov small{color:var(--grey);font-size:11.5px}
.ps-roi li{grid-template-columns:auto minmax(0,1fr) auto auto}
.ps-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ps-kpis p{display:grid;gap:8px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.8)}
.ps-kpis .chip{justify-self:start}
.ps-log li{grid-template-columns:auto auto minmax(0,1fr) auto}

/* The builders, in three lines */
.po-build{display:grid;justify-items:center;gap:22px;margin-top:clamp(64px,7vw,104px);text-align:center}
.po-three{display:grid;font:500 clamp(28px,3.4vw,50px)/1.12 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.po-three span:nth-child(2){color:var(--grey)}
.po-three span:nth-child(3){color:var(--dim)}
.po-close{background:#fff;border:1px solid var(--line);padding:8px 16px}

/* Secure by nature: four cards, no photographs; plain, over a photograph or a shader, or dark */
.po-sec{position:relative;isolation:isolate;margin-top:clamp(64px,7vw,104px)}
.po-sec-box{position:relative;isolation:isolate;border-radius:var(--pr);overflow:hidden}
.po-sec-back{position:absolute;inset:0;z-index:-1;display:none}
.po-sec-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.po-sec-back .pf-shader{display:none;z-index:0}
.po-sec-back>.grain{z-index:1}
.po-sec-head{display:grid;justify-items:center;gap:10px;margin-bottom:28px;text-align:center}
.po-sec-h{font:500 clamp(30px,3.2vw,46px)/1.05 var(--sans);letter-spacing:-.045em}
.po-scs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.po-sc{display:grid;align-content:start;gap:8px;padding:16px 16px 20px;border-radius:var(--pr-s);background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(8,30,24,.04)}
.po-sc .sc-ui{display:grid;place-items:center;min-height:68px;margin-bottom:6px;border-radius:12px;background:var(--soft);font-size:12.5px}
.po-sc .sc-seg span{color:var(--ink-2)}
.po-sc .sc-seg .on{color:var(--ink)}
.po-sc h4{margin:0;font-weight:600;font-size:16px;letter-spacing:-.01em}
.po-sc p{margin:0;color:var(--grey);font-size:14.5px;line-height:1.5}
.pg[data-osec="plain"] .po-sec-box{overflow:visible}
.pg:not([data-osec="plain"]) .po-sec-box{padding:clamp(28px,4vw,56px) clamp(16px,3vw,44px)}
.pg:is([data-osec="photo"],[data-osec="shader"]) .po-sec-back{display:block}
.pg[data-osec="shader"] .po-sec-img{display:none}
.pg[data-osec="shader"] .po-sec-back .pf-shader{display:block}
.pg:is([data-osec="photo"],[data-osec="shader"]) .po-sc{background:linear-gradient(160deg,rgba(255,255,255,.84),rgba(255,255,255,.6));border-color:rgba(255,255,255,.75);box-shadow:var(--g-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.pg:is([data-osec="photo"],[data-osec="shader"]) .po-sc .sc-ui{background:rgba(255,255,255,.6)}
.pg:is([data-osec="photo"],[data-osec="shader"]) .po-sc p{color:var(--ink-2)}
.pg[data-osec="dark"] .po-sec-box{background:#0B1110;color:var(--bone)}
.pg[data-osec="dark"] .po-sec-box .v-lead{color:var(--bone-2)}
.pg[data-osec="dark"] .po-sc{background:rgba(255,255,255,.05);border-color:rgba(241,239,230,.12)}
.pg[data-osec="dark"] .po-sc p{color:var(--bone-2)}
.pg[data-osec="dark"] .po-sc .sc-ui{background:var(--bone);color:var(--ink)}

/* Capability cards (brand-lab S08), optional */
.po-caps{margin-top:clamp(64px,7vw,104px)}
.po-caps-h{margin-bottom:28px;font:500 clamp(28px,3vw,44px)/1.08 var(--sans);letter-spacing:-.045em}
.po-capl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.po-cap{display:grid;align-content:start;gap:10px}
.po-cf{position:relative;isolation:isolate;display:grid;place-items:center;margin:0 0 6px;aspect-ratio:4 / 3.3;padding:18px;border-radius:var(--pr);overflow:hidden;background:#C9D6D1}
.po-cimg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.po-cf>.grain{z-index:-1;opacity:.6}
.po-cui{position:relative;display:grid;gap:10px;width:min(100%,320px);padding:14px 14px 36px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:var(--g-shadow);font-size:13px}
.po-cui .bos-tag{left:14px;bottom:10px}
.pc-ui{display:grid;gap:10px}
.pc-h{display:flex;align-items:center;gap:8px}
.pc-h>span:not(.chip){display:grid}
.pc-h small{color:var(--grey);font-size:11.5px}
.pc-h .chip,.pc-h .mono-s{margin-left:auto}
.pc-conn li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.pc-conn .sw{margin-left:auto;background:var(--ink)}
.pc-conn .sw i{left:14px}
.pc-msg{color:var(--ink-2)}
.pc-btns{display:flex;gap:8px}
.pc-task{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;background:var(--soft)}
.po-cap h4{margin:0;font-weight:600;font-size:19px;letter-spacing:-.015em}
.po-cap p{margin:0;color:var(--grey);font-size:15px}
.pg[data-cor="square"] :is(.po-sc,.po-sc .sc-ui,.po-cui,.ps-kpis p,.po-sec-head){border-radius:0}

@media (max-width:1100px){
  .po-scs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .po-capl{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* Phones: the photograph, then the agents as a list; the screens one under another */
@media (max-width:760px){
  .po-scene{aspect-ratio:auto;overflow:visible;border-radius:0;background:none}
  .po-img{position:relative;z-index:0;aspect-ratio:4 / 3.2;border-radius:var(--pr)}
  .po-scene>.grain,.po-line{display:none}
  .po-run{display:none}
  .po-agents{position:static;display:grid;gap:10px;margin-top:12px;font-size:13px}
  .po-at,.pg:is([data-oc="big"],[data-oc="notify"],[data-oc="flow"],[data-oc="person"]) .po-at{position:static;width:auto;translate:none}
  .po-big{position:static;margin-top:18px;text-align:left;font-size:17vw}
  .pg:is([data-ot="blend"],[data-ot="cut"]) .po-big{background:none;color:var(--ink);mix-blend-mode:normal}
  .po-screens,.pg[data-ot="cut"] .po-screens{margin-top:24px}
  .po-screens,.pg[data-oa="row"] .po-screens{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:0}
  .pg[data-oa="stack"] .po-screens:not([data-n="1"]){padding-top:0}
  .po-scr,.pg[data-oa] .po-scr[data-k]{grid-area:auto;width:100%;transform:none}
  .ps-kpis{grid-template-columns:minmax(0,1fr)}
  .po-scs,.po-capl{grid-template-columns:minmax(0,1fr)}
}

/* The scene's Illustrative tag; and the photograph framed, or full width with its sky fading into the page (ref 01) */
.po-scene>.po-tag{left:2.4%;top:3.5%;bottom:auto;z-index:2}
@media (min-width:761px){
  .pg[data-of="bleed"] .po-scene{width:100vw;margin-left:calc(50% - 50vw);border-radius:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
  .pg[data-of="bleed"] .po-scene>.po-tag{top:auto;bottom:calc(var(--ov) + 14px)}
  .pg[data-of="bleed"] .po-run{right:max(2.4%,calc(50vw - 50% + 24px))}
}


/* Rising notifications: what each agent did climbs above its card and fades (onot) */
.po-rise{position:absolute;left:50%;bottom:calc(100% + 8px);z-index:2;display:none;width:max-content;max-width:120%;translate:-50% 0;pointer-events:none}
.pg[data-onot="on"] .po-rise{display:grid;gap:.35em}
.pg:is([data-oc="big"],[data-oc="notify"],[data-oc="flow"],[data-oc="person"]) .po-rise{bottom:auto;top:calc(100% + 8px)}
.po-rise li{display:inline-flex;align-items:center;justify-self:center;gap:.4em;padding:.35em .75em .35em .5em;border-radius:1em 1em 1em .25em;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 .6em 1.4em -1em rgba(8,30,24,.5);font:500 .82em/1.25 var(--sans);color:var(--ink-2);white-space:nowrap}
.po-rise li:nth-child(1){opacity:.45}
.po-rise li:nth-child(2){opacity:.72}
.po-rise .i{color:var(--live)}
@media (prefers-reduced-motion:no-preference){
  .pg[data-onot="on"] .po-rise li{animation:po-rise 6s var(--ease-io) infinite both;animation-delay:calc(var(--j) * 2s + var(--n) * .5s)}
  .is-paused .po-rise li{animation-play-state:paused}
}
@keyframes po-rise{0%{opacity:0;translate:0 .8em}12%,60%{opacity:.95;translate:0 0}100%{opacity:0;translate:0 -1.4em}}

/* Desk labels: what is happening at each desk, beside the person (olab) */
.po-desks{position:absolute;inset:0;display:none;font-size:max(11px,calc(100cqw / 92));pointer-events:none}
.pg[data-olab="on"] .po-desks{display:block}
.po-desks li{position:absolute;left:calc(var(--hx) * 1%);top:calc(var(--hy) * 1% + 3.2%);display:inline-flex;align-items:center;gap:.4em;padding:.3em .7em .3em .45em;translate:-50% 0;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 .5em 1em -.6em rgba(8,30,24,.6);font:500 .9em/1.2 var(--sans);color:var(--ink-2);white-space:nowrap}
.po-desks .i{color:var(--live)}

/* Card looks (oth): light (default), glass, dark, outline or a single-line pill */
.pg[data-oth="glass"] .po-card{background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.38));border-color:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.pg[data-oth="dark"] .po-card{background:linear-gradient(160deg,rgba(30,40,36,.94),rgba(11,17,16,.94));border-color:rgba(241,239,230,.14);color:var(--bone)}
.pg[data-oth="dark"] .po-card :is(.po-t small,.po-own,.po-wf li){color:var(--bone-2)}
.pg[data-oth="dark"] .po-ic{background:rgba(255,255,255,.1)}
.pg[data-oth="dark"] .po-own{border-top-color:rgba(241,239,230,.14)}
.pg[data-oth="outline"] .po-card{background:rgba(8,20,16,.18);border:1.5px solid rgba(255,255,255,.88);box-shadow:none;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.pg[data-oth="outline"] .po-card :is(.po-t small,.po-own,.po-wf li){color:rgba(255,255,255,.92)}
.pg[data-oth="pill"] .po-card{padding:.45em 1em .45em .45em;border-radius:999px}
.pg[data-oth="pill"] .po-t small{display:none}
.pg[data-oth="pill"] .po-ic{width:2.4em;height:2.4em;border-radius:50%}

/* The larger photograph: wider than the page column, the same proportions, so every label stays on its desk */
@media (min-width:761px){
  .pg[data-osz="large"] .po-sw{width:min(calc(100vw - 32px),1400px);margin-left:50%;translate:-50% 0}
}

/* More ways to arrange the screens: a cascade and a grid; and their orientation */
.pg[data-oa="cascade"] .po-screens:not([data-n="1"]){padding-top:96px}
.pg[data-oa="cascade"] .po-screens:not([data-n="1"]) .po-scr[data-k="0"]{transform:translateX(-7%)}
.pg[data-oa="cascade"] .po-scr[data-k="1"]{z-index:3;transform:translate(-2%,-32px)}
.pg[data-oa="cascade"] .po-scr[data-k="2"]{z-index:2;transform:translate(3%,-64px)}
.pg[data-oa="cascade"] .po-scr[data-k="3"]{z-index:1;transform:translate(8%,-96px)}
.pg[data-oa="grid"] .po-screens{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
.pg[data-oa="grid"] .po-screens[data-n="1"]{grid-template-columns:minmax(0,880px);justify-content:center}
.pg[data-oa="grid"] .po-scr{grid-area:auto;width:100%}
.po-screens{transition:transform .6s var(--ease-out)}
.pg[data-oor="tilt"] .po-screens{transform:perspective(1800px) rotateX(10deg);transform-origin:50% 0}
.pg[data-oor="deep"] .po-screens{transform:perspective(1500px) rotateY(-9deg) rotateX(4deg);transform-origin:40% 0}
.pg[data-oor="fan"] .po-scr[data-k="1"]{rotate:-3deg}
.pg[data-oor="fan"] .po-scr[data-k="2"]{rotate:3deg}
.pg[data-oor="fan"] .po-scr[data-k="3"]{rotate:-1.5deg}

/* Which photograph sits behind the security cards; the shader hides them all */
.po-sec-img{display:none}
.pg[data-ospic="glass"] .po-sec-img[data-pic="glass"],.pg[data-ospic="hills"] .po-sec-img[data-pic="hills"],.pg[data-ospic="river"] .po-sec-img[data-pic="river"],
.pg[data-ospic="desks"] .po-sec-img[data-pic="desks"],.pg[data-ospic="dusk"] .po-sec-img[data-pic="dusk"]{display:block}
.pg[data-osec="shader"] .po-sec-img[data-pic]{display:none}
/* Dark shaders take white words */

@media (max-width:760px){
  .po-rise,.po-desks{display:none!important}
  .pg[data-oa] .po-screens,.pg[data-oor] .po-screens{transform:none!important;padding-top:0!important}
  .pg[data-oa] .po-scr[data-k],.pg[data-oor] .po-scr[data-k]{transform:none!important;rotate:none!important}
  .pg[data-oa="grid"] .po-screens{grid-template-columns:minmax(0,1fr)}
  .pg[data-oth="pill"] .po-card{border-radius:1.1em}
}

/* Longer big-type phrases take a smaller size, so each stays on one line */
.pg:is([data-otx="native"],[data-otx="running"]) .po-big{font-size:clamp(44px,8.6vw,124px)}
.pg[data-otx="desk"] .po-big{font-size:clamp(38px,7.4vw,106px)}
@media (min-width:761px){.po-big{white-space:nowrap}}

/* Round two, from the design check: notifications rise behind the cards (two at a time), lines stay behind every card,
   the cards keep the reference's size on the larger photograph, the fan turns gently, dark shaders get a scrim and
   near-white cards, and the security cards can be words only */
.po-line{z-index:0}
.po-card{z-index:2}
.po-rise{z-index:1}
.po-rise li:nth-child(1){display:none}
.po-agents{font-size:min(calc(100cqw / 88),13px)}
.pg[data-oor="fan"] .po-scr[data-k="1"]{rotate:-1.6deg}
.pg[data-oor="fan"] .po-scr[data-k="2"]{rotate:1.6deg}
.pg[data-oor="fan"] .po-scr[data-k="3"]{rotate:-.8deg}
.pg[data-osec="shader"]:is([data-osh="dark"],[data-osh="night"],[data-osh="magic"],[data-osh="contrast"]) .po-sc{background:rgba(255,255,255,.93)}
.pg[data-osui="text"] .po-sc .sc-ui{display:none}
/* In the grid, as side by side, Today (three panes) keeps the full width; the other screens pair up beneath it */
.pg[data-oa="grid"] .po-scr[data-scr="today"]{grid-column:1 / -1;justify-self:center;width:min(100%,880px)}
/* Tilted and perspective views scale down a touch, so the near edge never grows past the page; the cascade's offsets
   halve where the page is narrower */
.pg[data-oor="tilt"] .po-screens{transform:perspective(1800px) rotateX(9deg) scale(.94)}
.pg[data-oor="deep"] .po-screens{transform:perspective(1500px) rotateY(-9deg) rotateX(4deg) scale(.92)}
@media (max-width:1240px){
  .pg[data-oa="cascade"] .po-screens:not([data-n="1"]) .po-scr[data-k="0"]{transform:translateX(-3.5%)}
  .pg[data-oa="cascade"] .po-scr[data-k="1"]{transform:translate(-1%,-32px)}
  .pg[data-oa="cascade"] .po-scr[data-k="2"]{transform:translate(1.5%,-64px)}
  .pg[data-oa="cascade"] .po-scr[data-k="3"]{transform:translate(4%,-96px)}
}
@media (max-width:1024px){.pg[data-oor="tilt"] .po-screens{transform:perspective(1800px) rotateX(7deg) scale(.88)}}

/* From the full design check: the label cards fit their spacing (as in ref 01, apart, never stacked like stairs);
   in the top-row styles the tag sits above the cards and the task line wraps; back screens in a stack or cascade show
   only their title bars */
.po-at{width:17em}
.pg:is([data-oc="big"],[data-oc="notify"],[data-oc="flow"],[data-oc="person"]) .po-scene>.po-tag{top:6px}
.pg:is([data-oc="big"],[data-oc="notify"],[data-oc="flow"],[data-oc="person"]) .po-t small{white-space:normal}
.pg:is([data-oa="stack"],[data-oa="cascade"]) .po-scr:not([data-k="0"]) .bos-main{visibility:hidden}
.po-t small{white-space:normal}

/* ---- play-org2.css ---- */
/* The v15 playground, round three (15 Oct): more ways to set the agent cards on the lamp-desks photograph. The dock's
   choices on .pg: opos card position (near each person at uneven heights, stacked in a column, or a deck), ocs card
   size, owf the workflow cut to one line, ohead headshots (on each person, in each card), onst app notifications with
   the app's mark and the AI sparkle, onfrom notifications above the cards, and oext the photograph running on beneath
   the screens (a deep green, the photograph mirrored, or green hills), so the glass screens sit on green. */
.po-chain,.po-hf,.po-toasts,.po-pins{display:none}

/* Card size; the top-row width follows it */
.pg[data-ocs="s"]{--cs:.86}
.pg[data-ocs="xs"]{--cs:.74}
@media (min-width:761px){
  .po-agents{font-size:calc(min(calc(100cqw / 88),13px) * var(--cs,1))}
  .pg:is([data-oc="big"],[data-oc="notify"],[data-oc="flow"],[data-oc="person"]) .po-at{--cy:var(--rowy,5);width:calc(18cqw * var(--cs,1))}
  /* Notifications above a top row need room: the row moves down */
  .pg[data-onot="on"]:is([data-onst="app"],[data-onfrom="above"]){--rowy:21}
}

/* The workflow, concise: three marks on one line with the last step's words, or the last step only */
.po-chain{align-items:center;gap:.35em;padding:.45em .6em .45em .45em;border-radius:.8em;background:var(--soft);color:var(--ink-2);font-size:.95em;line-height:1.25}
.po-cm{display:grid;flex:none}
.po-chain .lg-xs,.po-chain .po-wi,.po-chain .sm-face{width:1.75em;height:1.75em}
.po-chain .lg-xs{border-radius:.5em}
.po-chain .lg-xs img{width:1em;height:1em}
.po-go{flex:none;width:.85em;height:.85em;color:var(--grey)}
.po-chain>span:last-child{min-width:0;margin-left:.25em}
.pg[data-oc="flow"]:is([data-owf="chain"],[data-owf="short"]) .po-wf{display:none}
.pg[data-oc="flow"]:is([data-owf="chain"],[data-owf="short"]) .po-chain{display:flex}
.pg[data-owf="short"] .po-chain>:is(.po-go,.po-cm:nth-of-type(-n+2)){display:none}
.pg[data-oth="dark"] .po-chain{background:rgba(255,255,255,.08);color:var(--bone-2)}
.pg[data-oth="outline"] .po-chain{background:rgba(255,255,255,.14);color:#fff}
.pg[data-oth="glass"] .po-chain{background:rgba(255,255,255,.55)}

/* Headshots: the person's portrait in the card, beside the agent */
.pg:is([data-ohead="card"],[data-ohead="both"]) .po-hf{display:block}
.pg:is([data-ohead="card"],[data-ohead="both"]) .po-ch{grid-template-columns:auto minmax(0,1fr) auto auto}
.pg[data-oc="none"]:is([data-ohead="card"],[data-ohead="both"]) .po-ch{grid-template-columns:minmax(0,1fr) auto auto}
.po-hf .sm-face{display:block;width:2.1em;height:2.1em;border-radius:50%;box-shadow:0 0 0 2px #fff,0 .3em .7em -.3em rgba(8,30,24,.5)}
.pg[data-oc="big"]:is([data-ohead="card"],[data-ohead="both"]) .po-ch{grid-template-columns:minmax(0,1fr)}
.pg[data-oc="big"] .po-hf{position:absolute;top:.85em;left:.85em}
.pg[data-oth="pill"] .po-hf .sm-face{width:1.9em;height:1.9em}
/* and on each person in the photograph, where the dashed line ends */
.po-pins{position:absolute;inset:0;z-index:0;font-size:min(calc(100cqw / 88),13px);pointer-events:none}
.pg:is([data-ohead="pin"],[data-ohead="both"]) .po-pins{display:block}
.pg:is([data-ohead="pin"],[data-ohead="both"]) .po-line::after{display:none}
.po-pins li{position:absolute;left:calc(var(--hx) * 1%);top:calc(var(--hy) * 1%);translate:-50% -50%}
.po-pins .sm-face{display:block;width:2.9em;height:2.9em;border-radius:50%;box-shadow:0 0 0 .2em #fff,0 0 0 .55em rgba(255,255,255,.28),0 .8em 1.4em -.6em rgba(8,30,24,.7)}

/* Card position: near each person, at uneven heights, the line short */
.po-agents{z-index:1}
.pg[data-opos="near"] .po-at{--cx:var(--nx);--cy:var(--ny);width:17em;translate:-50% -100%}
.pg[data-opos="near"] .po-line{top:100%;height:calc((var(--hy) - var(--cy)) * .6cqw)}
.pg[data-opos="near"] .po-at:first-child .po-toasts{left:0;translate:none}
/* Near each person the cards sit among the desks, so on narrower screens they shrink and the workflow takes one line */
@media (min-width:761px) and (max-width:1239px){
  .pg[data-opos="near"] .po-agents{font-size:calc(100cqw / 100 * var(--cs,1))}
  .pg[data-opos="near"][data-oc="flow"] .po-wf{display:none}
  .pg[data-opos="near"][data-oc="flow"] .po-chain{display:flex}
}
/* stacked in one column, at the left or the right */
.pg:is([data-opos="stack"],[data-opos="stackr"]) .po-agents{display:flex;flex-direction:column;gap:.55em;inset:auto;top:4%;left:2.2%;width:21em}
.pg[data-opos="stackr"] .po-agents{left:auto;right:2.2%}
.pg:is([data-opos="stack"],[data-opos="stackr"]) .po-at{position:relative;left:auto;top:auto;width:auto;translate:none}
.pg[data-opos="stack"] .po-scene>.po-tag{left:auto;right:2.4%}
.pg[data-opos="stackr"] .po-run{right:auto;left:2.4%}
.pg:is([data-opos="stack"],[data-opos="stackr"]) .po-chain>span:last-child{white-space:nowrap}
/* or a deck, one card on another, the ones behind peeking out beneath */
.pg[data-opos="deck"] .po-agents{display:grid;inset:auto;top:5%;right:2.5%;width:18em}
.pg[data-opos="deck"] .po-at{grid-area:1 / 1;position:relative;left:auto;top:auto;width:auto;z-index:calc(10 - var(--n));translate:0 calc(var(--n) * 1.05em);scale:calc(1 - var(--n) * .05);transform-origin:50% 100%}
.pg[data-opos="deck"] .po-at:not(:first-child) .po-card>*{opacity:0}
/* In a column or a deck the lines and the rising notifications go, the workflow takes one line, big icons sit beside the name */
.pg:is([data-opos="stack"],[data-opos="stackr"],[data-opos="deck"]) :is(.po-line,.po-rise,.po-toasts){display:none!important}
.pg[data-oc="flow"]:is([data-opos="stack"],[data-opos="stackr"],[data-opos="deck"]):not([data-owf="short"]) .po-wf{display:none}
.pg[data-oc="flow"]:is([data-opos="stack"],[data-opos="stackr"],[data-opos="deck"]):not([data-owf="short"]) .po-chain{display:flex}
.pg[data-oc="big"]:is([data-opos="stack"],[data-opos="stackr"],[data-opos="deck"]) .po-ch{grid-template-columns:auto minmax(0,1fr) auto auto;justify-items:start;text-align:left;padding-top:0}
.pg[data-oc="big"]:is([data-opos="stack"],[data-opos="stackr"],[data-opos="deck"]) :is(.po-ic,.po-hf,.po-ch .dot-l){position:relative;inset:auto}
.pg[data-oc="big"]:is([data-opos="stack"],[data-opos="stackr"],[data-opos="deck"]) .po-ch .dot-l{margin-top:.4em}

/* Notifications rise above the cards */
.pg[data-onfrom="above"] .po-rise{top:auto;bottom:calc(100% + 8px)}
/* App notifications: the app's mark with the AI sparkle on it, what happened, and which agent; one at a time */
.pg[data-onot="on"][data-onst="app"] .po-rise{display:none}
.pg[data-onot="on"][data-onst="app"] .po-toasts{display:grid}
.po-toasts{position:absolute;left:50%;bottom:calc(100% + .7em);z-index:1;translate:-50% 0;pointer-events:none}
.po-toasts li{grid-area:1 / 1;justify-self:center;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.7em;width:max-content;max-width:19em;padding:.55em .95em .55em .55em;border-radius:1.05em;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.9));border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 1em 2em -1.1em rgba(8,30,24,.65);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font:500 1.04em/1.25 var(--sans)}
.po-tapp{position:relative;display:grid;place-items:center;width:2.5em;height:2.5em;border-radius:.7em;background:#fff;border:1px solid var(--line);box-shadow:0 .25em .6em -.3em rgba(8,30,24,.35)}
.po-tapp .lg{display:grid;place-items:center;width:1.45em;height:1.45em;padding:0;border:0;background:none;box-shadow:none}
.po-tapp .lg img{width:100%;height:100%}
.po-tai{position:absolute;right:-.5em;bottom:-.5em;display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:linear-gradient(160deg,#2E3A35,#0B1110);color:#9BE0BF;box-shadow:0 0 0 .14em #fff,0 0 .8em rgba(155,224,191,.75)}
.po-tai .i{width:.8em;height:.8em}
.po-tt{display:grid;gap:.12em;min-width:0}
.po-tt b{font-weight:600;letter-spacing:-.01em}
.po-tt small{color:var(--grey);font-size:.78em;white-space:nowrap}
.po-toasts li:not(:first-child){visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .pg[data-onot="on"][data-onst="app"] .po-toasts li{visibility:visible;animation:po-toast 9s var(--ease-io) infinite both;animation-delay:calc(var(--j) * 3s + var(--n) * .6s - 9s)}
  .is-paused .po-toasts li{animation-play-state:paused}
}
@keyframes po-toast{0%{opacity:0;translate:0 1em;scale:.96}5%,30%{opacity:1;translate:0 0;scale:1}37%,100%{opacity:0;translate:0 -1.3em;scale:1}}

/* The photograph runs on beneath the screens. The layer starts at the photograph's foot (its height is 60% of its
   width, so a padding in percent reaches it) and fades into the page below the screens. The mirror meets the photograph
   at its foot, as a reflection does; the green and the hills start a little higher, where the photograph fades out. */
.po-stage{position:relative;isolation:isolate}
.po-sw{z-index:1}
.po-ext{position:absolute;top:0;bottom:calc(-1 * clamp(56px,7vw,112px));left:0;right:0;z-index:-1;display:none;flex-direction:column;pointer-events:none}
.po-ext::before{content:"";flex:none;padding-top:calc(60% - 2px)}
.pg:is([data-oext="green"],[data-oext="hills"]) .po-ext::before{padding-top:50%}
.po-ext-in{position:relative;flex:1;overflow:hidden;border-radius:0 0 var(--pr) var(--pr);background:linear-gradient(180deg,#0E4514 0%,#0B3A12 30%,#164A1D 64%,#265C2B 100%);}
.po-ext-in>.grain{z-index:2;opacity:.55}
/* The foot fades into the page with a painted gradient, not a mask: a mask here, under tilted glass screens, made the
   browser drop the layers and flicker */
.po-ext-in::after{content:"";position:absolute;inset:auto 0 0;z-index:3;height:32%;background:linear-gradient(180deg,rgba(250,250,250,0),#FAFAFA 92%)}
.po-ext-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.pg[data-oext="mirror"] .po-ext-img[data-ext="mirror"]{display:block;top:-4px;bottom:auto;height:auto;aspect-ratio:1200 / 720;scale:1 -1;filter:blur(2.5px)}
/* the hills photograph shows only its lower, green half, and melts in from the photograph's green */
.pg[data-oext="hills"] .po-ext-img[data-ext="hills"]{display:block;inset:auto auto 0 -45%;width:190%;height:auto}
.pg[data-oext="hills"] .po-ext-in::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0E4514 0%,rgba(14,69,20,.6) 14%,rgba(14,69,20,0) 34%)}
.pg[data-grain="high"] .po-ext-img[data-ext="hills"]{filter:contrast(1.2) saturate(1.18)}
.pg[data-grain="high"][data-oext="mirror"] .po-ext-img[data-ext="mirror"]{filter:blur(2.5px) contrast(1.2) saturate(1.18)}
.pg[data-oext="mirror"] .po-ext-in::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,40,10,0),rgba(5,40,10,.35) 30%,rgba(5,40,10,.72))}
.pg[data-cor="square"] .po-ext-in{border-radius:0}
@media (min-width:761px){
  .pg:not([data-oext="off"]) .po-ext{display:flex}
  .pg:not([data-oext="off"]) .po-scene{border-bottom-left-radius:0;border-bottom-right-radius:0}
  /* The photograph's foot fades out over the green or the hills, so there is no seam */
  .pg:is([data-oext="green"],[data-oext="hills"]) .po-scene{background:none}
  .pg:is([data-oext="green"],[data-oext="hills"]) .po-scene>.grain{display:none}
  .pg:is([data-oext="green"],[data-oext="hills"]) .po-img{-webkit-mask-image:linear-gradient(180deg,#000 85%,transparent 99%);mask-image:linear-gradient(180deg,#000 85%,transparent 99%)}
  .pg[data-osz="large"] .po-ext{left:50%;right:auto;width:min(calc(100vw - 32px),1400px);translate:-50% 0}
  .pg[data-of="bleed"] .po-ext{left:50%;right:auto;width:100vw;translate:-50% 0}
  .pg[data-of="bleed"] .po-ext-in{border-radius:0}
}

/* Phones: the photograph, then the agents as a list, as before; none of the placements, pins or extensions */
@media (max-width:760px){
  .pg[data-opos] .po-agents{position:static!important;display:grid!important;inset:auto!important;width:auto!important;gap:10px}
  .pg[data-opos] .po-at{position:static!important;translate:none!important;scale:none!important;width:auto!important}
  .pg[data-opos="deck"] .po-at:not(:first-child) .po-card>*{opacity:1}
  .po-toasts,.po-pins,.po-ext{display:none!important}
  .pg[data-opos="stack"] .po-scene>.po-tag{left:2.4%;right:auto}
}

/* ---- play-org3.css ---- */
/* The v15 playground, round four (15 Oct): notifications floating in the sky (onst=float) on faint dotted lines (ofl),
   still, drifting or arriving on scroll (omove); the photograph's sky fading in at the top while framed (of=fade); the
   org chart as a BraindOS screen (play_chart.py) with its own choices (occo, ocpp, ocag, ocbar, ocbg); which screen is in
   front (ofront); two more arrangements and a screen width (oa column / drop, osw); and the screens' look (olook). */

/* ---------- Floating notifications ---------- */
.po-floats{display:none;position:absolute;left:50%;bottom:100%;z-index:1;width:0;height:0;pointer-events:none}
.pg[data-onot="on"][data-onst="float"] .po-floats{display:block}
.pg[data-onot="on"][data-onst="float"] .po-rise{display:none}
.po-floats li{position:absolute;left:calc(var(--dx) * 1em);bottom:calc(var(--dy) * 1em);translate:-50% 0;rotate:var(--r);display:inline-flex;align-items:center;gap:.45em;padding:.38em .8em .38em .45em;border-radius:1em 1em 1em .25em;background:rgba(255,255,255,.93);box-shadow:0 .6em 1.4em -1em rgba(8,30,24,.5);font:500 .95em/1.25 var(--sans);color:var(--ink-2);white-space:nowrap;opacity:var(--o)}
.po-floats .lg-xs{width:1.5em;height:1.5em;border-radius:.4em}
.po-floats .lg-xs img{width:.9em;height:.9em}
/* the faint dotted line from each notification down to its agent */
.po-floats li::after{content:"";position:absolute;left:50%;top:100%;height:calc(var(--dy) * 1em);border-left:1.5px dotted rgba(16,52,38,.42);rotate:calc(var(--r) * -1);transform-origin:50% 0}
.pg[data-ofl="off"] .po-floats li::after{display:none}
@media (min-width:761px){
  .pg[data-onot="on"][data-onst="float"]{--rowy:24}
}
@media (prefers-reduced-motion:no-preference){
  .pg[data-omove="drift"] .po-floats li{animation:po-drift 7s ease-in-out infinite alternate;animation-delay:calc(var(--j) * -1.9s - var(--t) * 4s)}
  .is-paused .po-floats li{animation-play-state:paused}
  .pg[data-omove="scroll"] .po-floats li{--a:clamp(0,calc((var(--p,1) - var(--t)) * 4),1);opacity:calc(var(--o) * var(--a));translate:-50% calc((1 - var(--a)) * 1.8em);filter:blur(calc((1 - var(--a)) * 3px));transition:opacity .35s linear,translate .5s var(--ease-out),filter .5s}
}
@keyframes po-drift{from{translate:-50% 0}to{translate:-50% -.6em}}
.pg:is([data-opos="stack"],[data-opos="stackr"],[data-opos="deck"]) .po-floats{display:none!important}

/* ---------- The photograph framed, its sky fading in at the top ---------- */
@media (min-width:761px){
  .pg[data-of="fade"] .po-scene{border-top-left-radius:0;border-top-right-radius:0;background:none}
  .pg[data-of="fade"] :is(.po-img,.po-scene>.grain){-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%);mask-image:linear-gradient(180deg,transparent,#000 26%)}
  .pg[data-of="fade"]:is([data-oext="green"],[data-oext="hills"]) .po-img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 85%,transparent 99%);mask-image:linear-gradient(180deg,transparent,#000 26%,#000 85%,transparent 99%)}
}

/* ---------- Full width: only the photograph fades into the page, never the whole scene. A mask over the glass cards
   and pins made the browser drop those layers and flicker ---------- */
@media (min-width:761px){
  .pg[data-of="bleed"] .po-scene{-webkit-mask-image:none;mask-image:none;background:none}
  .pg[data-of="bleed"] :is(.po-img,.po-scene>.grain){-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
  .pg[data-of="bleed"]:is([data-oext="green"],[data-oext="hills"]) .po-img{-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 85%,transparent 99%);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 85%,transparent 99%)}
}

/* ---------- The screens: width, which is in front, two more arrangements, a fifth screen ---------- */
.po-screens{--sw:880px}
.pg[data-osw="m"] .po-screens{--sw:720px}
.pg[data-osw="s"] .po-screens{--sw:580px}
.po-scr{width:min(100%,var(--sw))}
/* Side by side and in the grid, the two wide screens (Today, the org chart) and the one in front take a full row; the
   smaller ones pair up beneath */
.pg:is([data-oa="row"],[data-oa="grid"]) .po-scr:is([data-scr="today"],[data-scr="org"],[data-k="0"]){grid-column:1 / -1;justify-self:center;width:min(100%,var(--sw))}
.pg:is([data-oa="row"],[data-oa="grid"]):not([data-osw="l"]) .po-screens{max-width:calc(var(--sw) * 1.4);margin-inline:auto}
.pg[data-oa="stack"] .po-screens[data-n="5"]{padding-top:106px}
/* Behind the front screen in a stack or cascade only the title bars show; the bodies turn transparent (any screen can
   now be behind, Today included) */
.pg:is([data-oa="stack"],[data-oa="cascade"]) .po-scr:not([data-k="0"]) .bos-main{visibility:visible;opacity:0}
.pg[data-oa="stack"] .po-scr[data-k="4"]{z-index:0;transform:translateY(-100px) scale(.8);transform-origin:50% 0}
.pg[data-oa="cascade"] .po-scr[data-k="4"]{z-index:0;transform:translate(13%,-128px)}
.pg[data-oa="cascade"] .po-screens[data-n="5"]{padding-top:128px}
@media (max-width:1240px){.pg[data-oa="cascade"] .po-scr[data-k="4"]{transform:translate(6.5%,-128px)}}
/* one under another, in a narrower column */
.pg[data-oa="column"] .po-screens{--sw:760px;grid-template-columns:minmax(0,var(--sw));justify-content:center;gap:18px}
.pg[data-oa="column"][data-osw="m"] .po-screens{--sw:640px}
.pg[data-oa="column"][data-osw="s"] .po-screens{--sw:520px}
.pg[data-oa="column"] .po-scr{grid-area:auto;width:100%}
/* stacked, the screens behind peeking out below */
.pg[data-oa="drop"] .po-screens:not([data-n="1"]){padding-bottom:110px}
.pg[data-oa="drop"] .po-scr{align-self:end}
.pg[data-oa="drop"] .po-scr:not([data-k="0"]){transform-origin:50% 100%}
.pg[data-oa="drop"] .po-scr[data-k="1"]{z-index:3;transform:translateY(28px) scale(.95)}
.pg[data-oa="drop"] .po-scr[data-k="2"]{z-index:2;transform:translateY(54px) scale(.9)}
.pg[data-oa="drop"] .po-scr[data-k="3"]{z-index:1;transform:translateY(78px) scale(.85)}
.pg[data-oa="drop"] .po-scr[data-k="4"]{z-index:0;transform:translateY(100px) scale(.8)}
.pg[data-oa="drop"] .po-scr:not([data-k="0"]) .bos-tag{visibility:hidden}
@media (max-width:760px){
  .pg[data-oa="drop"] .po-screens{padding-bottom:0!important}
  .pg[data-oa="drop"] .po-scr .bos-tag{visibility:visible}
}

/* ---------- The screens' look: soft glass (as before), plain white, clear glass or dark ---------- */
.pg[data-olook="white"] .po-scr .bos{--g-bg:#fff;--g-line:rgba(11,17,16,.1);--g-blur:none}
.pg[data-olook="white"] .po-scr :is(.bos-bar,.bos-rail){background:#FAFBFA}
.pg[data-olook="white"] .po-scr :is(.os-panel,.ps-kpis p){background:#F6F8F7;border-color:rgba(11,17,16,.07)}
.pg[data-olook="glass"] .po-scr .bos{--g-bg:linear-gradient(155deg,rgba(255,255,255,.56),rgba(255,255,255,.34));--g-line:rgba(255,255,255,.6);--g-blur:blur(28px) saturate(1.6)}
.pg[data-olook="glass"] .po-scr :is(.bos-bar,.bos-rail){background:rgba(255,255,255,.22)}
.pg[data-olook="glass"] .po-scr :is(.os-panel,.ps-kpis p){background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.6)}
.pg[data-olook="dark"] .po-scr .bos{--g-bg:linear-gradient(155deg,rgba(30,40,36,.95),rgba(12,18,16,.95));--g-line:rgba(241,239,230,.14);color:var(--bone)}
.pg[data-olook="dark"] .po-scr :is(.bos-bar,.bos-rail){background:rgba(255,255,255,.04);border-color:rgba(241,239,230,.1)}
.pg[data-olook="dark"] .po-scr :is(.os-panel,.ps-kpis p){background:rgba(255,255,255,.05);border-color:rgba(241,239,230,.1);box-shadow:none}
.pg[data-olook="dark"] .po-scr :is(.mono-s,.mono-k,small,.bos-crumb,.ps-gov small){color:rgba(241,239,230,.62)}
.pg[data-olook="dark"] .po-scr :is(.bos-title .bos-mark,.os-h .bos-mark){background:#fff}
.pg[data-olook="dark"] .po-scr :is(.ps-gov li,.ps-roi li,.ps-log li,.td-grid li){border-color:rgba(241,239,230,.08)}
.pg[data-olook="dark"] .po-scr .bos-ri:not(.on){color:rgba(241,239,230,.6)}
.pg[data-olook="dark"] .po-scr .bos-tag{background:rgba(255,255,255,.12);color:rgba(241,239,230,.7)}
.pg[data-olook="dark"] .po-scr .os-sel{background:rgba(255,255,255,.08);border-color:rgba(241,239,230,.14)}
.pg[data-olook="dark"] .po-scr .chip{background:rgba(255,255,255,.1);color:var(--bone)}
.pg[data-olook="dark"] .po-scr .bos-ri.on{background:var(--bone);color:var(--ink)}
.pg[data-olook="dark"] .po-scr .btn-s:not(.btn-s-ink){background:rgba(241,239,230,.06);border-color:rgba(241,239,230,.16);color:var(--bone)}
.pg[data-olook="dark"] .po-scr .btn-s-ink{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.pg[data-olook="dark"] .po-scr .bos-foot{color:var(--bone)}
.pg[data-olook="dark"] .po-scr .os-chip{background:var(--bone);color:var(--ink)}
.pg[data-olook="dark"] .po-scr .tile:not(.tile-ink){background:rgba(255,255,255,.1);color:var(--bone);border-color:rgba(241,239,230,.12)}
.pg[data-olook="dark"] .po-scr .av{background:rgba(255,255,255,.12);color:var(--bone)}
/* the org chart keeps its own light page inside a dark screen */
.pg[data-olook="dark"] .po-scr .pch :is(small,.mono-s){color:var(--grey)}
.pg[data-olook="dark"] .po-scr .pch .tile:not(.tile-ink){background:var(--soft);color:var(--ink)}
.pg[data-olook="dark"] .po-scr .pch .av{background:var(--soft);color:var(--ink)}
.pg[data-olook="dark"][data-ocag="ink"] .po-scr .pch-at small{color:rgba(241,239,230,.68)}
.pg[data-olook="dark"] .po-scr .pch-os small{color:rgba(255,255,255,.64)}

/* ---------- The org chart screen ---------- */
.pch{position:relative;isolation:isolate;container-type:inline-size;display:grid;justify-items:center;padding:clamp(18px,3cqw,32px) clamp(12px,2.4cqw,28px) clamp(16px,2.4cqw,26px);border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(11,17,16,.1);color:var(--ink)}
.pch-img{position:absolute;inset:0;z-index:-2;display:none;width:100%;height:100%;object-fit:cover}
.pch::before{content:"";position:absolute;inset:0;z-index:-1;display:none;background:linear-gradient(180deg,rgba(245,248,246,.8),rgba(245,248,246,.56) 55%,rgba(245,248,246,.76))}
.pch-co{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;background:#fff;border:1px solid rgba(11,17,16,.14);box-shadow:0 10px 24px -16px rgba(8,30,24,.45);font-size:14.5px}
.pch-co b{display:none;font-weight:600}
.pg[data-occo="company"] .pch-co b[data-v="company"],.pg[data-occo="org"] .pch-co b[data-v="org"],.pg[data-occo="teams"] .pch-co b[data-v="teams"]{display:inline}
.pch-tree{width:100%;height:26px;overflow:visible}
.pch-tree path{fill:none;stroke:rgba(11,17,16,.34);stroke-width:1.3;vector-effect:non-scaling-stroke}
.pch-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4cqw,16px);width:100%}
.pch-col{position:relative;display:grid;align-content:start;gap:10px;padding-bottom:24px}
.pch-col::after{content:"";position:absolute;left:50%;bottom:0;height:24px;border-left:1.5px dashed rgba(47,143,106,.65)}
.pch-team{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 10px;border-radius:12px;background:#fff;border:1px solid rgba(11,17,16,.13);box-shadow:0 6px 16px -12px rgba(8,30,24,.45);font-size:13.5px}
.pch-team b{font-weight:600}
.pch-team .tile{width:26px;height:26px}
.pch-ppl{display:flex;justify-content:center;gap:clamp(8px,1.6cqw,16px);padding:4px 0}
.pch-ppl li{display:grid;justify-items:center;gap:4px;font-size:12px;color:var(--ink-2)}
.pch-face{display:grid;place-items:center}
.pch-face>*{grid-area:1 / 1}
.pch-face .sm-face{width:34px;height:34px;box-shadow:0 0 0 2px #fff,0 4px 10px -4px rgba(8,30,24,.55)}
.pch-face .av{display:none;width:32px;height:32px;font-size:11px}
.pg[data-ocpp="ini"] .pch-face .sm-face{display:none}
.pg[data-ocpp="ini"] .pch-face .av{display:grid}
.pg[data-ocpp="off"] .pch-ppl{display:none}
.pch-agent{position:relative;display:flex;align-items:center;gap:10px;min-height:60px;padding:11px;border-radius:13px;background:linear-gradient(160deg,#fff,#F1F8F4);border:1.5px dashed rgba(47,143,106,.7);font-size:13px}
.pch-ic{position:relative;display:grid;flex:none;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#2E3A35,#0B1110);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 12px -6px rgba(8,20,16,.75)}
.pch-ic>.i{width:15px;height:15px}
.pch-spark{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#fff;color:var(--live);box-shadow:0 0 0 2px rgba(155,224,191,.35),0 0 10px rgba(155,224,191,.9)}
.pch-spark .i{width:9px;height:9px}
.pch-at{display:grid;min-width:0;line-height:1.3}
.pch-at b{font-weight:600}
.pch-at small{color:var(--grey);font-size:11.5px}
.pch-ai{position:absolute;top:-9px;right:10px;padding:2px 7px;border-radius:999px;background:#E3F1EA;color:#15463A;font:500 9.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:0 0 0 2px #fff}
.pg[data-ocag="solid"] .pch-agent{background:#fff;border:1px solid rgba(11,17,16,.14);box-shadow:0 8px 20px -14px rgba(8,30,24,.5)}
.pg[data-ocag="ink"] .pch-agent{background:linear-gradient(160deg,#25302C,#0B1110);border:1px solid rgba(255,255,255,.08);color:#fff}
.pg[data-ocag="ink"] .pch-agent .pch-ic{background:rgba(255,255,255,.12)}
.pg[data-ocag="ink"] .pch-at small{color:rgba(241,239,230,.68)}
.pg[data-ocag="ink"] .pch-ai{background:#1E2A26;color:#9BE0BF;border:1px solid rgba(155,224,191,.3)}
.pch-os{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px 18px;width:100%;padding:13px 16px;border-radius:14px;background:linear-gradient(160deg,#1E2724,#0B1110);color:#fff;box-shadow:0 20px 44px -28px rgba(8,20,16,.75)}
.pch-os-t{display:flex;align-items:center;flex-wrap:wrap;gap:4px 11px;font-size:12.5px}
.pch-os-t .bos-mark{width:11px;height:11px;border-radius:3px;background:#fff;box-shadow:0 0 14px rgba(155,224,191,.9)}
.pch-os-t b{font-size:14.5px;font-weight:600}
.pch-os-t small{color:rgba(255,255,255,.64);font-size:12px}
.pch-logos{display:flex;flex-wrap:wrap;gap:5px}
.pch-logos .lg{width:28px;height:28px;border-radius:8px}
.pg[data-ocbar="plain"] .pch-logos,.pg[data-ocbar="off"] .pch-os{display:none}
.pg[data-ocbar="off"] .pch-col::after{display:none}
.pg[data-ocbar="off"] .pch-col{padding-bottom:0}
.pg[data-ocbg="mist"] .pch{background:#ECF1EE}
.pg[data-ocbg="photo"] .pch{background:#DCE4E0}
.pg[data-ocbg="photo"] .pch-img,.pg[data-ocbg="photo"] .pch::before{display:block}
.pg[data-olook="dark"] .po-scr .pch{border-color:rgba(241,239,230,.1)}
.pg[data-cor="square"] :is(.pch,.pch-co,.pch-team,.pch-agent,.pch-os,.pch-logos .lg){border-radius:0}
/* A narrow screen (side by side, the column, a phone): two teams a row, no tree */
@container (max-width:700px){
  .pch-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .pch-tree{display:none}
  .pch-co{margin-bottom:16px}
  .pch-col::after{display:none}
  .pch-col{padding-bottom:0}
}
@container (max-width:420px){
  .pch-cols{grid-template-columns:minmax(0,1fr)}
  .pch-os-t small{display:none}
}

/* Phones: the floating notifications stay on the larger screens, like the other notifications; and the screens are a
   plain list there, so the ones behind the front screen in a stack or cascade show in full */
@media (max-width:760px){
  .po-floats{display:none!important}
  .pg[data-oa] .po-scr .bos-main{visibility:visible!important;opacity:1!important}
}

/* Full width with a top-row card style: the Illustrative tag stays at the foot (it was pinned top and bottom at once,
   which stretched it into a tall pale strip) */
@media (min-width:761px){
  .pg[data-of="bleed"]:is([data-oc="big"],[data-oc="notify"],[data-oc="flow"],[data-oc="person"]) .po-scene>.po-tag{top:auto}
}

/* ---- play-org4.css ---- */
/* The v15 playground, round five (15 Oct): the screens fanned side by side (oa=fanned) so they take less height; a softer
   sky fade whose upper corners blend too; marks for generic systems (ERP, CRM, RFP) beside the tool logos; org chart
   agent boxes all the same size; and "Secure by nature" as white words straight on the photograph. */

/* ---------- Fanned: the screens spread like a hand of cards, the front one in the middle ---------- */
.pg[data-oa="fanned"] .po-screens{padding:18px 0 40px}
.pg[data-oa="fanned"] .po-scr{grid-area:1 / 1;width:min(50%,var(--sw));transform-origin:50% 100%}
.pg[data-oa="fanned"] .po-scr[data-k="0"]{z-index:5}
.pg[data-oa="fanned"] .po-scr[data-k="1"]{z-index:4;transform:translateX(-30%) rotate(-5deg) scale(.88)}
.pg[data-oa="fanned"] .po-scr[data-k="2"]{z-index:4;transform:translateX(30%) rotate(5deg) scale(.88)}
.pg[data-oa="fanned"] .po-scr[data-k="3"]{z-index:3;transform:translateX(-52%) rotate(-9deg) scale(.76)}
.pg[data-oa="fanned"] .po-scr[data-k="4"]{z-index:3;transform:translateX(52%) rotate(9deg) scale(.76)}
.pg[data-oa="fanned"] .po-scr:not([data-k="0"]) .bos-tag{visibility:hidden}
.pg[data-oa="fanned"][data-oor="fan"] .po-scr{rotate:none}
@media (max-width:1100px){
  .pg[data-oa="fanned"] .po-scr{width:min(62%,var(--sw))}
  .pg[data-oa="fanned"] .po-scr[data-k="1"]{transform:translateX(-22%) rotate(-4deg) scale(.86)}
  .pg[data-oa="fanned"] .po-scr[data-k="2"]{transform:translateX(22%) rotate(4deg) scale(.86)}
  .pg[data-oa="fanned"] .po-scr[data-k="3"]{transform:translateX(-34%) rotate(-7deg) scale(.74)}
  .pg[data-oa="fanned"] .po-scr[data-k="4"]{transform:translateX(34%) rotate(7deg) scale(.74)}
}
@media (max-width:760px){
  .pg[data-oa="fanned"] .po-screens{padding:0}
  .pg[data-oa="fanned"] .po-scr .bos-tag{visibility:visible}
}

/* ---------- The sky fade, softer: the top fades, and its upper corners and sides blend in as well ---------- */
@media (min-width:761px){
  .pg[data-of="fade"] :is(.po-img,.po-scene>.grain){
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%),radial-gradient(125% 105% at 50% 100%,#000 66%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent,#000 30%),radial-gradient(125% 105% at 50% 100%,#000 66%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .pg[data-of="fade"]:is([data-oext="green"],[data-oext="hills"]) .po-img{
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent 99%),radial-gradient(125% 105% at 50% 100%,#000 66%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent 99%),radial-gradient(125% 105% at 50% 100%,#000 66%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
}

/* ---------- Generic systems (ERP, CRM, RFP): an ink mark with an icon and the short name ---------- */
.po-gen{display:inline-flex!important;align-items:center;gap:.25em;width:auto!important;height:auto!important;min-height:1.5em;padding:.15em .4em!important;border-radius:.4em;background:linear-gradient(160deg,#2E3A35,#0B1110)!important;color:#fff;font:600 .7em/1 var(--sans);letter-spacing:.02em}
.po-gen .i{width:1em;height:1em;color:#9BE0BF}
.po-tapp .po-gen{min-height:0;padding:.25em!important;font-size:.62em;flex-direction:column;gap:.1em}
.po-tapp .po-gen b{font-size:.9em}
.po-chain .po-gen,.po-wf .po-gen{font-size:.66em}
.pch-gens{display:flex;gap:5px}
.pch-gens span{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 9px;border-radius:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.04em}
.pch-gens .i{width:13px;height:13px;color:#9BE0BF}
.pch-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pg[data-ocbar="plain"] .pch-gens{display:none}

/* ---------- Org chart: every agent box the same size, whatever its words ---------- */
.pch-cols{align-items:stretch}
.pch-col{grid-template-rows:auto auto minmax(0,1fr)}
.pch-agent{grid-row:3;align-self:stretch;height:100%;min-height:68px}
.pch-at small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* ---------- "Secure by nature": white words straight on the photograph or shader, no panel behind them ---------- */

/* ---- play-org5.css ---- */
/* The v15 playground, round six (15 Oct): the floating notifications without a line each (none, or one faint line per
   agent), a parallax on scroll (opar), and "Running on BraindOS" set lower, larger and more faded. */

/* One faint dotted line per agent, from its highest notification down to the card */
.po-floats::before{content:"";position:absolute;left:0;bottom:0;display:none;height:8.6em;border-left:1.5px dotted rgba(16,52,38,.34)}
.pg[data-ofl="one"] .po-floats::before{display:block}
.pg:is([data-ofl="off"],[data-ofl="one"]) .po-floats li::after{display:none}

/* Parallax: as the section scrolls by (--pp runs from -1 to 1, set by play.js), the floating notifications drift up
   faster than the photograph, the big type lags behind it, and the screens rise in. The photograph itself stays put, so
   the headshot pins stay on their people. Off with reduced motion. */
@media (prefers-reduced-motion:no-preference) and (min-width:761px){
  .pg[data-opar="on"] :is(.po-floats,.po-toasts,.po-rise,.po-big,.po-screens){transition:translate .12s linear}
  .pg[data-opar="on"] .po-floats{translate:0 calc(var(--pp,0) * -72px)}
  .pg[data-opar="on"] :is(.po-toasts,.po-rise){translate:-50% calc(var(--pp,0) * -72px)}
  .pg[data-opar="on"] .po-big{translate:0 calc(var(--pp,0) * 52px)}
  .pg[data-opar="on"] .po-screens{translate:0 calc(var(--pp,0) * -40px)}
}

/* "Running on BraindOS", blended: lower (tucked behind the top of the screens), larger, and fainter */
@media (min-width:761px){
  .pg[data-otx="running"][data-ot="blend"] .po-big{bottom:calc(var(--ov) - .2em);font-size:clamp(50px,9.6vw,140px);background:linear-gradient(180deg,rgba(255,255,255,.66),rgba(255,255,255,.22) 60%,rgba(255,255,255,0) 96%);-webkit-background-clip:text;background-clip:text}
}

/* ---- play-org6.css ---- */
/* The org section's later choices (19 Oct 2026): which photograph (opic), how low the screens sit (olow), where
   "Running on BraindOS" goes (opill), and the builders lines' size and arrival (obsz, obin). The builders now close
   the section, after Secure by nature. */

/* The photograph: one of two, each agent's card, line and pin placed on its own people */
.po-img[data-pic]:not([data-pic="morning"]){display:none}
.pg[data-opic="mist"] .po-img[data-pic="morning"]{display:none}
.pg[data-opic="mist"] .po-img[data-pic="mist"]{display:block}
.pg[data-opic="mist"] .po-at{--x:var(--m-x)!important;--y:var(--m-y)!important;--nx:var(--m-nx)!important;--ny:var(--m-ny)!important;--hx:var(--m-hx)!important;--hy:var(--m-hy)!important}
.pg[data-opic="mist"] :is(.po-pins,.po-desks)>li{--hx:var(--m-hx)!important;--hy:var(--m-hy)!important}

/* The screens: over the photograph's foot, lower, or just touching it, so the people show */
.pg[data-olow="low"] .po{--ov:clamp(28px,3.4vw,52px)}
.pg[data-olow="lowest"] .po{--ov:clamp(8px,1vw,14px)}

/* Running on BraindOS: by the heading (as before), or one glass pill centred on the photograph, larger */
.pg:is([data-opill="top"],[data-opill="foot"],[data-opill="off"]) .po-pill{display:none}
.pg[data-opill="off"] .po-run{display:none}
.pg:is([data-opill="top"],[data-opill="foot"]) .po-run{
  left:50%;right:auto;translate:-50% 0;z-index:4;gap:10px;padding:11px 22px 11px 18px;
  font:500 clamp(15px,1.25vw,18px)/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.34));border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 36px -20px rgba(8,30,24,.55)}
.pg:is([data-opill="top"],[data-opill="foot"]) .po-run .bos-mark{width:11px;height:11px;border-radius:3px}
.pg:is([data-opill="top"],[data-opill="foot"]) .po-run>svg{display:none}
.pg[data-opill="top"] .po-run{top:clamp(72px,9cqw,132px);bottom:auto}
.pg[data-opill="foot"] .po-run{bottom:calc(var(--ov) + 18px)}

/* The builders: at the opening statement's size, or the line above the section's; lit word by word as they pass */
.pg[data-obsz="intro"] .po-three,.pg-home[data-obsz="intro"] .po-three{font-size:clamp(30px,3.4vw,50px);line-height:1.12;letter-spacing:-.045em}
.pg[data-obsz="bridge"] .po-three,.pg-home[data-obsz="bridge"] .po-three{font-size:clamp(24px,2.4vw,34px);line-height:1.25;letter-spacing:-.035em}
.pg .po-sec + .po-build{margin-top:clamp(96px,10vw,160px)}
@media (prefers-reduced-motion:no-preference){
  .js .pg[data-obin="words"] .po-three>[data-in]{opacity:1;transform:none;transition:none}
  .js .pg[data-obin="words"] .po-three .w{display:inline-block;opacity:clamp(.14,calc(var(--p,99) - var(--k)),1);transition:opacity .25s linear}
}

@media (max-width:760px){
  .pg[data-opill="top"] .po-run,.pg[data-opill="foot"] .po-run{display:none}
  .pg[data-obsz="intro"] .po-three,.pg-home[data-obsz="intro"] .po-three{font-size:30px}
  .pg[data-obsz="bridge"] .po-three,.pg-home[data-obsz="bridge"] .po-three{font-size:24px}
  .pg .po-sec + .po-build{margin-top:56px}
}

/* The builders line in a glass pill on the photograph's foot, half into the page; the screens start under it
   (opill=after). It replaces the builders block and both small pills. */
.po-after{display:none}
.pg[data-opill="after"] :is(.po-pill,.po-run,.po-build){display:none}
.pg[data-opill="after"] .po-after{
  position:relative;z-index:4;display:flex;align-items:center;gap:12px;width:fit-content;max-width:min(100%,1060px);
  margin:-30px auto 0;padding:15px 26px 15px 20px;border-radius:999px;
  font:500 clamp(15px,1.3vw,19px)/1.35 var(--sans);letter-spacing:-.015em;color:var(--ink-2,#3B3F3C);text-wrap:balance;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.78));border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 40px -24px rgba(8,30,24,.5)}
.pg[data-opill="after"] .po-after b{font-weight:600;color:var(--ink)}
.pg[data-opill="after"] .po-after .bos-mark{flex:none;width:11px;height:11px;border-radius:3px}
.pg[data-opill="after"] .po{--ov:0px}
.pg[data-opill="after"] .po-screens{margin-top:clamp(36px,4vw,56px)}
@media (max-width:760px){
  .pg[data-opill="after"] .po-after{align-items:flex-start;margin-top:14px;padding:13px 16px;border-radius:18px;font-size:15px;
    background:#fff;border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
  .pg[data-opill="after"] .po-after .bos-mark{margin-top:6px}
  .pg[data-opill="after"] .po-screens,.pg.pg-home[data-oa][data-opill="after"] .po-screens{margin-top:16px!important}
}
@media (min-width:1180px){.pg[data-opill="after"] .po-after{white-space:nowrap;max-width:none}}

/* BraindOS as a glass badge with a live dot, one style everywhere (19 Oct 2026): under or on the photograph, and in
   the line before the section */
.bos-badge{display:inline-flex;align-items:center;gap:10px;width:fit-content;margin:0;padding:11px 18px 11px 15px;border-radius:999px;
  font:500 16px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;vertical-align:middle;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.86));border:1px solid rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(11,17,16,.05),0 18px 36px -22px rgba(8,30,24,.55)}
.bos-badge b{font-weight:600;color:var(--ink)}
.bos-badge .bos-mark{flex:none;width:10px;height:10px;border-radius:3px;background:var(--ink)}
.bos-live{flex:none;width:7px;height:7px;margin-left:2px;border-radius:50%;background:#2FB383;box-shadow:0 0 0 4px rgba(47,179,131,.18)}
.bos-badge-in{margin-left:.2em;translate:0 -.12em}

/* The builders line and the badge: under the photograph (tool: the badge alone, half into the page; below: the line
   above it), or on the photograph's foot (onimg) */
.po-tool,.po-foot{display:none}
.po-say{margin:0;text-wrap:balance}
.pg:is([data-opill="tool"],[data-opill="onimg"],[data-opill="below"]) :is(.po-pill,.po-run,.po-build,.po-after){display:none}
.pg:is([data-opill="tool"],[data-opill="below"]) .po-tool{position:relative;z-index:4;display:grid;justify-items:center;gap:22px}
.pg[data-opill="tool"] .po-tool{margin-top:-24px}
.pg[data-opill="tool"] .po-tool .po-say{display:none}
.pg[data-opill="below"] .po-tool{margin-top:clamp(64px,7vw,104px);gap:28px}
.pg[data-opill="below"] .po-say{display:grid;justify-items:center;text-align:center;font:500 clamp(30px,3.4vw,50px)/1.12 var(--sans);letter-spacing:-.045em;color:var(--ink)}
.pg[data-opill="below"] .po-say>span:nth-child(2){color:var(--grey)}
.pg[data-opill="below"] .po-say>span:nth-child(3){color:var(--dim)}
@media (prefers-reduced-motion:no-preference){.js .pg .po-say[data-scrub] .w{opacity:clamp(.08,calc(var(--p,99) - var(--k)),1);transition:opacity .25s linear}}
.pg:is([data-opill="tool"],[data-opill="onimg"],[data-opill="below"]) .po{--ov:0px}
.pg:is([data-opill="tool"],[data-opill="onimg"],[data-opill="below"]) .po-screens{margin-top:clamp(40px,4.4vw,64px)}
.pg[data-opill="onimg"] .po-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:grid;justify-items:center;gap:1.1cqw;padding:3.2cqw 3cqw 2cqw}
.pg[data-opill="onimg"] .po-foot::before{content:"";position:absolute;inset:-40% 0 0;z-index:-1;background:linear-gradient(180deg,rgba(4,16,10,0),rgba(4,16,10,.5) 70%);pointer-events:none}
.pg[data-opill="onimg"] .po-foot .po-say{text-align:center;font:400 clamp(15px,1.8cqw,27px)/1.2 var(--news);letter-spacing:-.01em;color:#fff;text-shadow:0 2px 16px rgba(2,10,6,.55);white-space:nowrap}
.pg[data-opill="onimg"] .po-foot .bos-badge{font-size:clamp(13px,1.1cqw,16px);padding:.65em 1.1em .65em .9em}
@media (max-width:760px){
  .bos-badge{padding:9px 14px 9px 12px;font-size:14.5px;gap:8px}
  .pg[data-opill="tool"] .po-tool{margin-top:-20px}
  /* on a phone the photograph is too short for words: the line and the badge go under it */
  .pg[data-opill="onimg"] .po-foot{display:none}
  .pg[data-opill="onimg"] .po-tool{position:relative;z-index:4;display:grid;justify-items:center;gap:14px;margin-top:18px}
  .pg[data-opill="onimg"] .po-tool .po-say{display:block;max-width:24ch;text-align:center;font:400 22px/1.22 var(--news);letter-spacing:-.01em;color:var(--ink)}
  .pg[data-opill="below"] .po-say{font-size:28px;line-height:1.15}
  .pg[data-opill="below"] .po-tool{margin-top:40px;gap:20px}
  .pg:is([data-opill="tool"],[data-opill="onimg"],[data-opill="below"]) .po-screens,
  .pg.pg-home[data-oa]:is([data-opill="tool"],[data-opill="onimg"],[data-opill="below"]) .po-screens{margin-top:22px!important}
}

/* Secure by nature (19 Oct 2026): framed, as signed off, or the photograph running the page's width and fading into
   the page above and below (osfr); its heading above the photograph or on it (oshd). No band of its own. */
.pg .po-sec{margin-top:clamp(88px,9vw,140px)}
.pg[data-oshd="above"] .po-sec-head{margin-bottom:clamp(20px,2.4vw,32px)}
.pg[data-osfr="bleed"][data-osec="photo"] .po-sec-box{width:100vw;margin-left:calc(50% - 50vw);border-radius:0;padding:clamp(72px,8vw,128px) max(16px,calc(50vw - 600px))}
.pg[data-osfr="bleed"][data-osec="photo"] .po-sec-back{-webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent)}
.pg[data-oshd="on"] .po-sec-head{position:absolute;left:0;right:0;top:clamp(32px,4vw,56px);z-index:2;margin:0}
.pg[data-oshd="on"][data-osfr="bleed"] .po-sec-head{top:clamp(80px,9vw,140px)}
.pg[data-oshd="on"] .po-sec-box{padding-top:calc(clamp(32px,4vw,56px) + clamp(110px,10vw,140px))}
.pg[data-oshd="on"][data-osfr="bleed"] .po-sec-box{padding-top:calc(clamp(80px,9vw,140px) + clamp(110px,10vw,140px))}
.pg[data-oshd="on"]:is([data-osec="photo"],[data-osec="shader"],[data-osec="dark"]) .po-sec-head{color:#fff;text-shadow:0 2px 18px rgba(4,12,9,.45)}
.pg[data-oshd="on"]:is([data-osec="photo"],[data-osec="shader"],[data-osec="dark"]) .po-sec-head .v-lead{color:rgba(255,255,255,.9)}
@media (max-width:760px){
  .pg .po-sec{margin-top:64px}
  .pg[data-osfr="bleed"][data-osec="photo"] .po-sec .po-sec-box{padding:56px 14px}
  .pg[data-oshd="on"] .po-sec .po-sec-box{padding-top:150px}
}

/* The org heading takes the full width when it has no lead beside it (the homepage shows a lead only with the
   builders heading) */
.pg-home:not([data-oh="builders"]) .po .po-lead .v-lead{display:none}
.pg-home:not([data-oh="builders"]) .po .v-head{grid-template-columns:minmax(0,1fr)}

/* Secure by nature on a phone (19 Oct 2026): no photograph, the four cards stacked in plain white */
@media (max-width:760px){
  .pg[data-osec] .po-sec .po-sec-box{padding:0!important;width:auto!important;margin-left:0!important;overflow:visible;border-radius:0;background:none}
  .pg[data-osec] .po-sec .po-sec-back{display:none!important}  /* no photograph on a phone: just the four cards (19 Oct 2026) */
  .pg[data-oshd="on"] .po-sec-head{position:static;color:var(--ink);text-shadow:none}
  .pg[data-oshd="on"] .po-sec-head .v-lead{color:var(--grey)}
  .pg[data-oshd="on"] .po-sec-head{margin-bottom:20px}
  .pg[data-osec] .po-sec .po-scs{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  .pg[data-osec] .po-sec .po-sc{background:#fff!important;border:1px solid var(--line)!important;box-shadow:0 1px 2px rgba(8,30,24,.05)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    grid-template-columns:minmax(0,1fr);padding:14px 14px 16px}
  .pg[data-osec] .po-sec .po-sc .sc-ui{background:var(--soft)!important}
  .pg[data-osec] .po-sec .po-sc p{color:var(--grey)}
}

/* ---- play-how2.css ---- */
/* How we work, the accordion (19 Oct 2026): no dividers and no plus buttons. On a wide screen the steps and the
   picture stay put while the page scrolls, and the scroll opens each step in turn (site.js); a step's title still
   jumps to it. On a phone it stays an ordinary accordion under the picture. */
.hz-list{border-top:0}
.hz-item{border-bottom:0}
.hz-plus{display:none}
.hz-item summary{grid-template-columns:minmax(0,1fr);padding:16px 0}
.hz-item:first-child summary{padding-top:0}
.hz-item:not([open]) summary .pk{opacity:.55;transition:opacity .3s}
.hz-item summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}
@media (min-width:901px){
  .js .hz-acc{--acc-top:max(96px,calc(50vh - 330px));min-height:calc(660px + 150vh)}
  .js .hz-acc .hz-list,.js .hz-acc .hz-stage{position:sticky;top:var(--acc-top)}
  .js .hz-acc .hz-list{align-self:start}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .js .hz-acc{min-height:0}
  .js .hz-acc .hz-list{position:static}
}

/* ---- home-v19.css ---- */
/* The homepage, 19 Oct 2026: the intro in two lines, every word lit by the scroll; the bridge's second sentence on its
   own line with BraindOS in the glass tab; the screens centred; the case studies on shaders, dark and light in turn. */
.v-intro-sans .v-intro-t{max-width:min(100%,1120px)}
.v-intro-l{display:block;text-wrap:balance}
.v-intro-l + .v-intro-l{max-width:31ch;margin-inline:auto}
@media (prefers-reduced-motion:no-preference){
  .js .v-intro-scrub .w,.js .v-intro-scrub .w.dim,.js .v-intro-scrub .dim .w{opacity:clamp(.08,calc(var(--p,99) - var(--k)),1)}
}

.os-pill.os-glass{gap:.36em;padding:.14em .62em .14em .5em;color:var(--ink);vertical-align:.08em;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.88));border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,17,16,.06),0 14px 28px -18px rgba(8,30,24,.5)}
.os-pill.os-glass .bos-mark{background:var(--ink);box-shadow:none}

.pg.pg-home .po-screens{margin-inline:auto}

.ow-sh{background:radial-gradient(60% 80% at 18% 22%,var(--c1),transparent 70%),radial-gradient(55% 75% at 82% 18%,var(--c2),transparent 72%),
  radial-gradient(70% 80% at 70% 88%,var(--c1),transparent 70%),radial-gradient(60% 70% at 20% 90%,var(--c4),transparent 72%),var(--c3);transition:filter .5s var(--ease-out)}
.ow-sh>.grain{z-index:0;opacity:.6}
.ow-a:hover .ow-sh{filter:saturate(1.18) brightness(1.04)}
.ow-sh.is-light::after{display:none}
.ow-sh.is-light .ow-fig{color:var(--ink)}
.ow-sh.is-light .ow-fig span{opacity:.75}
.ow-sh :is(.ow-ind,.ow-fig){z-index:1}

/* The org heading has no lead beside it, so it takes the full width: two lines, not three */


/* Phones (19 Oct 2026) */
.pz-how-phone{display:none}
@media (max-width:760px){
  /* How we work: the swipeable row of the four steps, as before; the accordion is for wider screens */
  .pz-how-phone{display:block}
  .pz-how-body:not(.pz-how-phone):has(+ .pz-how-phone){display:none}

  /* The org: the valley photograph framed as on a desktop, so each card's line lands on its own person */
  .pg-home[data-opic="mist"] .po-img{object-position:50% 100%!important;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 88%,transparent)!important;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 88%,transparent)!important}
  .pg.pg-home[data-opic="mist"][data-opos] .po-at{--cxm:clamp(15, calc(var(--nx) * 1.125 - 6.25), 85)!important;--hxm:calc(var(--hx) * 1.125 - 6.25)!important;
    top:calc((var(--ny) * .9 + 10) * 1%)!important}
  .pg.pg-home[data-opic="mist"] .po-line{height:calc((var(--hy) - var(--ny)) * .675cqw)!important}

  /* Industries: each photograph centred on its subject */
  .ix-p:nth-child(1) .ix-img{object-position:100% 60%!important}
  .ix-p:nth-child(2) .ix-img{object-position:100% 55%!important}
  .ix-p:nth-child(3) .ix-img{object-position:58% 60%!important}
  .ix-p:nth-child(4) .ix-img{object-position:100% 55%!important}
}

/* ---- play-mobile.css ---- */
/* How we work and the AI-native org on phones (the homepage, play_final.py, and the playground). The usual pattern for
   wide product UI on small screens: long runs become swipeable rows (CSS scroll snap, a peek of the next card), one
   screen in focus at a time, dense parts trimmed, and the costly layers (backdrop blur, grain, floating notifications,
   shaders) switched off so scrolling stays smooth. Also, for every width: "Running on BraindOS" a lot fainter. */

/* "Running on BraindOS", blended into the photograph: much fainter than before */
@media (min-width:761px){
  .pg[data-otx="running"][data-ot="blend"] .po-big{background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,255,255,.14) 58%,rgba(255,255,255,0) 94%);-webkit-background-clip:text;background-clip:text}
}

@media (max-width:760px){
  /* ---------- Smooth first: no blur behind glass, no grain, no blend layers ---------- */
  .pg *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .pg .grain{display:none}
  .pg .bos{--g-bg:linear-gradient(155deg,#fff,#F3F6F4);--g-line:rgba(11,17,16,.1)}
  .pg[data-olook="dark"] .bos{--g-bg:linear-gradient(155deg,#1E2724,#0F1513)}

  /* ---------- A swipeable row: one card in view, the next peeking in ---------- */
  .pg :is(.hz-alt,.po-agents,.po-screens){display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:86%;gap:12px!important;align-items:start;
    margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 14px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .pg :is(.hz-alt,.po-agents,.po-screens)::-webkit-scrollbar{display:none}
  .pg :is(.hz-row,.po-at,.po-scr){scroll-snap-align:start}

  /* How we work: four steps side by side, each its picture first, then its words */
  .pg .hz-alt{grid-auto-columns:84%}
  .pg .hz-row{display:grid;grid-template-columns:minmax(0,1fr)!important;align-content:start;gap:14px}
  .pg .hz-row .pf{order:-1}
  .pg .hz-row .pz-words{order:0;gap:8px}
  .pg .hz-row .pz-get{display:none}
  .pg .hz-row .pz-lines{font-size:24px}
  .pg .hz-row .pz-body{font-size:14.5px;line-height:1.5}
  .pg .pz-how .v-head{margin-bottom:22px}

  /* The org: the photograph, then the agents in a row of compact cards */
  .pg .po-agents{grid-auto-columns:74%;margin-top:12px;font-size:12.5px!important}
  .pg .po-at{position:static!important;width:auto!important;translate:none!important}
  .pg .po-card{height:100%;min-width:0}
  .pg .po-ch{grid-template-columns:auto minmax(0,1fr) auto!important}
  .pg .po-t :is(b,small){white-space:normal!important;overflow-wrap:anywhere}
  .pg .po-chain>span:last-child{white-space:normal!important}
  .pg .po-big{margin-top:14px;font-size:7.6vw!important;white-space:nowrap;letter-spacing:-.05em;color:transparent!important;background:linear-gradient(180deg,rgba(11,17,16,.2),rgba(11,17,16,.08))!important;-webkit-background-clip:text!important;background-clip:text!important;text-align:center}

  /* The BraindOS screens: one at a time, swiped, a little smaller */
  .pg .po-screens{grid-auto-columns:90%;margin-top:18px!important}
  .pg .po-scr,.pg[data-oa] .po-scr[data-k]{width:100%!important;grid-column:auto!important;grid-row:auto!important;justify-self:stretch!important}
  .pg .po-scr .bos{zoom:.88}
  /* the org chart, compact: two teams a row, the people as faces only */
  .pg .pch-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important;row-gap:12px!important;gap:8px}
  .pg .pch{padding:14px 10px}
  .pg .pch-tree,.pg .pch-col::after,.pg .pch-os-t small,.pg .pch-gens{display:none}
  .pg .pch-ppl li>span:not(.pch-face){display:none}
  .pg .pch-ppl{gap:6px;padding:2px 0}
  .pg .pch-team{padding:7px 6px;font-size:12px;gap:6px}
  .pg .pch-team .tile{display:none}
  .pg .pch-agent{min-height:0;padding:9px 8px;gap:7px;font-size:11.5px}
  .pg .pch-at small{font-size:10.5px}
  .pg .pch-ai{display:none}
  .pg .pch-col{padding-bottom:0}
  .pg .pch-co{margin-bottom:12px;padding:8px 12px;font-size:13px}

  /* Builders and security: shorter, the four cards in a two by two grid, words only */
  .pg .po-build{margin-top:44px;gap:16px}
  .pg .po-three{font-size:26px}
  .pg .po-sec{margin-top:44px}
  .pg:not([data-osec="plain"]) .po-sec-box{padding:28px 14px}
  .pg .po-scs{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .pg .po-sc{padding:14px 12px 16px;gap:6px}
  .pg .po-sc .sc-ui{min-height:54px;margin-bottom:4px;font-size:11px;zoom:.66;overflow:hidden}
  .pg .po-sc .sc-ui>*{max-width:100%}
  .pg .po-sc .sc-seg{flex-wrap:wrap;justify-content:center}
  .pg .po-sc h4{overflow-wrap:anywhere;hyphens:auto}
  .pg:is([data-osec="photo"],[data-osec="shader"]) .po-sc{background:rgba(255,255,255,.92)}
}

/* ---------- The homepage on phones (15 Oct, final pass) ---------- */
@media (max-width:760px){
  /* How we work: every step's picture the same size, and room under the row so the button's shadow is never cut off */
  .pg-home .hz-alt{padding-bottom:34px!important}
  .pg-home .hz-row .pf{aspect-ratio:4 / 3.6!important;height:auto;min-height:0;padding:14px;overflow:hidden}
  .pg-home .hz-row .pf .pv-box{--vbase:.78}
  .pg-home .hz-row .pb{box-shadow:0 14px 24px -18px rgba(8,20,16,.55)}

  /* The AI-native org: the same picture as on a desktop, a little taller (all five people still in it), the agents as
     small cards above their people, no notifications and no big type; the screens below, in the desktop's arrangement */
  .pg-home .po-sw{margin-inline:calc(-1 * var(--gutter))}
  .pg-home .po-scene{aspect-ratio:4 / 3!important;overflow:hidden!important;border-radius:0;background:none!important;container-type:inline-size}
  .pg-home .po-img{position:absolute!important;inset:0;z-index:-2;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0;object-position:36.7% 100%!important;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 80%,transparent)!important;mask-image:linear-gradient(180deg,transparent,#000 30%,#000 80%,transparent)!important}
  .pg.pg-home[data-opos] .po-agents{position:absolute!important;inset:0!important;display:block!important;width:auto!important;margin:0!important;padding:0!important;overflow:visible!important;font-size:calc(100cqw / 42)!important;scroll-snap-type:none}
  .pg.pg-home[data-opos] .po-at{--cxm:clamp(15, calc((var(--nx) - 3.6) / .8), 85);--hxm:calc((var(--hx) - 3.6) / .8);position:absolute!important;left:calc(var(--cxm) * 1%)!important;top:calc(var(--ny) * 1%)!important;width:max-content!important;translate:-50% -100%!important}
  .pg-home .po-line{display:block!important;left:calc(50% + (var(--hxm) - var(--cxm)) * 1cqw)!important;top:100%!important;height:calc((var(--hy) - var(--ny)) * .75cqw)!important;border-left-width:1px}
  .pg-home .po-line::after{width:5px;height:5px;left:-3px;bottom:-3px}
  .pg-home .po-card{gap:0;padding:.45em .7em .45em .45em;border-radius:.9em;height:auto}
  .pg-home .po-ch{grid-template-columns:auto auto!important;gap:.5em}
  .pg-home .po-ic{width:2.2em;height:2.2em;border-radius:.65em}
  .pg-home .po-spark{width:1.1em;height:1.1em}
  .pg-home .po-t b{font-size:1.05em;white-space:nowrap!important}
  .pg-home :is(.po-t small,.po-ch .dot-l,.po-chain,.po-wf,.po-hf,.po-floats,.po-rise,.po-toasts,.po-big,.po-run,.po-desks,.po-pins){display:none!important}
  /* the screens: small, overlapping the photograph's foot as on a desktop, in one row swiped sideways */
  .pg.pg-home[data-oa] .po-screens{position:relative;z-index:3;display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-auto-columns:64%!important;gap:10px!important;align-items:start;
    margin:-12% calc(-1 * var(--gutter)) 0!important;padding:4px var(--gutter) 18px!important;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .pg.pg-home[data-oa] .po-screens::-webkit-scrollbar{display:none}
  .pg.pg-home[data-oa] .po-scr[data-k]{grid-column:auto!important;width:100%!important;scroll-snap-align:start}
  .pg-home .po-scr .bos{zoom:.5;box-shadow:0 30px 60px -30px rgba(8,30,24,.5)}

  /* More room for the three lines, each arriving on its own */
  .pg-home .po-build{margin-top:56px;gap:18px}
  .pg-home .po-three{gap:6px;line-height:1.15}
}