/* The stage: the webinar and partner-session pages as an event, not a document
 * (12 Nov 2026 redesign, after the DTEC keynote's visual language).
 * Existing tokens only (CLAUDE.md): --bg, --orange, --lime, --text*, --rule.
 * Motion is transform and opacity only (no CLS). Nothing is hidden unless
 * stage.js armed it (.st-arm), so no-JS, crawlers and reduced motion get the
 * finished state. Logical properties throughout, so the Arabic twin mirrors. */

.stage { --st-line: rgba(255, 255, 255, .09); --st-panel: #0a0a0a; --st-soft: rgba(255, 107, 53, .14);
  --st-ease: cubic-bezier(.2, .8, .2, 1); position: relative; overflow-x: clip; }

/* ---------- rhythm and type ---------- */
.stage .section { padding-block: clamp(56px, 7vw, 96px); position: relative; }
.stage .sec-head { text-align: start; max-inline-size: 900px; margin-inline: 0; margin-block-end: clamp(24px, 3vw, 36px); }
.stage .sec-head .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.stage .sec-head .eyebrow::before { content: ""; inline-size: 28px; block-size: 2px; background: var(--orange); }
.stage .sec-head h2 { margin: 12px 0 0; font-size: clamp(28px, 3.5vw, 48px); font-weight: 900; line-height: 1.08;
  letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.stage .sec-head .sub { margin: 14px 0 0; max-inline-size: 62ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6;
  color: var(--text-muted); text-align: start; }
.stage .accent, .stage .st-o { color: var(--orange); }
.stage .wb-cap { margin: 26px 0 0; text-align: start; max-inline-size: 70ch; font-size: 17px; color: var(--text-muted); }
[dir="rtl"] .stage .sec-head h2, [dir="rtl"] .stage h1 { letter-spacing: 0; line-height: 1.4; font-weight: 700; }
[dir="rtl"] .stage .sec-head .eyebrow { letter-spacing: 0; text-transform: none; font-size: 14.5px; }

/* ---------- buttons ---------- */
.stage .btn-primary { min-block-size: 56px; padding-inline: 30px; font-size: 17px; font-weight: 800;
  box-shadow: 0 10px 40px -10px rgba(255, 107, 53, .65); transition: transform .25s var(--st-ease), box-shadow .25s; }
.stage .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(255, 107, 53, .8); }

/* ---------- hero ---------- */
.stage .hero { position: relative; padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 80px); overflow: hidden; isolation: isolate; }
.stage .hero::before { content: ""; position: absolute; z-index: -1; inset: -20% -10% auto auto; inline-size: 75vw; block-size: 75vw;
  max-inline-size: 1100px; max-block-size: 1100px;
  background: radial-gradient(closest-side, rgba(255, 107, 53, .30), rgba(255, 107, 53, .08) 55%, transparent 72%);
  animation: st-drift 14s ease-in-out infinite alternate; pointer-events: none; }
[dir="rtl"] .stage .hero::before { inset: -20% auto auto -10%; }
@keyframes st-drift { to { transform: translate3d(-6%, 8%, 0) scale(1.08); } }
.stage .hero-inner { text-align: start; max-inline-size: none; }
.stage .st-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; align-items: center; }
@media (min-width: 1040px) { .stage .st-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; align-items: start; } }
.stage .hero h1 { margin: 12px 0 0; font-size: clamp(34px, 3.9vw, 56px); font-weight: 900; line-height: .98;
  letter-spacing: -.045em; text-wrap: balance; }
.stage .hero .sub { margin: 16px 0 0; max-inline-size: 58ch; font-size: clamp(16.5px, 1.35vw, 19px); line-height: 1.55;
  color: var(--text-muted); text-align: start; }
.stage .hero .eyebrow { display: block; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; line-height: 1.6; text-transform: uppercase; color: var(--orange); }
.stage .hero .eyebrow::before { content: none; }
[dir="rtl"] .stage .hero .eyebrow { letter-spacing: 0; text-transform: none; font-size: 15px; }
.stage .wb-hook { margin: 12px 0 0; max-inline-size: 58ch; font-size: clamp(16px, 1.3vw, 18px); font-weight: 700;
  line-height: 1.45; color: var(--text); }
.stage .hero-cta { justify-content: flex-start; margin-block-start: 22px; }
.stage .wb-moved { margin-block-start: 8px; font-size: 14px; }
.stage .wb-under, .stage .wb-hostline, .stage .wb-time { font-size: 15.5px; }
.stage .wb-strip li { font-size: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .04);
  border-color: var(--st-line); }

