/* Topdata IoT · v2 "A day with Topdata AI"
   Warm, cinematic, time-of-day graded. Instrument Serif for the voice of the story, Geist for the product. */
:root {
  --paper: #f4ede3;
  --paper-2: #ebe1d3;
  --card: #fbf8f3;
  --ink: #1b1814;
  --ink-2: #51493f;
  --ink-3: #645b50;
  --line: rgba(27, 24, 20, .13);
  --accent: #00a9e3;
  --amber: #8a5220;
  --night: #0c1019;
  --night-2: #151a26;
  --ok: #18c48f;
  --ease: cubic-bezier(.22, .61, .21, 1);
  --serif: "Instrument Serif", "IBM Plex Sans Arabic", Georgia, serif;
  --sans: "Geist", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: max(5vw, 24px);
  --scrim: 244, 237, 227;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
html[dir="rtl"] body { font-family: "IBM Plex Sans Arabic", var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- stage + time-of-day grade ---------- */
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block; }
.grade { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.grade i { position: absolute; inset: 0; }
.g-tint { background: var(--tint, #ffd9a8); mix-blend-mode: soft-light; opacity: var(--tintA, .2); }
.g-vig { background: radial-gradient(120% 95% at 62% 48%, transparent 52%, rgba(14, 10, 8, var(--vig, .14)) 100%); }
.g-stars { opacity: var(--stars, 0); -webkit-mask: linear-gradient(#000 0, #000 35%, transparent 62%); mask: linear-gradient(#000 0, #000 35%, transparent 62%);
  background-image: radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 9%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 41% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 27%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 77% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 31%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 8%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 6% 33%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 34% 37%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 48% 15%, #fff 50%, transparent 51%);
  background-size: 640px 520px; animation: twinkle 6s ease-in-out infinite alternate; }
@keyframes twinkle { to { filter: brightness(.55); } }
.stage-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--paper); opacity: 0; transition: opacity .9s var(--ease); }
body.past-story .stage-veil { opacity: 1; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; align-content: center; gap: 22px; background: var(--paper); transition: opacity 1s var(--ease), visibility 1s; }
.loader img { width: 64px; }
.loader-time { margin: 0; font: 400 34px/1 var(--serif); color: var(--ink-2); }
.loader-bar { width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--ink); transition: width .4s var(--ease); }
body.ready .loader { opacity: 0; visibility: hidden; }

/* ---------- type ---------- */
.index { margin: 0 0 26px; font: 400 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.display { margin: 0; font: 400 clamp(54px, 6.6vw, 112px)/.95 var(--serif); letter-spacing: -.02em; }
.display .line { display: block; overflow: hidden; padding-bottom: .08em; }
.display .line > span { display: inline-block; }
.display .line:last-child > span { font-style: italic; color: var(--ink-2); }
.title { margin: 0; font: 400 clamp(38px, 3.7vw, 60px)/1.02 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.title.xl { font-size: clamp(44px, 5.6vw, 92px); line-height: .98; }
.title.mega { font-size: clamp(54px, 8.6vw, 148px); line-height: .92; max-width: 13ch; }
.body, .lede { margin: 22px 0 0; color: var(--ink-2); font-size: clamp(16.5px, 1.2vw, 18.5px); max-width: 33em; text-wrap: pretty; }
.lede { font-size: clamp(18px, 1.35vw, 21px); max-width: 30em; }
html[dir="rtl"] .display, html[dir="rtl"] .title { font-family: "IBM Plex Sans Arabic", var(--sans); font-weight: 400; letter-spacing: 0; line-height: 1.25; }
html[dir="rtl"] .display { font-size: clamp(42px, 5vw, 84px); font-weight: 300; }
html[dir="rtl"] .title { font-size: clamp(30px, 2.9vw, 48px); }
html[dir="rtl"] .title.xl { font-size: clamp(36px, 4.4vw, 70px); }
html[dir="rtl"] .title.mega { font-size: clamp(42px, 6.4vw, 110px); }
html[dir="rtl"] .display .line:last-child > span { font-style: normal; }
html[dir="rtl"] .index, html[dir="rtl"] .plan-tag, html[dir="rtl"] .ct-grid span, html[dir="rtl"] .arch h4 { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 30px; border-radius: 999px; font: 500 15px/1 var(--sans); border: 0; cursor: pointer; transition: background .3s, color .3s, transform .4s var(--ease); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #352f28; }
.btn:active { transform: scale(.98); }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sans); padding: 0; border: 0; background: none; cursor: pointer; }
.link-arrow::after { content: "→"; transition: transform .4s var(--ease); }
html[dir="rtl"] .link-arrow::after { content: "←"; }
.link-arrow:hover::after { transform: translateX(4px); }
html[dir="rtl"] .link-arrow:hover::after { transform: translateX(-4px); }
.link-down { display: inline-flex; align-items: center; gap: 14px; font: 500 15px/1 var(--sans); }
.link-down i { position: relative; width: 1px; height: 34px; background: var(--line); overflow: hidden; }
.link-down i::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ink); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { to { top: 100%; } }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: 74px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: transform .6s var(--ease), background .5s, border-color .5s, color .5s; border-bottom: 1px solid transparent; color: var(--ink); }
.nav.solid { background: rgba(244, 237, 227, .8); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom-color: var(--line); }
.nav.hide { transform: translateY(-100%); }
.brand { display: flex; align-items: center; padding: 6px 10px; margin-inline-start: -10px; border-radius: 12px; transition: background .5s; }
.brand img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 32px; }
.nav-links a, .lang { font: 400 14px/1 var(--sans); opacity: .72; transition: opacity .3s; }
.nav-links a:hover, .lang:hover { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 24px; }
.lang { border: 0; background: none; cursor: pointer; padding: 0; font-family: "IBM Plex Sans Arabic", var(--sans); }
.nav-signin { font: 500 14px/1 var(--sans); padding: 11px 19px; border: 1px solid currentColor; border-radius: 999px; transition: background .3s, color .3s; }
.nav-signin:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body[data-tone="dark"]:not(.past-story) .nav { color: #f1ebe2; }
body[data-tone="dark"]:not(.past-story) .nav.solid { background: rgba(12, 15, 24, .55); border-bottom-color: rgba(255, 255, 255, .08); }
body[data-tone="dark"]:not(.past-story) .brand { background: rgba(244, 237, 227, .94); padding: 4px 10px; border-radius: 999px; }
body[data-tone="dark"]:not(.past-story) .nav-signin:hover { background: #f1ebe2; color: var(--ink); }

/* ---------- time-of-day rail ---------- */
.dayrail { position: fixed; z-index: 40; inset-inline-end: var(--gutter); bottom: 100px; display: grid; gap: 18px; justify-items: end; color: var(--ink); transition: opacity .5s, color .8s; }
body[data-tone="dark"] .dayrail { color: #efe8de; }
body.past-story .dayrail { opacity: 0; pointer-events: none; }
.dr-now { display: flex; align-items: center; gap: 10px; }
.dr-now b { font: 400 30px/1 var(--serif); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: end; }
.dr-orb { width: 22px; height: 22px; overflow: visible; }
.dr-orb .sun { fill: #e9a24f; transition: opacity .6s; }
.dr-orb .rays { stroke: #e9a24f; stroke-width: 1.6; stroke-linecap: round; fill: none; transition: opacity .6s; transform-origin: 12px 12px; animation: aiSpin 30s linear infinite; }
.dr-orb .moon { fill: #e8e4d8; opacity: 0; transition: opacity .6s; }
.dayrail.is-night .sun, .dayrail.is-night .rays { opacity: 0; }
.dayrail.is-night .moon { opacity: 1; }
.dayrail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; justify-items: end; }
.dayrail li { display: flex; align-items: center; gap: 10px; font: 400 11px/1 var(--mono); letter-spacing: .06em; opacity: .42; transition: opacity .4s; }
.dayrail li::after { content: ""; width: 14px; height: 1px; background: currentColor; transition: width .5s var(--ease); }
.dayrail li.on { opacity: 1; }
.dayrail li.on::after { width: 30px; }
.dayrail { padding: 16px 16px 18px 20px; border-radius: 22px; background: rgba(250, 246, 240, .5); border: 1px solid rgba(255, 255, 255, .45);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 20px 40px -30px rgba(40, 26, 10, .35); }
body[data-tone="dark"] .dayrail { background: rgba(14, 17, 28, .45); border-color: rgba(255, 255, 255, .08); }
.dr-track { position: absolute; inset-inline-start: 0; top: 22px; bottom: 22px; width: 2px; border-radius: 2px; overflow: hidden; background: rgba(127, 120, 110, .18); }
.dr-track i { position: absolute; inset: 0 0 auto; height: var(--fill, 0%); background: linear-gradient(#e9a24f, #00a9e3); }

/* ---------- story ---------- */
main { position: relative; z-index: 2; }
.chapter { min-height: 150vh; padding: 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
.chapter .copy { position: relative; pointer-events: auto; width: min(450px, 100%); }
.chapter .copy::before { content: ""; position: absolute; inset: -16% -30% -16% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--scrim), .9), rgba(var(--scrim), .6) 55%, rgba(var(--scrim), 0)); }
.chapter.tone-dark { --scrim: 10, 13, 22; color: #f3ede4; }
.chapter.tone-dark .copy::before { background: radial-gradient(closest-side, rgba(var(--scrim), .72), rgba(var(--scrim), .4) 58%, rgba(var(--scrim), 0)); }
.chapter.tone-dark .body, .chapter.tone-dark .lede { color: rgba(243, 237, 228, .78); }
.chapter.tone-dark .index { color: rgba(243, 237, 228, .6); }
.chapter .index .t { display: block; margin-bottom: 14px; font: 400 clamp(64px, 6.4vw, 104px)/.86 var(--serif); letter-spacing: -.02em; text-transform: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.chapter.tone-dark .index .t { color: #f3ede4; }
html[dir="rtl"] .chapter .index .t { font-family: var(--serif); font-size: clamp(64px, 6.4vw, 104px); }
html[dir="rtl"] .chapter.hero .index .t { font-size: 22px; }
.chapter .title { font-size: clamp(34px, 3vw, 50px); }
.chapter.hero { min-height: 100vh; justify-content: flex-end; padding-bottom: 12vh; }
.chapter.hero .copy { width: min(760px, 100%); }
.chapter.hero .copy::before { inset: -20% -20% -24% -40%; }
.chapter.hero .index { display: flex; align-items: center; gap: 14px; }
.chapter.hero .index .t { display: inline; margin: 0; font-size: 22px; line-height: 1; }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 34px; margin-top: 40px; }

/* plan tag under each moment */
.plan-tag { margin: 18px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 400 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.plan-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-inline-end: 4px; }
.plan-tag b { font-weight: 500; color: var(--ink); }
.tone-dark .plan-tag { color: rgba(243, 237, 228, .55); }
.tone-dark .plan-tag b { color: #f3ede4; }

/* ---------- notifications (consistent with the app phone) ---------- */
.note { --nb: rgba(253, 251, 247, .8); position: relative; margin-top: 30px; width: min(390px, 100%); padding: 13px 15px 15px; border-radius: 24px; background: var(--nb); color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 30px 60px -34px rgba(40, 26, 10, .45), 0 8px 18px -12px rgba(40, 26, 10, .2);
  backdrop-filter: blur(22px) saturate(1.5); -webkit-backdrop-filter: blur(22px) saturate(1.5);
  translate: 0 -10px; scale: .97; transition: translate 1s var(--ease), scale 1s var(--ease); }
.chapter.is-on .note, .chapter.is-on .report { translate: 0 0; scale: 1; }
.tone-dark .note { --nb: rgba(30, 33, 44, .72); color: #f3ede4; border-color: rgba(255, 255, 255, .09); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 70px -34px rgba(0, 0, 0, .7); }
.note-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tone-dark .note-h { color: rgba(243, 237, 228, .55); }
.note-h img { width: 24px; height: 24px; padding: 3px; border-radius: 7px; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.note-h time { margin-inline-start: auto; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }
html[dir="rtl"] .note-h { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; }
.note b { display: block; font: 600 15px/1.3 var(--sans); }
.note p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.42; color: var(--ink-2); }
.tone-dark .note p { color: rgba(243, 237, 228, .72); }
.note-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.note-th { position: relative; width: 86px; height: 62px; border-radius: 11px; background: #ccc center / cover; overflow: hidden; }
.note-th i, .note-feed .bb { position: absolute; border: 1.5px solid #6fd8ff; border-radius: 3px; animation: track 3.4s ease-in-out infinite alternate; }
@keyframes track { to { translate: 4% -2%; } }
.note-chips, .note-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.note-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font: 500 11.5px/1 var(--sans); background: rgba(27, 24, 20, .06); }
.note-chips span.ok { background: #e3f5ec; color: #157a49; }
.note-chips span.ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.note-acts span { flex: 1; text-align: center; padding: 9px 0; border-radius: 12px; font: 500 12.5px/1 var(--sans); background: rgba(27, 24, 20, .06); }
.tone-dark .note-acts span, .tone-dark .note-chips span { background: rgba(255, 255, 255, .08); }
.note-acts span.pri { background: var(--ink); color: #fff; }
.note-live { padding-bottom: 14px; }
.note-feed { position: relative; height: 156px; margin: 0 -4px 12px; border-radius: 15px; background: #222 center / cover; overflow: hidden; }
.note-feed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 35%, transparent 75%, rgba(0, 0, 0, .3)); }
.note-feed .rec { position: absolute; z-index: 2; left: 10px; top: 10px; color: #fff; font: 600 10.5px/1 var(--sans); }
.note-feed .bb em { position: absolute; left: -1.5px; top: -19px; white-space: nowrap; font: 600 9.5px/1 var(--mono); font-style: normal; padding: 4px 6px; border-radius: 5px 5px 5px 0; background: #6fd8ff; color: #04131b; }
.note-feed .bb { z-index: 1; }
.note-lock { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--ok); box-shadow: 0 8px 20px -8px rgba(24, 196, 143, .7); }
.note-lock svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; }
.note-scene { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 13px; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 11px; gap: 4px; }
.note-scene small { display: block; font: 400 10px/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; opacity: .55; }
html[dir="rtl"] .note-scene small { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; font-size: 11px; }
.note-scene b { margin-top: 5px; font: 500 14px/1.1 var(--sans); }
.note-tl { position: relative; height: 34px; margin-top: 13px; border-radius: 10px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.note-tl::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 8px; margin-top: -4px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 14px, rgba(255, 255, 255, .05) 14px 16px); }
.note-tl .seg { position: absolute; left: 8px; right: 8px; top: 50%; height: 8px; margin-top: -4px; border-radius: 3px; background: linear-gradient(90deg, rgba(0, 169, 227, .5), rgba(0, 169, 227, .85)); }
.note-tl .mk { position: absolute; top: 7px; width: 2px; height: 20px; background: #ffd66b; border-radius: 1px; }
.note-tl .head { position: absolute; top: 4px; bottom: 4px; right: 10px; width: 2px; background: #ff5a4f; box-shadow: 0 0 8px #ff5a4f; animation: blink 1.4s infinite; }
.report { margin-top: 30px; width: min(420px, 100%); padding: 18px 18px 6px; border-radius: 24px; background: linear-gradient(140deg, #13161b, #232831); color: #f3efe8; box-shadow: 0 40px 70px -40px rgba(30, 20, 10, .6);
  translate: 0 -10px; scale: .97; transition: translate 1s var(--ease), scale 1s var(--ease); }
.report .ai-tag { color: #6fd8ff; }
.report > p { margin: 10px 0 14px; font-size: 14.5px; line-height: 1.5; color: rgba(243, 239, 232, .88); }
.report dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.report dl div { padding: 12px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.report dl div:nth-child(even) { padding-inline-start: 16px; border-inline-start: 1px solid rgba(255, 255, 255, .08); }
.report dl div:nth-last-child(-n+2) { border-bottom: 0; }
.report dt { font: 400 34px/1 var(--serif); }
.report dd { margin: 6px 0 0; font-size: 12px; color: rgba(243, 239, 232, .6); }

/* ---------- sections ---------- */
.section { position: relative; padding: 160px var(--gutter); }
.sec-head { max-width: 980px; margin-bottom: 84px; }
.sec-head .body { max-width: 36em; }

/* app (phone) */
.app { background: var(--paper-2); }
.app .aix { grid-template-columns: minmax(0, 1fr) 380px; gap: 8vw; max-width: 1240px; align-items: center; }
.app .sec-head { margin-bottom: 52px; }
.app .title.xl { font-size: clamp(44px, 4.6vw, 76px); max-width: 13ch; }
.aix-copy .link-arrow { margin-top: 34px; }
.aix-list button b { font-family: var(--serif); font-size: 28px; letter-spacing: 0; }
html[dir="rtl"] .aix-list button b { font-family: "IBM Plex Sans Arabic", var(--sans); font-size: 21px; }
.dev-phone { box-shadow: inset 0 0 0 1.5px #3a3c41, inset 0 0 0 5px #0c0d0f, 0 90px 120px -70px rgba(60, 36, 12, .6), 0 30px 60px -40px rgba(60, 36, 12, .4); }

/* numbers — a sunrise, scroll-linked */
.numbers { position: relative; height: 170vh; --p: 0; }
.num-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--gutter); color: #f3ede4;
  background: linear-gradient(180deg, #0b0f1a 0%, #141a2c 42%, #3a2a36 78%, #8a5440 100%); }
.num-stick::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #6f8fb5 0%, #c9a58c 55%, #f0c08a 100%); opacity: calc(var(--p) * .9); }
.num-sun { position: absolute; left: 50%; bottom: 0; width: 70vmax; height: 70vmax; margin-left: -35vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 150, .95) 0, rgba(255, 170, 100, .45) 18%, rgba(255, 140, 80, 0) 55%);
  transform: translateY(calc(68% - var(--p) * 30%)); opacity: calc(.35 + var(--p) * .65); }
.num-stick > :not(.num-sun) { position: relative; z-index: 1; }
.num-stick .index { color: rgba(243, 237, 228, .62); }
.num-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(243, 237, 228, .35); max-width: 1400px; }
.num { padding: 34px 40px 0 0; }
.num + .num { padding-inline: 40px 0; border-inline-start: 1px solid rgba(243, 237, 228, .22); }
.num strong { display: block; font: 400 clamp(84px, 12vw, 210px)/.85 var(--serif); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.num p { margin: 24px 0 0; max-width: 24em; color: rgba(243, 237, 228, .8); font-size: 17px; }

/* plans */
.plans { background: var(--paper); }
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.plan { display: flex; flex-direction: column; }
.plan ul { margin-bottom: 28px !important; }
.plan-cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--ink); font: 500 14px/1 var(--sans); transition: background .3s, color .3s; }
.plan-cta:hover { background: var(--ink); color: var(--paper); }
.plan.featured .plan-cta { background: #f3ede4; color: var(--ink); border-color: #f3ede4; }
.plan.custom { background: transparent; border-style: dashed; }
.plan.custom h3 { font-style: italic; }
html[dir="rtl"] .plan h3 { font-family: "IBM Plex Sans Arabic", var(--sans); font-size: 38px; }
.plan { position: relative; padding: 32px 30px 34px; border-radius: 28px; background: var(--card); border: 1px solid var(--line); }
.plan-k { margin: 0 0 22px; display: flex; justify-content: space-between; gap: 12px; font: 400 12px/1 var(--mono); color: var(--ink-3); }
.plan-k em { font-style: normal; color: var(--amber); }
html[dir="rtl"] .plan-k em { font-family: "IBM Plex Sans Arabic", var(--sans); }
.plan h3 { margin: 0; font: 400 52px/1 var(--serif); }
.plan-d { margin: 10px 0 22px; color: var(--ink-2); }
.plan-moments { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.plan-moments span { padding: 6px 10px; border-radius: 999px; font: 400 11.5px/1 var(--mono); background: rgba(185, 114, 47, .1); color: #7a4517; }
.plan ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.plan li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; display: flex; gap: 10px; }
.plan li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .62em; border-radius: 50%; background: var(--ink-3); }
.plan.featured { background: linear-gradient(160deg, #1c1a20, #2a2128); color: #f3ede4; border-color: transparent; box-shadow: 0 50px 90px -50px rgba(60, 30, 20, .6); }
.plan.featured .plan-d { color: rgba(243, 237, 228, .72); }
.plan.featured ul, .plan.featured li { border-color: rgba(255, 255, 255, .1); }
.plan.featured li::before { background: var(--accent); }
.plan.featured .plan-moments span { background: rgba(255, 200, 140, .14); color: #f2c08d; }
.plan-note { margin: 36px 0 0; max-width: 46em; color: var(--ink-3); font-size: 15px; }
.plan-note a { color: var(--ink); border-bottom: 1px solid var(--ink); }

/* deployment */
.deploy { background: var(--paper-2); }
.dep-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 56px; }
.dep-head .title { max-width: 16ch; }
.dep-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.dep-toggle button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 12px 20px; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--ink-2); transition: color .4s; white-space: nowrap; }
.dep-toggle button[aria-selected="true"] { color: var(--paper); }
.dep-knob { position: absolute; top: 5px; bottom: 5px; inset-inline-start: 5px; width: calc(50% - 5px); border-radius: 999px; background: var(--ink); transition: inset-inline-start .6s var(--ease); }
.dep-toggle.private .dep-knob { inset-inline-start: 50%; }
.arch { position: relative; padding: 70px 40px 40px; border-radius: 32px; background: var(--card); border: 1px solid var(--line); overflow: hidden; }
.arch-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 64px 1fr 64px 1.5fr 64px 1fr; align-items: center; }
.arch h4 { margin: 0 0 14px; font: 400 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.arch-grid { align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 10px; }
.col > h4 + * { margin-top: auto; }
.col > :last-child { margin-bottom: auto; }
.link { align-self: center; margin-top: 24px; }
.node { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 24px -22px rgba(40, 26, 10, .5); transition: transform .5s var(--ease), border-color .3s; }
.node:hover { transform: translateY(-2px); border-color: var(--ink-3); }
.node b { font: 500 14.5px/1.3 var(--sans); display: block; }
.node small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.node.gw { padding: 22px 18px; }
.pf { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-radius: 18px; background: #1b1814; }
.pf span { padding: 12px 12px; border-radius: 10px; background: rgba(255, 255, 255, .07); color: #f3ede4; font: 500 13px/1.25 var(--sans); }
.pf span.ai { background: linear-gradient(135deg, rgba(0, 169, 227, .35), rgba(0, 169, 227, .12)); }
.link { position: relative; height: 120px; display: grid; align-content: space-evenly; }
.link i { position: relative; height: 1px; background: repeating-linear-gradient(90deg, var(--ink-3) 0 3px, transparent 3px 7px); opacity: .7; }
.link i::after { content: ""; position: absolute; top: -2.5px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(0, 169, 227, .8); animation: flow 2.2s linear infinite; }
.link i:nth-child(2)::after { animation-delay: -.75s; } .link i:nth-child(3)::after { animation-delay: -1.5s; }
@keyframes flow { from { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: calc(100% - 6px); opacity: 0; } }
html[dir="rtl"] .link i::after { animation-name: flowR; }
@keyframes flowR { from { left: calc(100% - 6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { left: 0; opacity: 0; } }
.arch-zone { position: absolute; z-index: 0; border-radius: 22px; transition: left .8s var(--ease), top .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .6s; }
.arch-zone span { position: absolute; top: 12px; inset-inline-start: 16px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
html[dir="rtl"] .arch-zone span { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; font-size: 12.5px; }
.arch-zone.site { border: 1.5px dashed rgba(185, 114, 47, .55); background: rgba(185, 114, 47, .05); }
.arch-zone.site span { color: #9a5a22; }
.arch-zone.cloud { border: 1px solid rgba(0, 169, 227, .35); background: linear-gradient(160deg, rgba(0, 169, 227, .1), rgba(0, 169, 227, .03)); }
.arch-zone.cloud span { color: #0a78a8; }
.arch[data-mode="private"] .arch-zone.cloud { opacity: 0; }
.dep-notes { position: relative; margin-top: 30px; min-height: 60px; max-width: 52em; }
.dep-notes p { margin: 0; color: var(--ink-2); position: absolute; inset: 0 auto auto 0; opacity: 0; transition: opacity .5s; }
html[dir="rtl"] .dep-notes p { inset: 0 0 auto auto; }
.dep-notes p.on { opacity: 1; position: relative; }
.dep-notes b { color: var(--ink); font-weight: 500; }

/* devices */
.devices { background: var(--paper); }
.dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dev { padding: 0 0 8px; }
.dev figure { margin: 0 0 24px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border-radius: 28px; background: radial-gradient(80% 70% at 50% 40%, #fffdf9, #ece3d5); }
.dev figure img { width: 88%; transition: transform 1.2s var(--ease); }
.dev:hover figure img { transform: scale(1.04); }
.dev-t { margin: 0 0 10px; font: 400 11.5px/1 var(--mono); color: var(--amber); letter-spacing: .04em; }
.dev h3 { margin: 0; font: 400 32px/1.05 var(--serif); }
html[dir="rtl"] .dev h3 { font-family: "IBM Plex Sans Arabic", var(--sans); font-size: 24px; }
.dev p:last-child { margin: 10px 0 0; color: var(--ink-2); font-size: 16px; max-width: 26em; }

/* contact — dusk */
.contact { color: #f3ede4; background: radial-gradient(90% 70% at 85% 110%, rgba(232, 140, 80, .45), transparent 60%), linear-gradient(180deg, #1a1820, #231c22 60%, #2d1f1f); padding-bottom: 130px; }
.contact .index { color: rgba(243, 237, 228, .55); }
.ct-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 86px; border-top: 1px solid rgba(243, 237, 228, .35); }
.ct-grid > * { padding: 24px 24px 0 0; }
.ct-grid > * + * { padding-inline: 24px 0; border-inline-start: 1px solid rgba(243, 237, 228, .14); }
html[dir="rtl"] .ct-grid > * { padding: 24px 0 0 24px; }
html[dir="rtl"] .ct-grid > * + * { padding: 24px 24px 0 0; }
.ct-grid span { display: block; font: 400 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(243, 237, 228, .5); margin-bottom: 12px; }
.ct-grid b { font: 400 18px/1.45 var(--sans); }
.ct-grid a b { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.ct-grid a:hover b { background-size: 100% 1px; }
.ct-person b { display: block; font: 400 30px/1.1 var(--serif); }
.ct-person span { margin: 10px 0 0; }
.ct-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 34px; margin-top: 70px; }
.contact .btn-ink { background: #f3ede4; color: var(--ink); }
.contact .btn-ink:hover { background: #fff; }

.footer { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; padding: 34px var(--gutter) 110px; background: #17131a; color: rgba(243, 237, 228, .7); border-top: 1px solid rgba(255, 255, 255, .06); }
.footer img { height: 30px; width: auto; padding: 4px 8px; border-radius: 8px; background: #f4ede3; box-sizing: content-box; }
.footer nav { display: flex; gap: 30px; justify-content: center; font-size: 14px; }
.footer nav a:hover { color: #fff; }
.legal { margin: 0; font: 400 12px/1 var(--mono); letter-spacing: .04em; opacity: .7; }

/* reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Topdata AI assistant ---------- */
.assistant { position: fixed; inset-inline-end: var(--gutter); bottom: 26px; z-index: 80; }
.ai-fab { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 22px 0 16px; border: 0; border-radius: 999px; cursor: pointer; background: var(--ink); color: var(--paper); font: 500 14px/1 var(--sans);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 24px 44px -20px rgba(40, 22, 8, .7); transition: transform .4s var(--ease), opacity .3s; }
html[dir="rtl"] .ai-fab { padding: 0 16px 0 22px; }
.ai-fab:hover { transform: translateY(-2px); }
.assistant.nudge:not(.open) .ai-fab { animation: nudge 2.4s var(--ease) 2; }
@keyframes nudge { 12% { transform: translateY(-5px); } 24% { transform: none; } }
.assistant.open .ai-fab { opacity: 0; pointer-events: none; transform: scale(.9); }
.ai-panel { position: absolute; inset-inline-end: 0; bottom: 0; width: min(390px, calc(100vw - 32px)); height: min(610px, calc(100vh - 120px)); display: grid; grid-template-rows: auto 1fr auto auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(40, 22, 8, .5);
  transform-origin: bottom right; transform: translateY(16px) scale(.97); opacity: 0; pointer-events: none; transition: transform .5s var(--ease), opacity .35s; }
html[dir="rtl"] .ai-panel { transform-origin: bottom left; }
.assistant.open .ai-panel { transform: none; opacity: 1; pointer-events: auto; }
.ai-head { display: flex; align-items: center; gap: 14px; padding: 18px 18px 16px 22px; border-bottom: 1px solid var(--line); }
.ai-id { flex: 1; }
.ai-head b { display: block; font: 500 16px/1.2 var(--sans); }
.ai-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font: 400 11px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ai-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2fbf71; }
.ai-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; font-size: 20px; line-height: 1; }
.ai-log { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.ai-msg { max-width: 88%; font-size: 15px; line-height: 1.5; animation: msg .5s var(--ease); }
@keyframes msg { from { opacity: 0; transform: translateY(6px); } }
.ai-msg.bot { align-self: flex-start; }
.ai-msg.me { align-self: flex-end; padding: 10px 14px; border-radius: 16px; background: var(--ink); color: var(--paper); }
.dots { display: inline-flex; gap: 4px; padding: 6px 0; } .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-3); animation: dot 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: .25; } }
.ai-msg.bot:has(.ai-contact) { max-width: 100%; width: 100%; }
.ai-contact { border-top: 1px solid var(--line); }
.ai-contact b { display: block; margin-top: 14px; font: 500 15px/1.3 var(--sans); }
.ai-contact p { margin: 4px 0 8px; color: var(--ink-3); font-size: 13px; }
.ai-c { display: grid; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ai-c span { font: 400 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.ai-c:hover { color: #0a6fa0; }
.ai-chips { display: flex; gap: 8px; padding: 0 20px 12px; overflow-x: auto; scrollbar-width: none; transition: opacity .3s; }
.ai-chips.busy { opacity: .35; pointer-events: none; }
.ai-chip { flex: none; border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 9px 13px; font: 400 13px/1 var(--sans); cursor: pointer; transition: border-color .3s; }
.ai-chip:hover { border-color: var(--ink); }
.ai-form { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.ai-form input { flex: 1; height: 44px; border: 0; background: transparent; padding: 0 8px; font: 400 15px/1 var(--sans); outline: none; color: var(--ink); }
.ai-form button { width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer; background: var(--ink); color: var(--paper); font-size: 18px; }
.ai-mark { width: 26px; height: 26px; flex: none; overflow: visible; }
.ai-mark .blades { fill: none; stroke: var(--paper); stroke-width: 1.6; stroke-dasharray: 9.6 3.5; stroke-linecap: round; transform-origin: 16px 16px; animation: aiSpin 9s linear infinite; }
.ai-mark .ring { fill: none; stroke: var(--paper); stroke-width: .9; opacity: .45; }
.ai-mark .iris { fill: var(--accent); transform-origin: 16px 16px; animation: aiIris 3.2s var(--ease) infinite; }
.ai-mark .pupil { fill: var(--ink); }
.ai-mark .spark { fill: #f2b56b; transform-origin: 26.5px 5.5px; animation: aiSpark 2.8s ease-in-out infinite; }
.ai-mark.on-light { width: 34px; height: 34px; }
.ai-mark.on-light .blades { stroke: var(--ink); }
.ai-mark.on-light .ring { stroke: var(--ink); opacity: .25; }
.assistant.thinking .ai-mark .blades { animation-duration: 1.4s; }
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiIris { 0%, 100% { transform: scale(1); } 50% { transform: scale(.78); } }
@keyframes aiSpark { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }

/* ---------- bidi ---------- */
.ltr, a[href^="tel:"] b, a[href^="mailto:"] b, .ai-c b, .ai-c[href^="tel:"], .ai-c[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] a[href^="tel:"] b, html[dir="rtl"] a[href^="mailto:"] b { display: inline-block; text-align: right; }
html[dir="rtl"] .ai-status, html[dir="rtl"] .ai-c span { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-links { display: none; }
  .arch-grid { grid-template-columns: 1fr 40px 1fr 40px 1.4fr 40px 1fr; }
  .arch { padding: 64px 24px 28px; }
}
@media (max-width: 1100px) { .dayrail { display: none; } .plan-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 960px) {
  .plan-grid, .dev-grid { grid-template-columns: 1fr; }
  .ct-grid { grid-template-columns: 1fr 1fr; }
  .ct-grid > * { padding: 22px 0 !important; border-inline-start: 0 !important; border-bottom: 1px solid rgba(243, 237, 228, .14); }
  .app .aix { grid-template-columns: 1fr; justify-items: center; }
  .arch-grid { grid-template-columns: 1fr; }
  .link { height: 44px; display: flex; justify-content: center; gap: 22px; }
  .link i { width: 1px; height: 100%; background: repeating-linear-gradient(180deg, var(--ink-3) 0 3px, transparent 3px 7px); }
  .link i::after { left: -2.5px !important; animation-name: flowV !important; }
  @keyframes flowV { from { top: 0; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } to { top: calc(100% - 6px); opacity: 0; } }
  .col { display: grid; grid-template-columns: repeat(3, 1fr); }
  .col > h4 + *, .col > :last-child { margin: 0; }
  .col h4 { grid-column: 1 / -1; margin: 0 0 4px; }
  .link { margin-top: 0; align-self: auto; }
  .c-gw, .c-pf { grid-template-columns: 1fr; }
  .num-row { grid-template-columns: 1fr; }
  .num + .num { padding-inline: 0; border-inline-start: 0; border-top: 1px solid rgba(243, 237, 228, .22); margin-top: 34px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { height: 62px; }
  .brand img { height: 28px; }
  .nav-actions { gap: 14px; }
  .lang { font-size: 13px; }
  .nav-signin { padding: 9px 14px; font-size: 13px; }
  .section { padding: 110px 20px; }
  .chapter { min-height: 135vh; justify-content: flex-end; padding: 0 16px 9vh; }
  .chapter .copy { width: 100%; }
  .chapter .copy::before { inset: -14% -16px -40px; background: linear-gradient(180deg, rgba(var(--scrim), 0), rgba(var(--scrim), .86) 22%, rgba(var(--scrim), .94)); }
  .chapter .index .t { font-size: 58px; margin-bottom: 8px; }
  html[dir="rtl"] .chapter .index .t { font-size: 58px; }
  .chapter .title { font-size: 31px; }
  .chapter .body { font-size: 15.5px; margin-top: 14px; }
  .note, .report { margin-top: 18px; }
  .note-feed { height: 120px; }
  .chapter.hero { padding-bottom: 7vh; }
  .display { font-size: 52px; }
  html[dir="rtl"] .display { font-size: 40px; }
  .hero-cta { gap: 22px; margin-top: 28px; }
  .num strong { font-size: 88px; }
  .plan { padding: 26px 22px 28px; }
  .arch { padding: 56px 14px 18px; border-radius: 24px; }
  .col { grid-template-columns: 1fr; }
  .ct-grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; gap: 20px; } .footer nav { justify-content: flex-start; flex-wrap: wrap; }
  .ai-fab-text { display: none; } .ai-fab { width: 50px; padding: 0 !important; justify-content: center; }
  .dep-toggle button { padding: 11px 14px; font-size: 13px; }
}
@media (min-width: 641px) and (max-height: 820px) {
  .chapter .index .t, html[dir="rtl"] .chapter .index .t { font-size: 58px; margin-bottom: 8px; }
  .chapter .index { margin-bottom: 16px; }
  .chapter .title { font-size: clamp(30px, 2.7vw, 40px); }
  .chapter .body { margin-top: 14px; font-size: 16px; }
  .note, .report { margin-top: 18px; }
  .note-feed { height: 112px; }
  .report dt { font-size: 26px; } .report dl div { padding: 8px 0 10px; }
  .plan-tag { margin-top: 12px; }
  .dayrail { bottom: 92px; padding: 12px 14px 14px 18px; } .dayrail ol { gap: 9px; } .dr-now b { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .note, .report { translate: none; scale: none; }
}

/* ================= round 2–3 additions ================= */
/* hero arrow link */
.link-arrow.down::after { content: "↓"; }
.link-arrow.down:hover::after { transform: translateY(3px); }
html[dir="rtl"] .link-arrow.down::after { content: "↓"; }

/* menu (≤1180px) */
.menu-btn { display: none; position: relative; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 999px; background: none; cursor: pointer; }
.menu-btn i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.menu-btn i:first-child { top: 17px; } .menu-btn i:last-child { top: 25px; }
body.menu-open .menu-btn i:first-child { top: 21px; transform: rotate(45deg); }
body.menu-open .menu-btn i:last-child { top: 21px; transform: rotate(-45deg); }
.btn-line { border: 1px solid var(--ink); background: transparent; color: var(--ink); }
.msheet { position: fixed; inset: 0; z-index: 49; padding: 110px 24px 40px; background: var(--paper); display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility .45s; }
body.menu-open .msheet { opacity: 1; visibility: visible; transform: none; }
body.menu-open .nav { color: var(--ink) !important; background: transparent !important; border-color: transparent !important; transform: none !important; }
body.menu-open .brand { background: none !important; }
.msheet nav { display: grid; }
.msheet nav a { padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 34px/1.1 var(--serif); }
html[dir="rtl"] .msheet nav a { font-family: "IBM Plex Sans Arabic", var(--sans); font-size: 26px; }
.msheet-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.msheet-cta .btn { flex: 1; }
@media (max-width: 1180px) { .menu-btn { display: inline-block; } }
@media (max-width: 640px) { .nav-signin { display: none; } }

/* bridge line */
.bridge { position: relative; z-index: 2; padding: 150px var(--gutter) 40px; background: var(--paper-2); }
.bridge p { margin: 0 auto; max-width: 24ch; text-align: center; font: 400 clamp(30px, 3.4vw, 54px)/1.08 var(--serif); text-wrap: balance; }
html[dir="rtl"] .bridge p { font-family: "IBM Plex Sans Arabic", var(--sans); font-size: clamp(24px, 2.6vw, 40px); line-height: 1.4; }

/* app: pinned, scenes follow the scroll */
.app { padding-top: 0; padding-bottom: 0; }
.app-stick { min-height: 100vh; display: flex; align-items: center; padding: 100px 0 60px; }
@media (min-width: 961px) and (min-height: 620px) {
  .app { height: 320vh; }
  .app-stick { position: sticky; top: 0; height: 100vh; padding: 84px 0 24px; }
  .app .dev-phone { width: min(380px, calc((100vh - 120px) * 380 / 790)); }
  .app .aix { grid-template-columns: minmax(0, 1fr) auto; }
}
.app .aix { width: 100%; }

/* contact sub */
.ct-sub { margin: 22px 0 0; font: 400 clamp(20px, 1.8vw, 28px)/1.3 var(--serif); font-style: italic; color: rgba(243, 237, 228, .7); }
html[dir="rtl"] .ct-sub { font-family: "IBM Plex Sans Arabic", var(--sans); font-style: normal; }

/* floating assistant: icon only after the hero */
body.fab-compact .ai-fab-text { display: none; }
body.fab-compact .ai-fab { width: 52px; height: 52px; padding: 0 !important; justify-content: center; }
.ai-chips { flex-wrap: wrap; max-height: 112px; overflow-y: auto; }
.footer { padding-inline-end: calc(var(--gutter) + 72px); }

/* mobile: each moment on its own paper card */
@media (max-width: 640px) {
  .chapter .copy::before { inset: -22px -14px; border-radius: 28px; background: rgba(var(--scrim), .9);
    -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 30px 60px -40px rgba(40, 26, 10, .5); }
  .chapter.tone-dark .copy::before { background: rgba(var(--scrim), .86); }
  .chapter.hero .copy::before { inset: -22px -14px; }
  .chapter .copy { margin-bottom: 8px; }
  .bridge { padding: 100px 20px 20px; }
}
body.menu-open .assistant, body.menu-open .dayrail { opacity: 0; pointer-events: none; }

/* ================= round 4: clock in the nav, Arabic display face ================= */
.navclock { display: flex; align-items: center; gap: 9px; margin-inline: 22px auto; padding-inline-start: 20px; border-inline-start: 1px solid rgba(127, 120, 110, .35); transition: opacity .5s; }
.navclock b { font: 400 25px/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: .01em; min-width: 2.7em; }
.navclock.is-night .sun, .navclock.is-night .rays { opacity: 0; }
.navclock.is-night .moon { opacity: 1; }
.dayline { position: absolute; inset-inline: 0; bottom: -1px; height: 2px; pointer-events: none; transition: opacity .5s; }
.dayline > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--fill, 0%); background: linear-gradient(90deg, #e9a24f, #c86b5a 55%, #3a5cff 80%, #e9a24f); }
html[dir="rtl"] .dayline > i { background: linear-gradient(270deg, #e9a24f, #c86b5a 55%, #3a5cff 80%, #e9a24f); }
.dayline ol { list-style: none; margin: 0; padding: 0; }
.dayline li { position: absolute; top: -2px; width: 6px; height: 6px; margin-inline-start: -3px; border-radius: 50%; background: currentColor; opacity: .35; transition: opacity .4s, transform .4s var(--ease); }
.dayline li[data-k="1"] { inset-inline-start: 16.66%; } .dayline li[data-k="2"] { inset-inline-start: 33.33%; } .dayline li[data-k="3"] { inset-inline-start: 50%; }
.dayline li[data-k="4"] { inset-inline-start: 66.66%; } .dayline li[data-k="5"] { inset-inline-start: 83.33%; } .dayline li[data-k="6"] { inset-inline-start: calc(100% - 4px); }
.dayline li.on { opacity: 1; transform: scale(1.4); }
body.past-story .navclock, body.past-story .dayline { opacity: 0; }
body:not(.past-story) .nav.hide { transform: none; }
@media (max-width: 640px) {
  .navclock { margin-inline: 12px auto; padding-inline-start: 12px; gap: 6px; }
  .navclock b { font-size: 20px; }
  .navclock .dr-orb { width: 16px; height: 16px; }
}
html[dir="rtl"] .display, html[dir="rtl"] .title, html[dir="rtl"] .bridge p, html[dir="rtl"] .plan h3, html[dir="rtl"] .dev h3,
html[dir="rtl"] .aix-list button b, html[dir="rtl"] .msheet nav a, html[dir="rtl"] .ct-sub {
  font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif; font-weight: 500; letter-spacing: 0; }
html[dir="rtl"] .display .line:last-child > span { font-weight: 500; }
.num strong, .report dt, .chapter .index .t, .navclock b { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .num strong { text-align: right; }
.bbox.track { animation: track 3.4s ease-in-out infinite alternate; }

/* R7: day ticks never outlive the story; FAB never sits on moment copy (phones) */
body.past-story .dayline, body.past-story .navclock, .nav.hide .dayline { opacity: 0; visibility: hidden; }
@media (max-width: 640px) { .chapter .copy { padding-bottom: 76px; } .chapter .copy::before { bottom: -22px; } }
@media (max-width: 640px) { body:not(.past-story) .assistant:not(.open) { opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .4s, transform .4s; } .assistant { transition: opacity .4s, transform .4s; } }

/* ---------- script fonts: हिन्दी (Devanagari) · 中文 (Simplified Chinese) — localisation ----------
   Latin keeps Geist; Devanagari / CJK fall through to Noto, which lang.js loads only when that language
   is chosen (display=swap). Mono labels fall back to the same script font. Neither script gets
   tracking (it breaks the Devanagari headline bar and spaces CJK unevenly); both get a little more leading. */
html[lang="hi"] { --sans: "Geist", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", ui-monospace, monospace;
  --serif: "Instrument Serif", "Noto Serif Devanagari", "Noto Sans Devanagari", "Nirmala UI", Georgia, serif; }
html[lang="zh"] { --sans: "Geist", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", ui-monospace, monospace;
  --serif: "Instrument Serif", "Noto Serif SC", "Songti SC", "SimSun", Georgia, serif; }
html:is([lang="hi"], [lang="zh"]) body * { letter-spacing: 0 !important; }
html:is([lang="hi"], [lang="zh"]) body .lang { font-family: var(--sans); }
html[lang="hi"] body { line-height: 1.7; }
html[lang="zh"] body { line-height: 1.75; }
html[lang="hi"] :is(.display, .title, h1, h2, h3, .bridge p, .plan h3, .dev h3, .msheet nav a, .ct-sub) { line-height: 1.34; }
html[lang="zh"] :is(.display, .title, h1, h2, h3, .bridge p, .plan h3, .dev h3, .msheet nav a, .ct-sub) { line-height: 1.24; }
html[lang="hi"] .display .line { padding-bottom: .12em; }html:is([lang="hi"], [lang="zh"]) .ct-sub { font-style: normal; }
/* headings: CJK measures in em, not ch (13ch ≈ 7 Han characters); balance lines so no character is stranded */
html:is([lang="hi"], [lang="uz"], [lang="zh"]) :is(.display, .title) { text-wrap: balance; }
html[lang="zh"] .title { max-width: min(100%, 14em); }
html[lang="zh"] :is(.display, .title, h1, h2, h3, .bridge p) { word-break: keep-all; line-break: strict; overflow-wrap: anywhere; }   /* break Chinese headings at punctuation, not mid-word */
html[lang="zh"] .bridge p { max-width: 16em; }

/* QA final: focus ring on the assistant input; FAB steps aside for the contact block + phone tab bar on phones */
.ai-form:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
@media (max-width: 640px) { body.fab-away .assistant:not(.open) { opacity: 0; pointer-events: none; transform: translateY(12px); } }

/* Oʻzbekcha: the modifier letters ʻ ʼ come from a two-glyph Noto subset (lang.js); everything else stays Geist */
html[lang="uz"] { --sans: "Geist", "Noto Sans", ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", "Noto Sans", ui-monospace, monospace; --serif: "Instrument Serif", "Noto Serif", Georgia, serif; }
/* QA-21: on narrow screens the heading comes first and is what #app lands on */
#appSection .aix-copy { order: -1; } #appSection .dev-phone { order: 0; }
@media (max-width: 960px) { .app-stick { padding-top: 24px; } }
#app .sec-head { scroll-margin-top: 88px; }
body.menu-open .msheet { transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s; }

/* =====================================================================================
   V2 × V3 merge — "Behind the scenes" (moments 6–12) + warm-graphite architecture
   ===================================================================================== */
:root { --xray: 0; --ink-line: rgba(27, 24, 20, .2); --amber-2: #b8742c; }
/* pacing: the day moments breathe a little less, the reveal moves briskly (total ≈ +15%) */
.chapter { min-height: 135vh; }
.chapter.hero { min-height: 100vh; }
.chapter.xr { min-height: 92vh; }
.chapter.xr-intro { min-height: 80vh; }

/* blueprint grid on warm paper (fades in with the glass) */
.grid-veil { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: calc(var(--xray) * .85);
  background-image: linear-gradient(rgba(120, 78, 36, .075) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 78, 36, .075) 1px, transparent 1px),
    linear-gradient(rgba(120, 78, 36, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 78, 36, .035) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: -1px -1px;
  -webkit-mask: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 85%); mask: radial-gradient(ellipse 75% 70% at 50% 50%, #000 30%, transparent 85%); }
body.past-story .grid-veil { opacity: 0; }

/* device callouts + gateway / platform tags (overlay.js) — ink hairlines, amber pings, no cyan */
.overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; overflow: visible; }
.overlay .lead { fill: none; stroke: var(--ink); stroke-width: 1; opacity: .5; }
.overlay .anchor { fill: #fbf6ee; stroke: var(--ink); stroke-width: 1.2; }
.overlay .ping { fill: none; stroke: var(--amber-2); stroke-width: 1; }
.tags { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; display: grid; gap: 3px; padding: 7px 10px 8px; white-space: nowrap; background: rgba(251, 247, 240, .92); border: 1px solid var(--ink-line); border-radius: 4px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink); text-transform: uppercase; opacity: 0; transition: opacity .35s var(--ease); will-change: transform; }
.tag small { font: 400 10px/1 var(--mono); color: var(--ink-3); letter-spacing: .05em; }
.tag small::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-end: 6px; border-radius: 50%; background: #2fbf71; vertical-align: 1px; }
.tag.big { padding: 9px 12px 10px; background: #2a2420; color: #f6efe4; border-color: #2a2420; }
.tag.big small { color: rgba(246, 239, 228, .62); }
.tag.big small::before { background: #f1b36a; }
.tag.on { opacity: 1; }
body.past-story .tags, body.past-story .overlay { display: none !important; }
html[dir="rtl"] .tag { letter-spacing: 0; }
html[dir="rtl"] .tag small { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; font-size: 12px; }

/* clock: "Behind the scenes" while the house is glass */
.navclock .behind { display: none; font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.navclock.behind b, .navclock.behind .dr-orb { display: none; }
.navclock.behind .behind { display: inline; }
.navclock.behind::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--amber-2); box-shadow: 0 0 0 3px rgba(184, 116, 44, .15); }
html[dir="rtl"] .navclock .behind { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
.dayline li.rv { width: 26px; height: 2px; top: 0; margin-inline-start: -13px; border-radius: 2px; background: var(--amber-2); }
.dayline li[data-k="9"] { inset-inline-start: 88%; }
.dayline li[data-k="13"] { inset-inline-start: calc(100% - 4px); }
.dayline li[data-k="5"] { inset-inline-start: 62%; }
.dayline li[data-k="4"] { inset-inline-start: 49.6%; } .dayline li[data-k="3"] { inset-inline-start: 37.2%; } .dayline li[data-k="2"] { inset-inline-start: 24.8%; } .dayline li[data-k="1"] { inset-inline-start: 12.4%; }

/* reveal copy (V3 structures in V2 type: Instrument Serif titles, Geist text, mono labels) */
.chapter.xr .index { display: flex; align-items: baseline; gap: 12px; }
.chapter.xr .index .n { font: 500 12px/1 var(--mono); color: var(--amber-2); letter-spacing: .04em; }
.chapter.xr-intro .index .t { display: inline; margin: 0; font-size: 26px; }
.chapter.xr-intro .title { font-size: clamp(40px, 3.8vw, 64px); }
.xr .spec { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--ink-line); }
.xr .spec li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.xr .spec em { font: 400 11.5px/1.6 var(--mono); font-style: normal; letter-spacing: .05em; color: var(--ink-3); text-transform: uppercase; text-align: end; }
.xr .path { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink-line); }
.xr .path li { position: relative; padding: 14px 12px 0 0; display: grid; gap: 6px; }
.xr .path li + li { padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
html[dir="rtl"] .xr .path li { padding: 14px 0 0 12px; }
html[dir="rtl"] .xr .path li + li { padding-inline-start: 14px; }
.xr .path b { font: 500 11px/1 var(--mono); color: var(--amber-2); }
.xr .path span { font-size: 15px; line-height: 1.25; }
.xr .path em { font: 400 11px/1.3 var(--mono); font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.xr .infer { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--ink-line); font-size: 14.5px; }
.xr .infer li { display: grid; grid-template-columns: 96px 1fr auto auto; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); opacity: .2; transform: translateX(-6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html[dir="rtl"] .xr .infer li { transform: translateX(6px); }
.xr .infer li.on { opacity: 1; transform: none; }
.xr .infer em { font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--ink-2); }
.xr .infer li:nth-child(n+3) em { color: var(--amber-2); }
.xr .infer b { font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.xr .infer small { font: 400 10.5px/1 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.xr .rules { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 8px; }
.xr .rules li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(251, 247, 240, .75); font-size: 14.5px; }
.xr .rules code { font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--ink-3); }
.xr .rules code:first-child { padding: 5px 7px; border-radius: 5px; background: #2a2420; color: #f6efe4; }
.xr .rules b { font-weight: 500; }
html[dir="rtl"] .xr .rules code:nth-child(3) { transform: scaleX(-1); }
.xr .live-stats { display: flex; margin: 30px 0 0; border-top: 1px solid var(--ink-line); }
.xr .live-stats div { flex: 1; padding-top: 16px; }
.xr .live-stats dt { font: 400 clamp(44px, 4.4vw, 70px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.xr .live-stats dd { margin: 10px 0 0; font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.echo { display: flex; gap: 12px; align-items: baseline; margin: 24px 0 0; padding-top: 16px; border-top: 1px dashed rgba(184, 116, 44, .45); font: italic 400 clamp(18px, 1.35vw, 21px)/1.35 var(--serif); color: var(--ink-2); }
.echo .t { flex: none; font: 500 11.5px/1 var(--mono); font-style: normal; letter-spacing: .04em; color: var(--amber-2); }
.echo .t:empty { display: none; }
html[dir="rtl"] .echo { font-family: "Noto Naskh Arabic", "IBM Plex Sans Arabic", serif; font-style: normal; font-size: 17px; line-height: 1.6; }
html[dir="rtl"] .xr .spec em, html[dir="rtl"] .xr .path em, html[dir="rtl"] .xr .live-stats dd, html[dir="rtl"] .xr .infer em, html[dir="rtl"] .xr .rules code, html[dir="rtl"] .chapter.xr .index .n {
  font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; font-size: 13px; }
.chapter.xr .copy::before { background: radial-gradient(closest-side, rgba(244, 237, 227, .92), rgba(244, 237, 227, .7) 55%, rgba(244, 237, 227, 0)); }
@media (min-width: 641px) and (max-height: 820px) {
  .xr .spec, .xr .path, .xr .infer, .xr .rules, .xr .live-stats { margin-top: 16px; }
  .xr .spec li, .xr .infer li { padding: 8px 0; } .xr .rules li { padding: 8px 12px; }
  .echo { margin-top: 14px; padding-top: 10px; font-size: 17px; }
  .xr .live-stats dt { font-size: 44px; }
}
@media (max-width: 640px) {
  .chapter.xr { min-height: 110vh; }
  .xr .infer li { grid-template-columns: 84px 1fr auto; } .xr .infer small { display: none; }
  .xr .rules li { grid-template-columns: auto 1fr; } .xr .rules li code:nth-child(3) { display: none; } .xr .rules li b { grid-column: 2; }
  .xr .path span { font-size: 14px; }
  .echo { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) { .xr .infer li { opacity: 1; transform: none; } }

/* ---------- deployment · architecture (from V3) in warm graphite ---------- */
.arch { --g0: #1d1915; --g1: #29221c; --g-line: rgba(243, 235, 223, .13); --g-ink: #f3ebdf; --g-ink-2: #c9bca9; --g-ink-3: #a99b86; --amber: #e9a15a;
  background: radial-gradient(120% 90% at 85% 0%, #3a2f25 0%, rgba(58, 47, 37, 0) 60%), radial-gradient(90% 70% at 0% 100%, #2b241d 0%, rgba(43, 36, 29, 0) 70%), linear-gradient(180deg, var(--g1), var(--g0));
  color: var(--g-ink); overflow: hidden; }
.arch .index { color: var(--g-ink-3); }
.arch .body { color: var(--g-ink-2); }
.arch-head { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6vw; align-items: end; margin-bottom: 64px; }
.arch-head .title { max-width: 14ch; }
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 30px; padding: 4px; border: 1px solid var(--g-line); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.seg button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 12px 22px; border-radius: 999px; font: 500 14px/1 var(--sans); color: var(--g-ink-2); transition: color .4s; white-space: nowrap; }
.seg button.on { color: var(--g0); }
.seg-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; inset-inline-start: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--g-ink); transition: transform .6s var(--ease); }
.seg[data-mode="private"] .seg-thumb { transform: translateX(100%); }
html[dir="rtl"] .seg[data-mode="private"] .seg-thumb { transform: translateX(-100%); }
.arch-fig { margin: 0; border-top: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line); position: relative; }
.arch-canvas { position: relative; padding: 34px 0 10px; }
.arch-canvas svg { display: block; width: 100%; height: auto; overflow: visible; }
.arch-canvas .v { display: none; }
.arch-cap { display: flex; align-items: baseline; gap: 18px; min-height: 58px; padding: 18px 0; border-top: 1px solid var(--g-line); }
.arch-cap-k { flex: none; font: 500 11px/1 var(--mono); letter-spacing: .1em; color: var(--amber); }
.arch-cap-k:empty { display: none; }
.arch-cap-v { color: var(--g-ink-2); font-size: 15px; }
.arch-notes { display: grid; grid-template-columns: 1fr 1fr; margin-top: 56px; }
.arch-note { padding-inline-end: 32px; transition: opacity .6s var(--ease); }
.arch-note + .arch-note { padding-inline: 32px 0; border-inline-start: 1px solid var(--g-line); }
.arch-note ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-line); }
.arch-note li { padding: 13px 0; border-bottom: 1px solid var(--g-line); font-size: 15px; color: var(--g-ink); display: flex; gap: 12px; }
.arch-note li::before { content: "—"; color: var(--g-ink-3); }
.arch[data-mode="cloud"] .arch-note[data-for="private"], .arch[data-mode="private"] .arch-note[data-for="cloud"] { opacity: .4; }
.ad { direction: ltr; unicode-bidi: isolate; }
.ad text { font-family: var(--sans); }
.ad .lbl { font: 400 15px/1 var(--sans); fill: var(--g-ink); }
.ad .sub { font: 400 10.5px/1 var(--mono); letter-spacing: .08em; fill: var(--g-ink-3); text-transform: uppercase; }
.ad .cap { font: 500 10.5px/1 var(--mono); letter-spacing: .12em; fill: var(--g-ink-3); }
.ad .node rect.box { fill: rgba(255, 255, 255, .03); stroke: rgba(243, 235, 223, .22); stroke-width: 1; transition: stroke .35s, fill .35s; }
.ad .node .ico { fill: none; stroke: var(--g-ink-2); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ad .node:hover rect.box, .ad .node.hot rect.box { stroke: var(--g-ink); fill: rgba(255, 255, 255, .06); }
.ad .node:focus-visible { outline: none; } .ad .node:focus-visible rect.box { stroke: var(--amber); stroke-width: 2; }
.ad .node.mod rect.box { fill: rgba(255, 255, 255, .04); }
.ad .node.mod.ai rect.box { stroke: rgba(233, 161, 90, .6); }
.ad .node.mod.ai .think { fill: var(--amber); }
.ad .node.flash rect.box { stroke: #f6c88f; }
.ad .platform { fill: rgba(233, 161, 90, .05); stroke: rgba(233, 161, 90, .6); stroke-width: 1; }
.ad .site { fill: rgba(243, 235, 223, .025); stroke: rgba(243, 235, 223, .5); stroke-width: 1; stroke-dasharray: 4 5; }
.ad .site-cap { fill: var(--g-ink-2); }
.ad .zone-cap { fill: var(--amber); }
.ad .wire { fill: none; stroke: rgba(243, 235, 223, .24); stroke-width: 1; }
.ad .wire.lit { stroke: rgba(233, 161, 90, .6); }
.ad .pk { fill: #f6c88f; }
.ad .pk.out { fill: var(--g-ink); }
.ad .stay { font: 500 10.5px/1 var(--mono); letter-spacing: .1em; fill: var(--amber); }
.ad .fade { transition: opacity .6s var(--ease); }
.ad.v .lbl { font-size: 15px; } .ad.v .sub { font-size: 13px; letter-spacing: .02em; } .ad.v .cap, .ad.v .stay { font-size: 13px; letter-spacing: .06em; }
html[dir="rtl"] .ad .sub, html[dir="rtl"] .ad .cap, html[dir="rtl"] .ad .stay, html[dir="rtl"] .arch-cap-k { font-family: "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; }
@media (max-width: 960px) { .arch-head, .arch-notes { grid-template-columns: 1fr; gap: 10px; } .arch-note + .arch-note { padding: 34px 0 0; border: 0; } .arch-note { padding: 0; } }
@media (max-width: 760px) { .arch-canvas .h { display: none; } .arch-canvas .v { display: block; max-width: 460px; margin: 0 auto; } }
@media (max-width: 640px) { .arch-cap { flex-direction: column; gap: 8px; } .seg button { padding: 11px 16px; font-size: 13px; } }
/* scale: the copy sits on its own paper card above the city */
#scale .copy { padding: 26px 28px 24px; border-radius: 22px; background: rgba(247, 241, 232, .94); box-shadow: 0 30px 60px -40px rgba(60, 40, 20, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#scale .copy::before { display: none; }
@media (max-width: 640px) { #scale .copy { padding: 22px 18px 76px; } }
/* the merged architecture section must not inherit the retired v2 diagram's .arch card styles */
.section.arch { padding: 160px var(--gutter); border: 0; border-radius: 0; }
@media (max-width: 640px) { .section.arch { padding: 110px 20px; } }
@media (max-width: 640px) { .navclock.behind .behind { display: none; } .navclock { flex: none; } .brand { flex: none; } }
@media (max-width: 640px) { .chapter .copy::before { background: rgb(var(--scrim)) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: 0 -18px 40px -24px rgba(40, 26, 10, .35); } .chapter.xr .copy::before { background: #f4ede3 !important; } }
/* seven links + the clock need room: below 1360px the links live in the menu sheet */
@media (max-width: 1360px) { .nav-links { display: none; } .menu-btn { display: inline-block; } }
.nav-links a { white-space: nowrap; }
/* pacing (total ≈ +15% vs the pre-merge page) */
.chapter { min-height: 130vh; } .chapter.hero { min-height: 100vh; } .chapter.xr { min-height: 80vh; } .chapter.xr-intro { min-height: 70vh; }
@media (max-width: 640px) { .chapter { min-height: 120vh; } .chapter.xr { min-height: 100vh; } }