/* B285 · the phone redesign. Everything here is scoped to phones (max-width:640px) unless a rule says otherwise, so the
   laptop page does not move. One phone type scale and rhythm, a quiet header, the product in the first screen, one
   tone for the press, numbers that read in rows, and the demos lifted out of their nested frames. */

/* search lives in the menu sheet on phones; on wider screens the header keeps its own search button */
.px-msrch{display:none}

@media (max-width:640px){
  :root{--p-g:20px;--p-sec:56px;--p-line:#e4e9f2}

  /* ---------- header: logo, one quiet action, menu ---------- */
  .px-head{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 1px 0 rgba(10,22,51,.07)}
  .px-head .px-in{padding:8px 12px 8px var(--p-g)!important;min-height:60px;gap:8px}
  .px-head .px-brand img{height:26px;width:auto}
  .px-head .px-acts{gap:2px}
  .px-head .px-acts>.px-sbtn{display:none!important}
  .px-head .px-login{border:0!important;background:none!important;box-shadow:none!important;padding:0 12px!important;height:44px;font-size:15px!important;font-weight:500;color:#0a1633}
  .px-head .px-menu summary{border:0!important;background:none!important;box-shadow:none!important}
  .px-panel .px-msrch{display:flex;align-items:center;gap:10px;width:100%;height:48px;margin:12px 0 4px;padding:0 16px;border:1px solid #d5dcea;border-radius:14px;background:#f5f7fc;color:#3a4766;font:500 16px/1 var(--px-sans,Rubik,system-ui,sans-serif);cursor:pointer;text-align:left}
  .px-panel .px-msrch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none}

  /* ---------- type scale and rhythm ---------- */
  .sx-hero h1,.os-hero h1{font-size:36px!important;line-height:1.04!important;letter-spacing:-.035em!important}
  .sx-sec h2:not(.sx-h-sm),.sx-close h2,.px-sec h2,.ps-sec h2,.sx-dev h2{font-size:29px!important;line-height:1.08!important;letter-spacing:-.03em!important}
  .sx-sec{padding-top:var(--p-sec)!important}
  .sx-sec .sx-head p,.sx-sec .bn-copy>p{font-size:16px!important;line-height:1.6!important;margin-top:14px!important}

  /* ---------- hero: shorter words, one button and a link, the product starts in the first screen ---------- */
  .sx-hero{padding-top:28px!important;padding-bottom:32px!important}
  .sx-hero .sx-hero-g{gap:28px!important}
  .sx-hero .sx-dek,.sx-hero .sx-copy>p:not(.hx4-where){font-size:16px!important;line-height:1.55!important;margin-top:14px!important}
  .sx-ctas{flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:6px 18px!important;margin-top:22px!important}
  .sx-ctas .sx-btn{width:auto!important;flex:0 0 auto!important;height:48px!important;padding:0 22px!important;font-size:16px!important}
  .sx-ctas .sx-btn.ghost{background:none!important;box-shadow:none!important;border:0!important;padding:0 2px!important;color:#1559f5!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .sx-hero .hx4-where{margin-top:16px!important;font-size:13.5px!important}
  .sx-hero .hx5,.sx-hero .sx-prod{margin-top:0!important}
  .hx5-thread{margin:0 14px!important}
  .hx5-msg{padding:12px 16px 2px!important}
  .hx5-msg .hx5-who{font-size:13px!important}
  .hx5-msg p:not(.hx5-who){font-size:14.5px!important;line-height:1.45!important}
  .hx5-card{margin-top:-30px!important}

  /* the closing band: one strong button, the second as a link */
  .sx-close{padding:64px 0!important}
  .sx-close .sx-ctas{justify-content:center}
  .sx-close .sx-ctas .sx-btn:not(.ghost){width:100%!important}
  .sx-close .sx-ctas .sx-btn.ghost{color:#0a1633!important}
  .sec-report .sx-btn.ghost{color:#8fb0ff!important}

  /* ---------- press: one tone, one optical size, a tidy grid ---------- */
  .sx-logos{padding:28px 0 4px!important}
  .sx-logos .sx-in{display:grid!important;grid-template-columns:repeat(6,1fr)!important;align-items:center;justify-items:center;gap:22px 8px!important}
  .sx-logos .sx-in>a{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-height:44px}
  .sx-logos .sx-in>a:nth-child(n+4){grid-column:span 3}
  .sx-logos img{height:22px!important;width:auto!important;max-width:100%!important;filter:grayscale(1);opacity:.72!important}
  .sx-logos .sx-in>a:nth-child(4) img{height:19px!important}
  .sx-logos .sx-in>a:nth-child(5) img{height:16px!important}
  .px-press img{filter:grayscale(1);opacity:.72}

  /* ---------- the numbers: one row each, number then what it means ---------- */
  .sx-nums{display:block!important;border-top:1px solid var(--p-line)}
  .sx-nums>div{display:grid!important;grid-template-columns:120px 1fr;align-items:center;gap:16px!important;padding:18px 0!important;border:0!important;border-bottom:1px solid var(--p-line)!important}
  .sx-nums dd{order:-1;font-size:34px!important;line-height:1!important;margin:0!important}
  .sx-nums dt{font-size:15px!important;line-height:1.4!important;max-width:none!important}
  .ok-nums{display:block!important;border-top:1px solid var(--p-line)}
  .ok-nums>div{display:grid!important;grid-template-columns:120px 1fr;align-items:center;gap:16px!important;padding:16px 0!important;border:0!important;border-bottom:1px solid var(--p-line)!important}
  .ok-nums dd{font-size:32px!important;line-height:1!important;margin:0!important}
  .ok-nums dt{font-size:15px!important;line-height:1.4!important;margin:0!important}
  .sx-stats h2.sx-h-sm{font-size:16px!important;margin-bottom:18px!important}

  /* ---------- the demos: no card around a frame around a card ---------- */
  .sx-tile{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important;border-top:1px solid var(--p-line)!important;padding-top:28px!important}
  .sx-grid>.sx-tile:first-child{border-top:0!important;padding-top:0!important}
  .sx-grid{gap:36px!important}
  .sx-tile .sx-browser,.sx-tile .sx-app-frame{margin-left:0!important;margin-right:0!important}
  .sx-app-frame{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
  .sx-app-frame .sx-chrome{display:none!important}
  .sx-app-frame .okx,.sx-app-frame .okx-main{background:none!important;padding:0!important}
  .ok-cards{gap:32px!important}
  .ok-card{background:none!important;padding:0!important;border-radius:0!important;overflow:visible!important}
  .ok-card+.ok-card{border-top:1px solid var(--p-line);padding-top:28px!important}
  .ok-card .sx-ui{border-radius:14px!important;box-shadow:0 0 0 1px var(--p-line),0 18px 36px -28px rgba(11,21,48,.35)!important}
  .sx-tile .sx-ui{border-radius:14px!important;margin-bottom:0!important;box-shadow:0 0 0 1px var(--p-line),0 18px 36px -28px rgba(11,21,48,.35)!important}
  .sx-tile .sx-ui.hx2-code{box-shadow:none!important;font-size:13px!important}
  .sx-more{margin:18px 0 0!important;font-size:16px!important;min-height:44px;align-items:center}

  .okx-hero .sx-browser{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
  .okx-hero .sx-browser>.sx-chrome{display:none!important}
  .okx-hero .sx-browser .okx,.okx-hero .sx-browser .okx-main{background:none!important;padding:0!important}

  /* the app inside: phone-sized type, nothing cut short */
  .okx{font-size:14.5px!important;line-height:1.45!important}
  .okx-nums li>*,.okx-nums li span,.okx-nums li em{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .okx-nums li,.okx-nums .w,.okx-n-k,.okx-a-head small,.okx-steps small{font-size:13px!important}
  /* ---------- stacks of outlined cards become one divided list ---------- */
  .pf-grid,.pf-langs,.sec-grid,.os-cards,.px-secp .sec-subs,.ct-grid,.px-nfl{gap:0!important;border-top:1px solid var(--p-line)}
  .pf-grid .pf-app,.pf-langs>li,.sec-grid>li,.os-cards>li,.px-secp .sec-subs>div,.ct-grid>li,.px-nfl>li>a{background:none!important;box-shadow:none!important;border:0!important;border-bottom:1px solid var(--p-line)!important;border-radius:0!important;padding:24px 0!important;transform:none!important}
  .os-cards>li h3,.pf-app h3,.sec-grid>li h3{font-size:19px!important;line-height:1.25!important}

  /* the platform's own panels: phone-sized words, no card inside a card */
  .pf-prod .cn-rows li{font-size:13px!important;line-height:1.35!important}
  .pf-prod .cn-rows li *{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
  .pf-prod .cn-live{font-size:13px!important}
  .pf-prod .cn-key{font-size:13px!important}
  .pf-prod .cn-key *{font-size:13px!important}
  .pf-mods{grid-template-columns:1fr!important;gap:0!important}
  .pf-mods li{background:none!important;box-shadow:none!important;border-radius:0!important;border-top:1px solid rgba(255,255,255,.1)!important;padding:16px 0!important;grid-template-columns:1fr!important}
  .pf-mods li *{font-size:15px!important;line-height:1.45!important}
  .pf-mods li b,.pf-mods li strong,.pf-mods li h3{font-size:17px!important}

  /* dark bands run to the edges on a phone instead of floating as a card */
  .os-order-g{margin:0!important;width:auto!important;max-width:none!important;border-radius:0!important;padding:48px var(--p-g)!important}
  .os-order .sx-in.os-order-g{max-width:none}

  /* ---------- The Lab and Scrubs: the list uses the whole width ---------- */
  .px-lg{display:block!important;font-size:13px!important;line-height:1.5!important;padding:10px var(--p-g)!important}
  .px-lg .px-lg-k{margin-right:8px}
  .px-askband .px-wrap{padding-top:20px!important}
  .px-nrow{grid-template-columns:1fr auto!important;gap:4px 12px!important;padding:24px 0!important}
  .px-nrow .px-nnum{grid-column:1;grid-row:1;align-self:center;padding:0!important;font-size:14px!important}
  .px-nrow .px-play{grid-column:2;grid-row:1;margin:0!important;align-self:center;width:auto!important;min-width:0!important;padding-right:16px!important}
  .px-nrow .px-nmain{grid-column:1/-1;grid-row:2}
  .px-nrow .px-nt{font-size:20px!important;line-height:1.25!important}
  .px-nrow .px-nx{font-size:15.5px!important;line-height:1.55!important}
  .px-askband button[type=button]{font-size:15px!important}

  /* the Ledger's scoreboard: one ruled row of three, not three small cards */
  .px-board{gap:0!important;border-top:1px solid var(--p-line)!important}
  .px-board>*:nth-child(-n+3){background:none!important;box-shadow:none!important;border-radius:0!important;padding:18px 12px 18px 0!important;border-bottom:1px solid var(--p-line)}
  .px-board>*:nth-child(2),.px-board>*:nth-child(3){padding-left:14px!important;border-left:1px solid var(--p-line)}
  .px-board>*:nth-child(4){margin-top:16px}

  /* status */
  .st-sec{padding-top:40px!important}
  .st-rows>li>i{align-self:start;margin-top:9px}
  .st-sec pre{white-space:pre!important;overflow-wrap:normal!important;word-break:normal!important;overflow-x:auto;font-size:13.5px!important}

  /* the Ask page and the manifesto's chart: nothing under 13px */
  .px-askp-live,.px-askp-priv{font-size:13px!important}
  .px-v{font-size:13px!important}
  .sx-ui .sx-st{font-size:13px!important}
  .sx-ui .sx-acts{display:flex!important;flex-wrap:wrap;gap:8px!important}
  .sx-ui .sx-acts>*{white-space:nowrap;flex:0 0 auto!important;width:auto!important}

  /* note pages */
  .px-ahero h1{font-size:34px!important;line-height:1.08!important;letter-spacing:-.03em!important}
  .px-lis{border-radius:0!important}
}

/* the Ask button steps aside while a button or form is under it (fab-b285.js adds is-cta) */
@media (max-width:900px){
  .px-askfab.is-cta{opacity:0!important;pointer-events:none!important;transform:translateY(12px)}
}