/* The org board: 1 + 3 + 9 boxes that light up and count to 13. */
.st-board { position: relative; padding: 26px; border: 1px solid var(--st-line); border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .01)); }
.st-board-row { display: grid; gap: 10px; justify-content: center; }
.st-board-row + .st-board-row { margin-block-start: 22px; position: relative; }
.st-board-row + .st-board-row::before { content: ""; position: absolute; inset-block-start: -15px; inset-inline: 16%;
  block-size: 1px; background: var(--st-line); }
.st-r1 { grid-template-columns: minmax(0, 200px); }
.st-r2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-node { padding: 10px 12px; border: 1px solid var(--st-line); border-radius: 10px; background: #070707; min-inline-size: 0; }
.st-node b { display: block; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-node span { display: block; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-node i { display: inline-block; inline-size: 7px; block-size: 7px; border-radius: 50%; margin-inline-end: 6px;
  background: var(--orange); box-shadow: 0 0 10px var(--orange); vertical-align: middle; }
.st-r1 .st-node { border-color: rgba(255, 107, 53, .55); background: rgba(255, 107, 53, .08); }
.st-board-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-block-start: 22px; }
.st-big { font-size: clamp(46px, 5vw, 72px); font-weight: 900; line-height: .9; letter-spacing: -.04em; color: var(--orange);
  font-variant-numeric: tabular-nums; }
.st-board-foot p { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--text); }
.st-board-foot p span { color: var(--orange); }
.st-human { text-align: end; }
.st-human b { display: block; font-size: 40px; font-weight: 900; line-height: 1; color: var(--text); }
.st-board.st-arm .st-node { opacity: 0; visibility: hidden; transform: scale(.94); }
.st-board.st-arm .st-node i { opacity: 0; }
.st-board .st-node { transition: opacity .45s var(--st-ease), transform .45s var(--st-ease), visibility 0s;
  transition-delay: calc(var(--i, 0) * 110ms + 250ms); }
.st-board .st-node i { transition: opacity .3s; transition-delay: calc(var(--i, 0) * 110ms + 450ms); }
.st-board.st-arm.st-on .st-node { opacity: 1; visibility: visible; transform: none; }
.st-board.st-arm.st-on .st-node i { opacity: 1; }
.st-board.st-arm .st-human { opacity: 0; transform: translateY(8px); }
.st-board .st-human { transition: opacity .6s, transform .6s var(--st-ease); transition-delay: 1.9s; }
.st-board.st-arm.st-on .st-human { opacity: 1; transform: none; }

/* ---------- the orange statement band ---------- */
.st-statement { background: var(--orange); color: #000; padding-block: clamp(52px, 7vw, 96px); position: relative; overflow: hidden; }
.st-statement .wrap { position: relative; }
.st-statement q, .st-statement .st-q { display: block; quotes: "\201C" "\201D"; font-size: clamp(40px, 6.6vw, 96px);
  font-weight: 900; line-height: .92; letter-spacing: -.05em; color: #000; }
[dir="rtl"] .st-statement .st-q { letter-spacing: 0; line-height: 1.15; font-weight: 700; }
.st-statement p { margin: 18px 0 0; font-size: clamp(18px, 1.9vw, 26px); font-weight: 800; color: #000; max-inline-size: 30ch; }
.st-statement.st-arm .st-q { clip-path: inset(0 100% 0 0); }
[dir="rtl"] .st-statement.st-arm .st-q { clip-path: inset(0 0 0 100%); }
.st-statement .st-q { transition: clip-path 1.1s var(--st-ease); }
.st-statement.st-arm.st-on .st-q { clip-path: inset(0 0 0 0); }
.st-statement.st-arm p { opacity: 0; transform: translateY(14px); }
.st-statement p { transition: opacity .6s, transform .6s var(--st-ease); transition-delay: .9s; }
.st-statement.st-arm.st-on p { opacity: 1; transform: none; }

/* ---------- the gap (Anthropic) ---------- */
.st-gap { max-inline-size: 1100px; }
.st-gap-scope { margin: 0 0 22px; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.st-gbar + .st-gbar { margin-block-start: 22px; }
.st-gbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.st-gbar-top span { font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; color: var(--text); }
.st-gbar-top b { font-size: clamp(40px, 5vw, 72px); font-weight: 900; line-height: .9; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; color: var(--orange); }
.st-gbar.st-low .st-gbar-top b { color: var(--text); }
.st-track { position: relative; margin-block-start: 10px; block-size: 18px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.st-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 100%; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 107, 53, .75), var(--orange)); transform-origin: left center;
  transform: scaleX(var(--p)); transition: transform 1.5s var(--st-ease); }
[dir="rtl"] .st-fill { transform-origin: right center; background: linear-gradient(270deg, rgba(255, 107, 53, .75), var(--orange)); }
.st-low .st-fill { background: #fff; }
.st-gap.st-arm .st-fill { transform: scaleX(0); }
.st-gap.st-arm.st-on .st-fill { transform: scaleX(var(--p)); }
.st-gap.st-arm.st-on .st-low .st-fill { transition-delay: .7s; }
.st-hatch { position: absolute; inset-block: 0; inset-inline-start: var(--from); inline-size: var(--w);
  background: repeating-linear-gradient(135deg, rgba(255, 107, 53, .55) 0 6px, transparent 6px 13px);
  border-inline: 2px solid var(--orange); transition: opacity .6s; }
.st-gap.st-arm .st-hatch { opacity: 0; }
.st-gap.st-arm.st-on .st-hatch { opacity: 1; transition-delay: 2.1s; }
.st-gap-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 22px 0 0; }
.st-gap-note b { font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; color: var(--orange); }
.st-gap-note span { font-size: 18px; font-weight: 700; color: var(--text); }
.st-src { margin: 22px 0 0; font-size: 13.5px; color: var(--text-dim); }
.st-src a { color: var(--text-muted); text-decoration: underline; display: inline-block; min-block-size: 24px; padding-block: 3px; }

/* ---------- you are the glue ---------- */
.st-glue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
@media (min-width: 980px) { .st-glue { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.st-glue-copy h3 { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; color: var(--text); }
[dir="rtl"] .st-glue-copy h3 { letter-spacing: 0; line-height: 1.35; font-weight: 700; }
.st-glue-copy h3 + h3 { margin-block-start: 10px; }
.st-glue-copy p { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.st-glue-stage { position: relative; container-type: size; block-size: clamp(380px, 38vw, 470px);
  border: 1px solid var(--st-line); border-radius: 26px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255, 107, 53, .13), transparent 58%), #050505; }
/* Geometry, not text: physical left/top so the Arabic twin draws the same diagram. */
.st-chip, .st-core, .st-you { position: absolute; left: 50%; top: 50%; }
.st-chip { padding: 9px 14px; border: 1px solid var(--st-line); border-radius: 999px; background: #0e0e0e; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted);
  transform: translate(-50%, -50%) translate(calc(var(--ox) * 1cqw), calc(var(--oy) * 1cqh));
  transition: transform 1.25s var(--st-ease), border-color .6s, color .6s; }
.st-chip.st-ai { border-color: rgba(255, 107, 53, .45); color: var(--orange); }
.st-core { inline-size: min(42cqw, 280px); padding: 18px 16px; text-align: center; border: 1.5px solid var(--orange);
  border-radius: 18px; background: rgba(0, 0, 0, .85); box-shadow: 0 0 60px -10px rgba(255, 107, 53, .6);
  transform: translate(-50%, -50%); transition: opacity .7s, transform .9s var(--st-ease); }
.st-core small { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
[dir="rtl"] .st-core small { letter-spacing: 0; text-transform: none; font-size: 13px; }
.st-core b { display: block; margin-block-start: 6px; font-size: clamp(16px, 2.4cqw, 22px); font-weight: 900; color: var(--text); }
.st-core span { display: block; margin-block-start: 6px; font-size: 12.5px; color: var(--text-muted); }
.st-you { padding: 10px 16px; border-radius: 999px; background: #fff; color: #000; font-size: 14px; font-weight: 800; white-space: nowrap;
  transform: translate(-50%, -50%) translate(0, -41cqh); transition: transform 1.1s var(--st-ease), background .6s, color .6s; }
.st-orbit { position: absolute; left: 50%; top: 50%; inline-size: min(78cqw, 560px); aspect-ratio: 1.55;
  border: 1px dashed rgba(255, 107, 53, .35); border-radius: 50%; transform: translate(-50%, -50%); transition: opacity .8s; }
/* Armed: today. Tools scattered, you in the middle as the glue, wobbling. */
.st-glue.st-arm .st-chip { transform: translate(-50%, -50%) translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqh)) rotate(var(--r, 0deg)); }
.st-glue.st-arm .st-core { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.st-glue.st-arm .st-orbit { opacity: 0; }
.st-glue.st-arm .st-you { transform: translate(-50%, -50%); background: var(--orange); }
.st-glue.st-arm.st-on .st-you { animation: st-wobble .5s ease-in-out 3; }
@keyframes st-wobble { 25% { transform: translate(-50%, -50%) rotate(-4deg); } 75% { transform: translate(-50%, -50%) rotate(4deg); } }
.st-glue.st-arm.st-on.st-snap .st-chip { transform: translate(-50%, -50%) translate(calc(var(--ox) * 1cqw), calc(var(--oy) * 1cqh));
  transition-delay: calc(var(--i, 0) * 45ms); }
.st-glue.st-arm.st-on.st-snap .st-core { opacity: 1; transform: translate(-50%, -50%); transition-delay: .5s; }
.st-glue.st-arm.st-on.st-snap .st-orbit { opacity: 1; transition-delay: .8s; }
.st-glue.st-arm.st-on.st-snap .st-you { animation: none; transform: translate(-50%, -50%) translate(0, -41cqh); background: #fff; }
.st-glue-copy .st-then { transition: opacity .6s; }
/* Never dim text in a starting pose: axe (and a reader) sees it before it plays. */
.st-glue.st-arm .st-glue-copy .st-then { opacity: 0; visibility: hidden; }
.st-glue.st-arm.st-snap .st-glue-copy .st-then { opacity: 1; visibility: visible; transition: opacity .6s .9s, visibility 0s .9s; }
.st-glue.st-arm.st-snap .st-glue-copy .st-now { opacity: .45; }
.st-glue-copy .st-now { transition: opacity .6s; }
@media (max-width: 640px) { .st-chip { font-size: 11.5px; padding: 6px 9px; } .st-you { font-size: 12.5px; }
  .st-core { inline-size: 40cqw; padding: 10px 8px; } .st-core span, .st-core small { display: none; } .st-core b { font-size: 13px; margin: 0; } }

/* ---------- the five levels ---------- */
.st-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; min-block-size: 380px; }
.st-lv { position: relative; display: flex; flex-direction: column; justify-content: space-between; block-size: auto; min-block-size: var(--h);
  padding: 16px 14px; border: 1px solid var(--st-line); border-radius: 16px 16px 6px 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  transform-origin: bottom center; transition: transform .9s var(--st-ease), opacity .6s; transition-delay: calc(var(--i) * 140ms); }
.st-lv-cmd small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
[dir="rtl"] .st-lv-cmd small { letter-spacing: 0; text-transform: none; font-size: 12.5px; }
.st-lv-cmd q { display: block; margin-block-start: 6px; font-size: clamp(14.5px, 1.3vw, 17px); font-weight: 800; line-height: 1.25; color: var(--text); quotes: "\201C" "\201D"; }
.st-lines { display: grid; gap: 6px; margin-block-start: 10px; }
.st-lines span { display: block; block-size: 7px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.st-lines span:nth-child(2n) { inline-size: 82%; }
.st-lines em { font-style: normal; font-size: 12.5px; color: var(--text-dim); }
.st-lv-out { display: block; margin-block-start: 10px; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text-muted); }
.st-lv.st-top .st-lv-out { color: rgba(0, 0, 0, .78); }
.st-lv-name b { display: block; font-size: 22px; font-weight: 900; color: var(--text); }
.st-lv-name span { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-muted); line-height: 1.35; }
.st-lv.st-top { background: var(--orange); border-color: var(--orange); }
.st-lv.st-top .st-lv-cmd small, .st-lv.st-top .st-lv-name span { color: rgba(0, 0, 0, .7); }
.st-lv.st-top .st-lv-cmd q, .st-lv.st-top .st-lv-name b { color: #000; }
.st-lv.st-top .st-lv-cmd q { font-size: clamp(18px, 1.8vw, 23px); }
.st-levels.st-arm .st-lv { transform: scaleY(.06); opacity: .3; }
.st-levels.st-arm .st-lv > * { opacity: 0; transition: opacity .4s; transition-delay: calc(var(--i) * 140ms + .8s); }
.st-levels.st-arm.st-on .st-lv { transform: none; opacity: 1; }
.st-levels.st-arm.st-on .st-lv > * { opacity: 1; }
.st-levels-line { margin: 24px 0 0; font-size: clamp(20px, 2.3vw, 30px); font-weight: 900; line-height: 1.12; letter-spacing: -.025em; color: var(--text); }
[dir="rtl"] .st-levels-line { letter-spacing: 0; line-height: 1.4; font-weight: 700; }
.st-levels-line span { color: var(--orange); }
@media (max-width: 860px) {
  .st-ladder { display: block; block-size: auto; }
  .st-lv { block-size: auto; min-block-size: 0; inline-size: var(--wd); flex-direction: row; align-items: center; gap: 14px;
    border-radius: 6px 16px 16px 6px; transform-origin: left center; }
  [dir="rtl"] .st-lv { border-radius: 16px 6px 6px 16px; transform-origin: right center; }
  .st-lv + .st-lv { margin-block-start: 10px; }
  .st-lv-name { order: -1; flex: none; inline-size: 84px; }
  .st-lv-name b { font-size: 20px; }
  .st-lv-cmd { flex: 1; min-inline-size: 0; }
  .st-levels.st-arm .st-lv { transform: scaleX(.08); }
}

/* ---------- the slash and the nine boxes ---------- */
.st-slash-q-text { font-size: inherit; font-weight: 900; line-height: 1.08;
  letter-spacing: -.035em; color: var(--text-muted); }
[dir="rtl"] .st-slash-q-text { letter-spacing: 0; line-height: 1.5; font-weight: 700; }
.st-slash-h { position: relative; margin: 0; font-size: clamp(26px, 4.2vw, 56px); }
/* Two set lines and a box that is exactly the text, so the X crosses the words corner to corner. */
.st-slash-q { position: relative; display: inline-block; white-space: nowrap; }
.st-x { position: absolute; inset: -16% -4%; inline-size: 108%; block-size: 132%; overflow: visible; pointer-events: none; }
/* No vector-effect: it breaks pathLength dashes (the stroke drew in pieces). Width is in viewBox units. */
.st-x line { stroke: var(--orange); stroke-width: 4.2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .55s var(--st-ease); }
.st-x line + line { transition-delay: .35s; }
.st-slash.st-arm .st-x line { stroke-dashoffset: 1; }
.st-slash.st-arm.st-on .st-x line { stroke-dashoffset: 0; transition-delay: .5s; }
.st-slash.st-arm.st-on .st-x line + line { transition-delay: .95s; }
.st-slash-then { margin: 18px 0 0; font-size: clamp(20px, 2.2vw, 28px); font-weight: 900; color: var(--text); transition: opacity .6s, transform .6s var(--st-ease); }
.st-slash-then span { color: var(--orange); }
.st-slash.st-arm .st-slash-then { opacity: 0; transform: translateY(12px); }
.st-slash.st-arm.st-on .st-slash-then { opacity: 1; transform: none; transition-delay: 1.2s; }
.st-nine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 0; max-inline-size: 700px; padding: 0; list-style: none; }
.st-box { position: relative; aspect-ratio: 3.2; border: 1.5px dashed rgba(255, 255, 255, .18); border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .02); transition: opacity .5s, transform .5s var(--st-ease); transition-delay: calc(var(--i) * 90ms + 1.6s); }
.st-box b { position: absolute; inset-block-start: 14px; inset-inline-start: 16px; font: 700 14px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--orange); }
.st-box span { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(30px, 4vw, 52px); font-weight: 900; color: rgba(255, 255, 255, .12); }
.st-box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 107, 53, .12) 50%, transparent 70%);
  transform: translateX(-100%); animation: st-sheen 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 220ms); }
