@font-face{font-family:"Commissioner";src:url("../fonts/Commissioner-var.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#eceeea;--surface:#fafbfa;--surface-2:#e2e6e2;--text:#1c211f;--soft:#566059;--accent:#8a2340;--rose:#e8a0b6;--hl:#ecc46a;--dark:#2a302d;--soft-dark:#b9c1bc;--line:#d3d8d4;--line-dark:#454c48;--r-card:12px;--r-ctl:8px;--sans:"Commissioner",Arial,Helvetica,system-ui,sans-serif;--fv-body:"wght" 400,"FLAR" 0,"slnt" 0;--fv-med:"wght" 500,"FLAR" 0,"slnt" 0;--fv-head:"wght" 560,"FLAR" 50,"slnt" 0;--fv-quote:"wght" 430,"FLAR" 0,"slnt" -8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;font-variation-settings:var(--fv-body);overflow-wrap:anywhere;accent-color:var(--accent);caret-color:var(--accent)}
::selection{background:var(--surface-2);color:var(--text)}
a{color:var(--accent);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--bg)}
.skip{position:absolute;left:-200vw;top:8px;background:var(--surface);padding:.5rem .8rem;border-radius:var(--r-ctl);z-index:5}
.skip:focus{left:16px}
img,svg{display:block;max-width:100%}
h1,h2,h3{margin:0;font-variation-settings:var(--fv-head);text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,1.15rem + 2.5vw,2.9rem);line-height:1.12}
h2{font-size:clamp(1.45rem,1.1rem + 1.3vw,2.05rem);line-height:1.18}
h3{font-size:1.125rem;line-height:1.3}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:16px;padding-right:16px}
@media (min-width:768px){.wrap{padding-left:32px;padding-right:32px}}
.soft{color:var(--soft)}
.cap{font-size:.8125rem;color:var(--soft);line-height:1.45}
.med{font-variation-settings:var(--fv-med)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.6rem 1.15rem;border-radius:var(--r-ctl);border:1px solid var(--accent);background:var(--accent);color:var(--surface);text-decoration:none;font-variation-settings:var(--fv-med);line-height:1.2;cursor:pointer;font-family:inherit;font-size:1rem;transition:transform .12s ease-out,background-color .15s ease-out}
.btn:hover{text-decoration:none;box-shadow:inset 0 0 0 2px var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface);border-color:var(--accent)}
.lnk{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:.16em;cursor:pointer;font-variation-settings:var(--fv-med)}

/* header */
.hdr{border-bottom:1px solid var(--line);background:var(--bg)}
.hdr-row{display:flex;align-items:center;gap:14px;min-height:64px;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.logo img{height:26px;width:auto}
.logo .by{font-size:.875rem;color:var(--soft);white-space:nowrap}
.nav{display:none;margin-left:auto;align-items:center;gap:22px}
.nav .btn{flex:none;white-space:nowrap;padding:.6rem 1.15rem;color:var(--surface)}
.nav a{color:var(--text);text-decoration:none;font-size:.95rem;padding:.35rem 0}
.nav a:hover{text-decoration:underline}
.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-ctl);padding:2px}
.lang a,.lang span{font-size:.8125rem;padding:.25rem .5rem;border-radius:6px;text-decoration:none;color:var(--text);min-width:36px;text-align:center;line-height:1.4}
.lang span{background:var(--surface);font-variation-settings:var(--fv-med)}
.lang a:hover{background:var(--surface)}
.menu{margin-left:auto;position:relative}
.menu summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;padding:.4rem .9rem;border:1px solid var(--line);border-radius:var(--r-ctl);font-size:.95rem;background:var(--surface)}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:var(--text)}
.menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:240px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:8px;z-index:4;display:grid;gap:2px}
.menu-panel a{display:block;padding:.6rem .7rem;color:var(--text);text-decoration:none;border-radius:var(--r-ctl);font-size:1rem}
.menu-panel a:hover{background:var(--surface-2)}
.menu-panel .lang{margin:6px 6px 2px;justify-self:start}
.hdr-cap{padding-bottom:12px;font-size:.9rem;color:var(--soft);line-height:1.4}
.m-br{display:inline}
@media (min-width:900px){.nav{display:flex}.menu{display:none}.m-br{display:none}.hdr-cap{font-size:.95rem}}
@media (max-width:420px){.m-br::after{content:"\A";white-space:pre}}

/* round 2 */
.m-lang{margin-left:auto}
.m-lang .lang a,.m-lang .lang span{min-width:32px;padding:.25rem .4rem}
@media (min-width:900px){.m-lang{display:none}}
@media (max-width:480px){.logo img{height:22px;width:auto}.logo .by{font-size:.8125rem}.logo{gap:8px}.hdr-row{gap:10px}.menu summary{padding:.4rem .6rem}}
.frag{background:transparent;border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px}
.frag .sp{font-size:.8125rem;color:var(--soft);margin-bottom:2px;font-variation-settings:var(--fv-med)}
.frag p{font-size:1rem;line-height:1.55}
.at{text-decoration:underline dotted;text-decoration-color:var(--text);text-decoration-thickness:1.5px;text-underline-offset:.2em;font-variation-settings:var(--fv-med)}
.conn{display:flex;align-items:center;gap:10px;padding:6px 0 6px 20px;color:var(--soft);font-size:.8125rem}
.conn::before{content:"";width:1px;height:22px;background:var(--soft);margin-left:0}
.conn span{font-variation-settings:var(--fv-med)}
.nodes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.nodes li{display:flex;align-items:center;gap:12px}
.nodes li::after{content:"";flex:1;height:1px;background:var(--line)}
.nodes li:last-child::after{display:none}
.node{display:inline-block;padding:.45rem .9rem;border:1px solid var(--text);border-radius:var(--r-ctl);font-variation-settings:var(--fv-med);background:var(--surface)}
.more{margin-top:24px}
.dark .acts{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-dark);color:var(--soft-dark);font-size:.95rem}
.err{color:var(--accent);font-size:.875rem;font-variation-settings:var(--fv-med)}
.err[hidden]{display:none}
.form input[aria-invalid="true"]{border-color:var(--accent)}
.legal{margin-top:4px}
.legal a{color:var(--soft)}
.ftr.dark{border-top:0;padding:36px 0 44px;color:var(--soft-dark)}
.ftr.dark .logo .by{color:var(--soft-dark)}
.ftr.dark a{color:var(--rose)}
.ftr .ftr-row{row-gap:16px}

/* hero */
.hero{padding:40px 0 48px}
.hero-grid{display:grid;gap:36px}
.hero-copy{max-width:40rem}
.hero-copy .sub{margin-top:18px;font-size:1.0625rem;color:var(--soft);max-width:38rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:28px}
@media (min-width:960px){.hero{padding:56px 0 56px}.hero-grid{grid-template-columns:7fr 5fr;gap:56px;align-items:start}.hero-copy{padding-top:8px}}

/* evidence card */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px}
.ev .field{font-size:.8125rem;color:var(--soft);margin-bottom:6px;font-variation-settings:var(--fv-med)}
.ev .finding{font-size:1rem}
.ev .field+.finding{margin-bottom:16px}
.q{font-size:1rem;line-height:1.75;font-variation-settings:var(--fv-quote);color:var(--text)}
.q .hl{background:linear-gradient(transparent 60%,var(--hl) 60%);color:var(--text);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .08em}
.ev-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.locate{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:.35rem .8rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--accent);font:inherit;font-size:.95rem;font-variation-settings:var(--fv-med);cursor:pointer;text-decoration:none}
.locate:hover{border-color:var(--accent)}
.locate svg{width:16px;height:16px;flex:none}
.locate[aria-expanded="true"] svg{transform:rotate(180deg)}
.reveal{margin-top:16px;background:var(--surface-2);border-radius:var(--r-ctl);padding:14px 16px;display:grid;gap:12px}
.reveal[hidden]{display:none}
.turn .sp{font-size:.8125rem;color:var(--soft);margin-bottom:2px;font-variation-settings:var(--fv-med)}
.turn p{font-size:1rem}
.turn p+p{margin-top:.4em}
.ev-cap{margin-top:10px}

