/* Oway v6: Platform, Solutions, Research and Security pages.
   Layer colors follow the brand: IOI purple, Juno blue, Oway OS orange, your operation green. */
:root {
  --v6-ioi: #B58CFF; --v6-ioi-soft: rgba(106, 13, 255, 0.16); --v6-ioi-line: rgba(160, 110, 255, 0.42);
  --v6-juno: #8A78FF; --v6-juno-soft: rgba(56, 37, 253, 0.16); --v6-juno-line: rgba(120, 104, 255, 0.45);
  --v6-os: #FF8A4C; --v6-os-soft: rgba(246, 92, 14, 0.12); --v6-os-line: rgba(246, 92, 14, 0.45);
  --v6-ops: #3FD08F; --v6-ops-soft: rgba(32, 162, 113, 0.14); --v6-ops-line: rgba(63, 208, 143, 0.38);
}
main [id] { scroll-margin-top: 96px; }

/* Mega menu variants */
.mg-p.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-p.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.mg-col .mg-lbl.ioi { color: var(--v6-ioi); } .mg-col .mg-lbl.juno { color: var(--v6-juno); } .mg-col .mg-lbl.os { color: var(--v6-os); }

/* Section sub-navigation */
.subnav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 28px; }
.subnav a { height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 7px; border: 1px solid var(--line); font-size: 13.5px; font-weight: 500; color: #fff; transition: border-color 160ms, background-color 160ms; }
.subnav a:hover, .subnav a[aria-current] { border-color: var(--or-line); background: var(--or-soft); color: var(--or-hi); }
.hero.c .subnav { justify-content: center; }

/* The stack diagram */
.stack { display: grid; gap: 10px; max-width: 1040px; margin: 0 auto; }
.stk { display: grid; grid-template-columns: minmax(180px, 0.32fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px 22px; border-radius: 7px; border: 1px solid var(--k-line); background: var(--k-soft); transition: transform 300ms cubic-bezier(.16,1,.3,1), border-color 200ms; }
a.stk:hover { transform: translateX(4px); border-color: var(--k); }
.stk.os { --k: var(--v6-os); --k-soft: var(--v6-os-soft); --k-line: var(--v6-os-line); }
.stk.juno { --k: var(--v6-juno); --k-soft: var(--v6-juno-soft); --k-line: var(--v6-juno-line); }
.stk.ioi { --k: var(--v6-ioi); --k-soft: var(--v6-ioi-soft); --k-line: var(--v6-ioi-line); }
.stk.ops { --k: var(--v6-ops); --k-soft: transparent; --k-line: var(--v6-ops-line); border-style: dashed; }
.stk-n { display: grid; gap: 4px; }
.stk-n b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--k); }
.stk-n span { font-size: 13.5px; color: #fff; opacity: 0.78; }
.stk-c { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.stk-c li { font-size: 13px; padding: 5px 10px; border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid var(--hair); color: #fff; }
.stk-go { color: var(--k); display: inline-flex; }
.stk-go svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .stk { grid-template-columns: 1fr; gap: 12px; } .stk-go { display: none; } }

/* Feature rows: copy beside a real screen */
.frows { display: grid; gap: clamp(64px, 8vw, 104px); max-width: 1200px; margin: 0 auto; }
.frow { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.frow.rev > .frow-copy { order: 2; }
.frow-copy { display: grid; gap: 14px; align-content: start; }
.frow-copy .h3 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; }
.frow-copy ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.frow-copy li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: #fff; opacity: 0.88; }
.frow-copy li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--or); }
.frow-copy .lbl { margin: 0; }
.frow .stage-sky { min-width: 0; }
.frow .qq { margin: 0; }
@media (max-width: 900px) { .frow { grid-template-columns: 1fr; } .frow.rev > .frow-copy { order: 0; } }

/* Rotating hero word */
.rot { max-width: none; }
.rot-w { display: inline-block; color: var(--or-hi); }
.rot-w span { display: inline-block; transition: opacity 300ms ease, transform 420ms cubic-bezier(.16,1,.3,1); }
.rot-w span.out { opacity: 0; transform: translateY(-0.25em); }
.rot-w span.in { opacity: 0; transform: translateY(0.25em); transition: none; }

/* Use cases */
.ucs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
.uc { display: grid; gap: 10px; align-content: start; padding: 22px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); transition: border-color 200ms; }
.uc:hover { border-color: var(--or-line); }
.uc .h3 { font-size: 17px; }
.uc .p { color: #fff; opacity: 0.84; font-size: 14.5px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 5px; border: 1px solid var(--k-line, var(--line)); color: var(--k, #fff); background: var(--k-soft, transparent); }
.tag.ioi { --k: var(--v6-ioi); --k-soft: var(--v6-ioi-soft); --k-line: var(--v6-ioi-line); }
.tag.juno { --k: var(--v6-juno); --k-soft: var(--v6-juno-soft); --k-line: var(--v6-juno-line); }
.tag.os { --k: var(--v6-os); --k-soft: var(--v6-os-soft); --k-line: var(--v6-os-line); }
@media (max-width: 1080px) { .ucs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ucs { grid-template-columns: 1fr; } }

/* Roles */
.roles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); }
.roles4 > div { display: grid; gap: 10px; align-content: start; padding: 26px 22px 6px 0; }
.roles4 > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.roles4 b { font-size: 17px; font-weight: 600; }
.roles4 p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #fff; opacity: 0.84; }
@media (max-width: 900px) { .roles4 { grid-template-columns: 1fr 1fr; } .roles4 > div:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 560px) { .roles4 { grid-template-columns: 1fr; } .roles4 > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

/* Industry tiles (teaser) */
.inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1200px; margin: 0 auto; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.ind-t { display: grid; gap: 8px; align-content: start; padding: 22px; min-height: 150px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color 200ms; }
.ind-t:nth-child(4n) { border-right: 0; } .ind-t:nth-last-child(-n+4) { border-bottom: 0; }
.ind-t:hover { background: var(--or-soft); }
.ind-t b { font-size: 16.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ind-t b svg { width: 16px; height: 16px; color: var(--or-hi); flex: none; }
.ind-t span { font-size: 14px; line-height: 1.55; color: #fff; opacity: 0.8; }
@media (max-width: 960px) { .inds { grid-template-columns: 1fr 1fr; } .ind-t:nth-child(4n) { border-right: 1px solid var(--line); } .ind-t:nth-child(2n) { border-right: 0; } .ind-t:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); } .ind-t:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 560px) { .inds { grid-template-columns: 1fr; } .ind-t, .ind-t:nth-child(4n) { border-right: 0; } .ind-t:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); } .ind-t:last-child { border-bottom: 0; } }

/* Industry sections */
.ind { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); max-width: 1200px; margin: 0 auto; padding-top: 40px; border-top: 1px solid var(--line); }
.ind-h { display: grid; gap: 14px; align-content: start; }
.ind-h .h2 { font-size: clamp(26px, 2.6vw, 34px); }
.ind-logos { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; margin-top: 10px; }
.ind-logos img { height: 26px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.85; }
.ind-l { display: grid; border-top: 1px solid var(--line); }
.ind-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 18px 2px; border-bottom: 1px solid var(--line); }
.ind-r b { font-size: 16px; font-weight: 600; }
.ind-r p { grid-column: 1; margin: 0; font-size: 14.5px; line-height: 1.55; color: #fff; opacity: 0.82; }
.ind-r .tags { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; justify-content: flex-end; }
@media (max-width: 900px) { .ind { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ind-r { grid-template-columns: 1fr; } .ind-r .tags { grid-column: 1; grid-row: auto; justify-content: flex-start; } }

/* Security */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; }
.pillar { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.pillar-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 7px; background: var(--or-soft); border: 1px solid var(--or-line); color: var(--or-hi); }
.pillar-ic .icon { width: 18px; height: 18px; }
.pillar .h3 { margin-top: 6px; }
.pillar .p { color: #fff; opacity: 0.84; }
@media (max-width: 960px) { .pillars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .pillars { grid-template-columns: 1fr; } }
.ctl-wrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); max-width: 1200px; margin: 0 auto; align-items: start; }
.ctl-wrap .phead { margin: 0; }
.ctl { display: grid; border-top: 1px solid var(--line); }
.ctl > div { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 14px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.ctl .icon { width: 16px; height: 16px; color: var(--v6-ops); margin-top: 3px; }
.ctl b { font-size: 15.5px; font-weight: 600; }
.ctl p { grid-column: 2; margin: 0; font-size: 14.5px; line-height: 1.55; color: #fff; opacity: 0.8; }
@media (max-width: 900px) { .ctl-wrap { grid-template-columns: 1fr; } }
.statement { max-width: 820px; margin: 0 auto; text-align: center; display: grid; gap: 18px; justify-items: center; }
.statement .p-lg { margin: 0 auto; }

/* Research */
.rs-feat { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; max-width: 1200px; margin: 0 auto; transition: border-color 200ms; }
.rs-feat:hover { border-color: var(--or-line); }
.rs-feat .art { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.rs-feat-c { display: grid; gap: 14px; align-content: center; padding: clamp(24px, 4vw, 48px); }
.rs-feat-c .h2 { font-size: clamp(26px, 2.8vw, 36px); }
.rs-meta { font-size: 13px; color: #fff; opacity: 0.7; display: flex; gap: 12px; flex-wrap: wrap; }
.rs-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--or-hi); }
.rs-go .icon { width: 14px; height: 14px; }
@media (max-width: 860px) { .rs-feat { grid-template-columns: 1fr; } .rs-feat .art { min-height: 200px; max-height: 260px; } }
.rs-list { max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); }
.rs { display: grid; grid-template-columns: 140px minmax(0, 1fr) 150px; gap: 8px 28px; align-items: start; padding: 22px 4px; border-bottom: 1px solid var(--line); transition: background-color 160ms; }
a.rs:hover { background: rgba(255,255,255,0.025); }
.rs-k { font-size: 12.5px; font-weight: 600; color: var(--or-hi); padding-top: 3px; }
.rs-b { display: grid; gap: 6px; }
.rs-b b { font-size: 18px; font-weight: 600; letter-spacing: -0.012em; }
.rs-b span { font-size: 14.5px; line-height: 1.55; color: #fff; opacity: 0.8; max-width: 70ch; }
.rs-d { font-size: 13px; color: #fff; opacity: 0.7; text-align: right; padding-top: 3px; }
@media (max-width: 760px) { .rs { grid-template-columns: 1fr; } .rs-d { text-align: left; } }
.rs-groups { max-width: 1200px; margin: 0 auto; display: grid; gap: 56px; }
.rs-group h2 { font-size: 13px; font-weight: 600; color: #fff; opacity: 0.8; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.08em; }

/* Long-form research pages */
.doc { max-width: 760px; margin: 0 auto; }
.doc h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; margin: 48px 0 12px; }
.doc p, .doc li { font-size: 16.5px; line-height: 1.7; color: #fff; opacity: 0.88; }
.doc ul { padding-left: 20px; display: grid; gap: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 15px; }
.doc th, .doc td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-size: 12.5px; font-weight: 600; color: var(--or-hi); }
.doc .tbl { overflow-x: auto; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: #fff; opacity: 0.75; margin-top: 18px; }

/* IOI Search example tabs scroll inside their row on narrow screens */
.ans-ctl { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ans-ctl::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .ans-ctl.c { justify-content: flex-start; } .ans-ctl .seg2 { flex: none; } }

/* Keep v6 blocks on the same 1040px content column as section heads */
.hero .subnav, .phead.solo, .ucs, .roles4, .inds, .ind, .pillars, .ctl-wrap, .rs-feat, .rs-groups, .frows { max-width: 1040px; margin-left: auto; margin-right: auto; }
.hero .subnav { margin-top: 28px; }
.frow { max-width: 1040px; margin-left: auto; margin-right: auto; }
.frow.rev { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.frow > .qq { width: auto; max-width: 100%; margin: 0; min-width: 0; }
@media (max-width: 900px) { .frow.rev { grid-template-columns: 1fr; } }

/* ── v7: industry pages ───────────────────────────────────────────── */
.ind-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 1040px; margin: 18px auto 0; }
.ind-hero-c { display: grid; gap: 18px; align-content: start; }
.ind-hero-c .ctas { margin: 6px 0 0; }
.ind-hero-img .art, .ind-hero-img .ph { width: 100%; aspect-ratio: 4 / 3; border-radius: 7px; border: 1px solid var(--line); object-fit: cover; display: block; }
.hero.sub .crumb { max-width: 1040px; margin: 0 auto; }
@media (max-width: 900px) { .ind-hero { grid-template-columns: 1fr; } }

.uc-list { display: grid; gap: clamp(72px, 9vw, 120px); max-width: 1040px; margin: 0 auto; }
.uc-blk { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.uc-blk.rev > .uc-copy { order: 2; }
.uc-copy { display: grid; gap: 14px; align-content: start; position: sticky; top: 110px; }
.uc-copy .h2 { font-size: clamp(26px, 2.6vw, 34px); margin: 0; }
.uc-copy .p-lg { margin: 0; }
.uc-copy ul { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 10px; }
.uc-copy li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: #fff; opacity: 0.88; }
.uc-copy li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--or); }
.uc-media { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 900px) { .uc-blk { grid-template-columns: 1fr; } .uc-blk.rev > .uc-copy { order: 0; } .uc-copy { position: static; } }

/* Photos and photo slots */
.ph { position: relative; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: #141416; }
.ph img, .ph .art { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-slot { display: grid; align-content: end; gap: 6px; padding: 20px; background:
  linear-gradient(160deg, rgba(246,92,14,0.10), rgba(56,37,253,0.10) 60%, rgba(255,255,255,0.02)),
  repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px), #141416; }
.ph-k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--or-hi); }
.ph-b { font-size: 15px; line-height: 1.45; color: #fff; max-width: 40ch; }

/* Charts */
.chart { margin: 0; padding: 18px 18px 10px; border-radius: 7px; border: 1px solid var(--line); background: #111113; position: relative; }
.chart figcaption { display: grid; gap: 3px; margin-bottom: 10px; }
.chart figcaption b { font-size: 15px; font-weight: 600; color: #fff; }
.chart figcaption span { font-size: 12.5px; color: rgba(255,255,255,0.62); }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .g { stroke: rgba(255,255,255,0.08); stroke-width: 1; }
.chart .tk { font: 500 11px var(--font, system-ui); fill: rgba(255,255,255,0.58); }
.chart .lab { font: 500 12.5px var(--font, system-ui); fill: rgba(255,255,255,0.86); }
.chart .val { font: 600 12px var(--font, system-ui); fill: #fff; }
.chart .mk { stroke: rgba(255,255,255,0.32); stroke-width: 1; }
.chart .mkl { font: 600 11px var(--font, system-ui); fill: rgba(255,255,255,0.72); }
.chart [data-tip] { cursor: default; transition: opacity 150ms; }
.chart svg:hover path[data-tip]:not(:hover) { opacity: 0.55; }
.ch-leg { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 8px; font-size: 12.5px; color: rgba(255,255,255,0.82); }
.ch-leg span { display: inline-flex; align-items: center; gap: 7px; }
.ch-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ch-tip { position: absolute; pointer-events: none; z-index: 5; padding: 6px 9px; border-radius: 6px; background: #1d1d21; border: 1px solid rgba(255,255,255,0.14); font-size: 12.5px; color: #fff; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

/* Industry index cards */
.ind-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto; }
.ind-card { display: grid; border-radius: 7px; border: 1px solid var(--line); overflow: hidden; transition: border-color 200ms; }
.ind-card:hover { border-color: var(--or-line); }
.ind-card .ph { border: 0; border-radius: 0; aspect-ratio: 16 / 8; }
.ind-card-c { display: grid; gap: 8px; padding: 20px 22px 22px; }
.ind-card-c b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; }
.ind-card-c > span:not(.rs-go) { font-size: 14.5px; line-height: 1.55; color: #fff; opacity: 0.82; }
@media (max-width: 760px) { .ind-cards { grid-template-columns: 1fr; } }
.inds.n7 .ind-t:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
.inds.n7 .ind-t:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 960px) { .inds.n7 .ind-t:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); } .inds.n7 .ind-t:last-child { border-bottom: 0; } }
.ind-hero-img .ph.ph-slot { display: grid; }
.uc-blk.rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
@media (max-width: 900px) { .uc-blk.rev { grid-template-columns: 1fr; } }
.ph-k { display: block; }

/* ── v8: gradient ring on hover, platform split cards, IOI introduction ── */
@font-face{font-family:"Dynamo DM Sans";font-weight:400;font-style:normal;font-display:block;src:url("../fonts/dynamo-dm-sans.ttf") format("truetype")}
@property --ring-angle { syntax: '<angle>'; inherits: true; initial-value: 104deg; }
.ring-host { position: relative; isolation: isolate; --ring-angle: 104deg; transition: --ring-angle 0.6s cubic-bezier(.22,1,.36,1); }
.ring-host:hover { transition: --ring-angle 0.12s linear; }
.ring-edge { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1px;
  background: linear-gradient(var(--ring-angle), #F65C0E 0%, #7636d6 46%, #492dfa 74%, #F65C0E 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  opacity: 0; transition: opacity 0.26s cubic-bezier(.22,1,.36,1); }
.ring-host:hover > .ring-edge, .ring-host:focus-visible > .ring-edge, .ring-host:focus-within > .ring-edge { opacity: 1; }
.btn.ring-host .ring-edge { padding: 1.5px; }
/* Soft glow behind elements that are not clipped */
.ring-glow { position: absolute; inset: -18px; z-index: -1; pointer-events: none; border-radius: 24px; filter: blur(34px); opacity: 0; transform: scale(.96);
  background: radial-gradient(60% 60% at var(--glow-x, 50%) var(--glow-y, 50%), rgba(30,0,255,0.5), transparent 70%), linear-gradient(var(--ring-angle), #F65C0E 0%, #7636d6 46%, #492dfa 74%, #F65C0E 100%);
  transition: opacity .42s cubic-bezier(.22,1,.36,1), transform .42s cubic-bezier(.22,1,.36,1); }
.ring-host:hover > .ring-glow { opacity: .35; transform: none; }
.btn .ring-glow { inset: -8px; filter: blur(14px); }
.btn.ring-host:hover > .ring-glow { opacity: .55; }

/* Platform split (after Harvey's "One Platform"): the hovered card widens */
.split { display: flex; gap: 16px; max-width: 1200px; margin: 0 auto; min-height: 560px; }
.split-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; border-radius: 7px; border: 1px solid var(--line); background: #0f0f12;
  transition: flex-grow .7s cubic-bezier(.22,1,.36,1), border-color .3s; }
.split:hover .split-card { flex-grow: .78; }
.split .split-card:hover, .split .split-card:focus-within { flex-grow: 1.35; }
.split-media { position: relative; flex: 1; min-height: 300px; overflow: hidden; border-radius: 6px 6px 0 0; }
.split-media .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.22,1,.36,1), opacity .6s; }
.split-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0) 30%, rgba(15,15,18,0.95) 100%); }
.split-card:hover .split-media .art { transform: scale(1); opacity: .75; }
.split-shot { position: absolute; z-index: 1; left: 9%; right: -6%; top: 14%; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
  transition: transform 1s cubic-bezier(.22,1,.36,1); }
.split-shot img { display: block; width: 100%; height: auto; }
.split-card:hover .split-shot { transform: translate(-3%, -2%); }
.split-c { position: relative; z-index: 2; display: grid; gap: 10px; padding: 26px 28px 28px; }
.split-c .lbl { margin: 0; }
.split-c h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.split-c p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #fff; opacity: .84; max-width: 46ch; }
.split-c .rs-go { margin-top: 6px; }
@media (max-width: 860px) { .split { flex-direction: column; min-height: 0; } .split:hover .split-card, .split .split-card:hover { flex-grow: 1; } .split-media { min-height: 240px; } }

/* Introducing IOI */
.ioi-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; max-width: 1040px; margin: 0 auto; }
.ioi-intro-stage { position: relative; border-radius: 10px; background: #000; border: 1px solid var(--line); aspect-ratio: 1; overflow: visible; }
.ioi-intro-stage canvas { display: block; width: 100%; height: 100%; border-radius: 10px; }
.ioi-intro-c { display: grid; gap: 18px; align-content: center; }
.ioi-intro-c .h2 { margin: 0; }
.ioi-intro-c .p-lg { margin: 0; }
.ioi-intro-c ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.ioi-intro-c li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.55; color: #fff; opacity: .88; }
.ioi-intro-c li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, #3825FD, #F65C0E); }
@media (max-width: 860px) { .ioi-intro { grid-template-columns: 1fr; } .ioi-intro-stage { max-width: 520px; width: 100%; margin: 0 auto; } }
.ioi-intro-c .ctas, .ind-hero-c .ctas { margin: 6px 0 0; max-width: none; justify-content: flex-start; }
.hx-split .split { max-width: none; min-height: 520px; }
.hx-split .split[data-up] { opacity: 1; transform: none; }
.split-media { flex: none; height: clamp(260px, 26vw, 340px); min-height: 0; } .split-c { flex: 1; align-content: start; } .hx-split .split { min-height: 0; }

/* ── v9: taller header with larger targets, after Harvey's menubar ── */
:root:root { --nav-h: 78px; }
.nv-brand { font-size: 19px; gap: 10px; }
.nv-brand .chips { height: 32px; }
.nv-in { gap: 40px; }
.nv-links > a, .nv-trig, .nv-link { height: 40px; padding: 0 14px; font-size: 15.5px; }
.nv-trig svg { width: 11px; height: 11px; }
.nv-r { gap: 10px; }
.nv-r .btn.sm { height: 42px; padding: 0 20px !important; font-size: 15px; border-radius: 7px; }
.nv-login { min-width: 104px; justify-content: center; }
.mg-t { font-size: 16px; } .mg-d { font-size: 14px; }
@media (max-width: 960px) { :root:root { --nav-h: 66px; } }

/* Hero buttons: larger, with a wider Log In */
.hx-copy .ctas .btn { height: 54px; padding: 0 28px; font-size: 16.5px; border-radius: 7px; }
.hx-copy .ctas .btn:not(.primary) { min-width: 160px; justify-content: center; }

/* Demo request dropdown */
.dpop { position: absolute; z-index: 300; width: min(520px, calc(100vw - 32px)); opacity: 0; transform: translateY(-6px) scale(.985); transform-origin: top left;
  transition: opacity .22s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1); }
