/* liminal — AI Staff (/systems/staff).
   liminal's own sections use liminal's palette. Everything that shows the
   client's system (the example screens and the live demo) sits inside .pb and
   uses the example client's brand (assets/demo-client/pellbrook.css). */

/* ------------------------------------------------------------------- hero */
.as-hero h1{font-size:clamp(64px,8vw,150px); line-height:.95; letter-spacing:-.065em}
.as-deck{max-width:34ch; margin:30px 0 0; font-size:clamp(19px,1.7vw,26px); line-height:1.45; color:#c9dcd8; letter-spacing:-.01em}
.as-actions{display:flex; align-items:center; gap:28px; margin-top:38px; flex-wrap:wrap}
.as-link{font-size:14px; color:var(--light); border-bottom:1px solid #d0eee740; padding-bottom:2px}
.as-link:after{content:' ↓'}
.as-link:hover{color:var(--acid); border-color:var(--acid)}

.as-roster{list-style:none; margin:70px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px}
.as-roster li{margin:0}
.as-roster img{display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; border-radius:4px; filter:saturate(.92)}
.as-roster b{display:block; margin-top:14px; font-weight:500; font-size:16px; color:#f2fbf8; letter-spacing:-.01em}
.as-roster span{display:block; font-size:13px; color:#8fa9a5; margin-top:2px}
.as-shift{display:flex; align-items:center; gap:10px; margin:26px 0 0; font-size:13px; color:#8fa9a5}
.as-shift i{flex:none; width:7px; height:7px; border-radius:50%; background:#5fd38d; box-shadow:0 0 0 4px #5fd38d22}

/* --------------------------------------------------------------- sections */
.as-section{padding:120px var(--pad) 0}
.as-h2{margin:0; font-weight:500; font-size:clamp(38px,4.4vw,82px); line-height:1.03; letter-spacing:-.055em; color:#f2fbf8; max-width:18ch; text-wrap:balance}
.as-lede{max-width:60ch; margin:26px 0 0; font-size:18px; line-height:1.65; color:#b4c8c4}
.as-kicker{margin:0 0 14px; font-size:11px; letter-spacing:.18em; color:#8fa9a5}
.as-small{max-width:70ch; margin:18px 0 0; font-size:14px; line-height:1.6; color:#879b99}

/* use cases: copy beside an example screen */
.as-case{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(40px,6vw,110px); align-items:center; margin-top:110px}
.as-case.flip .as-case-copy{order:2}
.as-case h3{margin:0; font-weight:500; font-size:clamp(30px,2.8vw,48px); line-height:1.08; letter-spacing:-.045em; color:#f2fbf8}
.as-pain{margin:18px 0 0; font-size:17px; line-height:1.65; color:#b4c8c4; max-width:52ch}
.as-who{display:flex; align-items:center; gap:14px; margin:30px 0 0; padding-top:24px; border-top:1px solid var(--line)}
.as-who img{width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:center 20%}
.as-who p{margin:0; font-size:15px; color:#a9c0bc}
.as-who b{font-weight:500; color:#f2fbf8}
.as-steps{margin:18px 0 0; padding:0; list-style:none; counter-reset:s; display:grid; gap:14px}
.as-steps li{counter-increment:s; position:relative; padding-left:34px; font-size:16px; line-height:1.6; color:#c9dcd8}
.as-steps li:before{content:counter(s,decimal-leading-zero); position:absolute; left:0; top:3px; font-size:11px; letter-spacing:.1em; color:var(--acid)}
.as-people{margin:20px 0 0; font-size:15px; line-height:1.6; color:#a9c0bc}
.as-people b{font-weight:500; color:#f2fbf8}
.as-plugs{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0}
.as-plugs span,.as-ch span{font-size:12px; color:#b4c8c4; border:1px solid #d0eee733; border-radius:99px; padding:6px 12px}

/* example screens (in the client's brand) */
.as-screen{margin:0; background:none; min-width:0}
.as-screen figcaption{margin-top:14px; font-family:var(--sans); font-size:12px; color:#6d8b88; text-align:center}
.as-screen img{object-fit:cover; object-position:center 20%}

.dev-window{background:var(--pb-card); border-radius:12px; overflow:hidden; box-shadow:0 30px 80px #0009; color:var(--pb-ink); font-family:var(--pb-sans)}
.dev-bar{display:flex; align-items:center; gap:7px; padding:12px 16px; background:#ece6da; border-bottom:1px solid var(--pb-line)}
.dev-bar i{width:10px; height:10px; border-radius:50%; background:#cfc6b6}
.dev-bar span{margin-left:10px; font-size:12px; color:var(--pb-muted)}

.as-phone{justify-self:center; width:100%; max-width:340px}
.dev-phone{background:var(--pb-paper); border:9px solid #10151c; border-radius:38px; overflow:hidden; box-shadow:0 30px 80px #0009; color:var(--pb-ink); font-family:var(--pb-sans)}
.dev-status{display:flex; justify-content:space-between; padding:10px 22px 4px; font-size:12px; font-weight:600}
.ph-head{display:flex; align-items:center; gap:10px; padding:10px 16px 12px; border-bottom:1px solid var(--pb-line); background:var(--pb-card)}
.ph-head img,.em-head img,.aq-item img{width:38px; height:38px; border-radius:50%; flex:none}
.ph-head b,.em-head b{display:block; font-size:14px; font-weight:600}
.ph-head small,.em-head small{display:block; font-size:11px; color:var(--pb-muted); overflow-wrap:anywhere}
.ph-thread{padding:14px 14px 18px; display:grid; gap:8px}
.ph-day{margin:0 0 4px; text-align:center; font-size:11px; color:var(--pb-muted)}
.ph-bubble{justify-self:start; max-width:86%; background:#fff; border:1px solid var(--pb-line); border-radius:16px 16px 16px 4px; padding:9px 12px; font-size:13.5px; line-height:1.45}
.ph-bubble.me{justify-self:end; background:var(--pb-brick); color:#fff; border-color:transparent; border-radius:16px 16px 4px 16px}
.ph-card{background:#fff; border:1px solid var(--pb-line); border-left:3px solid var(--pb-brick); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.45}
.ph-card p{margin:0 0 6px}
.ph-card p:last-child{margin:0}
.ph-card .ph-card-k,.aq .aq-k,.brief .brief-k{font-size:10px; font-weight:600; letter-spacing:.12em; color:var(--pb-muted); margin:8px 0 4px}
.ph-card .ph-card-k:first-child{margin-top:0}

.em{padding:20px 22px 22px; font-size:14px; line-height:1.55}
.em-head{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--pb-line)}
.em-head>div{min-width:0}
.em h4{margin:16px 0 8px; font-family:var(--pb-serif); font-weight:600; font-size:21px; line-height:1.2}
.em p{margin:0 0 10px}
.em-list{list-style:none; margin:4px 0 14px; padding:0; border:1px solid var(--pb-line); border-radius:10px; overflow:hidden}
.em-list li{display:grid; grid-template-columns:86px 1fr; gap:10px; padding:10px 12px; border-top:1px solid var(--pb-line); background:#fff}
.em-list li:first-child{border-top:0}
.em-list span{font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding-top:3px}
.em-list .em-done span{color:var(--pb-sage)}
.em-list .em-next span{color:var(--pb-brick)}
.em-list .em-you span{color:var(--pb-ink)}
.em-list .em-later span{color:var(--pb-muted)}
.em .em-sign{font-size:12.5px; color:var(--pb-muted); margin:0}

.aq{padding:18px}
.aq-head{margin:0 0 12px; font-family:var(--pb-serif); font-weight:600; font-size:20px}
.aq-head b{display:inline-grid; place-items:center; min-width:24px; height:24px; margin-left:6px; border-radius:99px; background:var(--pb-brick); color:#fff; font-family:var(--pb-sans); font-size:12px; vertical-align:3px}
.aq-item{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; padding:12px; margin-top:8px; background:#fff; border:1px solid var(--pb-line); border-radius:10px; font-size:13px; line-height:1.45}
.aq-item p{margin:0}
.aq .aq-k{margin:0 0 3px}
.aq-btns{display:flex; flex-direction:column; gap:6px; font-size:12px}
.aq-btns em,.aq-btns strong{font-style:normal; font-weight:600; text-align:center; padding:6px 10px; border-radius:7px}
.aq-btns em{border:1px solid #1f2b3a33}
.aq-btns strong{background:var(--pb-brick); color:#fff}

.brief{padding:6px 16px 18px; font-size:13.5px; line-height:1.5}
.brief p{margin:0 0 6px}
.brief ol{margin:0 0 6px; padding-left:18px}
.brief li{margin-bottom:5px}

/* the staff */
.as-staff{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin-top:54px}
.as-staff article{background:#000c12; border:1px solid var(--line); border-radius:12px; overflow:hidden; padding:0 0 20px}
.as-staff img{display:block; width:100%; height:auto; aspect-ratio:4 / 5; object-fit:cover; filter:saturate(.92)}
.as-staff h3{margin:18px 20px 0; font-weight:500; font-size:20px; letter-spacing:-.02em; color:#f2fbf8}
.as-role{margin:2px 20px 0; font-size:13px; color:#8fa9a5}
.as-owns{margin:14px 20px 0; font-size:15px; line-height:1.55; color:#c9dcd8}
.as-voice{margin:8px 20px 0; font-size:13px; font-style:italic; color:#8fa9a5}
.as-staff ul{margin:14px 20px 0; padding:0; list-style:none; display:grid; gap:6px}
.as-staff li{font-size:14px; color:#a9c0bc; padding-left:14px; position:relative}
.as-staff li:before{content:''; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:var(--acid)}
.as-ch{display:flex; flex-wrap:wrap; gap:6px; margin:16px 20px 0}
.as-note{max-width:70ch; margin:30px 0 0; font-size:15px; line-height:1.65; color:#a9c0bc}

/* how they work */
.as-flow{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px; margin-top:54px}
.as-flow>div{position:relative; border:1px solid var(--line); border-radius:12px; padding:22px 22px 18px; background:#000c12}
.as-flow>div:not(:last-child):after{content:'→'; position:absolute; right:-26px; top:50%; transform:translateY(-50%); color:var(--acid); font-size:18px}
.as-flow .hub{border-color:#f5f40066}
.as-flow-k{margin:0 0 12px; font-size:11px; letter-spacing:.16em; color:#8fa9a5}
.as-flow ul{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.as-flow li{font-size:15px; color:#d0eee7}
.as-principles{margin-top:60px}
.as-setup{margin-top:60px; padding:30px; border:1px solid var(--line); border-radius:12px}
.as-setup ol{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px; counter-reset:s}
.as-setup li{counter-increment:s; font-size:15px; line-height:1.55; color:#a9c0bc}
.as-setup li:before{content:counter(s,decimal-leading-zero); display:block; font-size:11px; letter-spacing:.1em; color:var(--acid); margin-bottom:10px}
.as-setup b{display:block; font-weight:500; color:#f2fbf8; margin-bottom:4px}

/* features */
.as-feats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:54px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.as-feats>div{background:var(--void); padding:26px 24px}
.as-feats h3{margin:0 0 8px; font-weight:500; font-size:18px; letter-spacing:-.02em; color:#f2fbf8}
.as-feats p{margin:0; font-size:14.5px; line-height:1.6; color:#a9c0bc}

/* cost */
.as-table-wrap{margin-top:40px}
.as-cost{width:100%; border-collapse:collapse; font-size:15px; color:#c9dcd8}
.as-cost th,.as-cost td{text-align:left; padding:16px 18px 16px 0; border-bottom:1px solid var(--line); vertical-align:top; font-weight:400}
.as-cost thead th{font-size:11px; letter-spacing:.16em; color:#8fa9a5; text-transform:uppercase}
.as-cost tbody th{color:#f2fbf8}
.as-cost td:last-child,.as-cost th:last-child{text-align:right; white-space:nowrap; padding-right:0}
.as-cost tfoot th,.as-cost tfoot td{border-bottom:0; font-size:18px; color:#f2fbf8}
.as-cost tfoot td:last-child{color:var(--acid)}

/* the live demo */
.demo{padding:120px var(--pad) 0}
.demo .pb-app{margin-top:44px}

.fine-print{margin:0; padding:0 max(var(--pad),calc((100% - 90ch) / 2)) 50px; background:#000a10; font-size:12px; line-height:1.6; color:#5f7a77; text-align:center}

/* ----------------------------------------------------------- the client's app */
.pb-app{border-radius:14px; overflow:hidden; box-shadow:0 30px 80px #0008; line-height:1.5}
.pb-app *{box-sizing:border-box}
/* liminal's style.css places every <header> absolutely for the hero; undo it inside the client's app */
.pb-app header{position:static; display:block; left:auto; right:auto; top:auto; z-index:auto; justify-content:flex-start}
/* [hidden] must win over the display rules below */
.pb-app [hidden]{display:none !important}
.pb-app button{font-family:var(--pb-sans)}

.pb-bar{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px clamp(18px,3vw,40px); background:var(--pb-card); border-bottom:1px solid var(--pb-line);
}
.pb-lockup{display:block; height:40px; width:auto}
.pb-bar-right{display:flex; align-items:center; gap:22px; font-size:13px; color:var(--pb-muted)}
.pb-app-name{font-weight:600; color:var(--pb-ink); letter-spacing:.08em; text-transform:uppercase; font-size:11px}
.pb-user b{font-weight:600; color:var(--pb-ink)}

.pb-body{padding:clamp(22px,3.4vw,48px) clamp(18px,3vw,40px) 30px; display:grid; gap:28px}

.pb-brief h2{
  margin:0 0 18px; font-family:var(--pb-serif); font-weight:600;
  font-size:clamp(26px,2.6vw,38px); line-height:1.12; letter-spacing:-.01em; color:var(--pb-ink);
}
.pb-prompts{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px}
.pb-prompts button{
  text-align:left; font-size:14px; line-height:1.35; color:var(--pb-ink);
  background:var(--pb-card); border:1px solid #1f2b3a33; border-radius:10px; padding:11px 14px; max-width:100%;
}
.pb-prompts button:hover,.pb-prompts button[aria-pressed=true]{border-color:var(--pb-brick); color:var(--pb-brick-dark)}
.pb-prompts button[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--pb-brick)}

.pb-form{display:flex; gap:10px; align-items:stretch}
.pb-form textarea,.pb-ask input{
  flex:1; min-width:0; font:inherit; font-size:15px; color:var(--pb-ink); background:var(--pb-card);
  border:1px solid #1f2b3a40; border-radius:10px; padding:12px 14px; resize:vertical;
}
.pb-form textarea:focus,.pb-ask input:focus{outline:2px solid var(--pb-brick); outline-offset:1px; border-color:transparent}
.pb-form button,.pb-ask button{
  flex:none; font-size:15px; font-weight:600; color:#fff; background:var(--pb-brick);
  border:0; border-radius:10px; padding:0 22px; min-height:48px;
}
.pb-form button:hover,.pb-ask button:hover{background:var(--pb-brick-dark)}
.pb-app button:disabled,.pb-app input:disabled,.pb-app textarea:disabled{opacity:.55; cursor:not-allowed}
.pb-status{margin:10px 0 0; min-height:1.5em; font-size:14px; color:var(--pb-muted)}
.pb-fixed{margin:4px 0 0; font-size:12px; color:var(--pb-muted)}

.pb-kicker{margin:0 0 10px; font-size:11px; font-weight:600; letter-spacing:.14em; color:var(--pb-muted)}

/* a fixed (non-model) reply */
.pb-notice{background:var(--pb-card); border:1px solid var(--pb-line); border-left:4px solid var(--pb-brick); border-radius:10px; padding:20px 22px}
.pb-notice h3{margin:0 0 6px; font-family:var(--pb-serif); font-weight:600; font-size:22px; line-height:1.2}
.pb-notice p{margin:0; font-size:15px; color:#3b4654; max-width:70ch}
.pb-notice a{display:inline-block; margin-top:12px; font-weight:600; color:var(--pb-brick-dark); border-bottom:1px solid currentColor}

/* the week's plan, from Hollis */
.pb-plan{background:var(--pb-ink); color:var(--pb-paper); border-radius:12px; padding:26px clamp(18px,2.6vw,32px)}
.pb-plan-head{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.pb-plan-head img{width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none}
.pb-plan-head .pb-kicker{margin:0; color:#cfc7b8}
.pb-plan h3{margin:0 0 18px; font-family:var(--pb-serif); font-weight:600; font-size:clamp(22px,2.2vw,30px); line-height:1.2}
.pb-steps{list-style:none; margin:0; padding:0; border-top:1px solid #f7f2e826}
.pb-steps li{display:grid; grid-template-columns:110px 1fr 230px; gap:18px; padding:14px 0; border-bottom:1px solid #f7f2e826; font-size:15px}
.pb-steps .day{font-weight:600; color:#e8a07f}
.pb-steps .owner{color:#cfc7b8; font-size:13px; display:flex; align-items:center; justify-content:flex-end; gap:8px; text-align:right}
.pb-steps .owner img{width:24px; height:24px; border-radius:50%; object-fit:cover; object-position:center 20%}
.pb-steps .owner em{font-style:normal; font-size:10px; font-weight:600; letter-spacing:.08em; color:#e8a07f; border:1px solid #e8a07f66; border-radius:99px; padding:1px 6px}
.pb-plan .pb-chief{margin-top:20px}
.pb-plan .pb-chief li{font-size:14.5px; color:#e9e3d6}
.pb-plan .basis.file{color:#a9c4a2}
.pb-plan .basis.brief{color:#f7f2e8}
.pb-plan .basis.assumption{color:#e3b866}

/* the three lane staff */
.pb-seats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:start}
.pb-seat{background:var(--pb-card); border:1px solid var(--pb-line); border-radius:12px; padding:20px 20px 18px; min-width:0}
.pb-app .pb-seat header{display:flex; align-items:center; gap:12px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--pb-line)}
.pb-seat header img{width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center 20%; flex:none}
.pb-seat h3{margin:0; font-family:var(--pb-serif); font-weight:600; font-size:19px}
.pb-seat header p{margin:1px 0 0; font-size:13px; color:var(--pb-muted)}
.pb-points,.pb-check ul{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.pb-points li{font-size:15px; overflow-wrap:anywhere}
.pb-points .text{display:block}
.basis{display:inline-block; margin-top:5px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase}
.basis.file{color:var(--pb-sage)}
.basis.brief{color:var(--pb-ink)}
.basis.assumption{color:var(--pb-brass)}
.basis:before{content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor; margin-right:6px; vertical-align:1px}
.pb-check,.pb-draft{margin-top:18px; padding-top:14px; border-top:1px dashed #1f2b3a33}
.pb-check li{font-size:14px; color:#3b4654; padding-left:16px; position:relative}
.pb-check li:before{content:'?'; position:absolute; left:0; color:var(--pb-brass); font-weight:600}
.pb-draft-text{margin:0; white-space:pre-line; font-size:14px; line-height:1.6; background:var(--pb-paper); border-radius:8px; padding:12px 14px; overflow-wrap:anywhere}

.pb-points.is-busy:before{content:attr(data-busy); font-size:14px; color:var(--pb-muted); animation:pb-pulse 1.4s ease-in-out infinite}
.pb-plan .pb-points.is-busy:before{color:#cfc7b8}
@keyframes pb-pulse{50%{opacity:.4}}

/* follow-ups sit under the staff member who answered */
.pb-thread{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.pb-thread:not(:empty){margin-top:18px; padding-top:14px; border-top:1px solid var(--pb-line)}
.pb-thread .q{font-size:13px; font-weight:600; color:var(--pb-brick-dark); margin:0 0 8px}
.pb-thread .pb-points li{font-size:14px}
.pb-thread .pb-kicker{margin-top:16px}
.pb-thread .pb-steps{margin-top:10px; border-top-color:var(--pb-line)}
.pb-thread .pb-steps li{grid-template-columns:1fr; gap:2px; border-bottom-color:var(--pb-line); font-size:14px; padding:8px 0}
.pb-thread .pb-steps .day{color:var(--pb-brick-dark)}
.pb-thread .pb-steps .owner{justify-content:flex-start; color:var(--pb-muted)}
.pb-thread .pb-steps .owner em{color:var(--pb-brick-dark); border-color:#b24a2a55}
.pb-thread .fixed{font-size:14px; color:#3b4654}
.pb-thread .who{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; margin:0 0 8px}
.pb-thread .who img{width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:center 20%}

.pb-follow{background:var(--pb-card); border:1px solid var(--pb-line); border-radius:12px; padding:20px}
.pb-seat-pick{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; border:0; padding:0}
.pb-seat-pick label{position:relative}
.pb-seat-pick input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.pb-seat-pick span{display:flex; align-items:center; gap:8px; font-size:14px; padding:5px 14px 5px 5px; border-radius:99px; border:1px solid #1f2b3a33; color:var(--pb-ink)}
.pb-seat-pick img{width:26px; height:26px; border-radius:50%; object-fit:cover; object-position:center 20%}
.pb-seat-pick input:checked+span{background:var(--pb-ink); color:var(--pb-paper); border-color:var(--pb-ink)}
.pb-seat-pick input:focus-visible+span{outline:2px solid var(--pb-brick); outline-offset:2px}
.pb-ask-row{display:flex; gap:10px}

.pb-file{border-top:1px solid var(--pb-line); padding-top:18px}
.pb-file summary{cursor:pointer; font-weight:600; font-size:15px; color:var(--pb-ink)}
.pb-file summary:hover{color:var(--pb-brick-dark)}
.pb-file-text{margin-top:16px; max-height:520px; overflow:auto; background:var(--pb-card); border:1px solid var(--pb-line); border-radius:10px; padding:18px 20px; font-size:14px; line-height:1.6}
.pb-file-text h4{margin:18px 0 6px; font-family:var(--pb-serif); font-weight:600; font-size:17px}
.pb-file-text h4:first-child{margin-top:0}
.pb-file-text p{margin:0 0 8px}
.pb-file-text ul{margin:0 0 8px; padding-left:20px}

/* ------------------------------------------------------------- breakpoints */
@media (max-width:1100px){
  .as-staff{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .as-flow{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px}
  .as-flow>div:after{display:none}
  .as-setup ol{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .as-case,.as-case.flip{grid-template-columns:1fr; gap:44px; margin-top:80px}
  .as-case.flip .as-case-copy{order:0}
  .pb-seats{grid-template-columns:1fr}
  .pb-steps li{grid-template-columns:90px 1fr}
  .pb-steps .owner{grid-column:2; justify-content:flex-start; margin-top:-8px}
}
@media (max-width:600px){
  .as-section,.demo{padding-top:80px}
  .as-roster{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:48px}
  .as-staff,.as-feats,.as-flow,.as-setup ol{grid-template-columns:1fr}
  .as-lede,.as-pain{font-size:16px}
  .as-setup{padding:22px}
  .as-cost thead{display:none}
  .as-cost tr{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:14px 0; border-bottom:1px solid var(--line)}
  .as-cost th,.as-cost td{border:0; padding:0}
  .as-cost td:nth-child(2),.as-cost td:nth-child(3){grid-column:1; font-size:13px; color:#8fa9a5}
  .as-cost td:last-child{grid-column:2; grid-row:1}
  .aq-item{grid-template-columns:auto minmax(0,1fr)}
  .aq-btns{grid-column:2; flex-direction:row}
  .em{padding:16px}
  .em-list li{grid-template-columns:1fr; gap:2px}
  .pb-app{border-radius:10px}
  .pb-bar{flex-wrap:wrap; gap:10px}
  .pb-lockup{height:34px}
  .pb-bar-right{gap:14px}
  .pb-form,.pb-ask-row{flex-direction:column}
  .pb-form button,.pb-ask button{width:100%}
  .pb-steps li{grid-template-columns:1fr; gap:2px}
  .pb-steps .owner{grid-column:auto; margin-top:0}
  .pb-prompts button{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.pb-points.is-busy:before{animation:none}}