/* sections */
.sec{padding:56px 0}
@media (min-width:960px){.sec{padding:80px 0}}
.sec h2{max-width:28ch}
.sec-head{display:grid;gap:14px;margin-bottom:28px;max-width:44rem}
.steps{display:grid;gap:28px;margin-top:32px;counter-reset:s}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding-top:18px;border-top:1px solid var(--line)}
.step .n{font-size:1.75rem;line-height:1;font-variation-settings:var(--fv-head);color:var(--soft);min-width:1.4ch}
.step p{max-width:34rem}
@media (min-width:860px){.steps{grid-template-columns:repeat(3,1fr);gap:28px}.step{grid-template-columns:1fr;gap:12px}}

.split{display:grid;gap:28px}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr;gap:64px;align-items:center}}
.split .text p{margin-top:14px;max-width:34rem}


/* dark band */
.dark{background:var(--dark);color:var(--bg)}
.dark h2,.dark h3{color:var(--bg)}
.dark .soft,.dark .cap{color:var(--soft-dark)}
.dark a{color:var(--rose)}
.consent{background:transparent;border:1px solid var(--line-dark);border-radius:var(--r-card);padding:20px}
.consent h3{font-size:1rem;color:var(--soft-dark);font-variation-settings:var(--fv-med)}
.consent ol{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:0}
.consent li{padding:10px 0;border-top:1px solid var(--line-dark);display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:baseline}
.consent li b{font-variation-settings:var(--fv-med);color:var(--soft-dark);font-size:.875rem;min-width:1.4ch}

/* fit */
.fit-grid{display:grid;gap:24px;margin-top:28px}
@media (min-width:760px){.fit-grid{grid-template-columns:1fr 1fr;gap:40px}}
.fit-col h3{padding-bottom:10px;border-bottom:1px solid var(--text)}
.fit-col ul{margin:0;padding:0;list-style:none}
.fit-col li{padding:11px 0;border-bottom:1px solid var(--line)}
.fit-col li:last-child{border-bottom:0}
.fit-note{margin-top:28px;max-width:44rem;color:var(--soft)}

/* price */
.price{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.price-grid{display:grid;gap:28px}
@media (min-width:960px){.price-grid{grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}}
.price .big{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.15;font-variation-settings:var(--fv-head);letter-spacing:-.01em}
.price .big span{display:block;color:var(--soft);font-size:clamp(1.1rem,1rem + .6vw,1.35rem);margin-top:8px;font-variation-settings:var(--fv-body)}
.price ul{margin:12px 0 0;padding:0;list-style:none;display:grid}
.price li{padding:9px 0;border-top:1px solid var(--line)}
.price h3{font-size:1rem;color:var(--soft);font-variation-settings:var(--fv-med)}

/* start */
.start-grid{display:grid;gap:28px}
@media (min-width:960px){.start-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.form{display:grid;gap:12px;margin-top:22px;max-width:30rem}
.form label{font-size:.875rem;font-variation-settings:var(--fv-med)}
.form input{font:inherit;font-size:1rem;min-height:46px;padding:.5rem .8rem;border:1px solid var(--soft);border-radius:var(--r-ctl);background:var(--surface);color:var(--text);width:100%}
.form input::placeholder{color:var(--soft)}
.form input:focus-visible{outline-offset:2px}
.aside{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;max-width:30rem}
.aside p+p{margin-top:12px}

/* footer */
.ftr{border-top:1px solid var(--line);padding:32px 0 40px;font-size:.9rem;color:var(--soft)}
.ftr-row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.ftr-row .brand{color:var(--text);font-variation-settings:var(--fv-med)}
.ftr a{color:var(--text)}
.ftr .ba{margin-top:18px}

/* example page */
.ex-hero{padding:40px 0 8px}
.ex-hero .sub{margin-top:12px;color:var(--soft);font-size:1.0625rem}
.flow{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;counter-reset:f}
.flow li{counter-increment:f;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
.flow li::before{content:counter(f);font-variation-settings:var(--fv-head);color:var(--soft);font-size:1.1rem;line-height:1.4;min-width:1.4ch}
@media (min-width:760px){.flow{grid-template-columns:repeat(4,1fr);gap:0 20px}.flow li{grid-template-columns:1fr;gap:6px;padding:14px 0}}
.cab{margin-top:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);display:grid;overflow:hidden}
@media (min-width:900px){.cab{grid-template-columns:260px 1fr}}
.cab-side{border-bottom:1px solid var(--line);padding:16px}
@media (min-width:900px){.cab-side{border-bottom:0;border-right:1px solid var(--line);padding:20px}}
.cab-side h3{font-size:.8125rem;color:var(--soft);font-variation-settings:var(--fv-med)}
.cab-item{margin-top:10px;padding:12px;border-radius:var(--r-ctl);background:var(--surface-2);display:grid;gap:2px}
.cab-item .cap{color:var(--soft)}
.cab-main{padding:16px;min-width:0}
@media (min-width:900px){.cab-main{padding:24px 28px 28px}}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:.65rem .8rem;font:inherit;font-size:1rem;color:var(--soft);cursor:pointer;white-space:nowrap;min-height:44px;font-variation-settings:var(--fv-med)}
.tab[aria-selected="true"]{color:var(--text);border-bottom-color:var(--text)}
.tab:hover{color:var(--text)}
.panel{padding-top:22px}
.panel[hidden]{display:none}
.quotes{display:grid;gap:16px}
@media (min-width:1100px){.quotes{grid-template-columns:1fr 1fr}}
.ev.inner{background:var(--bg);border-color:var(--line)}
.turns{display:grid;gap:18px;max-width:46rem}
.turns .turn{padding:12px 14px;border-radius:var(--r-ctl);border:1px solid transparent}
.turns .turn.ai{background:transparent}
.turns .turn.resp{background:var(--bg)}
.turns .turn.located{border-color:var(--text);background:var(--surface)}
.turns .turn:focus-visible{outline-offset:2px}
.sum{max-width:46rem}
.sum .lead{color:var(--soft);margin-top:8px}
.sum .ver{font-size:.8125rem;color:var(--soft);margin-top:4px}
.sum h3{margin:26px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.sum .blk{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px;margin-top:10px}
.sum .fix{margin-top:10px;padding:8px 12px;background:var(--surface-2);border-radius:var(--r-ctl)}
.sum .fix .cap{margin-bottom:2px}
.sum .sign{margin-top:22px;color:var(--soft)}
.ex-note{margin-top:14px;max-width:46rem}
.ex-cta{margin-top:28px;padding-bottom:64px}
@media (min-width:900px){.flow{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center}.flow li{border:0;padding:0;display:flex;align-items:center;gap:0}.flow li::before{display:none}.flow li span{display:inline-block;padding:.45rem .85rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-ctl);font-variation-settings:var(--fv-med)}.flow li:not(:last-child) svg{display:block}}
.flow li svg{display:none;width:18px;height:18px;margin:0 2px;color:var(--soft);flex:none}

/* pages: how / who / pricing / order */
.sec.tight{padding:32px 0 40px}
@media (min-width:960px){.sec.tight{padding:40px 0 56px}}
.h3{font-size:1.125rem;line-height:1.3}
.rows{list-style:none;margin:0;padding:0;display:grid}
.row{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:22px 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row .n{font-size:1.75rem;line-height:1;font-variation-settings:var(--fv-head);color:var(--soft);min-width:1.4ch}
.row-body{display:grid;align-content:start;gap:10px;max-width:46rem;min-width:0}
.row-body.wide{grid-column:1 / -1}
.plain{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.plain li{padding-left:0}
.opt{margin:12px 0 0;padding-left:1.4em;display:grid;gap:8px}
.two{display:grid;gap:36px}
@media (min-width:960px){.two{grid-template-columns:1fr 1fr;gap:64px}.two-col{grid-template-columns:1fr 1fr;column-gap:64px}.two-col .row:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--line)}}
.two p{margin-top:12px;max-width:34rem}
.hw-consent{margin-top:6px;border:1px solid var(--line);border-radius:var(--r-card);padding:14px 16px;background:var(--surface)}
.hw-consent h4{margin:0 0 6px;font-size:.8125rem;color:var(--soft);font-variation-settings:var(--fv-med)}
.ba-line{margin-top:24px;color:var(--soft)}
.ex-hero h1{max-width:30ch}
.faqs{margin-top:20px;max-width:46rem}
.faq{border-top:1px solid var(--line);padding:0}
.faq:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;min-height:44px;display:flex;align-items:center;padding:.6rem 0;font-variation-settings:var(--fv-med)}
.faq p{padding:0 0 14px;color:var(--soft)}
.sec.tight .cta-row{margin-top:28px}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.nav .btn[aria-current="page"],.nav .btn[aria-current="page"]:hover{text-decoration:none}
.menu-panel a[aria-current="page"]{background:var(--surface-2)}
.stripe-row{margin-top:16px}
.fit-cards ul{display:grid;gap:12px}
.fit-cards li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px}
.fit-cards li:last-child{border-bottom:1px solid var(--line)}
.logo .by{font-size:.875rem;color:var(--soft);white-space:nowrap}

