/* Investor stage. Each body draws the shape of its argument: a sequence, a stack, a composition, a comparison.
   Green marks Polydom and the point of the slide; dashed blue marks targets and work still being developed; red is the problem only.
   Proportional marks (bars, ring, squares) are drawn to the numbers. Sizes follow the stage container, so a slide fits its screen. */
html.alex-mode { --night:#0B1120; --alex-ink:#F5F7FA; --alex-body:#C9D2DE; --alex-muted:#8C99AB; --alex-line:rgba(255,255,255,.12); --alex-line-strong:rgba(255,255,255,.24); --alex-green:#4ADE80; --alex-green-ink:#86EFAC; --alex-green-soft:rgba(74,222,128,.09); --alex-target:#A5BFFF; --alex-target-soft:rgba(165,191,255,.07); --alex-risk:#F87171; --alex-risk-ink:#FCA5A5; --alex-risk-soft:rgba(248,113,113,.07); --alex-surface:rgba(255,255,255,.035); --alex-seg-1:#8E9BAD; --alex-seg-2:#4A5566; --alex-seg-3:#2A323E; --alex-radius:14px; }
.alex-mode body { background:var(--night); background-image:radial-gradient(ellipse 80% 70% at 12% 0%, #12332C, transparent 62%); }
.alex-mode .demo-header { border-bottom:0; }
.alex-mode .demo-brand { align-items:center; }
.alex-mode .demo-mark, .alex-mode .demo-wordmark { display:none; }
.alex-mode .demo-logo { display:block; width:auto; height:30px; color:var(--alex-ink); }
/* Header: the two next steps show only during the call; before it the start screen has its own buttons, after it the final screen does. */
.alex-mode .demo-deck-header, .alex-mode .alex-founder { display:none; }
.alex-mode[data-call-active=true][data-alex-contacts=true] .demo-deck-header:not([hidden]), .alex-mode[data-call-active=true][data-alex-contacts=true] .alex-founder, .alex-mode[data-alex-contacts=true] .alex-finale-book { display:none; }
/* During the call the header already offers Meet the founder, so the bottom bar never repeats it. */
.alex-mode[data-call-active=true] .alex-finale-book { display:none; }
.alex-mode[data-call-active=true] .demo-deck-header:not([hidden]), .alex-mode[data-call-active=true] .alex-founder { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:36px; box-sizing:border-box; padding:8px 14px; border:1px solid var(--alex-line); border-radius:999px; color:var(--alex-body); font-size:13px; font-weight:500; line-height:1.2; text-decoration:none; white-space:nowrap; transition:color .2s, background .2s, border-color .2s; }
.alex-mode .demo-deck-header:hover { color:var(--alex-ink); background:rgba(255,255,255,.06); border-color:var(--alex-line-strong); }
.alex-mode .alex-founder { border-color:rgba(74,222,128,.45); color:var(--alex-green-ink); font-weight:600; }
.alex-mode .alex-founder:hover { border-color:rgba(74,222,128,.7); background:rgba(74,222,128,.1); color:var(--alex-ink); }
.alex-mode .demo-deck-header:focus-visible, .alex-mode .alex-founder:focus-visible { outline:2px solid var(--alex-green); outline-offset:3px; }
.alex-mode .demo-deck-header svg, .alex-mode .alex-founder svg { width:15px; height:15px; flex:none; }
.alex-mode .demo-app::before { display:none; }
.alex-mode .demo-voice-pick:not(.demo-lang-pick) { display:none; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-content,
.alex-mode[data-demo-preview=true][data-demo-focus=stage] .demo-content { display:flex; flex:1; min-height:0; overflow-y:auto; padding:clamp(12px,3vh,32px) clamp(16px,4vw,56px); container:alex / size; }
.alex-mode .demo-stage.alex-stage { display:flex; flex-direction:column; align-items:stretch; justify-content:safe center; width:100%; max-width:max(1600px, 84cqi); min-height:100%; margin:0 auto; padding:0; border:0; background:none; box-shadow:none; text-align:left; }
.alex-mode .alex-stage > .alex-scene { animation:alex-fade .4s ease-out both; }
@keyframes alex-fade { from { opacity:0; } }
@keyframes alex-grow-x { from { transform:scaleX(0); } }
@keyframes alex-grow-y { from { transform:scaleY(0); } }
@keyframes alex-grow { from { transform:scale(0); } }
@keyframes alex-sweep { from { opacity:0; transform:rotate(-90deg); } }

/* Type and spacing scale with the stage: the smaller of its width and height decides. */
.alex-scene { --t-title:clamp(26px, min(4.4cqi, 7.4cqb), 112px); --t-lead:clamp(20px, min(2.3cqi, 3.7cqb), 54px); --t-body:clamp(15px, min(1.45cqi, 2.4cqb), 34px); --t-small:clamp(14px, min(1.2cqi, 2cqb), 28px); --t-fig:clamp(30px, min(4.6cqi, 7.6cqb), 128px); --gap:clamp(16px, 4.8cqb, 72px); --pad:clamp(14px, min(2.2cqi, 3.4cqb), 52px);
  width:100%; display:flex; flex-direction:column; gap:var(--gap); text-align:left; }
.alex-scene-heading { display:block; padding:0; border:0; margin:0; }
.alex-kicker { display:flex; align-items:center; gap:12px; margin:0 0 clamp(8px,2cqb,20px); color:var(--alex-muted); font-size:var(--t-small); font-weight:500; line-height:1; }
.alex-kicker b { display:flex; align-items:center; gap:12px; color:var(--alex-green); font-weight:600; font-variant-numeric:tabular-nums; }
.alex-kicker b::after { content:""; width:28px; height:1px; background:var(--alex-line-strong); }
.alex-scene h2 { margin:0; max-width:24ch; color:var(--alex-ink); font-size:var(--t-title); font-weight:700; line-height:1.06; letter-spacing:-.035em; text-wrap:balance; }
.alex-long-title h2 { max-width:28ch; font-size:calc(var(--t-title) * .86); }
.alex-subtitle { margin:clamp(8px,1.8cqb,16px) 0 0; max-width:60ch; color:var(--alex-body); font-size:var(--t-body); line-height:1.4; }
.alex-scene ul, .alex-scene ol { list-style:none; margin:0; padding:0; }
.alex-scene h3 { margin:0; font-weight:600; }
.alex-item { min-width:0; }
.alex-item-title { color:var(--alex-ink); }
.alex-item-text { margin:6px 0 0; color:var(--alex-body); font-size:var(--t-body); line-height:1.38; }
.alex-label { margin:4px 0 0; color:var(--alex-muted); font-size:var(--t-small); line-height:1.3; }
.alex-value { margin:0; color:var(--alex-ink); font-size:var(--t-fig); font-weight:600; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.alex-link { color:var(--alex-green); font-size:var(--t-lead); font-weight:500; line-height:1.3; text-decoration:underline; text-decoration-color:rgba(74,222,128,.45); text-underline-offset:5px; overflow-wrap:anywhere; }
.alex-link:hover, .alex-link:focus-visible { text-decoration-color:var(--alex-green); }
.alex-footnote { margin:0; max-width:72ch; padding-top:clamp(8px,1.6cqb,14px); border-top:1px solid var(--alex-line); color:var(--alex-muted); font-size:var(--t-small); line-height:1.4; }
.alex-group-title { margin:0 0 clamp(10px,2.4cqb,20px); color:var(--alex-body); font-size:var(--t-small); line-height:1.3; }
.alex-scene .alex-group-title { font-weight:600; }
/* Targets: dashed and blue wherever they appear. */
.alex-scene [data-tone=target] .alex-value, .alex-scene [data-tone=target].alex-value, .alex-scene[data-basis=target] .alex-value { color:var(--alex-target); }
.alex-scene[data-basis=target] [data-tone=accent] .alex-value, .alex-scene[data-basis=target] [data-tone=accent].alex-value { color:var(--alex-green); }

/* statement: the cover. The name is the slide; the roster sits on one rule. */
.alex-layout-statement h2, .alex-layout-contact h2 { max-width:17ch; font-size:clamp(34px, min(7.4cqi, 11cqb), 108px); line-height:1.02; letter-spacing:-.04em; }
.alex-tags { display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:0 clamp(16px,3cqi,40px); border-top:1px solid var(--alex-line-strong); }
.alex-tags[data-count="2"] { --n:2; } .alex-tags[data-count="3"] { --n:3; }
.alex-tags .alex-item { padding-top:clamp(12px,2.6cqb,24px); }
.alex-tags .alex-item:first-child { box-shadow:inset 0 2px 0 var(--alex-green); }
.alex-tags .alex-item-title { display:block; font-size:var(--t-lead); font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.alex-tags .alex-item-text { display:block; margin-top:4px; color:var(--alex-muted); }
.alex-tags[data-count="1"] { --n:1; }
.alex-tags[data-count="1"] .alex-item:first-child { box-shadow:none; background:linear-gradient(var(--alex-green), var(--alex-green)) top left / 33.4% 2px no-repeat; }
.alex-tags[data-count="1"] .alex-item-title { font-size:calc(var(--t-lead) * 1.1); }
.alex-tags[data-count="1"] .alex-item-text { font-size:var(--t-lead); line-height:1.3; }
/* The cover carries the Una logo (poly-landing una-by-polydom-logo-tight.svg) on a green panel beside the title, as the deck does. */
.alex-intro { --una-logo:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22%230B1120%22 viewBox=%22630 1190 1740 610%22%3E%3Cg%3E%3Cg%3E%3Cpath d=%22M1610.97,1406.11c0,81.26-58.69,136.72-144.46,136.72s-144.22-55.46-144.22-136.72v-186.38h64.89v186.38c0,49.66,30.96,81.91,78.68,81.91s79.32-32.25,79.32-81.91v-186.38h65.78v186.38Z%22/%3E%3Cpath d=%22M1673.39,1351.29c0-81.91,58.69-137.37,144.46-137.37s145.75,55.46,145.75,137.37v185.74h-66.43v-185.74c0-49.66-30.96-82.55-78.68-82.55s-78.68,32.89-78.68,82.55v185.74h-66.43v-185.74Z%22/%3E%3Cpath d=%22M2349.33,1378.38v158.65h-65.78v-43.85c-25.8,30.31-68.36,49.66-116.73,49.66-89,0-154.13-69.01-154.13-164.46s70.3-164.46,168.32-164.46,168.32,69.01,168.32,164.46ZM2283.55,1378.38c0-61.91-42.56-107.06-101.9-107.06s-101.25,45.14-101.25,107.06,42.56,107.06,101.25,107.06,101.9-44.5,101.9-107.06Z%22/%3E%3C/g%3E%3Cpath d=%22M1195.67,1567.11l-70.54-58.07.07-.64c.77-6.66,1.16-13.46,1.16-20.21v-152.65c0-31.36-12.43-60.7-35-82.61-22.56-21.9-52.27-33.41-83.65-32.51-61.58,1.83-111.68,54.58-111.68,117.59v7.75c0,36.12,17.28,70.6,46.21,92.24l123.98,92.69-.32.83c-18.55,49.03-66.13,80.91-118.55,79.43-65.71-1.91-119.18-58.14-119.18-125.35v-177.61c0-24.3-9.67-47-27.23-63.91-16.71-16.09-38.43-24.84-61.49-24.84-1.15,0-2.3.02-3.46.07-47.05,1.78-85.32,42.55-85.32,90.89v175.52c0,165.59,134.72,300.3,300.31,300.3,146.83,3.02,224.57-88.4,257.82-143.18,14.98-24.68,9.33-57.23-13.13-75.72ZM973.71,1395.88c-15.73-11.76-25.12-30.5-25.12-50.13v-10.22c0-34.52,28.08-62.6,62.6-62.6s62.6,28.08,62.6,62.6v135.17l-100.08-74.82ZM1161.28,1616.53c-45.05,72.15-122.52,115.85-207.22,116.89-1,.01-2.01.02-3.01.02-64.38,0-125.43-25.34-172.22-71.55-48.04-47.46-75.59-113.09-75.59-180.08v-172.59c0-19.67,14.81-36.07,33.71-37.33,10.12-.68,19.78,2.76,27.17,9.68,7.3,6.82,11.48,16.46,11.48,26.42v176.99c0,98.07,78.34,178.19,174.64,178.59.24,0,.48,0,.72,0,66.81,0,128.76-38.87,157.97-99.19l.63-1.3,48.55,36.3c5.4,4.04,6.76,11.41,3.17,17.16Z%22/%3E%3C/g%3E%3Cg%3E%3Cpath d=%22M1692.37,1682.88c-2.92-1.65-6.07-2.48-9.46-2.48s-6.42.85-9.33,2.55c-2.92,1.7-5.27,4.16-7.05,7.38-1.78,3.22-2.68,7.01-2.68,11.36s.89,8.14,2.68,11.36c1.78,3.22,4.13,5.68,7.05,7.38,2.91,1.7,6.03,2.55,9.33,2.55s6.55-.87,9.46-2.61c2.91-1.74,5.26-4.22,7.05-7.44,1.78-3.22,2.68-7.05,2.68-11.49s-.89-8.11-2.68-11.29c-1.78-3.18-4.13-5.59-7.05-7.24Z%22/%3E%3Cpath d=%22M1493.84,1682.88c-2.92-1.65-6.07-2.48-9.46-2.48s-6.42.85-9.33,2.55c-2.92,1.7-5.27,4.16-7.05,7.38-1.78,3.22-2.68,7.01-2.68,11.36s.89,8.14,2.68,11.36c1.78,3.22,4.13,5.68,7.05,7.38,2.91,1.7,6.02,2.55,9.33,2.55s6.55-.87,9.46-2.61c2.91-1.74,5.26-4.22,7.05-7.44,1.78-3.22,2.68-7.05,2.68-11.49s-.89-8.11-2.68-11.29c-1.78-3.18-4.13-5.59-7.05-7.24Z%22/%3E%3Cpath d=%22M1975.16,1682.94c-2.96-1.7-6.13-2.55-9.53-2.55s-6.53.83-9.4,2.48c-2.87,1.65-5.2,4.07-6.98,7.24-1.78,3.18-2.68,6.94-2.68,11.29s.89,8.16,2.68,11.42c1.78,3.26,4.13,5.77,7.05,7.51,2.91,1.74,6.02,2.61,9.33,2.61s6.57-.85,9.53-2.55c2.96-1.7,5.31-4.13,7.05-7.31,1.74-3.18,2.61-6.98,2.61-11.42s-.87-8.24-2.61-11.42c-1.74-3.18-4.09-5.61-7.05-7.31Z%22/%3E%3Cpath d=%22M1766.45,1680.27c-5.22,0-9.59,1.85-13.12,5.55-3.52,3.7-5.29,8.99-5.29,15.86s1.72,12.16,5.16,15.86c3.44,3.7,7.77,5.55,12.99,5.55,3.31,0,6.42-.8,9.33-2.41,2.91-1.61,5.24-4.02,6.98-7.24,1.74-3.22,2.61-7.13,2.61-11.75,0-6.87-1.81-12.16-5.42-15.86-3.61-3.7-8.03-5.55-13.25-5.55Z%22/%3E%3Cpath d=%22M2053.48,1680.27c-5.22,0-9.59,1.85-13.12,5.55-3.52,3.7-5.29,8.99-5.29,15.86s1.72,12.16,5.16,15.86c3.44,3.7,7.77,5.55,12.99,5.55,3.31,0,6.42-.8,9.33-2.41,2.91-1.61,5.24-4.02,6.98-7.24,1.74-3.22,2.61-7.13,2.61-11.75,0-6.87-1.81-12.16-5.42-15.86-3.61-3.7-8.03-5.55-13.25-5.55Z%22/%3E%3Cpath d=%22M2312.27,1608.42h-952.56c-20.31,0-36.78,16.47-36.78,36.78v103.6c0,20.31,16.47,36.78,36.78,36.78h952.56c20.31,0,36.78-16.47,36.78-36.78v-103.6c0-20.31-16.47-36.78-36.78-36.78ZM1517.85,1721.06c-2.92,5.7-6.88,10.12-11.88,13.25-5.01,3.13-10.6,4.7-16.77,4.7-5.4,0-10.12-1.07-14.16-3.2-4.05-2.13-7.29-4.89-9.72-8.29v10.31h-18.27v-96.59h18.27v34.85c2.35-3.48,5.59-6.31,9.72-8.48,4.13-2.17,8.85-3.26,14.16-3.26,6.18,0,11.77,1.52,16.77,4.57,5,3.05,8.96,7.38,11.88,12.99,2.91,5.61,4.37,12.12,4.37,19.51s-1.46,13.95-4.37,19.64ZM1562.72,1765.44h-19.35l12.8-29.43-28.98-70.49h20.49l18.67,50.51,18.93-50.51h19.45l-42,99.92ZM1716.39,1721.06c-2.92,5.7-6.87,10.12-11.88,13.25-5,3.13-10.6,4.7-16.77,4.7-5.31,0-9.99-1.09-14.03-3.26-4.05-2.17-7.33-4.91-9.85-8.22v37.92h-18.27v-99.92h18.27v10.44c2.35-3.31,5.59-6.07,9.72-8.29,4.13-2.22,8.85-3.33,14.16-3.33,6.18,0,11.77,1.52,16.77,4.57,5,3.05,8.96,7.38,11.88,12.99,2.91,5.61,4.37,12.12,4.37,19.51s-1.46,13.95-4.37,19.64ZM1798.88,1721.25c-3.35,5.66-7.88,10.03-13.58,13.12-5.7,3.09-12.07,4.63-19.12,4.63s-13.23-1.54-18.8-4.63c-5.57-3.09-9.94-7.46-13.12-13.12-3.18-5.66-4.76-12.18-4.76-19.58s1.63-13.92,4.9-19.58c3.26-5.66,7.72-10.03,13.38-13.12,5.66-3.09,11.96-4.63,18.93-4.63s13.27,1.55,18.93,4.63c5.66,3.09,10.12,7.46,13.38,13.12,3.26,5.66,4.9,12.18,4.9,19.58s-1.68,13.92-5.03,19.58ZM1835.62,1737.83h-18.27v-96.59h18.27v96.59ZM1880.82,1765.44h-19.35l12.8-29.43-28.98-70.49h20.49l18.67,50.51,18.93-50.51h19.45l-42,99.92ZM2003.22,1737.83h-18.54v-10.7c-2.26,3.57-5.44,6.44-9.53,8.61-4.09,2.17-8.83,3.26-14.23,3.26-6.09,0-11.66-1.57-16.71-4.7-5.05-3.13-9.03-7.55-11.94-13.25-2.92-5.7-4.37-12.25-4.37-19.64s1.46-13.79,4.37-19.45c2.91-5.66,6.9-10.01,11.94-13.05,5.05-3.04,10.66-4.57,16.84-4.57,4.7,0,9.18,1.02,13.44,3.07,4.26,2.05,7.66,4.76,10.18,8.16v-34.33h18.54v96.59ZM2085.91,1721.25c-3.35,5.66-7.88,10.03-13.58,13.12-5.7,3.09-12.07,4.63-19.12,4.63s-13.23-1.54-18.8-4.63c-5.57-3.09-9.94-7.46-13.12-13.12-3.18-5.66-4.76-12.18-4.76-19.58s1.63-13.92,4.9-19.58c3.26-5.66,7.72-10.03,13.38-13.12,5.66-3.09,11.96-4.63,18.93-4.63s13.27,1.55,18.93,4.63c5.66,3.09,10.12,7.46,13.38,13.12,3.26,5.66,4.9,12.18,4.9,19.58s-1.68,13.92-5.03,19.58ZM2223.81,1737.83h-18.27v-39.94c0-5.66-1.44-9.99-4.31-12.99-2.87-3-6.79-4.5-11.75-4.5s-8.9,1.5-11.81,4.5c-2.92,3-4.37,7.33-4.37,12.99v39.94h-18.27v-39.94c0-5.66-1.44-9.99-4.31-12.99-2.87-3-6.79-4.5-11.75-4.5s-9.03,1.5-11.94,4.5c-2.92,3-4.37,7.33-4.37,12.99v39.94h-18.27v-72.31h18.27v8.75c2.35-3.05,5.37-5.44,9.07-7.18,3.7-1.74,7.77-2.61,12.2-2.61,5.66,0,10.7,1.2,15.14,3.59,4.44,2.39,7.87,5.81,10.31,10.25,2.35-4.18,5.76-7.53,10.25-10.05,4.48-2.52,9.33-3.78,14.55-3.78,8.88,0,16.03,2.72,21.47,8.16,5.44,5.44,8.16,13.03,8.16,22.78v42.42Z%22/%3E%3C/g%3E%3C/svg%3E"); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr); align-content:center; gap:var(--gap) clamp(24px,4cqi,72px); }
.alex-intro > * { grid-column:1; }
.alex-intro::after { content:""; grid-column:2; grid-row:1 / span 2; min-height:clamp(150px,36cqb,460px); border-radius:var(--alex-radius); background:var(--una-logo) center / 72% auto no-repeat, var(--alex-green); box-shadow:0 24px 80px rgba(74,222,128,.16); }
.alex-intro h2 { font-size:clamp(34px, min(5.6cqi, 10cqb), 96px); }

/* cards: separate things of equal weight. Red cards are the problem; a card's number is its result. */
.alex-cards { display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:clamp(12px,1.6cqi,22px); }
.alex-cards[data-count="2"] { --n:2; } .alex-cards[data-count="4"] { --n:4; }
.alex-card { display:grid; grid-row:span 2; grid-template-rows:subgrid; align-content:start; gap:clamp(12px,3cqb,28px); padding:var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); background:var(--alex-surface); }
.alex-card h3 { font-size:var(--t-lead); letter-spacing:-.02em; line-height:1.15; }
.alex-card .alex-label { margin-top:8px; }
.alex-card-body { align-self:end; }
.alex-card .alex-item-text { margin-top:8px; }
.alex-card .alex-value { color:var(--alex-green); }
.alex-card[data-tone=risk] { border:1px solid rgba(248,113,113,.26); border-top:2px solid var(--alex-risk); border-radius:4px 4px var(--alex-radius) var(--alex-radius); background:var(--alex-risk-soft); }
.alex-cards[data-count="3"] .alex-card h3 { font-size:calc(var(--t-lead) * 1.12); }
.alex-cards[data-count="3"] .alex-item-text { font-size:calc(var(--t-body) * 1.1); }
.alex-card[data-tone=risk] h3 { color:var(--alex-risk-ink); }
/* The problem is the one red slide, as in the deck: kicker, title and its place on the rail. */
.alex-problem .alex-kicker b { color:var(--alex-risk); }
.alex-problem h2 { color:var(--alex-risk); }
.alex-card[data-tone=risk] .alex-card-body { align-self:start; }


/* flow: a numbered sequence on one rail. Three stages become cards joined by arrows. */
.alex-flow { --dot:clamp(34px,5.4cqb,48px); display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:clamp(12px,2cqi,28px); }
.alex-flow[data-count="3"] { --n:3; } .alex-flow[data-count="5"] { --n:5; } .alex-flow[data-count="6"] { --n:6; }
.alex-flow-step { position:relative; display:flex; flex-direction:column; gap:clamp(12px,2.6cqb,22px); }
.alex-flow-index { position:relative; z-index:1; display:grid; place-items:center; width:var(--dot); height:var(--dot); border:1px solid var(--alex-line-strong); border-radius:50%; background:var(--night); color:var(--alex-ink); font-size:var(--t-body); font-weight:600; font-variant-numeric:tabular-nums; }
.alex-flow-step:not(:last-child)::after { content:""; position:absolute; top:calc(var(--dot) / 2); left:var(--dot); right:calc(-1 * clamp(12px,2cqi,28px)); height:1px; background:var(--alex-line-strong); }
.alex-flow h3 { font-size:var(--t-lead); letter-spacing:-.02em; line-height:1.15; }
.alex-flow .alex-label { margin:0 0 4px; }
.alex-flow-step[data-tone=accent] .alex-flow-index { border-color:var(--alex-green); background:var(--alex-green); color:var(--night); }
.alex-flow-step[data-tone=accent] h3 { color:var(--alex-green); }
.alex-flow[data-count="5"] h3 { font-size:calc(var(--t-lead) * 1.15); }
.alex-flow[data-count="5"] .alex-item-text { font-size:calc(var(--t-body) * 1.08); }
.alex-flow[data-count="3"] { --notch:clamp(20px,3cqi,44px); display:flex; gap:0; }
.alex-flow[data-count="3"] .alex-flow-step { flex:var(--grow,1) 1 0; justify-content:flex-start; min-height:clamp(120px,26cqb,280px); padding:var(--pad) calc(var(--pad) + var(--notch)); background:rgba(255,255,255,.06); clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%, var(--notch) 50%); }
.alex-flow[data-count="3"] .alex-flow-step + .alex-flow-step { margin-left:calc(6px - var(--notch)); }
.alex-flow[data-count="3"] .alex-flow-step:first-child { --grow:1; padding-left:var(--pad); clip-path:polygon(0 0, calc(100% - var(--notch)) 0, 100% 50%, calc(100% - var(--notch)) 100%, 0 100%); }
.alex-flow[data-count="3"] .alex-flow-step:nth-child(2) { --grow:1.3; }
.alex-flow[data-count="3"] .alex-flow-step:nth-child(3) { --grow:1.7; background:rgba(255,255,255,.1); }
.alex-flow[data-count="3"] .alex-flow-step::after, .alex-flow[data-count="3"] .alex-flow-step::before { display:none; }
.alex-flow[data-count="3"] .alex-flow-index { display:none; }
.alex-flow[data-count="3"] h3 { font-size:clamp(24px, min(3.4cqi, 5.6cqb), 64px); letter-spacing:-.03em; line-height:1.05; }
.alex-flow[data-count="3"] .alex-label { color:var(--alex-muted); }
.alex-flow[data-count="3"] .alex-item-text { font-size:var(--t-body); }
.alex-flow[data-count="3"] .alex-flow-step[data-tone=accent] { background:rgba(74,222,128,.16); }
.alex-flow[data-count="3"] .alex-flow-step[data-tone=accent] .alex-label { color:var(--alex-green-ink); }

/* tiers: employees on top, the one platform under all of them, the market it serves at the base. A "+ " chip is something an account or the market adds. */
.alex-tiers { --tier-gap:clamp(18px,4cqb,40px); display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:clamp(18px,2.6cqi,40px); row-gap:var(--tier-gap); }
.alex-tier { display:contents; }
.alex-tiers > .alex-tier > .alex-group-title { align-self:center; justify-self:end; margin:0; color:var(--alex-muted); font-size:var(--t-small); font-weight:600; letter-spacing:.08em; text-transform:uppercase; text-align:right; }
.alex-tier-row { display:grid; grid-template-columns:repeat(var(--n,1),minmax(0,1fr)); gap:clamp(12px,1.6cqi,22px); }
.alex-tier-row[data-count="2"] { grid-template-columns:minmax(0,2.2fr) minmax(0,1fr); }
.alex-tier-row[data-count="3"] { --n:3; }
.alex-tier-item { position:relative; display:flex; flex-direction:column; gap:clamp(12px,2.2cqb,20px); padding:var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); background:var(--alex-surface); }
.alex-tier-item:only-child { flex-direction:row; align-items:center; gap:clamp(18px,3cqi,48px); padding-block:calc(var(--pad) * .8); }
.alex-tier-item:only-child .alex-tier-head { flex:none; min-width:clamp(140px,15cqi,260px); }
.alex-tier-item .alex-item-title { margin:0; color:var(--alex-ink); font-size:clamp(22px, min(2.6cqi, 4.4cqb), 44px); font-weight:600; letter-spacing:-.03em; line-height:1.1; }
.alex-tier-item .alex-label { margin:6px 0 0; }
.alex-tier-item .alex-item-text { margin:0; }
.alex-tier:first-child .alex-tier-item::after { content:""; position:absolute; left:50%; top:100%; width:1px; height:var(--tier-gap); background:var(--alex-line-strong); }
.alex-tier-item:not([data-tone]):not(:only-child) { border-color:rgba(74,222,128,.5); background:var(--alex-green-soft); }
.alex-tier-item:not([data-tone]):not(:only-child) .alex-item-title { color:var(--alex-green); }
.alex-tier-item:not([data-tone]):not(:only-child) .alex-label { color:var(--alex-green-ink); }
.alex-tier-item:not([data-tone]):not(:only-child) .alex-label::before { content:""; display:inline-block; width:7px; height:7px; margin:0 8px .12em 0; border-radius:50%; background:var(--alex-green); box-shadow:0 0 8px rgba(74,222,128,.7); }
.alex-tier-item[data-tone=muted] .alex-item-title { color:var(--alex-body); }
.alex-tier-item:only-child:not([data-tone]) { border:0; border-top:2px solid var(--alex-green); border-radius:4px 4px var(--alex-radius) var(--alex-radius); background:linear-gradient(to bottom, rgba(74,222,128,.13), rgba(74,222,128,.04)); }
.alex-tier-item[data-tone=accent] { border-color:var(--alex-green); background:var(--alex-green); box-shadow:0 24px 80px rgba(74,222,128,.16); }
.alex-tier-item[data-tone=accent] .alex-item-title { color:var(--night); }
.alex-tier-chips { display:flex; flex-wrap:wrap; gap:8px; }
.alex-tier-chip { padding:clamp(5px,1cqb,9px) clamp(10px,1.2cqi,16px); border:1px solid var(--alex-line-strong); border-radius:999px; color:var(--alex-ink); font-size:var(--t-small); line-height:1.25; white-space:nowrap; }
.alex-tier-chip-added { border-style:dashed; color:var(--alex-body); }
.alex-tier-item[data-tone=accent] .alex-tier-chip { border-color:rgba(11,17,32,.4); color:var(--night); font-weight:500; }
.alex-tier-item[data-tone=accent] .alex-tier-chip-added { border-color:rgba(11,17,32,.55); color:rgba(11,17,32,.78); }

/* converge: separate changes meet in one result. */
.alex-converge { display:grid; grid-template-columns:minmax(0,1.25fr) clamp(36px,6cqi,80px) minmax(0,1fr); align-items:stretch; }
.alex-converge-inputs { display:grid; gap:clamp(8px,1.6cqb,14px); }
.alex-converge-input { padding:clamp(12px,2.4cqb,22px) var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); background:var(--alex-surface); }
.alex-converge-input h3 { font-size:var(--t-lead); letter-spacing:-.02em; line-height:1.15; }
.alex-converge-link { position:relative; margin:clamp(24px,5cqb,44px) 0; border:1px solid var(--alex-line-strong); border-left:0; border-radius:0 12px 12px 0; width:50%; }
.alex-converge-link::after { content:""; position:absolute; left:100%; top:50%; width:100%; height:1px; background:var(--alex-line-strong); }
.alex-converge-result { display:flex; flex-direction:column; justify-content:center; padding:var(--pad); border:1px solid rgba(74,222,128,.5); border-radius:var(--alex-radius); background:var(--alex-green-soft); }
.alex-converge-result h3 { color:var(--alex-green); font-size:clamp(28px, min(3.8cqi, 6.4cqb), 56px); letter-spacing:-.03em; line-height:1.05; }
.alex-converge-result .alex-item-text { margin-top:10px; font-size:var(--t-lead); line-height:1.25; color:var(--alex-ink); }

/* hub: one employee at the centre, the software it works in on one side and the channels guests use on the other. */
.alex-hub { --orb:clamp(76px, min(9cqi, 16cqb), 168px); display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; }
.alex-hub-side { align-self:stretch; padding:var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); background:var(--alex-surface); }
.alex-hub-side > .alex-group-title { margin:0 0 clamp(8px,1.8cqb,14px); padding-bottom:clamp(8px,1.8cqb,14px); border-bottom:1px solid var(--alex-line-strong); color:var(--alex-ink); font-size:var(--t-small); letter-spacing:.08em; text-transform:uppercase; }
.alex-hub-list { display:grid; gap:clamp(2px,.9cqb,10px); }
.alex-hub-item { display:flex; align-items:flex-start; gap:12px; font-size:calc(var(--t-body) * 1.12); line-height:1.3; }
.alex-hub-item::before { content:""; flex:none; width:7px; height:7px; margin-top:calc(.65em - 3.5px); border-radius:50%; background:var(--alex-green); }
.alex-hub-side-end .alex-hub-item::before { background:var(--alex-body); }
.alex-hub-item .alex-item-title { font-size:1em; font-weight:500; line-height:inherit; }
.alex-hub-core { position:relative; display:grid; grid-template-columns:auto var(--orb) auto; align-items:center; }
.alex-hub-link { position:relative; width:clamp(24px,4.4cqi,72px); height:1px; background:var(--alex-line-strong); }
.alex-hub-link::after { content:""; position:absolute; top:-4px; width:8px; height:8px; border-top:1px solid var(--alex-green); border-left:1px solid var(--alex-green); }
.alex-hub-link-start::after { left:0; transform:rotate(-45deg); }
.alex-hub-link-end::after { right:0; transform:rotate(135deg); }
.alex-hub-orb { position:relative; width:var(--orb); height:var(--orb); border:2px solid rgba(74,222,128,.45); border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(74,222,128,.55), rgba(34,197,94,.18) 60%, transparent 75%), rgba(11,17,32,.9); box-shadow:0 0 60px rgba(74,222,128,.22); }
.alex-hub-orb::before { content:""; position:absolute; inset:26%; background:var(--alex-ink); -webkit-mask:var(--una-mark) center / contain no-repeat; mask:var(--una-mark) center / contain no-repeat; }
.alex-hub-copy { position:absolute; top:calc(100% + clamp(10px,2cqb,18px)); left:0; right:0; text-align:center; }
.alex-hub-copy h3 { color:var(--alex-green); font-size:var(--t-lead); letter-spacing:-.02em; line-height:1.1; }
.alex-hub-copy .alex-item-text { margin-top:4px; color:var(--alex-body); font-size:var(--t-small); line-height:1.25; }
.alex-hub-orb { --una-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='651 1219 566 567'%3E %3Cpath fill='%23000' d='M1195.67,1567.11l-70.54-58.07.07-.64c.77-6.66,1.16-13.46,1.16-20.21v-152.65c0-31.36-12.43-60.7-35-82.61-22.56-21.9-52.27-33.41-83.65-32.51-61.58,1.83-111.68,54.58-111.68,117.59v7.75c0,36.12,17.28,70.6,46.21,92.24l123.98,92.69-.32.83c-18.55,49.03-66.13,80.91-118.55,79.43-65.71-1.91-119.18-58.14-119.18-125.35v-177.61c0-24.3-9.67-47-27.23-63.91-16.71-16.09-38.43-24.84-61.49-24.84-1.15,0-2.3.02-3.46.07-47.05,1.78-85.32,42.55-85.32,90.89v175.52c0,165.59,134.72,300.3,300.31,300.3,146.83,3.02,224.57-88.4,257.82-143.18,14.98-24.68,9.33-57.23-13.13-75.72ZM973.71,1395.88c-15.73-11.76-25.12-30.5-25.12-50.13v-10.22c0-34.52,28.08-62.6,62.6-62.6s62.6,28.08,62.6,62.6v135.17l-100.08-74.82ZM1161.28,1616.53c-45.05,72.15-122.52,115.85-207.22,116.89-1,.01-2.01.02-3.01.02-64.38,0-125.43-25.34-172.22-71.55-48.04-47.46-75.59-113.09-75.59-180.08v-172.59c0-19.67,14.81-36.07,33.71-37.33,10.12-.68,19.78,2.76,27.17,9.68,7.3,6.82,11.48,16.46,11.48,26.42v176.99c0,98.07,78.34,178.19,174.64,178.59.24,0,.48,0,.72,0,66.81,0,128.76-38.87,157.97-99.19l.63-1.3,48.55,36.3c5.4,4.04,6.76,11.41,3.17,17.16Z'/%3E%3C/svg%3E"); }

/* panels: two sides of one comparison. The green side is Polydom's; the dashed side is a target. */
.alex-panels { display:flex; gap:clamp(12px,1.6cqi,22px); }
.alex-panel { flex:var(--grow,1) 1 0; min-width:0; padding:var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); background:var(--alex-surface); }
.alex-panel-list { display:grid; }
.alex-panel > .alex-group-title { margin:0 0 clamp(10px,2.2cqb,18px); padding-bottom:clamp(8px,1.8cqb,14px); border-bottom:1px solid var(--alex-line-strong); color:var(--alex-ink); font-size:var(--t-body); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.alex-panel-item { padding:clamp(8px,1.8cqb,14px) 0; border-top:1px solid var(--alex-line); }
.alex-panel-item:first-child { border-top:0; padding-top:0; }
.alex-panel-item .alex-item-title { margin:0; font-size:var(--t-lead); font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.alex-panel-item .alex-label { margin-top:2px; color:var(--alex-body); font-size:var(--t-body); }
.alex-panel-item .alex-item-text { margin-top:2px; font-size:var(--t-small); color:var(--alex-muted); }
.alex-panel-figure { display:grid; grid-template-columns:minmax(4.4ch,auto) minmax(0,1fr); align-items:baseline; column-gap:clamp(12px,2cqi,24px); }
.alex-panel-figure .alex-value { font-size:calc(var(--t-fig) * .72); }
.alex-panel-figure .alex-item-title { font-size:var(--t-body); font-weight:400; color:var(--alex-body); letter-spacing:0; }
.alex-panel[data-tone=muted] { background:none; }
.alex-panel[data-tone=muted] .alex-item-title { color:var(--alex-muted); font-weight:500; }
.alex-panel[data-tone=accent] { display:flex; flex-direction:column; border-color:rgba(74,222,128,.5); background:var(--alex-green-soft); }
.alex-panel[data-tone=accent] .alex-panel-list { margin-block:auto; }
.alex-panel[data-tone=accent] .alex-group-title { color:var(--alex-green); }
.alex-panel[data-tone=accent] .alex-label { color:var(--alex-green-ink); }
.alex-panel[data-tone=target] { border:1px dashed rgba(165,191,255,.45); background:var(--alex-target-soft); }
.alex-panel[data-tone=target] .alex-group-title { color:var(--alex-target); }
.alex-panel[data-tone=target] .alex-panel-item { border-top-style:dashed; border-top-color:rgba(165,191,255,.2); }
.alex-panel[data-tone=target] .alex-panel-item:first-child { border-top:0; }

/* matrix: capabilities down, vendors across. Only the lit Polydom column is green. */
.alex-matrix { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.alex-matrix th, .alex-matrix td { padding:clamp(8px,1.9cqb,18px) clamp(8px,1.2cqi,18px); border-top:1px solid var(--alex-line); text-align:center; vertical-align:middle; }
.alex-matrix thead th, .alex-matrix thead td { border-top:0; vertical-align:bottom; }
.alex-matrix-corner { width:34%; }
.alex-matrix tbody th { text-align:left; color:var(--alex-ink); font-size:var(--t-body); font-weight:500; line-height:1.25; }
.alex-matrix-col .alex-label { display:block; margin:0 0 4px; }
.alex-matrix-col .alex-item-title { display:block; font-size:var(--t-lead); font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.alex-matrix [data-tone=accent] { background:var(--alex-green-soft); }
.alex-matrix-col[data-tone=accent] { border-radius:var(--alex-radius) var(--alex-radius) 0 0; box-shadow:inset 0 2px 0 var(--alex-green); }
.alex-matrix-col[data-tone=accent] .alex-item-title { color:var(--alex-green); }
.alex-matrix tbody tr:last-child td[data-tone=accent] { border-radius:0 0 var(--alex-radius) var(--alex-radius); }
.alex-matrix-cell { color:var(--alex-body); font-size:var(--t-small); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.alex-matrix-cell[data-mark=yes] { color:var(--alex-ink); }
.alex-matrix-cell[data-mark=yes]::before { content:""; display:inline-block; width:8px; height:8px; margin:0 8px .12em 0; border-radius:50%; background:var(--alex-body); }
.alex-matrix-cell[data-mark=yes][data-tone=accent] { color:var(--alex-green); }
.alex-matrix-cell[data-mark=yes][data-tone=accent]::before { background:var(--alex-green); }
.alex-matrix-cell[data-mark=no] { color:var(--alex-muted); font-weight:500; }
@container alex (max-aspect-ratio: 9/10) or (max-width: 560px) {
  .alex-matrix th, .alex-matrix td { padding:8px 4px; }
  .alex-matrix-corner { width:26%; }
  .alex-matrix tbody th { font-size:12px; }
  .alex-matrix-col .alex-label { display:none; }
  .alex-matrix-col .alex-item-title { font-size:12px; letter-spacing:-.01em; }
  .alex-matrix-cell { font-size:11px; letter-spacing:0; text-transform:none; overflow-wrap:anywhere; }
  .alex-matrix-cell[data-mark=yes]::before { display:none; }
}

/* split: one amount divided by the numbers. */
.alex-split { display:grid; gap:clamp(18px,4cqb,40px); }
.alex-split-chart { display:grid; gap:clamp(10px,2cqb,18px); }
.alex-split-whole { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.alex-split-whole .alex-item-title { font-size:var(--t-body); font-weight:400; color:var(--alex-body); }
.alex-split-bar { display:flex; gap:4px; height:clamp(40px,9cqb,88px); }
.alex-split-seg { flex:var(--share) 1 0; border-radius:10px; background:var(--alex-seg-2); transform-origin:left; animation:alex-grow-x .7s cubic-bezier(.2,.7,.2,1) both .15s; }
.alex-split-seg[data-tone=accent] { background:var(--alex-green); }
.alex-split-legend { display:flex; flex-wrap:wrap; gap:12px clamp(28px,5cqi,80px); }
.alex-split-key { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:12px; min-width:0; }
.alex-split-key::before { content:""; grid-row:span 2; align-self:start; width:14px; height:14px; margin-top:.35em; border-radius:4px; background:var(--alex-seg-2); }
.alex-split-key[data-tone=accent]::before { background:var(--alex-green); }
.alex-split-key .alex-value { font-size:calc(var(--t-fig) * .72); }
.alex-split-key .alex-item-title { display:block; margin-top:6px; font-size:var(--t-body); font-weight:400; color:var(--alex-body); }
.alex-scene[data-basis=target] .alex-split-seg { background:repeating-linear-gradient(135deg, rgba(165,191,255,.28) 0 2px, transparent 2px 9px); box-shadow:inset 0 0 0 1px rgba(165,191,255,.55); }
.alex-scene[data-basis=target] .alex-split-key::before { background:repeating-linear-gradient(135deg, rgba(165,191,255,.5) 0 2px, transparent 2px 5px); box-shadow:inset 0 0 0 1px rgba(165,191,255,.7); }
.alex-scene[data-basis=target] .alex-split-key[data-tone=accent]::before { background:repeating-linear-gradient(135deg, rgba(74,222,128,.7) 0 2px, rgba(74,222,128,.15) 2px 5px); box-shadow:inset 0 0 0 1px rgba(74,222,128,.8); }
.alex-scene[data-basis=target] .alex-split-seg[data-tone=accent] { background:repeating-linear-gradient(135deg, rgba(74,222,128,.42) 0 2px, rgba(74,222,128,.1) 2px 9px); box-shadow:inset 0 0 0 1px rgba(74,222,128,.75); }
.alex-figures { display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:clamp(12px,2cqi,28px); }
.alex-figures[data-count="1"] { --n:1; } .alex-figures[data-count="2"] { --n:2; } .alex-figures[data-count="4"] { --n:4; }
.alex-figure { padding-top:clamp(10px,2cqb,16px); border-top:1px solid var(--alex-line); }
.alex-figure .alex-value { font-size:calc(var(--t-fig) * .72); }
.alex-figure .alex-item-title { display:block; margin-top:6px; font-size:var(--t-body); font-weight:400; color:var(--alex-body); }
.alex-figure .alex-item-text { margin-top:2px; font-size:var(--t-small); color:var(--alex-muted); }
.alex-scene[data-basis=target] .alex-figure { border-top-style:dashed; border-top-color:rgba(165,191,255,.45); }
.alex-figure[data-tone=target] { display:flex; flex-direction:column; padding:clamp(10px,2cqb,18px) var(--pad); border:1px dashed rgba(165,191,255,.5); border-radius:var(--alex-radius); background:var(--alex-target-soft); }
.alex-figure[data-tone=target] .alex-item-title { order:-1; margin:0 0 6px; font-size:var(--t-small); font-weight:500; color:var(--alex-target); }
.alex-figure[data-tone=target] .alex-item-text { margin-top:4px; font-size:var(--t-body); color:var(--alex-body); }

/* blocks: areas drawn to scale, so the beachhead's weight is visible. */
.alex-blocks-layout { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:clamp(20px,4cqi,64px); }
.alex-blocks-layout > .alex-figures { width:max-content; min-width:clamp(180px,20cqi,340px); }
.alex-blocks-layout .alex-figure .alex-value { white-space:nowrap; }
.alex-blocks { --side-max:clamp(96px, min(24cqi, 34cqb), 360px); display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); gap:clamp(12px,2cqi,28px); align-items:start; }
.alex-blocks[data-count="2"] { --n:2; } .alex-blocks[data-count="4"] { --n:4; }
.alex-block-frame { display:flex; align-items:flex-end; height:var(--side-max); }
.alex-block-mark { display:block; width:calc(var(--side-max) * var(--side)); height:calc(var(--side-max) * var(--side)); min-width:6px; min-height:6px; border-radius:6px; background:var(--alex-seg-2); transform-origin:bottom left; animation:alex-grow .7s cubic-bezier(.2,.7,.2,1) both .15s; }
.alex-block[data-tone=accent] .alex-block-mark { background:var(--alex-green); }
.alex-block-copy { margin-top:clamp(12px,2.4cqb,20px); padding-top:clamp(10px,2cqb,16px); border-top:1px solid var(--alex-line); }
.alex-block-copy .alex-item-title { display:block; margin-top:8px; font-size:var(--t-body); font-weight:600; }
.alex-block-copy .alex-item-text { margin-top:2px; font-size:var(--t-small); color:var(--alex-muted); font-variant-numeric:tabular-nums; }
.alex-block[data-tone=accent] .alex-value { color:var(--alex-green); }

/* bars: one row per channel, lengths to scale. */
.alex-bars-layout { display:grid; justify-items:start; gap:clamp(12px,2.6cqb,24px); }
.alex-bars-layout > .alex-group-title { margin:0; padding:4px 14px; border:1px dashed rgba(165,191,255,.55); border-radius:999px; color:var(--alex-target); font-weight:500; }
.alex-bars { display:grid; width:100%; gap:clamp(8px,2cqb,18px); }
.alex-bar { display:grid; grid-template-columns:minmax(0,.26fr) minmax(0,1fr); align-items:center; gap:clamp(12px,2cqi,24px); }
.alex-bar h3 { font-size:var(--t-lead); font-weight:500; letter-spacing:-.01em; line-height:1.15; color:var(--alex-body); }
.alex-bar-line { --value-w:calc(var(--t-fig) * 1.3 + 24px); display:flex; align-items:center; gap:clamp(10px,1.4cqi,18px); }
.alex-bar-fill { display:block; flex:none; width:calc(var(--share) * (100% - var(--value-w))); height:clamp(28px,6.4cqb,60px); border-radius:8px; background:var(--alex-seg-2); transform-origin:left; animation:alex-grow-x .7s cubic-bezier(.2,.7,.2,1) both .15s; }
.alex-bar .alex-value { font-size:calc(var(--t-fig) * .7); }
.alex-bar[data-tone=accent] .alex-value { color:var(--alex-green); }
.alex-bar[data-tone=accent] h3 { color:var(--alex-ink); font-weight:600; }
.alex-bar[data-tone=accent] .alex-bar-fill { background:var(--alex-green); }
.alex-scene[data-basis=target] .alex-bar-fill { background:repeating-linear-gradient(135deg, rgba(165,191,255,.28) 0 2px, transparent 2px 9px); box-shadow:inset 0 0 0 1px rgba(165,191,255,.55); }
.alex-scene[data-basis=target] .alex-bar[data-tone=accent] .alex-bar-fill { background:repeating-linear-gradient(135deg, rgba(74,222,128,.42) 0 2px, rgba(74,222,128,.1) 2px 9px); box-shadow:inset 0 0 0 1px rgba(74,222,128,.75); }

/* ring: where one amount goes. The amount sits in the middle. */
.alex-ring-layout { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:clamp(20px,5cqi,72px); }
.alex-ring { --size:clamp(150px, min(30cqi, 46cqb), 380px); position:relative; display:grid; place-items:center; width:var(--size); height:var(--size); }
.alex-ring-track { position:absolute; inset:0; border-radius:50%; background:var(--ring); -webkit-mask:radial-gradient(farthest-side, transparent 66%, #000 calc(66% + 1px)); mask:radial-gradient(farthest-side, transparent 66%, #000 calc(66% + 1px)); animation:alex-sweep .8s cubic-bezier(.2,.7,.2,1) both .1s; }
.alex-ring-center { position:relative; text-align:center; }
.alex-ring-center .alex-value { font-size:calc(var(--size) * .17); }
.alex-ring-center .alex-item-title { display:block; margin-top:6px; font-size:var(--t-small); font-weight:500; color:var(--alex-muted); }
.alex-ring-side { display:grid; gap:clamp(16px,3.6cqb,32px); }
.alex-ring-legend { display:grid; gap:clamp(6px,1.4cqb,12px); }
.alex-ring-key { display:grid; grid-template-columns:14px minmax(4.2ch,auto) minmax(0,1fr); align-items:baseline; column-gap:clamp(10px,1.6cqi,20px); padding:clamp(6px,1.4cqb,12px) 0; border-top:1px solid var(--alex-line); }
.alex-ring-key:first-child { border-top:0; }
.alex-ring-key .alex-value { font-size:calc(var(--t-fig) * .72); }
.alex-ring-key .alex-item-title { font-size:var(--t-lead); font-weight:500; letter-spacing:-.01em; }
.alex-swatch { width:14px; height:14px; border-radius:4px; background:var(--alex-seg-1); }
.alex-swatch[data-seg="2"] { background:var(--alex-seg-2); } .alex-swatch[data-seg="3"] { background:var(--alex-seg-3); }
.alex-swatch[data-seg=accent] { background:var(--alex-green); }
.alex-ring-side .alex-figures { gap:clamp(28px,4cqi,48px); }
.alex-ring-side .alex-figure { position:relative; display:flex; flex-direction:column; padding:clamp(10px,2cqb,18px) var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); }
.alex-ring-side .alex-figure .alex-item-title { order:-1; margin:0 0 6px; font-size:var(--t-small); font-weight:500; color:var(--alex-muted); }
.alex-ring-side .alex-figure .alex-item-text { margin-top:4px; font-size:var(--t-body); color:var(--alex-body); }
.alex-ring-side .alex-figure + .alex-figure::before { content:""; position:absolute; top:50%; right:calc(100% + clamp(8px,1.2cqi,16px)); width:clamp(12px,2cqi,20px); height:clamp(12px,2cqi,20px); border-top:2px solid var(--alex-line-strong); border-right:2px solid var(--alex-line-strong); transform:translateY(-50%) rotate(45deg); }

.alex-ring-side .alex-figure[data-tone=target] { border:1px dashed rgba(165,191,255,.5); background:var(--alex-target-soft); }
.alex-text-line { display:block; }
.alex-text-sep { display:none; }
.alex-value[data-word=true] { font-size:calc(var(--t-fig) * .5); letter-spacing:-.01em; }
.alex-ring-side .alex-figure[data-tone=target] .alex-item-title { color:var(--alex-target); }

/* layers: context piles up under the next request. The oldest layer is the widest. */
.alex-layers { display:grid; gap:clamp(12px,2.6cqb,24px); }
.alex-layers-result { position:relative; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px clamp(12px,2cqi,28px); padding:calc(var(--pad) * .8) var(--pad); border:1px solid rgba(74,222,128,.5); border-radius:var(--alex-radius); background:var(--alex-green-soft); }
.alex-layers-result h3 { order:1; color:var(--alex-green); font-size:calc(var(--t-lead) * 1.25); letter-spacing:-.02em; line-height:1.1; }
.alex-layers-result .alex-item-text { order:2; margin:0; color:var(--alex-ink); font-size:var(--t-lead); line-height:1.25; }
.alex-layers-result .alex-label { order:3; margin:0 0 0 auto; padding:4px 14px; border:1px dashed rgba(165,191,255,.6); border-radius:999px; color:var(--alex-target); font-size:var(--t-small); font-weight:500; }
.alex-layers-result::after { content:""; position:absolute; left:50%; top:100%; width:1px; height:clamp(12px,2.6cqb,24px); background:var(--alex-line-strong); }
.alex-layers-stack { display:flex; flex-direction:column-reverse; gap:4px; }
.alex-layer { display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); align-items:baseline; gap:4px clamp(16px,3cqi,40px); margin-inline:calc((var(--depth) - .25) * 7%); padding:clamp(8px,1.9cqb,18px) var(--pad); border-radius:8px; background:rgba(255,255,255,calc(.1 - var(--depth) * .06)); }
.alex-layer h3 { font-size:calc(var(--t-lead) * .9); letter-spacing:-.02em; line-height:1.15; }
.alex-layer .alex-item-text { margin:0; }

/* sum: the roles add up to the full account; the dashed line is the blended target. */
.alex-sum { display:flex; flex-direction:column; gap:clamp(10px,2cqb,18px); }
.alex-sum-keys { display:grid; grid-template-columns:var(--tracks); gap:4px; }
.alex-sum-key { min-width:0; padding:0 clamp(8px,1.4cqi,20px) 0 clamp(10px,1.8cqi,24px); }
.alex-sum-key h3 { font-size:calc(var(--t-body) * 1.2); font-weight:600; letter-spacing:-.01em; line-height:1.2; }
.alex-sum-key .alex-item-text { margin-top:6px; font-size:var(--t-small); color:var(--alex-muted); line-height:1.35; }
.alex-sum-chart { --bar-h:clamp(40px,8.4cqb,92px); position:relative; display:grid; gap:4px; margin-bottom:calc(var(--t-fig) * .5 + 18px); }
.alex-sum-bar { display:grid; grid-template-columns:var(--tracks); gap:4px; }
.alex-sum-fill { display:flex; align-items:center; min-width:0; height:var(--bar-h); padding:0 clamp(10px,1.8cqi,24px); border-radius:10px; background:var(--alex-seg-1); color:var(--night); transform-origin:left; animation:alex-grow-x .7s cubic-bezier(.2,.7,.2,1) both .15s; }
.alex-sum-fill[data-seg="2"] { background:var(--alex-seg-2); color:var(--alex-ink); }
.alex-sum-fill[data-seg="3"] { background:var(--alex-seg-3); color:var(--alex-ink); }
.alex-sum-fill .alex-value, .alex-sum-total .alex-value { color:inherit; font-size:calc(var(--t-fig) * .6); }
.alex-sum-total { display:flex; align-items:center; gap:clamp(12px,2cqi,28px); height:var(--bar-h); padding:0 clamp(8px,1.4cqi,20px); border:1px solid rgba(74,222,128,.6); border-radius:10px; background:rgba(74,222,128,.16); color:var(--alex-green); }
.alex-sum-total-copy { display:flex; align-items:baseline; gap:4px 16px; min-width:0; flex-wrap:wrap; }
.alex-sum-total h3 { color:var(--alex-ink); font-size:var(--t-lead); letter-spacing:-.02em; }
.alex-sum-total .alex-item-text { margin:0; font-size:var(--t-body); color:var(--alex-body); }
.alex-sum-marker { position:absolute; top:0; bottom:0; left:calc(var(--at) * 100%); width:0; }
.alex-sum-rule { position:absolute; top:-8px; bottom:-8px; left:-1px; border-left:2px dashed var(--alex-target); }
.alex-sum-marker-copy { position:absolute; top:calc(100% + 10px); right:-1px; display:flex; align-items:baseline; gap:10px; padding-right:10px; white-space:nowrap; }
.alex-sum-marker .alex-value { color:var(--alex-target); font-size:max(13px, calc(var(--t-fig) * .5)); }
.alex-sum-marker .alex-item-title { margin:0; color:var(--alex-target); font-size:var(--t-small); font-weight:500; }

/* rise: revenue per account to scale, one shared scale across groups. Solid is today, hatched is the target, outlined is a single account. A non-target figure group sits above the chart as one line of signals, and the bars shorten to make room. */
.alex-rise { --col-h:clamp(110px,32cqb,400px); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:end; gap:clamp(20px,5cqi,80px); }
.alex-rise-main { display:flex; flex-direction:column; gap:clamp(12px,3cqb,36px); min-width:0; }
.alex-rise[data-signals] { --col-k:.78; }
.alex-rise-signals .alex-group-title { margin-bottom:clamp(6px,1.2cqb,12px); }
.alex-rise-signals .alex-figures { display:flex; flex-wrap:wrap; gap:clamp(8px,1.6cqb,16px) clamp(28px,5cqi,80px); }
.alex-rise-signals .alex-figure { display:flex; align-items:baseline; gap:clamp(8px,1cqi,14px); padding:0; border:0; }
.alex-rise-signals .alex-figure .alex-item-title { margin:0; }
.alex-rise-signals .alex-figure[data-tone=accent] .alex-value { color:var(--alex-green); }
.alex-rise-chart { display:grid; min-width:0; grid-template-columns:var(--tracks); grid-template-rows:auto auto; column-gap:clamp(20px,3.6cqi,56px); }
.alex-rise-group { display:grid; grid-row:span 2; grid-template-rows:subgrid; grid-template-columns:minmax(0,1fr); min-width:0; }
.alex-rise-group > .alex-rise-cols { align-self:end; border-bottom:1px solid var(--alex-line-strong); }
.alex-rise-group > .alex-group-title { align-self:start; }
.alex-rise-group + .alex-rise-group { position:relative; }
.alex-rise-group + .alex-rise-group::before { content:""; position:absolute; top:0; bottom:0; left:calc(clamp(20px,3.6cqi,56px) * -.5); border-left:1px dashed var(--alex-line-strong); }
.alex-rise-cols { display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; align-items:end; gap:clamp(12px,2.4cqi,36px); }
.alex-rise-group > .alex-group-title { margin:clamp(8px,1.8cqb,14px) 0 0; color:var(--alex-ink); font-size:var(--t-body); line-height:1.25; text-wrap:balance; }
.alex-rise-group:last-child > .alex-group-title { width:max-content; max-width:calc(100% + clamp(20px,5cqi,80px) - 8px); }
.alex-rise-col { display:flex; flex-direction:column; }
.alex-rise-col .alex-value { margin-bottom:clamp(6px,1.4cqb,12px); font-size:calc(var(--t-fig) * .78); }
.alex-rise-bar { display:block; height:calc(var(--col-h) * var(--col-k,1) * var(--share)); border-radius:10px 10px 4px 4px; background:var(--alex-seg-2); transform-origin:bottom; animation:alex-grow-y .7s cubic-bezier(.2,.7,.2,1) both .15s; }
.alex-rise-col h3 { margin:0 0 2px; color:var(--alex-body); font-size:var(--t-small); font-weight:500; line-height:1.25; }
.alex-rise-col .alex-label { margin-top:2px; }
.alex-rise-col[data-tone=accent] .alex-rise-bar { background:var(--alex-green); }
.alex-rise-col[data-tone=accent] .alex-value { color:var(--alex-green); }
.alex-rise-col[data-tone=target] .alex-rise-bar { background:repeating-linear-gradient(135deg, rgba(165,191,255,.3) 0 2px, transparent 2px 9px); box-shadow:inset 0 0 0 1px rgba(165,191,255,.6); }
.alex-rise-col[data-tone=target] .alex-value, .alex-rise-col[data-tone=target] .alex-label, .alex-rise-col[data-tone=target] h3 { color:var(--alex-target); }
.alex-rise-col[data-tone=muted] .alex-rise-bar { background:var(--alex-seg-3); box-shadow:inset 0 0 0 1px var(--alex-line-strong); }
.alex-rise-col[data-tone=muted] .alex-value { color:var(--alex-body); }
.alex-rise-side { padding:var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); }
.alex-rise-side[data-tone=target] { border:1px dashed rgba(165,191,255,.5); background:var(--alex-target-soft); }
.alex-rise-side[data-tone=target] > .alex-group-title { color:var(--alex-target); }
.alex-rise-side .alex-figures, .alex-rise-side .alex-figures[data-count] { grid-template-columns:auto minmax(0,1fr); column-gap:clamp(12px,2cqi,24px); gap:0 clamp(12px,2cqi,24px); }
.alex-rise-side .alex-figure, .alex-rise-side .alex-figure[data-tone] { display:grid; grid-column:1 / -1; grid-template-columns:subgrid; align-items:baseline; column-gap:clamp(12px,2cqi,24px); padding:clamp(8px,1.8cqb,14px) 0; border:0; border-top:1px dashed rgba(165,191,255,.2); border-radius:0; background:none; }
.alex-rise-side .alex-figure:first-child { border-top:0; padding-top:0; }
.alex-rise-side .alex-figure .alex-item-title { order:0; margin:0; font-size:var(--t-body); font-weight:400; color:var(--alex-body); }

/* founders: three equal columns, the role in green so the people read before the titles. */
.alex-people { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.alex-people .alex-item { border-top:1px solid var(--alex-line); padding-top:18px; }
.alex-people h3 { font-size:var(--t-lead); letter-spacing:-.02em; line-height:1.15; }
.alex-people .alex-label { color:var(--alex-green); font-weight:500; }

/* columns: two named groups. */
.alex-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
.alex-group { border-top:1px solid var(--alex-line); padding-top:18px; }
.alex-group-list { display:grid; gap:10px; }
.alex-group-list .alex-item { color:var(--alex-body); font-size:var(--t-body); line-height:1.3; }
.alex-group-list .alex-item-text { display:block; margin-top:2px; }

/* list: a two-column checklist. */
.alex-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.alex-list .alex-item { border-top:1px solid var(--alex-line); padding:14px 0; color:var(--alex-ink); font-size:var(--t-lead); font-weight:500; line-height:1.3; }
.alex-list .alex-item-text { display:block; margin-top:4px; font-weight:400; }

/* metrics: numbers in white, one to four across. Grouped metrics put the second group on a band. */
.alex-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,3cqb,28px) clamp(16px,2.4cqi,32px); }
.alex-metrics[data-count="1"] { grid-template-columns:minmax(0,1fr); }
.alex-metrics[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
.alex-metrics[data-count="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
.alex-metrics .alex-item { border-top:1px solid var(--alex-line); padding-top:clamp(10px,2.2cqb,18px); }
.alex-metrics h3 { margin:10px 0 0; max-width:24ch; color:var(--alex-body); font-size:var(--t-body); font-weight:400; line-height:1.3; }
.alex-metrics[data-count="1"] .alex-value { color:var(--alex-green); font-size:calc(var(--t-fig) * 1.6); }
.alex-metric-groups { display:grid; gap:clamp(14px,3cqb,28px); }
.alex-metric-groups .alex-metrics { grid-template-columns:repeat(var(--n,2),max-content); column-gap:clamp(40px,9cqi,140px); }
.alex-metric-groups .alex-metrics[data-count="3"] { --n:3; }
.alex-metric-groups .alex-metrics[data-count="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(16px,2.4cqi,32px); }
.alex-metric-groups .alex-group-title { margin:0 0 clamp(10px,2cqb,16px); color:var(--alex-muted); font-size:var(--t-small); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.alex-metric-group:first-child .alex-metrics .alex-item { border-top:2px solid var(--alex-line-strong); padding-top:clamp(10px,2cqb,16px); }
.alex-metric-group:first-child .alex-metrics [data-tone=accent] { border-top-color:var(--alex-green); }
.alex-metric-group:first-child .alex-value { font-size:calc(var(--t-fig) * 1.3); }
.alex-metric-group:first-child [data-tone=accent] .alex-value { color:var(--alex-green); }
.alex-metric-group + .alex-metric-group { margin-inline:calc(var(--pad) * -1); padding:var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); background:var(--alex-surface); }
.alex-metric-group + .alex-metric-group .alex-metrics .alex-item { border-top:0; padding-top:0; }
.alex-metric-group + .alex-metric-group .alex-value { font-size:calc(var(--t-fig) * .86); }

/* steps: the price builds left to right and ends in the full account. */
.alex-steps { display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); gap:clamp(12px,1.6cqi,22px); }
.alex-steps[data-count="3"] { --n:3; } .alex-steps[data-count="5"] { --n:5; }
.alex-step { position:relative; display:flex; flex-direction:column; padding:var(--pad); border:1px solid var(--alex-line); border-radius:var(--alex-radius); background:var(--alex-surface); }
.alex-step .alex-value { font-size:calc(var(--t-fig) * .86); }
.alex-step h3 { margin:clamp(8px,1.8cqb,14px) 0 0; font-size:var(--t-lead); letter-spacing:-.02em; line-height:1.15; }
.alex-step .alex-item-text { margin-top:8px; font-size:var(--t-small); color:var(--alex-muted); line-height:1.35; }
.alex-step:last-child { border-color:rgba(74,222,128,.5); background:var(--alex-green-soft); }
.alex-step:last-child .alex-value { color:var(--alex-green); }
.alex-steps[data-count="4"] .alex-step:last-child::before, .alex-steps[data-count="3"] .alex-step:last-child::before { content:"="; position:absolute; top:var(--pad); right:calc(100% + 1px); width:clamp(12px,1.6cqi,22px); color:var(--alex-muted); font-size:calc(var(--t-fig) * .6); line-height:1.3; text-align:center; }

/* contact: name, role and the ways to reach her. */
.alex-contact { display:grid; gap:clamp(6px,1.4cqb,12px); width:fit-content; max-width:100%; padding:var(--pad) calc(var(--pad) * 1.3); border:1px solid rgba(74,222,128,.4); border-radius:var(--alex-radius); background:var(--alex-green-soft); }
.alex-contact .alex-item { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; }
.alex-contact h3 { font-size:var(--t-lead); letter-spacing:-.02em; }
/* close: the next step. One green card holds the call to invest and both ways to act on it. */
.alex-close .alex-subtitle { max-width:none; color:var(--alex-body); font-size:var(--t-lead); line-height:1.3; }
.alex-close .alex-contact { gap:clamp(16px,3.4cqb,32px); padding:calc(var(--pad) * 1.1) calc(var(--pad) * 1.4); border-color:rgba(74,222,128,.5); background:linear-gradient(120deg, rgba(74,222,128,.2), rgba(74,222,128,.05) 72%); box-shadow:0 30px 90px rgba(74,222,128,.1); }
.alex-close .alex-contact h3 { color:var(--alex-ink); font-size:calc(var(--t-lead) * 1.3); font-weight:700; letter-spacing:-.025em; line-height:1.12; }
.alex-actions { display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; width:fit-content; max-width:100%; gap:clamp(10px,1.6cqi,18px); }
.alex-action { display:inline-flex; align-items:center; justify-content:center; gap:.55em; padding:.78em 1.6em; border:1px solid var(--alex-line-strong); border-radius:999px; color:var(--alex-ink); font-size:calc(var(--t-body) * 1.22); font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; transition:background .2s, border-color .2s, box-shadow .2s; }
.alex-action[href]:hover { border-color:var(--alex-ink); background:rgba(255,255,255,.06); }
.alex-action-primary { border-color:transparent; background:var(--alex-green); color:var(--night); box-shadow:0 10px 30px rgba(74,222,128,.2); }
.alex-action-primary[href]:hover { border-color:transparent; background:var(--alex-green-ink); }
.alex-action[href]:focus-visible { outline:2px solid var(--alex-green); outline-offset:3px; }
.alex-action-icon { width:1.1em; height:1.1em; flex:none; background:currentColor; -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
.alex-icon-calendar { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.alex-icon-mail { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.alex-contact .alex-label { margin:0; color:var(--alex-body); font-size:var(--t-body); }

/* Portrait or narrow stage: phones held upright and portrait tablets. Every diagram turns vertical and type follows the width. */
@container alex (max-aspect-ratio: 9/10) or (max-width: 560px) {
 .alex-scene { --t-title:clamp(24px, min(7.2cqi, 6cqb), 52px); --t-lead:clamp(17px, min(4.6cqi, 3.6cqb), 30px); --t-body:clamp(15px, min(3.4cqi, 2.8cqb), 22px); --t-small:clamp(14px, min(2.6cqi, 2.2cqb), 18px); --t-fig:clamp(26px, min(7.6cqi, 6.4cqb), 56px); --pad:clamp(12px, 3.4cqi, 24px); --gap:clamp(14px,3cqb,32px); }
 .alex-long-title h2 { font-size:calc(var(--t-title) * .9); }
 .alex-layout-statement h2, .alex-layout-contact h2 { font-size:clamp(32px, min(10cqi, 6cqb), 72px); }
 .alex-tags, .alex-tags[data-count] { grid-template-columns:1fr; }
 .alex-tags .alex-item { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 0; border-top:1px solid var(--alex-line); }
 .alex-tags[data-count="1"] .alex-item { display:block; border-top:0; }
 .alex-intro { grid-template-columns:minmax(0,1fr); align-content:start; }
 .alex-intro::after { grid-column:1; grid-row:1; min-height:clamp(96px,20cqb,180px); background-size:auto 54%, auto; }
 .alex-hub { --orb:clamp(56px, 16cqi, 84px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"core core" "start end"; gap:clamp(12px,2.6cqb,24px) 10px; align-items:start; }
 .alex-hub-core { grid-area:core; display:flex; justify-content:center; gap:14px; }
 .alex-hub-link { display:none; }
 .alex-hub-copy { position:static; text-align:left; }
 .alex-hub-side-start { grid-area:start; } .alex-hub-side-end { grid-area:end; }
 .alex-hub-side { padding:calc(var(--pad) * .9); }
 .alex-hub-side > .alex-group-title { display:flex; align-items:flex-end; box-sizing:content-box; min-height:2.4em; line-height:1.2; letter-spacing:.04em; }
 .alex-hub-item { gap:8px; }
 .alex-hub-item::before { width:6px; height:6px; margin-top:calc(.65em - 3px); }
 .alex-hub-item { font-size:var(--t-body); }
 .alex-tags .alex-item:first-child { border-top:0; box-shadow:none; }
 .alex-tags .alex-item:first-child .alex-item-title { color:var(--alex-green); }
 .alex-cards, .alex-cards[data-count] { grid-template-columns:1fr; gap:10px; }
 .alex-cards[data-count="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .alex-card { gap:6px; padding:calc(var(--pad) * .85) var(--pad); }
 .alex-cards[data-count="3"] .alex-card h3 { font-size:var(--t-lead); }
 .alex-cards[data-count="3"] .alex-item-text { font-size:var(--t-body); }
 .alex-card .alex-label { margin-top:2px; }
 .alex-card .alex-item-text { margin-top:4px; font-size:var(--t-small); }
 .alex-card-body { display:flex; align-items:baseline; gap:10px; }
 .alex-card-body .alex-item-text { margin:0; }
 .alex-card[data-tone=risk] .alex-card-body { display:block; }
 .alex-flow, .alex-flow[data-count] { --dot:30px; grid-template-columns:1fr; gap:0; }
 .alex-flow-step { flex-direction:row; align-items:flex-start; gap:14px; padding-bottom:12px; }
 .alex-flow-step:not(:last-child)::after { top:var(--dot); left:calc(var(--dot) / 2); right:auto; bottom:0; width:1px; height:auto; }
 .alex-flow .alex-item-text { margin-top:2px; font-size:var(--t-small); }
 .alex-flow-copy { padding-top:4px; }
 .alex-flow[data-count="5"] h3 { font-size:var(--t-lead); }
 .alex-flow[data-count="5"] .alex-item-text { font-size:var(--t-small); }
 .alex-flow[data-count="3"] { --notch:clamp(12px,3cqi,22px); display:flex; flex-direction:column; }
 .alex-flow[data-count="3"] .alex-flow-step, .alex-flow[data-count="3"] .alex-flow-step:first-child { flex:none; display:block; min-height:0; padding:calc(var(--notch) + 8px) var(--pad) calc(var(--notch) + 8px); clip-path:polygon(0 0, 50% var(--notch), 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch))); }
 .alex-flow[data-count="3"] .alex-flow-step:first-child { padding-top:calc(var(--pad) * .9); clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--notch)), 50% 100%, 0 calc(100% - var(--notch))); }
 .alex-flow[data-count="3"] .alex-flow-step + .alex-flow-step { margin:calc(4px - var(--notch)) 0 0; }
 .alex-flow[data-count="3"] h3 { font-size:calc(var(--t-lead) * 1.2); }
 .alex-tiers { --tier-gap:16px; grid-template-columns:minmax(0,1fr); row-gap:6px; }
 .alex-tier + .alex-tier > .alex-group-title { margin-top:calc(var(--tier-gap) - 6px); }
 .alex-tiers > .alex-tier > .alex-group-title { justify-self:start; font-size:11px; }
 .alex-tier-row, .alex-tier-row[data-count] { grid-template-columns:minmax(0,1fr); gap:8px; }
 .alex-tier-item, .alex-tier-item:only-child { flex-direction:column; align-items:stretch; gap:10px; padding:calc(var(--pad) * .8) var(--pad); }
 .alex-tier-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-width:0; }
 .alex-tier-item .alex-label { margin:0; }
 .alex-tier-item .alex-item-title { font-size:calc(var(--t-lead) * 1.1); }
 .alex-tier-item[data-tone=muted] { flex-direction:row; align-items:baseline; justify-content:space-between; padding-block:calc(var(--pad) * .55); }
 .alex-tier-item[data-tone=muted] .alex-tier-head { justify-content:flex-start; }
 .alex-tier-item[data-tone=muted] .alex-item-text { margin:0; font-size:var(--t-small); }
 .alex-tier:first-child .alex-tier-item::after { display:none; }
 .alex-tier-chip { padding:4px 10px; font-size:13px; }
 .alex-converge { grid-template-columns:1fr; grid-template-rows:auto 28px auto; }
 .alex-converge-inputs { gap:8px; }
 .alex-converge-input { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; padding:calc(var(--pad) * .7) var(--pad); }
 .alex-converge-input .alex-item-text { margin:2px 0 0; font-size:var(--t-small); }
 .alex-converge-link { width:1px; height:100%; margin:0 auto; border:0; border-radius:0; background:var(--alex-line-strong); }
 .alex-converge-link::after { display:none; }
 .alex-converge-result h3 { font-size:calc(var(--t-lead) * 1.3); }
 .alex-converge-result .alex-item-text { font-size:var(--t-body); margin-top:4px; }
 .alex-panels { flex-direction:column; gap:10px; }
 .alex-panel { flex:none; padding:calc(var(--pad) * .85) var(--pad); }
 .alex-group-title { margin-bottom:6px; }
 .alex-panel-item { padding:7px 0; }
 .alex-panel-item .alex-item-title { font-size:var(--t-body); }
 .alex-panel-figure .alex-value { font-size:calc(var(--t-fig) * .8); }
 .alex-split-legend { flex-direction:column; gap:8px; }
 .alex-split-key { grid-template-columns:auto auto minmax(0,1fr); }
 .alex-split-key::before { grid-row:auto; margin-top:0; align-self:center; }
 .alex-split-key .alex-item-title { margin:0; }
 .alex-figures, .alex-figures[data-count] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .alex-figures[data-count="1"] { grid-template-columns:1fr; }
 .alex-figure .alex-value, .alex-split-key .alex-value { font-size:calc(var(--t-fig) * .85); }
 .alex-blocks-layout { grid-template-columns:1fr; gap:12px; }
 .alex-blocks-layout > .alex-figures { width:auto; }
 .alex-blocks, .alex-blocks[data-count] { --side-max:clamp(64px, min(26cqi, 16cqb), 200px); grid-template-columns:1fr; gap:10px; }
 .alex-block { display:grid; grid-template-columns:var(--side-max) minmax(0,1fr); align-items:center; column-gap:14px; }
 .alex-block-frame { align-items:center; justify-content:center; }
 .alex-block-copy { margin:0; padding:0; border:0; }
 .alex-block-copy .alex-item-title { margin-top:4px; }
 .alex-bar { grid-template-columns:1fr; row-gap:6px; }
 .alex-bar h3 { font-size:var(--t-body); }

 .alex-bar-fill { height:clamp(22px, 5cqi, 36px); }
 .alex-ring-layout { grid-template-columns:1fr; justify-items:center; gap:16px; }
 .alex-ring { --size:clamp(130px, min(46cqi, 26cqb), 320px); }
 .alex-ring-side { width:100%; gap:12px; }
 .alex-ring-key .alex-item-title { font-size:var(--t-body); }
 .alex-ring-key .alex-value { font-size:calc(var(--t-fig) * .8); }
 .alex-ring-side .alex-figures, .alex-ring-side .alex-figures[data-count] { gap:24px; }
 .alex-ring-side .alex-figures[data-count="3"] .alex-figure:last-child { grid-column:1 / -1; }
 .alex-ring-side .alex-figures[data-count="3"] .alex-figure:last-child::before { display:none; }
 .alex-ring-side .alex-figure { padding:calc(var(--pad) * .7) var(--pad); }
 .alex-ring-side .alex-figure .alex-value { font-size:calc(var(--t-fig) * .72); }
 .alex-layer { grid-template-columns:1fr; margin-inline:calc((var(--depth) - .25) * 5%); padding:calc(var(--pad) * .6) var(--pad); }
 .alex-layer .alex-item-text { font-size:var(--t-small); }
 .alex-layers-result h3 { font-size:calc(var(--t-lead) * 1.15); }
 .alex-layers-result .alex-item-text { font-size:var(--t-body); }
 .alex-layers-result .alex-label { order:0; flex-basis:100%; margin:0; padding:0; border:0; border-radius:0; }
 .alex-layers-result .alex-label::before { content:""; display:inline-block; width:18px; margin-right:8px; vertical-align:middle; border-top:1px dashed var(--alex-target); }
 .alex-sum-keys { order:2; grid-template-columns:1fr; gap:10px; }
 .alex-sum-key { display:grid; grid-template-columns:12px minmax(0,1fr); column-gap:10px; padding:0; }
 .alex-sum-key::before { content:""; grid-row:span 2; width:12px; height:12px; margin-top:.3em; border-radius:3px; background:var(--alex-seg-1); }
 .alex-sum-key[data-seg="2"]::before { background:var(--alex-seg-2); } .alex-sum-key[data-seg="3"]::before { background:var(--alex-seg-3); box-shadow:inset 0 0 0 1px var(--alex-line-strong); }
 .alex-sum-key h3 { font-size:var(--t-body); }
 .alex-sum-key .alex-item-text { margin-top:2px; }
 .alex-sum-chart { --bar-h:clamp(36px, 10cqi, 60px); }
 .alex-sum-fill, .alex-sum-total { padding:0 8px; }
 .alex-sum-fill .alex-value, .alex-sum-total .alex-value { font-size:calc(var(--t-fig) * .55); }
 .alex-sum-total .alex-item-text { display:none; }
 .alex-rise { grid-template-columns:1fr; gap:var(--gap); }
 .alex-rise { --col-h:clamp(90px, min(34cqi, 20cqb), 260px); }
 .alex-rise-group:last-child > .alex-group-title { width:auto; max-width:none; }
 .alex-rise-col .alex-value { font-size:calc(var(--t-fig) * .72); }
 .alex-rise-col h3 { font-size:var(--t-small); }
 .alex-rise-col .alex-label { font-size:13px; }
 .alex-people { grid-template-columns:1fr; gap:12px; }
 .alex-columns { grid-template-columns:1fr; gap:18px; }
 .alex-list { grid-template-columns:1fr; }
 .alex-list .alex-item { padding:10px 0; }
 .alex-metrics, .alex-metrics[data-count="4"], .alex-metrics[data-count="3"][data-wide="true"] { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 14px; }
 .alex-metrics[data-count="3"][data-wide="true"] .alex-item:last-child { grid-column:1/-1; }
 .alex-metrics[data-count="1"] { grid-template-columns:1fr; }
 .alex-metrics h3 { margin-top:6px; }
 .alex-metric-group:first-child .alex-value { font-size:calc(var(--t-fig) * 1.15); }
 .alex-metric-groups .alex-metrics, .alex-metric-groups .alex-metrics[data-count="4"] { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:14px; }
 .alex-metric-group + .alex-metric-group { margin-inline:0; }
 .alex-steps, .alex-steps[data-count] { grid-template-columns:1fr; gap:8px; }
 .alex-step { display:grid; grid-template-columns:minmax(4.2ch,auto) minmax(0,1fr); column-gap:14px; align-items:baseline; padding:10px 14px; }
 .alex-step .alex-value { grid-row:span 2; font-size:26px; }
 .alex-step h3 { margin:0; font-size:var(--t-body); }
 .alex-step .alex-item-text { margin-top:2px; font-size:13px; }
 .alex-steps[data-count] .alex-step:last-child::before { display:none; }
 .alex-contact { width:auto; padding:14px 16px; }
 .alex-contact .alex-item { display:block; }
 .alex-actions { grid-auto-flow:row; width:100%; max-width:420px; gap:10px; }
 .alex-action { padding:13px 18px; font-size:16px; }
 .alex-link { display:inline-block; margin-top:4px; font-size:var(--t-lead); }
}
/* Short narrow stage (360×640, or a phone with the call dock): secondary descriptions give way first. */
@container alex ((max-aspect-ratio: 9/10) or (max-width: 560px)) and (max-height: 600px) {
 .alex-scene { --gap:12px; --t-fig:26px; }
 .alex-kicker { margin-bottom:6px; }
 .alex-subtitle { display:none; }
 .alex-close .alex-subtitle { display:block; }
 .alex-step .alex-item-text, .alex-flow[data-count="5"] .alex-item-text, .alex-cards[data-count="4"] .alex-item-text { display:none; }
 .alex-card[data-tone=risk] .alex-item-text { font-size:14px; line-height:1.3; }
 .alex-flow[data-count="5"] .alex-flow-step { align-items:center; padding-bottom:8px; }
 .alex-flow[data-count="5"] .alex-flow-copy { padding:0; }
 .alex-panel-item .alex-item-text { display:none; }
 .alex-footnote { padding-top:6px; font-size:13px; }
 .alex-ring { --size:clamp(96px, calc(100cqi - 208px), 120px); }
 .alex-ring-layout { grid-template-columns:auto minmax(0,1fr); justify-items:stretch; gap:14px; }
 .alex-ring-side { display:contents; }
 .alex-ring-side .alex-figures { grid-column:1 / -1; }
 .alex-ring-side .alex-figure { padding-inline:10px; }
 .alex-blocks { --side-max:72px; }
 .alex-metric-group:first-child .alex-value { font-size:30px; }
 .alex-layer .alex-item-text, .alex-sum-key .alex-item-text, .alex-rise-col:not([data-tone=target]) .alex-label { display:none; }
 .alex-rise { --col-h:70px; }
 .alex-flow[data-count="3"] .alex-flow-step, .alex-flow[data-count="3"] .alex-flow-step:first-child { padding-block:calc(var(--notch) + 4px); }
}
/* Shorter still (an SE-sized phone in a call): the tiers drop their captions, Alex keeps only his name and job, the chips tighten. */
@container alex ((max-aspect-ratio: 9/10) or (max-width: 560px)) and (max-height: 500px) {
 .alex-tiers { row-gap:8px; }
 .alex-tiers > .alex-tier > .alex-group-title, .alex-tier-item[data-tone=muted] .alex-item-text { display:none; }
 .alex-tier-item, .alex-tier-item:only-child { gap:8px; padding:10px 12px; }
 .alex-tier-item .alex-item-title { font-size:var(--t-lead); }
 .alex-tier-chips { gap:6px; }
 .alex-tier-chip { padding:2px 8px; font-size:12px; }
}
/* Short wide stage: laptops with a browser bar, projectors at 1366×640. */
@container alex (min-aspect-ratio: 9/10) and (min-width: 561px) and (max-height: 560px) {
 .alex-scene { --gap:clamp(10px,3cqb,20px); }
 .alex-long-title h2 { max-width:36ch; }
 .alex-subtitle { margin-top:6px; }
}
/* Landscape phone, often with the call dock: the diagrams stay horizontal and the type steps down. */
@container alex (min-aspect-ratio: 9/10) and (min-width: 561px) and (max-height: 400px) {
 .alex-scene { --t-title:clamp(17px, min(3.4cqi, 8.6cqb), 30px); --t-lead:clamp(13px, min(2.1cqi, 5.4cqb), 20px); --t-body:clamp(12px, min(1.7cqi, 4.4cqb), 15px); --t-small:12px; --t-fig:clamp(18px, min(3.4cqi, 8.6cqb), 34px); --gap:clamp(8px, 3cqb, 14px); --pad:clamp(8px, 2.6cqb, 14px); }
 .alex-scene h2, .alex-long-title h2 { max-width:44ch; text-wrap:pretty; }
 .alex-kicker { margin-bottom:4px; }
 .alex-kicker b::after { width:16px; }
 .alex-subtitle { display:none; }
 .alex-close .alex-subtitle { display:block; }
 .alex-layout-statement h2, .alex-layout-contact h2 { font-size:clamp(24px, 11cqb, 40px); max-width:24ch; }
 .alex-footnote { padding-top:4px; }
 .alex-card { gap:6px; }
 .alex-flow { --dot:24px; }
 .alex-flow-step { gap:6px; }
 .alex-flow[data-count="3"] .alex-flow-step { min-height:0; }
 .alex-tiers { --tier-gap:10px; }
 .alex-tier-item, .alex-tier-item:only-child { gap:6px; padding:8px 12px; }
 .alex-tier-item .alex-label { margin-top:2px; }
 .alex-tier-item[data-tone=muted] .alex-item-text { display:none; }
 .alex-tier-chip { padding:2px 8px; font-size:12px; }
 .alex-converge-input { padding:6px 12px; }
 .alex-converge-link { margin:12px 0; }
 .alex-panel-item { padding:4px 0; }
 .alex-panel-item .alex-item-text { display:none; }
 .alex-group-title { margin-bottom:6px; }
 .alex-split-bar { height:28px; }
 .alex-blocks { --side-max:clamp(48px, 34cqb, 110px); }
 .alex-block-copy { margin-top:6px; padding-top:6px; }
 .alex-bars { gap:6px; }
 .alex-bar-fill { height:18px; }
 .alex-ring { --size:clamp(96px, 52cqb, 160px); }
 .alex-ring-key { padding:3px 0; }
 .alex-ring-side { gap:8px; }
 .alex-layer { padding:5px 12px; }
 .alex-layers { gap:8px; }
 .alex-layers-result { padding:6px 12px; }
 .alex-sum-chart { --bar-h:28px; margin-bottom:calc(var(--t-fig) * .5 + 8px); }
 .alex-sum-key .alex-item-text { display:none; }
 .alex-rise { --col-h:clamp(48px, 30cqb, 110px); }
 .alex-rise-side { padding:8px 12px; }
 .alex-metrics .alex-item { padding-top:6px; }
 .alex-metrics h3 { margin-top:4px; }
 .alex-metric-group + .alex-metric-group { padding:8px 12px; }
}

/* Entry and greeting: one centred column, Alex's portrait over his name, then the start controls and the call line. */
.alex-mode:not([data-demo-focus=stage]) .demo-presence { display:grid; grid-template-columns:minmax(0,592px); grid-template-areas:"tag" "orb" "title" "role" "start" "meta" "hint" "error"; align-content:safe center; justify-content:center; justify-items:center; width:100%; padding:24px 24px 48px; box-sizing:border-box; overflow-y:auto; text-align:center; }
.alex-mode:not([data-demo-focus=stage]) .demo-orb-wrap { grid-area:orb; width:280px; height:280px; margin:0 0 clamp(16px,3vh,28px); }
.alex-mode:not([data-demo-focus=stage]) .demo-orb { width:224px; height:224px; }
.alex-mode .demo-orb:has(.demo-avatar) { background:none; }
.alex-mode .demo-orb:has(.demo-avatar) svg { display:none; }
.alex-mode .demo-avatar { position:relative; width:100%; height:100%; border-radius:inherit; object-fit:cover; }
.alex-mode:not([data-demo-focus=stage]) .demo-idle-title { display:block; }
.alex-mode .demo-idle-title { grid-area:title; margin:0; font-size:clamp(36px, 4.4vw, 52px); font-weight:700; letter-spacing:-.04em; }
.alex-mode .demo-role { grid-area:role; margin:12px 0 clamp(28px,5vh,40px); color:var(--alex-green); font-size:17px; font-weight:500; line-height:1.4; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-role { display:none; }
.alex-mode:not([data-call-active=true]) .demo-buttons { grid-area:start; width:100%; margin:0; }
.alex-mode:not([data-call-active=true]) .demo-app #start svg, .alex-mode .demo-deck svg { display:none; }
.alex-mode:not([data-call-active=true]) .demo-app #start { flex:1 1 0; min-width:0; justify-content:center; padding:15px 24px; border-radius:12px; font-size:16px; box-shadow:0 10px 30px rgba(74,222,128,.16); }
.alex-mode .demo-deck { display:none; }
.alex-mode:not([data-call-active=true]) .demo-deck:not([hidden]) { flex:1 1 0; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; box-sizing:border-box; padding:15px 24px; border:1px solid var(--alex-line-strong); border-radius:12px; background:var(--alex-surface); color:var(--alex-ink); font-size:16px; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; transition:background .2s, border-color .2s; }
.alex-mode .demo-deck:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.36); }
.alex-mode .demo-deck:focus-visible { outline:2px solid var(--alex-green); outline-offset:3px; }
.alex-mode .demo-deck svg { width:20px; height:20px; flex:none; }
.alex-mode:not([data-call-active=true]) .demo-lang-pick { grid-area:meta; justify-self:center; margin-top:18px; }
.alex-mode:not([data-call-active=true]) .demo-voice-info { grid-area:meta; justify-self:end; align-self:center; margin-top:14px; }
.alex-mode:not([data-call-active=true]):not(:has(#start:disabled)) .demo-voice-info { display:none; }
.alex-mode:not([data-call-active=true]) #demoHint { grid-area:hint; margin-top:14px; }
.alex-mode .demo-pitch-tag { display:none; }
.alex-mode:not([data-call-active=true]) .demo-pitch-tag:not([hidden]) { display:block; grid-area:tag; margin:0 0 clamp(18px,3.4vh,32px); color:var(--alex-ink); font-size:clamp(22px,2.1vw,28px); font-weight:600; letter-spacing:-.02em; line-height:1.25; }
.alex-mode .demo-pitch-tag span { white-space:nowrap; }
.alex-mode #demoHint:empty { display:none; }
.alex-mode:not([data-demo-focus=stage]) .demo-error { grid-area:error; max-width:none; }
.alex-mode[data-demo-preview=true] .demo-presence { display:none; }
.alex-mode[data-call-active=true]:not([data-demo-focus=stage]) .demo-voice-info { grid-area:start; justify-self:start; align-self:center; }
.alex-mode[data-call-active=true]:not([data-demo-focus=stage]) .demo-buttons { grid-area:start; justify-self:end; min-height:52px; margin:0; }
.alex-mode[data-call-active=true]:not([data-demo-focus=stage]) .demo-presence::after { content:""; grid-area:meta; height:50px; }

/* Call controls: the orb shows who is speaking; the line under it carries only status and time. */
.alex-mode .demo-state { gap:10px; font-size:13px; white-space:nowrap; }
.alex-mode .demo-state #statusText { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.alex-mode .demo-state .dot { flex:none; margin-left:4px; }
.alex-mode[data-call-active=true] .demo-buttons { gap:10px; }
.alex-mode[data-call-active=true] .demo-app .demo-buttons button { position:relative; display:block; flex:none; width:44px; height:44px; min-height:0; padding:0; border-radius:50%; font-size:0; line-height:0; }
.alex-mode[data-call-active=true] .demo-buttons button::before { content:""; position:absolute; inset:0; width:20px; height:20px; margin:auto; background:currentColor; -webkit-mask:var(--icon) center / contain no-repeat; mask:var(--icon) center / contain no-repeat; }
.alex-mode[data-call-active=true] #demoMute { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -.5 24 24'%3E%3Cpath d='M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z'/%3E%3C/svg%3E"); border-color:var(--alex-line-strong); background:rgba(255,255,255,.06); color:var(--alex-ink); }
.alex-mode[data-call-active=true] #demoMute[aria-pressed=true] { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -.5 24 24'%3E%3Cpath d='M19 11h-1.7c0 .74-.16 1.43-.43 2.05l1.23 1.23c.56-.98.9-2.09.9-3.28zm-4.02.17c0-.06.02-.11.02-.17V5c0-1.66-1.34-3-3-3S9 3.34 9 5v.18l5.98 5.99zM4.27 3L3 4.27l6.01 6.01V11c0 1.66 1.33 3 2.99 3 .22 0 .44-.03.65-.08l1.66 1.66c-.71.33-1.5.52-2.31.52-2.76 0-5.3-2.1-5.3-5.1H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c.91-.13 1.77-.45 2.54-.9L19.73 21 21 19.73 4.27 3z'/%3E%3C/svg%3E"); border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.14); color:#FCA5A5; }
.alex-mode[data-call-active=true] #stop { --icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -.6 24 24'%3E%3Cpath d='M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9z'/%3E%3C/svg%3E"); border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.16); color:#FCA5A5; }
.alex-mode[data-call-active=true] #demoMute:hover:not(:disabled) { border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.12); }
.alex-mode[data-call-active=true] #demoMute[aria-pressed=true]:hover:not(:disabled) { border-color:rgba(239,68,68,.6); background:rgba(239,68,68,.24); }
.alex-mode[data-call-active=true] #stop:hover:not(:disabled) { border-color:#EF4444; background:#EF4444; color:#fff; }

/* Slides: Alex moves into a card under the slide, so the slide keeps the height. */
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb-wrap { position:static; width:48px; height:48px; margin:0; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb { width:40px; height:40px; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb svg { width:20px; height:20px; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb::before { inset:-4px; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb::after { inset:calc(-4px - var(--voice) * 4px); }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb { box-shadow:0 0 calc(8px + var(--voice) * 18px) rgba(74,222,128, calc(.25 + var(--voice) * .5)); }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-presence { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; margin:0 clamp(12px,3vw,32px) clamp(10px,2vh,20px); padding:10px 10px 10px 14px; flex:0 0 auto; box-sizing:border-box; border:1px solid var(--alex-line); border-radius:16px; background:rgba(30,41,59,.55); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-voice-info { flex:1 1 auto; min-width:0; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-buttons { flex:none; margin-left:auto; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-error { left:0; max-width:min(520px, 100%); box-sizing:border-box; }
.alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-dock-name { font-size:15px; }

/* After a finished meeting the dock stays under the final screen: why it ended, and a new meeting. */
.alex-mode[data-alex-ended=true][data-demo-focus=stage] .demo-presence { order:2; position:relative; text-align:left; }
.alex-mode[data-alex-ended=true] .demo-pitch-tag:not([hidden]), .alex-mode[data-alex-ended=true] .demo-deck:not([hidden]), .alex-mode[data-alex-ended=true][data-demo-focus=stage] .demo-idle-title { display:none; }
.alex-mode[data-alex-ended=true][data-demo-focus=stage] #demoHint { flex:1 1 auto; min-width:0; margin:0; color:var(--alex-body); font-size:14px; line-height:1.35; }
.alex-mode[data-alex-ended=true][data-demo-focus=stage] .demo-buttons { order:1; width:auto; }
.alex-mode[data-alex-ended=true][data-demo-focus=stage] .demo-app #start { flex:none; width:auto; padding:10px 18px; border:1px solid var(--alex-line-strong); border-radius:999px; background:rgba(255,255,255,.05); color:var(--alex-ink); font-size:14px; box-shadow:none; }
.alex-mode[data-alex-ended=true][data-demo-focus=stage] .demo-app #start:hover:not(:disabled) { background:rgba(255,255,255,.1); }
@media(max-width:640px) {
 .alex-mode .demo-header { flex-basis:56px; gap:6px; padding:0 16px; }
 .alex-mode .demo-logo { height:24px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-presence { grid-template-areas:"tag" "orb" "title" "role" "start" "state" "hint" "error"; padding:16px 20px 32px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-orb-wrap { width:200px; height:200px; margin-bottom:14px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-orb { width:160px; height:160px; }
 .alex-mode .demo-role { font-size:min(15px,4.1vw); }
 .alex-mode:not([data-call-active=true]) .demo-pitch-tag:not([hidden]) { margin-bottom:14px; font-size:min(20px,5.6vw); }
 .alex-mode:not([data-call-active=true]) .demo-buttons { width:100%; flex-direction:column; align-items:stretch; gap:10px; }
 .alex-mode:not([data-call-active=true]) .demo-app #start, .alex-mode:not([data-call-active=true]) .demo-deck:not([hidden]) { flex:none; width:100%; }
 .alex-mode:not([data-call-active=true]) .demo-lang-pick { justify-self:center; }
 .alex-mode:not([data-call-active=true]) .demo-voice-info { grid-area:state; justify-self:center; }
 .alex-mode[data-call-active=true]:not([data-demo-focus=stage]) .demo-voice-info { justify-self:start; }
 .alex-mode[data-call-active=true]:not([data-demo-focus=stage]) .demo-presence::after { height:86px; }
 .alex-mode .demo-header-actions { gap:6px; }
 .alex-mode .demo-deck-header:not([hidden]) { width:32px; min-height:32px; padding:0; }
 .alex-mode .demo-deck-header span { display:none; }
 .alex-mode .alex-founder { gap:6px; min-height:32px; padding:6px 11px 6px 9px; font-size:12px; }
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-content,
 .alex-mode[data-demo-preview=true][data-demo-focus=stage] .demo-content { padding:12px 16px 14px; }
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-presence { margin:0 10px 10px; padding:8px 8px 8px 12px; gap:10px; }
 .alex-mode[data-call-active=true] .demo-buttons { gap:8px; }
 .alex-mode .demo-idle-title { font-size:34px; }
}
@media(max-width:420px) {
 .alex-mode .demo-header { padding:0 12px; }
 .alex-mode .demo-logo { height:22px; }
 .alex-mode .alex-lang-code { display:none; }
 .alex-mode .demo-app button.alex-lang-trigger { padding:5px 7px 5px 6px; }
 .alex-mode[data-demo-focus=stage]:has(#demoMute[aria-pressed=true]) .demo-state .timer { display:none; }
}
@media(max-width:380px) {
 .alex-mode .alex-founder svg { display:none; }
 .alex-mode .alex-founder { padding:6px 11px; }
}
@media(max-width:340px) {
 .alex-mode .demo-logo { height:18px; }
 .alex-mode .alex-founder { padding:6px 9px; }
}
@media(max-height:480px) and (min-width:560px) {
 .alex-mode .demo-header { flex-basis:44px; }
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-content,
 .alex-mode[data-demo-preview=true][data-demo-focus=stage] .demo-content { padding:8px clamp(16px,4vw,40px); }
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-presence { flex-basis:auto; padding:5px 5px 5px 14px; }
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb-wrap { width:36px; height:36px; }
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb { width:30px; height:30px; }
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-orb svg { width:15px; height:15px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-presence { padding:12px 24px 16px; }
}
@media(max-height:650px) {
 .alex-mode:not([data-demo-focus=stage]) .demo-orb-wrap { width:144px; height:144px; margin-bottom:12px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-orb { width:116px; height:116px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-orb svg { width:38px; height:38px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-orb::before { inset:-6px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-orb::after { inset:calc(-14px - var(--voice) * 12px); }
}
.alex-mode:not([data-call-active=true]):not([data-demo-focus=stage]) .demo-presence { padding-bottom:24px; }
@media(max-width:640px) { .alex-mode:not([data-call-active=true]):not([data-demo-focus=stage]) .demo-presence { padding-bottom:16px; } }
@media(max-height:480px) and (min-width:560px) { .alex-mode:not([data-call-active=true]):not([data-demo-focus=stage]) .demo-presence { padding-bottom:16px; } }
@media(min-width:641px) and (max-height:760px) and (min-height:651px) {
 .alex-mode:not([data-demo-focus=stage]) .demo-orb-wrap { width:240px; height:240px; }
 .alex-mode:not([data-demo-focus=stage]) .demo-orb { width:192px; height:192px; }
}
@media(max-width:640px) and (max-height:700px) {
 .alex-mode:is([data-call-active=true],[data-alex-ended=true])[data-demo-focus=stage] .demo-content,
 .alex-mode[data-demo-preview=true][data-demo-focus=stage] .demo-content { padding:10px 16px 12px; }
}

/* Deck: during the meeting a thermometer of presented slides runs beside the slide (desktop) or sits behind the Slides
   pill (phones), neither navigates. After the close the same thumbnails grow into a gallery of the whole deck. */
.alex-mode .demo-preview summary { display:inline-flex; align-items:center; gap:7px; width:auto; min-height:36px; box-sizing:border-box; padding:8px 14px 8px 12px; border:1px solid var(--alex-line); border-radius:999px; opacity:1; color:var(--alex-body); font-size:13px; font-weight:500; line-height:1.2; white-space:nowrap; }
.alex-mode .demo-preview summary:hover, .alex-mode .demo-preview summary:focus-visible, .alex-mode .demo-preview[open] summary { color:var(--alex-ink); background:rgba(255,255,255,.06); border-color:var(--alex-line-strong); }
.alex-mode .demo-preview summary svg { width:15px; height:15px; flex:none; }
.alex-mode[data-alex-deck=grid] .demo-preview, .alex-mode[data-alex-deck=slide] .demo-preview, .alex-mode:not([data-alex-slides=true]) .demo-preview { display:none; }
.alex-mode .demo-preview-menu.alex-nav { display:block; top:48px; width:min(760px, calc(100vw - 32px)); max-height:min(760px, calc(100dvh - 88px)); padding:16px 16px 18px; box-sizing:border-box; border-radius:18px; border-color:var(--alex-line-strong); background:rgba(11,17,32,.96); overscroll-behavior:contain; }
.alex-nav-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 2px 14px; }
.alex-nav-title { margin:0; color:var(--alex-ink); font-size:15px; font-weight:600; letter-spacing:-.01em; }
.alex-nav-count { margin:0; color:var(--alex-muted); font-size:13px; font-variant-numeric:tabular-nums; }
.alex-nav-empty { margin:0 2px 4px; color:var(--alex-muted); font-size:13px; line-height:1.4; }
.alex-nav-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr)); gap:16px 12px; margin:0; padding:0; list-style:none; }
.alex-nav-card { display:flex; flex-direction:column; gap:8px; min-width:0; color:var(--alex-body); font-size:13px; font-weight:500; line-height:1.25; }
.alex-nav-thumb { position:relative; display:block; aspect-ratio:16 / 9; overflow:hidden; border:1px solid var(--alex-line); border-radius:10px; background:var(--night) radial-gradient(ellipse 80% 70% at 12% 0%, #12332C, transparent 62%); transition:border-color .2s, box-shadow .2s; }
.alex-nav-frame { position:absolute; top:0; left:0; display:flex; flex-direction:column; justify-content:center; width:960px; height:540px; box-sizing:border-box; padding:36px 48px; transform:scale(var(--alex-thumb-scale, .12)); transform-origin:0 0; container:alex / size; pointer-events:none; }
.alex-nav-frame * { animation:none !important; transition:none !important; }
.alex-nav-card[data-live=true] .alex-nav-thumb { border-color:var(--alex-green); box-shadow:0 0 0 1px var(--alex-green); }
.alex-nav-live { position:absolute; top:6px; right:6px; display:none; align-items:center; gap:5px; padding:3px 8px 3px 7px; border-radius:999px; background:var(--alex-green); color:var(--night); font-size:11px; font-weight:700; line-height:1.2; }
.alex-nav-live::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.alex-nav-card[data-live=true] .alex-nav-live { display:inline-flex; }
.alex-nav-caption, .alex-deck-caption { display:flex; align-items:baseline; gap:8px; min-width:0; padding:0 2px; }
.alex-nav-number, .alex-deck-number { flex:none; color:var(--alex-green); font-weight:600; font-variant-numeric:tabular-nums; }
.alex-nav-topic, .alex-deck-topic { min-width:0; overflow:hidden; color:var(--alex-ink); text-overflow:ellipsis; white-space:nowrap; }

.alex-deck { display:none; }
.alex-deck .alex-nav-thumb { transform-origin:0 0; }
.alex-deck-grid { margin:0; padding:0; list-style:none; }
.alex-deck-item { min-width:0; }
.alex-mode .demo-app button.alex-deck-card { display:flex; flex-direction:column; gap:8px; width:100%; min-height:0; padding:0; border:0; border-radius:10px; background:none; box-shadow:none; color:var(--alex-body); font-size:13px; font-weight:500; line-height:20px; text-align:left; }
.alex-mode .demo-app button.alex-deck-card:hover:not(:disabled) { background:none; }

/* Thermometer: every slide keeps a slot on one tube, so the part still to come stays visible. */
@media (min-width:900px) and (min-height:560px) {
 .alex-mode[data-alex-deck=rail] .demo-preview { display:none; }
 .alex-mode[data-alex-deck=rail][data-demo-focus=stage] .demo-layout { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto; }
 .alex-mode[data-alex-deck=rail][data-demo-focus=stage] .alex-deck { display:flex; flex-direction:column; grid-column:1; grid-row:1 / 3; min-height:0; padding:clamp(12px,3vh,32px) 0 clamp(10px,2vh,20px) clamp(16px,2.4vw,36px); }
 .alex-mode[data-alex-deck=rail][data-demo-focus=stage] .demo-content { grid-column:2; grid-row:1; }
 .alex-mode[data-alex-deck=rail][data-demo-focus=stage] .alex-deckbar { grid-column:2; grid-row:2; }
 .alex-mode[data-alex-deck=rail][data-demo-focus=stage] .demo-presence { grid-column:1 / -1; grid-row:3; }
}
.alex-mode[data-alex-deck=rail] .alex-deck-head, .alex-mode[data-alex-deck=rail] .alex-deck-topic { display:none; }
.alex-mode[data-alex-deck=rail] .alex-deck-grid { flex:1 1 0; min-height:0; display:grid; grid-template-rows:var(--alex-rail-rows, repeat(var(--alex-deck-count, 19), minmax(0, 1fr))); }
.alex-mode[data-alex-deck=rail] .alex-deck-item { position:relative; display:flex; align-items:center; min-height:0; padding-left:14px; }
.alex-mode[data-alex-deck=rail] .alex-deck-item::before { content:""; position:absolute; top:0; bottom:0; left:0; width:3px; background:rgba(255,255,255,.08); transition:background .4s, box-shadow .4s; }
.alex-mode[data-alex-deck=rail] .alex-deck-item:first-child::before { top:4px; border-radius:3px 3px 0 0; }
.alex-mode[data-alex-deck=rail] .alex-deck-item:last-child::before { bottom:4px; border-radius:0 0 3px 3px; }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-seen=true]::before { background:rgba(74,222,128,.42); }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-live=true]::before { background:var(--alex-green); box-shadow:0 0 12px rgba(74,222,128,.55); }
.alex-mode[data-alex-deck=rail] .demo-app button.alex-deck-card { flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:10px; height:100%; cursor:default; }
.alex-mode[data-alex-deck=rail] .alex-deck .alex-nav-thumb { flex:none; width:var(--alex-deck-thumb, 56px); border-radius:6px; transition:width .45s ease, border-color .2s, box-shadow .2s; }
.alex-mode[data-alex-deck=rail] .alex-deck .alex-nav-frame { transition:transform .45s ease; }
.alex-mode[data-alex-deck=rail] .alex-deck-item:not([data-seen=true]) .alex-nav-thumb { visibility:hidden; }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-seen=true] .alex-nav-thumb { animation:alex-fade .5s ease-out both; }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-live=true] .alex-nav-thumb { border-color:var(--alex-green); box-shadow:0 0 0 1px var(--alex-green); }
.alex-mode[data-alex-deck=rail] .alex-deck-caption { padding:0; }
.alex-mode[data-alex-deck=rail] .alex-deck-number { width:2.2ch; color:rgba(140,153,171,.45); font-size:11px; line-height:1; transition:color .3s; }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-seen=true] .alex-deck-number { color:var(--alex-muted); }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-live=true] .alex-deck-number { color:var(--alex-green); }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-seen=true]:has(.alex-problem)::before { background:rgba(248,113,113,.42); }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-live=true]:has(.alex-problem)::before { background:var(--alex-risk); box-shadow:0 0 12px rgba(248,113,113,.55); }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-live=true]:has(.alex-problem) .alex-nav-thumb { border-color:var(--alex-risk); box-shadow:0 0 0 1px var(--alex-risk); }
.alex-mode[data-alex-deck=rail] .alex-deck-item[data-live=true]:has(.alex-problem) .alex-deck-number { color:var(--alex-risk); }

/* Gallery: the whole deck on one screen, as large as it fits; a click opens a slide full screen. */
.alex-mode[data-alex-deck=grid] .demo-app .demo-content { display:none; }
.alex-mode[data-alex-deck=grid] .alex-deck { --alex-deck-gap:16px; display:flex; flex-direction:column; flex:1; min-height:0; gap:clamp(12px,2.2vh,22px); padding:clamp(14px,2.6vh,28px) clamp(16px,2.4vw,40px) clamp(10px,1.8vh,16px); }
.alex-deck-head { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; }
.alex-deck-title { margin:0; color:var(--alex-ink); font-size:clamp(20px,1.8vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.15; }
.alex-deck-hint { margin:6px 0 0; color:var(--alex-muted); font-size:14px; line-height:1.4; }
.alex-deck-ended { display:flex; align-items:baseline; gap:8px; margin:8px 0 0; color:var(--alex-body); font-size:14px; line-height:1.4; }
.alex-deck-ended::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--alex-muted); transform:translateY(-1px); }
.alex-mode .demo-app button.alex-deck-close { display:inline-flex; align-items:center; gap:7px; flex:none; min-height:36px; padding:8px 14px 8px 11px; border:1px solid var(--alex-line-strong); border-radius:999px; background:rgba(255,255,255,.04); color:var(--alex-body); font-size:13px; font-weight:500; }
.alex-mode .demo-app button.alex-deck-close:hover:not(:disabled) { background:rgba(255,255,255,.08); color:var(--alex-ink); }
.alex-deck-close svg { width:15px; height:15px; }
.alex-mode[data-alex-deck=grid] .alex-deck-grid { flex:1 1 0; min-height:0; display:grid; grid-template-columns:repeat(var(--alex-deck-columns, 5), var(--alex-deck-thumb, 200px)); justify-content:center; align-content:safe center; gap:var(--alex-deck-gap); }
.alex-mode[data-alex-deck=grid] .alex-deck:not([data-scroll=true]) .alex-deck-head { align-self:center; width:min(100%, calc(var(--alex-deck-columns, 5) * var(--alex-deck-thumb, 200px) + (var(--alex-deck-columns, 5) - 1) * var(--alex-deck-gap))); }
.alex-mode[data-alex-deck=grid] .alex-deck[data-scroll=true] .alex-deck-grid { overflow-y:auto; align-content:start; overscroll-behavior:contain; }
.alex-mode[data-alex-deck=grid] .alex-deck-card:hover .alex-nav-thumb { border-color:rgba(74,222,128,.6); box-shadow:0 10px 28px rgba(0,0,0,.35); }
.alex-mode[data-alex-deck=grid] .alex-deck-card:hover .alex-deck-topic { color:var(--alex-green-ink); }

/* Under the slide: the way back to the gallery, and the finale's two actions. */
.alex-deckbar { order:1; display:flex; flex:none; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 12px; margin:0 clamp(12px,3vw,32px) clamp(8px,1.6vh,14px); }
.alex-viewbar { display:flex; align-items:center; gap:4px; max-width:100%; box-sizing:border-box; padding:5px 5px 5px 6px; border:1px solid var(--alex-line); border-radius:999px; background:rgba(30,41,59,.72); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.alex-viewbar-label { margin:0 4px; color:var(--alex-muted); font-size:13px; line-height:1.2; white-space:nowrap; font-variant-numeric:tabular-nums; }
.alex-viewbar-number { color:var(--alex-ink); font-weight:600; }
.alex-mode .demo-app button.alex-viewbar-step { display:grid; place-items:center; width:34px; height:34px; min-height:0; padding:0; border:0; border-radius:50%; background:none; color:var(--alex-body); }
.alex-mode .demo-app button.alex-viewbar-step:hover:not(:disabled) { background:rgba(255,255,255,.08); color:var(--alex-ink); }
.alex-viewbar-step svg { width:18px; height:18px; }
.alex-mode .demo-app button.alex-viewbar-back { display:inline-flex; align-items:center; gap:7px; min-height:34px; margin-left:6px; padding:7px 14px 7px 12px; border:1px solid transparent; border-radius:999px; background:var(--alex-green); color:var(--night); font-size:13px; font-weight:600; white-space:nowrap; }
.alex-mode .demo-app button.alex-viewbar-back:hover:not(:disabled) { background:var(--alex-green-ink); }
.alex-viewbar-back svg { width:15px; height:15px; }
.alex-finale { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; }
.alex-mode .demo-app button.alex-reveal, .alex-finale a { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; box-sizing:border-box; padding:10px 20px 10px 17px; border:1px solid var(--alex-line-strong); border-radius:999px; background:rgba(255,255,255,.05); color:var(--alex-ink); font-size:14px; font-weight:600; line-height:1.2; text-decoration:none; white-space:nowrap; transition:background .2s, border-color .2s, box-shadow .2s; }
.alex-mode .demo-app button.alex-reveal:hover:not(:disabled), .alex-finale a:hover { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.36); }
.alex-finale a:focus-visible { outline:2px solid var(--alex-green); outline-offset:3px; }
.alex-finale .alex-finale-book { border-color:transparent; background:var(--alex-green); color:var(--night); box-shadow:0 10px 30px rgba(74,222,128,.2); }
.alex-finale .alex-finale-book:hover { border-color:transparent; background:var(--alex-green-ink); box-shadow:0 10px 36px rgba(74,222,128,.34); }
.alex-reveal svg, .alex-finale svg { width:17px; height:17px; flex:none; }

/* Meeting language: a pill in the header shows the chosen flag; the menu lists every language. Pre-call only, like the start controls. */
.alex-lang { position:relative; flex:none; }
.alex-mode[data-call-active=true] .alex-lang { display:none; }
.alex-lang .alex-flag { display:block; flex:none; width:20px; height:20px; border-radius:50%; background:var(--alex-flag) var(--alex-flag-at, 50%) 50% / cover no-repeat; box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.alex-mode .demo-app button.alex-lang-trigger { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:7px 10px 7px 8px; border:1px solid var(--alex-line); border-radius:999px; background:none; color:var(--alex-body); font-size:13px; font-weight:600; letter-spacing:.03em; line-height:1.2; }
.alex-mode .demo-app button.alex-lang-trigger:hover:not(:disabled), .alex-mode .demo-app button.alex-lang-trigger[aria-expanded=true] { color:var(--alex-ink); background:rgba(255,255,255,.06); border-color:var(--alex-line-strong); }
.alex-lang-trigger::after { content:""; flex:none; width:5px; height:5px; margin:0 2px 3px 1px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; opacity:.75; transform:rotate(45deg); transition:transform .2s; }
.alex-lang-trigger[aria-expanded=true]::after { transform:translateY(3px) rotate(225deg); }
.alex-lang-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:30; width:216px; max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain; padding:8px; box-sizing:border-box; border:1px solid var(--alex-line-strong); border-radius:14px; background:rgba(11,17,32,.97); box-shadow:0 24px 70px rgba(0,0,0,.55); }
.alex-lang-menu[hidden] { display:none; }
.alex-lang-title { margin:6px 10px 8px; color:var(--alex-muted); font-size:12px; font-weight:500; line-height:1.3; }
.alex-lang-list { display:flex; flex-direction:column; gap:2px; }
.alex-mode .demo-app button.alex-lang-item { display:flex; align-items:center; gap:12px; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:9px; background:none; color:var(--alex-body); font-size:14px; font-weight:500; text-align:left; }
.alex-mode .demo-app button.alex-lang-item:hover:not(:disabled), .alex-mode .demo-app button.alex-lang-item:focus-visible { background:rgba(255,255,255,.06); color:var(--alex-ink); outline:none; }
.alex-mode .demo-app button.alex-lang-item[aria-checked=true] { color:var(--alex-ink); font-weight:600; }
.alex-lang-item .alex-flag { width:22px; height:22px; }
.alex-lang-name { flex:1; }
.alex-lang-item::after { content:""; flex:none; width:9px; height:5px; margin:0 3px 3px 0; border-left:2px solid var(--alex-green); border-bottom:2px solid var(--alex-green); transform:rotate(-45deg); visibility:hidden; }
.alex-lang-item[aria-checked=true]::after { visibility:visible; }
.alex-flag[data-lang=en] { --alex-flag-at:0%; --alex-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1235 650'%3E%3Cdefs%3E%3Cpattern id='p' x='20.58' y='17.5' width='82.33' height='70' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='20.58' cy='17.5' r='11' fill='%23fff'/%3E%3Ccircle cx='61.75' cy='52.5' r='11' fill='%23fff'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M0 0h1235v650H0z' fill='%23B22234'/%3E%3Cpath d='M0 50h1235v50H0zM0 150h1235v50H0zM0 250h1235v50H0zM0 350h1235v50H0zM0 450h1235v50H0zM0 550h1235v50H0z' fill='%23fff'/%3E%3Cpath d='M0 0h494v350H0z' fill='%233C3B6E'/%3E%3Cpath d='M21 18h452v314H21z' fill='url(%23p)'/%3E%3C/svg%3E"); }
.alex-flag[data-lang=es] { --alex-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Cpath d='M0 0h3v2H0z' fill='%23AA151B'/%3E%3Cpath d='M0 .5h3v1H0z' fill='%23F1BF00'/%3E%3C/svg%3E"); }
.alex-flag[data-lang=de] { --alex-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 3'%3E%3Cpath d='M0 0h5v3H0z' fill='%23FFCE00'/%3E%3Cpath d='M0 0h5v2H0z' fill='%23DD0000'/%3E%3Cpath d='M0 0h5v1H0z'/%3E%3C/svg%3E"); }
.alex-flag[data-lang=ar] { --alex-flag-at:30%; --alex-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3Cpath d='M0 0h12v6H0z'/%3E%3Cpath d='M0 0h12v4H0z' fill='%23fff'/%3E%3Cpath d='M0 0h12v2H0z' fill='%2300732F'/%3E%3Cpath d='M0 0h3v6H0z' fill='%23FF0000'/%3E%3C/svg%3E"); }
.alex-flag[data-lang=zh] { --alex-flag-at:0%; --alex-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 30 20'%3E%3Cdefs%3E%3Cpath id='s' fill='%23FFDE00' d='M0,-1 .2245,-.309 .951,-.309 .363,.118 .588,.809 0,.382 -.588,.809 -.363,.118 -.951,-.309 -.2245,-.309z'/%3E%3C/defs%3E%3Cpath d='M-2-2h30v20H-2z' fill='%23EE1C25'/%3E%3Cuse href='%23s' transform='translate(5 5) scale(3)'/%3E%3Cuse href='%23s' transform='translate(10 2) rotate(23)'/%3E%3Cuse href='%23s' transform='translate(12 4) rotate(46)'/%3E%3Cuse href='%23s' transform='translate(12 7) rotate(70)'/%3E%3Cuse href='%23s' transform='translate(10 9) rotate(21)'/%3E%3C/svg%3E"); }
.alex-flag[data-lang=ru] { --alex-flag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9v6H0z' fill='%23fff'/%3E%3Cpath d='M0 2h9v4H0z' fill='%230039A6'/%3E%3Cpath d='M0 4h9v2H0z' fill='%23D52B1E'/%3E%3C/svg%3E"); }

@media(max-width:640px) {
 .alex-mode .demo-app button.alex-lang-trigger { gap:6px; min-height:32px; padding:5px 8px 5px 6px; font-size:12px; }
 .alex-mode .demo-preview summary { gap:6px; min-height:32px; padding:6px 11px 6px 9px; font-size:12px; }
 .alex-mode .demo-preview-menu.alex-nav { position:fixed; top:60px; right:12px; left:12px; width:auto; max-height:calc(100dvh - 72px); padding:14px 12px 16px; }
 .alex-nav-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 10px; }
 .alex-viewbar-total { display:none; }
 .alex-mode[data-alex-deck=grid] .alex-deck { gap:12px; padding:12px 16px 8px; }
 .alex-mode[data-alex-deck=grid] .alex-deck { --alex-deck-gap:12px; }
 .alex-deck-title { font-size:18px; }
 .alex-deck-hint { margin-top:4px; font-size:13px; }
 .alex-deckbar { gap:8px; margin:0 10px 8px; }
 .alex-mode .demo-app button.alex-reveal, .alex-finale a { min-height:38px; padding:8px 14px 8px 12px; font-size:13px; }
 .alex-finale { gap:8px; }
}
@media(max-width:420px) {
 .alex-mode[data-call-active=true] .alex-nav-summary-label { display:none; }
 .alex-mode[data-call-active=true] .demo-preview summary { padding:6px 9px; }
}
@media(max-height:480px) and (min-width:560px) {
 .alex-mode .demo-preview-menu.alex-nav { top:40px; max-height:calc(100dvh - 48px); }
}
.alex-mode .demo-lang-pick[hidden], .alex-deck-ended[hidden], .alex-nav-card[hidden], .alex-nav-empty[hidden], .alex-deck-close[hidden], .alex-deckbar[hidden], .alex-viewbar[hidden], .alex-reveal[hidden], .alex-finale[hidden] { display:none !important; }