/* B327 · the page content, designed for the phone. B324 to B326 shipped the app shell (top bar, tab bar, sheets, mini player);
   this layer makes what sits inside it read as screens in a native app, not a desktop page stacked into one column.
   Everything is inside the shell's own media query and behind html.sh-on, so laptops and desktops render exactly as before.
   The system, in brief:
   - type: large title 2.125rem, title 1.625rem, headline 1.0625rem semibold, body 1.0625rem on 1.55, callout .9375rem,
     footnote .8125rem; Rubik for the UI, Source Serif left wherever CultureAI's own words already use it
   - spacing on a 4 and 8 grid: a 20px gutter, 48px between sections, 16px from a section header to its content
   - one radius scale: 12 (tiles, segments), 20 (cards, grouped lists), 28 (media and hero visuals); buttons stay pills
   - surfaces from the B325 palette only: white page, #f5f7fc grouped fill, #e3e8f2 segment track, navy ink, CultureAI blue
   - patterns: large titles that hand off to the top bar, title-on-white heroes with the visual as its own card, inset grouped
     lists, stat tiles, segmented controls, sticky list headers, swipe rows, an app home
   - one motion moment: the large title handing its name to the top bar as it scrolls under it
   app-b327.js adds the few hooks CSS can't: the bar's title, the home order, and the founders and Lab switches. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  :root{
    --a-gut:var(--px-gut,20px);
    --a-fill:#f5f7fc;
    --a-track:#e3e8f2;
    --a-line:#e3e8f2;
    --a-hair:rgba(10,22,51,.1);
    --a-ink:#0a1633;
    --a-char:#425170;
    --a-mute:#566074;
    --a-blue:#1559f5;
    --a-r-s:12px;
    --a-r-m:20px;
    --a-r-l:28px;
    --a-t-large:700 2.125rem/1.1 var(--px-sans,"Rubik",system-ui,sans-serif);
    --a-t-title:600 1.625rem/1.15 var(--px-sans,"Rubik",system-ui,sans-serif);
    --a-t-head:600 1.0625rem/1.3 var(--px-sans,"Rubik",system-ui,sans-serif);
    --a-t-body:400 1.0625rem/1.55 var(--px-sans,"Rubik",system-ui,sans-serif);
    --a-t-call:400 .9375rem/1.45 var(--px-sans,"Rubik",system-ui,sans-serif);
    --a-t-foot:400 .8125rem/1.35 var(--px-sans,"Rubik",system-ui,sans-serif);
    --a-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 15'%3E%3Cpath d='m1.5 1.5 6 6-6 6' fill='none' stroke='%230a1633' stroke-opacity='.3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* the large title and its hand-off to the top bar                                                                    */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on .px-head .px-in{position:relative}
  html.sh-on .px-head .px-brand{transition:opacity .2s var(--sh-out),transform .2s var(--sh-out)}
  html.sh-on .a-ttl{position:absolute;left:100px;right:100px;top:50%;margin:0;transform:translateY(calc(-50% + 6px));opacity:0;pointer-events:none;
    font:600 1.0625rem/1.2 var(--px-sans,"Rubik",sans-serif);letter-spacing:-.01em;color:var(--a-ink);text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--sh-out),transform .2s var(--sh-out)}
  html.sh-on.a-titled .a-ttl{opacity:1;transform:translateY(-50%);transition:opacity .25s var(--sh-in),transform .3s var(--sh-in)}
  html.sh-on.a-titled .px-head .px-brand{opacity:0;transform:translateY(-6px);pointer-events:none}
  html.sh-on.a-titled .px-head{border-bottom-color:var(--sh-hair)}

  /* a re-tap of the tab you're on scrolls to the top, where the shell's bar grows back from 46 to 58px; scroll anchoring would
     push the page down by up to that much once the scroll ends (it landed 1 to 12px short, on B326 too under load), so for the
     two seconds after that tap only, anchoring is off (app-b327.js sets a-to-top) */
  html.sh-on.a-to-top body{overflow-anchor:none}

  html.sh-on main :is(.sx-copy,.px-hmain,.px-lhero .px-wrap,.px-nf .px-wrap,.hv-hero-g)>h1,
  html.sh-on main .px-nf h1{font:var(--a-t-large)!important;letter-spacing:-.022em!important;text-wrap:balance;margin-top:0}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* heroes: the title on white, the visual as its own card                                                             */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on main>.sx-hero:first-child{margin:0!important;border-radius:0!important;box-shadow:none!important;border:0!important;background:#fff!important;overflow:visible}
  html.sh-on main>.sx-hero:first-child>.sx-wave{display:none!important}
  html.sh-on main>.sx-hero:first-child>.sx-in{padding:12px var(--a-gut) 8px!important;row-gap:24px!important}
  html.sh-on .sx-hero .sx-copy .sx-dek{font:var(--a-t-body)!important;color:var(--a-char)!important;margin-top:12px!important;max-width:none!important}
  html.sh-on main>.sx-hero:first-child .sx-copy{text-align:left!important;align-items:flex-start!important;margin-left:0!important;margin-right:0!important}
  html.sh-on main>.sx-hero:first-child .sx-copy>*{margin-left:0!important;margin-right:0!important}
  html.sh-on .sx-hero .sx-ctas{justify-content:flex-start!important;margin-top:20px!important;display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 20px!important}
  /* the visual beside the title on a laptop sits under it here, on a soft blue card of its own */
  html.sh-on main>.sx-hero:first-child .sx-hero-g>:not(.sx-copy){position:relative;margin:0 calc(-1 * var(--a-gut) + 10px)!important;padding:16px!important;
    border-radius:var(--a-r-l);background:linear-gradient(165deg,#e8efff 0%,#f5f7fc 55%,#fff 100%);box-shadow:inset 0 0 0 .5px rgba(21,89,245,.14);max-width:none!important;width:auto!important}
  html.sh-on main>.sx-hero:first-child .sx-hero-g>figure.ct-map{padding:0!important;overflow:clip;background:#fff}
  /* the note's title screen */
  html.sh-on main>.px-ahero:first-child,html.sh-on main>.px-lhero:first-child{margin:0!important;border-radius:0!important;box-shadow:none!important;border:0!important;background:#fff!important}
  html.sh-on main>.px-ahero:first-child::before,html.sh-on main>.px-ahero:first-child::after,
  html.sh-on main>.px-lhero:first-child::before,html.sh-on main>.px-lhero:first-child::after{display:none!important}

  /* 404 and the dispatch page: the same plain title screen; the row titles lose their old arrow, the chevron says it now */
  html.sh-on main>.px-nf::before,html.sh-on main>.px-nf::after{display:none!important}
  html.sh-on main>.px-nf{padding-top:24px!important}
  html.sh-on main .px-nfl b::after{display:none!important}
  html.sh-on main .px-nfl{margin-top:16px!important}

  /* the closing call to action: an inset card like the hero's, its title and buttons on the left */
  html.sh-on main>.sx-close{margin:48px 10px 16px!important;padding:28px 20px 24px!important;border-radius:var(--a-r-l)!important;overflow:clip;isolation:isolate;
    background:linear-gradient(165deg,#e8efff 0%,#f5f7fc 60%,#fff 100%)!important;box-shadow:inset 0 0 0 .5px rgba(21,89,245,.14)!important;text-align:left!important}
  html.sh-on main>.sx-close>.sx-wave{display:none!important}
  html.sh-on main>.sx-close>.sx-in{padding:0!important;text-align:left!important}
  html.sh-on main>.sx-close h2{font:var(--a-t-title)!important;letter-spacing:-.018em!important;text-align:left!important;margin:0!important;max-width:none!important;text-wrap:balance}
  html.sh-on main>.sx-close p{text-align:left!important;margin-left:0!important}
  html.sh-on main>.sx-close .sx-ctas{display:flex!important;flex-direction:column;align-items:stretch!important;gap:4px!important;margin-top:20px!important}
  html.sh-on main>.sx-close .sx-btn{justify-content:center;min-height:50px;width:100%!important}
  html.sh-on main>.sx-close .sx-btn.ghost{background:transparent!important;box-shadow:none!important}

  /* a note's player is the hero control of its title screen: an elevated card the width of the hero cards, a bigger play */
  html.sh-on .px-lis323{margin-left:-10px!important;margin-right:-10px!important;padding:16px!important;border:0!important;border-radius:var(--a-r-m)!important;background:#fff!important;
    box-shadow:0 0 0 .5px rgba(10,22,51,.1),0 16px 36px -20px rgba(10,22,51,.4)!important}
  html.sh-on .px-lis323 .px-lis-pp{width:64px!important;height:64px!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* section rhythm and headers                                                                                         */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on main>.sx-sec,html.sh-on main>.px-sec{padding-top:48px!important;padding-bottom:0!important}
  html.sh-on main>.sx-sec>.sx-in,html.sh-on main>.px-sec>.px-wrap{padding-left:var(--a-gut)!important;padding-right:var(--a-gut)!important}
  html.sh-on main :is(.sx-head,.os-head)>h2,html.sh-on main .sx-sec>.sx-in>h2,html.sh-on main .px-sec h2.px-h2{font:var(--a-t-title)!important;letter-spacing:-.018em!important;text-wrap:balance}
  html.sh-on main :is(.sx-head,.os-head)>p{font:var(--a-t-body)!important;margin-top:8px!important;max-width:none!important}
  html.sh-on main :is(.sx-head,.os-head){margin-bottom:20px!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* stat tiles: numbers as tiles, two by two                                                                           */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on main :is(.sx-nums,.ok-nums,.cs-nums){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;border:0!important;margin:0!important;padding:0!important}
  html.sh-on main :is(.sx-nums,.ok-nums,.cs-nums)>div{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;gap:6px!important;min-height:112px;
    padding:16px!important;margin:0!important;border:0!important;border-radius:var(--a-r-m)!important;background:var(--a-fill)!important}
  html.sh-on main :is(.sx-nums,.ok-nums,.cs-nums) dd{order:-1;margin:0!important;font:700 1.875rem/1 var(--px-sans,"Rubik",sans-serif)!important;letter-spacing:-.03em!important;
    color:var(--a-ink)!important;font-variant-numeric:tabular-nums}
  html.sh-on main :is(.sx-nums,.ok-nums,.cs-nums) dt{font:var(--a-t-foot)!important;color:var(--a-mute)!important;max-width:none!important;margin:0!important}
  html.sh-on main .sx-stats .sx-head>h2,html.sh-on main .ok-proof h2{font:var(--a-t-title)!important;letter-spacing:-.018em!important}
  html.sh-on main .sx-src-note{margin-top:12px!important;font:var(--a-t-foot)!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* inset grouped lists: the link lists, the routes, the facts, the checks                                             */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on main :is(.pf-grid,.pf-langs,.ct-grid,.px-nfl,.sec-grid,.st-rows,.ok-checks,.os-cards,.rv-in-list),
  html.sh-on main :is(.ct-facts,.fd-facts){display:block!important;margin:0!important;padding:0!important;list-style:none;background:var(--a-fill)!important;
    border:0!important;border-radius:var(--a-r-m)!important;overflow:hidden;box-shadow:none!important;columns:auto!important}
  html.sh-on main :is(.pf-grid,.pf-langs,.ct-grid,.px-nfl,.sec-grid,.st-rows,.ok-checks,.os-cards,.rv-in-list)>li,
  html.sh-on main :is(.ct-facts,.fd-facts)>div{position:relative;display:block;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;min-height:0}
  /* hairlines between rows, inset 16px, drawn as a background so the rows' own ::before and ::after (icons, checks) stay */
  html.sh-on main :is(.pf-grid,.pf-langs,.ct-grid,.px-nfl,.sec-grid,.st-rows,.ok-checks,.os-cards,.rv-in-list)>li+li,
  html.sh-on main :is(.ct-facts,.fd-facts)>div+div{background:linear-gradient(var(--a-hair),var(--a-hair)) 16px 0/100% .5px no-repeat!important}
  /* rows that open something: the whole row is the link, a chevron at the end, the press shows on the touch */
  html.sh-on main :is(.pf-grid,.ct-grid,.px-nfl)>li>a{display:block!important;position:relative;min-height:56px;padding:14px 40px 14px 16px!important;margin:0!important;border:0!important;
    border-radius:0!important;box-shadow:none!important;color:var(--a-ink)!important;text-decoration:none!important;transform:none!important;-webkit-tap-highlight-color:transparent}
  html.sh-on main :is(.pf-grid,.ct-grid,.px-nfl)>li>a{background:var(--a-chev) right 16px center/9px 15px no-repeat!important}
  html.sh-on main :is(.pf-grid,.ct-grid,.px-nfl)>li>a:active{background-color:rgba(21,89,245,.07)!important}
  html.sh-on main :is(.pf-grid,.ct-grid,.px-nfl)>li>a:focus-visible{outline:2px solid var(--a-blue);outline-offset:-3px;border-radius:14px!important}
  html.sh-on main :is(.pf-grid,.ct-grid,.px-nfl) :is(h3,b){display:block;font:var(--a-t-head)!important;letter-spacing:-.005em!important;color:var(--a-ink)!important;margin:0!important}
  html.sh-on main :is(.pf-grid,.ct-grid,.px-nfl)>li>a :is(p,span:not(.pf-tag):not(.ct-k):not([aria-hidden]),em){display:block;font:var(--a-t-call)!important;color:var(--a-mute)!important;margin:3px 0 0!important}
  html.sh-on main :is(.pf-tag,.ct-k){display:block;font:500 .8125rem/1.3 var(--px-sans,"Rubik",sans-serif)!important;letter-spacing:0!important;text-transform:none!important;color:var(--a-blue)!important;margin:0 0 3px!important}
  html.sh-on main :is(.pf-go,.ct-grid em){display:none!important}
  /* plain rows: a title and a line under it */
  html.sh-on main :is(.pf-langs,.sec-grid,.st-rows,.ok-checks,.os-cards,.rv-in-list)>li{padding:14px 16px!important}
  html.sh-on main :is(.pf-langs,.sec-grid,.ok-checks,.os-cards,.rv-in-list)>li :is(h3,b,strong){display:block;font:var(--a-t-head)!important;color:var(--a-ink)!important;margin:0!important}
  html.sh-on main :is(.pf-langs,.sec-grid,.ok-checks,.os-cards,.rv-in-list)>li p{font:var(--a-t-call)!important;color:var(--a-mute)!important;margin:3px 0 0!important;max-width:none!important}
  /* rows with an icon tile (Security): the tile leads, like a settings row, and the words line up beside it */
  html.sh-on main .sec-grid>li{display:grid!important;grid-template-columns:30px minmax(0,1fr);column-gap:14px;row-gap:0!important;align-items:start}
  html.sh-on main .sec-grid>li::before{grid-row:1 / span 4;grid-column:1;width:30px!important;height:30px!important;border-radius:9px!important;margin:0!important;position:static!important}
  html.sh-on main .sec-grid>li>*{grid-column:2;min-width:0}
  html.sh-on main .sec-grid>li>b{padding-top:5px}
  html.sh-on main .pr-grid p.pr-ev{margin-top:8px!important;padding-top:8px!important;border-top:.5px solid var(--a-hair)!important;font:var(--a-t-foot)!important;color:var(--a-blue)!important}
  /* the principles' line about the app sits under its own hairline */
  html.sh-on main .os-cards>li>span{display:block;margin:10px 0 0!important;padding:10px 0 0!important;border-top:.5px solid var(--a-hair)!important;font:var(--a-t-foot)!important;color:var(--a-blue)!important;position:static!important}
  html.sh-on main .os-cards>li>span::before,html.sh-on main .os-cards>li>span::after{display:none!important}
  /* settings-like facts: the label above, the value under it */
  html.sh-on main :is(.ct-facts,.fd-facts)>div{padding:12px 16px!important;display:block!important}
  html.sh-on main :is(.ct-facts,.fd-facts) dt{font:var(--a-t-foot)!important;color:var(--a-mute)!important;text-transform:none!important;letter-spacing:0!important;margin:0 0 2px!important}
  html.sh-on main :is(.ct-facts,.fd-facts) dd{font:var(--a-t-call)!important;color:var(--a-ink)!important;margin:0!important}
  html.sh-on main .ct-facts{margin-top:16px!important}
  /* the same lists on the navy panels: a lighter glass, white type */
  html.sh-on main :is(.os-order-g,.sx-dev,.rv-in-card,.fd-company,.sec-report,.hv-close,.hvx-band) :is(.pf-grid,.pf-langs,.ct-grid,.px-nfl,.sec-grid,.st-rows,.ok-checks,.os-cards,.rv-in-list,.ct-facts,.fd-facts){
    background:rgba(255,255,255,.07)!important;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12)!important}
  html.sh-on main :is(.os-order-g,.sx-dev,.rv-in-card,.fd-company,.sec-report,.hv-close,.hvx-band) :is(.pf-grid,.pf-langs,.ct-grid,.px-nfl,.sec-grid,.st-rows,.ok-checks,.os-cards,.rv-in-list)>li+li,
  html.sh-on main :is(.os-order-g,.sx-dev,.rv-in-card,.fd-company,.sec-report,.hv-close,.hvx-band) :is(.ct-facts,.fd-facts)>div+div{background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14))!important}
  html.sh-on main :is(.os-order-g,.sx-dev,.rv-in-card,.fd-company,.sec-report,.hv-close,.hvx-band) :is(.ok-checks,.rv-in-list,.sec-grid,.os-cards)>li :is(h3,b,strong),
  html.sh-on main :is(.os-order-g,.sx-dev,.rv-in-card,.fd-company,.sec-report,.hv-close,.hvx-band) :is(.ct-facts,.fd-facts) dd{color:#fff!important}
  html.sh-on main :is(.os-order-g,.sx-dev,.rv-in-card,.fd-company,.sec-report,.hv-close,.hvx-band) :is(.ok-checks,.rv-in-list,.sec-grid,.os-cards)>li p,
  html.sh-on main :is(.os-order-g,.sx-dev,.rv-in-card,.fd-company,.sec-report,.hv-close,.hvx-band) :is(.ct-facts,.fd-facts) dt{color:rgba(255,255,255,.74)!important}
  /* status: the part, what it is, and its state as a word at the end of the row */
  html.sh-on main .st-rows>li{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px}
  html.sh-on main .st-rows>li>i{display:none!important}
  html.sh-on main .st-rows>li h3{font:var(--a-t-head)!important;margin:0!important;color:var(--a-ink)!important}
  html.sh-on main .st-rows>li p{font:var(--a-t-foot)!important;color:var(--a-mute)!important;margin:3px 0 0!important}
  html.sh-on main .st-rows>li .st-v{font:500 .875rem/1.2 var(--px-sans,"Rubik",sans-serif)!important;color:var(--a-ink)!important;text-align:right;white-space:nowrap;margin:0!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* segmented controls: sort, the Ledger's filters, and the switches app-b327.js adds                                  */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on :is(.hb-sort,.lg-filt,.px-sort,.a-seg){display:flex!important;gap:2px!important;padding:2px!important;margin:0;border:0!important;border-radius:var(--a-r-s)!important;
    background:var(--a-track)!important;box-shadow:none!important;width:100%;max-width:none}
  html.sh-on :is(.hb-sort,.lg-filt,.px-sort,.a-seg)>:is(button,a){flex:1 1 0;min-width:0;min-height:44px;display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
    padding:0 8px!important;margin:0!important;border:0!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;
    font:500 .875rem/1.15 var(--px-sans,"Rubik",sans-serif)!important;color:var(--a-ink)!important;text-align:center;text-decoration:none!important;cursor:pointer;
    transition:background-color .2s var(--sh-in),box-shadow .2s var(--sh-in);-webkit-tap-highlight-color:transparent}
  html.sh-on :is(.hb-sort,.lg-filt,.px-sort,.a-seg)>:is(button,a) span{font-weight:400;color:var(--a-mute)}
  html.sh-on :is(.hb-sort,.lg-filt,.px-sort,.a-seg)>:is([aria-pressed=true],[aria-current],[aria-selected=true]){background:#fff!important;font-weight:600!important;
    box-shadow:0 1px 2px rgba(10,22,51,.12),0 2px 8px rgba(10,22,51,.06)!important}
  html.sh-on :is(.hb-sort,.lg-filt,.px-sort,.a-seg)>:is(button,a):focus-visible{outline:2px solid var(--a-blue);outline-offset:-2px}
  html.sh-on :is(.hb-sort,.lg-filt,.px-sort,.a-seg)>:is(button,a):active{background:rgba(255,255,255,.6)!important}
  html.sh-on .lg-filt+.lg-filt{margin-top:8px!important}

  /* the filter chips that don't fit a segmented control swipe in one row */
  html.sh-on .hb-chips{display:flex!important;flex-wrap:nowrap!important;gap:8px!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 calc(-1 * var(--a-gut))!important;padding:2px var(--a-gut)!important;scroll-padding-inline:var(--a-gut)}
  html.sh-on .hb-chips::-webkit-scrollbar{display:none}
  html.sh-on .hb-chips>button{flex:none;min-height:44px;padding:0 16px!important;border:0!important;border-radius:999px!important;background:var(--a-fill)!important;
    font:500 .875rem/1 var(--px-sans,"Rubik",sans-serif)!important;color:var(--a-ink)!important;box-shadow:inset 0 0 0 .5px var(--a-hair)!important}
  html.sh-on .hb-chips>button[aria-pressed=true]{background:var(--a-ink)!important;color:#fff!important;box-shadow:none!important}
  html.sh-on .hb-chips>button[aria-pressed=true] span{color:rgba(255,255,255,.72)!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* sticky list headers: the Lab's every-note list and the Ledger's calls keep their controls in reach                */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on .hb-all .hb-ahead{display:flex!important;flex-direction:column;align-items:stretch!important;gap:12px!important}
  html.sh-on .hb-all .hb-aright{display:flex!important;flex-direction:column;align-items:stretch!important;gap:8px!important;width:100%}
  html.sh-on .hb-all .hb-search{min-height:44px;justify-content:center;border-radius:var(--a-r-s)!important;background:var(--a-fill)!important;border:0!important;box-shadow:none!important}
  html.sh-on .hb-all .hb-tools{position:sticky;top:calc(var(--sh-st) + 46px);z-index:20;margin:0 calc(-1 * var(--a-gut))!important;padding:8px 0!important;
    background:rgba(255,255,255,.96);border-bottom:.5px solid var(--a-hair)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    html.sh-on .hb-all .hb-tools{-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  }
  html.sh-on .hb-all .hb-tools .hb-chips{margin:0!important}

  /* the Ledger: its filters stay under the top bar while the calls scroll */
  html.sh-on .px-sechead{display:flex!important;flex-direction:column;align-items:stretch!important;gap:12px!important}
  html.sh-on .lg-bar{position:sticky;top:calc(var(--sh-st) + 46px);z-index:20;margin:0 calc(-1 * var(--a-gut)) 12px!important;padding:8px var(--a-gut)!important;
    background:rgba(255,255,255,.96);border-bottom:.5px solid var(--a-hair)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    html.sh-on .lg-bar{-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  }
  /* the Ledger's board: three tiles and the countdown as a wide one */
  html.sh-on .px-board{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;border:0!important;margin-top:20px!important;padding:0!important}
  html.sh-on .px-board>div{margin:0!important;padding:14px!important;border:0!important;border-radius:var(--a-r-m)!important;background:var(--a-fill)!important;min-width:0}
  html.sh-on .px-board>div:nth-child(4){grid-column:1 / -1;background:var(--a-ink)!important}
  html.sh-on .px-board .px-k{font:700 1.875rem/1 var(--px-sans,"Rubik",sans-serif)!important;letter-spacing:-.03em!important;margin:0 0 6px!important;font-variant-numeric:tabular-nums}
  html.sh-on .px-board .px-l{font:var(--a-t-foot)!important;margin:0!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* swipe rows                                                                                                        */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on main :is(.sx-tile,.hw-feat){border-radius:var(--a-r-m)!important}
  /* home's products: cards of one height; the live demo inside a card is a preview, cut off softly, and the whole demo is a
     tap away on the product's own page (app-b327.js makes the clipped part inert, so focus never lands out of sight) */
  html.sh-on #products .sx-tile{display:flex!important;flex-direction:column;padding:20px!important;background:var(--a-fill)!important;border:0!important;box-shadow:none!important}
  html.sh-on #products .sx-tile>.sx-tt :is(h3){font:var(--a-t-head)!important;font-size:1.25rem!important}
  html.sh-on #products .sx-tile>.sx-tt p{font:var(--a-t-call)!important;color:var(--a-char)!important}
  html.sh-on #products .sx-tile>:is(.sx-browser,.sx-ui){max-height:300px;overflow:hidden!important;margin-top:16px!important;margin-bottom:0!important;border-radius:var(--a-r-s)!important;
    -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);pointer-events:none}
  html.sh-on #products .sx-tile>pre.sx-ui{-webkit-mask-image:none;mask-image:none}
  html.sh-on #products .sx-tile>.sx-more{margin-top:auto!important;padding-top:12px}
  html.sh-on #products .sx-grid{align-items:stretch!important}
  html.sh-on main>.sx-hero:first-child{padding-bottom:0!important}
  html.sh-on main>.sx-hero:first-child+.sx-sec,html.sh-on.a-home main>.sx-hero+#writing{padding-top:40px!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* code and wide figures scroll sideways inside the page, edge to edge, never the page itself                          */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on main pre{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;max-width:100%}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* the switches app-b327.js adds (founders: the operator and the clinician; the Lab and Scrubs)                      */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on .a-segbar{position:sticky;top:calc(var(--sh-st) + 46px);z-index:30;padding:8px var(--a-gut);background:rgba(255,255,255,.96);border-bottom:.5px solid transparent}
  html.sh-on .a-segbar.is-stuck{border-bottom-color:var(--a-hair)}
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    html.sh-on .a-segbar{-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  }
  html.sh-on .a-hubs{padding:4px var(--a-gut) 12px}
  html.sh-on .f3-pro[data-a-off]{display:none!important}

  /* ---------------------------------------------------------------------------------------------------------------- */
  /* press states                                                                                                       */
  /* ---------------------------------------------------------------------------------------------------------------- */
  html.sh-on main :is(.hb-row,.px-cl,.ok-card,.sx-tile){transition:transform .12s var(--sh-in)}
  html.sh-on main :is(.hb-row,.ok-card,.sx-tile):active{transform:scale(.985)}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce),(max-height:500px) and (pointer:coarse) and (prefers-reduced-motion:reduce){
  html.sh-on .a-ttl,html.sh-on .px-head .px-brand,html.sh-on :is(.hb-sort,.lg-filt,.px-sort,.a-seg)>:is(button,a){transition:none!important}
  html.sh-on main :is(.hb-row,.px-cl,.ok-card,.sx-tile):active{transform:none}
}
/* outside the shell: none of what app-b327.js adds */
html:not(.sh-on) :is(.a-ttl,.a-segbar,.a-hubs){display:none!important}