/* home v2 */
.hero-one .hero-copy{max-width:52rem}
.hero-one .cta-row{gap:12px 20px}
.wow{margin-top:18px;max-width:40rem;font-size:.9375rem}
.think{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:0;counter-reset:th;max-width:46rem}
.think li{counter-increment:th;display:grid;grid-template-columns:auto 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.think li::before{content:counter(th);font-variation-settings:var(--fv-head);color:var(--soft);font-size:1.1rem;min-width:1.4ch}
.try-p{margin-top:12px;max-width:44rem}
.topics{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
@media (min-width:760px){.topics{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.topics{grid-template-columns:repeat(3,1fr)}}
.topic{width:100%;text-align:left;min-height:44px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);color:var(--text);font:inherit;font-size:.95rem;line-height:1.45;cursor:pointer}
.topic b{font-variation-settings:var(--fv-med)}
.topic:hover{border-color:var(--accent)}
.topic[aria-pressed="true"]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.try-frame{margin-top:22px;display:grid;gap:12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);padding:16px;min-height:260px}
@media (min-width:760px){.try-frame{grid-template-columns:1fr 1fr;min-height:320px}}
.try-pane{background:var(--bg);border-radius:var(--r-ctl);padding:18px;display:grid;align-content:start;gap:12px}
.try-pane i{display:block;height:10px;border-radius:5px;background:var(--surface-2)}
.try-pane i:nth-child(2){width:80%}.try-pane i:nth-child(3){width:60%}.try-pane i:nth-child(4){width:70%}
.ucs{margin-top:26px;display:grid;gap:16px}
@media (min-width:700px){.ucs{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.ucs{grid-template-columns:repeat(3,1fr)}}
.uc{display:flex;flex-direction:column;gap:12px}
.uc h3{font-size:1.125rem}
.uc dl{margin:0;display:grid;gap:4px;flex:1}
.uc dt{font-size:.8125rem;color:var(--soft);font-variation-settings:var(--fv-med);margin-top:8px}
.uc dd{margin:0}
.uc p{margin:0}
.get-line{margin-top:18px;max-width:44rem}
.demo-wrap{margin-top:36px;max-width:34rem}


/* ================= home v3, direction B: structural product panels =================
   Rules extended 12.10 (order «Версия 3»): garnet for icons, numbers and thin section accents;
   ochre for marker under verbatim phrases and side labels. Tints are rgba() of palette colours only. */
@media (min-width:768px){:root{--r-panel:24px}}

/* icon chips */
.ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--surface);vertical-align:middle}
.ic svg{display:block}
.ic-sm{width:30px;height:30px;border-radius:8px;background:var(--accent-tint);color:var(--accent)}
.ic-card{width:46px;height:46px;border-radius:12px}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.sec-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:42px;height:42px;border-radius:10px;background:var(--accent);color:var(--surface)}
.sec-ic svg{width:22px;height:22px}
.dark .sec-ic{background:var(--rose);color:var(--text)}
.ico-row{display:inline-flex;gap:6px;vertical-align:-3px;margin-right:10px;color:var(--accent)}
.ico-row svg{width:18px;height:18px}

/* panels and bands */
.sec{padding:14px 12px}
.sec>.wrap{border-radius:var(--r-panel);padding:34px 20px 36px}
.sec.band{padding:56px 0}
.sec.band>.wrap{border-radius:0;padding:0 16px}
@media (min-width:768px){.sec{padding:16px 16px}.sec>.wrap{padding:48px 44px 52px}.sec.band>.wrap{padding:0 32px}}
@media (min-width:960px){.sec{padding:18px 24px}.sec>.wrap{padding:60px 56px 64px}.sec.band{padding:80px 0}.sec.band>.wrap{padding:0 32px}}
.p-surface>.wrap{background:var(--surface)}
.band.dark{background:var(--dark)}
.band.surface-2{background:var(--surface-2)}
.band.surface{background:var(--surface)}
.hero{padding:44px 0 36px}
@media (min-width:960px){.hero{padding:64px 0 52px}}
.hero h1{position:relative;padding-top:18px}
.hero h1::before{content:"";position:absolute;left:0;top:0;width:48px;height:4px;border-radius:2px;background:var(--accent)}

/* how it thinks */
.think{max-width:none;gap:10px;margin-top:22px}
@media (min-width:860px){.think{grid-template-columns:1fr 1fr;gap:12px}}
.think li{position:relative;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:14px 16px 14px 14px;border:0;border-radius:var(--r-card);background:var(--bg)}
.think li::before{position:absolute;left:38px;top:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--surface);color:var(--accent);font-size:.75rem;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg);font-variation-settings:var(--fv-med)}
.think li .t{font-size:1rem}

/* try: topics on cream */
.topic{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:var(--surface);border-color:transparent}
.topic .ic-sm{margin-top:1px}
.topic:hover{border-color:var(--accent)}
.try-frame{border-color:transparent;background:var(--surface)}
.try-pane{background:var(--bg)}

/* use cases */
.ucs{margin-top:28px}
.uc{gap:10px;padding:22px}
.uc .ic-card{margin-bottom:6px}
.uc dd+dt{margin-top:12px}
.uc dt:last-of-type+dd{padding-left:12px;border-left:2px solid var(--accent);color:var(--soft)}
.uc p{margin-top:8px}

/* two kinds of result */
.opt{list-style:none;padding:0;margin:20px 0 0;gap:12px;counter-reset:o}
@media (min-width:760px){.opt{grid-template-columns:1fr 1fr;max-width:60rem}}
.opt li{counter-increment:o;position:relative;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:16px;border-radius:var(--r-card);background:var(--bg)}
.opt li::before{content:counter(o);position:absolute;left:38px;top:10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--surface);color:var(--accent);font-size:.75rem;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--bg);font-variation-settings:var(--fv-med)}
.get-line{display:flex;align-items:center;gap:10px;margin-top:20px;max-width:none}

/* where to find interviewees */
.people{margin-top:14px;line-height:2.2}
.people .pi{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--surface);margin:3px 0;max-width:100%;line-height:1.4}
.people .dot{color:var(--soft)}

/* consent: light panel or dark band */
.consent{background:rgba(28,33,31,.04);border-color:transparent}
.consent h3{color:var(--soft)}
.consent li{border-top-color:var(--line);align-items:center}
.consent li b{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;border-radius:13px;background:var(--accent);color:var(--surface);font-size:.8125rem}
.acts{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);color:var(--soft);font-size:.95rem}
.split .text p{color:var(--text)}
.dark .consent{background:rgba(236,238,234,.05)}
.dark .consent h3{color:var(--soft-dark)}
.dark .consent li{border-top-color:rgba(236,238,234,.14)}
.dark .consent li b{background:var(--rose);color:var(--text)}
.dark .acts{border-top-color:rgba(236,238,234,.14);color:var(--soft-dark)}
.dark .split .text p{color:var(--bg)}
.dark .ic{background:var(--rose);color:var(--text)}

/* price and demo */
.price{border:0}
.price .big{margin-top:14px}
.conn::before{background:var(--accent)}
.at{text-decoration:none;box-shadow:inset 0 -.45em 0 var(--hl);padding:0 .08em}
.frag{background:var(--bg);border-color:transparent}
.ev{border-color:transparent}
.ev .field{color:var(--accent)}
.card.ev .field+.q .hl{background:linear-gradient(transparent 55%,var(--hl) 55%)}

