/* S368 · The Culture phone button system on becoolbepositive.com (Figma: Culture Phone System · Buttons, component Phone Button).
   Phones only. One button: 52px, fully rounded, Rubik 16 semibold, the time in IBM Plex Mono 13, a 28px play circle.
   Primary for the one action, secondary for the rest. Light on pale surfaces, dark on blue or navy.
   Two buttons share a row equally; one button alone fills the width. Press scales to 97%; focus shows a 3px ring. */
@media (max-width:760px){
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-more,.s4-solid,.s4-ghost,.s4-play,.s4-fbtn,.s342h-read,.s342h-listen,.s342-play,.wr-nplay,.wr-nread,.wr-sub button[type=submit],form button[type=submit]):not(.bx-x){
    --cp-blue:#1559f5;--cp-navy:#0b1730;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;
    box-sizing:border-box!important;height:52px!important;min-height:52px!important;padding:0 20px!important;margin:0!important;
    border:0!important;border-radius:999px!important;font:600 16px/1 Rubik,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important;
    text-decoration:none!important;white-space:nowrap!important;transition:transform .15s cubic-bezier(.22,1,.36,1)!important;-webkit-tap-highlight-color:transparent}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-more,.s4-solid,.s4-ghost,.s4-play,.s4-fbtn,.s342h-read,.s342h-listen,.s342-play,.wr-nplay,.wr-nread,form button[type=submit]):active{transform:scale(.97)}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-more,.s4-solid,.s4-ghost,.s4-play,.s4-fbtn,.s342h-read,.s342h-listen,.s342-play,.wr-nplay,.wr-nread,form button[type=submit]):focus-visible{outline:3px solid #1559f5!important;outline-offset:3px!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-more,.s4-solid,.s4-ghost,.s4-play,.s4-fbtn,.s342h-read,.s342h-listen,.s342-play,.wr-nplay,.wr-nread) small,
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342-play .s342-pt{font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace!important;letter-spacing:0!important;opacity:.78;margin:0!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-more,.s342h-read) svg{width:16px!important;height:16px!important}

  /* light primary: blue */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-solid{background:#1559f5!important;color:#fff!important;box-shadow:none!important}
  /* light secondary: tonal */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-more,html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-ghost{background:#e7eefe!important;color:#0e3fb0!important;box-shadow:none!important}
  /* dark primary: white */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-play,.s342h-read,.s342-play,.wr-nplay,form button[type=submit]),html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-press .s4-more,html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) #press .s4-more{background:#fff!important;color:#0b1730!important;box-shadow:none!important}
  /* dark secondary: glass */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.hx-acts .s4-ghost,.s4-fbtn,.s342h-listen,.wr-nread){background:rgba(255,255,255,.14)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.hx-acts .s4-ghost,.s4-fbtn,.s342h-listen,.wr-nread) small{color:#fff!important}

  /* the 28px play circle */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-play .s4-ph,.s342h-listen .s342h-pb,.s342-play .s342-pb,.wr-nplay>span){display:grid!important;place-items:center!important;flex:none!important;width:28px!important;height:28px!important;margin:0 0 0 -8px!important;border-radius:50%!important;background:#1559f5!important;color:#fff!important;box-shadow:none!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-play .s4-ph,.s342-play .s342-pb,.wr-nplay>span) svg{width:11px!important;height:11px!important;margin-left:2px;fill:#fff!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342h-listen .s342h-pb{background:#fff!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342h-listen .s342h-pb svg{width:11px!important;height:11px!important;margin-left:2px;fill:#1559f5!important}

  /* rows: pairs split evenly, singles fill */
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-links,.hx-acts,.wr-nacts){display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-links,.hx-acts,.wr-nacts)>*{width:100%!important;min-width:0!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-follow{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-follow>span{grid-column:1/-1}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-follow .s4-fbtn{width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342h-acts{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342h-acts .s342h-read{grid-column:1/-1;width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342h-acts .s342h-listen{width:100%!important;align-self:auto!important;margin:0!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-sec .s4-more{width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-links>.s4-more:only-child{grid-column:1/-1}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-acts:not(.hx-acts){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-acts:not(.hx-acts)>*{width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s4-links:has(>.s4-more+.s4-more) .s4-more svg{display:none!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342h-acts>*{width:100%!important;max-width:100%!important;min-width:0!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .crow2{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .crow2>*{width:100%!important}
  html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) .s342-play,html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) form button[type=submit]{width:100%!important}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){html body:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f) :is(.s4-more,.s4-solid,.s4-ghost,.s4-play,.s4-fbtn,.s342h-read,.s342h-listen,.s342-play,.wr-nplay,.wr-nread,form button[type=submit]){transition:none!important}}