/* OneCLI: phone layer. Loaded last on every page, so it can re-set desktop rules.
   Desktop is untouched: everything below is either touch-only behaviour or inside max-width:640px. */

/* ---------- platform: things a phone does that a desktop never shows ---------- */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
a,button,summary,[role="button"],.mode,.mc svg{touch-action:manipulation}
button,.btn,.pill,.mode,.chip,summary{-webkit-user-select:none;user-select:none}
@media (pointer:coarse){input,select,textarea{font-size:16px!important}}
.btn:active,.links a:active,.mnav a:active,details.qa summary:active{transform:scale(.98)}

@media (max-width:640px){
  /* ---------- rhythm and type ---------- */
  .wrap,.art-w{padding-left:20px;padding-right:20px}
  body{font-size:16px}
  .sec,.block,.pv,section.sec{padding-top:72px!important;padding-bottom:0!important}
  main > section:last-of-type,main > div:last-child{padding-bottom:24px}
  .head,.head.c{text-align:left;margin-left:0;margin-right:0;max-width:none}
  .head.c p{margin-left:0;margin-right:0}
  .head h2,.cvart .sec-h,.final h2,.closer p{font-size:30px;line-height:1.14;letter-spacing:-.02em}
  .head p{font-size:16px;margin-top:10px}

  /* ---------- top bar ---------- */
  .nav .wrap{height:60px;gap:12px}
  .nav .btn-ink.btn-sm{height:36px;padding:0 14px;font-size:13.5px}
  .mnav{top:60px!important;padding:8px 20px 24px}
  .mnav a{padding:16px 2px;font-size:18px;font-weight:500}

  /* ---------- hero (home and inner pages) ---------- */
  .hero{min-height:0;padding:40px 0 56px;text-align:left;justify-content:flex-start}
  .hero h1{font-size:clamp(22px,calc((100vw - 40px)/11.2),38px);line-height:1.12;letter-spacing:-.03em;margin:0;text-wrap:wrap}
  .mbr{display:inline!important}
  .hero h1 .g{display:inline!important}
  .hero h1 .g{display:inline;white-space:normal}
  .hero h1 .mc.inl{width:1.1em;height:1.1em;vertical-align:-.2em}
  .hero p.sub{font-size:17px;margin:18px 0 0;max-width:none}
  .badges{justify-content:flex-start;gap:8px;margin-top:22px}
  .pill{height:32px;padding:0 12px 0 8px;font-size:13.5px;gap:7px}
  .pill .yc{width:18px;height:18px;font-size:11px}
  .pill i{font-size:15px}
  .hero .ctas,.phero .ctas,.final .ctas{flex-direction:column;align-items:stretch;gap:10px;margin-top:26px}
  .hero .ctas .btn,.phero .ctas .btn,.final .ctas .btn{width:100%;height:50px;font-size:16px}
  .phero{padding:40px 0 32px;text-align:left}
  .phero.c{text-align:left}
  .phero h1{font-size:38px;line-height:1.08;max-width:none;margin:0}
  .phero .sub,.phero.c .sub{font-size:17px;margin:16px 0 0;max-width:none}

  /* ---------- stages: lighter frames, content first ---------- */
  .stage{border-radius:20px}
  .card{border-radius:14px}

  /* ---------- characters: one size, one spot ---------- */
  .perched{margin-top:92px!important}
  .perched > .mc,.perched > .mc.sm,.perched > .mc.md,.perched > .mc.rc-mc{width:96px!important;top:-84px!important;left:auto!important;right:16px!important}
  .perched > .mc.grd{width:90px!important;top:-80px!important}
  .perched > .mc.grd.a{right:83px!important}
  .perched > .mc.grd.b{right:12px!important}

  /* ---------- final call to action ---------- */
  .final{padding:44px 20px 28px;text-align:left}
  .final h2,.final p{margin-left:0;margin-right:0;max-width:none}
  .final p{font-size:16px}

  /* ---------- footer: brand, then two tidy columns ---------- */
  footer{padding:64px 0 32px}
  .ft{grid-template-columns:1fr 1fr;gap:28px 16px}
  .ft h5{margin-bottom:10px}
  .ft ul{gap:12px}
  .ft .about p{max-width:none}
  .fb{margin-top:40px;flex-direction:column;align-items:flex-start;gap:8px}
}