/* start */
.form input{border-color:transparent}
.start-grid{gap:0}
.people .pi{background:var(--bg)}
.demo-card .ev{background:var(--bg)}
@media (max-width:599px){.sec-h{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:8px}}
.people{line-height:2.6}
.people .pi{display:inline;padding:7px 12px 7px 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:2.6}
.people .pi .ic-sm{vertical-align:middle;margin-right:8px;margin-top:-3px}
/* people: inline-block pills (no flex in the inline run, so innerText keeps one line) */
.people{line-height:1.6;margin-top:16px}
.people .pi{display:inline-block;max-width:calc(100% - 28px);padding:5px 12px 5px 5px;line-height:1.4;vertical-align:middle;margin:3px 0;border-radius:18px}
.people .pi .ic-sm{display:inline-block;position:relative;vertical-align:middle;margin:0 8px 0 0;top:-1px}
.people .pi .ic-sm svg{position:absolute;left:6px;top:6px}
.people .dot{margin:0 6px}
.people .pi .ic-sm{position:static;width:30px;height:30px;line-height:30px;text-align:center}
.people .pi .ic-sm svg{display:inline;position:static;vertical-align:middle;margin-top:-3px}

/* ---- round 2 (judge: B chosen, 7 fixes) ---- */
.hero-one .wrap{display:grid;gap:28px;align-items:center}
.hero-side{max-width:40rem}
/* 2. dark panel: big numbers 01-04, no icon circles */
.think{gap:0 32px;margin-top:28px}
@media (min-width:860px){.think{grid-template-columns:repeat(4,1fr)}}
.think li{display:grid;grid-template-columns:1fr;gap:10px;padding:22px 0 18px;border-top:1px solid var(--line);border-radius:0;background:transparent;align-content:start}
.think li::before{content:"0" counter(th);position:static;font-size:2.75rem;line-height:.9;font-variation-settings:var(--fv-head);color:var(--accent);letter-spacing:-.03em;background:none;box-shadow:none;padding:0;min-width:0;height:auto;text-align:left}
/* 3. price: big graphite price, demo beside */
.price .big{margin-top:20px;color:var(--text);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);line-height:1.15;font-variation-settings:var(--fv-head);letter-spacing:-.01em;max-width:30ch}
@media (min-width:1100px){.price>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,34rem);column-gap:72px;align-items:start}.price>.wrap>*{grid-column:1}.price .demo-wrap{grid-column:2;grid-row:1 / span 4;margin-top:0;max-width:none}}
/* 4. plain h2 where the tile was removed */
.sec h2+.try-p,.sec h2+.soft{margin-top:12px}
/* 5. people: chips in an even grid, separators kept in the text layer only */
.people{line-height:1.5;margin-top:22px;font-size:0}
.people .pi{font-size:1rem;display:inline-block;width:100%;max-width:100%;margin:0 0 10px;padding:7px 14px 7px 7px;border-radius:999px;background:var(--bg);vertical-align:top;white-space:normal}
.people .dot{font-size:0;opacity:0}
@media (min-width:768px){.people{display:block}.people .pi{width:calc(50% - 6px);margin-right:12px;white-space:nowrap}.people .pi:nth-of-type(2n){margin-right:0}}
.p-surface .people .pi{background:var(--bg)}
.form input{border:1px solid var(--soft);background:var(--surface)}
.form input:hover{border-color:var(--text)}
.form input:focus-visible{border-color:var(--accent);outline-color:var(--accent)}
.form .btn{min-width:100%}
@media (min-width:480px){.form .btn{min-width:0}}
.uc dt:last-of-type+dd{padding-left:0;border-left:0;color:var(--text)}
/* round 2 polish */
@media (min-width:768px){.people .pi{width:calc(50% - 6px);margin-right:12px}.people .pi:nth-of-type(2n){margin-right:12px}.people .pi:nth-of-type(4n+3){margin-right:0}}
@media (min-width:768px){.people .pi{width:calc(50% - 8px)}}
.people .dot{margin:0;padding:0}
@media (min-width:768px) and (max-width:1099px){.people .pi{white-space:normal}}


/* ================= home v4 (tk#791, 12.10): ochre only as marker under verbatim words; dark bands as section rhythm;
   motion: reveal on scroll, live demo, hover states; video slots (hero, consent, result). CSS + small vanilla JS. ================= */
:root{--accent-tint:rgba(138,35,64,.09);--r-panel:20px;--ease-out:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.175,1);--shadow:0 12px 32px rgba(28,33,31,.08)}
@media (min-width:768px){:root{--r-panel:24px}}

/* dark bands: full-bleed graphite between light panels */
.band.dark{background:var(--dark);color:var(--bg)}
.dark .sec-h{margin-bottom:0}
.dark .think li{border-top-color:rgba(236,238,234,.18)}
.dark .think li::before{color:var(--rose)}
.dark .think li .t{color:var(--bg)}
.dark .btn{background:var(--rose);border-color:var(--rose);color:var(--text)}
.dark .btn:hover{box-shadow:inset 0 0 0 2px rgba(28,33,31,.22)}
.dark .btn-ghost{background:transparent;color:var(--rose);border-color:var(--line-dark)}
.dark .btn-ghost:hover{background:rgba(236,238,234,.06);border-color:var(--rose)}
.dark .form label{color:var(--bg)}
.dark .form input{border-color:transparent}
.dark .form input:hover{border-color:var(--soft-dark)}
.dark .form input:focus-visible{border-color:var(--rose);outline-color:var(--rose)}
.dark .err{color:var(--rose)}
.start-grid>div{max-width:40rem}
.ftr.dark{border-top:1px solid var(--line-dark)}

/* hero: copy + video */
.hero-one .wrap{display:grid;gap:28px;align-items:center}
.hero-side{display:grid;gap:14px;max-width:none;width:100%}
.wow{margin:0;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:14px 16px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);color:var(--soft);font-size:.9375rem;line-height:1.5;max-width:none}
.wow .ic-wow{width:36px;height:36px}
.wow .ic-wow svg{width:20px;height:20px}
@media (min-width:960px){.hero-one .wrap{grid-template-columns:minmax(0,1fr) minmax(0,34rem);gap:56px}.hero-one .hero-copy{max-width:40rem}}

