/* Zenzo AI — product page components. Loaded after site.css; reuses its tokens and section grammar. */

/* ── Hero additions ── */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.55); margin-bottom: 26px; }
.crumbs a:hover { color: #fff; }
.crumbs svg { width: 10px; height: 10px; transform: rotate(-90deg); opacity: .6; }
.hero-tag { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-tag .badge { font-size: 11px; }
.badge-dark { color: rgba(255,255,255,.75); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.badge-dark-early { color: #FDBA74; background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.35); }
.p-hero .hero { padding-bottom: 72px; }
.p-hero .hero-h1 { font-size: clamp(44px, 4.6vw, 74px); }

/* ── Product visual window (hero) ── */
.pv { position: relative; width: 100%; max-width: 640px; margin-left: auto; font-family: var(--ff-ui); }
.pv::before { content: ''; position: absolute; inset: 8% -6% -4%; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(249,115,22,.28), transparent 70%); filter: blur(10px); }
.pv-win { background: linear-gradient(180deg, #1A1816, #121110); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; overflow: hidden; color: rgba(255,255,255,.86); box-shadow: 0 0 0 6px rgba(255,255,255,.025), 0 40px 90px -30px rgba(0,0,0,.9); }
.pv-bar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--line-d); font-size: 12px; color: rgba(255,255,255,.55); }
.pv-bar .app-dots { display: flex; gap: 6px; }
.pv-bar .app-dots i { width: 9px; height: 9px; border-radius: 50%; }
.pv-bar .app-dots i:nth-child(1) { background: #FF5F57; } .pv-bar .app-dots i:nth-child(2) { background: #FEBC2E; } .pv-bar .app-dots i:nth-child(3) { background: #28C840; }
.pv-bar b { display: inline-flex; align-items: center; gap: 7px; color: #fff; font-weight: 600; font-size: 12px; }
.pv-bar b img { width: 16px; height: 16px; }
.pv-body { padding: 18px; display: grid; gap: 14px; }
.pv-q { display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 14px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(249,115,22,.45); font-size: 13.5px; color: #fff; }
.pv-q span { flex: 1; }
.pv-q b { width: 30px; height: 30px; border-radius: 8px; background: var(--or); display: flex; align-items: center; justify-content: center; }
.pv-q b svg { width: 13px; height: 13px; color: #fff; }
.pv-card { border: 1px solid var(--line-d); border-radius: 12px; background: rgba(255,255,255,.03); padding: 14px; }
.pv-k { font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.pv-h { font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.35; color: #fff; margin-top: 6px; }
.pv-h em { font-style: normal; color: #FB923C; }
.pv-p { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.62); margin-top: 6px; }
.pv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; padding: 4px 8px; }
.pv-chip svg { width: 11px; height: 11px; color: var(--or); }
.pv-chip.ok { color: #4ADE80; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.25); border-radius: 999px; }
.pv-chip.ok svg, .pv-chip.warn svg { color: currentColor; }
.pv-chip.warn { color: #FBBF24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); }
.pv-chip i { width: 16px; height: 16px; border-radius: 4px; display: flex; align-items: center; justify-content: center; background: var(--c, #fff); font-style: normal; font-size: 8px; font-weight: 700; color: #fff; }
.pv-chip i img { width: 10px; height: 10px; }
.pv-chip i.m img { filter: brightness(0) invert(1); }
.pv-chip i.f img { width: 12px; height: 12px; }
.pv-bars { display: grid; gap: 9px; margin-top: 12px; }
.pv-bars div { display: grid; grid-template-columns: 96px 1fr 46px; align-items: center; gap: 10px; font-size: 11px; color: rgba(255,255,255,.75); }
.pv-bars span.b { height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.pv-bars span.b i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, #EA580C, #FB923C); }
.pv-bars span.b i.neg { background: linear-gradient(90deg, #DC2626, #F87171); }
.pv-bars .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pv-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; line-height: 1.7; color: rgba(255,255,255,.7); background: #0B0A09; border: 1px solid var(--line-d); border-radius: 10px; padding: 10px 12px; white-space: pre; overflow: hidden; }
.pv-code .kw { color: #FB923C; } .pv-code .fx { color: #4ADE80; } .pv-code .cm { color: rgba(255,255,255,.35); }
.pv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pv-kpi { border: 1px solid var(--line-d); border-radius: 10px; padding: 12px; background: rgba(255,255,255,.03); }
.pv-kpi small { display: block; font-size: 10px; color: rgba(255,255,255,.5); }
.pv-kpi b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.03em; color: #fff; margin-top: 4px; }
.pv-kpi em { font-style: normal; font-size: 10.5px; color: #4ADE80; }
.pv-kpi em.d { color: #F87171; }
.pv-charts { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.pv-charts svg { width: 100%; height: 96px; display: block; margin-top: 8px; }
.pv-cite { display: grid; gap: 8px; }
.pv-cite div { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line-d); }
.pv-cite .n { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: rgba(249,115,22,.16); color: #FB923C; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pv-cite b { display: block; font-size: 12px; color: #fff; font-weight: 600; }
.pv-cite small { display: block; font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 2px; }
.pv-sup { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; margin: 0 1px; border-radius: 4px; background: rgba(249,115,22,.18); color: #FB923C; font-size: 9px; font-weight: 700; vertical-align: 2px; }
.pv-flow { display: grid; gap: 10px; }
.pv-node { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line-d); background: rgba(255,255,255,.03); font-size: 12px; color: rgba(255,255,255,.85); }
.pv-node .ic { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(249,115,22,.14); color: #FB923C; }
.pv-node .ic svg { width: 14px; height: 14px; }
.pv-node b { display: block; color: #fff; font-weight: 600; }
.pv-node small { display: block; font-size: 10.5px; color: rgba(255,255,255,.5); }
.pv-node .pst { margin-left: auto; }
.pv-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: relative; }
.pv-arrow { display: flex; justify-content: center; color: rgba(249,115,22,.7); height: 14px; }
.pv-arrow svg { width: 14px; height: 14px; transform: rotate(90deg); }
.pv-tag { position: absolute; top: -12px; right: 16px; z-index: 2; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #FDBA74; background: #2A1A0E; border: 1px solid rgba(249,115,22,.4); border-radius: 999px; padding: 4px 10px; }

/* ── Logo strip ── */
.p-strip { max-width: var(--max-w); margin: 0 auto; padding: 32px clamp(24px, 6vw, 96px) 0; }
.p-strip .int-label { margin-bottom: 16px; }
.p-strip .intg-chips span { background: #fff; }

/* ── Product notice (Brain) ── */
.p-note { display: flex; gap: 14px; align-items: flex-start; max-width: 760px; margin-top: 26px; padding: 14px 16px; border-radius: 14px; background: rgba(249,115,22,.1); border: 1px solid rgba(249,115,22,.35); color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.6; }
.p-note svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--or); margin-top: 2px; }
.p-note b { color: #fff; font-weight: 500; }

/* ── Problem cards ── */
.p-prob { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.p-prob article { padding: 30px 28px 32px; border-radius: 22px; background: #fff; border: 1px solid var(--bdr); }
.p-prob .n { font-size: 12px; color: var(--or-dk); }
.p-prob h3 { font-size: 24px; font-weight: 400; line-height: 1.15; letter-spacing: -.045em; margin-top: 18px; }
.p-prob p { font-size: 15px; line-height: 1.65; color: var(--t3); margin-top: 10px; }

/* ── Steps (Sotant label-row style) ── */
.p-steps { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border-top: 1px solid var(--bdr); }
.p-steps li { position: relative; padding: 26px 24px 0 0; }
.p-steps li + li { padding-left: 24px; border-left: 1px solid var(--bdr-l); }
.p-steps li::before { content: ''; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--or); box-shadow: 0 0 0 4px rgba(249,115,22,.15); }
.p-steps li + li::before { left: 24px; }
.p-steps .n { font-size: 12px; color: var(--or-dk); }
.p-steps h3 { font-size: 22px; font-weight: 400; line-height: 1.15; letter-spacing: -.04em; margin-top: 10px; }
.p-steps p { font-size: 14px; line-height: 1.65; color: var(--t3); margin-top: 8px; }

/* ── Feature grid ── */
.p-feat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.p-feat article { padding: 28px 26px 30px; border-radius: 22px; background: #fff; border: 1px solid var(--bdr); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.p-feat article:hover { border-color: #FED7AA; box-shadow: 0 20px 40px -26px rgba(234,88,12,.35); transform: translateY(-2px); }
.p-feat .ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #FFF4ED; border: 1px solid #FED7AA; color: var(--or); }
.p-feat .ic svg { width: 20px; height: 20px; }
.p-feat h3 { font-size: 22px; font-weight: 400; line-height: 1.15; letter-spacing: -.04em; margin-top: 22px; }
.p-feat p { font-size: 15px; line-height: 1.65; color: var(--t3); margin-top: 8px; }

/* ── Deep-dive rows ── */
.p-rows { display: grid; gap: 20px; }
.p-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; padding: 48px; border-radius: 28px; background: #fff; border: 1px solid var(--bdr); }
.p-row.flip .p-row-t { order: 2; }
.p-row h3 { font-size: clamp(28px, 2.6vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: -.05em; margin-top: 16px; }
.p-row-t > p { font-size: 16px; line-height: 1.65; color: var(--t3); margin-top: 14px; }
.p-row ul { list-style: none; display: grid; gap: 12px; margin-top: 24px; }
.p-row li { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; color: var(--t2); }
.p-row li svg { flex-shrink: 0; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #FFF4ED; color: var(--or-dk); margin-top: 3px; }
.p-row li small { display: inline-block; font-size: 10.5px; font-weight: 500; color: #9A3412; background: #FFF4ED; border: 1px solid #FED7AA; border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }

/* Light visual panels used in deep-dive rows */
.lv { border-radius: 18px; background: var(--bg-s); border: 1px solid var(--bdr-l); padding: 22px; font-family: var(--ff-ui); }
.lv-k { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); margin-bottom: 12px; }
.lv-rows { display: grid; gap: 8px; }
.lv-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--bdr-l); font-size: 13px; color: var(--t2); }
.lv-row .ic { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #FFF4ED; color: var(--or-dk); }
.lv-row .ic svg { width: 15px; height: 15px; }
.lv-row b { display: block; font-weight: 600; color: var(--t1); font-size: 13.5px; }
.lv-row small { display: block; font-size: 11.5px; color: var(--t3); }
.lv-row .end { margin-left: auto; flex-shrink: 0; }
.pst { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pst::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pst.g { color: #15803D; background: #F0FDF4; border: 1px solid #BBF7D0; }
.pst.a { color: #B45309; background: #FFFBEB; border: 1px solid #FDE68A; }
.pst.o { color: #C2410C; background: #FFF4ED; border: 1px solid #FED7AA; }
.pst.n { color: var(--t3); background: #F5F4F2; border: 1px solid var(--bdr); }
.pst.d { color: #B91C1C; background: #FEF2F2; border: 1px solid #FECACA; }
.lv-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.75; color: #E7E5E4; background: #151311; border-radius: 12px; padding: 16px 18px; white-space: pre; overflow-x: auto; }
.lv-code .kw { color: #FB923C; } .lv-code .cm { color: #8C877F; } .lv-code .fx { color: #4ADE80; } .lv-code .er { color: #F87171; }
.lv-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid var(--bdr-l); }
.lv-tbl th { text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--t3); padding: 10px 12px; background: #FAFAF8; border-bottom: 1px solid var(--bdr-l); }
.lv-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--bdr-l); color: var(--t2); }
.lv-tbl tr:last-child td { border-bottom: 0; }
.lv-tbl code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--t3); }
.lv-cap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lv-cap span { font-size: 11.5px; color: var(--t3); background: #fff; border: 1px solid var(--bdr-l); border-radius: 999px; padding: 4px 10px; }
.lv-msg { border-radius: 14px; background: #fff; border: 1px solid var(--bdr-l); padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--t2); }
.lv-msg .who { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--t1); margin-bottom: 6px; }
.lv-msg .who img { width: 20px; height: 20px; }
.lv-msg .who small { font-weight: 400; color: var(--t4); }
.lv-page { border-radius: 10px; background: #fff; border: 1px solid var(--bdr-l); padding: 16px; display: grid; gap: 9px; box-shadow: 0 12px 30px -20px rgba(15,14,13,.3); }
.lv-page i { display: block; height: 7px; border-radius: 4px; background: #EEECE8; }
.lv-page .hd { height: 12px; width: 45%; background: #FED7AA; }
.lv-page .bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; }
.lv-page .bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #FB923C, #FED7AA); }

/* ── Team use cases ── */
.p-uc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.p-uc article { display: flex; flex-direction: column; padding: 26px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--bdr); }
.p-uc .tm { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--t1); }
.p-uc .tm span { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #FFF4ED; color: var(--or-dk); }
.p-uc .tm svg { width: 16px; height: 16px; }
.p-uc q { display: block; font-size: 20px; font-weight: 400; line-height: 1.25; letter-spacing: -.035em; color: var(--t1); margin-top: 18px; quotes: '“' '”'; }
.p-uc p { font-size: 14px; line-height: 1.65; color: var(--t3); margin-top: 12px; }

/* ── Model / connector list ── */
.p-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; padding: 40px clamp(24px, 4vw, 48px); border-radius: 28px; background: #fff; border: 1px solid var(--bdr); }

/* ── Comparison / relationship table (Brain) ── */
.p-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bdr); border-radius: 22px; overflow: hidden; }
.p-table th, .p-table td { text-align: left; padding: 18px 24px; border-bottom: 1px solid var(--bdr-l); font-size: 15px; line-height: 1.55; vertical-align: top; }
.p-table th { font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--t3); background: var(--bg-s); }
.p-table td:first-child { font-weight: 500; color: var(--t1); white-space: nowrap; }
.p-table td { color: var(--t3); }
.p-table tr:last-child td { border-bottom: 0; }
.p-table a { color: var(--t1); text-decoration: underline; text-decoration-color: #FDBA74; text-underline-offset: 3px; }

/* ── Example walkthrough (Brain) ── */
.p-example { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; padding: 48px; border-radius: 28px; background: #fff; border: 1px solid var(--bdr); }
.p-example blockquote { font-size: clamp(24px, 2.4vw, 32px); font-weight: 400; line-height: 1.2; letter-spacing: -.045em; color: var(--t1); }
.p-example blockquote::before { content: 'Example request'; display: block; font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--or-dk); margin-bottom: 16px; }
.p-example .src { font-size: 13px; color: var(--t3); margin-top: 18px; }
.p-example ol { list-style: none; display: grid; gap: 0; counter-reset: s; }
.p-example li { counter-increment: s; position: relative; padding: 0 0 22px 46px; font-size: 15px; line-height: 1.6; color: var(--t2); }
.p-example li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: #FFF4ED; border: 1px solid #FED7AA; color: var(--or-dk); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.p-example li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 30px; bottom: 2px; border-left: 1px dashed #FDBA74; }
.p-example li b { display: block; font-weight: 500; color: var(--t1); }

/* ── Roadmap ── */
.p-road { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.p-road article { padding: 28px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--bdr); }
.p-road article.now { border-color: #BBF7D0; box-shadow: 0 0 0 4px rgba(34,197,94,.05); }
.p-road h3 { font-size: 22px; font-weight: 400; line-height: 1.15; letter-spacing: -.04em; margin-top: 16px; }
.p-road > article > p { font-size: 14px; line-height: 1.6; color: var(--t3); margin-top: 6px; }
.p-road ul { list-style: none; display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bdr-l); }
.p-road li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--t2); }
.p-road li::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; background: var(--t5); }
.p-road .now li::before { background: #22C55E; }
.p-road .next li::before { background: var(--or); }
.p-road-note { font-size: 13px; color: var(--t3); margin-top: 18px; }

/* ── FAQ ── */
.p-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.p-faq .sec-top { display: block; margin: 0; }
.p-faq .sec-top > p { width: auto; max-width: 360px; margin-top: 20px; }
.faq-list { border-top: 1px solid var(--bdr); }
.faq-list details { border-bottom: 1px solid var(--bdr); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; font-size: 18px; font-weight: 400; line-height: 1.35; letter-spacing: -.02em; color: var(--t1); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--or-dk); transition: transform .25s var(--ease); }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--or-dk); }
.faq-list details p { font-size: 15px; line-height: 1.7; color: var(--t3); padding: 0 40px 24px 0; }

/* ── Responsive ── */
@media (max-width: 1080px) {
  .pv { margin: 0 auto; }
  .p-prob, .p-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; gap: 0; }
  .p-steps li, .p-steps li + li { padding: 22px 20px 24px 0; border-left: 0; border-top: 1px solid var(--bdr); }
  .p-steps li::before, .p-steps li + li::before { left: 0; }
  .p-row, .p-example { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 40px; }
  .p-row.flip .p-row-t { order: 0; }
  .p-uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-road { grid-template-columns: minmax(0, 1fr); }
  .p-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 768px) {
  .crumbs { margin-bottom: 18px; }
  .p-hero .hero { padding-bottom: 40px; }
  .p-hero .hero-h1 { font-size: clamp(38px, 10.5vw, 52px); }
  .pv-body { padding: 14px; }
  .pv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pv-kpi { padding: 9px; } .pv-kpi b { font-size: 16px; }
  .pv-charts { grid-template-columns: minmax(0, 1fr); }
  .pv-split { grid-template-columns: minmax(0, 1fr); }
  .p-strip { padding: 24px 18px 0; }
  .p-prob, .p-feat, .p-uc, .p-tools { grid-template-columns: minmax(0, 1fr); }
  .p-tools { padding: 28px 20px; }
  .p-steps { grid-template-columns: minmax(0, 1fr); }
  .p-row, .p-example { padding: 26px 20px; border-radius: 22px; }
  /* Table rows become stacked cards on phones */
  .p-table, .p-table tbody, .p-table tr, .p-table td { display: block; width: 100%; }
  .p-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .p-table tr { padding: 16px 18px; border-bottom: 1px solid var(--bdr-l); }
  .p-table tr:last-child { border-bottom: 0; }
  .p-table td { padding: 0; border: 0; font-size: 14px; }
  .p-table td:first-child { white-space: normal; font-size: 16px; }
  .p-table td + td { margin-top: 6px; }
  .lv { padding: 14px; }
  .lv-code { font-size: 11px; }
  .faq-list summary { font-size: 16.5px; }
  .faq-list details p { padding-right: 0; }
}