.dpop.on { opacity: 1; transform: none; }
.dpop-in { position: relative; padding: 24px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.13);
  background: linear-gradient(180deg, rgba(44,44,54,0.82), rgba(14,14,17,0.94)); -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1); }
.dpop-in::before { content: ""; position: absolute; inset: -1px; border-radius: 11px; padding: 1px; pointer-events: none;
  background: linear-gradient(115deg, #F65C0E 0%, #7636d6 46%, #492dfa 74%, #F65C0E 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: .7; }
.dpop-h { display: flex; justify-content: space-between; gap: 16px; align-items: start; margin-bottom: 18px; }
.dpop-h .lbl { margin: 0 0 6px; }
.dpop-h h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.dpop-x { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #fff; opacity: .7; flex: none; }
.dpop-x:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.dp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dpop .fld { display: grid; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.8); }
.dpop .input { height: 42px; width: 100%; }
.dpop .fld.bad .input { border-color: #ff6b5e; }
.dp-apps { border: 0; padding: 0; margin: 16px 0 0; }
.dp-apps legend { font-size: 13px; color: rgba(255,255,255,0.8); margin-bottom: 8px; padding: 0; }
.dp-apps > div { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-app { position: relative; cursor: pointer; }
.dp-app input { position: absolute; opacity: 0; pointer-events: none; }
.dp-app span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.14); font-size: 14px; color: #fff; transition: all .18s; }
.dp-app input:checked + span { border-color: var(--or-line); background: var(--or-soft); color: var(--or-hi); }
.dp-app input:focus-visible + span { outline: 2px solid var(--or-hi); outline-offset: 2px; }
.dp-go { width: 100%; justify-content: center; margin-top: 18px; height: 48px; }
.dpop .form-error { margin: 12px 0 0; font-size: 13px; color: #ff8a7a; min-height: 0; }
.dpop .done { display: none; padding: 8px 0; }
.dpop.is-done form { display: none; } .dpop.is-done .done { display: block; }
@media (max-width: 560px) { .dp-grid { grid-template-columns: 1fr; } .dpop { position: fixed; left: 16px !important; right: 16px; top: auto !important; bottom: 16px; width: auto; max-height: calc(100vh - 32px); overflow-y: auto; } }

/* IOI Search: Oway mark in the app bar, and the glassy object peek */
.ioiapp .brand-chips { height: 20px; width: auto; display: block; }
.ioi-win .dlink { cursor: pointer; }
.peek { position: fixed; z-index: 320; width: 340px; max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px;
  background: linear-gradient(180deg, rgba(44,44,54,0.78), rgba(14,14,17,0.9)); -webkit-backdrop-filter: blur(20px) saturate(175%); backdrop-filter: blur(20px) saturate(175%);
  border: 1px solid rgba(255,255,255,0.13); border-radius: 10px; box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .22s cubic-bezier(.22,1,.36,1); color: #fff; font-family: var(--font); }
.peek.on { opacity: 1; transform: none; pointer-events: auto; }
.peek-head { display: flex; align-items: center; gap: 12px; }
.peek-glyph { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 7px; background: rgba(82,54,255,0.16); border: 1px solid rgba(120,104,255,0.45); color: #A79BFF; font: 600 13px var(--font-mono); }
.peek-id { display: grid; gap: 1px; min-width: 0; }
.peek-type { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #A79BFF; font-weight: 600; }
.peek-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.peek-sub { font: 11.5px var(--font-mono); color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peek-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.peek-score { display: flex; align-items: baseline; gap: 10px; }
.peek-cur { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.peek-d { font-size: 12px; color: rgba(255,255,255,0.6); }
.peek-spark { width: 100%; height: auto; display: block; }
.peek-rows { display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.peek-row { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; }
.peek-row span:first-child { color: rgba(255,255,255,0.55); }
.peek-row span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.peek-prose { margin: 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.78); }
.peek-asks { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }
.peek-ask { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 6px; border: 1px solid transparent; font-size: 13px; color: rgba(255,255,255,0.8); }
.peek-ask:hover { background: rgba(246,92,14,0.1); border-color: var(--or-line); color: #fff; }
.peek-ask .icon { width: 13px; height: 13px; flex: none; opacity: .7; }

/* Juno loop: colored night sky behind the wireframe scene */
.juno-loop { background:
  radial-gradient(70% 60% at 78% 18%, rgba(246,92,14,0.26), transparent 60%),
  radial-gradient(60% 70% at 18% 30%, rgba(56,37,253,0.32), transparent 62%),
  radial-gradient(80% 60% at 50% 100%, rgba(118,54,214,0.28), transparent 70%),
  linear-gradient(180deg, #120d2a 0%, #0c0a1a 100%); }
@media (max-width: 620px) { .juno-loop { height: 460px; } .juno-loop .lj-row[data-r="1"], .juno-loop .lj-row[data-r="2"], .juno-loop .lj-row[data-r="3"], .juno-loop .lj-row[data-r="4"] { display: none; } }

/* Oway OS animated quote */
.qd-wrap { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.qd { width: 100%; margin: 0; }
.qd .input[readonly] { cursor: default; }
.qd .input.typing { border-color: var(--or-line); box-shadow: 0 0 0 3px rgba(246,92,14,0.12); }
.qd [data-qd-go] { cursor: default; transition: transform .15s, filter .2s; }
.qd [data-qd-go].press { transform: scale(.96); filter: brightness(1.25); }
.qd-out { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .6s cubic-bezier(.22,1,.36,1); }
.qd-out.on { opacity: 1; transform: none; }
.qd-lane { font-size: 14px; display: grid; gap: 3px; } .qd-route { font-size: 14.5px; } .qd-lane > span:last-child { font-size: 12.5px; color: rgba(255,255,255,0.6); font-family: var(--font-mono); }
.qd-price { display: grid; gap: 2px; }
.qd-k { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.qd-price b { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.qd-mkt { font-size: 13px; color: rgba(255,255,255,0.7); } .qd-mkt em { font-style: normal; color: #3FD08F; font-weight: 600; }
.qd-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: rgba(255,255,255,0.7); } .qd-meta b { color: #fff; font-weight: 600; }
.qd-note { margin: 12px 0 0; font-size: 11.5px; color: rgba(255,255,255,0.45); }
.qd-try { height: 50px; }

/* IOI hero: search and chat switcher */
.ioi-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 1040px; margin: 0 auto; }
.ioi-hero-c { display: grid; gap: 18px; }
.ioi-hero-c .h1, .ioi-hero-c .p-lg { margin: 0; }
.ioi-hero-c .ctas { margin: 6px 0 0; max-width: none; justify-content: flex-start; }
.aw { border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: linear-gradient(180deg, rgba(30,30,38,0.85), rgba(12,12,15,0.95)); box-shadow: 0 30px 80px rgba(0,0,0,0.5); padding: 16px; display: grid; gap: 12px; min-height: 430px; align-content: start; }
.aw-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.aw-seg button { font-size: 13px; }
.aw-node { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: rgba(255,255,255,0.7); }
.aw-node i { width: 7px; height: 7px; border-radius: 50%; background: #F65C0E; }
.aw-q { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.35); font-size: 14.5px; color: #fff; }
.aw-q .icon { width: 15px; height: 15px; opacity: .6; flex: none; }
.aw-caret { width: 1.5px; height: 18px; background: #FF8A4C; animation: awblink 1s steps(1) infinite; }
@keyframes awblink { 50% { opacity: 0; } }
.aw-h { margin: 4px 0 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.aw-cards { display: grid; gap: 8px; margin-top: 8px; }
.aw-card { display: grid; grid-template-columns: minmax(0, 1fr) 100px; grid-template-areas: "h sp" "s sp" "v sp"; gap: 2px 14px; padding: 12px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); }
.aw-ch { grid-area: h; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aw-ch b { font-size: 14px; font-weight: 600; }
.aw-sub { grid-area: s; font-size: 12px; color: rgba(255,255,255,0.55); }
.aw-v { grid-area: v; display: flex; align-items: baseline; gap: 8px; margin-top: 4px; } .aw-v b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .aw-v span { font-size: 12px; color: rgba(255,255,255,0.6); }
.aw-sp { grid-area: sp; width: 100px; height: 30px; align-self: center; }
.aw-chat { display: grid; gap: 10px; margin-top: 4px; }
.aw-msg { max-width: 88%; padding: 10px 13px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; }
.aw-msg.me { justify-self: end; background: #3825FD; color: #fff; border-bottom-right-radius: 3px; }
.aw-msg.juno { justify-self: start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-bottom-left-radius: 3px; display: grid; gap: 6px; }
.aw-j { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; }
.aw-j i { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(#F65C0E, #7636D6, #5236FF, #F65C0E); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }
.aw-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.aw.anim .aw-card, .aw.anim .aw-msg { opacity: 0; transform: translateY(8px); }
.aw.anim.show .aw-card, .aw.anim.show .aw-msg { opacity: 1; transform: none; transition: opacity .45s ease var(--d), transform .55s cubic-bezier(.22,1,.36,1) var(--d); }
@media (max-width: 900px) { .ioi-hero { grid-template-columns: 1fr; } .aw { min-height: 0; } }

/* Founder preview card */
.fcard { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0; max-width: 1040px; margin: 0 auto; border-radius: 10px; border: 1px solid var(--line); background: #0f0f12; overflow: hidden; }
.fcard-ph.ph { aspect-ratio: 4 / 5; border: 0; border-radius: 0; }
.fcard-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-slot { height: 100%; }
.fcard-c { display: grid; gap: 14px; align-content: center; padding: clamp(24px, 4vw, 48px); }
.fcard-c h3 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -0.02em; }
.fcard-c p { margin: 0; font-size: 16px; line-height: 1.65; color: #fff; opacity: .86; }
@media (max-width: 760px) { .fcard { grid-template-columns: 1fr; } .fcard-ph.ph { aspect-ratio: 4 / 3; } }
.hero.sub .ioi-hero-c .ctas:not(.c), .hero.sub .ind-hero-c .ctas:not(.c), .ioi-intro-c .ctas:not(.c) { margin: 6px 0 0; max-width: none; justify-content: flex-start; justify-self: start; }

/* ── v10: footer glow, consent, legal pages, privacy choices ── */
.fx { position: relative; overflow: hidden; padding-bottom: 0; }
.fx-wrap { position: relative; z-index: 2; }
.fx-legal { margin-top: 48px; padding: 18px 0 8px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.fx-legal nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.fx-legal a { font-size: 12.5px; color: rgba(255,255,255,0.72); display: inline-flex; align-items: center; gap: 7px; }
.fx-legal a:hover { color: #fff; }
.ccpa-ic { width: 28px; height: 13px; flex: none; }
.fx-glow { position: relative; z-index: 1; height: clamp(220px, 30vw, 380px); margin-top: -40px; pointer-events: none; overflow: hidden; }
.glow-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fx-glow.glow-static { background: radial-gradient(60% 90% at 30% 110%, rgba(56,37,253,0.75), transparent 70%), radial-gradient(55% 80% at 75% 115%, rgba(246,92,14,0.7), transparent 70%), radial-gradient(40% 60% at 52% 120%, rgba(118,54,214,0.7), transparent 70%); }
.fx-word { position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%); z-index: 2; font-size: clamp(120px, 22vw, 300px); font-weight: 700; letter-spacing: -0.06em; line-height: 1; color: rgba(255,255,255,0.06); mix-blend-mode: overlay; user-select: none; }

/* Consent banner and preferences */
.ck-banner { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 400; width: min(440px, calc(100vw - 32px)); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.ck-banner.on { opacity: 1; transform: none; }
.ck-in, .ck-card { border-radius: 10px; border: 1px solid rgba(255,255,255,0.13); background: linear-gradient(180deg, rgba(40,40,50,0.86), rgba(14,14,17,0.95)); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 24px 60px rgba(0,0,0,0.55); padding: 18px; color: #fff; }
.ck-t { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.ck-p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,0.8); }
.ck-p a, .ck-foot a { color: var(--or-hi); }
.ck-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ck-btns .btn { flex: 1 1 auto; justify-content: center; height: 38px; }
.ck-modal { position: fixed; inset: 0; z-index: 410; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .2s ease; }
.ck-modal.on { opacity: 1; }
.ck-scrim { position: absolute; inset: 0; background: rgba(5,5,8,0.6); }
.ck-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 22px; }
.ck-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.ck-h h2 { margin: 0; font-size: 20px; font-weight: 600; }
.ck-rows { display: grid; margin-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.ck-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.08); cursor: pointer; }
.ck-row > div { display: grid; gap: 3px; } .ck-row b { font-size: 14.5px; } .ck-row span { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.ck-always { font-size: 12.5px !important; color: #3FD08F !important; font-weight: 600; white-space: nowrap; }
.ck-gpc { margin: 12px 0 0; font-size: 12.5px; color: #3FD08F; }
.ck-foot { margin: 14px 0 0; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ck-foot a { display: inline-flex; align-items: center; gap: 6px; }
.tgl { position: relative; flex: none; width: 42px; height: 24px; }
.tgl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.tgl i { position: absolute; inset: 0; border-radius: 99px; background: rgba(255,255,255,0.16); transition: background .2s; }
.tgl i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.tgl input:checked + i { background: #3825FD; } .tgl input:checked + i::after { transform: translateX(18px); }
.tgl input:focus-visible + i { outline: 2px solid var(--or-hi); outline-offset: 2px; }
.tgl input:disabled + i { opacity: .55; }
.tgl.lg { width: 52px; height: 30px; } .tgl.lg i::after { width: 24px; height: 24px; } .tgl.lg input:checked + i::after { transform: translateX(22px); }
.ck-toast { position: fixed; left: 50%; bottom: 24px; z-index: 420; transform: translate(-50%, 10px); opacity: 0; padding: 10px 16px; border-radius: 8px; background: #1d1d21; border: 1px solid rgba(255,255,255,0.14); font-size: 13.5px; color: #fff; transition: opacity .2s, transform .3s; }
.ck-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Legal pages */
.legal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); max-width: 1040px; margin: 0 auto; align-items: start; }
.legal-toc { position: sticky; top: 100px; display: grid; gap: 6px; max-height: calc(100vh - 120px); overflow-y: auto; }
.legal-toc p { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.legal-toc nav { display: grid; gap: 2px; }
.legal-toc a { font-size: 13px; color: rgba(255,255,255,0.7); padding: 4px 0; line-height: 1.4; }
.legal-toc a:hover { color: #fff; }
.legal-doc { max-width: 760px; margin: 0; }
.legal-doc h2 { font-size: 20px; margin-top: 40px; }
.legal-doc code { font: 13px var(--font-mono); background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; }
.legal-doc a { color: var(--or-hi); }
.legal-meta { font-size: 13.5px !important; color: rgba(255,255,255,0.6) !important; }
.legal-box { margin: 20px 0; padding: 16px 18px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,0.025); }
.legal-box p { margin: 0 0 8px; font-size: 14.5px; } .legal-box p:last-child { margin: 0; }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; } .legal-toc { position: static; max-height: none; } }

/* Your Privacy Choices */
.pc { max-width: 1040px; margin: 0 auto; display: grid; gap: 16px; }
.pc-card { padding: 24px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,0.02); }
.pc-card h2 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.pc-card > p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.8); }
.pc-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.pc-row p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.8); }
.pc-gpc { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: rgba(255,255,255,0.75); }
.pc-agent { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; color: rgba(255,255,255,0.8); }
.pc-note { font-size: 13.5px; color: rgba(255,255,255,0.65); } .pc-note a { color: var(--or-hi); }
@media (max-width: 620px) { .pc-row { flex-direction: column; align-items: start; } }

/* Content tables (legal pages, research): padded cells inside a bordered, scrollable frame */
.doc-tbl { margin: 16px 0 28px; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; background: rgba(255,255,255,0.015); }
.doc .doc-tbl table, .doc table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14.5px; }
.doc .doc-tbl th, .doc .doc-tbl td, .doc table th, .doc table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); line-height: 1.55; }
.doc .doc-tbl th, .doc table th { position: static; background: rgba(255,255,255,0.04); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--or-hi); white-space: nowrap; }
.doc .doc-tbl tr:last-child td, .doc table tr:last-child td { border-bottom: 0; }
.doc .doc-tbl td:first-child { font-weight: 600; color: #fff; min-width: 160px; }
.doc .doc-tbl td { color: rgba(255,255,255,0.85); }
@media (max-width: 620px) { .doc .doc-tbl th, .doc .doc-tbl td { padding: 12px 14px; } .doc .doc-tbl table { min-width: 560px; } }
/* Footer glow v2: low-res canvas, GPU blur for soft clouds */
.fx-glow { height: clamp(260px, 32vw, 420px); margin-top: -90px; }
.glow-c { inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); filter: blur(34px) saturate(1.15); transform: translateZ(0); will-change: transform; image-rendering: auto; }
.fx-word { mix-blend-mode: normal; color: rgba(255,255,255,0.05); }
.glow-c { filter: blur(14px) saturate(1.15); inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); }

/* ══ v11 ═════════════════════════════════════════════════════════════════ */
/* Header: clear at the top of the page, glass once the page scrolls. */
.nv:not(.is-solid):not(:has(.mg.open)), .lg-warp .nv:not(.is-solid):not(:has(.mg.open)) {
  background: transparent !important; border-bottom-color: transparent !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Inside Oway lines up with every other section. */
.sw { max-width: 1040px; }

/* Ambient color behind each section, so the glass has something to bend. */
main > section.sec, main [data-v] > section.sec { position: relative; isolation: isolate; }
main > section.sec::before, main [data-v] > section.sec::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 46% at 12% 62%, rgba(56,37,253,0.16), transparent 72%), radial-gradient(30% 40% at 88% 30%, rgba(246,92,14,0.10), transparent 72%); }
main > section.sec:nth-of-type(even)::before, main [data-v] > section.sec:nth-of-type(even)::before {
  background: radial-gradient(34% 44% at 86% 64%, rgba(56,37,253,0.15), transparent 72%), radial-gradient(28% 38% at 14% 28%, rgba(246,92,14,0.09), transparent 72%); }

/* Liquid glass on cards and panes, the same treatment as the Oway apps.
   Chromium bends what sits behind it; other browsers get the frosted blur. */
:root { --gl-bg: linear-gradient(135deg, rgba(255,255,255,0.075) 0%, rgba(255,255,255,0.018) 42%, rgba(255,255,255,0.035) 100%);
  --gl-shadow: inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(255,255,255,0.04), inset 1px 0 0 rgba(255,255,255,0.05), 0 18px 40px -18px rgba(0,0,0,0.55); }
:is(.tile3, .uc, .pillar, .chart, .split-card, .fcard, .pc-card, .tm, .inv-t, .legal-box, .aw-card, .inds, .plan, .eld-i, .glass, .stats4, .doc-tbl, .win, .faq details) {
  background: var(--gl-bg) !important; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%); box-shadow: var(--gl-shadow); }
:is(.tile3, .uc, .pillar, .chart, .split-card, .fcard, .pc-card, .tm, .inv-t, .legal-box, .aw-card, .inds, .plan, .eld-i, .glass, .doc-tbl) { border-color: rgba(255,255,255,0.11) !important; }
.lg-warp :is(.tile3, .uc, .pillar, .chart, .split-card, .fcard, .pc-card, .tm, .inv-t, .legal-box, .aw-card, .inds, .plan, .eld-i, .glass, .stats4, .doc-tbl, .win, .faq details) {
  backdrop-filter: url(#lg-warp) blur(6px) saturate(160%); }
.stats4 { border-radius: 8px; border: 1px solid rgba(255,255,255,0.11); }
.stats4 > div { padding-left: 24px; }
.faq details { border-radius: 8px; border: 1px solid rgba(255,255,255,0.09); padding-left: 18px; padding-right: 18px; margin-bottom: 8px; }
.inds .ind-t { background: transparent; }

/* Juno, in 2D */
.j2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 500px; position: relative;
  background: radial-gradient(55% 65% at 30% 42%, rgba(56,37,253,0.20), transparent 72%), radial-gradient(40% 50% at 70% 82%, rgba(246,92,14,0.13), transparent 72%); }
.j2-svg { display: block; width: 100%; height: auto; align-self: center; padding: 12px 4px 12px 12px; }
.j2-panel { margin: 16px 16px 16px 0; padding: 16px 16px 8px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.11); }
.j2-ph { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.j2-ring { width: 12px; height: 12px; border-radius: 50%; background: conic-gradient(#F65C0E, #7B6BFF, #3825FD, #F65C0E); -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }
.j2-steps { list-style: none; margin: 0; padding: 6px 0 0; display: grid; }
.j2-st { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 9px 0; opacity: 0.38; transition: opacity 400ms; }
.j2-st + .j2-st { border-top: 1px solid rgba(255,255,255,0.05); }
.j2-st b { display: block; font-size: 13px; font-weight: 600; color: #fff; }
.j2-st > div > span { display: block; margin-top: 2px; font: 11.5px/1.45 var(--font-mono, ui-monospace, monospace); color: rgba(255,255,255,0.6); }
.j2-b { position: relative; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.18); font: 600 11px var(--font-mono, monospace); color: rgba(255,255,255,0.7); transition: background-color 300ms, border-color 300ms; }
.j2-b .icon { position: absolute; width: 12px; height: 12px; opacity: 0; stroke: #0a0a0b; stroke-width: 3; }
.j2-st.on { opacity: 1; } .j2-st.on .j2-b { border-color: #7B6BFF; background: rgba(56,37,253,0.35); color: #fff; }
.j2-st.done { opacity: 0.95; } .j2-st.done .j2-b { background: #3FD08F; border-color: #3FD08F; } .j2-st.done .j2-b em { opacity: 0; } .j2-st.done .j2-b .icon { opacity: 1; }
.j2-cks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.j2-ck { display: flex; align-items: center; gap: 7px; font: 11.5px var(--font-mono, monospace); color: rgba(255,255,255,0.45); transition: color 300ms; }
.j2-ck i { width: 13px; height: 13px; border-radius: 4px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.2); transition: background-color 300ms, border-color 300ms; }
.j2-ck i .icon { width: 9px; height: 9px; stroke: #0a0a0b; stroke-width: 3.5; opacity: 0; transition: opacity 300ms; }
.j2.s4 .j2-ck { color: rgba(255,255,255,0.88); } .j2.s4 .j2-ck i { background: #3FD08F; border-color: #3FD08F; } .j2.s4 .j2-ck i .icon { opacity: 1; }
.j2.s4 .j2-ck:nth-child(1), .j2.s4 .j2-ck:nth-child(1) i, .j2.s4 .j2-ck:nth-child(1) i .icon { transition-delay: 200ms; }
.j2.s4 .j2-ck:nth-child(2), .j2.s4 .j2-ck:nth-child(2) i, .j2.s4 .j2-ck:nth-child(2) i .icon { transition-delay: 700ms; }
.j2.s4 .j2-ck:nth-child(3), .j2.s4 .j2-ck:nth-child(3) i, .j2.s4 .j2-ck:nth-child(3) i .icon { transition-delay: 1200ms; }
.j2.s4 .j2-ck:nth-child(4), .j2.s4 .j2-ck:nth-child(4) i, .j2.s4 .j2-ck:nth-child(4) i .icon { transition-delay: 1700ms; }
.j2.s4 .j2-ck:nth-child(5), .j2.s4 .j2-ck:nth-child(5) i, .j2.s4 .j2-ck:nth-child(5) i .icon { transition-delay: 2200ms; }
.j2.reset .j2-svg > *:not(rect:first-of-type):not(defs), .j2.reset .j2-steps { transition: opacity 500ms; }
.j2.reset .j2-svg, .j2.reset .j2-steps { opacity: 0.25; transition: opacity 600ms; }
.j2-svg, .j2-steps { transition: opacity 600ms; }
.j2 text { font-family: var(--font-mono, ui-monospace, monospace); }
.j2-k { font-size: 11px; letter-spacing: 0.08em; fill: rgba(255,255,255,0.55); }
.j2-k.o { fill: #FF8A4C; } .j2-k.g { fill: #3FD08F; } .j2-k.dim { fill: rgba(255,255,255,0.4); }
.j2-v { font-size: 15px; fill: #fff; font-weight: 600; }
.j2-big { font-size: 28px; fill: #fff; font-weight: 600; }
.j2-trl { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.24); stroke-width: 1.2; }
.j2-cab { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.3); stroke-width: 1.2; }
.j2-cabw { fill: rgba(123,107,255,0.55); }
.j2-p { fill: rgba(123,107,255,0.30); stroke: #7B6BFF; stroke-width: 1; }
.j2-e { fill: transparent; stroke: rgba(255,255,255,0.22); stroke-dasharray: 3 3; transition: stroke 350ms, fill 350ms; transition-delay: calc(var(--i) * 30ms); }
.j2.s1 .j2-e { stroke: #F65C0E; fill: rgba(246,92,14,0.09); }
.j2-scan { fill: #9C8FFF; opacity: 0; }
.j2.s1:not(.s2) .j2-scan { animation: j2scan 1.6s cubic-bezier(.45,0,.2,1) forwards; }
@keyframes j2scan { 0% { transform: translateX(var(--w)); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
.j2-price, .j2-card, .j2-in, .j2-link, .j2-open.b { opacity: 0; transition: opacity 500ms, transform 600ms cubic-bezier(.2,.8,.2,1); }
.j2-price { transform: translateY(8px); } .j2.s2 .j2-price { opacity: 1; transform: none; }
.j2-br { fill: none; stroke: #F65C0E; stroke-width: 1.4; }
.j2-card { transform: translateX(40px); } .j2.s3 .j2-card { opacity: 1; transform: none; }
.j2-cd { fill: rgba(18,18,24,0.82); stroke: rgba(246,92,14,0.6); stroke-width: 1.2; }
.j2-link { fill: none; stroke: #F65C0E; stroke-width: 1.3; stroke-dasharray: 4 5; }
.j2.s3 .j2-link { opacity: 0.75; } .j2.s5 .j2-link { opacity: 0; }
.j2-in { fill: #F65C0E; stroke: #FFB089; stroke-width: 1; transition: opacity 500ms, transform 900ms cubic-bezier(.65,0,.25,1); transition-delay: 0ms, var(--d); }
.j2.s3 .j2-in { opacity: 1; transition-delay: 300ms, var(--d); }
.j2.s5 .j2-in { transform: translate(var(--tx), var(--ty)); }
.j2-open.a { transition: opacity 400ms; } .j2.s5 .j2-open.a { opacity: 0; transition-delay: 900ms; } .j2.s5 .j2-open.b { opacity: 1; transition-delay: 900ms; }
.j2-route { opacity: 0.55; transition: opacity 500ms; } .j2.s6 .j2-route { opacity: 1; }
.j2-rl { stroke: rgba(255,255,255,0.16); stroke-width: 2; } .j2-rp { stroke: #3FD08F; stroke-width: 2; stroke-dasharray: 776; stroke-dashoffset: 776; }
.j2.s6 .j2-rp { stroke-dashoffset: 0; transition: stroke-dashoffset 3s cubic-bezier(.45,0,.2,1); }
.j2-stop { fill: rgba(255,255,255,0.45); } .j2-stop.o { fill: #F65C0E; }
.j2-dot { fill: #3FD08F; filter: drop-shadow(0 0 6px rgba(63,208,143,0.7)); }
.j2.s6 .j2-dot { transform: translateX(var(--run)); transition: transform 3s cubic-bezier(.45,0,.2,1); }
.j2.reset .j2-dot, .j2.reset .j2-rp, .j2:not(.s6) .j2-dot, .j2:not(.s5) .j2-in { transition-duration: 0ms, 0ms; }
.j2:not(.s3) .j2-in { transition: none; }
@media (max-width: 900px) { .j2 { grid-template-columns: 1fr; min-height: 0; } .j2-svg { padding: 10px 6px 0; } .j2-panel { margin: 0 12px 12px; } }

/* Oway OS: Product Owners and Carriers */
.os-for { margin-bottom: 22px; }
.os-for .seg2 button { padding: 9px 18px; font-size: 14px; font-weight: 600; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto; }
.plan { display: grid; gap: 12px; align-content: start; padding: 28px; border-radius: 10px; border: 1px solid var(--line); }
.plan ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 9px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.86); }
.plan li .icon { flex: none; width: 15px; height: 15px; margin-top: 3px; stroke: #3FD08F; stroke-width: 2.6; }
.plan .btn { justify-self: start; }
.eld { display: flex; flex-wrap: wrap; gap: 10px; max-width: 1040px; margin: 0 auto; }
.eld-i { padding: 12px 18px; border-radius: 8px; border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; }
.eld-i.more { border-style: dashed; color: rgba(255,255,255,0.7); font-weight: 500; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .plan { padding: 22px; } }

/* Footer horizon */
.fx-hz { position: relative; overflow: hidden; isolation: isolate; }
.fx-hz > .wrap { position: relative; z-index: 1; }
.hz-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.62; }
.hz { position: absolute; top: 0; left: 0; width: 0; height: 0; filter: blur(55px); will-change: transform; transform: translate(50vw, -40px); }
.hz i { position: absolute; left: -2055px; width: 4110px; height: 1100px; clip-path: polygon(0 63%, 38% 10%, 47% 0, 53% 0, 62% 10%, 100% 63%, 100% 100%, 0 100%); }
.hz i:nth-child(1) { top: 140px; background: #7B6BFF; }
.hz i:nth-child(2) { top: 220px; background: #FF8A4C; }
.hz i:nth-child(3) { top: 250px; background: #F65C0E; }
.hz i:nth-child(4) { top: 330px; background: #3825FD; }
.hz i:nth-child(5) { top: 390px; background: #0a0a0b; }
@media (max-width: 809px) { .hz { filter: blur(45px); } .hz i:nth-child(1) { top: 120px; } .hz i:nth-child(2) { top: 190px; } .hz i:nth-child(3) { top: 215px; } .hz i:nth-child(4) { top: 290px; } .hz i:nth-child(5) { top: 350px; } }
@media (prefers-reduced-motion: reduce) { .hz { will-change: auto; } }
.j2-book { opacity: 0; transition: opacity 500ms 1.6s; } .j2.s6 .j2-book { opacity: 1; }
.j2.s6 .j2-card { opacity: 0.45; }
/* The closed mega menu left a 1px dark strip under the header. */
.mg:not(.open) .mg-box { border-bottom-width: 0 !important; }
.os-for { max-width: 1040px; margin: 0 auto 22px; }
.stats4 > div, .stats4 > div + div { padding-left: 24px !important; }
@media (max-width: 600px) {
  .j2 .j2-k { font-size: 22px; letter-spacing: 0.04em; }
  .j2 .j2-open, .j2 .j2-k.dim, .j2 .j2-card .j2-k { display: none; }
  .j2 .j2-big { font-size: 40px; }
  .j2 .j2-v { font-size: 19px; }
  .j2 .j2-v { transform: translateY(-10px); }
  .j2-svg { padding: 14px 4px 0; }
}
@media (max-width: 600px) { .j2 .j2-big { transform: translateY(8px); } }
@media (max-width: 860px) { .legal { grid-template-columns: minmax(0, 1fr); } .legal-toc, .legal-doc { min-width: 0; } }

/* ══ v12 ═════════════════════════════════════════════════════════════════ */
/* Clicks on the animated mark land on its link, not on the redrawn SVG. */
.chips, .chips * { pointer-events: none; }

/* Footer horizon reaches up behind the last sections and fades, with no top edge. */
main { position: relative; z-index: 1; }
.fx.fx-hz { overflow: visible; isolation: auto; z-index: 0; border-top: 0; background: transparent; }
.fx-hz .hz-fx { top: calc(-1 * var(--hz-up, 480px)); bottom: 0; left: 0; right: 0; z-index: -1; opacity: 0.66;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.35) calc(var(--hz-up, 480px) * 0.45), #000 calc(var(--hz-up, 480px) + 40px));
  mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,0.35) calc(var(--hz-up, 480px) * 0.45), #000 calc(var(--hz-up, 480px) + 40px)); }
body { overflow-x: clip; }

/* Home hero: the same horizon, drifting on its own in a slow loop. */
.hx { position: relative; isolation: isolate; }
.hx-bg { position: absolute; left: 0; right: 0; top: calc(-1 * var(--nav-h, 78px)); bottom: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0.32;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0, #000 45%, transparent 92%); }
.hzl { position: absolute; left: 50%; top: 14%; width: 0; height: 0; filter: blur(70px); }
.hzl i { position: absolute; left: -2055px; width: 4110px; height: 1100px; clip-path: polygon(0 63%, 38% 10%, 47% 0, 53% 0, 62% 10%, 100% 63%, 100% 100%, 0 100%);
  transform-origin: 50% 0; will-change: transform; }
.hzl i:nth-child(1) { top: 120px; background: #7B6BFF; animation: hzA 26s ease-in-out infinite alternate; }
.hzl i:nth-child(2) { top: 200px; background: #FF8A4C; animation: hzB 31s ease-in-out infinite alternate; }
.hzl i:nth-child(3) { top: 235px; background: #F65C0E; animation: hzC 23s ease-in-out infinite alternate; }
.hzl i:nth-child(4) { top: 320px; background: #3825FD; animation: hzD 35s ease-in-out infinite alternate; }
.hzl i:nth-child(5) { top: 400px; background: #0a0a0b; animation: hzB 29s ease-in-out infinite alternate-reverse; }
@keyframes hzA { 0% { transform: translate(-14%, 0) rotate(-3deg); } 50% { transform: translate(6%, -40px) rotate(2deg); } 100% { transform: translate(16%, 20px) rotate(4deg); } }
@keyframes hzB { 0% { transform: translate(12%, 10px) rotate(3deg); } 50% { transform: translate(-8%, -30px) rotate(-2deg); } 100% { transform: translate(-16%, 24px) rotate(-4deg); } }
@keyframes hzC { 0% { transform: translate(-6%, 30px) rotate(2deg); } 50% { transform: translate(10%, -20px) rotate(-3deg); } 100% { transform: translate(-12%, 0) rotate(3deg); } }
@keyframes hzD { 0% { transform: translate(8%, -10px) rotate(-2deg); } 50% { transform: translate(-12%, 30px) rotate(3deg); } 100% { transform: translate(10%, -24px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .hzl i { animation: none !important; } }
@media (max-width: 809px) { .hzl { filter: blur(50px); top: 10%; } }

/* Hero split cards: wide and short. The image fills the card and the copy sits on it,
   so widening a card on hover never changes its height. */
.hx-split .split { height: clamp(400px, 34vw, 460px); min-height: 0; }
.hx-split .split-card { position: relative; overflow: hidden; }
.hx-split .split-media { position: absolute; inset: 0; height: auto; min-height: 0; border-radius: inherit; }
.hx-split .split-media::after { background: linear-gradient(180deg, rgba(12,12,15,0) 18%, rgba(12,12,15,0.55) 46%, rgba(12,12,15,0.94) 74%); }
.hx-split .split-shot { top: 7%; left: 7%; right: -10%; }
.hx-split .split-c { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px 28px 26px; gap: 8px; }
.hx-split .split-c h3 { font-size: clamp(20px, 1.75vw, 25px); line-height: 1.2; max-width: 28ch; }
.hx-split .split-c p { font-size: 15px; line-height: 1.55; max-width: 52ch; }
@media (max-width: 860px) { .hx-split .split { height: auto; } .hx-split .split-card { height: 440px; flex: none; } }
.hx-split .split-shot { top: 6%; height: 54%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%); }
.hx-split .split-shot img, .hx-split .split-shot picture { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.hx-split .split-c { padding-top: 0; }
@media (max-width: 860px) {
  .hx-split .split-card { height: auto; }
  .hx-split .split-media { position: relative; inset: auto; height: 230px; }
  .hx-split .split-shot { height: 80%; }
  .hx-split .split-c { position: relative; padding: 4px 22px 24px; }
}

/* Research: posts, tags, feeds */
.rs-item { border-bottom: 1px solid var(--line); }
.rs-item .rs { border-bottom: 0; padding-bottom: 10px; }
.rs-item .tagset { padding: 0 4px 20px calc(140px + 28px + 4px); }
.tagset { display: flex; flex-wrap: wrap; gap: 6px; }
.ptag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); font-size: 12.5px; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.03); transition: border-color 200ms, color 200ms; }
.ptag:hover, .ptag:focus-visible { border-color: var(--or-line); color: #fff; }
.ptag span { font: 11px var(--font-mono, monospace); opacity: 0.6; }
.rs-tags { max-width: 1040px; margin: 56px auto 0; display: grid; gap: 12px; }
.rs-tags-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.8; margin: 0; }
.rs-tags nav { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-feeds { display: flex; gap: 16px; font-size: 13px; margin: 6px 0 0; }
.rs-feeds a { color: var(--or-hi); }
@media (max-width: 760px) { .rs-item .tagset { padding-left: 4px; } }

.post-head { max-width: 860px; }
.post-head .crumb { font-size: 13px; color: rgba(255,255,255,0.7); margin: 0 0 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.post-head .crumb a { color: var(--or-hi); }
.post-h1 { font-size: clamp(36px, 5vw, 64px); }
.post-dek { margin-top: 16px; max-width: 62ch; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 14px; color: rgba(255,255,255,0.72); }
.post-meta a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,0.3); }
.post { max-width: 1040px; margin: 0 auto; }
.post-cover { margin: 0 0 48px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); aspect-ratio: 21 / 9; }
.post-cover .art { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.post-grid.solo { grid-template-columns: minmax(0, 1fr); }
.post-grid.solo .post-body { margin: 0 auto; }
.post-toc { position: sticky; top: 100px; display: grid; gap: 6px; }
.post-toc p { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.post-toc nav { display: grid; gap: 2px; }
.post-toc a { font-size: 13px; line-height: 1.4; padding: 4px 0; color: rgba(255,255,255,0.7); }
.post-toc a:hover, .post-toc a[aria-current="true"] { color: #fff; }
.post-body { margin: 0; max-width: 720px; font-size: 17px; line-height: 1.75; }
.post-body h2 { scroll-margin-top: 100px; } .post-body h3 { scroll-margin-top: 100px; font-size: 18px; margin: 32px 0 8px; }
.post-body p, .post-body li { color: rgba(255,255,255,0.88); }
.post-body a { color: var(--or-hi); text-decoration: underline; text-underline-offset: 3px; }
.post-body img { max-width: 100%; height: auto; border-radius: 8px; }
.post-body blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--or); color: #fff; font-size: 19px; }
.post-body pre { overflow-x: auto; padding: 16px 18px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 13.5px; }
.post-foot { display: grid; gap: 22px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.post-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.post-share > span { opacity: 0.7; margin-right: 4px; }
.post-share a, .post-share button { padding: 7px 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12); color: #fff; font: inherit; background: rgba(255,255,255,0.03); cursor: pointer; text-decoration: none; }
.post-share a:hover, .post-share button:hover { border-color: var(--or-line); }
.post-author { display: grid; gap: 4px; padding: 20px 22px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.11); }
.post-author b { font-size: 15px; } .post-author span { font-size: 13px; opacity: 0.7; } .post-author p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; }
@media (max-width: 900px) { .post-grid { grid-template-columns: minmax(0, 1fr); } .post-toc { position: static; display: none; } .post-cover { aspect-ratio: 16 / 9; margin-bottom: 32px; } }

.ptag { font-family: inherit; letter-spacing: 0; text-transform: none; }
.post-body p { margin: 0 0 18px; }
.post-body ul, .post-body ol { margin: 0 0 22px; padding-left: 22px; display: grid; gap: 8px; }
.post-body ul { list-style: disc; } .post-body ol { list-style: decimal; }
.post-body li::marker { color: var(--or-hi); }
.post-body h2 { margin-top: 44px; }
.fx .fx-h { font-size: 13px; font-weight: 600; color: var(--t1, #fff); margin: 0 0 14px; letter-spacing: 0; }
.split-c .split-h { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; letter-spacing: -0.02em; }
.hx-split .split-c .split-h { font-size: clamp(20px, 1.75vw, 25px); line-height: 1.2; max-width: 28ch; }
.dev-pane .dvh { line-height: 1.4; }

/* ══ v13 ═════════════════════════════════════════════════════════════════ */
/* The time-of-day sky, a little brighter. Same hourly palette as the Oway apps. */
:root {
  --bg-canvas:
    radial-gradient(ellipse 120% 90% at 0% -5%,     rgba(var(--sky-1),   calc(0.40 * var(--sky-i))) 0%, transparent 62%),
    radial-gradient(ellipse 95% 70% at 20% 38%,     rgba(var(--sky-mid), calc(0.16 * var(--sky-i))) 0%, transparent 62%),
    radial-gradient(ellipse 105% 95% at 58% 58%,    rgba(var(--sky-mid), calc(0.30 * var(--sky-i))) 0%, transparent 68%),
    radial-gradient(ellipse 115% 105% at 102% 104%, rgba(var(--sky-2),   calc(0.40 * var(--sky-i))) 0%, transparent 70%),
    var(--bg);
}
.hx-bg { display: none; }

/* Careers */
.cr-w { max-width: 1040px; margin: 0 auto; }
.cr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.cr-head .h2 { margin: 6px 0 0; }
.cr-head .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.cr-head .filter { height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13.5px; font-weight: 600; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.82); cursor: pointer; transition: border-color 200ms, background-color 200ms, color 200ms; }
.cr-head .filter:hover { color: #fff; border-color: rgba(255,255,255,0.24); }
.cr-head .filter[aria-pressed="true"] { color: #fff; border-color: var(--or-line); background: rgba(246,92,14,0.14); }
.cr-list { border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); overflow: hidden; }
.cr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; align-items: center; gap: 12px 28px; padding: 22px 26px; color: #fff; text-decoration: none; transition: background-color 200ms; }
.cr-row + .cr-row { border-top: 1px solid rgba(255,255,255,0.08); }
.cr-row[hidden] { display: none; }
.cr-row:hover, .cr-row:focus-visible { background: rgba(255,255,255,0.04); }
.cr-t { display: grid; gap: 5px; min-width: 0; }
.cr-t b { font-size: 17.5px; font-weight: 600; letter-spacing: -0.01em; }
.cr-t > span { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.68); }
.cr-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 13px; color: rgba(255,255,255,0.75); text-align: right; white-space: nowrap; }
.cr-team { font-size: 12px; font-weight: 600; color: var(--or-hi); }
.cr-go { display: grid; place-items: center; width: 24px; height: 24px; color: rgba(255,255,255,0.5); transition: transform 200ms, color 200ms; }
.cr-row:hover .cr-go { transform: translateX(3px); color: var(--or-hi); }
.cr-note { margin: 18px 2px 0; font-size: 14px; color: rgba(255,255,255,0.72); }
.cr-note a, .cr-empty a { color: var(--or-hi); }
.cr-empty { padding: 28px 26px; margin: 0; color: rgba(255,255,255,0.8); }
@media (max-width: 760px) {
  .cr-row { grid-template-columns: minmax(0, 1fr) 20px; padding: 18px; }
  .cr-meta { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; text-align: left; white-space: normal; }
  .cr-go { grid-column: 2; grid-row: 1 / span 2; }
}

/* Role pages */
.jb-w { max-width: 1040px; margin: 0 auto; }
.jb-hero .crumb { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; font-size: 13px; color: rgba(255,255,255,0.7); }
.jb-hero .crumb a { color: var(--or-hi); }
.jb-h1 { font-size: clamp(36px, 5vw, 60px); margin: 0; }
.jb-tag { margin: 14px 0 0; max-width: 60ch; }
.jb-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; padding: 0; }
.jb-chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); font-size: 13px; color: rgba(255,255,255,0.85); }
.jb-hero .ctas { margin-top: 0; }
.jb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.jb-main { min-width: 0; display: grid; gap: 44px; }
.jb-sec h2 { margin: 0 0 14px; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; }
.jb-sec p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.86); }
.jb-sec p:last-child { margin-bottom: 0; }
.jb-sec ul, .jb-sec ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.86); }
.jb-sec ul { list-style: disc; } .jb-sec ol { list-style: decimal; }
.jb-sec li::marker { color: var(--or-hi); }
.jb-sec li b { color: #fff; }
.jb-nice { margin-top: 16px !important; }
.jb-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jb-day { padding: 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.11); display: grid; gap: 8px; align-content: start; }
.jb-day span { font-size: 12px; font-weight: 600; color: var(--or-hi); letter-spacing: 0.02em; }
.jb-day p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.jb-aside { position: sticky; top: 100px; display: grid; gap: 14px; padding: 22px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); }
.jb-facts { margin: 0; display: grid; gap: 14px; }
.jb-facts div { display: grid; gap: 3px; }
.jb-facts dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--or-hi); }
.jb-facts dd { margin: 0; font-size: 14.5px; color: #fff; }
.jb-aside .btn { width: 100%; justify-content: center; }
.jb-apply { padding: clamp(22px, 4vw, 40px); border-radius: 14px; border: 1px solid rgba(255,255,255,0.11); max-width: 820px; }
.jb-apply-h { display: grid; gap: 10px; margin-bottom: 26px; }
.jb-apply-h .h2 { margin: 6px 0 0; font-size: clamp(26px, 3vw, 34px); }
.jb-apply-h p { margin: 0; color: rgba(255,255,255,0.75); font-size: 15px; } .jb-apply-h a { color: var(--or-hi); }
.jb-apply form { display: grid; gap: 18px; }
.jb-apply .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jb-apply .fld { display: grid; gap: 8px; margin: 0; }
.jb-apply .fld > span { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.5; }
.jb-apply .fld em { font-style: normal; font-weight: 500; color: rgba(255,255,255,0.55); margin-left: 6px; }
.jb-apply textarea.input { min-height: 110px; resize: vertical; line-height: 1.55; padding-top: 10px; }
.file-drop { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 10px; border-radius: 9px; border: 1px dashed rgba(255,255,255,0.22); background: rgba(255,255,255,0.03); cursor: pointer; transition: border-color 200ms, background-color 200ms; }
.file-drop:hover, .file-drop:focus-within { border-color: var(--or-line); background: rgba(246,92,14,0.06); }
.file-drop:focus-within { outline: 2px solid var(--or-line); outline-offset: 2px; }
.file-in { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.file-btn { flex: none; padding: 8px 14px; border-radius: 7px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); font-size: 13.5px; font-weight: 600; color: #fff; }
.file-name { font-size: 13.5px; color: rgba(255,255,255,0.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop.has-file .file-name { color: #fff; }
.jb-apply .form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.08); }
.jb-legal { font-size: 13px; color: rgba(255,255,255,0.68); } .jb-legal a { color: var(--or-hi); }
@media (max-width: 900px) {
  .jb-grid { grid-template-columns: minmax(0, 1fr); }
  .jb-aside { position: static; order: -1; grid-template-columns: 1fr; }
  .jb-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jb-days { grid-template-columns: minmax(0, 1fr); }
  .jb-apply .form-grid { grid-template-columns: minmax(0, 1fr); }
  .jb-apply .form-foot .btn { width: 100%; justify-content: center; }
}
.jb-facts { align-items: start; } .jb-facts div { align-content: start; }

/* Oway OS hero: the Instant Quote sits beside the headline. */
.osh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 1180px; margin: 0 auto 36px; }
.osh-c .h1 { margin: 8px 0 18px; }
.osh-c .p-lg { max-width: 54ch; }
.osh-c .ctas { margin-top: 28px; }
.osh-q .qd-wrap { margin: 0; }
.os-hero .subnav { max-width: 1180px; }
.os-for { max-width: 1180px; }
@media (max-width: 980px) { .osh { grid-template-columns: minmax(0, 1fr); } }
/* Before the quote runs, the result area shows a quiet placeholder instead of empty space. */
.qd-out { position: relative; opacity: 1 !important; transform: none !important; }
.qd-out > * { transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.qd-out:not(.on) > * { opacity: 0; transform: translateY(6px); }
.qd-out:not(.on)::before { content: "Juno prices it in seconds."; position: absolute; inset: 16px 0 0; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,0.12); border-radius: 8px; font-size: 13.5px; color: rgba(255,255,255,0.5); }

/* Smooth page changes: the page cross-fades and settles; the header stays put. */
@view-transition { navigation: auto; }
.nv { view-transition-name: site-nav; }
::view-transition-old(root) { animation: vt-out 170ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-in 320ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Tabs and switches ease in instead of snapping. */
[role="tabpanel"]:not([hidden]), [data-v]:not([hidden]), [data-aw-panel]:not([hidden]), .cr-row:not([hidden]) { animation: tab-in 380ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  [role="tabpanel"], [data-v], [data-aw-panel], .cr-row { animation: none !important; }
}

/* ══ v14 ═════════════════════════════════════════════════════════════════ */
/* Oway OS: same hero pattern as IOI. The audience switch sits above the label. */
.os-for { max-width: none; margin: 0 0 6px; }
.os-for .seg2 { display: inline-flex; align-items: center; padding: 3px; }
.os-for .seg2 button { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; line-height: 1; font-size: 14px; font-weight: 600; }
.os-hero .subnav { max-width: 1040px; margin-left: auto; margin-right: auto; }
.os-hero-v { min-width: 0; }
.os-hero-v .qd-wrap { justify-items: stretch; }
.os-hero-v .qd-try { justify-self: start; }
.os-offers .win { max-width: none; margin: 0; }
.os-offers .offers { grid-template-columns: 1fr; }
.os-offers .offer:not(.on) { display: none; }
@media (max-width: 900px) { .os-hero-v { margin-top: 8px; } }

/* Request a Demo: black liquid glass. */
.dpop-in { background: linear-gradient(180deg, rgba(22,22,26,0.66), rgba(8,8,10,0.78)) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(255,255,255,0.04); }
.lg-warp .dpop-in { backdrop-filter: url(#lg-warp) blur(18px) saturate(150%); }
.dpop-in::before { opacity: .28; }
.dpop-in { background: linear-gradient(180deg, rgba(20,20,24,0.9), rgba(6,6,8,0.95)) !important; }

/* ══ v15: Research as a publication ═════════════════════════════════════ */
/* Research list */
.rs-group + .rs-group { margin-top: 8px; }
.rs-group h2 { margin: 0 0 14px; }
.rs2-list { border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); overflow: hidden; }
.rs2 { position: relative; display: grid; grid-template-columns: 130px minmax(0, 1fr) 150px 24px; gap: 10px 28px; align-items: start; padding: 24px 26px; color: #fff; text-decoration: none; transition: background-color 220ms; }
.rs2 + .rs2 { border-top: 1px solid rgba(255,255,255,0.08); }
.rs2::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; border-radius: 2px; background: linear-gradient(#F65C0E, #7B6BFF); opacity: 0; transform: scaleY(.4); transition: opacity 240ms, transform 320ms cubic-bezier(.2,.8,.2,1); }
.rs2:hover, .rs2:focus-visible { background: rgba(255,255,255,0.04); }
.rs2:hover::before, .rs2:focus-visible::before { opacity: 1; transform: none; }
.rs2-k { font-size: 12.5px; font-weight: 600; color: var(--or-hi); padding-top: 4px; }
.rs2-b { display: grid; gap: 8px; min-width: 0; }
.rs2-b b { font-size: 18.5px; font-weight: 600; letter-spacing: -0.012em; transition: color 200ms; }
.rs2:hover .rs2-b b { color: #fff; }
.rs2-b > span:not(.tagset) { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.74); max-width: 64ch; }
.rs2-b .tagset { margin-top: 4px; }
.rs2-b .ptag { pointer-events: none; }
.rs2-d { display: grid; gap: 3px; justify-items: end; font-size: 13px; color: rgba(255,255,255,0.72); padding-top: 4px; text-align: right; }
.rs2-go { padding-top: 4px; color: rgba(255,255,255,0.45); transition: transform 220ms, color 220ms; }
.rs2:hover .rs2-go { transform: translateX(4px); color: var(--or-hi); }
.rs-bench { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); }
.rs-bench b { font-size: 18.5px; font-weight: 600; }
.rs-bench p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.74); max-width: 62ch; }
.rs-bench .btn { flex: none; }
.rs-meta .by { margin-right: 6px; }
@media (max-width: 760px) {
  .rs2 { grid-template-columns: minmax(0, 1fr) 20px; padding: 20px 18px; }
  .rs2-k { grid-column: 1; } .rs2-b { grid-column: 1; } .rs2-d { grid-column: 1; justify-items: start; text-align: left; display: flex; gap: 10px; }
  .rs2-go { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .rs-bench { flex-direction: column; align-items: flex-start; }
}

/* Bylines */
.by { display: inline-flex; align-items: center; gap: 10px; }
.by > span { display: grid; gap: 1px; line-height: 1.3; }
.by b { font-size: 14px; font-weight: 600; color: #fff; } .by b a { color: #fff; text-decoration: none; }
.by em { font-style: normal; font-size: 12.5px; color: rgba(255,255,255,0.62); }
.av, .av.lg { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; object-fit: cover;
  background: linear-gradient(135deg, #F65C0E, #7B6BFF 70%, #3825FD); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.av.lg { width: 48px; height: 48px; font-size: 15px; }

/* Essay page */
.ess-progress { position: fixed; left: 0; right: 0; top: var(--nav-h, 78px); height: 2px; z-index: 89; pointer-events: none; }
.ess-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #F65C0E, #7B6BFF); }
.ess-w { max-width: 1040px; margin: 0 auto; }
.ess-hero { padding-bottom: 8px; }
.ess-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; font-size: 13px; color: rgba(255,255,255,0.55); }
.ess-crumb a { color: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); text-decoration: none; transition: border-color 200ms; }
.ess-crumb a:hover { border-color: var(--or-line); }
.ess-crumb a:last-child { color: var(--or-hi); }
.ess-h1 { margin: 0; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; max-width: 18ch; }
.ess-dek { margin: 22px 0 0; max-width: 60ch; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: rgba(255,255,255,0.84); }
.ess-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.08); }
.ess-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: rgba(255,255,255,0.7); }
.ess-sec { padding-top: 28px; }
.ess-cover { margin: 0 0 56px; }
.ess-cover .art, .ess-cover img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1); }
.ess-cover figcaption { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,0.6); }
.ess-grid { display: grid; grid-template-columns: 200px minmax(0, 680px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ess-toc { position: sticky; top: 110px; display: grid; gap: 8px; }
.ess-toc p { margin: 0 0 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.ess-toc nav { display: grid; gap: 2px; border-left: 1px solid rgba(255,255,255,0.1); }
.ess-toc a { position: relative; padding: 5px 0 5px 14px; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,0.62); text-decoration: none; transition: color 200ms; }
.ess-toc a:hover { color: #fff; }
.ess-toc a[aria-current="true"] { color: #fff; }
.ess-toc a[aria-current="true"]::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 2px; background: var(--or); border-radius: 2px; }
.ess-body { min-width: 0; font-size: 18.5px; line-height: 1.8; color: rgba(255,255,255,0.9); }
.ess-body > p:first-child { font-size: 21px; line-height: 1.65; color: #fff; }
.ess-body p { margin: 0 0 24px; }
.ess-body h2 { margin: 56px 0 16px; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: #fff; scroll-margin-top: 110px; }
.ess-body h2:first-child { margin-top: 0; }
.ess-body h3 { margin: 36px 0 10px; font-size: 20px; font-weight: 600; color: #fff; scroll-margin-top: 110px; }
.ess-body a { color: var(--or-hi); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,138,76,0.45); }
.ess-body a:hover { text-decoration-color: currentColor; }
.ess-body strong { color: #fff; }
.ess-body ul, .ess-body ol { margin: 0 0 26px; padding-left: 24px; display: grid; gap: 10px; }
.ess-body ul { list-style: disc; } .ess-body ol { list-style: decimal; } .ess-body li::marker { color: var(--or-hi); }
.ess-body blockquote { margin: 40px 0; padding: 4px 0 4px 26px; border-left: 2px solid; border-image: linear-gradient(#F65C0E, #7B6BFF) 1; font-size: clamp(22px, 2.2vw, 27px); line-height: 1.45; letter-spacing: -0.012em; color: #fff; }
.ess-body blockquote p { margin: 0; }
.ess-body figure { margin: 40px 0; } .ess-body figcaption { margin-top: 10px; font-size: 13.5px; color: rgba(255,255,255,0.6); }
.ess-body img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
.ess-body hr { border: 0; height: 1px; margin: 48px auto; width: 120px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); }
.ess-body code { font: 0.86em var(--font-mono, monospace); padding: 2px 6px; border-radius: 5px; background: rgba(255,255,255,0.07); }
.ess-body pre { overflow-x: auto; margin: 0 0 26px; padding: 18px 20px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 14px; line-height: 1.6; }
.ess-body pre code { padding: 0; background: none; }
.ess-body .doc-tbl { margin: 28px 0 32px; font-size: 15px; line-height: 1.55; }
.ess-body .footnote { margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); }
.ess-body .footnote::before { content: "Notes and references"; display: block; margin-bottom: 14px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.ess-body .footnote hr { display: none; }
.ess-body .footnote ol { gap: 8px; font-size: 14px; }
.ess-body sup a, .ess-body .footnote-ref { text-decoration: none; font-size: 0.75em; padding: 0 2px; }
.ess-foot { display: grid; gap: 22px; max-width: 680px; margin: 64px 0 0 calc(200px + clamp(32px, 6vw, 96px)); padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); }
.ess-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ess-share > span { opacity: 0.7; margin-right: 4px; }
.ess-share a, .ess-share button { padding: 7px 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.12); color: #fff; font: inherit; background: rgba(255,255,255,0.03); cursor: pointer; text-decoration: none; transition: border-color 200ms; }
.ess-share a:hover, .ess-share button:hover { border-color: var(--or-line); }
.ess-author { display: grid; gap: 12px; padding: 22px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); }
.ess-author p { margin: 0; font-size: 14.5px; line-height: 1.65; color: rgba(255,255,255,0.8); }
.ess-grid > span:empty + .ess-body { grid-column: 2; }
@media (max-width: 960px) {
  .ess-grid { grid-template-columns: minmax(0, 1fr); }
  .ess-toc, .ess-grid > span:empty { display: none; }
  .ess-grid > span:empty + .ess-body { grid-column: 1; }
  .ess-foot { margin-left: 0; max-width: none; }
  .ess-body { font-size: 17.5px; } .ess-body > p:first-child { font-size: 19px; }
  .ess-cover .art, .ess-cover img { aspect-ratio: 16 / 10; }
}

/* Related posts */
.pcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1040px; margin: 0 auto; }
.pcard { display: grid; grid-template-rows: auto 1fr; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.11); background: var(--gl-bg); color: #fff; text-decoration: none; transition: border-color 220ms, transform 320ms cubic-bezier(.2,.8,.2,1); }
.pcard:hover { border-color: var(--or-line); transform: translateY(-3px); }
.pcard-m { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.pcard-m .art, .pcard-m img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.pcard:hover .pcard-m .art, .pcard:hover .pcard-m img { transform: scale(1.04); }
.pcard-c { display: grid; gap: 8px; align-content: start; padding: 18px 20px 20px; }
.pcard-k { font-size: 12px; font-weight: 600; color: var(--or-hi); }
.pcard-c b { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.pcard-d { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,0.72); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-f { margin-top: 4px; font-size: 12.5px; color: rgba(255,255,255,0.6); }
@media (max-width: 860px) { .pcards { grid-template-columns: minmax(0, 1fr); } }
.ess-body.doc { max-width: none; margin: 0; } .ess-body .doc-tbl td, .ess-body .doc-tbl th { font-size: 15px; }
/* IOI hero widget: the same liquid glass as the other panes. */
.aw { background: var(--gl-bg) !important; border-color: rgba(255,255,255,0.11) !important; -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: var(--gl-shadow), 0 30px 80px -20px rgba(0,0,0,0.5) !important; }
.lg-warp .aw { backdrop-filter: url(#lg-warp) blur(6px) saturate(160%); }
.aw .aw-card { background: rgba(255,255,255,0.03) !important; }
.ess-body.doc p, .ess-body.doc li { font-size: 18.5px; line-height: 1.8; }
.ess-body.doc > p:first-child { font-size: 21px; line-height: 1.65; }
@media (max-width: 960px) { .ess-body.doc p, .ess-body.doc li { font-size: 17.5px; } .ess-body.doc > p:first-child { font-size: 19px; } }
.j2-det { fill: none; stroke: #F65C0E; stroke-width: 1.6; stroke-dasharray: 4 4; opacity: .5; transition: opacity 400ms; }
.j2.s3 .j2-det { opacity: 1; }
.j2-book { opacity: 0; transition: opacity 500ms 2.4s; } .j2.s6 .j2-book { opacity: 1; }
.j2.s6 .j2-card { opacity: 0; }
@media (max-width: 600px) { .j2 .j2-route .j2-k:not(.o):not(.g) { display: none; } .j2 .j2-book .j2-k { font-size: 18px; } }
.ess-body.doc .footnote li, .ess-body.doc .footnote p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }
.ess-body .footnote .back { text-decoration: none; margin-left: 4px; }
.ess-body .footnote li:target { color: #fff; }
.ess-body sup a { text-decoration: none; color: var(--or-hi); }
.ess-body li[id^="note-"], .ess-body sup[id^="ref-"] { scroll-margin-top: 120px; }

/* ══ v17: post house format ════════════════════════════════════════════ */
.brief { margin: 0 0 36px; padding: 22px 24px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); }
.brief-h { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--or-hi) !important; }
.ess-body.doc .brief ul { margin: 0; padding-left: 20px; gap: 8px; }
.ess-body.doc .brief li { font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,0.9); }
.post-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); background: var(--gl-bg); overflow: hidden; }
.post-stats > div { display: grid; gap: 6px; padding: 20px 22px; }
.post-stats > div + div { border-left: 1px solid rgba(255,255,255,0.08); }
.post-stats b { font-size: clamp(26px, 3vw, 34px); line-height: 1; letter-spacing: -0.02em; color: #fff; }
.post-stats span { font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.7); }
@media (max-width: 640px) { .post-stats { grid-template-columns: minmax(0, 1fr); } .post-stats > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); } }
.ser { margin: 0 0 28px; padding: 16px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); display: grid; gap: 10px; }
.ser-h { margin: 0 !important; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14.5px !important; line-height: 1.4 !important; }
.ser-h .lbl { margin: 0; } .ser-h b { color: #fff; } .ser-h em { font-style: normal; color: rgba(255,255,255,0.6); font-size: 13px; }
.ser-all summary { cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.75); list-style: none; } .ser-all summary::-webkit-details-marker { display: none; }
.ser-all summary::after { content: " +"; color: var(--or-hi); } .ser-all[open] summary::after { content: " \2212"; }
.ess-body.doc .ser-all ol { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; }
.ess-body.doc .ser-all li { font-size: 14px; line-height: 1.4; }
.ser-all li a { display: flex; gap: 12px; padding: 7px 8px; border-radius: 7px; color: rgba(255,255,255,0.8); text-decoration: none; }
.ser-all li a:hover { background: rgba(255,255,255,0.05); color: #fff; }
.ser-all li a span { font: 12px var(--font-mono, monospace); color: rgba(255,255,255,0.45); padding-top: 2px; }
.ser-all li[aria-current] a { color: #fff; background: rgba(246,92,14,0.12); } .ser-all li[aria-current] a span { color: var(--or-hi); }
.ser:not(.ser-end) .ser-nav { display: none; }
.ser-end { margin: 0; }
.ser-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ser-nav a { display: grid; gap: 4px; padding: 14px 16px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); text-decoration: none; color: #fff; transition: border-color 200ms, transform 240ms; }
.ser-nav a:hover { border-color: var(--or-line); transform: translateY(-2px); }
.ser-nav em { font-style: normal; font-size: 12px; color: var(--or-hi); } .ser-nav b { font-size: 15px; line-height: 1.35; }
.ser-next { text-align: right; grid-column: 2; }
@media (max-width: 640px) { .ser-nav { grid-template-columns: 1fr; } .ser-next { grid-column: 1; text-align: left; } }
.ser-card { border-radius: 12px; border: 1px solid rgba(255,255,255,0.11); overflow: hidden; }
.ser-card-h { padding: 24px 26px 18px; display: grid; gap: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ser-card-h b { font-size: 20px; letter-spacing: -0.015em; } .ser-card-h p { margin: 0; font-size: 14.5px; color: rgba(255,255,255,0.74); max-width: 70ch; }
.ser-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ser-item { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 2px 10px; padding: 14px 26px; color: #fff; text-decoration: none; border-top: 1px solid rgba(255,255,255,0.06); transition: background-color 200ms; }
.ser-item:nth-child(-n+2) { border-top: 0; } .ser-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.06); }
.ser-item:hover { background: rgba(255,255,255,0.04); }
.ser-item span { grid-row: span 2; font: 13px var(--font-mono, monospace); color: var(--or-hi); padding-top: 2px; }
.ser-item b { font-size: 15.5px; font-weight: 600; } .ser-item em { font-style: normal; font-size: 12.5px; color: rgba(255,255,255,0.6); }
@media (max-width: 760px) { .ser-list { grid-template-columns: 1fr; } .ser-item:nth-child(even) { border-left: 0; } .ser-item:nth-child(2) { border-top: 1px solid rgba(255,255,255,0.06); } .ser-item { padding: 14px 18px; } }

/* ══ v19: phone pass ═══════════════════════════════════════════════════ */
@media (max-width: 620px) {
  .cust-grid { gap: 1px; background: rgba(255,255,255,0.10) !important; }
  .cust-t, .cust-t:nth-child(n) { border: 0 !important; background: #0d0d10; }
  .cust-t.m-hide { display: none; }
}
/* Text rhythm everywhere: paragraphs, lists and headings never sit flush. */
.doc p, .legal-doc p { margin: 0 0 16px; }
.doc ul, .doc ol, .legal-doc ul, .legal-doc ol { margin: 0 0 20px; padding-left: 22px; display: grid; gap: 8px; }
.legal-doc ul { list-style: disc; } .legal-doc ol { list-style: decimal; }
.legal-doc li::marker { color: var(--or-hi); }
.legal-doc .legal-meta { margin-bottom: 20px; }
.legal-doc .legal-box { margin: 24px 0 8px; }
.legal-doc .legal-box p:last-child { margin-bottom: 0; }
.faq p { padding-top: 2px; }
.jb-hero .crumb, .post-head .crumb, .ess-crumb { margin-bottom: 20px !important; }
.jb-hero .jb-h1 { margin-top: 0; }

@media (max-width: 620px) {
  /* Section and card spacing */
  .sec { padding-top: 64px; padding-bottom: 64px; }
  .sec.tight { padding-top: 28px; padding-bottom: 28px; }
  .phead { margin-bottom: 28px; }
  .phead .p-lg { margin-top: 14px; }
  .tile3, .uc, .pillar, .plan, .pc-card, .tm, .jb-day, .brief, .ess-author, .post-author, .rs-bench, .ser, .legal-box, .plan { padding: 20px !important; }
  .tiles3, .ucs, .plans, .pillars, .pcards { gap: 12px !important; }
  .tile3 .h3, .tile3 h3 { margin: 6px 0 8px; }
  .tile3 .p, .uc .p { margin: 0; }
  .frow { gap: 22px; }
  .frow-copy ul { margin-top: 14px; }
  .faq summary { padding: 18px 2px; }
  .faq p { padding: 2px 2px 18px; }
  /* Buttons: same width, full rows */
  .ctas { gap: 10px; }
  .ctas .btn { flex: 1 1 140px; justify-content: center; }
  .hx-copy .ctas .btn { height: 50px; font-size: 16px; min-width: 0; }
  /* Stat bands */
  .stats4 b { font-size: 26px !important; line-height: 1.1; }
  .stats4 > div, .stats4 > div + div { padding: 20px 16px !important; }
  /* Long tables become stacked rows */
  .doc .doc-tbl table, .legal-doc .doc-tbl table { min-width: 0 !important; }
  .doc .doc-tbl thead { display: none; }
  .doc .doc-tbl tr { display: grid; gap: 4px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .doc .doc-tbl tr:last-child { border-bottom: 0; }
  .doc .doc-tbl td { display: block; padding: 0 !important; border: 0 !important; min-width: 0 !important; }
  .doc .doc-tbl td:first-child { color: var(--or-hi) !important; font-size: 13px; letter-spacing: .02em; }
  /* Footer */
  .fx-grid { gap: 28px 16px; }
  .fx-legal { gap: 10px; }
  /* Research rows */
  .rs2-b > span:not(.tagset) { margin-top: 2px; }
  .rs2-d { margin-top: 4px; }
  .cr-meta { margin-top: 6px; }
  .pub { padding: 16px 4px; }
}
.pc-gpc { margin-top: 16px; }
.pc-card form .form-grid + .fld, .pc-card form .fld + .fld { margin-top: 16px; }
.pc-card form { display: grid; gap: 16px; } .pc-card form .form-grid + .fld { margin-top: 0; }
/* Juno developer pane: the priced reply in plain language under the JSON. */
.msg-juno { display: block; white-space: normal; font: 14.5px/1.6 var(--font); color: #e7e8ea; padding: 12px 14px; border-radius: 10px 10px 10px 3px;
  background: rgba(246,92,14,0.12); border: 1px solid rgba(246,92,14,0.4); margin-top: 2px; }
.msg-juno b { display: block; font-size: 12px; font-weight: 600; color: var(--or-hi); margin-bottom: 4px; }
.msg-juno strong { color: #fff; }

/* ===== v20: research figures (generated from tools/figures.css) ===== */
:is(.ess-body,.post-body,.fg-host) .fg :where(p, :is(.ess-body,.post-body,.fg-host) ul, :is(.ess-body,.post-body,.fg-host) ol, :is(.ess-body,.post-body,.fg-host) li) { margin: 0; padding: 0; list-style: none; font-size: inherit; line-height: inherit; color: inherit; }
:is(.ess-body,.post-body,.fg-host) .fg :where(ul, :is(.ess-body,.post-body,.fg-host) ol) { gap: 0; }
:is(.ess-body,.post-body,.fg-host) .fg { margin: 40px 0; padding: 20px 20px 14px; border-radius: 10px; background: #111113; border: 1px solid rgba(255,255,255,0.09); font-size: 14px; line-height: 1.45; color: rgba(255,255,255,0.85); }
:is(.ess-body,.post-body,.fg-host) .fg figcaption { margin: 0 0 14px; font-size: 15.5px; line-height: 1.35; color: #fff; }
:is(.ess-body,.post-body,.fg-host) .fg figcaption b { font-size: 15.5px; font-weight: 600; }
:is(.ess-body,.post-body,.fg-host) .fg .fg-src { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,0.5); }
:is(.ess-body,.post-body,.fg-host) .fg .fg-gh { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,0.6); line-height: 1.4; }
:is(.ess-body,.post-body,.fg-host) .fg .fg-gh em { display: block; font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 500; color: rgba(255,255,255,0.45); }
:is(.ess-body,.post-body,.fg-host) .fg-six { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
:is(.ess-body,.post-body,.fg-host) .fg-six li { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); }
:is(.ess-body,.post-body,.fg-host) .fg-six li.emp { border-color: rgba(123,107,255,0.55); background: rgba(123,107,255,0.08); }
:is(.ess-body,.post-body,.fg-host) .fg-six svg { width: 100%; max-width: 58px; height: auto; }
:is(.ess-body,.post-body,.fg-host) .fg-six .box { fill: none; stroke: #7B6BFF; stroke-width: 1.6; stroke-dasharray: 3 2; }
:is(.ess-body,.post-body,.fg-host) .fg-six .box.f { fill: #F65C0E; stroke: #F65C0E; stroke-dasharray: none; }
:is(.ess-body,.post-body,.fg-host) .fg-six .cab { fill: rgba(255,255,255,0.75); }
:is(.ess-body,.post-body,.fg-host) .fg-six .wh { fill: #0b0b0d; stroke: rgba(255,255,255,0.7); stroke-width: 1.4; }
:is(.ess-body,.post-body,.fg-host) .fg-six span { font-size: 11.5px; color: rgba(255,255,255,0.62); line-height: 1; }
:is(.ess-body,.post-body,.fg-host) .fg-six .emp span { color: #b3a9ff; }
:is(.ess-body,.post-body,.fg-host) .fg-split { display: flex; gap: 2px; margin-top: 14px; height: 30px; }
:is(.ess-body,.post-body,.fg-host) .fg-split i { background: #F65C0E; border-radius: 5px 0 0 5px; display: flex; align-items: center; padding: 0 10px; min-width: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-split i.e { background: #7B6BFF; border-radius: 0 5px 5px 0; justify-content: center; padding: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-split span { font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; }
:is(.ess-body,.post-body,.fg-host) .fg-trl + .fg-trl { margin-top: 16px; }
:is(.ess-body,.post-body,.fg-host) .fg-trl-h { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 6px; color: rgba(255,255,255,0.7); }
:is(.ess-body,.post-body,.fg-host) .fg-trl-h b { color: #fff; }
:is(.ess-body,.post-body,.fg-host) .fg-box { position: relative; height: 46px; border: 1.5px solid rgba(255,255,255,0.35); border-radius: 4px 10px 10px 4px; display: flex; align-items: center; overflow: hidden; background: repeating-linear-gradient(135deg, rgba(123,107,255,0.10) 0 6px, transparent 6px 12px); }
:is(.ess-body,.post-body,.fg-host) .fg-box i { height: 100%; background: #F65C0E; display: flex; align-items: center; padding: 0 10px; flex: none; }
:is(.ess-body,.post-body,.fg-host) .fg-box i span { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; }
:is(.ess-body,.post-body,.fg-host) .fg-box em { font-style: normal; font-size: 12.5px; color: #b3a9ff; padding: 0 12px; white-space: nowrap; }
:is(.ess-body,.post-body,.fg-host) .fg-grp + .fg-grp { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.07); }
:is(.ess-body,.post-body,.fg-host) .fg-bar { display: grid; grid-template-columns: 210px 1fr 90px; align-items: center; gap: 12px; margin: 8px 0; }
:is(.ess-body,.post-body,.fg-host) .fg-bar em { grid-column: 2 / -1; font-style: normal; font-size: 12px; color: rgba(255,255,255,0.5); margin-top: -4px; }
:is(.ess-body,.post-body,.fg-host) .fg-bl { font-size: 13px; color: rgba(255,255,255,0.82); }
:is(.ess-body,.post-body,.fg-host) .fg-bv { font-size: 13px; color: #fff; text-align: right; }
:is(.ess-body,.post-body,.fg-host) .fg-track { display: block; height: 14px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
:is(.ess-body,.post-body,.fg-host) .fg-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #F65C0E; }
:is(.ess-body,.post-body,.fg-host) .fg-track i.vi { background: #7B6BFF; }
:is(.ess-body,.post-body,.fg-host) .fg-track i.g { background: #3FD08F; }
:is(.ess-body,.post-body,.fg-host) .fg-track i.w { background: #F6B40E; }
:is(.ess-body,.post-body,.fg-host) .fg-call { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
:is(.ess-body,.post-body,.fg-host) .fg-call b { font-size: 22px; color: #3FD08F; white-space: nowrap; }
:is(.ess-body,.post-body,.fg-host) .fg-call span { font-size: 13px; color: rgba(255,255,255,0.7); }
:is(.ess-body,.post-body,.fg-host) .fg-flow { display: grid; grid-template-columns: 1fr 22px .9fr 22px 1fr; align-items: stretch; gap: 8px; }
:is(.ess-body,.post-body,.fg-host) .fg-col { padding: 14px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
:is(.ess-body,.post-body,.fg-host) .fg-col.core { border-color: rgba(246,92,14,0.55); background: rgba(246,92,14,0.08); }
:is(.ess-body,.post-body,.fg-host) .fg-col.out { border-color: rgba(63,208,143,0.4); background: rgba(63,208,143,0.05); }
:is(.ess-body,.post-body,.fg-host) .fg-col li { font-size: 13px; line-height: 1.45; padding: 7px 0; border-top: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.72); }
:is(.ess-body,.post-body,.fg-host) .fg-col li:first-child { border-top: 0; padding-top: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-col li b { display: block; color: #fff; font-weight: 600; }
:is(.ess-body,.post-body,.fg-host) .fg i { font-style: normal; }
:is(.ess-body,.post-body,.fg-host) .fg-arr { align-self: center; height: 2px; background: rgba(255,255,255,0.3); position: relative; }
:is(.ess-body,.post-body,.fg-host) .fg-arr::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid rgba(255,255,255,0.5); border-right: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
:is(.ess-body,.post-body,.fg-host) .fg-pal { display: grid; grid-template-columns: repeat(13, 1fr); gap: 3px; padding: 6px; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 3px 8px 8px 3px; }
:is(.ess-body,.post-body,.fg-host) .fg-pal i { aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,0.06); }
:is(.ess-body,.post-body,.fg-host) .fg-pal i.on { background: #7B6BFF; }
:is(.ess-body,.post-body,.fg-host) .fg-pal i.new { background: #F65C0E; }
:is(.ess-body,.post-body,.fg-host) .fg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
:is(.ess-body,.post-body,.fg-host) .fg-chips span { display: grid; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.3; }
:is(.ess-body,.post-body,.fg-host) .fg-chips b { font-size: 15px; color: #fff; }
:is(.ess-body,.post-body,.fg-host) .fg-tl { display: grid; grid-template-columns: repeat(6, 1fr); }
:is(.ess-body,.post-body,.fg-host) .fg-tl li { position: relative; padding: 22px 12px 0 0; border-top: 2px solid rgba(123,107,255,0.6); display: grid; gap: 4px; align-content: start; }
:is(.ess-body,.post-body,.fg-host) .fg-tl li.now { border-top-color: #F65C0E; }
:is(.ess-body,.post-body,.fg-host) .fg-tl li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: #111113; border: 2px solid #7B6BFF; }
:is(.ess-body,.post-body,.fg-host) .fg-tl li.now::before { border-color: #F65C0E; background: #F65C0E; }
:is(.ess-body,.post-body,.fg-host) .fg-tl time { font-size: 12px; font-weight: 600; color: #b3a9ff; }
:is(.ess-body,.post-body,.fg-host) .fg-tl li.now time { color: #FF8A4C; }
:is(.ess-body,.post-body,.fg-host) .fg-tl b { font-size: 13.5px; color: #fff; line-height: 1.3; }
:is(.ess-body,.post-body,.fg-host) .fg-tl span { font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.65); }
:is(.ess-body,.post-body,.fg-host) .fg-stack { display: grid; gap: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-layer { padding: 14px 16px; border-radius: 8px; border: 1px solid; }
:is(.ess-body,.post-body,.fg-host) .fg-layer.top { border-color: rgba(246,92,14,0.5); background: rgba(246,92,14,0.07); }
:is(.ess-body,.post-body,.fg-host) .fg-layer.base { border-color: rgba(123,107,255,0.5); background: rgba(123,107,255,0.08); }
:is(.ess-body,.post-body,.fg-host) .fg-layer ul { display: flex; flex-wrap: wrap; gap: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-layer li { font-size: 12.5px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.88); }
:is(.ess-body,.post-body,.fg-host) .fg-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
:is(.ess-body,.post-body,.fg-host) .fg-steps li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); }
:is(.ess-body,.post-body,.fg-host) .fg-steps span { font-size: 12px; font-weight: 600; color: #FF8A4C; }
:is(.ess-body,.post-body,.fg-host) .fg-steps b { font-size: 13.5px; color: #fff; line-height: 1.35; }
:is(.ess-body,.post-body,.fg-host) .fg-steps em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.5); }
:is(.ess-body,.post-body,.fg-host) .fg-steps em.ok { color: #3FD08F; }
:is(.ess-body,.post-body,.fg-host) .fg-q { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); font-size: 14px; color: #fff; }
:is(.ess-body,.post-body,.fg-host) .fg-q span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #FF8A4C; }
:is(.ess-body,.post-body,.fg-host) .fg .fg-ans { margin: 14px 2px; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.88); }
:is(.ess-body,.post-body,.fg-host) .fg-sites li { display: grid; grid-template-columns: 110px 1fr 70px 96px 112px; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid rgba(255,255,255,0.06); font-size: 13px; }
:is(.ess-body,.post-body,.fg-host) .fg-sites b { color: #fff; font-weight: 600; }
:is(.ess-body,.post-body,.fg-host) .fg-sites em { font-style: normal; color: rgba(255,255,255,0.65); white-space: nowrap; }
:is(.ess-body,.post-body,.fg-host) .fg-st { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; justify-self: start; white-space: nowrap; }
:is(.ess-body,.post-body,.fg-host) .fg-st.r { color: #FF8A4C; background: rgba(246,92,14,0.12); }
:is(.ess-body,.post-body,.fg-host) .fg-st.w { color: #F6C44E; background: rgba(246,180,14,0.12); }
:is(.ess-body,.post-body,.fg-host) .fg-st.g { color: #3FD08F; background: rgba(63,208,143,0.12); }
:is(.ess-body,.post-body,.fg-host) .fg-srcs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; font-size: 12px; }
:is(.ess-body,.post-body,.fg-host) .fg-srcs span { color: rgba(255,255,255,0.5); margin-right: 4px; }
:is(.ess-body,.post-body,.fg-host) .fg-srcs i { font-style: normal; padding: 3px 9px; border-radius: 6px; background: rgba(123,107,255,0.12); color: #c9c2ff; }
:is(.ess-body,.post-body,.fg-host) .fg-ladder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; }
:is(.ess-body,.post-body,.fg-host) .fg-ladder li { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); min-height: calc(110px + var(--lv) * 34px); }
:is(.ess-body,.post-body,.fg-host) .fg-ladder li:nth-child(2) { border-color: rgba(123,107,255,0.5); background: rgba(123,107,255,0.07); }
:is(.ess-body,.post-body,.fg-host) .fg-ladder li:nth-child(3) { border-color: rgba(246,92,14,0.55); background: rgba(246,92,14,0.08); }
:is(.ess-body,.post-body,.fg-host) .fg-ladder b { font-size: 16px; color: #fff; }
:is(.ess-body,.post-body,.fg-host) .fg-ladder span { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.8); }
:is(.ess-body,.post-body,.fg-host) .fg-ladder em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.5); }
:is(.ess-body,.post-body,.fg-host) .fg .fg-log { margin-top: 10px; padding: 9px 14px; border-radius: 8px; background: rgba(63,208,143,0.07); border: 1px solid rgba(63,208,143,0.3); font-size: 13px; color: #9be8c4; }
:is(.ess-body,.post-body,.fg-host) .fg-hub { display: grid; grid-template-columns: 170px 1fr; gap: 18px; align-items: center; }
:is(.ess-body,.post-body,.fg-host) .fg-core { display: grid; place-content: center; text-align: center; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(246,92,14,0.6); background: radial-gradient(circle, rgba(246,92,14,0.18), rgba(246,92,14,0.03)); }
:is(.ess-body,.post-body,.fg-host) .fg-core b { color: #fff; font-size: 16px; }
:is(.ess-body,.post-body,.fg-host) .fg-core span { color: #FF8A4C; font-size: 12.5px; }
:is(.ess-body,.post-body,.fg-host) .fg-hub ul { display: grid; gap: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-hub li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border-left: 2px solid #7B6BFF; font-size: 13px; }
:is(.ess-body,.post-body,.fg-host) .fg-hub li b { color: #fff; }
:is(.ess-body,.post-body,.fg-host) .fg-hub li span { color: rgba(255,255,255,0.72); }
:is(.ess-body,.post-body,.fg-host) .fg-primitives .doc-tbl { margin: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-primitives td, :is(.ess-body,.post-body,.fg-host) .fg-primitives th { font-size: 13px; }
:is(.ess-body,.post-body,.fg-host) .fg-map { display: grid; grid-template-columns: 1fr 22px 1.3fr 22px 1fr; gap: 8px; align-items: center; }
:is(.ess-body,.post-body,.fg-host) .fg-mside ul { display: grid; gap: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-mside li { display: grid; gap: 1px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(246,92,14,0.35); font-size: 12.5px; }
:is(.ess-body,.post-body,.fg-host) .fg-mside.pa li { border-color: rgba(123,107,255,0.45); padding: 14px 12px; }
:is(.ess-body,.post-body,.fg-host) .fg-mside li b { color: #fff; font-size: 13px; font-weight: 600; }
:is(.ess-body,.post-body,.fg-host) .fg-mside li span { color: rgba(255,255,255,0.6); }
:is(.ess-body,.post-body,.fg-host) .fg-mcore { padding: 16px; border-radius: 10px; border: 1px solid rgba(123,107,255,0.55); background: linear-gradient(180deg, rgba(123,107,255,0.10), rgba(246,92,14,0.05)); }
:is(.ess-body,.post-body,.fg-host) .fg-mcore .fg-gh { color: #FF8A4C; }
:is(.ess-body,.post-body,.fg-host) .fg .fg-mt { display: block; font-size: 17px; color: #fff; margin-bottom: 4px; }
:is(.ess-body,.post-body,.fg-host) .fg .fg-md { font-size: 12.5px; color: rgba(255,255,255,0.7); margin-bottom: 14px; }
:is(.ess-body,.post-body,.fg-host) .fg .fg-gh2 { color: rgba(255,255,255,0.5); margin-bottom: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-ops li { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,0.06); font-size: 12.5px; color: rgba(255,255,255,0.75); }
:is(.ess-body,.post-body,.fg-host) .fg-ops code { font: 600 10.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; color: #FF8A4C; background: rgba(246,92,14,0.10); border: 1px solid rgba(246,92,14,0.35); border-radius: 5px; padding: 4px 0; text-align: center; }
:is(.ess-body,.post-body,.fg-host) .fg-arr.rev::after { right: auto; left: -1px; border-left: 0; border-right: 7px solid rgba(255,255,255,0.5); }
:is(.ess-body,.post-body,.fg-host) .fg-one { display: grid; grid-template-columns: 1.25fr 22px 1fr 22px 1fr; gap: 8px; align-items: center; }
:is(.ess-body,.post-body,.fg-host) .fg-srcl { display: grid; gap: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-srcl li { display: grid; gap: 4px; padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,0.03); border: 1px solid rgba(246,92,14,0.35); }
:is(.ess-body,.post-body,.fg-host) .fg-srcl b { font-size: 12.5px; color: #fff; font-weight: 600; }
:is(.ess-body,.post-body,.fg-host) .fg-srcl code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,0.6); overflow-wrap: anywhere; }
:is(.ess-body,.post-body,.fg-host) .fg-rec { padding: 14px; border-radius: 10px; border: 1px solid rgba(123,107,255,0.55); background: rgba(123,107,255,0.08); }
:is(.ess-body,.post-body,.fg-host) .fg-rec pre { margin: 0; padding: 0; background: none; border: 0; font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,0.85); white-space: pre; overflow-x: auto; }
:is(.ess-body,.post-body,.fg-host) .fg-rec .k { color: #FF8A4C; } .fg-rec .s { color: #9be8c4; } .fg-rec .n { color: #c9c2ff; }
:is(.ess-body,.post-body,.fg-host) .fg-outs { display: grid; gap: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-outs li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; background: rgba(63,208,143,0.05); border: 1px solid rgba(63,208,143,0.35); font-size: 12.5px; }
:is(.ess-body,.post-body,.fg-host) .fg-outs b { color: #fff; font-size: 13px; } .fg-outs span { color: rgba(255,255,255,0.65); }
@media (min-width: 1180px) {
:is(.ess-body,.post-body,.fg-host) .fg-wide { margin-left: -56px; margin-right: -56px; }
}
@media (max-width: 760px) {
:is(.ess-body,.post-body,.fg-host) .fg-flow, :is(.ess-body,.post-body,.fg-host) .fg-map, :is(.ess-body,.post-body,.fg-host) .fg-one { grid-template-columns: 1fr; }
:is(.ess-body,.post-body,.fg-host) .fg-arr, :is(.ess-body,.post-body,.fg-host) .fg-arr.rev { width: 2px; height: 18px; justify-self: center; }
:is(.ess-body,.post-body,.fg-host) .fg-arr.rev::after { left: -4px; right: auto; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid rgba(255,255,255,0.5); border-bottom: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-arr::after { right: -4px; top: auto; bottom: -2px; border: 5px solid transparent; border-top: 7px solid rgba(255,255,255,0.5); border-bottom: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-tl { grid-template-columns: 1fr; }
:is(.ess-body,.post-body,.fg-host) .fg-tl li { border-top: 0; border-left: 2px solid rgba(123,107,255,0.6); padding: 0 0 16px 18px; }
:is(.ess-body,.post-body,.fg-host) .fg-tl li.now { border-left-color: #F65C0E; }
:is(.ess-body,.post-body,.fg-host) .fg-tl li::before { top: 0; left: -7px; }
:is(.ess-body,.post-body,.fg-host) .fg-steps { grid-template-columns: 1fr; }
:is(.ess-body,.post-body,.fg-host) .fg-ladder { grid-template-columns: 1fr; }
:is(.ess-body,.post-body,.fg-host) .fg-ladder li { min-height: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-two { grid-template-columns: 1fr; }
:is(.ess-body,.post-body,.fg-host) .fg-sites li { grid-template-columns: 1fr auto auto; row-gap: 6px; }
:is(.ess-body,.post-body,.fg-host) .fg-sites .fg-track { grid-column: 1 / -1; grid-row: 2; }
:is(.ess-body,.post-body,.fg-host) .fg-sites .fg-st { grid-column: 3; grid-row: 1; justify-self: end; }
:is(.ess-body,.post-body,.fg-host) .fg-sites b { grid-column: 1; grid-row: 1; }
:is(.ess-body,.post-body,.fg-host) .fg-sites em { grid-row: 3; }
:is(.ess-body,.post-body,.fg-host) .fg-hub { grid-template-columns: 1fr; }
:is(.ess-body,.post-body,.fg-host) .fg-core { width: 140px; justify-self: center; }
}
@media (max-width: 620px) {
:is(.ess-body,.post-body,.fg-host) .fg { padding: 16px 14px 12px; margin: 28px 0; }
:is(.ess-body,.post-body,.fg-host) .fg-six { gap: 4px; }
:is(.ess-body,.post-body,.fg-host) .fg-six li { padding: 8px 2px; }
:is(.ess-body,.post-body,.fg-host) .fg-six span { font-size: 10px; }
:is(.ess-body,.post-body,.fg-host) .fg-split span { font-size: 11px; }
:is(.ess-body,.post-body,.fg-host) .fg-bar { grid-template-columns: 1fr 84px; gap: 4px 10px; }
:is(.ess-body,.post-body,.fg-host) .fg-bar .fg-track { grid-column: 1 / -1; grid-row: 2; }
:is(.ess-body,.post-body,.fg-host) .fg-bar em { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
:is(.ess-body,.post-body,.fg-host) .fg-box em { font-size: 11.5px; padding: 0 8px; }
:is(.ess-body,.post-body,.fg-host) .fg-hub li { grid-template-columns: 1fr; gap: 2px; }
:is(.ess-body,.post-body,.fg-host) .fg-primitives td::before { content: attr(data-label); display: block; font-size: 11px; color: rgba(255,255,255,0.45); }
:is(.ess-body,.post-body,.fg-host) .fg-primitives tr { gap: 10px; }
}

/* v21: keep each painting's subject in frame when covers crop wide */
img.art[src*="/longhaul."] { object-position: 50% 80%; }
img.art[src*="/snow."] { object-position: 50% 82%; }
img.art[src*="/forest."] { object-position: 50% 72%; }
img.art[src*="/dock."], img.art[src*="/warehouse."] { object-position: 50% 68%; }
img.art[src*="/bridge."] { object-position: 50% 62%; }
img.art[src*="/port."], img.art[src*="/ship."] { object-position: 50% 62%; }
img.art[src*="/rail."] { object-position: 50% 66%; }
img.art[src*="/highway."], img.art[src*="/mountain."] { object-position: 50% 64%; }

/* v22: IOI schema operations */
.ops8 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ops8 li { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
.ops8 code { justify-self: start; font: 600 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; color: #FF8A4C; background: rgba(246,92,14,0.10); border: 1px solid rgba(246,92,14,0.4); border-radius: 6px; padding: 5px 10px; }
.ops8 span { font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.82); }
@media (max-width: 900px) { .ops8 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ops8 { grid-template-columns: 1fr; } .ops8 li { padding: 14px 16px; } }
.fg-host .fg { margin: 32px 0 0; }
.dev[data-hue="schema"] { --h1: #F65C0E; --h2: #7B6BFF; }
/* v23: IOI page widths match the card grid */
.ops8 { max-width: 1040px; margin: 0 auto; }
.fg-host { max-width: 1040px; margin: 0 auto 20px; }
.fg-host .fg.fg-wide { margin-left: 0; margin-right: 0; }
/* v24: free note under action buttons */
.free-note { margin: 10px 0 0; font-size: 13px; color: rgba(255,255,255,0.6); }
.free-note.c { text-align: center; }
/* v25: compliance tiles */
.cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1040px; margin: 0 auto; }
.cmp-t { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 22px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.11); background: rgba(255,255,255,0.03); }
.cmp-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; }
.cmp-ic svg { width: 32px; height: 32px; }
.cmp-soc2 { color: #FF8A4C; background: rgba(246,92,14,0.12); border: 1px solid rgba(246,92,14,0.4); }
.cmp-ccpa { color: #3FD08F; background: rgba(63,208,143,0.10); border: 1px solid rgba(63,208,143,0.35); }
.cmp-gdpr { color: #b3a9ff; background: rgba(123,107,255,0.12); border: 1px solid rgba(123,107,255,0.45); }
.cmp-t .h3 { margin: 2px 0 2px; }
.cmp-k { margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,0.6); }
.cmp-t .p { margin: 0 0 10px; font-size: 14.5px; }
.cmp-a { font-size: 13.5px; color: var(--or-hi); text-decoration: underline; text-underline-offset: 3px; }
.cmp-sm .cmp-t { align-items: center; }
@media (max-width: 900px) { .cmp { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .dev-tabs { width: auto; max-width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; } .dev-tabs .seg2 { flex: none; } }
/* v26: Juno route follows the detour and the added drop */
.j2 path.j2-rp { fill: none; stroke: #3FD08F; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.j2.s6 path.j2-rp { stroke-dashoffset: 0; transition: stroke-dashoffset 3s cubic-bezier(.45,0,.2,1); }
.j2.reset path.j2-rp, .j2:not(.s6) path.j2-rp { transition: none; }
.j2.s6 .j2-dot, .j2 .j2-dot { transform: none; transition: none; }
.j2-new { opacity: 0; transform: translateY(6px); transform-box: fill-box; transition: opacity 400ms, transform 400ms; }
.j2.s3 .j2-new { opacity: 1; transform: none; }
.j2.reset .j2-new { transition: none; }
.ctas .free-note { flex-basis: 100%; max-width: none; margin: 4px 0 0; }
.ctas.c .free-note { text-align: center; }
/* related research cards: one height per row */
#related .pcards { align-items: stretch; }
#related .pcards > * { height: 100%; }
/* logo tiles: ring on hover, and the orange hover border survives the glass override */
.inv-t:hover { border-color: var(--or-line) !important; background: var(--or-soft); }
.cust-t { position: relative; transition: background 200ms; }
.cust-t:hover { background: rgba(246,92,14,0.06); }
.cust-t:hover img, .inv-t:hover img { opacity: 1; }
/* v27: Juno trip stops at the pickup and the drop; richer green; existing cargo in Oway indigo */
.j2 { --j2g: #1BF28E; }
.j2.s6 path.j2-rp { transition: none; animation: j2trip 5.4s linear forwards; }
@keyframes j2trip {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  24% { stroke-dashoffset: .7445; }
  40% { stroke-dashoffset: .7445; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  62% { stroke-dashoffset: .4157; }
  78% { stroke-dashoffset: .4157; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  100% { stroke-dashoffset: 0; }
}
.j2.reset path.j2-rp, .j2:not(.s6) path.j2-rp { animation: none; }
.j2 path.j2-rp { stroke: var(--j2g); stroke-width: 2.6; filter: drop-shadow(0 0 5px rgba(27,242,142,0.55)); }
.j2 .j2-dot { fill: var(--j2g); filter: drop-shadow(0 0 8px rgba(27,242,142,0.85)); }
.j2 .j2-k.g { fill: var(--j2g); }
.j2 .j2-st.done .j2-b, .j2.s4 .j2-ck i { background: var(--j2g); border-color: var(--j2g); }
.j2 .j2-st.done .j2-b .icon, .j2.s4 .j2-ck i .icon { color: #04130b; }
.j2 .j2-p { fill: rgba(30,0,255,0.28); stroke: rgba(82,54,255,0.95); }
/* Oway OS Instant Quote demo: the same liquid glass as the IOI Search pane */
.qd.card { background: var(--gl-bg) !important; border: 1px solid rgba(255,255,255,0.11) !important; border-radius: 10px;
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: var(--gl-shadow), 0 30px 80px -20px rgba(0,0,0,0.5) !important; }
.lg-warp .qd.card { backdrop-filter: url(#lg-warp) blur(6px) saturate(160%); }
.qd .input { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.12); }
.qd .qd-out { border-top-color: rgba(255,255,255,0.1); }
.qd.card.accent::before { display: none; }
.photo-credits { max-width: 1040px; margin: 8px auto 28px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.45); }
.photo-credits a { color: rgba(255,255,255,0.6); text-decoration: underline; text-underline-offset: 2px; }
.fx-legal { padding: 18px 0 18px; }
.mg-p.g3f { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 280px); gap: 28px; }
.mg-p.g3f .mg-d { font-size: 12.5px; }
/* v28: legal subtext under the Juno demo, contact emergency note */
.j2-legal{margin:12px auto 0;max-width:760px;font-size:12px;line-height:1.5;color:var(--fg-faint);text-align:center}
.form-note{margin:4px 0 14px;font-size:13px;line-height:1.5;color:var(--fg-faint)}
.form-note a{color:inherit;text-decoration:underline}
/* v28: compact IOI Search demo so a full answer fits without scrolling */
#search .ioiapp .ans{padding:16px 24px 6px}
#search .ioiapp .ans-q{font-size:22px}
#search .ioiapp .ans-body{margin-top:12px;font-size:15px}
#search .ioiapp .mstrip-item{padding:9px 14px}
#search .ioiapp .art-head{padding:10px 16px}
#search .ioiapp .art-body.pad{padding:12px 16px}
#search .ioiapp .geo-legend{margin-top:8px!important}
/* v28: two Juno scenes on one loop, cross-faded */
.j2x { display: grid; }
.j2x > .j2 { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 700ms ease, visibility 0s linear 700ms; }
.j2x > .j2.act { opacity: 1; visibility: visible; transition: opacity 700ms ease, visibility 0s; }
.j2x > .j2.reset .j2-svg, .j2x > .j2.reset .j2-steps { opacity: 1; }
.j2-lp { fill: rgba(30,0,255,0.28); stroke: rgba(82,54,255,0.95); }
.j2-lin { fill: #F65C0E; stroke: #FFB089; stroke-width: 1; }
@media (max-width: 600px) { .j2-leg { display: none; } }
/* v28b: condensed Juno demo, less space above and below the animation */
.j2x .j2 { min-height: 0; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; }
.j2x .j2-svg { padding: 4px 4px 4px 12px; }
.j2x .j2-panel { margin: 12px 12px 12px 0; padding: 12px 14px 6px; }
.j2x .j2-ph { padding-bottom: 8px; }
.j2x .j2-steps { padding-top: 2px; }
.j2x .j2-st { padding: 6px 0; gap: 9px; }
.j2x .j2-st b { font-size: 12.5px; line-height: 1.3; }
.j2x .j2-st > div > span { font-size: 11px; line-height: 1.35; margin-top: 1px; }
.j2x .j2-cks { gap: 2px; margin-top: 4px; }
.j2x .j2-ck { font-size: 10.5px; align-items: flex-start; }
.j2x .j2-ck i { flex: none; margin-top: 1px; }
@media (max-width: 900px) { .j2x .j2 { grid-template-columns: 1fr; } .j2x .j2-panel { margin: 0 12px 12px; } }
/* v28c: BCO freight is blue, Oway freight is orange */
.j2-ex { margin-left: auto; font: 500 10.5px var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; color: rgba(255,255,255,0.5); text-transform: uppercase; }
.j2-lb { fill: rgba(30,0,255,0.45); stroke: rgba(82,54,255,0.95); }
.j2 .j2-k.bc { fill: #A89DFF; }
.j2-stop.bc { fill: #5B47FF; }
.j2-det.bl { stroke: #7B6BFF; }
/* v28d: example 2, an empty backhaul. Oway load on first (orange), carrier BCO load at the doors (blue) */
.j2-o, .j2-bco { opacity: 0; transform-box: fill-box; transform-origin: center; }
.j2-o { fill: #F65C0E; stroke: #FFB089; stroke-width: 1; }
.j2-bco { fill: rgba(30,0,255,0.45); stroke: rgba(82,54,255,0.95); stroke-width: 1; }
.j2c.s5 .j2-e.po { stroke: #F65C0E; fill: rgba(246,92,14,0.12); }
.j2c.s5 .j2-e.pb { stroke: #7B6BFF; fill: rgba(56,37,253,0.16); }
.j2c.s6 .j2-o { animation: j2cO 7s linear forwards; animation-delay: calc(var(--d) * 20ms); }
.j2c.s6 .j2-bco { animation: j2cB 7s linear forwards; animation-delay: calc(var(--d) * 20ms); }
@keyframes j2cO { 0%, 15% { opacity: 0; transform: translateY(-8px); } 22% { opacity: 1; transform: none; } 95% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
@keyframes j2cB { 0%, 41% { opacity: 0; transform: translateY(-8px); } 48% { opacity: 1; transform: none; } 71% { opacity: 1; transform: none; } 77%, 100% { opacity: 0; transform: translateY(6px); } }
.j2c.s6 path.j2-rp { animation: j2tripC 7s linear forwards; }
@keyframes j2tripC {
  0% { stroke-dashoffset: 1; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  14% { stroke-dashoffset: .7964; } 24% { stroke-dashoffset: .7964; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  40% { stroke-dashoffset: .5644; } 50% { stroke-dashoffset: .5644; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  70% { stroke-dashoffset: .2809; } 80% { stroke-dashoffset: .2809; animation-timing-function: cubic-bezier(.45,0,.3,1); }
  100% { stroke-dashoffset: 0; }
}
.j2c .j2-book { transition-delay: 6.6s; }
@media (prefers-reduced-motion: reduce) { .j2c .j2-o, .j2c .j2-bco { opacity: 1; animation: none; } }
/* v29: Juno demo on phones. Short city labels replace the long route labels, secondary text is
   hidden so nothing overlaps, and the step list is compact. */
.j2-mob { display: none; }
.j2 .j2-k.w { fill: rgba(255,255,255,0.75); }
@media (max-width: 600px) {
  .j2 .j2-k { font-size: 26px; letter-spacing: 0.03em; }
  .j2 .j2-route text { display: none; }
  .j2 .j2-route .j2-mob, .j2 .j2-route .j2-mob .j2-k { display: inline !important; }
  .j2 .j2-route .j2-book text:first-child { display: inline; font-size: 24px; }
  .j2 .j2-price .j2-k.o, .j2 .j2-price .j2-k.g, .j2 .j2-card, .j2 .j2-link { display: none; }
  .j2 .j2-big { font-size: 46px; transform: translateY(16px); }
  .j2x .j2-panel { margin: 0 10px 10px; padding: 10px 12px 4px; }
  .j2x .j2-st { padding: 7px 0; }
  .j2x .j2-st b { font-size: 13px; }
  .j2x .j2-st > div > span { font-size: 11px; }
  .j2x .j2-cks { display: none; }
  .j2-legal { font-size: 11px; padding: 0 8px; }
}
/* v29: the mobile menu always scrolls on its own (touch and wheel). */
.mm { -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.mm-open .ck-banner, .mm-open .ck-modal { visibility: hidden; }
/* v29: cookie banner and settings use the navbar's black warped glass. */
.ck-in, .ck-card { background: rgba(10,10,11,0.55) !important; -webkit-backdrop-filter: blur(8px) saturate(170%) !important; backdrop-filter: blur(8px) saturate(170%) !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 18px 50px rgba(0,0,0,0.45); }
.lg-warp .ck-in { backdrop-filter: url(#lg-warp) blur(12px) saturate(170%) !important; }
.lg-warp .ck-card { backdrop-filter: url(#lg-warp) blur(18px) saturate(170%) !important; }
.ck-in { -webkit-backdrop-filter: blur(14px) saturate(170%) !important; }
.ck-card { -webkit-backdrop-filter: blur(20px) saturate(170%) !important; background: rgba(10,10,11,0.8) !important; }
.ck-in { background: rgba(10,10,11,0.72) !important; }
@media (max-width: 600px) {
  .ck-banner { left: 10px; right: 10px; width: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .ck-in { padding: 14px 14px 12px !important; }
  .ck-t { font-size: 14px; } .ck-p { font-size: 12.5px; line-height: 1.5; }
  .ck-btns { margin-top: 10px; gap: 6px; } .ck-btns .btn { height: 34px; font-size: 13px; padding: 0 10px; }
}
.ck-btns .btn:not(.primary) { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
/* v29: a lighter home page on phones. A short intro, no repeated label, and cards that lead with the headline. */
.hx-short { display: none; }
@media (max-width: 600px) {
  .hx-long { display: none; }
  .hx-short { display: block; }
  .hx-copy > .lbl { display: none; }
  .split-c > p { display: none; }
  .ioi-intro-c ul { display: none; }
}