/* video slot: 16:9 frame, poster is the LCP candidate, controls are icon buttons */
.vid{position:relative;margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--dark);aspect-ratio:16/9;box-shadow:var(--shadow)}
.dark .vid{box-shadow:0 12px 32px rgba(28,33,31,.35)}
.vid video{display:block;width:100%;height:100%;object-fit:cover;background:var(--dark)}
.vid video::cue{font-family:var(--sans);font-size:.95rem;color:var(--bg);background:rgba(42,48,45,.82)}
.vid-ctl{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.vid-btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(236,238,234,.35);background:rgba(42,48,45,.72);color:var(--bg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background-color .15s ease,transform .16s var(--ease-out),color .15s ease}
.vid-btn:hover{background:var(--dark)}
.vid-btn:active{transform:scale(.96)}
.vid-btn .i-pause{display:none}
.vid.playing .i-pause{display:block}
.vid.playing .i-play{display:none}
.vid-btn[data-cc][aria-pressed="true"]{background:var(--bg);color:var(--text);border-color:var(--text)}
.vid-btn[data-cc][aria-pressed="true"]:hover{background:var(--surface)}
.vid:focus-within .vid-ctl,.vid:hover .vid-ctl{opacity:1}

/* hero below 960px: video, H1 and buttons first (first screen at 390), then the lead paragraph and the caption */
@media (max-width:959px){.hero-one{padding:20px 0 36px}.hero-one .wrap{gap:14px}.hero-one .hero-copy,.hero-one .hero-side{display:contents}.hero-one .vid-hero{order:1}.hero-one .hero-copy h1{order:2}.hero-one .hero-copy .cta-row{order:3;margin-top:0}.hero-one .hero-copy .sub{order:4;margin-top:4px}.hero-one .hero-side .wow{order:5}}
.vid-hero .vid-ctl{top:10px;bottom:auto}
/* hero video: 4:5 below 960px, 16:9 from 960px */
.vid-hero{aspect-ratio:4/5}
@media (min-width:960px){.vid-hero{aspect-ratio:16/9}}

/* consent: text | list, then the video full width */
.consent-grid{gap:28px}
.consent-vid{display:grid;gap:10px}
@media (min-width:960px){.consent-grid{grid-template-columns:1fr 1fr;gap:40px 64px;align-items:center}.consent-vid{grid-column:1 / -1;max-width:56rem;width:100%;justify-self:center}}

/* result: options left, video right */
.vid-result{margin-top:24px}
@media (min-width:1100px){#get>.wrap:has(.vid-result){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);column-gap:64px;align-items:center}#get>.wrap:has(.vid-result)>*{grid-column:1}#get .vid-result{grid-column:2;grid-row:1 / span 4;margin-top:0}#get>.wrap:has(.vid-result) .opt{grid-template-columns:1fr;max-width:none}}

/* try: paper tiles on the white panel, live demo frame */
.try .topic{background:var(--bg);border-color:transparent}
.try .topic:hover{border-color:var(--accent)}
.try .try-frame{background:var(--bg);border-color:transparent;min-height:280px}
.try .try-pane{background:var(--surface);position:relative}
.try-pane.map{padding:16px;min-height:240px}
.map-svg{width:100%;height:auto;display:block}
.dn rect{fill:var(--surface);stroke:var(--text);stroke-width:1}
.dn .dn-t{fill:var(--surface-2);stroke:none}
.dn{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.94);transition:opacity .3s var(--ease-out),transform .4s var(--ease-out)}
.dn.on{opacity:1;transform:none}
.dl{fill:none;stroke:var(--accent);stroke-width:1.25;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease-out)}
.dl.on{stroke-dashoffset:0}
.try-pane.doc{padding:18px;gap:12px;align-content:start}
.try-pane.doc .ln{display:block;height:10px;border-radius:5px;background:var(--surface-2);width:var(--w);opacity:0;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out),opacity .3s var(--ease-out)}
.try-pane.doc .ln.on{opacity:1;transform:none}
.try-pane.doc .ln-h{height:16px;background:var(--line)}
.try-pane.doc .caret{position:absolute;left:0;top:0;width:2px;height:14px;border-radius:0;background:var(--accent);opacity:0;transition:transform .3s var(--ease-out),opacity .2s}
.try-frame.live .caret{animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
.try-pane .voice{position:absolute;right:14px;top:12px;display:flex;gap:3px;align-items:center;height:20px;opacity:0;transition:opacity .3s ease}
.try-frame.live .voice{opacity:1}
.try-pane .voice i{display:block;width:3px;height:10px;border-radius:2px;background:var(--accent);transform:scaleY(.5);transform-origin:center}
.try-frame.live .voice i{animation:vb .8s var(--ease-io) infinite alternate}
.try-frame.live .voice i:nth-child(2){animation-delay:.12s}
.try-frame.live .voice i:nth-child(3){animation-delay:.24s}
.try-frame.live .voice i:nth-child(4){animation-delay:.36s}
.try-frame.live .voice i:nth-child(5){animation-delay:.48s}
@keyframes vb{from{transform:scaleY(.35)}to{transform:scaleY(1.6)}}

/* quotes in use cases: slanted, graphite, no marker (not verbatim words of a respondent) */
.qm{font-variation-settings:var(--fv-quote);color:var(--text)}
.uc dt:first-of-type{margin-top:10px}

/* demo card: connector draws itself */
.js .conn::before{transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease-out) .25s}
.js .conn.in::before{transform:none}

/* reveal on scroll: hidden state has low specificity (:where), .in wins */
.js :where(.sec>.wrap>h2,.sec-h,.think li,.try-p,.topic,.try-frame,.uc,.opt li,.get-line,.vid-result,.people .pi,.split .text,.consent,.consent-vid,.frag,.conn,.ev,.price .big,.price .cta-row,.form){opacity:0;translate:0 16px}
.js .in{opacity:1;translate:none;transition:opacity .55s var(--ease-out),translate .65s var(--ease-out),transform .18s var(--ease-out),box-shadow .2s var(--ease-out),border-color .15s ease,background-color .15s ease;transition-delay:calc(var(--i,0)*70ms),calc(var(--i,0)*70ms),0s,0s,0s,0s}

/* hero entrance */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes slide{from{transform:translateY(10px)}to{transform:none}}
.hero-copy h1{animation-name:slide}
.hero-copy h1,.hero-copy .sub,.hero-copy .cta-row,.hero-side{animation:rise .6s var(--ease-out) both}
.hero-copy .sub{animation-delay:.08s}
.hero-copy .cta-row{animation-delay:.16s}
.hero-side{animation-delay:.12s}
.hero h1::before{transform-origin:left;animation:bar .7s var(--ease-out) .2s both}

/* hover and press states (pointer devices only) */
.btn{transition:transform .16s var(--ease-out),background-color .15s ease,box-shadow .15s ease}
.btn:active{transform:scale(.98)}
.card,.topic,.people .pi,.locate{transition:transform .18s var(--ease-out),box-shadow .2s var(--ease-out),border-color .15s ease,background-color .15s ease}
@media (hover:hover){
.uc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.topic:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-1px)}
.people .pi:hover{background:var(--surface-2)}
.locate:hover{box-shadow:var(--shadow)}
.think li .t{transition:color .15s ease}
}

/* reduced motion: everything static, nothing hidden */
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
.js :where(.sec>.wrap>h2,.sec-h,.think li,.try-p,.topic,.try-frame,.uc,.opt li,.get-line,.vid-result,.people .pi,.split .text,.consent,.consent-vid,.frag,.conn,.ev,.price .big,.price .cta-row,.form){opacity:1;translate:none}
.js .conn::before{transform:none}
.dn,.try-pane.doc .ln{opacity:1;transform:none}
.dl{stroke-dashoffset:0}
.try-pane .voice i{transform:none}
}


/* ================= home v5 (tk#796/798/802, 12.10): strongest inside «how it works», example dialogs in use cases,
   «can't be broken» chat, «how we test»; the trial demo keeps its final state when it is not playing. ================= */

/* trial demo: the map and the document are complete by default; the grow animation only while the frame is live */
.dn{opacity:1;transform:none}
.dl{stroke-dashoffset:0}
.try-pane.doc .ln{opacity:1;transform:none}
.try-frame.live .dn:not(.on){opacity:0;transform:scale(.94)}
.try-frame.live .dl:not(.on){stroke-dashoffset:1}
.try-frame.live .try-pane.doc .ln:not(.on){opacity:0;transform:scaleX(0)}

/* strongest: player + capability rows inside the dark band */
.top{margin-top:48px;display:grid;gap:28px}
@media (min-width:960px){.top{grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:56px;align-items:start}.player{position:sticky;top:24px}}
.player{background:var(--surface);color:var(--text);border-radius:var(--r-card);padding:16px;box-shadow:0 12px 32px rgba(28,33,31,.35);max-width:30rem;width:100%}
.pl-stage{position:relative;min-height:290px;display:grid}
.scene{grid-area:1/1;display:grid;gap:10px;align-content:start}
.scene[hidden]{display:none}
.sc-cap{font-size:.8125rem;color:var(--accent);font-variation-settings:var(--fv-med);padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.msg{max-width:88%;padding:10px 14px;border-radius:var(--r-card);border-bottom-left-radius:4px;background:var(--bg);font-size:.95rem;line-height:1.45;justify-self:start}
.msg.me{justify-self:end;background:var(--accent-tint);border-bottom-left-radius:var(--r-card);border-bottom-right-radius:4px}
.msg .sp{display:block;font-size:.8125rem;color:var(--soft);margin-bottom:2px;font-variation-settings:var(--fv-med)}
.msg p{margin:0}
.abs{display:grid;gap:7px;min-width:120px}
.bar{display:block;height:8px;border-radius:4px;background:var(--surface-2);width:var(--w)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.85rem}
.chip{display:inline-block;padding:.3rem .65rem;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--surface);line-height:1.35}
.arr{display:inline-flex;color:var(--accent);flex:none}
.pcard{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);font-size:.95rem}
.typing{display:inline-flex;gap:4px;height:1.2em;align-items:center}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--soft);animation:tp 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.mini{border:1px solid var(--line);border-radius:var(--r-card);padding:14px;display:grid;gap:12px;background:var(--surface)}
.mini .abs:first-child .bar{height:12px;background:var(--line)}
.mini-btn{justify-self:start;padding:.45rem .9rem;border-radius:var(--r-ctl);background:var(--accent);color:var(--surface);font-size:.9rem;font-variation-settings:var(--fv-med)}
.pl-cap{margin-top:14px}
.js .scene>*{opacity:0;translate:0 8px;transition:opacity .35s var(--ease-out),translate .45s var(--ease-out)}
.js .scene.on>*{opacity:1;translate:none}
.js .scene.on>:nth-child(2){transition-delay:.12s}
.js .scene.on>:nth-child(3){transition-delay:.7s}
.js .scene.on>:nth-child(4){transition-delay:1.3s}
.js .scene.on>:nth-child(5){transition-delay:1.9s}
.caps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.capb{width:100%;text-align:left;display:grid;gap:4px;padding:14px 16px 12px;border:1px solid transparent;border-radius:var(--r-card);background:transparent;color:var(--bg);font:inherit;cursor:pointer;transition:background-color .15s ease,border-color .15s ease}
.capb b{font-variation-settings:var(--fv-head);font-size:1.0625rem;letter-spacing:-.01em;line-height:1.3}
.capb span{color:var(--soft-dark);font-size:.95rem;line-height:1.45}
.capb:hover{background:rgba(236,238,234,.06)}
.capb[aria-pressed="true"]{background:rgba(236,238,234,.08);border-color:rgba(236,238,234,.18)}
.capb[aria-pressed="true"] b{color:var(--rose)}
.capb .prog{display:block;height:2px;border-radius:1px;background:var(--rose);transform:scaleX(0);transform-origin:left;margin-top:6px;opacity:0}
.capb[aria-pressed="true"] .prog{opacity:1;transform:scaleX(1);transition:transform 4.6s linear}
.dark .capb:focus-visible{outline-color:var(--bg)}

