html, body { height: 100%; }
body { background: #0f0e0e; overflow: hidden; }

/* ---------- Stage: fixed 16:9 canvas, scaled to fit ---------- */
.viewport { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform: translate(-50%, -50%); transform-origin: center center; }
.slide {
  position: absolute; inset: 0; padding: 72px 96px 88px;
  background: var(--paper); color: var(--charcoal);
  opacity: 0; visibility: hidden; transform: translateX(40px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s .55s;
  overflow: hidden; display: flex; flex-direction: column;
}
.slide.past { transform: translateX(-40px); }
.slide.active { opacity: 1; visibility: visible; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease), visibility 0s; }
.slide.dark { background: var(--graphite); color: #E7E5E3; }

/* Furniture */
.furn { position: absolute; left: 96px; right: 96px; bottom: 34px; display: flex; justify-content: space-between; font-size: 13px; color: var(--grey); letter-spacing: .04em; }
.furn b { font-weight: 500; color: var(--graphite); }
.dark .furn b { color: var(--white); }
.furn .pg { font-variant-numeric: tabular-nums; }
.corner { position: absolute; top: 0; inset-inline-end: 96px; width: 2px; height: 44px; background: var(--red); }

/* Headings */
.head { margin-bottom: 40px; }
.head .label { font-size: 14px; }
.head h2 { font-size: 54px; font-weight: 700; color: var(--graphite); letter-spacing: -.02em; line-height: 1.06; margin-top: 14px; max-width: 1250px; }
.dark .head h2 { color: var(--white); }
.head p.sub { font-size: 22px; color: var(--slate); margin-top: 14px; max-width: 1100px; }

/* Entrance animations — staggered by JS via --d */
.a { opacity: 0; transform: translateY(22px); }
.active .a { animation: aup .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes aup { to { opacity: 1; transform: none; } }
.frag { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.frag.shown { opacity: 1; transform: none; }

.cols { display: grid; gap: 56px; flex: 1; min-height: 0; }

/* ---------- 1. Title ---------- */
.s-title { padding-top: 64px; }
.s-title .logo { height: 58px; width: auto; align-self: flex-start; }
.s-title .label { margin-top: 70px; font-size: 15px; }
.s-title h1 { font-size: 132px; font-weight: 700; color: var(--white); letter-spacing: -.035em; line-height: .95; margin-top: 18px; }
.s-title .tag { font-size: 30px; font-weight: 300; color: var(--silver); margin-top: 18px; }
.journey { position: relative; display: flex; justify-content: space-between; margin-top: 64px; max-width: 1300px; }
.journey .line { position: absolute; top: 9px; left: 9px; right: 9px; height: 1px; background: rgba(178,174,174,.35); }
.journey .line i { position: absolute; inset: 0; background: var(--cream); transform-origin: left; transform: scaleX(0); }
.active .journey .line i { animation: draw 2.2s .6s var(--ease) forwards; }
@keyframes draw { to { transform: scaleX(1); } }
.journey .node { position: relative; width: 170px; }
.journey .node::before { content: ""; display: block; width: 19px; height: 19px; border-radius: 50%; background: var(--graphite); border: 2px solid var(--cream); margin-bottom: 16px; }
.journey .node span { font-size: 13px; color: var(--cream); letter-spacing: .14em; font-weight: 500; }
.journey .node p { font-size: 19px; color: var(--white); font-weight: 400; margin-top: 4px; line-height: 1.25; }
.presenter { position: absolute; left: 96px; right: 96px; bottom: 84px; display: flex; align-items: center; justify-content: space-between; }
.presenter .who { display: flex; align-items: center; gap: 22px; }
.presenter .who img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--cream); }
.presenter .who b { display: block; font-size: 24px; font-weight: 700; color: var(--white); }
.presenter .who small { font-size: 16px; color: var(--silver); }
.presenter .seal { width: 112px; background: var(--white); padding: 4px; }

/* ---------- 2. SCRIBE ---------- */
.scribe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; flex: 1; }
.card {
  background: var(--white); border-top: 2px solid var(--red); padding: 30px 26px 28px;
  display: flex; flex-direction: column; box-shadow: 0 1px 0 var(--mist);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(28,27,27,.10); }
.card .L { font-size: 120px; font-weight: 700; line-height: .9; color: var(--graphite); letter-spacing: -.04em; }
.card h3 { font-size: 24px; font-weight: 700; color: var(--graphite); margin: 22px 0 12px; }
.card p { font-size: 18px; line-height: 1.45; color: var(--charcoal); }
.card .eg { margin-top: auto; padding-top: 18px; font-size: 15px; color: var(--slate); font-style: italic; border-top: 1px solid var(--mist); }
.s-foot { margin-top: 30px; font-size: 20px; color: var(--slate); display: flex; gap: 18px; align-items: baseline; }
.s-foot b { color: var(--graphite); font-weight: 500; }

/* ---------- 3. SCRIBE prompt ---------- */
.prompt { background: var(--white); border: 1px solid var(--mist); padding: 30px 34px; }
.prompt .bar { display: flex; justify-content: space-between; font-size: 13px; letter-spacing: .14em; color: var(--grey); text-transform: uppercase; padding-bottom: 16px; border-bottom: 1px solid var(--mist); margin-bottom: 8px; }
.pl { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px dashed var(--mist); align-items: start; }
.pl:last-child { border-bottom: 0; }
.chip { width: 40px; height: 40px; display: grid; place-items: center; border: 1.5px solid var(--red); color: var(--red); font-weight: 700; font-size: 20px; }
.pl p { font-size: 20px; line-height: 1.45; color: var(--charcoal); }
.pl p em { color: var(--grey); font-style: normal; font-size: 16px; display: block; letter-spacing: .04em; }
.why h3 { font-size: 26px; color: var(--graphite); font-weight: 700; margin-bottom: 22px; }
.why li { list-style: none; position: relative; padding: 0 0 22px; padding-inline-start: 30px; font-size: 21px; line-height: 1.45; }
.why li::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; width: 14px; height: 2px; background: var(--red); }
.why li b { font-weight: 500; color: var(--graphite); }
.note { margin-top: 10px; padding: 22px 26px; background: var(--cream-tint); font-size: 19px; line-height: 1.5; color: var(--charcoal); }