/* ---------- homepage sections on a phone ---------- */
@media (max-width:640px){
  /* slack: the window uses the full stage width, messages read like the Slack app */
  .shot{padding:20px 8px 0!important}
  .shot-h{padding:0 10px!important;margin-bottom:16px!important;gap:12px!important}
  .shot-h h2{font-size:24px!important}
  .modes{gap:6px;flex-wrap:wrap}
  .mode{height:32px;padding:0 11px;font-size:13px;white-space:nowrap}
  .mode i{font-size:14px}
  div.sk[aria-label]{border-radius:14px 14px 0 0}
  .sk-h{height:52px;padding:0 16px}
  .sk-h b{font-size:17px}
  .sk-msgs{padding:6px 0 12px}
  .sk-m{grid-template-columns:34px 1fr;gap:10px;padding:10px 14px!important}
  .sk-m > img{width:34px;height:34px;border-radius:8px}
  .sk-who{font-size:14px;gap:6px}
  .sk-who .app{font-size:9.5px}
  .sk-who time,.sk-who em{font-size:12px}
  .sk-done p{font-size:15.5px}
  .sk-done .sk-meta{font-size:13px}
  .sk-work{position:static;flex-wrap:wrap;font-size:14px}
  .sk-body{min-height:0}
  .sk-m:not(.fin) .sk-done{display:none}
  .sk-m.fin .sk-work{display:none}
  .sk-card{padding:14px;margin-top:10px}
  .sk-card h5{font-size:15px}
  .sk-card p{font-size:13.5px}
  .sk-row{flex-wrap:wrap;gap:8px}
  .sk-row em{flex-basis:100%;margin:2px 0 0}
  .trust{padding-top:56px}
  .marq-t{gap:40px}
  .marq-t span{font-size:17px}

  /* use cases: the live card sits tight under the accordion */
  .uc{margin-top:28px;gap:0}
  .ai > button{padding:18px 0;font-size:16.5px}
  .ai-in h3{font-size:19px}
  .ai-in li{font-size:15.5px}
  .uc-stage{padding:8px!important}
  .run{padding:20px!important}
  .run .q{font-size:17px}
  .out b{font-size:38px}

  /* gateway, flow and approval: thinner frames, no dead space */
  .gw{padding:10px!important;margin-top:0!important}
  .flow{margin-top:28px!important;padding:12px!important;gap:16px!important}
  .flow .bubble{max-width:none}
  .sbx{padding:24px 14px 16px!important}
  .ap{gap:0!important}
  .ap .tlink{margin-top:18px}
  .ap-stage{padding:8px!important}
  .rule{padding:20px!important}

  /* open source */
  .oss{text-align:left}
  .oss .row{flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px}
  .oss .note{margin-top:18px}
}

/* ---------- inner pages on a phone ---------- */
.ptabs{display:none}
.mbr{display:none}
.hero h1 .nw{white-space:nowrap}