/* examples: slot in the use-case cards, button in «two kinds of result» */
.ex-slot{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:8px;justify-items:start}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;border:1px solid var(--text);font-size:.8125rem;letter-spacing:.02em;font-variation-settings:var(--fv-med);line-height:1.5;color:var(--text)}
.ex-open{display:inline-flex;align-items:flex-start;gap:8px;text-align:left;background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;font-variation-settings:var(--fv-med);line-height:1.4;min-height:32px}
.ex-open span{text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px}
.ex-open:hover span{text-decoration-thickness:2px}
.ex-open svg{flex:none;margin-top:3px}
.soon-t{color:var(--soft);font-size:.95rem}
.ex-cta{margin-top:22px}

/* safety: text left, chat right */
.safe-grid{gap:32px}
@media (min-width:960px){.safe-grid{grid-template-columns:minmax(0,1fr) minmax(0,34rem);gap:64px;align-items:start}.safe .text{position:sticky;top:24px}}
.safe .text p{margin-top:16px;max-width:34rem;color:var(--bg)}
.safe .text .safe-cap{color:var(--soft-dark);margin-top:22px;max-width:30rem;font-size:.8125rem}
.chat-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8125rem;color:var(--soft-dark);font-variation-settings:var(--fv-med);margin-bottom:14px}
.dark .chat-head .arr{color:var(--rose)}
.chat{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.chat li{display:grid;gap:8px}
.chat .msg{max-width:86%;font-size:1rem}
.chat .msg.me{justify-self:start;background:rgba(236,238,234,.1);color:var(--bg);border-radius:var(--r-card);border-bottom-left-radius:4px}
.chat .msg.ai{justify-self:end;background:var(--surface);color:var(--text);border-radius:var(--r-card);border-bottom-right-radius:4px}
.does{display:flex;align-items:center;gap:8px;justify-self:end;font-size:.8125rem;color:var(--soft-dark);max-width:86%;text-align:left;margin:0}
.does .ic-sm{width:22px;height:22px;border-radius:6px;background:rgba(232,160,182,.18);color:var(--rose)}
.js .chat li>*{opacity:0;translate:0 10px;transition:opacity .45s var(--ease-out),translate .55s var(--ease-out)}
.js .chat li.in>*{opacity:1;translate:none}
.js .chat li.in>.does{transition-delay:.35s}
.js .chat li.in>.msg.ai{transition-delay:.7s}

/* how we test */
.tests{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0 40px}
@media (min-width:760px){.tests{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.tests{display:contents}.tests-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:28px}.tests-sec .tests-grid .cta-row{margin:0;padding-top:22px;border-top:1px solid var(--text);align-self:start}}
.tests li{position:relative;padding:22px 0 26px;display:grid;gap:10px;align-content:start}
.tests li::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--text);transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease-out) .1s}
.tests li.in::before{transform:none}
.tests h3{font-size:1.25rem;line-height:1.25;max-width:24ch}
.tests p{color:var(--soft);max-width:42ch}
.tests-sec .cta-row{margin-top:8px}

/* reveal on scroll for the new blocks */
.js :where(.tests li,.ex-slot,.player,.caps li,.chat li){opacity:0;translate:0 16px}

/* example dialogs: centred panel, full-screen sheet at phone width */
.dlg{border:0;padding:0;margin:auto;background:var(--surface);color:var(--text);border-radius:var(--r-panel);width:min(58rem,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);box-shadow:0 24px 64px rgba(28,33,31,.3);overflow:hidden}
.dlg:not([open]){display:none}
.dlg::backdrop{background:rgba(28,33,31,.6)}
.dlg-in{max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.dlg-bar{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.dlg-x{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:border-color .15s ease,background-color .15s ease}
.dlg-x:hover{border-color:var(--text);background:var(--bg)}
/* the body is laid out like the real summary page: mark, title, lead, sections with a top rule, blocks, quote blocks, signature */
.dlg-in{background:var(--bg)}
.dlg-body{padding:28px 16px 48px;max-width:46rem;margin:0 auto;line-height:1.6}
@media (min-width:768px){.dlg-body{padding:40px 40px 64px}}
.sum-brand{width:30px;height:30px;margin-bottom:22px}
.dlg-body h2{font-size:clamp(1.4rem,1.1rem + 1.1vw,1.9rem);max-width:none;line-height:1.2}
.ex-note{margin-top:12px;color:var(--soft)}
.ex-note+.ex-note{margin-top:4px}
.ex-lead{margin-top:14px}
.ex-lead+.ex-lead{margin-top:8px}
.ex-lead b{font-variation-settings:var(--fv-med)}
.dlg-body h3{margin:34px 0 12px;padding-top:18px;border-top:1px solid var(--line);font-size:1.125rem}
.dlg-body h3 .cap{font-variation-settings:var(--fv-body);margin-left:4px;font-size:.875rem}
.dlg-body .ex-lead+.blocks,.dlg-body .cap+.blocks{margin-top:18px}
.blocks{display:grid;gap:12px}
.block{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:14px 18px}
.block p{margin:0}
.block.q{display:grid;gap:3px;background:var(--surface);margin-top:-4px}
.block.q .who{font-size:.8125rem;color:var(--soft);font-variation-settings:var(--fv-med)}
.block.q p{font-variation-settings:var(--fv-quote);line-height:1.75}
.block.q .hl{background:linear-gradient(transparent 62%,var(--hl) 62%);color:var(--text);box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .08em}
.block.q p::before{content:"\201C"}
.block.q p::after{content:"\201D"}
html[lang="ru"] .block.q p::before{content:"\00AB"}
html[lang="ru"] .block.q p::after{content:"\00BB"}
.block.q .tr{color:var(--soft);font-size:.95rem;line-height:1.5;margin-top:4px}
.sum-foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--soft);font-size:.95rem}
.cmap{display:grid;gap:12px}
.chain{display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center;padding:12px 14px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
.chain .chip{background:var(--bg);border-color:transparent;font-size:.95rem}
.chip.key{border-color:var(--accent);font-variation-settings:var(--fv-med)}
.chip .hl{background:linear-gradient(transparent 60%,var(--hl) 60%);font-variation-settings:var(--fv-quote);padding:0 .08em}
.fan{display:inline-flex;flex-wrap:wrap;gap:6px}
.ex-doc{margin:0;padding:14px 18px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--surface)}
.lanes{margin:0;display:grid;gap:10px}
.lane{display:grid;gap:4px;padding:12px 16px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line)}
@media (min-width:600px){.lane{grid-template-columns:11rem 1fr;gap:14px}}
.lane dt{font-variation-settings:var(--fv-med)}
.lane dd{margin:0}
.flagged{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center}
.flagged .ic-sm{width:26px;height:26px;border-radius:7px}
.flag-t{font-size:.95rem}
.flagged .chain{padding:0;background:none;border:0;display:inline-flex}
/* trial topics: two directions with examples, two columns at most */
@media (min-width:1100px){.topics{grid-template-columns:1fr 1fr;max-width:60rem}}
@media (max-width:599px){.dlg{width:100vw;height:100dvh;max-height:none;border-radius:0;margin:0}.dlg-in{max-height:100dvh}.dlg-body{padding-bottom:64px}}
body.dlg-open{overflow:hidden}
.dlg[open]{animation:dlg-in .3s var(--ease-out)}
.dlg[open]::backdrop{animation:fade .3s ease-out}
@keyframes dlg-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* reduced motion: everything visible, nothing moves */
@media (prefers-reduced-motion:reduce){
.js :where(.tests li,.ex-slot,.player,.caps li,.chat li){opacity:1;translate:none}
.js .chat li>*,.js .scene>*{opacity:1;translate:none}
.tests li::before{transform:none}
.capb .prog{display:none}
.typing i{opacity:.6}
}