/* ---------- 4. Reasoning shift ---------- */
.changed .item { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--mist); }
.changed .item:first-child { padding-top: 0; }
.changed .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--graphite); display: grid; place-items: center; }
.changed .ico svg { width: 28px; height: 28px; stroke: var(--white); fill: none; stroke-width: 1.8; }
.changed h3 { font-size: 24px; font-weight: 700; color: var(--graphite); }
.changed p { font-size: 19px; color: var(--charcoal); margin-top: 4px; line-height: 1.45; }
.evidence { margin-top: 22px; font-size: 15px; color: var(--grey); line-height: 1.5; }
.fate { background: var(--white); padding: 8px 30px 10px; border: 1px solid var(--mist); }
.fate h3 { font-size: 15px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); font-weight: 500; padding: 18px 0 12px; border-bottom: 1px solid var(--silver); }
.frow { display: grid; grid-template-columns: 56px 190px 1fr 132px; gap: 16px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--mist); }
.frow:last-child { border-bottom: 0; }
.frow .lt { font-size: 40px; font-weight: 700; color: var(--graphite); line-height: 1; }
.frow .nm { font-size: 21px; font-weight: 500; color: var(--graphite); }
.frow .ds { font-size: 18px; color: var(--charcoal); line-height: 1.4; }
.pill { justify-self: end; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: 7px 12px; border-radius: 2px; white-space: nowrap; }
.p-kept { border: 1px solid var(--graphite); color: var(--graphite); }
.p-up { background: var(--graphite); color: var(--white); }
.p-gone { color: var(--grey); text-decoration: line-through; border: 1px dashed var(--silver); }
.p-auto { background: var(--cream-tint); color: var(--deep-red); }

