/* Group sections, item blocks, pills, try box, details, update, FAQ, footer. */
main{display:block}
.group{padding-block:56px 8px;scroll-margin-top:72px}
.group-head{max-width:760px;margin-bottom:8px}
.group-head h2{font-size:clamp(26px,4.2vw,42px);letter-spacing:-.02em}
.group-head p{margin-top:12px;color:var(--mute);font-size:18px;max-width:62ch}

/* Item: flat on mobile (order controls the sequence), two columns from 1024 px */
.item{display:flex;flex-direction:column;gap:18px;padding-block:36px;border-top:1px solid var(--line);scroll-margin-top:72px}
.group-head + .item{margin-top:24px}
.item-text,.item-media{display:contents}
@media (max-width:1023px){
  .item-head{order:1}
  .item-demo{order:2}
  .item-body{order:3}
  .item-img{order:4}
  .item-extra{order:5}
  .item:not(.has-demo) .item-img{order:2}
}
@media (min-width:1024px){
  .item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:56px;align-items:start;padding-block:56px}
  .item.flip{grid-template-columns:minmax(0,.95fr) minmax(0,1fr)}
  .item-text{display:flex;flex-direction:column;gap:18px;min-width:0}
  .item-media{display:flex;flex-direction:column;gap:24px;min-width:0;position:sticky;top:96px}
  .item.flip .item-media{order:-1}
}

.item-body,.item-extra{display:flex;flex-direction:column;gap:18px}
.item-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.pill{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font:600 13px/1 var(--sans);border:1.5px solid transparent;white-space:nowrap}
.pill.da-co{background:var(--lime);color:var(--on-lime)}
.pill.sap-co{border-color:var(--lime-text);color:var(--lime-text)}
.pill.qua{background:var(--lime300);color:var(--on-lime)}
.pill.nang-cap{background:var(--pill-gray);color:var(--ink)}
.item-date{font:500 13px/1 var(--mono);color:var(--mute)}
.av-badge{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:0 12px 0 12px;border-radius:999px;background:#17130F;color:#F3EEE6;font:600 12px/1 var(--sans);border:1px solid #3B3128}
.av-badge img{height:15px;width:auto}
.copy-link{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;padding:0 10px;border:1.5px solid var(--line);border-radius:var(--r2);background:transparent;color:var(--mute);font:600 13px/1 var(--sans);cursor:pointer}
.copy-link:hover{color:var(--ink);border-color:var(--ink)}
.copy-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.copy-link.done{background:var(--lime300);border-color:var(--lime300);color:var(--on-lime)}
.item h3{font-size:clamp(24px,3vw,36px);margin-top:14px;letter-spacing:-.02em}
.item-lead{font-size:19px;line-height:1.55}
.points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.points li{position:relative;padding-left:26px}
.points li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;border-radius:3px;background:var(--lime)}
.facts{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.facts li{display:flex;gap:10px;align-items:baseline;font-size:14px;line-height:1.5;color:var(--mute)}
.facts .tag{flex:none;font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--lime-text);border:1px solid var(--line);border-radius:6px;padding:4px 7px;transform:translateY(-1px)}

/* Try box */
.try{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:10px}
.try-label{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime-text)}
.try-text{font:500 15px/1.55 var(--mono);color:var(--ink);word-break:break-word}
.try .btn{justify-self:start;min-height:44px}

/* Deep notes + FAQ answers: always visible (no collapsing) */
.deep-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 16px}
.deep-h{font-weight:600;font-size:17px;margin:0 0 10px;color:var(--ink)}
.eta{margin-top:10px;display:inline-block;font-size:15px;color:var(--ink);border-left:3px solid var(--lime);padding:2px 0 2px 10px}
.deep{display:grid;gap:12px;color:var(--mute);font-size:16px}
.deep code,.faq-a code{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:.88em;color:var(--ink);word-break:break-word}

/* Update + FAQ */
.section{padding-block:64px 8px;scroll-margin-top:72px}
.section h2{font-size:clamp(26px,4.2vw,42px);letter-spacing:-.02em}
.section>.wrap>p{margin-top:12px;color:var(--mute);font-size:18px;max-width:62ch}
.cmds{display:grid;gap:12px;margin-top:20px;max-width:640px}
.cmd{display:flex;align-items:center;gap:12px;background:#0B0D0E;color:#EEF0EE;border:1px solid #2A2F34;border-radius:var(--r);padding:10px 10px 10px 16px}
.cmd code{flex:1;font:500 16px/1.4 var(--mono);overflow-x:auto;white-space:nowrap}
.cmd .btn{flex:none;border-color:#3A4147;color:#EEF0EE}
.cmd .btn:hover{border-color:#EEF0EE}
.cmd .btn.done{background:var(--lime300);color:var(--on-lime);border-color:var(--lime300)}
.cmd :focus-visible{outline-color:#D4FF85}
.update-note{margin-top:18px;color:var(--mute);max-width:62ch}
.faq{display:grid;gap:10px;margin-top:20px;max-width:820px}
.faq-a{padding:0 16px 16px;color:var(--mute)}

/* Footer (always dark) */
.site-footer{margin-top:80px;background:#0F1113;color:#EEF0EE;border-top:1px solid #2A2F34}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;padding-block:32px}
.site-footer .lockup{height:26px}
.site-footer p{font-size:14px;color:#9AA3A8;margin:0}
.site-footer .credit{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.site-footer time{margin-left:auto;font:500 13px/1 var(--mono);color:#9AA3A8}
.site-footer :focus-visible{outline-color:#D4FF85}
@media (max-width:600px){.copy-link .lbl{display:none}}