/* ===== v6 hero video v2 (tk#788): light film; video column 60 % of the hero content from 960px; the loop stays silent,
   sound only on click in a full-screen player with its own mute and close buttons. ===== */
@media (min-width:960px){.hero-one .wrap{grid-template-columns:minmax(0,1fr) 60%;gap:32px}}
.vid-hero,.vid-hero video{background:var(--bg)}
.vid-full{position:fixed;inset:0;z-index:1000;background:rgba(28,33,31,.96);display:flex;align-items:center;justify-content:center;padding:16px}
.vid-full video{display:block;width:min(100%,calc((100vh - 96px) * 16 / 9));max-height:calc(100vh - 96px);border-radius:var(--r-card);background:#000}
.vid-full.v45 video{width:min(100%,calc((100vh - 96px) * 4 / 5))}
.vid-full:fullscreen{padding:0}
.vid-full:fullscreen video{border-radius:0}
.vid-full .vid-ctl{position:absolute;top:12px;right:12px;bottom:auto;opacity:1}
body.vid-full-open{overflow:hidden}
/* hero controls below 960px: two 36 px buttons (pause, sound) in the top-right corner the 4:5 film keeps free; captions button hidden (scene captions are burnt into the film) */
@media (max-width:959px){.vid-hero .vid-btn{width:36px;height:36px}.vid-hero [data-cc]{display:none}.vid-hero .vid-ctl{top:8px;right:8px;gap:6px}}

/* ===== v7 hero (tk#861, 12.10): the film is part of the hero, not a card. From 960px the video column runs
   flush to the right edge of the screen and spans the full height of the section; the film background is the page
   paper, so the letterbox is invisible. Two actions only. Concept B «Афиша» (judge r0). ===== */
.hero-one{padding:0}
.hero-one .wrap{align-items:stretch;gap:0}
.hero-one .hero-copy{padding:44px 0 36px;align-self:center}
.hero-acts{margin-top:28px;gap:12px 14px}
.hero-acts .btn{min-height:48px;padding:.7rem 1.35rem}
.vid-hero{aspect-ratio:auto;border-radius:0;box-shadow:none;background:var(--bg)}
.dark .vid-hero{box-shadow:none}
.vid-hero video{object-fit:contain;background:var(--bg)}
.vid-hero .vid-ctl{top:14px;right:14px;bottom:auto}
.shorts-row{margin-top:24px}
.shorts-row .shorts-link{display:inline-flex;align-items:center;min-height:44px;color:var(--rose);font-variation-settings:var(--fv-med)}
@media (max-width:959px){
.hero-one .wrap{gap:16px}
.hero-one .vid-hero{margin:0 -16px;width:auto;aspect-ratio:4/5;order:1}
.hero-one .hero-copy h1{margin-top:4px}
.hero-one .hero-copy .cta-row{margin-top:4px}
.hero-one .hero-copy .sub{order:4;margin-top:4px;padding-bottom:28px}
.hero-one .hero-copy{padding:0}
.hero-one .hero-copy .hero-acts .btn{flex:1 1 100%;width:100%}
}
@media (min-width:960px){
.hero-one .wrap{max-width:none;padding-left:max(32px,calc(50% - 558px));padding-right:0;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:48px}
.hero-one .hero-copy{padding:64px 0 56px;max-width:36rem}
.hero-one .hero-side{display:block;min-height:0}
.hero-one .vid-hero{height:100%;min-height:100%;aspect-ratio:auto}
.hero-one .vid-hero video{height:100%;min-height:380px}
.hero-one .vid-hero .vid-ctl{top:16px;right:16px}
.hero-one .wrap{grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:40px}
.hero-one .hero-copy{padding:72px 0 72px;max-width:32rem}
.hero-one h1{font-size:clamp(2.2rem,1.2rem + 2.6vw,3.4rem);line-height:1.06}
.hero-one .hero-acts{flex-direction:column;align-items:flex-start;gap:16px;margin-top:32px}
.hero-one .hero-acts .btn-ghost{border:0;padding:0;min-height:44px;background:none;color:var(--accent);text-decoration:underline;text-underline-offset:.16em}
.hero-one .hero-acts .btn-ghost:hover{box-shadow:none;text-decoration-thickness:2px}
}
@media (min-width:1280px){.hero-one .wrap{gap:56px}}
/* judge r0 (B): player buttons sit at the film's top-right corner, not at the column top; the film edges are feathered 10 px
   so the 1–2 RGB-level difference between the film paper and the page never reads as a card edge. --lb = letterbox height. */
@media (min-width:960px){
.hero-one .vid-hero{container-type:inline-size;--lb:calc((100% - 100cqw * 9 / 16) / 2)}
.hero-one .vid-hero .vid-ctl{top:calc(var(--lb) + 14px);right:14px}
.hero-one .vid-hero video{-webkit-mask-image:linear-gradient(to right,transparent,var(--text) 10px),linear-gradient(to bottom,transparent var(--lb),var(--text) calc(var(--lb) + 10px),var(--text) calc(100% - var(--lb) - 10px),transparent calc(100% - var(--lb)));-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,var(--text) 10px),linear-gradient(to bottom,transparent var(--lb),var(--text) calc(var(--lb) + 10px),var(--text) calc(100% - var(--lb) - 10px),transparent calc(100% - var(--lb)));mask-composite:intersect}
}
/* ===== r2 (director 12.10): the 4:5 film on desktop too. The figure spans the full hero height and runs to the right edge;
   the film is laid in from the top at 115.4 % of the column width so its own 6.7 % paper margins fall outside the column
   (photo and cards touch the right edge), the lower part of the film (empty paper, closing line) is clipped. ===== */
@media (min-width:960px){
.hero-one .vid-hero{position:relative;overflow:hidden;height:100%;min-height:100%;container-type:normal}
.hero-one .vid-hero video{position:absolute;left:-7.7%;top:0;width:115.4%;height:auto;min-height:0;object-fit:fill;-webkit-mask-image:none;mask-image:none}
.hero-one .vid-hero .vid-ctl{top:14px;right:14px}
.hero-one .hero-copy{padding:64px 0 60px}
}
/* r2 finish (judge r2 №1): the clipped card dissolves into the paper 72 px above the bottom edge instead of a hard cut mid-line */
@media (min-width:960px){.hero-one .vid-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;background:linear-gradient(to bottom,rgba(236,238,234,0),var(--bg))}}
/* ===== r3 (acceptor 12.10): from 960px the film is object-fit: cover from the hero top to the hero bottom (4:5 film at
   115.4 % of the column so its own paper margins stay outside the screen; the face at the top of the film stays in frame via
   object-position 50% 0). Below 960px the film goes under the two actions: H1, lead, actions, film, so both actions sit inside
   the first screen at 390x844 with the shorts banner shown. The film itself is not cropped on mobile. ===== */