@media (max-width:640px){
  /* pricing */
  .pr .bar{justify-content:flex-start;gap:12px;margin-top:24px}
  .sw{width:100%}
  .plans-w{margin-top:100px!important}
  .plans{padding:8px!important;gap:8px!important}
  .plan{padding:22px 20px 24px!important}
  .ptabs{display:flex;gap:4px;margin-top:22px;padding:4px;border-radius:14px;background:var(--stage)}
  .ptabs button{flex:1;height:38px;border-radius:10px;font-size:14px;font-weight:500;color:var(--muted)}
  .ptabs button[aria-selected="true"]{background:var(--card);color:var(--text);box-shadow:0 1px 2px rgba(40,30,15,.12)}
  .pt-w{margin-top:10px!important;padding:6px!important;overflow:visible!important}
  .pt{min-width:0!important;width:100%!important;table-layout:auto}
  .pt th,.pt td{padding:13px 14px!important}
  .pt tbody th,.pt thead th:first-child{width:52%!important;min-width:0!important;position:static!important;box-shadow:none!important}
  .pt [data-x]{display:none}
  .pt[data-p="1"] [data-x="1"],.pt[data-p="2"] [data-x="2"],.pt[data-p="3"] [data-x="3"],.pt[data-p="4"] [data-x="4"]{display:table-cell}
  .pt .grp th{font-size:18px;padding-top:20px!important}
  .pt tfoot td:first-child{display:none}
  .pt tfoot .btn{width:100%}
  .faqs{gap:20px!important}

  /* product */
  .phero .hero-mc.lg{margin:100px 4px 0 auto!important;width:92px!important;transform:translate(-10px,22px)}
  .phero:has(.hero-mc.lg) + .pv{padding-top:2px!important}
  .pv .head{margin-bottom:28px!important}
  .pv .stage{padding:8px!important}
  .narrow{max-width:none!important}
  .team-r{padding:14px 16px!important}
  .ask-l{justify-content:flex-start!important;text-align:left!important;padding:10px 8px 0;font-size:15px!important}
  .steps4{gap:0!important;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:6px 0}
  .st{display:grid;grid-template-columns:30px 1fr;column-gap:12px;align-items:start;padding:12px 16px!important;border:0!important;box-shadow:none!important;background:none!important;border-radius:0!important}
  .st + .st{border-top:1px solid var(--line)!important}
  .st .n{grid-row:span 2}
  .st h3{margin-top:4px!important;font-size:15.5px!important}
  .st p{margin-top:2px!important;font-size:14px!important}
  .ways{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .way{padding:16px 14px!important;border-radius:14px!important}
  .way .ic{width:36px!important;height:36px!important;font-size:18px!important;border-radius:10px!important}
  .way h3{margin-top:12px!important;font-size:15px!important}
  .way p{font-size:13px!important}
  .outs{gap:8px!important}
  .out{padding:18px 16px!important}

  /* comparison overview and articles */
  .cmp-grid{padding:8px!important;gap:8px!important}
  a.tile.cmp{padding:8px!important}
  .cmp .tx{padding:6px 10px 12px!important}
  .cmp h2{font-size:22px!important}
  /* at 22px the title is no longer "large text", so the brand green (4.1:1) fails AA; this shade is 5.2:1 */
  .cmp h2 span{color:#0f7d40}
  .ahead{padding-top:36px!important}
  .ahead h1{font-size:34px!important;margin-top:18px!important}
  .ahead .lede{font-size:17px!important}
  .cover,.cvart .art{margin:28px -20px 32px!important;border-radius:0!important}
  .cvart .short{padding:22px 20px!important;margin-top:32px!important}
  .cvart .short p{font-size:16.5px!important}
  .prose{font-size:16.5px}
  .prose h2{font-size:25px}
  .which > div{padding:22px 18px!important}
  .also a{padding:16px 18px!important}
  .closer{margin-top:64px!important}

  /* blog */
  .feat{padding:8px!important;border-radius:20px!important}
  .block:has(.feat){padding-top:0!important}
  .perched:has(> .feat){margin-top:84px!important}
  .phero:has(+ .block .feat){padding-bottom:0!important}
  .feat .tx{padding:8px 12px 16px!important}
  .feat h2{font-size:23px!important}
  .grid-b{margin-top:48px!important}
  .bp{grid-template-columns:112px 1fr!important;gap:14px!important;padding:20px 0!important;align-items:start!important}
  .bp .im img{aspect-ratio:1/1!important;object-position:12% 50%}
  .bp h3{font-size:16.5px!important;margin-top:4px!important}
  .bp p{display:none}
  .bp .mt{font-size:12.5px!important}
  .more{margin-top:56px!important}
  .try{padding:20px!important}
  .try .btn{width:100%}

  /* faq */
  details.qa summary{font-size:16.5px;padding:18px 0}

  /* contact */
  .ct{padding-top:24px!important;gap:28px!important}
  .ct h1{font-size:36px!important}
  .fw{margin-top:96px!important}
  .form{padding:8px!important}
  .form form,.form .done{padding:20px 16px!important}

  /* legal */
  .lmeta{flex-direction:column;gap:4px}
  .toc{padding:16px!important}
}
@media (max-width:370px){.phero .hero-mc.lg{transform:translate(0,22px)}}

/* ---------- comfortable tap targets and a clear demo button in the phone menu ---------- */
@media (max-width:640px){
  .tlink,.skip .tlink,.back,.more a,.outro a{position:relative}
  .tlink::after,.skip .tlink::after,.back::after{content:"";position:absolute;inset:-10px -6px}
  .oss .row{gap:22px}
  .mnav a.mcta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:0;height:50px;border:0;border-radius:12px;background:var(--ink);color:var(--on-ink);font-size:16px;font-weight:550}
  .mnav a.mcta i{font-size:16px}
}
@media (max-width:640px){.phero .hero-mc:not(.lg){bottom:-28px;right:24px}}