/* ---------- 5. Before / after ---------- */
.ba { grid-template-columns: 1fr 1fr; gap: 40px; }
.pane { position: relative; padding: 30px 34px; display: flex; flex-direction: column; }
.pane .label { margin-bottom: 18px; }
.pane.old { background: var(--mist); }
.pane.new { background: var(--white); border: 1px solid var(--mist); border-top: 2px solid var(--red); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 17.5px; line-height: 1.62; color: var(--charcoal); white-space: pre-wrap; }
.old .mono { color: var(--slate); }
.x { position: relative; }
.x::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.struck .x::after { transform: scaleX(1); }
.struck .x { color: var(--silver); transition: color .6s .2s; }
.hl { border-bottom: 2px solid transparent; transition: border-color .5s, background .5s; }
.marked .hl { border-color: var(--red); background: rgba(200,16,46,.05); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 22px; }
.tags span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; padding: 8px 12px; background: var(--paper); color: var(--graphite); border-inline-start: 2px solid var(--red); }
.old .tags span { background: transparent; border-inline-start-color: var(--grey); color: var(--slate); }

/* ---------- 6. Five rules ---------- */
.rules { grid-template-columns: 1.35fr 1fr; }
.rule-row { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--mist); }
.rule-row:first-child { padding-top: 0; }
.rule-row .num { font-size: 46px; font-weight: 700; color: var(--red); line-height: 1; }
.rule-row h3 { font-size: 27px; font-weight: 700; color: var(--graphite); line-height: 1.2; }
.rule-row p { font-size: 19px; color: var(--slate); margin-top: 6px; line-height: 1.45; }
.bp { background: var(--cream-tint); padding: 36px 38px; }
.bp h3 { font-size: 26px; font-weight: 700; color: var(--graphite); margin: 12px 0 18px; }
.bp li { list-style: none; padding: 13px 0; padding-inline-start: 30px; position: relative; font-size: 19.5px; line-height: 1.45; border-bottom: 1px solid rgba(200,174,125,.45); }
.bp li:last-child { border-bottom: 0; }
.bp li::before { content: "→"; position: absolute; inset-inline-start: 0; color: var(--red); font-weight: 500; }
.bp li b { font-weight: 500; color: var(--graphite); }