@media (min-width:960px){.hero-one .vid-hero video{height:100%;min-height:100%;object-fit:cover;object-position:50% 0}}
@media (max-width:959px){
.hero-one{padding:24px 0 0}
.hero-one .hero-copy h1{order:1;margin-top:0}
.hero-one .hero-copy .sub{order:2;margin-top:2px;padding-bottom:0}
.hero-one .hero-copy .cta-row{order:3;margin-top:8px}
.hero-one .vid-hero{order:4;margin-top:8px}
}
/* r3b (acceptor notes 12.10): no caption line above the video. The film carries its own disclaimer in the top 5.3 % of the
   frame, so the frame is laid in 5.3 % of the film height higher (7.65 cqw = 0.053 * 1.25 * 1.154 column widths from 960px;
   5.6 % of the 1080/1278 box below 960px) and the disclaimer is repeated as a 13 px overlay label in the bottom-left corner
   of the frame (.vid-note, same copy as the film and the example section). Player controls stay top-right. */
@media (min-width:960px){
.hero-one .vid-hero{container-type:inline-size}
.hero-one .vid-hero video{top:-7.65cqw;height:calc(100% + 7.65cqw);object-fit:cover;object-position:50% 0}
}
@media (max-width:959px){
.hero-one .vid-hero{position:relative;overflow:hidden;aspect-ratio:1080/1278}
.hero-one .vid-hero video{position:absolute;left:0;top:-5.6%;width:100%;height:auto;object-fit:cover;object-position:50% 0}
}
.vid-hero .vid-note{position:absolute;left:14px;bottom:12px;z-index:2;max-width:calc(100% - 28px);font-size:13px;line-height:1.3;color:var(--soft);pointer-events:none}
/* r3c: 768-959px the wrap padding is 32px, so the film bleeds 32px to stay full width like at 390 */
@media (min-width:768px) and (max-width:959px){.hero-one .vid-hero{margin-left:-32px;margin-right:-32px}}
/* r3d (eye check of the r3 shots): the caption's descenders still peeked 1-2px at the frame top, so the crop is 6.2 % of the
   film height (9 cqw from 960px, 6.6 % of the box below); the overlay label becomes a small paper chip so it stays legible over
   the dissolving transcript line. */
@media (min-width:960px){.hero-one .vid-hero video{top:-9cqw;height:calc(100% + 9cqw)}}
@media (max-width:959px){.hero-one .vid-hero video{top:-6.6%}}
.vid-hero .vid-note{left:12px;bottom:10px;padding:3px 8px;border-radius:6px;background:rgba(236,238,234,.9)}
.dark .vid-hero .vid-note{background:rgba(28,33,31,.85)}
/* r3e (judge r3 №2): below 960px the secondary action is a text link too (as ordered and as on desktop), not a second
   full-width outline button competing with the primary one. */
@media (max-width:959px){.hero-one .hero-copy .hero-acts .btn-ghost{border:0;background:none;box-shadow:none;color:var(--accent);text-decoration:underline;text-underline-offset:.16em;min-height:44px;padding:0;margin-top:2px}}

/* ===== A862 (tk#862, variant A, 12.10): the hero film is the face footage only, full frame, no burnt text, voice-over in the
   sound version. The r3 top crop (which hid the burnt disclaimer and scene title) is lifted: the frame shows the film from its
   top edge; the paper gradient that dissolved the old card is off; the captions button is shown below 960px too, so the
   muted loop keeps its (narrator) subtitles on every size. The transcript card lives in the HTML band below the hero. */
@media (min-width:960px){.hero-one .vid-hero video{top:0;height:100%}.hero-one .vid-hero::after{display:none}}
@media (max-width:959px){.hero-one .vid-hero{aspect-ratio:4/5}.hero-one .vid-hero video{top:0}.vid-hero [data-cc]{display:inline-flex}}
/* live transcript band: one strip, paper surface, hairlines; three scenes, one visible, driven by the hero video currentTime */
.live-band{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.live-band .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 32px;padding-top:18px;padding-bottom:20px;min-height:116px;align-content:start}
.lb-label{grid-column:1/-1;margin:0;font-size:.8125rem;color:var(--soft);font-variation-settings:var(--fv-med);display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.lb-label .lb-demo{font-variation-settings:var(--fv-reg,normal);padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-ctl)}
.lb-scene{display:grid;gap:12px;grid-column:1/-1}
.lb-scene[hidden]{display:none}
.lb-turn{min-width:0}
.lb-turn .sp{display:flex;align-items:center;gap:10px;font-size:.8125rem;color:var(--soft);margin:0 0 4px;font-variation-settings:var(--fv-med)}
.lb-turn p{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--text);text-wrap:pretty}
.lb-turn.ai p{color:var(--soft)}
.lb-turn.ai p.lb-reply{color:var(--text)}
.lb-turn .at{text-decoration:none;box-shadow:none;background-image:linear-gradient(var(--hl),var(--hl));background-repeat:no-repeat;background-position:0 100%;background-size:0 5px;padding-bottom:2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lb-turn .at.on{background-size:100% 5px;transition:background-size .5s var(--ease-out,ease-out)}
.lb-turn .w,.lb-turn .c{opacity:0;transition:opacity .22s ease-out}
.lb-turn .w.on,.lb-turn .c.on{opacity:1}
.lb-turn .lb-in{opacity:0;transform:translateY(6px);transition:opacity .45s var(--ease-out,ease-out),transform .45s var(--ease-out,ease-out)}
.lb-turn .lb-in.on{opacity:1;transform:none}
.lb-typed{display:inline-block;border:1px solid var(--line);border-radius:var(--r-ctl);padding:6px 10px;background:var(--bg);line-height:1.45}
.lb-typed .caret{display:inline-block;width:2px;height:1.05em;background:var(--text);vertical-align:-.15em;margin-left:1px;animation:lb-blink 1s steps(2,start) infinite}
@keyframes lb-blink{to{visibility:hidden}}
.lb-voice{display:inline-flex;gap:3px;align-items:center;height:14px}
.lb-voice i{display:block;width:3px;height:12px;border-radius:2px;background:var(--soft);transform:scaleY(.35);transform-origin:center}
.lb-scene.talking .lb-voice i{animation:lb-vb .7s ease-in-out infinite alternate}
.lb-scene.talking .lb-voice i:nth-child(2){animation-delay:.1s}.lb-scene.talking .lb-voice i:nth-child(3){animation-delay:.2s}.lb-scene.talking .lb-voice i:nth-child(4){animation-delay:.3s}.lb-scene.talking .lb-voice i:nth-child(5){animation-delay:.15s}
@keyframes lb-vb{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
/* r2: one column, turns appear in order; a turn not yet spoken takes no space (no empty column) */
.lb-turn[data-turn]{display:none}
.lb-turn[data-turn].on{display:block}
.no-js .lb-turn[data-turn]{display:block}
/* static fallback (no JS or reduced motion): everything shown */
.no-js .lb-turn .w,.no-js .lb-turn .c,.no-js .lb-turn .lb-in{opacity:1;transform:none}
.no-js .lb-turn .at{background-size:100% 5px}
@media (min-width:720px){.lb-scene{max-width:72ch}.live-band .wrap{padding-top:20px;padding-bottom:22px}}
@media (min-width:960px){.live-band .wrap{min-height:124px}.lb-turn p{font-size:1.125rem}}
@media (prefers-reduced-motion:reduce){.lb-turn[data-turn]{display:block}.lb-turn .w,.lb-turn .c,.lb-turn .lb-in,.lb-turn .at{transition:none}.lb-scene.talking .lb-voice i,.lb-typed .caret{animation:none}.lb-voice i{transform:scaleY(.6)}}

/* A862r2c, WebKit fix: below 960px .vid-hero is a grid item (its parent is display:contents) with aspect-ratio:4/5 and the desktop
   height:100%/min-height:100%. WebKit does not stretch an aspect-ratio grid item by default and resolves the percentage height
   against the indefinite row to 0, so the frame collapsed to 0x0 and the controls sat at x=-134 (Safari on a phone). Chromium
   treated the percentage as auto and stretched. Make the stretch explicit and let the aspect ratio set the height. */
@media (max-width:959px){.hero-one .vid-hero{justify-self:stretch;align-self:start;width:auto;height:auto;min-height:0;aspect-ratio:4/5}}