@keyframes st-sheen { 60%, 100% { transform: translateX(100%); } }
.st-slash.st-arm .st-box { opacity: 0; transform: translateY(14px) scale(.97); }
.st-slash.st-arm.st-on .st-box { opacity: 1; transform: none; }
.st-nine-cap { margin: 24px 0 0; max-inline-size: 60ch; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.st-nine-cap b { color: var(--text); }
@media (max-width: 560px) { .st-nine { gap: 8px; } .st-box { aspect-ratio: 1; border-radius: 12px; } .st-box b { font-size: 12px; inset-block-start: 10px; inset-inline-start: 10px; } }

/* ---------- the ending: AND becomes ANB, then four definitions ---------- */
.st-anb-h { margin: 0; font-size: clamp(36px, 5.4vw, 76px); font-weight: 900; line-height: .95; letter-spacing: -.05em; color: var(--text); }
[dir="rtl"] .st-anb-h { letter-spacing: 0; line-height: 1.35; font-weight: 700; font-size: clamp(32px, 4.6vw, 64px); }
.st-word { display: inline-block; color: var(--orange); white-space: nowrap; }
.st-flip { position: relative; display: inline-block; perspective: 600px; }
.st-flip-in { position: relative; display: inline-block; transform-style: preserve-3d; transition: transform .9s var(--st-ease); }
.st-flip-a, .st-flip-b { display: inline-block; backface-visibility: hidden; }
.st-flip-b { position: absolute; inset-inline-start: 0; inset-block-start: 0; transform: rotateX(180deg); }
.st-flip-in { transform: rotateX(180deg); }
.st-anb.st-arm .st-flip-in { transform: none; }
.st-anb.st-arm.st-on .st-flip-in { transform: rotateX(180deg); transition-delay: 1.1s; }
.st-anb-sub { margin: 14px 0 0; font-size: clamp(20px, 2.2vw, 30px); font-weight: 900; color: var(--text); transition: opacity .6s, transform .6s var(--st-ease); }
.st-anb-sub span { color: var(--orange); }
.st-anb.st-arm .st-anb-sub { opacity: 0; transform: translateY(12px); }
.st-anb.st-arm.st-on .st-anb-sub { opacity: 1; transform: none; transition-delay: 1.9s; }
.st-anb-line { margin: 18px 0 0; max-inline-size: 60ch; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.st-defs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .st-defs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st-def { position: relative; padding: 22px 22px 20px; border: 1px solid var(--st-line); border-radius: 20px; background: var(--st-panel);
  transition: border-color .3s, transform .3s var(--st-ease), opacity .6s; transition-delay: 0s; }
.st-def:hover { border-color: rgba(255, 107, 53, .5); transform: translateY(-3px); }
.st-def b { display: block; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--orange); }
.st-def h3 { margin: 10px 0 0; font-size: clamp(19px, 1.8vw, 23px); font-weight: 900; letter-spacing: -.02em; color: var(--text); }
[dir="rtl"] .st-def h3 { letter-spacing: 0; font-weight: 700; }
.st-def p { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.st-def.st-you-def { border-color: rgba(255, 107, 53, .55); background: linear-gradient(160deg, rgba(255, 107, 53, .12), var(--st-panel) 60%); }
.st-anb.st-arm .st-def { opacity: 0; }
.st-anb.st-arm.st-on .st-def { opacity: 1; transition: opacity .6s, border-color .3s, transform .3s var(--st-ease); transition-delay: calc(var(--i) * 140ms + 2.3s), 0s, 0s; }

/* ---------- real screens ---------- */
.st-screen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: center; }
@media (min-width: 980px) { .st-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.st-phone { position: relative; max-inline-size: 380px; margin-inline: auto; padding: 12px; border-radius: 34px; background: #111;
  border: 1px solid var(--st-line); box-shadow: 0 30px 80px -30px rgba(255, 107, 53, .45); }
.st-phone img { display: block; inline-size: 100%; block-size: auto; border-radius: 24px; }
.st-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.st-steps li { position: relative; padding-block: 16px; padding-inline-start: 56px; border-block-start: 1px solid var(--st-line); }
.st-steps li::before { counter-increment: st; content: counter(st); position: absolute; inset-inline-start: 0; inset-block-start: 14px;
  inline-size: 36px; block-size: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #000;
  font-weight: 900; font-size: 16px; }
.st-steps b { display: block; font-size: 19px; color: var(--text); }
.st-steps span { display: block; margin-block-start: 4px; font-size: 16px; color: var(--text-muted); }
.st-screen-line { margin: 18px 0 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 900; line-height: 1.25; color: var(--text); }
[dir="rtl"] .st-screen-line { font-weight: 700; line-height: 1.5; }
.st-screen-line span { color: var(--orange); }

/* ---------- the existing sections, lifted ---------- */
.stage .ac-vs { gap: 16px; }
.stage .ac-vs-col { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--st-line); background: var(--st-panel); }
.stage .ac-vs-col.ac-vs-win { border-color: rgba(255, 107, 53, .6); background: linear-gradient(160deg, rgba(255, 107, 53, .12), var(--st-panel) 60%); }
.stage .ac-vs-col .te { font-size: 13px; font-weight: 800; letter-spacing: .14em; color: var(--orange); }
.stage .ac-vs-col li { font-size: 16px; line-height: 1.5; }
.stage .wb-gulf, .stage .wb-card, .stage .wb-form-box, .stage .ps-partner { border-radius: 20px; border-color: var(--st-line); background: var(--st-panel); }
.stage .wb-gulf { padding: clamp(18px, 2.2vw, 26px); }
.stage .wb-gulf h3 { font-size: clamp(20px, 2vw, 26px); }
.stage .wb-glab { font-size: 16px; }
.stage .wb-glab b { font-size: 30px; }
.stage .wb-gtrack { block-size: 14px; border-radius: 999px; }
.stage .wb-gtrack span { border-radius: 999px; }
.stage .wb-gstat { border-radius: 16px; padding: 18px; }
.stage .wb-gstat b { font-size: 56px; }
.stage .wb-gline { font-size: 19px; }
.stage .wb-cards { gap: 16px; }
.stage .wb-card { padding: clamp(18px, 1.8vw, 24px); transition: transform .3s var(--st-ease), border-color .3s; }
.stage .wb-card:hover { transform: translateY(-4px); border-color: rgba(255, 107, 53, .45); }
.stage .wb-stags { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stage .wb-secret h3 { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
[dir="rtl"] .stage .wb-secret h3 { letter-spacing: 0; text-transform: none; font-size: 15px; }
.stage .wb-stags span { font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-dim); }
.stage .wb-myth { margin: 12px 0 0; font-size: 14.5px; color: var(--text-dim); }
.stage .wb-myth s { color: var(--text-muted); text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
.stage .wb-shook { margin: 14px 0 0; font-size: clamp(17px, 1.5vw, 20px); font-weight: 800; line-height: 1.35; color: var(--text); }
.stage .ps-truth { margin: 10px 0 0; font-size: 15.5px; line-height: 1.55; }
.stage .wb-slive { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(190, 242, 100, .06); border-inline-start: 3px solid var(--lime); }
.stage .wb-slive b { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }
[dir="rtl"] .stage .wb-slive b { letter-spacing: 0; text-transform: none; font-size: 14px; }
.stage .wb-slive p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.stage .wb-ssrc { margin: 10px 0 0; font-size: 12.5px; color: var(--text-dim); }
.stage .wb-take li, .stage .ps-agenda li { font-size: 18px; }
.stage .wb-take b { font-size: 34px; font-weight: 900; color: var(--orange); }
.stage .wb-bonus { margin: 26px 0 0; padding: 20px 22px; border: 1px solid rgba(255, 107, 53, .55); border-radius: 16px;
  background: rgba(255, 107, 53, .08); font-size: 18px; font-weight: 800; color: var(--text); }
.stage .wb-line { margin: 34px 0 0; }
.stage .wb-line h3 { font-size: 20px; }
.stage .wb-line li { font-size: 15.5px; }
.stage .wb-host img { inline-size: 200px; block-size: 200px; border-radius: 22px; }
@media (min-width: 760px) { .stage .wb-host { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; } }
.stage .wb-host h3 { font-size: 24px; font-weight: 900; }
.stage .wb-host p, .stage .wb-story p { font-size: 16.5px; line-height: 1.7; }
.stage .wb-form-box { padding: clamp(24px, 3vw, 40px); max-inline-size: 760px; box-shadow: 0 30px 90px -40px rgba(255, 107, 53, .4); }
.stage .wb-proof li { font-size: 17px; border-radius: 0 14px 14px 0; }
[dir="rtl"] .stage .wb-proof li { border-radius: 14px 0 0 14px; }
.stage .faq summary, .stage details summary { font-size: 18px; }
.stage .ps-partner h3 { font-size: 20px; }
.stage .ps-partner p { font-size: 16.5px; }

/* ---------- helpers ---------- */
.st-pre, .st-pre *, .st-pre *::before, .st-pre *::after { transition: none !important; }
.stage .sr-only { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.st-slash-q s { text-decoration: none; }
.st-slash-q-text { display: block; color: var(--text-muted); }

/* ---------- reduced motion: the finished state, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .stage .hero::before, .st-box::after { animation: none; }
  .stage *, .stage *::before, .stage *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
}

.st-nw { white-space: nowrap; }
[dir="rtl"] .st-lv-cmd q, [dir="rtl"] .st-statement q { quotes: "\00AB" "\00BB"; }
.stage .ps-cobrand { justify-content: flex-start; }
.stage .ps-cobrand-line { margin-inline: 0; text-align: start; }
/* The session ticket: the facts a visitor checks before they message. */
.st-ticket { position: relative; padding: clamp(24px, 3vw, 34px); border: 1px solid rgba(255, 107, 53, .45); border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 107, 53, .12), rgba(255, 255, 255, .02) 55%); box-shadow: 0 30px 90px -40px rgba(255, 107, 53, .55); }
.st-ticket-h { margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
[dir="rtl"] .st-ticket-h { letter-spacing: 0; text-transform: none; font-size: 15px; }
.st-ticket dl { margin: 0; }
.st-ticket dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 14px; border-block-start: 1px dashed rgba(255, 255, 255, .14); }
.st-ticket dt { font-size: 15px; color: var(--text-dim); }
.st-ticket dd { margin: 0; font-size: 17px; font-weight: 800; color: var(--text); text-align: end; }
.st-ticket .btn { inline-size: 100%; margin-block-start: 20px; }
.st-ticket-foot { margin: 12px 0 0; font-size: 14px; color: var(--text-dim); text-align: center; }

/* The co-brand (12 Nov 2026): two matched blocks, the university's logo on
   white and SMOrchestra.ai on black with the orange ".ai". */
.stage .ps-cobrand { gap: 14px; align-items: stretch; }
.stage .ps-cobrand img { block-size: 60px; padding: 8px 14px; border-radius: 14px; box-sizing: content-box; }
.stage .ps-x { align-self: center; font-size: 26px; font-weight: 900; color: var(--orange); }
.stage .ps-smo { display: inline-flex; align-items: center; padding-inline: 20px; border-radius: 14px; background: #000;
  border: 1.5px solid rgba(255, 107, 53, .55); box-shadow: 0 10px 34px -14px rgba(255, 107, 53, .6);
  font-size: 26px; font-weight: 900; letter-spacing: -.02em; color: #fff; }
.stage .ps-smo span { color: var(--orange); }
@media (max-width: 560px) { .stage .ps-cobrand { flex-wrap: nowrap; gap: 8px; } .stage .ps-cobrand img { block-size: 34px; padding: 6px 9px; border-radius: 10px; }
  .stage .ps-x { font-size: 18px; } .stage .ps-smo { font-size: 16px; padding-inline: 11px; border-radius: 10px; } }
.stage .wb-h1src { margin: 8px 0 0; font-size: 13px; color: var(--text-dim); }

/* ---------- centred writing and buttons (owner, 12 Nov 2026) ----------
   Headings, intros, captions and every button row sit on the centre line.
   Card bodies and lists stay start-aligned: centred paragraphs read badly. */
.stage .sec-head { text-align: center; margin-inline: auto; }
.stage .sec-head .eyebrow { justify-content: center; }
.stage .sec-head .eyebrow::after { content: ""; inline-size: 28px; block-size: 2px; background: var(--orange); }
.stage .sec-head .sub { margin-inline: auto; text-align: center; }
.stage .wb-cap, .stage .st-gap-scope, .stage .st-src, .stage .st-nine-cap, .stage .st-anb-line,
.stage .st-levels-line, .stage .wb-bonus, .stage .wb-pace, .stage .ps-stack { text-align: center; margin-inline: auto; }
.stage .st-gap-note { justify-content: center; }
.stage .hero-cta, .stage .wb-mid-cta { justify-content: center; }
.stage .hero-inner, .stage .st-hero-copy { text-align: center; }
.stage .hero h1, .stage .hero .sub, .stage .wb-hook { margin-inline: auto; text-align: center; }
.stage .hero .eyebrow { text-align: center; }
.stage .wb-strip { justify-content: center; }
.stage .ps-cobrand { justify-content: center; }
.stage .ps-cobrand-line { margin-inline: auto; text-align: center; }
.st-statement .wrap { text-align: center; }
.st-statement p { margin-inline: auto; }
.st-slash, .st-anb { text-align: center; }
.st-slash-h { display: flex; justify-content: center; }
.st-nine { margin-inline: auto; }
.st-anb .st-defs { text-align: start; }
.st-glue-copy { text-align: center; }
.stage .wb-gulf h3, .stage .wb-gline { text-align: center; }

@media (max-width: 560px) { .stage .sec-head .eyebrow::before, .stage .sec-head .eyebrow::after { content: none; } }

/* Direct-link pages (body.standalone, the PSUT session, 12 Nov 2026): no site
   bar at all, so the PSUT x SMOrchestra block is the first thing on screen,
   and no footer link columns. The language switch sits on the footer line and
   the WhatsApp launcher stays in the corner. */
.standalone nav.nav, .standalone .foot-col { display: none !important; }

/* The PSUT booking form (owner, 12 Nov 2026): the webinar form's look, centred. */
.ps-form-box { margin-inline: auto; text-align: start; }
.ps-form-box > h2, .ps-form-box > .wb-under { text-align: center; }
.ps-form-box .wb-hint { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); }
.ps-form-box .ac-psut .btn { inline-size: 100%; }
.ps-ok { padding: 18px 20px; border-radius: 14px; border-inline-start: 3px solid var(--lime); background: rgba(190, 242, 100, .07); }
.ps-ok h3 { margin: 0 0 6px; font-size: 22px; color: var(--text); }
.ps-ok p { margin: 6px 0 0; color: var(--text-muted); }
.ps-ok:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ps-wa-alt { margin: 18px 0 0; text-align: center; font-size: 14.5px; color: var(--text-muted); }
.ps-wa-alt a { color: #25d366; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ps-wa-fico, .ps-wa-ico { flex: none; }

/* WhatsApp's own launcher: green circle, white logo; the #128C7E rim keeps the
   edge at non-text contrast on light and dark (white on green alone is 2:1). */
.ps-wa-float { position: fixed; z-index: 60; inset-inline-end: 18px; inset-block-end: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; inline-size: 58px; block-size: 58px; border-radius: 50%;
  border: 2px solid #128c7e; background: #25d366; color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .18s ease, box-shadow .18s ease; }
.ps-wa-float:hover { transform: scale(1.06); box-shadow: 0 12px 30px rgba(0, 0, 0, .45); }
.ps-wa-float:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ps-wa-tip { position: absolute; inset-inline-end: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  padding: 8px 14px; border-radius: 10px; background: #fff; color: #111b21; font-size: 14px; font-weight: 700;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.ps-wa-float:hover .ps-wa-tip, .ps-wa-float:focus-visible .ps-wa-tip { opacity: 1; }
@media (hover: none) { .ps-wa-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .ps-wa-float, .ps-wa-tip { transition: none; } .ps-wa-float:hover { transform: none; } }

/* The secret cards line up row by row (owner, 12 Nov 2026: "align these
   vertically"): each card is a subgrid over the row's tracks, so the hooks, the
   "In the session" boxes and the sources start at the same height in all three
   cards, and the boxes share one height. Dec cards have 5 parts, PSUT 6. */
@media (min-width: 880px) {
  @supports (grid-template-rows: subgrid) {
    .stage .wb-cards:has(> .wb-secret) { row-gap: 0; }
    .stage .wb-secret { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start; }
    .stage .wb-secret:has(> .ps-truth) { grid-row: span 6; }
  }
}