/* ---------- 7. Context ---------- */
.ctx { grid-template-columns: 520px 1fr; }
.window { border: 2px solid var(--graphite); background: var(--white); padding: 14px; display: flex; flex-direction: column; gap: 8px; height: 100%; position: relative; }
.window .ttl { position: absolute; top: -13px; inset-inline-start: 18px; background: var(--paper); padding: 0 10px; font-size: 13px; letter-spacing: .18em; color: var(--graphite); font-weight: 500; }
.layer { display: flex; align-items: center; justify-content: space-between; padding: 0 18px; font-size: 18px; color: var(--graphite); font-weight: 500; background: var(--mist); transform-origin: left; }
.layer small { font-weight: 300; font-size: 14px; color: var(--slate); }
.layer.l2 { background: #EFEDEB; } .layer.l3 { background: var(--paper); border: 1px solid var(--mist); }
.layer.you { background: var(--white); border: 2px solid var(--red); color: var(--red); }
.active .layer { animation: grow .8s var(--ease) both; }
@keyframes grow { from { transform: scaleX(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pillar { background: var(--white); padding: 24px 26px; border-inline-start: 2px solid var(--red); }
.pillar span { font-size: 13px; letter-spacing: .16em; color: var(--red); font-weight: 500; }
.pillar h3 { font-size: 23px; font-weight: 700; color: var(--graphite); margin: 8px 0 6px; }
.pillar p { font-size: 17.5px; line-height: 1.45; color: var(--charcoal); }
.warn { margin-top: 20px; display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 22px 26px; background: var(--graphite); color: #E7E5E3; font-size: 18px; line-height: 1.5; }
.warn b { color: var(--cream); font-weight: 500; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; }

/* ---------- 8. Harness ---------- */
.hz { grid-template-columns: 600px 1fr; }
svg text { font-family: "Roboto", sans-serif; }
.hz-svg .spoke { stroke: var(--silver); stroke-width: 1.5; stroke-dasharray: 4 6; }
.active .hz-svg .spoke { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.hz-svg .nd { opacity: 0; transform-box: fill-box; transform-origin: center; }
.active .hz-svg .nd { animation: pop .6s var(--ease) forwards; }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.ins { padding: 22px 0; border-bottom: 1px solid var(--mist); }
.ins:first-child { padding-top: 0; }
.ins h3 { font-size: 25px; color: var(--graphite); font-weight: 700; }
.ins p { font-size: 19px; line-height: 1.45; margin-top: 6px; }
.life { display: flex; gap: 6px; margin-top: 26px; }
.life div { flex: 1; position: relative; padding: 16px 10px 16px 26px; font-size: 15px; font-weight: 500; color: var(--graphite); background: var(--mist); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); line-height: 1.2; }
.life div:first-child { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); padding-left: 16px; }
.life div.hook { background: var(--graphite); color: var(--white); }
.active .life div { animation: pulse 6s infinite; }
@keyframes pulse { 0%, 14%, 100% { box-shadow: inset 0 -3px 0 transparent; } 4%, 10% { box-shadow: inset 0 -3px 0 var(--red); } }

/* ---------- 9. Loop ---------- */
.lp { grid-template-columns: 640px 1fr; }
.lp-svg .ring { fill: none; stroke: var(--silver); stroke-width: 1.5; }
.lp-svg .arc { fill: none; stroke: var(--graphite); stroke-width: 2.5; stroke-dasharray: 1070; stroke-dashoffset: 1070; }
.active .lp-svg .arc { animation: arc 2s .4s var(--ease) forwards; }
@keyframes arc { to { stroke-dashoffset: 0; } }
.comp { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--mist); }
.comp .num { font-size: 22px; font-weight: 700; color: var(--red); }
.comp h3 { font-size: 22px; color: var(--graphite); font-weight: 700; }
.comp p { font-size: 17.5px; color: var(--slate); line-height: 1.4; margin-top: 2px; }
.oc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.oc div { padding: 16px 20px; background: var(--white); font-size: 16.5px; line-height: 1.45; }
.oc div b { display: block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); margin-bottom: 6px; font-weight: 500; }
.oc div.closed { border-top: 2px solid var(--red); }
.oc div.open { border-top: 2px solid var(--silver); }
.quote { margin-top: 18px; font-size: 21px; font-weight: 500; color: var(--graphite); }
.quote::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--red); vertical-align: middle; margin-inline-end: 14px; }

/* ---------- 10. Roadmap ---------- */
.stairs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: end; flex: 1; margin-top: 10px; }
.stair { border-top: 2px solid var(--cream); background: rgba(255,255,255,.04); padding: 26px 26px 28px; display: flex; flex-direction: column; }
.stair:nth-child(1) { height: 62%; } .stair:nth-child(2) { height: 74%; } .stair:nth-child(3) { height: 87%; } .stair:nth-child(4) { height: 100%; }
.stair span { font-size: 13px; letter-spacing: .16em; color: var(--cream); font-weight: 500; }
.stair h3 { font-size: 34px; color: var(--white); font-weight: 700; margin: 8px 0 4px; }
.stair .q { font-size: 19px; color: var(--silver); }
.stair .do { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(178,174,174,.25); font-size: 18px; line-height: 1.45; color: #E7E5E3; }
.stair .do b { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); font-weight: 500; margin-bottom: 6px; }
.close { display: flex; justify-content: space-between; align-items: end; margin-top: 26px; gap: 40px; }
.close .thanks { font-size: 30px; color: var(--white); font-weight: 700; }
.close .thanks small { display: block; font-size: 17px; font-weight: 300; color: var(--silver); margin-top: 6px; }
.close .ai { font-size: 11px; color: var(--grey); max-width: 560px; line-height: 1.5; text-align: end; }
.s-close .logo { height: 40px; width: auto; position: absolute; top: 64px; inset-inline-end: 96px; }

