/* Homepage v3: fewer boxes, more air, one orchestrated motion per moment.
   Bands still run full width; .rm-wrap still caps content at --max (1600px). */

.h-sec { padding: 160px var(--pad); }
.h-sec-tight { padding: 112px var(--pad); }
@media (max-width: 1100px) { .h-sec { padding: 104px var(--pad); } .h-sec-tight { padding: 80px var(--pad); } }
@media (max-width: 640px) { .h-sec { padding: 72px var(--pad); } .h-sec-tight { padding: 56px var(--pad); } }
.h-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.h-eyebrow { font: 500 14px/1.4 var(--sans); color: var(--lab); margin: 0; letter-spacing: 0; }
.h-display { font-size: clamp(40px, 5.2vw, 96px); line-height: 0.96; letter-spacing: -0.045em; font-weight: 700; margin: 0; }
.h-title { font-size: clamp(32px, 3.6vw, 64px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 700; margin: 0; }
.h-lede { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.5; color: var(--dim); margin: 0; max-width: 58ch; }

/* ---------- hero ---------- */
.h-hero { position: relative; overflow: hidden; }
.h-hero-in { padding: 120px var(--pad) 0; display: flex; flex-direction: column; gap: 56px; }
.h-giant { font-size: clamp(72px, 13vw, 248px); line-height: 0.84; letter-spacing: -0.06em; font-weight: 800; margin: 0; }
.h-giant .w { display: inline-block; opacity: 0; transform: translateY(0.18em); animation: h-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.h-giant .w2 { animation-delay: .12s; }
.h-giant .w3 { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.045em; color: var(--electric-soft); animation-delay: .5s; position: relative; }
.h-giant .w3::after { content: ""; position: absolute; left: 0.04em; right: 0.12em; bottom: 0.06em; height: 0.06em; background: var(--brass); transform-origin: left; transform: scaleX(0); animation: h-underline .8s cubic-bezier(.2,.7,.2,1) 1.25s forwards; border-radius: 2px; }
@keyframes h-rise { to { opacity: 1; transform: none; } }
@keyframes h-underline { to { transform: scaleX(1); } }
.h-hero-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: end; }
.h-hero-copy { display: flex; flex-direction: column; gap: 28px; padding-bottom: 120px; }
.h-hero-vis { position: relative; padding-left: 140px; }
.h-hero-vis .rm-shot { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.h-hero-vis .rm-shot img { max-height: 640px; object-fit: cover; object-position: top left; }
.h-fan { position: absolute; left: 0; bottom: 64px; width: 320px; height: 340px; z-index: 3; }
.h-fan img { position: absolute; width: 156px; border-radius: 3px 8px 8px 3px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
@media (max-width: 1100px) {
  .h-hero-in { padding-top: 72px; gap: 40px; }
  .h-hero-row { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .h-hero-copy { padding-bottom: 0; }
  .h-hero-vis { padding-left: 72px; }
  .h-fan { width: 220px; height: 240px; bottom: 40px; } .h-fan img { width: 108px; }
}
@media (max-width: 640px) { .h-hero-vis { padding-left: 0; } .h-fan { display: none; } }

/* ---------- the questions ticker ---------- */
.h-ticker { overflow: hidden; border-top: 1px solid var(--rule-d); border-bottom: 1px solid var(--rule-d); background: var(--ink); padding: 22px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.h-track { display: flex; gap: 16px; width: max-content; animation: h-scroll 60s linear infinite; }
.h-q { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px 12px 18px; border-radius: 10px; background: rgba(230,236,248,.05); border: 1px solid rgba(207,224,255,.16); font: 500 15px var(--sans); color: var(--dim-d); white-space: nowrap; }
.h-q em { font: 600 12px/1 var(--sans); font-style: normal; padding: 6px 8px; border-radius: 6px; }
.h-q .named { color: var(--dim-d); border: 1px solid rgba(207,224,255,.3); }
.h-q .picked { color: #FFFFFF; background: var(--electric); }
.h-q .absent { color: var(--mute-d); border: 1px dashed rgba(207,224,255,.25); }
@keyframes h-scroll { to { transform: translateX(-50%); } }

/* ---------- five were seen ---------- */
.h-five { display: flex; justify-content: center; gap: clamp(12px, 2vw, 32px); margin: 72px 0 0; flex-wrap: wrap; }
.h-sup { width: clamp(120px, 12vw, 200px); aspect-ratio: 3 / 4; border-radius: 14px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.12); display: flex; flex-direction: column; justify-content: space-between; padding: 20px; color: var(--ink); animation: h-fade 7s ease-in-out infinite; }
.h-sup .bar { height: 8px; border-radius: 4px; background: #E6E1D6; }
.h-sup .bar.s { width: 60%; }
.h-sup b { font: 600 15px var(--sans); }
.h-sup small { font: 400 13px var(--sans); color: var(--mute-l); }
.h-sup.win { animation: h-win 7s ease-in-out infinite; }
.h-sup:nth-child(1) { animation-delay: .0s; } .h-sup:nth-child(2) { animation-delay: .1s; } .h-sup:nth-child(4) { animation-delay: .2s; } .h-sup:nth-child(5) { animation-delay: .3s; }
@keyframes h-fade { 0%, 30% { opacity: 1; transform: none; } 50%, 85% { opacity: .32; transform: translateY(8px) scale(.97); } 100% { opacity: 1; transform: none; } }
@keyframes h-win { 0%, 30% { background: #FFFFFF; color: var(--ink); transform: none; } 50%, 85% { background: var(--electric); color: #FFFFFF; transform: translateY(-12px) scale(1.04); box-shadow: 0 30px 60px rgba(59,108,255,.35); } 100% { background: #FFFFFF; color: var(--ink); transform: none; } }
.h-sup.win .bar { background: rgba(14,18,38,.12); }
.h-src { font: 400 13px var(--sans); color: var(--mute); margin: 28px 0 0; }

/* ---------- product tour (tabs) ---------- */
.h-tour-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; flex-wrap: wrap; margin-bottom: 56px; }
.h-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 40px; }
.h-tab { height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--glass-b); background: transparent; color: var(--dim-d); font: 600 15px var(--sans); cursor: pointer; }
.h-tab.on { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.h-panel { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; align-items: center; }
.h-panel-copy { display: flex; flex-direction: column; gap: 20px; }
.h-pair { font-size: clamp(28px, 2.6vw, 44px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 700; margin: 0; }
.h-pair span { display: block; color: var(--mute-d); }
.h-panel .rm-shot { animation: h-in .5s ease both; }
@keyframes h-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) { .h-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- seven stages ---------- */
.h-line { position: relative; margin-top: 96px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.h-line::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(207,224,255,.18); }
.h-line::after { content: ""; position: absolute; left: 0; top: 11px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--brass), var(--electric)); transform-origin: left; animation: h-sweep 5s cubic-bezier(.5,0,.2,1) infinite; }
@keyframes h-sweep { 0% { transform: scaleX(0); } 60%, 90% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.h-node { position: relative; z-index: 1; padding-right: 20px; }
.h-node i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); border: 2px solid rgba(207,224,255,.4); margin-bottom: 28px; }
.h-node.sel i { border-color: var(--electric-soft); box-shadow: 0 0 0 6px rgba(59,108,255,.15); }
.h-node b { display: block; font: 700 22px/1.1 var(--sans); letter-spacing: -.02em; }
.h-node p { margin: 10px 0 0; font: italic 400 18px/1.35 var(--serif); color: var(--dim-d); }
.h-brackets { display: grid; grid-template-columns: 2fr 5fr; margin-top: 64px; gap: 0; }
.h-brackets div { border-top: 2px solid; padding-top: 14px; font: 500 15px var(--sans); }
.h-brackets div:first-child { border-color: rgba(207,224,255,.3); color: var(--mute-d); margin-right: 20px; }
.h-brackets div:last-child { border-color: var(--electric); color: var(--text-d); }
@media (max-width: 1100px) {
  .h-line { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 44px; }
  .h-line::before, .h-line::after { left: 11px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .h-line::after { animation: none; background: linear-gradient(180deg, var(--brass), var(--electric)); }
  .h-node i { position: absolute; left: -44px; top: 0; margin: 0; }
  .h-brackets { display: none; }
}

/* ---------- bento ---------- */
.h-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; margin-top: 64px; }
.h-tile { border-radius: 14px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; text-decoration: none; min-width: 0; }
.h-tile q { font: 700 clamp(22px, 1.8vw, 30px)/1.12 var(--sans); letter-spacing: -.025em; quotes: "“" "”"; }
.h-tile p { margin: 0; font-size: 15px; line-height: 1.5; }
.h-t1 { grid-column: span 7; grid-row: span 2; background: var(--ink); color: var(--text-d); }
.h-t2 { grid-column: span 5; background: var(--electric); color: #FFFFFF; }
.h-t3 { grid-column: span 5; background: #FFFFFF; color: var(--ink); border: 1px solid rgba(14,18,38,.12); }
.h-t4 { grid-column: span 12; background: var(--brass); color: var(--ink); flex-direction: row; align-items: center; }
.h-t1 .rm-shot { margin: 0 -32px -32px 64px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-right: 0; border-top-right-radius: 0; }
.h-t1 .rm-shot img { max-height: 380px; object-fit: cover; object-position: top left; }
.h-roles { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; justify-content: center; }
.h-pill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid rgba(14,18,38,.2); font: 600 15px var(--sans); text-decoration: none; color: var(--ink); background: rgba(255,255,255,.6); }
@media (max-width: 1100px) {
  .h-t1, .h-t2, .h-t3 { grid-column: span 12; grid-row: auto; }
  .h-t4 { flex-direction: column; align-items: flex-start; }
  .h-t1 .rm-shot { margin-left: 0; border-top-left-radius: 14px; }
}

/* ---------- customer zero ---------- */
.h-cz { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 96px; align-items: center; }
.h-zero { font: 800 clamp(120px, 16vw, 300px)/0.8 var(--sans); letter-spacing: -0.07em; color: var(--brass-deep); margin: 0; display: flex; align-items: baseline; gap: 0.08em; }
.h-zero small { font: 700 0.32em/1 var(--sans); color: var(--mute-l); letter-spacing: -0.02em; }
@media (max-width: 1100px) { .h-cz { grid-template-columns: minmax(0, 1fr); gap: 56px; } }

/* ---------- pricing ---------- */
.h-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; margin-top: 80px; text-align: left; width: 100%; }
.h-price p { margin: 0; }
.h-price .rm-stat { font-size: clamp(56px, 5vw, 88px); }
.h-wayout { margin-top: 64px; display: inline-flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: 10px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.12); font: 600 16px var(--sans); color: var(--ink); }
@media (max-width: 1100px) { .h-prices { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* ---------- comparison table ---------- */
.h-table { width: 100%; border-collapse: collapse; margin-top: 64px; }
.h-table th, .h-table td { text-align: left; vertical-align: top; padding: 24px 24px 24px 0; border-bottom: 1px solid rgba(207,224,255,.16); font-size: 16px; line-height: 1.5; }
.h-table th { font: 500 14px var(--sans); color: var(--mute-d); padding-bottom: 16px; }
.h-table td:first-child { font: 700 20px/1.2 var(--sans); letter-spacing: -.015em; width: 26%; }
.h-table td { color: var(--dim-d); }
.h-table tr.us td { color: #FFFFFF; }
.h-table tr.us td:first-child { color: var(--electric-soft); }
@media (max-width: 760px) {
  .h-table thead { display: none; }
  .h-table tr { display: block; padding: 20px 0; border-bottom: 1px solid rgba(207,224,255,.16); }
  .h-table td { display: block; border: 0; padding: 4px 0; width: auto !important; }
}

/* ---------- books shelf ---------- */
.h-shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px; margin-top: 96px; align-items: end; }
.h-bk { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.h-bk img { width: 100%; max-width: 280px; border-radius: 3px 10px 10px 3px; box-shadow: 0 40px 80px rgba(14,18,38,.28); transition: transform .3s; }
.h-bk:nth-child(2) img { max-width: 340px; }
.h-bk img:hover { transform: translateY(-8px) rotate(-1deg); }
@media (max-width: 1100px) { .h-shelf { grid-template-columns: minmax(0, 1fr); gap: 72px; } }

/* ---------- slim footer ---------- */
.h-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 48px var(--pad); }
.h-foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.h-foot-links a { text-decoration: none; font-size: 15px; color: var(--dim-d); }
.h-foot-links a:hover { color: var(--text-d); }

/* ---------- beta ---------- */
.h-beta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.h-beta-ticks { margin-top: 36px !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px !important; }
@media (max-width: 1100px) { .h-beta { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 640px) { .h-beta-ticks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ accordion ---------- */
.h-faq { max-width: 960px; margin: 64px auto 0; width: 100%; }
.h-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px 0; background: transparent; border: 0; border-bottom: 1px solid rgba(207,224,255,.16); color: var(--text-d); font: 600 clamp(18px, 1.4vw, 22px)/1.3 var(--sans); text-align: left; cursor: pointer; }
.h-faq-q span { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; border: 1px solid var(--glass-b); display: inline-flex; align-items: center; justify-content: center; transition: transform .2s; }
.h-faq-q.on span { transform: rotate(45deg); background: var(--electric); border-color: var(--electric); }
.h-faq-a { padding: 4px 0 28px; border-bottom: 1px solid rgba(207,224,255,.16); font-size: 17px; line-height: 1.6; color: var(--dim-d); max-width: 70ch; animation: h-in .25s ease both; }

/* ---------- the close ---------- */
.h-close { position: relative; overflow: hidden; }
.h-close-glow { position: absolute; left: 50%; bottom: -40%; width: 140%; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(59,108,255,.55), rgba(59,108,255,.12) 55%, transparent 75%); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .h-giant .w, .h-giant .w3::after { animation: none; opacity: 1; transform: none; }
  .h-track, .h-sup, .h-sup.win, .h-line::after, .h-panel .rm-shot, .h-faq-a { animation: none; }
}
.rm a:focus-visible, .rm button:focus-visible, .rm input:focus-visible { outline: 2px solid var(--electric-soft); outline-offset: 3px; }

/* =====================================================================
   v5: the deck's voice. Plus Jakarta Sans throughout; the key word in
   heavy italic electric, the full stop in white (as on the banner and deck).
   ===================================================================== */
.k { font-style: italic; font-weight: 800; color: var(--electric-soft); letter-spacing: -0.04em; padding-right: 0.04em; }
.rm-light .k, .k-light { color: var(--electric); }
.dot { color: inherit; }

/* Hero on a dot field, with one live signal */
.v-hero { position: relative; overflow: hidden; background-color: var(--ink);
  background-image: radial-gradient(circle, rgba(207,224,255,.18) 1.4px, transparent 1.6px);
  background-size: 30px 30px; background-position: 0 0; }
.v-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 30% 40%, var(--ink) 30%, rgba(14,18,38,.6) 60%, transparent 100%); pointer-events: none; }
.v-hero .rm-wrap { position: relative; }
.v-signal { position: absolute; right: 9%; top: 150px; width: 104px; height: 104px; pointer-events: none; }
.v-signal i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(127,163,255,.35); animation: v-ping 3.2s ease-out infinite; }
.v-signal i:nth-child(2) { animation-delay: 1.1s; }
.v-signal b { position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; background: var(--electric-soft); box-shadow: 0 0 0 10px rgba(127,163,255,.12); }
@keyframes v-ping { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.v-h1 { font-size: clamp(72px, 12.4vw, 236px); line-height: .86; letter-spacing: -0.062em; font-weight: 800; margin: 0; }
.v-h1 .w { display: inline-block; opacity: 0; transform: translateY(.16em); animation: h-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.v-h1 .w2 { animation-delay: .1s; } .v-h1 .w3 { animation-delay: .42s; } .v-h1 .w4 { animation-delay: .9s; }
.v-sub { font-size: clamp(24px, 2.1vw, 38px); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; margin: 0; max-width: 22ch; }
.v-sub span { color: var(--mute-d); }

/* Section heading in the deck's scale */
.v-h2 { font-size: clamp(40px, 5vw, 92px); line-height: .98; letter-spacing: -0.05em; font-weight: 800; margin: 0; }
.v-h3 { font-size: clamp(30px, 3vw, 54px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; margin: 0; }
.v-lede { font-size: clamp(19px, 1.45vw, 24px); line-height: 1.45; margin: 0; color: var(--dim); max-width: 48ch; }

/* Eras of visibility */
.v-eras { display: flex; gap: 14px; margin-top: 80px; flex-wrap: wrap; }
.v-era { flex: 1 1 180px; min-height: 150px; border-radius: 14px; padding: 22px; background: #FFFFFF; border: 1px solid rgba(14,18,38,.1); display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); animation: v-era 9s ease-in-out infinite; }
.v-era small { font: 500 15px var(--sans); color: var(--mute-l); }
.v-era b { font: 800 clamp(22px, 1.8vw, 30px)/1.05 var(--sans); letter-spacing: -.03em; }
.v-era:nth-child(2) { animation-delay: .5s; } .v-era:nth-child(3) { animation-delay: 1s; } .v-era:nth-child(4) { animation-delay: 1.5s; } .v-era:nth-child(5) { animation-delay: 2s; }
@keyframes v-era { 0%, 100% { opacity: 1; } 40%, 70% { opacity: .38; } }
.v-era.ai { background: var(--ink); color: var(--text-d); border-color: var(--ink); }
.v-era.ai small { color: var(--brass); }
.v-era.sel { background: var(--electric); color: #FFFFFF; border-color: var(--electric); animation: v-sel 9s ease-in-out infinite; }
.v-era.sel small { color: #D4DBFA; }
@keyframes v-sel { 0%, 30% { transform: none; box-shadow: none; } 45%, 80% { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(59,108,255,.35); } 100% { transform: none; } }

/* Why / What / How */
.v-www { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 96px; }
.v-www > div { border-top: 2px solid var(--electric-soft); padding-top: 22px; position: relative; }
.v-www > div:last-child { border-color: var(--text-d); }
.v-www b { display: block; font: 800 clamp(56px, 6.4vw, 120px)/.9 var(--sans); letter-spacing: -.055em; color: var(--electric-soft); }
.v-www > div:last-child b { color: var(--text-d); }
.v-www p { margin: 18px 0 0; font-size: 19px; line-height: 1.45; color: var(--dim-d); max-width: 30ch; }
.v-www > div::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--brass); animation: v-fill 6s ease-in-out infinite; }
.v-www > div:nth-child(2)::after { animation-delay: 2s; } .v-www > div:nth-child(3)::after { animation-delay: 4s; }
@keyframes v-fill { 0% { width: 0; opacity: 1; } 30% { width: 100%; opacity: 1; } 45%, 100% { width: 100%; opacity: 0; } }
@media (max-width: 900px) { .v-www { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* Strategy */
.v-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.v-split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 1100px) { .v-split, .v-split.flip { grid-template-columns: minmax(0, 1fr); gap: 48px; } }
.v-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.v-chip { height: 40px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; font: 600 15px var(--sans); background: #FFFFFF; border: 1px solid rgba(14,18,38,.12); color: var(--ink); }
.v-chip.on { background: var(--ink); color: var(--text-d); border-color: var(--ink); }
.v-stack { position: relative; height: 640px; }
.v-stack .rm-shot { position: absolute; width: 72%; }
.v-stack .s1 { left: 0; top: 0; transform: rotate(-2deg); }
.v-stack .s2 { right: 0; top: 120px; transform: rotate(1.5deg); z-index: 2; }
.v-stack .s3 { left: 12%; top: 300px; transform: rotate(-.5deg); z-index: 3; }
@media (max-width: 1100px) { .v-stack { height: 520px; } }
@media (max-width: 640px) { .v-stack { height: auto; display: flex; flex-direction: column; gap: 16px; } .v-stack .rm-shot { position: static; width: 100%; transform: none; } }

/* Score */
.v-big { font: 800 clamp(96px, 11vw, 200px)/.85 var(--sans); letter-spacing: -.06em; color: var(--electric-soft); margin: 0; }
.v-scoreside { display: flex; flex-direction: column; gap: 28px; }
.v-ticker-wrap { margin-top: 96px; }
.v-ticker-wrap p { margin: 0 0 18px; font: 600 16px var(--sans); color: var(--mute-d); }

/* Anything in, one truth, anything out */
.v-flow { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); gap: 0; align-items: center; margin-top: 88px; position: relative; }
.v-col { display: flex; flex-direction: column; gap: 10px; }
.v-col.in { align-items: flex-end; } .v-col.out { align-items: flex-start; }
.v-tag { height: 40px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; font: 600 15px var(--sans); background: #FFFFFF; border: 1px solid rgba(14,18,38,.12); color: var(--ink); }
.v-col.out .v-tag { background: var(--ink); color: var(--text-d); border-color: var(--ink); }
.v-core { margin: 0 48px; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; background: radial-gradient(circle at 50% 40%, #1B2340, var(--ink)); color: var(--text-d); box-shadow: 0 40px 80px rgba(14,18,38,.35); }
.v-core::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 2px dashed rgba(59,108,255,.55); animation: v-spin 40s linear infinite; }
.v-core b { font: 800 clamp(26px, 2.4vw, 40px)/1 var(--sans); letter-spacing: -.035em; }
.v-core small { font: 500 15px/1.4 var(--sans); color: var(--dim-d); margin-top: 10px; max-width: 18ch; }
.v-core em { position: absolute; top: -34px; font: 600 13px var(--sans); font-style: normal; color: var(--electric); background: var(--bone); padding: 0 10px; }
@keyframes v-spin { to { transform: rotate(360deg); } }
.v-pulse { position: absolute; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--electric), transparent); background-size: 200% 100%; animation: v-flowline 2.4s linear infinite; }
.v-pulse.l { left: 26%; width: 6%; } .v-pulse.r { right: 26%; width: 6%; }
@keyframes v-flowline { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (max-width: 1100px) { .v-flow { grid-template-columns: minmax(0, 1fr); gap: 40px; } .v-col.in, .v-col.out { align-items: center; flex-direction: row; flex-wrap: wrap; justify-content: center; } .v-core { margin: 0 auto; width: min(360px, 80%); } .v-pulse { display: none; } }

/* The engines */
.v-engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 96px; }
.v-eng { border-radius: 14px; background: var(--navy); color: var(--text-d); padding: 28px; display: flex; flex-direction: column; gap: 22px; text-decoration: none; overflow: hidden; }
.v-eng b { font: 800 24px/1.1 var(--sans); letter-spacing: -.025em; }
.v-eng p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--dim-d); }
.v-eng:hover .v-mock { transform: translateY(-4px); }
.v-mock { height: 200px; border-radius: 10px; background: var(--ink); border: 1px solid rgba(207,224,255,.16); position: relative; overflow: hidden; transition: transform .3s; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.v-mock .bar { height: 8px; border-radius: 4px; background: rgba(207,224,255,.16); }
.v-mock .bar.b { background: var(--brass); width: 40%; }
.v-mock .bar.e { background: var(--electric); width: 30%; height: 22px; border-radius: 6px; }
.v-mock .blk { border-radius: 6px; background: rgba(127,163,255,.18); flex: 1; }
.v-mock .row { display: flex; gap: 8px; }
.v-mock .row > * { flex: 1; }
.v-cal { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; flex: 1; }
.v-cal i { border-radius: 4px; background: rgba(207,224,255,.08); }
.v-cal i.on { background: var(--electric); } .v-cal i.br { background: var(--brass); }
.v-node { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--electric-soft); }
.v-node.g { background: var(--brass); }
.v-link { position: absolute; height: 2px; background: rgba(207,224,255,.3); transform-origin: left center; }
@media (max-width: 1100px) { .v-engines { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .v-engines { grid-template-columns: minmax(0, 1fr); } }

/* Books, deck style */
.v-books { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: center; }
.v-covers { position: relative; height: 520px; }
.v-covers img { position: absolute; width: 46%; border-radius: 3px 10px 10px 3px; box-shadow: 0 40px 80px rgba(14,18,38,.3); }
.v-stat { display: flex; gap: 48px; margin-top: 40px; flex-wrap: wrap; }
.v-stat b { display: block; font: 800 clamp(48px, 4.4vw, 80px)/.9 var(--sans); letter-spacing: -.05em; }
.v-stat span { display: block; margin-top: 8px; font-size: 15px; color: var(--dim-l); max-width: 18ch; }
@media (max-width: 1100px) { .v-books { grid-template-columns: minmax(0, 1fr); } .v-covers { height: 420px; } }

@media (prefers-reduced-motion: reduce) {
  .v-h1 .w, .v-signal i, .v-era, .v-era.sel, .v-www > div::after, .v-core::before, .v-pulse { animation: none; opacity: 1; transform: none; }
}

/* =====================================================================
   v6: one continuous journey instead of dark/cream stripes.
   Night (ink) → electric dawn → midnight → ice morning → bone day
   → sand → brass dusk → night. Every change is a long blend inside a
   section's top padding, so no hard edge between sections.
   ===================================================================== */
:root { --midnight: #0F1846; --ice-bg: #E8EEFB; --sand: #EBE6DA; --cobalt: #2F5DEB; }
.bl { --b: var(--blend, 320px); border: 0 !important; background-color: var(--to); background-image: linear-gradient(180deg, var(--from) 0,
  color-mix(in oklab, var(--from) 94%, var(--to)) calc(var(--b) * .12),
  color-mix(in oklab, var(--from) 78%, var(--to)) calc(var(--b) * .28),
  color-mix(in oklab, var(--from) 50%, var(--to)) calc(var(--b) * .5),
  color-mix(in oklab, var(--from) 22%, var(--to)) calc(var(--b) * .72),
  color-mix(in oklab, var(--from) 6%, var(--to)) calc(var(--b) * .88),
  var(--to) var(--b)); }
.bl > .rm-wrap > .h-sec { padding-top: calc(var(--blend, 320px) * .55 + 120px); }
.bl-flat > .rm-wrap > .h-sec { padding-top: 80px; }

/* Eras stay in the night, as glass */
.on-night .v-era { background: rgba(230,236,248,.04); border-color: rgba(207,224,255,.12); color: var(--text-d); }
.on-night .v-era small { color: var(--mute-d); }
.on-night .v-era.ai { background: var(--navy); border-color: rgba(167,153,118,.5); }
.on-night .v-era.sel { background: var(--electric); border-color: var(--electric); }

/* Electric dawn: why, what, how */
.on-electric { color: #FFFFFF; --dim: rgba(255,255,255,.86); }
.on-electric .v-h2 .k { color: var(--ink); }
.on-electric .v-h2 .soft { color: rgba(255,255,255,.72); }
.on-electric .v-www > div { border-color: rgba(255,255,255,.9); }
.on-electric .v-www > div:last-child { border-color: var(--ink); }
.on-electric .v-www b { color: #FFFFFF; }
.on-electric .v-www > div:last-child b { color: var(--ink); }
.on-electric .v-www p { color: rgba(255,255,255,.9); font-weight: 500; }
.on-electric .v-www > div::after { background: var(--ink); }

/* Midnight: strategy chips on dark */
.on-midnight .v-chip { background: rgba(230,236,248,.06); border-color: rgba(207,224,255,.16); color: var(--text-d); }
.on-midnight .v-chip.on { background: var(--electric); border-color: var(--electric); color: #FFFFFF; }

/* Ice morning: the score, light */
.on-ice .v-big { color: var(--electric); }
.on-ice .v-ticker-wrap p { color: var(--mute-l); }
.on-ice .h-ticker { background: rgba(255,255,255,.6) !important; border-color: rgba(14,18,38,.1) !important; }
.on-ice .h-q { background: #FFFFFF; border-color: rgba(14,18,38,.1); color: var(--dim-l); }
.on-ice .h-q .named { color: var(--dim-l); border-color: rgba(14,18,38,.25); }
.on-ice .h-q .absent { color: var(--mute-l); border-color: rgba(14,18,38,.25); }
.on-ice .rm-shot { border-color: rgba(14,18,38,.18); box-shadow: 0 40px 90px rgba(15,24,70,.25); }

/* Customer Zero: a warm glow behind the zero instead of a ribbon edge */
.h-cz { position: relative; }
.h-cz::before { content: ""; position: absolute; left: -10%; top: 50%; width: 60%; aspect-ratio: 1; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(167,153,118,.28), transparent 70%); pointer-events: none; }
.h-cz > * { position: relative; }

/* Dusk into the close */
.v-dusk { background: linear-gradient(180deg, var(--sand) 0, #E2D8C0 120px, #C9B78C 250px, #8C8574 370px, #3E4566 470px, #1B2340 560px, var(--ink) 660px) !important; border: 0 !important; }
.v-dusk .h-sec { padding-top: 560px !important; }
.v-eng b { color: var(--text-d); }

/* BrandGraph, live */
.bgr { width: 100%; }
.bgr-stage { position: relative; width: 100%; height: calc(640px * var(--s, .96)); }
.bgr-stage::before { content: ""; position: absolute; inset: -6% 0; background: radial-gradient(50% 50% at 50% 50%, rgba(59,108,255,.22), transparent 72%); pointer-events: none; }
.bgr-field { position: absolute; left: 50%; top: 0; width: 860px; height: 640px; transform: translateX(-50%) scale(var(--s, .96)); transform-origin: 50% 0; }
.bgr-ln { position: absolute; height: 1px; transform-origin: 0 0; transition: opacity .6s; }
.bgr-hub { position: absolute; width: 124px; transform: translate(-50%, -8px); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; transition: opacity .5s; }
.bgr-hdot { width: 16px; height: 16px; border-radius: 50%; background: var(--midnight); border: 2px solid var(--brass); box-sizing: border-box; }
.bgr-hname { font-size: 12px; font-weight: 700; line-height: 1.2; }
.bgr-hcount { font: 500 10px "JetBrains Mono", monospace; color: var(--brass); letter-spacing: .04em; }
.bgr-bd { position: absolute; display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; transform: translate(-50%, -50%); transition: opacity .4s, transform .4s, box-shadow .4s; }
.bgr-bd.b-f { background: var(--ice); } .bgr-bd.b-c { background: var(--brass); }
.bgr-bd.b-p { background: var(--brass); box-shadow: 0 0 0 2px var(--midnight), 0 0 0 3px var(--electric-soft); }
.bgr-bd.b-m { border: 1px dashed var(--mute-d); }
.bgr-bd.b-new { transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 0 4px rgba(59,108,255,.5); }
.bgr-core { position: absolute; left: 430px; top: 320px; width: 124px; height: 124px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--ink); border: 2px solid var(--brass); box-shadow: 0 0 0 14px rgba(167,153,118,.1), 0 30px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
.bgr-core b { font-size: 13px; line-height: 1.15; }
.bgr-core span { font: 500 10px "JetBrains Mono", monospace; color: var(--brass); }
.bgr-tag { position: absolute; transform: translate(-50%, calc(-100% - 14px)); padding: 8px 12px; border-radius: 9px; background: rgba(14,18,38,.88); border: 1px solid var(--electric); font-size: 13px; white-space: nowrap; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: left .4s, top .4s; }
.bgr-tag span { color: var(--mute-d); font-size: 12px; margin-left: 6px; }
.bgr-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; font-size: 13px; color: var(--mute-d); justify-content: center; }
.bgr-key span { display: inline-flex; align-items: center; gap: 8px; }
.bgr-key em { font-style: normal; flex-basis: 100%; text-align: center; color: #6F79A0; }
@media (max-width: 1400px) { .bgr { --s: .8; } }
@media (max-width: 1100px) { .bgr { --s: .9; } }
@media (max-width: 900px) { .bgr { --s: .7; } }
@media (max-width: 640px) { .bgr { --s: .4; } .bgr-hname { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .bgr-ln, .bgr-hub, .bgr-bd, .bgr-tag { transition: none; } }
/* organic BrandGraph */
.bgr-field { height: 600px; }
.bgr-field::before { content: ""; position: absolute; inset: -40px; background-image: radial-gradient(circle, rgba(207,224,255,.14) 1.2px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(55% 55% at 50% 50%, #000 30%, transparent 100%); }
.bgr-stage { height: calc(600px * var(--s, .96)); }
.bgr-cl { position: absolute; inset: 0; animation: bgr-drift 9s ease-in-out infinite alternate; }
@keyframes bgr-drift { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }
.bgr-ln { background: rgba(207,224,255,.4); }
.bgr-ln.hub { background: rgba(167,153,118,.6); }
.bgr-ln.rel { height: 0; background: none; border-top: 1px dashed var(--electric-soft); transition: opacity .8s; }
.bgr-core { left: 410px; top: 300px; width: 112px; height: 112px; }
.bgr-tag { transform: none; }
@media (prefers-reduced-motion: reduce) { .bgr-cl { animation: none; } }
.bgr-tag { background: #0E1226; color: #FFFFFF; z-index: 5; } .bgr-tag b { color: #FFFFFF; } .bgr-tag span { color: #A9B1CF; }

/* =====================================================================
   Product screens (Screens.dc.html): the score pages' Electric look.
   Fixed design size, scaled with --s so text and layout stay exact.
   ===================================================================== */
.scr-stage { position: relative; width: 100%; font-family: var(--sans); color: var(--text-d); }
.scr-stage.big { height: calc(560px * var(--s, .96)); --s: .96; }
.scr-stage.small { height: calc(340px * var(--s, .84)); --s: .84; }
.scr { position: absolute; left: 50%; top: 0; transform: translateX(-50%) scale(var(--s)); transform-origin: 50% 0; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column;
  background: #0E1226; border: 1px solid rgba(207,224,255,.18); box-shadow: 0 40px 90px rgba(5,8,25,.5), inset 0 1px 0 rgba(207,224,255,.08); }
.scr.big { width: 860px; height: 560px; }
.scr.small { width: 560px; height: 340px; }
.scr-h { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 48px; border-bottom: 1px solid rgba(207,224,255,.16); background: rgba(27,35,64,.55); font-size: 14px; }
.scr.small .scr-h { height: 40px; padding: 0 14px; font-size: 13px; }
.scr-sub { color: var(--mute-d); font-size: 13px; }
.scr-st { font: 500 12px "JetBrains Mono", monospace; color: var(--dim-d); }
.scr-live { width: 9px; height: 9px; border-radius: 50%; background: var(--electric); animation: scr-pulse 1.4s infinite; }
.scr-live.done { background: var(--brass); animation: none; }
@keyframes scr-pulse { 0% { box-shadow: 0 0 0 0 rgba(59,108,255,.6); } 100% { box-shadow: 0 0 0 9px rgba(59,108,255,0); } }
.scr-b { flex: 1; min-height: 0; position: relative; background-image: radial-gradient(circle, rgba(207,224,255,.07) 1px, transparent 1.2px); background-size: 22px 22px; }
.scr-rail { border-right: 1px solid rgba(207,224,255,.14); padding: 16px 14px; display: flex; flex-direction: column; gap: 2px; background: rgba(14,18,38,.7); overflow: hidden; }
.scr-main { padding: 22px 24px; display: flex; flex-direction: column; min-width: 0; }
.scr-act { font: 500 10px "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); padding: 10px 6px 4px; }
.scr-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; font-size: 13px; color: var(--mute-d); transition: background .3s, color .3s; }
.scr-row .n { font: 500 11px "JetBrains Mono", monospace; color: #6F79A0; width: 18px; }
.scr-row .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-row i { width: 8px; height: 8px; border-radius: 50%; border: 1px dashed rgba(207,224,255,.3); flex: 0 0 auto; }
.scr-row em { font: 500 10px "JetBrains Mono", monospace; font-style: normal; color: #6F79A0; }
.scr-row.done { color: var(--text-d); } .scr-row.done i { background: var(--brass); border: 0; } .scr-row.done em { color: var(--brass); }
.scr-row.now { color: #FFFFFF; background: rgba(59,108,255,.18); } .scr-row.now i { background: var(--electric); border: 0; box-shadow: 0 0 0 4px rgba(59,108,255,.3); }
.scr-lab { display: block; font: 500 11px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.scr-note { font-size: 12px; color: var(--mute-d); }
.scr-chip { font: 500 11px "JetBrains Mono", monospace; padding: 5px 8px; border-radius: 6px; }
.scr-chip.ok { background: rgba(127,163,255,.16); color: #CFE0FF; } .scr-chip.warn { background: rgba(167,153,118,.2); color: #E3D5AE; }
.sk { display: block; height: 10px; border-radius: 5px; background: linear-gradient(90deg, rgba(207,224,255,.08) 0, rgba(207,224,255,.28) 50%, rgba(207,224,255,.08) 100%); background-size: 600px 10px; animation: scr-shim 1.4s linear infinite; }
@keyframes scr-shim { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.bar { height: 8px; border-radius: 4px; background: rgba(207,224,255,.12); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 4px; transition: width .5s; }

/* deck */
.dk-slide { aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(135deg, #3A2A1F, #22170F); color: #F1E3C8; padding: 34px 38px; display: flex; flex-direction: column; justify-content: center; gap: 14px; position: relative; transition: opacity .35s; box-shadow: 0 20px 40px rgba(0,0,0,.35); }
.dk-no { font: 500 12px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #C9A97A; }
.dk-h { margin: 0; font: 700 34px/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.01em; max-width: 18ch; }
.dk-mark { position: absolute; right: 30px; bottom: 24px; font: 700 12px var(--sans); color: #C9A97A; }
.dk-thumbs { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
.dk-thumbs i { aspect-ratio: 16 / 9; border-radius: 3px; border: 1px dashed rgba(207,224,255,.2); transition: all .4s; }
.dk-thumbs i.on { background: #3A2A1F; border: 1px solid rgba(201,169,122,.5); }
/* strategy */
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 14px; flex: 1; }
.st-card { border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: all .5s; }
.st-card.done { background: rgba(230,236,248,.06); border: 1px solid rgba(207,224,255,.2); }
.st-card.now { background: rgba(59,108,255,.12); border: 1px solid var(--electric); }
.st-card.wait { border: 1px dashed rgba(207,224,255,.2); opacity: .5; }
.st-t { margin: 0; font: 700 20px/1.2 var(--sans); letter-spacing: -.02em; flex: 1; }
.st-card:first-child .st-t { font-size: 23px; font-style: italic; font-weight: 800; color: var(--electric-soft); }
/* gtm */
.gt-strip { display: flex; gap: 6px; margin-bottom: 4px; }
.scr .pill { flex: 1; text-align: center; font-size: 12px; font-weight: 600; padding: 7px 6px; border-radius: 7px; background: rgba(230,236,248,.05); color: #6F79A0; transition: all .4s; white-space: nowrap; }
.scr .pill.done { color: var(--text-d); background: rgba(167,153,118,.18); }
.scr .pill.now { color: #FFFFFF; background: var(--electric); }
.gt-row { display: grid; grid-template-columns: 130px 1fr 90px; gap: 16px; align-items: center; padding: 15px 16px; border-radius: 10px; border: 1px solid rgba(207,224,255,.12); transition: all .4s; }
.gt-row.now { border-color: var(--electric); background: rgba(59,108,255,.1); }
.gt-row.wait { opacity: .45; border-style: dashed; }
.gt-v { font-size: 15px; font-weight: 600; }
.gt-feeds { display: flex; gap: 10px; align-items: center; margin-top: auto; font-size: 13px; color: var(--mute-d); }
.gt-feeds b { padding: 6px 10px; border-radius: 7px; border: 1px solid rgba(127,163,255,.4); color: #CFE0FF; font-weight: 600; }
.gt-stamp { position: absolute; right: 34px; bottom: 30px; border: 2px solid var(--brass); color: #E3D5AE; padding: 10px 16px; border-radius: 8px; font: 800 20px var(--sans); text-transform: uppercase; letter-spacing: .06em; display: flex; flex-direction: column; transition: all .45s cubic-bezier(.3,1.5,.5,1); background: rgba(14,18,38,.85); }
.gt-stamp small { font: 500 11px var(--sans); text-transform: none; letter-spacing: 0; color: var(--dim-d); }
/* marketing */
.mk-mx { position: relative; margin-top: 16px; height: 330px; border-left: 1px solid rgba(207,224,255,.3); border-bottom: 1px solid rgba(207,224,255,.3); background: linear-gradient(rgba(207,224,255,.1), rgba(207,224,255,.1)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(207,224,255,.1), rgba(207,224,255,.1)) 0 50% / 100% 1px no-repeat; }
.mk-mx .ax { position: absolute; font: 500 10px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--mute-d); }
.mk-mx .ax.y { left: 8px; top: 6px; } .mk-mx .ax.x { right: 6px; bottom: 6px; }
.mk-d { position: absolute; transform: translate(-6px, -6px); display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: left .6s, top .6s, opacity .4s; }
.mk-d i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(59,108,255,.15); }
.mk-bl { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; } .mk-bl .vl { font-family: "JetBrains Mono", monospace; color: var(--dim-d); }
/* website strategy */
.ws-tree { display: flex; flex-direction: column; align-items: center; gap: 22px; position: relative; }
.ws-node { padding: 8px 12px; border-radius: 8px; background: rgba(230,236,248,.07); border: 1px solid rgba(207,224,255,.2); font-size: 13px; font-weight: 600; transition: opacity .4s; white-space: nowrap; }
.ws-node.root { background: var(--electric); border-color: var(--electric); }
.ws-node.sm { font-size: 12px; font-weight: 500; color: var(--dim-d); background: transparent; border-style: dashed; }
.ws-kids { display: flex; gap: 12px; position: relative; padding-top: 18px; border-top: 1px solid rgba(207,224,255,.25); }
.ws-col { display: flex; flex-direction: column; gap: 8px; align-items: center; transition: opacity .4s; }
.ws-metric { margin-top: auto; display: flex; align-items: center; gap: 20px; padding: 16px 18px; border-radius: 12px; background: rgba(230,236,248,.05); border: 1px solid rgba(207,224,255,.14); }
.ws-metric b { display: block; font: 800 28px/1 var(--sans); letter-spacing: -.03em; margin-top: 4px; }
/* plan */
.pl-grid { display: grid; grid-template-columns: 100px repeat(4, 1fr); row-gap: 12px; align-items: center; }
.pl-q { font: 500 11px "JetBrains Mono", monospace; color: var(--mute-d); padding-left: 8px; border-left: 1px solid rgba(207,224,255,.15); }
.pl-r { font-size: 13px; font-weight: 600; color: var(--dim-d); }
.pl-lane { grid-column: 2 / 6; position: relative; height: 42px; background: repeating-linear-gradient(90deg, rgba(207,224,255,.08) 0 1px, transparent 1px 8.333%); border-radius: 6px; }
.pl-bar { box-sizing: border-box; font-style: normal; position: absolute; top: 5px; bottom: 5px; border-radius: 7px; display: flex; align-items: center; padding: 0 10px; overflow: hidden; transition: width .6s, opacity .4s, box-shadow .3s; }
.pl-bar b { font-size: 12px; font-weight: 700; white-space: nowrap; }
.pl-bar.ao { background: rgba(167,153,118,.35); border: 1px solid rgba(167,153,118,.6); }
.pl-bar.hero { background: var(--electric); }
.pl-bar.hero.sel { box-shadow: 0 0 0 3px #CFE0FF; }
.pl-bar.occ { background: rgba(127,163,255,.3); border: 1px solid rgba(127,163,255,.55); }
.pl-bar.rx { border: 1px dashed rgba(207,224,255,.3); } .pl-bar.rx b { color: var(--mute-d); font-weight: 500; }
.pl-card { margin-top: auto; display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; align-items: center; padding: 18px 20px; border-radius: 12px; background: rgba(59,108,255,.1); border: 1px solid rgba(127,163,255,.4); transition: opacity .4s; }
.pl-card b { display: block; font: 800 22px/1.1 var(--sans); letter-spacing: -.02em; margin: 6px 0; }
.pl-run { display: flex; gap: 5px; }
.pl-run .pill { font-size: 11px; padding: 6px 4px; }

/* engines, small */
.e-card { border-radius: 9px; background: rgba(27,35,64,.7); border: 1px solid rgba(207,224,255,.12); display: flex; flex-direction: column; min-height: 0; }
.e-acts { display: flex; gap: 5px; } .e-acts .pill { font-size: 12px; padding: 6px 4px; }
.e-acts.six .pill { font-size: 11px; }
.e-pg { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #6F79A0; transition: color .3s; }
.e-pg i { width: 7px; height: 7px; border-radius: 50%; border: 1px dashed rgba(207,224,255,.3); }
.e-pg.done { color: var(--text-d); } .e-pg.done i { background: var(--brass); border: 0; }
.e-pg.now { color: #FFFFFF; } .e-pg.now i { background: var(--electric); border: 0; }
.e-canvas { padding: 12px; gap: 8px; background: #F4F1EA; position: relative; }
.ew-hero { border-radius: 6px; background: #3A2A1F; color: #F1E3C8; padding: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: opacity .4s; }
.ew-hero b { font: 700 15px/1.15 Georgia, serif; max-width: 14ch; }
.ew-hero i { width: 60px; height: 40px; border-radius: 4px; background: #C9A97A; }
.ew-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 46px; transition: opacity .4s; }
.ew-row.two { grid-template-columns: 2fr 1fr; height: 34px; }
.ew-row i { border-radius: 5px; background: rgba(58,42,31,.14); }
.e-receipt { position: absolute; left: 12px; right: 12px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; background: #0E1226; color: var(--text-d); font-size: 12px; font-weight: 600; transition: opacity .4s; }
.e-receipt .ok, .scr .ok-dot { width: 8px; height: 8px; border-radius: 50%; background: #5BD69A; }
.e-kv { display: flex; flex-direction: column; gap: 1px; font-size: 11px; color: var(--mute-d); } .e-kv b { font-size: 13px; color: var(--text-d); }
.e-mail { border-radius: 9px; background: #F4F1EA; color: #0E1226; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.e-subj { display: flex; flex-direction: column; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid rgba(14,18,38,.12); } .e-sl { font-size: 10px; color: #7A7568; } .e-sv { font-size: 14px; }
.caret { display: inline-block; width: 2px; height: 14px; background: var(--electric); margin-left: 2px; vertical-align: -2px; animation: scr-blink 1s steps(2) infinite; }
@keyframes scr-blink { 50% { opacity: 0; } }
.e-sec { display: flex; flex-direction: column; gap: 6px; transition: opacity .4s; } .e-sec b { font-size: 13px; } .e-sec span { height: 7px; border-radius: 4px; background: rgba(14,18,38,.12); }
.e-btn { align-self: flex-start; font-style: normal; font-size: 11px; font-weight: 700; color: #FFFFFF; background: var(--electric); padding: 6px 10px; border-radius: 6px; }
.e-g { font-size: 11px; font-weight: 600; padding: 6px 8px; border-radius: 6px; color: #6F79A0; border: 1px dashed rgba(207,224,255,.2); transition: all .4s; }
.e-g.ok { color: #CFE0FF; background: rgba(127,163,255,.14); border: 1px solid transparent; }
.e-g.warn { color: #E3D5AE; background: rgba(167,153,118,.2); border: 1px solid transparent; }
.e-num { height: 30px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font: 500 11px "JetBrains Mono", monospace; color: #6F79A0; border: 1px solid rgba(207,224,255,.12); }
.e-num.done { color: var(--dim-d); } .e-num.now { color: #FFFFFF; border-color: var(--electric); background: rgba(59,108,255,.2); }
.ep-slide { border-radius: 9px; background: linear-gradient(135deg, #1B2340, #0E1226); border: 1px solid rgba(207,224,255,.16); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ep-eb { font: 500 10px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--brass); }
.ep-t { font: 800 19px/1.1 var(--sans); letter-spacing: -.02em; }
.ep-bars { flex: 1; display: flex; align-items: flex-end; gap: 10px; margin-top: 8px; } .ep-bars i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(207,224,255,.2); transition: height .5s; } .ep-bars i.hi { background: var(--electric); }
.ep-conf { font: 800 34px/1 var(--sans); letter-spacing: -.03em; color: var(--electric-soft); display: flex; flex-direction: column; } .ep-conf small { font: 500 11px var(--sans); color: var(--mute-d); letter-spacing: 0; margin-top: 4px; }
.ed-rail { display: flex; flex-direction: column; gap: 8px; align-items: center; padding-top: 4px; } .ed-rail i { width: 22px; height: 22px; border-radius: 6px; background: rgba(207,224,255,.1); } .ed-rail i.on { background: var(--electric); }
.ed-page { border-radius: 4px; background: #FBFAF6; color: #0E1226; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.ed-page b { font: 800 16px/1.15 var(--sans); letter-spacing: -.02em; transition: opacity .4s; }
.ed-l { display: block; height: 7px; border-radius: 4px; background: rgba(14,18,38,.13); transition: opacity .4s; }
.ed-tbl { display: grid; grid-template-columns: 2fr 1fr; gap: 5px; margin-top: 4px; transition: opacity .4s; } .ed-tbl i { height: 14px; border-radius: 3px; background: rgba(59,108,255,.12); }
.ed-gate { margin-top: auto; text-align: center; font-size: 12px; font-weight: 700; padding: 8px; border-radius: 7px; border: 1px solid rgba(207,224,255,.25); color: var(--dim-d); transition: all .4s; }
.ed-gate.now { border-color: var(--electric); color: #FFFFFF; } .ed-gate.ok { background: var(--electric); border-color: var(--electric); color: #FFFFFF; }
.ec-board { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-height: 0; }
.ec-col { border-radius: 9px; background: rgba(27,35,64,.6); border: 1px solid rgba(207,224,255,.1); padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.ec-card { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; padding: 9px; border-radius: 7px; background: #0E1226; border: 1px solid rgba(207,224,255,.14); animation: scr-in .4s ease both; }
.ec-card i { width: 4px; align-self: stretch; border-radius: 2px; }
@keyframes scr-in { from { opacity: 0; transform: translateY(6px); } }
.ej { background-color: #10163A; }
.ej-edges { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .ej-edges path { fill: none; stroke: rgba(127,163,255,.5); stroke-width: 1.5; stroke-dasharray: 5 5; }
.ej-n { position: absolute; width: 112px; padding: 9px 10px; border-radius: 9px; background: #F4F1EA; color: #0E1226; font-size: 12px; font-weight: 700; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.ej-n small { font: 500 10px "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .06em; color: #766332; }
.ej-n.trig { box-shadow: 0 0 0 2px var(--electric), 0 10px 24px rgba(0,0,0,.35); }
.ej-tok { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--electric-soft); box-shadow: 0 0 0 5px rgba(127,163,255,.25); offset-path: path("M70 148 L160 148 M230 148 L300 148 C 330 148, 345 148, 360 148 C 390 148, 400 84, 430 84"); offset-rotate: 0deg; animation: ej-move 4.2s linear infinite; }
.ej-tok.t2 { offset-path: path("M70 148 L160 148 M230 148 L300 148 C 330 148, 345 148, 360 148 C 390 148, 400 212, 430 212"); animation-delay: -2.1s; }
@keyframes ej-move { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.ej-count { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; gap: 18px; align-items: center; font-size: 12px; color: var(--dim-d); } .ej-count b { color: #FFFFFF; font-size: 14px; margin-left: 4px; }
.ej-live { margin-left: auto; font-weight: 700; color: #FFFFFF; background: var(--electric); padding: 5px 10px; border-radius: 6px; }
@media (max-width: 1400px) { .scr-stage.big { --s: .8; } }
@media (max-width: 1100px) { .scr-stage.big { --s: .9; } }
@media (max-width: 900px) { .scr-stage.big { --s: .7; } }
@media (max-width: 640px) { .scr-stage.big { --s: .4; } }
@media (prefers-reduced-motion: reduce) { .scr-live, .sk, .ej-tok, .caret, .ec-card { animation: none; } }

.scr i, .scr b { font-style: normal; }
.ws-metric .bar span { background-image: repeating-linear-gradient(90deg, var(--electric) 0 6px, rgba(59,108,255,.5) 6px 10px) !important; }
/* strategy tabs */
.v-chip { cursor: pointer; font-family: var(--sans); position: relative; overflow: hidden; transition: background .2s, color .2s, border-color .2s; }
.on-midnight .v-chip:hover { border-color: rgba(207,224,255,.4); }
.v-chip.on.auto::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.85); animation: v-tabfill 11s linear forwards; }
@keyframes v-tabfill { from { width: 0; } to { width: 100%; } }
.v-strat-vis { min-height: 620px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.v-cap { margin: 0; text-align: center; font-size: 13px; color: #8A93B5; }
/* engines as screens, no boxes */
.v-eng2 { display: flex; flex-direction: column; gap: 22px; text-decoration: none; color: var(--ink); }
.v-eng-t b { font: 800 24px/1.1 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.v-eng-t p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--dim-l); max-width: 36ch; }
.v-eng2 .scr { transition: transform .35s, box-shadow .35s; }
.v-eng2:hover .scr { transform: translateX(-50%) translateY(-6px) scale(var(--s)); }
.v-engines { gap: 64px 32px; }
.v-engines .scr-stage.small { --s: .85; }
@media (max-width: 1600px) { .v-engines .scr-stage.small { --s: .76; } }
@media (max-width: 1350px) { .v-engines .scr-stage.small { --s: .66; } }
@media (max-width: 1100px) { .v-engines .scr-stage.small { --s: .8; } }
@media (max-width: 900px) { .v-engines .scr-stage.small { --s: .64; } }
@media (max-width: 640px) { .v-engines .scr-stage.small { --s: .62; } .v-strat-vis { min-height: 0; } }

/* ---------- v6 contrast pass (AA): white text only on the deeper electric ---------- */
:root { --btn: #2C59E6; --btn-h: #234BCB; }
.rm-btn { background: var(--btn); }
.rm-btn:hover { background: var(--btn-h); }
.rm-btn-ghost { background: transparent; }
.rm-btn-ink { color: #0E1226 !important; border: 1.5px solid rgba(14,18,38,.4) !important; }
.rm-btn-ink:hover { background: #0E1226; color: #FFFFFF !important; }
.on-electric .rm-btn { background: #0E1226; }
.h-q .picked, .v-chip.on, .on-midnight .v-chip.on, .scr .pill.now, .ej-live, .e-btn, .ed-gate.ok, .ws-node.root, .pl-bar.hero, .v-era.sel, .on-night .v-era.sel { background: var(--btn); border-color: var(--btn); }
.on-night .v-era.sel small, .v-era.sel small { color: #E4E9FF; }
.v-core em { color: var(--btn); }
.on-ice .v-ticker-wrap p { color: var(--dim-l); }
.v-cap, .bgr-key em { color: #8F99BF; }
.bgr-hcount { color: #BFB28D; }
.scr-row .n, .scr-row em, .e-pg, .e-num, .scr .pill { color: #8790B5; }
.scr-lab, .scr-act { color: #BBAD86; }
.ej-n small { color: #6E5A2C; }
.e-sl { color: #5E5A50; }
.on-ice .rm-btn, .rm-light .rm-btn { background: var(--btn); }
.rm-btn.rm-btn-ghost { background: transparent; }
.rm-btn.rm-btn-ink:hover { background: #0E1226; }
.ep-eb { color: #CDBF97; }

/* ---------- the hero's dot field, carried through the page ---------- */
.dots { position: relative; isolation: isolate; }
.dots::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle, var(--dc, rgba(207,224,255,.16)) 1.4px, transparent 1.6px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(var(--mw, 45%) var(--mh, 55%) at var(--mx, 85%) var(--my, 50%), #000 0, transparent 100%); mask-image: radial-gradient(var(--mw, 45%) var(--mh, 55%) at var(--mx, 85%) var(--my, 50%), #000 0, transparent 100%); }
.dots[data-d="night"] { --mx: 92%; --my: 30%; }
.dots[data-d="electric"] { --dc: rgba(255,255,255,.22); --mx: 88%; --my: 72%; --mw: 40%; --mh: 45%; }
.dots[data-d="ice"] { --dc: rgba(15,24,70,.14); --mx: 8%; --my: 78%; --mw: 35%; --mh: 40%; }
.dots[data-d="work"] { --dc: rgba(14,18,38,.12); --mx: 50%; --my: 42%; --mw: 38%; --mh: 30%; }
.dots[data-d="close"] { --dc: rgba(207,224,255,.2); --mx: 50%; --my: 100%; --mw: 60%; --mh: 50%; }
.dots > .rm-wrap { position: relative; }
/* moving dots: the field drifts very slowly */
.dots::before { animation: v-dotdrift 60s linear infinite; }
@keyframes v-dotdrift { from { background-position: 0 0; } to { background-position: 30px 60px; } }
/* Customer Zero: 30 questions, none lit */
.cz-dots { display: grid; grid-template-columns: repeat(10, 18px); gap: 12px; margin-top: 36px; }
.cz-dots i { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid rgba(14,18,38,.28); box-sizing: border-box; animation: cz-scan 6s linear infinite; }
.cz-key { margin: 16px 0 0; font-size: 14px; color: var(--dim-l); }
@keyframes cz-scan { 0%, 8%, 100% { background: transparent; border-color: rgba(14,18,38,.28); } 3% { background: rgba(44,89,230,.25); border-color: var(--btn); } }
.cz-dots i:nth-child(1) { animation-delay: 0.0s; }
.cz-dots i:nth-child(2) { animation-delay: 0.2s; }
.cz-dots i:nth-child(3) { animation-delay: 0.4s; }
.cz-dots i:nth-child(4) { animation-delay: 0.6s; }
.cz-dots i:nth-child(5) { animation-delay: 0.8s; }
.cz-dots i:nth-child(6) { animation-delay: 1.0s; }
.cz-dots i:nth-child(7) { animation-delay: 1.2s; }
.cz-dots i:nth-child(8) { animation-delay: 1.4s; }
.cz-dots i:nth-child(9) { animation-delay: 1.6s; }
.cz-dots i:nth-child(10) { animation-delay: 1.8s; }
.cz-dots i:nth-child(11) { animation-delay: 2.0s; }
.cz-dots i:nth-child(12) { animation-delay: 2.2s; }
.cz-dots i:nth-child(13) { animation-delay: 2.4s; }
.cz-dots i:nth-child(14) { animation-delay: 2.6s; }
.cz-dots i:nth-child(15) { animation-delay: 2.8s; }
.cz-dots i:nth-child(16) { animation-delay: 3.0s; }
.cz-dots i:nth-child(17) { animation-delay: 3.2s; }
.cz-dots i:nth-child(18) { animation-delay: 3.4s; }
.cz-dots i:nth-child(19) { animation-delay: 3.6s; }
.cz-dots i:nth-child(20) { animation-delay: 3.8s; }
.cz-dots i:nth-child(21) { animation-delay: 4.0s; }
.cz-dots i:nth-child(22) { animation-delay: 4.2s; }
.cz-dots i:nth-child(23) { animation-delay: 4.4s; }
.cz-dots i:nth-child(24) { animation-delay: 4.6s; }
.cz-dots i:nth-child(25) { animation-delay: 4.8s; }
.cz-dots i:nth-child(26) { animation-delay: 5.0s; }
.cz-dots i:nth-child(27) { animation-delay: 5.2s; }
.cz-dots i:nth-child(28) { animation-delay: 5.4s; }
.cz-dots i:nth-child(29) { animation-delay: 5.6s; }
.cz-dots i:nth-child(30) { animation-delay: 5.8s; }
@media (prefers-reduced-motion: reduce) { .dots::before, .cz-dots i { animation: none; } }
@media (max-width: 640px) { .cz-dots { grid-template-columns: repeat(10, 14px); gap: 9px; } .cz-dots i { width: 14px; height: 14px; } }
@media (max-width: 640px) { .v-era { flex: 1 1 40%; min-height: 96px; padding: 16px; } .bl { --blend: 220px !important; } .v-dusk { background: linear-gradient(180deg, var(--sand) 0, #C9B78C 140px, #3E4566 260px, var(--ink) 340px) !important; } .v-dusk .h-sec { padding-top: 340px !important; } }

/* =====================================================================
   Fluid product visuals: each visual is its own container and scales to
   whatever column it lands in (no viewport breakpoints needed).
   Height comes from aspect-ratio; the scale steps down in 2% increments.
   ===================================================================== */
.scr-stage, .bgr-stage { container-type: inline-size; height: auto !important; }
.scr-stage { container-name: scr; } .scr-stage.big { aspect-ratio: 860 / 560; } .scr-stage.small { aspect-ratio: 560 / 340; }
.bgr-stage { container-name: bgr; aspect-ratio: 860 / 600; }
.scr, .bgr-field { --s: .3; }
@container scr (min-width: 275px) { .scr.big { --s: 0.32; } }
@container scr (min-width: 179px) { .scr.small { --s: 0.32; } }
@container bgr (min-width: 275px) { .bgr-field { --s: 0.32; } }
@container scr (min-width: 292px) { .scr.big { --s: 0.34; } }
@container scr (min-width: 190px) { .scr.small { --s: 0.34; } }
@container bgr (min-width: 292px) { .bgr-field { --s: 0.34; } }
@container scr (min-width: 310px) { .scr.big { --s: 0.36; } }
@container scr (min-width: 202px) { .scr.small { --s: 0.36; } }
@container bgr (min-width: 310px) { .bgr-field { --s: 0.36; } }
@container scr (min-width: 327px) { .scr.big { --s: 0.38; } }
@container scr (min-width: 213px) { .scr.small { --s: 0.38; } }
@container bgr (min-width: 327px) { .bgr-field { --s: 0.38; } }
@container scr (min-width: 344px) { .scr.big { --s: 0.4; } }
@container scr (min-width: 224px) { .scr.small { --s: 0.4; } }
@container bgr (min-width: 344px) { .bgr-field { --s: 0.4; } }
@container scr (min-width: 361px) { .scr.big { --s: 0.42; } }
@container scr (min-width: 235px) { .scr.small { --s: 0.42; } }
@container bgr (min-width: 361px) { .bgr-field { --s: 0.42; } }
@container scr (min-width: 378px) { .scr.big { --s: 0.44; } }
@container scr (min-width: 246px) { .scr.small { --s: 0.44; } }
@container bgr (min-width: 378px) { .bgr-field { --s: 0.44; } }
@container scr (min-width: 396px) { .scr.big { --s: 0.46; } }
@container scr (min-width: 258px) { .scr.small { --s: 0.46; } }
@container bgr (min-width: 396px) { .bgr-field { --s: 0.46; } }
@container scr (min-width: 413px) { .scr.big { --s: 0.48; } }
@container scr (min-width: 269px) { .scr.small { --s: 0.48; } }
@container bgr (min-width: 413px) { .bgr-field { --s: 0.48; } }
@container scr (min-width: 430px) { .scr.big { --s: 0.5; } }
@container scr (min-width: 280px) { .scr.small { --s: 0.5; } }
@container bgr (min-width: 430px) { .bgr-field { --s: 0.5; } }
@container scr (min-width: 447px) { .scr.big { --s: 0.52; } }
@container scr (min-width: 291px) { .scr.small { --s: 0.52; } }
@container bgr (min-width: 447px) { .bgr-field { --s: 0.52; } }
@container scr (min-width: 464px) { .scr.big { --s: 0.54; } }
@container scr (min-width: 302px) { .scr.small { --s: 0.54; } }
@container bgr (min-width: 464px) { .bgr-field { --s: 0.54; } }
@container scr (min-width: 482px) { .scr.big { --s: 0.56; } }
@container scr (min-width: 314px) { .scr.small { --s: 0.56; } }
@container bgr (min-width: 482px) { .bgr-field { --s: 0.56; } }
@container scr (min-width: 499px) { .scr.big { --s: 0.58; } }
@container scr (min-width: 325px) { .scr.small { --s: 0.58; } }
@container bgr (min-width: 499px) { .bgr-field { --s: 0.58; } }
@container scr (min-width: 516px) { .scr.big { --s: 0.6; } }
@container scr (min-width: 336px) { .scr.small { --s: 0.6; } }
@container bgr (min-width: 516px) { .bgr-field { --s: 0.6; } }
@container scr (min-width: 533px) { .scr.big { --s: 0.62; } }
@container scr (min-width: 347px) { .scr.small { --s: 0.62; } }
@container bgr (min-width: 533px) { .bgr-field { --s: 0.62; } }
@container scr (min-width: 550px) { .scr.big { --s: 0.64; } }
@container scr (min-width: 358px) { .scr.small { --s: 0.64; } }
@container bgr (min-width: 550px) { .bgr-field { --s: 0.64; } }
@container scr (min-width: 568px) { .scr.big { --s: 0.66; } }
@container scr (min-width: 370px) { .scr.small { --s: 0.66; } }
@container bgr (min-width: 568px) { .bgr-field { --s: 0.66; } }
@container scr (min-width: 585px) { .scr.big { --s: 0.68; } }
@container scr (min-width: 381px) { .scr.small { --s: 0.68; } }
@container bgr (min-width: 585px) { .bgr-field { --s: 0.68; } }
@container scr (min-width: 602px) { .scr.big { --s: 0.7; } }
@container scr (min-width: 392px) { .scr.small { --s: 0.7; } }
@container bgr (min-width: 602px) { .bgr-field { --s: 0.7; } }
@container scr (min-width: 619px) { .scr.big { --s: 0.72; } }
@container scr (min-width: 403px) { .scr.small { --s: 0.72; } }
@container bgr (min-width: 619px) { .bgr-field { --s: 0.72; } }
@container scr (min-width: 636px) { .scr.big { --s: 0.74; } }
@container scr (min-width: 414px) { .scr.small { --s: 0.74; } }
@container bgr (min-width: 636px) { .bgr-field { --s: 0.74; } }
@container scr (min-width: 654px) { .scr.big { --s: 0.76; } }
@container scr (min-width: 426px) { .scr.small { --s: 0.76; } }
@container bgr (min-width: 654px) { .bgr-field { --s: 0.76; } }
@container scr (min-width: 671px) { .scr.big { --s: 0.78; } }
@container scr (min-width: 437px) { .scr.small { --s: 0.78; } }
@container bgr (min-width: 671px) { .bgr-field { --s: 0.78; } }
@container scr (min-width: 688px) { .scr.big { --s: 0.8; } }
@container scr (min-width: 448px) { .scr.small { --s: 0.8; } }
@container bgr (min-width: 688px) { .bgr-field { --s: 0.8; } }
@container scr (min-width: 705px) { .scr.big { --s: 0.82; } }
@container scr (min-width: 459px) { .scr.small { --s: 0.82; } }
@container bgr (min-width: 705px) { .bgr-field { --s: 0.82; } }
@container scr (min-width: 722px) { .scr.big { --s: 0.84; } }
@container scr (min-width: 470px) { .scr.small { --s: 0.84; } }
@container bgr (min-width: 722px) { .bgr-field { --s: 0.84; } }
@container scr (min-width: 740px) { .scr.big { --s: 0.86; } }
@container scr (min-width: 482px) { .scr.small { --s: 0.86; } }
@container bgr (min-width: 740px) { .bgr-field { --s: 0.86; } }
@container scr (min-width: 757px) { .scr.big { --s: 0.88; } }
@container scr (min-width: 493px) { .scr.small { --s: 0.88; } }
@container bgr (min-width: 757px) { .bgr-field { --s: 0.88; } }
@container scr (min-width: 774px) { .scr.big { --s: 0.9; } }
@container scr (min-width: 504px) { .scr.small { --s: 0.9; } }
@container bgr (min-width: 774px) { .bgr-field { --s: 0.9; } }
@container scr (min-width: 791px) { .scr.big { --s: 0.92; } }
@container scr (min-width: 515px) { .scr.small { --s: 0.92; } }
@container bgr (min-width: 791px) { .bgr-field { --s: 0.92; } }
@container scr (min-width: 808px) { .scr.big { --s: 0.94; } }
@container scr (min-width: 526px) { .scr.small { --s: 0.94; } }
@container bgr (min-width: 808px) { .bgr-field { --s: 0.94; } }
@container scr (min-width: 826px) { .scr.big { --s: 0.96; } }
@container scr (min-width: 538px) { .scr.small { --s: 0.96; } }
@container bgr (min-width: 826px) { .bgr-field { --s: 0.96; } }
@container scr (min-width: 843px) { .scr.big { --s: 0.98; } }
@container scr (min-width: 549px) { .scr.small { --s: 0.98; } }
@container bgr (min-width: 843px) { .bgr-field { --s: 0.98; } }
@container scr (min-width: 860px) { .scr.big { --s: 1.0; } }
@container scr (min-width: 560px) { .scr.small { --s: 1.0; } }
@container bgr (min-width: 860px) { .bgr-field { --s: 1.0; } }
/* asking the machines + brandguard screens */
.ak-key { display: flex; gap: 16px; font-size: 12px; color: var(--dim-d); padding-bottom: 10px; flex-wrap: wrap; }
.ak-key span { display: inline-flex; align-items: center; gap: 6px; }
.scr .d { display: inline-block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box; transition: background .3s, box-shadow .3s; }
.scr .d-p { border: 1px dashed rgba(207,224,255,.3); } .scr .d-n { background: rgba(207,224,255,.18); } .scr .d-y { background: #7FA3FF; } .scr .d-r { background: #A79976; box-shadow: 0 0 0 2px #0E1226, 0 0 0 3px #A79976; }
.ak-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 150px; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(207,224,255,.12); }
.ak-row b { display: block; font-size: 14px; } .ak-row small { font-size: 11px; color: #8790B5; }
.ak-row p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--text-d); }
.ak-mx { display: grid; grid-template-rows: repeat(4, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 4px; }
.ak-big b { display: block; font: 800 40px/1 var(--sans); letter-spacing: -.04em; color: #A9C0FF; margin-top: 4px; } .ak-big small { font-size: 12px; color: #8790B5; }
.ak-bl { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; gap: 6px; } .ak-bl .vl { font-family: "JetBrains Mono", monospace; color: var(--dim-d); }
.gd-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(207,224,255,.12); background: rgba(230,236,248,.03); transition: all .35s; }
.gd-row b { display: block; font-size: 15px; } .gd-row small { font-size: 12px; color: #8790B5; }
.gd-v { flex: 0 0 auto; font: 600 12px var(--sans); padding: 6px 10px; border-radius: 6px; color: #8790B5; border: 1px dashed rgba(207,224,255,.2); }
.gd-row.now { border-color: var(--electric); } .gd-row.now .gd-v { color: #FFFFFF; border: 1px solid var(--electric); }
.gd-row.ok .gd-v { color: #CFE0FF; background: rgba(127,163,255,.16); border: 1px solid transparent; }
.gd-row.warn .gd-v { color: #E3D5AE; background: rgba(167,153,118,.2); border: 1px solid transparent; }
.gd-row.rm { opacity: .5; } .gd-row.rm b { text-decoration: line-through; text-decoration-color: rgba(207,224,255,.5); } .gd-row.rm .gd-v { color: #C6CBDD; border: 1px solid rgba(207,224,255,.2); }
.gd-row.wait { opacity: .55; }