/* ---------- Chrome: progress, controls, menu ---------- */
.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--red); width: 0; transition: width .5s var(--ease); z-index: 20; }
.controls {
  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; padding: 6px; z-index: 20;
  background: rgba(28,27,27,.86); backdrop-filter: blur(8px); border-radius: 40px;
  transition: opacity .4s, transform .4s;
}
body.idle .controls { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.controls button, .controls a { all: unset; cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #E7E5E3; }
.controls button:hover, .controls a:hover { background: rgba(255,255,255,.12); }
.controls button:focus-visible, .controls a:focus-visible { outline: 2px solid var(--cream); }
.controls svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.controls .count { color: var(--white); font-size: 13px; padding: 0 10px; font-variant-numeric: tabular-nums; letter-spacing: .06em; min-width: 64px; text-align: center; }
.menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: 360px; background: var(--graphite); z-index: 30;
  transform: translateX(100%); transition: transform .4s var(--ease); padding: 32px 0; overflow-y: auto;
}
.menu.open { transform: none; }
.menu .label { padding: 0 28px 16px; color: var(--cream); }
.menu a { display: grid; grid-template-columns: 34px 1fr; padding: 14px 28px; color: #E7E5E3; text-decoration: none; font-size: 15px; border-inline-start: 2px solid transparent; }
.menu a span { color: var(--grey); font-variant-numeric: tabular-nums; }
.menu a:hover { background: rgba(255,255,255,.05); }
.menu a.cur { border-inline-start-color: var(--cream); color: var(--white); }

/* ---------- Flow mode: phones and narrow portrait screens ---------- */
body.flow { overflow: auto; background: var(--paper); }
.flow .viewport { position: static; display: block; }
.flow .stage { position: static; width: auto; height: auto; transform: none !important; }
.flow .slide { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; padding: 48px 16px 64px; min-height: 0; border-bottom: 1px solid var(--mist); }
.flow .a, .flow .frag { opacity: 1; transform: none; animation: none; }
.flow .x::after { transform: scaleX(1); }
.flow .hl { border-color: var(--red); }
.flow .controls, .flow .progress { display: none; }
.flow .furn { position: static; margin-top: 28px; font-size: 11px; }
.flow .corner { inset-inline-end: 16px; }
.flow .head { margin-bottom: 24px; }
.flow .head h2 { font-size: 30px; }
.flow .head p.sub { font-size: 17px; }
.flow .cols, .flow .ba, .flow .rules, .flow .ctx, .flow .hz, .flow .lp { grid-template-columns: 1fr !important; gap: 28px; }
.flow .s-title h1 { font-size: 54px; }
.flow .s-title .tag { font-size: 20px; }
.flow .s-title .label { margin-top: 36px; }
.flow .s-title .logo, .flow .s-close .logo { height: 34px; position: static; }
.flow .journey { flex-direction: column; gap: 14px; margin-top: 32px; }
.flow .journey .line { display: none; }
.flow .journey .node { width: auto; display: flex; gap: 14px; align-items: baseline; }
.flow .journey .node::before { display: none; }
.flow .journey .node p { font-size: 17px; }
.flow .presenter { position: static; margin-top: 36px; flex-wrap: wrap; gap: 20px; }
.flow .presenter .who b { font-size: 19px; } .flow .presenter .who small { font-size: 14px; }
.flow .presenter .who img { width: 64px; height: 64px; }
.flow .presenter .seal { width: 90px; }
.flow .scribe { grid-template-columns: 1fr 1fr; gap: 12px; }
.flow .card { padding: 20px 16px; }
.flow .card .L { font-size: 64px; }
.flow .card h3 { font-size: 18px; margin: 12px 0 8px; }
.flow .card p { font-size: 15px; }
.flow .card .eg { font-size: 13px; }
.flow .s-foot { font-size: 16px; flex-direction: column; gap: 6px; }
.flow .prompt { padding: 18px 16px; }
.flow .pl { grid-template-columns: 36px 1fr; gap: 10px; }
.flow .chip { width: 30px; height: 30px; font-size: 15px; }
.flow .pl p, .flow .why li, .flow .note, .flow .changed p, .flow .rule-row p, .flow .bp li, .flow .ins p { font-size: 16px; }
.flow .frow { grid-template-columns: 34px 1fr; gap: 4px 12px; }
.flow .frow .lt { font-size: 28px; grid-row: span 3; }
.flow .frow .nm { font-size: 17px; } .flow .frow .ds { font-size: 15px; }
.flow .pill { justify-self: start; }
.flow .fate { padding: 4px 16px; }
.flow .pane { padding: 20px 16px; }
.flow .mono { font-size: 13.5px; }
.flow .rule-row { grid-template-columns: 48px 1fr; }
.flow .rule-row .num { font-size: 32px; } .flow .rule-row h3 { font-size: 20px; }
.flow .bp { padding: 24px 18px; }
.flow .window { height: 380px; }
.flow .layer { font-size: 15px; }
.flow .pillars { grid-template-columns: 1fr; }
.flow .warn { grid-template-columns: 1fr; gap: 8px; font-size: 16px; }
.flow .life { flex-wrap: wrap; }
.flow .life div, .flow .life div:first-child { flex: 1 1 45%; clip-path: none; padding: 12px; font-size: 13px; }
.flow .oc { grid-template-columns: 1fr; }
.flow .comp h3 { font-size: 18px; } .flow .comp p { font-size: 15px; }
.flow .quote { font-size: 17px; }
.flow .stairs { grid-template-columns: 1fr; }
.flow .stair:nth-child(n) { height: auto; }
.flow .stair h3 { font-size: 26px; }
.flow .close { flex-direction: column; align-items: start; }
.flow .close .ai { text-align: start; }
.flow .ins h3 { font-size: 20px; }
.flow .changed h3 { font-size: 19px; }

/* ---------- Arabic, right to left ---------- */
.lang { width: auto !important; padding: 0 12px; border-radius: 20px !important; font-size: 14px; font-weight: 500; }
[dir="rtl"] .slide { transform: translateX(-40px); }
[dir="rtl"] .slide.past { transform: translateX(40px); }
[dir="rtl"] .slide.active, [dir="rtl"] .flow .slide { transform: none; }
[dir="rtl"] .journey .line i, [dir="rtl"] .layer, [dir="rtl"] .x::after { transform-origin: right; }
[dir="rtl"] .bp li::before { content: "←"; }
[dir="rtl"] .controls .flip svg { transform: scaleX(-1); }
[dir="rtl"] .menu { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .menu.open { transform: none; }
[dir="rtl"] .life div { clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 16px 100%, 0 50%); padding: 16px 26px 16px 10px; }
[dir="rtl"] .life div:first-child { clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); padding-right: 16px; }
[dir="rtl"] .flow .life div { clip-path: none; padding: 12px; }
:lang(ar) .head h2 { line-height: 1.35; }
:lang(ar) .s-title h1 { font-size: 112px; line-height: 1.25; letter-spacing: 0; }
:lang(ar) .mono { font-family: "Roboto", "Noto Naskh Arabic", sans-serif; font-size: 19px; line-height: 1.75; }
:lang(ar) .old .mono .x { font-weight: 700; }
:lang(ar) .card p, :lang(ar) .pl p, :lang(ar) .why li, :lang(ar) .changed p, :lang(ar) .frow .ds, :lang(ar) .rule-row p, :lang(ar) .bp li, :lang(ar) .pillar p, :lang(ar) .ins p, :lang(ar) .comp p, :lang(ar) .warn, :lang(ar) .stair .do, :lang(ar) .note, :lang(ar) .oc div { line-height: 1.6; }
:lang(ar) .card .eg { font-style: normal; }
.term { display: block; font-family: "Roboto", sans-serif; font-size: .58em; font-weight: 400; color: var(--grey); margin-top: 2px; }
.dark .term { color: var(--silver); }
:lang(ar) .label, :lang(ar) .pill, :lang(ar) .tags span, :lang(ar) .oc div b, :lang(ar) .warn b, :lang(ar) .stair .do b, :lang(ar) .fate h3, :lang(ar) .prompt .bar { text-transform: none; }
:lang(ar) .head .label { font-size: 18px; }
:lang(ar) .s-title .label { font-size: 19px; }
:lang(ar) .pill { font-size: 14px; }
:lang(ar) .tags span { font-size: 15px; }
:lang(ar) .fate h3, :lang(ar) .prompt .bar, :lang(ar) .window .ttl { font-size: 16px; }
:lang(ar) .pillar span, :lang(ar) .stair span, :lang(ar) .oc div b, :lang(ar) .warn b, :lang(ar) .stair .do b { font-size: 15px; }

/* ---------- 10. Agentic AI ---------- */
.ag { grid-template-columns: 1fr 1.15fr; }
.topo { background: var(--white); border: 1px solid var(--mist); padding: 20px 26px 14px; }
.topo + .topo { margin-top: 18px; }
.topo h3 { font-size: 22px; font-weight: 700; color: var(--graphite); }
.topo h3 small { font-size: 16px; font-weight: 300; color: var(--slate); margin-inline-start: 10px; }
.topo svg { display: block; margin-top: 8px; }
.ladder h3 { font-size: 26px; font-weight: 700; color: var(--graphite); margin-bottom: 14px; }
.lrow { display: grid; grid-template-columns: 210px 1fr 96px; gap: 18px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--mist); }
.lrow.hd { padding: 0 0 10px; border-bottom: 1px solid var(--silver); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); font-weight: 500; }
.lrow .pt { font-size: 21px; font-weight: 700; color: var(--graphite); line-height: 1.25; }
.lrow .pt span { display: block; font-size: 13px; font-weight: 500; color: var(--red); letter-spacing: .12em; margin-bottom: 2px; }
.lrow .bf { font-size: 18px; line-height: 1.45; color: var(--charcoal); }
.meter { display: flex; gap: 5px; justify-self: end; }
.meter i { width: 14px; height: 14px; border: 1.5px solid var(--graphite); border-radius: 50%; }
.meter i.on { background: var(--graphite); }
.ag-note { margin-top: 20px; padding: 18px 22px; background: var(--cream-tint); font-size: 18.5px; line-height: 1.5; border-inline-start: 2px solid var(--red); }
.ag-note b { font-weight: 500; color: var(--graphite); }
:lang(ar) .lrow.hd { text-transform: none; font-size: 15px; }
:lang(ar) .lrow .pt span { font-size: 14px; }
:lang(ar) .lrow .bf, :lang(ar) .ag-note { line-height: 1.6; }
.flow .lrow { grid-template-columns: 1fr auto; gap: 6px 12px; }
.flow .lrow .bf { grid-column: 1 / -1; grid-row: 2; font-size: 15px; }
.flow .lrow.hd { display: none; }
.flow .lrow .pt { font-size: 18px; }
.flow .topo { padding: 16px; }
.flow .ag-note { font-size: 15px; }
.topo .spoke { stroke: var(--silver); stroke-width: 1.5; stroke-dasharray: 4 6; fill: none; }
.active .topo .spoke { animation: dash 1.2s linear infinite; }
.lrow .pt span.term { display: block; color: var(--grey); font-weight: 400; font-size: 13px; margin: 2px 0 0; }